more

src/Components/SignupPage/SignupPage.js

@@ -62,8 +62,8 @@ const SignupPage = () => {
   const [showPromoModal, setShowPromoModal] = useState(false);
   const [issueText, setIssueText] = useState("");
   const [isAnnual, setIsAnnual] = useState(1);
-  const [valX, setValX] = useState(0);
-  const [valY, setValY] = useState(3);
+  const [valX, setValX] = useState(1);
+  const [valY, setValY] = useState(4);
 
   const handleChangeInput = (e, name) => {
     const newData = handleFormDataChange(e, name, data, signupFields);
@@ -107,6 +107,22 @@ const SignupPage = () => {
     setActiveRadioOption(tempPlan[0].value);
   };
 
+  const handleLeftArrowClick = () => {
+    console.log("left");
+    if (valX == 0) {
+      return;
+    } else {
+      const tempx = valX - 1;
+      const tempy = valY - 1;
+      setValX(tempx);
+      setValY(tempy);
+    }
+  };
+
+  const handleRightArrowClick = () => {
+    console.log("left");
+  };
+
   const vals = [
     [1, 2, 3, 4, 5, 6, 7, 8],
     [1, 2],
@@ -611,25 +627,30 @@ const SignupPage = () => {
               </div>
             </div>
           </div>
-          <div className="radio-group-box">
-            {signupRadioFields?.slice(valX, valY).map((option, index) => (
-              <div className="signup-radio-container">
-                <Radio
-                  onClick={handleChangeRadioInput}
-                  value={option.value}
-                  name={option.name}
-                  description={option.description}
-                  details={option.details}
-                  activeRadioOption={activeRadioOption}
-                  price={option.pricing}
-                  isAnnual={isAnnual}
-                  isUpgrade={index < disableIndex ? true : false}
-                  disabled={index < disableIndex ? true : false}
-                  currentPlan={currentPlan}
-                  parentIndex={index}
-                />
-              </div>
-            ))}
+
+          <div className="radio-group-super">
+            <div className="toggle-arrow-box"></div>
+            <div className="radio-group-box">
+              {signupRadioFields?.slice(valX, valY).map((option, index) => (
+                <div className="signup-radio-container">
+                  <Radio
+                    onClick={handleChangeRadioInput}
+                    value={option.value}
+                    name={option.name}
+                    description={option.description}
+                    details={option.details}
+                    activeRadioOption={activeRadioOption}
+                    price={option.pricing}
+                    isAnnual={isAnnual}
+                    isUpgrade={index < disableIndex ? true : false}
+                    disabled={index < disableIndex ? true : false}
+                    currentPlan={currentPlan}
+                    parentIndex={index}
+                  />
+                </div>
+              ))}
+            </div>
+            <div className="toggle-arrow-box"></div>
           </div>
           {showAddAccount && !isBusy ? (
             <div className="show-addaccount-wrapper">