@adobe-commerce/elsie 1.6.0-alpha1 → 1.6.0-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.6.0-alpha1",
+  "version": "1.6.0-alpha3",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {
@@ -27,8 +27,8 @@
   },
   "devDependencies": {
     "@adobe-commerce/event-bus": "~1.0.1",
-    "@adobe-commerce/fetch-graphql": "1.2.0-beta1",
-    "@adobe-commerce/recaptcha": "1.0.2-beta1",
+    "@adobe-commerce/fetch-graphql": "~1.2.0",
+    "@adobe-commerce/recaptcha": "~1.0.2",
     "@adobe-commerce/storefront-design": "~1.0.0",
     "@dropins/build-tools": "~1.0.1",
     "preact": "~10.22.1",

package/src/components/Field/Field.tsx

@@ -8,7 +8,7 @@
  *******************************************************************/
 
 import '@adobe-commerce/elsie/components/Field/Field.css';
-import { classes } from '@adobe-commerce/elsie/lib';
+import { classes, VComponent } from '@adobe-commerce/elsie/lib';
 import { FunctionComponent, VNode } from 'preact';
 import { HTMLAttributes } from 'preact/compat';
 
@@ -36,8 +36,23 @@ export const Field: FunctionComponent<FieldProps> = ({
 }) => {
   const id =
     children?.props?.id ?? `dropin-field-${Math.random().toString(36)}`;
-  const ChildComponent =
-    children && typeof children.type !== 'string' ? children.type : null;
+
+  let fieldContent: VNode | string | null = null;
+
+  if (children && typeof children !== 'string') {
+      fieldContent = (
+        <VComponent
+          node={children}
+          id={id}
+          key={children.key}
+          disabled={disabled}
+          size={size}
+          error={!!error}
+          success={!!success && !error}
+        />
+      );
+  }
+
 
   return (
     <div {...props} className={classes(['dropin-field', className])}>
@@ -55,17 +70,7 @@ export const Field: FunctionComponent<FieldProps> = ({
       )}
 
       <div className={classes(['dropin-field__content'])}>
-        {ChildComponent && children && (
-          <ChildComponent
-            {...children.props}
-            id={id}
-            key={children.key}
-            disabled={disabled}
-            size={size}
-            error={!!error}
-            success={!!success && !error}
-          />
-        )}
+        {fieldContent}
       </div>
 
       <div

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/aem/configs.ts

@@ -23,6 +23,7 @@ interface Config {
 
 // Private state
 let config: Config | null = null;
+let options: { match?: (key: string) => boolean } | null = null;
 let rootPath: string | null = null;
 let rootConfig: ConfigRoot | null = null;
 
@@ -31,6 +32,7 @@ let rootConfig: ConfigRoot | null = null;
  */
 function resetConfig() {
   config = null;
+  options = null;
   rootPath = null;
   rootConfig = null;
 }
@@ -40,7 +42,7 @@ function resetConfig() {
  * @param {Object} [configObj=config] - The config object.
  * @returns {string} - The root path.
  */
-function getRootPath(configObj: Config | null = config, options?: { match?: (key: string) => boolean }): string {
+function getRootPath(configObj: Config | null = config, optionsObj: { match?: (key: string) => boolean } | null = options): string {
   if (!configObj) {
     console.warn('No config found. Please call initializeConfig() first.');
     return '/';
@@ -56,7 +58,7 @@ function getRootPath(configObj: Config | null = config, options?: { match?: (key
     .find(
       (key) =>
         window.location.pathname === key ||
-        (options?.match?.(key) ?? window.location.pathname.startsWith(key))
+        (optionsObj?.match?.(key) ?? window.location.pathname.startsWith(key))
     );
 
   return value ?? '/';
@@ -131,9 +133,10 @@ function applyConfigOverrides(
  * @param {Function} [options.match] - The function to match the path to the config.
  * @returns {Object} The initialized root configuration
  */
-function initializeConfig(configObj: Config, options?: { match?: (key: string) => boolean }): ConfigRoot {
+function initializeConfig(configObj: Config, optionsObj?: { match?: (key: string) => boolean }): ConfigRoot {
   config = configObj;
-  rootPath = getRootPath(config, { match: options?.match });
+  options = optionsObj ?? null;
+  rootPath = getRootPath(config, { match: optionsObj?.match });
   rootConfig = applyConfigOverrides(config, rootPath);
   return rootConfig;
 }

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