@envive-ai/react-hooks 0.3.4 → 0.3.5

package/src/application/models/guards/api/isApiPDPEventAttributes.ts

@@ -9,7 +9,11 @@ export const isApiPDPAttributes = (data: unknown): data is PDPAttributes => {
     return false;
   }
 
-  if ('parent_product_id' in data && typeof data.parent_product_id !== 'string') {
+  if (
+    'parent_product_id' in data &&
+    data.parent_product_id !== null &&
+    typeof data.parent_product_id === 'string'
+  ) {
     return false;
   }
 

package/src/atoms/app/index.ts

@@ -18,7 +18,13 @@ export interface AppDetails {
   variantInfo: VariantInfo;
 }
 
-export { pageUserEventAtom, pageVariantInfoAtom, variantInfoAtom } from './variant';
+export {
+  pageUserEventAtom,
+  pageVariantInfoAtom,
+  variantInfoAtom,
+  hasParsedVariantInfoAtom,
+  supportedEventAtom,
+} from './variant';
 
 const internalUserIdAtom = atom<string | undefined>(undefined);
 

package/src/atoms/app/variant.ts

@@ -1,14 +1,15 @@
 import { atomWithStorage } from 'jotai/utils';
 import { atom } from 'jotai';
 import {
+  UserEvent as ApiUserEvent,
   PageVisitCategory,
   SupportedEventResponse,
-  UserEvent,
 } from '@spiffy-ai/commerce-api-client';
 import {
   PDPVariantInfo,
   PLPVariantInfo,
   PageVisitVariantInfo,
+  UserEvent,
   VariantInfo,
   VariantTypeEnum,
 } from 'src/application/models';
@@ -92,7 +93,7 @@ export interface UrlResolverResponse {
   variant_type: string;
   specific_details: UrlResolvingPDPConfig | UrlResolvingPLPConfig | UrlResolvingGenericConfig;
   ready: boolean;
-  user_event?: UserEvent;
+  user_event?: ApiUserEvent;
   page_variant?: BackendPageVariantConfig;
 }
 

package/src/atoms/envive/enviveConfig.ts

@@ -72,14 +72,3 @@ export const orgShortNameAtom = atom(get => {
   Logger.logDebug('enviveConfig.ts: Accessing orgShortName', config);
   return config?.orgShortName;
 });
-export const identifyingPrefixAtom = atom(get => {
-  const config = get(enviveConfigAtom);
-  Logger.logDebug('enviveConfig.ts: Accessing identifyingPrefix', config);
-  return config?.identifyingPrefix || 'spiffy';
-});
-
-export const publicKeyAtom = atom(get => {
-  const config = get(enviveConfigAtom);
-  Logger.logDebug('enviveConfig.ts: Accessing publicKey', config);
-  return config?.publicKey;
-});

package/src/atoms/search/productRetrievalAPI.ts

@@ -58,11 +58,3 @@ export const retrievedProductsAtom = atom(get => {
   const retrievalData = get(productRetrievalAtom).data;
   return retrievalData?.products || [];
 });
-
-export const productRetrievalLoadingAtom = atom(get => {
-  return get(productRetrievalAtom).loading;
-});
-
-export const productRetrievalErrorAtom = atom(get => {
-  return get(productRetrievalAtom).error;
-});

package/src/atoms/search/productRetrievalAdapter.ts

@@ -1,25 +1,21 @@
 import { ProductRetrievalParams, ProductRetrievalResult } from './types';
 
 // This will be set by the ProductRetrievalProvider when it initializes
-let productRetrievalFunction:
-  | ((params: ProductRetrievalParams) => Promise<ProductRetrievalResult>)
-  | null = null;
+const productRetrievalAdapter: {
+  fn: ((params: ProductRetrievalParams) => Promise<ProductRetrievalResult>) | null;
+} = { fn: null };
 
 export const setProductRetrievalFunction = (
   fn: (params: ProductRetrievalParams) => Promise<ProductRetrievalResult>,
 ) => {
-  productRetrievalFunction = fn;
+  productRetrievalAdapter.fn = fn;
 };
 
 export const getProductRetrievalFunction = () => {
-  if (!productRetrievalFunction) {
+  if (!productRetrievalAdapter.fn) {
     throw new Error(
       'Product retrieval function not initialized. Make sure ProductRetrievalProvider is mounted.',
     );
   }
-  return productRetrievalFunction;
-};
-
-export const clearProductRetrievalFunction = () => {
-  productRetrievalFunction = null;
+  return productRetrievalAdapter.fn;
 };

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

@@ -31,7 +31,6 @@ vi.mock('src/services/amplitudeService/amplitudeService', async () => {
     setSupplementalDefaultProps = mockSetSupplementalDefaultProps;
 
     get isReady(): boolean {
-      // eslint-disable-next-line class-methods-use-this
       return mockIsReady();
     }
   }

package/src/contexts/enviveContext/enviveContext.tsx

@@ -50,6 +50,7 @@ interface EnviveProviderProps extends AgentWrapperProps {
   amplitudeService?: AmplitudeService;
   mockV3ConfigToDeprecatedConfig?: boolean;
   requestV3Config?: boolean;
+  previewMode?: boolean;
 }
 
 const SearchAgentWrapper: React.FC<AgentWrapperProps> = ({ children, enabledAgents }) => {
@@ -72,6 +73,7 @@ const SalesAgentWrapper: React.FC<AgentWrapperProps> = ({ children, enabledAgent
 
 export const EnviveProvider: React.FC<EnviveProviderProps> = ({
   children,
+  previewMode = false,
   enabledAgents,
   enviveConfigService: inputEnviveConfigService,
   featureFlagService: inputFeatureFlagService,
@@ -107,8 +109,8 @@ export const EnviveProvider: React.FC<EnviveProviderProps> = ({
     () => ({
       ...config,
       featureGates: enviveServiceConfig?.gates || [],
-      orgShortName: enviveServiceConfig?.org.org.short_name || '',
-      orgId: enviveServiceConfig?.org.org.id || '',
+      orgShortName: enviveServiceConfig?.org?.org?.short_name || '',
+      orgId: enviveServiceConfig?.org?.org?.id || '',
     }),
     [config, enviveServiceConfig],
   );
@@ -136,7 +138,7 @@ export const EnviveProvider: React.FC<EnviveProviderProps> = ({
               <FeatureFlagServiceProvider featureFlagService={featureFlagService}>
                 <UserIdentityProvider>
                   <AmplitudeProvider externalAmplitudeService={inputAmplitudeService}>
-                    <PageProvider>
+                    <PageProvider previewMode={previewMode}>
                       <UiConfigProvider>
                         <WidgetConfigProvider>
                           <HardcopyProvider>

package/src/contexts/graphqlContext/graphqlContext.tsx

@@ -20,8 +20,13 @@ import {
 import { FrontendConfigV3 } from 'src/application/models/frontendConfigV3';
 import { ColorMappingV3 } from 'src/application/models/colorsConfigV3';
 import { mockV3ColorsConfig, mockV3FrontendConfig } from './mockV3Config';
-import { ConfigVersionEnum, WidgetConfigV3 } from '../typesV3';
-import { OrgPageConfig, PageVariantConfig, WidgetMountingConfig } from '../types';
+import { ConfigVersionEnum, Position, WidgetConfigV3 } from '../typesV3';
+import {
+  OrgPageConfig,
+  PageVariantConfig,
+  PageVariantTestType,
+  WidgetMountingConfig,
+} from '../types';
 
 interface BaseMeConfigQueryResponse {
   me: {
@@ -64,6 +69,7 @@ const colorsAndFrontendConfigQuery = () => `
       getProductsConfigByVersion(version: $version) {
         frontend { values }
         colors { values }
+        v_three_config { values }
       }
     }
   }
@@ -75,6 +81,114 @@ type GraphQLProviderProps = {
   mockV3ConfigToDeprecatedConfig?: boolean;
 };
 
+const DEFAULT_PAGE_VARIANTS: PageVariantConfig[] = [
+  {
+    variantId: 'plp',
+    variantType: 'plp',
+    plpIdExtractor: 'url-resolver-plp-id',
+    widgetMounting: [],
+    variantTests: [
+      {
+        testType: PageVariantTestType.UrlResolver,
+      },
+    ],
+  },
+  {
+    variantId: 'pdp',
+    variantType: 'pdp',
+    productIdExtractor: 'url-resolver-product-id',
+    widgetMounting: [],
+    variantTests: [
+      {
+        testType: PageVariantTestType.UrlResolver,
+      },
+    ],
+  },
+];
+
+const mapPositionToCamelCase = (position: string): Position => {
+  if (position === 'bottom-left') {
+    return 'bottomLeft';
+  }
+  if (position === 'middle-left') {
+    return 'middleLeft';
+  }
+  if (position === 'middle-right') {
+    return 'middleRight';
+  }
+  if (position === 'bottom-right') {
+    return 'bottomRight';
+  }
+  throw new Error(`Invalid position: ${position}`);
+};
+
+/**
+ * This function is used to do some additional cleanup of the v3 frontend config to ensure that the config is in the correct format.
+ */
+const v3FrontendConfigCleanup = (
+  v3RootConfig: FrontendConfigV3Response,
+): FrontendConfigV3Response => {
+  const { uiConfigs } = v3RootConfig;
+  if (!uiConfigs) {
+    return v3RootConfig;
+  }
+  const { floatingButton, lookAndFeel } = uiConfigs as any;
+  if (!floatingButton || !lookAndFeel) {
+    return v3RootConfig;
+  }
+  const { fontSize, lineHeight } = lookAndFeel.typography as any;
+  return {
+    ...v3RootConfig,
+    uiConfigs: {
+      ...uiConfigs,
+      floatingButton: {
+        ...floatingButton,
+        position: mapPositionToCamelCase(
+          v3RootConfig.uiConfigs?.floatingButton?.position as string,
+        ),
+      },
+      lookAndFeel: {
+        ...lookAndFeel,
+        chatHeaderLogoDarkSrc: lookAndFeel.chatHeaderLogoDarkSrc || lookAndFeel.chatHeaderLogoSrc,
+        chatHeaderLogoLightSrc: lookAndFeel.chatHeaderLogoLightSrc || lookAndFeel.chatHeaderLogoSrc,
+        typography: {
+          ...lookAndFeel.typography,
+          fontSize: {
+            // The fonts sizes are defined differently in the backend config
+            // so we need to map the values to the correct camel case keys
+            b1: fontSize?.b1 || fontSize?.b_1,
+            b2: fontSize?.b2 || fontSize?.b_2,
+            b3: fontSize?.b3 || fontSize?.b_3,
+            b4: fontSize?.b4 || fontSize?.b_4,
+            b5: fontSize?.b5 || fontSize?.b_5,
+            h1: fontSize?.h1 || fontSize?.h_1,
+            h2: fontSize?.h2 || fontSize?.h_2,
+            h3: fontSize?.h3 || fontSize?.h_3,
+            l1: fontSize?.l1 || fontSize?.l_1,
+            l2: fontSize?.l2 || fontSize?.l_2,
+            t1: fontSize?.t1 || fontSize?.t_1,
+            t2: fontSize?.t2 || fontSize?.t_2,
+            t3: fontSize?.t3 || fontSize?.t_3,
+          },
+          lineHeight: {
+            ...lookAndFeel.typography.lineHeight,
+            '114': lineHeight?.lh_114 || lineHeight?.[114],
+            '116': lineHeight?.lh_116 || lineHeight?.[116],
+            '118': lineHeight?.lh_118 || lineHeight?.[118],
+            '120': lineHeight?.lh_120 || lineHeight?.[120],
+            '124': lineHeight?.lh_124 || lineHeight?.[124],
+            '128': lineHeight?.lh_128 || lineHeight?.[128],
+            '130': lineHeight?.lh_130 || lineHeight?.[130],
+            '133': lineHeight?.lh_133 || lineHeight?.[133],
+            '140': lineHeight?.lh_140 || lineHeight?.[140],
+            '148': lineHeight?.lh_148 || lineHeight?.[148],
+          },
+        },
+      },
+    },
+  };
+};
+
 export const GraphQLProvider = ({
   children,
   requestV3Config = false,
@@ -127,10 +241,11 @@ export const GraphQLProvider = ({
       const response = await executeQuery(query);
 
       // We may update this root config location in the future
-      const v3RootConfig =
-        response.me.getProductsConfigByVersion?.frontend?.values?.ui_configs?.v_three_config;
+      const v3RootConfig = response.me.getProductsConfigByVersion?.v_three_config?.values;
 
-      const v3FrontendConfig = transformSnakeToCamel(v3RootConfig) as FrontendConfigV3Response;
+      const v3FrontendConfig = v3FrontendConfigCleanup(
+        transformSnakeToCamel(v3RootConfig) as FrontendConfigV3Response,
+      );
 
       const v3MountingConfigsArray = (transformSnakeToCamel(v3RootConfig?.mounting_configs) ??
         []) as unknown as { key: string; config: WidgetMountingConfig }[];
@@ -151,9 +266,9 @@ export const GraphQLProvider = ({
           { widgetConfigId, ...rest } as WidgetConfigV3,
         ]),
       ) as Record<string, WidgetConfigV3>;
-      const v3pageVariants = v3RootConfig?.page_variants.map(
-        validateAndTransformPageVariants,
-      ) as PageVariantConfig[];
+      const v3pageVariants: PageVariantConfig[] = Array.isArray(v3RootConfig?.page_variants)
+        ? v3RootConfig?.page_variants.map(validateAndTransformPageVariants)
+        : DEFAULT_PAGE_VARIANTS;
 
       const v3ColorsConfig = transformSnakeToCamel(v3RootConfig?.colors?.values);
 
@@ -172,7 +287,11 @@ export const GraphQLProvider = ({
 
       return {
         colorsConfig: v3ColorsConfig as ColorsConfigV3Response,
-        frontendConfig: v3FrontendConfig as FrontendConfigV3Response,
+        frontendConfig: {
+          ...(v3FrontendConfig as FrontendConfigV3Response),
+          // Need to replace the automatic widget configs with the object based ones
+          widgetConfigs: v3WidgetConfigs,
+        },
         orgPageConfig: {
           pageVariants: v3pageVariants,
           widgetConfigs: v3WidgetConfigs,

package/src/contexts/graphqlContext/mockV3Config.ts

@@ -3,8 +3,13 @@ import { ColorMappingV3, ColorNames, colorVar } from 'src/application/models/col
 import { CamelCasedPropertiesDeep } from 'src/application/models';
 import { ImageGalleryLayout } from '@envive-ai/react-toolkit-v3/ImageGallery';
 import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton';
-import { PromptCarouselRows, AnimationSpeed } from '@envive-ai/react-toolkit-v3/PromptCarousel';
+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 { SparkleIconColor } from '@envive-ai/react-toolkit-v3/WelcomeMessage';
+
+import { CustomerServiceType } from 'src/types/customerService';
 import { ConfigVersionEnum, SocialProofWidgetKind, WidgetTypeV3 } from '../typesV3';
 
 const mockImages = [
@@ -49,13 +54,14 @@ export const mockV3FrontendConfig: FrontendConfigV3 = {
     version: ConfigVersionEnum.V3,
     shortName: 'Envive AI',
     lookAndFeel: {
-      theme: 'standard',
+      theme: Theme.STANDARD,
       agentName: 'Envive AI',
-      chatHeaderLogoSrc: 'https://cdn.spiffy.ai/other/assets/envive-ai/Envive_Logo_Lt.svg',
+      chatHeaderLogoDarkSrc: 'https://cdn.spiffy.ai/other/assets/envive-ai/Envive_Logo_DK.svg',
+      chatHeaderLogoLightSrc: 'https://cdn.spiffy.ai/other/assets/envive-ai/Envive_Logo_Lt.svg',
       widgetLogoSrc: 'https://cdn.spiffy.ai/other/assets/envive-ai/Envive_Logo_DK.svg',
       hideWidgetLogo: false,
       elementRadius: 8,
-      imageAspectRatio: '3/4',
+      imageAspectRatio: '1/1',
       buttonColors: {
         lightButtonBackgroundColor: colorVar(ColorNames.BackgroundSecondary),
         lightButtonIconColor: colorVar(ColorNames.AccentPrimary),
@@ -105,22 +111,31 @@ export const mockV3FrontendConfig: FrontendConfigV3 = {
       },
     },
     floatingButton: {
-      position: 'bottom-right',
-      backgroundColor: colorVar(ColorNames.BackgroundPrimary),
-      mode: 'light',
+      position: 'bottomRight',
+      backgroundColor: ColorNames.BackgroundPrimary,
+      mode: 'dark',
       showOption: 'always',
       style: 'attached',
       iconSVGSrc: '',
     },
     floatingChat: {
-      headerBackgroundColor: colorVar(ColorNames.BackgroundPrimary),
-      headerMode: 'dark',
-      welcomeMessageIconColor: colorVar(ColorNames.AccentPrimary),
-      showVerifiedBuyer: false,
-      userCanEditQueries: true,
+      headerBackgroundColor: undefined,
+      headerMode: ChatHeaderVariant.DARK,
+      welcomeMessageIconColor: SparkleIconColor.ACCENT_PRIMARY,
+      showVerifiedBuyer: true,
+      userQueryInputEnabled: true,
       showEnviveLogo: true,
       ignoreFirstModelResponse: false,
       neverShowSingleProductCards: false,
+      welcomeMessageTitle: 'Welcome to Envive AI',
+      welcomeMessageText:
+        'Your personal shopper trained on the collective knowledge of thousands of real experts!',
+      chatFooterTextFieldPlaceholderText: 'Ask me anything...',
+    },
+    customerServiceIntegration: {
+      provider: CustomerServiceType.unsupported,
+      enabled: false,
+      suppressMerchantButton: false,
     },
   },
   pageVariants: [],
@@ -205,5 +220,31 @@ export const mockV3FrontendConfig: FrontendConfigV3 = {
       secondaryButtonVariant: PromptButtonVariant.LIGHT,
       images: mockImages,
     },
+    'typing-animation-test-light-widget': {
+      widgetConfigId: 'typing-animation-test-light-widget',
+      contentId: 'typing-animation-test-light-widget',
+      type: WidgetTypeV3.TypingAnimationV3,
+      widgetVariant: WidgetWrapperVariant.CARD_WITH_BORDER,
+      promptButtonType: PromptButtonVariant.LIGHT,
+      promptCarouselRows: PromptCarouselRows.ALWAYS_ONE,
+      showTextField: true,
+    },
+    'typing-animation-test-dark-widget': {
+      widgetConfigId: 'typing-animation-test-dark-widget',
+      contentId: 'typing-animation-test-dark-widget',
+      type: WidgetTypeV3.TypingAnimationV3,
+      widgetVariant: WidgetWrapperVariant.CARD_WITH_BORDER,
+      promptButtonType: PromptButtonVariant.DARK,
+      promptCarouselRows: PromptCarouselRows.ALWAYS_ONE,
+      showTextField: true,
+    },
+    'prompt-button-carousel-with-image-test-widget': {
+      widgetConfigId: 'prompt-button-carousel-with-image-test-widget',
+      contentId: 'prompt-button-carousel-with-image-test-widget',
+      type: WidgetTypeV3.PromptButtonCarouselWithImageV3,
+      promptButtonType: PromptButtonVariant.LIGHT,
+      image: mockImages[0],
+      hideTextField: false,
+    },
   },
 };

package/src/contexts/hardcopyContext/hardcopyContext.tsx

@@ -1,4 +1,3 @@
-import { UserEvent } from '@spiffy-ai/commerce-api-client';
 import { ReactNode, createContext, useCallback, useContext, useMemo, useState } from 'react';
 import Logger from 'src/application/logging/logger';
 
@@ -9,6 +8,7 @@ import { WidgetTextRequest } from 'src/application/models/api/widgetTextRequest'
 import { useAtomValue } from 'jotai';
 import { appDetailsAtom } from 'src/atoms/app';
 import { toCamelCase } from 'src/application/models/utils/snakeToCamelTransformer';
+import { UserEvent } from 'src/application/models';
 import { WidgetTypeV3 } from '../typesV3';
 import { useFeatureFlagService } from '../featureFlagServiceContext/featureFlagServiceContext';
 
@@ -69,18 +69,6 @@ const MOCK_HARDCOPY_RESPONSE: Partial<Record<WidgetTypeV3, HardcopyResponse>> =
       ],
     },
   },
-  [WidgetTypeV3.TypingAnimationV3]: {
-    language: 'en',
-    values: {
-      chatPreviewTitle: 'Chat Preview Title',
-      typewriterTextPrefix: 'Want to know',
-      typewriterTexts: ['more about this product?', 'what others are saying?', 'how to use it?'],
-      suggestionButtons: ['Button 1', 'Button 2', 'Button 3'],
-      footerText: 'Ask me anything...',
-
-      chatPreviewDescription: 'Chat Preview Description',
-    },
-  },
   [WidgetTypeV3.SocialProofV3]: {
     language: 'en',
     values: {
@@ -99,6 +87,26 @@ const MOCK_HARDCOPY_RESPONSE: Partial<Record<WidgetTypeV3, HardcopyResponse>> =
       textFieldPlaceholderText: 'Ask me anything...',
     },
   },
+  [WidgetTypeV3.TypingAnimationV3]: {
+    language: 'en',
+    values: {
+      titleLabel: 'Shopping Assistant',
+      headlineText: 'Need help finding',
+      animatedTextSequence: [
+        'the perfect gift for your loved ones?',
+        'something special for the holidays?',
+        'the ideal present for someone special?',
+      ],
+      hintText: 'Ask me anything',
+      promptButtonTexts: [
+        'What are your best sellers?',
+        'Show me summer dresses',
+        'Do you have free shipping?',
+        'What sizes are available?',
+      ],
+      textFieldAriaLabel: 'Ask me anything',
+    },
+  },
   [WidgetTypeV3.ChatPreviewComparisonV3]: {
     language: 'en',
     values: {
@@ -121,6 +129,14 @@ const MOCK_HARDCOPY_RESPONSE: Partial<Record<WidgetTypeV3, HardcopyResponse>> =
       textFieldPlaceholderText: 'Ask me anything...',
     },
   },
+  [WidgetTypeV3.PromptButtonCarouselWithImageV3]: {
+    language: 'en',
+    values: {
+      titleLabel: 'Need some help?',
+      promptButtonsTexts: ['Help me find a product', "What's on your mind?", 'Talk to a human'],
+      textFieldPlaceholderText: 'Ask me anything...',
+    },
+  },
 };
 
 const HardcopyContext = createContext<HardcopyContextType | undefined>(undefined);