From 283501470bafb0ddc2f1bab9e937eaa1a8fb8e66 Mon Sep 17 00:00:00 2001
From: Henrique Barreto <henrique.barreto@fingerprint.com>
Date: Mon, 18 Nov 2024 17:35:20 +0000
Subject: [PATCH] feat: GROW-284 - Refactor code and fix lint

---
 src/client/thirdParty/Amplitude.tsx | 31 +++++++---------------
 src/client/thirdParty/Inkeep.tsx    | 41 ++++++++++++++++++++++++-----
 2 files changed, 44 insertions(+), 28 deletions(-)

diff --git a/src/client/thirdParty/Amplitude.tsx b/src/client/thirdParty/Amplitude.tsx
index 2899afd9..43e0953a 100644
--- a/src/client/thirdParty/Amplitude.tsx
+++ b/src/client/thirdParty/Amplitude.tsx
@@ -1,9 +1,6 @@
 import * as amplitude from '@amplitude/analytics-browser';
 import { usePlaygroundSignals } from '../../app/playground/hooks/usePlaygroundSignals';
 import { FunctionComponent } from 'react';
-import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react';
-import { FPJS_CLIENT_TIMEOUT } from '../../const';
-import { useLocation } from 'react-use';
 
 const AMPLITUDE_INGRESS_PROXY = 'https://demo.fingerprint.com/ampl-api/2/httpapi';
 const EVENT_TYPE = 'Demo Page Viewed';
@@ -52,47 +49,39 @@ function initAmplitude(apiKey: string) {
   });
 }
 
-function initPlaygroundSignals() {
+function usePlaygroundSignalsWrapper() {
   usePlaygroundSignals({
     onServerApiSuccess: (event) => {
       const visitorId = event.products.identification?.data?.visitorId;
       const botDetected = event?.products?.botd?.data?.bot?.result === 'bad' ? 'True' : 'False';
 
-      const location = useLocation();
-      const pagePath = location.pathname;
-      const pageTitle = document.title;
-
       amplitude.add(demoPageViewedEventPropertiesEnrichment(botDetected));
 
       amplitude.track(EVENT_TYPE, {
         botDetected,
         visitorId,
-        'Docs Page Path': pagePath,
-        'Docs Page Title': pageTitle,
       });
     },
   });
 }
 
-export async function trackAskAIkHelpMethodChosen(helpMethod: string) {
-  const { getData: getVisitorData } = useVisitorData(
-    { ignoreCache: true, timeout: FPJS_CLIENT_TIMEOUT },
-    {
-      immediate: false,
-    },
-  );
-
-  const { visitorId } = await getVisitorData({ ignoreCache: true });
-
+export async function trackAskAIkHelpMethodChosen(
+  helpMethod: string,
+  visitorId: string,
+  pagePath: string,
+  pageTitle: string,
+) {
   amplitude.track(ASK_AI_CHOSEN_EVENT_TYPE, {
     helpMethod,
     visitorId,
+    'Docs Page Path': pagePath,
+    'Docs Page Title': pageTitle,
   });
 }
 
 export const Amplitude: FunctionComponent<AmplitudeProps> = ({ apiKey }) => {
   initAmplitude(apiKey);
-  initPlaygroundSignals();
+  usePlaygroundSignalsWrapper();
 
   return null;
 };
diff --git a/src/client/thirdParty/Inkeep.tsx b/src/client/thirdParty/Inkeep.tsx
index cee66cb9..2bbbd350 100644
--- a/src/client/thirdParty/Inkeep.tsx
+++ b/src/client/thirdParty/Inkeep.tsx
@@ -10,6 +10,10 @@ import type {
 import { env } from '../../env';
 import dynamic from 'next/dynamic';
 import { trackAskAIkHelpMethodChosen } from './Amplitude';
+import { GetDataOptions, useVisitorData, VisitorData } from '@fingerprintjs/fingerprintjs-pro-react';
+import { FPJS_CLIENT_TIMEOUT } from '../../const';
+import { useLocation } from 'react-use';
+import { LocationSensorState } from 'react-use/lib/useLocation';
 
 const GET_HELP_OPTIONS_CLICKED = 'get_help_option_clicked';
 
@@ -29,18 +33,33 @@ type InkeepSharedSettings = {
   modalSettings: InkeepModalSettings;
 };
 
-export const customAnalyticsCallback = async (event) => {
-  if (event.eventName === GET_HELP_OPTIONS_CLICKED) {
-    const { name } = event.properties;
-    await trackAskAIkHelpMethodChosen(name);
-  }
+export const createCustomAnalyticsCallback = (
+  getVisitorData: (getDataOptions?: GetDataOptions<boolean>) => Promise<VisitorData<boolean>>,
+  location: LocationSensorState,
+) => {
+  return async (event) => {
+    if (event.eventName === GET_HELP_OPTIONS_CLICKED) {
+      const { visitorId } = await getVisitorData({ ignoreCache: true });
+
+      const { name } = event.properties;
+      const pagePath = location.pathname || '';
+      const pageTitle = document.title;
+
+      await trackAskAIkHelpMethodChosen(name, visitorId, pagePath, pageTitle);
+    }
+  };
 };
 
-const useInkeepSettings = (): InkeepSharedSettings => {
+const useInkeepSettings = (
+  getVisitorData: (getDataOptions?: GetDataOptions<boolean>) => Promise<VisitorData<boolean>>,
+  location: LocationSensorState,
+): InkeepSharedSettings => {
   const apiKey = env.NEXT_PUBLIC_INKEEP_API_KEY;
   const integrationId = env.NEXT_PUBLIC_INKEEP_INTEGRATION_ID;
   const organizationId = env.NEXT_PUBLIC_INKEEP_ORG_ID;
 
+  const customAnalyticsCallback = createCustomAnalyticsCallback(getVisitorData, location);
+
   const baseSettings: InkeepBaseSettings = {
     apiKey,
     integrationId,
@@ -94,7 +113,15 @@ const useInkeepSettings = (): InkeepSharedSettings => {
 };
 
 export function InkeepChatButton() {
-  const { baseSettings, aiChatSettings, searchSettings, modalSettings } = useInkeepSettings();
+  const { getData: getVisitorData } = useVisitorData(
+    { ignoreCache: true, timeout: FPJS_CLIENT_TIMEOUT },
+    {
+      immediate: false,
+    },
+  );
+  const location = useLocation();
+
+  const { baseSettings, aiChatSettings, searchSettings, modalSettings } = useInkeepSettings(getVisitorData, location);
 
   const chatButtonProps: InkeepChatButtonProps = {
     baseSettings,