From 89b0939b83119efb0dbe6f1db477222a45765f48 Mon Sep 17 00:00:00 2001
From: gofnnp <fbicha1234@gmail.com>
Date: Fri, 28 Jun 2024 12:43:33 +0400
Subject: [PATCH] AW-106-klaviyo-metric

---
 index.html                                    | 15 ++++++++
 .../authentication/use-authentication.ts      |  6 ++--
 src/services/metric/metricService.ts          | 34 +++++++++++++------
 src/types.ts                                  |  2 ++
 4 files changed, 44 insertions(+), 13 deletions(-)
diff --git a/index.html b/index.html
index 1da3385..8e58fda 100755
--- a/index.html
+++ b/index.html
@@ -44,6 +44,21 @@
     </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>
+    <!-- Klaviyo Metric -->
     <!-- Yandex.Metrika counter -->
     <script type="text/javascript">
       (function (m, e, t, r, i, k, a) {
diff --git a/src/hooks/authentication/use-authentication.ts b/src/hooks/authentication/use-authentication.ts
index b2f822d..eceb6fa 100644
--- a/src/hooks/authentication/use-authentication.ts
+++ b/src/hooks/authentication/use-authentication.ts
@@ -123,13 +123,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..3b6d890 100644
--- a/src/services/metric/metricService.ts
+++ b/src/services/metric/metricService.ts
@@ -14,34 +14,47 @@ export enum EGoals {
 }
 
 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._learnq) return console.error("Klaviyo.Metric not found");
+    window._learnq.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._learnq) return console.error("Klaviyo.Metric not found");
+    window._learnq.push(['identify', parameters]);
 }
 
 const reachGoal = (goal: EGoals) => {
-    if (typeof window.ym !== "function") return console.error("Yandex.Metric not found");
+    if (!checkIsAvailableYandexMetric()) return;
+
     window.ym(metricCounterNumber, "reachGoal", goal)
     console.log("goal: ", goal);
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (!window._learnq) return console.error("Klaviyo.Metric not found");
+    window._learnq.push(['track', goal]);
 }
 
 type THitOptions = {
@@ -56,11 +69,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..19c2e89 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
+    _learnq: any;
   }
 }
 
