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

Merge branch 'corpstatic' of http://git.wdipl.com/Siddhesh.More/optifii-corporate into corpstatic

Browse Source
This commit is contained in:
npcdazai
2024-10-14 13:36:54 +05:30
parent 053c58e192 1e6262c9d2
commit 2c13465ef4
7 changed files with 392 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/App.css
View File

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

70
src/Components/RupeeSlider/RupeeSlider.jsx Normal file
View File

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

12
src/Pages/OptiFiiExpense/WalletProgram.jsx
View File

@@ -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>
);
};

136
src/Pages/OptiFiiExpense/wallet/BenifitStepOne.jsx Normal file
View File

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

159
src/Pages/OptiFiiExpense/wallet/CreateBenefitWalletModal.jsx Normal file
View File

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

8
src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/DigiTable.jsx
View File

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

4
src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SelectCard.jsx
View File

@@ -58,10 +58,10 @@ const SelectCard = ({
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