@adobe-commerce/elsie 1.4.0-beta2 → 1.4.0-beta3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.4.0-beta2",
+  "version": "1.4.0-beta3",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {

package/src/components/Price/Price.tsx

@@ -9,13 +9,13 @@
 
 import { FunctionComponent } from 'preact';
 import { HTMLAttributes, useMemo } from 'preact/compat';
-import { classes } from '@adobe-commerce/elsie/lib';
+import { classes, getGlobalLocale } from '@adobe-commerce/elsie/lib';
 import '@adobe-commerce/elsie/components/Price/Price.css';
 
 export interface PriceProps
   extends Omit<HTMLAttributes<HTMLSpanElement>, 'size'> {
   amount?: number;
-  currency?: string;
+  currency?: string | null;
   locale?: string;
   formatOptions?: {
     [key: string]: any;
@@ -29,7 +29,7 @@ export interface PriceProps
 export const Price: FunctionComponent<PriceProps> = ({
   amount = 0,
   currency,
-  locale = process.env.LOCALE ?? undefined,
+  locale,
   variant = 'default',
   weight = 'bold',
   className,
@@ -39,17 +39,37 @@ export const Price: FunctionComponent<PriceProps> = ({
   size = 'small',
   ...props
 }) => {
+  // Determine the locale to use: prop locale > global locale > browser locale
+  const effectiveLocale = useMemo(() => {
+    if (locale) {
+      return locale;
+    }
+    const globalLocale = getGlobalLocale();
+    if (globalLocale) {
+      return globalLocale;
+    }
+    // Fallback to browser locale or default
+    return process.env.LOCALE && process.env.LOCALE !== 'undefined' ? process.env.LOCALE : 'en-US';
+  }, [locale]);
+
   const formatter = useMemo(
-    () =>
-      new Intl.NumberFormat(locale, {
+    () => {
+      const params: Intl.NumberFormatOptions = {
         style: 'currency',
         currency: currency || 'USD',
         // These options are needed to round to whole numbers if that's what you want.
         minimumFractionDigits: 2, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1)
         maximumFractionDigits: 2, // (causes 2500.99 to be printed as $2,501)
         ...formatOptions,
-      }),
-    [locale, currency, formatOptions]
+      }
+      try {
+        return new Intl.NumberFormat(effectiveLocale, params);
+      } catch (error) {
+        console.error(`Error creating Intl.NumberFormat instance for locale ${effectiveLocale}. Falling back to en-US.`, error);
+        return new Intl.NumberFormat('en-US', params);
+      }
+    },
+    [effectiveLocale, currency, formatOptions]
   );
 
   const formattedAmount = useMemo(

package/src/docs/API/initializer.mdx

@@ -81,13 +81,9 @@ initializers.setImageParamKeys({
   extraParam: () => ['extraParam', 'extraValue'],
 });
 
-// Register Initializers
-initializers.register(pkg.initialize, {
-  langDefinitions,
+initializers.mountImmediately(pkg.initialize, {
+  langDefinitions
 });
-
-// Mount Initializers
-initializers.mount();
 ```
 
 Now, when a dropin uses the Image component to render an image with a width of 300 pixels and quality value of 0.8:
@@ -116,4 +112,70 @@ It renders the following image element:
 />
 ```
 
-In this example, the width parameter is mapped to imgWidth and the value of the quality parameter is modified and mapped to imgQuality.
+In this example, the width parameter is mapped to imgWidth and the value of the quality parameter is modified and mapped to imgQuality.
+
+## `setGlobalLocale(locale)`
+
+The `setGlobalLocale` method is part of the initializers module in the `@dropins/tools` package.
+It allows you to set a global locale for all drop-ins that use locale-sensitive components like the Price component.
+
+### Default Behavior
+
+By default, components use the browser's locale or fallback to 'en-US' if no global locale is set.
+
+### Parameters
+
+- `locale` - `string` - The locale string (e.g., 'en-US', 'es-MX', 'fr-FR', 'de-DE').
+
+### Functionality
+
+- If a global locale is set via `setGlobalLocale`, it will be used by components that support locale configuration.
+- Component-specific locale props will take precedence over the global locale.
+- If no global locale is set, components will fall back to the browser's locale or a default locale.
+
+### Usage
+
+Call the `setGlobalLocale()` function before the `mountImmediately()` function in the application layer.
+
+```javascript
+// Set global locale for consistent formatting across all drop-ins
+initializers.setGlobalLocale('fr-FR');
+
+// Register and Mount Initializers immediately
+initializers.mountImmediately(pkg.initialize, {});
+```
+
+Now, when a dropin uses the Price component without specifying a locale prop:
+
+```jsx
+<Price
+  amount={100}
+  currency="EUR"
+/>
+```
+
+It will render with the global locale (fr-FR) formatting:
+
+```html
+<span class="dropin-price dropin-price--default dropin-price--small dropin-price--bold">
+  100,00 €
+</span>
+```
+
+If the same component is used with a specific locale prop, that will take precedence:
+
+```jsx
+<Price
+  amount={100}
+  currency="EUR"
+  locale="en-US"
+/>
+```
+
+It will render with the specified locale (en-US) formatting:
+
+```html
+<span class="dropin-price dropin-price--default dropin-price--small dropin-price--bold">
+  €100.00
+</span>
+```

package/src/lib/index.ts

@@ -20,6 +20,7 @@ export * from '@adobe-commerce/elsie/lib/types';
 export * from '@adobe-commerce/elsie/lib/slot';
 export * from '@adobe-commerce/elsie/lib/vcomponent';
 export * from '@adobe-commerce/elsie/lib/image-params-keymap';
+export * from '@adobe-commerce/elsie/lib/locale-config';
 export * from '@adobe-commerce/elsie/lib/is-number';
 export * from '@adobe-commerce/elsie/lib/deviceUtils';
 export * from '@adobe-commerce/elsie/lib/get-path-value';

package/src/lib/initializer.ts

@@ -10,6 +10,7 @@
 import {
   Config,
   setImageParamsKeyMap,
+  setGlobalLocale,
 } from '@adobe-commerce/elsie/lib';
 
 type Listener = { off(): void };
@@ -51,10 +52,11 @@ export class Initializer<T> {
     };
 
     this.init = (options) => {
-      const { imageParamsKeyMap, ...rest } =
+      const { imageParamsKeyMap, globalLocale, ...rest } =
         options as any;
       this.config.setConfig({ ...this.config.getConfig(), ...rest });
       setImageParamsKeyMap(imageParamsKeyMap);
+      setGlobalLocale(globalLocale);
       return init(options);
     };
   }
@@ -75,6 +77,7 @@ export class initializers {
   static _initializers: Initializers = [];
   static _mounted: boolean = false;
   static _imageParamsKeyMap: { [key: string]: string } | undefined = undefined;
+  static _globalLocale: string | undefined = undefined;
   /**
    * Registers a new initializer. If the initializers have already been mounted,it immediately binds the event listeners and initializes the API for the new initializer.
    * @param initializer - The initializer to register.
@@ -99,10 +102,11 @@ export class initializers {
     options?: { [key: string]: any }
   ) {
     initializer.listeners?.(options);
-    await initializer.init?.({
-      imageParamsKeyMap: initializers._imageParamsKeyMap,
-      ...options,
-    });
+          await initializer.init?.({
+        imageParamsKeyMap: initializers._imageParamsKeyMap,
+        globalLocale: initializers._globalLocale,
+        ...options,
+      });
   }
 
   /**
@@ -120,6 +124,7 @@ export class initializers {
     initializers._initializers?.forEach(([initializer, options]) => {
       initializer.init?.({
         imageParamsKeyMap: initializers._imageParamsKeyMap,
+        globalLocale: initializers._globalLocale,
         ...options,
       });
     });
@@ -131,4 +136,12 @@ export class initializers {
   static setImageParamKeys(params: { [key: string]: any }) {
     initializers._imageParamsKeyMap = params;
   }
+
+  /**
+   * Sets the global locale. This locale is used by components that need consistent formatting regardless of the user's browser locale.
+   * @param locale - The locale string (e.g., 'en-US', 'es-MX', 'fr-FR').
+   */
+  static setGlobalLocale(locale: string) {
+    initializers._globalLocale = locale;
+  }
 }

package/src/lib/locale-config.ts

@@ -0,0 +1,34 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+class LocaleConfig {
+  private _locale?: string | undefined;
+
+  get locale() {
+    return this._locale;
+  }
+
+  set locale(value: typeof this._locale) {
+    this._locale = value;
+  }
+
+  public getMethods() {
+    return {
+      setLocale: (value: typeof this._locale) => {
+        this.locale = value;
+      },
+      getLocale: () => this.locale,
+    };
+  }
+}
+
+const localeConfig = new LocaleConfig();
+
+export const { setLocale: setGlobalLocale, getLocale: getGlobalLocale } =
+  localeConfig.getMethods();