NAN

src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForGiftCard.jsx

@@ -14,6 +14,10 @@ import SelectCard from "./SelectCard";
 import DigiTable from "./DigiTable";
 import WhereToShare from "./WhereToShare";
 import PrimaryButton from "../../../../src/Components/Buttons/PrimaryButton";
+import mobilepng from "../../../assets/mobileCard.png";
+import cardfooter from "../../../assets/cardFooter.png";
+import cardfooter2 from "../../../assets/cardFooter2.png";
+import cardfooter3 from "../../../assets/cardFooter3.png";
 
 const Stepper = () => {
   const [step, setStep] = useState(1);
@@ -30,10 +34,38 @@ const Stepper = () => {
   //   }
   // };
 
+  const cards = [
+    {
+      title: "Save More",
+      subtitle: "Digital Gift Card",
+      description:
+        "Choose a plan and get onboard in minutes. Then get $100 credits for your next payment.",
+      image: mobilepng,
+      img: cardfooter,
+      component: <WhereToShare />,  
+    },
+    {
+      title: "Save More",
+      subtitle: "Physical Gift Card",
+      description:
+        "Choose a plan and get onboard in minutes. Then get $100 credits for your next payment.",
+      img: cardfooter2,
+      component: <DigiTable />,  
+    },
+    {
+      title: "Save More",
+      subtitle: "Insta Gift Card",
+      description:
+        "Choose a plan and get onboard in minutes. Then get $100 credits for your next payment.",
+      img: cardfooter3,
+      component: <WhereToShare />,  
+    },
+  ];
+
   const handleNext = () => {
-    // if (step < steps.length) {
-    //   setStep(step + 1);
-    // }
+    if (selectedCardIndex < selectedCardIndex.length) {
+      setStep(selectedCardIndex + 1);
+    }
     if (selectedCardIndex !== null) {
       setHasProceeded(true);
     } else {
@@ -61,6 +93,7 @@ const Stepper = () => {
           setShowAnotherComponent={setShowAnotherComponent}
           hasProceeded={hasProceeded}
           setHasProceeded={setHasProceeded}
+          cards={cards}
         />
       ),
       label: "Select card type",
@@ -84,7 +117,6 @@ const Stepper = () => {
   return (
     <Box bgColor="#F3F3F9" {...OPACITY_ON_LOAD} overflow={"scroll"} p={4}>
       <Box>
-        {/* Stepper Header */}
         <Box bgColor="#fff" maxW="100%" rounded={"md"} p={4} mb={4}>
           <RadioGroup
             value={String(step)}