From 0599200c4ae8614f50653ae9ea847c66000ef8db Mon Sep 17 00:00:00 2001
From: Daniil Chemerkin <dev.daminik00@gmail.com>
Date: Tue, 9 Jul 2024 17:57:51 +0000
Subject: [PATCH] AW-136-personal-video-to-trial-page

---
 index.html                                    | 64 +++++++++++++++++++
 src/components/App/index.tsx                  |  7 +-
 .../authentication/use-authentication.ts      |  6 +-
 src/services/metric/metricService.ts          | 49 ++++++++++----
 src/types.ts                                  |  2 +
 5 files changed, 110 insertions(+), 18 deletions(-)
diff --git a/index.html b/index.html
index 1da3385..640aea6 100755
--- a/index.html
+++ b/index.html
@@ -44,6 +44,70 @@
     </style>
   </head>
   <body>
+    <!-- Klaviyo Metric -->
+    <script type="module">
+      const klaviyoKeys = {
+        develop: "RM7w5r",
+        production: "Si7Jff",
+      };
+      const script = document.createElement("script");
+      script.src = `https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=${
+        klaviyoKeys[import.meta.env.MODE]
+      }`;
+      script.type = "text/javascript";
+      script.async = "";
+      document.head.appendChild(script);
+    </script>
+    <script>
+      !(function () {
+        if (!window.klaviyo) {
+          window._klOnsite = window._klOnsite || [];
+          try {
+            window.klaviyo = new Proxy(
+              {},
+              {
+                get: function (n, i) {
+                  return "push" === i
+                    ? function () {
+                        var n;
+                        (n = window._klOnsite).push.apply(n, arguments);
+                      }
+                    : function () {
+                        for (
+                          var n = arguments.length, o = new Array(n), w = 0;
+                          w < n;
+                          w++
+                        )
+                          o[w] = arguments[w];
+                        var t =
+                            "function" == typeof o[o.length - 1]
+                              ? o.pop()
+                              : void 0,
+                          e = new Promise(function (n) {
+                            window._klOnsite.push(
+                              [i].concat(o, [
+                                function (i) {
+                                  t && t(i), n(i);
+                                },
+                              ])
+                            );
+                          });
+                        return e;
+                      };
+                },
+              }
+            );
+          } catch (n) {
+            (window.klaviyo = window.klaviyo || []),
+              (window.klaviyo.push = function () {
+                var n;
+                (n = window._klOnsite).push.apply(n, arguments);
+              });
+          }
+        }
+      })();
+    </script>
+    <!-- Klaviyo Metric -->
     <!-- Yandex.Metrika counter -->
     <script type="text/javascript">
       (function (m, e, t, r, i, k, a) {
diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
index cccd30f..2368625 100755
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@@ -121,7 +121,7 @@ import LoadingPage from "../pages/LoadingPage";
 import { EProductKeys, productUrls } from "@/data/products";
 import SinglePaymentPage from "../pages/SinglePaymentPage";
 import ABDesignV1Routes from "@/routerComponents/ABDesign/v1";
-import metricService from "@/services/metric/metricService";
+import metricService, {EGoals} from "@/services/metric/metricService";
 
 const isProduction = import.meta.env.MODE === "production";
 
@@ -164,6 +164,11 @@ function App(): JSX.Element {
   const birthPlace = user?.profile?.birthplace || birthPlaceFromStore;
 
   useEffect(() => {
+      if (location.pathname.includes("v1/trial-choice")) {
+          metricService.reachGoal(EGoals.AURA_TRIAL_CHOICE_PAGE_VISIT, true)
+      } else if (location.pathname.includes("v1/trial-payment")) {
+          metricService.reachGoal(EGoals.AURA_TRIAL_PAYMENT_PAGE_VISIT, true)
+      }
     metricService.hit()
   }, [location]);
 
diff --git a/src/hooks/authentication/use-authentication.ts b/src/hooks/authentication/use-authentication.ts
index 7dc462e..650bab4 100644
--- a/src/hooks/authentication/use-authentication.ts
+++ b/src/hooks/authentication/use-authentication.ts
@@ -125,13 +125,13 @@ export const useAuthentication = () => {
             const payload = getAuthorizationPayload(email, source);
             const { token, userId, generatingVideo, videoId } = await api.authorization(payload);
             const { user } = await api.getUser({ token });
-            if (userId?.length && !!window.ym && typeof window.ym === 'function') {
-                window.ym(95799066, 'userParams', {
+            if (userId?.length) {
+                metricService.userParams({
                     hasPersonalVideo: generatingVideo || false,
                     email: user.email,
                     UserID: userId
                 })
-                window.ym(95799066, 'setUserID', userId);
+                metricService.setUserID(userId);
             }
             signUp(token, user);
             setToken(token);
diff --git a/src/services/metric/metricService.ts b/src/services/metric/metricService.ts
index 7de7065..729bb7a 100644
--- a/src/services/metric/metricService.ts
+++ b/src/services/metric/metricService.ts
@@ -10,38 +10,58 @@ export enum EGoals {
     ROSE_VIDEO_PLAY_USER_STOP = "RoseVideoPlayUserStop",
     ROSE_VIDEO_PLAY_USER_PLAY = "RoseVideoPlayUserPlay",
     AURA_PAYMENT_METHODS_OPENED = "AuraPaymentMethodsOpened",
-    AURA_SELECT_TRIAL = "AuraSelectTrial"
+    AURA_SELECT_TRIAL = "AuraSelectTrial",
+    AURA_TRIAL_CHOICE_PAGE_VISIT = "AuraTrialChoicePageVisit",
+    AURA_TRIAL_PAYMENT_PAGE_VISIT = "AuraTrialPaymentPageVisit"
 }
 
 interface IUserParams {
-    UserID: number;
+    UserID: number | string;
     genderFrom: string;
     email: string;
+    hasPersonalVideo: boolean;
 }
 
 const environments = import.meta.env
 const metricCounterNumber = Number(environments.AURA_YANDEX_COUNTER_NUMBER)
 
-const setUserID = (userId: string) => {
-    if (typeof window.ym !== "function") return console.error("Yandex.Metric not found");
+const checkIsAvailableYandexMetric = () => {
+    if (typeof window.ym !== "function") {
+        console.error("Yandex.Metric not found")
+        return false
+    }
+    return true
+}
 
+const setUserID = (userId: string) => {
+    if (!checkIsAvailableYandexMetric()) return;
     window.ym(metricCounterNumber, "setUserID", userId)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+
+    if (!window.klaviyo) return console.error("Klaviyo.Metric not found");
+    window.klaviyo.push(['identify', userId]);
 }
 
 const userParams = (parameters: Partial<IUserParams>) => {
-    if (typeof window.ym !== "function") return console.error("Yandex.Metric not found");
-
+    if (!checkIsAvailableYandexMetric()) return;
     window.ym(metricCounterNumber, "userParams", parameters)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+
+    if (!window.klaviyo) return console.error("Klaviyo.Metric not found");
+    window.klaviyo.push(['identify', parameters]);
 }
 
-const reachGoal = (goal: EGoals) => {
-    if (typeof window.ym !== "function") return console.error("Yandex.Metric not found");
-    window.ym(metricCounterNumber, "reachGoal", goal)
-    console.log("goal: ", goal);
+const reachGoal = (goal: EGoals, onlyKlaviyo = false) => {
+    if (onlyKlaviyo) {
+        if (!window.klaviyo) return console.error("Klaviyo.Metric not found");
+        window.klaviyo.push(['track', goal]);
+    } else {
+        if (!checkIsAvailableYandexMetric()) return;
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+        window.ym(metricCounterNumber, "reachGoal", goal)
+        console.log("goal: ", goal);
+
+        if (!window.klaviyo) return console.error("Klaviyo.Metric not found");
+        window.klaviyo.push(['track', goal]);
+    }
 }
 
 type THitOptions = {
@@ -56,11 +76,12 @@ type THitOptions = {
 }
 
 const hit = (url?: string, options?: THitOptions) => {
+    if (!checkIsAvailableYandexMetric()) return;
     window.ym(metricCounterNumber, "hit", url, options);
 }
 
 const initMetric = () => {
-    if (typeof window.ym !== "function") return console.error("Yandex.Metric not found");
+    if (!checkIsAvailableYandexMetric()) return;
 
     window.ym(metricCounterNumber, "init", {
         clickmap: true,
diff --git a/src/types.ts b/src/types.ts
index 6adc00a..fa1ecd6 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -27,6 +27,8 @@ declare global {
   interface Window {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ym: any;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    klaviyo: any;
   }
 }
 
