diff --git a/src/components/palmistry/steps-manager/steps-manager.tsx b/src/components/palmistry/steps-manager/steps-manager.tsx index 8b1c17f..f5b5124 100644 --- a/src/components/palmistry/steps-manager/steps-manager.tsx +++ b/src/components/palmistry/steps-manager/steps-manager.tsx @@ -1,34 +1,37 @@ -import React from 'react'; -import { AnimatePresence, motion } from 'framer-motion'; -import { useLocation } from 'react-router-dom'; +import React from "react"; +import { AnimatePresence, motion } from "framer-motion"; +import { useLocation, useSearchParams } from "react-router-dom"; -import './steps-manager.css'; +import "./steps-manager.css"; -import Progressbar from '@/components/palmistry/progress-bar/progress-bar'; -import PalmistryContainer from '@/components/palmistry/palmistry-container/palmistry-container'; -import useSteps, { Step } from '@/hooks/palmistry/use-steps'; -import StepWelcome from '@/components/palmistry/step-welcome/step-welcome'; -import StepGender from '@/components/palmistry/step-gender/step-gender'; -import StepBirthdate from '@/components/palmistry/step-birthdate/step-birthdate'; -import StepPalmsHold from '@/components/palmistry/step-palms-hold/step-palms-hold'; -import StepWish from '@/components/palmistry/step-wish/step-wish'; -import StepRelationshipStatus from '@/components/palmistry/step-relationship-status/step-relationship-status'; -import StepResonatedElement from '@/components/palmistry/step-resonated-element/step-resonated-element'; -import StepColorYouLike from '@/components/palmistry/step-color-you-like/step-color-you-like'; -import StepDecisions from '@/components/palmistry/step-decisions/step-decisions'; -import StepGuidancePlan from '@/components/palmistry/step-guidance-plan/step-guidance-plan'; -import StepPersonalStatement from '@/components/palmistry/step-personal-statement/step-personal-statement'; -import StepScanInfo from '@/components/palmistry/step-scan-info/step-scan-info'; -import StepUpload from '@/components/palmistry/step-upload/step-upload'; -import StepScanPhoto from '@/components/palmistry/step-scan-photo/step-scan-photo'; -import StepEmail from '@/components/palmistry/step-email/step-email'; -import StepSubscriptionPlan from '@/components/palmistry/step-subscription-plan/step-subscription-plan'; -import StepPaywall from '@/components/palmistry/step-paywall/step-paywall'; -import PaymentScreen from '@/components/palmistry/payment-screen/payment-screen'; -import DiscountScreen from '@/components/palmistry/discount-screen/discount-screen'; -import PremiumBundleScreen from '@/components/palmistry/premium-bundle-screen/premium-bundle-screen'; +import Progressbar from "@/components/palmistry/progress-bar/progress-bar"; +import PalmistryContainer from "@/components/palmistry/palmistry-container/palmistry-container"; +import useSteps, { Step } from "@/hooks/palmistry/use-steps"; +import StepWelcome from "@/components/palmistry/step-welcome/step-welcome"; +import StepGender from "@/components/palmistry/step-gender/step-gender"; +import StepBirthdate from "@/components/palmistry/step-birthdate/step-birthdate"; +import StepPalmsHold from "@/components/palmistry/step-palms-hold/step-palms-hold"; +import StepWish from "@/components/palmistry/step-wish/step-wish"; +import StepRelationshipStatus from "@/components/palmistry/step-relationship-status/step-relationship-status"; +import StepResonatedElement from "@/components/palmistry/step-resonated-element/step-resonated-element"; +import StepColorYouLike from "@/components/palmistry/step-color-you-like/step-color-you-like"; +import StepDecisions from "@/components/palmistry/step-decisions/step-decisions"; +import StepGuidancePlan from "@/components/palmistry/step-guidance-plan/step-guidance-plan"; +import StepPersonalStatement from "@/components/palmistry/step-personal-statement/step-personal-statement"; +import StepScanInfo from "@/components/palmistry/step-scan-info/step-scan-info"; +import StepUpload from "@/components/palmistry/step-upload/step-upload"; +import StepScanPhoto from "@/components/palmistry/step-scan-photo/step-scan-photo"; +import StepEmail from "@/components/palmistry/step-email/step-email"; +import StepSubscriptionPlan from "@/components/palmistry/step-subscription-plan/step-subscription-plan"; +import StepPaywall from "@/components/palmistry/step-paywall/step-paywall"; +import PaymentScreen from "@/components/palmistry/payment-screen/payment-screen"; +import DiscountScreen from "@/components/palmistry/discount-screen/discount-screen"; +import PremiumBundleScreen from "@/components/palmistry/premium-bundle-screen/premium-bundle-screen"; -const PalmistryContainerWrapper = (props: { children: React.ReactNode, currentStep: Step }) => { +const PalmistryContainerWrapper = (props: { + children: React.ReactNode; + currentStep: Step; +}) => { return ( {props.children} + > + {props.children} + ); }; @@ -48,106 +53,111 @@ const animationDuration = 0.2; export default function StepsManager() { const steps = useSteps(); const { pathname } = useLocation(); + const [searchParams] = useSearchParams(); const [modalIsOpen, setModalIsOpen] = React.useState(false); React.useLayoutEffect(() => { if (!steps.isInited) return; - - steps.goFirstUnpassedStep(); + steps.goFirstUnpassedStep(searchParams.toString()); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [steps.isInited]); const motionDivClassName = [ - 'steps-manager__motion-div', - modalIsOpen ? 'steps-manager__motion-div_no-transform' : '', + "steps-manager__motion-div", + modalIsOpen ? "steps-manager__motion-div_no-transform" : "", ]; - const nonSliderSteps = [ - Step.Payment, - Step.Discount, - Step.PremiumBundle, - ]; + const nonSliderSteps = [Step.Payment, Step.Discount, Step.PremiumBundle]; return (
- {steps.currentNumber >= steps.progressBarRange[0] && steps.currentNumber <= steps.progressBarRange[1] && ( - - )} + {steps.currentNumber >= steps.progressBarRange[0] && + steps.currentNumber <= steps.progressBarRange[1] && ( + + )}
{nonSliderSteps.includes(steps.current as Step) && ( - {steps.current === Step.Payment && } - {steps.current === Step.Discount && } - {steps.current === Step.PremiumBundle && } + {steps.current === Step.Payment && } + {steps.current === Step.Discount && } + {steps.current === Step.PremiumBundle && } )} {!nonSliderSteps.includes(steps.current as Step) && ( - + - {steps.current === Step.Welcome && } + {steps.current === Step.Welcome && } - {steps.current === Step.Gender && } + {steps.current === Step.Gender && } - {steps.current === Step.Birthdate && } + {steps.current === Step.Birthdate && } - {steps.current === Step.PalmsHold && } + {steps.current === Step.PalmsHold && } - {steps.current === Step.Wish && } + {steps.current === Step.Wish && } - {steps.current === Step.RelationshipStatus && } + {steps.current === Step.RelationshipStatus && ( + + )} - {steps.current === Step.ResonatedElement && } + {steps.current === Step.ResonatedElement && ( + + )} - {steps.current === Step.ColorYouLike && } + {steps.current === Step.ColorYouLike && } - {steps.current === Step.Decisions && } + {steps.current === Step.Decisions && } - {steps.current === Step.GuidancePlan && } + {steps.current === Step.GuidancePlan && } - {steps.current === Step.PersonalStatement && } + {steps.current === Step.PersonalStatement && ( + + )} - {steps.current === Step.ScanInfo && } + {steps.current === Step.ScanInfo && } - {steps.current === Step.Upload && } + {steps.current === Step.Upload && ( + + )} - {steps.current === Step.ScanPhoto && } + {steps.current === Step.ScanPhoto && } - {steps.current === Step.Email && } + {steps.current === Step.Email && } - {steps.current === Step.SubscriptionPlan && } + {steps.current === Step.SubscriptionPlan && ( + + )} - {steps.current === Step.Paywall && } + {steps.current === Step.Paywall && } diff --git a/src/hooks/palmistry/use-steps.ts b/src/hooks/palmistry/use-steps.ts index 467e0bb..520f38d 100644 --- a/src/hooks/palmistry/use-steps.ts +++ b/src/hooks/palmistry/use-steps.ts @@ -126,6 +126,7 @@ export default function useSteps() { setIsInited(true); setStoredValues(buildStoredValues(getFromStorage)); setFirstUnpassedStep(getFromStorage('firstUnpassedStep') as Step | null); + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const getStoredValue = (key: Step) => { @@ -168,13 +169,19 @@ export default function useSteps() { navigate(`/palmistry/${getNextStep(choice)}`); } - function goFirstUnpassedStep() { + function goFirstUnpassedStep(queryParameters = "") { if (!firstUnpassedStep) { - navigate(`/palmistry/${sortedList[0]}`); + navigate(`/palmistry/${sortedList[0]}?${queryParameters}`); return; } - navigate(`/palmistry/${firstUnpassedStep}`); + + + navigate(`/palmistry/${firstUnpassedStep}?${queryParameters}`, { + state: { + from: pathname, + }, + }); } function saveCurrent(value: string) {