From 671310b7cf35e05081a249230ab62820484378b8 Mon Sep 17 00:00:00 2001
From: priyanshuvish <vishpriyanshu172@gmail.com>
Date: Mon, 14 Oct 2024 13:34:03 +0530
Subject: [PATCH] last thre pending

---
 src/App.css                                   |  12 ++
 src/Components/RupeeSlider/RupeeSlider.jsx    |  70 ++++++++
 src/Pages/OptiFiiExpense/WalletProgram.jsx    |  12 +-
 .../OptiFiiExpense/wallet/BenifitStepOne.jsx  | 136 +++++++++++++++
 .../wallet/CreateBenefitWalletModal.jsx       | 159 ++++++++++++++++++
 .../ApplyForGiftCard/DigiTable.jsx            |   8 +-
 .../ApplyForGiftCard/SelectCard.jsx           |  34 ++--
 7 files changed, 405 insertions(+), 26 deletions(-)
 create mode 100644 src/Components/RupeeSlider/RupeeSlider.jsx
 create mode 100644 src/Pages/OptiFiiExpense/wallet/BenifitStepOne.jsx
 create mode 100644 src/Pages/OptiFiiExpense/wallet/CreateBenefitWalletModal.jsx

diff --git a/src/App.css b/src/App.css
index caecd47..547a3ff 100644
--- a/src/App.css
+++ b/src/App.css
@@ -550,3 +550,15 @@ a.active {
 }
 
 /* Styling the scrollbar */
+
+/* for stepper  */
+.css-1mdamwy[data-status=complete] {
+  background: #3725EA !important;
+}
+.css-1mdamwy[data-status=active] {
+  border-width: 1px !important;
+  border-color: #3725EA !important;
+}
+.css-ylpnre {
+ gap: 0 !important;
+}
\ No newline at end of file
diff --git a/src/Components/RupeeSlider/RupeeSlider.jsx b/src/Components/RupeeSlider/RupeeSlider.jsx
new file mode 100644
index 0000000..afbdf08
--- /dev/null
+++ b/src/Components/RupeeSlider/RupeeSlider.jsx
@@ -0,0 +1,70 @@
+import {
+    Box,
+    Slider,
+    SliderTrack,
+    SliderFilledTrack,
+    SliderThumb,
+    SliderMark,
+    HStack,
+    Text,
+} from '@chakra-ui/react'
+import React, { useState } from 'react'
+
+
+const RupeeSlider = () => {
+    const [sliderValue, setSliderValue] = useState(100000); // Default value in rupees
+
+    const formatRupee = (val) => `₹ ${val.toLocaleString('en-IN')}`;
+
+    return (
+        <Box>
+            <HStack mt={12}>
+                <Text fontSize="xs" fontWeight="500" color={"#9A9A9A"} mb={0} w={12}>₹ 100</Text>
+                <Slider
+                    aria-label='slider-ex-6'
+                    onChange={(val) => setSliderValue(val)}
+                    colorScheme='purple'
+                    min={100}
+                    max={500000}
+                    defaultValue={100000}
+                >
+                    <SliderMark
+                        value={sliderValue}
+                        textAlign='center'
+                        bg='#efeefe'
+                        color='#3725EA'
+                        mt='-14'
+                        ml='-7'
+                        p={2}
+                        fontSize={"xs"}
+                        fontWeight={600}
+                        rounded={"md"}
+                        position="relative"
+                        sx={{
+                            '::after': {
+                                content: '""',
+                                position: 'absolute',
+                                bottom: '-3', // Adjust the distance of the arrow from the mark
+                                left: '50%',
+                                transform: 'translateX(-50%)',
+                                borderWidth: '6px',
+                                borderStyle: 'solid',
+                                borderColor: '#efeefe transparent transparent transparent', // Arrow color matching the bg
+                            },
+                        }}
+                    >
+                        {formatRupee(sliderValue)}
+                    </SliderMark>
+
+                    <SliderTrack>
+                        <SliderFilledTrack />
+                    </SliderTrack>
+                    <SliderThumb />
+                </Slider>
+                <Text fontSize="xs" fontWeight="500" color={"#9A9A9A"} mb={0} w={24}>₹ 5,00,000</Text>
+            </HStack>
+        </Box>
+    )
+}
+
+export default RupeeSlider
\ No newline at end of file
diff --git a/src/Pages/OptiFiiExpense/WalletProgram.jsx b/src/Pages/OptiFiiExpense/WalletProgram.jsx
index 161d836..87c3a8c 100644
--- a/src/Pages/OptiFiiExpense/WalletProgram.jsx
+++ b/src/Pages/OptiFiiExpense/WalletProgram.jsx
@@ -16,6 +16,7 @@ import {
   Tag,
   TagLabel,
   Text,
+  useDisclosure,
   VStack,
 } from "@chakra-ui/react";
 import React, { useContext, useEffect, useMemo, useState } from "react";
@@ -64,12 +65,14 @@ import {
   TabPanels,
   TabPanel,
 } from "@chakra-ui/react";
+import CreateBenefitWalletModal from "./wallet/CreateBenefitWalletModal";
 
 const WalletProgram = () => {
   const { walletProgram } = useContext(GlobalStateContext);
   const [isLoading, setIsLoading] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
   const [showGrid, setShowGrid] = useState(true);
+  const { isOpen, onOpen, onClose } = useDisclosure();
 
   const handleViewToggle = (viewType) => {
     setShowGrid(viewType === "grid");
@@ -201,9 +204,10 @@ const WalletProgram = () => {
                   </MenuItem>
                 </MenuList>
               </Menu>
-              <NavLink to="/wallet-program/create-wallet">
-                <PrimaryButton leftIcon={<AddIcon />} title={"Create wallet"} />
-              </NavLink>
+                <PrimaryButton onClick={onOpen} leftIcon={<AddIcon />} title={"Create wallet"} />
+
+              {/* <NavLink to="/wallet-program/create-wallet">
+              </NavLink> */}
             </Box>
           </Box>
           <Divider />
@@ -343,6 +347,8 @@ const WalletProgram = () => {
           </Box>
         )}
       </Box>
+      {/* Modal  */}
+      <CreateBenefitWalletModal isOpen={isOpen} onClose={onClose}/>
     </Box>
   );
 };
diff --git a/src/Pages/OptiFiiExpense/wallet/BenifitStepOne.jsx b/src/Pages/OptiFiiExpense/wallet/BenifitStepOne.jsx
new file mode 100644
index 0000000..79a4897
--- /dev/null
+++ b/src/Pages/OptiFiiExpense/wallet/BenifitStepOne.jsx
@@ -0,0 +1,136 @@
+import React, { useState } from 'react';
+import {
+  Box, Text, Input, Select, Stack,
+  InputGroup,
+  InputLeftElement,
+  HStack,
+  Divider,
+} from "@chakra-ui/react";
+import { MdCurrencyRupee } from "react-icons/md";
+import { HiOutlineExclamationCircle } from "react-icons/hi2";
+import RupeeSlider from '../../../Components/RupeeSlider/RupeeSlider';
+
+const BenifitStepOne = () => {
+    return (
+        <Box >
+            {/* Your form fields */}
+            <Stack spacing={4}>
+                <Box>
+                    <Text fontSize="sm" fontWeight="500" color={"#344054"} mb={0}>Create wallet policy</Text>
+                </Box>
+                <Box>
+                    <Text fontSize="xs" fontWeight="500" color={"#344054"} mb={1}>Wallet name</Text>
+                    <Box bg={"#f7f3fc"} p={2} rounded={"md"}>
+                        <Text fontSize="xs" fontWeight="500" color={"#636F83"} mb={0}>Food</Text>
+                    </Box>
+                </Box>
+                <Box>
+                    <Text fontSize="xs" fontWeight="500" color={"#344054"} mb={1}>Description</Text>
+                    <Box bg={"#f7f3fc"} p={2} rounded={"md"}>
+                        <Text fontSize="xs" fontWeight="500" color={"#636F83"} mb={0}>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus.
+                        </Text>
+                    </Box>
+                </Box>
+
+                <Box>
+                    <Text fontSize="xs" fontWeight="500" color={"#344054"} mb={2}>Transaction limit</Text>
+                    <Text fontSize="xs" fontWeight="500" color={"#636F83"} mb={1}>Total amount</Text>
+                    <InputGroup>
+                        <InputLeftElement pointerEvents='none'>
+                            <MdCurrencyRupee color='#636F83' size={12} />
+                        </InputLeftElement>
+                        <Input type='tel' />
+                    </InputGroup>
+                </Box>
+
+                <Divider color={"#f6f1fc"} />
+
+                <Box>
+                    <Text fontSize="xs" fontWeight="500" color={"#344054"} mb={2}>Grades & transaction limit</Text>
+                    <Stack direction="row" spacing={4}>
+                        <Box>
+                            <Text fontSize="xs" fontWeight="500" color={"#636F83"} mb={1}>Grade/level</Text>
+                            <Input />
+                        </Box>
+                        <Box>
+                            <Text fontSize="xs" fontWeight="500" color={"#636F83"} mb={1}>Amount</Text>
+                            <InputGroup>
+                                <InputLeftElement pointerEvents='none'>
+                                    <MdCurrencyRupee color='#636F83' size={12} />
+                                </InputLeftElement>
+                                <Input />
+                            </InputGroup>
+                        </Box>
+                    </Stack>
+                </Box>
+                <Divider color={"#f6f1fc"} />
+
+                <Box>
+                    <Text fontSize="xs" fontWeight="500" color={"#344054"} mb={1}>Select wallet type</Text>
+                    <Select placeholder="Select wallet type" fontSize={"sm"} fontWeight={500}>
+                        <option value="prepaid">Prepaid</option>
+                    </Select>
+                </Box>
+
+                <Box>
+                    <Text fontSize="xs" fontWeight="500" color={"#344054"} mb={1}>Select transaction type</Text>
+                    <Select placeholder="Select transaction type" fontSize={"sm"} fontWeight={500}>
+                        <option value="ecommerce">Ecommerce</option>
+                    </Select>
+                </Box>
+                <Divider color={"#f6f1fc"} />
+
+                <Box>
+                    <Text fontSize="sm" fontWeight="500" color={"#344054"} mb={3}>Merchant transaction rule</Text>
+                    <Stack direction="row" spacing={4}>
+                        <Box>
+                            <Text fontSize="xs" fontWeight="500" color={"#344054"} mb={1}>Transaction rule</Text>
+                            <HStack spacing={2} border={"1px solid #D0D5DD"} rounded={"md"} p={2}>
+                                <Text fontSize="12px" fontWeight="500" color={"#6B6B6B"} mb={0}>
+                                    Either of them
+                                </Text>
+                                <HiOutlineExclamationCircle color='#3725EA' />
+                            </HStack>
+                        </Box>
+                        <Box flex={1}>
+                            <Text fontSize="xs" fontWeight="500" color={"#344054"} mb={1}>Transaction rule</Text>
+                            <HStack spacing={2} border={"1px solid #D0D5DD"} rounded={"md"} p={2}>
+                                <Text fontSize="12px" fontWeight="500" color={"#6B6B6B"} mb={0}>
+                                    Merchant category
+                                </Text>
+                                <HiOutlineExclamationCircle color='#3725EA' />
+                            </HStack>
+                        </Box>
+                    </Stack>
+                </Box>
+                <Divider color={"#f6f1fc"} />
+                <Box>
+                    <Text fontSize="sm" fontWeight="500" color={"#344054"} mb={3}>Set transaction limit</Text>
+                    <Box>
+                        <Text fontSize="xs" fontWeight="500" color={"#344054"} mb={1}>Set maximum limit</Text>
+                        <RupeeSlider />
+                    </Box>
+                    <HStack bg={"#efeefe"} p={2} rounded={"md"} border={"1px solid #b4adf7"} mt={6}>
+                        <Text color={"#676D76"} fontSize={"xs"} mb={0} fontWeight={500}>Maximum limit -</Text>
+                        <Text color={"#3725EA"} fontSize={"sm"} mb={0} fontWeight={500}>₹ 50,000</Text>
+                    </HStack>
+                    <Box bg={"#faf8fd"} p={4} rounded={"sm"} mt={4}>
+                        <Text color={"#344054"} fontSize={"xs"} mb={2} fontWeight={500}>Set daily limit</Text>
+                        <RupeeSlider />
+                    </Box>
+                    <Box bg={"#faf8fd"} p={4} rounded={"sm"} mt={4}>
+                        <Text color={"#344054"} fontSize={"xs"} mb={2} fontWeight={500}>Set weekly limit</Text>
+                        <RupeeSlider />
+                    </Box>
+                    <Box bg={"#faf8fd"} p={4} rounded={"sm"} mt={4}>
+                        <Text color={"#344054"} fontSize={"xs"} mb={2} fontWeight={500}>Set monthly limit</Text>
+                        <RupeeSlider />
+                    </Box>
+                </Box>
+            </Stack>
+        </Box>
+    )
+}
+
+export default BenifitStepOne
\ No newline at end of file
diff --git a/src/Pages/OptiFiiExpense/wallet/CreateBenefitWalletModal.jsx b/src/Pages/OptiFiiExpense/wallet/CreateBenefitWalletModal.jsx
new file mode 100644
index 0000000..314b7f0
--- /dev/null
+++ b/src/Pages/OptiFiiExpense/wallet/CreateBenefitWalletModal.jsx
@@ -0,0 +1,159 @@
+import React, { useState } from 'react';
+import {
+  Box, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalCloseButton, Text, Input, Select, Stack,
+  InputGroup,
+  InputLeftElement,
+  HStack,
+  Divider,
+  Button
+} from "@chakra-ui/react";
+import {
+  Step,
+  StepIndicator,
+  StepSeparator,
+  StepStatus,
+  StepTitle,
+  Stepper,
+} from '@chakra-ui/react';
+import { IoIosCheckmark } from "react-icons/io";
+import { MdCurrencyRupee } from "react-icons/md";
+import { HiOutlineExclamationCircle } from "react-icons/hi2";
+import PrimaryButton from "../../../../src/Components/Buttons/PrimaryButton"
+import RupeeSlider from '../../../Components/RupeeSlider/RupeeSlider';
+import BenifitStepOne from './BenifitStepOne';
+
+const CreateBenefitWalletModal = ({ isOpen, onClose }) => {
+  // Define steps
+  const steps = [
+    { title: 'Wallet policy' },
+    { title: 'Approval policy' },
+    { title: 'Submission policy' },
+    { title: 'Define budget' },
+  ];
+
+  // Use useState to control the active step
+  const [activeStep, setActiveStep] = useState(0);
+
+  const nextStep = () => {
+    if (activeStep < steps.length - 1) {
+      setActiveStep(activeStep + 1);
+    }
+  };
+
+  const prevStep = () => {
+    if (activeStep > 0) {
+      setActiveStep(activeStep - 1);
+    }
+  };
+
+  return (
+    <Box>
+      {/* Modal component */}
+      <Modal size={"xl"} isOpen={isOpen} onClose={onClose} isCentered>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Create Benefit Wallet</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            {/* Stepper Component */}
+            <Stepper size="lg" index={activeStep} color={"#3725EA"} gap={1}>
+              {steps.map((step, index) => (
+                <Step key={index}>
+                  <StepIndicator w={6} h={6} >
+                    <Box
+                      borderRadius="full"
+                      bg={index < activeStep ? '#3725EA' : (index === activeStep ? '#3725EA' : 'gray.300')}
+                      color={index < activeStep || index === activeStep ? 'white' : 'gray.500'}
+                      w={4}
+                      h={4}
+                      display="flex"
+                      alignItems="center"
+                      justifyContent="center"
+                    >
+                      {index < activeStep ? (
+                        <IoIosCheckmark boxSize={6} />
+                      ) : (
+                        <Text mb={0} fontSize={"sm"}>{index + 1}</Text>
+                      )}
+                    </Box>
+                  </StepIndicator>
+
+                  <Box flexShrink="0" ml={2}>
+                    <StepTitle mb={0} fontSize="sm" >
+                      <Text
+                        mb={0}
+                        fontSize="sm"
+                        fontWeight={500}
+                        color={index <= activeStep ? '#3725EA' : 'gray.500'}
+                      >
+                        {step.title}
+                      </Text>
+                    </StepTitle>
+                  </Box>
+
+                  {index !== steps.length - 1 && (
+                    <StepSeparator borderColor="gray.300" />
+                  )}
+                </Step>
+              ))}
+            </Stepper>
+            <Divider color={"#f6f1fc"} />
+
+            {/* Conditionally render form fields based on active step */}
+            <Box mt={6}>
+              <Stack spacing={4}>
+                {/* Step 1 Content: Create Wallet Policy */}
+                {activeStep === 0 && (
+                  <BenifitStepOne />
+                )}
+
+                {/* Step 2 Content: Approval Policy */}
+                {activeStep === 1 && (
+                  <Box>
+                    <Text fontSize="sm" fontWeight="500" color={"#344054"} mb={0}>Approval Policy</Text>
+                    <Text>This is step 2 content.</Text>
+                  </Box>
+                )}
+
+                {/* Step 3 Content: Submission Policy */}
+                {activeStep === 2 && (
+                  <Box>
+                    <Text fontSize="sm" fontWeight="500" color={"#344054"} mb={0}>Submission Policy</Text>
+                    <Text>This is step 3 content.</Text>
+                  </Box>
+                )}
+
+                {/* Step 4 Content: Define Budget */}
+                {activeStep === 3 && (
+                  <Box>
+                    <Text fontSize="sm" fontWeight="500" color={"#344054"} mb={0}>Define Budget</Text>
+                    <RupeeSlider />
+                  </Box>
+                )}
+
+                {/* Stepper Controls */}
+                <HStack justifyContent="center" pt={4}>
+                  <Button
+                    onClick={prevStep}
+                    isDisabled={activeStep === 0}
+                    fontSize={"sm"}
+                    h={8}
+                  >
+                    Previous
+                  </Button>
+                  <PrimaryButton title={"Save & Proceed"}
+                    onClick={nextStep}
+                    isDisabled={activeStep === steps.length - 1}
+                  />
+                </HStack>
+              </Stack>
+            </Box>
+
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </Box>
+  );
+};
+
+export default CreateBenefitWalletModal;
diff --git a/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/DigiTable.jsx b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/DigiTable.jsx
index f8c79cf..307d225 100644
--- a/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/DigiTable.jsx
+++ b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/DigiTable.jsx
@@ -56,13 +56,13 @@ const BrandVoucherTable = () => {
         </Text>
         <FileUploader />
       </Box>
-      <Box bg={"#F4F4F4"} p={1} rounded={"md"} mt={2}>
+      <HStack bg={"#F4F4F4"} p={2} rounded={"md"} mt={2} justifyContent={"center"}>
         <Text
           align="center"
-          mt="1rem"
           color="#0F0F0F"
-          fontWeight={600}
+          fontWeight={500}
           fontSize="small"
+          mb={0}
         >
           Download a{" "}
           <span style={{ color: "#3725EA", fontWeight: 700 }}>
@@ -70,7 +70,7 @@ const BrandVoucherTable = () => {
           </span>{" "}
           to quickly start your import
         </Text>
-      </Box>
+      </HStack>
       {/* Divider with "OR" */}
       <Flex alignItems="center" my={6}>
         <Box flex="1" borderBottom="1px" borderColor="#DCDCDC" />
diff --git a/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SelectCard.jsx b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SelectCard.jsx
index 264822c..a05052c 100644
--- a/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SelectCard.jsx
+++ b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SelectCard.jsx
@@ -5,7 +5,6 @@ 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 { CheckIcon } from "@chakra-ui/icons";
 import { IoMdCheckmark } from "react-icons/io";
 
 const cards = [
@@ -36,15 +35,16 @@ const cards = [
 
 const SelectCard = ({ handleNext }) => {
   const tiltRefs = useRef([]);
+  const [selectedCardIndex, setSelectedCardIndex] = useState(null); // Store the selected card index
 
   useEffect(() => {
     tiltRefs.current.forEach((node) => {
       if (node) {
         VanillaTilt.init(node, {
-          max: 13,
+          max: 8,
           speed: 700,
           glare: true,
-          scale: 1.05,
+          scale: 1.01,
           "max-glare": 0.5,
           onEnter: () => {
             node.style.zIndex = 10; // Bring to top on hover
@@ -66,17 +66,13 @@ const SelectCard = ({ handleNext }) => {
     };
   }, [tiltRefs]);
 
-  // For check select 
-
-  const [isSelected, setIsSelected] = useState(false);
-
-  const handleClick = () => {
-    setIsSelected((prevState) => !prevState);
+  // Handle card selection
+  const handleClick = (index) => {
+    setSelectedCardIndex(index); // Set the clicked card as selected
   };
 
-
   return (
-    <Box >
+    <Box>
       <Box display="flex" justifyContent={"start"} alignItems={"start"} gap={6}>
         {cards.map((card, index) => (
           <Box
@@ -86,14 +82,14 @@ const SelectCard = ({ handleNext }) => {
             color="white"
             borderRadius="lg"
             overflow="hidden"
-            width={{ base: "100%", md: "300px" }}
+            width={{ base: "100%", md: "270px" }}
             padding={6}
             textAlign="center"
             boxShadow="lg"
             position="relative"
           >
             <VStack
-              h="373px"
+              h="370px"
               alignItems="flex-start"
               spacing={0}
               position="relative"
@@ -101,15 +97,15 @@ const SelectCard = ({ handleNext }) => {
               <Button
                 h={8}
                 px={6}
-                bgColor={isSelected ? "#fff" : "transparent"} // Change background color when selected
-                color={isSelected ? "purple.500" : "#fff"} // Change text color when selected
+                bgColor={selectedCardIndex === index ? "#fff" : "transparent"} // Change background color when selected
+                color={selectedCardIndex === index ? "purple.500" : "#fff"} // Change text color when selected
                 border="1px solid #fff"
                 fontSize="small"
-                fontWeight={500}
+                fontWeight={600}
                 _hover={{ bgColor: "transparent", color: "white" }}
-                onClick={handleClick}
+                onClick={() => handleClick(index)} // Pass index to handleClick
               >
-                {isSelected ? (
+                {selectedCardIndex === index ? (
                   <>
                     <Icon as={IoMdCheckmark} mr={2} /> {/* Check icon when selected */}
                     Selected
@@ -146,7 +142,7 @@ const SelectCard = ({ handleNext }) => {
               {card.img && (
                 <Image
                   src={card.img}
-                  h="111px"
+                  w="200px"
                   objectFit="cover"
                   position="absolute"
                   bottom="-1.5rem"