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",
|
"bootstrap": "5.3.3",
|
||||||
"chart.js": "^4.4.3",
|
"chart.js": "^4.4.3",
|
||||||
"dotenv": "^16.4.5",
|
"dotenv": "^16.4.5",
|
||||||
"framer-motion": "^11.1.5",
|
"framer-motion": "^11.5.4",
|
||||||
"js-cookie": "^3.0.5",
|
"js-cookie": "^3.0.5",
|
||||||
|
"leaflet": "^1.9.4",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-apexcharts": "^1.4.1",
|
"react-apexcharts": "^1.4.1",
|
||||||
"react-beautiful-dnd": "^13.1.1",
|
"react-beautiful-dnd": "^13.1.1",
|
||||||
"react-chartjs-2": "^5.2.0",
|
"react-chartjs-2": "^5.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
|
"react-dropzone": "^14.2.3",
|
||||||
"react-hook-form": "^7.51.3",
|
"react-hook-form": "^7.51.3",
|
||||||
"react-icons": "^5.1.0",
|
"react-icons": "^5.1.0",
|
||||||
|
"react-leaflet": "^4.2.1",
|
||||||
"react-quill": "^0.0.2",
|
"react-quill": "^0.0.2",
|
||||||
"react-redux": "^9.1.1",
|
"react-redux": "^9.1.1",
|
||||||
"react-router-dom": "^6.22.3",
|
"react-router-dom": "^6.22.3",
|
||||||
@@ -2019,6 +2022,16 @@
|
|||||||
"url": "https://opencollective.com/popperjs"
|
"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": {
|
"node_modules/@reduxjs/toolkit": {
|
||||||
"version": "2.2.3",
|
"version": "2.2.3",
|
||||||
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.3.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
|
||||||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
|
"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": {
|
"node_modules/available-typed-arrays": {
|
||||||
"version": "1.0.7",
|
"version": "1.0.7",
|
||||||
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
|
"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": "^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": {
|
"node_modules/find-root": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
|
||||||
@@ -3833,9 +3865,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/framer-motion": {
|
"node_modules/framer-motion": {
|
||||||
"version": "11.1.5",
|
"version": "11.5.4",
|
||||||
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.1.5.tgz",
|
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.5.4.tgz",
|
||||||
"integrity": "sha512-ogK5fc0GBUT3AjzMXPx7f74m5V1ByRqkKQARBVHpdkYTNDxb/WriANYD+5JBo1wklQQJ1HayDZtmofQLqZFcbw==",
|
"integrity": "sha512-E+tb3/G6SO69POkdJT+3EpdMuhmtCh9EWuK4I1DnIC23L7tFPrl8vxP+LSovwaw6uUr73rUbpb4FgK011wbRJQ==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"tslib": "^2.4.0"
|
"tslib": "^2.4.0"
|
||||||
},
|
},
|
||||||
@@ -4660,6 +4692,11 @@
|
|||||||
"json-buffer": "3.0.1"
|
"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": {
|
"node_modules/levn": {
|
||||||
"version": "0.4.1",
|
"version": "0.4.1",
|
||||||
"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
|
||||||
@@ -5252,6 +5289,22 @@
|
|||||||
"react": "^18.2.0"
|
"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": {
|
"node_modules/react-fast-compare": {
|
||||||
"version": "3.2.2",
|
"version": "3.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
"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": {
|
"node_modules/react-quill": {
|
||||||
"version": "0.0.2",
|
"version": "0.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/react-quill/-/react-quill-0.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/react-quill/-/react-quill-0.0.2.tgz",
|
||||||
|
|||||||
@@ -21,15 +21,18 @@
|
|||||||
"bootstrap": "5.3.3",
|
"bootstrap": "5.3.3",
|
||||||
"chart.js": "^4.4.3",
|
"chart.js": "^4.4.3",
|
||||||
"dotenv": "^16.4.5",
|
"dotenv": "^16.4.5",
|
||||||
"framer-motion": "^11.1.5",
|
"framer-motion": "^11.5.4",
|
||||||
"js-cookie": "^3.0.5",
|
"js-cookie": "^3.0.5",
|
||||||
|
"leaflet": "^1.9.4",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-apexcharts": "^1.4.1",
|
"react-apexcharts": "^1.4.1",
|
||||||
"react-beautiful-dnd": "^13.1.1",
|
"react-beautiful-dnd": "^13.1.1",
|
||||||
"react-chartjs-2": "^5.2.0",
|
"react-chartjs-2": "^5.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
|
"react-dropzone": "^14.2.3",
|
||||||
"react-hook-form": "^7.51.3",
|
"react-hook-form": "^7.51.3",
|
||||||
"react-icons": "^5.1.0",
|
"react-icons": "^5.1.0",
|
||||||
|
"react-leaflet": "^4.2.1",
|
||||||
"react-quill": "^0.0.2",
|
"react-quill": "^0.0.2",
|
||||||
"react-redux": "^9.1.1",
|
"react-redux": "^9.1.1",
|
||||||
"react-router-dom": "^6.22.3",
|
"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 LoginPhoneNumber from "./Pages/Onboarding/LoginPhoneNumber";
|
||||||
import LoginEmailAddress from "./Pages/Onboarding/LoginEmailAddress";
|
import LoginEmailAddress from "./Pages/Onboarding/LoginEmailAddress";
|
||||||
import LoginEmailOtp from "./Pages/Onboarding/LoginOtp";
|
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 App = () => {
|
||||||
// const { isAuthenticate } = useSelector((state) => state?.auth);
|
// const { isAuthenticate } = useSelector((state) => state?.auth);
|
||||||
@@ -60,6 +68,14 @@ const App = () => {
|
|||||||
<Route path="/login-phone-number" element={<LoginPhoneNumber />} />
|
<Route path="/login-phone-number" element={<LoginPhoneNumber />} />
|
||||||
<Route path="/login-email-address" element={<LoginEmailAddress />} />
|
<Route path="/login-email-address" element={<LoginEmailAddress />} />
|
||||||
<Route path="/login-otp" element={<LoginEmailOtp />} />
|
<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
|
<Route
|
||||||
|
|||||||
@@ -27,7 +27,7 @@ const Footer = () => {
|
|||||||
</HStack>
|
</HStack>
|
||||||
|
|
||||||
{/* Center Navigation */}
|
{/* Center Navigation */}
|
||||||
<HStack spacing={20} alignItems={"start"}>
|
<HStack spacing={16} alignItems={"start"}>
|
||||||
<VStack align="start">
|
<VStack align="start">
|
||||||
<Link fontSize={"sm"} fontWeight={500}>Home</Link>
|
<Link fontSize={"sm"} fontWeight={500}>Home</Link>
|
||||||
<Link fontSize={"sm"} fontWeight={500}>About Us</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}
|
onClick={onOpen}
|
||||||
w={"300px"} title={"Register with us"} />
|
w={"300px"} title={"Register with us"} />
|
||||||
</HStack>
|
</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>
|
<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>
|
</HStack>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
@@ -360,11 +369,17 @@ const WelcomeToOptifii = () => {
|
|||||||
textAlign={"center"}
|
textAlign={"center"}
|
||||||
mt={4}
|
mt={4}
|
||||||
>
|
>
|
||||||
Already a member? <Link
|
Already a member?
|
||||||
|
<Button
|
||||||
|
onClick={() => navigate("/ekyc")}
|
||||||
|
_hover={{ opacity: 0.8 }}
|
||||||
|
px={0}
|
||||||
|
fontSize={"sm"}
|
||||||
color={"#100F14"}
|
color={"#100F14"}
|
||||||
textDecoration={"underline"}
|
textDecoration={"underline"}
|
||||||
fontWeight={600}
|
fontWeight={600}
|
||||||
>Log in</Link>
|
bg={"transparent"}
|
||||||
|
>Log in</Button>
|
||||||
</Text>
|
</Text>
|
||||||
</ModalBody>
|
</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