fix: commerce pages in ssr

Author: richard190m

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

@@ -6,6 +6,7 @@ import {
   mockCommercePagesInitialState,
   mockCommercePagesLoadingState,
   mockCommercePagesState,
+  slug,
 } from 'tests/__fixtures__/contents/index.mjs';
 import { fetchCommercePages } from '@farfetch/blackout-redux';
 import { withStore } from '../../../../tests/helpers/index.js';
@@ -84,6 +85,7 @@ describe('useCommercePages', () => {
 
       expect(fetchCommercePages).toHaveBeenCalledWith(
         {
+          slug,
           brand: commercePageQuery.brand,
           category: commercePageQuery.category,
           contentTypeCode: commercePageQuery.contentTypeCode,
@@ -124,6 +126,7 @@ describe('useCommercePages', () => {
 
       expect(fetchCommercePages).toHaveBeenCalledWith(
         {
+          slug,
           brand: commercePageQuery.brand,
           category: commercePageQuery.category,
           contentTypeCode: commercePageQuery.contentTypeCode,

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 },
+            { isCommercePage: 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/useCommercePages.types.ts

@@ -2,6 +2,7 @@ import type { CommercePagesRankingStrategy } from '@farfetch/blackout-redux';
 import type { Config, QueryCommercePages } from '@farfetch/blackout-client';
 
 export interface UseCommercePagesOptions extends QueryCommercePages {
+  slug: string;
   enableAutoFetch?: boolean;
   strategy?: CommercePagesRankingStrategy;
   fetchConfig?: Config;

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;
+  isCommercePage?: boolean;
 }

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

@@ -29,7 +29,7 @@ const useCommercePages = <T = ComponentType[]>(
   const query = useMemo(
     () => ({
       contentTypeCode: ContentTypeCode.CommercePages,
-      ...fetchQuery,
+      codes: fetchQuery.slug,
     }),
     [fetchQuery],
   );

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,
+    isCommercePage = false,
+  } = options;
 
   const query = useMemo(
     () => ({
-      contentTypeCode: ContentTypeCode.ContentPage,
-      codes: fetchQuery.slug.split('?')[0] as string,
+      contentTypeCode: isCommercePage
+        ? ContentTypeCode.CommercePages
+        : ContentTypeCode.ContentPage,
+      codes: fetchQuery.slug,
     }),
-    [fetchQuery.slug],
+    [fetchQuery.slug, isCommercePage],
   );
 
   const fetchQueryWithoutSlug = useMemo(() => {

packages/redux/src/contents/actions/factories/fetchCommercePagesFactory.ts

@@ -7,13 +7,13 @@ import {
   type CommercePages,
   type Config,
   type GetCommercePages,
-  type QueryCommercePages,
   toBlackoutError,
 } from '@farfetch/blackout-client';
 import {
   type CommercePagesRankingStrategy,
   ContentTypeCode,
   type FetchCommercePagesAction,
+  type QueryCommercePagesWithSlug,
 } from '../../types/index.js';
 import { contentEntries } from '../../../entities/schemas/content.js';
 import { normalize } from 'normalizr';
@@ -29,7 +29,7 @@ import type { Dispatch } from 'redux';
 const fetchCommercePagesFactory =
   (getCommercePages: GetCommercePages) =>
   (
-    query: QueryCommercePages,
+    query: QueryCommercePagesWithSlug,
     strategy?: CommercePagesRankingStrategy,
     config?: Config,
   ) =>
@@ -39,17 +39,19 @@ const fetchCommercePagesFactory =
     let hash: string | undefined;
 
     try {
+      const { slug, ...queryWithoutSlug } = query;
+
       hash = generateContentHash({
         contentTypeCode: ContentTypeCode.CommercePages,
-        ...query,
+        codes: slug,
       });
 
       dispatch({
         payload: { hash },
         type: actionTypes.FETCH_COMMERCE_PAGES_REQUEST,
       });
 
-      const result = await getCommercePages(query, config);
+      const result = await getCommercePages(queryWithoutSlug, config);
       const rankedResult = applyCommercePagesRankingStrategy(result, strategy);
 
       dispatch({

packages/redux/src/contents/serverInitialState.ts

@@ -1,11 +1,14 @@
+import {
+  applyCommercePagesRankingStrategy,
+  generateContentHash,
+} from './utils.js';
 import { buildQueryStringFromObject } from '../helpers/index.js';
 import { contentEntries } from '../entities/schemas/content.js';
-import { generateContentHash } from './utils.js';
+import { type ContentsState } from './types/index.js';
 import { get, merge } from 'lodash-es';
 import { INITIAL_STATE_CONTENT } from './reducer.js';
 import { normalize } from 'normalizr';
 import parse from 'url-parse';
-import type { ContentsState } from './types/index.js';
 import type { ServerInitialState } from '../types/serverInitialState.types.js';
 
 /**
@@ -15,28 +18,34 @@ import type { ServerInitialState } from '../types/serverInitialState.types.js';
  *
  * @returns Initial state for the contents reducer.
  */
-const serverInitialState: ServerInitialState = ({ model }) => {
+const serverInitialState: ServerInitialState = ({ model, strategy }) => {
   if (!get(model, 'searchContentRequests')) {
     return { contents: INITIAL_STATE_CONTENT };
   }
 
   const { searchContentRequests, slug, seoMetadata, subfolder } = model;
+  const url = subfolder !== '/' ? slug?.replace(subfolder, '') : slug;
+  const normalizedUrl = url.replace('?json=true', '').replace('&json=true', '');
 
   const contents = searchContentRequests.reduce((acc, item) => {
-    const { searchResponse } = item;
-    const firstSearchResponseItem = searchResponse.entries[0];
-
-    if (!firstSearchResponseItem) {
-      return acc;
-    }
-
+    const {
+      searchResponse,
+      filters: { codes, contentTypeCode },
+    } = item;
+    let response = searchResponse;
+    const isCommercePage = contentTypeCode === 'commerce_pages';
+    const code = isCommercePage ? normalizedUrl : codes?.[0];
     const hash = generateContentHash({
-      codes: firstSearchResponseItem.code,
-      contentTypeCode: firstSearchResponseItem.contentTypeCode,
+      codes: code,
+      contentTypeCode: contentTypeCode,
     });
 
+    if (isCommercePage) {
+      response = applyCommercePagesRankingStrategy(searchResponse, strategy);
+    }
+
     const { entities, result } = {
-      ...normalize({ hash, ...searchResponse }, contentEntries),
+      ...normalize({ hash, ...response }, contentEntries),
     };
 
     return merge(acc, {
@@ -53,7 +62,6 @@ const serverInitialState: ServerInitialState = ({ model }) => {
     });
   }, {});
 
-  const url = subfolder !== '/' ? slug?.replace(subfolder, '') : slug;
   const { pathname, query } = parse(url, true);
 
   delete query.json;

packages/redux/src/contents/types/actions.types.ts

@@ -4,6 +4,7 @@ import type {
   BlackoutError,
   Contents,
   ContentType,
+  QueryCommercePages,
   SEOMetadata,
 } from '@farfetch/blackout-client';
 import type { ContentEntity } from '../../entities/index.js';
@@ -22,6 +23,10 @@ export type ContentsPayload = NormalizedSchema<
   ContentsNormalized
 > & { hash: Hash };
 
+export interface QueryCommercePagesWithSlug extends QueryCommercePages {
+  slug: string;
+}
+
 /**
  * Fetch Content Page Action
  */

packages/redux/src/types/serverInitialState.types.ts

@@ -1,10 +1,12 @@
+import type { CommercePagesRankingStrategy } from '../contents/types/commercePagesRankingStrategy.types.js';
 import type { LocaleState } from '../locale/index.js';
 import type { Model } from './model.types.js';
 import type { ProductsState } from '../products/index.js';
 import type { StoreState } from './storeState.types.js';
 
 export type ServerInitialState = (data: {
   model: Model;
+  strategy?: CommercePagesRankingStrategy;
   options?: { productImgQueryParam?: string };
 }) => Omit<StoreState, 'products' | 'locale'> & {
   products?: Partial<ProductsState>;