fix(headless, commerce): schema validation error when switching betwe…

…en search page and plp (#4448)

https://coveord.atlassian.net/browse/KIT-3583

packages/headless/src/controllers/commerce/core/facets/generator/headless-commerce-facet-generator.ssr.ts

@@ -177,6 +177,7 @@ export function buildFacetGenerator(
   const createFacetState = (facetResponseSelector: AnyFacetResponse) => {
     const facetId = facetResponseSelector.facetId;
     return getCoreFacetState(
+      facetId,
       facetRequestSelector(getEngineState(), facetId),
       facetResponseSelector,
       isFacetLoadingResponseSelector

packages/headless/src/controllers/commerce/core/facets/headless-core-commerce-facet.test.ts

@@ -428,7 +428,9 @@ describe('CoreCommerceFacet', () => {
   });
 
   describe('#state', () => {
-    it('#facetId exposes the facetId', () => {
+    it('#facetId exposes the facetId passed as an option to the controller', () => {
+      state.commerceFacetSet = {};
+      options.facetResponseSelector = jest.fn();
       expect(facet.state.facetId).toBe(facetId);
     });
 

packages/headless/src/controllers/commerce/core/facets/headless-core-commerce-facet.ts

@@ -280,7 +280,12 @@ export function buildCoreCommerceFacet<
     },
 
     get state(): CoreCommerceFacetState<ValueResponse> {
-      return getCoreFacetState(getRequest(), getResponse(), getIsLoading());
+      return getCoreFacetState(
+        facetId,
+        getRequest(),
+        getResponse(),
+        getIsLoading()
+      );
     },
   };
 }
@@ -307,6 +312,7 @@ const canShowLessValues = (request: AnyFacetRequest | undefined) => {
 };
 
 export const getCoreFacetState = <T extends AnyFacetValueResponse>(
+  facetId: string,
   request: AnyFacetRequest | undefined,
   response: AnyFacetResponse | undefined,
   isLoading: boolean
@@ -315,7 +321,7 @@ export const getCoreFacetState = <T extends AnyFacetValueResponse>(
     canShowLessValues: canShowLessValues(request),
     canShowMoreValues: response?.moreValuesAvailable ?? false,
     displayName: response?.displayName ?? '',
-    facetId: response?.facetId ?? '',
+    facetId: facetId,
     field: response?.field ?? '',
     hasActiveValues:
       !response || response.type === 'hierarchical'

packages/headless/src/features/commerce/product-listing/product-listing-slice.test.ts

@@ -6,6 +6,7 @@ import {
   buildMockBaseProduct,
 } from '../../../test/mock-product';
 import {buildFetchProductListingResponse} from '../../../test/mock-product-listing';
+import {setContext, setView} from '../context/context-actions';
 import {
   fetchMoreProducts,
   fetchProductListing,
@@ -314,4 +315,41 @@ describe('product-listing-slice', () => {
       ]);
     });
   });
+  it('on #setView, restores the initial state', () => {
+    state = {
+      error: {message: 'error', statusCode: 500, type: 'type'},
+      isLoading: true,
+      products: [buildMockProduct({ec_name: 'product1'})],
+      facets: [buildMockCommerceRegularFacetResponse()],
+      responseId: 'response-id',
+      requestId: 'request-id',
+    };
+
+    const finalState = productListingReducer(state, setView({url: '/'}));
+
+    expect(finalState).toEqual(getProductListingInitialState());
+  });
+
+  it('on #setContext, restores the initial state', () => {
+    state = {
+      error: {message: 'error', statusCode: 500, type: 'type'},
+      isLoading: true,
+      products: [buildMockProduct({ec_name: 'product1'})],
+      facets: [buildMockCommerceRegularFacetResponse()],
+      responseId: 'response-id',
+      requestId: 'request-id',
+    };
+
+    const finalState = productListingReducer(
+      state,
+      setContext({
+        country: 'CA',
+        currency: 'CAD',
+        language: 'fr',
+        view: {url: '/'},
+      })
+    );
+
+    expect(finalState).toEqual(getProductListingInitialState());
+  });
 });

packages/headless/src/features/commerce/product-listing/product-listing-slice.ts

@@ -7,6 +7,7 @@ import {
 } from '../../../api/commerce/common/product';
 import {CommerceSuccessResponse} from '../../../api/commerce/common/response';
 import {QueryCommerceAPIThunkReturn} from '../common/actions';
+import {setContext, setView} from '../context/context-actions';
 import {
   fetchMoreProducts,
   fetchProductListing,
@@ -79,7 +80,9 @@ export const productListingReducer = createReducer(
         };
 
         products.splice(currentParentIndex, 1, newParent);
-      });
+      })
+      .addCase(setView, () => getProductListingInitialState())
+      .addCase(setContext, () => getProductListingInitialState());
   }
 );
 

packages/headless/src/features/commerce/search/search-slice.test.ts

@@ -6,6 +6,7 @@ import {
   buildMockProduct,
   buildMockBaseProduct,
 } from '../../../test/mock-product';
+import {setContext, setView} from '../context/context-actions';
 import {
   executeSearch,
   fetchMoreProducts,
@@ -318,4 +319,48 @@ describe('search-slice', () => {
       ]);
     });
   });
+  it('on #setView, restores the initial state', () => {
+    state = {
+      error: {message: 'message', statusCode: 500, type: 'type'},
+      isLoading: true,
+      requestId: 'request-id',
+      facets: [buildMockCommerceRegularFacetResponse()],
+      products: [
+        buildMockProduct({ec_name: 'product1'}),
+        buildMockProduct({ec_name: 'product2'}),
+      ],
+      queryExecuted: 'query',
+      responseId: 'response-id',
+    };
+
+    const finalState = commerceSearchReducer(state, setView({url: '/'}));
+
+    expect(finalState).toEqual(getCommerceSearchInitialState());
+  });
+
+  it('on #setContext, restores the initial state', () => {
+    state = {
+      error: {message: 'message', statusCode: 500, type: 'type'},
+      isLoading: true,
+      requestId: 'request-id',
+      facets: [buildMockCommerceRegularFacetResponse()],
+      products: [
+        buildMockProduct({ec_name: 'product1'}),
+        buildMockProduct({ec_name: 'product2'}),
+      ],
+      queryExecuted: 'query',
+      responseId: 'response-id',
+    };
+    const finalState = commerceSearchReducer(
+      state,
+      setContext({
+        country: 'CA',
+        currency: 'CAD',
+        language: 'fr',
+        view: {url: '/'},
+      })
+    );
+
+    expect(finalState).toEqual(getCommerceSearchInitialState());
+  });
 });

packages/headless/src/features/commerce/search/search-slice.ts

@@ -6,6 +6,7 @@ import {
   ChildProduct,
 } from '../../../api/commerce/common/product';
 import {CommerceSuccessResponse} from '../../../api/commerce/common/response';
+import {setContext, setView} from '../context/context-actions';
 import {
   QuerySearchCommerceAPIThunkReturn,
   executeSearch,
@@ -87,7 +88,9 @@ export const commerceSearchReducer = createReducer(
         };
 
         products.splice(currentParentIndex, 1, newParent);
-      });
+      })
+      .addCase(setView, () => getCommerceSearchInitialState())
+      .addCase(setContext, () => getCommerceSearchInitialState());
   }
 );
 

packages/headless/src/features/facets/facet-order/facet-order-slice.test.ts

@@ -6,6 +6,7 @@ import {buildMockFacetResponse} from '../../../test/mock-facet-response';
 import {buildFetchProductListingResponse} from '../../../test/mock-product-listing';
 import {buildMockSearch} from '../../../test/mock-search';
 import {buildMockSearchResponse} from '../../../test/mock-search-response';
+import {setContext, setView} from '../../commerce/context/context-actions';
 import {Parameters} from '../../commerce/parameters/parameters-actions';
 import {restoreProductListingParameters} from '../../commerce/product-listing-parameters/product-listing-parameters-actions';
 import {fetchProductListing} from '../../commerce/product-listing/product-listing-actions';
@@ -149,4 +150,21 @@ describe('facet-order slice', () => {
       ]);
     });
   });
+  it('#setView restore the initial state', () => {
+    const facetIds = ['facetA', 'facetB'];
+    dispatchMockSearch(facetIds);
+    expect(state).toEqual(facetIds);
+
+    dispatchMock(setView);
+    expect(state).toEqual(getFacetOrderInitialState());
+  });
+
+  it('#setContext (commerce) restore the initial state', () => {
+    const facetIds = ['facetA', 'facetB'];
+    dispatchMockSearch(facetIds);
+    expect(state).toEqual(facetIds);
+
+    dispatchMock(setContext);
+    expect(state).toEqual(getFacetOrderInitialState());
+  });
 });

packages/headless/src/features/facets/facet-order/facet-order-slice.ts

@@ -1,4 +1,5 @@
 import {AnyAction, createReducer} from '@reduxjs/toolkit';
+import {setContext, setView} from '../../commerce/context/context-actions';
 import {Parameters} from '../../commerce/parameters/parameters-actions';
 import {restoreProductListingParameters} from '../../commerce/product-listing-parameters/product-listing-parameters-actions';
 import {fetchProductListing} from '../../commerce/product-listing/product-listing-actions';
@@ -19,7 +20,9 @@ export const facetOrderReducer = createReducer(
       .addCase(restoreProductListingParameters, handleRestoreParameters)
       .addCase(change.fulfilled, (state, action) => {
         return action.payload?.facetOrder ?? state;
-      });
+      })
+      .addCase(setView, () => getFacetOrderInitialState())
+      .addCase(setContext, () => getFacetOrderInitialState());
   }
 );
 

packages/samples/headless-commerce-react/src/App.test.tsx

@@ -1,6 +1,6 @@
 import {render} from '@testing-library/react';
 import {vi, MockInstance} from 'vitest';
-import App from './App';
+import App from './App.js';
 
 let errorSpy: MockInstance<{
   (...data: unknown[]): void;

packages/samples/headless-commerce-react/src/App.tsx

@@ -1,6 +1,6 @@
 import {Suspense} from 'react';
-import {getEngine} from './context/engine';
-import Router from './router/router';
+import {getEngine} from './context/engine.js';
+import Router from './router/router.js';
 
 export default function App() {
   const engine = getEngine();

packages/samples/headless-commerce-react/src/components/breadcrumb-manager/breadcrumb-manager.tsx

@@ -5,7 +5,6 @@ import {
   DateFacetValue,
   BreadcrumbManager as HeadlessBreadcrumbManager,
 } from '@coveo/headless/commerce';
-import {AnyFacetValueResponse} from '@coveo/headless/dist/definitions/features/commerce/facets/facet-set/interfaces/response';
 import {useEffect, useState} from 'react';
 
 interface BreadcrumbManagerProps {
@@ -26,7 +25,11 @@ export default function BreadcrumbManager(props: BreadcrumbManagerProps) {
   }
 
   const renderBreadcrumbValue = (
-    value: AnyFacetValueResponse,
+    value:
+      | CategoryFacetValue
+      | RegularFacetValue
+      | NumericFacetValue
+      | DateFacetValue,
     type: string
   ) => {
     switch (type) {

packages/samples/headless-commerce-react/src/components/cart-tab/cart-tab.tsx

@@ -18,12 +18,13 @@ export default function CartTab(props: ICartTab) {
   return (
     <span>
       <input
-        type="radio"
+        aria-label={`Cart (${state.totalQuantity})`}
+        checked={window.location.pathname === '/cart'}
         id="cart"
         name="cart"
-        value="/cart"
-        checked={window.location.pathname === '/cart'}
         onChange={onChange}
+        type="radio"
+        value="/cart"
       />
       <label htmlFor="cart">
         Cart<span>({state.totalQuantity})</span>

packages/samples/headless-commerce-react/src/components/cart/cart.tsx

@@ -1,7 +1,7 @@
 import {CartItem, Cart as HeadlessCart} from '@coveo/headless/commerce';
 import {useEffect, useState} from 'react';
-import {saveCartItemsToLocaleStorage} from '../../utils/cart-utils';
-import {formatCurrency} from '../../utils/format-currency';
+import {saveCartItemsToLocaleStorage} from '../../utils/cart-utils.js';
+import {formatCurrency} from '../../utils/format-currency.js';
 
 interface ICartProps {
   controller: HeadlessCart;