hide-lottie-from-yandex

hide lottie from webvisor, add reachGoals

src/components/EmailEnterPage/index.tsx

@@ -15,7 +15,7 @@ import { useAuthentication } from "@/hooks/authentication/use-authentication";
 import { ESourceAuthorization } from "@/api/resources/User";
 import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
 import { usePaywall } from "@/hooks/paywall/usePaywall";
-import metricService from "@/services/metric/metricService";
+import metricService, { EGoals } from "@/services/metric/metricService";
 
 interface IEmailEnterPage {
   redirectUrl?: string;
@@ -89,7 +89,7 @@ function EmailEnterPage({
 
   const handleClick = () => {
     authorize();
-    metricService.reachGoal("EnteredEmail");
+    metricService.reachGoal(EGoals.ENTERED_EMAIL);
   };
 
   const authorize = async () => {

src/components/PaymentPage/results/SuccessPage/index.tsx

@@ -7,7 +7,7 @@ import MainButton from "@/components/MainButton";
 import { useDispatch } from "react-redux";
 import { actions } from "@/store";
 import { useEffect } from "react";
-import metricService from "@/services/metric/metricService";
+import metricService, { EGoals } from "@/services/metric/metricService";
 
 function PaymentSuccessPage(): JSX.Element {
   const { t } = useTranslation();
@@ -20,7 +20,7 @@ function PaymentSuccessPage(): JSX.Element {
   };
 
   useEffect(() => {
-    metricService.reachGoal("PaymentSuccess");
+    metricService.reachGoal(EGoals.PAYMENT_SUCCESS);
   }, []);
 
   return (

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

@@ -36,7 +36,7 @@ function AllRightPage() {
       <div className={styles.circle}>
         {animationData && (
           <DotLottieReact
-            className={styles["lottie-animation"]}
+            className={`${styles["lottie-animation"]} ym-hide-content`}
             data={animationData}
             autoplay
             loop={false}

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

@@ -30,13 +30,9 @@ function AlmostTherePage() {
         isBackButtonVisible={false}
         classNameTitle={styles["header-title"]}
       />
-      <div className={styles["lottie-animation"]}>
+      <div className={`${styles["lottie-animation"]} ym-hide-content`}>
         {animationData && (
-          <DotLottieReact
+          <DotLottieReact data={animationData} autoplay loop={false} />
-            data={animationData}
-            autoplay
-            loop={false}
-          />
         )}
       </div>
       <div></div>

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

@@ -41,7 +41,7 @@ function BothPage() {
       <div className={styles["image-container"]}>
         {animationData && (
           <DotLottieReact
-            className={styles["lottie-animation"]}
+            className={`${styles["lottie-animation"]} ym-hide-content`}
             data={animationData}
             autoplay
             loop={false}

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

@@ -30,7 +30,7 @@ function EmailConfirmPage() {
       />
       <Header className={styles.header} />
       <div className={styles["top-section"]}>
-        <div className={styles["lottie-animation"]}>
+        <div className={`${styles["lottie-animation"]} ym-hide-content`}>
           {animationData && (
             <DotLottieReact data={animationData} autoplay loop={false} />
           )}

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

@@ -18,7 +18,7 @@ import { ESourceAuthorization } from "@/api/resources/User";
 import { useAuthentication } from "@/hooks/authentication/use-authentication";
 import { usePaywall } from "@/hooks/paywall/usePaywall";
 import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
-import metricService from "@/services/metric/metricService";
+import metricService, { EGoals } from "@/services/metric/metricService";
 import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 
 interface IEmailEnterPage {
@@ -99,7 +99,7 @@ function EmailEnterPage({
 
   const handleClick = () => {
     authorize();
-    metricService.reachGoal("EnteredEmail");
+    metricService.reachGoal(EGoals.ENTERED_EMAIL);
   };
 
   const authorize = async () => {

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

@@ -36,7 +36,7 @@ function GoalSetupPage() {
       <div className={styles["image-container"]}>
         {animationData && (
           <DotLottieReact
-            className={styles["lottie-animation"]}
+            className={`${styles["lottie-animation"]} ym-hide-content`}
             data={animationData}
             autoplay
             loop={false}

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

@@ -45,7 +45,7 @@ function NoBirthtimePage() {
       <div className={styles.ellipse}>
         {animationData && (
           <DotLottieReact
-            className={styles["lottie-animation"]}
+            className={`${styles["lottie-animation"]} ym-hide-content`}
             data={animationData}
             autoplay
             loop={false}

src/components/pages/ABDesign/v1/pages/NoBirthtime/styles.module.css

@@ -76,4 +76,8 @@
     top: 0;
     left: 0;
     z-index: 0;
+}
+
+.lottie-animation {
+    aspect-ratio: 1 / 1;
 }

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

@@ -33,13 +33,9 @@ function NotAlonePage() {
         isBackButtonVisible={false}
         classNameTitle={styles["header-title"]}
       />
-      <div className={styles["lottie-animation"]}>
+      <div className={`${styles["lottie-animation"]} ym-hide-content`}>
         {animationData && (
-          <DotLottieReact
+          <DotLottieReact data={animationData} autoplay loop={false} />
-            data={animationData}
-            autoplay
-            loop={false}
-          />
         )}
       </div>
       <div>

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

@@ -10,6 +10,7 @@ import { EPlacementKeys } from "@/api/resources/Paywall";
 import { usePersonalVideo } from "@/hooks/personalVideo/usePersonalVideo";
 import { useSelector } from "react-redux";
 import { selectors } from "@/store";
+import metricService, { EGoals } from "@/services/metric/metricService";
 
 function OnboardingPage() {
   const navigate = useNavigate();
@@ -21,7 +22,9 @@ function OnboardingPage() {
   const progressInterval = useRef<NodeJS.Timeout>();
   usePaywall({ placementKey: EPlacementKeys["aura.placement.redesign.main"] });
   const { isVideoReady } = usePersonalVideo();
-  const { createdDate } = useSelector(selectors.selectPersonalVideo);
+  const { createdDate, generatingVideo } = useSelector(
+    selectors.selectPersonalVideo
+  );
 
   const handleNext = useCallback(() => {
     navigate(routes.client.trialChoiceV1());
@@ -66,6 +69,8 @@ function OnboardingPage() {
   useEffect(() => {
     progressInterval.current = setInterval(() => {
       setProgress((prev) => {
+        if (prev === 99 && generatingVideo)
+          [metricService.reachGoal(EGoals.ROSE_LOADING_END)];
         if (prev >= 100) return prev;
         return prev + 1;
       });
@@ -73,7 +78,11 @@ function OnboardingPage() {
     return () => {
       if (progressInterval.current) clearInterval(progressInterval.current);
     };
-  }, [getProgressIntervalTiming]);
+  }, [generatingVideo, getProgressIntervalTiming]);
+
+  useEffect(() => {
+    metricService.reachGoal(EGoals.ROSE_LOADING_START);
+  }, []);
 
   return (
     <section className={`${styles.page} page`}>

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

@@ -45,7 +45,7 @@ function PartnerRightPlacePage() {
       <div className={styles.circle}>
         {animationData && (
           <DotLottieReact
-            className={styles["lottie-animation"]}
+            className={`${styles["lottie-animation"]} ym-hide-content`}
             data={animationData}
             autoResizeCanvas={true}
             autoplay

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

@@ -45,7 +45,7 @@ function PartnerThingPage() {
       <div className={styles.circle}>
         {animationData && (
           <DotLottieReact
-            className={styles["lottie-animation"]}
+            className={`${styles["lottie-animation"]} ym-hide-content`}
             data={animationData}
             autoplay
             loop={false}

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

@@ -45,7 +45,7 @@ function PartnerTotallyNormalPage() {
       <div className={styles.circle}>
         {animationData && (
           <DotLottieReact
-            className={styles["lottie-animation"]}
+            className={`${styles["lottie-animation"]} ym-hide-content`}
             data={animationData}
             autoplay
             loop={false}

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

@@ -49,7 +49,7 @@ function QuestionnaireIntermediatePage() {
         isBackButtonVisible={false}
         classNameTitle={styles["header-title"]}
       />
-      <div className={styles["lottie-animation"]}>
+      <div className={`${styles["lottie-animation"]} ym-hide-content`}>
         {animationData && (
           <DotLottieReact data={animationData} autoplay loop={false} />
         )}

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

@@ -29,7 +29,7 @@ function RelationshipAlmostTherePage() {
         classNameTitle={styles["header-title"]}
         isBackButtonVisible={false}
       />
-      <div className={styles["lottie-animation"]}>
+      <div className={`${styles["lottie-animation"]} ym-hide-content`}>
         {animationData && (
           <DotLottieReact data={animationData} autoplay loop={false} />
         )}

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

@@ -58,7 +58,7 @@ function Satisfied() {
         >
           {animationSun && (
             <DotLottieReact
-              className={styles["lottie-animation"]}
+              className={`${styles["lottie-animation"]} ym-hide-content`}
               data={animationSun}
               autoplay
               loop={false}
@@ -75,7 +75,7 @@ function Satisfied() {
         >
           {animationUmbrella && (
             <DotLottieReact
-              className={styles["lottie-animation"]}
+              className={`${styles["lottie-animation"]} ym-hide-content`}
               data={animationUmbrella}
               autoplay
               loop={false}

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

@@ -3,6 +3,7 @@ import ReactPlayer from "react-player";
 import styles from "./styles.module.css";
 import Loader from "@/components/Loader";
 import PlayButton from "../../../../ui/PlayButton";
+import metricService, { EGoals } from "@/services/metric/metricService";
 
 interface IPersonalVideoProps {
   gender: string;
@@ -19,8 +20,16 @@ const PersonalVideo = React.memo<IPersonalVideoProps>(({ url, gender }) => {
     setIsPlaying(false);
   };
 
+  const onStart = () => {
+    metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_START);
+  };
+
+  const onEnded = () => {
+    metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_END);
+  };
+
   return (
-    <div className={styles.container}>
+    <div className={`${styles.container} ym-hide-content`}>
       {!isPlaying && !isError && <Loader className={styles.loader} />}
       {isError && (
         <PlayButton
@@ -40,7 +49,9 @@ const PersonalVideo = React.memo<IPersonalVideoProps>(({ url, gender }) => {
         playing={isPlaying}
         stopOnUnmount={true}
         width="100%"
+        onStart={onStart}
         onReady={() => setIsPlaying(true)}
+        onEnded={onEnded}
         onError={onError}
         playsinline={true}
         height={"auto"}

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

@@ -41,7 +41,7 @@ function WithHeadPage() {
       <div className={styles["image-container"]}>
         {animationData && (
           <DotLottieReact
-            className={styles["lottie-animation"]}
+            className={`${styles["lottie-animation"]} ym-hide-content`}
             data={animationData}
             autoplay
             loop={false}

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

@@ -41,7 +41,7 @@ function WithHeartPage() {
       <div className={styles["image-container"]}>
         {animationData && (
           <DotLottieReact
-            className={styles["lottie-animation"]}
+            className={`${styles["lottie-animation"]} ym-hide-content`}
             data={animationData}
             autoplay
             loop={false}

src/components/pages/SinglePaymentPage/ResultPayment/SuccessPaymentPage/index.tsx

@@ -5,7 +5,7 @@ import MainButton from "@/components/MainButton";
 import { useNavigate } from "react-router-dom";
 import routes from "@/routes";
 import { useEffect } from "react";
-import metricService from "@/services/metric/metricService";
+import metricService, { EGoals } from "@/services/metric/metricService";
 
 function SuccessPaymentPage(): JSX.Element {
   const { t } = useTranslation();
@@ -16,7 +16,7 @@ function SuccessPaymentPage(): JSX.Element {
     : "The information has been sent to your email";
 
   useEffect(() => {
-    metricService.reachGoal("PaymentSuccess");
+    metricService.reachGoal(EGoals.PAYMENT_SUCCESS);
   }, []);
 
   return (

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

@@ -9,7 +9,7 @@ import Title from "@/components/Title";
 import Loader, { LoaderColor } from "@/components/Loader";
 import { useAuthentication } from "@/hooks/authentication/use-authentication";
 import { ESourceAuthorization } from "@/api/resources/User";
-import metricService from "@/services/metric/metricService";
+import metricService, { EGoals } from "@/services/metric/metricService";
 
 const emailRegex = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
 
@@ -44,7 +44,7 @@ export default function StepEmail() {
 
   const authorize = async () => {
     await authorization(email, ESourceAuthorization["aura.palmistry"]);
-    metricService.reachGoal("EnteredEmail");
+    metricService.reachGoal(EGoals.ENTERED_EMAIL);
     setIsAuth(true);
   };
 

src/hooks/authentication/use-authentication.ts

@@ -4,6 +4,7 @@ import { useAuth } from "@/auth";
 import { getClientTimezone } from "@/locales";
 import { getDateAsString } from "@/services/date";
 import { filterNullKeysOfObject } from "@/services/filter-object";
+import metricService, { EGoals } from "@/services/metric/metricService";
 import { actions, selectors } from "@/store";
 import moment from "moment";
 import { useCallback, useMemo, useState } from "react";
@@ -124,6 +125,7 @@ export const useAuthentication = () => {
             const { user } = await api.getUser({ token });
             if (userId?.length && !!window.ym && typeof window.ym === 'function') {
                 window.ym(95799066, 'userParams', {
+                    hasPersonalVideo: generatingVideo || false,
                     email: user.email,
                     UserID: userId
                 })
@@ -131,8 +133,11 @@ export const useAuthentication = () => {
             }
             signUp(token, user);
             setToken(token);
-            
+
             dispatch(actions.personalVideo.updateStatus({ generatingVideo: generatingVideo || false, videoId: videoId || "" }));
+            if (generatingVideo) {
+                metricService.reachGoal(EGoals.ROSE_VIDEO_CREATION_START)
+            }
             dispatch(actions.status.update("registred"));
         } catch (error) {
             setError((error as Error).message);

src/hooks/personalVideo/usePersonalVideo.ts

@@ -1,4 +1,5 @@
 import { useApi } from "@/api";
+import metricService, { EGoals } from "@/services/metric/metricService";
 import { actions, selectors } from "@/store";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
@@ -43,6 +44,7 @@ export const usePersonalVideo = () => {
             const video = await getTargetUserVideo();
             if (!video) return setIsVideoReady(true);
             if (video.videoUrl.length) {
+                metricService.reachGoal(EGoals.ROSE_VIDEO_CREATED)
                 dispatch(actions.personalVideo.updateUrl(video.videoUrl));
                 return setIsVideoReady(true);
             }

src/services/metric/metricService.ts

@@ -1,3 +1,16 @@
+export enum EGoals {
+    ENTERED_EMAIL = "EnteredEmail",
+    PAYMENT_SUCCESS = "PaymentSuccess",
+    ROSE_VIDEO_CREATION_START = 'RoseVideoCreationStart',
+    ROSE_LOADING_START = "RoseLoadingStart",
+    ROSE_VIDEO_CREATED = "RoseVideoCreated",
+    ROSE_LOADING_END = "RoseLoadingEnd",
+    ROSE_VIDEO_PLAY_START = "RoseVideoPlayStart",
+    ROSE_VIDEO_PLAY_END = "RoseVideoPlayEnd",
+    ROSE_VIDEO_PLAY_USER_STOP = "RoseVideoPlayUserStop",
+    ROSE_VIDEO_PLAY_USER_PLAY = "RoseVideoPlayUserPlay"
+}
+
 interface IUserParams {
     UserID: number;
     genderFrom: string;
@@ -21,7 +34,7 @@ const userParams = (parameters: Partial<IUserParams>) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
 }
 
-const reachGoal = (goal: "EnteredEmail" | "PaymentSuccess") => {
+const reachGoal = (goal: EGoals) => {
     if (typeof window.ym !== "function") return console.error("Yandex.Metric not found");
 
     window.ym(metricCounterNumber, "reachGoal", goal)