From bbb352c7aa2f6ae30de81502ae9930f9e08f8fd6 Mon Sep 17 00:00:00 2001
From: Louis Bompart <lbompart@coveo.com>
Date: Fri, 23 Aug 2024 12:17:08 -0400
Subject: [PATCH 01/13] docs(analytics): make trackingId & analyticsMode public
 (#4300)

CDX-1565

---------

Co-authored-by: jpmarceau <39384459+jpmarceau@users.noreply.github.com>
---
 packages/headless/src/app/engine-configuration.ts      | 10 ++++++----
 .../features/configuration/configuration-actions.ts    |  9 ++++++---
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/headless/src/app/engine-configuration.ts b/packages/headless/src/app/engine-configuration.ts
index b7f204f7d5b..6f026d34507 100644
--- a/packages/headless/src/app/engine-configuration.ts
+++ b/packages/headless/src/app/engine-configuration.ts
@@ -157,13 +157,15 @@ export interface AnalyticsConfiguration {
   documentLocation?: string;
   /**
    * The unique identifier of the tracking target.
-   * @internal
    */
   trackingId?: string;
   /**
-   * Specifies the analytics mode to use.
-   * By default, `legacy`.
-   * @internal
+   * The analytics client to use.
+   * - `legacy`: The legacy analytics client, i.e., the Coveo Analytics.js library.
+   * - `next`: The next analytics client, i.e., the Coveo Event Protocol with the Relay library.
+   *
+   * Starting at V3.0, the default value will be `next`.
+   * @default 'legacy'
    */
   analyticsMode?: 'legacy' | 'next';
   /**
diff --git a/packages/headless/src/features/configuration/configuration-actions.ts b/packages/headless/src/features/configuration/configuration-actions.ts
index 7b94cc88473..4845443b773 100644
--- a/packages/headless/src/features/configuration/configuration-actions.ts
+++ b/packages/headless/src/features/configuration/configuration-actions.ts
@@ -157,9 +157,12 @@ export interface UpdateAnalyticsConfigurationActionCreatorPayload {
    */
   trackingId?: string;
   /**
-   * Specifies the analytics mode to use.
-   * By default, `legacy`.
-   * @internal
+   * The analytics client to use.
+   * - `legacy`: The legacy analytics client, i.e., the Coveo Analytics.js library.
+   * - `next`: The next analytics client, i.e., the Coveo Event Protocol with the Relay library.
+   *
+   * Starting at V3.0, the default value will be `next`.
+   * @default 'legacy'
    */
   analyticsMode?: 'legacy' | 'next';
   /**

From a88c5b34c05a3e75fcffae16f200561fb3e3d096 Mon Sep 17 00:00:00 2001
From: Louis Bompart <lbompart@coveo.com>
Date: Fri, 23 Aug 2024 13:35:03 -0400
Subject: [PATCH 02/13] fix(genqa): ensure preloaded state can be used w/ rga
 (#4299)

Ensure existing state is considered by the subscribeStateManager.

[SVCC-4080](https://coveord.atlassian.net/browse/SVCC-4080)

[SVCC-4080]:
https://coveord.atlassian.net/browse/SVCC-4080?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
---
 ...eadless-searchapi-generated-answer.test.ts | 25 ++++++++++++++++---
 .../headless-searchapi-generated-answer.ts    | 17 ++++++++++++-
 2 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/packages/headless/src/controllers/core/generated-answer/headless-searchapi-generated-answer.test.ts b/packages/headless/src/controllers/core/generated-answer/headless-searchapi-generated-answer.test.ts
index 0b9bad9340d..c5e374207d5 100644
--- a/packages/headless/src/controllers/core/generated-answer/headless-searchapi-generated-answer.test.ts
+++ b/packages/headless/src/controllers/core/generated-answer/headless-searchapi-generated-answer.test.ts
@@ -36,10 +36,6 @@ jest.mock(
 jest.mock('../../../features/search/search-actions');
 
 describe('searchapi-generated-answer', () => {
-  it('should be tested', () => {
-    expect(true).toBe(true);
-  });
-
   let engine: MockedSearchEngine;
 
   const createGeneratedAnswer = (props: GeneratedAnswerProps = {}) =>
@@ -290,4 +286,25 @@ describe('searchapi-generated-answer', () => {
       exampleFieldsToIncludeInCitations
     );
   });
+
+  describe('when used with a preloaded state', () => {
+    beforeEach(() => {
+      const state = createMockState({
+        generatedAnswer: {
+          ...getGeneratedAnswerInitialState(),
+          id: 'some-id',
+        },
+      });
+      state.search.requestId = 'some-request-id';
+      state.search.extendedResults.generativeQuestionAnsweringId =
+        'some-stream-id';
+      engine = buildMockSearchEngine(state);
+    });
+
+    it('should not trigger any actions on initialization', () => {
+      engine.dispatch.mockClear();
+      createGeneratedAnswer();
+      expect(engine.dispatch).not.toHaveBeenCalled();
+    });
+  });
 });
diff --git a/packages/headless/src/controllers/core/generated-answer/headless-searchapi-generated-answer.ts b/packages/headless/src/controllers/core/generated-answer/headless-searchapi-generated-answer.ts
index 29dc37aabad..6de5c23049c 100644
--- a/packages/headless/src/controllers/core/generated-answer/headless-searchapi-generated-answer.ts
+++ b/packages/headless/src/controllers/core/generated-answer/headless-searchapi-generated-answer.ts
@@ -127,10 +127,25 @@ export function buildSearchAPIGeneratedAnswer(
   const controller = buildCoreGeneratedAnswer(engine, analyticsClient, props);
   const getState = () => engine.state;
 
+  if (
+    engine.state.generatedAnswer.id &&
+    !subscribeStateManager.engines[engine.state.generatedAnswer.id]
+  ) {
+    subscribeStateManager.engines[engine.state.generatedAnswer.id] = {
+      abortController: undefined,
+      lastRequestId: engine.state.search.requestId,
+      lastStreamId:
+        engine.state.search.extendedResults.generativeQuestionAnsweringId ?? '',
+    };
+  }
+
   if (!engine.state.generatedAnswer.id) {
     const genQaEngineId = randomID('genQA-', 12);
     engine.dispatch(setId({id: genQaEngineId}));
-    subscribeStateManager.engines[genQaEngineId] = {
+  }
+
+  if (!subscribeStateManager.engines[engine.state.generatedAnswer.id]) {
+    subscribeStateManager.engines[engine.state.generatedAnswer.id] = {
       abortController: undefined,
       lastRequestId: '',
       lastStreamId: '',

From 67d0416470b8b1fa77488da4bd8e534ffcc715eb Mon Sep 17 00:00:00 2001
From: Louis Bompart <lbompart@coveo.com>
Date: Fri, 23 Aug 2024 13:56:21 -0400
Subject: [PATCH 03/13] fix(atomic): prevent item click when carousel buttons
 are clicked (#4297)

When you click on an element within another, you are clicking both.
This is why you must 'stop' the event propagation at the target in this
situation. (otherwise, if the parent & the child elements have
listeners, both will be triggered)

https://coveord.atlassian.net/browse/KIT-3477
---
 .../e2e/atomic-product-image.e2e.ts            | 12 ++++++++++++
 .../atomic-product-image/e2e/fixture.ts        | 18 ++++++++++++++++++
 .../atomic-product-image/e2e/page-object.ts    |  9 +++++++++
 .../common/image-carousel/image-carousel.tsx   | 10 ++++++++--
 4 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 packages/atomic/src/components/commerce/product-template-components/atomic-product-image/e2e/atomic-product-image.e2e.ts
 create mode 100644 packages/atomic/src/components/commerce/product-template-components/atomic-product-image/e2e/fixture.ts
 create mode 100644 packages/atomic/src/components/commerce/product-template-components/atomic-product-image/e2e/page-object.ts

diff --git a/packages/atomic/src/components/commerce/product-template-components/atomic-product-image/e2e/atomic-product-image.e2e.ts b/packages/atomic/src/components/commerce/product-template-components/atomic-product-image/e2e/atomic-product-image.e2e.ts
new file mode 100644
index 00000000000..c95f69122bf
--- /dev/null
+++ b/packages/atomic/src/components/commerce/product-template-components/atomic-product-image/e2e/atomic-product-image.e2e.ts
@@ -0,0 +1,12 @@
+// import {test, expect} from './fixture';
+
+// test.describe('default', async () => {
+//   test.describe('when clicking on the next button', async ({productImage}) => {
+//     test.fixme('should navigate to the next image', () => {});
+//     test.fixme('should not open the product', () => {});
+//   });
+//   test.describe('when clicking on the previous button', async ({productImage}) => {
+//     test.fixme('should navigate to the previous image', () => {});
+//     test.fixme('should not open the product', () => {});
+//   });
+// });
diff --git a/packages/atomic/src/components/commerce/product-template-components/atomic-product-image/e2e/fixture.ts b/packages/atomic/src/components/commerce/product-template-components/atomic-product-image/e2e/fixture.ts
new file mode 100644
index 00000000000..ca73e2a7976
--- /dev/null
+++ b/packages/atomic/src/components/commerce/product-template-components/atomic-product-image/e2e/fixture.ts
@@ -0,0 +1,18 @@
+import {test as base} from '@playwright/test';
+import {
+  AxeFixture,
+  makeAxeBuilder,
+} from '../../../../../../playwright-utils/base-fixture';
+import {ProductImageObject} from './page-object';
+
+interface TestFixture {
+  productImage: ProductImageObject;
+}
+
+export const test = base.extend<TestFixture & AxeFixture>({
+  makeAxeBuilder,
+  productImage: async ({page}, use) => {
+    await use(new ProductImageObject(page));
+  },
+});
+export {expect} from '@playwright/test';
diff --git a/packages/atomic/src/components/commerce/product-template-components/atomic-product-image/e2e/page-object.ts b/packages/atomic/src/components/commerce/product-template-components/atomic-product-image/e2e/page-object.ts
new file mode 100644
index 00000000000..30a89aebb3a
--- /dev/null
+++ b/packages/atomic/src/components/commerce/product-template-components/atomic-product-image/e2e/page-object.ts
@@ -0,0 +1,9 @@
+import type {Page} from '@playwright/test';
+import {BasePageObject} from '../../../../../../playwright-utils/base-page-object';
+
+export class ProductImageObject extends BasePageObject<'atomic-product-image'> {
+  constructor(page: Page) {
+    super(page, 'atomic-product-image');
+  }
+  // TODO tests
+}
diff --git a/packages/atomic/src/components/common/image-carousel/image-carousel.tsx b/packages/atomic/src/components/common/image-carousel/image-carousel.tsx
index 06f4063d248..6a812afccdc 100644
--- a/packages/atomic/src/components/common/image-carousel/image-carousel.tsx
+++ b/packages/atomic/src/components/common/image-carousel/image-carousel.tsx
@@ -27,7 +27,10 @@ export const ImageCarousel: FunctionalComponent<
       <Button
         style="text-primary"
         ariaLabel={props.bindings.i18n.t('previous')}
-        onClick={() => props.previousImage()}
+        onClick={(event) => {
+          event?.stopPropagation();
+          props.previousImage();
+        }}
         part="previous-button"
         class={`${commonPaginationClasses} left-0 ml-1`}
       >
@@ -44,7 +47,10 @@ export const ImageCarousel: FunctionalComponent<
       <Button
         style="text-primary"
         ariaLabel={props.bindings.i18n.t('next')}
-        onClick={() => props.nextImage()}
+        onClick={(event) => {
+          event?.stopPropagation();
+          props.nextImage();
+        }}
         part="next-button"
         class={`${commonPaginationClasses} right-0 mr-1`}
       >

From 19cabeb2665a21a71f883c731ef4d5167cb1841d Mon Sep 17 00:00:00 2001
From: Louis Bompart <lbompart@coveo.com>
Date: Fri, 23 Aug 2024 14:45:15 -0400
Subject: [PATCH 04/13] fix(atomic): search-box suggestions should be resilient
 to search-box redirection-url changes (#4289)

When updating the `redirection-url`, references to the 'old' controller
persisted and broke the suggestions.

To alleviate this issue:
0. Ensure SB ID unicity per component
1. Allow SSB controllers to receive an update to their redirection URL.
2. Clean-up then rebuild controllers when the redirection-url attribute
is updated. When rebuilding a SSB controller, allow the state associated
to the ID to be overwritten.
3. Use 'getter-like' functions instead of direct reference for the
controller in the suggestion-manager.

KIT-3471

---------

Co-authored-by: Alex Prudhomme <78121423+alexprudhomme@users.noreply.github.com>
---
 .../atomic-commerce-search-box.tsx            |  41 +-
 .../e2e/atomic-commerce-search-box.e2e.ts     |  29 ++
 .../e2e/page-object.ts                        |   4 +
 .../atomic-product-template.new.stories.tsx   |   2 +-
 ...c-commerce-search-box-instant-products.tsx |  10 +-
 ...-commerce-search-box-query-suggestions.tsx |  13 +-
 ...mic-commerce-search-box-recent-queries.tsx |  10 +-
 .../common/suggestions/suggestions-common.ts  |   4 +-
 .../atomic-search-box.new.stories.tsx         | 388 +++++++++++++++++-
 .../atomic-search-box/atomic-search-box.tsx   |  45 +-
 .../e2e/atomic-search-box.e2e.ts              |  27 ++
 .../atomic-search-box/e2e/page-object.ts      |   4 +
 .../atomic-search-box-instant-results.tsx     |  10 +-
 .../atomic-search-box-query-suggestions.tsx   |  13 +-
 .../atomic-search-box-recent-queries.tsx      |  10 +-
 .../search/search-interface-wrapper.tsx       |  14 +
 .../headless-standalone-search-box-options.ts |   9 +-
 .../headless-standalone-search-box.test.ts    |   1 +
 .../headless-standalone-search-box.ts         |  19 +-
 .../headless-standalone-search-box-options.ts |   9 +-
 .../headless-standalone-search-box.test.ts    |   1 +
 .../headless-standalone-search-box.ts         |  20 +-
 ...tandalone-search-box-set-actions-loader.ts |  11 +
 .../standalone-search-box-set-actions.ts      |  29 +-
 .../standalone-search-box-set-slice.test.ts   |  38 ++
 .../standalone-search-box-set-slice.ts        |  15 +-
 ...tandalone-search-box-set-actions-loader.ts |  11 +
 .../standalone-search-box-set-actions.ts      |  29 +-
 .../standalone-search-box-set-slice.test.ts   |  36 ++
 .../standalone-search-box-set-slice.ts        |  14 +-
 30 files changed, 803 insertions(+), 63 deletions(-)

diff --git a/packages/atomic/src/components/commerce/atomic-commerce-search-box/atomic-commerce-search-box.tsx b/packages/atomic/src/components/commerce/atomic-commerce-search-box/atomic-commerce-search-box.tsx
index 2e5f573745d..949e299bf94 100644
--- a/packages/atomic/src/components/commerce/atomic-commerce-search-box/atomic-commerce-search-box.tsx
+++ b/packages/atomic/src/components/commerce/atomic-commerce-search-box/atomic-commerce-search-box.tsx
@@ -203,22 +203,46 @@ export class AtomicCommerceSearchBox
 
   @AriaLiveRegion('search-suggestions', true)
   protected suggestionsAriaMessage!: string;
+  public disconnectedCallback = () => {};
+
+  private isStandaloneSearchBox(
+    searchBox: SearchBox | StandaloneSearchBox
+  ): searchBox is StandaloneSearchBox {
+    return 'redirectTo' in searchBox;
+  }
 
   public initialize() {
-    this.id = randomID('atomic-commerce-search-box-');
+    this.id ??= randomID('atomic-commerce-search-box-');
+
+    this.initializeSearchboxController();
+    this.initializeSuggestionManager();
+  }
+
+  private updateRedirectionUrl() {
+    if (this.isStandaloneSearchBox(this.searchBox) && this.redirectionUrl) {
+      this.searchBox.updateRedirectUrl(this.redirectionUrl);
+    } else {
+      this.registerNewSearchBoxController();
+    }
+  }
+
+  private registerNewSearchBoxController() {
+    this.disconnectedCallback();
+    this.initialize();
+  }
 
+  private initializeSearchboxController() {
     this.searchBox = this.redirectionUrl
       ? buildStandaloneSearchBox(this.bindings.engine, {
           options: {
             ...this.searchBoxOptions,
             redirectionUrl: this.redirectionUrl,
+            overwrite: true,
           },
         })
       : buildSearchBox(this.bindings.engine, {
           options: this.searchBoxOptions,
         });
-
-    this.initializeSuggestionManager();
   }
 
   public componentWillUpdate() {
@@ -271,7 +295,7 @@ export class AtomicCommerceSearchBox
     this.suggestionManager.forceUpdate();
   }
 
-  public componentWillRender() {
+  private registerSearchboxSuggestionEvents() {
     this.searchBoxSuggestionEventsQueue.forEach((evt) => {
       this.suggestionManager.registerSuggestionsFromEvent(
         evt,
@@ -283,7 +307,7 @@ export class AtomicCommerceSearchBox
 
   @Watch('redirectionUrl')
   watchRedirectionUrl() {
-    this.initialize();
+    this.updateRedirectionUrl();
   }
 
   private initializeSuggestionManager() {
@@ -324,8 +348,8 @@ export class AtomicCommerceSearchBox
     return {
       ...this.bindings,
       id: this.id,
-      isStandalone: !!this.redirectionUrl,
-      searchBoxController: this.searchBox,
+      isStandalone: () => !!this.redirectionUrl,
+      searchBoxController: () => this.searchBox,
       numberOfQueries: this.numberOfQueries,
       clearFilters: this.clearFilters,
     };
@@ -675,6 +699,9 @@ export class AtomicCommerceSearchBox
     const isDisabled = this.isSearchDisabledForEndUser(
       this.searchBoxState.value
     );
+    if (!this.suggestionManager.suggestions.length) {
+      this.registerSearchboxSuggestionEvents();
+    }
 
     return (
       <Host>
diff --git a/packages/atomic/src/components/commerce/atomic-commerce-search-box/e2e/atomic-commerce-search-box.e2e.ts b/packages/atomic/src/components/commerce/atomic-commerce-search-box/e2e/atomic-commerce-search-box.e2e.ts
index 56cb9dc3add..e28c87f6c32 100644
--- a/packages/atomic/src/components/commerce/atomic-commerce-search-box/e2e/atomic-commerce-search-box.e2e.ts
+++ b/packages/atomic/src/components/commerce/atomic-commerce-search-box/e2e/atomic-commerce-search-box.e2e.ts
@@ -274,6 +274,35 @@ test.describe('with instant results & query suggestions', () => {
         await expect(searchBox.searchInput).toHaveValue('surf');
       });
     });
+
+    test.describe('after updating the redirect-url attribute', () => {
+      test.beforeEach(async ({searchBox}) => {
+        await searchBox.component.evaluate((node) =>
+          node.setAttribute(
+            'redirection-url',
+            './iframe.html?id=atomic-commerce-search-box--in-page&viewMode=story&args=enable-query-syntax:!true;suggestion-timeout:5000'
+          )
+        );
+      });
+
+      test('should redirect to the specified url after selecting a suggestion', async ({
+        page,
+        searchBox,
+      }) => {
+        const suggestionText = await searchBox
+          .searchSuggestions()
+          .first()
+          .textContent();
+
+        expect(suggestionText).not.toBeNull();
+
+        await searchBox.searchSuggestions().first().click();
+        await page.waitForURL(
+          '**/iframe.html?id=atomic-commerce-search-box--in-page*'
+        );
+        await expect(searchBox.searchInput).toHaveValue(suggestionText ?? '');
+      });
+    });
   });
 });
 
diff --git a/packages/atomic/src/components/commerce/atomic-commerce-search-box/e2e/page-object.ts b/packages/atomic/src/components/commerce/atomic-commerce-search-box/e2e/page-object.ts
index 9c0763a49c6..03023dfaae6 100644
--- a/packages/atomic/src/components/commerce/atomic-commerce-search-box/e2e/page-object.ts
+++ b/packages/atomic/src/components/commerce/atomic-commerce-search-box/e2e/page-object.ts
@@ -6,6 +6,10 @@ export class SearchBoxPageObject extends BasePageObject<'atomic-commerce-search-
     super(page, 'atomic-commerce-search-box');
   }
 
+  get component() {
+    return this.page.locator('atomic-commerce-search-box');
+  }
+
   get submitButton() {
     return this.page.getByLabel('Search', {exact: true});
   }
diff --git a/packages/atomic/src/components/commerce/product-template/atomic-product-template.new.stories.tsx b/packages/atomic/src/components/commerce/product-template/atomic-product-template.new.stories.tsx
index 59ab137fb36..2d169ea774b 100644
--- a/packages/atomic/src/components/commerce/product-template/atomic-product-template.new.stories.tsx
+++ b/packages/atomic/src/components/commerce/product-template/atomic-product-template.new.stories.tsx
@@ -94,7 +94,7 @@ export const InASearchBoxInstantProducts: Story = {
     commerceInterfaceDecorator,
   ],
   play: async (context) => {
-    initializeCommerceInterface(context);
+    await initializeCommerceInterface(context);
     const {canvasElement, step} = context;
     const canvas = within(canvasElement);
     await step('Click Searchbox', async () => {
diff --git a/packages/atomic/src/components/commerce/search-box-suggestions/atomic-commerce-search-box-instant-products/atomic-commerce-search-box-instant-products.tsx b/packages/atomic/src/components/commerce/search-box-suggestions/atomic-commerce-search-box-instant-products/atomic-commerce-search-box-instant-products.tsx
index d644140fc69..8a871088e16 100644
--- a/packages/atomic/src/components/commerce/search-box-suggestions/atomic-commerce-search-box-instant-products/atomic-commerce-search-box-instant-products.tsx
+++ b/packages/atomic/src/components/commerce/search-box-suggestions/atomic-commerce-search-box-instant-products/atomic-commerce-search-box-instant-products.tsx
@@ -176,10 +176,10 @@ export class AtomicCommerceSearchBoxInstantProducts
         content: <InstantItemShowAllButton i18n={this.bindings.i18n} />,
         onSelect: () => {
           this.bindings.clearSuggestions();
-          this.bindings.searchBoxController.updateText(
-            this.instantProducts.state.query
-          );
-          this.bindings.searchBoxController.submit();
+          this.bindings
+            .searchBoxController()
+            .updateText(this.instantProducts.state.query);
+          this.bindings.searchBoxController().submit();
         },
       });
     }
@@ -226,7 +226,7 @@ export class AtomicCommerceSearchBoxInstantProducts
   private onSuggestedQueryChange() {
     if (
       !this.bindings.getSuggestionElements().length &&
-      !this.bindings.searchBoxController.state.value
+      !this.bindings.searchBoxController().state.value
     ) {
       console.warn(
         "There doesn't seem to be any query suggestions configured. Make sure to include either an atomic-commerce-search-box-query-suggestions or atomic-commerce-search-box-recent-queries in your search box in order to see some instant products."
diff --git a/packages/atomic/src/components/commerce/search-box-suggestions/atomic-commerce-search-box-query-suggestions/atomic-commerce-search-box-query-suggestions.tsx b/packages/atomic/src/components/commerce/search-box-suggestions/atomic-commerce-search-box-query-suggestions/atomic-commerce-search-box-query-suggestions.tsx
index fe892b4f80d..ab5f5add258 100644
--- a/packages/atomic/src/components/commerce/search-box-suggestions/atomic-commerce-search-box-query-suggestions/atomic-commerce-search-box-query-suggestions.tsx
+++ b/packages/atomic/src/components/commerce/search-box-suggestions/atomic-commerce-search-box-query-suggestions/atomic-commerce-search-box-query-suggestions.tsx
@@ -87,15 +87,16 @@ export class AtomicCommerceSearchBoxQuerySuggestions {
   }
 
   private renderItems(): SearchBoxSuggestionElement[] {
-    const hasQuery = this.bindings.searchBoxController.state.value !== '';
+    const hasQuery = this.bindings.searchBoxController().state.value !== '';
     const max = hasQuery ? this.maxWithQuery : this.maxWithoutQuery;
-    return this.bindings.searchBoxController.state.suggestions
-      .slice(0, max)
+    return this.bindings
+      .searchBoxController()
+      .state.suggestions.slice(0, max)
       .map((suggestion) => this.renderItem(suggestion));
   }
 
   private renderItem(suggestion: Suggestion) {
-    const hasQuery = this.bindings.searchBoxController.state.value !== '';
+    const hasQuery = this.bindings.searchBoxController().state.value !== '';
     const partialItem = getPartialSearchBoxSuggestionElement(
       suggestion,
       this.bindings.i18n
@@ -114,7 +115,9 @@ export class AtomicCommerceSearchBoxQuerySuggestions {
         </QuerySuggestionContainer>
       ),
       onSelect: () => {
-        this.bindings.searchBoxController.selectSuggestion(suggestion.rawValue);
+        this.bindings
+          .searchBoxController()
+          .selectSuggestion(suggestion.rawValue);
       },
     };
   }
diff --git a/packages/atomic/src/components/commerce/search-box-suggestions/atomic-commerce-search-box-recent-queries/atomic-commerce-search-box-recent-queries.tsx b/packages/atomic/src/components/commerce/search-box-suggestions/atomic-commerce-search-box-recent-queries/atomic-commerce-search-box-recent-queries.tsx
index b10687db4d6..9d7f67c8e9e 100644
--- a/packages/atomic/src/components/commerce/search-box-suggestions/atomic-commerce-search-box-recent-queries/atomic-commerce-search-box-recent-queries.tsx
+++ b/packages/atomic/src/components/commerce/search-box-suggestions/atomic-commerce-search-box-recent-queries/atomic-commerce-search-box-recent-queries.tsx
@@ -123,7 +123,7 @@ export class AtomicCommerceSearchBoxRecentQueries {
       return [];
     }
 
-    const query = this.bindings.searchBoxController.state.value;
+    const query = this.bindings.searchBoxController().state.value;
     const hasQuery = query !== '';
     const max = hasQuery ? this.maxWithQuery : this.maxWithoutQuery;
     const filteredQueries = this.recentQueriesList.state.queries
@@ -157,7 +157,7 @@ export class AtomicCommerceSearchBoxRecentQueries {
   }
 
   private renderItem(value: string): SearchBoxSuggestionElement {
-    const query = this.bindings.searchBoxController.state.value;
+    const query = this.bindings.searchBoxController().state.value;
     const partialItem = getPartialRecentQueryElement(value, this.bindings.i18n);
     return {
       ...partialItem,
@@ -169,9 +169,9 @@ export class AtomicCommerceSearchBoxRecentQueries {
       ),
 
       onSelect: () => {
-        if (this.bindings.isStandalone) {
-          this.bindings.searchBoxController.updateText(value);
-          this.bindings.searchBoxController.submit();
+        if (this.bindings.isStandalone()) {
+          this.bindings.searchBoxController().updateText(value);
+          this.bindings.searchBoxController().submit();
           return;
         }
 
diff --git a/packages/atomic/src/components/common/suggestions/suggestions-common.ts b/packages/atomic/src/components/common/suggestions/suggestions-common.ts
index de127841a3b..5a12198f1fa 100644
--- a/packages/atomic/src/components/common/suggestions/suggestions-common.ts
+++ b/packages/atomic/src/components/common/suggestions/suggestions-common.ts
@@ -141,11 +141,11 @@ export type SearchBoxSuggestionsBindings<
   /**
    * Whether the search box is [standalone](https://docs.coveo.com/en/atomic/latest/usage/ssb/).
    */
-  isStandalone: boolean;
+  isStandalone(): boolean;
   /**
    * The search box headless controller.
    */
-  searchBoxController: SearchBoxController;
+  searchBoxController(): SearchBoxController;
   /**
    * The number of queries to display when the user interacts with the search box.
    */
diff --git a/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.new.stories.tsx b/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.new.stories.tsx
index 65ae5f5f840..9268d8c69e0 100644
--- a/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.new.stories.tsx
+++ b/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.new.stories.tsx
@@ -1,7 +1,11 @@
 import {parameters} from '@coveo/atomic/storybookUtils/common/common-meta-parameters';
 import {renderComponent} from '@coveo/atomic/storybookUtils/common/render-component';
-import {wrapInSearchInterface} from '@coveo/atomic/storybookUtils/search/search-interface-wrapper';
+import {
+  playExecuteFirstSearch,
+  wrapInSearchInterface,
+} from '@coveo/atomic/storybookUtils/search/search-interface-wrapper';
 import type {Meta, StoryObj as Story} from '@storybook/web-components';
+import {html} from 'lit/static-html.js';
 
 const {decorator, play} = wrapInSearchInterface(
   {
@@ -43,3 +47,385 @@ export const RichSearchBox: Story = {
       ></atomic-search-box-instant-results>`,
   },
 };
+
+export const InPage: Story = {
+  name: 'In a page',
+  decorators: [
+    (story) =>
+      html`<atomic-search-layout>
+        <div class="header-bg"></div>
+        <atomic-layout-section section="search">
+          ${story()}
+        </atomic-layout-section>
+        <atomic-layout-section section="facets">
+          <atomic-facet-manager>
+            <atomic-automatic-facet-generator
+              desired-count="3"
+            ></atomic-automatic-facet-generator>
+            <atomic-category-facet
+              field="geographicalhierarchy"
+              label="World Atlas"
+              with-search
+            >
+            </atomic-category-facet>
+            <atomic-facet field="author" label="Authors"></atomic-facet>
+            <atomic-facet
+              field="source"
+              label="Source"
+              display-values-as="link"
+            ></atomic-facet>
+            <atomic-facet
+              field="year"
+              label="Year"
+              display-values-as="box"
+            ></atomic-facet>
+            <atomic-numeric-facet
+              field="ytviewcount"
+              label="Youtube Views"
+              depends-on-filetype="YouTubeVideo"
+              with-input="integer"
+            ></atomic-numeric-facet>
+            <atomic-numeric-facet
+              field="ytlikecount"
+              label="Youtube Likes"
+              depends-on-filetype="YouTubeVideo"
+              display-values-as="link"
+            >
+              <atomic-numeric-range
+                start="0"
+                end="1000"
+                label="Unpopular"
+              ></atomic-numeric-range>
+              <atomic-numeric-range
+                start="1000"
+                end="8000"
+                label="Well liked"
+              ></atomic-numeric-range>
+              <atomic-numeric-range
+                start="8000"
+                end="100000"
+                label="Popular"
+              ></atomic-numeric-range>
+              <atomic-numeric-range
+                start="100000"
+                end="999999999"
+                label="Treasured"
+              ></atomic-numeric-range>
+            </atomic-numeric-facet>
+            <atomic-numeric-facet field="sncost" label="Cost Range (auto)">
+              <atomic-format-currency currency="CAD"></atomic-format-currency>
+            </atomic-numeric-facet>
+            <atomic-timeframe-facet label="Timeframe" with-date-picker>
+              <atomic-timeframe unit="hour"></atomic-timeframe>
+              <atomic-timeframe unit="day"></atomic-timeframe>
+              <atomic-timeframe unit="week"></atomic-timeframe>
+              <atomic-timeframe unit="month"></atomic-timeframe>
+              <atomic-timeframe unit="quarter"></atomic-timeframe>
+              <atomic-timeframe unit="year"></atomic-timeframe>
+              <atomic-timeframe
+                unit="year"
+                amount="10"
+                period="next"
+              ></atomic-timeframe>
+            </atomic-timeframe-facet>
+            <atomic-rating-facet
+              field="snrating"
+              label="Rating"
+              number-of-intervals="5"
+            >
+            </atomic-rating-facet>
+            <atomic-rating-range-facet
+              facet-id="snrating_range"
+              field="snrating"
+              label="Rating Range (auto)"
+              number-of-intervals="5"
+            >
+            </atomic-rating-range-facet>
+            <atomic-color-facet
+              field="filetype"
+              label="Files"
+              number-of-values="6"
+              sort-criteria="occurrences"
+            ></atomic-color-facet>
+          </atomic-facet-manager>
+        </atomic-layout-section>
+        <atomic-layout-section section="main">
+          <atomic-layout-section section="horizontal-facets">
+            <atomic-segmented-facet-scrollable>
+              <atomic-segmented-facet
+                field="inat_kingdom"
+                label="Kingdom"
+              ></atomic-segmented-facet>
+            </atomic-segmented-facet-scrollable>
+            <atomic-popover>
+              <atomic-facet
+                field="inat_family"
+                label="Family"
+                sort-criteria="alphanumericDescending"
+              ></atomic-facet>
+            </atomic-popover>
+            <atomic-popover>
+              <atomic-facet field="inat_class" label="Class"></atomic-facet>
+            </atomic-popover>
+          </atomic-layout-section>
+          <atomic-layout-section section="status">
+            <atomic-breadbox></atomic-breadbox>
+            <atomic-query-summary></atomic-query-summary>
+            <atomic-refine-toggle></atomic-refine-toggle>
+            <atomic-sort-dropdown>
+              <atomic-sort-expression
+                label="relevance"
+                expression="relevancy"
+              ></atomic-sort-expression>
+            </atomic-sort-dropdown>
+            <atomic-did-you-mean
+              query-correction-mode="next"
+            ></atomic-did-you-mean>
+            <atomic-notifications></atomic-notifications>
+          </atomic-layout-section>
+          <atomic-layout-section section="results">
+            <atomic-smart-snippet></atomic-smart-snippet>
+            <atomic-smart-snippet-suggestions></atomic-smart-snippet-suggestions>
+            <atomic-result-list>
+              <atomic-result-template must-match-sourcetype="YouTube">
+                <template>
+                  <atomic-result-section-actions
+                    ><atomic-quickview></atomic-quickview
+                  ></atomic-result-section-actions>
+                  <atomic-result-section-visual image-size="small">
+                    <img
+                      loading="lazy"
+                      src="https://picsum.photos/350"
+                      class="thumbnail"
+                    />
+                  </atomic-result-section-visual>
+                  <atomic-result-section-title
+                    ><atomic-result-link></atomic-result-link
+                  ></atomic-result-section-title>
+                  <atomic-result-section-excerpt
+                    ><atomic-result-text field="excerpt"></atomic-result-text
+                  ></atomic-result-section-excerpt>
+                </template>
+              </atomic-result-template>
+
+              <atomic-result-template>
+                <template>
+                  <style>
+                    .field {
+                      display: inline-flex;
+                      align-items: center;
+                    }
+
+                    .field-label {
+                      font-weight: bold;
+                      margin-right: 0.25rem;
+                    }
+
+                    .thumbnail {
+                      display: none;
+                      width: 100%;
+                      height: 100%;
+                    }
+
+                    .icon {
+                      display: none;
+                    }
+
+                    .result-root.image-small .thumbnail,
+                    .result-root.image-large .thumbnail {
+                      display: inline-block;
+                    }
+
+                    .result-root.image-icon .icon {
+                      display: inline-block;
+                    }
+
+                    .result-root.image-small atomic-result-section-visual,
+                    .result-root.image-large atomic-result-section-visual {
+                      border-radius: var(--atomic-border-radius-xl);
+                    }
+
+                    .salesforce-badge::part(result-badge-element) {
+                      background-color: #44a1da;
+                      color: white;
+                    }
+                  </style>
+                  <atomic-result-section-actions
+                    ><atomic-quickview></atomic-quickview
+                  ></atomic-result-section-actions>
+                  <atomic-result-section-visual>
+                    <atomic-result-icon class="icon"></atomic-result-icon>
+                    <img
+                      loading="lazy"
+                      src="https://picsum.photos/350"
+                      class="thumbnail"
+                    />
+                  </atomic-result-section-visual>
+                  <atomic-result-section-badges>
+                    <atomic-field-condition must-match-sourcetype="Salesforce">
+                      <atomic-result-badge
+                        label="Salesforce"
+                        class="salesforce-badge"
+                      ></atomic-result-badge>
+                    </atomic-field-condition>
+                    <atomic-result-badge
+                      icon="https://raw.githubusercontent.com/Rush/Font-Awesome-SVG-PNG/master/black/svg/language.svg"
+                    >
+                      <atomic-result-multi-value-text
+                        field="language"
+                      ></atomic-result-multi-value-text>
+                    </atomic-result-badge>
+                    <atomic-field-condition must-match-is-recommendation="true">
+                      <atomic-result-badge
+                        label="Recommended"
+                      ></atomic-result-badge>
+                    </atomic-field-condition>
+                    <atomic-field-condition must-match-is-top-result="true">
+                      <atomic-result-badge
+                        label="Top Result"
+                      ></atomic-result-badge>
+                    </atomic-field-condition>
+                  </atomic-result-section-badges>
+                  <atomic-result-section-title
+                    ><atomic-result-link></atomic-result-link
+                  ></atomic-result-section-title>
+                  <atomic-result-section-title-metadata>
+                    <atomic-field-condition class="field" if-defined="snrating">
+                      <atomic-result-rating
+                        field="snrating"
+                      ></atomic-result-rating>
+                    </atomic-field-condition>
+                    <atomic-field-condition
+                      class="field"
+                      if-not-defined="snrating"
+                    >
+                      <atomic-result-printable-uri
+                        max-number-of-parts="3"
+                      ></atomic-result-printable-uri>
+                    </atomic-field-condition>
+                  </atomic-result-section-title-metadata>
+                  <atomic-result-section-excerpt
+                    ><atomic-result-text field="excerpt"></atomic-result-text
+                  ></atomic-result-section-excerpt>
+                  <atomic-result-section-bottom-metadata>
+                    <atomic-result-fields-list>
+                      <atomic-field-condition class="field" if-defined="author">
+                        <span class="field-label"
+                          ><atomic-text value="author"></atomic-text>:</span
+                        >
+                        <atomic-result-multi-value-text
+                          field="author"
+                        ></atomic-result-multi-value-text>
+                      </atomic-field-condition>
+
+                      <atomic-field-condition class="field" if-defined="source">
+                        <span class="field-label"
+                          ><atomic-text value="source"></atomic-text>:</span
+                        >
+                        <atomic-result-text field="source"></atomic-result-text>
+                      </atomic-field-condition>
+
+                      <atomic-field-condition
+                        class="field"
+                        if-defined="language"
+                      >
+                        <span class="field-label"
+                          ><atomic-text value="language"></atomic-text>:</span
+                        >
+                        <atomic-result-multi-value-text
+                          field="language"
+                        ></atomic-result-multi-value-text>
+                      </atomic-field-condition>
+
+                      <atomic-field-condition
+                        class="field"
+                        if-defined="filetype"
+                      >
+                        <span class="field-label"
+                          ><atomic-text value="fileType"></atomic-text>:</span
+                        >
+                        <atomic-result-text
+                          field="filetype"
+                        ></atomic-result-text>
+                      </atomic-field-condition>
+
+                      <atomic-field-condition class="field" if-defined="sncost">
+                        <span class="field-label">Cost:</span>
+                        <atomic-result-number field="sncost">
+                          <atomic-format-currency
+                            currency="CAD"
+                          ></atomic-format-currency>
+                        </atomic-result-number>
+                      </atomic-field-condition>
+
+                      <span class="field">
+                        <span class="field-label">Date:</span>
+                        <atomic-result-date
+                          format="ddd MMM D YYYY"
+                        ></atomic-result-date>
+                      </span>
+                    </atomic-result-fields-list>
+                  </atomic-result-section-bottom-metadata>
+                  <atomic-table-element label="Description">
+                    <atomic-result-section-title
+                      ><atomic-result-link></atomic-result-link
+                    ></atomic-result-section-title>
+                    <atomic-result-section-title-metadata>
+                      <atomic-field-condition
+                        class="field"
+                        if-defined="snrating"
+                      >
+                        <atomic-result-rating
+                          field="snrating"
+                        ></atomic-result-rating>
+                      </atomic-field-condition>
+                      <atomic-field-condition
+                        class="field"
+                        if-not-defined="snrating"
+                      >
+                        <atomic-result-printable-uri
+                          max-number-of-parts="3"
+                        ></atomic-result-printable-uri>
+                      </atomic-field-condition>
+                    </atomic-result-section-title-metadata>
+                    <atomic-result-section-excerpt>
+                      <atomic-result-text field="excerpt"></atomic-result-text>
+                    </atomic-result-section-excerpt>
+                  </atomic-table-element>
+                  <atomic-table-element label="author">
+                    <atomic-result-multi-value-text
+                      field="author"
+                    ></atomic-result-multi-value-text>
+                  </atomic-table-element>
+                  <atomic-table-element label="source">
+                    <atomic-result-text field="source"></atomic-result-text>
+                  </atomic-table-element>
+                  <atomic-table-element label="language">
+                    <atomic-result-multi-value-text
+                      field="language"
+                    ></atomic-result-multi-value-text>
+                  </atomic-table-element>
+                  <atomic-table-element label="file-type">
+                    <atomic-result-text field="filetype"></atomic-result-text>
+                  </atomic-table-element>
+                </template>
+              </atomic-result-template>
+            </atomic-result-list>
+            <atomic-query-error></atomic-query-error>
+            <atomic-no-results></atomic-no-results>
+          </atomic-layout-section>
+          <atomic-layout-section section="pagination">
+            <atomic-load-more-results></atomic-load-more-results>
+            <!-- Alternative pagination
+              <atomic-pager></atomic-pager>
+              <atomic-results-per-page></atomic-results-per-page>
+              -->
+          </atomic-layout-section>
+        </atomic-layout-section>
+      </atomic-search-layout>`,
+  ],
+  play: async (context) => {
+    await play(context);
+    await playExecuteFirstSearch(context);
+  },
+};
diff --git a/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.tsx b/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.tsx
index 154410738de..f30cc025266 100644
--- a/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.tsx
+++ b/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.tsx
@@ -237,28 +237,44 @@ export class AtomicSearchBox implements InitializableComponent<Bindings> {
   @AriaLiveRegion('search-suggestions', true)
   protected suggestionsAriaMessage!: string;
 
+  private isStandaloneSearchBox(
+    searchBox: SearchBox | StandaloneSearchBox
+  ): searchBox is StandaloneSearchBox {
+    return 'redirectTo' in searchBox;
+  }
+
   public initialize() {
-    this.id = randomID('atomic-search-box-');
+    this.id ??= randomID('atomic-search-box-');
 
-    if (!this.textarea) {
-      this.bindings.engine.logger.warn(
-        'As of Atomic version 3.0.0, the searchbox will be enabled as a text area by default. To remove this warning, set textarea="true" on the search box.',
-        this.host
-      );
+    this.initializeSearchboxController();
+    this.initializeSuggestionManager();
+  }
+
+  private updateRedirectionUrl() {
+    if (this.isStandaloneSearchBox(this.searchBox) && this.redirectionUrl) {
+      this.searchBox.updateRedirectUrl(this.redirectionUrl);
+    } else {
+      this.registerNewSearchBoxController();
     }
+  }
 
+  private registerNewSearchBoxController() {
+    this.disconnectedCallback();
+    this.initialize();
+  }
+
+  private initializeSearchboxController() {
     this.searchBox = this.redirectionUrl
       ? buildStandaloneSearchBox(this.bindings.engine, {
           options: {
             ...this.searchBoxOptions,
             redirectionUrl: this.redirectionUrl,
+            overwrite: true,
           },
         })
       : buildSearchBox(this.bindings.engine, {
           options: this.searchBoxOptions,
         });
-
-    this.initializeSuggestionManager();
   }
 
   public componentWillUpdate() {
@@ -289,6 +305,8 @@ export class AtomicSearchBox implements InitializableComponent<Bindings> {
     }
   }
 
+  public disconnectedCallback = () => {};
+
   @Listen('atomic/searchBoxSuggestion/register')
   public registerSuggestions(
     event: CustomEvent<
@@ -305,7 +323,7 @@ export class AtomicSearchBox implements InitializableComponent<Bindings> {
     }
   }
 
-  public componentWillRender() {
+  private registerSearchboxSuggestionEvents() {
     this.searchBoxSuggestionEventsQueue.forEach((evt) => {
       this.suggestionManager.registerSuggestionsFromEvent(
         evt,
@@ -317,7 +335,7 @@ export class AtomicSearchBox implements InitializableComponent<Bindings> {
 
   @Watch('redirectionUrl')
   watchRedirectionUrl() {
-    this.initialize();
+    this.updateRedirectionUrl();
   }
 
   private initializeSuggestionManager() {
@@ -358,8 +376,8 @@ export class AtomicSearchBox implements InitializableComponent<Bindings> {
     return {
       ...this.bindings,
       id: this.id,
-      isStandalone: !!this.redirectionUrl,
-      searchBoxController: this.searchBox,
+      isStandalone: () => !!this.redirectionUrl,
+      searchBoxController: () => this.searchBox,
       numberOfQueries: this.numberOfQueries,
       clearFilters: this.clearFilters,
     };
@@ -710,6 +728,9 @@ export class AtomicSearchBox implements InitializableComponent<Bindings> {
     const isDisabled = this.isSearchDisabledForEndUser(
       this.searchBoxState.value
     );
+    if (!this.suggestionManager.suggestions.length) {
+      this.registerSearchboxSuggestionEvents();
+    }
 
     return (
       <Host>
diff --git a/packages/atomic/src/components/search/atomic-search-box/e2e/atomic-search-box.e2e.ts b/packages/atomic/src/components/search/atomic-search-box/e2e/atomic-search-box.e2e.ts
index 3f66cbed78b..71d19516183 100644
--- a/packages/atomic/src/components/search/atomic-search-box/e2e/atomic-search-box.e2e.ts
+++ b/packages/atomic/src/components/search/atomic-search-box/e2e/atomic-search-box.e2e.ts
@@ -126,6 +126,33 @@ test.describe('with instant results & query suggestions', () => {
         await expect(searchBox.searchInput).toHaveValue('shoe');
       });
     });
+
+    test.describe('after updating the redirect-url attribute', () => {
+      test.beforeEach(async ({searchBox}) => {
+        await searchBox.component.evaluate((node) =>
+          node.setAttribute(
+            'redirection-url',
+            './iframe.html?id=atomic-search-box--in-page&viewMode=story&args=enable-query-syntax:!true;suggestion-timeout:5000'
+          )
+        );
+      });
+
+      test('should redirect to the specified url after selecting a suggestion', async ({
+        page,
+        searchBox,
+      }) => {
+        const suggestionText = await searchBox
+          .searchSuggestions()
+          .first()
+          .textContent();
+
+        expect(suggestionText).not.toBeNull();
+
+        await searchBox.searchSuggestions().first().click();
+        await page.waitForURL('**/iframe.html?id=atomic-search-box--in-page*');
+        await expect(searchBox.searchInput).toHaveValue(suggestionText ?? '');
+      });
+    });
   });
 });
 
diff --git a/packages/atomic/src/components/search/atomic-search-box/e2e/page-object.ts b/packages/atomic/src/components/search/atomic-search-box/e2e/page-object.ts
index 21d70ac95a6..db5ee4cd0c2 100644
--- a/packages/atomic/src/components/search/atomic-search-box/e2e/page-object.ts
+++ b/packages/atomic/src/components/search/atomic-search-box/e2e/page-object.ts
@@ -6,6 +6,10 @@ export class SearchBoxPageObject extends BasePageObject<'atomic-search-box'> {
     super(page, 'atomic-search-box');
   }
 
+  get component() {
+    return this.page.locator('atomic-search-box');
+  }
+
   get submitButton() {
     return this.page.getByLabel('Search', {exact: true});
   }
diff --git a/packages/atomic/src/components/search/search-box-suggestions/atomic-search-box-instant-results/atomic-search-box-instant-results.tsx b/packages/atomic/src/components/search/search-box-suggestions/atomic-search-box-instant-results/atomic-search-box-instant-results.tsx
index 7e05b507da5..f1a9a9b0caf 100644
--- a/packages/atomic/src/components/search/search-box-suggestions/atomic-search-box-instant-results/atomic-search-box-instant-results.tsx
+++ b/packages/atomic/src/components/search/search-box-suggestions/atomic-search-box-instant-results/atomic-search-box-instant-results.tsx
@@ -178,10 +178,10 @@ export class AtomicSearchBoxInstantResults implements InitializableComponent {
         content: <InstantItemShowAllButton i18n={this.bindings.i18n} />,
         onSelect: () => {
           this.bindings.clearSuggestions();
-          this.bindings.searchBoxController.updateText(
-            this.instantResults.state.q
-          );
-          this.bindings.searchBoxController.submit();
+          this.bindings
+            .searchBoxController()
+            .updateText(this.instantResults.state.q);
+          this.bindings.searchBoxController().submit();
         },
       });
     }
@@ -223,7 +223,7 @@ export class AtomicSearchBoxInstantResults implements InitializableComponent {
   private onSuggestedQueryChange() {
     if (
       !this.bindings.getSuggestionElements().length &&
-      !this.bindings.searchBoxController.state.value
+      !this.bindings.searchBoxController().state.value
     ) {
       console.warn(
         "There doesn't seem to be any query suggestions configured. Make sure to include either an atomic-search-box-query-suggestions or atomic-search-box-recent-queries in your search box in order to see some instant results."
diff --git a/packages/atomic/src/components/search/search-box-suggestions/atomic-search-box-query-suggestions/atomic-search-box-query-suggestions.tsx b/packages/atomic/src/components/search/search-box-suggestions/atomic-search-box-query-suggestions/atomic-search-box-query-suggestions.tsx
index 107793f3ef4..3dbad9a8ca6 100644
--- a/packages/atomic/src/components/search/search-box-suggestions/atomic-search-box-query-suggestions/atomic-search-box-query-suggestions.tsx
+++ b/packages/atomic/src/components/search/search-box-suggestions/atomic-search-box-query-suggestions/atomic-search-box-query-suggestions.tsx
@@ -92,15 +92,16 @@ export class AtomicSearchBoxQuerySuggestions {
   }
 
   private renderItems(): SearchBoxSuggestionElement[] {
-    const hasQuery = this.bindings.searchBoxController.state.value !== '';
+    const hasQuery = this.bindings.searchBoxController().state.value !== '';
     const max = hasQuery ? this.maxWithQuery : this.maxWithoutQuery;
-    return this.bindings.searchBoxController.state.suggestions
-      .slice(0, max)
+    return this.bindings
+      .searchBoxController()
+      .state.suggestions.slice(0, max)
       .map((suggestion) => this.renderItem(suggestion));
   }
 
   private renderItem(suggestion: Suggestion) {
-    const hasQuery = this.bindings.searchBoxController.state.value !== '';
+    const hasQuery = this.bindings.searchBoxController().state.value !== '';
     const partialItem = getPartialSearchBoxSuggestionElement(
       suggestion,
       this.bindings.i18n
@@ -119,7 +120,9 @@ export class AtomicSearchBoxQuerySuggestions {
         </QuerySuggestionContainer>
       ),
       onSelect: () => {
-        this.bindings.searchBoxController.selectSuggestion(suggestion.rawValue);
+        this.bindings
+          .searchBoxController()
+          .selectSuggestion(suggestion.rawValue);
       },
     };
   }
diff --git a/packages/atomic/src/components/search/search-box-suggestions/atomic-search-box-recent-queries/atomic-search-box-recent-queries.tsx b/packages/atomic/src/components/search/search-box-suggestions/atomic-search-box-recent-queries/atomic-search-box-recent-queries.tsx
index b497cfcd7a3..cd79c6b7a16 100644
--- a/packages/atomic/src/components/search/search-box-suggestions/atomic-search-box-recent-queries/atomic-search-box-recent-queries.tsx
+++ b/packages/atomic/src/components/search/search-box-suggestions/atomic-search-box-recent-queries/atomic-search-box-recent-queries.tsx
@@ -121,7 +121,7 @@ export class AtomicSearchBoxRecentQueries {
       return [];
     }
 
-    const query = this.bindings.searchBoxController.state.value;
+    const query = this.bindings.searchBoxController().state.value;
     const hasQuery = query !== '';
     const max = hasQuery ? this.maxWithQuery : this.maxWithoutQuery;
     const filteredQueries = this.recentQueriesList.state.queries
@@ -155,7 +155,7 @@ export class AtomicSearchBoxRecentQueries {
   }
 
   private renderItem(value: string): SearchBoxSuggestionElement {
-    const query = this.bindings.searchBoxController.state.value;
+    const query = this.bindings.searchBoxController().state.value;
     const partialItem = getPartialRecentQueryElement(value, this.bindings.i18n);
     return {
       ...partialItem,
@@ -167,9 +167,9 @@ export class AtomicSearchBoxRecentQueries {
       ),
 
       onSelect: () => {
-        if (this.bindings.isStandalone) {
-          this.bindings.searchBoxController.updateText(value);
-          this.bindings.searchBoxController.submit();
+        if (this.bindings.isStandalone()) {
+          this.bindings.searchBoxController().updateText(value);
+          this.bindings.searchBoxController().submit();
           return;
         }
 
diff --git a/packages/atomic/storybookUtils/search/search-interface-wrapper.tsx b/packages/atomic/storybookUtils/search/search-interface-wrapper.tsx
index 6f3f2f665b5..f1b742f1d6e 100644
--- a/packages/atomic/storybookUtils/search/search-interface-wrapper.tsx
+++ b/packages/atomic/storybookUtils/search/search-interface-wrapper.tsx
@@ -40,3 +40,17 @@ export const wrapInSearchInterface = (
     });
   },
 });
+
+export const playExecuteFirstSearch: (
+  context: StoryContext
+) => Promise<void> = async ({canvasElement, step}) => {
+  const canvas = within(canvasElement);
+
+  const searchInterface =
+    await canvas.findByTestId<HTMLAtomicSearchInterfaceElement>(
+      'root-interface'
+    );
+  await step('Execute the first search', async () => {
+    await searchInterface!.executeFirstSearch();
+  });
+};
diff --git a/packages/headless/src/controllers/commerce/standalone-search-box/headless-standalone-search-box-options.ts b/packages/headless/src/controllers/commerce/standalone-search-box/headless-standalone-search-box-options.ts
index ef9e0e273fb..894393f1ad8 100644
--- a/packages/headless/src/controllers/commerce/standalone-search-box/headless-standalone-search-box-options.ts
+++ b/packages/headless/src/controllers/commerce/standalone-search-box/headless-standalone-search-box-options.ts
@@ -1,4 +1,4 @@
-import {Schema, StringValue} from '@coveo/bueno';
+import {BooleanValue, Schema, StringValue} from '@coveo/bueno';
 import {
   searchBoxOptionDefinitions,
   SearchBoxOptions,
@@ -10,6 +10,10 @@ export interface StandaloneSearchBoxOptions extends SearchBoxOptions {
    * If a query pipeline redirect is triggered, it will redirect to that Url instead.
    */
   redirectionUrl: string;
+  /**
+   * Whether to overwrite the existing standalone search box with the same id.
+   */
+  overwrite?: boolean;
 }
 
 export const standaloneSearchBoxSchema = new Schema<
@@ -20,4 +24,7 @@ export const standaloneSearchBoxSchema = new Schema<
     required: true,
     emptyAllowed: false,
   }),
+  overwrite: new BooleanValue({
+    required: false,
+  }),
 });
diff --git a/packages/headless/src/controllers/commerce/standalone-search-box/headless-standalone-search-box.test.ts b/packages/headless/src/controllers/commerce/standalone-search-box/headless-standalone-search-box.test.ts
index 4963566d806..5f73b128e94 100644
--- a/packages/headless/src/controllers/commerce/standalone-search-box/headless-standalone-search-box.test.ts
+++ b/packages/headless/src/controllers/commerce/standalone-search-box/headless-standalone-search-box.test.ts
@@ -80,6 +80,7 @@ describe('headless standalone searchBox', () => {
     expect(registerStandaloneSearchBox).toHaveBeenCalledWith({
       id,
       redirectionUrl: options.redirectionUrl,
+      overwrite: false,
     });
   });
 
diff --git a/packages/headless/src/controllers/commerce/standalone-search-box/headless-standalone-search-box.ts b/packages/headless/src/controllers/commerce/standalone-search-box/headless-standalone-search-box.ts
index 21fd06b80fd..ece51239576 100644
--- a/packages/headless/src/controllers/commerce/standalone-search-box/headless-standalone-search-box.ts
+++ b/packages/headless/src/controllers/commerce/standalone-search-box/headless-standalone-search-box.ts
@@ -8,6 +8,7 @@ import {
   fetchRedirectUrl,
   registerStandaloneSearchBox,
   resetStandaloneSearchBox,
+  updateStandaloneSearchBoxRedirectionUrl,
 } from '../../../features/commerce/standalone-search-box-set/standalone-search-box-set-actions';
 import {commerceStandaloneSearchBoxSetReducer as commerceStandaloneSearchBoxSet} from '../../../features/commerce/standalone-search-box-set/standalone-search-box-set-slice';
 import {querySuggestReducer as querySuggest} from '../../../features/query-suggest/query-suggest-slice';
@@ -37,6 +38,11 @@ export interface StandaloneSearchBox extends SearchBox {
    * Triggers a redirection.
    */
   submit(): void;
+  /**
+   * Updates the redirection url of the standalone search box.
+   * @param url - The new URL to redirect to.
+   */
+  updateRedirectUrl(url: string): void;
   /**
    * Resets the standalone search box state. To be dispatched on single page applications after the redirection has been triggered.
    */
@@ -77,6 +83,7 @@ export function buildStandaloneSearchBox(
     id,
     highlightOptions: {...props.options.highlightOptions},
     ...defaultSearchBoxOptions,
+    ...{overwrite: false},
     ...props.options,
   };
 
@@ -89,7 +96,11 @@ export function buildStandaloneSearchBox(
 
   const searchBox = buildSearchBox(engine, {options});
   dispatch(
-    registerStandaloneSearchBox({id, redirectionUrl: options.redirectionUrl})
+    registerStandaloneSearchBox({
+      id,
+      redirectionUrl: options.redirectionUrl,
+      overwrite: options.overwrite,
+    })
   );
 
   return {
@@ -109,6 +120,12 @@ export function buildStandaloneSearchBox(
       dispatch(resetStandaloneSearchBox({id}));
     },
 
+    updateRedirectUrl(url: string) {
+      dispatch(
+        updateStandaloneSearchBoxRedirectionUrl({id, redirectionUrl: url})
+      );
+    },
+
     submit() {
       dispatch(
         updateQuery({
diff --git a/packages/headless/src/controllers/standalone-search-box/headless-standalone-search-box-options.ts b/packages/headless/src/controllers/standalone-search-box/headless-standalone-search-box-options.ts
index a2712467146..4f1bd602a76 100644
--- a/packages/headless/src/controllers/standalone-search-box/headless-standalone-search-box-options.ts
+++ b/packages/headless/src/controllers/standalone-search-box/headless-standalone-search-box-options.ts
@@ -1,4 +1,4 @@
-import {Schema, StringValue} from '@coveo/bueno';
+import {BooleanValue, Schema, StringValue} from '@coveo/bueno';
 import {
   searchBoxOptionDefinitions,
   SearchBoxOptions,
@@ -10,6 +10,10 @@ export interface StandaloneSearchBoxOptions extends SearchBoxOptions {
    * If a query pipeline redirect is triggered, it will redirect to that Url instead.
    */
   redirectionUrl: string;
+  /**
+   * Whether to overwrite the existing standalone search box with the same id.
+   */
+  overwrite?: boolean;
 }
 
 export const standaloneSearchBoxSchema = new Schema<
@@ -20,4 +24,7 @@ export const standaloneSearchBoxSchema = new Schema<
     required: true,
     emptyAllowed: false,
   }),
+  overwrite: new BooleanValue({
+    required: false,
+  }),
 });
diff --git a/packages/headless/src/controllers/standalone-search-box/headless-standalone-search-box.test.ts b/packages/headless/src/controllers/standalone-search-box/headless-standalone-search-box.test.ts
index d469513df34..e436dace5d1 100644
--- a/packages/headless/src/controllers/standalone-search-box/headless-standalone-search-box.test.ts
+++ b/packages/headless/src/controllers/standalone-search-box/headless-standalone-search-box.test.ts
@@ -81,6 +81,7 @@ describe('headless standalone searchBox', () => {
     expect(registerStandaloneSearchBox).toHaveBeenCalledWith({
       id,
       redirectionUrl: options.redirectionUrl,
+      overwrite: false,
     });
   });
 
diff --git a/packages/headless/src/controllers/standalone-search-box/headless-standalone-search-box.ts b/packages/headless/src/controllers/standalone-search-box/headless-standalone-search-box.ts
index c5163df2023..db60fddcf56 100644
--- a/packages/headless/src/controllers/standalone-search-box/headless-standalone-search-box.ts
+++ b/packages/headless/src/controllers/standalone-search-box/headless-standalone-search-box.ts
@@ -11,6 +11,7 @@ import {
   updateAnalyticsToOmniboxFromLink,
   updateAnalyticsToSearchFromLink,
   resetStandaloneSearchBox,
+  updateStandaloneSearchBoxRedirectionUrl,
 } from '../../features/standalone-search-box-set/standalone-search-box-set-actions';
 import {standaloneSearchBoxSetReducer as standaloneSearchBoxSet} from '../../features/standalone-search-box-set/standalone-search-box-set-slice';
 import {StandaloneSearchBoxAnalytics} from '../../features/standalone-search-box-set/standalone-search-box-set-state';
@@ -50,6 +51,12 @@ export interface StandaloneSearchBox extends SearchBox {
    */
   submit(): void;
 
+  /**
+   * Updates the redirection url of the standalone search box.
+   * @param url - The new URL to redirect to.
+   */
+  updateRedirectUrl(url: string): void;
+
   /**
    * Resets the standalone search box state. To be dispatched on single page applications after the redirection has been triggered.
    */
@@ -96,6 +103,7 @@ export function buildStandaloneSearchBox(
     id,
     highlightOptions: {...props.options.highlightOptions},
     ...defaultSearchBoxOptions,
+    ...{overwrite: false},
     ...props.options,
   };
 
@@ -108,7 +116,11 @@ export function buildStandaloneSearchBox(
 
   const searchBox = buildSearchBox(engine, {options});
   dispatch(
-    registerStandaloneSearchBox({id, redirectionUrl: options.redirectionUrl})
+    registerStandaloneSearchBox({
+      id,
+      redirectionUrl: options.redirectionUrl,
+      overwrite: options.overwrite,
+    })
   );
 
   return {
@@ -135,6 +147,12 @@ export function buildStandaloneSearchBox(
       dispatch(resetStandaloneSearchBox({id}));
     },
 
+    updateRedirectUrl(url: string) {
+      dispatch(
+        updateStandaloneSearchBoxRedirectionUrl({id, redirectionUrl: url})
+      );
+    },
+
     submit() {
       dispatch(
         updateQuery({
diff --git a/packages/headless/src/features/commerce/standalone-search-box-set/standalone-search-box-set-actions-loader.ts b/packages/headless/src/features/commerce/standalone-search-box-set/standalone-search-box-set-actions-loader.ts
index ef6790342af..11ec0bd362e 100644
--- a/packages/headless/src/features/commerce/standalone-search-box-set/standalone-search-box-set-actions-loader.ts
+++ b/packages/headless/src/features/commerce/standalone-search-box-set/standalone-search-box-set-actions-loader.ts
@@ -10,6 +10,7 @@ import {
   fetchRedirectUrl,
   registerStandaloneSearchBox,
   resetStandaloneSearchBox,
+  updateStandaloneSearchBoxRedirectionUrl,
 } from './standalone-search-box-set-actions';
 
 export type {
@@ -55,6 +56,15 @@ export interface StandaloneSearchBoxSetActionCreators {
   resetStandaloneSearchBox(
     payload: ResetStandaloneSearchBoxPayload
   ): PayloadAction<ResetStandaloneSearchBoxPayload>;
+
+  /**
+   * Updates the redirection URL of the standalone search box.
+   * @param payload - The action creator payload.
+   * @returns A dispatchable action.
+   */
+  updateStandaloneSearchBoxRedirectionUrl(
+    payload: RegisterStandaloneSearchBoxPayload
+  ): PayloadAction<RegisterStandaloneSearchBoxPayload>;
 }
 
 /**
@@ -70,6 +80,7 @@ export function loadStandaloneSearchBoxSetActions(
   return {
     fetchRedirectUrl,
     registerStandaloneSearchBox,
+    updateStandaloneSearchBoxRedirectionUrl,
     resetStandaloneSearchBox,
   };
 }
diff --git a/packages/headless/src/features/commerce/standalone-search-box-set/standalone-search-box-set-actions.ts b/packages/headless/src/features/commerce/standalone-search-box-set/standalone-search-box-set-actions.ts
index 0571dec40bf..f5956ecd4ff 100644
--- a/packages/headless/src/features/commerce/standalone-search-box-set/standalone-search-box-set-actions.ts
+++ b/packages/headless/src/features/commerce/standalone-search-box-set/standalone-search-box-set-actions.ts
@@ -1,4 +1,4 @@
-import {StringValue} from '@coveo/bueno';
+import {BooleanValue, StringValue} from '@coveo/bueno';
 import {createAction, createAsyncThunk} from '@reduxjs/toolkit';
 import {
   AsyncThunkCommerceOptions,
@@ -67,11 +67,38 @@ export interface RegisterStandaloneSearchBoxPayload {
    * The default URL to which to redirect the user.
    */
   redirectionUrl: string;
+
+  /**
+   * Whether to overwrite the existing standalone search box with the same id.
+   */
+  overwrite?: boolean;
+}
+
+export interface UpdateStandaloneSearchBoxPayload {
+  /**
+   * The standalone search box id.
+   */
+  id: string;
+
+  /**
+   * The default URL to which to redirect the user.
+   */
+  redirectionUrl: string;
 }
 
 export const registerStandaloneSearchBox = createAction(
   'commerce/standaloneSearchBox/register',
   (payload: RegisterStandaloneSearchBoxPayload) =>
+    validatePayload(payload, {
+      id: requiredNonEmptyString,
+      redirectionUrl: requiredNonEmptyString,
+      overwrite: new BooleanValue({required: false}),
+    })
+);
+
+export const updateStandaloneSearchBoxRedirectionUrl = createAction(
+  'commerce/standaloneSearchBox/updateRedirectionUrl',
+  (payload: UpdateStandaloneSearchBoxPayload) =>
     validatePayload(payload, {
       id: requiredNonEmptyString,
       redirectionUrl: requiredNonEmptyString,
diff --git a/packages/headless/src/features/commerce/standalone-search-box-set/standalone-search-box-set-slice.test.ts b/packages/headless/src/features/commerce/standalone-search-box-set/standalone-search-box-set-slice.test.ts
index 918e3b3601a..1acd2f2d33d 100644
--- a/packages/headless/src/features/commerce/standalone-search-box-set/standalone-search-box-set-slice.test.ts
+++ b/packages/headless/src/features/commerce/standalone-search-box-set/standalone-search-box-set-slice.test.ts
@@ -3,6 +3,7 @@ import {
   fetchRedirectUrl,
   registerStandaloneSearchBox,
   resetStandaloneSearchBox,
+  updateStandaloneSearchBoxRedirectionUrl,
 } from './standalone-search-box-set-actions';
 import {commerceStandaloneSearchBoxSetReducer} from './standalone-search-box-set-slice';
 import {CommerceStandaloneSearchBoxSetState} from './standalone-search-box-set-state';
@@ -44,6 +45,43 @@ describe('commerce standalone search box slice', () => {
 
       expect(state[id]).toEqual(finalState[id]);
     });
+
+    it('when the id exists and the overwrite option is true, it registers the payload', () => {
+      const action = registerStandaloneSearchBox({
+        id,
+        redirectionUrl: 'url',
+        overwrite: true,
+      });
+      const finalState = commerceStandaloneSearchBoxSetReducer(state, action);
+
+      expect(finalState[id]).toEqual(
+        buildMockCommerceStandaloneSearchBoxEntry({
+          defaultRedirectionUrl: 'url',
+        })
+      );
+    });
+  });
+
+  describe('#updateStandaloneSearchBoxRedirectionUrl', () => {
+    it('when the id exists, it sets the default redirection url', () => {
+      const action = updateStandaloneSearchBoxRedirectionUrl({
+        id,
+        redirectionUrl: '/newpage',
+      });
+      const finalState = commerceStandaloneSearchBoxSetReducer(state, action);
+
+      expect(finalState[id]!.defaultRedirectionUrl).toBe('/newpage');
+    });
+
+    it('when the id does not exist, it does not edit the state', () => {
+      const action = updateStandaloneSearchBoxRedirectionUrl({
+        id: 'invalid',
+        redirectionUrl: '/newpage',
+      });
+      const finalState = commerceStandaloneSearchBoxSetReducer(state, action);
+
+      expect(finalState).toBe(state);
+    });
   });
 
   describe('#resetStandaloneSearchBox', () => {
diff --git a/packages/headless/src/features/commerce/standalone-search-box-set/standalone-search-box-set-slice.ts b/packages/headless/src/features/commerce/standalone-search-box-set/standalone-search-box-set-slice.ts
index e52a95c23db..29a62d69f88 100644
--- a/packages/headless/src/features/commerce/standalone-search-box-set/standalone-search-box-set-slice.ts
+++ b/packages/headless/src/features/commerce/standalone-search-box-set/standalone-search-box-set-slice.ts
@@ -3,6 +3,7 @@ import {
   fetchRedirectUrl,
   registerStandaloneSearchBox,
   resetStandaloneSearchBox,
+  updateStandaloneSearchBoxRedirectionUrl,
 } from './standalone-search-box-set-actions';
 import {
   getCommerceStandaloneSearchBoxSetInitialState,
@@ -14,14 +15,24 @@ export const commerceStandaloneSearchBoxSetReducer = createReducer(
   (builder) =>
     builder
       .addCase(registerStandaloneSearchBox, (state, action) => {
-        const {id, redirectionUrl} = action.payload;
+        const {id, redirectionUrl, overwrite} = action.payload;
 
-        if (id in state) {
+        if (!overwrite && id in state) {
           return;
         }
 
         state[id] = buildStandaloneSearchBoxEntry(redirectionUrl);
       })
+      .addCase(updateStandaloneSearchBoxRedirectionUrl, (state, action) => {
+        const {id, redirectionUrl} = action.payload;
+        const searchBox = state[id];
+
+        if (!searchBox) {
+          return;
+        }
+
+        searchBox.defaultRedirectionUrl = redirectionUrl;
+      })
       .addCase(resetStandaloneSearchBox, (state, action) => {
         const {id} = action.payload;
         const searchBox = state[id];
diff --git a/packages/headless/src/features/standalone-search-box-set/standalone-search-box-set-actions-loader.ts b/packages/headless/src/features/standalone-search-box-set/standalone-search-box-set-actions-loader.ts
index 144247669f5..c0aa83be778 100644
--- a/packages/headless/src/features/standalone-search-box-set/standalone-search-box-set-actions-loader.ts
+++ b/packages/headless/src/features/standalone-search-box-set/standalone-search-box-set-actions-loader.ts
@@ -14,6 +14,7 @@ import {
   StateNeededForRedirect,
   resetStandaloneSearchBox,
   ResetStandaloneSearchBoxActionCreatorPayload,
+  updateStandaloneSearchBoxRedirectionUrl,
 } from './standalone-search-box-set-actions';
 
 export type {
@@ -62,6 +63,15 @@ export interface StandaloneSearchBoxSetActionCreators {
     AsyncThunkSearchOptions<StateNeededForRedirect>
   >;
 
+  /**
+   * Updates the redirection URL of the standalone search box.
+   * @param payload - The action creator payload.
+   * @returns A dispatchable action.
+   */
+  updateStandaloneSearchBoxRedirectionUrl(
+    payload: RegisterStandaloneSearchBoxActionCreatorPayload
+  ): PayloadAction<RegisterStandaloneSearchBoxActionCreatorPayload>;
+
   /**
    * Updates the standalone search box analytics data to reflect a search submitted using the search box.
    *
@@ -97,6 +107,7 @@ export function loadStandaloneSearchBoxSetActions(
   return {
     registerStandaloneSearchBox,
     fetchRedirectUrl,
+    updateStandaloneSearchBoxRedirectionUrl,
     updateAnalyticsToSearchFromLink,
     updateAnalyticsToOmniboxFromLink,
     resetStandaloneSearchBox,
diff --git a/packages/headless/src/features/standalone-search-box-set/standalone-search-box-set-actions.ts b/packages/headless/src/features/standalone-search-box-set/standalone-search-box-set-actions.ts
index 38378e3ee14..3bf2951fbd0 100644
--- a/packages/headless/src/features/standalone-search-box-set/standalone-search-box-set-actions.ts
+++ b/packages/headless/src/features/standalone-search-box-set/standalone-search-box-set-actions.ts
@@ -1,4 +1,4 @@
-import {StringValue} from '@coveo/bueno';
+import {BooleanValue, StringValue} from '@coveo/bueno';
 import {createAction, createAsyncThunk} from '@reduxjs/toolkit';
 import {getVisitorID} from '../../api/analytics/coveo-analytics-utils';
 import {ExecutionPlan} from '../../api/search/plan/plan-endpoint';
@@ -34,11 +34,38 @@ export interface RegisterStandaloneSearchBoxActionCreatorPayload {
    * The default URL to which to redirect the user.
    */
   redirectionUrl: string;
+
+  /**
+   * Whether to overwrite the existing standalone search box with the same id.
+   */
+  overwrite?: boolean;
+}
+
+export interface UpdateStandaloneSearchBoxPayload {
+  /**
+   * The standalone search box id.
+   */
+  id: string;
+
+  /**
+   * The default URL to which to redirect the user.
+   */
+  redirectionUrl: string;
 }
 
 export const registerStandaloneSearchBox = createAction(
   'standaloneSearchBox/register',
   (payload: RegisterStandaloneSearchBoxActionCreatorPayload) =>
+    validatePayload(payload, {
+      id: requiredNonEmptyString,
+      redirectionUrl: requiredNonEmptyString,
+      overwrite: new BooleanValue({required: false}),
+    })
+);
+
+export const updateStandaloneSearchBoxRedirectionUrl = createAction(
+  'standaloneSearchBox/updateRedirectionUrl',
+  (payload: UpdateStandaloneSearchBoxPayload) =>
     validatePayload(payload, {
       id: requiredNonEmptyString,
       redirectionUrl: requiredNonEmptyString,
diff --git a/packages/headless/src/features/standalone-search-box-set/standalone-search-box-set-slice.test.ts b/packages/headless/src/features/standalone-search-box-set/standalone-search-box-set-slice.test.ts
index 8656a77a869..f673afa32ba 100644
--- a/packages/headless/src/features/standalone-search-box-set/standalone-search-box-set-slice.test.ts
+++ b/packages/headless/src/features/standalone-search-box-set/standalone-search-box-set-slice.test.ts
@@ -6,6 +6,7 @@ import {
   updateAnalyticsToOmniboxFromLink,
   updateAnalyticsToSearchFromLink,
   resetStandaloneSearchBox,
+  updateStandaloneSearchBoxRedirectionUrl,
 } from './standalone-search-box-set-actions';
 import {standaloneSearchBoxSetReducer} from './standalone-search-box-set-slice';
 import {StandaloneSearchBoxSetState} from './standalone-search-box-set-state';
@@ -45,6 +46,41 @@ describe('standalone search box slice', () => {
 
       expect(state[id]).toEqual(finalState[id]);
     });
+
+    it('when the id exists and the overwrite option is true, it registers the payload', () => {
+      const action = registerStandaloneSearchBox({
+        id,
+        redirectionUrl: 'url',
+        overwrite: true,
+      });
+      const finalState = standaloneSearchBoxSetReducer(state, action);
+
+      expect(finalState[id]).toEqual(
+        buildMockStandaloneSearchBoxEntry({defaultRedirectionUrl: 'url'})
+      );
+    });
+  });
+
+  describe('#updateStandaloneSearchBoxRedirectionUrl', () => {
+    it('when the id exists, it sets the default redirection url', () => {
+      const action = updateStandaloneSearchBoxRedirectionUrl({
+        id,
+        redirectionUrl: '/newpage',
+      });
+      const finalState = standaloneSearchBoxSetReducer(state, action);
+
+      expect(finalState[id]!.defaultRedirectionUrl).toBe('/newpage');
+    });
+
+    it('when the id does not exist, it does not edit the state', () => {
+      const action = updateStandaloneSearchBoxRedirectionUrl({
+        id: 'invalid',
+        redirectionUrl: '/newpage',
+      });
+      const finalState = standaloneSearchBoxSetReducer(state, action);
+
+      expect(finalState).toBe(state);
+    });
   });
 
   describe('#resetStandaloneSearchBox', () => {
diff --git a/packages/headless/src/features/standalone-search-box-set/standalone-search-box-set-slice.ts b/packages/headless/src/features/standalone-search-box-set/standalone-search-box-set-slice.ts
index be23c046f4b..9b05de9eeaa 100644
--- a/packages/headless/src/features/standalone-search-box-set/standalone-search-box-set-slice.ts
+++ b/packages/headless/src/features/standalone-search-box-set/standalone-search-box-set-slice.ts
@@ -5,6 +5,7 @@ import {
   resetStandaloneSearchBox,
   updateAnalyticsToOmniboxFromLink,
   updateAnalyticsToSearchFromLink,
+  updateStandaloneSearchBoxRedirectionUrl,
 } from './standalone-search-box-set-actions';
 import {
   getStandaloneSearchBoxSetInitialState,
@@ -16,9 +17,9 @@ export const standaloneSearchBoxSetReducer = createReducer(
   (builder) =>
     builder
       .addCase(registerStandaloneSearchBox, (state, action) => {
-        const {id, redirectionUrl} = action.payload;
+        const {id, redirectionUrl, overwrite} = action.payload;
 
-        if (id in state) {
+        if (!overwrite && id in state) {
           return;
         }
 
@@ -35,6 +36,15 @@ export const standaloneSearchBoxSetReducer = createReducer(
           return;
         }
       })
+      .addCase(updateStandaloneSearchBoxRedirectionUrl, (state, action) => {
+        const {id, redirectionUrl} = action.payload;
+
+        if (!(id in state)) {
+          return;
+        }
+
+        state[id] = buildStandaloneSearchBoxEntry(redirectionUrl);
+      })
       .addCase(fetchRedirectUrl.pending, (state, action) => {
         const searchBox = state[action.meta.arg.id];
 

From 221e1bcce68f5d74e092edf561dd6b401178c3e3 Mon Sep 17 00:00:00 2001
From: Felix Perron-Brault <fpbrault@coveo.com>
Date: Mon, 26 Aug 2024 16:35:51 -0400
Subject: [PATCH 05/13] fix(atomic): Facets don't update correctly in the
 refine modal when changing tabs (#4280)

This PR ensures that the facets in the refine modal are shown/hidden
based on which tab is open. Prior to this fix, the refine modal would
show the facets of the previous active tab, not the current one.

https://coveord.atlassian.net/browse/CDX-1586
---
 .../atomic/cypress/e2e/breadbox.cypress.ts    |   2 +-
 .../atomic-category-facet.tsx                 |  31 +-
 .../atomic-color-facet/atomic-color-facet.tsx |  23 +-
 .../facets/atomic-facet/atomic-facet.tsx      |  26 +-
 .../atomic-numeric-facet.tsx                  |  22 +-
 .../atomic-rating-facet.tsx                   |  22 +-
 .../atomic-rating-range-facet.tsx             |  24 +-
 .../atomic-segmented-facet.tsx                |  22 +-
 .../atomic-timeframe-facet.tsx                |  22 +-
 .../atomic-tab-manager.new.stories.tsx        | 290 ++++++++----------
 .../e2e/atomic-tab-manager.e2e.ts             |  57 ++--
 .../atomic-tab-manager/e2e/page-object.ts     |  13 +-
 12 files changed, 291 insertions(+), 263 deletions(-)

diff --git a/packages/atomic/cypress/e2e/breadbox.cypress.ts b/packages/atomic/cypress/e2e/breadbox.cypress.ts
index 1d390b1787b..1c50ff01070 100644
--- a/packages/atomic/cypress/e2e/breadbox.cypress.ts
+++ b/packages/atomic/cypress/e2e/breadbox.cypress.ts
@@ -271,7 +271,7 @@ describe('Breadbox Test Suites', () => {
   });
 
   describe('when excluding from a standard facet', () => {
-    const selectionIndex = 2;
+    const selectionIndex = 1;
 
     function setupFacetWithMultipleExcludedValues() {
       new TestFixture()
diff --git a/packages/atomic/src/components/search/facets/atomic-category-facet/atomic-category-facet.tsx b/packages/atomic/src/components/search/facets/atomic-category-facet/atomic-category-facet.tsx
index 9c7bd1c3ba8..6d8de127bc4 100644
--- a/packages/atomic/src/components/search/facets/atomic-category-facet/atomic-category-facet.tsx
+++ b/packages/atomic/src/components/search/facets/atomic-category-facet/atomic-category-facet.tsx
@@ -16,7 +16,15 @@ import {
   TabManager,
   buildTabManager,
 } from '@coveo/headless';
-import {Component, h, State, Prop, Element, Fragment} from '@stencil/core';
+import {
+  Component,
+  h,
+  State,
+  Prop,
+  Element,
+  Fragment,
+  Watch,
+} from '@stencil/core';
 import {
   AriaLiveRegion,
   FocusTargetController,
@@ -340,17 +348,26 @@ export class AtomicCategoryFacet implements InitializableComponent {
     );
   }
 
+  @Watch('tabManagerState')
+  watchTabManagerState(
+    newValue: {activeTab: string},
+    oldValue: {activeTab: string}
+  ) {
+    if (newValue?.activeTab !== oldValue?.activeTab) {
+      updateFacetVisibilityForActiveTab(
+        [...this.tabsIncluded],
+        [...this.tabsExcluded],
+        this.tabManagerState?.activeTab,
+        this.facet
+      );
+    }
+  }
+
   public componentShouldUpdate(
     next: unknown,
     prev: unknown,
     propName: keyof AtomicCategoryFacet
   ) {
-    updateFacetVisibilityForActiveTab(
-      [...this.tabsIncluded],
-      [...this.tabsExcluded],
-      this.tabManagerState?.activeTab,
-      this.facet
-    );
     if (
       this.isCategoryFacetState(prev, propName) &&
       this.isCategoryFacetState(next, propName)
diff --git a/packages/atomic/src/components/search/facets/atomic-color-facet/atomic-color-facet.tsx b/packages/atomic/src/components/search/facets/atomic-color-facet/atomic-color-facet.tsx
index 8fd09d948bd..928b6a4848f 100644
--- a/packages/atomic/src/components/search/facets/atomic-color-facet/atomic-color-facet.tsx
+++ b/packages/atomic/src/components/search/facets/atomic-color-facet/atomic-color-facet.tsx
@@ -17,7 +17,7 @@ import {
   TabManager,
   TabManagerState,
 } from '@coveo/headless';
-import {Component, h, State, Prop, VNode, Element} from '@stencil/core';
+import {Component, h, State, Prop, VNode, Element, Watch} from '@stencil/core';
 import {
   AriaLiveRegion,
   FocusTargetController,
@@ -348,17 +348,26 @@ export class AtomicColorFacet implements InitializableComponent {
     );
   }
 
+  @Watch('tabManagerState')
+  watchTabManagerState(
+    newValue: {activeTab: string},
+    oldValue: {activeTab: string}
+  ) {
+    if (newValue?.activeTab !== oldValue?.activeTab) {
+      updateFacetVisibilityForActiveTab(
+        [...this.tabsIncluded],
+        [...this.tabsExcluded],
+        this.tabManagerState?.activeTab,
+        this.facet
+      );
+    }
+  }
+
   public componentShouldUpdate(
     next: unknown,
     prev: unknown,
     propName: keyof AtomicColorFacet
   ) {
-    updateFacetVisibilityForActiveTab(
-      [...this.tabsIncluded],
-      [...this.tabsExcluded],
-      this.tabManagerState?.activeTab,
-      this.facet
-    );
     if (propName === 'facetState' && prev && this.withSearch) {
       return shouldUpdateFacetSearchComponent(
         (next as FacetState).facetSearch,
diff --git a/packages/atomic/src/components/search/facets/atomic-facet/atomic-facet.tsx b/packages/atomic/src/components/search/facets/atomic-facet/atomic-facet.tsx
index 59f0da75440..ec05e74d226 100644
--- a/packages/atomic/src/components/search/facets/atomic-facet/atomic-facet.tsx
+++ b/packages/atomic/src/components/search/facets/atomic-facet/atomic-facet.tsx
@@ -24,6 +24,7 @@ import {
   Element,
   VNode,
   Fragment,
+  Watch,
 } from '@stencil/core';
 import {
   AriaLiveRegion,
@@ -317,17 +318,26 @@ export class AtomicFacet implements InitializableComponent {
     this.facetConditionsManager?.stopWatching();
   }
 
+  @Watch('tabManagerState')
+  watchTabManagerState(
+    newValue: {activeTab: string},
+    oldValue: {activeTab: string}
+  ) {
+    if (newValue?.activeTab !== oldValue?.activeTab) {
+      updateFacetVisibilityForActiveTab(
+        [...this.tabsIncluded],
+        [...this.tabsExcluded],
+        this.tabManagerState?.activeTab,
+        this.facet
+      );
+    }
+  }
+
   public componentShouldUpdate(
-    next: unknown,
-    prev: unknown,
+    next: FacetState,
+    prev: FacetState,
     propName: keyof AtomicFacet
   ) {
-    updateFacetVisibilityForActiveTab(
-      [...this.tabsIncluded],
-      [...this.tabsExcluded],
-      this.tabManagerState?.activeTab,
-      this.facet
-    );
     if (
       this.isFacetState(prev, propName) &&
       this.isFacetState(next, propName)
diff --git a/packages/atomic/src/components/search/facets/atomic-numeric-facet/atomic-numeric-facet.tsx b/packages/atomic/src/components/search/facets/atomic-numeric-facet/atomic-numeric-facet.tsx
index 4d95d50f974..6f0d9857da0 100644
--- a/packages/atomic/src/components/search/facets/atomic-numeric-facet/atomic-numeric-facet.tsx
+++ b/packages/atomic/src/components/search/facets/atomic-numeric-facet/atomic-numeric-facet.tsx
@@ -22,7 +22,7 @@ import {
   TabManager,
   TabManagerState,
 } from '@coveo/headless';
-import {Component, Element, h, Listen, Prop, State} from '@stencil/core';
+import {Component, Element, h, Listen, Prop, State, Watch} from '@stencil/core';
 import {FocusTargetController} from '../../../../utils/accessibility-utils';
 import {
   BindStateToController,
@@ -265,13 +265,19 @@ export class AtomicNumericFacet implements InitializableComponent {
     this.tabManager = buildTabManager(this.bindings.engine);
   }
 
-  public componentShouldUpdate(): void {
-    updateFacetVisibilityForActiveTab(
-      [...this.tabsIncluded],
-      [...this.tabsExcluded],
-      this.tabManagerState?.activeTab,
-      this.facetForRange
-    );
+  @Watch('tabManagerState')
+  watchTabManagerState(
+    newValue: {activeTab: string},
+    oldValue: {activeTab: string}
+  ) {
+    if (newValue?.activeTab !== oldValue?.activeTab) {
+      updateFacetVisibilityForActiveTab(
+        [...this.tabsIncluded],
+        [...this.tabsExcluded],
+        this.tabManagerState?.activeTab,
+        this.facetForRange
+      );
+    }
   }
 
   private initializeFacetForInput() {
diff --git a/packages/atomic/src/components/search/facets/atomic-rating-facet/atomic-rating-facet.tsx b/packages/atomic/src/components/search/facets/atomic-rating-facet/atomic-rating-facet.tsx
index b65b0d1ef83..994b5beaa56 100644
--- a/packages/atomic/src/components/search/facets/atomic-rating-facet/atomic-rating-facet.tsx
+++ b/packages/atomic/src/components/search/facets/atomic-rating-facet/atomic-rating-facet.tsx
@@ -18,7 +18,7 @@ import {
   TabManager,
   TabManagerState,
 } from '@coveo/headless';
-import {Component, h, State, Prop, VNode, Element} from '@stencil/core';
+import {Component, h, State, Prop, VNode, Element, Watch} from '@stencil/core';
 import Star from '../../../../images/star.svg';
 import {FocusTargetController} from '../../../../utils/accessibility-utils';
 import {
@@ -271,13 +271,19 @@ export class AtomicRatingFacet implements InitializableComponent {
     this.dependenciesManager?.stopWatching();
   }
 
-  public componentShouldUpdate(): void {
-    updateFacetVisibilityForActiveTab(
-      [...this.tabsIncluded],
-      [...this.tabsExcluded],
-      this.tabManagerState?.activeTab,
-      this.facet
-    );
+  @Watch('tabManagerState')
+  watchTabManagerState(
+    newValue: {activeTab: string},
+    oldValue: {activeTab: string}
+  ) {
+    if (newValue?.activeTab !== oldValue?.activeTab) {
+      updateFacetVisibilityForActiveTab(
+        [...this.tabsIncluded],
+        [...this.tabsExcluded],
+        this.tabManagerState?.activeTab,
+        this.facet
+      );
+    }
   }
 
   private get isHidden() {
diff --git a/packages/atomic/src/components/search/facets/atomic-rating-range-facet/atomic-rating-range-facet.tsx b/packages/atomic/src/components/search/facets/atomic-rating-range-facet/atomic-rating-range-facet.tsx
index f15880bb917..37d4738a24b 100644
--- a/packages/atomic/src/components/search/facets/atomic-rating-range-facet/atomic-rating-range-facet.tsx
+++ b/packages/atomic/src/components/search/facets/atomic-rating-range-facet/atomic-rating-range-facet.tsx
@@ -17,7 +17,7 @@ import {
   TabManager,
   TabManagerState,
 } from '@coveo/headless';
-import {Component, h, State, Prop, VNode, Element} from '@stencil/core';
+import {Component, h, State, Prop, VNode, Element, Watch} from '@stencil/core';
 import Star from '../../../../images/star.svg';
 import {FocusTargetController} from '../../../../utils/accessibility-utils';
 import {
@@ -214,16 +214,20 @@ export class AtomicRatingRangeFacet implements InitializableComponent {
     this.initializeFacet();
     this.initializeDependenciesManager();
   }
-
-  public componentShouldUpdate(): void {
-    updateFacetVisibilityForActiveTab(
-      [...this.tabsIncluded],
-      [...this.tabsExcluded],
-      this.tabManagerState?.activeTab,
-      this.facet
-    );
+  @Watch('tabManagerState')
+  watchTabManagerState(
+    newValue: {activeTab: string},
+    oldValue: {activeTab: string}
+  ) {
+    if (newValue?.activeTab !== oldValue?.activeTab) {
+      updateFacetVisibilityForActiveTab(
+        [...this.tabsIncluded],
+        [...this.tabsExcluded],
+        this.tabManagerState?.activeTab,
+        this.facet
+      );
+    }
   }
-
   public disconnectedCallback() {
     if (this.host.isConnected) {
       return;
diff --git a/packages/atomic/src/components/search/facets/atomic-segmented-facet/atomic-segmented-facet.tsx b/packages/atomic/src/components/search/facets/atomic-segmented-facet/atomic-segmented-facet.tsx
index 59beb71c393..bc9e55d25e7 100644
--- a/packages/atomic/src/components/search/facets/atomic-segmented-facet/atomic-segmented-facet.tsx
+++ b/packages/atomic/src/components/search/facets/atomic-segmented-facet/atomic-segmented-facet.tsx
@@ -16,7 +16,7 @@ import {
   TabManager,
   TabManagerState,
 } from '@coveo/headless';
-import {Component, h, Prop, State, VNode} from '@stencil/core';
+import {Component, h, Prop, State, VNode, Watch} from '@stencil/core';
 import {getFieldValueCaption} from '../../../../utils/field-utils';
 import {
   BindStateToController,
@@ -215,13 +215,19 @@ export class AtomicSegmentedFacet implements InitializableComponent {
     );
   }
 
-  public componentShouldUpdate(): void {
-    updateFacetVisibilityForActiveTab(
-      [...this.tabsIncluded],
-      [...this.tabsExcluded],
-      this.tabManagerState?.activeTab,
-      this.facet
-    );
+  @Watch('tabManagerState')
+  watchTabManagerState(
+    newValue: {activeTab: string},
+    oldValue: {activeTab: string}
+  ) {
+    if (newValue?.activeTab !== oldValue?.activeTab) {
+      updateFacetVisibilityForActiveTab(
+        [...this.tabsIncluded],
+        [...this.tabsExcluded],
+        this.tabManagerState?.activeTab,
+        this.facet
+      );
+    }
   }
 
   disconnectedCallback() {
diff --git a/packages/atomic/src/components/search/facets/atomic-timeframe-facet/atomic-timeframe-facet.tsx b/packages/atomic/src/components/search/facets/atomic-timeframe-facet/atomic-timeframe-facet.tsx
index 2478c398f26..f624c80eeb7 100644
--- a/packages/atomic/src/components/search/facets/atomic-timeframe-facet/atomic-timeframe-facet.tsx
+++ b/packages/atomic/src/components/search/facets/atomic-timeframe-facet/atomic-timeframe-facet.tsx
@@ -20,7 +20,7 @@ import {
   TabManager,
   TabManagerState,
 } from '@coveo/headless';
-import {Component, Element, h, Listen, Prop, State} from '@stencil/core';
+import {Component, Element, h, Listen, Prop, State, Watch} from '@stencil/core';
 import {FocusTargetController} from '../../../../utils/accessibility-utils';
 import {
   BindStateToController,
@@ -256,13 +256,19 @@ export class AtomicTimeframeFacet implements InitializableComponent {
     this.tabManager = buildTabManager(this.bindings.engine);
   }
 
-  public componentShouldUpdate(): void {
-    updateFacetVisibilityForActiveTab(
-      [...this.tabsIncluded],
-      [...this.tabsExcluded],
-      this.tabManagerState?.activeTab,
-      this.facetForDateRange
-    );
+  @Watch('tabManagerState')
+  watchTabManagerState(
+    newValue: {activeTab: string},
+    oldValue: {activeTab: string}
+  ) {
+    if (newValue?.activeTab !== oldValue?.activeTab) {
+      updateFacetVisibilityForActiveTab(
+        [...this.tabsIncluded],
+        [...this.tabsExcluded],
+        this.tabManagerState?.activeTab,
+        this.facetForDateRange
+      );
+    }
   }
 
   public disconnectedCallback() {
diff --git a/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.new.stories.tsx b/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.new.stories.tsx
index fbf50ae3ef6..c0b4c1a382f 100644
--- a/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.new.stories.tsx
+++ b/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.new.stories.tsx
@@ -61,176 +61,126 @@ export const Default: Story = {
   name: 'atomic-tab-manager',
   decorators: [
     (story) => html`
-      ${story()}
-      <atomic-refine-toggle></atomic-refine-toggle>
-      <div style="padding:10px;">
-        <atomic-sort-dropdown>
-          <atomic-sort-expression
-            tabs-excluded='["article"]'
-            label="Name descending"
-            expression="name descending"
-          ></atomic-sort-expression>
-          <atomic-sort-expression
-            tabs-excluded='["article"]'
-            label="Name ascending"
-            expression="name ascending"
-          ></atomic-sort-expression>
-          <atomic-sort-expression
-            tabs-included='["article"]'
-            label="Most Recent"
-            expression="date descending"
-          ></atomic-sort-expression>
-          <atomic-sort-expression
-            tabs-included='["article"]'
-            label="Least Recent"
-            expression="date ascending"
-          ></atomic-sort-expression>
-          <atomic-sort-expression
-            label="relevance"
-            expression="relevancy"
-          ></atomic-sort-expression>
-        </atomic-sort-dropdown>
-      </div>
-      <div style="display: flex;">
-        <atomic-smart-snippet
-          tabs-included='["article", "documentation"]'
-          style="padding: 10px;"
-        ></atomic-smart-snippet>
-      </div>
-      <div style="display: flex; justify-content: flex-start;">
-        <atomic-facet field="objecttype" label="Object type"></atomic-facet>
-        <atomic-facet
-          aria-label="included-facet"
-          tabs-included='["article"]'
-          field="filetype"
-          label="File type"
-        ></atomic-facet>
-        <atomic-facet
-          aria-label="excluded-facet"
-          tabs-excluded='["article"]'
-          field="source"
-          label="Source"
-        ></atomic-facet>
-      </div>
-      <div style="display: flex; justify-content: flex-start;">
-        <atomic-category-facet
-          aria-label="included-facet"
-          tabs-included='["article"]'
-          field="geographicalhierarchy"
-          label="World Atlas"
-          with-search
-        ></atomic-category-facet>
-        <atomic-category-facet
-          aria-label="excluded-facet"
-          tabs-excluded='["article"]'
-          field="geographicalhierarchy"
-          label="World Atlas"
-        ></atomic-category-facet>
-        <atomic-color-facet
-          aria-label="included-facet"
-          tabs-included='["article"]'
-          field="filetype"
-          label="Files"
-          number-of-values="6"
-          sort-criteria="occurrences"
-        ></atomic-color-facet>
-        <atomic-color-facet
-          aria-label="excluded-facet"
-          tabs-excluded='["article"]'
-          field="filetype"
-          label="Files"
-          number-of-values="6"
-          sort-criteria="occurrences"
-        ></atomic-color-facet>
-      </div>
-      <div style="display: flex; justify-content: flex-start;">
-        <atomic-rating-facet
-          aria-label="included-facet"
-          tabs-included='["article"]'
-          field="snrating"
-          label="Rating"
-          number-of-intervals="5"
-        ></atomic-rating-facet>
-        <atomic-rating-facet
-          aria-label="excluded-facet"
-          tabs-excluded='["article"]'
-          field="snrating"
-          label="Rating"
-          number-of-intervals="5"
-        ></atomic-rating-facet>
-        <atomic-rating-range-facet
-          aria-label="included-facet"
-          tabs-included='["article"]'
-          facet-id="snrating_range"
-          field="snrating"
-          label="Rating Range (auto)"
-          number-of-intervals="5"
-        ></atomic-rating-range-facet>
-        <atomic-rating-range-facet
-          aria-label="excluded-facet"
-          tabs-excluded='["article"]'
-          facet-id="snrating_range_2"
-          field="snrating"
-          label="Rating Range (auto)"
-          number-of-intervals="5"
-        ></atomic-rating-range-facet>
-      </div>
-      <div style="display: flex; justify-content: flex-start; padding:50px;">
-        <atomic-segmented-facet-scrollable>
-          <atomic-segmented-facet
-            aria-label="included-facet"
-            tabs-included='["article"]'
-            field="inat_kingdom"
-            label="Kingdom"
-          ></atomic-segmented-facet>
-        </atomic-segmented-facet-scrollable>
-        <atomic-segmented-facet-scrollable>
-          <atomic-segmented-facet
-            aria-label="excluded-facet"
-            tabs-excluded='["article"]'
-            field="inat_kingdom"
-            label="Kingdom"
-          ></atomic-segmented-facet>
-        </atomic-segmented-facet-scrollable>
-      </div>
-      <div style="display: flex; justify-content: flex-start;">
-        <atomic-timeframe-facet
-          aria-label="included-facet"
-          tabs-included='["article"]'
-          label="Timeframe"
-          with-date-picker
-        >
-          <atomic-timeframe unit="hour"></atomic-timeframe>
-          <atomic-timeframe unit="day"></atomic-timeframe>
-          <atomic-timeframe unit="week"></atomic-timeframe>
-          <atomic-timeframe unit="month"></atomic-timeframe>
-          <atomic-timeframe unit="quarter"></atomic-timeframe>
-          <atomic-timeframe unit="year"></atomic-timeframe>
-          <atomic-timeframe
-            unit="year"
-            amount="10"
-            period="next"
-          ></atomic-timeframe
-        ></atomic-timeframe-facet>
-        <atomic-timeframe-facet
-          aria-label="excluded-facet"
-          tabs-excluded='["article"]'
-          label="Timeframe"
-          with-date-picker
-        >
-          <atomic-timeframe unit="hour"></atomic-timeframe>
-          <atomic-timeframe unit="day"></atomic-timeframe>
-          <atomic-timeframe unit="week"></atomic-timeframe>
-          <atomic-timeframe unit="month"></atomic-timeframe>
-          <atomic-timeframe unit="quarter"></atomic-timeframe>
-          <atomic-timeframe unit="year"></atomic-timeframe>
-          <atomic-timeframe
-            unit="year"
-            amount="10"
-            period="next"
-          ></atomic-timeframe
-        ></atomic-timeframe-facet>
-      </div>
+      <atomic-search-layout>
+        <atomic-layout-section section="search">
+          <atomic-search-box></atomic-search-box>
+        </atomic-layout-section>
+        <atomic-layout-section section="facets">
+          <atomic-facets>
+            <atomic-facet field="objecttype" label="Object type"></atomic-facet>
+            <atomic-facet aria-label="included-facet" tabs-included='["article"]' field="filetype"
+              label="File type (included facet)"></atomic-facet>
+            <atomic-facet aria-label="excluded-facet" tabs-excluded='["article"]' field="source"
+              label="Source (excluded facet)"></atomic-facet>
+            <atomic-category-facet aria-label="included-facet" tabs-included='["article"]' field="geographicalhierarchy"
+              label="World Atlas" with-search></atomic-category-facet>
+            <atomic-category-facet aria-label="excluded-facet" tabs-excluded='["article"]' field="geographicalhierarchy"
+              label="World Atlas"></atomic-category-facet>
+            <atomic-color-facet aria-label="included-facet" tabs-included='["article"]' field="filetype" label="Files"
+              number-of-values="6" sort-criteria="occurrences"></atomic-color-facet>
+            <atomic-color-facet aria-label="excluded-facet" tabs-excluded='["article"]' field="filetype" label="Files"
+              number-of-values="6" sort-criteria="occurrences"></atomic-color-facet>
+            <atomic-rating-facet aria-label="included-facet" tabs-included='["article"]' field="snrating" label="Rating"
+              number-of-intervals="5"></atomic-rating-facet>
+            <atomic-rating-facet aria-label="excluded-facet" tabs-excluded='["article"]' field="snrating" label="Rating"
+              number-of-intervals="5"></atomic-rating-facet>
+            <atomic-rating-range-facet aria-label="included-facet" tabs-included='["article"]' facet-id="snrating_range"
+              field="snrating" label="Rating Range (auto)" number-of-intervals="5"></atomic-rating-range-facet>
+            <atomic-rating-range-facet aria-label="excluded-facet" tabs-excluded='["article"]'
+              facet-id="snrating_range_2" field="snrating" label="Rating Range (auto)"
+              number-of-intervals="5"></atomic-rating-range-facet>
+            <atomic-timeframe-facet aria-label="included-facet" tabs-included='["article"]' label="Timeframe"
+              with-date-picker>
+              <atomic-timeframe unit="hour"></atomic-timeframe>
+              <atomic-timeframe unit="day"></atomic-timeframe>
+              <atomic-timeframe unit="week"></atomic-timeframe>
+              <atomic-timeframe unit="month"></atomic-timeframe>
+              <atomic-timeframe unit="quarter"></atomic-timeframe>
+              <atomic-timeframe unit="year"></atomic-timeframe>
+              <atomic-timeframe unit="year" amount="10" period="next"></atomic-timeframe></atomic-timeframe-facet>
+            <atomic-timeframe-facet aria-label="excluded-facet" tabs-excluded='["article"]' label="Timeframe"
+              with-date-picker>
+              <atomic-timeframe unit="hour"></atomic-timeframe>
+              <atomic-timeframe unit="day"></atomic-timeframe>
+              <atomic-timeframe unit="week"></atomic-timeframe>
+              <atomic-timeframe unit="month"></atomic-timeframe>
+              <atomic-timeframe unit="quarter"></atomic-timeframe>
+              <atomic-timeframe unit="year"></atomic-timeframe>
+              <atomic-timeframe unit="year" amount="10" period="next"></atomic-timeframe></atomic-timeframe-facet>
+          </atomic-facets>
+        </atomic-layout-section>
+        <atomic-layout-section section="main">
+          ${story()}
+          <atomic-layout-section section="horizontal-facets">
+            <atomic-segmented-facet-scrollable>
+              <atomic-segmented-facet aria-label="included-facet" tabs-included='["article"]' field="inat_kingdom"
+                label="Kingdom"></atomic-segmented-facet>
+            </atomic-segmented-facet-scrollable>
+            <atomic-segmented-facet-scrollable>
+              <atomic-segmented-facet aria-label="excluded-facet" tabs-excluded='["article"]' field="inat_kingdom"
+                label="Kingdom"></atomic-segmented-facet>
+            </atomic-segmented-facet-scrollable>
+          </atomic-layout-section>
+          <atomic-layout-section section="status">
+            <atomic-breadbox></atomic-breadbox>
+            <atomic-query-summary></atomic-query-summary>
+            <atomic-refine-toggle></atomic-refine-toggle>
+            <atomic-sort-dropdown>
+              <atomic-sort-expression tabs-excluded='["article"]' label="Name descending"
+                expression="name descending"></atomic-sort-expression>
+              <atomic-sort-expression tabs-excluded='["article"]' label="Name ascending"
+                expression="name ascending"></atomic-sort-expression>
+              <atomic-sort-expression tabs-included='["article"]' label="Most Recent"
+                expression="date descending"></atomic-sort-expression>
+              <atomic-sort-expression tabs-included='["article"]' label="Least Recent"
+                expression="date ascending"></atomic-sort-expression>
+              <atomic-sort-expression label="relevance" expression="relevancy"></atomic-sort-expression>
+            </atomic-sort-dropdown>
+          </atomic-layout-section>
+          <atomic-layout-section section="results">
+            <atomic-smart-snippet tabs-included='["article", "documentation"]'
+              style="padding: 10px;"></atomic-smart-snippet>
+            <atomic-result-list tabs-included='["article"]' display="list" density="compact" image-size="small"
+              data-testid="included-result-list">
+              <atomic-result-template>
+
+                <template>
+
+                  <atomic-result-section-actions><atomic-quickview></atomic-quickview></atomic-result-section-actions>
+                  <atomic-result-section-visual>
+
+                    <img src="https://picsum.photos/350" class="thumbnail" />
+                  </atomic-result-section-visual>
+                  <atomic-result-section-title><atomic-result-link></atomic-result-link></atomic-result-section-title>
+                  <atomic-result-section-excerpt>
+                    "included result list"
+                    <atomic-result-text field="excerpt"></atomic-result-text></atomic-result-section-excerpt>
+                </template>
+              </atomic-result-template>
+            </atomic-result-list>
+            <atomic-result-list tabs-excluded='["article"]' display="grid" density="normal" image-size="icon"
+              data-testid="excluded-result-list">
+
+              <atomic-result-template>
+                <template>
+
+                  <atomic-result-section-actions><atomic-quickview></atomic-quickview></atomic-result-section-actions>
+                  <atomic-result-section-visual>
+
+                    <img src="https://picsum.photos/400" class="thumbnail" />
+                  </atomic-result-section-visual>
+                  <atomic-result-section-title><atomic-result-link></atomic-result-link></atomic-result-section-title>
+                  <atomic-result-section-excerpt>
+                    "excluded result list"
+                    <atomic-result-text field="excerpt"></atomic-result-text></atomic-result-section-excerpt>
+                </template>
+              </atomic-result-template>
+            </atomic-result-list>
+            <atomic-query-error></atomic-commerce-query-error>
+          </atomic-layout-section>
+          <atomic-layout-section section="pagination"></atomic-layout-section>
+        </atomic-layout-section>
+      </atomic-search-layout>
     `,
   ],
 };
diff --git a/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/atomic-tab-manager.e2e.ts b/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/atomic-tab-manager.e2e.ts
index e949b7f8760..6ba5dfc12f3 100644
--- a/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/atomic-tab-manager.e2e.ts
+++ b/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/atomic-tab-manager.e2e.ts
@@ -11,13 +11,13 @@ test.describe('AtomicTabManager', () => {
   });
 
   test('should not display tabs dropdown', async ({tabManager}) => {
-    await expect(tabManager.tabDropdown).not.toBeVisible();
+    await expect(tabManager.tabDropdown).toBeHidden();
   });
 
   test('should display tab buttons for each atomic-tab elements', async ({
     tabManager,
   }) => {
-    await expect(tabManager.tabDropdown).not.toBeVisible();
+    await expect(tabManager.tabDropdown).toBeHidden();
 
     await expect(tabManager.tabButtons()).toHaveText([
       'All',
@@ -37,7 +37,7 @@ test.describe('AtomicTabManager', () => {
     });
 
     test('should not display tabs dropdown', async ({tabManager}) => {
-      await expect(tabManager.tabDropdown).not.toBeVisible();
+      await expect(tabManager.tabDropdown).toBeHidden();
     });
 
     test.describe('should change other component visibility', async () => {
@@ -47,7 +47,7 @@ test.describe('AtomicTabManager', () => {
       test('facets', async ({tabManager}) => {
         const includedFacets = await tabManager.includedFacet.all();
         for (let i = 0; i < includedFacets.length; i++) {
-          await expect(includedFacets[i]).not.toBeVisible();
+          await expect(includedFacets[i]).toBeHidden();
         }
 
         const excludedFacets = await tabManager.excludedFacet.all();
@@ -57,7 +57,7 @@ test.describe('AtomicTabManager', () => {
       });
 
       test('smart snippet', async ({tabManager}) => {
-        await expect(tabManager.smartSnippet).not.toBeVisible();
+        await expect(tabManager.smartSnippet).toBeHidden();
       });
 
       test('sort dropdown', async ({tabManager}) => {
@@ -74,7 +74,7 @@ test.describe('AtomicTabManager', () => {
     test('should display tab buttons for each atomic-tab elements', async ({
       tabManager,
     }) => {
-      await expect(tabManager.tabDropdown).not.toBeVisible();
+      await expect(tabManager.tabDropdown).toBeHidden();
 
       await expect(tabManager.tabButtons()).toHaveText([
         'All',
@@ -102,7 +102,7 @@ test.describe('AtomicTabManager', () => {
 
           const excludedFacets = await tabManager.excludedFacet.all();
           for (let i = 0; i < excludedFacets.length; i++) {
-            await expect(excludedFacets[i]).not.toBeVisible();
+            await expect(excludedFacets[i]).toBeHidden();
           }
         });
 
@@ -136,19 +136,18 @@ test.describe('AtomicTabManager', () => {
 
             const includedFacets = await tabManager.includedFacet.all();
             for (let i = 0; i < includedFacets.length; i++) {
-              await expect(includedFacets[i]).not.toBeVisible();
+              await expect(includedFacets[i]).toBeHidden();
             }
           });
 
           test('smart snippet', async ({tabManager}) => {
-            await expect(tabManager.smartSnippet).not.toBeVisible();
+            await expect(tabManager.smartSnippet).toBeHidden();
           });
 
           test('sort dropdown', async ({tabManager}) => {
-            await tabManager.refineModalButton.click();
-            await tabManager.refineModalHeader.waitFor({state: 'visible'});
+            await tabManager.sortDropdown.waitFor({state: 'visible'});
 
-            await expect(tabManager.refineModalSortDropdownOptions).toHaveText([
+            await expect(tabManager.sortDropdownOptions).toHaveText([
               'Name descending',
               'Name ascending',
               'Relevance',
@@ -167,7 +166,7 @@ test.describe('AtomicTabManager', () => {
         });
 
         test('should hide tabs area', async ({tabManager}) => {
-          await expect(tabManager.tabArea).not.toBeVisible();
+          await expect(tabManager.tabArea).toBeHidden();
         });
 
         test('should have the active tab selected in the dropdown', async ({
@@ -190,7 +189,7 @@ test.describe('AtomicTabManager', () => {
     });
 
     test('should not display tabs area', async ({tabManager}) => {
-      await expect(tabManager.tabArea).not.toBeVisible();
+      await expect(tabManager.tabArea).toBeHidden();
     });
 
     test('should display tabs dropdown', async ({tabManager}) => {
@@ -208,9 +207,8 @@ test.describe('AtomicTabManager', () => {
     });
 
     test.describe('when selecting a dropdown option', () => {
-      test.beforeEach(async ({tabManager, facets}) => {
+      test.beforeEach(async ({tabManager}) => {
         await tabManager.tabDropdown.selectOption('article');
-        await facets.getFacetValue.first().waitFor({state: 'visible'});
       });
 
       test('should change active tab', async ({tabManager}) => {
@@ -219,19 +217,22 @@ test.describe('AtomicTabManager', () => {
 
       test.describe('should change other component visibility', async () => {
         test('facets', async ({tabManager}) => {
-          const includedFacets = await tabManager.includedFacet.all();
+          await tabManager.refineModalButton.click();
+          await tabManager.refineModalHeader.waitFor({state: 'visible'});
+
+          const includedFacets = await tabManager.includedModalFacet.all();
           for (let i = 0; i < includedFacets.length; i++) {
             await expect(includedFacets[i]).toBeVisible();
           }
 
-          const excludedFacets = await tabManager.excludedFacet.all();
+          const excludedFacets = await tabManager.excludedModalFacet.all();
           for (let i = 0; i < excludedFacets.length; i++) {
-            await expect(excludedFacets[i]).not.toBeVisible();
+            await expect(excludedFacets[i]).toBeHidden();
           }
         });
 
         test('smart snippet', async ({tabManager}) => {
-          await expect(tabManager.smartSnippet).toBeVisible();
+          await expect(tabManager.smartSnippet).not.toBeHidden();
         });
 
         test('sort dropdown', async ({tabManager}) => {
@@ -247,26 +248,28 @@ test.describe('AtomicTabManager', () => {
       });
 
       test.describe('when selecting previous dropdown option', () => {
-        test.beforeEach(async ({tabManager, facets}) => {
+        test.beforeEach(async ({tabManager}) => {
           await tabManager.tabDropdown.selectOption('all');
-          await facets.getFacetValue.first().waitFor({state: 'visible'});
         });
 
         test.describe('should change other component visibility', async () => {
           test('facets', async ({tabManager}) => {
-            const excludedFacets = await tabManager.excludedFacet.all();
+            await tabManager.refineModalButton.click();
+            await tabManager.refineModalHeader.waitFor({state: 'visible'});
+
+            const excludedFacets = await tabManager.excludedModalFacet.all();
             for (let i = 0; i < excludedFacets.length; i++) {
               await expect(excludedFacets[i]).toBeVisible();
             }
 
-            const includedFacets = await tabManager.includedFacet.all();
+            const includedFacets = await tabManager.includedModalFacet.all();
             for (let i = 0; i < includedFacets.length; i++) {
-              await expect(includedFacets[i]).not.toBeVisible();
+              await expect(includedFacets[i]).toBeHidden();
             }
           });
 
           test('smart snippet', async ({tabManager}) => {
-            await expect(tabManager.smartSnippet).not.toBeVisible();
+            await expect(tabManager.smartSnippet).toBeHidden();
           });
 
           test('sort dropdown', async ({tabManager}) => {
@@ -288,7 +291,7 @@ test.describe('AtomicTabManager', () => {
         });
 
         test('should hide tabs dropdown', async ({tabManager}) => {
-          await expect(tabManager.tabDropdown).not.toBeVisible();
+          await expect(tabManager.tabDropdown).toBeHidden();
         });
 
         test('should display tabs area', async ({tabManager}) => {
diff --git a/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/page-object.ts b/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/page-object.ts
index 2d68f309c71..e7e33fa1455 100644
--- a/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/page-object.ts
+++ b/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/page-object.ts
@@ -25,9 +25,20 @@ export class TabManagerPageObject extends BasePageObject<'atomic-tab-manager'> {
   get includedFacet() {
     return this.page.getByLabel(/^included-facet$/);
   }
+  get excludedModalFacet() {
+    return this.page
+      .locator('atomic-refine-modal')
+      .getByLabel(/^excluded-facet$/);
+  }
+
+  get includedModalFacet() {
+    return this.page
+      .locator('atomic-refine-modal')
+      .getByLabel(/^included-facet$/);
+  }
 
   get smartSnippet() {
-    return this.page.locator('atomic-smart-snippet [part="smart-snippet"]');
+    return this.page.getByText('Creating an In-Product Experience (IPX)');
   }
 
   get sortDropdown() {

From 0c722a7afa1ae5585f8c911e88dfb28654e3c205 Mon Sep 17 00:00:00 2001
From: Felix Perron-Brault <fpbrault@coveo.com>
Date: Thu, 22 Aug 2024 20:25:27 -0400
Subject: [PATCH 06/13] enable/disable facets based on active tab

---
 .../tests/stream-answer-api-state-mock.ts     | 15 +++++
 .../facets/headless-core-commerce-facet.ts    |  1 +
 .../headless-core-category-facet-options.ts   | 13 ++++-
 .../headless-core-category-facet.ts           |  5 ++
 .../facet/headless-core-facet-options.ts      | 13 ++++-
 .../core/facets/facet/headless-core-facet.ts  |  8 +++
 .../date-facet/headless-core-date-facet.ts    |  5 ++
 .../date-facet/headless-core-date-filter.ts   |  7 +++
 .../date-facet/headless-date-facet-options.ts | 11 ++++
 .../headless-core-numeric-facet.ts            |  5 ++
 .../headless-core-numeric-filter.ts           |  6 ++
 .../headless-numeric-facet-options.ts         | 11 ++++
 .../facets/facet/headless-facet-options.ts    | 13 ++++-
 .../facet/headless-insight-facet-options.ts   | 11 +++-
 .../facet-options/facet-options-slice.ts      | 57 ++++++++++++++++---
 .../facet-options/facet-options-state.ts      |  7 ++-
 .../facet-options/facet-options-utils.ts      | 18 ++++++
 .../category-facet-set-actions.ts             | 15 +++++
 .../facets/facet-set/facet-set-actions.ts     | 14 +++++
 .../date-facet-set/date-facet-actions.ts      | 15 +++++
 .../numeric-facet-actions.ts                  | 15 +++++
 .../src/features/tab-set/tab-set-selectors.ts | 18 ++++++
 .../src/features/tab-set/tab-set-slice.ts     |  1 +
 .../src/test/mock-facet-options-slice.ts      |  1 +
 24 files changed, 271 insertions(+), 14 deletions(-)
 create mode 100644 packages/headless/src/features/facet-options/facet-options-utils.ts
 create mode 100644 packages/headless/src/features/tab-set/tab-set-selectors.ts

diff --git a/packages/headless/src/api/knowledge/tests/stream-answer-api-state-mock.ts b/packages/headless/src/api/knowledge/tests/stream-answer-api-state-mock.ts
index a20f27cd452..54c33deaf8a 100644
--- a/packages/headless/src/api/knowledge/tests/stream-answer-api-state-mock.ts
+++ b/packages/headless/src/api/knowledge/tests/stream-answer-api-state-mock.ts
@@ -122,48 +122,63 @@ export const streamAnswerAPIStateMock: StateNeededByAnswerAPI = {
     facets: {
       ytviewcount_input_range: {
         enabled: true,
+        tabs: {},
       },
       ytviewcount: {
         enabled: false,
+        tabs: {},
       },
       ytviewcount_input: {
         enabled: true,
+        tabs: {},
       },
       sncost: {
         enabled: true,
+        tabs: {},
       },
       ytlikecount: {
         enabled: false,
+        tabs: {},
       },
       geographicalhierarchy: {
         enabled: true,
+        tabs: {},
       },
       filetype: {
         enabled: true,
+        tabs: {},
       },
       author: {
         enabled: true,
+        tabs: {},
       },
       source: {
         enabled: true,
+        tabs: {},
       },
       year: {
         enabled: true,
+        tabs: {},
       },
       snrating_range: {
         enabled: true,
+        tabs: {},
       },
       snrating: {
         enabled: true,
+        tabs: {},
       },
       date: {
         enabled: true,
+        tabs: {},
       },
       date_input_range: {
         enabled: true,
+        tabs: {},
       },
       date_input: {
         enabled: true,
+        tabs: {},
       },
     },
   },
diff --git a/packages/headless/src/controllers/commerce/core/facets/headless-core-commerce-facet.ts b/packages/headless/src/controllers/commerce/core/facets/headless-core-commerce-facet.ts
index 9bebd4a2d17..1922987cd62 100644
--- a/packages/headless/src/controllers/commerce/core/facets/headless-core-commerce-facet.ts
+++ b/packages/headless/src/controllers/commerce/core/facets/headless-core-commerce-facet.ts
@@ -286,6 +286,7 @@ export function buildCoreCommerceFacet<
 
       return {
         facetId,
+        tabs: {},
         type: response?.type ?? 'regular',
         field: response?.field ?? '',
         displayName: response?.displayName ?? '',
diff --git a/packages/headless/src/controllers/core/facets/category-facet/headless-core-category-facet-options.ts b/packages/headless/src/controllers/core/facets/category-facet/headless-core-category-facet-options.ts
index f4ce38165e9..c04dabdf985 100644
--- a/packages/headless/src/controllers/core/facets/category-facet/headless-core-category-facet-options.ts
+++ b/packages/headless/src/controllers/core/facets/category-facet/headless-core-category-facet-options.ts
@@ -1,4 +1,4 @@
-import {Schema, StringValue} from '@coveo/bueno';
+import {ArrayValue, RecordValue, Schema, StringValue} from '@coveo/bueno';
 import {
   categoryFacetSortCriteria,
   CategoryFacetSortCriterion,
@@ -21,6 +21,8 @@ export interface CategoryFacetOptions {
    * */
   field: string;
 
+  tabs?: {included?: string[]; excluded?: string[]};
+
   /**
    * The base path shared by all values for the facet.
    *
@@ -110,6 +112,15 @@ export const categoryFacetOptionsSchema = new Schema<
   Required<CategoryFacetOptions>
 >({
   field,
+  tabs: new RecordValue({
+    options: {
+      required: false,
+    },
+    values: {
+      included: new ArrayValue({each: new StringValue()}),
+      excluded: new ArrayValue({each: new StringValue()}),
+    },
+  }),
   basePath,
   delimitingCharacter,
   facetId,
diff --git a/packages/headless/src/controllers/core/facets/category-facet/headless-core-category-facet.ts b/packages/headless/src/controllers/core/facets/category-facet/headless-core-category-facet.ts
index b81703bde6f..cedcf3b60ee 100644
--- a/packages/headless/src/controllers/core/facets/category-facet/headless-core-category-facet.ts
+++ b/packages/headless/src/controllers/core/facets/category-facet/headless-core-category-facet.ts
@@ -29,6 +29,7 @@ import {categoryFacetSearchSetReducer as categoryFacetSearchSet} from '../../../
 import {defaultFacetSearchOptions} from '../../../../features/facets/facet-search-set/facet-search-reducer-helpers';
 import {isFacetLoadingResponseSelector} from '../../../../features/facets/facet-set/facet-set-selectors';
 import {searchReducer as search} from '../../../../features/search/search-slice';
+import {selectActiveTab} from '../../../../features/tab-set/tab-set-selectors';
 import {
   CategoryFacetSearchSection,
   CategoryFacetSection,
@@ -303,11 +304,15 @@ export function buildCoreCategoryFacet(
   const {dispatch} = engine;
 
   const facetId = determineFacetId(engine, props.options);
+  const tabs = props.options.tabs ?? {};
+  const activeTab = selectActiveTab(engine.state.tabSet);
   const registrationOptions = {
     ...defaultCategoryFacetOptions,
     ...omit('facetSearch', props.options),
     field: props.options.field,
     facetId,
+    tabs,
+    activeTab,
   };
   const options: Required<CategoryFacetOptions> = {
     facetSearch: {...defaultFacetSearchOptions, ...props.options.facetSearch},
diff --git a/packages/headless/src/controllers/core/facets/facet/headless-core-facet-options.ts b/packages/headless/src/controllers/core/facets/facet/headless-core-facet-options.ts
index 6879f4b9f49..c54c4d2e986 100644
--- a/packages/headless/src/controllers/core/facets/facet/headless-core-facet-options.ts
+++ b/packages/headless/src/controllers/core/facets/facet/headless-core-facet-options.ts
@@ -1,4 +1,4 @@
-import {Schema, StringValue} from '@coveo/bueno';
+import {ArrayValue, RecordValue, Schema, StringValue} from '@coveo/bueno';
 import {
   FacetResultsMustMatch,
   facetResultsMustMatch,
@@ -27,6 +27,8 @@ export interface FacetOptions {
    * */
   facetId?: string;
 
+  tabs?: {included?: string[]; excluded?: string[]};
+
   /**
    * Facet search options.
    */
@@ -99,6 +101,15 @@ export interface FacetSearchOptions {
 
 export const facetOptionsSchema = new Schema<Required<FacetOptions>>({
   facetId,
+  tabs: new RecordValue({
+    options: {
+      required: false,
+    },
+    values: {
+      included: new ArrayValue({each: new StringValue()}),
+      excluded: new ArrayValue({each: new StringValue()}),
+    },
+  }),
   field,
   filterFacetCount,
   injectionDepth,
diff --git a/packages/headless/src/controllers/core/facets/facet/headless-core-facet.ts b/packages/headless/src/controllers/core/facets/facet/headless-core-facet.ts
index faa861c4a9f..98a72904f6a 100644
--- a/packages/headless/src/controllers/core/facets/facet/headless-core-facet.ts
+++ b/packages/headless/src/controllers/core/facets/facet/headless-core-facet.ts
@@ -34,6 +34,7 @@ import {
   isFacetValueSelected,
 } from '../../../../features/facets/facet-set/facet-set-utils';
 import {FacetSortCriterion} from '../../../../features/facets/facet-set/interfaces/request';
+import {selectActiveTab} from '../../../../features/tab-set/tab-set-selectors';
 import {
   ConfigurationSection,
   FacetOptionsSection,
@@ -209,6 +210,7 @@ export interface CoreFacetState {
 
   /** Whether the facet is enabled and its values are used to filter search results. */
   enabled: boolean;
+  tabs?: {included?: string[]; excluded?: string[]};
   /**
    * The name to display if this field is used by the Facet Generator in your interface.
    * See [Change Facet Generator options](https://docs.coveo.com/en/n9sd0159#change-facet-generator-options).
@@ -350,12 +352,17 @@ export function buildCoreFacet(
   const controller = buildController(engine);
 
   const facetId = determineFacetId(engine, props.options);
+  const tabs = props.options.tabs ?? {};
+  const activeTab = selectActiveTab(engine.state.tabSet);
   const registrationOptions = {
     ...defaultFacetOptions,
     ...omit('facetSearch', props.options),
     field: props.options.field,
     facetId,
+    tabs,
+    activeTab,
   };
+
   const options: Required<FacetOptions> = {
     facetSearch: {...defaultFacetSearchOptions, ...props.options.facetSearch},
     ...registrationOptions,
@@ -491,6 +498,7 @@ export function buildCoreFacet(
       return {
         label: response?.label,
         facetId,
+        tabs,
         values,
         sortCriterion,
         resultsMustMatch,
diff --git a/packages/headless/src/controllers/core/facets/range-facet/date-facet/headless-core-date-facet.ts b/packages/headless/src/controllers/core/facets/range-facet/date-facet/headless-core-date-facet.ts
index dfd8b367041..292df2bbab3 100644
--- a/packages/headless/src/controllers/core/facets/range-facet/date-facet/headless-core-date-facet.ts
+++ b/packages/headless/src/controllers/core/facets/range-facet/date-facet/headless-core-date-facet.ts
@@ -21,6 +21,7 @@ import {
 } from '../../../../../features/facets/range-facets/date-facet-set/interfaces/response';
 import {RangeFacetSortCriterion} from '../../../../../features/facets/range-facets/generic/interfaces/request';
 import {searchReducer as search} from '../../../../../features/search/search-slice';
+import {selectActiveTab} from '../../../../../features/tab-set/tab-set-selectors';
 import {
   ConfigurationSection,
   DateFacetSection,
@@ -185,10 +186,14 @@ export function buildCoreDateFacet(
   const dispatch = engine.dispatch;
 
   const facetId = determineFacetId(engine, props.options);
+  const tabs = props.options.tabs ?? {};
+  const activeTab = selectActiveTab(engine.state.tabSet);
   const options: RegisterDateFacetActionCreatorPayload = {
     currentValues: [],
     ...props.options,
     facetId,
+    tabs,
+    activeTab,
   };
 
   validateDateFacetOptions(engine, options);
diff --git a/packages/headless/src/controllers/core/facets/range-facet/date-facet/headless-core-date-filter.ts b/packages/headless/src/controllers/core/facets/range-facet/date-facet/headless-core-date-filter.ts
index eee8cc7cc7c..1a39da759b1 100644
--- a/packages/headless/src/controllers/core/facets/range-facet/date-facet/headless-core-date-filter.ts
+++ b/packages/headless/src/controllers/core/facets/range-facet/date-facet/headless-core-date-filter.ts
@@ -17,6 +17,7 @@ import {dateFacetSelectedValuesSelector} from '../../../../../features/facets/ra
 import {dateFacetSetReducer as dateFacetSet} from '../../../../../features/facets/range-facets/date-facet-set/date-facet-set-slice';
 import {DateFacetValue} from '../../../../../features/facets/range-facets/date-facet-set/interfaces/response';
 import {searchReducer as search} from '../../../../../features/search/search-slice';
+import {selectActiveTab} from '../../../../../features/tab-set/tab-set-selectors';
 import {
   ConfigurationSection,
   DateFacetSection,
@@ -46,6 +47,8 @@ export interface DateFilterOptions {
    */
   facetId?: string;
 
+  tabs?: {included?: string[]; excluded?: string[]};
+
   /**
    * Whether to exclude folded result parents when estimating the result count for each facet value.
    *
@@ -164,6 +167,8 @@ export function buildCoreDateFilter(
   const {dispatch} = engine;
   const getState = () => engine.state;
   const facetId = determineFacetId(engine, props.options);
+  const tabs = props.options.tabs ?? {};
+  const activeTab = selectActiveTab(engine.state.tabSet);
   const options: RegisterDateFacetActionCreatorPayload = {
     ...props.options,
     currentValues: props.initialState?.range
@@ -171,6 +176,8 @@ export function buildCoreDateFilter(
       : [],
     generateAutomaticRanges: false,
     facetId,
+    tabs,
+    activeTab,
   };
 
   validateDateFacetOptions(engine, options);
diff --git a/packages/headless/src/controllers/core/facets/range-facet/date-facet/headless-date-facet-options.ts b/packages/headless/src/controllers/core/facets/range-facet/date-facet/headless-date-facet-options.ts
index f7fcb149311..3367ac9de32 100644
--- a/packages/headless/src/controllers/core/facets/range-facet/date-facet/headless-date-facet-options.ts
+++ b/packages/headless/src/controllers/core/facets/range-facet/date-facet/headless-date-facet-options.ts
@@ -37,6 +37,8 @@ export interface DateFacetOptions {
    */
   field: string;
 
+  tabs?: {included?: string[]; excluded?: string[]};
+
   /**
    * Whether the index should automatically create range values.
    *
@@ -113,6 +115,15 @@ const dateRangeRequestDefinition: SchemaDefinition<DateRangeRequest> = {
 export const dateFacetOptionsSchema = new Schema<Required<DateFacetOptions>>({
   facetId,
   field,
+  tabs: new RecordValue({
+    options: {
+      required: false,
+    },
+    values: {
+      included: new ArrayValue({each: new StringValue()}),
+      excluded: new ArrayValue({each: new StringValue()}),
+    },
+  }),
   generateAutomaticRanges,
   filterFacetCount,
   injectionDepth,
diff --git a/packages/headless/src/controllers/core/facets/range-facet/numeric-facet/headless-core-numeric-facet.ts b/packages/headless/src/controllers/core/facets/range-facet/numeric-facet/headless-core-numeric-facet.ts
index ac2768248f1..7a15b297cc5 100644
--- a/packages/headless/src/controllers/core/facets/range-facet/numeric-facet/headless-core-numeric-facet.ts
+++ b/packages/headless/src/controllers/core/facets/range-facet/numeric-facet/headless-core-numeric-facet.ts
@@ -18,6 +18,7 @@ import {
 import {executeToggleNumericFacetSelect} from '../../../../../features/facets/range-facets/numeric-facet-set/numeric-facet-controller-actions';
 import {numericFacetSetReducer as numericFacetSet} from '../../../../../features/facets/range-facets/numeric-facet-set/numeric-facet-set-slice';
 import {searchReducer as search} from '../../../../../features/search/search-slice';
+import {selectActiveTab} from '../../../../../features/tab-set/tab-set-selectors';
 import {
   ConfigurationSection,
   FacetOptionsSection,
@@ -168,10 +169,14 @@ export function buildCoreNumericFacet(
   const dispatch = engine.dispatch;
 
   const facetId = determineFacetId(engine, props.options);
+  const tabs = props.options.tabs ?? {};
+  const activeTab = selectActiveTab(engine.state.tabSet);
   const options: RegisterNumericFacetActionCreatorPayload = {
     currentValues: [],
     ...props.options,
     facetId,
+    tabs,
+    activeTab,
   };
 
   validateNumericFacetOptions(engine, options);
diff --git a/packages/headless/src/controllers/core/facets/range-facet/numeric-facet/headless-core-numeric-filter.ts b/packages/headless/src/controllers/core/facets/range-facet/numeric-facet/headless-core-numeric-filter.ts
index df4def5c30c..aa38189f0a2 100644
--- a/packages/headless/src/controllers/core/facets/range-facet/numeric-facet/headless-core-numeric-filter.ts
+++ b/packages/headless/src/controllers/core/facets/range-facet/numeric-facet/headless-core-numeric-filter.ts
@@ -17,6 +17,7 @@ import {
 import {numericFacetSelectedValuesSelector} from '../../../../../features/facets/range-facets/numeric-facet-set/numeric-facet-selectors';
 import {numericFacetSetReducer as numericFacetSet} from '../../../../../features/facets/range-facets/numeric-facet-set/numeric-facet-set-slice';
 import {searchReducer as search} from '../../../../../features/search/search-slice';
+import {selectActiveTab} from '../../../../../features/tab-set/tab-set-selectors';
 import {
   ConfigurationSection,
   FacetOptionsSection,
@@ -40,6 +41,7 @@ export interface NumericFilterOptions {
    */
   field: string;
 
+  tabs?: {included?: string[]; excluded?: string[]};
   /**
    * A unique identifier for the controller.
    * By default, a unique random ID is generated.
@@ -162,6 +164,8 @@ export function buildCoreNumericFilter(
   const {dispatch} = engine;
   const getState = () => engine.state;
   const facetId = determineFacetId(engine, props.options);
+  const tabs = props.options.tabs ?? {};
+  const activeTab = selectActiveTab(engine.state.tabSet);
   const options: RegisterNumericFacetActionCreatorPayload = {
     ...props.options,
     currentValues: props.initialState?.range
@@ -169,6 +173,8 @@ export function buildCoreNumericFilter(
       : [],
     generateAutomaticRanges: false,
     facetId,
+    tabs,
+    activeTab,
   };
 
   validateNumericFacetOptions(engine, options);
diff --git a/packages/headless/src/controllers/core/facets/range-facet/numeric-facet/headless-numeric-facet-options.ts b/packages/headless/src/controllers/core/facets/range-facet/numeric-facet/headless-numeric-facet-options.ts
index 3a5970f0cde..216258dec71 100644
--- a/packages/headless/src/controllers/core/facets/range-facet/numeric-facet/headless-numeric-facet-options.ts
+++ b/packages/headless/src/controllers/core/facets/range-facet/numeric-facet/headless-numeric-facet-options.ts
@@ -45,6 +45,8 @@ export interface NumericFacetOptions {
    */
   field: string;
 
+  tabs?: {included?: string[]; excluded?: string[]};
+
   /**
    * Whether the index should automatically create range values.
    *
@@ -129,6 +131,15 @@ export const numericFacetOptionsSchema = new Schema<
   Required<NumericFacetOptions>
 >({
   facetId,
+  tabs: new RecordValue({
+    options: {
+      required: false,
+    },
+    values: {
+      included: new ArrayValue({each: new StringValue()}),
+      excluded: new ArrayValue({each: new StringValue()}),
+    },
+  }),
   field,
   generateAutomaticRanges,
   filterFacetCount,
diff --git a/packages/headless/src/controllers/facets/facet/headless-facet-options.ts b/packages/headless/src/controllers/facets/facet/headless-facet-options.ts
index bcd689ae830..3e0c5d92067 100644
--- a/packages/headless/src/controllers/facets/facet/headless-facet-options.ts
+++ b/packages/headless/src/controllers/facets/facet/headless-facet-options.ts
@@ -1,4 +1,4 @@
-import {Schema, StringValue} from '@coveo/bueno';
+import {ArrayValue, RecordValue, Schema, StringValue} from '@coveo/bueno';
 import {
   FacetResultsMustMatch,
   facetResultsMustMatch,
@@ -35,6 +35,8 @@ export interface FacetOptions {
    */
   facetSearch?: FacetSearchOptions;
 
+  tabs?: {included?: string[]; excluded?: string[]};
+
   /**
    * Whether to exclude the parents of folded results when estimating the result count for each facet value.
    *
@@ -133,6 +135,15 @@ export interface FacetSearchOptions {
 export const facetOptionsSchema = new Schema<Required<FacetOptions>>({
   facetId,
   field,
+  tabs: new RecordValue({
+    options: {
+      required: false,
+    },
+    values: {
+      included: new ArrayValue({each: new StringValue()}),
+      excluded: new ArrayValue({each: new StringValue()}),
+    },
+  }),
   filterFacetCount,
   injectionDepth,
   numberOfValues,
diff --git a/packages/headless/src/controllers/insight/facets/facet/headless-insight-facet-options.ts b/packages/headless/src/controllers/insight/facets/facet/headless-insight-facet-options.ts
index a6d14d8f0d2..03c5d397bea 100644
--- a/packages/headless/src/controllers/insight/facets/facet/headless-insight-facet-options.ts
+++ b/packages/headless/src/controllers/insight/facets/facet/headless-insight-facet-options.ts
@@ -1,4 +1,4 @@
-import {Schema, StringValue} from '@coveo/bueno';
+import {ArrayValue, RecordValue, Schema, StringValue} from '@coveo/bueno';
 import {facetResultsMustMatch} from '../../../../features/facets/facet-api/request';
 import {facetSortCriteria} from '../../../../features/facets/facet-set/interfaces/request';
 import {
@@ -46,6 +46,15 @@ export interface FacetOptions extends CoreFacetOptions {
 export const facetOptionsSchema = new Schema<Required<FacetOptions>>({
   facetId,
   field,
+  tabs: new RecordValue({
+    options: {
+      required: false,
+    },
+    values: {
+      included: new ArrayValue({each: new StringValue()}),
+      excluded: new ArrayValue({each: new StringValue()}),
+    },
+  }),
   filterFacetCount,
   injectionDepth,
   numberOfValues,
diff --git a/packages/headless/src/features/facet-options/facet-options-slice.ts b/packages/headless/src/features/facet-options/facet-options-slice.ts
index 17d5700bcf5..6e14561764e 100644
--- a/packages/headless/src/features/facet-options/facet-options-slice.ts
+++ b/packages/headless/src/features/facet-options/facet-options-slice.ts
@@ -6,6 +6,7 @@ import {registerNumericFacet} from '../facets/range-facets/numeric-facet-set/num
 import {change} from '../history/history-actions';
 import {restoreSearchParameters} from '../search-parameters/search-parameter-actions';
 import {executeSearch} from '../search/search-actions';
+import {updateActiveTab} from '../tab-set/tab-set-actions';
 import {
   disableFacet,
   enableFacet,
@@ -15,6 +16,7 @@ import {
   getFacetOptionsSliceInitialState,
   getFacetOptionsInitialState,
 } from './facet-options-state';
+import {isFacetIncludedOnTab} from './facet-options-utils';
 
 export const facetOptionsReducer = createReducer(
   getFacetOptionsInitialState(),
@@ -29,25 +31,60 @@ export const facetOptionsReducer = createReducer(
       .addCase(executeSearch.rejected, (state) => {
         state.freezeFacetOrder = false;
       })
+      .addCase(updateActiveTab, (state, action) => {
+        for (const facetId in state.facets) {
+          const facet = state.facets[facetId];
+
+          facet.enabled = isFacetIncludedOnTab(facet.tabs, action.payload);
+        }
+      })
       .addCase(
         change.fulfilled,
         (state, action) => action.payload?.facetOptions ?? state
       )
       .addCase(registerCategoryFacet, (state, action) => {
-        state.facets[action.payload.facetId] =
-          getFacetOptionsSliceInitialState();
+        const {facetId, tabs, activeTab} = action.payload;
+
+        const newFacetState = {
+          ...getFacetOptionsSliceInitialState(),
+          tabs: tabs ?? {},
+          enabled: isFacetIncludedOnTab(tabs, activeTab),
+        };
+
+        state.facets[facetId] = newFacetState;
       })
       .addCase(registerFacet, (state, action) => {
-        state.facets[action.payload.facetId] =
-          getFacetOptionsSliceInitialState();
+        const {facetId, tabs, activeTab} = action.payload;
+
+        const newFacetState = {
+          ...getFacetOptionsSliceInitialState(),
+          tabs: tabs ?? {},
+          enabled: isFacetIncludedOnTab(tabs, activeTab),
+        };
+
+        state.facets[facetId] = newFacetState;
       })
       .addCase(registerDateFacet, (state, action) => {
-        state.facets[action.payload.facetId] =
-          getFacetOptionsSliceInitialState();
+        const {facetId, tabs, activeTab} = action.payload;
+
+        const newFacetState = {
+          ...getFacetOptionsSliceInitialState(),
+          tabs: tabs ?? {},
+          enabled: isFacetIncludedOnTab(tabs, activeTab),
+        };
+
+        state.facets[facetId] = newFacetState;
       })
       .addCase(registerNumericFacet, (state, action) => {
-        state.facets[action.payload.facetId] =
-          getFacetOptionsSliceInitialState();
+        const {facetId, tabs, activeTab} = action.payload;
+
+        const newFacetState = {
+          ...getFacetOptionsSliceInitialState(),
+          tabs: tabs ?? {},
+          enabled: isFacetIncludedOnTab(tabs, activeTab),
+        };
+
+        state.facets[facetId] = newFacetState;
       })
       .addCase(enableFacet, (state, action) => {
         state.facets[action.payload].enabled = true;
@@ -56,6 +93,10 @@ export const facetOptionsReducer = createReducer(
         state.facets[action.payload].enabled = false;
       })
       .addCase(restoreSearchParameters, (state, action) => {
+        for (const facetId in state.facets) {
+          const facet = state.facets[facetId];
+          facet.enabled = isFacetIncludedOnTab(facet.tabs, action.payload.tab);
+        }
         [
           ...Object.keys(action.payload.f ?? {}),
           ...Object.keys(action.payload.fExcluded ?? {}),
diff --git a/packages/headless/src/features/facet-options/facet-options-state.ts b/packages/headless/src/features/facet-options/facet-options-state.ts
index db770ce2b87..97d786841e6 100644
--- a/packages/headless/src/features/facet-options/facet-options-state.ts
+++ b/packages/headless/src/features/facet-options/facet-options-state.ts
@@ -1,4 +1,7 @@
-export type FacetOptionsSlice = {enabled: boolean};
+export type FacetOptionsSlice = {
+  enabled: boolean;
+  tabs?: {included?: string[]; excluded?: string[]};
+};
 
 export type FacetOptionsState = {
   freezeFacetOrder: boolean;
@@ -6,7 +9,7 @@ export type FacetOptionsState = {
 };
 
 export function getFacetOptionsSliceInitialState(): FacetOptionsSlice {
-  return {enabled: true};
+  return {enabled: true, tabs: {}};
 }
 
 export function getFacetOptionsInitialState(): FacetOptionsState {
diff --git a/packages/headless/src/features/facet-options/facet-options-utils.ts b/packages/headless/src/features/facet-options/facet-options-utils.ts
new file mode 100644
index 00000000000..f59122fc336
--- /dev/null
+++ b/packages/headless/src/features/facet-options/facet-options-utils.ts
@@ -0,0 +1,18 @@
+export const isFacetIncludedOnTab = (
+  facetTabs: {excluded?: string[]; included?: string[]} | undefined,
+  activeTab: string | undefined
+) => {
+  if (!facetTabs || !activeTab) {
+    return true;
+  }
+
+  if (facetTabs.excluded && facetTabs.excluded.includes(activeTab)) {
+    return false;
+  }
+
+  if (!facetTabs.included || facetTabs.included.includes(activeTab)) {
+    return true;
+  }
+
+  return false;
+};
diff --git a/packages/headless/src/features/facets/category-facet-set/category-facet-set-actions.ts b/packages/headless/src/features/facets/category-facet-set/category-facet-set-actions.ts
index 71b3d50d068..bcd205550f3 100644
--- a/packages/headless/src/features/facets/category-facet-set/category-facet-set-actions.ts
+++ b/packages/headless/src/features/facets/category-facet-set/category-facet-set-actions.ts
@@ -4,6 +4,7 @@ import {
   ArrayValue,
   StringValue,
   NumberValue,
+  RecordValue,
 } from '@coveo/bueno';
 import {createAction} from '@reduxjs/toolkit';
 import {
@@ -28,6 +29,10 @@ export interface RegisterCategoryFacetActionCreatorPayload {
    * */
   field: string;
 
+  tabs?: {included?: string[]; excluded?: string[]};
+
+  activeTab?: string;
+
   /**
    * The base path shared by all values for the facet.
    *
@@ -87,6 +92,16 @@ export interface RegisterCategoryFacetActionCreatorPayload {
 const categoryFacetPayloadDefinition = {
   facetId: facetIdDefinition,
   field: requiredNonEmptyString,
+  tabs: new RecordValue({
+    options: {
+      required: false,
+    },
+    values: {
+      included: new ArrayValue({each: new StringValue()}),
+      excluded: new ArrayValue({each: new StringValue()}),
+    },
+  }),
+  activeTab: new StringValue({required: false}),
   delimitingCharacter: new StringValue({required: false, emptyAllowed: true}),
   filterFacetCount: new BooleanValue({required: false}),
   injectionDepth: new NumberValue({required: false, min: 0}),
diff --git a/packages/headless/src/features/facets/facet-set/facet-set-actions.ts b/packages/headless/src/features/facets/facet-set/facet-set-actions.ts
index 27ed16453e6..998e64d1c5e 100644
--- a/packages/headless/src/features/facets/facet-set/facet-set-actions.ts
+++ b/packages/headless/src/features/facets/facet-set/facet-set-actions.ts
@@ -4,6 +4,7 @@ import {
   BooleanValue,
   RecordValue,
   Value,
+  ArrayValue,
 } from '@coveo/bueno';
 import {createAction} from '@reduxjs/toolkit';
 import {
@@ -28,6 +29,9 @@ export interface RegisterFacetActionCreatorPayload {
    * */
   field: string;
 
+  tabs?: {included?: string[]; excluded?: string[]};
+
+  activeTab?: string;
   /**
    * Whether to exclude the parents of folded results when estimating the result count for each facet value.
    *
@@ -103,6 +107,16 @@ export interface RegisterFacetActionCreatorPayload {
 const facetRegistrationOptionsDefinition = {
   facetId: facetIdDefinition,
   field: new StringValue({required: true, emptyAllowed: true}),
+  tabs: new RecordValue({
+    options: {
+      required: false,
+    },
+    values: {
+      included: new ArrayValue({each: new StringValue()}),
+      excluded: new ArrayValue({each: new StringValue()}),
+    },
+  }),
+  activeTab: new StringValue({required: false}),
   filterFacetCount: new BooleanValue({required: false}),
   injectionDepth: new NumberValue({required: false, min: 0}),
   numberOfValues: new NumberValue({required: false, min: 1}),
diff --git a/packages/headless/src/features/facets/range-facets/date-facet-set/date-facet-actions.ts b/packages/headless/src/features/facets/range-facets/date-facet-set/date-facet-actions.ts
index 49c19015e35..ef98025dc19 100644
--- a/packages/headless/src/features/facets/range-facets/date-facet-set/date-facet-actions.ts
+++ b/packages/headless/src/features/facets/range-facets/date-facet-set/date-facet-actions.ts
@@ -4,6 +4,7 @@ import {
   RecordValue,
   Value,
   ArrayValue,
+  StringValue,
 } from '@coveo/bueno';
 import {createAction} from '@reduxjs/toolkit';
 import {parseDate} from '../../../../api/search/date/date-format';
@@ -40,6 +41,10 @@ export interface RegisterDateFacetActionCreatorPayload {
    */
   field: string;
 
+  tabs?: {included?: string[]; excluded?: string[]};
+
+  activeTab?: string;
+
   /**
    * Whether the index should automatically create range values.
    *
@@ -110,6 +115,16 @@ const dateRangeRequestDefinition = {
 const dateFacetRegistrationOptionsDefinition = {
   facetId: facetIdDefinition,
   field: requiredNonEmptyString,
+  tabs: new RecordValue({
+    options: {
+      required: false,
+    },
+    values: {
+      included: new ArrayValue({each: new StringValue()}),
+      excluded: new ArrayValue({each: new StringValue()}),
+    },
+  }),
+  activeTab: new StringValue({required: false}),
   currentValues: new ArrayValue({
     required: false,
     each: new RecordValue({values: dateRangeRequestDefinition}),
diff --git a/packages/headless/src/features/facets/range-facets/numeric-facet-set/numeric-facet-actions.ts b/packages/headless/src/features/facets/range-facets/numeric-facet-set/numeric-facet-actions.ts
index 12951b90d45..4c07adcbd56 100644
--- a/packages/headless/src/features/facets/range-facets/numeric-facet-set/numeric-facet-actions.ts
+++ b/packages/headless/src/features/facets/range-facets/numeric-facet-set/numeric-facet-actions.ts
@@ -4,6 +4,7 @@ import {
   BooleanValue,
   Value,
   ArrayValue,
+  StringValue,
 } from '@coveo/bueno';
 import {createAction} from '@reduxjs/toolkit';
 import {
@@ -34,6 +35,10 @@ export interface RegisterNumericFacetActionCreatorPayload {
    */
   field: string;
 
+  tabs?: {included?: string[]; excluded?: string[]};
+
+  activeTab?: string;
+
   /**
    * Whether the index should automatically create range values.
    *
@@ -104,6 +109,16 @@ const numericFacetRequestDefinition = {
 const numericFacetRegistrationOptionsDefinition = {
   facetId: facetIdDefinition,
   field: requiredNonEmptyString,
+  tabs: new RecordValue({
+    options: {
+      required: false,
+    },
+    values: {
+      included: new ArrayValue({each: new StringValue()}),
+      excluded: new ArrayValue({each: new StringValue()}),
+    },
+  }),
+  activeTab: new StringValue({required: false}),
   currentValues: new ArrayValue({
     required: false,
     each: new RecordValue({values: numericFacetRequestDefinition}),
diff --git a/packages/headless/src/features/tab-set/tab-set-selectors.ts b/packages/headless/src/features/tab-set/tab-set-selectors.ts
new file mode 100644
index 00000000000..2329eb59b85
--- /dev/null
+++ b/packages/headless/src/features/tab-set/tab-set-selectors.ts
@@ -0,0 +1,18 @@
+import {createSelector} from '@reduxjs/toolkit';
+import {TabSetState} from './tab-set-state';
+
+export const selectActiveTab = createSelector(
+  (state?: TabSetState) => state,
+  (tabSetState?: TabSetState): string => {
+    if (!tabSetState) {
+      return '';
+    }
+
+    for (const tabId in tabSetState) {
+      if (tabSetState[tabId].isActive) {
+        return tabSetState[tabId].id;
+      }
+    }
+    return '';
+  }
+);
diff --git a/packages/headless/src/features/tab-set/tab-set-slice.ts b/packages/headless/src/features/tab-set/tab-set-slice.ts
index c491be70501..f2ecae6a00a 100644
--- a/packages/headless/src/features/tab-set/tab-set-slice.ts
+++ b/packages/headless/src/features/tab-set/tab-set-slice.ts
@@ -25,6 +25,7 @@ export const tabSetReducer = createReducer(
       .addCase(restoreSearchParameters, (state, action) => {
         const id = action.payload.tab || '';
         activateTabIfIdExists(state, id);
+        updateActiveTab(id);
       })
       .addCase(change.fulfilled, (state, action) => {
         return action.payload?.tabSet ?? state;
diff --git a/packages/headless/src/test/mock-facet-options-slice.ts b/packages/headless/src/test/mock-facet-options-slice.ts
index 4489aab64de..efea794b2e9 100644
--- a/packages/headless/src/test/mock-facet-options-slice.ts
+++ b/packages/headless/src/test/mock-facet-options-slice.ts
@@ -5,6 +5,7 @@ export function buildFacetOptionsSlice(
 ): FacetOptionsSlice {
   return {
     enabled: true,
+    tabs: {},
     ...config,
   };
 }

From 9a338fdbfdc48f7967f025c242ceabfa6baa9eb1 Mon Sep 17 00:00:00 2001
From: Felix Perron-Brault <fpbrault@coveo.com>
Date: Fri, 23 Aug 2024 09:01:40 -0400
Subject: [PATCH 07/13] fix tests

---
 .../tests/stream-answer-api-state-mock.ts         | 15 ---------------
 .../core/facets/facet/headless-core-facet.test.ts |  2 ++
 .../date-facet/headless-core-date-facet.test.ts   |  2 ++
 .../date-facet/headless-core-date-filter.test.ts  |  2 ++
 .../headless-core-numeric-facet.test.ts           |  2 ++
 .../headless-core-numeric-filter.test.ts          |  2 ++
 .../headless-category-facet.test.ts               |  2 ++
 .../facets/facet/headless-facet.test.ts           |  2 ++
 .../date-facet/headless-date-facet.test.ts        |  2 ++
 .../date-facet/headless-date-filter.test.ts       |  2 ++
 .../numeric-facet/headless-numeric-facet.test.ts  |  2 ++
 .../numeric-facet/headless-numeric-filter.test.ts |  2 ++
 .../facet/headless-product-listing-facet.test.ts  |  2 ++
 13 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/packages/headless/src/api/knowledge/tests/stream-answer-api-state-mock.ts b/packages/headless/src/api/knowledge/tests/stream-answer-api-state-mock.ts
index 54c33deaf8a..a20f27cd452 100644
--- a/packages/headless/src/api/knowledge/tests/stream-answer-api-state-mock.ts
+++ b/packages/headless/src/api/knowledge/tests/stream-answer-api-state-mock.ts
@@ -122,63 +122,48 @@ export const streamAnswerAPIStateMock: StateNeededByAnswerAPI = {
     facets: {
       ytviewcount_input_range: {
         enabled: true,
-        tabs: {},
       },
       ytviewcount: {
         enabled: false,
-        tabs: {},
       },
       ytviewcount_input: {
         enabled: true,
-        tabs: {},
       },
       sncost: {
         enabled: true,
-        tabs: {},
       },
       ytlikecount: {
         enabled: false,
-        tabs: {},
       },
       geographicalhierarchy: {
         enabled: true,
-        tabs: {},
       },
       filetype: {
         enabled: true,
-        tabs: {},
       },
       author: {
         enabled: true,
-        tabs: {},
       },
       source: {
         enabled: true,
-        tabs: {},
       },
       year: {
         enabled: true,
-        tabs: {},
       },
       snrating_range: {
         enabled: true,
-        tabs: {},
       },
       snrating: {
         enabled: true,
-        tabs: {},
       },
       date: {
         enabled: true,
-        tabs: {},
       },
       date_input_range: {
         enabled: true,
-        tabs: {},
       },
       date_input: {
         enabled: true,
-        tabs: {},
       },
     },
   },
diff --git a/packages/headless/src/controllers/core/facets/facet/headless-core-facet.test.ts b/packages/headless/src/controllers/core/facets/facet/headless-core-facet.test.ts
index 389b63d5349..c2cf4752281 100644
--- a/packages/headless/src/controllers/core/facets/facet/headless-core-facet.test.ts
+++ b/packages/headless/src/controllers/core/facets/facet/headless-core-facet.test.ts
@@ -98,6 +98,8 @@ describe('facet', () => {
   it('registers a facet with the passed options and the default values of unspecified options', () => {
     expect(registerFacet).toHaveBeenCalledWith({
       field: 'author',
+      activeTab: '',
+      tabs: {},
       sortCriteria: 'score',
       resultsMustMatch: 'atLeastOneValue',
       facetId,
diff --git a/packages/headless/src/controllers/core/facets/range-facet/date-facet/headless-core-date-facet.test.ts b/packages/headless/src/controllers/core/facets/range-facet/date-facet/headless-core-date-facet.test.ts
index 7c85df8b2ca..5883f795dda 100644
--- a/packages/headless/src/controllers/core/facets/range-facet/date-facet/headless-core-date-facet.test.ts
+++ b/packages/headless/src/controllers/core/facets/range-facet/date-facet/headless-core-date-facet.test.ts
@@ -106,6 +106,8 @@ describe('date facet', () => {
   it('registers a date facet with the passed options', () => {
     expect(registerDateFacet).toHaveBeenCalledWith({
       facetId,
+      activeTab: '',
+      tabs: {},
       currentValues: [],
       ...options,
     });
diff --git a/packages/headless/src/controllers/core/facets/range-facet/date-facet/headless-core-date-filter.test.ts b/packages/headless/src/controllers/core/facets/range-facet/date-facet/headless-core-date-filter.test.ts
index 8dea19a32f3..ec70b36bafa 100644
--- a/packages/headless/src/controllers/core/facets/range-facet/date-facet/headless-core-date-filter.test.ts
+++ b/packages/headless/src/controllers/core/facets/range-facet/date-facet/headless-core-date-filter.test.ts
@@ -104,6 +104,8 @@ describe('date filter', () => {
   it('registers a date facet with the passed options', () => {
     expect(registerDateFacet).toHaveBeenCalledWith({
       facetId,
+      activeTab: '',
+      tabs: {},
       generateAutomaticRanges: false,
       currentValues: initialState?.range
         ? [{...initialState.range, endInclusive: true, state: 'selected'}]
diff --git a/packages/headless/src/controllers/core/facets/range-facet/numeric-facet/headless-core-numeric-facet.test.ts b/packages/headless/src/controllers/core/facets/range-facet/numeric-facet/headless-core-numeric-facet.test.ts
index 14a2bcb1b57..0eb58fa2874 100644
--- a/packages/headless/src/controllers/core/facets/range-facet/numeric-facet/headless-core-numeric-facet.test.ts
+++ b/packages/headless/src/controllers/core/facets/range-facet/numeric-facet/headless-core-numeric-facet.test.ts
@@ -109,6 +109,8 @@ describe('numeric facet', () => {
   it('registers a numeric facet with the passed options', () => {
     expect(registerNumericFacet).toHaveBeenCalledWith({
       facetId,
+      activeTab: '',
+      tabs: {},
       currentValues: [],
       ...options,
     });
diff --git a/packages/headless/src/controllers/core/facets/range-facet/numeric-facet/headless-core-numeric-filter.test.ts b/packages/headless/src/controllers/core/facets/range-facet/numeric-facet/headless-core-numeric-filter.test.ts
index 77f71ff9abc..3906137ba64 100644
--- a/packages/headless/src/controllers/core/facets/range-facet/numeric-facet/headless-core-numeric-filter.test.ts
+++ b/packages/headless/src/controllers/core/facets/range-facet/numeric-facet/headless-core-numeric-filter.test.ts
@@ -99,6 +99,8 @@ describe('numeric filter', () => {
   it('registers a numeric facet with the passed options', () => {
     expect(registerNumericFacet).toHaveBeenCalledWith({
       facetId,
+      activeTab: '',
+      tabs: {},
       generateAutomaticRanges: false,
       currentValues: initialState?.range
         ? [{...initialState.range, endInclusive: true, state: 'selected'}]
diff --git a/packages/headless/src/controllers/facets/category-facet/headless-category-facet.test.ts b/packages/headless/src/controllers/facets/category-facet/headless-category-facet.test.ts
index 180b7997c0e..a53fdd027b0 100644
--- a/packages/headless/src/controllers/facets/category-facet/headless-category-facet.test.ts
+++ b/packages/headless/src/controllers/facets/category-facet/headless-category-facet.test.ts
@@ -102,6 +102,8 @@ describe('category facet', () => {
       ...defaultCategoryFacetOptions,
       ...options,
       facetId,
+      activeTab: '',
+      tabs: {},
     });
   });
 
diff --git a/packages/headless/src/controllers/facets/facet/headless-facet.test.ts b/packages/headless/src/controllers/facets/facet/headless-facet.test.ts
index ee8c05c9cbf..c589d6a1b0e 100644
--- a/packages/headless/src/controllers/facets/facet/headless-facet.test.ts
+++ b/packages/headless/src/controllers/facets/facet/headless-facet.test.ts
@@ -106,6 +106,8 @@ describe('facet', () => {
   it('registers a facet with the passed options and the default values of unspecified options', () => {
     expect(registerFacet).toHaveBeenCalledWith({
       field: 'author',
+      activeTab: '',
+      tabs: {},
       sortCriteria: 'score',
       resultsMustMatch: 'atLeastOneValue',
       facetId,
diff --git a/packages/headless/src/controllers/facets/range-facet/date-facet/headless-date-facet.test.ts b/packages/headless/src/controllers/facets/range-facet/date-facet/headless-date-facet.test.ts
index c4f1f3f9a69..466105ea538 100644
--- a/packages/headless/src/controllers/facets/range-facet/date-facet/headless-date-facet.test.ts
+++ b/packages/headless/src/controllers/facets/range-facet/date-facet/headless-date-facet.test.ts
@@ -103,6 +103,8 @@ describe('date facet', () => {
   it('registers a date facet with the passed options', () => {
     expect(registerDateFacet).toHaveBeenCalledWith({
       facetId,
+      activeTab: '',
+      tabs: {},
       currentValues: [],
       ...options,
     });
diff --git a/packages/headless/src/controllers/facets/range-facet/date-facet/headless-date-filter.test.ts b/packages/headless/src/controllers/facets/range-facet/date-facet/headless-date-filter.test.ts
index a9acfc8e245..f3efd1700eb 100644
--- a/packages/headless/src/controllers/facets/range-facet/date-facet/headless-date-filter.test.ts
+++ b/packages/headless/src/controllers/facets/range-facet/date-facet/headless-date-filter.test.ts
@@ -99,6 +99,8 @@ describe('date filter', () => {
   it('registers a date facet with the passed options', () => {
     expect(registerDateFacet).toHaveBeenCalledWith({
       facetId,
+      activeTab: '',
+      tabs: {},
       generateAutomaticRanges: false,
       currentValues: initialState?.range
         ? [{...initialState.range, endInclusive: true, state: 'selected'}]
diff --git a/packages/headless/src/controllers/facets/range-facet/numeric-facet/headless-numeric-facet.test.ts b/packages/headless/src/controllers/facets/range-facet/numeric-facet/headless-numeric-facet.test.ts
index 7c1acca5571..5e8fb9496ad 100644
--- a/packages/headless/src/controllers/facets/range-facet/numeric-facet/headless-numeric-facet.test.ts
+++ b/packages/headless/src/controllers/facets/range-facet/numeric-facet/headless-numeric-facet.test.ts
@@ -108,6 +108,8 @@ describe('numeric facet', () => {
   it('registers a numeric facet with the passed options', () => {
     expect(registerNumericFacet).toHaveBeenCalledWith({
       facetId,
+      activeTab: '',
+      tabs: {},
       currentValues: [],
       ...options,
     });
diff --git a/packages/headless/src/controllers/facets/range-facet/numeric-facet/headless-numeric-filter.test.ts b/packages/headless/src/controllers/facets/range-facet/numeric-facet/headless-numeric-filter.test.ts
index 977629088c9..127f8b2ca11 100644
--- a/packages/headless/src/controllers/facets/range-facet/numeric-facet/headless-numeric-filter.test.ts
+++ b/packages/headless/src/controllers/facets/range-facet/numeric-facet/headless-numeric-filter.test.ts
@@ -98,6 +98,8 @@ describe('numeric filter', () => {
   it('registers a numeric facet with the passed options', () => {
     expect(registerNumericFacet).toHaveBeenCalledWith({
       facetId,
+      activeTab: '',
+      tabs: {},
       generateAutomaticRanges: false,
       currentValues: initialState?.range
         ? [{...initialState.range, endInclusive: true, state: 'selected'}]
diff --git a/packages/headless/src/controllers/product-listing/facet/headless-product-listing-facet.test.ts b/packages/headless/src/controllers/product-listing/facet/headless-product-listing-facet.test.ts
index b3ae45e0fa4..6738904515d 100644
--- a/packages/headless/src/controllers/product-listing/facet/headless-product-listing-facet.test.ts
+++ b/packages/headless/src/controllers/product-listing/facet/headless-product-listing-facet.test.ts
@@ -66,6 +66,7 @@ describe('facet', () => {
 
   it('registers a facet with the passed options and the default values of unspecified options', () => {
     expect(registerFacet).toHaveBeenCalledWith({
+      activeTab: '',
       facetId,
       field: 'author',
       sortCriteria: 'score',
@@ -73,6 +74,7 @@ describe('facet', () => {
       filterFacetCount: true,
       injectionDepth: 1000,
       numberOfValues: 8,
+      tabs: {},
     });
   });
 

From 3bf35f30f870a612c7ba1a54f9231aff0563d8fc Mon Sep 17 00:00:00 2001
From: Felix Perron-Brault <fpbrault@coveo.com>
Date: Fri, 23 Aug 2024 09:31:38 -0400
Subject: [PATCH 08/13] add some tests

---
 .../facet-options/facet-options-slice.test.ts | 57 +++++++++++++++++++
 .../facet-options/facet-options-utils.test.ts | 39 +++++++++++++
 .../facet-options/facet-options-utils.ts      |  5 +-
 3 files changed, 100 insertions(+), 1 deletion(-)
 create mode 100644 packages/headless/src/features/facet-options/facet-options-utils.test.ts

diff --git a/packages/headless/src/features/facet-options/facet-options-slice.test.ts b/packages/headless/src/features/facet-options/facet-options-slice.test.ts
index 0b34bb00f1e..1a2de18afba 100644
--- a/packages/headless/src/features/facet-options/facet-options-slice.test.ts
+++ b/packages/headless/src/features/facet-options/facet-options-slice.test.ts
@@ -4,6 +4,7 @@ import {logSearchEvent} from '../analytics/analytics-actions';
 import {change} from '../history/history-actions';
 import {getHistoryInitialState} from '../history/history-state';
 import {executeSearch} from '../search/search-actions';
+import {updateActiveTab} from '../tab-set/tab-set-actions';
 import {updateFacetOptions} from './facet-options-actions';
 import {facetOptionsReducer} from './facet-options-slice';
 import {
@@ -41,6 +42,62 @@ describe('facet options slice', () => {
     });
   });
 
+  it('should update facet enabled state on updateActiveTab', () => {
+    const initialState = getFacetOptionsInitialState();
+    initialState.facets = {
+      facetNotIncluded: {
+        enabled: true,
+        tabs: {
+          included: ['tab1'],
+          excluded: [],
+        },
+      },
+      facetIncluded: {
+        enabled: false,
+        tabs: {
+          included: ['tab2'],
+          excluded: [],
+        },
+      },
+      facetNotExcluded: {
+        enabled: true,
+        tabs: {
+          included: [],
+          excluded: ['tab1'],
+        },
+      },
+      facetExcluded: {
+        enabled: true,
+        tabs: {
+          included: [],
+          excluded: ['tab2'],
+        },
+      },
+      facetNotExcludedNotIncluded: {
+        enabled: true,
+        tabs: {
+          included: ['tab1'],
+          excluded: ['tab1'],
+        },
+      },
+      facetExcludedAndIncluded: {
+        enabled: true,
+        tabs: {
+          included: ['tab2'],
+          excluded: ['tab2'],
+        },
+      },
+    };
+    const action = updateActiveTab('tab2');
+    const finalState = facetOptionsReducer(initialState, action);
+    expect(finalState.facets.facetNotIncluded.enabled).toBe(false);
+    expect(finalState.facets.facetIncluded.enabled).toBe(true);
+    expect(finalState.facets.facetNotExcluded.enabled).toBe(true);
+    expect(finalState.facets.facetExcluded.enabled).toBe(false);
+    expect(finalState.facets.facetNotExcludedNotIncluded.enabled).toBe(false);
+    expect(finalState.facets.facetExcludedAndIncluded.enabled).toBe(false);
+  });
+
   it('#executeSearch.fulfilled sets #freezeFacetOrder to false', () => {
     state.freezeFacetOrder = true;
 
diff --git a/packages/headless/src/features/facet-options/facet-options-utils.test.ts b/packages/headless/src/features/facet-options/facet-options-utils.test.ts
new file mode 100644
index 00000000000..d5386502c49
--- /dev/null
+++ b/packages/headless/src/features/facet-options/facet-options-utils.test.ts
@@ -0,0 +1,39 @@
+import {isFacetIncludedOnTab} from './facet-options-utils';
+
+describe('isFacetIncludedOnTab', () => {
+  it('returns true when facetTabs or activeTab is undefined', () => {
+    expect(isFacetIncludedOnTab(undefined, 'tab1')).toBe(true);
+    expect(isFacetIncludedOnTab({excluded: ['tab2']}, undefined)).toBe(true);
+    expect(isFacetIncludedOnTab(undefined, undefined)).toBe(true);
+  });
+
+  it('returns false when activeTab is in facetTabs.excluded', () => {
+    const facetTabs = {excluded: ['tab2', 'tab3']};
+    expect(isFacetIncludedOnTab(facetTabs, 'tab2')).toBe(false);
+    expect(isFacetIncludedOnTab(facetTabs, 'tab3')).toBe(false);
+  });
+
+  it('returns true when facetTabs.included is empty or activeTab is in facetTabs.included', () => {
+    const facetTabs = {included: []};
+    expect(isFacetIncludedOnTab(facetTabs, 'tab1')).toBe(true);
+
+    const facetTabsWithIncluded = {included: ['tab1', 'tab2']};
+    expect(isFacetIncludedOnTab(facetTabsWithIncluded, 'tab1')).toBe(true);
+    expect(isFacetIncludedOnTab(facetTabsWithIncluded, 'tab2')).toBe(true);
+  });
+
+  it('returns false when activeTab is not in facetTabs.included', () => {
+    const facetTabs = {included: ['tab1', 'tab2']};
+    expect(isFacetIncludedOnTab(facetTabs, 'tab3')).toBe(false);
+  });
+
+  it('returns false when activeTab is in facetTabs.excluded and included', () => {
+    const facetTabs = {included: ['tab1'], excluded: ['tab1']};
+    expect(isFacetIncludedOnTab(facetTabs, 'tab1')).toBe(false);
+  });
+
+  it('returns false when activeTab is not in facetTabs.included and not in excluded', () => {
+    const facetTabs = {included: ['tab1'], excluded: ['tab2']};
+    expect(isFacetIncludedOnTab(facetTabs, 'tab3')).toBe(false);
+  });
+});
diff --git a/packages/headless/src/features/facet-options/facet-options-utils.ts b/packages/headless/src/features/facet-options/facet-options-utils.ts
index f59122fc336..271861c312e 100644
--- a/packages/headless/src/features/facet-options/facet-options-utils.ts
+++ b/packages/headless/src/features/facet-options/facet-options-utils.ts
@@ -10,7 +10,10 @@ export const isFacetIncludedOnTab = (
     return false;
   }
 
-  if (!facetTabs.included || facetTabs.included.includes(activeTab)) {
+  if (
+    facetTabs.included &&
+    (facetTabs.included.length === 0 || facetTabs.included.includes(activeTab))
+  ) {
     return true;
   }
 

From 6d50269b979604df757c4b9aab3b3c99b9bc4432 Mon Sep 17 00:00:00 2001
From: Felix Perron-Brault <fpbrault@coveo.com>
Date: Fri, 23 Aug 2024 09:39:37 -0400
Subject: [PATCH 09/13] remove unintended change

---
 .../commerce/core/facets/headless-core-commerce-facet.ts         | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/headless/src/controllers/commerce/core/facets/headless-core-commerce-facet.ts b/packages/headless/src/controllers/commerce/core/facets/headless-core-commerce-facet.ts
index 1922987cd62..9bebd4a2d17 100644
--- a/packages/headless/src/controllers/commerce/core/facets/headless-core-commerce-facet.ts
+++ b/packages/headless/src/controllers/commerce/core/facets/headless-core-commerce-facet.ts
@@ -286,7 +286,6 @@ export function buildCoreCommerceFacet<
 
       return {
         facetId,
-        tabs: {},
         type: response?.type ?? 'regular',
         field: response?.field ?? '',
         displayName: response?.displayName ?? '',

From 0ae05038c4360703bd6aa7fc1462e1e9ca31e42c Mon Sep 17 00:00:00 2001
From: Felix Perron-Brault <fpbrault@coveo.com>
Date: Fri, 23 Aug 2024 10:12:10 -0400
Subject: [PATCH 10/13] add docs

---
 .../category-facet/headless-core-category-facet-options.ts | 3 +++
 .../core/facets/facet/headless-core-facet-options.ts       | 3 +++
 .../controllers/core/facets/facet/headless-core-facet.ts   | 3 +++
 .../range-facet/date-facet/headless-core-date-filter.ts    | 3 +++
 .../range-facet/date-facet/headless-date-facet-options.ts  | 3 +++
 .../numeric-facet/headless-core-numeric-filter.ts          | 4 ++++
 .../numeric-facet/headless-numeric-facet-options.ts        | 3 +++
 .../src/controllers/facets/facet/headless-facet-options.ts | 3 +++
 .../category-facet-set/category-facet-set-actions.ts       | 6 ++++++
 .../src/features/facets/facet-set/facet-set-actions.ts     | 7 +++++++
 .../range-facets/date-facet-set/date-facet-actions.ts      | 6 ++++++
 .../numeric-facet-set/numeric-facet-actions.ts             | 6 ++++++
 12 files changed, 50 insertions(+)

diff --git a/packages/headless/src/controllers/core/facets/category-facet/headless-core-category-facet-options.ts b/packages/headless/src/controllers/core/facets/category-facet/headless-core-category-facet-options.ts
index c04dabdf985..26c6a909e49 100644
--- a/packages/headless/src/controllers/core/facets/category-facet/headless-core-category-facet-options.ts
+++ b/packages/headless/src/controllers/core/facets/category-facet/headless-core-category-facet-options.ts
@@ -21,6 +21,9 @@ export interface CategoryFacetOptions {
    * */
   field: string;
 
+  /**
+   * The tabs on which the facet should be enabled or disabled.
+   */
   tabs?: {included?: string[]; excluded?: string[]};
 
   /**
diff --git a/packages/headless/src/controllers/core/facets/facet/headless-core-facet-options.ts b/packages/headless/src/controllers/core/facets/facet/headless-core-facet-options.ts
index c54c4d2e986..3d5eb49d7e6 100644
--- a/packages/headless/src/controllers/core/facets/facet/headless-core-facet-options.ts
+++ b/packages/headless/src/controllers/core/facets/facet/headless-core-facet-options.ts
@@ -27,6 +27,9 @@ export interface FacetOptions {
    * */
   facetId?: string;
 
+  /**
+   * The tabs on which the facet should be enabled or disabled.
+   */
   tabs?: {included?: string[]; excluded?: string[]};
 
   /**
diff --git a/packages/headless/src/controllers/core/facets/facet/headless-core-facet.ts b/packages/headless/src/controllers/core/facets/facet/headless-core-facet.ts
index 98a72904f6a..cb051a6bcd7 100644
--- a/packages/headless/src/controllers/core/facets/facet/headless-core-facet.ts
+++ b/packages/headless/src/controllers/core/facets/facet/headless-core-facet.ts
@@ -210,7 +210,10 @@ export interface CoreFacetState {
 
   /** Whether the facet is enabled and its values are used to filter search results. */
   enabled: boolean;
+
+  /** The tabs on which the facet should be enabled or disabled. */
   tabs?: {included?: string[]; excluded?: string[]};
+
   /**
    * The name to display if this field is used by the Facet Generator in your interface.
    * See [Change Facet Generator options](https://docs.coveo.com/en/n9sd0159#change-facet-generator-options).
diff --git a/packages/headless/src/controllers/core/facets/range-facet/date-facet/headless-core-date-filter.ts b/packages/headless/src/controllers/core/facets/range-facet/date-facet/headless-core-date-filter.ts
index 1a39da759b1..825c349089a 100644
--- a/packages/headless/src/controllers/core/facets/range-facet/date-facet/headless-core-date-filter.ts
+++ b/packages/headless/src/controllers/core/facets/range-facet/date-facet/headless-core-date-filter.ts
@@ -47,6 +47,9 @@ export interface DateFilterOptions {
    */
   facetId?: string;
 
+  /**
+   * The tabs on which the facet should be enabled or disabled.
+   */
   tabs?: {included?: string[]; excluded?: string[]};
 
   /**
diff --git a/packages/headless/src/controllers/core/facets/range-facet/date-facet/headless-date-facet-options.ts b/packages/headless/src/controllers/core/facets/range-facet/date-facet/headless-date-facet-options.ts
index 3367ac9de32..97367b72d43 100644
--- a/packages/headless/src/controllers/core/facets/range-facet/date-facet/headless-date-facet-options.ts
+++ b/packages/headless/src/controllers/core/facets/range-facet/date-facet/headless-date-facet-options.ts
@@ -37,6 +37,9 @@ export interface DateFacetOptions {
    */
   field: string;
 
+  /**
+   * The tabs on which the facet should be enabled or disabled.
+   */
   tabs?: {included?: string[]; excluded?: string[]};
 
   /**
diff --git a/packages/headless/src/controllers/core/facets/range-facet/numeric-facet/headless-core-numeric-filter.ts b/packages/headless/src/controllers/core/facets/range-facet/numeric-facet/headless-core-numeric-filter.ts
index aa38189f0a2..80b02ec3c49 100644
--- a/packages/headless/src/controllers/core/facets/range-facet/numeric-facet/headless-core-numeric-filter.ts
+++ b/packages/headless/src/controllers/core/facets/range-facet/numeric-facet/headless-core-numeric-filter.ts
@@ -41,7 +41,11 @@ export interface NumericFilterOptions {
    */
   field: string;
 
+  /**
+   * The tabs on which the facet should be enabled or disabled.
+   */
   tabs?: {included?: string[]; excluded?: string[]};
+
   /**
    * A unique identifier for the controller.
    * By default, a unique random ID is generated.
diff --git a/packages/headless/src/controllers/core/facets/range-facet/numeric-facet/headless-numeric-facet-options.ts b/packages/headless/src/controllers/core/facets/range-facet/numeric-facet/headless-numeric-facet-options.ts
index 216258dec71..ef21d82e9f0 100644
--- a/packages/headless/src/controllers/core/facets/range-facet/numeric-facet/headless-numeric-facet-options.ts
+++ b/packages/headless/src/controllers/core/facets/range-facet/numeric-facet/headless-numeric-facet-options.ts
@@ -45,6 +45,9 @@ export interface NumericFacetOptions {
    */
   field: string;
 
+  /**
+   * The tabs on which the facet should be enabled or disabled.
+   */
   tabs?: {included?: string[]; excluded?: string[]};
 
   /**
diff --git a/packages/headless/src/controllers/facets/facet/headless-facet-options.ts b/packages/headless/src/controllers/facets/facet/headless-facet-options.ts
index 3e0c5d92067..fd002ce9fbf 100644
--- a/packages/headless/src/controllers/facets/facet/headless-facet-options.ts
+++ b/packages/headless/src/controllers/facets/facet/headless-facet-options.ts
@@ -35,6 +35,9 @@ export interface FacetOptions {
    */
   facetSearch?: FacetSearchOptions;
 
+  /**
+   * The tabs on which the facet should be enabled or disabled.
+   */
   tabs?: {included?: string[]; excluded?: string[]};
 
   /**
diff --git a/packages/headless/src/features/facets/category-facet-set/category-facet-set-actions.ts b/packages/headless/src/features/facets/category-facet-set/category-facet-set-actions.ts
index bcd205550f3..22a54a5bfc8 100644
--- a/packages/headless/src/features/facets/category-facet-set/category-facet-set-actions.ts
+++ b/packages/headless/src/features/facets/category-facet-set/category-facet-set-actions.ts
@@ -29,8 +29,14 @@ export interface RegisterCategoryFacetActionCreatorPayload {
    * */
   field: string;
 
+  /**
+   * The tabs on which the facet should be enabled or disabled.
+   */
   tabs?: {included?: string[]; excluded?: string[]};
 
+  /**
+   * The currently active tab.
+   */
   activeTab?: string;
 
   /**
diff --git a/packages/headless/src/features/facets/facet-set/facet-set-actions.ts b/packages/headless/src/features/facets/facet-set/facet-set-actions.ts
index 998e64d1c5e..a4d4a9b11a9 100644
--- a/packages/headless/src/features/facets/facet-set/facet-set-actions.ts
+++ b/packages/headless/src/features/facets/facet-set/facet-set-actions.ts
@@ -29,9 +29,16 @@ export interface RegisterFacetActionCreatorPayload {
    * */
   field: string;
 
+  /**
+   * The tabs on which the facet should be enabled or disabled.
+   */
   tabs?: {included?: string[]; excluded?: string[]};
 
+  /**
+   * The currently active tab.
+   */
   activeTab?: string;
+
   /**
    * Whether to exclude the parents of folded results when estimating the result count for each facet value.
    *
diff --git a/packages/headless/src/features/facets/range-facets/date-facet-set/date-facet-actions.ts b/packages/headless/src/features/facets/range-facets/date-facet-set/date-facet-actions.ts
index ef98025dc19..b0da6495bcc 100644
--- a/packages/headless/src/features/facets/range-facets/date-facet-set/date-facet-actions.ts
+++ b/packages/headless/src/features/facets/range-facets/date-facet-set/date-facet-actions.ts
@@ -41,8 +41,14 @@ export interface RegisterDateFacetActionCreatorPayload {
    */
   field: string;
 
+  /**
+   * The tabs on which the facet should be enabled or disabled.
+   */
   tabs?: {included?: string[]; excluded?: string[]};
 
+  /**
+   * The currently active tab.
+   */
   activeTab?: string;
 
   /**
diff --git a/packages/headless/src/features/facets/range-facets/numeric-facet-set/numeric-facet-actions.ts b/packages/headless/src/features/facets/range-facets/numeric-facet-set/numeric-facet-actions.ts
index 4c07adcbd56..8dd6b3691e9 100644
--- a/packages/headless/src/features/facets/range-facets/numeric-facet-set/numeric-facet-actions.ts
+++ b/packages/headless/src/features/facets/range-facets/numeric-facet-set/numeric-facet-actions.ts
@@ -35,8 +35,14 @@ export interface RegisterNumericFacetActionCreatorPayload {
    */
   field: string;
 
+  /**
+   * The tabs on which the facet should be enabled or disabled.
+   */
   tabs?: {included?: string[]; excluded?: string[]};
 
+  /**
+   * The currently active tab.
+   */
   activeTab?: string;
 
   /**

From dfebda77a6f7e30ffa5c539ec577bbbd9ff854bd Mon Sep 17 00:00:00 2001
From: Felix Perron-Brault <fpbrault@coveo.com>
Date: Fri, 23 Aug 2024 11:39:25 -0400
Subject: [PATCH 11/13] don't disable/enable dependent facets

---
 .../src/features/facet-options/facet-options-slice.ts       | 4 +++-
 .../src/features/facet-options/facet-options-utils.ts       | 6 +++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/headless/src/features/facet-options/facet-options-slice.ts b/packages/headless/src/features/facet-options/facet-options-slice.ts
index 6e14561764e..4f56bae5a28 100644
--- a/packages/headless/src/features/facet-options/facet-options-slice.ts
+++ b/packages/headless/src/features/facet-options/facet-options-slice.ts
@@ -35,7 +35,9 @@ export const facetOptionsReducer = createReducer(
         for (const facetId in state.facets) {
           const facet = state.facets[facetId];
 
-          facet.enabled = isFacetIncludedOnTab(facet.tabs, action.payload);
+          if (Object.keys({...facet.tabs}).length > 0) {
+            facet.enabled = isFacetIncludedOnTab(facet.tabs, action.payload);
+          }
         }
       })
       .addCase(
diff --git a/packages/headless/src/features/facet-options/facet-options-utils.ts b/packages/headless/src/features/facet-options/facet-options-utils.ts
index 271861c312e..d3ecf292a12 100644
--- a/packages/headless/src/features/facet-options/facet-options-utils.ts
+++ b/packages/headless/src/features/facet-options/facet-options-utils.ts
@@ -2,7 +2,11 @@ export const isFacetIncludedOnTab = (
   facetTabs: {excluded?: string[]; included?: string[]} | undefined,
   activeTab: string | undefined
 ) => {
-  if (!facetTabs || !activeTab) {
+  if (
+    ({...facetTabs} && Object.keys({...facetTabs}).length === 0) ||
+    !activeTab ||
+    !facetTabs
+  ) {
     return true;
   }
 

From 97d93a8c81fa772fc54d2c635591aa2ad29af248 Mon Sep 17 00:00:00 2001
From: Felix Perron-Brault <fpbrault@coveo.com>
Date: Mon, 26 Aug 2024 11:10:52 -0400
Subject: [PATCH 12/13] improve code reuse

---
 .../facet-options/facet-options-slice.ts      | 48 ++++++++-----------
 1 file changed, 20 insertions(+), 28 deletions(-)

diff --git a/packages/headless/src/features/facet-options/facet-options-slice.ts b/packages/headless/src/features/facet-options/facet-options-slice.ts
index 4f56bae5a28..a7c3cae6ca7 100644
--- a/packages/headless/src/features/facet-options/facet-options-slice.ts
+++ b/packages/headless/src/features/facet-options/facet-options-slice.ts
@@ -15,6 +15,7 @@ import {
 import {
   getFacetOptionsSliceInitialState,
   getFacetOptionsInitialState,
+  FacetOptionsState,
 } from './facet-options-state';
 import {isFacetIncludedOnTab} from './facet-options-utils';
 
@@ -47,46 +48,22 @@ export const facetOptionsReducer = createReducer(
       .addCase(registerCategoryFacet, (state, action) => {
         const {facetId, tabs, activeTab} = action.payload;
 
-        const newFacetState = {
-          ...getFacetOptionsSliceInitialState(),
-          tabs: tabs ?? {},
-          enabled: isFacetIncludedOnTab(tabs, activeTab),
-        };
-
-        state.facets[facetId] = newFacetState;
+        handleRegisterFacetTabs(tabs, activeTab, state, facetId);
       })
       .addCase(registerFacet, (state, action) => {
         const {facetId, tabs, activeTab} = action.payload;
 
-        const newFacetState = {
-          ...getFacetOptionsSliceInitialState(),
-          tabs: tabs ?? {},
-          enabled: isFacetIncludedOnTab(tabs, activeTab),
-        };
-
-        state.facets[facetId] = newFacetState;
+        handleRegisterFacetTabs(tabs, activeTab, state, facetId);
       })
       .addCase(registerDateFacet, (state, action) => {
         const {facetId, tabs, activeTab} = action.payload;
 
-        const newFacetState = {
-          ...getFacetOptionsSliceInitialState(),
-          tabs: tabs ?? {},
-          enabled: isFacetIncludedOnTab(tabs, activeTab),
-        };
-
-        state.facets[facetId] = newFacetState;
+        handleRegisterFacetTabs(tabs, activeTab, state, facetId);
       })
       .addCase(registerNumericFacet, (state, action) => {
         const {facetId, tabs, activeTab} = action.payload;
 
-        const newFacetState = {
-          ...getFacetOptionsSliceInitialState(),
-          tabs: tabs ?? {},
-          enabled: isFacetIncludedOnTab(tabs, activeTab),
-        };
-
-        state.facets[facetId] = newFacetState;
+        handleRegisterFacetTabs(tabs, activeTab, state, facetId);
       })
       .addCase(enableFacet, (state, action) => {
         state.facets[action.payload].enabled = true;
@@ -114,3 +91,18 @@ export const facetOptionsReducer = createReducer(
       });
   }
 );
+
+function handleRegisterFacetTabs(
+  tabs: {included?: string[]; excluded?: string[]} | undefined,
+  activeTab: string | undefined,
+  state: FacetOptionsState,
+  facetId: string
+) {
+  const newFacetState = {
+    ...getFacetOptionsSliceInitialState(),
+    tabs: tabs ?? {},
+    enabled: isFacetIncludedOnTab(tabs, activeTab),
+  };
+
+  state.facets[facetId] = newFacetState;
+}

From 324136e459fe783e228de24144a263aad0c481ec Mon Sep 17 00:00:00 2001
From: Felix Perron-Brault <fpbrault@coveo.com>
Date: Mon, 26 Aug 2024 11:18:19 -0400
Subject: [PATCH 13/13] rewrite test with .each

---
 .../facet-options/facet-options-slice.test.ts | 36 ++++++++++++-------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/packages/headless/src/features/facet-options/facet-options-slice.test.ts b/packages/headless/src/features/facet-options/facet-options-slice.test.ts
index 1a2de18afba..4c969643f21 100644
--- a/packages/headless/src/features/facet-options/facet-options-slice.test.ts
+++ b/packages/headless/src/features/facet-options/facet-options-slice.test.ts
@@ -42,45 +42,45 @@ describe('facet options slice', () => {
     });
   });
 
-  it('should update facet enabled state on updateActiveTab', () => {
+  describe('update facet enabled state on updateActiveTab', () => {
     const initialState = getFacetOptionsInitialState();
     initialState.facets = {
-      facetNotIncluded: {
+      notIncluded: {
         enabled: true,
         tabs: {
           included: ['tab1'],
           excluded: [],
         },
       },
-      facetIncluded: {
+      included: {
         enabled: false,
         tabs: {
           included: ['tab2'],
           excluded: [],
         },
       },
-      facetNotExcluded: {
+      notExcluded: {
         enabled: true,
         tabs: {
           included: [],
           excluded: ['tab1'],
         },
       },
-      facetExcluded: {
+      excluded: {
         enabled: true,
         tabs: {
           included: [],
           excluded: ['tab2'],
         },
       },
-      facetNotExcludedNotIncluded: {
+      notExcludedNotIncluded: {
         enabled: true,
         tabs: {
           included: ['tab1'],
           excluded: ['tab1'],
         },
       },
-      facetExcludedAndIncluded: {
+      excludedAndIncluded: {
         enabled: true,
         tabs: {
           included: ['tab2'],
@@ -90,12 +90,22 @@ describe('facet options slice', () => {
     };
     const action = updateActiveTab('tab2');
     const finalState = facetOptionsReducer(initialState, action);
-    expect(finalState.facets.facetNotIncluded.enabled).toBe(false);
-    expect(finalState.facets.facetIncluded.enabled).toBe(true);
-    expect(finalState.facets.facetNotExcluded.enabled).toBe(true);
-    expect(finalState.facets.facetExcluded.enabled).toBe(false);
-    expect(finalState.facets.facetNotExcludedNotIncluded.enabled).toBe(false);
-    expect(finalState.facets.facetExcludedAndIncluded.enabled).toBe(false);
+
+    const testCases: [string, boolean][] = [
+      ['notIncluded', false],
+      ['included', true],
+      ['notExcluded', true],
+      ['excluded', false],
+      ['notExcludedNotIncluded', false],
+      ['excludedAndIncluded', false],
+    ];
+
+    test.each(testCases)(
+      '%s facet should have enabled state %s',
+      (facet: string, expectedEnabled: boolean) => {
+        expect(finalState.facets[facet].enabled).toBe(expectedEnabled);
+      }
+    );
   });
 
   it('#executeSearch.fulfilled sets #freezeFacetOrder to false', () => {