pending modal pending
This commit is contained in:
priyanshuvish
74
package-lock.json
generated
74
package-lock.json
generated
@@ -19,15 +19,18 @@
|
||||
"bootstrap": "5.3.3",
|
||||
"chart.js": "^4.4.3",
|
||||
"dotenv": "^16.4.5",
|
||||
"framer-motion": "^11.1.5",
|
||||
"framer-motion": "^11.5.4",
|
||||
"js-cookie": "^3.0.5",
|
||||
"leaflet": "^1.9.4",
|
||||
"react": "^18.2.0",
|
||||
"react-apexcharts": "^1.4.1",
|
||||
"react-beautiful-dnd": "^13.1.1",
|
||||
"react-chartjs-2": "^5.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-dropzone": "^14.2.3",
|
||||
"react-hook-form": "^7.51.3",
|
||||
"react-icons": "^5.1.0",
|
||||
"react-leaflet": "^4.2.1",
|
||||
"react-quill": "^0.0.2",
|
||||
"react-redux": "^9.1.1",
|
||||
"react-router-dom": "^6.22.3",
|
||||
@@ -2019,6 +2022,16 @@
|
||||
"url": "https://opencollective.com/popperjs"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-leaflet/core": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz",
|
||||
"integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==",
|
||||
"peerDependencies": {
|
||||
"leaflet": "^1.9.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@reduxjs/toolkit": {
|
||||
"version": "2.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.3.tgz",
|
||||
@@ -2836,6 +2849,14 @@
|
||||
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
|
||||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
|
||||
},
|
||||
"node_modules/attr-accept": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
|
||||
"integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==",
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/available-typed-arrays": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
|
||||
@@ -3731,6 +3752,17 @@
|
||||
"node": "^10.12.0 || >=12.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/file-selector": {
|
||||
"version": "0.6.0",
|
||||
"resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
|
||||
"integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.4.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 12"
|
||||
}
|
||||
},
|
||||
"node_modules/find-root": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
|
||||
@@ -3833,9 +3865,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/framer-motion": {
|
||||
"version": "11.1.5",
|
||||
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.1.5.tgz",
|
||||
"integrity": "sha512-ogK5fc0GBUT3AjzMXPx7f74m5V1ByRqkKQARBVHpdkYTNDxb/WriANYD+5JBo1wklQQJ1HayDZtmofQLqZFcbw==",
|
||||
"version": "11.5.4",
|
||||
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.5.4.tgz",
|
||||
"integrity": "sha512-E+tb3/G6SO69POkdJT+3EpdMuhmtCh9EWuK4I1DnIC23L7tFPrl8vxP+LSovwaw6uUr73rUbpb4FgK011wbRJQ==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.4.0"
|
||||
},
|
||||
@@ -4660,6 +4692,11 @@
|
||||
"json-buffer": "3.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/leaflet": {
|
||||
"version": "1.9.4",
|
||||
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
|
||||
"integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
|
||||
},
|
||||
"node_modules/levn": {
|
||||
"version": "0.4.1",
|
||||
"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
|
||||
@@ -5252,6 +5289,22 @@
|
||||
"react": "^18.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dropzone": {
|
||||
"version": "14.2.3",
|
||||
"resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz",
|
||||
"integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==",
|
||||
"dependencies": {
|
||||
"attr-accept": "^2.2.2",
|
||||
"file-selector": "^0.6.0",
|
||||
"prop-types": "^15.8.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 10.13"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">= 16.8 || 18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-fast-compare": {
|
||||
"version": "3.2.2",
|
||||
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
|
||||
@@ -5307,6 +5360,19 @@
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"node_modules/react-leaflet": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz",
|
||||
"integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==",
|
||||
"dependencies": {
|
||||
"@react-leaflet/core": "^2.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"leaflet": "^1.9.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-quill": {
|
||||
"version": "0.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-quill/-/react-quill-0.0.2.tgz",
|
||||
|
||||
@@ -21,15 +21,18 @@
|
||||
"bootstrap": "5.3.3",
|
||||
"chart.js": "^4.4.3",
|
||||
"dotenv": "^16.4.5",
|
||||
"framer-motion": "^11.1.5",
|
||||
"framer-motion": "^11.5.4",
|
||||
"js-cookie": "^3.0.5",
|
||||
"leaflet": "^1.9.4",
|
||||
"react": "^18.2.0",
|
||||
"react-apexcharts": "^1.4.1",
|
||||
"react-beautiful-dnd": "^13.1.1",
|
||||
"react-chartjs-2": "^5.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-dropzone": "^14.2.3",
|
||||
"react-hook-form": "^7.51.3",
|
||||
"react-icons": "^5.1.0",
|
||||
"react-leaflet": "^4.2.1",
|
||||
"react-quill": "^0.0.2",
|
||||
"react-redux": "^9.1.1",
|
||||
"react-router-dom": "^6.22.3",
|
||||
|
||||
16
src/App.jsx
16
src/App.jsx
@@ -18,6 +18,14 @@ import WelcomeToOptifii from "./Pages/Onboarding/WelcomeToOptifii";
|
||||
import LoginPhoneNumber from "./Pages/Onboarding/LoginPhoneNumber";
|
||||
import LoginEmailAddress from "./Pages/Onboarding/LoginEmailAddress";
|
||||
import LoginEmailOtp from "./Pages/Onboarding/LoginOtp";
|
||||
import LoginEkyc from "./Pages/Onboarding/LoginEkyc";
|
||||
import MinimumKyc from "./Pages/Onboarding/MinimumKyc";
|
||||
import FullKyc from "./Pages/Onboarding/FullKyc";
|
||||
import FullKycLocation from "./Pages/Onboarding/FullKycLocation";
|
||||
import FullKycQandA from "./Pages/Onboarding/FullKycQandA";
|
||||
import FullKycFaceVerification from "./Pages/Onboarding/FullKycFaceVerification";
|
||||
import FullKycAadharVerification from "./Pages/Onboarding/FullKycAadharVerification";
|
||||
import FullKycPanVerification from "./Pages/Onboarding/FullKycPanVerification";
|
||||
|
||||
const App = () => {
|
||||
// const { isAuthenticate } = useSelector((state) => state?.auth);
|
||||
@@ -60,6 +68,14 @@ const App = () => {
|
||||
<Route path="/login-phone-number" element={<LoginPhoneNumber />} />
|
||||
<Route path="/login-email-address" element={<LoginEmailAddress />} />
|
||||
<Route path="/login-otp" element={<LoginEmailOtp />} />
|
||||
<Route path="/ekyc" element={<LoginEkyc />} />
|
||||
<Route path="/minimum-kyc" element={<MinimumKyc />} />
|
||||
<Route path="/maximum-kyc" element={<FullKyc />} />
|
||||
<Route path="/full-kyc-location" element={<FullKycLocation />} />
|
||||
<Route path="/full-kyc-q&a" element={<FullKycQandA />} />
|
||||
<Route path="/full-kyc-face-verification" element={<FullKycFaceVerification />} />
|
||||
<Route path="/full-kyc-aadhar-verification" element={<FullKycAadharVerification />} />
|
||||
<Route path="/full-kyc-pan-verification" element={<FullKycPanVerification />} />
|
||||
|
||||
|
||||
<Route
|
||||
|
||||
@@ -27,7 +27,7 @@ const Footer = () => {
|
||||
</HStack>
|
||||
|
||||
{/* Center Navigation */}
|
||||
<HStack spacing={20} alignItems={"start"}>
|
||||
<HStack spacing={16} alignItems={"start"}>
|
||||
<VStack align="start">
|
||||
<Link fontSize={"sm"} fontWeight={500}>Home</Link>
|
||||
<Link fontSize={"sm"} fontWeight={500}>About Us</Link>
|
||||
|
||||
132
src/Pages/Onboarding/FullKyc.jsx
Normal file
132
src/Pages/Onboarding/FullKyc.jsx
Normal file
@@ -0,0 +1,132 @@
|
||||
import React, { useState } from 'react';
|
||||
import FullKycFrame from './FullKycFrame';
|
||||
import { Box, Container, Text, HStack, Stack, Stepper, Step, StepIndicator, StepStatus, StepSeparator, useSteps, StepIcon, List, ListItem, ListIcon } from '@chakra-ui/react';
|
||||
import PrimaryButton from '../../Components/Buttons/PrimaryButton';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { ChevronRightIcon } from '@chakra-ui/icons';
|
||||
|
||||
const FullKyc = () => {
|
||||
|
||||
const steps = [
|
||||
{ description: 'Location' },
|
||||
{ description: 'Q and A' },
|
||||
{ description: 'Face verification' },
|
||||
{ description: 'Aadhar Verification' },
|
||||
{ description: 'Pan Verification' },
|
||||
];
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
|
||||
// Stepper configuration
|
||||
const { activeStep } = useSteps({
|
||||
index: 0,
|
||||
count: steps.length,
|
||||
});
|
||||
|
||||
return (
|
||||
<FullKycFrame>
|
||||
<Container maxW={'container.xl'}>
|
||||
<Box w={'100%'} my={5} boxShadow={'md'}>
|
||||
<Box bg={'#fff'} p={4} borderRadius={'md'} display={'flex'} justifyContent={'center'}>
|
||||
<Box maxW={700}>
|
||||
<Text color={'#100F14'} fontWeight={600} fontSize={'xl'} textAlign={'center'} mb={2}>
|
||||
Full KYC
|
||||
</Text>
|
||||
|
||||
<Text color={'#49475A'} fontWeight={500} fontSize={'sm'} textAlign={'center'}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.
|
||||
</Text>
|
||||
|
||||
<Box mt={8}>
|
||||
<Stack spacing={2}>
|
||||
<Stepper
|
||||
size='sm'
|
||||
index={activeStep}
|
||||
gap='0'
|
||||
sx={{
|
||||
'--stepper-accent-color': '#ddd',
|
||||
}}
|
||||
|
||||
>
|
||||
{steps.map((step, index) => (
|
||||
<Step key={index} gap='0'>
|
||||
<StepIndicator>
|
||||
<StepStatus complete={<StepIcon />} />
|
||||
</StepIndicator>
|
||||
<StepSeparator _horizontal={{ ml: '0' }} />
|
||||
</Step>
|
||||
))}
|
||||
</Stepper>
|
||||
<HStack justifyContent="space-between" alignItems={"center"}>
|
||||
{steps.map((step, index) => (
|
||||
<Text
|
||||
key={index}
|
||||
fontSize="xs"
|
||||
fontWeight={index === activeStep ? 'normal' : 'normal'}
|
||||
color={index === activeStep ? 'gray.500' : 'gray.400'}
|
||||
textAlign="center"
|
||||
>
|
||||
{step.description}
|
||||
</Text>
|
||||
))}
|
||||
</HStack>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
<Box mt={10}>
|
||||
<Text fontWeight={600} fontSize={'md'} textAlign={'center'} mb={1}>
|
||||
Instructions to be followed
|
||||
</Text>
|
||||
<Text fontWeight={500} fontSize={'xs'} textAlign={'center'} color={"#3F3F3F"}>
|
||||
Build trust by verifying your identity
|
||||
</Text>
|
||||
|
||||
<Box mt={8}>
|
||||
<List spacing={3}>
|
||||
<ListItem display={"flex"} alignItems={"start"} justifyContent={"center"}>
|
||||
<ListIcon as={ChevronRightIcon} color='#1E1E1E' />
|
||||
<Text fontWeight={500} fontSize={'xs'} color={"#373434"}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit
|
||||
</Text>
|
||||
</ListItem>
|
||||
<ListItem display={"flex"} alignItems={"start"} justifyContent={"center"}>
|
||||
<ListIcon as={ChevronRightIcon} color='#1E1E1E' />
|
||||
<Text fontWeight={500} fontSize={'xs'} color={"#373434"}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit
|
||||
</Text>
|
||||
</ListItem>
|
||||
<ListItem display={"flex"} alignItems={"start"} justifyContent={"center"}>
|
||||
<ListIcon as={ChevronRightIcon} color='#1E1E1E' />
|
||||
<Text fontWeight={500} fontSize={'xs'} color={"#373434"}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit
|
||||
</Text>
|
||||
</ListItem>
|
||||
<ListItem display={"flex"} alignItems={"start"} justifyContent={"center"}>
|
||||
<ListIcon as={ChevronRightIcon} color='#1E1E1E' />
|
||||
<Text fontWeight={500} fontSize={'xs'} color={"#373434"}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit
|
||||
</Text>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Box>
|
||||
|
||||
<Box mt={10}>
|
||||
<HStack justifyContent={'center'} mt={6}>
|
||||
<PrimaryButton
|
||||
onClick={() => navigate("/full-kyc-location")}
|
||||
w={'300px'}
|
||||
title={'Proceed'}
|
||||
/>
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
</FullKycFrame>
|
||||
);
|
||||
};
|
||||
|
||||
export default FullKyc;
|
||||
79
src/Pages/Onboarding/FullKycAadharVerification.jsx
Normal file
79
src/Pages/Onboarding/FullKycAadharVerification.jsx
Normal file
@@ -0,0 +1,79 @@
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import FullKycAadharVerificationFrame from './FullKycAadharVerificationFrame';
|
||||
import { Box, HStack, Image, Text, VStack } from '@chakra-ui/react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import PrimaryButton from '../../Components/Buttons/PrimaryButton';
|
||||
import { SlCloudUpload } from "react-icons/sl";
|
||||
import { useDropzone } from 'react-dropzone';
|
||||
|
||||
const FullKycAadharVerification = () => {
|
||||
const [selectedImage, setSelectedImage] = useState(null);
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Dropzone setup
|
||||
const onDrop = useCallback((acceptedFiles) => {
|
||||
const file = acceptedFiles[0];
|
||||
if (file) {
|
||||
setSelectedImage(URL.createObjectURL(file));
|
||||
}
|
||||
}, []);
|
||||
|
||||
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
||||
onDrop,
|
||||
accept: 'image/*',
|
||||
});
|
||||
|
||||
return (
|
||||
<FullKycAadharVerificationFrame>
|
||||
<Box bg={"#F8F3FF"} borderRadius={"md"} p={4}>
|
||||
<Text color={'#100F14'} fontWeight={600} fontSize={'sm'} mb={1}>
|
||||
Upload Aadhar Card
|
||||
</Text>
|
||||
|
||||
<Text color={'#49475A'} fontWeight={500} fontSize={'xs'} mb={2}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.
|
||||
</Text>
|
||||
|
||||
<Box my={2} h={300} p={4}>
|
||||
<VStack
|
||||
{...getRootProps()}
|
||||
border={"1px dashed #100F14"}
|
||||
boxShadow={"md"}
|
||||
borderRadius={"md"}
|
||||
bg={"#fff"}
|
||||
p={4}
|
||||
h={"280px"}
|
||||
justifyContent={"center"}
|
||||
cursor="pointer"
|
||||
>
|
||||
<input {...getInputProps()} />
|
||||
{selectedImage ? (
|
||||
<Image src={selectedImage} alt="Uploaded Aadhar" maxH="240px" objectFit="cover" />
|
||||
) : (
|
||||
<>
|
||||
<SlCloudUpload color={"#6311CB"} size={100} />
|
||||
<Text
|
||||
color={"#6311CB"}
|
||||
fontWeight={"600"}
|
||||
fontSize={"sm"}
|
||||
mt={'4'}
|
||||
mb={0}
|
||||
>
|
||||
{isDragActive ? 'Drop the image here...' : 'Upload from gallery'}
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
</VStack>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<HStack justifyContent={"center"} mt={4}>
|
||||
<PrimaryButton title={"Next"}
|
||||
onClick={()=> navigate("/full-kyc-pan-verification")}
|
||||
w={"80%"} />
|
||||
</HStack>
|
||||
</FullKycAadharVerificationFrame>
|
||||
);
|
||||
};
|
||||
|
||||
export default FullKycAadharVerification;
|
||||
162
src/Pages/Onboarding/FullKycAadharVerificationFrame.jsx
Normal file
162
src/Pages/Onboarding/FullKycAadharVerificationFrame.jsx
Normal file
@@ -0,0 +1,162 @@
|
||||
import React from 'react'
|
||||
import { OPACITY_ON_LOAD } from '../../Layout/animations'
|
||||
import { Box, Container, Text, HStack, Stack, Stepper, Step, StepIndicator, StepStatus, StepSeparator, useSteps, StepIcon, List, ListItem, ListIcon, Image } from '@chakra-ui/react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import Header from './Header';
|
||||
import Footer from './Footer';
|
||||
import { BiSolidMicrophone } from "react-icons/bi";
|
||||
import { MdVideocam } from "react-icons/md";
|
||||
import { MdCallEnd } from "react-icons/md";
|
||||
import call_first from "../../assets/call_first.svg"
|
||||
import call_sec from "../../assets/call_sec.svg"
|
||||
|
||||
const FullKycAadharVerificationFrame = ({ children }) => {
|
||||
|
||||
const steps = [
|
||||
{ description: 'Location' },
|
||||
{ description: 'Q and A' },
|
||||
{ description: 'Face verification' },
|
||||
{ description: 'Aadhar Verification' },
|
||||
{ description: 'Pan Verification' },
|
||||
];
|
||||
|
||||
// Stepper configuration
|
||||
const { activeStep } = useSteps({
|
||||
index: 3,
|
||||
count: steps.length,
|
||||
});
|
||||
|
||||
return (
|
||||
|
||||
<Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
|
||||
<Header />
|
||||
<Box
|
||||
w={'100%'}
|
||||
minH={'60vh'}
|
||||
bg={'#f3f3f9'}
|
||||
px={6}
|
||||
display={"flex"}
|
||||
justifyContent={"center"}
|
||||
alignItems={"start"}
|
||||
>
|
||||
<Box w={'100%'} my={5} boxShadow={'md'}>
|
||||
<Box bg={'#fff'} p={4} borderRadius={'md'} >
|
||||
<Text color={'#100F14'} fontWeight={600} fontSize={'xl'} textAlign={'center'} mb={2}>
|
||||
Full KYC
|
||||
</Text>
|
||||
|
||||
<Text color={'#49475A'} fontWeight={500} fontSize={'sm'} textAlign={'center'}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.
|
||||
</Text>
|
||||
<Box>
|
||||
<Box mt={8}>
|
||||
<Stack spacing={2}>
|
||||
<Stepper
|
||||
size='sm'
|
||||
index={activeStep}
|
||||
gap='0'
|
||||
sx={{
|
||||
'--stepper-accent-color': '#6311CB',
|
||||
}}
|
||||
>
|
||||
{steps.map((step, index) => (
|
||||
<Step key={index} gap='0'>
|
||||
<StepIndicator>
|
||||
<StepStatus complete={<StepIcon />} />
|
||||
</StepIndicator>
|
||||
<StepSeparator _horizontal={{ ml: '0' }} />
|
||||
</Step>
|
||||
))}
|
||||
</Stepper>
|
||||
<HStack justifyContent="space-between" alignItems={"center"} >
|
||||
{steps.map((step, index) => (
|
||||
<Text
|
||||
key={index}
|
||||
fontSize="xs"
|
||||
fontWeight={index === activeStep ? 'bold' : 'normal'}
|
||||
color={index === activeStep ? 'purple.500' : 'gray.400'}
|
||||
textAlign="center"
|
||||
>
|
||||
{step.description}
|
||||
</Text>
|
||||
))}
|
||||
</HStack>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
|
||||
<Box>
|
||||
<HStack spacing={6} mt={8} alignItems={"start"} justifyContent={"space-between"} >
|
||||
<Box mb={4} w={"35%"}>
|
||||
<HStack spacing={4}>
|
||||
<Image
|
||||
boxSize='240px'
|
||||
objectFit='cover'
|
||||
src={call_first}
|
||||
alt='Dan Abramov'
|
||||
/>
|
||||
<Image
|
||||
boxSize='240px'
|
||||
objectFit='cover'
|
||||
src={call_sec}
|
||||
alt='Dan Abramov'
|
||||
/>
|
||||
</HStack>
|
||||
<Box mt={4} w={"52%"}>
|
||||
<HStack
|
||||
bg={"#484848"}
|
||||
borderRadius={"full"}
|
||||
py={2}
|
||||
px={2}
|
||||
spacing={4}
|
||||
justifyContent={"center"}
|
||||
>
|
||||
<Box
|
||||
bg="#6A6A6A"
|
||||
p="2"
|
||||
borderRadius="full"
|
||||
display="inline-flex"
|
||||
>
|
||||
<BiSolidMicrophone color="white" size="14px" />
|
||||
</Box>
|
||||
<Box
|
||||
bg="#6A6A6A"
|
||||
p="2"
|
||||
borderRadius="full"
|
||||
display="inline-flex"
|
||||
>
|
||||
<MdVideocam color="white" size="14px" />
|
||||
</Box>
|
||||
<HStack
|
||||
bg="rgba(237, 12, 12, 0.68)"
|
||||
py="1"
|
||||
px={2}
|
||||
borderRadius="full"
|
||||
display="inline-flex"
|
||||
>
|
||||
<MdCallEnd color="white" size="14px" />
|
||||
<Text mb={0} fontSize={"xs"} fontWeight={500} color={"#fff"}>End</Text>
|
||||
</HStack>
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
w={"62%"}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Footer />
|
||||
</Box>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default FullKycAadharVerificationFrame
|
||||
43
src/Pages/Onboarding/FullKycFaceVerification.jsx
Normal file
43
src/Pages/Onboarding/FullKycFaceVerification.jsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import React, { useState } from 'react';
|
||||
import FullKycFaceVerificationFrame from './FullKycFaceVerificationFrame';
|
||||
import { Box, HStack, Image, Input, Text } from '@chakra-ui/react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import PrimaryButton from '../../Components/Buttons/PrimaryButton';
|
||||
import face_verification from '../../assets/face_verification.svg'
|
||||
|
||||
|
||||
const FullKycFaceVerification = () => {
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<FullKycFaceVerificationFrame>
|
||||
<Box
|
||||
bg={"#F8F3FF"}
|
||||
borderRadius={"md"}
|
||||
p={4}
|
||||
>
|
||||
<Text color={'#100F14'} fontWeight={600} fontSize={'sm'} mb={1}>
|
||||
Position your face in the oval
|
||||
</Text>
|
||||
|
||||
<Text color={'#49475A'} fontWeight={500} fontSize={'xs'} mb={2}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.
|
||||
</Text>
|
||||
|
||||
<Box my={2} boxSize="xxl" p={4}>
|
||||
<Image src={face_verification} width="100%" alt="Face Verification" />
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
<HStack justifyContent={"center"} mt={4} >
|
||||
<PrimaryButton title={"Next"}
|
||||
onClick={()=> navigate("/full-kyc-aadhar-verification")}
|
||||
w={"80%"} />
|
||||
</HStack>
|
||||
|
||||
</FullKycFaceVerificationFrame>
|
||||
);
|
||||
};
|
||||
|
||||
export default FullKycFaceVerification;
|
||||
162
src/Pages/Onboarding/FullKycFaceVerificationFrame.jsx
Normal file
162
src/Pages/Onboarding/FullKycFaceVerificationFrame.jsx
Normal file
@@ -0,0 +1,162 @@
|
||||
import React from 'react'
|
||||
import { OPACITY_ON_LOAD } from '../../Layout/animations'
|
||||
import { Box, Container, Text, HStack, Stack, Stepper, Step, StepIndicator, StepStatus, StepSeparator, useSteps, StepIcon, List, ListItem, ListIcon, Image } from '@chakra-ui/react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import Header from './Header';
|
||||
import Footer from './Footer';
|
||||
import { BiSolidMicrophone } from "react-icons/bi";
|
||||
import { MdVideocam } from "react-icons/md";
|
||||
import { MdCallEnd } from "react-icons/md";
|
||||
import call_first from "../../assets/call_first.svg"
|
||||
import call_sec from "../../assets/call_sec.svg"
|
||||
|
||||
const FullKycFaceVerificationFrame = ({ children }) => {
|
||||
|
||||
const steps = [
|
||||
{ description: 'Location' },
|
||||
{ description: 'Q and A' },
|
||||
{ description: 'Face verification' },
|
||||
{ description: 'Aadhar Verification' },
|
||||
{ description: 'Pan Verification' },
|
||||
];
|
||||
|
||||
// Stepper configuration
|
||||
const { activeStep } = useSteps({
|
||||
index: 2,
|
||||
count: steps.length,
|
||||
});
|
||||
|
||||
return (
|
||||
|
||||
<Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
|
||||
<Header />
|
||||
<Box
|
||||
w={'100%'}
|
||||
minH={'60vh'}
|
||||
bg={'#f3f3f9'}
|
||||
px={6}
|
||||
display={"flex"}
|
||||
justifyContent={"center"}
|
||||
alignItems={"start"}
|
||||
>
|
||||
<Box w={'100%'} my={5} boxShadow={'md'}>
|
||||
<Box bg={'#fff'} p={4} borderRadius={'md'} >
|
||||
<Text color={'#100F14'} fontWeight={600} fontSize={'xl'} textAlign={'center'} mb={2}>
|
||||
Full KYC
|
||||
</Text>
|
||||
|
||||
<Text color={'#49475A'} fontWeight={500} fontSize={'sm'} textAlign={'center'}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.
|
||||
</Text>
|
||||
<Box>
|
||||
<Box mt={8}>
|
||||
<Stack spacing={2}>
|
||||
<Stepper
|
||||
size='sm'
|
||||
index={activeStep}
|
||||
gap='0'
|
||||
sx={{
|
||||
'--stepper-accent-color': '#6311CB',
|
||||
}}
|
||||
>
|
||||
{steps.map((step, index) => (
|
||||
<Step key={index} gap='0'>
|
||||
<StepIndicator>
|
||||
<StepStatus complete={<StepIcon />} />
|
||||
</StepIndicator>
|
||||
<StepSeparator _horizontal={{ ml: '0' }} />
|
||||
</Step>
|
||||
))}
|
||||
</Stepper>
|
||||
<HStack justifyContent="space-between" alignItems={"center"} >
|
||||
{steps.map((step, index) => (
|
||||
<Text
|
||||
key={index}
|
||||
fontSize="xs"
|
||||
fontWeight={index === activeStep ? 'bold' : 'normal'}
|
||||
color={index === activeStep ? 'purple.500' : 'gray.400'}
|
||||
textAlign="center"
|
||||
>
|
||||
{step.description}
|
||||
</Text>
|
||||
))}
|
||||
</HStack>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
|
||||
<Box>
|
||||
<HStack spacing={6} mt={8} alignItems={"start"} justifyContent={"space-between"} >
|
||||
<Box mb={4} w={"35%"}>
|
||||
<HStack spacing={4}>
|
||||
<Image
|
||||
boxSize='240px'
|
||||
objectFit='cover'
|
||||
src={call_first}
|
||||
alt='Dan Abramov'
|
||||
/>
|
||||
<Image
|
||||
boxSize='240px'
|
||||
objectFit='cover'
|
||||
src={call_sec}
|
||||
alt='Dan Abramov'
|
||||
/>
|
||||
</HStack>
|
||||
<Box mt={4} w={"52%"}>
|
||||
<HStack
|
||||
bg={"#484848"}
|
||||
borderRadius={"full"}
|
||||
py={2}
|
||||
px={2}
|
||||
spacing={4}
|
||||
justifyContent={"center"}
|
||||
>
|
||||
<Box
|
||||
bg="#6A6A6A"
|
||||
p="2"
|
||||
borderRadius="full"
|
||||
display="inline-flex"
|
||||
>
|
||||
<BiSolidMicrophone color="white" size="14px" />
|
||||
</Box>
|
||||
<Box
|
||||
bg="#6A6A6A"
|
||||
p="2"
|
||||
borderRadius="full"
|
||||
display="inline-flex"
|
||||
>
|
||||
<MdVideocam color="white" size="14px" />
|
||||
</Box>
|
||||
<HStack
|
||||
bg="rgba(237, 12, 12, 0.68)"
|
||||
py="1"
|
||||
px={2}
|
||||
borderRadius="full"
|
||||
display="inline-flex"
|
||||
>
|
||||
<MdCallEnd color="white" size="14px" />
|
||||
<Text mb={0} fontSize={"xs"} fontWeight={500} color={"#fff"}>End</Text>
|
||||
</HStack>
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
w={"62%"}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Footer />
|
||||
</Box>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default FullKycFaceVerificationFrame
|
||||
33
src/Pages/Onboarding/FullKycFrame.jsx
Normal file
33
src/Pages/Onboarding/FullKycFrame.jsx
Normal file
@@ -0,0 +1,33 @@
|
||||
import React from 'react'
|
||||
import { OPACITY_ON_LOAD } from '../../Layout/animations'
|
||||
|
||||
import {
|
||||
Box,
|
||||
} from "@chakra-ui/react";
|
||||
import Header from './Header';
|
||||
import Footer from './Footer';
|
||||
|
||||
const FullKycFrame = ({ children }) => {
|
||||
return (
|
||||
|
||||
<Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
|
||||
<Header />
|
||||
<Box
|
||||
w={'100%'}
|
||||
minH={'60vh'}
|
||||
bg={'#f3f3f9'}
|
||||
px={6}
|
||||
display={"flex"}
|
||||
justifyContent={"center"}
|
||||
alignItems={"start"}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
|
||||
<Footer />
|
||||
</Box>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default FullKycFrame
|
||||
66
src/Pages/Onboarding/FullKycLocation.jsx
Normal file
66
src/Pages/Onboarding/FullKycLocation.jsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import React, { useState } from 'react';
|
||||
import FullKycLocationFrame from './FullKycLocationFrame';
|
||||
import { Box, Container, HStack, Text } from '@chakra-ui/react';
|
||||
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
|
||||
import L from 'leaflet';
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import PrimaryButton from '../../Components/Buttons/PrimaryButton';
|
||||
|
||||
|
||||
// Custom icon for marker (optional)
|
||||
const locationIcon = new L.Icon({
|
||||
iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
shadowSize: [41, 41],
|
||||
});
|
||||
|
||||
const FullKycLocation = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<FullKycLocationFrame>
|
||||
<Box
|
||||
bg={"#F8F3FF"}
|
||||
borderRadius={"md"}
|
||||
p={4}
|
||||
>
|
||||
<Text color={'#100F14'} fontWeight={600} fontSize={'sm'} mb={1}>
|
||||
Location Verification
|
||||
</Text>
|
||||
|
||||
<Text color={'#49475A'} fontWeight={500} fontSize={'xs'}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.
|
||||
</Text>
|
||||
|
||||
<Box my={2} height="300px">
|
||||
{/* Map Container */}
|
||||
<MapContainer
|
||||
center={[51.505, -0.09]}
|
||||
zoom={18}
|
||||
style={{ height: '100%', width: '100%', borderRadius: '6px' }}
|
||||
>
|
||||
<TileLayer
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
attribution='© <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
/>
|
||||
<Marker position={[51.505, -0.09]} icon={locationIcon}>
|
||||
<Popup>Your Location</Popup>
|
||||
</Marker>
|
||||
</MapContainer>
|
||||
</Box>
|
||||
</Box>
|
||||
<HStack justifyContent={"center"} mt={4} >
|
||||
<PrimaryButton title={"Next"}
|
||||
onClick={()=> navigate("/full-kyc-q&a")}
|
||||
w={"80%"}
|
||||
/>
|
||||
</HStack>
|
||||
|
||||
</FullKycLocationFrame>
|
||||
);
|
||||
};
|
||||
|
||||
export default FullKycLocation;
|
||||
162
src/Pages/Onboarding/FullKycLocationFrame.jsx
Normal file
162
src/Pages/Onboarding/FullKycLocationFrame.jsx
Normal file
@@ -0,0 +1,162 @@
|
||||
import React from 'react'
|
||||
import { OPACITY_ON_LOAD } from '../../Layout/animations'
|
||||
import { Box, Container, Text, HStack, Stack, Stepper, Step, StepIndicator, StepStatus, StepSeparator, useSteps, StepIcon, List, ListItem, ListIcon, Image } from '@chakra-ui/react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import Header from './Header';
|
||||
import Footer from './Footer';
|
||||
import { BiSolidMicrophone } from "react-icons/bi";
|
||||
import { MdVideocam } from "react-icons/md";
|
||||
import { MdCallEnd } from "react-icons/md";
|
||||
import call_first from "../../assets/call_first.svg"
|
||||
import call_sec from "../../assets/call_sec.svg"
|
||||
|
||||
const FullKycLocationFrame = ({ children }) => {
|
||||
|
||||
const steps = [
|
||||
{ description: 'Location' },
|
||||
{ description: 'Q and A' },
|
||||
{ description: 'Face verification' },
|
||||
{ description: 'Aadhar Verification' },
|
||||
{ description: 'Pan Verification' },
|
||||
];
|
||||
|
||||
// Stepper configuration
|
||||
const { activeStep } = useSteps({
|
||||
index: 0,
|
||||
count: steps.length,
|
||||
});
|
||||
|
||||
return (
|
||||
|
||||
<Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
|
||||
<Header />
|
||||
<Box
|
||||
w={'100%'}
|
||||
minH={'60vh'}
|
||||
bg={'#f3f3f9'}
|
||||
px={6}
|
||||
display={"flex"}
|
||||
justifyContent={"center"}
|
||||
alignItems={"start"}
|
||||
>
|
||||
<Box w={'100%'} my={5} boxShadow={'md'}>
|
||||
<Box bg={'#fff'} p={4} borderRadius={'md'} >
|
||||
<Text color={'#100F14'} fontWeight={600} fontSize={'xl'} textAlign={'center'} mb={2}>
|
||||
Full KYC
|
||||
</Text>
|
||||
|
||||
<Text color={'#49475A'} fontWeight={500} fontSize={'sm'} textAlign={'center'}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.
|
||||
</Text>
|
||||
<Box>
|
||||
<Box mt={8}>
|
||||
<Stack spacing={2}>
|
||||
<Stepper
|
||||
size='sm'
|
||||
index={activeStep}
|
||||
gap='0'
|
||||
sx={{
|
||||
'--stepper-accent-color': '#6311CB',
|
||||
}}
|
||||
>
|
||||
{steps.map((step, index) => (
|
||||
<Step key={index} gap='0'>
|
||||
<StepIndicator>
|
||||
<StepStatus complete={<StepIcon />} />
|
||||
</StepIndicator>
|
||||
<StepSeparator _horizontal={{ ml: '0' }} />
|
||||
</Step>
|
||||
))}
|
||||
</Stepper>
|
||||
<HStack justifyContent="space-between" alignItems={"center"} >
|
||||
{steps.map((step, index) => (
|
||||
<Text
|
||||
key={index}
|
||||
fontSize="xs"
|
||||
fontWeight={index === activeStep ? 'bold' : 'normal'}
|
||||
color={index === activeStep ? 'purple.500' : 'gray.400'}
|
||||
textAlign="center"
|
||||
>
|
||||
{step.description}
|
||||
</Text>
|
||||
))}
|
||||
</HStack>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
|
||||
<Box>
|
||||
<HStack spacing={6} mt={8} alignItems={"start"} justifyContent={"space-between"} >
|
||||
<Box mb={4} w={"35%"}>
|
||||
<HStack spacing={4}>
|
||||
<Image
|
||||
boxSize='240px'
|
||||
objectFit='cover'
|
||||
src={call_first}
|
||||
alt='Dan Abramov'
|
||||
/>
|
||||
<Image
|
||||
boxSize='240px'
|
||||
objectFit='cover'
|
||||
src={call_sec}
|
||||
alt='Dan Abramov'
|
||||
/>
|
||||
</HStack>
|
||||
<Box mt={4} w={"52%"}>
|
||||
<HStack
|
||||
bg={"#484848"}
|
||||
borderRadius={"full"}
|
||||
py={2}
|
||||
px={2}
|
||||
spacing={4}
|
||||
justifyContent={"center"}
|
||||
>
|
||||
<Box
|
||||
bg="#6A6A6A"
|
||||
p="2"
|
||||
borderRadius="full"
|
||||
display="inline-flex"
|
||||
>
|
||||
<BiSolidMicrophone color="white" size="14px" />
|
||||
</Box>
|
||||
<Box
|
||||
bg="#6A6A6A"
|
||||
p="2"
|
||||
borderRadius="full"
|
||||
display="inline-flex"
|
||||
>
|
||||
<MdVideocam color="white" size="14px" />
|
||||
</Box>
|
||||
<HStack
|
||||
bg="rgba(237, 12, 12, 0.68)"
|
||||
py="1"
|
||||
px={2}
|
||||
borderRadius="full"
|
||||
display="inline-flex"
|
||||
>
|
||||
<MdCallEnd color="white" size="14px" />
|
||||
<Text mb={0} fontSize={"xs"} fontWeight={500} color={"#fff"}>End</Text>
|
||||
</HStack>
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
w={"62%"}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Footer />
|
||||
</Box>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default FullKycLocationFrame
|
||||
182
src/Pages/Onboarding/FullKycPanVerification.jsx
Normal file
182
src/Pages/Onboarding/FullKycPanVerification.jsx
Normal file
@@ -0,0 +1,182 @@
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import FullKycPanVerificationFrame from './FullKycPanVerificationFrame';
|
||||
import {
|
||||
Box, HStack, Image, Text, VStack,
|
||||
Modal, ModalOverlay, ModalHeader, ModalCloseButton, ModalBody, ModalContent,
|
||||
useDisclosure,
|
||||
Button,
|
||||
} from '@chakra-ui/react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import PrimaryButton from '../../Components/Buttons/PrimaryButton';
|
||||
import { SlCloudUpload } from "react-icons/sl";
|
||||
import { useDropzone } from 'react-dropzone';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
// Define motion components
|
||||
const MotionBox = motion(Box);
|
||||
const MotionSvg = motion("svg");
|
||||
const MotionCircle = motion.circle;
|
||||
const MotionPolyline = motion.polyline;
|
||||
|
||||
const FullKycPanVerification = () => {
|
||||
const [selectedImage, setSelectedImage] = useState(null);
|
||||
const navigate = useNavigate();
|
||||
const { isOpen, onOpen, onClose } = useDisclosure()
|
||||
// Dropzone setup
|
||||
const onDrop = useCallback((acceptedFiles) => {
|
||||
const file = acceptedFiles[0];
|
||||
if (file) {
|
||||
setSelectedImage(URL.createObjectURL(file));
|
||||
}
|
||||
}, []);
|
||||
|
||||
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
||||
onDrop,
|
||||
accept: 'image/*',
|
||||
});
|
||||
|
||||
return (
|
||||
<FullKycPanVerificationFrame>
|
||||
<Box bg={"#F8F3FF"} borderRadius={"md"} p={4}>
|
||||
<Text color={'#100F14'} fontWeight={600} fontSize={'sm'} mb={1}>
|
||||
Upload PAN Card
|
||||
</Text>
|
||||
|
||||
<Text color={'#49475A'} fontWeight={500} fontSize={'xs'} mb={2}>
|
||||
Please upload a clear image of your PAN card.
|
||||
</Text>
|
||||
|
||||
<Box my={2} h={300} p={4}>
|
||||
<VStack
|
||||
{...getRootProps()}
|
||||
border={"1px dashed #100F14"}
|
||||
boxShadow={"md"}
|
||||
borderRadius={"md"}
|
||||
bg={"#fff"}
|
||||
p={4}
|
||||
h={"280px"}
|
||||
justifyContent={"center"}
|
||||
cursor="pointer"
|
||||
>
|
||||
<input {...getInputProps()} />
|
||||
{selectedImage ? (
|
||||
<Image src={selectedImage} alt="Uploaded PAN Card" maxH="240px" objectFit="cover" />
|
||||
) : (
|
||||
<>
|
||||
<SlCloudUpload color={"#6311CB"} size={100} />
|
||||
<Text
|
||||
color={"#6311CB"}
|
||||
fontWeight={"600"}
|
||||
fontSize={"sm"}
|
||||
mt={'4'}
|
||||
mb={0}
|
||||
>
|
||||
{isDragActive ? 'Drop the image here...' : 'Upload from gallery'}
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
</VStack>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<HStack justifyContent={"center"} mt={4}>
|
||||
<PrimaryButton title={"Next"} w={"80%"} onClick={onOpen} />
|
||||
</HStack>
|
||||
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader></ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<MotionBox
|
||||
textAlign="center"
|
||||
initial={{ scale: 0.5, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ duration: 0.5, type: "spring", stiffness: 300 }}
|
||||
mb={8}
|
||||
>
|
||||
{/* svg with Framer Motion animation */}
|
||||
|
||||
<HStack justifyContent={"center"} mb={8}>
|
||||
<MotionSvg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 130.2 130.2"
|
||||
width="100px"
|
||||
height="100px"
|
||||
initial={{ scale: 0.8 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ duration: 0.6, type: "spring", bounce: 0.5 }}
|
||||
>
|
||||
<MotionCircle
|
||||
cx="65.1"
|
||||
cy="65.1"
|
||||
r="62.1"
|
||||
fill="#65F37C"
|
||||
stroke="#159F2B"
|
||||
strokeWidth="0"
|
||||
strokeDasharray="1000"
|
||||
strokeDashoffset="1000"
|
||||
initial={{ strokeDashoffset: 1000 }}
|
||||
animate={{ strokeDashoffset: 0 }}
|
||||
transition={{ duration: 1 }}
|
||||
/>
|
||||
<MotionPolyline
|
||||
points="100.2,40.2 51.5,88.8 29.8,67.5"
|
||||
fill="none"
|
||||
stroke="#159F2B"
|
||||
strokeWidth="6"
|
||||
strokeLinecap="round"
|
||||
strokeMiterlimit="10"
|
||||
strokeDasharray="1000"
|
||||
strokeDashoffset="-100"
|
||||
initial={{ strokeDashoffset: 1000 }}
|
||||
animate={{ strokeDashoffset: 0 }}
|
||||
transition={{ duration: 0.7, delay: 1 }}
|
||||
/>
|
||||
</MotionSvg>
|
||||
</HStack>
|
||||
|
||||
<Text
|
||||
color={"#100F14"}
|
||||
fontSize={"md"}
|
||||
fontWeight={"600"}
|
||||
textAlign={"center"}
|
||||
mb={2}
|
||||
>
|
||||
KYC is done successfully!
|
||||
</Text>
|
||||
<Text
|
||||
color={"#686677"}
|
||||
fontSize={"xs"}
|
||||
fontWeight={"500"}
|
||||
textAlign={"center"}
|
||||
>
|
||||
You’re all set and ready to start
|
||||
</Text>
|
||||
|
||||
<HStack justifyContent={"center"}>
|
||||
<Button
|
||||
onClick={open}
|
||||
_hover={{ opacity: 0.8 }}
|
||||
px={0}
|
||||
fontSize={"sm"}
|
||||
color={"#3725EA"}
|
||||
textDecoration={"underline"}
|
||||
fontWeight={600}
|
||||
bg={"transparent"}
|
||||
>
|
||||
Continue
|
||||
</Button>
|
||||
</HStack>
|
||||
|
||||
</MotionBox>
|
||||
</ModalBody>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</FullKycPanVerificationFrame>
|
||||
);
|
||||
};
|
||||
|
||||
export default FullKycPanVerification;
|
||||
162
src/Pages/Onboarding/FullKycPanVerificationFrame.jsx
Normal file
162
src/Pages/Onboarding/FullKycPanVerificationFrame.jsx
Normal file
@@ -0,0 +1,162 @@
|
||||
import React from 'react'
|
||||
import { OPACITY_ON_LOAD } from '../../Layout/animations'
|
||||
import { Box, Text, HStack, Stack, Stepper, Step, StepIndicator, StepStatus, StepSeparator, useSteps, StepIcon, List, ListItem, ListIcon, Image } from '@chakra-ui/react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import Header from './Header';
|
||||
import Footer from './Footer';
|
||||
import { BiSolidMicrophone } from "react-icons/bi";
|
||||
import { MdVideocam } from "react-icons/md";
|
||||
import { MdCallEnd } from "react-icons/md";
|
||||
import call_first from "../../assets/call_first.svg"
|
||||
import call_sec from "../../assets/call_sec.svg"
|
||||
|
||||
const FullKycPanVerificationFrame = ({ children }) => {
|
||||
|
||||
const steps = [
|
||||
{ description: 'Location' },
|
||||
{ description: 'Q and A' },
|
||||
{ description: 'Face verification' },
|
||||
{ description: 'Aadhar Verification' },
|
||||
{ description: 'Pan Verification' },
|
||||
];
|
||||
|
||||
// Stepper configuration
|
||||
const { activeStep } = useSteps({
|
||||
index: 4,
|
||||
count: steps.length,
|
||||
});
|
||||
|
||||
return (
|
||||
|
||||
<Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
|
||||
<Header />
|
||||
<Box
|
||||
w={'100%'}
|
||||
minH={'60vh'}
|
||||
bg={'#f3f3f9'}
|
||||
px={6}
|
||||
display={"flex"}
|
||||
justifyContent={"center"}
|
||||
alignItems={"start"}
|
||||
>
|
||||
<Box w={'100%'} my={5} boxShadow={'md'}>
|
||||
<Box bg={'#fff'} p={4} borderRadius={'md'} >
|
||||
<Text color={'#100F14'} fontWeight={600} fontSize={'xl'} textAlign={'center'} mb={2}>
|
||||
Full KYC
|
||||
</Text>
|
||||
|
||||
<Text color={'#49475A'} fontWeight={500} fontSize={'sm'} textAlign={'center'}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.
|
||||
</Text>
|
||||
<Box>
|
||||
<Box mt={8}>
|
||||
<Stack spacing={2}>
|
||||
<Stepper
|
||||
size='sm'
|
||||
index={activeStep}
|
||||
gap='0'
|
||||
sx={{
|
||||
'--stepper-accent-color': '#6311CB',
|
||||
}}
|
||||
>
|
||||
{steps.map((step, index) => (
|
||||
<Step key={index} gap='0'>
|
||||
<StepIndicator>
|
||||
<StepStatus complete={<StepIcon />} />
|
||||
</StepIndicator>
|
||||
<StepSeparator _horizontal={{ ml: '0' }} />
|
||||
</Step>
|
||||
))}
|
||||
</Stepper>
|
||||
<HStack justifyContent="space-between" alignItems={"center"} >
|
||||
{steps.map((step, index) => (
|
||||
<Text
|
||||
key={index}
|
||||
fontSize="xs"
|
||||
fontWeight={index === activeStep ? 'bold' : 'normal'}
|
||||
color={index === activeStep ? 'purple.500' : 'gray.400'}
|
||||
textAlign="center"
|
||||
>
|
||||
{step.description}
|
||||
</Text>
|
||||
))}
|
||||
</HStack>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
|
||||
<Box>
|
||||
<HStack spacing={6} mt={8} alignItems={"start"} justifyContent={"space-between"} >
|
||||
<Box mb={4} w={"35%"}>
|
||||
<HStack spacing={4}>
|
||||
<Image
|
||||
boxSize='240px'
|
||||
objectFit='cover'
|
||||
src={call_first}
|
||||
alt='Dan Abramov'
|
||||
/>
|
||||
<Image
|
||||
boxSize='240px'
|
||||
objectFit='cover'
|
||||
src={call_sec}
|
||||
alt='Dan Abramov'
|
||||
/>
|
||||
</HStack>
|
||||
<Box mt={4} w={"52%"}>
|
||||
<HStack
|
||||
bg={"#484848"}
|
||||
borderRadius={"full"}
|
||||
py={2}
|
||||
px={2}
|
||||
spacing={4}
|
||||
justifyContent={"center"}
|
||||
>
|
||||
<Box
|
||||
bg="#6A6A6A"
|
||||
p="2"
|
||||
borderRadius="full"
|
||||
display="inline-flex"
|
||||
>
|
||||
<BiSolidMicrophone color="white" size="14px" />
|
||||
</Box>
|
||||
<Box
|
||||
bg="#6A6A6A"
|
||||
p="2"
|
||||
borderRadius="full"
|
||||
display="inline-flex"
|
||||
>
|
||||
<MdVideocam color="white" size="14px" />
|
||||
</Box>
|
||||
<HStack
|
||||
bg="rgba(237, 12, 12, 0.68)"
|
||||
py="1"
|
||||
px={2}
|
||||
borderRadius="full"
|
||||
display="inline-flex"
|
||||
>
|
||||
<MdCallEnd color="white" size="14px" />
|
||||
<Text mb={0} fontSize={"xs"} fontWeight={500} color={"#fff"}>End</Text>
|
||||
</HStack>
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
w={"62%"}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Footer />
|
||||
</Box>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default FullKycPanVerificationFrame
|
||||
64
src/Pages/Onboarding/FullKycQandA.jsx
Normal file
64
src/Pages/Onboarding/FullKycQandA.jsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import React, { useState } from 'react';
|
||||
import FullKycQandAFrame from './FullKycQandAFrame';
|
||||
import { Box, HStack, Input, Text } from '@chakra-ui/react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import PrimaryButton from '../../Components/Buttons/PrimaryButton';
|
||||
|
||||
|
||||
|
||||
const FullKycQandA = () => {
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<FullKycQandAFrame>
|
||||
<Box
|
||||
bg={"#F8F3FF"}
|
||||
borderRadius={"md"}
|
||||
p={4}
|
||||
>
|
||||
<Text color={'#100F14'} fontWeight={600} fontSize={'sm'} mb={1}>
|
||||
Answer following questions.
|
||||
</Text>
|
||||
|
||||
<Text color={'#49475A'} fontWeight={500} fontSize={'xs'}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.
|
||||
</Text>
|
||||
|
||||
<Box my={2} height="300px" bg={"#fff"} boxShadow={"md"} borderRadius={"md"} p={4}>
|
||||
<Box mb={6}>
|
||||
<Text
|
||||
color={"#1A1A1A"}
|
||||
fontSize={"sm"}
|
||||
fontWeight={500}
|
||||
mb={2}
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.
|
||||
</Text>
|
||||
<Input placeholder='Enter answer here' fontSize={"sm"} fontWeight={500} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text
|
||||
color={"#1A1A1A"}
|
||||
fontSize={"sm"}
|
||||
fontWeight={500}
|
||||
mb={2}
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.
|
||||
</Text>
|
||||
<Input placeholder='Enter answer here' fontSize={"sm"} fontWeight={500} />
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
</Box>
|
||||
<HStack justifyContent={"center"} mt={4} >
|
||||
<PrimaryButton title={"Next"}
|
||||
onClick={()=> navigate("/full-kyc-face-verification")}
|
||||
w={"80%"} />
|
||||
</HStack>
|
||||
|
||||
</FullKycQandAFrame>
|
||||
);
|
||||
};
|
||||
|
||||
export default FullKycQandA;
|
||||
162
src/Pages/Onboarding/FullKycQandAFrame.jsx
Normal file
162
src/Pages/Onboarding/FullKycQandAFrame.jsx
Normal file
@@ -0,0 +1,162 @@
|
||||
import React from 'react'
|
||||
import { OPACITY_ON_LOAD } from '../../Layout/animations'
|
||||
import { Box, Container, Text, HStack, Stack, Stepper, Step, StepIndicator, StepStatus, StepSeparator, useSteps, StepIcon, List, ListItem, ListIcon, Image } from '@chakra-ui/react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import Header from './Header';
|
||||
import Footer from './Footer';
|
||||
import { BiSolidMicrophone } from "react-icons/bi";
|
||||
import { MdVideocam } from "react-icons/md";
|
||||
import { MdCallEnd } from "react-icons/md";
|
||||
import call_first from "../../assets/call_first.svg"
|
||||
import call_sec from "../../assets/call_sec.svg"
|
||||
|
||||
const FullKycQandAFrame = ({ children }) => {
|
||||
|
||||
const steps = [
|
||||
{ description: 'Location' },
|
||||
{ description: 'Q and A' },
|
||||
{ description: 'Face verification' },
|
||||
{ description: 'Aadhar Verification' },
|
||||
{ description: 'Pan Verification' },
|
||||
];
|
||||
|
||||
// Stepper configuration
|
||||
const { activeStep } = useSteps({
|
||||
index: 1,
|
||||
count: steps.length,
|
||||
});
|
||||
|
||||
return (
|
||||
|
||||
<Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
|
||||
<Header />
|
||||
<Box
|
||||
w={'100%'}
|
||||
minH={'60vh'}
|
||||
bg={'#f3f3f9'}
|
||||
px={6}
|
||||
display={"flex"}
|
||||
justifyContent={"center"}
|
||||
alignItems={"start"}
|
||||
>
|
||||
<Box w={'100%'} my={5} boxShadow={'md'}>
|
||||
<Box bg={'#fff'} p={4} borderRadius={'md'} >
|
||||
<Text color={'#100F14'} fontWeight={600} fontSize={'xl'} textAlign={'center'} mb={2}>
|
||||
Full KYC
|
||||
</Text>
|
||||
|
||||
<Text color={'#49475A'} fontWeight={500} fontSize={'sm'} textAlign={'center'}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.
|
||||
</Text>
|
||||
<Box>
|
||||
<Box mt={8}>
|
||||
<Stack spacing={2}>
|
||||
<Stepper
|
||||
size='sm'
|
||||
index={activeStep}
|
||||
gap='0'
|
||||
sx={{
|
||||
'--stepper-accent-color': '#6311CB',
|
||||
}}
|
||||
>
|
||||
{steps.map((step, index) => (
|
||||
<Step key={index} gap='0'>
|
||||
<StepIndicator>
|
||||
<StepStatus complete={<StepIcon />} />
|
||||
</StepIndicator>
|
||||
<StepSeparator _horizontal={{ ml: '0' }} />
|
||||
</Step>
|
||||
))}
|
||||
</Stepper>
|
||||
<HStack justifyContent="space-between" alignItems={"center"} >
|
||||
{steps.map((step, index) => (
|
||||
<Text
|
||||
key={index}
|
||||
fontSize="xs"
|
||||
fontWeight={index === activeStep ? 'bold' : 'normal'}
|
||||
color={index === activeStep ? 'purple.500' : 'gray.400'}
|
||||
textAlign="center"
|
||||
>
|
||||
{step.description}
|
||||
</Text>
|
||||
))}
|
||||
</HStack>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
|
||||
<Box>
|
||||
<HStack spacing={6} mt={8} alignItems={"start"} justifyContent={"space-between"} >
|
||||
<Box mb={4} w={"35%"}>
|
||||
<HStack spacing={4}>
|
||||
<Image
|
||||
boxSize='240px'
|
||||
objectFit='cover'
|
||||
src={call_first}
|
||||
alt='Dan Abramov'
|
||||
/>
|
||||
<Image
|
||||
boxSize='240px'
|
||||
objectFit='cover'
|
||||
src={call_sec}
|
||||
alt='Dan Abramov'
|
||||
/>
|
||||
</HStack>
|
||||
<Box mt={4} w={"52%"}>
|
||||
<HStack
|
||||
bg={"#484848"}
|
||||
borderRadius={"full"}
|
||||
py={2}
|
||||
px={2}
|
||||
spacing={4}
|
||||
justifyContent={"center"}
|
||||
>
|
||||
<Box
|
||||
bg="#6A6A6A"
|
||||
p="2"
|
||||
borderRadius="full"
|
||||
display="inline-flex"
|
||||
>
|
||||
<BiSolidMicrophone color="white" size="14px" />
|
||||
</Box>
|
||||
<Box
|
||||
bg="#6A6A6A"
|
||||
p="2"
|
||||
borderRadius="full"
|
||||
display="inline-flex"
|
||||
>
|
||||
<MdVideocam color="white" size="14px" />
|
||||
</Box>
|
||||
<HStack
|
||||
bg="rgba(237, 12, 12, 0.68)"
|
||||
py="1"
|
||||
px={2}
|
||||
borderRadius="full"
|
||||
display="inline-flex"
|
||||
>
|
||||
<MdCallEnd color="white" size="14px" />
|
||||
<Text mb={0} fontSize={"xs"} fontWeight={500} color={"#fff"}>End</Text>
|
||||
</HStack>
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
w={"62%"}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Footer />
|
||||
</Box>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default FullKycQandAFrame
|
||||
127
src/Pages/Onboarding/LoginEkyc.jsx
Normal file
127
src/Pages/Onboarding/LoginEkyc.jsx
Normal file
@@ -0,0 +1,127 @@
|
||||
import React, { useState } from 'react';
|
||||
import LoginEkycFrame from './LoginEkycFrame';
|
||||
import { Box, Container, Radio, RadioGroup, Text, HStack, Checkbox, Link } from '@chakra-ui/react';
|
||||
import PrimaryButton from '../../Components/Buttons/PrimaryButton';
|
||||
import { BsPatchExclamation } from 'react-icons/bs';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
const LoginEkyc = () => {
|
||||
const [selectedKyc, setSelectedKyc] = useState('1'); // on change of radio box
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Which radio is checked navigate to that page
|
||||
|
||||
const handleProceed = () => {
|
||||
if (selectedKyc === '1') {
|
||||
navigate('/maximum-kyc');
|
||||
} else if (selectedKyc === '2') {
|
||||
navigate('/minimum-kyc');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<LoginEkycFrame>
|
||||
<Container maxW={'container.xl'}>
|
||||
<Box w={'100%'} my={5} boxShadow={'md'}>
|
||||
<Box bg={'#fff'} p={4} borderRadius={'md'} display={'flex'} justifyContent={'center'}>
|
||||
<Box maxW={650}>
|
||||
<Text color={'#100F14'} fontWeight={600} fontSize={'xl'} textAlign={'center'} mb={2}>
|
||||
eKYC
|
||||
</Text>
|
||||
|
||||
<Text color={'#49475A'} fontWeight={500} fontSize={'sm'} textAlign={'center'}>
|
||||
Automatically verifies your documents needed for KYC and account opening on OptiFii
|
||||
</Text>
|
||||
|
||||
<Box mt={10}>
|
||||
<Text fontWeight={600} fontSize={'md'} textAlign={'center'}>
|
||||
Choose your KYC
|
||||
</Text>
|
||||
|
||||
<Box>
|
||||
<RadioGroup
|
||||
value={selectedKyc}
|
||||
onChange={setSelectedKyc}
|
||||
display={'flex'}
|
||||
flexDirection={'column'}
|
||||
gap={6}
|
||||
>
|
||||
<Box
|
||||
border={selectedKyc === '1' ? '1px solid #e8ddf7' : '1px solid #e8e8e8'}
|
||||
bg={'#fff'}
|
||||
p={4}
|
||||
borderRadius={'xl'}
|
||||
boxShadow={selectedKyc === '1' ? '0px 4px 4px rgba(232, 221, 247, 0.9)' : 'sm'}
|
||||
>
|
||||
<Radio value='1' colorScheme='purple'>
|
||||
<Text fontSize={'md'} fontWeight={500} mb={0}>
|
||||
Full KYC
|
||||
</Text>
|
||||
</Radio>
|
||||
<Text color={'#555555'} fontSize={'sm'} fontWeight={500}>
|
||||
Maximum wallet limit is
|
||||
<Text as={'span'} color={'#222222'} fontSize={'sm'} fontWeight={600} ml={1}>
|
||||
₹ 200000
|
||||
</Text>
|
||||
</Text>
|
||||
<HStack alignItems={'start'}>
|
||||
<BsPatchExclamation color={'#AAAAAA'} fontSize={14} />
|
||||
<Text color={'#AAAAAA'} fontSize={'xs'} fontWeight={500} mb={1}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.
|
||||
</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
border={selectedKyc === '2' ? '1px solid #e8ddf7' : '1px solid #e8e8e8'}
|
||||
bg={'#fff'}
|
||||
p={4}
|
||||
borderRadius={'xl'}
|
||||
boxShadow={selectedKyc === '2' ? '0px 4px 4px rgba(232, 221, 247, 0.9)' : 'sm'}
|
||||
>
|
||||
<Radio value='2' colorScheme='purple'>
|
||||
<Text fontSize={'md'} fontWeight={500} mb={0}>
|
||||
Minimum KYC
|
||||
</Text>
|
||||
</Radio>
|
||||
<Text color={'#555555'} fontSize={'sm'} fontWeight={500}>
|
||||
Minimum wallet limit is
|
||||
<Text as={'span'} color={'#222222'} fontSize={'sm'} fontWeight={600} ml={1}>
|
||||
₹ 10000
|
||||
</Text>
|
||||
</Text>
|
||||
<HStack alignItems={'start'}>
|
||||
<BsPatchExclamation color={'#AAAAAA'} fontSize={14} />
|
||||
<Text color={'#AAAAAA'} fontSize={'xs'} fontWeight={500} mb={1}>
|
||||
Enter the Aadhar or PAN number and then request for the OTP. This will complete the minimum KYC.
|
||||
</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
</RadioGroup>
|
||||
</Box>
|
||||
|
||||
<Box mt={10}>
|
||||
<HStack justifyContent={'center'}>
|
||||
<Checkbox colorScheme='purple' alignItems={'start'} defaultChecked>
|
||||
<Text mb={0} fontSize={'xs'} fontWeight={500}>
|
||||
<Text as={'span'} color={'#FE3F25'}>
|
||||
*
|
||||
</Text>
|
||||
I hereby consent to provide my Aadhaar Number, Biometric and/or One Time Pin (OTP) data for Aadhaar based authentication for the purpose of establishing my identity
|
||||
</Text>
|
||||
</Checkbox>
|
||||
</HStack>
|
||||
<HStack justifyContent={'center'} mt={6}>
|
||||
<PrimaryButton onClick={handleProceed} w={'300px'} title={'Proceed'} />
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
</LoginEkycFrame>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginEkyc;
|
||||
33
src/Pages/Onboarding/LoginEkycFrame.jsx
Normal file
33
src/Pages/Onboarding/LoginEkycFrame.jsx
Normal file
@@ -0,0 +1,33 @@
|
||||
import React from 'react'
|
||||
import { OPACITY_ON_LOAD } from '../../Layout/animations'
|
||||
|
||||
import {
|
||||
Box,
|
||||
} from "@chakra-ui/react";
|
||||
import Header from './Header';
|
||||
import Footer from './Footer';
|
||||
|
||||
const LoginEkycFrame = ({ children }) => {
|
||||
return (
|
||||
|
||||
<Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
|
||||
<Header />
|
||||
<Box
|
||||
w={'100%'}
|
||||
minH={'60vh'}
|
||||
bg={'#f3f3f9'}
|
||||
px={6}
|
||||
display={"flex"}
|
||||
justifyContent={"center"}
|
||||
alignItems={"start"}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
|
||||
<Footer />
|
||||
</Box>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default LoginEkycFrame
|
||||
71
src/Pages/Onboarding/MinimumKyc.jsx
Normal file
71
src/Pages/Onboarding/MinimumKyc.jsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import React from 'react'
|
||||
import { Box, Input, Text, HStack, Container, } from '@chakra-ui/react';
|
||||
import PrimaryButton from '../../Components/Buttons/PrimaryButton'
|
||||
import MinimumKycFrame from './MinimumKycFrame';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
const MinimumKyc = () => {
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<MinimumKycFrame>
|
||||
<Container maxW={'container.xl'}>
|
||||
<Box
|
||||
w={"100%"}
|
||||
my={5}
|
||||
boxShadow={"md"}
|
||||
>
|
||||
<Box bg={'#fff'} p={4} borderRadius={"md"} display={"flex"} justifyContent={"center"} minH={"70vh"}>
|
||||
<Box maxW={650} >
|
||||
<Text
|
||||
color={'#100F14'}
|
||||
fontWeight={600}
|
||||
fontSize={'xl'}
|
||||
textAlign={"center"}
|
||||
mb={2}
|
||||
>
|
||||
Minimum KYC
|
||||
</Text>
|
||||
<Text
|
||||
color={'#49475A'}
|
||||
fontWeight={500}
|
||||
fontSize={'sm'}
|
||||
textAlign={"center"}
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur.
|
||||
</Text>
|
||||
<Box mt={16}>
|
||||
<Text
|
||||
fontSize={"sm"}
|
||||
fontWeight={500}
|
||||
color={"#313039"}
|
||||
mb={2}
|
||||
>
|
||||
Enter Aadhaar/PAN number
|
||||
</Text>
|
||||
|
||||
<Input />
|
||||
</Box>
|
||||
|
||||
<Box px={4} py={6}>
|
||||
<Box mt={16}>
|
||||
<HStack justifyContent={"center"} mt={6} >
|
||||
<PrimaryButton
|
||||
onClick={() => navigate("/login-otp")}
|
||||
w={"300px"} title={"Request For OTP"} />
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
|
||||
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
</MinimumKycFrame>
|
||||
)
|
||||
}
|
||||
|
||||
export default MinimumKyc
|
||||
33
src/Pages/Onboarding/MinimumKycFrame.jsx
Normal file
33
src/Pages/Onboarding/MinimumKycFrame.jsx
Normal file
@@ -0,0 +1,33 @@
|
||||
import React from 'react'
|
||||
import { OPACITY_ON_LOAD } from '../../Layout/animations'
|
||||
|
||||
import {
|
||||
Box,
|
||||
} from "@chakra-ui/react";
|
||||
import Header from './Header';
|
||||
import Footer from './Footer';
|
||||
|
||||
const MinimumKycFrame = ({ children }) => {
|
||||
return (
|
||||
|
||||
<Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
|
||||
<Header />
|
||||
<Box
|
||||
w={'100%'}
|
||||
minH={'60vh'}
|
||||
bg={'#f3f3f9'}
|
||||
px={6}
|
||||
display={"flex"}
|
||||
justifyContent={"center"}
|
||||
alignItems={"start"}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
|
||||
<Footer />
|
||||
</Box>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default MinimumKycFrame
|
||||
@@ -240,9 +240,18 @@ const WelcomeToOptifii = () => {
|
||||
onClick={onOpen}
|
||||
w={"300px"} title={"Register with us"} />
|
||||
</HStack>
|
||||
<HStack justifyContent={"center"} mt={4} >
|
||||
<HStack justifyContent={"center"} mt={4} spacing={1}>
|
||||
<Text fontSize={"xs"} fontWeight={500} mb={0}>Already have an account?</Text>
|
||||
<Link fontSize={"xs"} fontWeight={600} color={"#3725EA"}>Login</Link>
|
||||
<Button
|
||||
onClick={() => navigate("/ekyc")}
|
||||
_hover={{ opacity: 0.8 }}
|
||||
px={0}
|
||||
fontSize={"xs"}
|
||||
color={"#3725EA"}
|
||||
textDecoration={"underline"}
|
||||
fontWeight={600}
|
||||
bg={"transparent"}
|
||||
>Log in</Button>
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>
|
||||
@@ -295,7 +304,7 @@ const WelcomeToOptifii = () => {
|
||||
py={6}
|
||||
>Continue with email</Button>
|
||||
<Button
|
||||
onClick={() => navigate("/login-phone-number")}
|
||||
onClick={() => navigate("/login-phone-number")}
|
||||
_hover={{ opacity: 0.8 }}
|
||||
borderRadius={"full"}
|
||||
color={"#100F14"}
|
||||
@@ -360,11 +369,17 @@ const WelcomeToOptifii = () => {
|
||||
textAlign={"center"}
|
||||
mt={4}
|
||||
>
|
||||
Already a member? <Link
|
||||
Already a member?
|
||||
<Button
|
||||
onClick={() => navigate("/ekyc")}
|
||||
_hover={{ opacity: 0.8 }}
|
||||
px={0}
|
||||
fontSize={"sm"}
|
||||
color={"#100F14"}
|
||||
textDecoration={"underline"}
|
||||
fontWeight={600}
|
||||
>Log in</Link>
|
||||
bg={"transparent"}
|
||||
>Log in</Button>
|
||||
</Text>
|
||||
</ModalBody>
|
||||
|
||||
|
||||
10
src/assets/call_first.svg
Normal file
10
src/assets/call_first.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 77 KiB |
10
src/assets/call_sec.svg
Normal file
10
src/assets/call_sec.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 63 KiB |
10
src/assets/face_verification.svg
Normal file
10
src/assets/face_verification.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 2.7 MiB |
Reference in New Issue
Block a user