@envive-ai/react-hooks 0.3.10 → 0.3.11

package/src/contexts/enviveContext/WindowChatToggleBinder.tsx

@@ -25,7 +25,11 @@ export const WindowChatToggleBinder = () => {
     toggleChatRef.current = (triggerId?: string) => hook.toggle(triggerLocation, triggerId);
     isOpenRef.current = hook.isOpen;
     openChatWithPromptRef.current = (prompt: string, triggerId?: string) => {
-      onTypedMessageSubmitted({ query: prompt, userTyped: false });
+      onTypedMessageSubmitted({
+        query: prompt,
+        userTyped: false,
+        displayLocation: ChatElementDisplayLocationV3.WINDOW_API_CALL,
+      });
       hook.openChat(triggerLocation, triggerId);
     };
   }, [hook, onTypedMessageSubmitted, triggerLocation]);

package/src/contexts/enviveContext/enviveContext.tsx

@@ -45,6 +45,7 @@ interface EnviveProviderProps extends AgentWrapperProps {
   variantUrlOverride?: string;
   variantInfoOverride?: any;
   show?: boolean;
+  enviveOn?: boolean;
   publicKey?: string;
   featureGates?: OrgConfigFeatureGate[]; // New prop for feature gates
   featureFlagService?: FeatureFlagService;
@@ -67,6 +68,7 @@ const SearchAgentWrapper: React.FC<AgentWrapperProps> = ({ children, enabledAgen
 
 interface SalesAgentWrapperProps extends AgentWrapperProps {
   previewMode?: boolean;
+  showDebugBar: boolean;
   mockSalesAgentData?: any;
 }
 
@@ -74,13 +76,14 @@ const SalesAgentWrapper: React.FC<SalesAgentWrapperProps> = ({
   children,
   enabledAgents,
   previewMode,
+  showDebugBar,
   mockSalesAgentData,
 }) => {
   if (!enabledAgents.includes(EnviveAgent.SalesAgent)) {
     return children;
   }
   return (
-    <SystemSettingsContextProvider>
+    <SystemSettingsContextProvider showDebugBar={showDebugBar}>
       <SalesAgentProvider
         previewMode={previewMode}
         mockData={mockSalesAgentData}
@@ -187,6 +190,7 @@ export const EnviveProvider: React.FC<EnviveProviderProps> = ({
                                 <WindowChatToggleBinder />
                                 <SalesAgentWrapper
                                   enabledAgents={enabledAgents}
+                                  showDebugBar={config.enviveOn || false}
                                   previewMode={previewMode}
                                   mockSalesAgentData={mockSalesAgentData}
                                 >

package/src/contexts/featureFlagServiceContext/featureFlagServiceContext.tsx

@@ -5,6 +5,14 @@ import Logger from 'src/application/logging/logger';
 
 const FEATURE_FLAGS_STORAGE_KEY = 'spiffy-feature-flags';
 
+export interface FullFlagValue {
+  resolved: boolean;
+  initial: boolean | undefined;
+  query_param_override: boolean | undefined;
+  window_param_override: boolean | undefined;
+  stored_override: boolean | undefined;
+}
+
 // This is the class that was previously implicitly used or defined elsewhere
 export class FeatureFlagService {
   private featureGates: OrgConfigFeatureGate[];
@@ -124,6 +132,34 @@ export class FeatureFlagService {
     );
   };
 
+  getFullFlagValue = (featureGate: FeatureGates): FullFlagValue => {
+    const gateValue = this.featureGates.find(gate => gate.name === featureGate);
+    return {
+      resolved: this.isFeatureGateEnabled(featureGate),
+      initial: gateValue?.value,
+      query_param_override: FeatureFlagService.getQueryParamFeatureGateOverrides(featureGate),
+      window_param_override: FeatureFlagService.getWindowFeatureGateOverrides(featureGate),
+      stored_override: FeatureFlagService.getStoredFeatureGateOverrides(featureGate),
+    };
+  };
+
+  getFullFlagValues = (): Record<string, FullFlagValue> => {
+    const featureGates = Object.values(FeatureGates).map((featureGate: FeatureGates) => [
+      featureGate,
+      this.getFullFlagValue(featureGate),
+    ]);
+
+    return featureGates.length > 0
+      ? featureGates.reduce<Record<string, FullFlagValue>>((acc, entry) => {
+          const [name, value] = entry as [FeatureGates, FullFlagValue];
+          if (name && value != null) {
+            return { ...acc, [`feature_gate.${name}`]: value };
+          }
+          return acc;
+        }, {})
+      : {};
+  };
+
   static persistFeatureGateOverrides(): void {
     if (typeof window === 'undefined' || typeof window.localStorage === 'undefined') {
       return;

package/src/contexts/graphqlContext/mockV3Config.ts

@@ -1,17 +1,17 @@
-import { FrontendConfigV3 } from 'src/application/models/frontendConfigV3';
-import { ColorMappingV3, ColorNames, colorVar } from 'src/application/models/colorsConfigV3';
-import { CamelCasedPropertiesDeep } from 'src/application/models';
+import { ChatHeaderVariant } from '@envive-ai/react-toolkit-v3/ChatHeader';
 import { ImageGalleryLayout } from '@envive-ai/react-toolkit-v3/ImageGallery';
 import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton';
 import { AnimationSpeed, PromptCarouselRows } from '@envive-ai/react-toolkit-v3/PromptCarousel';
-import { WidgetWrapperVariant } from '@envive-ai/react-toolkit-v3/WidgetWrapper';
-import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
-import { ChatHeaderVariant } from '@envive-ai/react-toolkit-v3/ChatHeader';
 import { WidgetKind } from '@envive-ai/react-toolkit-v3/SocialProof';
+import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
 import { SparkleIconColor } from '@envive-ai/react-toolkit-v3/WelcomeMessage';
+import { WidgetWrapperVariant } from '@envive-ai/react-toolkit-v3/WidgetWrapper';
+import { CamelCasedPropertiesDeep } from 'src/application/models';
+import { ColorMappingV3, ColorNames, colorVar } from 'src/application/models/colorsConfigV3';
+import { FrontendConfigV3 } from 'src/application/models/frontendConfigV3';
 
-import { CustomerServiceType } from 'src/types/customerService';
 import { FloatingButtonLocation } from '@envive-ai/react-toolkit-v3/FloatingButton';
+import { CustomerServiceType } from 'src/types/customerService';
 import { ConfigVersionEnum, WidgetTypeV3 } from '../typesV3';
 
 const mockImages = [
@@ -262,5 +262,11 @@ export const mockV3FrontendConfig: FrontendConfigV3 = {
       imageSrc:
         'https://www.bandolierstyle.com/cdn/shop/files/Lily17_Black_Gold_Chrome_MOD_Dec25_6.jpg?v=1765844272',
     },
+    'full-page-sales-agent-widget': {
+      widgetConfigId: 'full-page-sales-agent-widget',
+      contentId: 'full-page-sales-agent-widget',
+      type: WidgetTypeV3.FullPageSalesAgentV3,
+      autoHeight: true,
+    },
   },
 };

package/src/contexts/hardcopyContext/hardcopyContext.tsx

@@ -1,16 +1,18 @@
 import { ReactNode, createContext, useCallback, useContext, useMemo, useState } from 'react';
 import Logger from 'src/application/logging/logger';
-
+import { v4 as uuid } from 'uuid';
 import CommerceApiClient from 'src/application/commerce-api';
-import { WidgetText } from 'src/application/models/api/widgetText';
+import { WidgetString, WidgetText } from 'src/application/models/api/widgetText';
 import { WidgetTextRequest } from 'src/application/models/api/widgetTextRequest';
 
 import { useAtomValue } from 'jotai';
 import { appDetailsAtom } from 'src/atoms/app';
+import { EnviveMetricsEventName } from 'src/services/amplitudeService/amplitudeService';
 import { toCamelCase } from 'src/application/models/utils/snakeToCamelTransformer';
 import { UserEvent } from 'src/application/models';
 import { WidgetTypeV3 } from '../typesV3';
 import { useFeatureFlagService } from '../featureFlagServiceContext/featureFlagServiceContext';
+import { useAmplitude } from '../amplitudeContext';
 
 interface HardcopyRequest {
   widgetType: WidgetTypeV3;
@@ -18,7 +20,9 @@ interface HardcopyRequest {
 }
 
 export type HardcopyResponse = {
+  responseId: string;
   language: string;
+  rawValues?: Record<string, WidgetString | WidgetString[]>;
   values: Record<string, string | string[]>;
 };
 
@@ -29,7 +33,9 @@ interface HardcopyContextType {
 
 const convertToHardcopyResponse = (response: WidgetText): HardcopyResponse => {
   return {
+    responseId: response.responseId,
     language: response.language,
+    rawValues: response.values,
     values: Object.fromEntries(
       Object.entries(response.values).map(([key, value]) => [
         // Transform the key from snake_case to camelCase
@@ -45,6 +51,7 @@ const convertToHardcopyResponse = (response: WidgetText): HardcopyResponse => {
 // values and their names should be.
 const MOCK_HARDCOPY_RESPONSE: Partial<Record<WidgetTypeV3, HardcopyResponse>> = {
   [WidgetTypeV3.PromptCarouselV3]: {
+    responseId: uuid(),
     language: 'en',
     values: {
       promptButtonTexts: [
@@ -57,6 +64,7 @@ const MOCK_HARDCOPY_RESPONSE: Partial<Record<WidgetTypeV3, HardcopyResponse>> =
     },
   },
   [WidgetTypeV3.TitledPromptCarouselV3]: {
+    responseId: 'mock-response-id',
     language: 'en',
     values: {
       titleLabel: 'Need some help?',
@@ -70,6 +78,7 @@ const MOCK_HARDCOPY_RESPONSE: Partial<Record<WidgetTypeV3, HardcopyResponse>> =
     },
   },
   [WidgetTypeV3.SocialProofV3]: {
+    responseId: 'mock-response-id',
     language: 'en',
     values: {
       titleLabel: 'Shopping Assistant',
@@ -88,6 +97,7 @@ const MOCK_HARDCOPY_RESPONSE: Partial<Record<WidgetTypeV3, HardcopyResponse>> =
     },
   },
   [WidgetTypeV3.TypingAnimationV3]: {
+    responseId: 'mock-response-id',
     language: 'en',
     values: {
       titleLabel: 'Shopping Assistant',
@@ -108,6 +118,7 @@ const MOCK_HARDCOPY_RESPONSE: Partial<Record<WidgetTypeV3, HardcopyResponse>> =
     },
   },
   [WidgetTypeV3.ChatPreviewComparisonV3]: {
+    responseId: 'mock-response-id',
     language: 'en',
     values: {
       titleLabel: 'Shopping Assistant',
@@ -116,6 +127,7 @@ const MOCK_HARDCOPY_RESPONSE: Partial<Record<WidgetTypeV3, HardcopyResponse>> =
     },
   },
   [WidgetTypeV3.ChatPreviewLoadingV3]: {
+    responseId: 'mock-response-id',
     language: 'en',
     values: {
       titleLabel: 'Shopping Assistant',
@@ -123,6 +135,7 @@ const MOCK_HARDCOPY_RESPONSE: Partial<Record<WidgetTypeV3, HardcopyResponse>> =
     },
   },
   [WidgetTypeV3.ChatPreviewV3]: {
+    responseId: 'mock-response-id',
     language: 'en',
     values: {
       titleLabel: 'Shopping Assistant',
@@ -130,6 +143,7 @@ const MOCK_HARDCOPY_RESPONSE: Partial<Record<WidgetTypeV3, HardcopyResponse>> =
     },
   },
   [WidgetTypeV3.PromptButtonCarouselWithImageV3]: {
+    responseId: 'mock-response-id',
     language: 'en',
     values: {
       titleLabel: 'Need some help?',
@@ -138,6 +152,7 @@ const MOCK_HARDCOPY_RESPONSE: Partial<Record<WidgetTypeV3, HardcopyResponse>> =
     },
   },
   [WidgetTypeV3.ProductCardV3]: {
+    responseId: 'mock-response-id',
     language: 'en',
     values: {
       headline: 'Discover Your Perfect Style',
@@ -157,6 +172,18 @@ const MOCK_HARDCOPY_RESPONSE: Partial<Record<WidgetTypeV3, HardcopyResponse>> =
     },
   },
   [WidgetTypeV3.FloatingChatV3]: {
+    responseId: 'mock-response-id',
+    language: 'en',
+    values: {
+      welcomeMessageTitle: 'Welcome to Envive AI',
+      welcomeMessageText:
+        'Your personal shopper trained on the collective knowledge of thousands of real experts!',
+      chatFooterTextFieldPlaceholderText: 'Ask me anything...',
+      disclaimerText: 'This is a disclaimer...',
+    },
+  },
+  [WidgetTypeV3.FullPageSalesAgentV3]: {
+    responseId: 'mock-response-id',
     language: 'en',
     values: {
       welcomeMessageTitle: 'Welcome to Envive AI',
@@ -174,22 +201,40 @@ export const HardcopyProvider: React.FC<{ children: ReactNode }> = ({ children }
   const languages = useMemo(() => navigator.languages, []);
   const [isLoading, setIsLoading] = useState(false);
   const context = useAtomValue(appDetailsAtom);
+  const { trackEvent } = useAmplitude();
 
   const { featureFlagService } = useFeatureFlagService();
   const getHardcopyFromBackend = useCallback(
     async (request: HardcopyRequest): Promise<HardcopyResponse> => {
       const widgetTextRequest: WidgetTextRequest = {
+        requestId: uuid(),
         widgetType: request.widgetType,
         context,
         featureFlags: featureFlagService?.getFeatureFlags() || {},
         language: languages[0] || 'en',
         url: window.location.href,
       };
+      trackEvent({
+        eventName: EnviveMetricsEventName.WidgetTextRequest,
+        eventProps: {
+          widget_type: request.widgetType,
+          request_id: widgetTextRequest.requestId,
+        },
+      });
       try {
         const response = await CommerceApiClient.getHardcopy(widgetTextRequest);
         if (response) {
           const convertedResponse = convertToHardcopyResponse(response);
           Logger.logInfo('hardcopyContext | converted response', convertedResponse);
+          trackEvent({
+            eventName: EnviveMetricsEventName.WidgetTextResponse,
+            eventProps: {
+              widget_type: request.widgetType,
+              response_id: response.responseId,
+              widget_text: response.values,
+              request_id: widgetTextRequest.requestId,
+            },
+          });
           return convertedResponse;
         }
       } catch (error) {
@@ -202,7 +247,7 @@ export const HardcopyProvider: React.FC<{ children: ReactNode }> = ({ children }
       }
       throw new Error(`No hardcopy response found for widget type: ${request.widgetType}`);
     },
-    [context, featureFlagService, languages],
+    [context, featureFlagService, languages, trackEvent],
   );
 
   const getHardcopy = useCallback(

package/src/contexts/pageContext/mapping.ts

@@ -15,7 +15,13 @@ import { isApiSearchAttributes } from 'src/application/models/guards/api/isApiSe
 import { isApiSuggestionClickedAttributes } from 'src/application/models/guards/api/isApiSuggestionClickedEventAttributes';
 import { isApiFormSubmittedResponseAttributes } from 'src/application/models/guards/api/isApiFormSubmittedResponseAttributes';
 
-import { HomeVariantInfo, OtherVariantInfo, PageVariantInfo, VisitPageVariantInfo } from './types';
+import {
+  FullPageSalesAgentVariantInfo,
+  HomeVariantInfo,
+  OtherVariantInfo,
+  PageVariantInfo,
+  VisitPageVariantInfo,
+} from './types';
 
 export const mapUrlResolverResponseToVariantInfo = (
   url: string,
@@ -66,6 +72,12 @@ export const mapUrlResolverResponseToVariantInfo = (
     } as OtherVariantInfo;
   }
 
+  if (response.variant_type === VariantTypeEnum.FullPageSalesAgent) {
+    return {
+      variantType: VariantTypeEnum.FullPageSalesAgent,
+      url,
+    } as FullPageSalesAgentVariantInfo;
+  }
   throw new Error('Invalid variant type');
 };
 

package/src/contexts/pageContext/pageContext.tsx

@@ -70,6 +70,7 @@ export const PageProvider: React.FC<{
       const newVariantInfo = mapUrlResolverResponseToVariantInfo(url, response);
       const newUserEvent = mapApiUserEventToUserEvent(response.user_event ?? undefined);
       setVariantInfo(newVariantInfo);
+      console.log('=== newUserEvent ===', newUserEvent);
       setUserEvent(newUserEvent);
     },
     [setVariantInfo, setUserEvent],

package/src/contexts/pageContext/types.ts

@@ -31,12 +31,18 @@ export type OtherVariantInfo = {
   url: string;
 };
 
+export type FullPageSalesAgentVariantInfo = {
+  variantType: VariantTypeEnum.FullPageSalesAgent;
+  url: string;
+};
+
 export type PageVariantInfo =
   | PDPPageVariantInfo
   | PLPPageVariantInfo
   | VisitPageVariantInfo
   | HomeVariantInfo
-  | OtherVariantInfo;
+  | OtherVariantInfo
+  | FullPageSalesAgentVariantInfo;
 
 export interface PageDetails {
   pageUrl: string | undefined;

package/src/contexts/salesAgentContext/chatAPI.ts

@@ -1,5 +1,5 @@
 // This component will interact with the backend API to get the responses from the sales agent.
-
+import Logger from 'src/application/logging/logger';
 import { PageVisitCategory, UserEventCategory } from '@spiffy-ai/commerce-api-client';
 import {
   ChatElementDisplayLocationV3,
@@ -9,13 +9,21 @@ import {
   Suggestion,
   UserEvent,
 } from 'src/application/models';
-import { useSetAtom } from 'jotai';
+import { useAtomValue, useSetAtom } from 'jotai';
 import { useCallback } from 'react';
 import { v4 as uuid } from 'uuid';
 import { formSubmitAtom, replyEventCategoryAtom } from 'src/atoms/chat';
 import { queueUserEventAtom } from 'src/atoms/chat/messageQueue';
+import { EnviveMetricsEventName } from 'src/services/amplitudeService/amplitudeService';
+import { analyticsContextAtom } from 'src/atoms/app/variant';
+import { hasParsedVariantInfoAtom } from 'src/atoms/app';
 import { SpiffyMetricsEventName, useAmplitude } from '../amplitudeContext';
 
+const TRACKED_USER_EVENTS = [
+  UserEventCategory.PageVisit,
+  UserEventCategory.PdpVisit,
+  UserEventCategory.PlpVisit,
+];
 export interface SalesAgentChatAPI {
   logPageVisit: ({ pageVisitCategory }: { pageVisitCategory: PageVisitCategory }) => void;
   logUserEvent: (event: UserEvent) => void;
@@ -23,13 +31,23 @@ export interface SalesAgentChatAPI {
     suggestion: Suggestion,
     displayLocation: ChatElementDisplayLocationV3,
   ) => void;
-  onTypedMessageSubmitted: ({ query, userTyped }: { query: string; userTyped: boolean }) => void;
-  onFormResponseSubmitted: (formResponse: FormSubmittedAttributes) => void;
+  onTypedMessageSubmitted: ({
+    query,
+    userTyped,
+    displayLocation,
+  }: {
+    query: string;
+    userTyped: boolean;
+    displayLocation: ChatElementDisplayLocationV3;
+  }) => void;
+  onFormResponseSubmitted: (form: FormSubmittedAttributes) => void;
 }
 
 export const useSalesAgentChatAPI = () => {
   // TODO: Each of these functions will trigger both the necessary amplitude events and initiate the
   // necessary actions to trigger the backend API
+  const context = useAtomValue(analyticsContextAtom);
+  const hasParsedVariantInfo = useAtomValue(hasParsedVariantInfoAtom);
   const queueUserEvent = useSetAtom(queueUserEventAtom);
   const setReplyEventCategory = useSetAtom(replyEventCategoryAtom);
   const setFormSubmit = useSetAtom(formSubmitAtom);
@@ -37,8 +55,18 @@ export const useSalesAgentChatAPI = () => {
 
   const logPageVisit = useCallback(
     ({ pageVisitCategory }: { pageVisitCategory: PageVisitCategory }) => {
+      const eventId = uuid();
+      console.log('=== logPageVisit ===', eventId);
+      trackEvent({
+        eventName: EnviveMetricsEventName.ChatRequest,
+        eventProps: {
+          ...context,
+          'chat.request_id': eventId,
+          'chat.request_type': 'page_visit',
+        },
+      });
       const event: UserEvent = {
-        eventId: uuid(),
+        eventId,
         category: UserEventCategory.PageVisit,
         createdAt: new Date().toISOString(),
         attributes: {
@@ -48,14 +76,32 @@ export const useSalesAgentChatAPI = () => {
       };
       queueUserEvent(event);
     },
-    [queueUserEvent],
+    [queueUserEvent, context, trackEvent],
   );
 
   const logUserEvent = useCallback(
     (event: UserEvent) => {
+      if (!hasParsedVariantInfo) {
+        Logger.logWarn(
+          '[envive-ai] hasParsedVariantInfo is false, not logging user event',
+          undefined,
+          { event },
+        );
+        return;
+      }
+      if (TRACKED_USER_EVENTS.includes(event.category)) {
+        trackEvent({
+          eventName: EnviveMetricsEventName.ChatRequest,
+          eventProps: {
+            ...context,
+            'chat.request_id': event.eventId,
+            'chat.request_type': 'page_visit',
+          },
+        });
+      }
       queueUserEvent(event);
     },
-    [queueUserEvent],
+    [context, hasParsedVariantInfo, queueUserEvent, trackEvent],
   );
   const onSuggestionClicked = useCallback(
     (suggestion: Suggestion, displayLocation: ChatElementDisplayLocationV3) => {
@@ -74,8 +120,24 @@ export const useSalesAgentChatAPI = () => {
           },
         },
       });
+      const eventId = uuid();
+      trackEvent({
+        eventName: EnviveMetricsEventName.ChatRequest,
+        eventProps: {
+          ...context,
+          'trigger.widget': displayLocation, // This is fairly finegrained, but that may be ok
+          'chat.request_id': eventId,
+          'chat.request_type': 'suggestion',
+          'chat.request_text': suggestion.content,
+          'chat.suggestion_id': suggestion.id,
+          'chat.suggestion_category': suggestion.category,
+          'chat.suggestion_created_at': suggestion.createdAt,
+          'chat.suggestion_is_answer': suggestion.isAnswer,
+          'chat.user_typed': false,
+        },
+      });
       const event: UserEvent = {
-        eventId: uuid(),
+        eventId,
         category: UserEventCategory.SuggestionClicked,
         createdAt: new Date().toISOString(),
         attributes: {
@@ -85,10 +147,18 @@ export const useSalesAgentChatAPI = () => {
       };
       queueUserEvent(event);
     },
-    [queueUserEvent, trackEvent],
+    [queueUserEvent, trackEvent, context],
   );
   const onTypedMessageSubmitted = useCallback(
-    ({ query, userTyped }: { query: string; userTyped: boolean }) => {
+    ({
+      query,
+      userTyped,
+      displayLocation,
+    }: {
+      query: string;
+      userTyped: boolean;
+      displayLocation: ChatElementDisplayLocationV3;
+    }) => {
       const eventId = uuid();
       trackEvent({
         eventName: SpiffyMetricsEventName.ChatUserMessageInput,
@@ -105,6 +175,18 @@ export const useSalesAgentChatAPI = () => {
           },
         },
       });
+      trackEvent({
+        eventName: EnviveMetricsEventName.ChatRequest,
+        eventProps: {
+          ...context,
+          'trigger.widget': displayLocation,
+          'chat.request_type': 'text',
+          'chat.request_text': query,
+          'chat.request_id': eventId,
+          'chat.request_created_at': new Date().toISOString(),
+          'chat.user_typed': userTyped,
+        },
+      });
       const event: UserEvent = {
         eventId,
         category: UserEventCategory.QueryTyped,
@@ -116,21 +198,32 @@ export const useSalesAgentChatAPI = () => {
       };
       queueUserEvent(event);
     },
-    [queueUserEvent, trackEvent],
+    [queueUserEvent, trackEvent, context],
   );
   const onFormResponseSubmitted = useCallback(
     (form: FormSubmittedAttributes) => {
       setReplyEventCategory(UserEventCategory.FormSubmitted);
       setFormSubmit(form);
+      const eventId = uuid();
+      trackEvent({
+        eventName: EnviveMetricsEventName.ChatRequest,
+        eventProps: {
+          ...context,
+          'chat.request_id': eventId,
+          'chat.request_type': 'form',
+          'chat.form_response_id': form.formResponseId,
+          'chat.form_type': form.formType,
+        },
+      });
       const event: UserEvent = {
-        eventId: uuid(),
+        eventId,
         category: UserEventCategory.FormSubmitted,
         createdAt: new Date().toISOString(),
         attributes: form,
       };
       queueUserEvent(event);
     },
-    [queueUserEvent, setReplyEventCategory, setFormSubmit],
+    [setReplyEventCategory, setFormSubmit, trackEvent, context, queueUserEvent],
   );
 
   return {