@envive-ai/react-hooks 0.3.7 → 0.3.8

package/src/contexts/amplitudeContext/__tests__/amplitudeContext.test.tsx

@@ -5,7 +5,7 @@ import {
   UserIdentityProvider,
   useUserIdentity,
 } from 'src/contexts/userIdentityContext/userIdentityContext';
-import { LocalStorageProvider } from 'src/contexts/localStorageContext';
+import { LocalStorageKeys, LocalStorageProvider } from 'src/contexts/localStorageContext';
 import { EnviveConfigProvider } from 'src/contexts/enviveConfigContext/enviveConfigContext';
 import {
   FeatureFlagService,
@@ -13,6 +13,7 @@ import {
 } from 'src/contexts/featureFlagServiceContext/featureFlagServiceContext';
 import { userIdAtom } from 'src/atoms/app';
 import { AmplitudeService } from 'src/services/amplitudeService/amplitudeService';
+import { UserIdentityService } from 'src/services/userIdentityService';
 import { AmplitudeProvider, SpiffyMetricsEventName, useAmplitude } from '../amplitudeContext';
 
 // Mock AmplitudeService
@@ -111,10 +112,20 @@ const AtomReaderComponent: React.FC = () => {
 const CombinedContextComponent: React.FC = () => {
   const userIdentity = useUserIdentity();
   const amplitude = useAmplitude();
+  const [userId, setUserId] = React.useState<string>('');
+
+  React.useEffect(() => {
+    const fetchUserId = async () => {
+      const id = await userIdentity.getUserIdOrDefault();
+      setUserId(id);
+    };
+
+    fetchUserId();
+  }, [userIdentity]);
 
   return (
     <div data-testid="combined-component">
-      <div data-testid="user-id-from-identity">{userIdentity.getUserIdOrDefault()}</div>
+      <div data-testid="user-id-from-identity">{userId}</div>
       <div data-testid="amplitude-ready">{amplitude.isReady.toString()}</div>
     </div>
   );
@@ -123,18 +134,33 @@ const CombinedContextComponent: React.FC = () => {
 // FeatureFlagService
 const testFeatureFlagService = new FeatureFlagService([]);
 
+// userID service
+const mockInitializeUser = vi.fn().mockResolvedValue(undefined);
+const mockGetUserId = vi.fn().mockImplementation(async () => {
+  // Check for override first
+  const override = localStorage.getItem('v1-spiffy-user-id-override');
+  if (override) return override;
+  return 'test-user-id';
+});
+
+const testUserIdService = {
+  getUserIdOrDefault: mockGetUserId,
+  initializeUser: mockInitializeUser,
+  getUserIdOverrideFromLocalStorage: vi.fn().mockImplementation(() => {
+    return localStorage.getItem('v1-spiffy-user-id-override') || undefined;
+  }),
+} as unknown as UserIdentityService;
+
 // Wrapper component with all required providers
 const TestWrapper: React.FC<{
   children: React.ReactNode;
   amplitudeApiKey?: string;
   userIdOverride?: string;
-  userIdDefault?: string;
   externalAmplitudeService?: AmplitudeService;
 }> = ({
   children,
   amplitudeApiKey = 'test-amplitude-key',
   userIdOverride,
-  userIdDefault,
   externalAmplitudeService,
 }) => {
   // Set up localStorage with user IDs if provided
@@ -142,10 +168,7 @@ const TestWrapper: React.FC<{
     if (userIdOverride) {
       localStorage.setItem('v1-spiffy-user-id-override', userIdOverride);
     }
-    if (userIdDefault) {
-      localStorage.setItem('v1-spiffy-user-id-default', userIdDefault);
-    }
-  }, [userIdOverride, userIdDefault]);
+  }, [userIdOverride]);
 
   return (
     <Provider>
@@ -159,7 +182,7 @@ const TestWrapper: React.FC<{
         featureGates={[]}
       >
         <LocalStorageProvider>
-          <UserIdentityProvider>
+          <UserIdentityProvider userIdService={testUserIdService}>
             <FeatureFlagServiceProvider featureFlagService={testFeatureFlagService}>
               <AmplitudeProvider externalAmplitudeService={externalAmplitudeService}>
                 {children}
@@ -173,8 +196,16 @@ const TestWrapper: React.FC<{
 };
 
 describe('AmplitudeProvider - React Context Integration', () => {
+  let mockGetLocalStorageItem: (key: string) => string | null;
   beforeEach(() => {
     vi.clearAllMocks();
+    vi.clearAllMocks();
+    mockGetLocalStorageItem = vi.fn((key: string) => {
+      if (key === LocalStorageKeys.ChatId) {
+        return 'test-chat-id';
+      }
+      return null;
+    });
     if (typeof localStorage !== 'undefined') {
       localStorage.clear();
     }
@@ -227,62 +258,6 @@ describe('AmplitudeProvider - React Context Integration', () => {
       });
     });
 
-    it('should use default userId from UserIdentityContext when override is not set', async () => {
-      const testUserId = 'default-user-id-456';
-      render(
-        <TestWrapper userIdDefault={testUserId}>
-          <MockAmplitudeComponent />
-        </TestWrapper>,
-      );
-
-      await waitFor(() => {
-        expect(screen.getByTestId('is-ready').textContent).toBe('true');
-      });
-
-      await act(async () => {
-        screen.getByTestId('track-event-button').click();
-      });
-
-      await waitFor(() => {
-        expect(mockTrackEvent).toHaveBeenCalled();
-        const callArgs = mockTrackEvent.mock.calls[0];
-        expect(callArgs[0]).toEqual({
-          eventName: SpiffyMetricsEventName.ChatUserMessageInput,
-          eventProps: { message: 'test message' },
-        });
-      });
-    });
-
-    it('should prioritize override userId over default userId', async () => {
-      const overrideUserId = 'override-user-id-789';
-      const defaultUserId = 'default-user-id-012';
-      render(
-        <TestWrapper
-          userIdOverride={overrideUserId}
-          userIdDefault={defaultUserId}
-        >
-          <MockAmplitudeComponent />
-        </TestWrapper>,
-      );
-
-      await waitFor(() => {
-        expect(screen.getByTestId('is-ready').textContent).toBe('true');
-      });
-
-      await act(async () => {
-        screen.getByTestId('track-event-button').click();
-      });
-
-      await waitFor(() => {
-        expect(mockTrackEvent).toHaveBeenCalled();
-        const callArgs = mockTrackEvent.mock.calls[0];
-        expect(callArgs[0]).toEqual({
-          eventName: SpiffyMetricsEventName.ChatUserMessageInput,
-          eventProps: { message: 'test message' },
-        });
-      });
-    });
-
     it('should initialize AmplitudeService with userId from UserIdentityContext', async () => {
       const testUserId = 'init-user-id-345';
       render(
@@ -369,7 +344,7 @@ describe('AmplitudeProvider - React Context Integration', () => {
               featureGates={[]}
             >
               <LocalStorageProvider>
-                <UserIdentityProvider>
+                <UserIdentityProvider userIdService={testUserIdService}>
                   <FeatureFlagServiceProvider featureFlagService={testFeatureFlagService}>
                     <AmplitudeProvider>{children}</AmplitudeProvider>
                   </FeatureFlagServiceProvider>
@@ -399,6 +374,9 @@ describe('AmplitudeProvider - React Context Integration', () => {
         userId: 'external-user-id',
         amplitudeApiKey: 'external-api-key',
         dataResidency: 'EU',
+        orgId: 'test-org-id',
+        show: true,
+        getLocalStorageItem: mockGetLocalStorageItem,
         featureFlagService: new FeatureFlagService([]),
         env: 'test', // Provide required fields to match AmplitudeServiceConfig
         contextSource: 'test-source',
@@ -435,6 +413,9 @@ describe('AmplitudeProvider - React Context Integration', () => {
         userId: 'external-user-id',
         amplitudeApiKey: 'external-api-key',
         dataResidency: 'EU',
+        orgId: 'test-org-id',
+        show: true,
+        getLocalStorageItem: mockGetLocalStorageItem,
         featureFlagService: new FeatureFlagService([]),
         env: 'test',
         contextSource: 'test-source',

package/src/contexts/amplitudeContext/amplitudeContext.tsx

@@ -43,6 +43,7 @@ export const AmplitudeProvider: React.FC<{
     variantUrlOverride,
     variantInfoOverride,
     show,
+    orgId,
     orgShortName,
     featureGates,
   } = useEnviveConfig();
@@ -67,9 +68,10 @@ export const AmplitudeProvider: React.FC<{
         env: env || '',
         contextSource: contextSource || '',
         orgShortName: orgShortName || '',
+        orgId: orgId || '',
         featureFlagService,
         orgGaConfig,
-        show,
+        show: show ?? false,
         getLocalStorageItem: getItem,
       });
       setService(amplitudeService);
@@ -92,6 +94,7 @@ export const AmplitudeProvider: React.FC<{
     featureGates,
     getItem,
     externalAmplitudeService,
+    orgId,
   ]);
 
   const value = useMemo(

package/src/contexts/enviveContext/enviveContext.tsx

@@ -4,6 +4,7 @@ import { OrgConfigFeatureGate } from 'src/application/models/api/orgConfigResult
 import { EnviveConfigService, EnviveServiceConfig } from 'src/services/enviveConfigService';
 import { AmplitudeService } from 'src/services/amplitudeService/amplitudeService';
 import Logger from 'src/application/logging/logger';
+import { UserIdentityService } from 'src/services/userIdentityService';
 import { AmplitudeProvider } from '../amplitudeContext';
 import { EnviveConfigProvider } from '../enviveConfigContext';
 import { EnviveCssProvider } from '../enviveCssContext';
@@ -50,8 +51,10 @@ interface EnviveProviderProps extends AgentWrapperProps {
   amplitudeService?: AmplitudeService;
   mockV3ConfigToDeprecatedConfig?: boolean;
   requestV3Config?: boolean;
+  userIdentityService?: UserIdentityService;
   previewMode?: boolean;
   overrideConfig?: GraphQlConfigValues;
+  mockSalesAgentData?: any;
 }
 
 const SearchAgentWrapper: React.FC<AgentWrapperProps> = ({ children, enabledAgents }) => {
@@ -61,13 +64,28 @@ const SearchAgentWrapper: React.FC<AgentWrapperProps> = ({ children, enabledAgen
   return <SearchProvider>{children}</SearchProvider>;
 };
 
-const SalesAgentWrapper: React.FC<AgentWrapperProps> = ({ children, enabledAgents }) => {
+interface SalesAgentWrapperProps extends AgentWrapperProps {
+  previewMode?: boolean;
+  mockSalesAgentData?: any;
+}
+
+const SalesAgentWrapper: React.FC<SalesAgentWrapperProps> = ({
+  children,
+  enabledAgents,
+  previewMode,
+  mockSalesAgentData,
+}) => {
   if (!enabledAgents.includes(EnviveAgent.SalesAgent)) {
     return children;
   }
   return (
     <SystemSettingsContextProvider>
-      <SalesAgentProvider>{children}</SalesAgentProvider>
+      <SalesAgentProvider
+        previewMode={previewMode}
+        mockData={mockSalesAgentData}
+      >
+        {children}
+      </SalesAgentProvider>
     </SystemSettingsContextProvider>
   );
 };
@@ -80,11 +98,30 @@ export const EnviveProvider: React.FC<EnviveProviderProps> = ({
   enviveConfigService: inputEnviveConfigService,
   featureFlagService: inputFeatureFlagService,
   amplitudeService: inputAmplitudeService,
+  userIdentityService: inputUserIdentityService,
   mockV3ConfigToDeprecatedConfig = false,
   requestV3Config = false,
+  mockSalesAgentData,
   ...config
 }) => {
-  const userId = 'spiffy-user-id-0b64d781-e1c2-4b6d-9cf5-32b4f7c1e3f2'; // TODO: How should this be derived?
+  const [userId, setUserId] = useState<string>('');
+
+  const userIdService = useMemo(
+    () =>
+      inputUserIdentityService ??
+      new UserIdentityService({ apiKey: config?.amplitudeApiKey || '' }),
+    [config?.amplitudeApiKey, inputUserIdentityService],
+  );
+
+  useEffect(() => {
+    const fetchUserId = async () => {
+      const id = await userIdService.getUserIdOrDefault();
+      setUserId(id);
+    };
+
+    fetchUserId();
+  }, [config.amplitudeApiKey, inputUserIdentityService, userIdService]);
+
   const namespace = 'spiffy-react-components'; // TODO: Should this be different from the current namespace?
   const source = 'app'; // TODO: Make this dependent upon the "spiffy_on" query param
   const [enviveServiceConfig, setEnviveServiceConfig] = useState<EnviveServiceConfig | null>(null);
@@ -97,7 +134,7 @@ export const EnviveProvider: React.FC<EnviveProviderProps> = ({
       new EnviveConfigService({
         baseUrl: config?.baseUrl || '',
         apiKey: config?.orgLevelApiKey || '',
-        userId: userId || '',
+        userId,
         namespace: namespace || '',
         source: source || '',
       });
@@ -138,7 +175,7 @@ export const EnviveProvider: React.FC<EnviveProviderProps> = ({
           <NewOrgConfigProvider overrideConfig={overrideConfig}>
             <LocalStorageProvider>
               <FeatureFlagServiceProvider featureFlagService={featureFlagService}>
-                <UserIdentityProvider>
+                <UserIdentityProvider userIdService={userIdService}>
                   <AmplitudeProvider externalAmplitudeService={inputAmplitudeService}>
                     <PageProvider previewMode={previewMode}>
                       <UiConfigProvider>
@@ -146,7 +183,11 @@ export const EnviveProvider: React.FC<EnviveProviderProps> = ({
                           <HardcopyProvider>
                             <EnviveCssProvider>
                               <SearchAgentWrapper enabledAgents={enabledAgents}>
-                                <SalesAgentWrapper enabledAgents={enabledAgents}>
+                                <SalesAgentWrapper
+                                  enabledAgents={enabledAgents}
+                                  previewMode={previewMode}
+                                  mockSalesAgentData={mockSalesAgentData}
+                                >
                                   {children}
                                 </SalesAgentWrapper>
                               </SearchAgentWrapper>

package/src/contexts/featureFlagServiceContext/featureFlagServiceContext.tsx

@@ -3,6 +3,8 @@ import { OrgConfigFeatureGate } from 'src/application/models/api/orgConfigResult
 import { FeatureGates } from 'src/application/models/featureGates';
 import Logger from 'src/application/logging/logger';
 
+const FEATURE_FLAGS_STORAGE_KEY = 'spiffy-feature-flags';
+
 // This is the class that was previously implicitly used or defined elsewhere
 export class FeatureFlagService {
   private featureGates: OrgConfigFeatureGate[];
@@ -11,11 +13,94 @@ export class FeatureFlagService {
     this.featureGates = featureGates;
   }
 
+  static getQueryParamFeatureGateOverrides(featureGate: FeatureGates): boolean | undefined {
+    const url = window.location?.href ?? '';
+    if (url.includes('?')) {
+      const urlObj = new URL(url);
+      const params = new URLSearchParams(urlObj.search);
+      const paramsObj = Object.fromEntries(params.entries());
+      const value = paramsObj[featureGate];
+
+      if (value != null) {
+        return value === 'true';
+      }
+    }
+
+    return undefined;
+  }
+
+  static getWindowFeatureGateOverrides(featureGate: FeatureGates): boolean | undefined {
+    if (typeof window === 'undefined') {
+      return undefined;
+    }
+    const windowOverride = window as Window & {
+      _envive?: { featureOverrides?: Record<string, boolean> };
+      _spiffy?: { featureOverrides?: Record<string, boolean> };
+    };
+    const featureOverrides =
+      windowOverride?._envive?.featureOverrides ?? windowOverride?._spiffy?.featureOverrides;
+    const value = featureOverrides?.[String(featureGate)];
+    if (value != null) {
+      return value;
+    }
+    return undefined;
+  }
+
+  static getStoredFeatureGateOverrides(featureGate: FeatureGates): boolean | undefined {
+    if (typeof window === 'undefined' || typeof window.localStorage === 'undefined') {
+      return undefined;
+    }
+    try {
+      const featureFlags = window.localStorage.getItem(FEATURE_FLAGS_STORAGE_KEY);
+      if (!featureFlags) {
+        return undefined;
+      }
+      const featureFlagsObj = JSON.parse(featureFlags) as Record<string, boolean>;
+      return featureFlagsObj[featureGate];
+    } catch (err) {
+      Logger.logError(
+        '[spiffy-ai] getStoredFeatureGateOverrides: error parsing feature flags',
+        err,
+      );
+      return undefined;
+    }
+  }
+
+  static getFeatureFlagOverride(featureGate: FeatureGates): boolean | undefined {
+    const queryOverride = FeatureFlagService.getQueryParamFeatureGateOverrides(featureGate);
+    if (queryOverride != null) {
+      Logger.logDebug(
+        `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} overridden by URL param. New value: ${queryOverride}`,
+      );
+      return queryOverride;
+    }
+
+    const windowOverride = FeatureFlagService.getWindowFeatureGateOverrides(featureGate);
+    if (windowOverride != null) {
+      Logger.logDebug(
+        `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} overridden by window param. New value: ${windowOverride}`,
+      );
+      return windowOverride;
+    }
+
+    const storedOverride = FeatureFlagService.getStoredFeatureGateOverrides(featureGate);
+    if (storedOverride != null) {
+      Logger.logDebug(
+        `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} overridden by stored value. New value: ${storedOverride}`,
+      );
+      return storedOverride;
+    }
+
+    return undefined;
+  }
+
   isFeatureGateEnabled = (featureGate: FeatureGates): boolean => {
     const gateValue = this.featureGates.find(gate => gate.name === featureGate);
 
-    // TODO: Add logic for overrides (query params, window, stored) if needed, similar to the old FeatureFlagContext.tsx
-    // For now, direct value from config is used.
+    const featureFlagOverride = FeatureFlagService.getFeatureFlagOverride(featureGate);
+    if (featureFlagOverride !== undefined) {
+      return featureFlagOverride;
+    }
 
     if (gateValue == null || gateValue.value == null) {
       Logger.logDebug(
@@ -38,6 +123,20 @@ export class FeatureFlagService {
       ]),
     );
   };
+
+  static persistFeatureGateOverrides(): void {
+    if (typeof window === 'undefined' || typeof window.localStorage === 'undefined') {
+      return;
+    }
+    const overrides = Object.values(FeatureGates)
+      .map(
+        featureGate =>
+          [featureGate, FeatureFlagService.getFeatureFlagOverride(featureGate)] as const,
+      )
+      .filter(([, value]) => value !== undefined)
+      .reduce<Record<string, boolean>>((acc, [key, value]) => ({ ...acc, [key]: value! }), {});
+    window.localStorage.setItem(FEATURE_FLAGS_STORAGE_KEY, JSON.stringify(overrides));
+  }
 }
 
 export interface FeatureFlagContextType {

package/src/contexts/graphqlContext/graphqlContext.tsx

@@ -214,11 +214,17 @@ export const GraphQLProvider = ({
 
       // We may update this root config location in the future
       const v3RootConfig = response.me.getProductsConfigByVersion?.v_three_config?.values;
+      const frontendValues = response.me.getProductsConfigByVersion?.frontend?.values;
 
       const v3FrontendConfig = v3FrontendConfigCleanup(
         transformSnakeToCamel(v3RootConfig) as FrontendConfigV3Response,
       );
 
+      // Get merchant_override_css from frontend.values if v3RootConfig is not available
+      const frontendMerchantOverrideCss = frontendValues?.merchant_override_css;
+      const v3MerchantOverrideCss = v3FrontendConfig.uiConfigs?.merchantOverrideCss;
+      const merchantOverrideCss = v3MerchantOverrideCss || frontendMerchantOverrideCss;
+
       const v3MountingConfigsArray = (transformSnakeToCamel(v3RootConfig?.mounting_configs) ??
         []) as unknown as { key: string; config: WidgetMountingConfig }[];
 
@@ -243,9 +249,11 @@ export const GraphQLProvider = ({
         : DEFAULT_PAGE_VARIANTS;
 
       const v3ColorsConfig = transformSnakeToCamel(v3RootConfig?.colors?.values);
+      const isSemanticColors = !window.location.href.includes('globals=merchant');
+      const isStorybook = window.top?.location.href.includes('?path=');
+
       // If the v3 root config is not found and we are configured to return the deprecated config, we will return the mocked config
-      if (!v3RootConfig && mockV3ConfigToDeprecatedConfig) {
-        const isSemanticColors = !window.location.href.includes('globals=merchant');
+      if ((!v3RootConfig && mockV3ConfigToDeprecatedConfig) || (isStorybook && isSemanticColors)) {
         Logger.logInfo('GraphQLContext | Returning mock v3 config', {
           colorsConfig: mockV3ColorsConfig as ColorsConfigV3Response,
           frontendConfig: mockV3FrontendConfig as FrontendConfigV3Response,
@@ -279,6 +287,7 @@ export const GraphQLProvider = ({
         colorsConfig: v3ColorsConfig as ColorsConfigV3Response,
         frontendConfig: {
           ...(v3FrontendConfig as FrontendConfigV3Response),
+          merchantOverrideCss,
           // Need to replace the automatic widget configs with the object based ones
           widgetConfigs: v3WidgetConfigs,
         },

package/src/contexts/graphqlContext/mockV3Config.ts

@@ -7,11 +7,12 @@ import { AnimationSpeed, PromptCarouselRows } from '@envive-ai/react-toolkit-v3/
 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 { SparkleIconColor } from '@envive-ai/react-toolkit-v3/WelcomeMessage';
 
 import { CustomerServiceType } from 'src/types/customerService';
 import { FloatingButtonLocation } from '@envive-ai/react-toolkit-v3/FloatingButton';
-import { ConfigVersionEnum, SocialProofWidgetKind, WidgetTypeV3 } from '../typesV3';
+import { ConfigVersionEnum, WidgetTypeV3 } from '../typesV3';
 
 const mockImages = [
   {
@@ -188,7 +189,7 @@ export const mockV3FrontendConfig: FrontendConfigV3 = {
       type: WidgetTypeV3.SocialProofV3,
 
       imageGalleryLayout: ImageGalleryLayout.FOUR_GRID,
-      kind: SocialProofWidgetKind.STATIC,
+      kind: WidgetKind.STATIC,
       variant: WidgetWrapperVariant.INLINE_WITH_BORDER,
       promptCarouselRows: PromptCarouselRows.TWO_ON_MOBILE_ONE_ON_DESKTOP,
       primaryButtonVariant: PromptButtonVariant.DARK,
@@ -201,7 +202,7 @@ export const mockV3FrontendConfig: FrontendConfigV3 = {
       type: WidgetTypeV3.SocialProofV3,
 
       imageGalleryLayout: ImageGalleryLayout.SINGLE,
-      kind: SocialProofWidgetKind.STATIC,
+      kind: WidgetKind.STATIC,
       variant: WidgetWrapperVariant.CARD_NO_BORDER,
       promptCarouselRows: PromptCarouselRows.TWO_ON_MOBILE_ONE_ON_DESKTOP,
       primaryButtonVariant: PromptButtonVariant.DARK,
@@ -214,7 +215,7 @@ export const mockV3FrontendConfig: FrontendConfigV3 = {
       type: WidgetTypeV3.SocialProofV3,
 
       imageGalleryLayout: ImageGalleryLayout.FOUR_HORIZONTAL,
-      kind: SocialProofWidgetKind.STATIC,
+      kind: WidgetKind.STATIC,
       variant: WidgetWrapperVariant.CARD_WITH_BORDER,
       promptCarouselRows: PromptCarouselRows.TWO_ON_MOBILE_ONE_ON_DESKTOP,
       primaryButtonVariant: PromptButtonVariant.DARK,
@@ -247,5 +248,15 @@ export const mockV3FrontendConfig: FrontendConfigV3 = {
       image: mockImages[0],
       hideTextField: false,
     },
+    'product-card-test-widget': {
+      widgetConfigId: 'product-card-test-widget',
+      contentId: 'product-card-test-widget',
+      type: WidgetTypeV3.ProductCardV3,
+      promptButtonType: PromptButtonVariant.LIGHT,
+      italicizeHeadline: false,
+      fallbackColor: '#F9F6EA',
+      imageSrc:
+        'https://www.bandolierstyle.com/cdn/shop/files/Lily17_Black_Gold_Chrome_MOD_Dec25_6.jpg?v=1765844272',
+    },
   },
 };

package/src/contexts/hardcopyContext/hardcopyContext.tsx

@@ -137,6 +137,35 @@ const MOCK_HARDCOPY_RESPONSE: Partial<Record<WidgetTypeV3, HardcopyResponse>> =
       textFieldPlaceholderText: 'Ask me anything...',
     },
   },
+  [WidgetTypeV3.ProductCardV3]: {
+    language: 'en',
+    values: {
+      headline: 'Discover Your Perfect Style',
+      animatedText: [
+        'the perfect outfit for any occasion',
+        'trending fashion that fits your lifestyle',
+        'quality pieces that last',
+      ],
+      prompts: [
+        'What are your best sellers?',
+        'Show me summer dresses',
+        'Do you have free shipping?',
+        'What sizes are available?',
+        'Can I return items?',
+      ],
+      placeholder: 'Ask me anything...',
+    },
+  },
+  [WidgetTypeV3.FloatingChatV3]: {
+    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...',
+    },
+  },
 };
 
 const HardcopyContext = createContext<HardcopyContextType | undefined>(undefined);

package/src/contexts/salesAgentContext/chatAPI.ts

@@ -1,10 +1,17 @@
 // This component will interact with the backend API to get the responses from the sales agent.
 
 import { PageVisitCategory, UserEventCategory } from '@spiffy-ai/commerce-api-client';
-import { Suggestion, UserEvent } from 'src/application/models';
+import {
+  FormSubmittedAttributes,
+  MessageRole,
+  MessageType,
+  Suggestion,
+  UserEvent,
+} from 'src/application/models';
 import { 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 { SpiffyMetricsEventName, useAmplitude } from '../amplitudeContext';
 
@@ -13,13 +20,15 @@ export interface SalesAgentChatAPI {
   logUserEvent: (event: UserEvent) => void;
   onSuggestionClicked: (suggestion: Suggestion) => void;
   onTypedMessageSubmitted: ({ query, userTyped }: { query: string; userTyped: boolean }) => void;
-  onFormResponseSubmitted: (formResponse: any) => void; // TODO: Figure out the right type
+  onFormResponseSubmitted: (formResponse: 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 queueUserEvent = useSetAtom(queueUserEventAtom);
+  const setReplyEventCategory = useSetAtom(replyEventCategoryAtom);
+  const setFormSubmit = useSetAtom(formSubmitAtom);
   const { trackEvent } = useAmplitude();
 
   const logPageVisit = useCallback(
@@ -68,15 +77,24 @@ export const useSalesAgentChatAPI = () => {
   );
   const onTypedMessageSubmitted = useCallback(
     ({ query, userTyped }: { query: string; userTyped: boolean }) => {
+      const eventId = uuid();
       trackEvent({
         eventName: SpiffyMetricsEventName.ChatUserMessageInput,
         eventProps: {
           query,
-          userTyped,
+          user_typed: userTyped,
+          message_id: eventId,
+          message_role: MessageRole.User,
+          message_type: MessageType.QueryTyped,
+          message_metadata: {
+            content: query,
+            created_at: new Date().toISOString(),
+            user_typed: userTyped,
+          },
         },
       });
       const event: UserEvent = {
-        eventId: uuid(),
+        eventId,
         category: UserEventCategory.QueryTyped,
         createdAt: new Date().toISOString(),
         attributes: {
@@ -88,9 +106,20 @@ export const useSalesAgentChatAPI = () => {
     },
     [queueUserEvent, trackEvent],
   );
-  const onFormResponseSubmitted = useCallback(() => {
-    // TODO: Implement the form response submitted
-  }, []);
+  const onFormResponseSubmitted = useCallback(
+    (form: FormSubmittedAttributes) => {
+      setReplyEventCategory(UserEventCategory.FormSubmitted);
+      setFormSubmit(form);
+      const event: UserEvent = {
+        eventId: uuid(),
+        category: UserEventCategory.FormSubmitted,
+        createdAt: new Date().toISOString(),
+        attributes: form,
+      };
+      queueUserEvent(event);
+    },
+    [queueUserEvent, setReplyEventCategory, setFormSubmit],
+  );
 
   return {
     logPageVisit,