fix(atomic/commerce): fix breadbox labels / values (#4178)

https://coveord.atlassian.net/browse/KIT-3383
coveo · Jul 11, 2024 · 6ab1e3b · 6ab1e3b
1 parent 095ab4b
commit 6ab1e3b
Show file tree

Hide file tree

Showing 11 changed files with 73 additions and 84 deletions.
diff --git a/...ages/atomic/src/components/commerce/atomic-commerce-breadbox/atomic-commerce-breadbox.tsx b/...ages/atomic/src/components/commerce/atomic-commerce-breadbox/atomic-commerce-breadbox.tsx
@@ -2,8 +2,6 @@ import {NumberValue, Schema} from '@coveo/bueno';
 import {
   BreadcrumbManagerState,
   BreadcrumbManager,
-  FacetGenerator,
-  FacetGeneratorState,
   ProductListing,
   Search,
   buildProductListing,
@@ -17,6 +15,7 @@ import {
 } from '@coveo/headless/commerce';
 import {Component, h, State, Element, Prop} from '@stencil/core';
 import {FocusTargetController} from '../../../utils/accessibility-utils';
+import {parseDate} from '../../../utils/date-utils';
 import {getFieldValueCaption} from '../../../utils/field-utils';
 import {
   InitializableComponent,
@@ -30,6 +29,8 @@ import {BreadcrumbContent} from '../../common/breadbox/breadcrumb-content';
 import {BreadcrumbShowLess} from '../../common/breadbox/breadcrumb-show-less';
 import {BreadcrumbShowMore} from '../../common/breadbox/breadcrumb-show-more';
 import {Breadcrumb as BreadboxBreadcrumb} from '../../common/breadbox/breadcrumb-types';
+import {formatHumanReadable} from '../../common/facets/numeric-facet/formatter';
+import {defaultNumberFormatter} from '../../common/formats/format-common';
 import {Hidden} from '../../common/hidden';
 import {CommerceBindings} from '../atomic-commerce-interface/atomic-commerce-interface';
 
@@ -73,7 +74,6 @@ export class AtomicCommerceBreadbox
   private numberOfBreadcrumbs = 0;
   private numberOfCollapsedBreadcrumbs = 0;
   private firstExpandedBreadcrumbIndex?: number;
-  facetGenerator!: FacetGenerator;
   breadcrumbManager!: BreadcrumbManager;
 
   @Element() private host!: HTMLElement;
@@ -83,9 +83,6 @@ export class AtomicCommerceBreadbox
   @BindStateToController('breadcrumbManager')
   @State()
   private breadcrumbManagerState!: BreadcrumbManagerState;
-  @BindStateToController('facetGenerator')
-  @State()
-  public facetGeneratorState!: FacetGeneratorState[];
   @State() public error!: Error;
   @State() private isCollapsed = true;
 
@@ -121,7 +118,6 @@ export class AtomicCommerceBreadbox
     }
 
     this.breadcrumbManager = this.searchOrListing.breadcrumbManager();
-    this.facetGenerator = this.searchOrListing.facetGenerator();
 
     if (window.ResizeObserver) {
       this.resizeObserver = new ResizeObserver(() => this.adaptBreadcrumbs());
@@ -249,15 +245,25 @@ export class AtomicCommerceBreadbox
     switch (type) {
       case 'numericalRange':
         return [
-          this.bindings.store.state.numericFacets[field].format(
-            value.value as NumericFacetValue
-          ),
+          formatHumanReadable({
+            facetValue: value.value as NumericFacetValue,
+            logger: this.bindings.engine.logger,
+            i18n: this.bindings.i18n,
+            field: field,
+            manualRanges: [],
+            formatter: defaultNumberFormatter,
+          }),
         ];
       case 'dateRange':
         return [
-          this.bindings.store.state.dateFacets[field].format(
-            value.value as DateFacetValue
-          ),
+          this.bindings.i18n.t('to', {
+            start: parseDate((value.value as DateFacetValue).start).format(
+              'YYYY-MM-DD'
+            ),
+            end: parseDate((value.value as DateFacetValue).end).format(
+              'YYYY-MM-DD'
+            ),
+          }),
         ];
       case 'hierarchical':
         return (value.value as CategoryFacetValue).path.map(
@@ -276,33 +282,10 @@ export class AtomicCommerceBreadbox
   };
 
   private buildBreadcrumb(breadcrumb: Breadcrumb<AnyFacetValue>) {
-    let facetStateName:
-      | 'facets'
-      | 'categoryFacets'
-      | 'numericFacets'
-      | 'dateFacets';
-
-    switch (breadcrumb.type) {
-      case 'hierarchical':
-        facetStateName = 'categoryFacets';
-        break;
-      case 'numericalRange':
-        facetStateName = 'numericFacets';
-        break;
-      case 'dateRange':
-        facetStateName = 'dateFacets';
-        break;
-      default:
-        facetStateName = 'facets';
-    }
-
     return breadcrumb.values.map((value: BreadcrumbValue<AnyFacetValue>) => {
       return {
         facetId: breadcrumb.facetId,
-        label:
-          this.bindings.store.state[facetStateName][
-            breadcrumb.facetId
-          ]?.label(),
+        label: breadcrumb.facetDisplayName,
         deselect: value.deselect,
         formattedValue: this.valueForFacetType(
           breadcrumb.type,

diff --git a/packages/atomic/src/components/commerce/atomic-commerce-interface/store.ts b/packages/atomic/src/components/commerce/atomic-commerce-interface/store.ts
@@ -38,7 +38,6 @@ export interface AtomicStoreData extends AtomicCommonStoreData {
 
 export interface AtomicCommerceStore
   extends AtomicCommonStore<AtomicStoreData> {
-  getAllFacets(): FacetInfoMap;
   isMobile(): boolean;
 }
 
@@ -70,15 +69,6 @@ export function createAtomicCommerceStore(
   return {
     ...commonStore,
 
-    getAllFacets() {
-      return {
-        ...commonStore.state.facets,
-        ...commonStore.state.dateFacets,
-        ...commonStore.state.categoryFacets,
-        ...commonStore.state.numericFacets,
-      };
-    },
-
     isMobile() {
       return !window.matchMedia(
         makeDesktopQuery(commonStore.state.mobileBreakpoint)

diff --git a/...ponents/commerce/facets/atomic-commerce-category-facet/atomic-commerce-category-facet.tsx b/...ponents/commerce/facets/atomic-commerce-category-facet/atomic-commerce-category-facet.tsx
@@ -109,7 +109,6 @@ export class AtomicCategoryFacet implements InitializableComponent<Bindings> {
    */
   @Prop({reflect: true}) field?: string;
 
-  @BindStateToController('facet')
   @State()
   public facetState!: CategoryFacetState;
 
@@ -124,27 +123,34 @@ export class AtomicCategoryFacet implements InitializableComponent<Bindings> {
   private showMoreFocus?: FocusTargetController;
   private headerFocus?: FocusTargetController;
   private activeValueFocus?: FocusTargetController;
+  private unsubscribeFacetController!: () => void;
 
   @AriaLiveRegion('facet-search')
   protected facetSearchAriaMessage!: string;
 
   public initialize() {
-    if (!this.facetState) {
+    if (!this.facet) {
       return;
     }
+
+    this.unsubscribeFacetController = this.facet.subscribe(
+      () => (this.facetState = this.facet.state)
+    );
+
     announceFacetSearchResultsWithAriaLive(
       this.facet,
       this.displayName,
       (msg) => (this.facetSearchAriaMessage = msg),
       this.bindings.i18n
     );
+
     const facetInfo: FacetInfo = {
       label: () => this.bindings.i18n.t(this.displayName),
       facetId: this.facetState.facetId,
       element: this.host,
       isHidden: () => this.isHidden,
     };
-    this.bindings.store.registerFacet('categoryFacets', facetInfo);
+
     initializePopover(this.host, {
       ...facetInfo,
       hasValues: () => !!this.facetState.values.length,
@@ -182,6 +188,7 @@ export class AtomicCategoryFacet implements InitializableComponent<Bindings> {
     if (this.host.isConnected) {
       return;
     }
+    this.unsubscribeFacetController();
   }
 
   private get isHidden() {

diff --git a/...ges/atomic/src/components/commerce/facets/atomic-commerce-facet/atomic-commerce-facet.tsx b/...ges/atomic/src/components/commerce/facets/atomic-commerce-facet/atomic-commerce-facet.tsx
@@ -111,7 +111,6 @@ export class AtomicCommerceFacet implements InitializableComponent<Bindings> {
    */
   @Prop({reflect: true}) field?: string;
 
-  @BindStateToController('facet')
   @State()
   public facetState!: RegularFacetState;
 
@@ -124,17 +123,24 @@ export class AtomicCommerceFacet implements InitializableComponent<Bindings> {
   private showLessFocus?: FocusTargetController;
   private showMoreFocus?: FocusTargetController;
   private headerFocus?: FocusTargetController;
+  private unsubscribeFacetController!: () => void;
 
   @AriaLiveRegion('facet-search')
   protected facetSearchAriaMessage!: string;
 
   public initialize() {
-    if (!this.facetState) {
+    if (!this.facet) {
       return;
     }
+    this.unsubscribeFacetController = this.facet.subscribe(
+      () => (this.facetState = this.facet.state)
+    );
     this.initAriaLive();
     this.initPopover();
-    this.registerFacet();
+  }
+
+  public disconnectedCallback(): void {
+    this.unsubscribeFacetController();
   }
 
   public componentShouldUpdate(
@@ -336,10 +342,6 @@ export class AtomicCommerceFacet implements InitializableComponent<Bindings> {
     return !this.facetState.values.length;
   }
 
-  private registerFacet() {
-    this.bindings.store.registerFacet('facets', this.facetInfo);
-  }
-
   private initPopover() {
     initializePopover(this.host, {
       ...this.facetInfo,

diff --git a/...omponents/commerce/facets/atomic-commerce-numeric-facet/atomic-commerce-numeric-facet.tsx b/...omponents/commerce/facets/atomic-commerce-numeric-facet/atomic-commerce-numeric-facet.tsx
@@ -18,7 +18,6 @@ import {FacetInfo} from '../../../common/facets/facet-common-store';
 import {FacetContainer} from '../../../common/facets/facet-container/facet-container';
 import {FacetGuard} from '../../../common/facets/facet-guard';
 import {FacetHeader} from '../../../common/facets/facet-header/facet-header';
-import {formatHumanReadable} from '../../../common/facets/numeric-facet/formatter';
 import {NumericFacetValueLink} from '../../../common/facets/numeric-facet/value-link';
 import {NumericFacetValuesContainer} from '../../../common/facets/numeric-facet/values-container';
 import {initializePopover} from '../../../common/facets/popover/popover-type';
@@ -47,7 +46,6 @@ export class AtomicCommerceNumericFacet
 
   @State() private range?: Range;
 
-  @BindStateToController('facet')
   @State()
   public facetState!: NumericFacetState;
 
@@ -86,35 +84,33 @@ export class AtomicCommerceNumericFacet
     return this.headerFocus;
   }
 
+  private unsubscribeFacetController!: () => void;
+
   public initialize() {
-    if (!this.facetState) {
+    if (!this.facet) {
       return;
     }
+
+    this.unsubscribeFacetController = this.facet.subscribe(
+      () => (this.facetState = this.facet.state)
+    );
+
     this.registerFacetToStore();
   }
 
+  public disconnectedCallback() {
+    this.unsubscribeFacetController();
+  }
+
   private registerFacetToStore() {
-    const {facetId, field} = this.facetState;
+    const {facetId} = this.facetState;
     const facetInfo: FacetInfo = {
       label: () => this.bindings.i18n.t(this.displayName),
       facetId: facetId,
       element: this.host,
       isHidden: () => this.isHidden,
     };
 
-    this.bindings.store.registerFacet('numericFacets', {
-      ...facetInfo,
-      format: (value) =>
-        formatHumanReadable({
-          facetValue: value,
-          logger: this.bindings.engine.logger,
-          i18n: this.bindings.i18n,
-          field: field,
-          manualRanges: this.manualRanges,
-          formatter: this.formatter,
-        }),
-    });
-
     initializePopover(this.host, {
       ...facetInfo,
       hasValues: () => this.hasValues,

diff --git a/...nents/commerce/facets/atomic-commerce-timeframe-facet/atomic-commerce-timeframe-facet.tsx b/...nents/commerce/facets/atomic-commerce-timeframe-facet/atomic-commerce-timeframe-facet.tsx
@@ -62,7 +62,6 @@ export class AtomicCommerceTimeframeFacet
    */
   @Prop({reflect: true}) field?: string;
 
-  @BindStateToController('facet')
   @State()
   public facetState!: DateFacetState;
 
@@ -87,10 +86,17 @@ export class AtomicCommerceTimeframeFacet
     return this.headerFocus;
   }
 
+  private unsubscribeFacetController!: () => void;
+
   public initialize() {
-    if (!this.facetState) {
+    if (!this.facet) {
       return;
     }
+
+    this.unsubscribeFacetController = this.facet.subscribe(
+      () => (this.facetState = this.facet.state)
+    );
+
     this.registerFacetToStore();
   }
 
@@ -162,6 +168,7 @@ export class AtomicCommerceTimeframeFacet
     if (this.host.isConnected) {
       return;
     }
+    this.unsubscribeFacetController();
   }
 
   private get isHidden() {
@@ -181,11 +188,6 @@ export class AtomicCommerceTimeframeFacet
       isHidden: () => this.isHidden,
     };
 
-    this.bindings.store.registerFacet('dateFacets', {
-      ...facetInfo,
-      format: (value) => this.formatFacetValue(value),
-    });
-
     initializePopover(this.host, {
       ...facetInfo,
       hasValues: () => this.hasValues,

diff --git a/packages/atomic/src/pages/examples/commerce-website/cart.html b/packages/atomic/src/pages/examples/commerce-website/cart.html
@@ -42,7 +42,7 @@ <h1>Cart</h1>
             <atomic-layout-section section="main">
               <atomic-commerce-recommendation-list
                 id="cart_recommendations"
-                slot-id="52870f54-4edc-4767-b8b5-f126ff2de9bf"
+                slot-id="8a0ba6de-cecc-473c-a364-dab408d3cd54"
                 products-per-page="3"
               >
                 <atomic-product-template>

diff --git a/packages/atomic/src/pages/examples/commerce-website/homepage.html b/packages/atomic/src/pages/examples/commerce-website/homepage.html
@@ -42,7 +42,7 @@ <h1>HOMEPAGE</h1>
             <atomic-layout-section section="main">
               <atomic-commerce-recommendation-list
                 id="popular_bought"
-                slot-id="3216339b-f776-4cb1-8a21-018c8ec0f08c"
+                slot-id="52870f54-4edc-4767-b8b5-f126ff2de9bf"
                 products-per-page="3"
               >
                 <atomic-product-template>
@@ -70,9 +70,15 @@ <h1>HOMEPAGE</h1>
                   </template>
                 </atomic-product-template>
               </atomic-commerce-recommendation-list>
+            </atomic-layout-section>
+          </atomic-commerce-layout>
+        </atomic-commerce-recommendation-interface>
+        <atomic-commerce-recommendation-interface>
+          <atomic-commerce-layout>
+            <atomic-layout-section section="main">
               <atomic-commerce-recommendation-list
                 id="popular_viewed"
-                slot-id="36ed24b6-d7e0-4c32-8815-c456cc1928e7"
+                slot-id="abccdea4-7d8d-4d56-b593-20267083f88f"
                 products-per-page="3"
               >
               </atomic-commerce-recommendation-list>

diff --git a/packages/atomic/src/pages/examples/commerce-website/listing-pants.html b/packages/atomic/src/pages/examples/commerce-website/listing-pants.html
@@ -32,6 +32,7 @@ <h1>Pants</h1>
         ></atomic-layout-section>
         <atomic-layout-section section="main">
           <atomic-layout-section section="status">
+            <atomic-commerce-breadbox></atomic-commerce-breadbox>
             <atomic-commerce-query-summary></atomic-commerce-query-summary>
             <atomic-commerce-sort-dropdown></atomic-commerce-sort-dropdown>
             <atomic-commerce-refine-toggle></atomic-commerce-refine-toggle>