From 5b9a9d5d8b278b4fe46cb68604ffb1968fcd59ea Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Sun, 28 Jan 2024 17:30:38 -0600
Subject: [PATCH 1/5] more

---
 src/Components/Modals/PaymentModal.js   |  7 +-
 src/Components/SignupPage/SignupPage.js | 97 +++++++++++++------------
 src/styles/modals.scss                  |  2 +-
 src/styles/signup.scss                  | 12 ++-
 4 files changed, 65 insertions(+), 53 deletions(-)

diff --git a/src/Components/Modals/PaymentModal.js b/src/Components/Modals/PaymentModal.js
index 09cc641..a76bb5b 100644
--- a/src/Components/Modals/PaymentModal.js
+++ b/src/Components/Modals/PaymentModal.js
@@ -25,8 +25,8 @@ const PaymentModal = ({
   const monthlyAddAccountPrice = selectedPlan[0].pricing[2].amount;
   const annualAddAccountPrice = monthlyAddAccountPrice * 12;
   const showAdditionaLAccountsView =
-    selectedPlan[0]?.value === "partner" ||
-    selectedPlan[0]?.value === "seniorPartner";
+    (selectedPlan[0]?.value === "partner" && numberOfAccountsToAdd > 0) ||
+    (selectedPlan[0]?.value === "seniorPartner" && numberOfAccountsToAdd > 0);
   const planName = selectedPlan[0].name ? selectedPlan[0].name : null;
   const billingPeriod = isAnnual ? "Annually" : "Monthly";
   const amountToday = isAnnual
@@ -34,6 +34,7 @@ const PaymentModal = ({
     : selectedPlan[0]?.pricing[1]?.amount;
   console.log("annualAddAccountPrice", annualAddAccountPrice);
   console.log("isAnnual", isAnnual);
+  console.log("numberOfAccountsToAdd", numberOfAccountsToAdd);
   return (
     <Modal show="true" size="lg">
       <Modal.Header className="payment-modal-header" closeButton>
@@ -65,7 +66,7 @@ const PaymentModal = ({
                   {isAnnual ? (
                     <p>
                       {" "}
-                      {numberOfAccountsToAdd}/per year = $
+                      {numberOfAccountsToAdd}/ x 12 months = $
                       {annualAddAccountPrice}
                     </p>
                   ) : (
diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 80d5c9b..9b0ebae 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -374,8 +374,8 @@ const SignupPage = () => {
   const showNoticeOnPage = "" !== notice && !showPaymentModal;
   const addAccountCopy =
     selectedPlan[0]?.value === "seniorPartner"
-      ? "Add up to eight additional accounts to your subscripton"
-      : "Add up to two additional accounts to your subscripton";
+      ? "Add up to eight"
+      : "Add up to two";
   const showAddAccountBtn =
     selectedPlan[0].value === "seniorPartner" ||
     selectedPlan[0].value === "partner";
@@ -506,59 +506,60 @@ const SignupPage = () => {
               ))}
             </div>
             {showAddAccount ? (
-              <div className="show-addaccount-container">
-                {" "}
-                <div className="plan-header-right-lower">
-                  <h5 className="signup-button-wrapper-text">
-                    Add additional accounts
-                  </h5>
-                  <p className="signup-accounts-info">
-                    account username(s) and access will be setup later
-                  </p>
-                </div>
-                <div className="signup-select-wrapper">
-                  <div className="add-account-copy-wrapper">
-                    <div className="add-acctwrapz">{addAccountCopy}</div>
+              <div className="show-addaccount-wrapper">
+                <div className="show-addaccount-container">
+                  <div className="plan-header-right-lower">
+                    <h5 className="signup-button-wrapper-text">
+                      Add additional accounts
+                    </h5>
+                    <p className="signup-accounts-info">
+                      Username(s) and access will be setup later
+                    </p>
                   </div>
-                  <div className="signup-select-box">
-                    <select
-                      id="accountNo"
-                      className={`form-select`}
-                      value={numberOfAccountsToAdd}
-                      name={"addAccountsSelect"}
-                      onChange={(e) =>
-                        handleChangeAccountSelect(e, "addAccountsSelect")
-                      }
-                    >
-                      <option
-                        id="ddlProducts"
-                        className={`select-option`}
-                        value=""
-                      ></option>
-                      {selectAdditionalAccountValues.map((item, i) => (
+                  <div className="signup-select-wrapper">
+                    <div className="add-account-copy-wrapper">
+                      <div className="add-acctwrapz">{addAccountCopy}</div>
+                    </div>
+                    <div className="signup-select-box">
+                      <select
+                        id="accountNo"
+                        className={`form-select`}
+                        value={numberOfAccountsToAdd}
+                        name={"addAccountsSelect"}
+                        onChange={(e) =>
+                          handleChangeAccountSelect(e, "addAccountsSelect")
+                        }
+                      >
                         <option
                           id="ddlProducts"
                           className={`select-option`}
-                          key={`item${i}`}
-                        >
-                          {item}
-                        </option>
-                      ))}
-                    </select>
+                          value=""
+                        ></option>
+                        {selectAdditionalAccountValues.map((item, i) => (
+                          <option
+                            id="ddlProducts"
+                            className={`select-option`}
+                            key={`item${i}`}
+                          >
+                            {item}
+                          </option>
+                        ))}
+                      </select>
+                    </div>
                   </div>
-                </div>
-                <div className="details-button-box">
-                  <Button
-                    className="secondary-button back-button"
-                    onClick={handleCancelAdd}
-                    labelText="Cancel"
-                  />
-                  <div className="upload-button-box">
+                  <div className="details-button-box">
                     <Button
-                      className="p-2 mr-2 primary-button"
-                      onClick={handleAdd}
-                      labelText="Add And Proceed To Payment"
+                      className="secondary-button back-button"
+                      onClick={handleCancelAdd}
+                      labelText="Cancel"
                     />
+                    <div className="upload-button-box">
+                      <Button
+                        className="p-2 mr-2 primary-button"
+                        onClick={handleAdd}
+                        labelText="Add And Proceed To Payment"
+                      />
+                    </div>
                   </div>
                 </div>
               </div>
diff --git a/src/styles/modals.scss b/src/styles/modals.scss
index 0d2296b..f875a70 100644
--- a/src/styles/modals.scss
+++ b/src/styles/modals.scss
@@ -110,5 +110,5 @@
 
 .payment-summary-header {
   border-bottom: 1px solid #cecece;
-  margin-bottom: 12px;
+  margin-bottom: 4px;
 }
diff --git a/src/styles/signup.scss b/src/styles/signup.scss
index 800303e..0aef894 100644
--- a/src/styles/signup.scss
+++ b/src/styles/signup.scss
@@ -87,6 +87,8 @@
 .plan-header-right-low {
   display: flex;
   flex-direction: row;
+  justify-content: center;
+  margin: auto;
   padding: 12px 14px;
   width: 100%;
 }
@@ -207,11 +209,19 @@
   margin-top: 25px;
 }
 
+.show-addaccount-wrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  width: 100%;
+}
+
 .show-addaccount-container {
   display: flex;
   flex-direction: column;
-  width: 880px;
+  width: 578px;
   min-height: 200px;
+  margin-right: 14px;
   padding: 12px;
   border-radius: 10px;
   background-color: #fff;

From 81c5b2098583d7c522c050f5f99ae53043bd1012 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Sun, 28 Jan 2024 17:36:28 -0600
Subject: [PATCH 2/5] more

---
 src/styles/signup.scss | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/styles/signup.scss b/src/styles/signup.scss
index 0aef894..02e050d 100644
--- a/src/styles/signup.scss
+++ b/src/styles/signup.scss
@@ -84,13 +84,12 @@
   width: 50%;
 }
 
-.plan-header-right-low {
+.plan-header-right-lower {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   justify-content: center;
-  margin: auto;
-  padding: 12px 14px;
-  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .plan-header-left {
@@ -244,7 +243,7 @@
 }
 
 .signup-select-box {
-  width: 90px;
+  width: 160px;
   margin-left: auto;
   margin-top: 12px;
   margin-bottom: 12px;
@@ -257,7 +256,6 @@
 .add-account-copy-wrapper {
   display: flex;
   flex-direction: row;
-  width: 800px;
   justify-content: flex-end;
   align-items: center;
   margin-right: 12px;

From a2e87de41ad9c3e6e19648a963d949beff6e0182 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Sun, 28 Jan 2024 17:40:19 -0600
Subject: [PATCH 3/5] more

---
 src/Components/SignupPage/SignupPage.js | 2 +-
 src/styles/signup.scss                  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 9b0ebae..1229eff 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -513,7 +513,7 @@ const SignupPage = () => {
                       Add additional accounts
                     </h5>
                     <p className="signup-accounts-info">
-                      Username(s) and access will be setup later
+                      User profiles will be setup later
                     </p>
                   </div>
                   <div className="signup-select-wrapper">
diff --git a/src/styles/signup.scss b/src/styles/signup.scss
index 02e050d..8e57ab1 100644
--- a/src/styles/signup.scss
+++ b/src/styles/signup.scss
@@ -230,8 +230,8 @@
 .signup-accounts-info {
   font-weight: 300;
   font-size: 0.93rem;
-  margin-top: 0px;
-  margin-left: 5px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .signup-select-wrapper {

From 3e44fff9952f5a872383a6939aa05e8ad0b7cf5e Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Sun, 28 Jan 2024 17:44:22 -0600
Subject: [PATCH 4/5] more

---
 src/Components/SignupPage/SignupPage.js | 3 ---
 src/styles/signup.scss                  | 2 +-
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 1229eff..c2f4707 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -517,9 +517,6 @@ const SignupPage = () => {
                     </p>
                   </div>
                   <div className="signup-select-wrapper">
-                    <div className="add-account-copy-wrapper">
-                      <div className="add-acctwrapz">{addAccountCopy}</div>
-                    </div>
                     <div className="signup-select-box">
                       <select
                         id="accountNo"
diff --git a/src/styles/signup.scss b/src/styles/signup.scss
index 8e57ab1..f097ed2 100644
--- a/src/styles/signup.scss
+++ b/src/styles/signup.scss
@@ -243,7 +243,7 @@
 }
 
 .signup-select-box {
-  width: 160px;
+  width: 230px;
   margin-left: auto;
   margin-top: 12px;
   margin-bottom: 12px;

From c541715f9b88e0a40c5aad491cc3a7f4003d3dfb Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Sun, 28 Jan 2024 17:47:13 -0600
Subject: [PATCH 5/5] more

---
 src/Components/SignupPage/SignupPage.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index c2f4707..f64a085 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -206,6 +206,12 @@ const SignupPage = () => {
     setShowPaymentModal(true);
   };
 
+  const handleAdd = () => {
+    //add accounts, close section
+    setShowAddAccount(!showAddAccount);
+    setShowPaymentModal(true);
+  };
+
   const handleOpenSelectPlan = (e) => {
     e.preventDefault();
     if (isBusy) {
@@ -249,11 +255,6 @@ const SignupPage = () => {
     setShowAddAccount(!showAddAccount);
   };
 
-  const handleAdd = () => {
-    //add accounts, close sectin
-    setShowAddAccount(!showAddAccount);
-  };
-
   // ******************** STRIPE PAY API CALL ******************** //
   async function handleStripeAuthorization(
     user,