diff --git a/package-lock.json b/package-lock.json index f85cd87..329b836 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "dotenv": "^16.4.5", "framer-motion": "^11.1.5", "js-cookie": "^3.0.5", + "libphonenumber-js": "^1.11.8", "react": "^18.2.0", "react-apexcharts": "^1.4.1", "react-beautiful-dnd": "^13.1.1", @@ -28,6 +29,7 @@ "react-dom": "^18.2.0", "react-hook-form": "^7.51.3", "react-icons": "^5.1.0", + "react-phone-input-2": "^2.15.1", "react-quill": "^0.0.2", "react-redux": "^9.1.1", "react-router-dom": "^6.22.3", @@ -2973,6 +2975,11 @@ "pnpm": ">=8" } }, + "node_modules/classnames": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" + }, "node_modules/codepage": { "version": "1.15.0", "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz", @@ -4671,6 +4678,11 @@ "node": ">= 0.8.0" } }, + "node_modules/libphonenumber-js": { + "version": "1.11.8", + "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.11.8.tgz", + "integrity": "sha512-0fv/YKpJBAgXKy0kaS3fnqoUVN8901vUYAKIGD/MWZaDfhJt1nZjPL3ZzdZBt/G8G8Hw2J1xOIrXWdNHFHPAvg==" + }, "node_modules/lines-and-columns": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", @@ -4700,6 +4712,16 @@ "rhino" ] }, + "node_modules/lodash.debounce": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", + "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==" + }, + "node_modules/lodash.memoize": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", + "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -4711,6 +4733,16 @@ "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz", "integrity": "sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==" }, + "node_modules/lodash.reduce": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/lodash.reduce/-/lodash.reduce-4.6.0.tgz", + "integrity": "sha512-6raRe2vxCYBhpBu+B+TtNGUzah+hQjVdu3E17wfusjyrXBka2nBS8OH/gjVZ5PvHOhWmIZTYri09Z6n/QfnNMw==" + }, + "node_modules/lodash.startswith": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/lodash.startswith/-/lodash.startswith-4.2.1.tgz", + "integrity": "sha512-XClYR1h4/fJ7H+mmCKppbiBmljN/nGs73iq2SjCT9SF4CBPoUHzLvWmH1GtZMhMBZSiRkHXfeA2RY1eIlJ75ww==" + }, "node_modules/loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", @@ -5305,6 +5337,23 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-phone-input-2": { + "version": "2.15.1", + "resolved": "https://registry.npmjs.org/react-phone-input-2/-/react-phone-input-2-2.15.1.tgz", + "integrity": "sha512-W03abwhXcwUoq+vUFvC6ch2+LJYMN8qSOiO889UH6S7SyMCQvox/LF3QWt+cZagZrRdi5z2ON3omnjoCUmlaYw==", + "dependencies": { + "classnames": "^2.2.6", + "lodash.debounce": "^4.0.8", + "lodash.memoize": "^4.1.2", + "lodash.reduce": "^4.6.0", + "lodash.startswith": "^4.2.1", + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": "^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0", + "react-dom": "^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.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 fc21f64..0033a38 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "dotenv": "^16.4.5", "framer-motion": "^11.1.5", "js-cookie": "^3.0.5", + "libphonenumber-js": "^1.11.8", "react": "^18.2.0", "react-apexcharts": "^1.4.1", "react-beautiful-dnd": "^13.1.1", @@ -30,6 +31,7 @@ "react-dom": "^18.2.0", "react-hook-form": "^7.51.3", "react-icons": "^5.1.0", + "react-phone-input-2": "^2.15.1", "react-quill": "^0.0.2", "react-redux": "^9.1.1", "react-router-dom": "^6.22.3", diff --git a/src/App.css b/src/App.css index 2ea00d6..38caa2f 100644 --- a/src/App.css +++ b/src/App.css @@ -502,4 +502,12 @@ a.active{ 80% { opacity: 0; } -} \ No newline at end of file +} + +.react-tel-input .selected-flag:hover, .react-tel-input .selected-flag:focus { + background-color: transparent !important; +} +.react-tel-input .selected-flag { + background: transparent !important; + padding: 0 0 0 16px !important; +} diff --git a/src/Pages/Onboarding/OnboardingAboutCompany.jsx b/src/Pages/Onboarding/OnboardingAboutCompany.jsx new file mode 100644 index 0000000..c638699 --- /dev/null +++ b/src/Pages/Onboarding/OnboardingAboutCompany.jsx @@ -0,0 +1,146 @@ +import React, { useCallback, useState } from 'react'; +import { Box, Input, InputGroup, InputLeftElement, Select, Text, VStack, Image, HStack } from '@chakra-ui/react'; +import PhoneInput from "react-phone-input-2"; +import "react-phone-input-2/lib/style.css"; +import { IoBagOutline } from "react-icons/io5"; +import { SlCloudUpload } from 'react-icons/sl'; +import { useDropzone } from 'react-dropzone'; + +const OnboardingAboutCompany = () => { + + const [phone, setPhone] = useState(""); + + + return ( + + + About your company + + + Lorem ipsum dolor sit amet, adipiscing elit. + + + {/* Form Fields */} + + {/* Company Name Field */} + + + Company Name + + + + + + + + + + {/* Industry Select Field */} + + + Industry + + + + + + + {/* Phone Number Field */} + + + Phone Number + + + + + + + {/* Upload Company Logo Field */} + + + Upload Company Logo + + document.getElementById('company-logo-file-input').click()} + > + + + + Drag and drop files here or{' '} + + Choose file + + + + + + + + + Supported formats- jpg, png, svg + + + Maximum size - 20MB + + + + + + ); +}; + +export default OnboardingAboutCompany; + + + \ No newline at end of file diff --git a/src/Pages/Onboarding/OnboardingAddCompanyDetails.jsx b/src/Pages/Onboarding/OnboardingAddCompanyDetails.jsx new file mode 100644 index 0000000..78362dc --- /dev/null +++ b/src/Pages/Onboarding/OnboardingAddCompanyDetails.jsx @@ -0,0 +1,166 @@ +import React, { useCallback, useState } from 'react'; +import { Box, Input, InputGroup, InputLeftElement, Select, Text, VStack, Image, HStack } from '@chakra-ui/react'; +import { SlCloudUpload } from 'react-icons/sl'; + +const OnboardingAddCompanyDetails = () => { + + return ( + + + Add company details + + + Lorem ipsum dolor sit amet, adipiscing elit. + + + + {/* CIN Field */} + + + CIN + + + + + {/* Industry Select Field */} + + + Company PAN + + + + + + {/* Company PAN Field */} + + + Company PAN + + + + + {/* Upload GST Certificate */} + + + Upload Pan + + document.getElementById('GST-file-input').click()} + > + + + + Drag and drop files here or{' '} + + Choose file + + + + + + + + + Supported formats- jpg, png, svg + + + Maximum size - 20MB + + + + + {/* Upload PAN Card */} + + + Upload Pan + + document.getElementById('pan-file-input').click()} + > + + + + Drag and drop files here or{' '} + + Choose file + + + + + + + + + Supported formats- jpg, png, svg + + + Maximum size - 20MB + + + + + + ); +}; + +export default OnboardingAddCompanyDetails; diff --git a/src/Pages/Onboarding/OnboardingDirectorDetails.jsx b/src/Pages/Onboarding/OnboardingDirectorDetails.jsx new file mode 100644 index 0000000..04138b0 --- /dev/null +++ b/src/Pages/Onboarding/OnboardingDirectorDetails.jsx @@ -0,0 +1,228 @@ +import React, { useCallback, useState } from 'react'; +import { Box, Input, Text, VStack, Image, HStack } from '@chakra-ui/react'; +import { SlCloudUpload } from 'react-icons/sl'; +import { useDropzone } from 'react-dropzone'; +import PhoneInput from 'react-phone-input-2'; + +const OnboardingDirectorDetails = () => { + + const [phone, setPhone] = useState(""); + + // Initial state for director forms + const [directorForms, setDirectorForms] = useState([ + { id: 1, directorName: '', directorEmail: '', directorPhone: '', selectedPanImage: '', selectedAadharImage: '' } + ]); + + // Add new director form + const handleAddDirector = () => { + setDirectorForms([ + ...directorForms, + { id: directorForms.length + 1, directorName: '', directorEmail: '', directorPhone: '', selectedPanImage: '', selectedAadharImage: '' } + ]); + }; + + return ( + + + Add director details + + + Lorem ipsum dolor sit amet, adipiscing elit. + + + {directorForms?.map((directorForm, index) => ( + + + Director {index + 1} + + + {/* Director Name Field */} + + + Director Name + + directorForm.setDirectorName(e.target.value)} + /> + + + {/* Director Email Field */} + + + Email + + directorForm.setDirectorEmail(e.target.value)} + /> + + + {/* Director Phone Number */} + + + Phone Number + + directorForm.setDirectorPhone(value)} + inputStyle={{ + width: "100%", + borderRadius: "md", + paddingLeft: "6", + border: "1px solid #e2e8f0", + height: "40px" + }} + buttonStyle={{ + border: "none", + borderRadius: "8px 0 0 8px", + backgroundColor: "transparent", + }} + /> + + + {/* Upload Pan */} + + + Upload Pan + + document.getElementById('pan-file-input').click()} + > + + + + Drag and drop files here or{' '} + + Choose file + + + + + + + + + Supported formats- jpg, png, svg + + + Maximum size - 20MB + + + + + {/* Upload Aadhar Card */} + + + Upload Aadhar + + document.getElementById('aadhar-file-input').click()} + > + + + + Drag and drop files here or{' '} + + Choose file + + + + + + + + + Supported formats- jpg, png, svg + + + Maximum size - 20MB + + + + + + ))} + + + handleAddDirector()} + > + + Add director 2 + + + + ); +}; + +export default OnboardingDirectorDetails; diff --git a/src/Pages/Onboarding/OnboardingFrame.jsx b/src/Pages/Onboarding/OnboardingFrame.jsx index 6efce8e..e4c0385 100644 --- a/src/Pages/Onboarding/OnboardingFrame.jsx +++ b/src/Pages/Onboarding/OnboardingFrame.jsx @@ -12,6 +12,10 @@ import onboarding_bg from "../../assets/onboarding_bg.svg"; import { ArrowBackIcon, ArrowForwardIcon, CheckIcon } from '@chakra-ui/icons'; // Added CheckIcon for completed steps import { FaUser, FaBuilding, FaClipboard, FaUserTie, FaBoxOpen } from 'react-icons/fa'; import OnboardingYourDetails from './OnboardingYourDetails'; +import OnboardingAboutCompany from './OnboardingAboutCompany'; +import OnboardingAddCompanyDetails from './OnboardingAddCompanyDetails'; +import OnboardingDirectorDetails from './OnboardingDirectorDetails'; +import OnboardingSelectPackage from './OnboardingSelectPackage'; const OnboardingFrame = () => { @@ -65,7 +69,7 @@ const OnboardingFrame = () => { py={6} px={4} borderRadius={'md'} - minH={"80vh"} + minH={"82vh"} > @@ -131,7 +135,7 @@ const OnboardingFrame = () => { my={5} boxShadow={'md'} zIndex={2} - minH={"80vh"} + minH={"82vh"} > @@ -150,8 +154,19 @@ const OnboardingFrame = () => { - - + + + {/* component here */} + + {/* */} + {/* */} + {/* */} + {/* */} + + { variant="outline" size="sm" px={8} - _hover={{opacity:0.8}} + _hover={{ opacity: 0.8 }} color={"#d0b8ef"} border={"1px solid #d0b8ef"} onClick={() => setActiveStep(activeStep - 1)} @@ -172,7 +187,7 @@ const OnboardingFrame = () => { fontSize={"xs"} fontWeight={500} size="sm" - _hover={{opacity:0.8}} + _hover={{ opacity: 0.8 }} rightIcon={} w={"100%"} onClick={() => setActiveStep(activeStep + 1)} diff --git a/src/Pages/Onboarding/OnboardingSelectPackage.jsx b/src/Pages/Onboarding/OnboardingSelectPackage.jsx new file mode 100644 index 0000000..252aacd --- /dev/null +++ b/src/Pages/Onboarding/OnboardingSelectPackage.jsx @@ -0,0 +1,108 @@ +import React from 'react'; +import { Box, Text, HStack, Image, Checkbox, List, ListItem, ListIcon } from '@chakra-ui/react'; +import { MdCheckCircle } from 'react-icons/md'; +import oBenefits from "../../assets/o-benefits.svg"; +import oExpense from "../../assets/o-expense.svg"; +import oGift from "../../assets/o-gift.svg"; + +const packages = [ + { + id: 1, + img: oExpense, + title: "OptiFii Expense", + description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.", + benefits: [ + "Lorem ipsum dolor sit amet", + "Lorem ipsum dolor sit amet", + "Lorem ipsum dolor sit amet", + "Lorem ipsum dolor sit amet" + ] + }, + { + id: 2, + img: oBenefits, + title: "OptiFii Benefits", + description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.", + benefits: [ + "Lorem ipsum dolor sit amet", + "Lorem ipsum dolor sit amet", + "Lorem ipsum dolor sit amet", + "Lorem ipsum dolor sit amet" + ] + }, + { + id: 3, + img: oGift, + title: "OptiFii Gift & Vouchers", + description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.", + benefits: [ + "Lorem ipsum dolor sit amet", + "Lorem ipsum dolor sit amet", + "Lorem ipsum dolor sit amet", + "Lorem ipsum dolor sit amet" + ] + } +]; + +const OnboardingSelectPackage = () => { + + return ( + + + Select package + + + Lorem ipsum dolor sit amet, adipiscing elit. + + + + {packages.map((pkg) => ( + + + {`${pkg.title} + + + + {pkg.title} + + + {pkg.description} + + + This plan gets + + + + {pkg.benefits.map((benefit, index) => ( + + + {benefit} + + ))} + + + + ))} + + + ); +}; + +export default OnboardingSelectPackage; diff --git a/src/Pages/Onboarding/OnboardingYourDetails.jsx b/src/Pages/Onboarding/OnboardingYourDetails.jsx index dbb4d1e..de83661 100644 --- a/src/Pages/Onboarding/OnboardingYourDetails.jsx +++ b/src/Pages/Onboarding/OnboardingYourDetails.jsx @@ -1,13 +1,14 @@ import React, { useState } from 'react'; import { Box, Container, HStack, Image, Input, InputGroup, InputLeftElement, Text } from '@chakra-ui/react'; -import { useNavigate } from 'react-router-dom'; import { CiUser, CiMail } from "react-icons/ci"; import optifii_logo from '../../assets/optifii_logo.svg'; +import PhoneInput from "react-phone-input-2"; +import "react-phone-input-2/lib/style.css"; const OnboardingYourDetails = () => { - const navigate = useNavigate(); + const [phone, setPhone] = useState(""); return ( @@ -72,14 +73,24 @@ const OnboardingYourDetails = () => { > Phone Number - - - - - - + + diff --git a/src/assets/o-benefits.svg b/src/assets/o-benefits.svg new file mode 100644 index 0000000..b749c56 --- /dev/null +++ b/src/assets/o-benefits.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/o-expense.svg b/src/assets/o-expense.svg new file mode 100644 index 0000000..a80810b --- /dev/null +++ b/src/assets/o-expense.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/o-gift.svg b/src/assets/o-gift.svg new file mode 100644 index 0000000..8a6e419 --- /dev/null +++ b/src/assets/o-gift.svg @@ -0,0 +1,9 @@ + + + + + + + + +