gofnnp/w-aura
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'AW-42-UTMParameters' into 'develop'

Browse Source 
AW-42-UTMParameters

See merge request witapp/aura-webapp!104
This commit is contained in:
Daniil Chemerkin 2024-04-22 22:46:11 +00:00
commit 73d34b7bfd
2 changed files with 93 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
src/components/palmistry/steps-manager/steps-manager.tsx
View File

@ -1,34 +1,37 @@
import React from 'react'; import React from "react";
import { AnimatePresence, motion } from 'framer-motion'; import { AnimatePresence, motion } from "framer-motion";
import { useLocation } from 'react-router-dom'; 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 Progressbar from "@/components/palmistry/progress-bar/progress-bar";
import PalmistryContainer from '@/components/palmistry/palmistry-container/palmistry-container'; import PalmistryContainer from "@/components/palmistry/palmistry-container/palmistry-container";
import useSteps, { Step } from '@/hooks/palmistry/use-steps'; import useSteps, { Step } from "@/hooks/palmistry/use-steps";
import StepWelcome from '@/components/palmistry/step-welcome/step-welcome'; import StepWelcome from "@/components/palmistry/step-welcome/step-welcome";
import StepGender from '@/components/palmistry/step-gender/step-gender'; import StepGender from "@/components/palmistry/step-gender/step-gender";
import StepBirthdate from '@/components/palmistry/step-birthdate/step-birthdate'; import StepBirthdate from "@/components/palmistry/step-birthdate/step-birthdate";
import StepPalmsHold from '@/components/palmistry/step-palms-hold/step-palms-hold'; import StepPalmsHold from "@/components/palmistry/step-palms-hold/step-palms-hold";
import StepWish from '@/components/palmistry/step-wish/step-wish'; import StepWish from "@/components/palmistry/step-wish/step-wish";
import StepRelationshipStatus from '@/components/palmistry/step-relationship-status/step-relationship-status'; import StepRelationshipStatus from "@/components/palmistry/step-relationship-status/step-relationship-status";
import StepResonatedElement from '@/components/palmistry/step-resonated-element/step-resonated-element'; 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 StepColorYouLike from "@/components/palmistry/step-color-you-like/step-color-you-like";
import StepDecisions from '@/components/palmistry/step-decisions/step-decisions'; import StepDecisions from "@/components/palmistry/step-decisions/step-decisions";
import StepGuidancePlan from '@/components/palmistry/step-guidance-plan/step-guidance-plan'; import StepGuidancePlan from "@/components/palmistry/step-guidance-plan/step-guidance-plan";
import StepPersonalStatement from '@/components/palmistry/step-personal-statement/step-personal-statement'; import StepPersonalStatement from "@/components/palmistry/step-personal-statement/step-personal-statement";
import StepScanInfo from '@/components/palmistry/step-scan-info/step-scan-info'; import StepScanInfo from "@/components/palmistry/step-scan-info/step-scan-info";
import StepUpload from '@/components/palmistry/step-upload/step-upload'; import StepUpload from "@/components/palmistry/step-upload/step-upload";
import StepScanPhoto from '@/components/palmistry/step-scan-photo/step-scan-photo'; import StepScanPhoto from "@/components/palmistry/step-scan-photo/step-scan-photo";
import StepEmail from '@/components/palmistry/step-email/step-email'; import StepEmail from "@/components/palmistry/step-email/step-email";
import StepSubscriptionPlan from '@/components/palmistry/step-subscription-plan/step-subscription-plan'; import StepSubscriptionPlan from "@/components/palmistry/step-subscription-plan/step-subscription-plan";
import StepPaywall from '@/components/palmistry/step-paywall/step-paywall'; import StepPaywall from "@/components/palmistry/step-paywall/step-paywall";
import PaymentScreen from '@/components/palmistry/payment-screen/payment-screen'; import PaymentScreen from "@/components/palmistry/payment-screen/payment-screen";
import DiscountScreen from '@/components/palmistry/discount-screen/discount-screen'; import DiscountScreen from "@/components/palmistry/discount-screen/discount-screen";
import PremiumBundleScreen from '@/components/palmistry/premium-bundle-screen/premium-bundle-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 ( return (
<PalmistryContainer <PalmistryContainer
singleQuestion={[ singleQuestion={[
@ -39,7 +42,9 @@ const PalmistryContainerWrapper = (props: { children: React.ReactNode, currentSt
Step.Decisions, Step.Decisions,
].includes(props.currentStep)} ].includes(props.currentStep)}
type={props.currentStep} type={props.currentStep}
>{props.children}</PalmistryContainer> >
{props.children}
</PalmistryContainer>
); );
}; };
@ -48,106 +53,111 @@ const animationDuration = 0.2;
export default function StepsManager() { export default function StepsManager() {
const steps = useSteps(); const steps = useSteps();
const { pathname } = useLocation(); const { pathname } = useLocation();
const [searchParams] = useSearchParams();
const [modalIsOpen, setModalIsOpen] = React.useState(false); const [modalIsOpen, setModalIsOpen] = React.useState(false);
React.useLayoutEffect(() => { React.useLayoutEffect(() => {
if (!steps.isInited) return; if (!steps.isInited) return;
steps.goFirstUnpassedStep(searchParams.toString());
steps.goFirstUnpassedStep(); // eslint-disable-next-line react-hooks/exhaustive-deps
}, [steps.isInited]); }, [steps.isInited]);
const motionDivClassName = [ const motionDivClassName = [
'steps-manager__motion-div', "steps-manager__motion-div",
modalIsOpen ? 'steps-manager__motion-div_no-transform' : '', modalIsOpen ? "steps-manager__motion-div_no-transform" : "",
]; ];
const nonSliderSteps = [ const nonSliderSteps = [Step.Payment, Step.Discount, Step.PremiumBundle];
Step.Payment,
Step.Discount,
Step.PremiumBundle,
];
return ( return (
<div className="steps-manager"> <div className="steps-manager">
{steps.currentNumber >= steps.progressBarRange[0] && steps.currentNumber <= steps.progressBarRange[1] && ( {steps.currentNumber >= steps.progressBarRange[0] &&
<Progressbar step={steps.currentNumber}/> steps.currentNumber <= steps.progressBarRange[1] && (
)} <Progressbar step={steps.currentNumber} />
)}
<main className="steps-manager__main"> <main className="steps-manager__main">
{nonSliderSteps.includes(steps.current as Step) && ( {nonSliderSteps.includes(steps.current as Step) && (
<PalmistryContainerWrapper currentStep={steps.current as Step}> <PalmistryContainerWrapper currentStep={steps.current as Step}>
{steps.current === Step.Payment && <PaymentScreen/>} {steps.current === Step.Payment && <PaymentScreen />}
{steps.current === Step.Discount && <DiscountScreen/>} {steps.current === Step.Discount && <DiscountScreen />}
{steps.current === Step.PremiumBundle && <PremiumBundleScreen/>} {steps.current === Step.PremiumBundle && <PremiumBundleScreen />}
</PalmistryContainerWrapper> </PalmistryContainerWrapper>
)} )}
{!nonSliderSteps.includes(steps.current as Step) && ( {!nonSliderSteps.includes(steps.current as Step) && (
<AnimatePresence <AnimatePresence mode="wait" initial={false}>
mode="wait"
initial={false}
>
<motion.div <motion.div
className={motionDivClassName.join(' ')} className={motionDivClassName.join(" ")}
key={pathname} key={pathname}
initial="pageInitial" initial="pageInitial"
animate="pageAnimate" animate="pageAnimate"
exit="pageExit" exit="pageExit"
variants={{ variants={{
pageInitial: { pageInitial: {
transform: 'translateX(100vw)', transform: "translateX(100vw)",
width: '100%', width: "100%",
}, },
pageAnimate: { pageAnimate: {
transform: 'translateX(0)', transform: "translateX(0)",
width: '100%', width: "100%",
}, },
pageExit: { pageExit: {
transform: 'translateX(-200vw)', transform: "translateX(-200vw)",
opacity: 0, opacity: 0,
width: '100%', width: "100%",
}, },
}} }}
transition={{ transition={{
duration: animationDuration, duration: animationDuration,
ease: 'linear', ease: "linear",
}} }}
> >
<PalmistryContainerWrapper currentStep={steps.current as Step}> <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> </PalmistryContainerWrapper>
</motion.div> </motion.div>
</AnimatePresence> </AnimatePresence>

13
src/hooks/palmistry/use-steps.ts
View File

@ -126,6 +126,7 @@ export default function useSteps() {
setIsInited(true); setIsInited(true);
setStoredValues(buildStoredValues(getFromStorage)); setStoredValues(buildStoredValues(getFromStorage));
setFirstUnpassedStep(getFromStorage('firstUnpassedStep') as Step | null); setFirstUnpassedStep(getFromStorage('firstUnpassedStep') as Step | null);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
const getStoredValue = (key: Step) => { const getStoredValue = (key: Step) => {
@ -168,13 +169,19 @@ export default function useSteps() {
navigate(`/palmistry/${getNextStep(choice)}`); navigate(`/palmistry/${getNextStep(choice)}`);
} }
function goFirstUnpassedStep() { function goFirstUnpassedStep(queryParameters = "") {
if (!firstUnpassedStep) { if (!firstUnpassedStep) {
navigate(`/palmistry/${sortedList[0]}`); navigate(`/palmistry/${sortedList[0]}?${queryParameters}`);
return; return;
} }
navigate(`/palmistry/${firstUnpassedStep}`);
navigate(`/palmistry/${firstUnpassedStep}?${queryParameters}`, {
state: {
from: pathname,
},
});
} }
function saveCurrent(value: string) { function saveCurrent(value: string) {