feat: join relatedCommercedata with editorial data

packages/react/src/products/hooks/__tests__/useProductListing.test.tsx

@@ -1,4 +1,5 @@
 import {
+  fetchCustomListing,
   fetchProductListing,
   fetchProductSet,
   getSlug,
@@ -7,6 +8,8 @@ import {
 import { mockBrandResponse } from 'tests/__fixtures__/brands/index.mjs';
 import { mockCategory } from 'tests/__fixtures__/categories/index.mjs';
 import {
+  mockCustomListingPageHash,
+  mockCustomListingPageState,
   mockProductsListDenormalizedFacetGroups,
   mockProductsListHash,
   mockProductsListHashWithoutParameters,
@@ -25,6 +28,7 @@ jest.mock('@farfetch/blackout-redux', () => ({
   ...jest.requireActual('@farfetch/blackout-redux'),
   fetchProductListing: jest.fn(() => () => Promise.resolve()),
   fetchProductSet: jest.fn(() => () => Promise.resolve()),
+  fetchCustomListing: jest.fn(() => () => Promise.resolve()),
   resetProductListings: jest.fn(() => () => Promise.resolve()),
 }));
 
@@ -203,6 +207,41 @@ describe('useProductListing', () => {
       });
     });
 
+    it('should fetch data if `enableAutoFetch` is true, is custom listing page and there is no loaded data', () => {
+      const slug = getSlug('en/customlistingpage', true);
+      const state = {
+        entities: {},
+        products: {
+          ...mockProductsState.products,
+          lists: {
+            error: {},
+            isHydrated: {},
+            isLoading: {},
+            hash: null,
+            productListingFacets: {
+              isLoading: false,
+              error: null,
+              result: [],
+            },
+          },
+        },
+      };
+
+      renderHook(
+        () =>
+          useProductListing(slug, {
+            isCustomListingPage: true,
+          }),
+        {
+          wrapper: withStore(state),
+        },
+      );
+
+      expect(fetchProductSet).not.toHaveBeenCalled();
+      expect(fetchProductListing).not.toHaveBeenCalled();
+      expect(fetchCustomListing).toHaveBeenCalled();
+    });
+
     it('should fetch data if `enableAutoFetch` is true and there is no loaded data', () => {
       const slug = getSlug('shopping/men/clothing');
 
@@ -249,6 +288,45 @@ describe('useProductListing', () => {
         },
       });
     });
+
+    it('should return data correctly when `isCustomListingPage` is true', () => {
+      const slug = getSlug('en/customlistingpage', true);
+
+      const { result } = renderHook(
+        () => useProductListing(slug, { isCustomListingPage: true }),
+        {
+          wrapper: withStore(mockCustomListingPageState),
+        },
+      );
+
+      const mockList =
+        mockProductsListNormalizedPayload.entities.productsLists[
+          mockCustomListingPageHash
+        ];
+
+      expect(result.current).toStrictEqual({
+        error: undefined,
+        isFetched: true,
+        isLoading: false,
+        data: {
+          ...mockList,
+          facetGroups:
+            mockProductsListDenormalizedFacetGroups[mockCustomListingPageHash],
+          hash: mockCustomListingPageHash,
+          items: expectedProductsDenormalized,
+          pagination: {
+            number: mockList.products.number,
+            pageSize: mockList.config.pageSize,
+            totalItems: mockList.products.totalItems,
+            totalPages: mockList.products.totalPages,
+          },
+        },
+        actions: {
+          reset: expect.any(Function),
+          refetch: expect.any(Function),
+        },
+      });
+    });
   });
 
   describe('actions', () => {
@@ -326,5 +404,33 @@ describe('useProductListing', () => {
         undefined,
       );
     });
+
+    it('should call `fetchCustomListing` successfully when `refetch` action is called and type is `listing`', () => {
+      const {
+        result: {
+          current: {
+            actions: { refetch },
+          },
+        },
+      } = renderHook(
+        () =>
+          useProductListing(slug, {
+            useCache: false,
+            isCustomListingPage: true,
+          }),
+        {
+          wrapper: withStore(mockCustomListingPageState),
+        },
+      );
+
+      refetch();
+
+      expect(fetchCustomListing).toHaveBeenCalledWith(
+        slug,
+        undefined,
+        { setProductsListHash: undefined, useCache: false },
+        undefined,
+      );
+    });
   });
 });

packages/react/src/products/hooks/types/useProductListing.ts

@@ -15,6 +15,7 @@ export interface UseProductListingCommonOptions {
   useCache?: boolean;
   enableAutoFetch?: boolean;
   setProductsListHash?: boolean;
+  isCustomListingPage?: boolean;
   fetchConfig?: Config;
 }
 

packages/react/src/products/hooks/useProductListing.ts

@@ -1,4 +1,5 @@
 import {
+  fetchCustomListing,
   fetchProductListing,
   fetchProductSet,
   generateProductListingHash,
@@ -39,15 +40,18 @@ const useProductListing = (
     useCache = true,
     setProductsListHash,
     enableAutoFetch = true,
+    isCustomListingPage = false,
   } = options;
 
   const isSetPage = isUseProductListingTypeSetOptions(options);
   const productListingHash = generateProductListingHash(slug, query, {
     isSet: isSetPage,
+    isCustomListingPage,
   });
 
   const fetchListingAction = useAction(fetchProductListing);
   const fetchSetAction = useAction(fetchProductSet);
+  const fetchCustomListingAction = useAction(fetchCustomListing);
   const resetAction = useAction(resetProductListings);
   const reset = useCallback(() => {
     resetAction([productListingHash]);
@@ -84,6 +88,13 @@ const useProductListing = (
             { useCache, setProductsListHash },
             fetchConfig,
           )
+        : isCustomListingPage
+        ? fetchCustomListingAction(
+            slug,
+            options.query,
+            { useCache, setProductsListHash },
+            fetchConfig,
+          )
         : fetchListingAction(
             slug,
             options.query,
@@ -99,6 +110,8 @@ const useProductListing = (
       setProductsListHash,
       slug,
       useCache,
+      isCustomListingPage,
+      fetchCustomListingAction,
     ],
   );
 

packages/redux/src/__tests__/__snapshots__/index.test.ts.snap

@@ -705,6 +705,8 @@ Object {
   "fetchCountryStateCitiesFactory": [Function],
   "fetchCountryStates": [Function],
   "fetchCountryStatesFactory": [Function],
+  "fetchCustomListing": [Function],
+  "fetchCustomListingFactory": [Function],
   "fetchExchange": [Function],
   "fetchExchangeBookRequest": [Function],
   "fetchExchangeBookRequestFactory": [Function],

packages/redux/src/contents/serverInitialState.ts

@@ -23,16 +23,14 @@ const serverInitialState: ServerInitialState = ({ model }) => {
   const { searchContentRequests, slug, seoMetadata, subfolder } = model;
 
   const contents = searchContentRequests.reduce((acc, item) => {
-    const { searchResponse } = item;
-    const firstSearchResponseItem = searchResponse.entries[0];
-
-    if (!firstSearchResponseItem) {
-      return acc;
-    }
+    const {
+      filters: { codes, contentTypeCode },
+      searchResponse,
+    } = item;
 
     const hash = generateContentHash({
-      codes: firstSearchResponseItem.code,
-      contentTypeCode: firstSearchResponseItem.contentTypeCode,
+      codes,
+      contentTypeCode,
     });
 
     const { entities, result } = {

packages/redux/src/products/actions/factories/fetchCustomListingFactory.ts

@@ -0,0 +1,46 @@
+import fetchProductListFactory from './fetchProductListFactory.js';
+import type {
+  Config,
+  GetProductListing,
+  GetProductListingQuery,
+  ProductListing,
+} from '@farfetch/blackout-client';
+import type { Dispatch } from 'redux';
+import type { GetOptionsArgument, StoreState } from '../../../types/index.js';
+import type { ProductListActionOptions } from '../../types/index.js';
+
+/**
+ * Creates a thunk factory configured with the specified client to fetch a specific
+ * custom listing page by its id.
+ *
+ * @param getProductSet - Get custom listing page produts client.
+ *
+ * @returns Thunk factory.
+ */
+const fetchCustomListingFactory =
+  (getListing: GetProductListing) =>
+  (
+    slug: string | number,
+    query: GetProductListingQuery = {},
+    actionOptions?: ProductListActionOptions,
+    config?: Config,
+  ) =>
+  (
+    dispatch: Dispatch,
+    getState: () => StoreState,
+    options: GetOptionsArgument,
+  ): Promise<ProductListing | undefined> =>
+    fetchProductListFactory(
+      getListing,
+      slug,
+      query,
+      actionOptions,
+      config,
+      dispatch,
+      getState,
+      options,
+      false,
+      true,
+    ) as Promise<ProductListing | undefined>;
+
+export default fetchCustomListingFactory;

packages/redux/src/products/actions/factories/fetchProductListFactory.ts

@@ -28,15 +28,16 @@ import type { ProductListActionOptions } from '../../types/index.js';
  * Creates a thunk configured with the specified client to fetch a product listing
  * for a given slug with specific query parameters.
  *
- * @param client        - Get listing or sets client.
- * @param slug          - Slug to load product list for.
- * @param query         - Query parameters to apply.
- * @param actionOptions - Additional options to apply to the action.
- * @param config        - Custom configurations to send to the client instance (axios).
- * @param dispatch      - Redux dispatch.
- * @param getState      - Store state.
- * @param options       - Thunk options.
- * @param isSet         - If is sets scope or not.
+ * @param client                - Get listing or sets client.
+ * @param slug                  - Slug to load product list for.
+ * @param query                 - Query parameters to apply.
+ * @param actionOptions         - Additional options to apply to the action.
+ * @param config                - Custom configurations to send to the client instance (axios).
+ * @param dispatch              - Redux dispatch.
+ * @param getState              - Store state.
+ * @param options               - Thunk options.
+ * @param isSet                 - If is sets scope or not.
+ * @param isCustomListingPage  - If is custom listing page scope or not.
  *
  * @returns Thunk to be dispatched to the redux store.
  */
@@ -55,11 +56,15 @@ const fetchProductListFactory = async (
     getOptions = arg => ({ productImgQueryParam: arg.productImgQueryParam }),
   }: GetOptionsArgument,
   isSet: boolean,
+  isCustomListingPage: boolean,
 ): Promise<ProductListing | ProductSet | undefined> => {
   let hash: Nullable<string> = null;
 
   try {
-    hash = generateProductListingHash(slug, query, { isSet });
+    hash = generateProductListingHash(slug, query, {
+      isSet,
+      isCustomListingPage,
+    });
 
     const { productImgQueryParam } = getOptions(getState);
     const isHydrated = isProductListingHydrated(getState(), hash);
@@ -108,8 +113,12 @@ const fetchProductListFactory = async (
       type: actionTypes.FETCH_PRODUCT_LISTING_REQUEST,
     });
 
-    // @ts-expect-error Property slug can be a string or a number.
-    const result = await client(slug, query, config);
+    const result = await client(
+      // @ts-expect-error Property slug can be a string or a number.
+      isCustomListingPage ? '' : slug,
+      query,
+      config,
+    );
 
     dispatch({
       meta: { hash },

packages/redux/src/products/actions/factories/fetchProductListingFactory.ts

@@ -41,6 +41,7 @@ const fetchProductListingFactory =
       getState,
       options,
       false,
+      false,
     );
 
 export default fetchProductListingFactory;

packages/redux/src/products/actions/factories/fetchProductSetFactory.ts

@@ -40,6 +40,7 @@ const fetchProductSetFactory =
       getState,
       options,
       true,
+      false,
     ) as Promise<ProductSet | undefined>;
 
 export default fetchProductSetFactory;

packages/redux/src/products/actions/factories/index.ts

@@ -13,6 +13,7 @@ export { default as fetchProductListingFactory } from './fetchProductListingFact
 export { default as fetchProductMeasurementsFactory } from './fetchProductMeasurementsFactory.js';
 export { default as fetchProductOutfitsFactory } from './fetchProductOutfitsFactory.js';
 export { default as fetchProductSetFactory } from './fetchProductSetFactory.js';
+export { default as fetchCustomListingFactory } from './fetchCustomListingFactory.js';
 export { default as fetchProductSizeGuidesFactory } from './fetchProductSizeGuidesFactory.js';
 export { default as fetchProductSizesFactory } from './fetchProductSizesFactory.js';
 export { default as fetchProductVariantsByMerchantsLocationsFactory } from './fetchProductVariantsByMerchantsLocationsFactory.js';

packages/redux/src/products/actions/fetchCustomListing.ts

@@ -0,0 +1,7 @@
+import { fetchCustomListingFactory } from './factories/index.js';
+import { getProductListing } from '@farfetch/blackout-client';
+
+/**
+ * Fetch a specific custom listing by its id.
+ */
+export default fetchCustomListingFactory(getProductListing);

packages/redux/src/products/actions/index.ts

@@ -14,6 +14,7 @@ export { default as fetchProductListing } from './fetchProductListing.js';
 export { default as fetchProductMeasurements } from './fetchProductMeasurements.js';
 export { default as fetchProductOutfits } from './fetchProductOutfits.js';
 export { default as fetchProductSet } from './fetchProductSet.js';
+export { default as fetchCustomListing } from './fetchCustomListing.js';
 export { default as fetchProductSizeGuides } from './fetchProductSizeGuides.js';
 export { default as fetchProductSizes } from './fetchProductSizes.js';
 export { default as fetchProductVariantsByMerchantsLocations } from './fetchProductVariantsByMerchantsLocations.js';