@wix/headless-stores 0.0.108 → 0.0.109

package/cjs/dist/react/core/ProductListFilters.js

@@ -18,7 +18,7 @@ function getInventoryStatusLabel(status) {
             return String(status);
     }
 }
-function buildSearchFilterData(availableOptions, availableInventoryStatuses, availableMinPrice, availableMaxPrice) {
+function buildSearchFilterData(availableOptions, availableInventoryStatuses, availableMinPrice, availableMaxPrice, currency) {
     // Build consolidated filter options using search field names
     const filterOptions = [
         // Price range - use a logical key that maps to both min/max fields
@@ -28,7 +28,18 @@ function buildSearchFilterData(availableOptions, availableInventoryStatuses, ava
             type: 'range',
             displayType: 'range',
             validValues: [availableMinPrice, availableMaxPrice],
-            valueFormatter: (value) => `$${value}`,
+            valueFormatter: (value) => {
+                try {
+                    return new Intl.NumberFormat(undefined, {
+                        style: 'currency',
+                        currency,
+                    }).format(Number(value));
+                }
+                catch {
+                    // Fallback if currency code is invalid
+                    return `${currency} ${Number(value).toFixed(2)}`;
+                }
+            },
             fieldName: [
                 'actualPriceRange.minValue.amount',
                 'actualPriceRange.maxValue.amount',
@@ -148,12 +159,13 @@ function AllFilters(props) {
     const availableInventoryStatuses = listService.availableInventoryStatuses.get();
     const availableMinPrice = listService.minPrice.get();
     const availableMaxPrice = listService.maxPrice.get();
+    const currency = listService.currency.get();
     // Get filter state
     const resetFilters = listService.resetFilter;
     const isFiltered = listService.isFiltered().get();
     // Build filter options and handlers
     const searchFilterData = useMemo(() => {
-        const { filterOptions } = buildSearchFilterData(availableOptions, availableInventoryStatuses, availableMinPrice, availableMaxPrice);
+        const { filterOptions } = buildSearchFilterData(availableOptions, availableInventoryStatuses, availableMinPrice, availableMaxPrice, currency);
         const updateFilter = (newFilter) => {
             listService.setFilter(newFilter);
         };
@@ -169,6 +181,7 @@ function AllFilters(props) {
         availableInventoryStatuses,
         availableMinPrice,
         availableMaxPrice,
+        currency,
         currentFilter,
         resetFilters,
         isFiltered,

package/cjs/dist/services/product-service.js

@@ -229,6 +229,7 @@ export const ProductService = implementService.withConfig()(ProductServiceDefini
 const loadProductBySlug = async (slug) => {
     const productResponse = await productsV3.getProductBySlug(slug, {
         fields: [
+            'CURRENCY',
             'DESCRIPTION',
             'DIRECT_CATEGORIES_INFO',
             'BREADCRUMBS_INFO',

package/cjs/dist/services/products-list-service.d.ts

@@ -189,6 +189,8 @@ export declare const ProductsListServiceDefinition: string & {
         minPrice: Signal<number>;
         /** Reactive signal containing the maximum price of the products */
         maxPrice: Signal<number>;
+        /** Reactive signal containing the currency code from products */
+        currency: ReadOnlySignal<string>;
         /** Reactive signal containing the available inventory statuses */
         availableInventoryStatuses: Signal<InventoryStatusType[]>;
         /** Reactive signal containing the available product options */
@@ -227,6 +229,8 @@ export declare const ProductsListServiceDefinition: string & {
     minPrice: Signal<number>;
     /** Reactive signal containing the maximum price of the products */
     maxPrice: Signal<number>;
+    /** Reactive signal containing the currency code from products */
+    currency: ReadOnlySignal<string>;
     /** Reactive signal containing the available inventory statuses */
     availableInventoryStatuses: Signal<InventoryStatusType[]>;
     /** Reactive signal containing the available product options */
@@ -318,6 +322,8 @@ export declare const ProductListService: import("@wix/services-definitions").Ser
         minPrice: Signal<number>;
         /** Reactive signal containing the maximum price of the products */
         maxPrice: Signal<number>;
+        /** Reactive signal containing the currency code from products */
+        currency: ReadOnlySignal<string>;
         /** Reactive signal containing the available inventory statuses */
         availableInventoryStatuses: Signal<InventoryStatusType[]>;
         /** Reactive signal containing the available product options */
@@ -356,6 +362,8 @@ export declare const ProductListService: import("@wix/services-definitions").Ser
     minPrice: Signal<number>;
     /** Reactive signal containing the maximum price of the products */
     maxPrice: Signal<number>;
+    /** Reactive signal containing the currency code from products */
+    currency: ReadOnlySignal<string>;
     /** Reactive signal containing the available inventory statuses */
     availableInventoryStatuses: Signal<InventoryStatusType[]>;
     /** Reactive signal containing the available product options */

package/cjs/dist/services/products-list-service.js

@@ -160,7 +160,9 @@ export async function loadProductsListServiceConfig(input) {
  * @returns Promise that resolves to the search result with complete variant data
  */
 const fetchProducts = async (searchOptions) => {
-    const result = await productsV3.searchProducts(searchOptions);
+    const result = await productsV3.searchProducts(searchOptions, {
+        fields: [productsV3.RequestedFields.CURRENCY],
+    });
     // Fetch missing variants for all products in one batch request
     if (result.products) {
         result.products = await fetchMissingVariants(result.products);
@@ -192,7 +194,9 @@ const fetchMissingVariants = async (products) => {
         }
         const items = [];
         const res = await readOnlyVariantsV3
-            .queryVariants()
+            .queryVariants({
+            fields: [readOnlyVariantsV3.RequestedFields.CURRENCY],
+        })
             .in('productData.productId', productIds)
             .limit(DEFAULT_QUERY_LIMIT)
             .find();
@@ -311,6 +315,11 @@ export const ProductListService = implementService.withConfig()(ProductsListServ
         InventoryStatusType.PARTIALLY_OUT_OF_STOCK,
     ]);
     const aggregationsSignal = signalsService.signal(config.aggregations);
+    // Extract currency from the first product, fallback to USD
+    const currencySignal = signalsService.computed(() => {
+        const products = productsSignal.get();
+        return products[0]?.currency || 'USD';
+    });
     const isLoadingSignal = signalsService.signal(false);
     const errorSignal = signalsService.signal(null);
     if (typeof window !== 'undefined') {
@@ -367,6 +376,7 @@ export const ProductListService = implementService.withConfig()(ProductsListServ
         /* Metadata for products list */
         minPrice: minPriceSignal,
         maxPrice: maxPriceSignal,
+        currency: currencySignal,
         availableInventoryStatuses: availableInventoryStatusesSignal,
         availableProductOptions: availableProductOptionsSignal,
         /* End of Metadata for products list */

package/cjs/dist/services/selected-variant-service.js

@@ -213,42 +213,29 @@ export const SelectedVariantService = implementService.withConfig()(SelectedVari
     const currentPrice = signalsService.computed(() => {
         const variant = currentVariant.get();
         const prod = v3Product.get();
-        // Try to get formatted amount first (if fields worked)
-        if (variant?.price?.actualPrice?.formattedAmount) {
-            return variant.price.actualPrice.formattedAmount;
-        }
-        if (prod?.actualPriceRange?.minValue?.formattedAmount) {
-            return prod.actualPriceRange.minValue.formattedAmount;
-        }
-        // Fallback: create our own formatted price from amount
-        let rawAmount = null;
-        if (variant?.price?.actualPrice?.amount) {
-            rawAmount = variant.price.actualPrice.amount;
-        }
-        else if (prod?.actualPriceRange?.minValue?.amount) {
-            rawAmount = prod.actualPriceRange.minValue.amount;
-        }
-        return rawAmount ? `$${rawAmount}` : '';
+        // Use formatted amount from variant or product
+        // Note: formattedAmount is returned when CURRENCY field is requested from the API
+        return (variant?.price?.actualPrice?.formattedAmount ||
+            prod?.actualPriceRange?.minValue?.formattedAmount ||
+            variant?.price?.actualPrice?.amount ||
+            prod?.actualPriceRange?.minValue?.amount ||
+            '');
     });
     const currentCompareAtPrice = signalsService.computed(() => {
         const variant = currentVariant.get();
         const prod = v3Product.get();
-        // Try to get formatted compare-at price first
-        if (variant?.price?.compareAtPrice?.formattedAmount) {
-            return variant.price.compareAtPrice.formattedAmount;
-        }
-        if (prod?.compareAtPriceRange?.minValue?.formattedAmount) {
-            return prod.compareAtPriceRange.minValue.formattedAmount;
-        }
-        // Fallback: create our own formatted price from amount
-        let rawAmount = null;
-        if (variant?.price?.compareAtPrice?.amount) {
-            rawAmount = variant.price.compareAtPrice.amount;
+        // Check variant compare-at price - validate amount first, then use formatted if available
+        // Note: formattedAmount is returned when CURRENCY field is requested from the API
+        const variantCompareAt = variant?.price?.compareAtPrice;
+        if (variantCompareAt?.amount && Number(variantCompareAt.amount) > 0) {
+            return variantCompareAt.formattedAmount || variantCompareAt.amount;
         }
-        else if (prod?.compareAtPriceRange?.minValue?.amount) {
-            rawAmount = prod.compareAtPriceRange.minValue.amount;
+        // Check product compare-at price range - validate amount first, then use formatted if available
+        const productCompareAt = prod?.compareAtPriceRange?.minValue;
+        if (productCompareAt?.amount && Number(productCompareAt.amount) > 0) {
+            return productCompareAt.formattedAmount || productCompareAt.amount;
         }
-        return rawAmount && rawAmount !== '0' ? `$${rawAmount}` : null;
+        return null;
     });
     const isInStock = signalsService.computed(() => {
         const variant = currentVariant.get();

package/dist/react/core/ProductListFilters.js

@@ -18,7 +18,7 @@ function getInventoryStatusLabel(status) {
             return String(status);
     }
 }
-function buildSearchFilterData(availableOptions, availableInventoryStatuses, availableMinPrice, availableMaxPrice) {
+function buildSearchFilterData(availableOptions, availableInventoryStatuses, availableMinPrice, availableMaxPrice, currency) {
     // Build consolidated filter options using search field names
     const filterOptions = [
         // Price range - use a logical key that maps to both min/max fields
@@ -28,7 +28,18 @@ function buildSearchFilterData(availableOptions, availableInventoryStatuses, ava
             type: 'range',
             displayType: 'range',
             validValues: [availableMinPrice, availableMaxPrice],
-            valueFormatter: (value) => `$${value}`,
+            valueFormatter: (value) => {
+                try {
+                    return new Intl.NumberFormat(undefined, {
+                        style: 'currency',
+                        currency,
+                    }).format(Number(value));
+                }
+                catch {
+                    // Fallback if currency code is invalid
+                    return `${currency} ${Number(value).toFixed(2)}`;
+                }
+            },
             fieldName: [
                 'actualPriceRange.minValue.amount',
                 'actualPriceRange.maxValue.amount',
@@ -148,12 +159,13 @@ function AllFilters(props) {
     const availableInventoryStatuses = listService.availableInventoryStatuses.get();
     const availableMinPrice = listService.minPrice.get();
     const availableMaxPrice = listService.maxPrice.get();
+    const currency = listService.currency.get();
     // Get filter state
     const resetFilters = listService.resetFilter;
     const isFiltered = listService.isFiltered().get();
     // Build filter options and handlers
     const searchFilterData = useMemo(() => {
-        const { filterOptions } = buildSearchFilterData(availableOptions, availableInventoryStatuses, availableMinPrice, availableMaxPrice);
+        const { filterOptions } = buildSearchFilterData(availableOptions, availableInventoryStatuses, availableMinPrice, availableMaxPrice, currency);
         const updateFilter = (newFilter) => {
             listService.setFilter(newFilter);
         };
@@ -169,6 +181,7 @@ function AllFilters(props) {
         availableInventoryStatuses,
         availableMinPrice,
         availableMaxPrice,
+        currency,
         currentFilter,
         resetFilters,
         isFiltered,

package/dist/services/product-service.js

@@ -229,6 +229,7 @@ export const ProductService = implementService.withConfig()(ProductServiceDefini
 const loadProductBySlug = async (slug) => {
     const productResponse = await productsV3.getProductBySlug(slug, {
         fields: [
+            'CURRENCY',
             'DESCRIPTION',
             'DIRECT_CATEGORIES_INFO',
             'BREADCRUMBS_INFO',

package/dist/services/products-list-service.d.ts

@@ -189,6 +189,8 @@ export declare const ProductsListServiceDefinition: string & {
         minPrice: Signal<number>;
         /** Reactive signal containing the maximum price of the products */
         maxPrice: Signal<number>;
+        /** Reactive signal containing the currency code from products */
+        currency: ReadOnlySignal<string>;
         /** Reactive signal containing the available inventory statuses */
         availableInventoryStatuses: Signal<InventoryStatusType[]>;
         /** Reactive signal containing the available product options */
@@ -227,6 +229,8 @@ export declare const ProductsListServiceDefinition: string & {
     minPrice: Signal<number>;
     /** Reactive signal containing the maximum price of the products */
     maxPrice: Signal<number>;
+    /** Reactive signal containing the currency code from products */
+    currency: ReadOnlySignal<string>;
     /** Reactive signal containing the available inventory statuses */
     availableInventoryStatuses: Signal<InventoryStatusType[]>;
     /** Reactive signal containing the available product options */
@@ -318,6 +322,8 @@ export declare const ProductListService: import("@wix/services-definitions").Ser
         minPrice: Signal<number>;
         /** Reactive signal containing the maximum price of the products */
         maxPrice: Signal<number>;
+        /** Reactive signal containing the currency code from products */
+        currency: ReadOnlySignal<string>;
         /** Reactive signal containing the available inventory statuses */
         availableInventoryStatuses: Signal<InventoryStatusType[]>;
         /** Reactive signal containing the available product options */
@@ -356,6 +362,8 @@ export declare const ProductListService: import("@wix/services-definitions").Ser
     minPrice: Signal<number>;
     /** Reactive signal containing the maximum price of the products */
     maxPrice: Signal<number>;
+    /** Reactive signal containing the currency code from products */
+    currency: ReadOnlySignal<string>;
     /** Reactive signal containing the available inventory statuses */
     availableInventoryStatuses: Signal<InventoryStatusType[]>;
     /** Reactive signal containing the available product options */

package/dist/services/products-list-service.js

@@ -160,7 +160,9 @@ export async function loadProductsListServiceConfig(input) {
  * @returns Promise that resolves to the search result with complete variant data
  */
 const fetchProducts = async (searchOptions) => {
-    const result = await productsV3.searchProducts(searchOptions);
+    const result = await productsV3.searchProducts(searchOptions, {
+        fields: [productsV3.RequestedFields.CURRENCY],
+    });
     // Fetch missing variants for all products in one batch request
     if (result.products) {
         result.products = await fetchMissingVariants(result.products);
@@ -192,7 +194,9 @@ const fetchMissingVariants = async (products) => {
         }
         const items = [];
         const res = await readOnlyVariantsV3
-            .queryVariants()
+            .queryVariants({
+            fields: [readOnlyVariantsV3.RequestedFields.CURRENCY],
+        })
             .in('productData.productId', productIds)
             .limit(DEFAULT_QUERY_LIMIT)
             .find();
@@ -311,6 +315,11 @@ export const ProductListService = implementService.withConfig()(ProductsListServ
         InventoryStatusType.PARTIALLY_OUT_OF_STOCK,
     ]);
     const aggregationsSignal = signalsService.signal(config.aggregations);
+    // Extract currency from the first product, fallback to USD
+    const currencySignal = signalsService.computed(() => {
+        const products = productsSignal.get();
+        return products[0]?.currency || 'USD';
+    });
     const isLoadingSignal = signalsService.signal(false);
     const errorSignal = signalsService.signal(null);
     if (typeof window !== 'undefined') {
@@ -367,6 +376,7 @@ export const ProductListService = implementService.withConfig()(ProductsListServ
         /* Metadata for products list */
         minPrice: minPriceSignal,
         maxPrice: maxPriceSignal,
+        currency: currencySignal,
         availableInventoryStatuses: availableInventoryStatusesSignal,
         availableProductOptions: availableProductOptionsSignal,
         /* End of Metadata for products list */

package/dist/services/selected-variant-service.js

@@ -213,42 +213,29 @@ export const SelectedVariantService = implementService.withConfig()(SelectedVari
     const currentPrice = signalsService.computed(() => {
         const variant = currentVariant.get();
         const prod = v3Product.get();
-        // Try to get formatted amount first (if fields worked)
-        if (variant?.price?.actualPrice?.formattedAmount) {
-            return variant.price.actualPrice.formattedAmount;
-        }
-        if (prod?.actualPriceRange?.minValue?.formattedAmount) {
-            return prod.actualPriceRange.minValue.formattedAmount;
-        }
-        // Fallback: create our own formatted price from amount
-        let rawAmount = null;
-        if (variant?.price?.actualPrice?.amount) {
-            rawAmount = variant.price.actualPrice.amount;
-        }
-        else if (prod?.actualPriceRange?.minValue?.amount) {
-            rawAmount = prod.actualPriceRange.minValue.amount;
-        }
-        return rawAmount ? `$${rawAmount}` : '';
+        // Use formatted amount from variant or product
+        // Note: formattedAmount is returned when CURRENCY field is requested from the API
+        return (variant?.price?.actualPrice?.formattedAmount ||
+            prod?.actualPriceRange?.minValue?.formattedAmount ||
+            variant?.price?.actualPrice?.amount ||
+            prod?.actualPriceRange?.minValue?.amount ||
+            '');
     });
     const currentCompareAtPrice = signalsService.computed(() => {
         const variant = currentVariant.get();
         const prod = v3Product.get();
-        // Try to get formatted compare-at price first
-        if (variant?.price?.compareAtPrice?.formattedAmount) {
-            return variant.price.compareAtPrice.formattedAmount;
-        }
-        if (prod?.compareAtPriceRange?.minValue?.formattedAmount) {
-            return prod.compareAtPriceRange.minValue.formattedAmount;
-        }
-        // Fallback: create our own formatted price from amount
-        let rawAmount = null;
-        if (variant?.price?.compareAtPrice?.amount) {
-            rawAmount = variant.price.compareAtPrice.amount;
+        // Check variant compare-at price - validate amount first, then use formatted if available
+        // Note: formattedAmount is returned when CURRENCY field is requested from the API
+        const variantCompareAt = variant?.price?.compareAtPrice;
+        if (variantCompareAt?.amount && Number(variantCompareAt.amount) > 0) {
+            return variantCompareAt.formattedAmount || variantCompareAt.amount;
         }
-        else if (prod?.compareAtPriceRange?.minValue?.amount) {
-            rawAmount = prod.compareAtPriceRange.minValue.amount;
+        // Check product compare-at price range - validate amount first, then use formatted if available
+        const productCompareAt = prod?.compareAtPriceRange?.minValue;
+        if (productCompareAt?.amount && Number(productCompareAt.amount) > 0) {
+            return productCompareAt.formattedAmount || productCompareAt.amount;
         }
-        return rawAmount && rawAmount !== '0' ? `$${rawAmount}` : null;
+        return null;
     });
     const isInStock = signalsService.computed(() => {
         const variant = currentVariant.get();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-stores",
-  "version": "0.0.108",
+  "version": "0.0.109",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -84,5 +84,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "7013cd7c1973422f48cae8374b85a9de720206371b13ba3f0a1cee21"
+  "falconPackageHash": "3d07adc0e9bdf4773a8183a89ef8dc5763762f312cb9ff8d53994733"
 }