Merge branch 'develop' into 'main'

Develop

See merge request witapp/aura-webapp!408

src/components/PalmistryV1/pages/Email/index.tsx

@@ -59,7 +59,7 @@ function Email() {
       EMetrics.YANDEX,
       EMetrics.FACEBOOK,
     ]);
-    metricService.reachGoal(EGoals.ENTER_EMAIL_PALMISTRY, [EMetrics.YANDEX]);
+    metricService.reachGoal(EGoals.ENTERED_EMAIL_PALMISTRY, [EMetrics.YANDEX]);
     await authorization(email, ESourceAuthorization["aura.palmistry.new"]);
   };
 

src/components/PalmistryV1/pages/FindHappiness/styles.module.scss

@@ -2,7 +2,7 @@
   width: 100%;
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
   gap: 10px;
 
@@ -10,7 +10,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    height: 52px;
+    max-height: 80px;
     padding: 12px 9px;
     border: solid 2px #3871c1;
     border-radius: 10px;

src/components/PalmistryV1/pages/Payment/index.tsx

@@ -1,16 +1,12 @@
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import PaymentInformation from "../../components/PaymentInformation";
 import styles from "./styles.module.scss";
-import { selectors } from "@/store";
+import { actions, selectors } from "@/store";
 import { getFormattedPrice } from "@/utils/price.utils";
 import Guarantees from "../../components/Guarantees";
 import Button from "../../components/Button";
 import { useEffect } from "react";
-import {
+import { useNavigate, useSearchParams } from "react-router-dom";
-  useNavigate,
-  useOutletContext,
-  useSearchParams,
-} from "react-router-dom";
 import routes from "@/routes";
 import { addCurrency, ELocalesPlacement } from "@/locales";
 import { useTranslations } from "@/hooks/translations";
@@ -20,27 +16,23 @@ import metricService, {
   EMetrics,
 } from "@/services/metric/metricService";
 
-interface IPaymentContext {
-  isShowPaymentModal: boolean;
-  setIsShowPaymentModal: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
 function Payment() {
+  const dispatch = useDispatch();
   const { translate } = useTranslations(ELocalesPlacement.PalmistryV1);
   const navigate = useNavigate();
   const activeProductFromStore = useSelector(selectors.selectActiveProduct);
   const currency = useSelector(selectors.selectCurrency);
   const trialPrice = activeProductFromStore?.trialPrice || 0;
   const fullPrice = activeProductFromStore?.price || 0;
-  const { isShowPaymentModal, setIsShowPaymentModal } =
+  const isShowPaymentModal = useSelector(
-    useOutletContext<IPaymentContext>();
+    selectors.selectPalmistryIsShowPaymentModalV1
-
+  );
   const [searchParams] = useSearchParams();
   const subscriptionStatus =
     searchParams.get("redirect_status") === "succeeded" ? "subscribed" : "lead";
 
   const showModal = () => {
-    setIsShowPaymentModal(true);
+    dispatch(actions.palmistry.setIsShowPaymentModalV1(true));
   };
 
   useEffect(() => {
@@ -49,11 +41,17 @@ function Payment() {
     metricService.reachGoal(EGoals.PAYMENT_SUCCESS_PALMISTRY, [
       EMetrics.YANDEX,
     ]);
+    if (activeProductFromStore) {
+      metricService.reachGoal(EGoals.PURCHASE, [EMetrics.FACEBOOK], {
+        currency: "USD",
+        value: ((activeProductFromStore.trialPrice || 100) / 100).toFixed(2),
+      });
+    }
     const timer = setTimeout(() => {
       navigate(routes.client.skipTrial());
     }, 1500);
     return () => clearTimeout(timer);
-  }, [navigate, subscriptionStatus]);
+  }, [activeProductFromStore, navigate, subscriptionStatus]);
 
   return (
     <>

src/components/pages/ABDesign/v1/pages/Onboarding/index.tsx

@@ -1,5 +1,5 @@
 import Title from "@/components/Title";
-import styles from "./styles.module.css";
+import styles from "./styles.module.scss";
 import { useCallback, useEffect, useRef, useState } from "react";
 import routes from "@/routes";
 import { useNavigate } from "react-router-dom";
@@ -16,6 +16,7 @@ import metricService, {
 } from "@/services/metric/metricService";
 import { useTranslations } from "@/hooks/translations";
 import { ELocalesPlacement } from "@/locales";
+import QuestionnaireGreenButton from "../../ui/GreenButton";
 
 function OnboardingPage() {
   const { translate } = useTranslations(ELocalesPlacement.V1);
@@ -25,6 +26,7 @@ function OnboardingPage() {
   const titleInterval = useRef<NodeJS.Timeout>();
   const classNameTimeOut = useRef<NodeJS.Timeout>();
   const [progress, setProgress] = useState(0);
+  const [isLoadingEnd, setIsLoadingEnd] = useState(false);
   const progressInterval = useRef<NodeJS.Timeout>();
   usePaywall({
     placementKey: EPlacementKeys["aura.placement.redesign.main"],
@@ -50,9 +52,12 @@ function OnboardingPage() {
 
   useEffect(() => {
     if (isVideoReady && progress >= 100) {
-      handleNext();
+      if (auraVideoTrial === "on") {
+        return setIsLoadingEnd(true);
+      }
+      return handleNext();
     }
-  }, [activeIndexTitle, handleNext, isVideoReady, progress]);
+  }, [activeIndexTitle, auraVideoTrial, handleNext, isVideoReady, progress]);
 
   useEffect(() => {
     setPeriodClassName("to-nontransparent");
@@ -115,19 +120,33 @@ function OnboardingPage() {
         </Title>
       )}
       <footer className={styles.footer}>
-        <div className={styles["progress-bar__text-container"]}>
+        <div
+          className={`${styles["progress-bar__text-container"]} ${
+            isLoadingEnd && styles.hide
+          }`}
+        >
           <Title variant="h2" className={styles["progress-bar__title"]}>
             {translate("/onboarding.loader_title")}
           </Title>
           <p className={styles["progress-bar__percentage"]}>{progress}%</p>
         </div>
         <ProgressBarLine
-          containerClassName={styles["progress-bar__container"]}
+          containerClassName={`${styles["progress-bar__container"]} ${
+            isLoadingEnd && styles.hide
+          }`}
           lineClassName={styles["progress-bar__line"]}
           lineColor={"#3750A8"}
           value={progress}
           delay={(onboardingTitles.length * 5000) / 100}
         />
+        {isLoadingEnd && (
+          <QuestionnaireGreenButton
+            className={styles.button}
+            onClick={handleNext}
+          >
+            Next
+          </QuestionnaireGreenButton>
+        )}
       </footer>
     </section>
   );

src/components/pages/ABDesign/v1/pages/Onboarding/styles.module.scss

@@ -6,7 +6,7 @@
   height: fit-content;
   min-height: 100vh;
   min-height: 100dvh;
-  background: #0F1323;
+  background: #0f1323;
   width: 100%;
   max-width: 460px;
   padding: 15px 40px calc(0dvh + 63px);
@@ -20,7 +20,7 @@
 }
 
 .title {
-  color: #BDEBFF;
+  color: #bdebff;
   text-align: center;
   max-width: 300px;
   font-size: 32px;
@@ -40,8 +40,13 @@
 }
 
 .progress-bar__container {
-  background-color: #ACDCFF;
+  background-color: #acdcff;
   height: 9px;
+  transition: opacity 1s;
+}
+
+.hide {
+  opacity: 0;
 }
 
 .progress-bar__text-container {
@@ -51,6 +56,7 @@
   justify-content: space-between;
   align-items: center;
   padding: 0 12px;
+  transition: opacity 1s;
 }
 
 .progress-bar__text-container * {
@@ -63,6 +69,7 @@
 }
 
 .footer {
+  position: relative;
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -84,3 +91,19 @@
     opacity: 0;
   }
 }
+
+.button {
+  position: absolute;
+  top: 0;
+  animation: appearance 1s forwards 1s;
+  opacity: 0;
+}
+
+@keyframes appearance {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

src/components/pages/ABDesign/v1/pages/TrialChoiceVideo/index.tsx

@@ -2,7 +2,7 @@ import styles from "./styles.module.scss";
 import { useEffect, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { actions, selectors } from "@/store";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useOutletContext } from "react-router-dom";
 import routes from "@/routes";
 import EmailsList from "@/components/EmailsList";
 import Header from "../../components/Header";
@@ -19,12 +19,12 @@ import metricService, {
   EMetrics,
   useMetricABFlags,
 } from "@/services/metric/metricService";
-import PersonalVideo from "../TrialPayment/components/PersonalVideo";
 import Toast from "../../components/Toast";
 import BlurComponent from "@/components/BlurComponent";
 import { useTranslations } from "@/hooks/translations";
 import { ELocalesPlacement } from "@/locales";
 import DiscountExpires from "../TrialPayment/components/DiscountExpires";
+import { IOutletContext } from "@/routerComponents/ABDesign/v1/LayoutABDesignV1";
 
 enum EDisplayOptionButton {
   "alwaysVisible" = "alwaysVisible",
@@ -44,7 +44,6 @@ function TrialChoiceVideoPage() {
   const [isDisabled, setIsDisabled] = useState(true);
   const [visibleToast, setVisibleToast] = useState(false);
   const [countUsers, setCountUsers] = useState(752);
-  const [isVisibleElements, setIsVisibleElements] = useState(false);
   const { width: pageWidth, elementRef: pageRef } = useDynamicSize({});
   const { gender } = useSelector(selectors.selectQuestionnaire);
   const { products, isLoading, currency, getText } = usePaywall({
@@ -52,31 +51,26 @@ function TrialChoiceVideoPage() {
     localesPlacement: ELocalesPlacement.V1,
   });
   const arrowLeft = useSelector(selectors.selectTrialChoiceArrowOptions)?.left;
-  const showElementsTimer = useRef<NodeJS.Timeout>();
+  const containerVideoRef = useRef<HTMLDivElement>(null);
+
+  const { containerVideoRef: videoRef, isVisibleElements } =
+    useOutletContext<IOutletContext>();
 
   const { flags } = useMetricABFlags();
   const isShowTimer = flags?.showTimerTrial?.[0] === "show";
 
   const { videoUrl } = useSelector(selectors.selectPersonalVideo);
 
+  useEffect(() => {
+    dispatch(actions.personalVideo.updateIsVideoPlaying(true));
+  }, [dispatch]);
+
   useEffect(() => {
     metricService.reachGoal(EGoals.AURA_TRIAL_CHOICE_PAGE_VISIT, [
       EMetrics.KLAVIYO,
     ]);
   }, []);
 
-  useEffect(() => {
-    return () => {
-      if (showElementsTimer.current) clearTimeout(showElementsTimer.current);
-    };
-  }, []);
-
-  const showElements = () => {
-    showElementsTimer.current = setTimeout(() => {
-      setIsVisibleElements(true);
-    }, 33_000);
-  };
-
   useEffect(() => {
     const randomDelay = getRandomArbitrary(3000, 5000);
     const countUsersTimeOut = setTimeout(() => {
@@ -111,6 +105,12 @@ function TrialChoiceVideoPage() {
     return () => clearTimeout(timeOut);
   }, [visibleToast]);
 
+  useEffect(() => {
+    if (!containerVideoRef.current || !videoRef.current) return;
+    containerVideoRef.current?.appendChild(videoRef.current);
+    videoRef.current.classList.add(styles["personal-video"]);
+  }, [videoRef]);
+
   return (
     <section
       className={`${styles.page} page`}
@@ -126,13 +126,15 @@ function TrialChoiceVideoPage() {
         height={180}
       />
       <Header className={styles.header} />
-      <PersonalVideo
+      <div ref={containerVideoRef} />
+      {/* <PersonalVideo
         gender={gender}
         url={"/trial-choice.MOV"}
         classNameContainer={styles["personal-video"]}
         isVisibleControllers={isVisibleElements}
         onVideoStart={showElements}
-      />
+      /> */}
+      {/* {containerVideoRef.current?.ELEMENT_NODE} */}
       {!isLoading && isVisibleElements && (
         <>
           {isShowTimer && (

src/components/pages/ABDesign/v1/pages/TrialChoiceVideo/styles.module.scss

@@ -156,6 +156,7 @@
   bottom: calc(0dvh + 16px);
   width: calc(100% - 84px) !important;
   max-width: 396px;
+  z-index: 999;
 }
 
 .gradient-blur {
@@ -195,6 +196,8 @@
   // position: fixed !important;
   // top: 0dvh;
   // z-index: 30;
+
+  display: block;
   margin-top: 32px !important;
   border-radius: 0 !important;
   background-image: url("/trial-choice-preview.png") !important;

src/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo/index.tsx

@@ -5,12 +5,16 @@ import Loader from "@/components/Loader";
 import PlayButton from "../../../../ui/PlayButton";
 import metricService, { EGoals } from "@/services/metric/metricService";
 import PlayPauseButton from "../../../../ui/PlayPauseButton";
+import { useDispatch, useSelector } from "react-redux";
+import { actions, selectors } from "@/store";
 
 interface IPersonalVideoProps {
   gender: string;
   url: string;
   classNameContainer?: string;
   isVisibleControllers?: boolean;
+  containerRef?: React.RefObject<HTMLDivElement>;
+  isAutoPlay?: boolean;
   onVideoStart?: () => void;
 }
 
@@ -20,12 +24,19 @@ const PersonalVideo = React.memo<IPersonalVideoProps>(
     gender,
     classNameContainer = "",
     isVisibleControllers = true,
+    containerRef,
+    isAutoPlay = true,
     onVideoStart,
   }) => {
-    const [isPlaying, setIsPlaying] = useState(false);
+    const dispatch = useDispatch();
+    const { isVideoPlaying } = useSelector(selectors.selectPersonalVideo);
     const [isStarted, setIsStarted] = useState(false);
     const [isError, setIsError] = useState(false);
 
+    const setIsPlaying = (isPlaying: boolean) => {
+      dispatch(actions.personalVideo.updateIsVideoPlaying(isPlaying));
+    };
+
     const onError = (error: unknown) => {
       if (!error) return;
       setIsError(true);
@@ -34,6 +45,7 @@ const PersonalVideo = React.memo<IPersonalVideoProps>(
 
     const onStart = () => {
       setIsStarted(true);
+      setIsError(false);
       if (onVideoStart) onVideoStart();
       metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_START);
     };
@@ -43,14 +55,19 @@ const PersonalVideo = React.memo<IPersonalVideoProps>(
     };
 
     const handlePlayPause = () => {
-      setIsPlaying((prev) => !prev);
+      setIsPlaying(!isVideoPlaying);
-      if (isPlaying) metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_USER_PLAY);
+      if (isVideoPlaying)
-      if (!isPlaying) metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_USER_STOP);
+        metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_USER_PLAY);
+      if (!isVideoPlaying)
+        metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_USER_STOP);
     };
 
     return (
-      <div className={`${styles.container} ${classNameContainer}`}>
+      <div
-        {!isPlaying && !isError && !isStarted && (
+        className={`${styles.container} ${classNameContainer}`}
+        ref={containerRef}
+      >
+        {!isVideoPlaying && !isError && !isStarted && (
           <Loader className={styles.loader} />
         )}
         {isError && (
@@ -68,22 +85,24 @@ const PersonalVideo = React.memo<IPersonalVideoProps>(
           controls={false}
           light={false}
           muted={false}
-          playing={isPlaying}
+          playing={isVideoPlaying}
           stopOnUnmount={true}
           width="100%"
           onStart={onStart}
-          onReady={() => setIsPlaying(true)}
+          onReady={() => setIsPlaying(isAutoPlay)}
           onEnded={onEnded}
           onError={onError}
           playsinline={true}
           height={"auto"}
           style={{
             aspectRatio: "16 / 9",
+            position: "relative",
+            zIndex: 1,
           }}
         />
         {!isError && isStarted && isVisibleControllers && (
           <PlayPauseButton
-            state={isPlaying ? "pause" : "play"}
+            state={isVideoPlaying ? "pause" : "play"}
             onClick={handlePlayPause}
             className={styles["play-pause-button"]}
           />

src/components/palmistry/AdditionalPurchases/pages/SkipTrial/index.tsx

@@ -17,10 +17,6 @@ import { Elements } from "@stripe/react-stripe-js";
 import CheckoutForm from "@/components/PaymentPage/methods/CheckoutForm";
 import { useSinglePayment } from "@/hooks/payment/useSinglePayment";
 import { useTranslations } from "@/hooks/translations";
-import metricService, {
-  EGoals,
-  EMetrics,
-} from "@/services/metric/metricService";
 
 const currentProductKey = "skip.trial.subscription.aura";
 const returnUrl = `${window.location.host}${routes.client.addConsultant()}`;
@@ -42,14 +38,6 @@ function SkipTrial() {
 
   const activeProductFromStore = useSelector(selectors.selectActiveProduct);
 
-  useEffect(() => {
-    if (!activeProductFromStore?.trialPrice) return;
-    metricService.reachGoal(EGoals.PURCHASE, [EMetrics.FACEBOOK], {
-      currency: "USD",
-      value: ((activeProductFromStore.trialPrice || 100) / 100).toFixed(2),
-    });
-  }, [activeProductFromStore?.trialPrice]);
-
   useEffect(() => {
     (async () => {
       const isPurchasedSkipTrial = await checkProductPurchased(

src/components/palmistry/step-email/step-email.tsx

@@ -47,12 +47,12 @@ export default function StepEmail() {
 
   const authorize = async () => {
     await authorization(email, ESourceAuthorization["aura.palmistry"]);
+    metricService.reachGoal(EGoals.ENTERED_EMAIL_PALMISTRY, [EMetrics.YANDEX]);
     metricService.reachGoal(EGoals.ENTERED_EMAIL, [
       EMetrics.KLAVIYO,
       EMetrics.YANDEX,
       EMetrics.FACEBOOK,
     ]);
-    metricService.reachGoal(EGoals.ENTER_EMAIL_PALMISTRY, [EMetrics.YANDEX]);
     metricService.reachGoal(EGoals.LEAD, [EMetrics.FACEBOOK]);
     setIsAuth(true);
   };

src/routerComponents/ABDesign/v1/LayoutABDesignV1/index.tsx

@@ -1,20 +1,66 @@
+import PersonalVideo from "@/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo";
 import styles from "./styles.module.css";
 import { useSchemeColorByElement } from "@/hooks/useSchemeColorByElement";
-import { useRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Outlet, useLocation } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+import { actions, selectors } from "@/store";
+import routes from "@/routes";
+
+export interface IOutletContext {
+  containerVideoRef: React.RefObject<HTMLDivElement>;
+  isVisibleElements: boolean;
+  setIsVisibleElements: (value: boolean) => void;
+  setShowElements: (value: () => void) => void;
+}
 
 function LayoutABDesignV1() {
+  const dispatch = useDispatch();
   const location = useLocation();
   const mainRef = useRef<HTMLDivElement>(null);
   useSchemeColorByElement(mainRef.current, "section.page, .page, section", [
     location,
   ]);
+  const [isVisibleElements, setIsVisibleElements] = useState(false);
+  const { gender } = useSelector(selectors.selectQuestionnaire);
+  const containerVideoRef = useRef<HTMLDivElement>(null);
+  const showElementsTimer = useRef<NodeJS.Timeout>();
+
+  const showElements = useCallback(() => {
+    showElementsTimer.current = setTimeout(() => {
+      setIsVisibleElements(true);
+    }, 33_000);
+  }, [setIsVisibleElements]);
+
+  useEffect(() => {
+    if (location.pathname !== routes.client.trialChoiceVideoV1()) {
+      dispatch(actions.personalVideo.updateIsVideoPlaying(false));
+    }
+  }, [dispatch, location.pathname]);
 
   return (
     <>
       <main className={`${styles.main} content`} ref={mainRef}>
         {/* <Suspense fallback={<LoadingPage />}> */}
-        <Outlet />
+        <PersonalVideo
+          gender={gender}
+          url={"/trial-choice.MOV"}
+          classNameContainer={
+            location.pathname !== routes.client.trialChoiceVideoV1()
+              ? styles["personal-video"]
+              : ""
+          }
+          isVisibleControllers={isVisibleElements}
+          onVideoStart={showElements}
+          containerRef={containerVideoRef}
+          isAutoPlay={location.pathname === routes.client.trialChoiceVideoV1()}
+        />
+        <Outlet
+          context={{
+            containerVideoRef,
+            isVisibleElements,
+          }}
+        />
         {/* </Suspense> */}
       </main>
     </>

src/routerComponents/ABDesign/v1/LayoutABDesignV1/styles.module.css

@@ -1,3 +1,7 @@
 .main {
     align-items: center;
+}
+
+.personal-video, .personal-video > * {
+    display: none;
 }

src/routerComponents/Palmistry/v1/CheckSubscriptionOutlet/index.tsx

@@ -0,0 +1,28 @@
+import { useAuth } from "@/auth";
+import routes from "@/routes";
+import { selectors } from "@/store";
+import { useSelector } from "react-redux";
+import { Navigate, Outlet } from "react-router-dom";
+
+interface ICheckSubscriptionOutletProps {
+  subscribedReturnUrl?: string;
+  unsubscribedReturnUrl?: string;
+}
+
+function CheckSubscriptionOutlet({
+  subscribedReturnUrl = routes.client.home(),
+  unsubscribedReturnUrl,
+}: ICheckSubscriptionOutletProps) {
+  const status = useSelector(selectors.selectStatus);
+  const { user } = useAuth();
+
+  if (user && status === "subscribed") {
+    return <Navigate to={subscribedReturnUrl} replace={true} />;
+  }
+  if (unsubscribedReturnUrl?.length) {
+    return <Navigate to={unsubscribedReturnUrl} replace={true} />;
+  }
+  return <Outlet />;
+}
+
+export default CheckSubscriptionOutlet;

src/routerComponents/Palmistry/v1/LayoutPalmistryV1/index.tsx

@@ -1,12 +1,12 @@
 import Header from "@/components/pages/ABDesign/v1/components/Header";
 import styles from "./styles.module.css";
 import { useSchemeColorByElement } from "@/hooks/useSchemeColorByElement";
-import { useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { Outlet, useLocation, useSearchParams } from "react-router-dom";
 import routes from "@/routes";
 import PaymentModal from "@/components/PalmistryV1/components/PaymentModal";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
-import { selectors } from "@/store";
+import { actions, selectors } from "@/store";
 
 const isBackButtonVisibleRoutes = [
   routes.client.palmistryV1Birthdate(),
@@ -27,6 +27,7 @@ const isBackButtonVisibleRoutes = [
 ];
 
 function LayoutPalmistryV1() {
+  const dispatch = useDispatch();
   const token = useSelector(selectors.selectToken);
   const activeProductFromStore = useSelector(selectors.selectActiveProduct);
   const location = useLocation();
@@ -34,7 +35,9 @@ function LayoutPalmistryV1() {
   useSchemeColorByElement(mainRef.current, "section.page, .page, section", [
     location,
   ]);
-  const [isShowPaymentModal, setIsShowPaymentModal] = useState(false);
+  const isShowPaymentModal = useSelector(
+    selectors.selectPalmistryIsShowPaymentModalV1
+  );
   const [searchParams] = useSearchParams();
   const subscriptionStatus =
     searchParams.get("redirect_status") === "succeeded" ? "subscribed" : "lead";
@@ -46,6 +49,11 @@ function LayoutPalmistryV1() {
     return false;
   };
 
+  useEffect(() => {
+    dispatch(actions.palmistry.setIsShowPaymentModalV1(false));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location]);
+
   return (
     <>
       <main className={`${styles.main} content`} ref={mainRef}>
@@ -56,7 +64,7 @@ function LayoutPalmistryV1() {
         />
         {/* <Suspense fallback={<LoadingPage />}> */}
         <section className={styles.page}>
-          <Outlet context={{ isShowPaymentModal, setIsShowPaymentModal }} />
+          <Outlet />
           {!!token.length && !!activeProductFromStore && (
             <PaymentModal
               className={

src/routerComponents/Palmistry/v1/index.tsx

@@ -25,6 +25,7 @@ import { useEffect } from "react";
 import { useDispatch } from "react-redux";
 import { actions } from "@/store";
 import GenderPalmistry from "@/components/PalmistryV1/pages/GenderPalmistry";
+import CheckSubscriptionOutlet from "./CheckSubscriptionOutlet";
 
 const removePrefix = (path: string) => path.replace(palmistryV1Prefix, "");
 
@@ -39,89 +40,97 @@ function PalmistryV1Routes() {
     <Routes>
       <Route element={<LayoutPalmistryV1 />}>
         <Route
-          path={removePrefix(routes.client.palmistryV1Gender())}
+          element={
-          element={<GenderPalmistry />}
+            <CheckSubscriptionOutlet
-        />
+              subscribedReturnUrl={routes.client.skipTrial()}
-        <Route
+            />
-          path={removePrefix(routes.client.palmistryV1Welcome())}
+          }
-          element={<FindHappiness />}
         >
-          <Route path="*" element={<FindHappiness />} />
-        </Route>
-        <Route element={<StepperLayoutPalmistryV1 />}>
           <Route
-            path={removePrefix(routes.client.palmistryV1Birthdate())}
+            path={removePrefix(routes.client.palmistryV1Gender())}
-            element={<Birthdate />}
+            element={<GenderPalmistry />}
           />
           <Route
-            path={removePrefix(routes.client.palmistryV1PalmsInformation())}
+            path={removePrefix(routes.client.palmistryV1Welcome())}
-            element={<PalmsInformation />}
+            element={<FindHappiness />}
-          />
-          <Route
-            path={removePrefix(routes.client.palmistryV1WhatAspects())}
-            element={<WhatAspects />}
-          />
-          <Route
-            path={removePrefix(routes.client.palmistryV1RelationshipStatus())}
-            element={<RelationshipStatus />}
-          />
-          <Route
-            path={removePrefix(routes.client.palmistryV1ElementResonates())}
-            element={<ElementResonates />}
-          />
-          <Route
-            path={removePrefix(routes.client.palmistryV1FavoriteColor())}
-            element={<FavoriteColor />}
-          />
-          <Route
-            path={removePrefix(routes.client.palmistryV1HeadOrHeart())}
-            element={<HeadOrHeart />}
-          />
-          <Route
-            path={removePrefix(routes.client.palmistryV1HeadOrHeartResult())}
-            element={<HeadOrHeartResult />}
-          />
-          <Route
-            path={removePrefix(routes.client.palmistryV1RelateFollowing())}
-            element={<RelateFollowing />}
           >
-            <Route path=":questionId" element={<RelateFollowing />} />
+            <Route path="*" element={<FindHappiness />} />
+          </Route>
+          <Route element={<StepperLayoutPalmistryV1 />}>
+            <Route
+              path={removePrefix(routes.client.palmistryV1Birthdate())}
+              element={<Birthdate />}
+            />
+            <Route
+              path={removePrefix(routes.client.palmistryV1PalmsInformation())}
+              element={<PalmsInformation />}
+            />
+            <Route
+              path={removePrefix(routes.client.palmistryV1WhatAspects())}
+              element={<WhatAspects />}
+            />
+            <Route
+              path={removePrefix(routes.client.palmistryV1RelationshipStatus())}
+              element={<RelationshipStatus />}
+            />
+            <Route
+              path={removePrefix(routes.client.palmistryV1ElementResonates())}
+              element={<ElementResonates />}
+            />
+            <Route
+              path={removePrefix(routes.client.palmistryV1FavoriteColor())}
+              element={<FavoriteColor />}
+            />
+            <Route
+              path={removePrefix(routes.client.palmistryV1HeadOrHeart())}
+              element={<HeadOrHeart />}
+            />
+            <Route
+              path={removePrefix(routes.client.palmistryV1HeadOrHeartResult())}
+              element={<HeadOrHeartResult />}
+            />
+            <Route
+              path={removePrefix(routes.client.palmistryV1RelateFollowing())}
+              element={<RelateFollowing />}
+            >
+              <Route path=":questionId" element={<RelateFollowing />} />
+            </Route>
+            <Route
+              path={removePrefix(routes.client.palmistryV1Email())}
+              element={<Email />}
+            />
           </Route>
           <Route
-            path={removePrefix(routes.client.palmistryV1Email())}
+            path={removePrefix(routes.client.palmistryV1LetScan())}
-            element={<Email />}
+            element={<LetScan />}
+          />
+          <Route
+            path={removePrefix(routes.client.palmistryV1ScanInstruction())}
+            element={<ScanInstruction />}
+          />
+          <Route
+            path={removePrefix(routes.client.palmistryV1Camera())}
+            element={<Camera />}
+          />
+          <Route
+            path={removePrefix(routes.client.palmistryV1TrialChoice())}
+            element={<TrialChoice />}
+          />
+          <Route
+            path={removePrefix(routes.client.palmistryV1TrialPayment())}
+            element={<TrialPayment />}
+          />
+          <Route
+            path={removePrefix(routes.client.palmistryV1Payment())}
+            element={<Payment />}
           />
         </Route>
         <Route
-          path={removePrefix(routes.client.palmistryV1LetScan())}
+          path={removePrefix(routes.client.palmistryV1ScannedPhoto())}
-          element={<LetScan />}
+          element={<ScannedPhoto />}
-        />
-        <Route
-          path={removePrefix(routes.client.palmistryV1ScanInstruction())}
-          element={<ScanInstruction />}
-        />
-        <Route
-          path={removePrefix(routes.client.palmistryV1Camera())}
-          element={<Camera />}
-        />
-        <Route
-          path={removePrefix(routes.client.palmistryV1TrialChoice())}
-          element={<TrialChoice />}
-        />
-        <Route
-          path={removePrefix(routes.client.palmistryV1TrialPayment())}
-          element={<TrialPayment />}
-        />
-        <Route
-          path={removePrefix(routes.client.palmistryV1Payment())}
-          element={<Payment />}
         />
+        <Route path="*" element={<NotFoundPage />} />
       </Route>
-      <Route
-        path={removePrefix(routes.client.palmistryV1ScannedPhoto())}
-        element={<ScannedPhoto />}
-      />
-      <Route path="*" element={<NotFoundPage />} />
     </Routes>
   );
 }

src/services/metric/metricService.ts

@@ -18,7 +18,7 @@ export enum EGoals {
     AURA_TRIAL_CHOICE_PAGE_VISIT = "AuraTrialChoicePageVisit",
     AURA_TRIAL_PAYMENT_PAGE_VISIT = "AuraTrialPaymentPageVisit",
     PAYMENT_SUCCESS_PALMISTRY = "PaymentSuccessPalmistry",
-    ENTER_EMAIL_PALMISTRY = "EnterEmailPalmistry"
+    ENTERED_EMAIL_PALMISTRY = "EnteredEmailPalmistry"
 }
 
 export enum EFlags {
@@ -77,21 +77,34 @@ const userParams = (parameters: Partial<IUserParams>) => {
 }
 
 const reachGoal = (goal: EGoals, usingMetrics = [EMetrics.KLAVIYO, EMetrics.YANDEX], options?: unknown) => {
-    if (!checkIsAvailableYandexMetric()) return;
-
-    if (usingMetrics.includes(EMetrics.YANDEX)) window.ym(metricCounterNumber, "reachGoal", goal);
     console.log("goal: ", goal);
 
-    if (!window.klaviyo) return console.error("Klaviyo.Metric not found");
+    if (usingMetrics.includes(EMetrics.YANDEX)) {
-    if (usingMetrics.includes(EMetrics.KLAVIYO)) window.klaviyo.push(['track', goal]);
+        if (typeof window.ym !== "function") {
-
+            console.error("Yandex.Metric not found")
-    if (!window.fbq) return console.error("Facebook.Metric not found");
+        } else {
-
+            window.ym(metricCounterNumber, "reachGoal", goal)
-    if (goal === EGoals.ENTERED_EMAIL) {
+            console.log("goalYM: ", goal);
-        if (usingMetrics.includes(EMetrics.FACEBOOK)) window.fbq('track', EGoals.LEAD, options);
+        }
     }
 
-    if (usingMetrics.includes(EMetrics.FACEBOOK)) window.fbq('track', goal, options);
+    if (usingMetrics.includes(EMetrics.KLAVIYO)) {
+        if (!window.klaviyo) {
+            console.error("Klaviyo.Metric not found")
+        } else {
+            window.klaviyo.push(['track', goal]);
+            console.log("goalKLAVIYO: ", goal);
+        }
+    }
+
+    if (usingMetrics.includes(EMetrics.FACEBOOK)) {
+        if (typeof window.fbq !== "function") {
+            console.error("Facebook.Metric not found")
+        } else {
+            window.fbq('track', goal === EGoals.ENTERED_EMAIL ? EGoals.LEAD : goal, options)
+            console.log("goalFB: ", goal);
+        }
+    }
 }
 
 type THitOptions = {

src/store/index.ts

@@ -78,6 +78,7 @@ import palmistry, {
   actions as palmistryActions,
   selectPalmistryFingers,
   selectPalmistryFromRedesign,
+  selectPalmistryIsShowPaymentModalV1,
   selectPalmistryLines,
   selectPalmistryPhoto
 } from "./palmistry";
@@ -150,6 +151,7 @@ export const selectors = {
   selectPersonalVideo,
   selectCurrency,
   selectPalmistryFromRedesign,
+  selectPalmistryIsShowPaymentModalV1,
   ...formSelectors,
 };
 

src/store/palmistry.ts

@@ -9,13 +9,15 @@ interface IPalmistry {
   fingers: IPalmistryFingerLocal[];
   photo: string;
   fromRedesign: boolean;
+  isShowPaymentModalV1: boolean;
 }
 
 const initialState: IPalmistry = {
   lines: [],
   fingers: [],
   photo: "",
-  fromRedesign: false
+  fromRedesign: false,
+  isShowPaymentModalV1: false,
 };
 
 const palmistrySlice = createSlice({
@@ -25,6 +27,9 @@ const palmistrySlice = createSlice({
     update(state, action: PayloadAction<Partial<IPalmistry>>) {
       return { ...state, ...action.payload };
     },
+    setIsShowPaymentModalV1(state, action: PayloadAction<boolean>) {
+      return { ...state, isShowPaymentModalV1: action.payload };
+    }
   },
   extraReducers: (builder) => builder.addCase("reset", () => initialState),
 });
@@ -46,4 +51,8 @@ export const selectPalmistryFromRedesign = createSelector(
   (state: { palmistry: IPalmistry }) => state.palmistry.fromRedesign,
   (palmistry) => palmistry
 );
+export const selectPalmistryIsShowPaymentModalV1 = createSelector(
+  (state: { palmistry: IPalmistry }) => state.palmistry.isShowPaymentModalV1,
+  (palmistry) => palmistry
+);
 export default palmistrySlice.reducer;

src/store/personalVideo.ts

@@ -6,24 +6,29 @@ interface IPersonalVideo {
     videoId: string
     videoUrl: string
     createdDate: number
+    isVideoPlaying: boolean
 }
 
 const initialState: IPersonalVideo = {
     generatingVideo: false,
     videoId: "",
     videoUrl: "",
-    createdDate: 0
+    createdDate: 0,
+    isVideoPlaying: false
 }
 
 const personalVideoSlice = createSlice({
     name: 'personalVideo',
     initialState,
     reducers: {
-        updateStatus(state, action: PayloadAction<Omit<IPersonalVideo, 'createdDate' | 'videoUrl'>>) {
+        updateStatus(state, action: PayloadAction<Pick<IPersonalVideo, 'generatingVideo' | 'videoId'>>) {
             return { ...state, ...action.payload, createdDate: new Date().getTime() }
         },
         updateUrl(state, action: PayloadAction<string>) {
             return { ...state, videoUrl: action.payload }
+        },
+        updateIsVideoPlaying(state, action: PayloadAction<boolean>) {
+            return { ...state, isVideoPlaying: action.payload }
         }
     },
     extraReducers: (builder) => builder.addCase('reset', () => initialState),