From 2145ce0476a9b0037ae9b1a40cd2b82b03427151 Mon Sep 17 00:00:00 2001
From: priyanshuvish <vishpriyanshu172@gmail.com>
Date: Tue, 15 Oct 2024 12:05:29 +0530
Subject: [PATCH] final wallet program

---
 .../wallet/CreateBenefitWalletModal.jsx       | 129 ++++++++++--------
 1 file changed, 69 insertions(+), 60 deletions(-)

diff --git a/src/Pages/OptiFiiExpense/wallet/CreateBenefitWalletModal.jsx b/src/Pages/OptiFiiExpense/wallet/CreateBenefitWalletModal.jsx
index 9a0b46e..823da94 100644
--- a/src/Pages/OptiFiiExpense/wallet/CreateBenefitWalletModal.jsx
+++ b/src/Pages/OptiFiiExpense/wallet/CreateBenefitWalletModal.jsx
@@ -1,8 +1,6 @@
 import React, { useState } from 'react';
 import {
   Box, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalCloseButton, Text, Input, Select, Stack,
-  InputGroup,
-  InputLeftElement,
   HStack,
   Divider,
   Button
@@ -11,19 +9,16 @@ 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 { IoCheckmark } from "react-icons/io5";
+import PrimaryButton from "../../../../src/Components/Buttons/PrimaryButton";
 import RupeeSlider from '../../../Components/RupeeSlider/RupeeSlider';
 import BenifitStepOne from './BenifitStepOne';
-import SubmissionPolicy from './SubmissionPolicy';
-import DefineBudget from './DefineBudget';
-
+import BenifitStepTwo from './BenifitStepTwo';
+import BenifitStepThree from './BenifitStepThree';
+                        
 const CreateBenefitWalletModal = ({ isOpen, onClose }) => {
   // Define steps
   const steps = [
@@ -57,48 +52,66 @@ const CreateBenefitWalletModal = ({ isOpen, onClose }) => {
           <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>
+            {/* Stepper Component with 130% width, custom scrollbar and horizontal scroll */}
+            <Box pb={4}
+              overflowX="auto"
+              sx={{
+                '&::-webkit-scrollbar': {
+                  height: '4px',
+                },
+                '&::-webkit-scrollbar-thumb': {
+                  background: '#3725EA', // Custom scrollbar thumb color
+                  borderRadius: '10px',
+                },
+                '&::-webkit-scrollbar-track': {
+                  background: '#e0e0e0', // Custom scrollbar track color
+                },
+              }}
+            >
+              <Box w="130%"> {/* Set the stepper width to 130% */}
+                <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 ? (
+                            <IoCheckmark />
+                          ) : (
+                            <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" />
                       )}
-                    </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>
+                    </Step>
+                  ))}
+                </Stepper>
+              </Box>
+            </Box>
             <Divider color={"#f6f1fc"} />
 
             {/* Conditionally render form fields based on active step */}
@@ -111,28 +124,24 @@ const CreateBenefitWalletModal = ({ isOpen, onClose }) => {
 
                 {/* 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>
+                  <BenifitStepTwo />
                 )}
 
                 {/* Step 3 Content: Submission Policy */}
                 {activeStep === 2 && (
-                  <Box>
-                    <SubmissionPolicy/>
-                  </Box>
+                  <BenifitStepThree />
                 )}
 
                 {/* Step 4 Content: Define Budget */}
                 {activeStep === 3 && (
                   <Box>
-                    <DefineBudget/>
+                    <Text fontSize="sm" fontWeight="500" color={"#344054"} mb={0}>Define Budget</Text>
+                    <RupeeSlider />
                   </Box>
                 )}
 
                 {/* Stepper Controls */}
-                <HStack justifyContent="center" pt={4}>
+                <HStack justifyContent="center" my={4}>
                   <Button
                     onClick={prevStep}
                     isDisabled={activeStep === 0}