From f4de901a6add9f71cb3c453557bf2c9ba8d2b18b Mon Sep 17 00:00:00 2001
From: priyanshuvish <vishpriyanshu172@gmail.com>
Date: Mon, 14 Oct 2024 17:43:13 +0530
Subject: [PATCH] complete three steps

---
 src/App.css                                   |   3 +
 src/Components/RupeeSlider/RupeeSlider.jsx    |   5 +-
 .../OptiFiiExpense/wallet/BenifitStepOne.jsx  |  70 ++++++----
 .../wallet/BenifitStepThree.jsx               |  88 ++++++++++++
 .../OptiFiiExpense/wallet/BenifitStepTwo.jsx  |  57 ++++++++
 .../wallet/CreateBenefitWalletModal.jsx       | 125 ++++++++++--------
 6 files changed, 263 insertions(+), 85 deletions(-)
 create mode 100644 src/Pages/OptiFiiExpense/wallet/BenifitStepThree.jsx
 create mode 100644 src/Pages/OptiFiiExpense/wallet/BenifitStepTwo.jsx

diff --git a/src/App.css b/src/App.css
index 547a3ff..5635b66 100644
--- a/src/App.css
+++ b/src/App.css
@@ -561,4 +561,7 @@ a.active {
 }
 .css-ylpnre {
  gap: 0 !important;
+}
+.css-90e3v4[data-status=complete] {
+  background: #3725EA !important;
 }
\ No newline at end of file
diff --git a/src/Components/RupeeSlider/RupeeSlider.jsx b/src/Components/RupeeSlider/RupeeSlider.jsx
index afbdf08..3d696f1 100644
--- a/src/Components/RupeeSlider/RupeeSlider.jsx
+++ b/src/Components/RupeeSlider/RupeeSlider.jsx
@@ -33,9 +33,10 @@ const RupeeSlider = () => {
                         textAlign='center'
                         bg='#efeefe'
                         color='#3725EA'
-                        mt='-14'
-                        ml='-7'
+                        mt='-12'
+                        ml='-45px'
                         p={2}
+                        w={90}
                         fontSize={"xs"}
                         fontWeight={600}
                         rounded={"md"}
diff --git a/src/Pages/OptiFiiExpense/wallet/BenifitStepOne.jsx b/src/Pages/OptiFiiExpense/wallet/BenifitStepOne.jsx
index 79a4897..9480232 100644
--- a/src/Pages/OptiFiiExpense/wallet/BenifitStepOne.jsx
+++ b/src/Pages/OptiFiiExpense/wallet/BenifitStepOne.jsx
@@ -1,16 +1,29 @@
 import React, { useState } from 'react';
 import {
-  Box, Text, Input, Select, Stack,
-  InputGroup,
-  InputLeftElement,
-  HStack,
-  Divider,
+    Box, Text, Input, Select, Stack,
+    InputGroup,
+    InputLeftElement,
+    HStack,
+    Divider,
+    Tag,
 } from "@chakra-ui/react";
 import { MdCurrencyRupee } from "react-icons/md";
 import { HiOutlineExclamationCircle } from "react-icons/hi2";
 import RupeeSlider from '../../../Components/RupeeSlider/RupeeSlider';
 
 const BenifitStepOne = () => {
+
+    const transactionRules = [
+        {
+            ruleText: "Either of them",
+            tags: ["Food", "Fuel"]
+        },
+        {
+            ruleText: "None of them",
+            tags: ["Electronics", "Clothing"]
+        }
+    ];
+
     return (
         <Box >
             {/* Your form fields */}
@@ -83,26 +96,33 @@ const BenifitStepOne = () => {
 
                 <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>
+                    {transactionRules.map((rule, index) => (
+                        <Stack key={index} direction="row" spacing={4} mb={4}>
+                            {/* Transaction rule: Dynamic content */}
+                            <Box w={40}>
+                                <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}>
+                                        {rule.ruleText} {/* Dynamic text from the rule */}
+                                    </Text>
+                                    <HiOutlineExclamationCircle color='#3725EA' />
+                                </HStack>
+                            </Box>
+
+                            {/* Dynamic Tags */}
+                            <Box flex={1}>
+                                <Text fontSize="xs" fontWeight="500" color={"#344054"} mb={1}>Merchant category</Text>
+                                <HStack spacing={2} border={"1px solid #D0D5DD"} p={2} rounded={"md"}>
+                                    {rule.tags.map((tag, tagIndex) => (
+                                        <Tag key={tagIndex} size='sm' variant='solid' bg={"#efeefe"} color={"#3725EA"} fontWeight={500}>
+                                            {tag}
+                                        </Tag>
+                                    ))}
+                                </HStack>
+                            </Box>
+                        </Stack>
+                    ))}
+
                 </Box>
                 <Divider color={"#f6f1fc"} />
                 <Box>
diff --git a/src/Pages/OptiFiiExpense/wallet/BenifitStepThree.jsx b/src/Pages/OptiFiiExpense/wallet/BenifitStepThree.jsx
new file mode 100644
index 0000000..cc7b640
--- /dev/null
+++ b/src/Pages/OptiFiiExpense/wallet/BenifitStepThree.jsx
@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import {
+    Box, Text, Input, Select, Stack,
+    InputGroup,
+    InputLeftElement,
+    HStack,
+    Divider,
+    Radio,
+    RadioGroup,
+} from "@chakra-ui/react";
+import { MdCurrencyRupee } from "react-icons/md";
+import { HiOutlineExclamationCircle } from "react-icons/hi2";
+import RupeeSlider from '../../../Components/RupeeSlider/RupeeSlider';
+
+const BenifitStepThree = () => {
+    return (
+        <Box >
+            {/* Your form fields */}
+            <Stack spacing={4}>
+                <Box>
+                    <Text fontSize="sm" fontWeight="500" color={"#344054"} mb={0}>Create submission policy</Text>
+                </Box>
+                <Box>
+                    <Box>
+                        <Text fontSize={"sm"} fontWeight={500} mb={3}>
+                            1. Requirement of receipt
+                        </Text>
+                        <RadioGroup defaultValue='2'>
+                            <Stack>
+                                <Radio size='md' name='1' colorScheme='purple' value='1'>
+                                    <Text fontSize="xs" fontWeight="500" color={"#3F4754"} mb={0}>Required</Text>
+                                </Radio>
+                                <Radio size='md' name='1' colorScheme='purple' value='2'>
+                                    <Text fontSize="xs" fontWeight="500" color={"#3F4754"} mb={0}> Not required</Text>
+                                </Radio>
+                            </Stack>
+                        </RadioGroup>
+                    </Box>
+                    <Box mt={4}>
+                        <Text fontSize={"xs"} color={"#535963"} fontWeight={500} mb={2}>
+                            Required for
+                        </Text>
+                        <RadioGroup defaultValue='2'>
+                            <Stack>
+                                <Radio size='md' name='1' colorScheme='purple' value='1'>
+                                    <Text fontSize="xs" fontWeight="500" color={"#3F4754"} mb={0}>All transaction</Text>
+                                </Radio>
+                                <HStack alignItems={"start"}>
+                                    <Radio size='md' name='1' colorScheme='purple' value='2'>
+                                        <Text fontSize="xs" fontWeight="500" color={"#3F4754"} mb={0}>Transaction above</Text>
+                                    </Radio>
+                                    <InputGroup w={60} >
+                                        <InputLeftElement pointerEvents='none'>
+                                            <MdCurrencyRupee color='#636F83' size={12} />
+                                        </InputLeftElement>
+                                        <Input border={"1px solid #8a4dd8"} />
+                                    </InputGroup>
+                                </HStack>
+                            </Stack>
+                        </RadioGroup>
+                    </Box>
+                </Box>
+                <Box>
+                    <Box>
+                        <Text fontSize={"sm"} fontWeight={500} mb={3}>
+                            2. what nature of receipt/memo
+                        </Text>
+                        <RadioGroup defaultValue='3'>
+                            <Stack>
+                                <Radio size='md' name='1' colorScheme='purple' value='1'>
+                                    <Text fontSize="xs" fontWeight="500" color={"#3F4754"} mb={0}>Printed</Text>
+                                </Radio>
+                                <Radio size='md' name='1' colorScheme='purple' value='2'>
+                                    <Text fontSize="xs" fontWeight="500" color={"#3F4754"} mb={0}>Hand written</Text>
+                                </Radio>
+                                <Radio size='md' name='1' colorScheme='purple' value='3'>
+                                    <Text fontSize="xs" fontWeight="500" color={"#3F4754"} mb={0}>Both</Text>
+                                </Radio>
+                            </Stack>
+                        </RadioGroup>
+                    </Box>
+                </Box>
+            </Stack>
+        </Box>
+    )
+}
+
+export default BenifitStepThree
\ No newline at end of file
diff --git a/src/Pages/OptiFiiExpense/wallet/BenifitStepTwo.jsx b/src/Pages/OptiFiiExpense/wallet/BenifitStepTwo.jsx
new file mode 100644
index 0000000..957b7c9
--- /dev/null
+++ b/src/Pages/OptiFiiExpense/wallet/BenifitStepTwo.jsx
@@ -0,0 +1,57 @@
+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 BenifitStepTwo = () => {
+    return (
+        <Box >
+            {/* Your form fields */}
+            <Stack spacing={4}>
+                <Box>
+                    <Text fontSize="sm" fontWeight="500" color={"#344054"} mb={1}>Create approval policy</Text>
+                    <Text fontSize="12px" fontWeight="500" color={"#606060"} mb={0}>Add up to 5 policy per approver flow </Text>
+                </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={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 bg={"#faf8fd"} p={4} rounded={"sm"} mt={4}>
+                        <Text color={"#344054"} fontSize={"xs"} mb={2} fontWeight={500}>Set amount limit</Text>
+                        <RupeeSlider />
+                    </Box>
+            </Stack>
+        </Box>
+    )
+}
+
+export default BenifitStepTwo
\ No newline at end of file
diff --git a/src/Pages/OptiFiiExpense/wallet/CreateBenefitWalletModal.jsx b/src/Pages/OptiFiiExpense/wallet/CreateBenefitWalletModal.jsx
index 314b7f0..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,17 +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 BenifitStepTwo from './BenifitStepTwo';
+import BenifitStepThree from './BenifitStepThree';
+                        
 const CreateBenefitWalletModal = ({ isOpen, onClose }) => {
   // Define steps
   const steps = [
@@ -55,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 */}
@@ -109,18 +124,12 @@ 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>
-                    <Text fontSize="sm" fontWeight="500" color={"#344054"} mb={0}>Submission Policy</Text>
-                    <Text>This is step 3 content.</Text>
-                  </Box>
+                  <BenifitStepThree />
                 )}
 
                 {/* Step 4 Content: Define Budget */}
@@ -132,7 +141,7 @@ const CreateBenefitWalletModal = ({ isOpen, onClose }) => {
                 )}
 
                 {/* Stepper Controls */}
-                <HStack justifyContent="center" pt={4}>
+                <HStack justifyContent="center" my={4}>
                   <Button
                     onClick={prevStep}
                     isDisabled={activeStep === 0}