@envive-ai/react-hooks 0.3.3 → 0.3.5

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

@@ -1,13 +1,18 @@
-import React from 'react';
+import { PageVisitCategory, UserEventCategory } 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,
+  pageUserEventAtom,
+  pageVariantInfoAtom,
+  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(() => {});
@@ -35,6 +40,7 @@ const MockComponent: React.FC = () => {
       <div data-testid="user-event">
         {context.userEvent ? JSON.stringify(context.userEvent) : 'undefined'}
       </div>
+      <div data-testid="is-loading">{context.isLoading ? 'true' : 'false'}</div>
     </div>
   );
 };
@@ -69,10 +75,10 @@ describe('PageProvider', () => {
     window.location = originalLocation;
   });
 
-  const renderWithProviders = (children: React.ReactNode) => {
+  const renderWithProviders = (children: React.ReactNode, previewMode = false) => {
     return render(
       <Provider>
-        <PageProvider>{children}</PageProvider>
+        <PageProvider previewMode={previewMode}>{children}</PageProvider>
       </Provider>,
     );
   };
@@ -89,9 +95,6 @@ describe('PageProvider', () => {
     });
 
     it('should handle missing window.location gracefully', async () => {
-      // This test verifies that the component handles edge cases
-      // In a real browser environment, window.location is always available
-      // This test ensures the component doesn't crash in unusual test scenarios
       const originalLocation = window.location;
 
       // Temporarily remove location
@@ -108,7 +111,91 @@ describe('PageProvider', () => {
     });
   });
 
-  describe('URL Resolution', () => {
+  describe('Preview Mode', () => {
+    it('should auto-initialize atoms when previewMode is true', async () => {
+      window.location.href = 'https://example.com/preview-page';
+
+      renderWithProviders(<MockComponent />, true);
+
+      await waitFor(() => {
+        const userEvent = screen.getByTestId('user-event').textContent;
+        expect(userEvent).toContain('preview-user-event');
+        expect(userEvent).toContain(UserEventCategory.PageVisit);
+        expect(userEvent).toContain(PageVisitCategory.Other);
+      });
+
+      await waitFor(() => {
+        const variantInfo = screen.getByTestId('variant-info').textContent;
+        expect(variantInfo).toContain(VariantTypeEnum.PageVisit);
+        expect(variantInfo).toContain('https://example.com/preview-page');
+      });
+    });
+
+    it('should skip API call when previewMode is true', async () => {
+      window.location.href = 'https://example.com/preview-test';
+
+      renderWithProviders(<MockComponent />, true);
+
+      // Wait for initialization
+      await waitFor(() => {
+        expect(screen.getByTestId('user-event').textContent).not.toBe('undefined');
+      });
+
+      // Should not call resolveUrl when in preview mode
+      expect(mockResolveUrl).not.toHaveBeenCalled();
+    });
+
+    it('should not overwrite existing atoms in preview mode', async () => {
+      window.location.href = 'https://example.com/existing-atoms';
+      // Set up existing atoms before preview mode
+      const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+        const [, setUserEvent] = useAtom(pageUserEventAtom);
+        const [, setVariantInfo] = useAtom(pageVariantInfoAtom);
+        React.useEffect(() => {
+          setUserEvent({
+            event_id: 'existing-event',
+            created_at: new Date().toISOString(),
+            category: UserEventCategory.PageVisit,
+            attributes: {
+              page_visit_category: PageVisitCategory.Other,
+              url: 'https://example.com/existing',
+            },
+          } as any);
+          setVariantInfo({
+            variantType: VariantTypeEnum.Pdp,
+            productId: 'existing-product',
+            url: 'https://example.com/existing',
+          } as any);
+        }, [setUserEvent, setVariantInfo]);
+        return <PageProvider previewMode>{children}</PageProvider>;
+      };
+      render(
+        <Provider>
+          <TestWrapper>
+            <MockComponent />
+          </TestWrapper>
+        </Provider>,
+      );
+      // Should keep existing atoms, not overwrite with preview values
+      await waitFor(() => {
+        const userEvent = screen.getByTestId('user-event').textContent;
+        expect(userEvent).toContain('existing-event');
+        expect(userEvent).not.toContain('preview-user-event');
+      });
+    });
+
+    it('should set isLoading to false in preview mode', async () => {
+      window.location.href = 'https://example.com/loading-test';
+
+      renderWithProviders(<MockComponent />, true);
+
+      await waitFor(() => {
+        expect(screen.getByTestId('is-loading').textContent).toBe('false');
+      });
+    });
+  });
+
+  describe('URL Resolution (Non-Preview Mode)', () => {
     it('should call CommerceApiClient.resolveUrl when pageUrl is set', async () => {
       const mockResponse: UrlResolverResponse = {
         variant_type: VariantTypeEnum.PageVisit,
@@ -120,7 +207,7 @@ describe('PageProvider', () => {
 
       window.location.href = 'https://example.com/test';
 
-      renderWithProviders(<MockComponent />);
+      renderWithProviders(<MockComponent />, false);
 
       await waitFor(() => {
         expect(mockResolveUrl).toHaveBeenCalledWith('https://example.com/test');
@@ -138,7 +225,7 @@ describe('PageProvider', () => {
 
       window.location.href = '  HTTPS://EXAMPLE.COM/TEST  ';
 
-      renderWithProviders(<MockComponent />);
+      renderWithProviders(<MockComponent />, false);
 
       await waitFor(() => {
         expect(mockResolveUrl).toHaveBeenCalledWith('https://example.com/test');
@@ -169,7 +256,7 @@ describe('PageProvider', () => {
           });
         }, [setUrlResolver]);
 
-        return <PageProvider>{children}</PageProvider>;
+        return <PageProvider previewMode={false}>{children}</PageProvider>;
       };
 
       render(
@@ -197,7 +284,7 @@ describe('PageProvider', () => {
       // Test with an empty URL string
       window.location.href = '';
 
-      renderWithProviders(<MockComponent />);
+      renderWithProviders(<MockComponent />, false);
 
       // Wait for initial render
       await waitFor(() => {
@@ -205,9 +292,10 @@ 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();
@@ -229,7 +317,7 @@ describe('PageProvider', () => {
       mockResolveUrl.mockResolvedValue(mockResponse);
       window.location.href = 'https://example.com/product';
 
-      renderWithProviders(<MockComponent />);
+      renderWithProviders(<MockComponent />, false);
 
       await waitFor(() => {
         const variantInfo = screen.getByTestId('variant-info').textContent;
@@ -255,7 +343,7 @@ describe('PageProvider', () => {
       mockResolveUrl.mockResolvedValue(mockResponse);
       window.location.href = 'https://example.com/category';
 
-      renderWithProviders(<MockComponent />);
+      renderWithProviders(<MockComponent />, false);
 
       await waitFor(() => {
         const variantInfo = screen.getByTestId('variant-info').textContent;
@@ -275,7 +363,7 @@ describe('PageProvider', () => {
       mockResolveUrl.mockResolvedValue(mockResponse);
       window.location.href = 'https://example.com/page';
 
-      renderWithProviders(<MockComponent />);
+      renderWithProviders(<MockComponent />, false);
 
       await waitFor(() => {
         const variantInfo = screen.getByTestId('variant-info').textContent;
@@ -296,7 +384,7 @@ describe('PageProvider', () => {
       mockResolveUrl.mockResolvedValue(mockResponse);
       window.location.href = 'https://example.com/product';
 
-      renderWithProviders(<MockComponent />);
+      renderWithProviders(<MockComponent />, false);
 
       await waitFor(() => {
         const variantInfo = screen.getByTestId('variant-info').textContent;
@@ -317,7 +405,7 @@ describe('PageProvider', () => {
       mockResolveUrl.mockResolvedValue(mockResponse);
       window.location.href = 'https://example.com/category';
 
-      renderWithProviders(<MockComponent />);
+      renderWithProviders(<MockComponent />, false);
 
       await waitFor(() => {
         const variantInfo = screen.getByTestId('variant-info').textContent;
@@ -332,7 +420,13 @@ describe('PageProvider', () => {
       const mockUserEvent = {
         event_id: 'event-123',
         event_type: PageVisitCategory.Other,
-      } as unknown as UserEvent;
+        created_at: new Date().toISOString(),
+        category: UserEventCategory.PageVisit,
+        attributes: {
+          url: 'https://example.com/page',
+          page_visit_category: PageVisitCategory.Other,
+        },
+      };
 
       const mockResponse: UrlResolverResponse = {
         variant_type: VariantTypeEnum.PageVisit,
@@ -344,7 +438,7 @@ describe('PageProvider', () => {
       mockResolveUrl.mockResolvedValue(mockResponse);
       window.location.href = 'https://example.com/page';
 
-      renderWithProviders(<MockComponent />);
+      renderWithProviders(<MockComponent />, false);
 
       await waitFor(() => {
         const userEvent = screen.getByTestId('user-event').textContent;
@@ -363,7 +457,7 @@ describe('PageProvider', () => {
       mockResolveUrl.mockResolvedValue(mockResponse);
       window.location.href = 'https://example.com/page';
 
-      renderWithProviders(<MockComponent />);
+      renderWithProviders(<MockComponent />, false);
 
       await waitFor(() => {
         const userEvent = screen.getByTestId('user-event').textContent;
@@ -380,7 +474,7 @@ describe('PageProvider', () => {
 
       window.location.href = 'https://example.com/error-page';
 
-      renderWithProviders(<MockComponent />);
+      renderWithProviders(<MockComponent />, false);
 
       await waitFor(() => {
         expect(errorSpy).toHaveBeenCalledWith('Failed to resolve page URL', error, {
@@ -393,8 +487,6 @@ describe('PageProvider', () => {
     });
 
     it('should handle invalid variant type gracefully', async () => {
-      // This test verifies that the mapping function throws an error for invalid types
-      // The error should be caught and logged
       const errorSpy = vi.spyOn(Logger, 'logError');
 
       const invalidResponse = {
@@ -406,7 +498,7 @@ describe('PageProvider', () => {
       mockResolveUrl.mockResolvedValue(invalidResponse);
       window.location.href = 'https://example.com/invalid';
 
-      renderWithProviders(<MockComponent />);
+      renderWithProviders(<MockComponent />, false);
 
       // The mapping function should throw, which will be caught in the useEffect
       await waitFor(() => {
@@ -441,48 +533,13 @@ describe('PageProvider', () => {
       mockResolveUrl.mockResolvedValue(mockResponse);
       window.location.href = 'https://example.com/test';
 
-      renderWithProviders(<MockComponent />);
+      renderWithProviders(<MockComponent />, false);
 
       await waitFor(() => {
         expect(screen.getByTestId('page-url').textContent).toBe('https://example.com/test');
         expect(screen.getByTestId('variant-info').textContent).not.toBe('undefined');
       });
     });
-
-    it('should update context when pageUrl changes', async () => {
-      const mockResponse1: UrlResolverResponse = {
-        variant_type: VariantTypeEnum.PageVisit,
-        specific_details: {},
-        ready: true,
-      };
-
-      const mockResponse2: UrlResolverResponse = {
-        variant_type: VariantTypeEnum.Pdp,
-        specific_details: {
-          pdp_attributes: {
-            product_id: 'product-789',
-          },
-        },
-        ready: true,
-      };
-
-      mockResolveUrl.mockResolvedValueOnce(mockResponse1).mockResolvedValueOnce(mockResponse2);
-
-      window.location.href = 'https://example.com/page1';
-
-      const { rerender } = renderWithProviders(<MockComponent />);
-
-      await waitFor(() => {
-        expect(screen.getByTestId('page-url').textContent).toBe('https://example.com/page1');
-      });
-
-      // Change the URL
-      window.location.href = 'https://example.com/page2';
-
-      // Note: In a real SPA, the URL change would trigger the useEffect
-      // For testing, we need to manually trigger or test the effect differently
-      // This test demonstrates the expected behavior
-    });
   });
 
   describe('Context Value Memoization', () => {
@@ -498,12 +555,12 @@ describe('PageProvider', () => {
 
       let renderCount = 0;
       const CountingComponent: React.FC = () => {
-        renderCount++;
+        renderCount += 1;
         const context = usePage();
         return <div data-testid="count">{renderCount}</div>;
       };
 
-      renderWithProviders(<CountingComponent />);
+      renderWithProviders(<CountingComponent />, false);
 
       await waitFor(() => {
         expect(screen.getByTestId('count')).toBeInTheDocument();
@@ -514,11 +571,12 @@ 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
-      // should be minimal (only from initial setup)
+      // The context value should be memoized
       expect(renderCount).toBeGreaterThanOrEqual(initialCount);
     });
   });
@@ -540,7 +598,7 @@ describe('PageProvider', () => {
 
       render(
         <Provider>
-          <PageProvider>
+          <PageProvider previewMode={false}>
             <MockComponent />
             <AtomReaderComponent />
           </PageProvider>
@@ -550,10 +608,6 @@ describe('PageProvider', () => {
       await waitFor(() => {
         expect(mockResolveUrl).toHaveBeenCalled();
       });
-
-      // The atom should eventually contain the cached response
-      // Note: The actual caching happens in the atom setter, which may
-      // require additional setup to test directly
     });
   });
 });
@@ -566,6 +620,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 +632,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 +643,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 +658,7 @@ describe('mapUrlResolverResponseToVariantInfo', () => {
     expect(result).toEqual({
       variantType: VariantTypeEnum.Plp,
       plpId: 'test-plp-456',
+      topCategory: 'test-top-category',
       url: 'https://example.com/category',
     });
   });
@@ -630,6 +692,9 @@ describe('mapUrlResolverResponseToVariantInfo', () => {
     expect(result).toEqual({
       variantType: VariantTypeEnum.Pdp,
       productId: '',
+      collections: [],
+      numberOfReviews: 0,
+      merchantTags: [],
       url: 'https://example.com/product',
     });
   });
@@ -648,6 +713,7 @@ describe('mapUrlResolverResponseToVariantInfo', () => {
     expect(result).toEqual({
       variantType: VariantTypeEnum.Plp,
       plpId: '',
+      topCategory: '',
       url: 'https://example.com/category',
     });
   });

package/src/contexts/pageContext/mapping.ts

@@ -1,6 +1,19 @@
 import { UrlResolverResponse } from 'src/atoms/app/variant';
-
-import { VariantTypeEnum } from 'src/application/models';
+import {
+  UserEvent as ApiUserEvent,
+  PageVisitCategory,
+  UserEventCategory,
+} from '@spiffy-ai/commerce-api-client';
+import { UserEvent, VariantTypeEnum } from 'src/application/models';
+import { isApiPDPAttributes } from 'src/application/models/guards/api/isApiPDPEventAttributes';
+import {
+  isApiPLPEventAttributes,
+  isApiPLPIdAttribute,
+} from 'src/application/models/guards/api/isApiPLPEventAttributes';
+import { isApiQueryTypedAttributes } from 'src/application/models/guards/api/isApiQueryTypedEventAttributes';
+import { isApiSearchAttributes } from 'src/application/models/guards/api/isApiSearchEventAttributes';
+import { isApiSuggestionClickedAttributes } from 'src/application/models/guards/api/isApiSuggestionClickedEventAttributes';
+import { isApiFormSubmittedResponseAttributes } from 'src/application/models/guards/api/isApiFormSubmittedResponseAttributes';
 
 import { PageVariantInfo, VisitPageVariantInfo } from './types';
 
@@ -15,6 +28,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 +41,7 @@ export const mapUrlResolverResponseToVariantInfo = (
     return {
       variantType: VariantTypeEnum.Plp,
       plpId: response.specific_details.plp_attributes?.attributes?.id ?? '',
+      topCategory: response.specific_details.top_category ?? '',
       url,
     };
   }
@@ -36,3 +53,172 @@ export const mapUrlResolverResponseToVariantInfo = (
   }
   throw new Error('Invalid variant type');
 };
+
+const isApiPageVisitAttributes = (
+  data: unknown,
+): data is { url: string; page_visit_category: PageVisitCategory } => {
+  if (data == null || typeof data !== 'object') {
+    return false;
+  }
+
+  if (!('url' in data) || typeof data.url !== 'string') {
+    return false;
+  }
+
+  if (
+    !('page_visit_category' in data) ||
+    typeof data.page_visit_category !== 'string' ||
+    !Object.values(PageVisitCategory).includes(data.page_visit_category as PageVisitCategory)
+  ) {
+    return false;
+  }
+
+  return true;
+};
+
+export const mapApiUserEventToUserEvent = (
+  userEvent: ApiUserEvent | undefined,
+): UserEvent | undefined => {
+  if (!userEvent) {
+    return undefined;
+  }
+  // Handle PdpVisit and AddToCart (they share the same attributes structure)
+  if (
+    (userEvent.category === UserEventCategory.PdpVisit ||
+      userEvent.category === UserEventCategory.AddToCart) &&
+    isApiPDPAttributes(userEvent.attributes)
+  ) {
+    return {
+      eventId: userEvent.event_id,
+      createdAt: userEvent.created_at,
+      category: userEvent.category,
+      attributes: {
+        productId: userEvent.attributes.product_id,
+        parentProductId:
+          userEvent.attributes.parent_product_id !== null
+            ? userEvent.attributes.parent_product_id
+            : '',
+        url: userEvent.attributes.url,
+      },
+    };
+  }
+
+  // Handle PlpVisit
+  if (
+    userEvent.category === UserEventCategory.PlpVisit &&
+    isApiPLPEventAttributes(userEvent.attributes)
+  ) {
+    if (isApiPLPIdAttribute(userEvent.attributes.attributes)) {
+      return {
+        eventId: userEvent.event_id,
+        createdAt: userEvent.created_at,
+        category: UserEventCategory.PlpVisit,
+        attributes: {
+          category: userEvent.attributes.category,
+          attributes: {
+            id: userEvent.attributes.attributes.id,
+          },
+        },
+      };
+    }
+  }
+
+  // Handle QueryTyped
+  if (
+    userEvent.category === UserEventCategory.QueryTyped &&
+    isApiQueryTypedAttributes(userEvent.attributes)
+  ) {
+    return {
+      eventId: userEvent.event_id,
+      createdAt: userEvent.created_at,
+      category: UserEventCategory.QueryTyped,
+      attributes: {
+        query: userEvent.attributes.query,
+      },
+    };
+  }
+
+  // Handle Search
+  if (
+    userEvent.category === UserEventCategory.Search &&
+    isApiSearchAttributes(userEvent.attributes)
+  ) {
+    return {
+      eventId: userEvent.event_id,
+      createdAt: userEvent.created_at,
+      category: UserEventCategory.Search,
+      attributes: {
+        searchTerm: userEvent.attributes.search_term,
+        selectedFilters: userEvent.attributes.selected_filters,
+      },
+    };
+  }
+
+  // Handle SuggestionClicked
+  if (
+    userEvent.category === UserEventCategory.SuggestionClicked &&
+    isApiSuggestionClickedAttributes(userEvent.attributes)
+  ) {
+    return {
+      eventId: userEvent.event_id,
+      createdAt: userEvent.created_at,
+      category: UserEventCategory.SuggestionClicked,
+      attributes: {
+        suggestionId: userEvent.attributes.suggestion_id,
+      },
+    };
+  }
+
+  // Handle PageVisit
+  if (
+    userEvent.category === UserEventCategory.PageVisit &&
+    isApiPageVisitAttributes(userEvent.attributes)
+  ) {
+    return {
+      eventId: userEvent.event_id,
+      createdAt: userEvent.created_at,
+      category: UserEventCategory.PageVisit,
+      attributes: {
+        url: userEvent.attributes.url,
+        pageVisitCategory: userEvent.attributes.page_visit_category,
+      },
+    };
+  }
+
+  // Handle FormSubmitted
+  if (
+    userEvent.category === UserEventCategory.FormSubmitted &&
+    isApiFormSubmittedResponseAttributes(userEvent.attributes)
+  ) {
+    return {
+      eventId: userEvent.event_id,
+      createdAt: userEvent.created_at,
+      category: UserEventCategory.FormSubmitted,
+      attributes: {
+        filledSchema: { ...userEvent.attributes.filled_schema },
+        formResponseId: userEvent.attributes.form_response_id,
+        formType: userEvent.attributes.form_type,
+      },
+    };
+  }
+
+  // Handle AppLoaded (no attributes)
+  if (userEvent.category === UserEventCategory.AppLoaded) {
+    return {
+      eventId: userEvent.event_id,
+      createdAt: userEvent.created_at,
+      category: UserEventCategory.AppLoaded,
+    };
+  }
+
+  // Handle AppUnloaded (no attributes)
+  if (userEvent.category === UserEventCategory.AppUnloaded) {
+    return {
+      eventId: userEvent.event_id,
+      createdAt: userEvent.created_at,
+      category: UserEventCategory.AppUnloaded,
+    };
+  }
+
+  throw new Error(`Invalid user event category: ${userEvent.category}`);
+};