diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index f292e01..89184ae 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -44,12 +44,11 @@ const SignupPage = () => { const [isAnnual, setIsAnnual] = useState(false); // Could also go in App.js if needed in the future const stripe = new Stripe(stripeApiKey); - console.log("activeRadioOption", activeRadioOption); const apiUrl = process.env.NODE_ENV === "development" ? process.env.REACT_APP_API_DEV : process.env.REACT_APP_API_PROD; - const [selectedPlanToProcess, setSelectedPlanToProcess] = useState(); + const [showAddAccount, setShowAddAccount] = useState(false); const modalText = "MAYBE PUT TOTAL HERE"; const handleChangeInput = (e, name) => { @@ -184,7 +183,19 @@ const SignupPage = () => { setIsAnnual(!isAnnual); console.log("isAnnual", isAnnual); }; + const handleAddAccounts = () => { + console.log("selectedPlan", selectedPlan); + setShowAddAccount(!showAddAccount); + }; + const handleCancelAdd = () => { + setShowAddAccount(!showAddAccount); + }; + + const handleAdd = () => { + //add accounts, close sectin + setShowAddAccount(!showAddAccount); + }; async function handleStripeAuthorization( user, paymentDataValues, @@ -299,6 +310,10 @@ const SignupPage = () => { }; const showNoticeOnPage = "" !== notice && !showPaymentModal; + const addAccountCopy = + selectedPlan[0].value === "seniorPartner" + ? "You ay add up to eight accounts" + : "You may add up to two accounts"; return (
@@ -380,7 +395,6 @@ const SignupPage = () => { labelText="Select A Plan" />
- {showNoticeOnPage ? ( <>

@@ -425,15 +439,58 @@ const SignupPage = () => { ))} + {showAddAccount ? ( +
+ {" "} +
+
+ Add additional accounts +
+

+ account username(s) and access will be setup later +

+
+
+
+
+ + ) : ( + <> + )}
-
diff --git a/src/styles/signup.scss b/src/styles/signup.scss index a43234f..3b9dd41 100644 --- a/src/styles/signup.scss +++ b/src/styles/signup.scss @@ -40,6 +40,14 @@ margin-top: 6px; } +.signup-button-wrapper-text { + letter-spacing: -0.6px; + font-weight: 400; + font-size: 1.7rem; + margin-left: 5px; + margin-bottom: 0px !important; +} + .signup-form { width: 880px; } @@ -48,8 +56,8 @@ width: 100%; margin-bottom: 24px; display: flex; - flex-direction: column; - align-items: flex-end; + flex-direction: row; + justify-content: flex-end; padding-right: 14px; } @@ -62,7 +70,6 @@ flex-direction: row; margin-top: 24px; width: 920px; - height: 600px; } .select-plan-header { @@ -76,6 +83,13 @@ width: 50%; } +.plan-header-right-low { + display: flex; + flex-direction: row; + padding: 12px 14px; + width: 100%; +} + .plan-header-left { display: flex; flex-direction: row-reverse; @@ -191,3 +205,21 @@ border-radius: 10px; margin-top: 25px; } + +.show-addaccount-container { + display: flex; + flex-direction: column; + width: 880px; + min-height: 200px; + padding: 12px; + border-radius: 10px; + background-color: #fff; + border: 1px solid #e9e9e9; +} + +.signup-accounts-info { + font-weight: 300; + font-size: 0.93rem; + margin-top: 0px; + margin-left: 5px; +}