@envive-ai/react-hooks 0.3.2 → 0.3.4

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 { WidgetTypeV3 } from '../typesV3';
+import { useFeatureFlagService } from '../featureFlagServiceContext/featureFlagServiceContext';
 
 interface HardcopyRequest {
   widgetType: WidgetTypeV3;
@@ -15,19 +24,52 @@ 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.ChatPreviewV3]: {
+  [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.TypingAnimationV3]: {
     language: 'en',
     values: {
       chatPreviewTitle: 'Chat Preview Title',
@@ -39,24 +81,104 @@ const MOCK_HARDCOPY_RESPONSE: Partial<Record<WidgetTypeV3, HardcopyResponse>> =
       chatPreviewDescription: 'Chat Preview Description',
     },
   },
+  [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.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: {
+      titleLabel: 'Shopping Assistant',
+      textFieldPlaceholderText: 'Ask me anything...',
+    },
+  },
 };
 
 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>
   );
 };
 

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

@@ -1,13 +1,13 @@
-import React from 'react';
+import { PageVisitCategory, UserEvent } from '@spiffy-ai/commerce-api-client';
 import { act, render, screen, waitFor } from '@testing-library/react';
 import { Provider, useAtom } from 'jotai';
-import { PageVisitCategory, UserEvent } from '@spiffy-ai/commerce-api-client';
-import { urlResolverAtom, UrlResolverResponse } from 'src/atoms/app/variant';
-import Logger from 'src/application/logging/logger';
+import React from 'react';
 import CommerceApiClient from 'src/application/commerce-api';
+import Logger from 'src/application/logging/logger';
 import { VariantTypeEnum } from 'src/application/models';
-import { PageProvider, usePage } from '../pageContext';
+import { UrlResolverResponse, urlResolverAtom } from 'src/atoms/app/variant';
 import { mapUrlResolverResponseToVariantInfo } from '../mapping';
+import { PageProvider, usePage } from '../pageContext';
 
 // Mock the Logger to avoid console output in tests
 vi.spyOn(Logger, 'logInfo').mockImplementation(() => {});
@@ -207,7 +207,9 @@ describe('PageProvider', () => {
       // Empty string is falsy, so resolveUrl should not be called
       // The component checks `if (!pageUrl)` which treats empty string as falsy
       await act(async () => {
-        await new Promise(resolve => setTimeout(resolve, 100));
+        await new Promise<void>(resolve => {
+          setTimeout(resolve, 100);
+        });
       });
 
       expect(mockResolveUrl).not.toHaveBeenCalled();
@@ -498,7 +500,7 @@ describe('PageProvider', () => {
 
       let renderCount = 0;
       const CountingComponent: React.FC = () => {
-        renderCount++;
+        renderCount += 1;
         const context = usePage();
         return <div data-testid="count">{renderCount}</div>;
       };
@@ -514,7 +516,9 @@ describe('PageProvider', () => {
 
       // Trigger a re-render (simulating parent re-render)
       await act(async () => {
-        await new Promise(resolve => setTimeout(resolve, 100));
+        await new Promise<void>(resolve => {
+          setTimeout(resolve, 100);
+        });
       });
 
       // The context value should be memoized, so additional renders
@@ -566,6 +570,9 @@ describe('mapUrlResolverResponseToVariantInfo', () => {
         pdp_attributes: {
           product_id: 'test-product-123',
         },
+        collections: ['test-collection-123'],
+        number_of_reviews: 10,
+        merchant_tags: ['test-merchant-tag-123'],
       },
       ready: true,
     };
@@ -575,6 +582,9 @@ describe('mapUrlResolverResponseToVariantInfo', () => {
     expect(result).toEqual({
       variantType: VariantTypeEnum.Pdp,
       productId: 'test-product-123',
+      collections: ['test-collection-123'],
+      numberOfReviews: 10,
+      merchantTags: ['test-merchant-tag-123'],
       url: 'https://example.com/product',
     });
   });
@@ -583,6 +593,7 @@ describe('mapUrlResolverResponseToVariantInfo', () => {
     const response: UrlResolverResponse = {
       variant_type: VariantTypeEnum.Plp,
       specific_details: {
+        top_category: 'test-top-category',
         plp_attributes: {
           attributes: {
             id: 'test-plp-456',
@@ -597,6 +608,7 @@ describe('mapUrlResolverResponseToVariantInfo', () => {
     expect(result).toEqual({
       variantType: VariantTypeEnum.Plp,
       plpId: 'test-plp-456',
+      topCategory: 'test-top-category',
       url: 'https://example.com/category',
     });
   });
@@ -630,6 +642,9 @@ describe('mapUrlResolverResponseToVariantInfo', () => {
     expect(result).toEqual({
       variantType: VariantTypeEnum.Pdp,
       productId: '',
+      collections: [],
+      numberOfReviews: 0,
+      merchantTags: [],
       url: 'https://example.com/product',
     });
   });
@@ -648,6 +663,7 @@ describe('mapUrlResolverResponseToVariantInfo', () => {
     expect(result).toEqual({
       variantType: VariantTypeEnum.Plp,
       plpId: '',
+      topCategory: '',
       url: 'https://example.com/category',
     });
   });

package/src/contexts/pageContext/mapping.ts

@@ -15,6 +15,9 @@ export const mapUrlResolverResponseToVariantInfo = (
     return {
       variantType: VariantTypeEnum.Pdp,
       productId: response.specific_details.pdp_attributes.product_id ?? '',
+      collections: response.specific_details.collections ?? [],
+      numberOfReviews: response.specific_details.number_of_reviews ?? 0,
+      merchantTags: response.specific_details.merchant_tags ?? [],
       url,
     };
   }
@@ -25,6 +28,7 @@ export const mapUrlResolverResponseToVariantInfo = (
     return {
       variantType: VariantTypeEnum.Plp,
       plpId: response.specific_details.plp_attributes?.attributes?.id ?? '',
+      topCategory: response.specific_details.top_category ?? '',
       url,
     };
   }

package/src/contexts/pageContext/pageContext.tsx

@@ -7,23 +7,31 @@ import {
   useMemo,
   useState,
 } from 'react';
-import { UserEvent } from '@spiffy-ai/commerce-api-client';
-import { UrlResolverResponse, urlResolverAtom } from 'src/atoms/app/variant';
+import {
+  UrlResolverResponse,
+  pageUserEventAtom,
+  pageVariantInfoAtom,
+  urlResolverAtom,
+} from 'src/atoms/app/variant';
 import { useAtom } from 'jotai';
-
 import CommerceApiClient from 'src/application/commerce-api';
 import Logger from 'src/application/logging/logger';
 import { mapUrlResolverResponseToVariantInfo } from './mapping';
-import { PageDetails, PageVariantInfo } from './types';
+import { PageDetails } from './types';
 
-const PageContext = createContext<PageDetails | undefined>(undefined);
+const PageContext = createContext<
+  (PageDetails & { isLoading: boolean; isSupported: boolean }) | undefined
+>(undefined);
 
-export const PageProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+export const PageProvider: React.FC<{
+  children: ReactNode;
+}> = ({ children }) => {
   const [pageUrl, setPageUrl] = useState<string | undefined>(undefined);
-  const [variantInfo, setVariantInfo] = useState<PageVariantInfo | undefined>(undefined);
   const [urlResolverResponse, setUrlResolverResponse] = useAtom(urlResolverAtom);
-  const [userEvent, setUserEvent] = useState<UserEvent | undefined>(undefined);
-
+  const [isLoading, setIsLoading] = useState(false);
+  const [variantInfo, setVariantInfo] = useAtom(pageVariantInfoAtom);
+  const [userEvent, setUserEvent] = useAtom(pageUserEventAtom);
+  const [isSupported, setIsSupported] = useState(false);
   useEffect(() => {
     // TODO: Add support for SPA's and other changes to the URL to ensure that the pageUrl is set correctly
     setPageUrl(window.location.href);
@@ -36,34 +44,55 @@ export const PageProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
       setVariantInfo(newVariantInfo);
       setUserEvent(newUserEvent);
     },
-    [setVariantInfo],
+    [setVariantInfo, setUserEvent],
   );
 
   useEffect(() => {
     const resolvePageUrl = async () => {
+      setIsLoading(true);
       try {
         if (!pageUrl) {
+          setIsLoading(false);
           return;
         }
+
+        // If atoms are already set (e.g., by storybook), skip API call
+        if (userEvent || variantInfo) {
+          setIsLoading(false);
+          return;
+        }
+
         const cleansedUrl = pageUrl.toLowerCase().trim();
         const response =
           urlResolverResponse[cleansedUrl] ??
           ((await CommerceApiClient.resolveUrl(cleansedUrl)) as UrlResolverResponse);
         setVariantFromUrlResolver(cleansedUrl, response);
+        setIsLoading(false);
+        setIsSupported(response.ready);
       } catch (e) {
+        setIsLoading(false);
         Logger.logError('Failed to resolve page URL', e, { pageUrl });
       }
     };
     resolvePageUrl();
-  }, [pageUrl, urlResolverResponse, setUrlResolverResponse, setVariantFromUrlResolver]);
+  }, [
+    pageUrl,
+    urlResolverResponse,
+    setUrlResolverResponse,
+    setVariantFromUrlResolver,
+    userEvent,
+    variantInfo,
+  ]);
 
   const value = useMemo(
     () => ({
       pageUrl,
       variantInfo,
       userEvent,
+      isLoading,
+      isSupported,
     }),
-    [pageUrl, userEvent, variantInfo],
+    [pageUrl, userEvent, variantInfo, isLoading, isSupported],
   );
 
   return <PageContext.Provider value={value}>{children}</PageContext.Provider>;

package/src/contexts/pageContext/types.ts

@@ -4,12 +4,16 @@ import { VariantTypeEnum } from 'src/application/models';
 export type PDPPageVariantInfo = {
   variantType: VariantTypeEnum.Pdp;
   productId: string;
+  collections: string[];
+  numberOfReviews: number;
+  merchantTags: string[];
   url: string;
 };
 
 export type PLPPageVariantInfo = {
   variantType: VariantTypeEnum.Plp;
   plpId: string;
+  topCategory: string;
   url: string;
 };
 

package/src/contexts/salesAgentContext/chatAPI.ts

@@ -42,6 +42,7 @@ export const useSalesAgentChatAPI = () => {
         createdAt: new Date().toISOString(),
         attributes: {
           suggestionId: suggestion.id,
+          content: suggestion.content,
         },
       };
       queueUserEvent(event);