@envive-ai/react-hooks 0.3.10 → 0.3.12

package/src/application/utils/widgetTextRequestToApiRequest.ts

@@ -31,6 +31,9 @@ export const coreWidgetTypeToApiWidgetType = (coreWidgetType: WidgetTypeV3): Wid
       return WidgetType.FloatingButtonV3;
     case WidgetTypeV3.PromptButtonCarouselWithImageV3:
       return WidgetType.SingleImagePromptV3;
+    // TODO: Temporary hack to make it work with FPSA.
+    case WidgetTypeV3.FullPageSalesAgentV3:
+      return WidgetType.FloatingChatV3;
     default:
       throw new Error(`Unsupported widget type: ${coreWidgetType}`);
   }
@@ -39,9 +42,11 @@ export const coreWidgetTypeToApiWidgetType = (coreWidgetType: WidgetTypeV3): Wid
 export const coreWidgetTextRequestToApiRequest = (
   coreWidgetTextRequest: CoreWidgetTextRequest,
 ): ApiWidgetTextRequest => ({
+  id: coreWidgetTextRequest.requestId,
   context: coreContextToApiContext(coreWidgetTextRequest.context),
   feature_flags: coreWidgetTextRequest.featureFlags,
   language: coreWidgetTextRequest.language,
   url: coreWidgetTextRequest.url,
+  org_base_config_version: coreWidgetTextRequest.overrideConfigVersion,
   widget_type: coreWidgetTypeToApiWidgetType(coreWidgetTextRequest.widgetType),
 });

package/src/atoms/app/variant.ts

@@ -1,10 +1,10 @@
-import { atomWithStorage } from 'jotai/utils';
-import { atom } from 'jotai';
 import {
   UserEvent as ApiUserEvent,
   PageVisitCategory,
   SupportedEventResponse,
 } from '@spiffy-ai/commerce-api-client';
+import { atom } from 'jotai';
+import { atomWithStorage } from 'jotai/utils';
 import {
   PDPVariantInfo,
   PLPVariantInfo,
@@ -15,6 +15,8 @@ import {
 } from 'src/application/models';
 import { sessionStorageUtil } from 'src/atoms/atomStore';
 import type { PageVariantInfo } from 'src/contexts/pageContext/types';
+import Logger from 'src/application/logging/logger';
+import { ShowFloatingButtonOptions } from 'src/contexts/types';
 
 export interface SupportedEvent extends Pick<
   SupportedEventResponse,
@@ -167,6 +169,7 @@ const internalPlpIdAtom = atom<string>();
 const internalUrlAtom = atom<string>();
 const internalPageVisitCategoryAtom = atom<PageVisitCategory>();
 const internalVariantAtom = atom<'pdp' | 'plp' | 'search' | 'page_visit'>('pdp');
+const internalFloatingButtonOverrideAtom = atom<ShowFloatingButtonOptions>();
 
 export const variantIdAtom = atom(get => get(internalVariantIdAtom));
 export const productIdAtom = atom(get => get(internalProductIdAtom));
@@ -176,11 +179,13 @@ export const plpIdAtom = atom(get => get(internalPlpIdAtom));
 export const urlAtom = atom(get => get(internalUrlAtom));
 export const pageVisitCategoryAtom = atom(get => get(internalPageVisitCategoryAtom));
 export const variantAtom = atom(get => get(internalVariantAtom));
+export const floatingButtonOverrideAtom = atom(get => get(internalFloatingButtonOverrideAtom));
 export const hasParsedVariantInfoAtom = atom(false);
 
 export const variantInfoAtom = atom(
   (get): VariantInfo => {
     const variant = get(variantAtom);
+    // TODO: Maybe I need to return the fbo here too.
     if (variant === VariantTypeEnum.Pdp) {
       return {
         variantId: get(variantIdAtom),
@@ -188,6 +193,7 @@ export const variantInfoAtom = atom(
         productId: get(productIdAtom),
         parentProductId: get(parentProductIdAtom),
         url: get(urlAtom),
+        floatingButtonOverride: get(floatingButtonOverrideAtom),
       } as PDPVariantInfo;
     }
     if (variant === VariantTypeEnum.Plp) {
@@ -196,6 +202,7 @@ export const variantInfoAtom = atom(
         variant,
         plpId: get(plpIdAtom),
         url: get(urlAtom),
+        floatingButtonOverride: get(floatingButtonOverrideAtom),
       } as PLPVariantInfo;
     }
     if (variant === VariantTypeEnum.PageVisit) {
@@ -204,6 +211,7 @@ export const variantInfoAtom = atom(
         variant,
         url: get(urlAtom),
         pageVisitCategory: get(pageVisitCategoryAtom),
+        floatingButtonOverride: get(floatingButtonOverrideAtom),
       } as PageVisitVariantInfo;
     }
     throw new Error('Invalid variantInfo details');
@@ -211,6 +219,7 @@ export const variantInfoAtom = atom(
   (_, set, newVariant: VariantInfo) => {
     set(internalVariantAtom, newVariant.variant);
     set(internalVariantIdAtom, newVariant.variantId);
+    set(internalFloatingButtonOverrideAtom, newVariant.floatingButtonOverride);
     if (newVariant.variant === VariantTypeEnum.Pdp) {
       set(internalProductIdAtom, newVariant.productId);
       set(internalParentProductIdAtom, newVariant.parentProductId);
@@ -227,6 +236,51 @@ export const variantInfoAtom = atom(
   },
 );
 
+const getPageVisitContext = (pageVisitCategory: PageVisitCategory | undefined) => {
+  if (pageVisitCategory === PageVisitCategory.Search) {
+    const searchParams = new URLSearchParams(window.location.search);
+    const searchTerm = searchParams.get('esq');
+    return {
+      page_type: 'search',
+      page_id: searchTerm,
+    };
+  }
+  if (pageVisitCategory === PageVisitCategory.Homepage) {
+    return {
+      page_type: 'homepage',
+      page_id: window.location.href,
+    };
+  }
+  return {
+    page_type: 'other',
+    page_id: window.location.href,
+  };
+};
+
+export const analyticsContextAtom = atom(get => {
+  const variantInfo = get(variantInfoAtom);
+  if (variantInfo.variant === VariantTypeEnum.Pdp) {
+    return {
+      page_type: 'pdp',
+      page_id: variantInfo.productId,
+    };
+  }
+  if (variantInfo.variant === VariantTypeEnum.Plp) {
+    return {
+      page_type: 'plp',
+      page_id: variantInfo.plpId,
+    };
+  }
+  if (variantInfo.variant === VariantTypeEnum.PageVisit) {
+    return getPageVisitContext(variantInfo.pageVisitCategory);
+  }
+  Logger.logWarn('[envive-ai] Invalid variantInfo', undefined, { variantInfo });
+  return {
+    page_type: 'other',
+    page_id: window.location.href,
+  };
+});
+
 // Atoms for page context - can be set directly by PageProvider or for storybook/testing
 export const pageUserEventAtom = atom<UserEvent | undefined>(undefined);
 export const pageVariantInfoAtom = atom<PageVariantInfo | undefined>(undefined);

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

@@ -376,6 +376,7 @@ describe('AmplitudeProvider - React Context Integration', () => {
         dataResidency: 'EU',
         orgId: 'test-org-id',
         show: true,
+        enviveOn: true,
         getLocalStorageItem: mockGetLocalStorageItem,
         featureFlagService: new FeatureFlagService([]),
         env: 'test', // Provide required fields to match AmplitudeServiceConfig
@@ -415,6 +416,7 @@ describe('AmplitudeProvider - React Context Integration', () => {
         dataResidency: 'EU',
         orgId: 'test-org-id',
         show: true,
+        enviveOn: true,
         getLocalStorageItem: mockGetLocalStorageItem,
         featureFlagService: new FeatureFlagService([]),
         env: 'test',

package/src/contexts/amplitudeContext/amplitudeContext.tsx

@@ -13,11 +13,12 @@ import { useEnviveConfig } from 'src/contexts/enviveConfigContext/enviveConfigCo
 import { useFeatureFlagService } from 'src/contexts/featureFlagServiceContext/featureFlagServiceContext';
 import {
   AmplitudeService,
+  EnviveMetricsEventName,
   SpiffyMetricsEventName,
   TrackEventParams,
 } from 'src/services/amplitudeService/amplitudeService';
 
-export { SpiffyMetricsEventName };
+export { EnviveMetricsEventName, SpiffyMetricsEventName };
 
 interface AmplitudeContextType {
   trackEvent: (params: TrackEventParams) => Promise<void>;
@@ -43,6 +44,7 @@ export const AmplitudeProvider: React.FC<{
     variantUrlOverride,
     variantInfoOverride,
     show,
+    enviveOn,
     orgId,
     orgShortName,
     featureGates,
@@ -72,6 +74,7 @@ export const AmplitudeProvider: React.FC<{
         featureFlagService,
         orgGaConfig,
         show: show ?? false,
+        enviveOn: enviveOn ?? false,
         getLocalStorageItem: getItem,
       });
       setService(amplitudeService);
@@ -91,6 +94,7 @@ export const AmplitudeProvider: React.FC<{
     variantUrlOverride,
     variantInfoOverride,
     show,
+    enviveOn,
     featureGates,
     getItem,
     externalAmplitudeService,

package/src/contexts/enviveConfigContext/enviveConfigContext.tsx

@@ -24,6 +24,7 @@ interface EnviveConfigProviderProps {
   variantUrlOverride?: string;
   variantInfoOverride?: any;
   show?: boolean;
+  enviveOn?: boolean;
   publicKey?: string;
   featureGates?: OrgConfigFeatureGate[]; // New prop for feature gates
 }
@@ -45,6 +46,7 @@ export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
   variantUrlOverride,
   variantInfoOverride,
   show,
+  enviveOn,
   publicKey,
   featureGates, // Destructure new prop
 }) => {
@@ -66,6 +68,7 @@ export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
     variantUrlOverride,
     variantInfoOverride,
     show,
+    enviveOn,
     publicKey,
     featureGates, // Add to config
   };

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

@@ -17,7 +17,8 @@ import { EnviveAgent } from './types';
 import { SearchProvider } from '../searchContext';
 import { SalesAgentProvider } from '../salesAgentContext/salesAgentContext';
 import { SystemSettingsContextProvider } from '../systemSettingsContext';
-import { HardcopyProvider } from '../hardcopyContext';
+import { HardcopyProvider, HardcopyResponse } from '../hardcopyContext';
+import { WidgetTypeV3 } from '../typesV3';
 import { WidgetConfigProvider } from '../widgetConfigContext';
 import { PageProvider } from '../pageContext';
 import { UiConfigProvider } from '../uiConfigContext';
@@ -45,6 +46,7 @@ interface EnviveProviderProps extends AgentWrapperProps {
   variantUrlOverride?: string;
   variantInfoOverride?: any;
   show?: boolean;
+  enviveOn?: boolean;
   publicKey?: string;
   featureGates?: OrgConfigFeatureGate[]; // New prop for feature gates
   featureFlagService?: FeatureFlagService;
@@ -56,6 +58,7 @@ interface EnviveProviderProps extends AgentWrapperProps {
   previewMode?: boolean;
   overrideConfig?: GraphQlConfigValues;
   mockSalesAgentData?: any;
+  hardcopyOverride?: Partial<Record<WidgetTypeV3, HardcopyResponse>>;
 }
 
 const SearchAgentWrapper: React.FC<AgentWrapperProps> = ({ children, enabledAgents }) => {
@@ -67,6 +70,7 @@ const SearchAgentWrapper: React.FC<AgentWrapperProps> = ({ children, enabledAgen
 
 interface SalesAgentWrapperProps extends AgentWrapperProps {
   previewMode?: boolean;
+  showDebugBar: boolean;
   mockSalesAgentData?: any;
 }
 
@@ -74,13 +78,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}
@@ -103,6 +108,7 @@ export const EnviveProvider: React.FC<EnviveProviderProps> = ({
   mockV3ConfigToDeprecatedConfig = false,
   requestV3Config = false,
   mockSalesAgentData,
+  hardcopyOverride,
   ...config
 }) => {
   const [userId, setUserId] = useState<string>('');
@@ -181,12 +187,13 @@ export const EnviveProvider: React.FC<EnviveProviderProps> = ({
                     <PageProvider previewMode={previewMode}>
                       <UiConfigProvider>
                         <WidgetConfigProvider>
-                          <HardcopyProvider>
+                          <HardcopyProvider hardcopyOverride={hardcopyOverride}>
                             <EnviveCssProvider>
                               <SearchAgentWrapper enabledAgents={enabledAgents}>
                                 <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,19 @@
 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 { getQueryParam } from 'src/application/utils';
 import { WidgetTypeV3 } from '../typesV3';
 import { useFeatureFlagService } from '../featureFlagServiceContext/featureFlagServiceContext';
+import { useAmplitude } from '../amplitudeContext';
 
 interface HardcopyRequest {
   widgetType: WidgetTypeV3;
@@ -18,7 +21,9 @@ interface HardcopyRequest {
 }
 
 export type HardcopyResponse = {
+  responseId: string;
   language: string;
+  rawValues?: Record<string, WidgetString | WidgetString[]>;
   values: Record<string, string | string[]>;
 };
 
@@ -29,7 +34,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 +52,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 +65,7 @@ const MOCK_HARDCOPY_RESPONSE: Partial<Record<WidgetTypeV3, HardcopyResponse>> =
     },
   },
   [WidgetTypeV3.TitledPromptCarouselV3]: {
+    responseId: 'mock-response-id',
     language: 'en',
     values: {
       titleLabel: 'Need some help?',
@@ -70,6 +79,7 @@ const MOCK_HARDCOPY_RESPONSE: Partial<Record<WidgetTypeV3, HardcopyResponse>> =
     },
   },
   [WidgetTypeV3.SocialProofV3]: {
+    responseId: 'mock-response-id',
     language: 'en',
     values: {
       titleLabel: 'Shopping Assistant',
@@ -88,6 +98,7 @@ const MOCK_HARDCOPY_RESPONSE: Partial<Record<WidgetTypeV3, HardcopyResponse>> =
     },
   },
   [WidgetTypeV3.TypingAnimationV3]: {
+    responseId: 'mock-response-id',
     language: 'en',
     values: {
       titleLabel: 'Shopping Assistant',
@@ -108,6 +119,7 @@ const MOCK_HARDCOPY_RESPONSE: Partial<Record<WidgetTypeV3, HardcopyResponse>> =
     },
   },
   [WidgetTypeV3.ChatPreviewComparisonV3]: {
+    responseId: 'mock-response-id',
     language: 'en',
     values: {
       titleLabel: 'Shopping Assistant',
@@ -116,6 +128,7 @@ const MOCK_HARDCOPY_RESPONSE: Partial<Record<WidgetTypeV3, HardcopyResponse>> =
     },
   },
   [WidgetTypeV3.ChatPreviewLoadingV3]: {
+    responseId: 'mock-response-id',
     language: 'en',
     values: {
       titleLabel: 'Shopping Assistant',
@@ -123,6 +136,7 @@ const MOCK_HARDCOPY_RESPONSE: Partial<Record<WidgetTypeV3, HardcopyResponse>> =
     },
   },
   [WidgetTypeV3.ChatPreviewV3]: {
+    responseId: 'mock-response-id',
     language: 'en',
     values: {
       titleLabel: 'Shopping Assistant',
@@ -130,6 +144,7 @@ const MOCK_HARDCOPY_RESPONSE: Partial<Record<WidgetTypeV3, HardcopyResponse>> =
     },
   },
   [WidgetTypeV3.PromptButtonCarouselWithImageV3]: {
+    responseId: 'mock-response-id',
     language: 'en',
     values: {
       titleLabel: 'Need some help?',
@@ -138,6 +153,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 +173,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',
@@ -170,26 +198,61 @@ const MOCK_HARDCOPY_RESPONSE: Partial<Record<WidgetTypeV3, HardcopyResponse>> =
 
 const HardcopyContext = createContext<HardcopyContextType | undefined>(undefined);
 
-export const HardcopyProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+interface HardcopyProviderProps {
+  children: ReactNode;
+  hardcopyOverride?: Partial<Record<WidgetTypeV3, HardcopyResponse>>;
+}
+
+export const HardcopyProvider: React.FC<HardcopyProviderProps> = ({
+  children,
+  hardcopyOverride,
+}) => {
   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> => {
+      if (hardcopyOverride?.[request.widgetType]) {
+        Logger.logInfo('hardcopyContext | using hardcopy override', request.widgetType);
+        return hardcopyOverride[request.widgetType]!;
+      }
+      const overrideConfigVersion =
+        getQueryParam('spiffy_config_version') ||
+        getQueryParam('envive_config_version') ||
+        undefined;
       const widgetTextRequest: WidgetTextRequest = {
+        requestId: uuid(),
         widgetType: request.widgetType,
         context,
         featureFlags: featureFlagService?.getFeatureFlags() || {},
         language: languages[0] || 'en',
+        overrideConfigVersion,
         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 +265,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, hardcopyOverride, 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

@@ -67,10 +67,15 @@ export const PageProvider: React.FC<{
 
   const setVariantFromUrlResolver = useCallback(
     (url: string, response: UrlResolverResponse) => {
-      const newVariantInfo = mapUrlResolverResponseToVariantInfo(url, response);
-      const newUserEvent = mapApiUserEventToUserEvent(response.user_event ?? undefined);
-      setVariantInfo(newVariantInfo);
-      setUserEvent(newUserEvent);
+      if (response.ready) {
+        const newVariantInfo = mapUrlResolverResponseToVariantInfo(url, response);
+        const newUserEvent = mapApiUserEventToUserEvent(response.user_event ?? undefined);
+        setVariantInfo(newVariantInfo);
+        setUserEvent(newUserEvent);
+      } else {
+        setUserEvent(undefined);
+        setVariantInfo(undefined);
+      }
     },
     [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;