Merge pull request #74 from kjannette/foobar3

Foobar3

src/App.js

@@ -47,7 +47,10 @@ function App() {
         <Routes>
           <Route exact path="/" element={<Homepage />} />
           <Route exact path="/login" element={<Login />} />
-          <Route path="/signup" element={<SignupPage />} />
+          <Route
+            path="/signup/:isUpgrade?/:currentPlan?"
+            element={<SignupPage />}
+          />
           <Route path="/requestpage/:supReq" element={<DemoRequestPage />} />
           <Route
             exact

src/Components/Case/CaseDetailsPage.js

@@ -77,8 +77,11 @@ const CaseDetailsPage = () => {
   };
 
   const handleConfirmUpgrade = () => {
-    console.log("handle confirm upgrade");
+    const isUpgrade = true;
+    const currentPlan = group?.subscriptionPlan;
+    navigate(`/signup/${isUpgrade}/${currentPlan}`);
   };
+
   const handleSuccess = () => {
     setIsLoading(true);
     setShowUploadModal(false);

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, currentPlan } = 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);
@@ -201,6 +204,7 @@ const SignupPage = (props) => {
       email,
       customerId: customerId,
       subscriptionId: subscriptionId,
+      subscriptionPlan: plan,
     };
 
     try {
@@ -379,8 +383,7 @@ const SignupPage = (props) => {
     selectedPlan[0].value === "seniorPartner" ||
     selectedPlan[0].value === "partner";
 
-  return (
-    <div className="signup-super-container">
+  const signupForm = (
     <div className="signup-sub-container">
       <div className="signup-header">
         <h1 className="signup-header-text">Create a Novodraft account</h1>
@@ -470,6 +473,11 @@ const SignupPage = (props) => {
         <></>
       )}
     </div>
+  );
+  const magicIndex = currentPlan === "associate" ? 1 : 2;
+  return (
+    <div className="signup-super-container">
+      {!isUpgrade ? signupForm : <></>}
       {showSelectPlan ? (
         <div className="select-plan-container">
           <div className="select-sub-left">
@@ -488,7 +496,7 @@ const SignupPage = (props) => {
               </div>
             </div>
             <div className="radio-group-box">
-              {signupRadioFields?.map((option, i) => (
+              {signupRadioFields?.map((option, index) => (
                 <div className="signup-radio-container">
                   <Radio
                     onClick={handleChangeRadioInput}
@@ -499,6 +507,9 @@ const SignupPage = (props) => {
                     activeRadioOption={activeRadioOption}
                     price={option.pricing}
                     isAnnual={isAnnual}
+                    isUpgrade={index < magicIndex ? true : false}
+                    disabled={index < magicIndex ? true : false}
+                    currentPlan={currentPlan}
                   />
                 </div>
               ))}

src/pageElements/Radio.js

@@ -13,22 +13,26 @@ 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)}
             >
-              {value == activeRadioOption ? (
+              {value == activeRadioOption && !isUpgrade ? (
                 <div className="radio-circle-box">
                   <CircleFill color="#1a76c7" size="20px" />
                 </div>
@@ -48,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>

src/styles/radio.scss

@@ -1,7 +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;