From 773a2298b6af291ed44a54ac5911db7eaa762356 Mon Sep 17 00:00:00 2001 From: priyanshuvish Date: Thu, 19 Sep 2024 19:12:54 +0530 Subject: [PATCH] onboarding complete --- package-lock.json | 8 +- package.json | 2 +- .../Onboarding/OnboardingAboutCompany.jsx | 1 - .../Onboarding/OnboardingDirectorDetails.jsx | 1 - src/Pages/Onboarding/OnboardingFrame.jsx | 342 +++++++++--------- .../OnboardingSelectPackageModal.jsx | 76 ++++ .../OnboardingSelectPackageModalChild.jsx | 99 +++++ 7 files changed, 355 insertions(+), 174 deletions(-) create mode 100644 src/Pages/Onboarding/OnboardingSelectPackageModal.jsx create mode 100644 src/Pages/Onboarding/OnboardingSelectPackageModalChild.jsx diff --git a/package-lock.json b/package-lock.json index 329b836..83e37e9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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" }, diff --git a/package.json b/package.json index 0033a38..8577bf4 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/Pages/Onboarding/OnboardingAboutCompany.jsx b/src/Pages/Onboarding/OnboardingAboutCompany.jsx index c638699..d385abf 100644 --- a/src/Pages/Onboarding/OnboardingAboutCompany.jsx +++ b/src/Pages/Onboarding/OnboardingAboutCompany.jsx @@ -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 = () => { diff --git a/src/Pages/Onboarding/OnboardingDirectorDetails.jsx b/src/Pages/Onboarding/OnboardingDirectorDetails.jsx index 04138b0..d9b52c2 100644 --- a/src/Pages/Onboarding/OnboardingDirectorDetails.jsx +++ b/src/Pages/Onboarding/OnboardingDirectorDetails.jsx @@ -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 = () => { diff --git a/src/Pages/Onboarding/OnboardingFrame.jsx b/src/Pages/Onboarding/OnboardingFrame.jsx index e4c0385..5bdea71 100644 --- a/src/Pages/Onboarding/OnboardingFrame.jsx +++ b/src/Pages/Onboarding/OnboardingFrame.jsx @@ -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 = [ + , + , + , + , + + ]; + + // 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 ( - -
- - {/* Stepper Box */} + + {/* Onboarding content */} + +
- - - Lorem ipsum dolor sit amet, adipiscing elit. - - + {/* Stepper Box */} + - - {steps.map((step, index) => ( - - - - } - incomplete={ - - } - active={ - - } - /> - - - - - {step.title} - - - {step.description} - - - - index ? "purple.500" : "purple.300"} - borderWidth={1} - /> - - ))} - - - - - - - {/* Another Content Box */} - - - - {/* Step Indicator (Horizontal) */} - - {steps.map((_, index) => ( - - ))} - - - - - - - {/* component here */} - - {/* */} - {/* */} - {/* */} - {/* */} - - - - } - variant="outline" - size="sm" - px={8} - _hover={{ opacity: 0.8 }} - color={"#d0b8ef"} - border={"1px solid #d0b8ef"} - onClick={() => setActiveStep(activeStep - 1)} - /> - - - - + {steps.map((step, index) => ( + + + } + incomplete={} + active={} + /> + + + + {step.title} + + + {step.description} + + + index ? "purple.500" : "purple.300"} + borderWidth={1} + /> + + ))} + + - + {/* Content Box */} + + + + {/* Step Indicator (Horizontal) */} + + {steps.map((_, index) => ( + + ))} + + + + + + {/* Render the current step component */} + {stepComponents[activeStep]} + + + } + variant="outline" + size="sm" + px={8} + _hover={{ opacity: 0.8 }} + color={"#d0b8ef"} + border={"1px solid #d0b8ef"} + isDisabled={activeStep === 0} + onClick={() => setActiveStep(activeStep - 1)} + /> + + + + + + + + {/* Modal for final step */} + ); }; diff --git a/src/Pages/Onboarding/OnboardingSelectPackageModal.jsx b/src/Pages/Onboarding/OnboardingSelectPackageModal.jsx new file mode 100644 index 0000000..cd9a905 --- /dev/null +++ b/src/Pages/Onboarding/OnboardingSelectPackageModal.jsx @@ -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 ( + + {/* Parent Modal */} + + + + Terms & Conditions + + + + 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. + + + 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. + + 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. + + + 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. + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + + + + + + + + + + + + {/* Child Modal */} + + + ); +}; + +export default OnboardingSelectPackageModal; diff --git a/src/Pages/Onboarding/OnboardingSelectPackageModalChild.jsx b/src/Pages/Onboarding/OnboardingSelectPackageModalChild.jsx new file mode 100644 index 0000000..c871d91 --- /dev/null +++ b/src/Pages/Onboarding/OnboardingSelectPackageModalChild.jsx @@ -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 ( + <> + + + + + + + + {/* svg with Framer Motion animation */} + + + + + + + + + Thank You for enrolling + + + 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. + + + + + + + + + + + + ); +} + +export default OnboardingSelectPackageModalChild;