From f304b635cb3135e5f8bfdd878642dbacaa55123d Mon Sep 17 00:00:00 2001
From: benkandelaars <bkandelaars@coveo.com>
Date: Tue, 29 Oct 2024 19:03:37 +0000
Subject: [PATCH] feat(headless): restore range facet state after refresh
 (#4599)

[CAPI-1470](https://coveord.atlassian.net/browse/CAPI-1470)

Barca is crashing on page refresh when a numerical range facet is used
because headless isn't refresh the `facetSet` in the way it does for
other facets.

Test on barca and now works as expected.
Before:


https://github.com/user-attachments/assets/6bf6faed-87df-42c2-90a1-5ad5193eaaf3

Now:


https://github.com/user-attachments/assets/55de9da9-9ad1-4bd3-b524-84a756342371



[CAPI-1470]:
https://coveord.atlassian.net/browse/CAPI-1470?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
---
 .../facets/facet-set/facet-set-reducers.ts    |  3 +
 .../facets/facet-set/facet-set-slice.test.ts  | 61 +++++++++++++++++++
 2 files changed, 64 insertions(+)

diff --git a/packages/headless/src/features/commerce/facets/facet-set/facet-set-reducers.ts b/packages/headless/src/features/commerce/facets/facet-set/facet-set-reducers.ts
index 8222db59aff..d51e3d29c38 100644
--- a/packages/headless/src/features/commerce/facets/facet-set/facet-set-reducers.ts
+++ b/packages/headless/src/features/commerce/facets/facet-set/facet-set-reducers.ts
@@ -29,6 +29,9 @@ export function restoreFromParameters(
   if (action.payload.nf) {
     restoreRangeFacets(state, action.payload.nf, 'numericalRange');
   }
+  if (action.payload.mnf) {
+    restoreRangeFacets(state, action.payload.mnf, 'numericalRange');
+  }
   if (action.payload.df) {
     restoreRangeFacets(state, action.payload.df, 'dateRange');
   }
diff --git a/packages/headless/src/features/commerce/facets/facet-set/facet-set-slice.test.ts b/packages/headless/src/features/commerce/facets/facet-set/facet-set-slice.test.ts
index 99236d332f1..c5e6ad9aa82 100644
--- a/packages/headless/src/features/commerce/facets/facet-set/facet-set-slice.test.ts
+++ b/packages/headless/src/features/commerce/facets/facet-set/facet-set-slice.test.ts
@@ -3024,6 +3024,67 @@ describe('commerceFacetSetReducer', () => {
       );
     });
 
+    it('populates manual numeric facet requests', () => {
+      const finalState = commerceFacetSetReducer(
+        state,
+        action({
+          mnf: {
+            manual_numeric_facet_1: [
+              {
+                start: 1,
+                end: 10,
+                endInclusive: false,
+              },
+              {
+                start: 15,
+                end: 20,
+                endInclusive: true,
+              },
+            ],
+            manual_numeric_facet_2: [
+              {
+                start: 11,
+                end: 20,
+                endInclusive: true,
+              },
+            ],
+          },
+        })
+      );
+
+      const firstRequest = finalState['manual_numeric_facet_1'].request;
+      expect(firstRequest.type).toEqual('numericalRange');
+      expect(firstRequest.values).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            start: 1,
+            end: 10,
+            endInclusive: false,
+            state: 'selected',
+          }),
+          expect.objectContaining({
+            start: 15,
+            end: 20,
+            endInclusive: true,
+            state: 'selected',
+          }),
+        ])
+      );
+
+      const secondRequest = finalState['manual_numeric_facet_2'].request;
+      expect(secondRequest.type).toEqual('numericalRange');
+      expect(secondRequest.values).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            start: 11,
+            end: 20,
+            endInclusive: true,
+            state: 'selected',
+          }),
+        ])
+      );
+    });
+
     it('populates date facet requests', () => {
       const finalState = commerceFacetSetReducer(
         state,