Siddhesh.More/optifii-corporate
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

onboarding complete

Browse Source
This commit is contained in:
priyanshuvish
2024-09-19 19:12:54 +05:30
parent 55156dac1a
commit 773a2298b6
7 changed files with 355 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
package-lock.json generated
View File

@@ -19,7 +19,7 @@
"bootstrap": "5.3.3",
"chart.js": "^4.4.3",
"dotenv": "^16.4.5",
"framer-motion": "^11.1.5",
"framer-motion": "^11.5.5",
"js-cookie": "^3.0.5",
"libphonenumber-js": "^1.11.8",
"react": "^18.2.0",
@@ -3838,9 +3838,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.5",
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.5.5.tgz",
"integrity": "sha512-4srkT940jYA3bdQRglxod0KoqDvcghYri1A6bTjT02IXvq/EAd6A0tgUnJc5Q2ahhf8n959aLD3yO+XmLmE8OQ==",
"dependencies": {
"tslib": "^2.4.0"
},

2
package.json
View File

@@ -21,7 +21,7 @@
"bootstrap": "5.3.3",
"chart.js": "^4.4.3",
"dotenv": "^16.4.5",
"framer-motion": "^11.1.5",
"framer-motion": "^11.5.5",
"js-cookie": "^3.0.5",
"libphonenumber-js": "^1.11.8",
"react": "^18.2.0",

1
src/Pages/Onboarding/OnboardingAboutCompany.jsx
View File

@@ -4,7 +4,6 @@ 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 = () => {

1
src/Pages/Onboarding/OnboardingDirectorDetails.jsx
View File

@@ -1,7 +1,6 @@
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 = () => {

90
src/Pages/Onboarding/OnboardingFrame.jsx
View File

@@ -1,24 +1,22 @@
import React from 'react';
import { OPACITY_ON_LOAD } from '../../Layout/animations';
import React, { useState } from 'react';
import {
Box, Text, Stepper, Step, StepIndicator, StepStatus, StepSeparator, useSteps,
StepIcon, StepTitle, Divider, Button, Input, HStack, Select,
IconButton, InputLeftElement, InputGroup, Image,
Circle, Icon, Flex
StepIcon, StepTitle, Divider, Button, HStack, IconButton, Flex,
useDisclosure
} 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 { ArrowBackIcon, ArrowForwardIcon, CheckIcon, Icon } from '@chakra-ui/icons';
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';
import OnboardingSelectPackageModal from './OnboardingSelectPackageModal'; // Import your modal component
import { OPACITY_ON_LOAD } from '../../Layout/animations';
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 },
@@ -29,11 +27,36 @@ const OnboardingFrame = () => {
// Stepper configuration
const { activeStep, setActiveStep } = useSteps({
index: 2, // Initialize the active step
index: 0, // Initialize the active step at 0
count: steps.length,
});
// Array of components for each step
const stepComponents = [
<OnboardingYourDetails />,
<OnboardingAboutCompany />,
<OnboardingAddCompanyDetails />,
<OnboardingDirectorDetails />,
<OnboardingSelectPackage />
];
// Modal state and disclosure hook
const { isOpen, onOpen, onClose } = useDisclosure();
// Function to handle the "Next" button click
const handleNext = () => {
if (activeStep === steps.length - 1) {
// If it's the last step, open the modal
onOpen();
} else {
// Otherwise, go to the next step
setActiveStep(activeStep + 1);
}
};
return (
<Box>
{/* Onboarding content */}
<Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
<Header />
<Box
@@ -79,28 +102,20 @@ const OnboardingFrame = () => {
<Box>
<Stepper
index={activeStep}
orientation="vertical" h="400"
orientation="vertical"
h="400"
gap="0"
sx={{
'--stepper-accent-color': '#6311CB',
}}
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" />
}
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"}
@@ -113,7 +128,6 @@ const OnboardingFrame = () => {
{step.description}
</Text>
</Box>
<StepSeparator
borderColor={activeStep > index ? "purple.500" : "purple.300"}
borderWidth={1}
@@ -125,8 +139,7 @@ const OnboardingFrame = () => {
</Box>
</Box>
{/* Another Content Box */}
{/* Content Box */}
<Box
w={'100%'}
bg={'#fff'}
@@ -158,14 +171,8 @@ const OnboardingFrame = () => {
w={{ base: "70%", lg: "92%" }}
mx={"auto"}
>
{/* component here */}
{/* <OnboardingYourDetails /> */}
{/* <OnboardingAboutCompany/> */}
{/* <OnboardingAddCompanyDetails/> */}
{/* <OnboardingDirectorDetails/> */}
<OnboardingSelectPackage />
{/* Render the current step component */}
{stepComponents[activeStep]}
<HStack mt={6}>
<IconButton
@@ -177,10 +184,10 @@ const OnboardingFrame = () => {
_hover={{ opacity: 0.8 }}
color={"#d0b8ef"}
border={"1px solid #d0b8ef"}
isDisabled={activeStep === 0}
onClick={() => setActiveStep(activeStep - 1)}
/>
<Button
bg={"#6311CB"}
color={"#fff"}
@@ -190,18 +197,19 @@ const OnboardingFrame = () => {
_hover={{ opacity: 0.8 }}
rightIcon={<ArrowForwardIcon />}
w={"100%"}
onClick={() => setActiveStep(activeStep + 1)}
onClick={handleNext} // Use handleNext function
>
Next step
{activeStep === steps.length - 1 ? 'Next step' : 'Next step'}
</Button>
</HStack>
</Box>
</Box>
</Box>
</Box>
</Box>
</Box>
</Box>
{/* Modal for final step */}
<OnboardingSelectPackageModal isOpen={isOpen} onClose={onClose} />
</Box>
);
};

76
src/Pages/Onboarding/OnboardingSelectPackageModal.jsx Normal file
View File

@@ -0,0 +1,76 @@
import { Box, Checkbox, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, Text, } from '@chakra-ui/react';
import React, { useState } from 'react';
import PrimaryButton from '../../Components/Buttons/PrimaryButton';
import OnboardingSelectPackageModalChild from './OnboardingSelectPackageModalChild';
const OnboardingSelectPackageModal = ({ isOpen, onClose }) => {
const [isChildModalOpen, setIsChildModalOpen] = useState(false);
const handleProceed = () => {
// Close the parent modal and open the child modal
onClose();
setIsChildModalOpen(true);
};
const handleChildClose = () => {
// Close the child modal
setIsChildModalOpen(false);
};
return (
<Box>
{/* Parent Modal */}
<Modal isOpen={isOpen} onClose={onClose} isCentered size={"xl"}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Terms & Conditions</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Text fontSize={"xs"} fontWeight={500} color={"#5C5C5C"}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus.
</Text>
<Text fontSize={"xs"} fontWeight={500} color={"#5C5C5C"}>
at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam condimentum, vel euismod erat placerat. In iaculis arcu eros, eget tempus orci facilisis id.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. </Text>
<Text fontSize={"xs"} fontWeight={500} color={"#5C5C5C"}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus.
</Text>
<Text fontSize={"xs"} fontWeight={500} color={"#5C5C5C"}>
at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam condimentum, vel euismod erat placerat. In iaculis arcu eros, eget tempus orci facilisis id.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. </Text>
<Box my={6}>
<Checkbox colorScheme='purple'>
<Text fontSize={"xs"} fontWeight={500} mb={0} color={"#344054"}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Text>
</Checkbox>
<Checkbox colorScheme='purple'>
<Text fontSize={"xs"} fontWeight={500} mb={0} color={"#344054"}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Text>
</Checkbox>
<Checkbox colorScheme='purple'>
<Text fontSize={"xs"} fontWeight={500} mb={0} color={"#344054"}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Text>
</Checkbox>
<Checkbox colorScheme='purple'>
<Text fontSize={"xs"} fontWeight={500} mb={0} color={"#344054"}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Text>
</Checkbox>
</Box>
<Box w={"100%"} my={4}>
<PrimaryButton w={"100%"} title={"Proceed"} onClick={handleProceed} />
</Box>
</ModalBody>
</ModalContent>
</Modal>
{/* Child Modal */}
<OnboardingSelectPackageModalChild isOpen={isChildModalOpen} onClose={handleChildClose} />
</Box>
);
};
export default OnboardingSelectPackageModal;

99
src/Pages/Onboarding/OnboardingSelectPackageModalChild.jsx Normal file
View File

@@ -0,0 +1,99 @@
import React from 'react';
import {
Box, HStack, Text, Modal, ModalOverlay, ModalHeader, ModalCloseButton, ModalBody, ModalContent,Button
} from '@chakra-ui/react';
import { motion } from 'framer-motion';
import PrimaryButton from '../../Components/Buttons/PrimaryButton';
// Define motion components
const MotionBox = motion(Box);
const MotionSvg = motion("svg");
const MotionCircle = motion.circle;
const MotionPolyline = motion.polyline;
const OnboardingSelectPackageModalChild = ({isOpen,onClose}) => {
return (
<>
<Modal isOpen={isOpen} onClose={onClose} isCentered>
<ModalOverlay />
<ModalContent>
<ModalHeader></ModalHeader>
<ModalCloseButton />
<ModalBody>
<MotionBox
initial={{ scale: 0.5, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{ duration: 0.5, type: "spring", stiffness: 300 }}
mb={8}
>
{/* svg with Framer Motion animation */}
<HStack mb={6}>
<MotionSvg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 130.2 130.2"
width="60px"
height="60px"
initial={{ scale: 0.8 }}
animate={{ scale: 1 }}
transition={{ duration: 0.6, type: "spring", bounce: 0.5 }}
>
<MotionCircle
cx="65.1"
cy="65.1"
r="62.1"
fill="#65F37C"
stroke="#159F2B"
strokeWidth="0"
strokeDasharray="1000"
strokeDashoffset="1000"
initial={{ strokeDashoffset: 1000 }}
animate={{ strokeDashoffset: 0 }}
transition={{ duration: 1 }}
/>
<MotionPolyline
points="100.2,40.2 51.5,88.8 29.8,67.5"
fill="none"
stroke="#159F2B"
strokeWidth="6"
strokeLinecap="round"
strokeMiterlimit="10"
strokeDasharray="1000"
strokeDashoffset="-100"
initial={{ strokeDashoffset: 1000 }}
animate={{ strokeDashoffset: 0 }}
transition={{ duration: 0.7, delay: 1 }}
/>
</MotionSvg>
</HStack>
<Text
color={"#100F14"}
fontSize={"md"}
fontWeight={"500"}
mb={2}
>
Thank You for enrolling
</Text>
<Text
color={"#667085"}
fontSize={"xs"}
fontWeight={"500"}
>
We are one step closer to give you the best product for you and your employee.In the meantime check out our resources curated just for you.
</Text>
<HStack justifyContent={"center"} mt={6}>
<PrimaryButton title={"Check my status"} />
</HStack>
</MotionBox>
</ModalBody>
</ModalContent>
</Modal>
</>
);
}
export default OnboardingSelectPackageModalChild;