@envive-ai/react-hooks 0.3.3 → 0.3.5

package/src/contexts/graphqlContext/mockV3Config.ts

@@ -0,0 +1,250 @@
+import { FrontendConfigV3 } from 'src/application/models/frontendConfigV3';
+import { ColorMappingV3, ColorNames, colorVar } from 'src/application/models/colorsConfigV3';
+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 { 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 = [
+  {
+    src: 'https://picsum.photos/400/600',
+    alt: 'Image 1',
+  },
+  {
+    src: 'https://picsum.photos/400/600',
+    alt: 'Image 2',
+  },
+  {
+    src: 'https://picsum.photos/400/600',
+    alt: 'Image 3',
+  },
+  {
+    src: 'https://picsum.photos/400/600',
+    alt: 'Image 4',
+  },
+];
+
+export const mockV3ColorsConfig: CamelCasedPropertiesDeep<ColorMappingV3> = {
+  textPrimary: '#021414',
+  textSecondary: '#666666',
+  textAccent: '#478D87',
+  textLink: '#042E2C',
+  textLight: '#FFFFFF',
+  backgroundPrimary: '#1F5F51',
+  backgroundSecondary: '#F9F6EA',
+  backgroundTertiary: '#EEECDD',
+  backgroundDark: '#021414',
+  backgroundLight: '#FFFFFF',
+  borderLight: '#E6E7E7',
+  borderMedium: '#B3B8B8',
+  borderDark: '#021414',
+  accentPrimary: '#1F5F51',
+  accentSecondary: '#AE8659',
+};
+
+export const mockV3FrontendConfig: FrontendConfigV3 = {
+  uiConfigs: {
+    version: ConfigVersionEnum.V3,
+    shortName: 'Envive AI',
+    lookAndFeel: {
+      theme: Theme.STANDARD,
+      agentName: 'Envive AI',
+      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: '1/1',
+      buttonColors: {
+        lightButtonBackgroundColor: colorVar(ColorNames.BackgroundSecondary),
+        lightButtonIconColor: colorVar(ColorNames.AccentPrimary),
+        darkButtonBackgroundColor: colorVar(ColorNames.BackgroundDark),
+        darkButtonIconColor: colorVar(ColorNames.AccentPrimary),
+      },
+      typography: {
+        titleFontFamily: 'Poppins',
+        headerFontFamily: 'Poppins',
+        bodyFontFamily: 'Inter Variable',
+        fontSize: {
+          t1: '32px',
+          t2: '28px',
+          t3: '24px',
+          h1: '20px',
+          h2: '16px',
+          h3: '14px',
+          b1: '20px',
+          b2: '16px',
+          b3: '14px',
+          b4: '12px',
+          b5: '10px',
+          l1: '14px',
+          l2: '12px',
+        },
+        fontWeight: {
+          rg: '400',
+          md: '500',
+          sb: '600',
+        },
+        letterSpacing: {
+          '0': '0em',
+          'wide-1': '1px',
+        },
+        lineHeight: {
+          '124': 1.24,
+          '120': 1.2,
+          '118': 1.18,
+          '116': 1.16,
+          '114': 1.14,
+          '148': 1.48,
+          '140': 1.4,
+          '128': 1.28,
+          '130': 1.3,
+          '133': 1.33,
+        },
+      },
+    },
+    floatingButton: {
+      position: 'bottomRight',
+      backgroundColor: ColorNames.BackgroundPrimary,
+      mode: 'dark',
+      showOption: 'always',
+      style: 'attached',
+      iconSVGSrc: '',
+    },
+    floatingChat: {
+      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: [],
+  mountingConfigs: {},
+  widgetConfigs: {
+    'prompt-carousel-test-light-widget': {
+      widgetConfigId: 'prompt-carousel-test-light-widget',
+      contentId: 'prompt-carousel-test-light-widget',
+      type: WidgetTypeV3.PromptCarouselV3,
+
+      promptButtonType: PromptButtonVariant.LIGHT,
+      boldFirstButton: false,
+      promptCarouselRows: PromptCarouselRows.ALWAYS_ONE,
+      animationSpeed: AnimationSpeed.FAST,
+    },
+    'prompt-carousel-test-dark-widget': {
+      widgetConfigId: 'prompt-carousel-test-dark-widget',
+      contentId: 'prompt-carousel-test-dark-widget',
+      type: WidgetTypeV3.PromptCarouselV3,
+
+      promptButtonType: PromptButtonVariant.DARK,
+      boldFirstButton: false,
+      promptCarouselRows: PromptCarouselRows.ALWAYS_ONE,
+      animationSpeed: AnimationSpeed.FAST,
+    },
+    'titled-prompt-carousel-test-light-widget': {
+      widgetConfigId: 'titled-prompt-carousel-test-light-widget',
+      contentId: 'titled-prompt-carousel-test-light-widget',
+      type: WidgetTypeV3.TitledPromptCarouselV3,
+
+      promptButtonType: PromptButtonVariant.LIGHT,
+      boldFirstButton: false,
+      promptCarouselRows: PromptCarouselRows.ALWAYS_ONE,
+      animationSpeed: AnimationSpeed.FAST,
+    },
+    'titled-prompt-carousel-test-dark-widget': {
+      widgetConfigId: 'titled-prompt-carousel-test-dark-widget',
+      contentId: 'titled-prompt-carousel-test-dark-widget',
+      type: WidgetTypeV3.TitledPromptCarouselV3,
+
+      promptButtonType: PromptButtonVariant.DARK,
+      boldFirstButton: false,
+      promptCarouselRows: PromptCarouselRows.ALWAYS_ONE,
+      animationSpeed: AnimationSpeed.FAST,
+    },
+    'social-proof-test-widget-four-grid': {
+      widgetConfigId: 'social-proof-test-widget-four-grid',
+      contentId: 'social-proof-test-widget-four-grid',
+      type: WidgetTypeV3.SocialProofV3,
+
+      imageGalleryLayout: ImageGalleryLayout.FOUR_GRID,
+      kind: SocialProofWidgetKind.STATIC,
+      variant: WidgetWrapperVariant.INLINE_WITH_BORDER,
+      promptCarouselRows: PromptCarouselRows.TWO_ON_MOBILE_ONE_ON_DESKTOP,
+      primaryButtonVariant: PromptButtonVariant.DARK,
+      secondaryButtonVariant: PromptButtonVariant.LIGHT,
+      images: mockImages,
+    },
+    'social-proof-test-widget-single': {
+      widgetConfigId: 'social-proof-test-widget-single',
+      contentId: 'social-proof-test-widget-single',
+      type: WidgetTypeV3.SocialProofV3,
+
+      imageGalleryLayout: ImageGalleryLayout.SINGLE,
+      kind: SocialProofWidgetKind.STATIC,
+      variant: WidgetWrapperVariant.CARD_NO_BORDER,
+      promptCarouselRows: PromptCarouselRows.TWO_ON_MOBILE_ONE_ON_DESKTOP,
+      primaryButtonVariant: PromptButtonVariant.DARK,
+      secondaryButtonVariant: PromptButtonVariant.LIGHT,
+      images: mockImages,
+    },
+    'social-proof-test-widget-four-horizontal': {
+      widgetConfigId: 'social-proof-test-widget-four-horizontal',
+      contentId: 'social-proof-test-widget-four-horizontal',
+      type: WidgetTypeV3.SocialProofV3,
+
+      imageGalleryLayout: ImageGalleryLayout.FOUR_HORIZONTAL,
+      kind: SocialProofWidgetKind.STATIC,
+      variant: WidgetWrapperVariant.CARD_WITH_BORDER,
+      promptCarouselRows: PromptCarouselRows.TWO_ON_MOBILE_ONE_ON_DESKTOP,
+      primaryButtonVariant: PromptButtonVariant.DARK,
+      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,7 +1,16 @@
-import { UserEvent } from '@spiffy-ai/commerce-api-client';
-import { ReactNode, createContext, useCallback, useContext, useMemo } from 'react';
+import { ReactNode, createContext, useCallback, useContext, useMemo, useState } from 'react';
 import Logger from 'src/application/logging/logger';
-import { WidgetTypeV3 } from '../types';
+
+import CommerceApiClient from 'src/application/commerce-api';
+import { 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 { toCamelCase } from 'src/application/models/utils/snakeToCamelTransformer';
+import { UserEvent } from 'src/application/models';
+import { WidgetTypeV3 } from '../typesV3';
+import { useFeatureFlagService } from '../featureFlagServiceContext/featureFlagServiceContext';
 
 interface HardcopyRequest {
   widgetType: WidgetTypeV3;
@@ -15,28 +24,117 @@ export type HardcopyResponse = {
 
 interface HardcopyContextType {
   getHardcopy: (HardcopyRequest: HardcopyRequest) => Promise<HardcopyResponse>;
+  isLoading: boolean;
 }
 
+const convertToHardcopyResponse = (response: WidgetText): HardcopyResponse => {
+  return {
+    language: response.language,
+    values: Object.fromEntries(
+      Object.entries(response.values).map(([key, value]) => [
+        // Transform the key from snake_case to camelCase
+        toCamelCase(key),
+        value.length === 1 ? value[0].value : value.map(v => v.value),
+      ]),
+    ),
+  };
+};
+
 // These are just sample responses for the sake of testing.
 // As we start to build the actual widgets we should determine what the actual
 // values and their names should be.
 const MOCK_HARDCOPY_RESPONSE: Partial<Record<WidgetTypeV3, HardcopyResponse>> = {
-  [WidgetTypeV3.SuggestionBarV3]: {
+  [WidgetTypeV3.PromptCarouselV3]: {
     language: 'en',
     values: {
-      suggestionBarButtons: ['Button 1', 'Button 2', 'Button 3'],
+      promptButtonTexts: [
+        'What are your best sellers?',
+        'Show me summer dresses',
+        'Do you have free shipping?',
+        'What sizes are available?',
+        'Can I return items?',
+      ],
+    },
+  },
+  [WidgetTypeV3.TitledPromptCarouselV3]: {
+    language: 'en',
+    values: {
+      titleLabel: 'Need some help?',
+      promptButtonTexts: [
+        'What are your best sellers?',
+        'Show me summer dresses',
+        'Do you have free shipping?',
+        'What sizes are available?',
+        'Can I return items?',
+      ],
+    },
+  },
+  [WidgetTypeV3.SocialProofV3]: {
+    language: 'en',
+    values: {
+      titleLabel: 'Shopping Assistant',
+      numberOfCustomersText: '123 customers',
+      customerQueryText: 'found what they were looking for...',
+      primaryButtonText: 'Start shopping',
+      secondaryButtonTitleText: 'Popular searches',
+      secondaryButtonTexts: [
+        'Why should I buy from you?',
+        'How do I return an item?',
+        'New arrivals',
+        'Sale items',
+        'Popular items',
+      ],
+      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: {
+      titleLabel: 'Shopping Assistant',
+      headlineText: 'Need help comparing?',
+      textFieldPlaceholderText: 'Ask me anything...',
+    },
+  },
+  [WidgetTypeV3.ChatPreviewLoadingV3]: {
+    language: 'en',
+    values: {
+      titleLabel: 'Shopping Assistant',
+      textFieldPlaceholderText: 'Ask me anything...',
     },
   },
   [WidgetTypeV3.ChatPreviewV3]: {
     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',
+      titleLabel: 'Shopping Assistant',
+      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...',
     },
   },
 };
@@ -45,18 +143,58 @@ const HardcopyContext = createContext<HardcopyContextType | undefined>(undefined
 
 export const HardcopyProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
   const languages = useMemo(() => navigator.languages, []);
+  const [isLoading, setIsLoading] = useState(false);
+  const context = useAtomValue(appDetailsAtom);
 
-  const getHardcopy = useCallback(async (request: HardcopyRequest): Promise<HardcopyResponse> => {
-    Logger.logInfo('hardcopyContext | retrieving hardcopy', languages);
-    const response = MOCK_HARDCOPY_RESPONSE[request.widgetType];
-    Logger.logInfo('hardcopyContext | returning hardcopy response', response);
-    if (!response) {
+  const { featureFlagService } = useFeatureFlagService();
+  const getHardcopyFromBackend = useCallback(
+    async (request: HardcopyRequest): Promise<HardcopyResponse> => {
+      const widgetTextRequest: WidgetTextRequest = {
+        widgetType: request.widgetType,
+        context,
+        featureFlags: featureFlagService?.getFeatureFlags() || {},
+        language: languages[0] || 'en',
+        url: window.location.href,
+      };
+      try {
+        const response = await CommerceApiClient.getHardcopy(widgetTextRequest);
+        if (response) {
+          const convertedResponse = convertToHardcopyResponse(response);
+          Logger.logInfo('hardcopyContext | converted response', convertedResponse);
+          return convertedResponse;
+        }
+      } catch (error) {
+        Logger.logError('hardcopyContext | error getting hardcopy from backend', error);
+      }
+      const mockResponse = MOCK_HARDCOPY_RESPONSE[request.widgetType];
+      if (mockResponse) {
+        Logger.logInfo('hardcopyContext | no real response, using mock', mockResponse);
+        return mockResponse;
+      }
       throw new Error(`No hardcopy response found for widget type: ${request.widgetType}`);
-    }
-    return response;
-  }, []);
+    },
+    [context, featureFlagService, languages],
+  );
+
+  const getHardcopy = useCallback(
+    async (request: HardcopyRequest): Promise<HardcopyResponse> => {
+      setIsLoading(true);
+      Logger.logInfo('hardcopyContext | retrieving hardcopy', languages);
+
+      Logger.logInfo('hardcopyContext | request', request);
+      const response = await getHardcopyFromBackend(request);
+      Logger.logInfo('hardcopyContext | returning hardcopy response', response);
+      if (!response) {
+        setIsLoading(false);
+        throw new Error(`No hardcopy response found for widget type: ${request.widgetType}`);
+      }
+      setIsLoading(false);
+      return response;
+    },
+    [getHardcopyFromBackend, languages],
+  );
 
-  const value = useMemo(() => ({ getHardcopy }), [getHardcopy]);
+  const value = useMemo(() => ({ getHardcopy, isLoading }), [getHardcopy, isLoading]);
 
   return <HardcopyContext.Provider value={value}>{children}</HardcopyContext.Provider>;
 };

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

@@ -6,12 +6,12 @@ import { GraphQLProvider } from 'src/contexts/graphqlContext/graphqlContext';
 import { LocalStorageProvider } from 'src/contexts/localStorageContext/localStorageContext';
 import { newOrgConfigAtom } from 'src/atoms/org/newOrgConfigAtom';
 import { orgShortNameAtom } from 'src/atoms/envive/enviveConfig';
-import { useColorsAndFrontendConfig } from 'src/hooks/GraphQLConfig/useGraphQLConfig';
+import { useUIConfig } from 'src/hooks/GraphQLConfig/useGraphQLConfig';
 import { NewOrgConfigProvider, useNewOrgConfigContext } from '../newOrgConfigContext';
 
-// Mock the useColorsAndFrontendConfig hook
+// Mock the useUIConfig hook
 vi.mock('src/hooks/GraphQLConfig/useGraphQLConfig', () => ({
-  useColorsAndFrontendConfig: vi.fn(),
+  useUIConfig: vi.fn(),
 }));
 
 // Component that uses the useNewOrgConfigContext hook
@@ -59,8 +59,8 @@ const TestWrapper: React.FC<{
   };
 }> = ({ children, orgShortName, mockHookData = {} }) => {
   // Mock the hook
-  const mockUseColorsAndFrontendConfig = useColorsAndFrontendConfig as any;
-  mockUseColorsAndFrontendConfig.mockReturnValue({
+  const mockUseUIConfig = useUIConfig as any;
+  mockUseUIConfig.mockReturnValue({
     data: mockHookData.data || {},
     loading: mockHookData.loading ?? false,
     error: mockHookData.error || null,
@@ -186,7 +186,7 @@ describe('NewOrgConfigProvider', () => {
   });
 
   describe('Error Handling', () => {
-    it('should handle errors from useColorsAndFrontendConfig', async () => {
+    it('should handle errors from useUIConfig', async () => {
       const testError = new Error('Failed to fetch config');
 
       render(

package/src/contexts/newOrgConfigContext/newOrgConfigContext.tsx

@@ -1,10 +1,8 @@
 import React, { ReactNode, createContext, useContext, useMemo } from 'react';
 import { useAtomValue, useSetAtom } from 'jotai';
-import { useColorsAndFrontendConfig } from 'src/hooks/GraphQLConfig/useGraphQLConfig';
+import { useUIConfig } from 'src/hooks/GraphQLConfig/useGraphQLConfig';
 import { orgShortNameAtom } from 'src/atoms/envive/enviveConfig';
 import { newOrgConfigAtom } from 'src/atoms/org/newOrgConfigAtom'; // Import newOrgConfigAtom
-import { OrgConfigFeatureGate } from 'src/application/models/api/orgConfigResults'; // Import OrgConfigFeatureGate
-import { FeatureFlagServiceProvider } from 'src/contexts/featureFlagServiceContext/featureFlagServiceContext'; // Import FeatureFlagServiceProvider
 import { GraphQlConfigValues } from '../graphqlContext';
 
 export type NewOrgConfigContextType = GraphQlConfigValues & {
@@ -22,7 +20,8 @@ export const NewOrgConfigProvider: React.FC<NewOrgConfigProviderProps> = ({ chil
   const orgShortName = useAtomValue(orgShortNameAtom);
   const setNewOrgConfig = useSetAtom(newOrgConfigAtom);
 
-  const { data: newConfig, loading, error } = useColorsAndFrontendConfig();
+  const { data: newConfig, loading, error } = useUIConfig();
+  console.log('NewOrgConfigProvider: newConfig', newConfig, loading, error);
 
   const contextValue = useMemo(() => {
     if (!orgShortName || loading) {
@@ -34,17 +33,10 @@ export const NewOrgConfigProvider: React.FC<NewOrgConfigProviderProps> = ({ chil
     }
     setNewOrgConfig(newConfig);
     return { ...newConfig, loading: false, error: null };
-  }, [orgShortName, loading, error]);
-
-  // TODO: Provide actual featureGates when available in combinedConfig
-  const featureGates: OrgConfigFeatureGate[] = [];
+  }, [orgShortName, loading, error, setNewOrgConfig, newConfig]);
 
   return (
-    <NewOrgConfigContext.Provider value={contextValue}>
-      <FeatureFlagServiceProvider featureGates={featureGates}>
-        {children}
-      </FeatureFlagServiceProvider>
-    </NewOrgConfigContext.Provider>
+    <NewOrgConfigContext.Provider value={contextValue}>{children}</NewOrgConfigContext.Provider>
   );
 };