Siddhesh.More/optifii-corporate
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

pfp

Browse Source
This commit is contained in:
npcdazai
2024-10-14 18:54:15 +05:30
parent 8608ee7321 15e674a609
commit 1dac9fcc34
6 changed files with 263 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.css
View File

@@ -561,4 +561,7 @@ a.active {
}
.css-ylpnre {
gap: 0 !important;
}
.css-90e3v4[data-status=complete] {
background: #3725EA !important;
}

5
src/Components/RupeeSlider/RupeeSlider.jsx
View File

@@ -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"}

70
src/Pages/OptiFiiExpense/wallet/BenifitStepOne.jsx
View File

@@ -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>

88
src/Pages/OptiFiiExpense/wallet/BenifitStepThree.jsx Normal file
View File

@@ -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

57
src/Pages/OptiFiiExpense/wallet/BenifitStepTwo.jsx Normal file
View File

@@ -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

126
src/Pages/OptiFiiExpense/wallet/CreateBenefitWalletModal.jsx
View File

@@ -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,17 +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>
<SubmissionPolicy/>
</Box>
<BenifitStepThree />
)}
{/* Step 4 Content: Define Budget */}
@@ -132,7 +140,7 @@ const CreateBenefitWalletModal = ({ isOpen, onClose }) => {
)}
{/* Stepper Controls */}
<HStack justifyContent="center" pt={4}>
<HStack justifyContent="center" my={4}>
<Button
onClick={prevStep}
isDisabled={activeStep === 0}