diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 829f5af..f8a3df2 100755 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -51,7 +51,6 @@ function Header({ const goBack = () => { if (location.pathname.includes("/palmistry")) { - console.log('asdfasdf') palmistrySteps.goBack(); return; } diff --git a/src/components/palmistry/payment-screen/payment-screen.tsx b/src/components/palmistry/payment-screen/payment-screen.tsx index 6619f07..69c055b 100644 --- a/src/components/palmistry/payment-screen/payment-screen.tsx +++ b/src/components/palmistry/payment-screen/payment-screen.tsx @@ -1,7 +1,10 @@ +import React from "react"; + import { useSelector } from "react-redux"; import './payment-screen.css'; +import useSteps, { Step } from '@/hooks/palmistry/use-steps'; import useTimer from '@/hooks/palmistry/use-timer'; import HeaderLogo from '@/components/palmistry/header-logo/header-logo'; import PaymentModal from "@/components/pages/TrialPayment/components/PaymentModal"; @@ -15,6 +18,14 @@ export default function PaymentScreen() { const time = useTimer(); const activeSubPlanFromStore = useSelector(selectors.selectActiveSubPlan); + const steps = useSteps(); + + React.useEffect(() => { + if (!activeSubPlanFromStore) { + steps.setFirstUnpassedStep(Step.SubscriptionPlan); + } + }, [activeSubPlanFromStore]); + const trialPrice = activeSubPlanFromStore?.trial?.price_cents || 0; const fullPrice = activeSubPlanFromStore?.price_cents || 0; diff --git a/src/components/palmistry/step-email/step-email.tsx b/src/components/palmistry/step-email/step-email.tsx index eea0997..aa343d4 100644 --- a/src/components/palmistry/step-email/step-email.tsx +++ b/src/components/palmistry/step-email/step-email.tsx @@ -66,10 +66,11 @@ export default function StepEmail() { }, token, }; - + const updatedUser = await api.updateUser(payload).catch((error) => console.log("Error: ", error)); if (updatedUser?.user) dispatch(actions.user.update(updatedUser.user)); + dispatch(actions.status.update("registred")); setIsLoading(false); diff --git a/src/components/palmistry/step-paywall/step-paywall.tsx b/src/components/palmistry/step-paywall/step-paywall.tsx index d4780d1..4d2dcd3 100644 --- a/src/components/palmistry/step-paywall/step-paywall.tsx +++ b/src/components/palmistry/step-paywall/step-paywall.tsx @@ -18,7 +18,7 @@ export default function StepPaywall() { }, [storedEmail]); const onNext = () => { - steps.saveToStorage('lastPassedStep', steps.current as Step); + steps.saveToStorage('firstUnpassedStep', Step.Payment); navigate('/palmistry/payment'); }; diff --git a/src/components/palmistry/step-subscription-plan/step-subscription-plan.tsx b/src/components/palmistry/step-subscription-plan/step-subscription-plan.tsx index 4768383..b8c99c1 100644 --- a/src/components/palmistry/step-subscription-plan/step-subscription-plan.tsx +++ b/src/components/palmistry/step-subscription-plan/step-subscription-plan.tsx @@ -1,7 +1,9 @@ import React from 'react'; import { useDispatch } from "react-redux"; import { useTranslation } from "react-i18next"; +import { useSelector } from "react-redux"; +import { selectors } from "@/store"; import useSteps, { Step } from '@/hooks/palmistry/use-steps'; import Button from '@/components/palmistry/button/button'; import EmailHeader from '@/components/palmistry/email-header/email-header'; @@ -20,6 +22,7 @@ export default function StepSubscriptionPlan() { const dispatch = useDispatch(); const api = useApi(); const { i18n } = useTranslation(); + const activeSubPlanFromStore = useSelector(selectors.selectActiveSubPlan); const storedEmail = steps.getStoredValue(Step.Email); @@ -29,6 +32,12 @@ export default function StepSubscriptionPlan() { const locale = i18n.language; + React.useEffect(() => { + if (activeSubPlanFromStore) { + setSubscriptionPlan(activeSubPlanFromStore.id); + } + }, [activeSubPlanFromStore]); + React.useEffect(() => { (async () => { const { sub_plans } = await api.getSubscriptionPlans({ locale }); @@ -52,18 +61,13 @@ export default function StepSubscriptionPlan() { React.useEffect(() => { if (subscriptionPlan) { - const targetSubPlan = subscriptionPlans.find( - (sub_plan) => sub_plan.id === subscriptionPlan - ); + const targetSubPlan = subscriptionPlans.find((sub_plan) => sub_plan.id === subscriptionPlan); + if (targetSubPlan) { dispatch(actions.payment.update({ activeSubPlan: targetSubPlan })); } } - }, [subscriptionPlan, subscriptionPlans]); - - React.useEffect(() => { - setSubscriptionPlan(steps.storedValue || bestPlanId); - }, [steps.storedValue]); + }, [subscriptionPlan]); React.useEffect(() => { setEmail(storedEmail || ''); diff --git a/src/hooks/palmistry/use-steps.ts b/src/hooks/palmistry/use-steps.ts index 5a25d70..0eb89e8 100644 --- a/src/hooks/palmistry/use-steps.ts +++ b/src/hooks/palmistry/use-steps.ts @@ -108,9 +108,9 @@ export default function useSteps() { const [isInited, setIsInited] = React.useState(false); const [storedValues, setStoredValues] = React.useState(buildStoredValues('')); - const [lastPassedStep, setLastPassedStep] = React.useState(null); + const [firstUnpassedStep, setFirstUnpassedStep] = React.useState(null); - const getFromStorage = (key: Step | 'lastPassedStep') => { + const getFromStorage = (key: Step | 'firstUnpassedStep') => { return localStorage.getItem(`palmistry.${key}`) || ''; }; @@ -121,14 +121,14 @@ export default function useSteps() { setIsInited(true); setStoredValues(buildStoredValues(getFromStorage)); - setLastPassedStep(getFromStorage('lastPassedStep') as Step | null); + setFirstUnpassedStep(getFromStorage('firstUnpassedStep') as Step | null); }, []); const getStoredValue = (key: Step) => { return storedValues[key] || ''; }; - function saveToStorage(key: Step | 'lastPassedStep', value: string) { + function saveToStorage(key: Step | 'firstUnpassedStep', value: string) { localStorage.setItem(`palmistry.${key}`, value); } @@ -153,29 +153,23 @@ export default function useSteps() { } function goNext(choice?: Choice) { - setLastPassedStep(current as Step); + const nextStep = getNextStep(); - if (currentNumber >= sortedList.indexOf(lastPassedStep as Step)) { - saveToStorage('lastPassedStep', current as Step); + setFirstUnpassedStep(nextStep as Step); + + if (sortedList.indexOf(nextStep) > sortedList.indexOf(firstUnpassedStep as Step)) { + saveToStorage('firstUnpassedStep', nextStep as Step); } navigate(`/palmistry/${getNextStep(choice)}`); } function goFirstUnpassedStep() { - if (lastPassedStep === null) { + if (!firstUnpassedStep) { navigate(`/palmistry/${sortedList[0]}`); return; } - const indexOfLastPassedStep = sortedList.indexOf(lastPassedStep); - - if (lastPassedStep === Step.Wish && currentNumber > indexOfLastPassedStep) { - navigate(`/palmistry/${Step.Wish}`); - return; - } - - const firstUnpassedStep = sortedList[indexOfLastPassedStep + 1]; navigate(`/palmistry/${firstUnpassedStep}`); } @@ -194,12 +188,13 @@ export default function useSteps() { currentNumber, isInvalid, storedValue: storedValues[current as Step], - lastPassedStep, + firstUnpassedStep, goBack, goNext, saveToStorage, saveCurrent, getStoredValue, goFirstUnpassedStep, + setFirstUnpassedStep, }; }