fix(atomic): fallback language to commerce engine value instead of al…

…ways defaulting to english (#4094)

* Remove the default `@Prop` value for `language` in
`atomic-commerce-interface` and
`atomic-commerce-recommendation-interface`. Instead fallback on the
value set in commerce engine.

* Modify `CommonAtomicInterfaceHelper` so that `language` is an optional
property, and add the fallback to `en` there instead (ie: limit the
amount of code changes for other types of interfaces that are not
commerce).


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

---------

Co-authored-by: GitHub Actions Bot <>

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"
          */
@@ -499,9 +499,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"
          */
@@ -5758,7 +5758,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;
         /**
@@ -5887,7 +5887,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;
         /**

packages/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;
   }
 

packages/atomic/src/components/commerce/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(

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';
+  }
 }