Merge pull request #52 from kjannette/stripedKit

Striped kit

src/Components/SignupPage/SignupPage.js

@@ -40,7 +40,7 @@ const SignupPage = () => {
   const [showPaymentModal, setShowPaymentModal] = useState(false);
   const [showSelectPlan, setShowSelectPlan] = useState(false);
   const [activeRadioOption, setActiveRadioOption] = useState("partner");
-  const [selectedPlan, setSelectedPlan] = useState({});
+  const [selectedPlan, setSelectedPlan] = useState([{}]);
   const [isAnnual, setIsAnnual] = useState(false);
   // Could also go in App.js if needed in the future
   const stripe = new Stripe(stripeApiKey);
@@ -49,7 +49,9 @@ const SignupPage = () => {
       ? process.env.REACT_APP_API_DEV
       : process.env.REACT_APP_API_PROD;
   const [showAddAccount, setShowAddAccount] = useState(false);
+  const [numberOfAccountsToAdd, setNumberOfAccountsToAdd] = useState();
   const modalText = "MAYBE PUT TOTAL HERE";
+  const selectValues = [1, 2, 3, 4, 5, 6, 7, 8];
 
   const handleChangeInput = (e, name) => {
     const newData = handleFormDataChange(e, name, data, signupFields);
@@ -58,6 +60,12 @@ const SignupPage = () => {
     }
   };
 
+  const handleChangeAccountSelect = (e, name) => {
+    console.log("e, name", e, name);
+    const num = e.target.value;
+    setNumberOfAccountsToAdd(num);
+  };
+
   const handleChangePaymentInput = (e, name) => {
     const newPaymentData = handleFormDataChange(
       e,
@@ -196,6 +204,8 @@ const SignupPage = () => {
     //add accounts, close sectin
     setShowAddAccount(!showAddAccount);
   };
+
+  //STRIPE AUTH **********************************************************************
   async function handleStripeAuthorization(
     user,
     paymentDataValues,
@@ -450,6 +460,33 @@ const SignupPage = () => {
                     account username(s) and access will be setup later
                   </p>
                 </div>
+                <div>
+                  {" "}
+                  <select
+                    id="accountNo"
+                    className={`form-select`}
+                    value={numberOfAccountsToAdd}
+                    name={"addAccountsSelect"}
+                    onChange={(e) =>
+                      handleChangeAccountSelect(e, "addAccountsSelect")
+                    }
+                  >
+                    <option
+                      id="ddlProducts"
+                      className={`select-option`}
+                      value=""
+                    ></option>
+                    {selectValues.map((item, i) => (
+                      <option
+                        id="ddlProducts"
+                        className={`select-option`}
+                        key={`item${i}`}
+                      >
+                        {item}
+                      </option>
+                    ))}
+                  </select>
+                </div>
                 <div className="details-button-box">
                   <Button
                     className="secondary-button back-button"