onboarding complete
This commit is contained in:
priyanshuvish
8
package-lock.json
generated
8
package-lock.json
generated
@@ -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"
|
||||
},
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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,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 = () => {
|
||||
|
||||
@@ -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,179 +27,189 @@ 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 {...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>
|
||||
{/* Onboarding content */}
|
||||
<Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
|
||||
<Header />
|
||||
<Box
|
||||
w={'100%'}
|
||||
my={5}
|
||||
boxShadow={'md'}
|
||||
maxW={"350px"}
|
||||
zIndex={2}
|
||||
bg={'#fff'}
|
||||
py={6}
|
||||
px={4}
|
||||
borderRadius={'md'}
|
||||
minH={"82vh"}
|
||||
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,
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Text color={'#49475A'} fontWeight={500} fontSize={'sm'}>
|
||||
Lorem ipsum dolor sit amet, adipiscing elit.
|
||||
</Text>
|
||||
<Divider />
|
||||
{/* Stepper Box */}
|
||||
<Box
|
||||
w={'100%'}
|
||||
my={5}
|
||||
boxShadow={'md'}
|
||||
maxW={"350px"}
|
||||
zIndex={2}
|
||||
bg={'#fff'}
|
||||
py={6}
|
||||
px={4}
|
||||
borderRadius={'md'}
|
||||
minH={"82vh"}
|
||||
>
|
||||
<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)}
|
||||
|
||||
<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' }}
|
||||
>
|
||||
Next step
|
||||
</Button>
|
||||
</HStack>
|
||||
{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>
|
||||
|
||||
{/* 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"}
|
||||
>
|
||||
{/* Render the current step component */}
|
||||
{stepComponents[activeStep]}
|
||||
|
||||
<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"}
|
||||
isDisabled={activeStep === 0}
|
||||
onClick={() => setActiveStep(activeStep - 1)}
|
||||
/>
|
||||
|
||||
<Button
|
||||
bg={"#6311CB"}
|
||||
color={"#fff"}
|
||||
fontSize={"xs"}
|
||||
fontWeight={500}
|
||||
size="sm"
|
||||
_hover={{ opacity: 0.8 }}
|
||||
rightIcon={<ArrowForwardIcon />}
|
||||
w={"100%"}
|
||||
onClick={handleNext} // Use handleNext function
|
||||
>
|
||||
{activeStep === steps.length - 1 ? 'Next step' : 'Next step'}
|
||||
</Button>
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Modal for final step */}
|
||||
<OnboardingSelectPackageModal isOpen={isOpen} onClose={onClose} />
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
76
src/Pages/Onboarding/OnboardingSelectPackageModal.jsx
Normal file
76
src/Pages/Onboarding/OnboardingSelectPackageModal.jsx
Normal 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
99
src/Pages/Onboarding/OnboardingSelectPackageModalChild.jsx
Normal 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;
|
||||
Reference in New Issue
Block a user