@sonic-equipment/ui 147.0.0 → 149.0.0

package/dist/intl/types.js

@@ -3,6 +3,11 @@ function isCountryCode(value) {
         return false;
     return /^[A-Z]{2}$/.test(value);
 }
+function isCurrencyCode(value) {
+    if (typeof value !== 'string')
+        return false;
+    return /^[A-Z]{3}$/.test(value);
+}
 function isLanguageCode(value) {
     if (typeof value !== 'string')
         return false;
@@ -14,4 +19,4 @@ function isCultureCode(value) {
     return /^[a-z]{2}-[A-Z]{2}$/.test(value);
 }
 
-export { isCountryCode, isCultureCode, isLanguageCode };
+export { isCountryCode, isCultureCode, isCurrencyCode, isLanguageCode };

package/dist/intl/use-country-code.d.ts

@@ -0,0 +1,3 @@
+import { UpdateCountryCode } from './intl-context';
+export declare function useCountryCode(): string;
+export declare function useUpdateCountryCode(): UpdateCountryCode;

package/dist/intl/use-country-code.js

@@ -0,0 +1,15 @@
+"use client";
+import { useIntl } from './use-intl.js';
+
+function useCountryCode() {
+    const { countryCode } = useIntl();
+    return countryCode;
+}
+function useUpdateCountryCode() {
+    const { updateCountryCode } = useIntl();
+    if (!updateCountryCode)
+        throw new Error('updateCountryCode is not defined');
+    return updateCountryCode;
+}
+
+export { useCountryCode, useUpdateCountryCode };

package/dist/intl/use-culture-code.d.ts

@@ -1,3 +1,4 @@
+import { UpdateCultureCode } from './intl-context';
 import { CultureCode } from './types';
 export declare function useCultureCode(): CultureCode;
-export declare function useUpdateCultureCode(): (cultureCode: CultureCode) => void;
+export declare function useUpdateCultureCode(): UpdateCultureCode;

package/dist/intl/use-culture-code.js

@@ -1,13 +1,14 @@
 "use client";
-import { useContext } from 'react';
-import { IntlContext } from './intl-context.js';
+import { useIntl } from './use-intl.js';
 
 function useCultureCode() {
-    const { cultureCode } = useContext(IntlContext);
+    const { cultureCode } = useIntl();
     return cultureCode;
 }
 function useUpdateCultureCode() {
-    const { updateCultureCode } = useContext(IntlContext);
+    const { updateCultureCode } = useIntl();
+    if (!updateCultureCode)
+        throw new Error('updateCultureCode is not defined');
     return updateCultureCode;
 }
 

package/dist/intl/use-currency-code.d.ts

@@ -0,0 +1,4 @@
+import { UpdateCurrencyCode } from './intl-context';
+import { CurrencyCode } from './types';
+export declare function useCurrencyCode(): CurrencyCode;
+export declare function useUpdateCurrencyCode(): UpdateCurrencyCode;

package/dist/intl/use-currency-code.js

@@ -0,0 +1,15 @@
+"use client";
+import { useIntl } from './use-intl.js';
+
+function useCurrencyCode() {
+    const { currencyCode } = useIntl();
+    return currencyCode;
+}
+function useUpdateCurrencyCode() {
+    const { updateCurrencyCode } = useIntl();
+    if (!updateCurrencyCode)
+        throw new Error('updateCurrencyCode is not defined');
+    return updateCurrencyCode;
+}
+
+export { useCurrencyCode, useUpdateCurrencyCode };

package/dist/intl/use-formatted-message.js

@@ -1,9 +1,8 @@
 "use client";
-import { useContext } from 'react';
-import { IntlContext } from './intl-context.js';
+import { useIntl } from './use-intl.js';
 
 function useFormattedMessage() {
-    const { formattedMessage } = useContext(IntlContext);
+    const { formattedMessage } = useIntl();
     const formatFunction = (id, options) => formattedMessage(id, options);
     function pluralize(translationIdOrPrefix, translationIdOrCount, count) {
         return formatFunction((typeof translationIdOrCount === 'number'

package/dist/intl/use-intl.d.ts

@@ -0,0 +1 @@
+export declare function useIntl(): import("./intl-context").IntlContextType;

package/dist/intl/use-intl.js

@@ -0,0 +1,9 @@
+"use client";
+import { useContext } from 'react';
+import { IntlContext } from './intl-context.js';
+
+function useIntl() {
+    return useContext(IntlContext);
+}
+
+export { useIntl };

package/dist/intl/use-language-code.js

@@ -1,10 +1,9 @@
 "use client";
-import { useContext } from 'react';
-import { IntlContext } from './intl-context.js';
+import { useIntl } from './use-intl.js';
 import { getLanguageCodeFromCultureCode } from './utils.js';
 
 function useLanguageCode() {
-    const { cultureCode } = useContext(IntlContext);
+    const { cultureCode } = useIntl();
     return getLanguageCodeFromCultureCode(cultureCode);
 }
 

package/dist/pages/checkout/cart-page/cart-page.js

@@ -17,6 +17,7 @@ import { RouteButton } from '../../../shared/routing/route-button.js';
 import { useToast } from '../../../toast/use-toast.js';
 import { useFetchCurrentCartLinesWithAtp } from '../../../shared/api/storefront/hooks/cart/use-fetch-current-cart-lines-with-atp.js';
 import { useFetchCurrentCartWithAtp } from '../../../shared/api/storefront/hooks/cart/use-fetch-current-cart-with-atp.js';
+import { getCurrencyCodeBySymbol } from '../../../shared/model/currency.js';
 import { PATHS } from '../../paths.js';
 import { EmptyCart } from './components/empty-cart-page.js';
 
@@ -74,6 +75,9 @@ function CartContent({ cartLines }) {
     const isAuthenticated = useIsAuthenticated();
     if (!currentCart)
         return null;
+    const currencyCode = getCurrencyCodeBySymbol(currentCart.currencySymbol);
+    if (!currencyCode)
+        throw new Error(`Currency code not found for symbol ${currentCart.currencySymbol}`);
     return (jsx(CheckoutPageLayout, { actions: {
             primary: (jsx(RouteButton, { withArrow: true, "data-test-selector": "checkoutShippingCartTotalContinueButton", href: "/CheckoutShipping", children: jsx(FormattedMessage, { id: "Continue shopping" }) })),
             secondary: (jsx(RouteButton, { color: "secondary", href: isAuthenticated ? undefined : PATHS.SIGN_IN, onClick: () => {
@@ -81,7 +85,7 @@ function CartContent({ cartLines }) {
                         return;
                     saveCartForLater.mutate({ cart: currentCart });
                 }, variant: "outline", children: jsx(FormattedMessage, { id: "Save order" }) })),
-        }, mobileSummary: jsx(CartTotalsSummary, { totalAmount: currentCart.orderGrandTotalDisplay }), overview: jsx(CartTotals, { shippingCost: currentCart.shippingAndHandlingDisplay, subtotal: currentCart.orderSubTotalDisplay, tax: currentCart.totalTaxDisplay, total: currentCart.orderGrandTotalDisplay, vatPercentage: cartLines[0]?.pricing?.vatRate || 0 }), children: jsx(OrderLineList, { onRemoveAll: () => deleteCurrentCart.mutate(), children: cartLines.map(cartLine => (jsx(ConnectedOrderLineCard, { deliveryDate: cartLine.atp?.date, href: cartLine.productUri, image: {
+        }, mobileSummary: jsx(CartTotalsSummary, { currencyCode: currencyCode, totalAmount: currentCart.orderGrandTotal }), overview: jsx(CartTotals, { currencyCode: currencyCode, shippingCost: currentCart.shippingAndHandling, subtotal: currentCart.orderSubTotal, tax: currentCart.totalTax, total: currentCart.orderGrandTotal, vatPercentage: cartLines[0]?.pricing?.vatRate || 0 }), children: jsx(OrderLineList, { onRemoveAll: () => deleteCurrentCart.mutate(), children: cartLines.map(cartLine => (jsx(ConnectedOrderLineCard, { deliveryDate: cartLine.atp?.date, href: cartLine.productUri, image: {
                     fit: 'contain',
                     image: {
                         '1': cartLine.smallImagePath,
@@ -91,6 +95,7 @@ function CartContent({ cartLines }) {
                     },
                     title: cartLine.altText,
                 }, isReadonly: false, onRemove: () => deleteCartLine.mutate({ cartLineId: cartLine.id }), orderLineId: cartLine.id, price: {
+                    currencyCode,
                     originalTotalPrice: cartLine.pricing?.extendedUnitNetPrice || 0,
                     pricePerUnit: cartLine.pricing?.unitNetPrice || 0,
                     totalPrice: cartLine.pricing?.extendedUnitNetPrice || 0,

package/dist/pages/checkout/order-confirmation-page/order-confirmation-page-content.js

@@ -8,6 +8,7 @@ import { useCultureCode } from '../../../intl/use-culture-code.js';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
 import { OrderLineList } from '../../../lists/orderline-list/orderline-list.js';
 import { useSaveCartForLater } from '../../../shared/api/storefront/hooks/cart/use-save-cart-for-later.js';
+import { getCurrencyCodeBySymbol } from '../../../shared/model/currency.js';
 import { RouteButton } from '../../../shared/routing/route-button.js';
 import { formatDateToLocaleString } from '../../../shared/utils/date.js';
 import { useToast } from '../../../toast/use-toast.js';
@@ -39,6 +40,9 @@ function OrderConfirmationPageContent({ cart, }) {
             });
         },
     });
+    const currencyCode = getCurrencyCodeBySymbol(cart.currencySymbol);
+    if (!currencyCode)
+        throw new Error(`Currency code not found for symbol ${cart.currencySymbol}`);
     return (jsx(Page, { breadcrumb: [
             { href: PATHS.HOME, label: t('Home') },
             {
@@ -50,7 +54,7 @@ function OrderConfirmationPageContent({ cart, }) {
                 secondary: (jsxs(Fragment, { children: [cart.canSaveOrder && (jsx(RouteButton, { color: "secondary", onClick: () => {
                                 saveCartForLater.mutate({ cart });
                             }, variant: "outline", children: jsx(FormattedMessage, { id: "Save order" }) })), jsx(PrintButton, {})] })),
-            }, overview: jsx(CartTotals, { fulfillmentMethod: t(`fulfillmentmethod.${cart.fulfillmentMethod}`), orderNumber: cart.orderNumber, shippingCost: cart.shippingAndHandlingDisplay, subtotal: cart.orderSubTotalDisplay, tax: cart.totalTaxDisplay, total: cart.orderGrandTotalDisplay, vatPercentage: cart.cartLines?.[0]?.pricing?.vatRate }), children: jsxs("div", { children: [jsx(CheckoutPageSection, { hasBorder: false, title: t('General'), children: jsx(CheckoutPageSectionContent, { children: jsxs("div", { className: styles['general-order-info'], children: [cart.orderDate && (jsx(InfoDisplay, { id: "order-date", label: t('Order date'), value: formatDateToLocaleString(new Date(cart.orderDate), cultureCode) })), cart.requestedDeliveryDateDisplay && (jsx(InfoDisplay, { id: "requested-delivery-date", label: t('Requested delivery date'), value: formatDateToLocaleString(new Date(cart.requestedDeliveryDateDisplay.toString()), cultureCode) })), cart.poNumber && (jsx(InfoDisplay, { id: "po-number", label: t('PO Number'), value: cart.poNumber }))] }) }) }), jsx(CheckoutPageSection, { hasBorder: false, title: t('Billing and shipping information'), children: jsx(CheckoutPageSectionContent, { children: jsx(BillingAndInvoiceInformation, { billToAddress: {
+            }, overview: jsx(CartTotals, { currencyCode: currencyCode, fulfillmentMethod: t(`fulfillmentmethod.${cart.fulfillmentMethod}`), orderNumber: cart.orderNumber, shippingCost: cart.shippingAndHandling, subtotal: cart.orderSubTotal, tax: cart.totalTax, total: cart.orderGrandTotal, vatPercentage: cart.cartLines?.[0]?.pricing?.vatRate }), children: jsxs("div", { children: [jsx(CheckoutPageSection, { hasBorder: false, title: t('General'), children: jsx(CheckoutPageSectionContent, { children: jsxs("div", { className: styles['general-order-info'], children: [cart.orderDate && (jsx(InfoDisplay, { id: "order-date", label: t('Order date'), value: formatDateToLocaleString(new Date(cart.orderDate), cultureCode) })), cart.requestedDeliveryDateDisplay && (jsx(InfoDisplay, { id: "requested-delivery-date", label: t('Requested delivery date'), value: formatDateToLocaleString(new Date(cart.requestedDeliveryDateDisplay.toString()), cultureCode) })), cart.poNumber && (jsx(InfoDisplay, { id: "po-number", label: t('PO Number'), value: cart.poNumber }))] }) }) }), jsx(CheckoutPageSection, { hasBorder: false, title: t('Billing and shipping information'), children: jsx(CheckoutPageSectionContent, { children: jsx(BillingAndInvoiceInformation, { billToAddress: {
                                     address1: cart.billTo?.address1,
                                     address2: cart.billTo?.address2,
                                     address3: cart.billTo?.address3,
@@ -80,6 +84,7 @@ function OrderConfirmationPageContent({ cart, }) {
                                         },
                                         title: cartLine.altText,
                                     }, isReadonly: true, price: {
+                                        currencyCode,
                                         originalTotalPrice: cartLine.pricing?.extendedUnitNetPrice || 0,
                                         pricePerUnit: cartLine.pricing?.unitNetPrice || 0,
                                         totalPrice: cartLine.pricing?.extendedUnitNetPrice || 0,

package/dist/pages/checkout/payment-page/components/adyen-payment.d.ts

@@ -1,12 +1,13 @@
 import { MutableRefObject } from 'react';
 import Dropin from '@adyen/adyen-web/dist/types/components/Dropin';
 import { AdyenPaymentModel } from 'shared/api/storefront/model/storefront.model';
+import { CountryCode, CurrencyCode } from '../../../../intl/types';
 import '@adyen/adyen-web/dist/adyen.css';
 interface AdyenPaymentProps {
     amount: number;
     cartId: string;
-    countryCode: string;
-    currencyCode: string;
+    countryCode: CountryCode;
+    currencyCode: CurrencyCode;
     customerId: string;
     dropinRef: MutableRefObject<Dropin | null>;
     environment: 'test' | 'live' | 'live-us' | 'live-au' | 'live-apse' | 'live-in';

package/dist/pages/checkout/payment-page/components/payment.js

@@ -10,6 +10,7 @@ import { Select } from '../../../../forms/select/select.js';
 import { TextField } from '../../../../forms/text-field/text-field.js';
 import { InfoIconTooltip } from '../../../../info-icon-tooltip/info-icon-tooltip.js';
 import { FormattedMessage } from '../../../../intl/formatted-message.js';
+import { isCountryCode } from '../../../../intl/types.js';
 import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
 import { logger } from '../../../../logging/logger.js';
 import { useInvalidateCurrentCart } from '../../../../shared/api/storefront/hooks/cart/use-invalidate-current-cart.js';
@@ -18,7 +19,7 @@ import { usePlaceOrder } from '../../../../shared/api/storefront/hooks/cart/use-
 import { useInvalidateAdyen } from '../../../../shared/api/storefront/hooks/payment/use-invalidate-adyen.js';
 import { validateVATNumber } from '../../../../shared/api/storefront/services/finance-service.js';
 import { useDataLayer } from '../../../../shared/ga/use-data-layer.js';
-import { currencySymbolToISO } from '../../../../shared/model/currency.js';
+import { getCurrencyCodeBySymbol } from '../../../../shared/model/currency.js';
 import { environment } from '../../../../shared/utils/environment.js';
 import { BillingAndInvoiceInformation } from '../../components/billing-and-invoice-information.js';
 import { useHasReturnedFromAdyen } from '../hooks/use-has-returned-from-adyen.js';
@@ -42,8 +43,10 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
     const [asSoonAsPossible, setAsSoonAsPossible] = useState(!hasAtp);
     const [deliveryDate, setDeliveryDate] = useState(cart.requestedDeliveryDateDisplay?.toString() || '');
     const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(cart.paymentOptions?.paymentMethods?.[0]?.name || 'ADY');
-    const countryCode = _cart.billTo?.country?.abbreviation;
-    const currencyCode = currencySymbolToISO[cart.currencySymbol];
+    if (!isCountryCode(_cart.billTo?.country?.abbreviation))
+        throw new Error(`Country code not found for cart with country abbreviation: ${_cart.billTo?.country?.abbreviation}`);
+    const countryCode = _cart.billTo.country.abbreviation;
+    const currencyCode = getCurrencyCodeBySymbol(cart.currencySymbol);
     const lastVATNumber = useRef(cart.customerVatNumber);
     if (!currencyCode)
         throw new Error(`Currency code not found for cart with currency symbol: ${cart.currencySymbol}`);
@@ -57,6 +60,7 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
         cartRef.current = _cart;
     }, [_cart]);
     const [validationErrors, setValidationErrors] = useState({});
+    const [customerVatNumber, setCustomerVatNumber] = useState(cart.customerVatNumber);
     const atpSelectOptions = atp
         .filter(atp => Boolean(atp.date))
         .reduce((acc, atp) => ({
@@ -69,13 +73,17 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
     }, {});
     const validateVAT = useCallback(async (value) => {
         if (!value) {
-            setValidationErrors({});
+            setValidationErrors(errors => {
+                const result = { ...errors };
+                delete result.customerVatNumber;
+                return result;
+            });
             return true;
         }
         if (value.length < 8) {
             setValidationErrors({
                 ...validationErrors,
-                vatNumber: t('validation.tooShort'),
+                customerVatNumber: t('validation.tooShort'),
             });
             return false;
         }
@@ -85,30 +93,50 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
             onValidatingVAT(true);
             const response = await validateVATNumber({ vatNumber: value });
             lastVATNumber.current = value;
-            if (!response.isValid) {
-                setValidationErrors({
-                    ...validationErrors,
-                    vatNumber: t('validation.invalid'),
+            if (response.isValid) {
+                setValidationErrors(validationErrors => {
+                    const result = { ...validationErrors };
+                    delete result.customerVatNumber;
+                    return result;
                 });
+                return true;
+            }
+            else {
+                setValidationErrors(validationErrors => ({
+                    ...validationErrors,
+                    customerVatNumber: t('validation.invalid'),
+                }));
                 return false;
             }
-            setValidationErrors(prev => {
-                delete prev.vatNumber;
-                return prev;
-            });
-            return true;
         }
         catch {
-            setValidationErrors({
-                ...validationErrors,
-                vatNumber: t('validation.invalid'),
+            // When an error occurs, we don't want to show the error message
+            // because it might be a temporary issue with the service.
+            // The customer can not do anything about it, so we just remove the error message.
+            setValidationErrors(validationErrors => {
+                const result = { ...validationErrors };
+                delete result.customerVatNumber;
+                return result;
             });
-            return false;
+            return true;
         }
         finally {
             onValidatingVAT(false);
         }
     }, [onValidatingVAT, t, validationErrors]);
+    useEffect(() => {
+        /* When a customer has an existing VAT that is
+         * not valid (e.g. invalid, undetermined, or failure),
+         * then trigger a client side validation. */
+        if (!cart.customerVatNumber)
+            return;
+        if (cart.properties.customerVatNumberStatus === 'valid')
+            return;
+        onValidatingVAT(true);
+        lastVATNumber.current = '';
+        validateVAT(cart.customerVatNumber);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     const onPlaceOrderCompleted = useCallback(({ cart, payment_type }) => {
         dataLayer.push(createEcommerceEvent({
             cart,
@@ -127,7 +155,7 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
                 event: 'purchase',
             },
         }), {
-            currency: currencySymbolToISO[cart.currencySymbol],
+            currency: getCurrencyCodeBySymbol(cart.currencySymbol),
             event: 'transactionComplete',
             transactionAffiliation: cart.billTo?.companyName,
             transactionId: cart.orderNumber,
@@ -147,10 +175,16 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
         const formData = new FormData(e.currentTarget);
         const cart = cartRef.current;
         setValidationErrors(prev => prev); // NOTE: This makes sure the form is revalidated on submit
-        const vatNumber = formData.get('vatNumber')?.toString();
-        if (vatNumber &&
-            lastVATNumber.current !== vatNumber &&
-            !(await validateVAT(vatNumber)))
+        cart.customerVatNumber = formData.get('customerVatNumber')?.toString();
+        cart.poNumber = formData.get('poNumber')?.toString();
+        cart.properties = {
+            ...cart.properties,
+            industry: formData.get('industry')?.toString() || '',
+        };
+        cart.requestedDeliveryDate = formData.get('deliveryDate')?.toString();
+        if (cart.customerVatNumber &&
+            lastVATNumber.current !== cart.customerVatNumber &&
+            !(await validateVAT(cart.customerVatNumber)))
             return;
         if (Object.keys(validationErrors).length > 0)
             return;
@@ -167,18 +201,15 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
             try {
                 try {
                     cartRef.current = await patchCart({
-                        cart: {
-                            ...cart,
-                            customerVatNumber: formData.get('vatNumber')?.toString(),
-                            poNumber: formData.get('poNumber')?.toString(),
-                            properties: {
-                                ...cart.properties,
-                                industry: formData.get('industry')?.toString() || '',
-                            },
-                            requestedDeliveryDate: formData.get('deliveryDate')?.toString(),
-                        },
+                        cart,
                         forceRecalculation: false,
                     });
+                    if (cartRef.current.properties.customerVatNumberStatus === 'invalid') {
+                        return setValidationErrors({
+                            ...validationErrors,
+                            customerVatNumber: t('validation.invalid'),
+                        });
+                    }
                 }
                 catch (error) {
                     setAPIError(error);
@@ -205,12 +236,12 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
             const cart = cartRef.current;
             try {
                 onProcessing(true);
-                await placeOrder({ cart });
+                cartRef.current = await placeOrder({ cart });
                 onPlaceOrderCompleted({
-                    cart,
-                    payment_type: cart.paymentMethod?.name || '',
+                    cart: cartRef.current,
+                    payment_type: cartRef.current.paymentMethod?.name || '',
                 });
-                return onPaymentComplete({ cartId: cart.trackId });
+                return onPaymentComplete({ cartId: cartRef.current.trackId });
             }
             catch (error) {
                 logger.error(error);
@@ -279,9 +310,7 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
                     MA: 'Maritime',
                     OT: 'Other',
                     /* eslint-enable sort-keys-fix/sort-keys-fix */
-                }, variant: "solid" }), jsx(TextField, { showLabel: true, defaultValue: cart.customerVatNumber, isDisabled: isDisabled, label: t('VAT Number'), name: "vatNumber", onBlur: e => validateVAT(e.target.value), validate: () => validationErrors.vatNumber ?? true }), jsx(TextField, { showLabel: true, defaultValue: cart.poNumber, isDisabled: isDisabled, isRequired: cart.requiresPoNumber, label: t('PO Number'), name: "poNumber" }), paymentMethodOptions && Object.keys(paymentMethodOptions).length > 1 && (jsx(Select, { "data-test-selector": "paymentMethodSelect", defaultSelectedOption: cart.paymentOptions?.paymentMethods?.[0]?.name || 'ADY', isDisabled: isDisabled, label: t('Payment method'), name: "paymentMethod", onChange: setSelectedPaymentMethod, options: paymentMethodOptions, selectedOption: selectedPaymentMethod, variant: "solid" })), isAdyenPayment && cart.billTo && (jsx(AdyenPayment, { amount: cart.orderGrandTotal, cartId: cart.trackId, countryCode: countryCode, currencyCode: currencyCode, customerId: cart.billTo.id, dropinRef: dropinRef, 
-                // TODO: Use the correct Adyen environment before going live
-                environment: environment === 'production' ? 'live' : 'test', isDisabled: isDisabled, onComplete: onComplete, onError: onError, orderAmount: cart.orderGrandTotal, returnUrl: 
+                }, variant: "solid" }), jsx(TextField, { showLabel: true, isDisabled: isDisabled, label: t('VAT Number'), name: "customerVatNumber", onBlur: e => validateVAT(e.target.value), onChange: setCustomerVatNumber, validate: () => validationErrors.customerVatNumber ?? true, value: customerVatNumber }, `vat${Boolean(validationErrors.customerVatNumber)}`), jsx(TextField, { showLabel: true, defaultValue: cart.poNumber, isDisabled: isDisabled, isRequired: cart.requiresPoNumber, label: t('PO Number'), name: "poNumber" }), paymentMethodOptions && Object.keys(paymentMethodOptions).length > 1 && (jsx(Select, { "data-test-selector": "paymentMethodSelect", defaultSelectedOption: cart.paymentOptions?.paymentMethods?.[0]?.name || 'ADY', isDisabled: isDisabled, label: t('Payment method'), name: "paymentMethod", onChange: setSelectedPaymentMethod, options: paymentMethodOptions, selectedOption: selectedPaymentMethod, variant: "solid" })), isAdyenPayment && cart.billTo && (jsx(AdyenPayment, { amount: cart.orderGrandTotal, cartId: cart.trackId, countryCode: countryCode, currencyCode: currencyCode, customerId: cart.billTo.id, dropinRef: dropinRef, environment: environment === 'production' ? 'live' : 'test', isDisabled: isDisabled, onComplete: onComplete, onError: onError, orderAmount: cart.orderGrandTotal, returnUrl: 
                 /* eslint-disable ssr-friendly/no-dom-globals-in-react-fc */
                 typeof window === 'undefined'
                     ? ''

package/dist/pages/checkout/payment-page/payment-page-content.js

@@ -6,6 +6,7 @@ import { CartTotalsSummary } from '../../../cart-totals/cart-totals-summary.js';
 import { FormattedMessage } from '../../../intl/formatted-message.js';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
 import { OrderLineList } from '../../../lists/orderline-list/orderline-list.js';
+import { getCurrencyCodeBySymbol } from '../../../shared/model/currency.js';
 import { Page } from '../../components/page/page.js';
 import { PATHS } from '../../paths.js';
 import { CheckoutPageLayout } from '../layouts/checkout-page-layout/checkout-page-layout.js';
@@ -15,6 +16,9 @@ import { Payment } from './components/payment.js';
 
 function PaymentPageContent({ atp, cart, formId, hasAtp, isProcessing, isValidatingVAT, onPaymentComplete, setIsProcessing, setIsValidatingVAT, }) {
     const t = useFormattedMessage();
+    const currencyCode = getCurrencyCodeBySymbol(cart.currencySymbol);
+    if (!currencyCode)
+        throw new Error(`Currency code not found for symbol ${cart.currencySymbol}`);
     return (jsx(Page, { breadcrumb: [
             { href: PATHS.HOME, label: t('Home') },
             {
@@ -23,8 +27,8 @@ function PaymentPageContent({ atp, cart, formId, hasAtp, isProcessing, isValidat
             },
         ], title: t('Review and payment'), children: jsxs(CheckoutPageLayout, { actions: {
                 primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutReviewAndSubmit_placeOrder", form: formId, isDisabled: isProcessing, isLoading: isProcessing ? (jsx(FormattedMessage, { id: "Processing" })) : isValidatingVAT ? (jsx(FormattedMessage, { id: "Validating" })) : (false), type: "submit", children: jsx(FormattedMessage, { id: "Pay" }) })),
-            }, mobileSummary: jsx(CartTotalsSummary, { totalAmount: cart.orderGrandTotalDisplay }), overview: jsx(CartTotals, { deliveryDate: hasAtp ? undefined : cart.requestedDeliveryDate, fulfillmentMethod: cart.fulfillmentMethod, isPayByInvoice: (cart.paymentOptions?.paymentMethods?.length || 1) <= 1 &&
-                    cart.paymentMethod?.name === 'PBI', shippingCost: cart.shippingAndHandlingDisplay, subtotal: cart.orderSubTotalDisplay, tax: cart.totalTaxDisplay, total: cart.orderGrandTotalDisplay, vatPercentage: cart.cartLines?.[0]?.pricing?.vatRate || 0 }), children: [jsx(CheckoutPageSection, { hasBorder: false, title: jsx(FormattedMessage, { id: "Payment" }), children: jsx(CheckoutPageSectionContent, { children: jsx(Payment, { atp: atp, cart: cart, form: formId, isProcessing: isProcessing, onPaymentComplete: onPaymentComplete, onProcessing: setIsProcessing, onValidatingVAT: setIsValidatingVAT }) }) }), jsx(CheckoutPageSection, { hasBorder: false, title: jsx(FormattedMessage, { id: "Order" }), children: jsx(CheckoutPageSectionContent, { stretch: true, children: jsx(OrderLineList, { children: cart.cartLines?.map(cartLine => (jsx(OrderLineCard, { deliveryDate: cartLine.atp?.date, href: cartLine.productUri, image: {
+            }, mobileSummary: jsx(CartTotalsSummary, { currencyCode: currencyCode, totalAmount: cart.orderGrandTotal }), overview: jsx(CartTotals, { currencyCode: currencyCode, deliveryDate: hasAtp ? undefined : cart.requestedDeliveryDate, fulfillmentMethod: cart.fulfillmentMethod, isPayByInvoice: (cart.paymentOptions?.paymentMethods?.length || 1) <= 1 &&
+                    cart.paymentMethod?.name === 'PBI', shippingCost: cart.shippingAndHandling, subtotal: cart.orderSubTotal, tax: cart.totalTax, total: cart.orderGrandTotal, vatPercentage: cart.cartLines?.[0]?.pricing?.vatRate || 0 }), children: [jsx(CheckoutPageSection, { hasBorder: false, title: jsx(FormattedMessage, { id: "Payment" }), children: jsx(CheckoutPageSectionContent, { children: jsx(Payment, { atp: atp, cart: cart, form: formId, isProcessing: isProcessing, onPaymentComplete: onPaymentComplete, onProcessing: setIsProcessing, onValidatingVAT: setIsValidatingVAT }) }) }), jsx(CheckoutPageSection, { hasBorder: false, title: jsx(FormattedMessage, { id: "Order" }), children: jsx(CheckoutPageSectionContent, { stretch: true, children: jsx(OrderLineList, { children: cart.cartLines?.map(cartLine => (jsx(OrderLineCard, { deliveryDate: cartLine.atp?.date, href: cartLine.productUri, image: {
                                     fit: 'contain',
                                     image: {
                                         '1': cartLine.smallImagePath,
@@ -34,6 +38,7 @@ function PaymentPageContent({ atp, cart, formId, hasAtp, isProcessing, isValidat
                                     },
                                     title: cartLine.altText,
                                 }, isReadonly: true, price: {
+                                    currencyCode,
                                     originalTotalPrice: cartLine.pricing?.extendedUnitNetPrice || 0,
                                     pricePerUnit: cartLine.pricing?.unitNetPrice || 0,
                                     totalPrice: cartLine.pricing?.extendedUnitNetPrice || 0,

package/dist/pages/checkout/payment-page/utils/parse-amount.d.ts

@@ -1,2 +1,3 @@
 import { PaymentAmountExtended } from '@adyen/adyen-web/dist/types/types';
-export declare function parseAmount(amount: string | number, countryCode: string): PaymentAmountExtended;
+import { CountryCode } from '../../../../intl/types';
+export declare function parseAmount(amount: string | number, countryCode: CountryCode): PaymentAmountExtended;

package/dist/pages/checkout/shipping-page/components/edit-address-form.js

@@ -36,12 +36,12 @@ function EditAddressesForm({ billTo, countries, currentCountry, isLoading, isPic
                                     address2: formData.get('address2')?.toString() || '',
                                     address3: formData.get('address3')?.toString() || '',
                                     attention: formData.get('attention')?.toString() || '',
-                                    city: formData.get('address1')?.toString() || '',
+                                    city: formData.get('city')?.toString() || '',
                                     companyName: formData.get('companyName')?.toString() || '',
                                     country,
                                     email: formData.get('email')?.toString() || '',
                                     firstName: formData.get('firstName')?.toString() || '',
-                                    lastName: formData.get('address1')?.toString() || '',
+                                    lastName: formData.get('lastName')?.toString() || '',
                                     phone: formData.get('phone')?.toString() || '',
                                     postalCode: formData.get('postalCode')?.toString() || '',
                                 },

package/dist/pages/checkout/shipping-page/shipping-page-content.js

@@ -5,6 +5,7 @@ import { CartTotalsSummary } from '../../../cart-totals/cart-totals-summary.js';
 import { Select } from '../../../forms/select/select.js';
 import { FormattedMessage } from '../../../intl/formatted-message.js';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
+import { getCurrencyCodeBySymbol } from '../../../shared/model/currency.js';
 import { Page } from '../../components/page/page.js';
 import { PATHS } from '../../paths.js';
 import { CheckoutPageLayout } from '../layouts/checkout-page-layout/checkout-page-layout.js';
@@ -20,6 +21,9 @@ function ShippingPageContent({ cart, editAddress, errorPatchBillingAddress, fulf
         [method]: t(`fulfillmentMethod.${method}`),
     }), {});
     const hasBillToAddress = Boolean(cart.billTo?.address1);
+    const currencyCode = getCurrencyCodeBySymbol(cart.currencySymbol);
+    if (!currencyCode)
+        throw new Error(`Currency code not found for symbol ${cart.currencySymbol}`);
     return (jsx(Page, { breadcrumb: [
             { href: PATHS.HOME, label: t('Home') },
             {
@@ -28,9 +32,9 @@ function ShippingPageContent({ cart, editAddress, errorPatchBillingAddress, fulf
             },
         ], title: t('Shipping details'), children: jsxs(CheckoutPageLayout, { actions: {
                 primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutShippingCartTotalContinueButton", form: EDIT_ADDRESS_FORM_ID, isDisabled: isPatching, isLoading: isPatching || isPatchingSession ? (jsx(FormattedMessage, { id: "Updating address" })) : undefined, type: "submit", children: jsx(FormattedMessage, { id: "Continue shopping" }) })),
-            }, mobileSummary: jsx(CartTotalsSummary, { totalAmount: cart.orderGrandTotalDisplay }), overview: jsx(CartTotals, { fulfillmentMethod: fulfillmentMethods && fulfillmentMethods.length === 1
+            }, mobileSummary: jsx(CartTotalsSummary, { currencyCode: currencyCode, totalAmount: cart.orderGrandTotal }), overview: jsx(CartTotals, { currencyCode: currencyCode, fulfillmentMethod: fulfillmentMethods && fulfillmentMethods.length === 1
                     ? cart.fulfillmentMethod
-                    : undefined, shippingCost: cart.shippingAndHandlingDisplay, subtotal: cart.orderSubTotalDisplay, tax: cart.totalTaxDisplay, total: cart.orderGrandTotalDisplay, vatPercentage: cart.cartLines?.[0]?.pricing?.vatRate }), children: [jsxs(Fragment, { children: [fulfillmentMethods && fulfillmentMethods.length > 1 && (jsx(CheckoutPageSection, { hasBorder: true, title: t('Fulfillment method'), children: jsx(CheckoutPageSectionContent, { children: jsx("div", { className: styles['fulfillment-select-wrapper'], children: jsx(Select, { isRequired: true, showLabel: true, "data-test-selector": "fulfillmentMethodSelect", defaultSelectedOption: cart.fulfillmentMethod, isLoading: isLoadingFulfillmentMethods, label: t('Fulfillment method'), name: "fulfillmentMethod", onChange: onChangeFulfillmentMethod, options: fulfillmentMethodOptions || {}, variant: "solid" }) }) }) })), hasBillToAddress && !isGuest ? readOnlyAddress : editAddress] }), Boolean(errorPatchBillingAddress) && (jsx("div", { className: styles['error-message'], children: jsx(FormattedMessage, { id: "An unexpected error occured" }) }))] }) }));
+                    : undefined, shippingCost: cart.shippingAndHandling, subtotal: cart.orderSubTotal, tax: cart.totalTax, total: cart.orderGrandTotal, vatPercentage: cart.cartLines?.[0]?.pricing?.vatRate }), children: [jsxs(Fragment, { children: [fulfillmentMethods && fulfillmentMethods.length > 1 && (jsx(CheckoutPageSection, { hasBorder: true, title: t('Fulfillment method'), children: jsx(CheckoutPageSectionContent, { children: jsx("div", { className: styles['fulfillment-select-wrapper'], children: jsx(Select, { isRequired: true, showLabel: true, "data-test-selector": "fulfillmentMethodSelect", defaultSelectedOption: cart.fulfillmentMethod, isLoading: isLoadingFulfillmentMethods, label: t('Fulfillment method'), name: "fulfillmentMethod", onChange: onChangeFulfillmentMethod, options: fulfillmentMethodOptions || {}, variant: "solid" }) }) }) })), hasBillToAddress && !isGuest ? readOnlyAddress : editAddress] }), Boolean(errorPatchBillingAddress) && (jsx("div", { className: styles['error-message'], children: jsx(FormattedMessage, { id: "An unexpected error occured" }) }))] }) }));
 }
 
 export { ShippingPageContent };

package/dist/pages/product/components/product-overview.d.ts

@@ -0,0 +1,8 @@
+import { ProductHit } from '../../../shared/model/hit';
+interface ProductOverviewProps {
+    ProductHitCard: React.ComponentType<{
+        hit: ProductHit;
+    }>;
+}
+export declare function ProductOverview({ ProductHitCard }: ProductOverviewProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/pages/product/components/product-overview.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { usePagination } from 'react-instantsearch';
+import { MAX_QUERY_RESULTS } from '../../../algolia/constants/index.js';
+import { useAlgoliaHits } from '../../../algolia/use-algolia-hits.js';
+import { FormattedMessage } from '../../../intl/formatted-message.js';
+import { ProductOverviewGrid } from '../../../lists/product-overview-grid/product-overview-grid.js';
+import { Message } from '../../../message/message.js';
+import { PromoCard } from '../../../promos/promo-card/promo-card.js';
+import { isProductHit } from '../../../shared/model/hit.js';
+
+function ProductOverview({ ProductHitCard }) {
+    const { hits, isLoading } = useAlgoliaHits();
+    const { currentRefinement, nbHits, nbPages } = usePagination();
+    const currentPage = currentRefinement + 1;
+    const isLastPage = currentPage === nbPages;
+    return (jsxs(Fragment, { children: [isLastPage && nbHits > MAX_QUERY_RESULTS && (jsx(Message, { type: "info", children: jsx(FormattedMessage, { id: "You have reached the end of the results, but there may be more articles available. Adjust your filters or search to discover more!" }) })), jsx(ProductOverviewGrid, { isLoading: isLoading, children: hits.map(hit => isProductHit(hit) ? (jsx(ProductHitCard, { hit: hit }, hit.id)) : (jsx(PromoCard, { href: hit.href, image: hit.image }, hit.id))) })] }));
+}
+
+export { ProductOverview };

package/dist/pages/product/product-details-page/components/product-details-panel/product-details-panel.js

@@ -4,7 +4,7 @@ import { ConnectedFavoriteButton } from '../../../../../buttons/favorite/connect
 import { Accordion } from '../../../../../collapsables/accordion/accordion.js';
 import { AccordionItem } from '../../../../../collapsables/accordion/accordion-item.js';
 import { ShowAll } from '../../../../../collapsables/show-all/show-all.js';
-import { ProductPrice } from '../../../../../display/product-price/product-price.js';
+import { Price } from '../../../../../display/price/price.js';
 import { ProductSku } from '../../../../../display/product-sku/product-sku.js';
 import { FormattedMessage } from '../../../../../intl/formatted-message.js';
 import { DownloadDocumentList } from '../../../../../lists/download-document-list/download-document-list.js';
@@ -15,7 +15,7 @@ import styles from './product-details-panel.module.css.js';
 
 function ProductDetailsPanel({ priceComponent, product, }) {
     const { sendAddToCartFromProductDetailsPageEvent, sendAddToWishListFromProductDetailsPageEvent, } = useAlgoliaInsights();
-    return (jsxs("div", { className: styles['product-details-panel'], children: [jsxs("div", { className: styles.heading, children: [jsx(Heading, { italic: true, size: "xs", tag: "h1", children: product.productTitle }), jsx(ProductSku, { sku: product.productNumber })] }), jsxs("div", { className: styles['price-action-container'], children: [priceComponent || (jsx(ProductPrice, { "data-test": "productPrice_unitNetPrice", isVatIncluded: product.isVatIncluded, originalPrice: product.originalPrice, price: product.price })), jsxs("div", { className: styles['action-container'], children: [product.canAddToCart && (jsx(ConnectedAddToCartButton, { onAddToCart: ({ cartLine }) => {
+    return (jsxs("div", { className: styles['product-details-panel'], children: [jsxs("div", { className: styles.heading, children: [jsx(Heading, { italic: true, size: "xs", tag: "h1", children: product.productTitle }), jsx(ProductSku, { sku: product.productNumber })] }), jsxs("div", { className: styles['price-action-container'], children: [priceComponent || (jsx(Price, { className: styles.price, currencyCode: product.currencyCode, "data-test": "productPrice_unitNetPrice", isVatIncluded: product.isVatIncluded, originalPrice: product.originalPrice, price: product.price, variant: "sonic" })), jsxs("div", { className: styles['action-container'], children: [product.canAddToCart && (jsx(ConnectedAddToCartButton, { onAddToCart: ({ cartLine }) => {
                                     sendAddToCartFromProductDetailsPageEvent({
                                         cartLine,
                                     });

package/dist/pages/product/product-details-page/components/product-details-panel/product-details-panel.module.css.js

@@ -1,3 +1,3 @@
-var styles = {"product-details-panel":"product-details-panel-module-MXfPm","heading":"product-details-panel-module-rtZYR","price-action-container":"product-details-panel-module-wHZCr","action-container":"product-details-panel-module-QLafW","description":"product-details-panel-module-9L-Nm","feature-list":"product-details-panel-module-NC2nx"};
+var styles = {"product-details-panel":"product-details-panel-module-MXfPm","heading":"product-details-panel-module-rtZYR","price-action-container":"product-details-panel-module-wHZCr","price":"product-details-panel-module-dI2JL","action-container":"product-details-panel-module-QLafW","description":"product-details-panel-module-9L-Nm","feature-list":"product-details-panel-module-NC2nx"};
 
 export { styles as default };

package/dist/pages/product/product-listing-page/product-listing-product-overview/product-listing-product-overview.js

@@ -1,11 +1,8 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useAlgoliaHits } from '../../../../algolia/use-algolia-hits.js';
 import { useAlgoliaInsights } from '../../../../algolia/use-algolia-insights.js';
 import { ConnectedProductCard } from '../../../../cards/product-card/connected-product-card.js';
-import { ProductOverviewGrid } from '../../../../lists/product-overview-grid/product-overview-grid.js';
-import { PromoCard } from '../../../../promos/promo-card/promo-card.js';
-import { isProductHit } from '../../../../shared/model/hit.js';
+import { ProductOverview } from '../../components/product-overview.js';
 
 function ProductHitCard({ hit }) {
     const { sendAddToCartFromProductListPageEvent, sendAddToWishListFromProductListPageEvent, sendProductClickFromProductListPageEvent, } = useAlgoliaInsights();
@@ -22,14 +19,14 @@ function ProductHitCard({ hit }) {
             objectId: hit.objectId,
             position: hit.position,
         }), price: {
+            currencyCode: hit.currencyCode,
             isVatIncluded: hit.isVatIncluded,
             originalPrice: hit.originalPrice,
             price: hit.price,
         }, sku: hit.id, tags: hit.labels, title: hit.name }, hit.storefrontId));
 }
 function ProductListingProductOverview() {
-    const { hits, isLoading } = useAlgoliaHits();
-    return (jsx(ProductOverviewGrid, { isLoading: isLoading, children: hits.map(hit => isProductHit(hit) ? (jsx(ProductHitCard, { hit: hit }, hit.id)) : (jsx(PromoCard, { href: hit.href, image: hit.image }, hit.id))) }));
+    return jsx(ProductOverview, { ProductHitCard: ProductHitCard });
 }
 
 export { ProductListingProductOverview };