@adobe-commerce/elsie 1.6.0-alpha2 → 1.6.0-alpha4

package/package.json

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

package/src/components/Price/Price.tsx

@@ -2,14 +2,14 @@
  *  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. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 import { FunctionComponent } from 'preact';
 import { HTMLAttributes, useMemo } from 'preact/compat';
-import { classes, getGlobalLocale } from '@adobe-commerce/elsie/lib';
+import { classes, getPriceFormatter } from '@adobe-commerce/elsie/lib';
 import '@adobe-commerce/elsie/components/Price/Price.css';
 
 export interface PriceProps
@@ -39,43 +39,10 @@ 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(
-    () => {
-      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,
-      }
-      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(
-    () => formatter.format(amount),
-    [amount, formatter]
-  );
+  const formattedAmount = useMemo(() => {
+    const formatter = getPriceFormatter({ currency, locale, formatOptions });
+    return formatter.format(amount);
+  }, [amount, currency, locale, formatOptions]);
 
   return (
     <span

package/src/lib/get-price-formatter.ts

@@ -0,0 +1,69 @@
+/********************************************************************
+ *  Copyright 2025 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.
+ *******************************************************************/
+
+import { getGlobalLocale } from '@adobe-commerce/elsie/lib';
+
+export interface PriceFormatterOptions {
+  currency?: string | null;
+  locale?: string;
+  formatOptions?: Intl.NumberFormatOptions;
+}
+
+/**
+ * Determines the effective locale to use for price formatting
+ * Priority: prop locale > global locale > browser locale > default 'en-US'
+ */
+export function getEffectiveLocale(locale?: string): string {
+  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';
+}
+
+/**
+ * Gets an Intl.NumberFormat instance for price formatting
+ * Uses getEffectiveLocale internally to determine the best locale
+ *
+ * @example
+ * // Single price formatting
+ * const formatter = getPriceFormatter({ currency: 'USD', locale: 'en-US' });
+ * const price = formatter.format(10.99); // "$10.99"
+ *
+ * @example
+ * // Bulk price formatting (more efficient)
+ * const formatter = getPriceFormatter({ currency: 'EUR', locale: 'fr-FR' });
+ * const prices = [10.99, 25.50, 99.99].map(amount => formatter.format(amount));
+ */
+export function getPriceFormatter(
+  options: PriceFormatterOptions = {}
+): Intl.NumberFormat {
+  const { currency, locale, formatOptions = {} } = options;
+  const effectiveLocale = getEffectiveLocale(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,
+  };
+
+  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);
+  }
+}

package/src/lib/index.ts

@@ -2,9 +2,9 @@
  *  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. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 export * from '@adobe-commerce/elsie/lib/form-values';
@@ -25,3 +25,4 @@ export * from '@adobe-commerce/elsie/lib/is-number';
 export * from '@adobe-commerce/elsie/lib/deviceUtils';
 export * from '@adobe-commerce/elsie/lib/get-path-value';
 export * from '@adobe-commerce/elsie/lib/get-cookie';
+export * from '@adobe-commerce/elsie/lib/get-price-formatter';