Improve work with subscription plans

src/components/Header/index.tsx

@@ -51,7 +51,6 @@ function Header({
 
   const goBack = () => {
     if (location.pathname.includes("/palmistry")) {
-      console.log('asdfasdf')
       palmistrySteps.goBack();
       return;
     }

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;
 

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);

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');
   };
 

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 || '');

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<Step | null>(null);
+  const [firstUnpassedStep, setFirstUnpassedStep] = React.useState<Step | null>(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,
   };
 }