Merge branch 'main' of http://git.wdipl.com/Siddhesh.More/optifii-corporate into dev
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;
|
||||
}
|
||||
|
||||
18
src/App.jsx
18
src/App.jsx
@@ -14,13 +14,14 @@ import Login from "./Pages/Login";
|
||||
import GlobalStateContext from "./Contexts/GlobalStateContext";
|
||||
import Cookies from "js-cookie";
|
||||
import NoInternetScreen from "./Pages/NoInternetScreen";
|
||||
import OnboardingFrame from "./Pages/Onboarding/OnboardingFrame";
|
||||
|
||||
const App = () => {
|
||||
// const { isAuthenticate } = useSelector((state) => state?.auth);
|
||||
|
||||
const { isAuthenticate } = useContext(GlobalStateContext);
|
||||
const isAuthenticatedInCookie = Cookies.get("isAuthenticated");
|
||||
|
||||
|
||||
const [isOnline, setIsOnline] = useState(navigator.onLine);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -39,7 +40,7 @@ const App = () => {
|
||||
|
||||
// const token = localStorage.getItem('accessToken')
|
||||
// console.log(token);
|
||||
|
||||
|
||||
|
||||
// const PrivateRoute = ({ children }) => {
|
||||
// if (!isAuthenticate && isAuthenticatedInCookie !== "true") {
|
||||
@@ -52,15 +53,18 @@ const App = () => {
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/login" element={<Login />} />
|
||||
<Route path="/onboarding-frame" element={<OnboardingFrame />} />
|
||||
|
||||
|
||||
<Route
|
||||
path="/*"
|
||||
element={
|
||||
// isOnline ? (
|
||||
isAuthenticate || isAuthenticatedInCookie === "true" ? (
|
||||
<DefaultLayout isOnline={isOnline} />
|
||||
) : (
|
||||
<Login />
|
||||
)
|
||||
isAuthenticate || isAuthenticatedInCookie === "true" ? (
|
||||
<DefaultLayout isOnline={isOnline} />
|
||||
) : (
|
||||
<Login />
|
||||
)
|
||||
// ) : (
|
||||
// <NoInternetScreen />
|
||||
// )
|
||||
|
||||
43
src/Pages/Onboarding/Header.jsx
Normal file
43
src/Pages/Onboarding/Header.jsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import { Box, Container, HStack, Image, Link, Flex } from '@chakra-ui/react';
|
||||
import React from 'react';
|
||||
import optifii_logo from '../../assets/optifii_logo.svg';
|
||||
|
||||
const Header = () => {
|
||||
const navLinks = ["How it works?", "Benefits", "FAQ", "Testimonials", "Pricing"];
|
||||
|
||||
return (
|
||||
<Box bg={"#FFFFFF"}>
|
||||
<Container maxW='container.xl' py={2}>
|
||||
<Flex justifyContent={"space-between"} alignItems={"center"}>
|
||||
{/* Logo on the left */}
|
||||
<Box>
|
||||
<Image src={optifii_logo} alt="Optifii Logo" />
|
||||
</Box>
|
||||
|
||||
{/* Centered Navigation Links */}
|
||||
<Flex flex={1} justifyContent="center">
|
||||
<HStack spacing={8}>
|
||||
{navLinks.map((link, index) => (
|
||||
<Link
|
||||
key={index}
|
||||
href={`#${link.replace(/\s+/g, '-').toLowerCase()}`} // Links are placeholders
|
||||
color={"#000000"}
|
||||
fontWeight="500"
|
||||
fontSize="sm"
|
||||
_hover={{ textDecoration: "none", color: "#6E34F9" }} // Hover effect
|
||||
>
|
||||
{link}
|
||||
</Link>
|
||||
))}
|
||||
</HStack>
|
||||
</Flex>
|
||||
|
||||
{/* Empty Box to balance space on the right */}
|
||||
<Box w="50px" />
|
||||
</Flex>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
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;
|
||||
209
src/Pages/Onboarding/OnboardingFrame.jsx
Normal file
209
src/Pages/Onboarding/OnboardingFrame.jsx
Normal file
@@ -0,0 +1,209 @@
|
||||
import React from 'react';
|
||||
import { OPACITY_ON_LOAD } from '../../Layout/animations';
|
||||
import {
|
||||
Box, Text, Stepper, Step, StepIndicator, StepStatus, StepSeparator, useSteps,
|
||||
StepIcon, StepTitle, Divider, Button, Input, HStack, Select,
|
||||
IconButton, InputLeftElement, InputGroup, Image,
|
||||
Circle, Icon, Flex
|
||||
} from '@chakra-ui/react';
|
||||
// import { useNavigate } from 'react-router-dom';
|
||||
import Header from './Header';
|
||||
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 = () => {
|
||||
|
||||
const steps = [
|
||||
{ title: 'Your details', description: 'Lorem ipsum dolor sit amet dolor', icon: FaUser },
|
||||
{ title: 'About Company', description: 'Lorem ipsum dolor sit amet dolor', icon: FaBuilding },
|
||||
{ title: 'Company details', description: 'Lorem ipsum dolor sit amet dolor', icon: FaClipboard },
|
||||
{ title: 'Director details', description: 'Lorem ipsum dolor sit amet dolor', icon: FaUserTie },
|
||||
{ title: 'Select package', description: 'Lorem ipsum dolor sit amet dolor', icon: FaBoxOpen },
|
||||
];
|
||||
|
||||
// Stepper configuration
|
||||
const { activeStep, setActiveStep } = useSteps({
|
||||
index: 2, // Initialize the active step
|
||||
count: steps.length,
|
||||
});
|
||||
|
||||
return (
|
||||
<Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
|
||||
<Header />
|
||||
<Box
|
||||
w={'100%'}
|
||||
minH={'92vh'}
|
||||
bgImage={`url(${onboarding_bg})`}
|
||||
bgSize={'cover'}
|
||||
bgPosition={'center'}
|
||||
position={'relative'}
|
||||
px={6}
|
||||
display={"flex"}
|
||||
gap={"6"}
|
||||
alignItems={"start"}
|
||||
_before={{
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
bg: 'rgba(0, 0, 0, 0.3)',
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
{/* Stepper Box */}
|
||||
<Box
|
||||
w={'100%'}
|
||||
my={5}
|
||||
boxShadow={'md'}
|
||||
maxW={"350px"}
|
||||
zIndex={2}
|
||||
bg={'#fff'}
|
||||
py={6}
|
||||
px={4}
|
||||
borderRadius={'md'}
|
||||
minH={"82vh"}
|
||||
>
|
||||
<Box>
|
||||
<Text color={'#49475A'} fontWeight={500} fontSize={'sm'}>
|
||||
Lorem ipsum dolor sit amet, adipiscing elit.
|
||||
</Text>
|
||||
<Divider />
|
||||
<Box>
|
||||
<Stepper
|
||||
index={activeStep}
|
||||
orientation="vertical" h="400"
|
||||
gap="0"
|
||||
sx={{
|
||||
'--stepper-accent-color': '#6311CB',
|
||||
}}
|
||||
>
|
||||
{steps.map((step, index) => (
|
||||
<Step key={index}>
|
||||
<StepIndicator>
|
||||
<StepStatus
|
||||
complete={
|
||||
<CheckIcon boxSize="16px" />
|
||||
}
|
||||
incomplete={
|
||||
<Icon as={step.icon} color={"purple.400"} boxSize="16px" />
|
||||
}
|
||||
active={
|
||||
<Icon as={step.icon} color={"purple.500"} boxSize="16px" />
|
||||
}
|
||||
/>
|
||||
</StepIndicator>
|
||||
|
||||
<Box flexShrink="0" ml={4}>
|
||||
<StepTitle
|
||||
fontWeight={activeStep === index ? "600" : "500"}
|
||||
fontSize={activeStep === index ? "md" : "sm"}
|
||||
mb={1}
|
||||
>
|
||||
{step.title}
|
||||
</StepTitle>
|
||||
<Text fontSize="xs" color="gray.500">
|
||||
{step.description}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<StepSeparator
|
||||
borderColor={activeStep > index ? "purple.500" : "purple.300"}
|
||||
borderWidth={1}
|
||||
/>
|
||||
</Step>
|
||||
))}
|
||||
</Stepper>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
|
||||
{/* Another Content Box */}
|
||||
<Box
|
||||
w={'100%'}
|
||||
bg={'#fff'}
|
||||
p={6}
|
||||
borderRadius={'md'}
|
||||
my={5}
|
||||
boxShadow={'md'}
|
||||
zIndex={2}
|
||||
minH={"82vh"}
|
||||
>
|
||||
<HStack justifyContent={"end"}>
|
||||
|
||||
{/* Step Indicator (Horizontal) */}
|
||||
<Flex justify="center" align="center" gap={2} mt={4}>
|
||||
{steps.map((_, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
h="4px"
|
||||
w="20px"
|
||||
bg={index <= activeStep ? "#3725EA" : "#e9e7fd"}
|
||||
borderRadius="full"
|
||||
/>
|
||||
))}
|
||||
</Flex>
|
||||
</HStack>
|
||||
|
||||
<Box>
|
||||
<Box
|
||||
w={{ base: "70%", lg: "92%" }}
|
||||
mx={"auto"}
|
||||
>
|
||||
|
||||
{/* component here */}
|
||||
|
||||
{/* <OnboardingYourDetails /> */}
|
||||
{/* <OnboardingAboutCompany/> */}
|
||||
{/* <OnboardingAddCompanyDetails/> */}
|
||||
{/* <OnboardingDirectorDetails/> */}
|
||||
<OnboardingSelectPackage />
|
||||
|
||||
<HStack mt={6}>
|
||||
<IconButton
|
||||
aria-label="Back"
|
||||
icon={<ArrowBackIcon />}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
px={8}
|
||||
_hover={{ opacity: 0.8 }}
|
||||
color={"#d0b8ef"}
|
||||
border={"1px solid #d0b8ef"}
|
||||
onClick={() => setActiveStep(activeStep - 1)}
|
||||
/>
|
||||
|
||||
|
||||
<Button
|
||||
bg={"#6311CB"}
|
||||
color={"#fff"}
|
||||
fontSize={"xs"}
|
||||
fontWeight={500}
|
||||
size="sm"
|
||||
_hover={{ opacity: 0.8 }}
|
||||
rightIcon={<ArrowForwardIcon />}
|
||||
w={"100%"}
|
||||
onClick={() => setActiveStep(activeStep + 1)}
|
||||
|
||||
>
|
||||
Next step
|
||||
</Button>
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default OnboardingFrame;
|
||||
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;
|
||||
103
src/Pages/Onboarding/OnboardingYourDetails.jsx
Normal file
103
src/Pages/Onboarding/OnboardingYourDetails.jsx
Normal file
@@ -0,0 +1,103 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Box, Container, HStack, Image, Input, InputGroup, InputLeftElement, Text } from '@chakra-ui/react';
|
||||
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 [phone, setPhone] = useState("");
|
||||
|
||||
return (
|
||||
|
||||
<Box >
|
||||
<Box mb={4}>
|
||||
<Image src={optifii_logo} />
|
||||
</Box>
|
||||
<Text fontWeight={600} fontSize={'md'}>
|
||||
Streamlined Solutions for Seamless Reimbursements!
|
||||
</Text>
|
||||
<Text color={'#49475A'} fontWeight={500} fontSize={'sm'} mb={1}>
|
||||
Add your details
|
||||
</Text>
|
||||
<Text color={'#49475A'} fontWeight={500} fontSize={'xs'}>
|
||||
Lorem ipsum dolor sit amet, adipiscing elit.
|
||||
</Text>
|
||||
|
||||
{/* Form Fields */}
|
||||
<Box as="form">
|
||||
<Box mb={3}>
|
||||
<Text
|
||||
color={"#344054"}
|
||||
fontSize={"xs"}
|
||||
fontWeight={500}
|
||||
mb={1}
|
||||
>
|
||||
Name
|
||||
</Text>
|
||||
<InputGroup>
|
||||
<InputLeftElement pointerEvents='none'>
|
||||
<CiUser color='gray.300' />
|
||||
</InputLeftElement>
|
||||
<Input
|
||||
type='text'
|
||||
/>
|
||||
</InputGroup>
|
||||
</Box>
|
||||
<Box mb={3}>
|
||||
<Text
|
||||
color={"#344054"}
|
||||
fontSize={"xs"}
|
||||
fontWeight={500}
|
||||
mb={1}
|
||||
>
|
||||
Email
|
||||
</Text>
|
||||
<InputGroup>
|
||||
<InputLeftElement pointerEvents='none'>
|
||||
<CiMail color='gray.300' />
|
||||
</InputLeftElement>
|
||||
<Input
|
||||
type='email'
|
||||
/>
|
||||
</InputGroup>
|
||||
</Box>
|
||||
<Box mb={3}>
|
||||
<Text
|
||||
color={"#344054"}
|
||||
fontSize={"xs"}
|
||||
fontWeight={500}
|
||||
mb={1}
|
||||
>
|
||||
Phone Number
|
||||
</Text>
|
||||
|
||||
<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>
|
||||
</Box>
|
||||
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
export default OnboardingYourDetails;
|
||||
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 |
9
src/assets/onboarding_bg.svg
Normal file
9
src/assets/onboarding_bg.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.0 MiB |
60
src/assets/optifii_logo copy.svg
Normal file
60
src/assets/optifii_logo copy.svg
Normal file
@@ -0,0 +1,60 @@
|
||||
<svg width="112" height="46" viewBox="0 0 112 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.9607 45.557C30.371 45.557 38.4486 39.8506 41.9217 31.7094C38.6746 30.0511 36.4513 26.6741 36.4513 22.7778C36.4513 18.8817 38.6744 15.5049 41.9213 13.8465C38.4479 5.70589 30.3706 0 20.9607 0C11.5511 0 3.47408 5.7055 0.000457089 13.8457C3.22516 15.492 5.4404 18.8332 5.4717 22.6949C5.51677 14.1789 12.4342 7.28926 20.9608 7.28926C29.5154 7.28926 36.4502 14.2241 36.4502 22.7786C36.4502 31.3332 29.5154 38.268 20.9608 38.268C12.4339 38.268 5.51625 31.3778 5.47169 22.8614C5.44016 26.723 3.22477 30.0641 0 31.7102C3.47337 39.8509 11.5507 45.557 20.9607 45.557Z" fill="url(#paint0_linear_1816_8383)"/>
|
||||
<path d="M46.9677 14.7348C45.078 15.0162 43.6225 15.6194 42.3841 16.6245C41.0653 17.6941 40.1968 19.2461 39.9234 21.0393C39.8671 21.3932 39.851 22.0767 39.8751 22.6878C39.9394 24.3524 40.3254 25.4461 41.2985 26.7327C42.6334 28.5018 44.8206 29.5714 47.5869 29.8126C50.6588 30.0699 53.5135 29.1371 55.2263 27.3197C56.5371 25.9366 57.0437 24.65 57.1161 22.5672C57.1483 21.6585 57.1322 21.2484 57.0196 20.7177C56.521 18.257 54.8001 16.2788 52.3394 15.3459C51.1252 14.8795 50.3452 14.7509 48.6966 14.7267C47.8764 14.7107 47.1044 14.7187 46.9677 14.7348ZM50.5703 17.1714C52.6209 17.7101 54.0845 19.1978 54.4142 21.0715C54.5509 21.8676 54.4704 23.4437 54.2533 24.0388C53.7869 25.3496 52.9426 26.3065 51.7363 26.8935C50.7151 27.3841 50.0315 27.5127 48.4554 27.5047C47.2492 27.4967 47.0642 27.4806 46.4048 27.2795C44.4186 26.6764 43.1641 25.438 42.7057 23.6528C42.561 23.098 42.5449 21.6907 42.6736 20.9911C42.7138 20.7338 42.9148 20.1869 43.1078 19.7849C43.3973 19.1898 43.5662 18.9646 44.0647 18.4902C44.9252 17.6619 45.7695 17.2839 47.3296 16.9864C47.4422 16.9703 48.0775 16.9623 48.7369 16.9784C49.6375 16.9945 50.1039 17.0427 50.5703 17.1714Z" fill="url(#paint1_linear_1816_8383)"/>
|
||||
<path d="M85.6313 15.1771C85.181 15.4022 84.9639 15.7561 84.9639 16.2868C84.9639 16.7693 85.1006 17.0749 85.4464 17.3644C86.146 17.9594 87.4407 17.8227 87.9151 17.107C88.1644 16.7452 88.1644 16.1501 87.9231 15.7239C87.5532 15.0725 86.4033 14.7911 85.6313 15.1771Z" fill="url(#paint2_linear_1816_8383)"/>
|
||||
<path d="M104.546 15.523C104.208 15.6678 103.878 16.0779 103.814 16.4156C103.725 16.9062 103.846 17.268 104.224 17.6379C105.004 18.3778 106.347 18.2652 106.773 17.4128C107.079 16.8338 106.853 16.0618 106.266 15.6758C105.985 15.4909 105.824 15.4507 105.358 15.4265C104.996 15.4185 104.698 15.4507 104.546 15.523Z" fill="url(#paint3_linear_1816_8383)"/>
|
||||
<path d="M109.636 15.5715C109.25 15.6841 108.944 15.9655 108.807 16.3354C108.421 17.3406 109.362 18.3297 110.593 18.2011C111.823 18.0724 112.249 16.7375 111.316 15.9173C110.882 15.5313 110.215 15.3946 109.636 15.5715Z" fill="url(#paint4_linear_1816_8383)"/>
|
||||
<path d="M90.6738 16.753C90.6738 17.2757 90.714 19.0047 90.7542 20.5969C90.7945 22.1891 90.8507 24.8106 90.8749 26.427C90.899 28.0433 90.9392 29.5149 90.9633 29.6999L91.0035 30.0457H92.2178H93.4321L93.3758 27.1346L93.3114 24.2316L97.7423 24.2879L102.173 24.3523L102.125 23.2747C102.093 22.6475 102.028 22.1811 101.98 22.1489C101.932 22.1167 101.112 22.0846 100.163 22.0846C99.2139 22.0846 97.2679 22.0604 95.8526 22.0283L93.2712 21.98L93.2069 20.0501C93.1747 18.9966 93.1828 18.096 93.223 18.0638C93.2552 18.0316 95.2816 18.0477 97.7101 18.096C100.147 18.1523 102.157 18.1684 102.189 18.1442C102.221 18.1201 102.229 17.6376 102.197 17.0827L102.149 16.0695L100.935 16.0213C99.5758 15.973 92.266 15.8122 91.3011 15.8122H90.6738V16.753Z" fill="url(#paint5_linear_1816_8383)"/>
|
||||
<path d="M76.4473 17.2361C76.2623 17.8071 76.0291 18.4665 75.9407 18.7158L75.7879 19.1581L74.6218 19.4315L73.4639 19.6968V20.2356V20.7744L74.5977 20.8226C75.225 20.8468 75.7477 20.887 75.7637 20.9031C75.7798 20.9191 75.812 22.2138 75.8442 23.7819C75.8844 26.1863 75.9165 26.7251 76.0452 27.2559C76.3106 28.3897 76.8976 29.1456 77.8787 29.6442C78.5783 29.99 79.2859 30.1347 80.3715 30.1347C81.3526 30.1428 81.9155 30.0623 82.8001 29.8131C83.7248 29.5477 83.6766 29.6201 83.6766 28.5264C83.6766 28.0037 83.6525 27.5614 83.6283 27.5293C83.5962 27.5051 83.4997 27.5293 83.4032 27.5936C82.9448 27.8911 82.2693 28.052 81.2561 28.0922C79.9775 28.1485 79.495 28.0278 78.9803 27.5293C78.4094 26.9824 78.3692 26.7573 78.3129 23.5889L78.2646 20.8709L80.8058 20.9272L83.3549 20.9835V20.0909C83.3549 19.6003 83.3228 19.1822 83.2825 19.1581C83.2423 19.1259 82.1004 19.0857 80.7495 19.0535L78.2888 19.0053L78.2727 17.8714C78.2646 17.2442 78.2566 16.625 78.2486 16.4963L78.2405 16.2551L77.5248 16.2309L76.8011 16.2149L76.4473 17.2361Z" fill="url(#paint6_linear_1816_8383)"/>
|
||||
<path d="M66.3472 18.5951C66.2588 18.6112 65.9853 18.6675 65.7441 18.7157C64.5057 18.965 63.0824 19.9702 62.3023 21.1362C62.1978 21.3051 62.0772 21.4418 62.0531 21.4418C62.0209 21.4418 62.0048 20.8387 62.0048 20.0908V18.7479L60.7423 18.7238L59.4717 18.6997V20.6939C59.4717 21.7956 59.4476 24.9962 59.4154 27.8107L59.3672 32.9412H60.6619H61.9646V29.9256C61.9646 28.269 61.9887 26.91 62.0289 26.91C62.0611 26.9181 62.1898 27.0869 62.3184 27.288C62.9215 28.2369 64.176 29.2742 65.1571 29.6441C66.6769 30.2151 68.5184 30.1508 69.8774 29.4672C71.0837 28.8641 72.0165 27.7705 72.4748 26.3873C72.6759 25.7923 72.692 25.6395 72.7 24.4172C72.7 23.3396 72.6678 22.9938 72.5472 22.5676C72.113 21.0719 71.1078 19.8255 69.8453 19.2063C69.4673 19.0213 68.9446 18.8122 68.6793 18.7399C68.2048 18.6192 66.6689 18.5147 66.3472 18.5951ZM67.1916 20.5653C68.9285 20.8387 70.0463 22.1173 70.2071 24.0312C70.3036 25.1329 69.9659 26.1783 69.2663 26.9502C68.1646 28.1565 66.2829 28.3897 64.6263 27.5131C63.6211 26.9824 62.8733 26.1702 62.23 24.9238L61.8842 24.2483L62.3023 23.4361C63.1065 21.86 64.4173 20.8065 65.8486 20.5653C66.4357 20.4688 66.5965 20.4688 67.1916 20.5653Z" fill="url(#paint7_linear_1816_8383)"/>
|
||||
<path d="M85.391 21.4893C85.4232 22.8162 85.4714 25.2608 85.4956 26.9254L85.5519 29.9651H86.7983H88.0367L87.9884 28.6945C87.9643 28.003 87.9241 25.9845 87.9 24.2154C87.8758 22.4463 87.8356 20.5726 87.8115 20.058L87.7633 19.1091L87.4255 19.1734C86.9832 19.2458 86.2193 19.2458 85.7368 19.1573L85.3428 19.0849L85.391 21.4893Z" fill="url(#paint8_linear_1816_8383)"/>
|
||||
<path d="M104.288 20.5329C104.312 21.144 104.4 23.5484 104.472 25.8724L104.617 30.1103L105.019 30.1585C105.244 30.1827 105.783 30.2068 106.217 30.2068H106.997V29.6037C106.997 29.0488 106.7 20.5248 106.652 19.793C106.636 19.4392 106.676 19.4473 105.856 19.584C105.598 19.6322 105.285 19.6322 105.132 19.592C104.987 19.5598 104.722 19.5035 104.553 19.4714L104.239 19.4151L104.288 20.5329Z" fill="url(#paint9_linear_1816_8383)"/>
|
||||
<path d="M109.192 20.1304C109.224 20.4762 109.321 22.8564 109.417 25.4217C109.514 27.9869 109.61 30.1099 109.643 30.142C109.667 30.1662 110.214 30.2064 110.849 30.2225L111.999 30.2466L111.951 28.9197C111.894 27.424 111.79 25.0116 111.653 21.803C111.605 20.6048 111.548 19.6157 111.532 19.5996C111.516 19.5755 111.235 19.5996 110.913 19.6559C110.455 19.7203 110.23 19.7203 109.811 19.6318C109.522 19.5675 109.257 19.5192 109.216 19.5112C109.176 19.5112 109.168 19.7846 109.192 20.1304Z" fill="url(#paint10_linear_1816_8383)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_1816_8383" x1="20.9608" y1="5.01736e-08" x2="20.9564" y2="57.7055" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#5E0FCD"/>
|
||||
<stop offset="0.553414" stop-color="#C942AB"/>
|
||||
<stop offset="1" stop-color="#3725EA"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_1816_8383" x1="39.8643" y1="22.2864" x2="57.1307" y2="22.2864" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#6311CB"/>
|
||||
<stop offset="1" stop-color="#C33FAD"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_1816_8383" x1="84.9639" y1="16.37" x2="88.1031" y2="16.37" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#6311CB"/>
|
||||
<stop offset="1" stop-color="#C33FAD"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_1816_8383" x1="103.786" y1="16.7772" x2="106.909" y2="16.7772" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#6311CB"/>
|
||||
<stop offset="1" stop-color="#C33FAD"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear_1816_8383" x1="108.72" y1="16.8538" x2="111.822" y2="16.8538" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#6311CB"/>
|
||||
<stop offset="1" stop-color="#C33FAD"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear_1816_8383" x1="90.6738" y1="22.9289" x2="102.218" y2="22.9289" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#6311CB"/>
|
||||
<stop offset="1" stop-color="#C33FAD"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint6_linear_1816_8383" x1="73.4639" y1="23.1751" x2="83.677" y2="23.1751" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#6311CB"/>
|
||||
<stop offset="1" stop-color="#C33FAD"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint7_linear_1816_8383" x1="59.3672" y1="25.754" x2="72.7" y2="25.754" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#6311CB"/>
|
||||
<stop offset="1" stop-color="#C33FAD"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint8_linear_1816_8383" x1="85.3428" y1="24.525" x2="88.0367" y2="24.525" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#6311CB"/>
|
||||
<stop offset="1" stop-color="#C33FAD"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint9_linear_1816_8383" x1="104.239" y1="24.8109" x2="106.997" y2="24.8109" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#6311CB"/>
|
||||
<stop offset="1" stop-color="#C33FAD"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint10_linear_1816_8383" x1="109.179" y1="24.8789" x2="111.999" y2="24.8789" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#6311CB"/>
|
||||
<stop offset="1" stop-color="#C33FAD"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.4 KiB |
Reference in New Issue
Block a user