Stepper succeed

src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForGiftCard.jsx

@@ -18,12 +18,26 @@ import PrimaryButton from "../../../../src/Components/Buttons/PrimaryButton";
 const Stepper = () => {
   const [step, setStep] = useState(1);
   const [selectedCardIndex, setSelectedCardIndex] = useState(null);
-  const [selectionCount, setSelectionCount] = useState(0); // Track selection count
-  const [showAnotherComponent, setShowAnotherComponent] = useState(false); // Toggle between components
+  const [selectionCount, setSelectionCount] = useState(0);
+  const [showAnotherComponent, setShowAnotherComponent] = useState(false);
+  const [hasProceeded, setHasProceeded] = useState(false);
+
+  // const handleProceed = () => {
+  //   if (selectedCardIndex !== null) {
+  //     setHasProceeded(true);
+  //   } else {
+  //     alert("Please select a card before proceeding.");
+  //   }
+  // };
 
   const handleNext = () => {
-    if (step < steps.length) {
-      setStep(step + 1);
+    // if (step < steps.length) {
+    //   setStep(step + 1);
+    // }
+    if (selectedCardIndex !== null) {
+      setHasProceeded(true);
+    } else {
+      alert("Please select a card before proceeding.");
     }
     setShowAnotherComponent(!showAnotherComponent);
   };
@@ -45,6 +59,8 @@ const Stepper = () => {
           setSelectionCount={setSelectionCount}
           showAnotherComponent={showAnotherComponent}
           setShowAnotherComponent={setShowAnotherComponent}
+          hasProceeded={hasProceeded}
+          setHasProceeded={setHasProceeded}
         />
       ),
       label: "Select card type",
@@ -103,9 +119,19 @@ const Stepper = () => {
                       fontSize="xs"
                       mb={0}
                       fontWeight={600}
-                      color={index + 1 === step ? "#3725EA" : index < step ? "green" : "#666666"}
+                      color={
+                        index + 1 === step
+                          ? "#3725EA"
+                          : index < step
+                          ? "green"
+                          : "#666666"
+                      }
                     >
-                      {index + 1 === step ? "In Progress" : index < step ? "Completed" : "Pending"}
+                      {index + 1 === step
+                        ? "In Progress"
+                        : index < step
+                        ? "Completed"
+                        : "Pending"}
                     </Text>
                   </VStack>
 

src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SelectCard.jsx

@@ -1,12 +1,12 @@
 import { Box, Button, Icon, Image, Text, VStack } from "@chakra-ui/react";
-import React, { useEffect, useRef } from "react";
-import VanillaTilt from "vanilla-tilt"; // Ensure this is imported
+import React, { useEffect, useRef, useState } from "react";
+import VanillaTilt from "vanilla-tilt";
 import mobilepng from "../../../assets/mobileCard.png";
 import cardfooter from "../../../assets/cardFooter.png";
 import cardfooter2 from "../../../assets/cardFooter2.png";
 import cardfooter3 from "../../../assets/cardFooter3.png";
 import { IoMdCheckmark } from "react-icons/io";
-import DigiTable from './DigiTable';
+import DigiTable from "./DigiTable";
 import WhereToShare from "./WhereToShare";
 
 const SelectCard = ({
@@ -14,8 +14,10 @@ const SelectCard = ({
   selectedCardIndex,
   setSelectedCardIndex,
   selectionCount,
-  setSelectionCount, // Added selection count prop
+  setSelectionCount,
+  hasProceeded
 }) => {
+  
   const tiltRefs = useRef([]);
 
   const cards = [
@@ -26,6 +28,7 @@ const SelectCard = ({
         "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",
@@ -33,6 +36,7 @@ const SelectCard = ({
       description:
         "Choose a plan and get onboard in minutes. Then get $100 credits for your next payment.",
       img: cardfooter2,
+      component: <DigiTable />,  
     },
     {
       title: "Save More",
@@ -40,12 +44,13 @@ const SelectCard = ({
       description:
         "Choose a plan and get onboard in minutes. Then get $100 credits for your next payment.",
       img: cardfooter3,
+      component: <WhereToShare />,  
     },
   ];
 
   const handleCardClick = (index) => {
     setSelectedCardIndex(index);
-    setSelectionCount(selectionCount + 1); // Track selection count
+    setSelectionCount(selectionCount + 1);
   };
 
   // VanillaTilt effect
@@ -78,24 +83,19 @@ const SelectCard = ({
     };
   }, []);
 
-  const selectedCardData = [
-    {
-      title: <WhereToShare />, // For Digital Gift Card
-    },
-    {
-      title: <DigiTable />, // For Physical Gift Card
-    },
-    {
-      title: <WhereToShare />, // For Insta Gift Card
-    },
-  ];
+
 
   return (
     <Box>
-      {selectedCardIndex !== null ? (
-        <Box>{selectedCardData[selectedCardIndex]?.title}</Box> // Show selected card content
+      {hasProceeded && selectedCardIndex !== null ? (
+        <Box>{cards[selectedCardIndex].component}</Box>
       ) : (
-        <Box display="flex" justifyContent={"start"} alignItems={"start"} gap={6}>
+        <Box
+          display="flex"
+          justifyContent={"start"}
+          alignItems={"start"}
+          gap={6}
+        >
           {cards.map((card, index) => (
             <Box
               key={index}
@@ -125,11 +125,11 @@ const SelectCard = ({
                   fontSize="small"
                   fontWeight={500}
                   _hover={{ bgColor: "transparent", color: "white" }}
-                  onClick={() => handleCardClick(index)} // Handle card selection
+                  onClick={() => handleCardClick(index)}
                 >
                   {selectedCardIndex === index ? (
                     <>
-                      <Icon as={IoMdCheckmark} mr={2} /> {/* Check icon when selected */}
+                      <Icon as={IoMdCheckmark} mr={2} /> 
                       Selected
                     </>
                   ) : (
@@ -177,6 +177,11 @@ const SelectCard = ({
           ))}
         </Box>
       )}
+      {/* <Box mt={8}>
+        <Button colorScheme="purple" onClick={handleProceed}>
+          Save and Proceed
+        </Button>
+      </Box> */}
     </Box>
   );
 };