Merge pull request #46 from kjannette/stripe2

Stripe2
2024-01-26 23:43:43 -06:00
parent cbd58e619c a9376cd2f2
commit f239954524
6 changed files with 208 additions and 111 deletions
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -5,7 +5,8 @@ import Row from "react-bootstrap/Row";
 import Button from "../../pageElements/Button";
 import { db, auth } from "../../firebase";
 import { createUserWithEmailAndPassword } from "firebase/auth";
-import { Link, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
+import Toggle from "../../pageElements/Toggle";
 import TextInput from "../../pageElements/TextInput";
 import { v4 as uuidv4 } from "uuid";
 import { collection, setDoc, doc } from "firebase/firestore";
@@ -24,6 +25,7 @@ import PaymentModal from "../Modals/PaymentModal";
 import Radio from "../../pageElements/Radio";
 import "../../styles/signup.scss";
 import Stripe from "stripe";
+import { stripeApiKey } from "../../secrets";

 const SignupPage = () => {
  const navigate = useNavigate();
@@ -35,20 +37,20 @@ const SignupPage = () => {
    getFormDataDefaults(paymentfields)
  );
  const [showPaymentModal, setShowPaymentModal] = useState(false);
-  const [showSelectPlan, setShowSelectPlan] = useState(true);
+  const [showSelectPlan, setShowSelectPlan] = useState(false);
  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 [isAnnualBilling, setIsAnnualBilling] = useState(false);
+  // Could also go in App.js if needed in the future
+  const stripe = new Stripe(stripeApiKey);

  const apiUrl =
    process.env.NODE_ENV === "development"
      ? process.env.REACT_APP_API_DEV
      : process.env.REACT_APP_API_PROD;

+  const modalText = "Description of monthly and annual subscriptions";
+
  const handleChangeInput = (e, name) => {
    const newData = handleFormDataChange(e, name, data, signupFields);
    if (newData !== null) {
@@ -72,16 +74,12 @@ const SignupPage = () => {
    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);
@@ -155,12 +153,20 @@ const SignupPage = () => {
    if (isBusy) {
      return;
    }
-
+    /*
    const dataValues = validateData();
    if (dataValues === null) {
      return;
    }
+    */
+    setShowSelectPlan(true);
  };
+
+  const handleToggle = () => {
+    setIsAnnualBilling(!isAnnualBilling);
+    console.log("isAnnualBilling", isAnnualBilling);
+  };
+
  async function handleStripeAuthorization(
    user,
    paymentDataValues,
@@ -231,7 +237,7 @@ const SignupPage = () => {
    if (paymentDataValues === null) {
      return;
    }
-
+    //
    let dataValues = validateData();
    if (dataValues === null) {
      return;
@@ -371,13 +377,23 @@ const SignupPage = () => {
      {showSelectPlan ? (
        <div className="select-plan-container">
          <div className="select-sub-left">
-            <div>
+            <div className="select-plan-header">
+              <div className="plan-header-right">
                <h5 className="signup-subheader-text">
-                Select your subscription plan
+                  Select a subscription plan
                </h5>
              </div>
+              <div className="plan-header-left">
+                <div className="select-toggle-box">
+                  <p className="select-billing-text">Billed annually</p>
+                  <Toggle onClick={handleToggle} />
+                  <p className="select-billing-text">Billed montly</p>
+                </div>
+              </div>
+            </div>
            <div className="radio-group-box">
              {signupRadioFields?.map((option, i) => (
+                <div className="signup-radio-container">
                  <Radio
                    onClick={handleChangeRadioInput}
                    value={option.value}
@@ -385,30 +401,13 @@ const SignupPage = () => {
                    description={option.description}
                    details={option.details}
                    activeRadioOption={activeRadioOption}
-                  price={option.price}
+                    price={option.pricing}
+                    isAnnualBilling={isAnnualBilling}
                  />
+                </div>
              ))}
            </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>
      ) : (
        <></>
--- a/src/Constants/Fields/RadioFields.js
+++ b/src/Constants/Fields/RadioFields.js
@@ -1,26 +1,50 @@
 export const signupRadioFields = [
  {
-    name: "Monthly - basic",
+    name: "Associate",
    label: "Monthly - basic",
    value: "monthlyBasic",
-    description: "Generate 1 document per month",
-    details: "Billed every month",
-    price: 89,
+    description: [
+      "1 document per month",
+      "Carryover 1 document to next period",
+      "24/7 support",
+      "First month is free!",
+    ],
+    details: "",
+    pricing: [
+      { type: "standard", amount: 69 },
+      { type: "annDiscount", amount: 49 },
+    ],
  },
  {
-    name: "Monthly - pro",
+    name: "Partner",
    label: "Monthly - pro",
    value: "monthlyProPlan",
-    description: "Generate up to 3 documents per month",
-    details: "Billed every three months. A xxx percent savings",
-    price: 159,
+    description: [
+      "3 documents per month",
+      "Carryover 2 documents to next period",
+      "Up to 2 additional accounts: 59/each",
+      "24/7 support",
+    ],
+    details: "",
+    pricing: [
+      { type: "standard", amount: 97 },
+      { type: "annDiscount", amount: 79 },
+    ],
  },
  {
-    name: "Annual - unlimted annual",
+    name: "Senior Partner",
    label: "Annual - unlimited annual",
    value: "annualUnlimited",
-    description: "Generate unlimited documents.",
-    details: "Billed annualy. A xxx percent savings",
-    price: 1489,
+    description: [
+      "Unlimited documents.",
+      "Triage-level support",
+      "Up to 8 additional accounts at 19/each",
+    ],
+    details: "",
+    pricing: [
+      { type: "standard", amount: 149 },
+      { type: "annDiscount", amount: 119 },
+    ],
  },
 ];
+//
--- a/src/pageElements/Radio.js
+++ b/src/pageElements/Radio.js
@@ -12,59 +12,47 @@ const Radio = (props) => {
    disabled,
    activeRadioOption,
    details,
+    isAnnualBilling,
  } = props;
  const classCheckbox = "checkbox";
  const classOption = "option";
-  console.log("value, activeRadioOption", value, activeRadioOption);
+  const index = isAnnualBilling ? Number("1") : Number("0");
  return (
-    <div>
+    <div className="radio-container">
+      <div className="radio-option-container" key={name}>
+        <>
+          <div className="radio-circle-container">
            <div
-        className="radio-option-container"
-        key={name}
+              className="radio-circle-top"
              onClick={() => !disabled && onClick && onClick(value)}
            >
              {value == activeRadioOption ? (
-          <>
-            <div className="radio-circle-container">
-              <div className="radio-circle-top">
                <div className="radio-circle-box">
                  <CircleFill color="#1a76c7" size="20px" />
                </div>
-                <div className="radio-name-box"> {`${name}`} </div>
-                <div className="radio-price-box">
-                  <div className="radio-price"> {`${price}`} </div>
-                </div>
-              </div>
-
-              <div></div>
-              <div className="radio-circle-lower">
-                <div className="radio-description-box">
-                  {" "}
-                  {`${description}`}{" "}
-                </div>
-                <div className="radio-description-box">{`${details}`} </div>
-              </div>
-            </div>
-          </>
              ) : (
-          <>
-            <div className="radio-circle-container">
-              <div className="radio-circle-top">
                <div className="radio-circle-box">
                  <Circle color="#1a76c7" size="20px" />
                </div>
-                <div className="radio-name-box">{`${name}`} </div>
+              )}
+              <div className="radio-name-box"> {`${name}`} </div>
              <div className="radio-price-box">
-                  <div className="radio-price"> {`${price}`} </div>
+                <div className="radio-price">
+                  {" "}
+                  {`${price[index]["amount"]}`}{" "}
+                </div>
              </div>
            </div>
            <div className="radio-circle-lower">
-                <div className="radio-description-box">{`${description}`} </div>
+              <div className="radio-description-box">
+                {description.map((item, i) => {
+                  return <p className="signup-feat-item">{item}</p>;
+                })}
+              </div>
              <div className="radio-description-box">{`${details}`} </div>
            </div>
          </div>
        </>
-        )}
      </div>
    </div>
  );
--- a/src/pageElements/Toggle.js
+++ b/src/pageElements/Toggle.js
@@ -0,0 +1,24 @@
+import ToggleButton from "react-bootstrap/ToggleButton";
+import ToggleButtonGroup from "react-bootstrap/ToggleButtonGroup";
+
+const Toggle = (props) => {
+  const { onClick } = props;
+  return (
+    <>
+      <ToggleButtonGroup type="radio" name="options" defaultValue={1}>
+        <ToggleButton
+          onClick={onClick}
+          id="tbg-radio-1"
+          value={1}
+        ></ToggleButton>
+        <ToggleButton
+          onClick={onClick}
+          id="tbg-radio-2"
+          value={2}
+        ></ToggleButton>
+      </ToggleButtonGroup>
+    </>
+  );
+};
+
+export default Toggle;
--- a/src/styles/radio.scss
+++ b/src/styles/radio.scss
@@ -2,7 +2,7 @@
  display: flex;
  flex-direction: column;
  background-color: #fff;
-  height: 160px;
+  height: 290px;
  margin: 10px 8px 0px 8px;
  border-radius: 5px;
  border: 1px solid #d4d4d4;
@@ -12,38 +12,51 @@
  height: 40px;
  display: flex;
  flex-direction: row;
+  margin-top: 12px;
+  margin-left: 2px;
 }

 .radio-circle-lower {
  display: flex;
  flex-direction: column;
-  margin-left: 18px;
-  padding-left: 26px;
+  margin-left: 12px;
+  padding-left: 12px;
 }

 .radio-circle-box {
-  height: 40px;
-  margin: 12px 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
+  height: 30px;
 }

 .radio-name-box {
-  height: 40px;
+  display: flex;
+  align-items: center;
+  padding-top: 10px;
+  height: 30px;
  width: 50%;
  font-family: var(--main-font);
  font-family: Roboto;
  font-weight: 500;
  letter-spacing: 0.05rem;
-  margin: 13px 8px;
 }

 .radio-price-box {
  display: flex;
  flex-direction: row-reverse;
-  margin: 16px 8px;
+  height: 30px;
  width: 30%;
 }

 .radio-price {
-  width: 20px;
+  height: 25px;
+  width: 40px;
  float: right;
 }
+
+.radio-description-box {
+  width: 240px;
+}
--- a/src/styles/signup.scss
+++ b/src/styles/signup.scss
@@ -64,11 +64,35 @@
  height: 600px;
 }

+.select-plan-header {
+  display: flex;
+  flex-direction: row;
+  width: 900px;
+}
+
+.plan-header-right {
+  padding: 12px 14px;
+  width: 50%;
+}
+
+.plan-header-left {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+
+  padding: 12px 14px;
+  width: 50%;
+}
+
 .select-sub-left {
-  width: 60%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 45px;
+  width: 100%;
+  padding: 12px;
  border-radius: 10px;
  background-color: rgb(240, 247, 250);
-  margin-right: 8px;
  border: 1px solid #e9e9e9;
  padding: 6px;
 }
@@ -82,6 +106,20 @@
  padding: 6px;
 }

+.select-toggle-box {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 2px;
+  width: 240px;
+  height: 20px;
+}
+
+.select-billing-text {
+  font-size: 0.85rem;
+}
+
 .signup-radio-wrapper {
  background-color: #fff;
  display: flex;
@@ -95,10 +133,10 @@

 .radio-group-box {
  display: flex;
-  flex-direction: column;
+  flex-direction: row;
  padding: 6px;
  width: 100%;
-  height: 300px;
+  height: 420px;
 }

 .select-plan-summary-box {
@@ -109,6 +147,7 @@
  border-radius: 10px;
  background-color: #fff;
  border: 1px solid #e9e9e9;
+  margin-top: 5px;
  padding: 6px;
 }

@@ -122,3 +161,13 @@
 .signup-option {
  width: 100% !important;
 }
+
+.signup-radio-container {
+  width: 350px;
+  height: 100%;
+}
+
+.signup-feat-item {
+  font-size: 0.9rem;
+  margin: 8px 0px 8px 4px;
+}