fix(atomic): use currency from context instead of prop for atomic-pro…

…duct-price (#4091) Remove `currency` as a property from `atomic-product-price`, as it it mandatory to configure it from Headless, and it should be the source of truth in all scenarios. https://coveord.atlassian.net/browse/KIT-3317
coveo · Jun 17, 2024 · 1bfee6b · 1bfee6b
1 parent fc4c312
commit 1bfee6b
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 19 deletions.
diff --git a/packages/atomic/src/components.d.ts b/packages/atomic/src/components.d.ts
@@ -1900,10 +1900,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.
@@ -7215,10 +7211,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/...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/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 />