From 6bd6fb76f92e0000ba3decf30f9cb6f280ad0383 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 1 Feb 2024 21:24:59 -0600
Subject: [PATCH 1/9] more

---
 src/App.js                              | 2 +-
 src/Components/Case/CaseDetailsPage.js  | 4 +++-
 src/Components/SignupPage/SignupPage.js | 9 ++++++---
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/App.js b/src/App.js
index a9ffc32..da0683b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -47,7 +47,7 @@ function App() {
         <Routes>
           <Route exact path="/" element={<Homepage />} />
           <Route exact path="/login" element={<Login />} />
-          <Route path="/signup" element={<SignupPage />} />
+          <Route path="/signup/:isUpgrade?" element={<SignupPage />} />
           <Route path="/requestpage/:supReq" element={<DemoRequestPage />} />
           <Route
             exact
diff --git a/src/Components/Case/CaseDetailsPage.js b/src/Components/Case/CaseDetailsPage.js
index 709466c..592804c 100644
--- a/src/Components/Case/CaseDetailsPage.js
+++ b/src/Components/Case/CaseDetailsPage.js
@@ -77,8 +77,10 @@ const CaseDetailsPage = () => {
   };
 
   const handleConfirmUpgrade = () => {
-    console.log("handle confirm upgrade");
+    const isUpgrade = true;
+    navigate(`/signup/${isUpgrade}`);
   };
+
   const handleSuccess = () => {
     setIsLoading(true);
     setShowUploadModal(false);
diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 30a4ca6..eb23c4a 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -3,6 +3,7 @@ import Col from "react-bootstrap/Col";
 import Form from "react-bootstrap/Form";
 import Row from "react-bootstrap/Row";
 import Button from "../../pageElements/Button";
+import { useParams } from "react-router-dom";
 import { db, auth } from "../../firebase";
 import { createUserWithEmailAndPassword } from "firebase/auth";
 import { useNavigate } from "react-router-dom";
@@ -30,8 +31,8 @@ import "../../styles/signup.scss";
 import Stripe from "stripe";
 import { stripeApiKey } from "../../secrets";
 
-const SignupPage = (props) => {
-  const { isUpgrade } = props;
+const SignupPage = () => {
+  const { isUpgrade } = useParams();
   const navigate = useNavigate();
   const [notice, setNotice] = useState("");
   const fieldsChunkSize = 2;
@@ -41,7 +42,9 @@ const SignupPage = (props) => {
     getFormDataDefaults(paymentfields)
   );
   const [showPaymentModal, setShowPaymentModal] = useState(false);
-  const [showSelectPlan, setShowSelectPlan] = useState(false);
+  const [showSelectPlan, setShowSelectPlan] = useState(
+    isUpgrade ? true : false
+  );
   const [activeRadioOption, setActiveRadioOption] = useState("partner");
   const [selectedPlan, setSelectedPlan] = useState([signupRadioFields[1]]);
   const [isAnnual, setIsAnnual] = useState(1);

From 0b7e66fff0208dbda6eacb5214b526ad81d71c2e Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 1 Feb 2024 21:38:22 -0600
Subject: [PATCH 2/9] more

---
 src/App.js                              |   5 +-
 src/Components/Case/CaseDetailsPage.js  |   3 +-
 src/Components/SignupPage/SignupPage.js | 185 ++++++++++++------------
 3 files changed, 101 insertions(+), 92 deletions(-)

diff --git a/src/App.js b/src/App.js
index da0683b..a3d8d6a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -47,7 +47,10 @@ function App() {
         <Routes>
           <Route exact path="/" element={<Homepage />} />
           <Route exact path="/login" element={<Login />} />
-          <Route path="/signup/:isUpgrade?" element={<SignupPage />} />
+          <Route
+            path="/signup/:isUpgrade?/:currentPlan?"
+            element={<SignupPage />}
+          />
           <Route path="/requestpage/:supReq" element={<DemoRequestPage />} />
           <Route
             exact
diff --git a/src/Components/Case/CaseDetailsPage.js b/src/Components/Case/CaseDetailsPage.js
index 592804c..a942c32 100644
--- a/src/Components/Case/CaseDetailsPage.js
+++ b/src/Components/Case/CaseDetailsPage.js
@@ -78,7 +78,8 @@ const CaseDetailsPage = () => {
 
   const handleConfirmUpgrade = () => {
     const isUpgrade = true;
-    navigate(`/signup/${isUpgrade}`);
+    const currentPlan = group?.subscriptionPlan;
+    navigate(`/signup/${isUpgrade}/${currentPlan}`);
   };
 
   const handleSuccess = () => {
diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index eb23c4a..90f2dd9 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -32,7 +32,7 @@ import Stripe from "stripe";
 import { stripeApiKey } from "../../secrets";
 
 const SignupPage = () => {
-  const { isUpgrade } = useParams();
+  const { isUpgrade, currentPlan } = useParams();
   const navigate = useNavigate();
   const [notice, setNotice] = useState("");
   const fieldsChunkSize = 2;
@@ -204,6 +204,7 @@ const SignupPage = () => {
       email,
       customerId: customerId,
       subscriptionId: subscriptionId,
+      subscriptionPlan: plan,
     };
 
     try {
@@ -382,97 +383,101 @@ const SignupPage = () => {
     selectedPlan[0].value === "seniorPartner" ||
     selectedPlan[0].value === "partner";
 
+  const signupForm = (
+    <div className="signup-sub-container">
+      <div className="signup-header">
+        <h1 className="signup-header-text">Create a Novodraft account</h1>
+      </div>
+      <Form className="signup-form">
+        {splitEvery(
+          Object.keys(signupFields).slice(0, -2),
+          fieldsChunkSize
+        ).map((names, j) => (
+          <Row key={`row${j}`}>
+            {names.map((name, i) => (
+              <Col key={`${name}${i + fieldsChunkSize * j}`} className="mb-3">
+                <TextInput
+                  name={name}
+                  value={data[name].value}
+                  onChange={(e) => handleChangeInput(e, name)}
+                  error={data[name].error}
+                  message={data[name].message}
+                  label={
+                    data[name].value.length === 0
+                      ? signupFields[name].label
+                      : ""
+                  }
+                  type={signupFields[name].type}
+                  values={signupFields[name].values}
+                  disabled={isBusy}
+                />
+              </Col>
+            ))}
+          </Row>
+        ))}
+        <Row>
+          <Col className="mb-3">
+            <TextInput
+              id="signupPassword"
+              type="password"
+              label={
+                data.password.value.length === 0
+                  ? signupFields.password.label
+                  : ""
+              }
+              value={data.password.value}
+              error={data.password.error}
+              message={data.password.message}
+              onChange={(e) => handleChangeInput(e, "password")}
+              disabled={isBusy}
+            />
+          </Col>
+        </Row>
+        <Row>
+          <Col className="mb-3">
+            <TextInput
+              id="confirmPassword"
+              type="password"
+              label={
+                data.confirmPassword.value.length === 0
+                  ? signupFields.confirmPassword.label
+                  : ""
+              }
+              value={data.confirmPassword.value}
+              error={data.confirmPassword.error}
+              message={data.confirmPassword.message}
+              onChange={(e) => handleChangeInput(e, "confirmPassword")}
+              disabled={isBusy}
+            />
+          </Col>
+        </Row>
+      </Form>
+      <div className="signup-button-box">
+        <Button
+          className="primary-button signup-proceed"
+          type="button"
+          size="lg"
+          onClick={handleOpenSelectPlan}
+          disabled={isBusy}
+          labelText="Select A Plan"
+        />
+      </div>
+      {showNoticeOnPage ? (
+        <>
+          <br></br>
+          <div className="alert alert-danger" role="alert">
+            {notice}
+          </div>
+        </>
+      ) : (
+        <></>
+      )}
+    </div>
+  );
+
   return (
     <div className="signup-super-container">
-      <div className="signup-sub-container">
-        <div className="signup-header">
-          <h1 className="signup-header-text">Create a Novodraft account</h1>
-        </div>
-        <Form className="signup-form">
-          {splitEvery(
-            Object.keys(signupFields).slice(0, -2),
-            fieldsChunkSize
-          ).map((names, j) => (
-            <Row key={`row${j}`}>
-              {names.map((name, i) => (
-                <Col key={`${name}${i + fieldsChunkSize * j}`} className="mb-3">
-                  <TextInput
-                    name={name}
-                    value={data[name].value}
-                    onChange={(e) => handleChangeInput(e, name)}
-                    error={data[name].error}
-                    message={data[name].message}
-                    label={
-                      data[name].value.length === 0
-                        ? signupFields[name].label
-                        : ""
-                    }
-                    type={signupFields[name].type}
-                    values={signupFields[name].values}
-                    disabled={isBusy}
-                  />
-                </Col>
-              ))}
-            </Row>
-          ))}
-          <Row>
-            <Col className="mb-3">
-              <TextInput
-                id="signupPassword"
-                type="password"
-                label={
-                  data.password.value.length === 0
-                    ? signupFields.password.label
-                    : ""
-                }
-                value={data.password.value}
-                error={data.password.error}
-                message={data.password.message}
-                onChange={(e) => handleChangeInput(e, "password")}
-                disabled={isBusy}
-              />
-            </Col>
-          </Row>
-          <Row>
-            <Col className="mb-3">
-              <TextInput
-                id="confirmPassword"
-                type="password"
-                label={
-                  data.confirmPassword.value.length === 0
-                    ? signupFields.confirmPassword.label
-                    : ""
-                }
-                value={data.confirmPassword.value}
-                error={data.confirmPassword.error}
-                message={data.confirmPassword.message}
-                onChange={(e) => handleChangeInput(e, "confirmPassword")}
-                disabled={isBusy}
-              />
-            </Col>
-          </Row>
-        </Form>
-        <div className="signup-button-box">
-          <Button
-            className="primary-button signup-proceed"
-            type="button"
-            size="lg"
-            onClick={handleOpenSelectPlan}
-            disabled={isBusy}
-            labelText="Select A Plan"
-          />
-        </div>
-        {showNoticeOnPage ? (
-          <>
-            <br></br>
-            <div className="alert alert-danger" role="alert">
-              {notice}
-            </div>
-          </>
-        ) : (
-          <></>
-        )}
-      </div>
+      {!isUpgrade ? signupForm : <></>}
       {showSelectPlan ? (
         <div className="select-plan-container">
           <div className="select-sub-left">

From 2ea968684c5dd5f264f304ec686c1260d62f0d6d Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 1 Feb 2024 21:47:06 -0600
Subject: [PATCH 3/9] more

---
 src/Components/SignupPage/SignupPage.js | 2 ++
 src/pageElements/Radio.js               | 5 ++++-
 src/styles/radio.scss                   | 1 -
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 90f2dd9..2ac879f 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -507,6 +507,8 @@ const SignupPage = () => {
                     activeRadioOption={activeRadioOption}
                     price={option.pricing}
                     isAnnual={isAnnual}
+                    isUpgrade={isUpgrade}
+                    currentPlan={currentPlan}
                   />
                 </div>
               ))}
diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js
index 687b0dc..5b84825 100644
--- a/src/pageElements/Radio.js
+++ b/src/pageElements/Radio.js
@@ -13,17 +13,20 @@ const Radio = (props) => {
     activeRadioOption,
     details,
     isAnnual,
+    isUpgrade,
+    currentPlan,
   } = props;
 
   const classCheckbox = "checkbox";
   const classOption = "option";
   const index = isAnnual === 1 ? Number("1") : Number("0");
+  const upgradeClass = isUpgrade ? "upgrade" : "not-upgrade";
 
   return (
     <div className="radio-container">
       <div className="radio-option-container" key={name}>
         <>
-          <div className="radio-circle-container">
+          <div className={`radio-circle-container ${upgradeClass}`}>
             <div
               className="radio-circle-top"
               onClick={() => !disabled && onClick && onClick(value)}
diff --git a/src/styles/radio.scss b/src/styles/radio.scss
index 75b9076..4d82241 100644
--- a/src/styles/radio.scss
+++ b/src/styles/radio.scss
@@ -1,7 +1,6 @@
 .radio-circle-container {
   display: flex;
   flex-direction: column;
-  background-color: #fff;
   height: 290px;
   margin: 10px 8px 0px 8px;
   border-radius: 5px;

From 98cd71a71f6bc78e2eb91e03d69129ca6f613d7a Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 1 Feb 2024 21:54:25 -0600
Subject: [PATCH 4/9] more

---
 src/Components/SignupPage/SignupPage.js | 6 +++---
 src/pageElements/Radio.js               | 3 ++-
 src/styles/radio.scss                   | 6 ++++++
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 2ac879f..9ae342a 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -474,7 +474,7 @@ const SignupPage = () => {
       )}
     </div>
   );
-
+  const magicIndex = currentPlan === "associate" ? 1 : 2;
   return (
     <div className="signup-super-container">
       {!isUpgrade ? signupForm : <></>}
@@ -496,7 +496,7 @@ const SignupPage = () => {
               </div>
             </div>
             <div className="radio-group-box">
-              {signupRadioFields?.map((option, i) => (
+              {signupRadioFields?.map((option, index) => (
                 <div className="signup-radio-container">
                   <Radio
                     onClick={handleChangeRadioInput}
@@ -507,7 +507,7 @@ const SignupPage = () => {
                     activeRadioOption={activeRadioOption}
                     price={option.pricing}
                     isAnnual={isAnnual}
-                    isUpgrade={isUpgrade}
+                    isUpgrade={index < magicIndex ? true : false}
                     currentPlan={currentPlan}
                   />
                 </div>
diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js
index 5b84825..7a12b19 100644
--- a/src/pageElements/Radio.js
+++ b/src/pageElements/Radio.js
@@ -20,8 +20,9 @@ const Radio = (props) => {
   const classCheckbox = "checkbox";
   const classOption = "option";
   const index = isAnnual === 1 ? Number("1") : Number("0");
+  console.log("isUpgrade", isUpgrade);
   const upgradeClass = isUpgrade ? "upgrade" : "not-upgrade";
-
+  console.log("upgradeClass", upgradeClass);
   return (
     <div className="radio-container">
       <div className="radio-option-container" key={name}>
diff --git a/src/styles/radio.scss b/src/styles/radio.scss
index 4d82241..ae5039b 100644
--- a/src/styles/radio.scss
+++ b/src/styles/radio.scss
@@ -1,6 +1,12 @@
 .radio-circle-container {
   display: flex;
   flex-direction: column;
+  &.upgrade {
+    background-color: rgb(149, 149, 149);
+  }
+  &.not-upgrade {
+    background-color: #fff;
+  }
   height: 290px;
   margin: 10px 8px 0px 8px;
   border-radius: 5px;

From 70fbe4c33b8787bedd8a8f54ec40f0e69eb51818 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 1 Feb 2024 21:56:06 -0600
Subject: [PATCH 5/9] more

---
 src/pageElements/Radio.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js
index 7a12b19..305e582 100644
--- a/src/pageElements/Radio.js
+++ b/src/pageElements/Radio.js
@@ -22,7 +22,7 @@ const Radio = (props) => {
   const index = isAnnual === 1 ? Number("1") : Number("0");
   console.log("isUpgrade", isUpgrade);
   const upgradeClass = isUpgrade ? "upgrade" : "not-upgrade";
-  console.log("upgradeClass", upgradeClass);
+
   return (
     <div className="radio-container">
       <div className="radio-option-container" key={name}>
@@ -32,7 +32,7 @@ const Radio = (props) => {
               className="radio-circle-top"
               onClick={() => !disabled && onClick && onClick(value)}
             >
-              {value == activeRadioOption ? (
+              {value == activeRadioOption && !isUpgrade ? (
                 <div className="radio-circle-box">
                   <CircleFill color="#1a76c7" size="20px" />
                 </div>

From a53362a3bf9461258b4e22e18627b7d5710b2bdc Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 1 Feb 2024 22:03:20 -0600
Subject: [PATCH 6/9] more

---
 src/Components/SignupPage/SignupPage.js | 12 ++++++++++--
 src/pageElements/Radio.js               |  2 +-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 9ae342a..95875b0 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -83,8 +83,16 @@ const SignupPage = () => {
 
   const handleChangeRadioInput = (value) => {
     const tempPlan = signupRadioFields.filter((plan) => {
-      if (plan.value === value) {
-        return plan;
+      if (!isUpgrade) {
+        if (plan.value === value) {
+          return plan;
+        }
+      } else {
+        if (plan.value === value && plan.value === currentPlan) {
+          //
+        } else if (plan.value === value) {
+          return plan;
+        }
       }
     });
 
diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js
index 305e582..c65cd5a 100644
--- a/src/pageElements/Radio.js
+++ b/src/pageElements/Radio.js
@@ -20,7 +20,7 @@ const Radio = (props) => {
   const classCheckbox = "checkbox";
   const classOption = "option";
   const index = isAnnual === 1 ? Number("1") : Number("0");
-  console.log("isUpgrade", isUpgrade);
+
   const upgradeClass = isUpgrade ? "upgrade" : "not-upgrade";
 
   return (

From 2cdcd22727fde11fdb4cad7a80a2a620a282bbf2 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 1 Feb 2024 22:43:34 -0600
Subject: [PATCH 7/9] more

---
 src/Components/SignupPage/SignupPage.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 95875b0..9d123d7 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -516,6 +516,7 @@ const SignupPage = () => {
                     price={option.pricing}
                     isAnnual={isAnnual}
                     isUpgrade={index < magicIndex ? true : false}
+                    disabled={index < magicIndex ? true : false}
                     currentPlan={currentPlan}
                   />
                 </div>

From 1c2a686e1448896ce1f50e4335c63bee9a73290a Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 1 Feb 2024 22:45:26 -0600
Subject: [PATCH 8/9] more

---
 src/Components/SignupPage/SignupPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 9d123d7..3aae4b8 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -89,7 +89,7 @@ const SignupPage = () => {
         }
       } else {
         if (plan.value === value && plan.value === currentPlan) {
-          //
+          //  ff
         } else if (plan.value === value) {
           return plan;
         }

From 27c289ed8cc294f1409e4a86baa50b6f3eb34c3a Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 1 Feb 2024 22:47:22 -0600
Subject: [PATCH 9/9] more

---
 src/Components/SignupPage/SignupPage.js | 12 ++----------
 src/pageElements/Radio.js               |  2 +-
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 3aae4b8..ead6b0f 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -83,16 +83,8 @@ const SignupPage = () => {
 
   const handleChangeRadioInput = (value) => {
     const tempPlan = signupRadioFields.filter((plan) => {
-      if (!isUpgrade) {
-        if (plan.value === value) {
-          return plan;
-        }
-      } else {
-        if (plan.value === value && plan.value === currentPlan) {
-          //  ff
-        } else if (plan.value === value) {
-          return plan;
-        }
+      if (plan.value === value) {
+        return plan;
       }
     });
 
diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js
index c65cd5a..6898216 100644
--- a/src/pageElements/Radio.js
+++ b/src/pageElements/Radio.js
@@ -52,7 +52,7 @@ const Radio = (props) => {
               <div className="radio-description-box">
                 {description.map((item, i) => {
                   const el =
-                    item == "First month free!" ? (
+                    item == "First month free!" && !isUpgrade ? (
                       <div className="offer-div">
                         <p className="signup-feat-item-bold">{item}</p>
                       </div>