stepper next function pending
This commit is contained in:
priyanshuvish
49
package-lock.json
generated
49
package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
10
src/App.css
10
src/App.css
@@ -502,4 +502,12 @@ a.active{
|
||||
80% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
146
src/Pages/Onboarding/OnboardingAboutCompany.jsx
Normal file
146
src/Pages/Onboarding/OnboardingAboutCompany.jsx
Normal file
@@ -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 (
|
||||
<Box>
|
||||
<Text color={'#49475A'} fontWeight={500} fontSize={'sm'} mb={1}>
|
||||
About your company
|
||||
</Text>
|
||||
<Text color={'#49475A'} fontWeight={500} fontSize={'xs'}>
|
||||
Lorem ipsum dolor sit amet, adipiscing elit.
|
||||
</Text>
|
||||
|
||||
{/* Form Fields */}
|
||||
<Box as="form">
|
||||
{/* Company Name Field */}
|
||||
<Box mb={3}>
|
||||
<Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
|
||||
Company Name
|
||||
</Text>
|
||||
<InputGroup>
|
||||
<InputLeftElement pointerEvents='none'>
|
||||
<IoBagOutline color='gray.300' />
|
||||
</InputLeftElement>
|
||||
<Input
|
||||
type='text'
|
||||
border="1px solid #e2e8f0"
|
||||
borderRadius="8px"
|
||||
placeholder="Enter company name"
|
||||
size={"md"}
|
||||
/>
|
||||
</InputGroup>
|
||||
</Box>
|
||||
|
||||
{/* Industry Select Field */}
|
||||
<Box mb={3}>
|
||||
<Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
|
||||
Industry
|
||||
</Text>
|
||||
<InputGroup>
|
||||
<Select
|
||||
placeholder='Select industry'
|
||||
fontSize={"sm"}
|
||||
fontWeight={500}
|
||||
size={"md"}
|
||||
>
|
||||
<option value="option1">Industry 1</option>
|
||||
<option value="option2">Industry 2</option>
|
||||
<option value="option3">Industry 3</option>
|
||||
</Select>
|
||||
</InputGroup>
|
||||
</Box>
|
||||
|
||||
{/* Phone Number Field */}
|
||||
<Box mb={3}>
|
||||
<Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
|
||||
Phone Number
|
||||
</Text>
|
||||
<Box>
|
||||
<PhoneInput
|
||||
country={"in"} // Default country
|
||||
value={phone}
|
||||
onChange={setPhone}
|
||||
inputStyle={{
|
||||
width: "100%",
|
||||
borderRadius: "md",
|
||||
paddingLeft: "8",
|
||||
border: "1px solid #e2e8f0",
|
||||
height:"40px"
|
||||
}}
|
||||
buttonStyle={{
|
||||
border: "none",
|
||||
borderRadius: "8px 0 0 8px",
|
||||
backgroundColor: "transparent",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Upload Company Logo Field */}
|
||||
<Box mb={3}>
|
||||
<Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
|
||||
Upload Company Logo
|
||||
</Text>
|
||||
<Box my={2}
|
||||
position="relative"
|
||||
onClick={() => document.getElementById('company-logo-file-input').click()}
|
||||
>
|
||||
<VStack
|
||||
border={"1px dashed #D0D5DD"}
|
||||
boxShadow={"md"}
|
||||
borderRadius={"md"}
|
||||
bg={"#faf8fd"}
|
||||
p={4}
|
||||
h={"28"}
|
||||
justifyContent={"center"}
|
||||
cursor="pointer"
|
||||
>
|
||||
<SlCloudUpload color={"#191D23"} size={30} />
|
||||
<Text
|
||||
color={"#191D23"}
|
||||
fontWeight={"500"}
|
||||
fontSize={"sm"}
|
||||
mt={'2'}
|
||||
mb={0}
|
||||
>
|
||||
Drag and drop files here or{' '}
|
||||
<Text as="span" textDecoration="underline">
|
||||
Choose file
|
||||
</Text>
|
||||
</Text>
|
||||
</VStack>
|
||||
<input
|
||||
type="file"
|
||||
id="company-logo-file-input"
|
||||
style={{ display: 'none' }} // Hide the file input
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<HStack justifyContent={"space-between"}>
|
||||
<Text color={"#C3C3C3"} fontSize={"xs"} fontWeight={400} mb={1}>
|
||||
Supported formats- jpg, png, svg
|
||||
</Text>
|
||||
<Text color={"#C3C3C3"} fontSize={"xs"} fontWeight={400} mb={1}>
|
||||
Maximum size - 20MB
|
||||
</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default OnboardingAboutCompany;
|
||||
|
||||
|
||||
|
||||
166
src/Pages/Onboarding/OnboardingAddCompanyDetails.jsx
Normal file
166
src/Pages/Onboarding/OnboardingAddCompanyDetails.jsx
Normal file
@@ -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 (
|
||||
<Box>
|
||||
<Text color={'#49475A'} fontWeight={500} fontSize={'sm'} mb={1}>
|
||||
Add company details
|
||||
</Text>
|
||||
<Text color={'#49475A'} fontWeight={500} fontSize={'xs'}>
|
||||
Lorem ipsum dolor sit amet, adipiscing elit.
|
||||
</Text>
|
||||
|
||||
<Box as="form">
|
||||
{/* CIN Field */}
|
||||
<Box mb={3}>
|
||||
<Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
|
||||
CIN
|
||||
</Text>
|
||||
<Input
|
||||
type='text'
|
||||
border="1px solid #e2e8f0"
|
||||
borderRadius="md"
|
||||
fontSize={"sm"}
|
||||
fontWeight={500}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Industry Select Field */}
|
||||
<Box mb={3}>
|
||||
<Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
|
||||
Company PAN
|
||||
</Text>
|
||||
<InputGroup>
|
||||
<Select
|
||||
placeholder='Select company pan'
|
||||
fontSize={"sm"}
|
||||
fontWeight={500}
|
||||
>
|
||||
<option value="option1">Industry 1</option>
|
||||
<option value="option2">Industry 2</option>
|
||||
<option value="option3">Industry 3</option>
|
||||
</Select>
|
||||
</InputGroup>
|
||||
</Box>
|
||||
{/* Company PAN Field */}
|
||||
<Box mb={3}>
|
||||
<Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
|
||||
Company PAN
|
||||
</Text>
|
||||
<Input
|
||||
type='text'
|
||||
border="1px solid #e2e8f0"
|
||||
borderRadius="md"
|
||||
fontSize={"sm"}
|
||||
fontWeight={500}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Upload GST Certificate */}
|
||||
<Box mb={3}>
|
||||
<Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
|
||||
Upload Pan
|
||||
</Text>
|
||||
<Box my={2}
|
||||
position="relative"
|
||||
onClick={() => document.getElementById('GST-file-input').click()}
|
||||
>
|
||||
<VStack
|
||||
border={"1px dashed #D0D5DD"}
|
||||
boxShadow={"md"}
|
||||
borderRadius={"md"}
|
||||
bg={"#faf8fd"}
|
||||
p={4}
|
||||
h={"28"}
|
||||
justifyContent={"center"}
|
||||
cursor="pointer"
|
||||
>
|
||||
<SlCloudUpload color={"#191D23"} size={30} />
|
||||
<Text
|
||||
color={"#191D23"}
|
||||
fontWeight={"500"}
|
||||
fontSize={"sm"}
|
||||
mt={'2'}
|
||||
mb={0}
|
||||
>
|
||||
Drag and drop files here or{' '}
|
||||
<Text as="span" textDecoration="underline">
|
||||
Choose file
|
||||
</Text>
|
||||
</Text>
|
||||
</VStack>
|
||||
<input
|
||||
type="file"
|
||||
id="GST-file-input"
|
||||
style={{ display: 'none' }} // Hide the file input
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<HStack justifyContent={"space-between"}>
|
||||
<Text color={"#C3C3C3"} fontSize={"xs"} fontWeight={400} mb={1}>
|
||||
Supported formats- jpg, png, svg
|
||||
</Text>
|
||||
<Text color={"#C3C3C3"} fontSize={"xs"} fontWeight={400} mb={1}>
|
||||
Maximum size - 20MB
|
||||
</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
{/* Upload PAN Card */}
|
||||
<Box mb={3}>
|
||||
<Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
|
||||
Upload Pan
|
||||
</Text>
|
||||
<Box my={2}
|
||||
position="relative"
|
||||
onClick={() => document.getElementById('pan-file-input').click()}
|
||||
>
|
||||
<VStack
|
||||
border={"1px dashed #D0D5DD"}
|
||||
boxShadow={"md"}
|
||||
borderRadius={"md"}
|
||||
bg={"#faf8fd"}
|
||||
p={4}
|
||||
h={"28"}
|
||||
justifyContent={"center"}
|
||||
cursor="pointer"
|
||||
>
|
||||
<SlCloudUpload color={"#191D23"} size={30} />
|
||||
<Text
|
||||
color={"#191D23"}
|
||||
fontWeight={"500"}
|
||||
fontSize={"sm"}
|
||||
mt={'2'}
|
||||
mb={0}
|
||||
>
|
||||
Drag and drop files here or{' '}
|
||||
<Text as="span" textDecoration="underline">
|
||||
Choose file
|
||||
</Text>
|
||||
</Text>
|
||||
</VStack>
|
||||
<input
|
||||
type="file"
|
||||
id="pan-file-input"
|
||||
style={{ display: 'none' }} // Hide the file input
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<HStack justifyContent={"space-between"}>
|
||||
<Text color={"#C3C3C3"} fontSize={"xs"} fontWeight={400} mb={1}>
|
||||
Supported formats- jpg, png, svg
|
||||
</Text>
|
||||
<Text color={"#C3C3C3"} fontSize={"xs"} fontWeight={400} mb={1}>
|
||||
Maximum size - 20MB
|
||||
</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default OnboardingAddCompanyDetails;
|
||||
228
src/Pages/Onboarding/OnboardingDirectorDetails.jsx
Normal file
228
src/Pages/Onboarding/OnboardingDirectorDetails.jsx
Normal file
@@ -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 (
|
||||
<Box>
|
||||
<Text color={'#49475A'} fontWeight={500} fontSize={'sm'} mb={1}>
|
||||
Add director details
|
||||
</Text>
|
||||
<Text color={'#49475A'} fontWeight={500} fontSize={'xs'}>
|
||||
Lorem ipsum dolor sit amet, adipiscing elit.
|
||||
</Text>
|
||||
|
||||
{directorForms?.map((directorForm, index) => (
|
||||
<Box key={index} mb={6}>
|
||||
<Text color={'#49475A'} fontWeight={600} fontSize={'sm'} mb={2}>
|
||||
Director {index + 1}
|
||||
</Text>
|
||||
<Box
|
||||
as="form"
|
||||
bg={"#f7f7fb"}
|
||||
p={4}
|
||||
borderRadius={"md"}
|
||||
boxShadow={"md"}
|
||||
>
|
||||
{/* Director Name Field */}
|
||||
<Box mb={3}>
|
||||
<Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
|
||||
Director Name
|
||||
</Text>
|
||||
<Input
|
||||
type='text'
|
||||
border="1px solid #e2e8f0"
|
||||
borderRadius="md"
|
||||
fontSize={"sm"}
|
||||
fontWeight={500}
|
||||
bg={"#fff"}
|
||||
placeholder={directorForm.directorNamePlaceholder || " "}
|
||||
value={directorForm.directorName}
|
||||
onChange={(e) => directorForm.setDirectorName(e.target.value)}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Director Email Field */}
|
||||
<Box mb={3}>
|
||||
<Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
|
||||
Email
|
||||
</Text>
|
||||
<Input
|
||||
type='email'
|
||||
border="1px solid #e2e8f0"
|
||||
borderRadius="md"
|
||||
fontSize={"sm"}
|
||||
fontWeight={500}
|
||||
bg={"#fff"}
|
||||
placeholder={directorForm.directorEmailPlaceholder || " "}
|
||||
value={directorForm.directorEmail}
|
||||
onChange={(e) => directorForm.setDirectorEmail(e.target.value)}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Director Phone Number */}
|
||||
<Box mb={3}>
|
||||
<Text
|
||||
color={"#344054"}
|
||||
fontSize={"xs"}
|
||||
fontWeight={500}
|
||||
mb={1}
|
||||
>
|
||||
Phone Number
|
||||
</Text>
|
||||
<PhoneInput
|
||||
country={"in"} // Default country
|
||||
value={directorForm.directorPhone}
|
||||
onChange={(value) => 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",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Upload Pan */}
|
||||
<Box mb={3}>
|
||||
<Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
|
||||
Upload Pan
|
||||
</Text>
|
||||
<Box my={2}
|
||||
position="relative"
|
||||
onClick={() => document.getElementById('pan-file-input').click()}
|
||||
>
|
||||
<VStack
|
||||
border={"1px dashed #D0D5DD"}
|
||||
boxShadow={"md"}
|
||||
borderRadius={"md"}
|
||||
bg={"#faf8fd"}
|
||||
p={4}
|
||||
h={"28"}
|
||||
justifyContent={"center"}
|
||||
cursor="pointer"
|
||||
>
|
||||
<SlCloudUpload color={"#191D23"} size={30} />
|
||||
<Text
|
||||
color={"#191D23"}
|
||||
fontWeight={"500"}
|
||||
fontSize={"sm"}
|
||||
mt={'2'}
|
||||
mb={0}
|
||||
>
|
||||
Drag and drop files here or{' '}
|
||||
<Text as="span" textDecoration="underline">
|
||||
Choose file
|
||||
</Text>
|
||||
</Text>
|
||||
</VStack>
|
||||
<input
|
||||
type="file"
|
||||
id="pan-file-input"
|
||||
style={{ display: 'none' }} // Hide the file input
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<HStack justifyContent={"space-between"}>
|
||||
<Text color={"#C3C3C3"} fontSize={"xs"} fontWeight={400} mb={1}>
|
||||
Supported formats- jpg, png, svg
|
||||
</Text>
|
||||
<Text color={"#C3C3C3"} fontSize={"xs"} fontWeight={400} mb={1}>
|
||||
Maximum size - 20MB
|
||||
</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
{/* Upload Aadhar Card */}
|
||||
<Box mb={3}>
|
||||
<Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
|
||||
Upload Aadhar
|
||||
</Text>
|
||||
<Box my={2}
|
||||
position="relative"
|
||||
onClick={() => document.getElementById('aadhar-file-input').click()}
|
||||
>
|
||||
<VStack
|
||||
border={"1px dashed #D0D5DD"}
|
||||
boxShadow={"md"}
|
||||
borderRadius={"md"}
|
||||
bg={"#faf8fd"}
|
||||
p={4}
|
||||
h={"28"}
|
||||
justifyContent={"center"}
|
||||
cursor="pointer"
|
||||
>
|
||||
<SlCloudUpload color={"#191D23"} size={30} />
|
||||
<Text
|
||||
color={"#191D23"}
|
||||
fontWeight={"500"}
|
||||
fontSize={"sm"}
|
||||
mt={'2'}
|
||||
mb={0}
|
||||
>
|
||||
Drag and drop files here or{' '}
|
||||
<Text as="span" textDecoration="underline">
|
||||
Choose file
|
||||
</Text>
|
||||
</Text>
|
||||
</VStack>
|
||||
<input
|
||||
type="file"
|
||||
id="aadhar-file-input"
|
||||
style={{ display: 'none' }} // Hide the file input
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<HStack justifyContent={"space-between"}>
|
||||
<Text color={"#C3C3C3"} fontSize={"xs"} fontWeight={400} mb={1}>
|
||||
Supported formats- jpg, png, svg
|
||||
</Text>
|
||||
<Text color={"#C3C3C3"} fontSize={"xs"} fontWeight={400} mb={1}>
|
||||
Maximum size - 20MB
|
||||
</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
|
||||
<Box>
|
||||
<Text
|
||||
color={'#6311CB'}
|
||||
fontWeight={600}
|
||||
fontSize={'sm'} mt={4}
|
||||
cursor="pointer"
|
||||
onClick={() => handleAddDirector()}
|
||||
>
|
||||
+ Add director 2
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default OnboardingDirectorDetails;
|
||||
@@ -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"}
|
||||
>
|
||||
<Box>
|
||||
<Text color={'#49475A'} fontWeight={500} fontSize={'sm'}>
|
||||
@@ -131,7 +135,7 @@ const OnboardingFrame = () => {
|
||||
my={5}
|
||||
boxShadow={'md'}
|
||||
zIndex={2}
|
||||
minH={"80vh"}
|
||||
minH={"82vh"}
|
||||
>
|
||||
<HStack justifyContent={"end"}>
|
||||
|
||||
@@ -150,8 +154,19 @@ const OnboardingFrame = () => {
|
||||
</HStack>
|
||||
|
||||
<Box>
|
||||
<Box w={"70%"} mx={"auto"}>
|
||||
<OnboardingYourDetails />
|
||||
<Box
|
||||
w={{ base: "70%", lg: "92%" }}
|
||||
mx={"auto"}
|
||||
>
|
||||
|
||||
{/* component here */}
|
||||
|
||||
{/* <OnboardingYourDetails /> */}
|
||||
{/* <OnboardingAboutCompany/> */}
|
||||
{/* <OnboardingAddCompanyDetails/> */}
|
||||
{/* <OnboardingDirectorDetails/> */}
|
||||
<OnboardingSelectPackage />
|
||||
|
||||
<HStack mt={6}>
|
||||
<IconButton
|
||||
aria-label="Back"
|
||||
@@ -159,7 +174,7 @@ const OnboardingFrame = () => {
|
||||
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={<ArrowForwardIcon />}
|
||||
w={"100%"}
|
||||
onClick={() => setActiveStep(activeStep + 1)}
|
||||
|
||||
108
src/Pages/Onboarding/OnboardingSelectPackage.jsx
Normal file
108
src/Pages/Onboarding/OnboardingSelectPackage.jsx
Normal file
@@ -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 (
|
||||
<Box>
|
||||
<Text color={'#49475A'} fontWeight={500} fontSize={'sm'} mb={1}>
|
||||
Select package
|
||||
</Text>
|
||||
<Text color={'#49475A'} fontWeight={500} fontSize={'xs'}>
|
||||
Lorem ipsum dolor sit amet, adipiscing elit.
|
||||
</Text>
|
||||
|
||||
<HStack spacing={4} flexWrap={"wrap"} my={12}>
|
||||
{packages.map((pkg) => (
|
||||
<Box
|
||||
key={pkg.id}
|
||||
bg={"linear-gradient(158.69deg, #C33FAD 1.29%, #0A006B 98.23%)"}
|
||||
p={4}
|
||||
borderRadius={"md"}
|
||||
maxW={"260px"}
|
||||
>
|
||||
<HStack justifyContent={"space-between"} alignItems={"start"}>
|
||||
<Image src={pkg.img} alt={`${pkg.title} image`} />
|
||||
<Checkbox colorScheme='white'></Checkbox>
|
||||
</HStack>
|
||||
<Text
|
||||
fontSize={"sm"}
|
||||
fontWeight={500}
|
||||
color={"#fff"}
|
||||
mb={0}
|
||||
mt={2}
|
||||
>
|
||||
{pkg.title}
|
||||
</Text>
|
||||
<Text fontSize={"xs"} color={"#e7d4ea"}>
|
||||
{pkg.description}
|
||||
</Text>
|
||||
<Text fontSize={"xs"} color={"#e8d5eb"} mb={2}>
|
||||
This plan gets
|
||||
</Text>
|
||||
<Box bg={"#fff"} borderRadius={"md"} p={4}>
|
||||
<List spacing={3} pl={0} mb={0}>
|
||||
{pkg.benefits.map((benefit, index) => (
|
||||
<ListItem
|
||||
key={index}
|
||||
fontSize={"xs"}
|
||||
color={"#434343"}
|
||||
fontWeight={500}
|
||||
>
|
||||
<ListIcon as={MdCheckCircle} color='#3725EA' />
|
||||
{benefit}
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</HStack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default OnboardingSelectPackage;
|
||||
@@ -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
|
||||
</Text>
|
||||
<InputGroup>
|
||||
<InputLeftElement pointerEvents='none'>
|
||||
<CiMail color='gray.300' />
|
||||
</InputLeftElement>
|
||||
<Input
|
||||
type='tel'
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
<PhoneInput
|
||||
country={"in"} // Default country
|
||||
value={phone}
|
||||
onChange={setPhone}
|
||||
inputStyle={{
|
||||
width: "100%",
|
||||
borderRadius: "md",
|
||||
paddingLeft: "8",
|
||||
border: "1px solid #e2e8f0",
|
||||
height: "40px"
|
||||
}}
|
||||
buttonStyle={{
|
||||
border: "none",
|
||||
borderRadius: "8px 0 0 8px",
|
||||
backgroundColor: "transparent",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
|
||||
9
src/assets/o-benefits.svg
Normal file
9
src/assets/o-benefits.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 39 KiB |
9
src/assets/o-expense.svg
Normal file
9
src/assets/o-expense.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 30 KiB |
9
src/assets/o-gift.svg
Normal file
9
src/assets/o-gift.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 22 KiB |
Reference in New Issue
Block a user