more

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

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 = () => {

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">
+      {!isUpgrade ? signupForm : <></>}
-        <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>
       {showSelectPlan ? (
         <div className="select-plan-container">
           <div className="select-sub-left">