Merge branch 'jdurante-1-stripe-paywall' of github.com:kjannette/ax3Client into jdurante-1-stripe-paywall

src/Components/SignupPage/SignupPage.js

@@ -19,9 +19,11 @@ import {
 import { objectMap } from "../../Utils/Object";
 import { signupFields } from "../../Constants/Fields/SignupFields";
 import { paymentfields } from "../../Constants/Fields/PaymentFields";
+import { signupRadioFields } from "../../Constants/Fields/RadioFields";
 import PaymentModal from "../Modals/PaymentModal";
+import Radio from "../../pageElements/Radio";
 import "../../styles/signup.scss";
-import Stripe from 'stripe';
+import Stripe from "stripe";
 
 const SignupPage = () => {
   const navigate = useNavigate();
@@ -33,10 +35,14 @@ const SignupPage = () => {
     getFormDataDefaults(paymentfields)
   );
   const [showPaymentModal, setShowPaymentModal] = useState(false);
+  const [showSelectPlan, setShowSelectPlan] = useState(true);
+  const [activeRadioOption, setActiveRadioOption] = useState("monthlyBasic");
   const modalText = "Description of monthly and annual subscriptions";
-
+  const [selectedPlan, setSelectedPlan] = useState({});
   // this could also go in App.js if needed in the future
-  const stripe = new Stripe('pk_test_51NNoasBi8p7FeGFrI5SfpM6HuNMoxwImx6NRKyKbgbt6OPxMxQDiZ9I1GqvDa9qUwB3D3jlJOng6MyjPppWofxzP00Exvr8dBy')
+  const stripe = new Stripe(
+    "pk_test_51NNoasBi8p7FeGFrI5SfpM6HuNMoxwImx6NRKyKbgbt6OPxMxQDiZ9I1GqvDa9qUwB3D3jlJOng6MyjPppWofxzP00Exvr8dBy"
+  );
 
   const apiUrl =
     process.env.NODE_ENV === "development"
@@ -62,6 +68,20 @@ const SignupPage = () => {
     }
   };
 
+  const handleChangeRadioInput = (value) => {
+    const tempPlan = signupRadioFields.filter((field) => {
+      return field.value === value;
+    });
+    console.log("tempPlan", tempPlan);
+    setSelectedPlan(tempPlan);
+    const temp = value;
+    setActiveRadioOption(temp);
+  };
+
+  signupRadioFields.map((option) => {
+    console.log(option.value);
+  });
+
   const validateData = () => {
     const newData = getValidatedFormData(data, signupFields);
     const hasErrors = isFormDataHasErrors(newData);
@@ -127,6 +147,11 @@ const SignupPage = () => {
   const handleProceedToPayment = (e) => {
     e.preventDefault();
 
+    setShowPaymentModal(true);
+  };
+
+  const handleOpenSelectPlan = (e) => {
+    e.preventDefault();
     if (isBusy) {
       return;
     }
@@ -135,15 +160,12 @@ const SignupPage = () => {
     if (dataValues === null) {
       return;
     }
-
-    setShowPaymentModal(true);
   };
-
-  async function handleStripeAuthorization(user, paymentDataValues, customerDataValues) {
-    // Do: calls to Stripe API
-    // if success, return some truthy value or
-    // handle failure in handleSignup
-
+  async function handleStripeAuthorization(
+    user,
+    paymentDataValues,
+    customerDataValues
+  ) {
     let error = false;
     let subscriptionId = null;
     let customerId = null;
@@ -154,52 +176,53 @@ const SignupPage = () => {
         exp_month: paymentDataValues.cardExpirationMonth,
         exp_year: paymentDataValues.cardExpirationYear,
         cvc: paymentDataValues.cardCvvCode,
-        name: paymentDataValues.cardFirstName + ' ' + paymentDataValues.cardLastName,
-      }
-    })
+        name:
+          paymentDataValues.cardFirstName +
+          " " +
+          paymentDataValues.cardLastName,
+      },
+    });
 
     try {
       let response = await fetch(`${apiUrl}/create-subscription`, {
-        method: 'POST',
+        method: "POST",
         headers: {
-          'Content-Type': 'application/json',
+          "Content-Type": "application/json",
         },
         body: JSON.stringify({
-          type: 'monthly', // TODO: replace this with the user-chosen value later when we have the UI for it
+          type: "monthly", // TODO: replace this with the user-chosen value later when we have the UI for it
           customerData: {
             email: customerDataValues.email,
-            name: customerDataValues.firstName + ' ' + customerDataValues.lastName,
+            name:
+              customerDataValues.firstName + " " + customerDataValues.lastName,
           },
           token,
         }),
-      })
+      });
 
-      response = await response.json()
+      response = await response.json();
 
       subscriptionId = response.subscriptionId;
       customerId = response.customerId;
 
-      console.log('response', response);
+      console.log("response", response);
 
       return {
         subscriptionId,
         customerId,
-      }
-    }
-    catch (error) {
-      console.log(error)
+      };
+    } catch (error) {
+      console.log(error);
       error = true;
     }
 
-    if(error) {
-      return false
+    if (error) {
+      return false;
     }
     return {
       subscriptionId,
       customerId,
-    }
-
-    return !error;
+    };
   }
 
   const handleSignup = async (e) => {
@@ -216,38 +239,43 @@ const SignupPage = () => {
 
     setIsBusy(true);
 
-    try {
-      const userCredential = await createUserWithEmailAndPassword(
-        auth,
-        dataValues.email,
-        dataValues.password
-      );
-      const user = userCredential.user;
+    if (paymentDataValues && dataValues) {
+      try {
+        const userCredential = await createUserWithEmailAndPassword(
+          auth,
+          dataValues.email,
+          dataValues.password
+        );
+        const user = userCredential.user;
 
-      const paymentResponse = await handleStripeAuthorization(user, paymentDataValues, dataValues);
+        const paymentResponse = await handleStripeAuthorization(
+          user,
+          paymentDataValues,
+          dataValues
+        );
 
-      if(paymentResponse === false) {
-        // handle payment failure
+        if (paymentResponse === false) {
+          // handle payment failure
+          setIsBusy(false);
+          setNotice("Sorry, something went wrong. Please try again.");
+          return;
+        } else {
+          dataValues = { ...dataValues, ...paymentResponse };
+
+          await saveUserData(user.uid, dataValues);
+          navigate("/");
+        }
+      } catch (error) {
         setIsBusy(false);
         setNotice(
-          "Sorry, something went wrong. Please try again."
+          error.message || "Sorry, something went wrong. Please try again."
         );
-        return;
       }
-      else {
-        dataValues = {...dataValues, ...paymentResponse};
-
-        await saveUserData(user.uid, dataValues);
-        navigate("/");
-      }
-    } catch (error) {
-      setIsBusy(false);
-      setNotice(
-        error.message || "Sorry, something went wrong. Please try again."
-      );
     }
   };
 
+  const showNoticeOnPage = "" !== notice && !showPaymentModal;
+
   return (
     <div className="signup-super-container">
       <div className="signup-sub-container">
@@ -281,7 +309,7 @@ const SignupPage = () => {
               ))}
             </Row>
           ))}
-          <Row>
+          <Row style={{ width: "80%" }}>
             <Col className="mb-3">
               <TextInput
                 id="signupPassword"
@@ -299,7 +327,7 @@ const SignupPage = () => {
               />
             </Col>
           </Row>
-          <Row>
+          <Row style={{ width: "80%" }}>
             <Col className="mb-3">
               <TextInput
                 id="confirmPassword"
@@ -323,26 +351,68 @@ const SignupPage = () => {
             className="primary-button signup-proceed"
             type="button"
             size="lg"
-            onClick={handleProceedToPayment}
+            onClick={handleOpenSelectPlan}
             disabled={isBusy}
-            labelText="Proceed to Payment"
+            labelText="Select A Plan"
           />
-          <div className="mt-3">
-            <span>
-              <Link to="/login">Go to login</Link>
-            </span>
-          </div>
         </div>
 
-        {"" !== notice && (
+        {showNoticeOnPage ? (
           <>
             <br></br>
             <div className="alert alert-danger" role="alert">
               {notice}
             </div>
           </>
+        ) : (
+          <></>
         )}
       </div>
+      {showSelectPlan ? (
+        <div className="select-plan-container">
+          <div className="select-sub-left">
+            <div>
+              <h5 className="signup-subheader-text">
+                Select your subscription plan
+              </h5>
+            </div>
+            <div className="radio-group-box">
+              {signupRadioFields?.map((option, i) => (
+                <Radio
+                  onClick={handleChangeRadioInput}
+                  value={option.value}
+                  name={option.name}
+                  description={option.description}
+                  details={option.details}
+                  activeRadioOption={activeRadioOption}
+                  price={option.price}
+                />
+              ))}
+            </div>
+          </div>
+          <div className="select-sub-right">
+            <div className="select-plan-summary-box ">
+              <div>Order summary</div>
+              <div>{`{subVar} subscription type`}</div>
+              <div>{`{subVar} subscription mini description`}</div>
+              <div>{`Total billed today: {subVar} `}</div>
+              <div>Plus aplicable sales tax -toooltip</div>
+            </div>
+            <div className="selectplan-payment-button-wrapper">
+              <Button
+                className="primary-button signup-proceed"
+                type="button"
+                size="lg"
+                onClick={handleProceedToPayment}
+                disabled={isBusy}
+                labelText="Proceed to Payment"
+              />
+            </div>
+          </div>
+        </div>
+      ) : (
+        <></>
+      )}
       {showPaymentModal ? (
         <PaymentModal
           key="modal-one-xc"
@@ -352,6 +422,8 @@ const SignupPage = () => {
           handleChangePaymentInput={handleChangePaymentInput}
           handleSignup={handleSignup}
           modalText={modalText}
+          notice={notice}
+          setNotice={setNotice}
         />
       ) : (
         <></>