fix: commerce pages in ssr

Author: richard190m

packages/react/src/contents/hooks/__tests__/useContentPage.test.tsx

@@ -2,6 +2,7 @@ import { cleanup, renderHook } from '@testing-library/react';
 import { ContentPageType } from '@farfetch/blackout-client';
 import { fetchContentPage } from '@farfetch/blackout-redux';
 import {
+  mockCommercePageWithDataState,
   mockContentPageEntry,
   mockContentPageErrorState,
   mockContentPageInitialState,
@@ -102,6 +103,34 @@ describe('useContentPage', () => {
 
       expect(fetchContentPage).not.toHaveBeenCalled();
     });
+
+    it('should return values correctly with commercePagesHash option', () => {
+      const { result } = renderHook(
+        () =>
+          useContentPage(
+            ContentPageType.Listing,
+            { slug },
+            { commercePagesHash: true },
+          ),
+        {
+          wrapper: withStore(mockCommercePageWithDataState),
+        },
+      );
+
+      expect(result.current).toStrictEqual({
+        data: [
+          mockCommercePageWithDataState.entities.contents[
+            mockContentPageEntry.publicationId
+          ],
+        ],
+        isLoading: false,
+        error: null,
+        isFetched: true,
+        actions: {
+          fetch: expect.any(Function),
+        },
+      });
+    });
   });
 
   describe('actions', () => {

packages/react/src/contents/hooks/types/useContentPage.types.ts

@@ -3,4 +3,5 @@ import type { Config } from '@farfetch/blackout-client';
 export interface UseContentPageOptions {
   enableAutoFetch?: boolean;
   fetchConfig?: Config;
+  commercePagesHash?: boolean;
 }

packages/react/src/contents/hooks/useContentPage.ts

@@ -24,14 +24,20 @@ const useContentPage = <T = [ComponentType]>(
 ) => {
   const store = useStore();
 
-  const { enableAutoFetch = true, fetchConfig } = options;
+  const {
+    enableAutoFetch = true,
+    fetchConfig,
+    commercePagesHash = false,
+  } = options;
 
   const query = useMemo(
     () => ({
-      contentTypeCode: ContentTypeCode.ContentPage,
+      contentTypeCode: commercePagesHash
+        ? ContentTypeCode.CommercePages
+        : ContentTypeCode.ContentPage,
       codes: fetchQuery.slug.split('?')[0] as string,
     }),
-    [fetchQuery.slug],
+    [fetchQuery.slug, commercePagesHash],
   );
 
   const fetchQueryWithoutSlug = useMemo(() => {

packages/redux/src/contents/serverInitialState.ts

@@ -21,6 +21,7 @@ const serverInitialState: ServerInitialState = ({ model }) => {
   }
 
   const { searchContentRequests, slug, seoMetadata, subfolder } = model;
+  const url = subfolder !== '/' ? slug?.replace(subfolder, '') : slug;
 
   const contents = searchContentRequests.reduce((acc, item) => {
     const { searchResponse } = item;
@@ -30,8 +31,13 @@ const serverInitialState: ServerInitialState = ({ model }) => {
       return acc;
     }
 
+    const code =
+      firstSearchResponseItem.contentTypeCode === 'commerce_pages'
+        ? url
+        : firstSearchResponseItem.code;
+
     const hash = generateContentHash({
-      codes: firstSearchResponseItem.code,
+      codes: code,
       contentTypeCode: firstSearchResponseItem.contentTypeCode,
     });
 
@@ -53,7 +59,6 @@ const serverInitialState: ServerInitialState = ({ model }) => {
     });
   }, {});
 
-  const url = subfolder !== '/' ? slug?.replace(subfolder, '') : slug;
   const { pathname, query } = parse(url, true);
 
   delete query.json;

tests/__fixtures__/contents/contentPage.fixtures.mts

@@ -15,6 +15,12 @@ const contentQuery = {
 
 export const contentPagesHash = generateContentHash(contentQuery);
 
+const commerceQuery = {
+  codes: slugContentWithoutQuery,
+  contentTypeCode: 'commerce_pages',
+};
+const commercePagesHash = generateContentHash(commerceQuery);
+
 export const mockContentPageEntry = {
   publicationId: 'dc9c0c95-9485-45c2-a76c-6923bb39b544',
   versionId: '78f1922d-0ef1-46ed-b02c-ca541d0a0d80',
@@ -65,6 +71,11 @@ export const mockContentPageEntry = {
   ],
 };
 
+const mockCommercePageEntry = {
+  ...mockContentPageEntry,
+  contentTypeCode: 'commerce_pages',
+};
+
 export const mockContentPage = {
   number: 1,
   totalItems: 1,
@@ -153,3 +164,35 @@ export const mockContentPageWithDataState = {
     },
   },
 };
+
+export const mockCommercePageWithDataState = {
+  entities: {
+    contents: {
+      [mockCommercePageEntry.publicationId]: {
+        ...mockCommercePageEntry,
+        publicationDate: 0,
+        metadata: {
+          ...mockCommercePageEntry.metadata,
+          custom: {
+            ...mockCommercePageEntry.metadata.custom,
+            eventDate: 0,
+          },
+        },
+      },
+    },
+  },
+  contents: {
+    ...mockContentPageInitialState.contents,
+    searchResults: {
+      [commercePagesHash]: {
+        isLoading: false,
+        error: null,
+        result: {
+          hash: commercePagesHash,
+          ...mockContentPage,
+          entries: [mockCommercePageEntry.publicationId],
+        },
+      },
+    },
+  },
+};