Merge branch 'master' into load-more-products-reactg

coveo · Jun 17, 2024 · 10819ad · 10819ad
2 parents eefcd49 + 1bfee6b
commit 10819ad
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 32 deletions.
diff --git a/packages/atomic/src/components.d.ts b/packages/atomic/src/components.d.ts
@@ -356,9 +356,9 @@ export namespace Components {
          */
         "initializeWithEngine": (engine: CommerceEngine) => Promise<void>;
         /**
-          * the commerce interface language.
+          * the commerce interface language.  Will default to the value set in the Headless engine context if not provided.
          */
-        "language": string;
+        "language"?: string;
         /**
           * The language assets path. By default, this will be a relative URL pointing to `./lang`.  Example: "/mypublicpath/languages"
          */
@@ -500,9 +500,9 @@ export namespace Components {
          */
         "initializeWithEngine": (engine: CommerceEngine) => Promise<void>;
         /**
-          * The commerce interface language.
+          * The commerce interface language.  Will default to the value set in the Headless engine context if not provided.
          */
-        "language": string;
+        "language"?: string;
         /**
           * The language assets path. By default, this will be a relative URL pointing to `./lang`.  Example: "/mypublicpath/languages"
          */
@@ -1901,10 +1901,6 @@ export namespace Components {
         "field": string;
     }
     interface AtomicProductPrice {
-        /**
-          * The currency to use in currency formatting. Allowed values are the [ISO 4217 currency codes](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency), such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB.
-         */
-        "currency": string;
     }
     /**
      * The `atomic-product-rating` element renders a star rating.
@@ -5760,7 +5756,7 @@ declare namespace LocalJSX {
          */
         "iconAssetsPath"?: string;
         /**
-          * the commerce interface language.
+          * the commerce interface language.  Will default to the value set in the Headless engine context if not provided.
          */
         "language"?: string;
         /**
@@ -5890,7 +5886,7 @@ declare namespace LocalJSX {
          */
         "iconAssetsPath"?: string;
         /**
-          * The commerce interface language.
+          * The commerce interface language.  Will default to the value set in the Headless engine context if not provided.
          */
         "language"?: string;
         /**
@@ -7218,10 +7214,6 @@ declare namespace LocalJSX {
         "field": string;
     }
     interface AtomicProductPrice {
-        /**
-          * The currency to use in currency formatting. Allowed values are the [ISO 4217 currency codes](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency), such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB.
-         */
-        "currency"?: string;
     }
     /**
      * The `atomic-product-rating` element renders a star rating.

diff --git a/...es/atomic/src/components/commerce/atomic-commerce-interface/atomic-commerce-interface.tsx b/...es/atomic/src/components/commerce/atomic-commerce-interface/atomic-commerce-interface.tsx
@@ -115,8 +115,10 @@ export class AtomicCommerceInterface
 
   /**
    * the commerce interface language.
+   *
+   * Will default to the value set in the Headless engine context if not provided.
    */
-  @Prop({reflect: true}) public language = 'en';
+  @Prop({reflect: true, mutable: true}) public language?: string;
 
   /**
    * The commerce interface headless engine.
@@ -209,6 +211,9 @@ export class AtomicCommerceInterface
     if (!this.commonInterfaceHelper.engineIsCreated(this.engine)) {
       return;
     }
+    if (!this.language) {
+      return;
+    }
 
     this.context.setLanguage(this.language);
     this.commonInterfaceHelper.onLanguageChange();
@@ -408,6 +413,12 @@ export class AtomicCommerceInterface
     this.context = buildContext(this.engine!);
   }
 
+  private initLanguage() {
+    if (!this.language) {
+      this.language = this.context.state.language;
+    }
+  }
+
   private updateHash() {
     const newFragment = this.urlManager.state.fragment;
 
@@ -433,6 +444,7 @@ export class AtomicCommerceInterface
     this.initSummary();
     this.initUrlManager();
     this.initContext();
+    this.initLanguage();
     this.initialized = true;
   }
 

diff --git a/...rce/atomic-commerce-recommendation-interface/atomic-commerce-recommendation-interface.tsx b/...rce/atomic-commerce-recommendation-interface/atomic-commerce-recommendation-interface.tsx
@@ -109,8 +109,10 @@ export class AtomicCommerceRecommendationInterface
 
   /**
    * The commerce interface language.
+   *
+   * Will default to the value set in the Headless engine context if not provided.
    */
-  @Prop({reflect: true}) public language = 'en';
+  @Prop({reflect: true, mutable: true}) public language?: string;
 
   /**
    * Whether to enable analytics.
@@ -157,6 +159,10 @@ export class AtomicCommerceRecommendationInterface
       return;
     }
 
+    if (!this.language) {
+      return;
+    }
+
     this.contextController.setLanguage(this.language);
 
     this.commonInterfaceHelper.onLanguageChange();
@@ -231,6 +237,12 @@ export class AtomicCommerceRecommendationInterface
     this.contextController = buildContext(this.bindings.engine);
   }
 
+  private initLanguage() {
+    if (!this.language) {
+      this.language = this.contextController.state.language;
+    }
+  }
+
   private initAriaLive() {
     if (
       Array.from(this.host.children).some(
@@ -245,6 +257,7 @@ export class AtomicCommerceRecommendationInterface
   private async internalInitialization(initEngine: () => void) {
     await this.commonInterfaceHelper.onInitialization(initEngine);
     this.initContext();
+    this.initLanguage();
   }
 
   private addResourceBundle(

diff --git a/...onents/commerce/product-template-components/atomic-product-price/atomic-product-price.tsx b/...onents/commerce/product-template-components/atomic-product-price/atomic-product-price.tsx
@@ -1,6 +1,12 @@
-import {Product} from '@coveo/headless/commerce';
-import {Component, h, Prop} from '@stencil/core';
 import {
+  buildContext,
+  Product,
+  Context,
+  ContextState,
+} from '@coveo/headless/commerce';
+import {Component, h} from '@stencil/core';
+import {
+  BindStateToController,
   InitializableComponent,
   InitializeBindings,
 } from '../../../../utils/initialization-utils';
@@ -22,35 +28,36 @@ export class AtomicProductPrice
   public error!: Error;
 
   @ProductContext() private product!: Product;
+  public context!: Context;
+  @BindStateToController('context') contextState!: ContextState;
 
-  /**
-   * The currency to use in currency formatting. Allowed values are the [ISO 4217 currency codes](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency), such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB.
-   */
-  @Prop({reflect: true}) public currency: string = 'USD';
+  public initialize(): void {
+    this.context = buildContext(this.bindings.engine);
+  }
 
   public render() {
     const hasPromotionalPrice =
       this.product?.ec_promo_price !== undefined &&
       this.product?.ec_price !== undefined &&
       this.product?.ec_promo_price < this.product?.ec_price;
 
+    const {currency} = this.contextState;
+
     return (
       <div class="flex flex-wrap">
         <atomic-product-numeric-field-value
           class={`truncate break-keep mx-1 ${hasPromotionalPrice && 'text-error'}`}
           field={hasPromotionalPrice ? 'ec_promo_price' : 'ec_price'}
         >
-          <atomic-format-currency
-            currency={this.currency}
-          ></atomic-format-currency>
+          <atomic-format-currency currency={currency}></atomic-format-currency>
         </atomic-product-numeric-field-value>
         {hasPromotionalPrice && (
           <atomic-product-numeric-field-value
             class="truncate break-keep mx-1 text-xl line-through"
             field="ec_price"
           >
             <atomic-format-currency
-              currency={this.currency}
+              currency={currency}
             ></atomic-format-currency>
           </atomic-product-numeric-field-value>
         )}

diff --git a/packages/atomic/src/components/common/interface/interface-common.tsx b/packages/atomic/src/components/common/interface/interface-common.tsx
@@ -23,7 +23,7 @@ export interface BaseAtomicInterface<EngineType extends AnyEngineType>
   languageAssetsPath: string;
   iconAssetsPath: string;
   logLevel?: LogLevel;
-  language: string;
+  language?: string;
   host: HTMLStencilElement;
   bindings: AnyBindings;
   error?: Error;
@@ -104,7 +104,7 @@ export class CommonAtomicInterfaceHelper<Engine extends AnyEngineType> {
     if (this.atomicInterface.registerFieldsToInclude) {
       this.atomicInterface.registerFieldsToInclude();
     }
-    loadDayjsLocale(this.atomicInterface.language);
+    loadDayjsLocale(this.language);
     await this.i18nPromise;
     this.initComponents();
   }
@@ -126,13 +126,13 @@ export class CommonAtomicInterfaceHelper<Engine extends AnyEngineType> {
   public onLanguageChange() {
     const {i18n, language} = this.atomicInterface;
 
-    loadDayjsLocale(language);
+    loadDayjsLocale(this.language);
     new Backend(i18n.services, i18nBackendOptions(this.atomicInterface)).read(
-      language,
+      this.language,
       i18nTranslationNamespace,
       (_: unknown, data: unknown) => {
         i18n.addResourceBundle(
-          language,
+          this.language,
           i18nTranslationNamespace,
           data,
           true,
@@ -164,4 +164,8 @@ export class CommonAtomicInterfaceHelper<Engine extends AnyEngineType> {
       event.detail(this.atomicInterface.bindings)
     );
   }
+
+  private get language() {
+    return this.atomicInterface.language || 'en';
+  }
 }
diff --git a/packages/samples/atomic-react/src/pages/CommerceSearchPage.tsx b/packages/samples/atomic-react/src/pages/CommerceSearchPage.tsx
@@ -125,7 +125,7 @@ function MyTemplate() {
         <AtomicProductRating field="ec_rating"></AtomicProductRating>
       </AtomicProductSectionMetadata>
       <AtomicProductSectionEmphasized>
-        <AtomicProductPrice currency="USD" />
+        <AtomicProductPrice />
       </AtomicProductSectionEmphasized>
       <AtomicProductSectionDescription>
         <AtomicProductDescription />