Merge pull request #31 from kjannette/profq

refactor

src/Components/SignupPage/SignupPage.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import Col from "react-bootstrap/Col";
 import Form from "react-bootstrap/Form";
 import Row from "react-bootstrap/Row";
@@ -10,7 +10,6 @@ import TextInput from "../../pageElements/TextInput";
 import { v4 as uuidv4 } from "uuid";
 import { collection, setDoc, doc } from "firebase/firestore";
 import { splitEvery } from "../../Utils/Array";
-import PaymentModal from "../Modals/PaymentModal";
 import {
   getFormDataDefaults,
   getValidatedFormData,
@@ -19,26 +18,17 @@ import {
 } from "../../Utils/Form";
 import { objectMap } from "../../Utils/Object";
 import { signupfields } from "../../Constants/Fields/Signupfields";
-import { paymentfields } from "../../Constants/Fields/PaymentFields";
 import "../../styles/signup.scss";
 
 const SignupPage = () => {
   const navigate = useNavigate();
   const [notice, setNotice] = useState("");
-  const [isMobile, setIsMobile] = useState(window.innerWidth < 440);
-  useEffect(() => {
-    setIsMobile(window.innerWidth < 440);
-  });
+
   const fieldsChunkSize = 2;
+
   const [isBusy, setIsBusy] = useState(false);
   const [data, setData] = useState(getFormDataDefaults(signupfields));
 
-  const [paymentdata, setPaymentdata] = useState(
-    getFormDataDefaults(paymentfields)
-  );
-
-  const [showPaymentModal, setShowPaymentModal] = useState(false);
-
   const handleChangeInput = (e, name) => {
     const newData = handleFormDataChange(e, name, data, signupfields);
     if (newData !== null) {
@@ -46,13 +36,6 @@ const SignupPage = () => {
     }
   };
 
-  const handleChangePaymentInput = (e, name) => {
-    const newData = handleFormDataChange(e, name, data, paymentfields);
-    if (newData !== null) {
-      setPaymentdata(newData);
-    }
-  };
-
   const validateData = () => {
     const newData = getValidatedFormData(data, signupfields);
     const hasErrors = isFormDataHasErrors(newData);
@@ -60,13 +43,6 @@ const SignupPage = () => {
     return hasErrors ? null : objectMap(({ value }) => value, newData);
   };
 
-  const validatePaymentData = () => {
-    const newData = getValidatedFormData(data, signupfields);
-    const hasErrors = isFormDataHasErrors(newData);
-    setPaymentdata(newData);
-    return hasErrors ? null : objectMap(({ value }) => value, newData);
-  };
-
   async function saveUserData(authId, dataValues) {
     const appUserId = uuidv4();
     const firmId = uuidv4();
@@ -110,115 +86,31 @@ const SignupPage = () => {
     }
   }
 
-  async function handleStripePaymentAuthorization(paymentDataValues) {
-    console.log(paymentDataValues);
-    // Stripe API calls, etc
-  }
-
   const handleSignup = async (e) => {
     e.preventDefault();
-    const paymentDataValues = validatePaymentData();
-    if (paymentDataValues === null) {
+    if (isBusy) {
       return;
     }
-    /*
-    const paymentSuccess = handleStripePaymentAuthorization(paymentDataValues);
-
-    if (paymentSuccess) {
-      if (isBusy) {
-        return;
-      }
-
-      setIsBusy(true);
-      try {
-        const userCredential = await createUserWithEmailAndPassword(
-          auth,
-          dataValues.email,
-          dataValues.password
-        );
-        const user = userCredential.user;
-        await saveUserData(user.uid, dataValues);
-        navigate("/");
-      } catch (error) {
-        setIsBusy(false);
-        setNotice(
-          error.message || "Sorry, something went wrong. Please try again."
-        );
-      }
-    }
-    */
-  };
-
-  const handleProceedToPayment = () => {
-    /*
     const dataValues = validateData();
     if (dataValues === null) {
       return;
     }
-*/
-    setShowPaymentModal(true);
-  };
-
-  const handleCancel = () => {
-    setShowPaymentModal(false);
-  };
-
-  const MobileForm = () => {
-    return splitEvery(
-      Object.keys(signupfields).slice(0, -2),
-      fieldsChunkSize
-    ).map((names, j) => (
-      <Col key={`row${j}`}>
-        {names.map((name, i) => (
-          <Col
-            key={`${name}${i + fieldsChunkSize * j}`}
-            className="signup-mobile-column"
-          >
-            <TextInput
-              name={name}
-              value={data[name].value}
-              onChange={(e) => handleChangeInput(e, name)}
-              error={data[name].error}
-              message={data[name].message}
-              label={
-                data[name].value.length === 0 ? signupfields[name].label : ""
-              }
-              type={signupfields[name].type}
-              values={signupfields[name].values}
-              disabled={isBusy}
-            />
-          </Col>
-        ))}
-      </Col>
-    ));
-  };
-
-  const DesktopForm = () => {
-    return splitEvery(
-      Object.keys(signupfields).slice(0, -2),
-      fieldsChunkSize
-    ).map((names, j) => (
-      <Row key={`row${j}`}>
-        {names.map((name, i) => (
-          <Col key={`${name}${i + fieldsChunkSize * j}`} className="mb-3">
-            {console.log("data", data)}
-            <TextInput
-              name={name}
-              value={data[name].value}
-              onChange={(e) => handleChangeInput(e, name)}
-              error={data[name].error}
-              message={data[name].message}
-              label={
-                data[name].value.length === 0 ? signupfields[name].label : ""
-              }
-              type={signupfields[name].type}
-              values={signupfields[name].values}
-              disabled={isBusy}
-            />
-          </Col>
-        ))}
-      </Row>
-    ));
+    setIsBusy(true);
+    try {
+      const userCredential = await createUserWithEmailAndPassword(
+        auth,
+        dataValues.email,
+        dataValues.password
+      );
+      const user = userCredential.user;
+      await saveUserData(user.uid, dataValues);
+      navigate("/");
+    } catch (error) {
+      setIsBusy(false);
+      setNotice(
+        error.message || "Sorry, something went wrong. Please try again."
+      );
+    }
   };
 
   return (
@@ -228,7 +120,32 @@ const SignupPage = () => {
           <h1 className="signup-header-text">Create a Novodraft account</h1>
         </div>
         <Form className="signup-form">
-          {isMobile ? <MobileForm /> : <DesktopForm />}
+          {splitEvery(
+            Object.keys(signupfields).slice(0, -2),
+            fieldsChunkSize
+          ).map((names, j) => (
+            <Row key={`row${j}`}>
+              {names.map((name, i) => (
+                <Col key={`${name}${i + fieldsChunkSize * j}`} className="mb-3">
+                  <TextInput
+                    name={name}
+                    value={data[name].value}
+                    onChange={(e) => handleChangeInput(e, name)}
+                    error={data[name].error}
+                    message={data[name].message}
+                    label={
+                      data[name].value.length === 0
+                        ? signupfields[name].label
+                        : ""
+                    }
+                    type={signupfields[name].type}
+                    values={signupfields[name].values}
+                    disabled={isBusy}
+                  />
+                </Col>
+              ))}
+            </Row>
+          ))}
           <Row>
             <Col className="mb-3">
               <TextInput
@@ -268,12 +185,12 @@ const SignupPage = () => {
         </Form>
         <div className="signup-button-box">
           <Button
-            className="primary-button signup-proceed-button"
+            className="primary-button"
             type="button"
             size="lg"
-            onClick={handleProceedToPayment}
+            onClick={handleSignup}
             disabled={isBusy}
-            labelText="Proceed to Payment"
+            labelText="Create Account"
           />
           <div className="mt-3">
             <span>
@@ -291,18 +208,6 @@ const SignupPage = () => {
           </>
         )}
       </div>
-      {showPaymentModal ? (
-        <PaymentModal
-          onCancel={handleCancel}
-          handleChangePaymentInput={handleChangePaymentInput}
-          handleSignup={handleSignup}
-          paymentfields={paymentfields}
-          setPaymentdata={setPaymentdata}
-          paymentdata={paymentdata}
-          buttonLabelText="Signup"
-          modalText="Annual/Monthly option description"
-        />
-      ) : null}
     </div>
   );
 };

src/Constants/Fields/PaymentFields.js

@@ -1,16 +0,0 @@
-export const paymentfields = {
-  cardFirstName: { required: true, label: "Card - First Name", maxLength: 45 },
-  cardLastName: { required: true, label: "Card - Last Name", maxLength: 45 },
-  cardNumber: {
-    required: true,
-    label: "Card Number",
-    minLength: 16,
-    maxLength: 16,
-  },
-  cardSecNumber: {
-    required: true,
-    label: "Card CVV Number",
-    minLength: 3,
-    maxLength: 6,
-  },
-};

src/Utils/Form.js

@@ -84,7 +84,6 @@ export const getValidatedFormData = (data, fields) =>
   }, data);
 
 export const handleFormDataChange = (e, name, data, fields) => {
-  console.log("e", e);
   const value =
     (typeof e?.target?.value === "undefined" ? e.value : e.target.value) || "";
   const field = fields[name];

src/styles/signup.scss

@@ -42,56 +42,6 @@
   flex-direction: column;
   align-items: flex-end;
 }
-
-.signup-proceed-button {
-  width: 160px;
-}
-
-.signup-passw-inputs {
-  width: 100%;
-}
-span {
-  margin-right: 6px;
-}
-@media only screen and (max-width: 430px) {
-  .signup-sub-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-top: 25px;
-    width: 420px;
-    border-radius: 10px;
-    background-color: rgb(240, 247, 250);
-    border: 1px solid #e9e9e9;
-  }
-  .signup-header-text {
-    font-size: 1.5rem;
-  }
-
-  .signup-form {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    margin-right: auto;
-    margin-left: auto;
-    width: 390px;
-  }
-
-  .signup-mobile-column {
-    width: 340px;
-  }
-
-  .signup-button-box {
-    width: 320px;
-    align-items: center;
-  }
-
-  .signup-passw-inputs {
-    width: 370px;
-  }
-
-  span {
-    margin-right: 6px;
-  }
+.signup-btn {
+  width: 150px;
 }