AW-42-UTMParameters
This commit is contained in:
Денис Катаев
Daniil Chemerkin
parent
c9487bb2db
commit
b5ab8415ac
@ -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 (
|
||||
<PalmistryContainer
|
||||
singleQuestion={[
|
||||
@ -39,7 +42,9 @@ const PalmistryContainerWrapper = (props: { children: React.ReactNode, currentSt
|
||||
Step.Decisions,
|
||||
].includes(props.currentStep)}
|
||||
type={props.currentStep}
|
||||
>{props.children}</PalmistryContainer>
|
||||
>
|
||||
{props.children}
|
||||
</PalmistryContainer>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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 (
|
||||
<div className="steps-manager">
|
||||
{steps.currentNumber >= steps.progressBarRange[0] && steps.currentNumber <= steps.progressBarRange[1] && (
|
||||
<Progressbar step={steps.currentNumber}/>
|
||||
)}
|
||||
{steps.currentNumber >= steps.progressBarRange[0] &&
|
||||
steps.currentNumber <= steps.progressBarRange[1] && (
|
||||
<Progressbar step={steps.currentNumber} />
|
||||
)}
|
||||
|
||||
<main className="steps-manager__main">
|
||||
{nonSliderSteps.includes(steps.current as Step) && (
|
||||
<PalmistryContainerWrapper currentStep={steps.current as Step}>
|
||||
{steps.current === Step.Payment && <PaymentScreen/>}
|
||||
{steps.current === Step.Discount && <DiscountScreen/>}
|
||||
{steps.current === Step.PremiumBundle && <PremiumBundleScreen/>}
|
||||
{steps.current === Step.Payment && <PaymentScreen />}
|
||||
{steps.current === Step.Discount && <DiscountScreen />}
|
||||
{steps.current === Step.PremiumBundle && <PremiumBundleScreen />}
|
||||
</PalmistryContainerWrapper>
|
||||
)}
|
||||
|
||||
{!nonSliderSteps.includes(steps.current as Step) && (
|
||||
<AnimatePresence
|
||||
mode="wait"
|
||||
initial={false}
|
||||
>
|
||||
<AnimatePresence mode="wait" initial={false}>
|
||||
<motion.div
|
||||
className={motionDivClassName.join(' ')}
|
||||
className={motionDivClassName.join(" ")}
|
||||
key={pathname}
|
||||
initial="pageInitial"
|
||||
animate="pageAnimate"
|
||||
exit="pageExit"
|
||||
variants={{
|
||||
pageInitial: {
|
||||
transform: 'translateX(100vw)',
|
||||
width: '100%',
|
||||
transform: "translateX(100vw)",
|
||||
width: "100%",
|
||||
},
|
||||
pageAnimate: {
|
||||
transform: 'translateX(0)',
|
||||
width: '100%',
|
||||
transform: "translateX(0)",
|
||||
width: "100%",
|
||||
},
|
||||
pageExit: {
|
||||
transform: 'translateX(-200vw)',
|
||||
transform: "translateX(-200vw)",
|
||||
opacity: 0,
|
||||
width: '100%',
|
||||
width: "100%",
|
||||
},
|
||||
}}
|
||||
transition={{
|
||||
duration: animationDuration,
|
||||
ease: 'linear',
|
||||
ease: "linear",
|
||||
}}
|
||||
>
|
||||
<PalmistryContainerWrapper currentStep={steps.current as Step}>
|
||||
{steps.current === Step.Welcome && <StepWelcome/>}
|
||||
{steps.current === Step.Welcome && <StepWelcome />}
|
||||
|
||||
{steps.current === Step.Gender && <StepGender/>}
|
||||
{steps.current === Step.Gender && <StepGender />}
|
||||
|
||||
{steps.current === Step.Birthdate && <StepBirthdate/>}
|
||||
{steps.current === Step.Birthdate && <StepBirthdate />}
|
||||
|
||||
{steps.current === Step.PalmsHold && <StepPalmsHold/>}
|
||||
{steps.current === Step.PalmsHold && <StepPalmsHold />}
|
||||
|
||||
{steps.current === Step.Wish && <StepWish/>}
|
||||
{steps.current === Step.Wish && <StepWish />}
|
||||
|
||||
{steps.current === Step.RelationshipStatus && <StepRelationshipStatus/>}
|
||||
{steps.current === Step.RelationshipStatus && (
|
||||
<StepRelationshipStatus />
|
||||
)}
|
||||
|
||||
{steps.current === Step.ResonatedElement && <StepResonatedElement/>}
|
||||
{steps.current === Step.ResonatedElement && (
|
||||
<StepResonatedElement />
|
||||
)}
|
||||
|
||||
{steps.current === Step.ColorYouLike && <StepColorYouLike/>}
|
||||
{steps.current === Step.ColorYouLike && <StepColorYouLike />}
|
||||
|
||||
{steps.current === Step.Decisions && <StepDecisions/>}
|
||||
{steps.current === Step.Decisions && <StepDecisions />}
|
||||
|
||||
{steps.current === Step.GuidancePlan && <StepGuidancePlan/>}
|
||||
{steps.current === Step.GuidancePlan && <StepGuidancePlan />}
|
||||
|
||||
{steps.current === Step.PersonalStatement && <StepPersonalStatement/>}
|
||||
{steps.current === Step.PersonalStatement && (
|
||||
<StepPersonalStatement />
|
||||
)}
|
||||
|
||||
{steps.current === Step.ScanInfo && <StepScanInfo/>}
|
||||
{steps.current === Step.ScanInfo && <StepScanInfo />}
|
||||
|
||||
{steps.current === Step.Upload && <StepUpload onOpenModal={setModalIsOpen}/>}
|
||||
{steps.current === Step.Upload && (
|
||||
<StepUpload onOpenModal={setModalIsOpen} />
|
||||
)}
|
||||
|
||||
{steps.current === Step.ScanPhoto && <StepScanPhoto/>}
|
||||
{steps.current === Step.ScanPhoto && <StepScanPhoto />}
|
||||
|
||||
{steps.current === Step.Email && <StepEmail/>}
|
||||
{steps.current === Step.Email && <StepEmail />}
|
||||
|
||||
{steps.current === Step.SubscriptionPlan && <StepSubscriptionPlan/>}
|
||||
{steps.current === Step.SubscriptionPlan && (
|
||||
<StepSubscriptionPlan />
|
||||
)}
|
||||
|
||||
{steps.current === Step.Paywall && <StepPaywall/>}
|
||||
{steps.current === Step.Paywall && <StepPaywall />}
|
||||
</PalmistryContainerWrapper>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
|
||||
@ -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) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user