diff --git a/package-lock.json b/package-lock.json index a8d9428..6e0ba22 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 2ee0f0e..cd4b870 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/App.jsx b/src/App.jsx index 83b85fd..7b9df3d 100644 --- a/src/App.jsx +++ b/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 = () => { } /> } /> } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> { {/* Center Navigation */} - + Home About Us diff --git a/src/Pages/Onboarding/FullKyc.jsx b/src/Pages/Onboarding/FullKyc.jsx new file mode 100644 index 0000000..40e7288 --- /dev/null +++ b/src/Pages/Onboarding/FullKyc.jsx @@ -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 ( + + + + + + + Full KYC + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. + + + + + + {steps.map((step, index) => ( + + + } /> + + + + ))} + + + {steps.map((step, index) => ( + + {step.description} + + ))} + + + + + + + Instructions to be followed + + + Build trust by verifying your identity + + + + + + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit + + + + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit + + + + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit + + + + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit + + + + + + + + navigate("/full-kyc-location")} + w={'300px'} + title={'Proceed'} + /> + + + + + + + + + ); +}; + +export default FullKyc; diff --git a/src/Pages/Onboarding/FullKycAadharVerification.jsx b/src/Pages/Onboarding/FullKycAadharVerification.jsx new file mode 100644 index 0000000..8753630 --- /dev/null +++ b/src/Pages/Onboarding/FullKycAadharVerification.jsx @@ -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 ( + + + + Upload Aadhar Card + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. + + + + + + {selectedImage ? ( + Uploaded Aadhar + ) : ( + <> + + + {isDragActive ? 'Drop the image here...' : 'Upload from gallery'} + + + )} + + + + + + navigate("/full-kyc-pan-verification")} + w={"80%"} /> + + + ); +}; + +export default FullKycAadharVerification; diff --git a/src/Pages/Onboarding/FullKycAadharVerificationFrame.jsx b/src/Pages/Onboarding/FullKycAadharVerificationFrame.jsx new file mode 100644 index 0000000..bdf0d16 --- /dev/null +++ b/src/Pages/Onboarding/FullKycAadharVerificationFrame.jsx @@ -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 ( + + +
+ + + + + Full KYC + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. + + + + + + {steps.map((step, index) => ( + + + } /> + + + + ))} + + + {steps.map((step, index) => ( + + {step.description} + + ))} + + + + + + + + + + Dan Abramov + Dan Abramov + + + + + + + + + + + + End + + + + + + + {children} + + + + + + + + +