[FEATURE] cu-865c6h9vk analytics (#3)

* Begin setup for profiling 1

* feat: profiling one and two

* feat: save changes

* feat: some improvements

* fix: adding profiling two redirecto to router

* feat: auto code review improvements

* fix: changes to deploy app into staging

* feat: implement zuko analytics

* fix: import script for zuko

* feat: changes

* fix: zuko script is executed first than import zuko library

* feat: only render one time

* fix: change completation_event

* fix: try to overwrite tailwind style over eo care page

* fix: try again

* build: rebuild app

* feat: do changes for code review

---------

Co-authored-by: urielradzyminski <62403177+urielradzyminski@users.noreply.github.com>

apps/eo_web/dist/manifest.json

@@ -8,17 +8,17 @@
     "src": "../../packages/ui/src/assets/avatar.svg"
   },
   "src/main.css": {
-    "file": "assets/main-99f8df7b.css",
+    "file": "assets/main-d7ce9135.css",
     "src": "src/main.css"
   },
   "src/main.tsx": {
     "assets": [
       "assets/UploadFile-694e44b5.svg"
     ],
     "css": [
-      "assets/main-99f8df7b.css"
+      "assets/main-d7ce9135.css"
     ],
-    "file": "assets/main-a845a312.js",
+    "file": "assets/main-0a446682.js",
     "isEntry": true,
     "src": "src/main.tsx"
   }

apps/eo_web/src/App.tsx

@@ -13,6 +13,7 @@ declare global {
       API_URL: string;
       PROFILE_ONE_ID: string;
       PROFILE_TWO_ID: string;
+      ZUKO_SLUG_ID_PROCESS_START: string;
     };
   }
 }

apps/eo_web/src/api/useElixirApi.ts

@@ -1,32 +1,6 @@
 import { api } from "~/api/axios";
 import { API_URL } from "~/api/common";
-import { useProfileStore } from "~/stores/useProfileStore";
-
-export interface ZipCodeValidationResponseSuccess {
-  app_flags: {
-    can_delete_sessions: boolean;
-    can_edit_sessions: boolean;
-    can_mute_sessions: boolean;
-    malady_selection: Array<{
-      label: string;
-      slug: string;
-    }>;
-  };
-  birth_date: string | null;
-  caregiver: boolean;
-  ced: boolean;
-  email: string;
-  first_name: string | null;
-  gender: string | null;
-  last_name: string | null;
-  malady: string;
-  med_card: boolean;
-  phone: unknown;
-  status: string;
-  timezone: string;
-  uid: string;
-  zip: string;
-}
+import { useProfileStore, type Profile } from "~/stores/useProfileStore";
 
 export interface ZipCodeValidationResponseError {
   errors: {
@@ -49,9 +23,7 @@ export const useElixirApi = () => {
     },
   };
   const validateZipCode = async (zipCode: string) => {
-    return api.post<
-      ZipCodeValidationResponseSuccess | ZipCodeValidationResponseError
-    >(
+    return api.post<Profile | ZipCodeValidationResponseError>(
       `${API_URL}/v2/profile/validate_zip_code`,
       {
         zip: zipCode,

apps/eo_web/src/hooks/useZukoAnalytic.tsx

@@ -0,0 +1,50 @@
+import { useEffect } from "react";
+
+export const useZukoAnalytic = (zukoSlugId: string) => {
+  const triggerCompletionEvent = () => {
+    const implementScript = document.createElement("script");
+    implementScript.type = "text/javascript";
+    implementScript.textContent = `Zuko.trackForm({slug:'${zukoSlugId}'}).trackEvent(Zuko.COMPLETION_EVENT);`;
+    setTimeout(() => {
+      document.body.appendChild(implementScript);
+    }, 2000);
+
+    return () => {
+      setTimeout(() => {
+        document.body.removeChild(implementScript);
+      }, 2000);
+    };
+  };
+
+  const triggerViewEvent = () => {
+    const implementScript = document.createElement("script");
+    implementScript.type = "text/javascript";
+    implementScript.textContent = `Zuko.trackForm({target:document.body,slug:"${zukoSlugId}"}).trackEvent(Zuko.FORM_VIEW_EVENT);`;
+    setTimeout(() => {
+      document.body.appendChild(implementScript);
+    }, 2000);
+
+    return () => {
+      setTimeout(() => {
+        document.body.removeChild(implementScript);
+      }, 2000);
+    };
+  };
+
+  useEffect(() => {
+    const script = document.createElement("script");
+    script.type = "text/javascript";
+    script.async = true;
+    script.src = "https://assets.zuko.io/js/v2/client.min.js";
+    document.body.appendChild(script);
+
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, []);
+
+  return {
+    triggerCompletionEvent,
+    triggerViewEvent,
+  };
+};

apps/eo_web/src/screens/ZipCodeValidation.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation } from "@tanstack/react-query";
 import axios from "axios";
@@ -9,6 +10,7 @@ import { z } from "zod";
 import { Button, Input, Typography } from "@eo/ui";
 
 import { useElixirApi } from "~/api/useElixirApi";
+import { useZukoAnalytic } from "~/hooks/useZukoAnalytic";
 import { LayoutDefault } from "~/layouts";
 import { ROUTES } from "~/router";
 import { useProfileStore } from "~/stores/useProfileStore";
@@ -21,8 +23,13 @@ const zipCodeValidationSchema = z.object({
 });
 export type ZipCodeValidationSchema = z.infer<typeof zipCodeValidationSchema>;
 
+const ZUKO_SLUG_ID =
+  window.data.ZUKO_SLUG_ID_PROCESS_START || "4e9cc7ceea3e22fb";
+
 export const ZipCodeValidation = () => {
   const { validateZipCode } = useElixirApi();
+  const { triggerViewEvent } = useZukoAnalytic(ZUKO_SLUG_ID);
+  useEffect(triggerViewEvent, []);
 
   const navigate = useNavigate();
   const setProfileZip = useProfileStore((state) => state.setProfileZip);
@@ -39,6 +46,7 @@ export const ZipCodeValidation = () => {
   const { mutate } = useMutation({
     mutationFn: validateZipCode,
     onSuccess: () => {
+      setProfileZip(getValues("zip_code"));
       navigate(ROUTES.eligibleProfile);
     },
     onError: (result) => {

apps/eo_web/src/screens/profiling/ProfilingTwoRedirect.tsx

@@ -5,14 +5,18 @@ import { useNavigate } from "react-router-dom";
 import { Button, Typography } from "@eo/ui";
 
 import { useElixirApi } from "~/api/useElixirApi";
+import { useZukoAnalytic } from "~/hooks/useZukoAnalytic";
 import { LayoutDefault } from "~/layouts";
 import { ROUTES } from "~/router";
 
+const ZUKO_SLUG_ID =
+  window.data.ZUKO_SLUG_ID_PROCESS_START || "4e9cc7ceea3e22fb";
 export const ProfilingTwoRedirect = () => {
   const navigate = useNavigate();
   const [sentProfile, setSentProfile] = useState(false);
   const { combineProfileOne } = useElixirApi();
   const params = new URLSearchParams(window.location.search);
+  const { triggerCompletionEvent } = useZukoAnalytic(ZUKO_SLUG_ID);
 
   if (!params.get("submission_id")) {
     navigate(ROUTES.login);
@@ -28,6 +32,8 @@ export const ProfilingTwoRedirect = () => {
     },
   });
 
+  useEffect(triggerCompletionEvent, []);
+
   useEffect(() => {
     if (!sentProfile) {
       mutate(params.get("submission_id") || "");

cspell.json

@@ -52,6 +52,8 @@
     "Viewports",
     "WORKDIR",
     "xlink",
-    "zustand"
+    "zustand",
+    "ZUKO",
+    "Zuko"
   ]
 }

packages/config/tailwind/index.ts

@@ -4,6 +4,7 @@ import typography from "@tailwindcss/typography";
 import type { Config } from "tailwindcss";
 
 export default {
+  important: true,
   content: [
     "./src/**/*.{js,ts,jsx,tsx}",
     "../../packages/**/*.{js,ts,jsx,tsx}",