@sonic-equipment/ui 137.0.0 → 138.0.0

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

@@ -1,10 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
+import { useRef, useState, useEffect, useCallback } from 'react';
 import { Form } from 'react-aria-components';
 import { useAlgoliaInsights } from '../../../../algolia/use-algolia-insights.js';
 import { Accordion } from '../../../../collapsables/accordion/accordion.js';
 import { AccordionItem } from '../../../../collapsables/accordion/accordion-item.js';
-import { config } from '../../../../config.js';
 import { InfoDisplay } from '../../../../display/info-display/info-display.js';
 import { Checkbox } from '../../../../forms/checkbox/checkbox.js';
 import { Select } from '../../../../forms/select/select.js';
@@ -13,7 +12,6 @@ import { InfoIconTooltip } from '../../../../info-icon-tooltip/info-icon-tooltip
 import { FormattedMessage } from '../../../../intl/formatted-message.js';
 import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
 import { logger } from '../../../../logging/logger.js';
-import { usePatchSession } from '../../../../shared/api/storefront/hooks/authentication/use-patch-session.js';
 import { useInvalidateCurrentCart } from '../../../../shared/api/storefront/hooks/cart/use-invalidate-current-cart.js';
 import { usePatchCart } from '../../../../shared/api/storefront/hooks/cart/use-patch-cart.js';
 import { usePlaceOrder } from '../../../../shared/api/storefront/hooks/cart/use-place-order.js';
@@ -22,23 +20,22 @@ import { validateVATNumber } from '../../../../shared/api/storefront/services/fi
 import { useDataLayer } from '../../../../shared/ga/use-data-layer.js';
 import { useDebouncedCallback } from '../../../../shared/hooks/use-debounced-callback.js';
 import { currencySymbolToISO } 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';
 import { AdyenPayment } from './adyen-payment.js';
 import styles from './payment.module.css.js';
 
-function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete, onProcessing, onValidating, }) {
+function Payment({ atp, cart: _cart, form, isProcessing, isValidatingVAT, onError: _onError, onPaymentComplete, onProcessing, onValidatingVAT, }) {
     const { createEcommerceEvent, dataLayer } = useDataLayer();
-    const { isLoading: isPatchingCart, mutate: patchCart } = usePatchCart();
-    const { isLoading: isPatchingSession } = usePatchSession();
-    const { isLoading: isPlacingCart, mutate: placeOrder } = usePlaceOrder();
+    const { mutate: patchCart } = usePatchCart();
+    const { mutate: placeOrder } = usePlaceOrder();
     const { sendPurchaseEventFromPaymentPage } = useAlgoliaInsights();
     const invalidateCurrentCart = useInvalidateCurrentCart();
     const dropinRef = useRef(null);
     const [paymentError, setPaymentError] = useState();
     const [apiError, setAPIError] = useState();
     const invalidateAdyen = useInvalidateAdyen();
-    const [isValidatingVAT, setIsValidatingVAT] = useState(false);
     const t = useFormattedMessage();
     const cartRef = useRef(_cart);
     const cart = cartRef.current;
@@ -47,24 +44,19 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
     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 (!currencyCode)
+        throw new Error('Currency code not found for cart with currency symbol: ' +
+            cart.currencySymbol);
     const isAdyenPayment = selectedPaymentMethod === 'ADY' &&
         cart.paymentOptions &&
         cart.billTo?.id &&
         countryCode;
     const hasReturnedFromAdyen = useHasReturnedFromAdyen();
-    const isProcessing = useMemo(() => hasReturnedFromAdyen || isPlacingCart, [isPlacingCart, hasReturnedFromAdyen]);
+    const isDisabled = hasReturnedFromAdyen || isProcessing || isValidatingVAT;
     useEffect(() => {
         cartRef.current = _cart;
     }, [_cart]);
-    useEffect(() => {
-        onValidating(isValidatingVAT || isPatchingSession);
-    }, [isPatchingSession, isValidatingVAT, onValidating]);
-    useEffect(() => {
-        onProcessing(isPatchingCart);
-    }, [isPatchingCart, onProcessing]);
-    useEffect(() => {
-        onProcessing(isProcessing);
-    }, [isProcessing, onProcessing]);
     const [validationErrors, setValidationErrors] = useState({});
     const atpSelectOptions = atp
         .filter(atp => Boolean(atp.date))
@@ -86,7 +78,7 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
             });
         }
         try {
-            setIsValidatingVAT(true);
+            onValidatingVAT(true);
             const response = await validateVATNumber({ vatNumber: value });
             if (response.isValid) {
                 setValidationErrors(prev => {
@@ -108,7 +100,7 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
             });
         }
         finally {
-            setIsValidatingVAT(false);
+            onValidatingVAT(false);
         }
     }, 500);
     const onPlaceOrderCompleted = useCallback(({ cart, payment_type }) => {
@@ -160,20 +152,20 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
             dropinRef.current.showValidation();
             if (!dropinRef.current.isValid)
                 return;
-            const updatedCart = {
-                ...cart,
-                customerVatNumber: formData.get('vatNumber')?.toString(),
-                poNumber: formData.get('poNumber')?.toString(),
-                properties: {
-                    ...cart.properties,
-                    industry: formData.get('industry')?.toString() || '',
-                },
-                requestedDeliveryDate: formData.get('deliveryDate')?.toString(),
-            };
+            onProcessing(true);
             try {
                 try {
                     cartRef.current = await patchCart({
-                        cart: updatedCart,
+                        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(),
+                        },
                     });
                 }
                 catch (error) {
@@ -192,11 +184,15 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
                 logger.error(error);
                 invalidateCurrentCart();
             }
+            finally {
+                onProcessing(false);
+            }
         }
         else {
             /* Pay by Invoice */
             const cart = cartRef.current;
             try {
+                onProcessing(true);
                 await placeOrder({ cart });
                 onPlaceOrderCompleted({
                     cart,
@@ -209,6 +205,9 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
                 setPaymentError(error);
                 invalidateCurrentCart();
             }
+            finally {
+                onProcessing(false);
+            }
         }
     }
     const onComplete = useCallback(
@@ -216,6 +215,7 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
     async (result) => {
         const cart = cartRef.current;
         try {
+            onProcessing(true);
             await placeOrder({
                 cart: {
                     ...cart,
@@ -237,7 +237,10 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
             logger.error(error);
             setAPIError(error);
         }
-    }, [onPaymentComplete, onPlaceOrderCompleted, placeOrder]);
+        finally {
+            onProcessing(false);
+        }
+    }, [onPaymentComplete, onPlaceOrderCompleted, onProcessing, placeOrder]);
     const onError = useCallback((error, result) => {
         invalidateAdyen();
         // invalidateCurrentCart()
@@ -248,11 +251,11 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
     return (jsxs(Form, { className: styles['payment-form'], "data-test-selector": "paymentForm", id: form, onSubmit: e => {
             e.preventDefault();
             onSubmit(e);
-        }, validationErrors: validationErrors, children: [Boolean(apiError) && (jsx("div", { className: styles['error-message'], children: jsx(FormattedMessage, { id: "An unexpected error occured" }) })), hasAtp && (jsxs("div", { className: styles['delivery-date'], children: [jsx(Select, { showLabel: true, "data-test-selector": "deliveryDateSelect", isDisabled: hasReturnedFromAdyen || asSoonAsPossible, isRequired: !asSoonAsPossible, label: t('Select a desired delivery date'), name: "deliveryDate", onChange: setDeliveryDate, options: atpSelectOptions, selectedOption: deliveryDate, variant: "solid" }, String(asSoonAsPossible)), jsxs("div", { className: styles['asap-checkbox'], children: [jsx(Checkbox, { "data-test-selector": "asapCheckbox", isDisabled: hasReturnedFromAdyen || !hasAtp, isSelected: asSoonAsPossible, onChange: checked => {
+        }, validationErrors: validationErrors, children: [Boolean(apiError) && (jsx("div", { className: styles['error-message'], children: jsx(FormattedMessage, { id: "An unexpected error occured" }) })), hasAtp && (jsxs("div", { className: styles['delivery-date'], children: [jsx(Select, { showLabel: true, "data-test-selector": "deliveryDateSelect", isDisabled: isDisabled || asSoonAsPossible, isRequired: !asSoonAsPossible, label: t('Select a desired delivery date'), name: "deliveryDate", onChange: setDeliveryDate, options: atpSelectOptions, selectedOption: deliveryDate, variant: "solid" }, String(asSoonAsPossible)), jsxs("div", { className: styles['asap-checkbox'], children: [jsx(Checkbox, { "data-test-selector": "asapCheckbox", isDisabled: isDisabled, isSelected: asSoonAsPossible, onChange: checked => {
                                     setAsSoonAsPossible(checked);
                                     if (checked)
                                         setDeliveryDate('');
-                                }, children: jsx(FormattedMessage, { id: "As soon as possible" }) }), jsx(InfoIconTooltip, { variant: "stroke", children: t('Selecting As Soon As Possible will enable us to send the products to you as they become available.') })] })] })), jsx(Select, { isRequired: true, "data-test-selector": "industrySelect", defaultSelectedOption: cart.properties.industry, isDisabled: hasReturnedFromAdyen, label: t('Industry'), name: "industry", options: {
+                                }, children: jsx(FormattedMessage, { id: "As soon as possible" }) }), jsx(InfoIconTooltip, { variant: "stroke", children: t('Selecting As Soon As Possible will enable us to send the products to you as they become available.') })] })] })), jsx(Select, { isRequired: true, "data-test-selector": "industrySelect", defaultSelectedOption: cart.properties.industry, isDisabled: isDisabled, label: t('Industry'), name: "industry", options: {
                     /* eslint-disable sort-keys-fix/sort-keys-fix */
                     PP: 'Private User',
                     AU: 'Automotive',
@@ -264,15 +267,13 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
                     MA: 'Maritime',
                     OT: 'Other',
                     /* eslint-enable sort-keys-fix/sort-keys-fix */
-                }, variant: "solid" }), jsx(TextField, { showLabel: true, defaultValue: cart.customerVatNumber, isDisabled: hasReturnedFromAdyen || isProcessing, label: t('VAT Number'), name: "vatNumber", onInput: e => debouncedValidator(e.target.value), validate: () => validationErrors.vatNumber ?? true }), jsx(TextField, { showLabel: true, defaultValue: cart.poNumber, isDisabled: hasReturnedFromAdyen || isProcessing, 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: (hasReturnedFromAdyen ||
-                    (cart.paymentOptions?.paymentMethods &&
-                        cart.paymentOptions.paymentMethods.length <= 1)) ??
-                    true, 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: currencySymbolToISO[cart.currencySymbol], customerId: cart.billTo.id, dropinRef: dropinRef, 
+                }, variant: "solid" }), jsx(TextField, { showLabel: true, defaultValue: cart.customerVatNumber, isDisabled: isDisabled, label: t('VAT Number'), name: "vatNumber", onInput: e => debouncedValidator(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: "test", onComplete: onComplete, onError: onError, orderAmount: cart.orderGrandTotal, returnUrl: typeof window === 'undefined'
+                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'
                     ? ''
-                    : /* eslint-disable ssr-friendly/no-dom-globals-in-react-fc */
-                        `${config.SHOP_API_URL}${window.location.pathname}${window.location.search ? `${window.location.search}` : ''}` })), Boolean(paymentError) && (jsx("div", { className: styles['error-message'], children: jsx(FormattedMessage, { id: "An error occurred while processing your payment. Please try again." }) })), jsx(InfoDisplay, { id: "shipping-and-invoice-information", label: t('Billing and shipping address'), value: jsx(Accordion, { variant: "select", children: jsx(AccordionItem, { id: "invoice-and-shipping", title: "Factuur- en verzendinformatie", children: jsx(BillingAndInvoiceInformation, { billToAddress: {
+                    : `${window.location.pathname}${window.location.search}` })), Boolean(paymentError) && (jsx("div", { className: styles['error-message'], children: jsx(FormattedMessage, { id: "An error occurred while processing your payment. Please try again." }) })), jsx(InfoDisplay, { id: "shipping-and-invoice-information", label: t('Billing and shipping address'), value: jsx(Accordion, { variant: "select", children: jsx(AccordionItem, { id: "invoice-and-shipping", isDisabled: isDisabled, title: "Factuur- en verzendinformatie", children: jsx(BillingAndInvoiceInformation, { billToAddress: {
                                 address1: cart.billTo?.address1,
                                 address2: cart.billTo?.address2,
                                 address3: cart.billTo?.address3,

package/dist/pages/checkout/payment-page/payment-page-content.d.ts

@@ -5,11 +5,11 @@ export interface PaymentContentProps {
     formId: string;
     hasAtp: boolean;
     isProcessing: boolean;
-    isValidating: boolean;
+    isValidatingVAT: boolean;
     onPaymentComplete: ({ cartId }: {
         cartId: string;
     }) => void;
     setIsProcessing: (isProcessing: boolean) => void;
-    setIsValidating: (isValidating: boolean) => void;
+    setIsValidatingVAT: (isValidating: boolean) => void;
 }
-export declare function PaymentPageContent({ atp, cart, formId, hasAtp, isProcessing, isValidating, onPaymentComplete, setIsProcessing, setIsValidating, }: PaymentContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function PaymentPageContent({ atp, cart, formId, hasAtp, isProcessing, isValidatingVAT, onPaymentComplete, setIsProcessing, setIsValidatingVAT, }: PaymentContentProps): import("react/jsx-runtime").JSX.Element;

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

@@ -7,24 +7,24 @@ 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 { Page } from '../../components/page/page.js';
-import { CHECKOUT_PATHS } from '../constants.js';
+import { PATHS } from '../../paths.js';
 import { CheckoutPageLayout } from '../layouts/checkout-page-layout/checkout-page-layout.js';
 import { CheckoutPageSection } from '../layouts/checkout-page-layout/components/checkout-page-section.js';
 import { CheckoutPageSectionContent } from '../layouts/checkout-page-layout/components/checkout-page-section-content.js';
 import { Payment } from './components/payment.js';
 
-function PaymentPageContent({ atp, cart, formId, hasAtp, isProcessing, isValidating, onPaymentComplete, setIsProcessing, setIsValidating, }) {
+function PaymentPageContent({ atp, cart, formId, hasAtp, isProcessing, isValidatingVAT, onPaymentComplete, setIsProcessing, setIsValidatingVAT, }) {
     const t = useFormattedMessage();
-    return (jsx(Page, { breadCrumb: [
-            { href: CHECKOUT_PATHS.HOME, label: t('Home') },
+    return (jsx(Page, { breadcrumb: [
+            { href: PATHS.HOME, label: t('Home') },
             {
-                href: CHECKOUT_PATHS.REVIEW_AND_SUBMIT,
+                href: PATHS.REVIEW_AND_SUBMIT,
                 label: t('Review and payment'),
             },
         ], 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" })) : isValidating ? (jsx(FormattedMessage, { id: "Validating" })) : (false), type: "submit", children: jsx(FormattedMessage, { id: "Pay" }) })),
+                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, onPaymentComplete: onPaymentComplete, onProcessing: setIsProcessing, onValidating: setIsValidating }) }) }), 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: {
+                    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, isValidatingVAT: isValidatingVAT, 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,

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

@@ -7,7 +7,7 @@ import { useNavigate } from '../../../shared/routing/route-provider.js';
 import { hasNo } from '../../../shared/utils/types.js';
 import { ErrorPage } from '../../error-page/error-page.js';
 import { LoadingPage } from '../../loading-page/loading-page.js';
-import { CHECKOUT_PATHS } from '../constants.js';
+import { PATHS } from '../../paths.js';
 import { useHasReturnedFromAdyen } from './hooks/use-has-returned-from-adyen.js';
 import { PaymentPageContent } from './payment-page-content.js';
 
@@ -25,7 +25,7 @@ function PaymentPage() {
     const [isValidating, setIsValidating] = useState(false);
     const { isNavigating, navigate } = useNavigate();
     const onPaymentComplete = useCallback(({ cartId }) => {
-        navigate(`${CHECKOUT_PATHS.ORDER_CONFIRMATION}?cartId=${cartId}`);
+        navigate(`${PATHS.ORDER_CONFIRMATION}?cartId=${cartId}`);
     }, [navigate]);
     useEffect(() => {
         if (isNavigating)
@@ -33,15 +33,15 @@ function PaymentPage() {
         if (isAuthenticated === undefined)
             return;
         if (!isAuthenticated)
-            return navigate(CHECKOUT_PATHS.CHECKOUT_SHIPPING_VIA_SIGNIN);
+            return navigate(PATHS.CHECKOUT_SHIPPING_VIA_SIGNIN);
         if (hasNo(cart))
             return;
         if (hasNo(cart.cartLines) || cart.cartLines.length === 0)
-            return navigate(CHECKOUT_PATHS.CART);
+            return navigate(PATHS.CART);
         if (hasNo(cart.billTo))
-            return navigate(CHECKOUT_PATHS.CHECKOUT_SHIPPING_VIA_SIGNIN);
+            return navigate(PATHS.CHECKOUT_SHIPPING_VIA_SIGNIN);
         if (hasNo(cart.billTo.address1))
-            return navigate(CHECKOUT_PATHS.CHECKOUT_SHIPPING);
+            return navigate(PATHS.CHECKOUT_SHIPPING);
     }, [cart, navigate, isAuthenticated, isNavigating]);
     if (error)
         return jsx(ErrorPage, { error: error });
@@ -54,7 +54,7 @@ function PaymentPage() {
         cart.cartLines.length === 0 ||
         hasNo(cart.billTo?.address1))
         return null;
-    return (jsx(PaymentPageContent, { atp: atp, cart: cart, formId: PAYMENT_FORM_ID, hasAtp: Boolean(hasAtp), isProcessing: isProcessing, isValidating: isValidating, onPaymentComplete: onPaymentComplete, setIsProcessing: setIsProcessing, setIsValidating: setIsValidating }));
+    return (jsx(PaymentPageContent, { atp: atp, cart: cart, formId: PAYMENT_FORM_ID, hasAtp: Boolean(hasAtp), isProcessing: isProcessing, isValidatingVAT: isValidating, onPaymentComplete: onPaymentComplete, setIsProcessing: setIsProcessing, setIsValidatingVAT: setIsValidating }));
 }
 
 export { PaymentPage };

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

@@ -6,6 +6,7 @@ import { TextField } from '../../../../forms/text-field/text-field.js';
 import { FormattedMessage } from '../../../../intl/formatted-message.js';
 import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
 import { RouteLink } from '../../../../shared/routing/route-link.js';
+import { PATHS } from '../../../paths.js';
 import { CheckoutPageSection } from '../../layouts/checkout-page-layout/components/checkout-page-section.js';
 import { CheckoutPageSectionContent } from '../../layouts/checkout-page-layout/components/checkout-page-section-content.js';
 import { CheckoutPageSectionLink } from '../../layouts/checkout-page-layout/components/checkout-page-section-link.js';
@@ -13,7 +14,6 @@ import { EDIT_ADDRESS_FORM_ID } from './edit-address.js';
 import { SonicAddress } from './sonic-address.js';
 import styles from './readonly-address.module.css.js';
 
-const ACCOUNT_ADDRESSES_PATH = '/MyAccount/Addresses';
 function ReadOnlyAddresses({ billTo, isLoading, isPickup, notes, onSubmit, shipTo, }) {
     const t = useFormattedMessage();
     return (jsxs(Form, { "data-test-selector": "billToAddressForm", id: EDIT_ADDRESS_FORM_ID, onSubmit: e => {
@@ -22,7 +22,7 @@ function ReadOnlyAddresses({ billTo, isLoading, isPickup, notes, onSubmit, shipT
             onSubmit({
                 notes: formData.get('notes')?.toString() || '',
             });
-        }, children: [jsxs(CheckoutPageSection, { title: jsx(FormattedMessage, { id: "Billing address" }), children: [jsx(CheckoutPageSectionLink, { children: jsxs(RouteLink, { color: "secondary", href: ACCOUNT_ADDRESSES_PATH, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit billing address" }), " >"] }) }), jsxs(CheckoutPageSectionContent, { children: [billTo && (jsx(Address, { address: {
+        }, children: [jsxs(CheckoutPageSection, { title: jsx(FormattedMessage, { id: "Billing address" }), children: [jsx(CheckoutPageSectionLink, { children: jsxs(RouteLink, { color: "secondary", href: PATHS.ACCOUNT_ADDRESSES, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit billing address" }), " >"] }) }), jsxs(CheckoutPageSectionContent, { children: [billTo && (jsx(Address, { address: {
                                     address1: billTo.address1,
                                     address2: billTo.address2,
                                     address3: billTo.address3,
@@ -34,7 +34,7 @@ function ReadOnlyAddresses({ billTo, isLoading, isPickup, notes, onSubmit, shipT
                                     lastName: billTo.lastName,
                                     phone: billTo.phone,
                                     postalCode: billTo.postalCode,
-                                } })), jsx("div", { className: styles.notes, children: jsx(TextField, { defaultValue: notes, isDisabled: isLoading, isMultiline: true, label: t('Add order notes'), name: "notes", rows: 3, showLabel: true }) })] })] }), jsxs(CheckoutPageSection, { title: jsx(FormattedMessage, { id: isPickup ? 'Pickup address' : 'Shipping address' }), children: [!isPickup && (jsx(CheckoutPageSectionLink, { children: jsxs(RouteLink, { color: "secondary", href: ACCOUNT_ADDRESSES_PATH, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit shipping address" }), " >"] }) })), jsx(CheckoutPageSectionContent, { children: isPickup ? (jsx(SonicAddress, {})) : (jsxs(Fragment, { children: [jsx(Checkbox, { className: styles['use-invoice-checkbox'], "data-test-selector": "checkboxUseBillingAddress", isDisabled: true, isSelected: true, children: jsx(FormattedMessage, { id: "Use billing address" }) }), shipTo && (jsx(Address, { address: {
+                                } })), jsx("div", { className: styles.notes, children: jsx(TextField, { defaultValue: notes, isDisabled: isLoading, isMultiline: true, label: t('Add order notes'), name: "notes", rows: 3, showLabel: true }) })] })] }), jsxs(CheckoutPageSection, { title: jsx(FormattedMessage, { id: isPickup ? 'Pickup address' : 'Shipping address' }), children: [!isPickup && (jsx(CheckoutPageSectionLink, { children: jsxs(RouteLink, { color: "secondary", href: PATHS.ACCOUNT_ADDRESSES, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit shipping address" }), " >"] }) })), jsx(CheckoutPageSectionContent, { children: isPickup ? (jsx(SonicAddress, {})) : (jsxs(Fragment, { children: [jsx(Checkbox, { className: styles['use-invoice-checkbox'], "data-test-selector": "checkboxUseBillingAddress", isDisabled: true, isSelected: true, children: jsx(FormattedMessage, { id: "Use billing address" }) }), shipTo && (jsx(Address, { address: {
                                         address1: shipTo.address1,
                                         address2: shipTo.address2,
                                         address3: shipTo.address3,

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

@@ -7,7 +7,7 @@ import { Select } from '../../../forms/select/select.js';
 import { FormattedMessage } from '../../../intl/formatted-message.js';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
 import { Page } from '../../components/page/page.js';
-import { CHECKOUT_PATHS } from '../constants.js';
+import { PATHS } from '../../paths.js';
 import { CheckoutPageLayout } from '../layouts/checkout-page-layout/checkout-page-layout.js';
 import { CheckoutPageSection } from '../layouts/checkout-page-layout/components/checkout-page-section.js';
 import { CheckoutPageSectionContent } from '../layouts/checkout-page-layout/components/checkout-page-section-content.js';
@@ -24,10 +24,10 @@ function ShippingPageContent({ cart, editAddress, errorPatchBillingAddress, fulf
         return Boolean(cart.billTo?.address1);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [Boolean(cart)]);
-    return (jsx(Page, { breadCrumb: [
-            { href: CHECKOUT_PATHS.HOME, label: t('Home') },
+    return (jsx(Page, { breadcrumb: [
+            { href: PATHS.HOME, label: t('Home') },
             {
-                href: CHECKOUT_PATHS.CHECKOUT_SHIPPING,
+                href: PATHS.CHECKOUT_SHIPPING,
                 label: t('Shipping details'),
             },
         ], title: t('Shipping details'), children: jsxs(CheckoutPageLayout, { actions: {

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

@@ -10,7 +10,7 @@ import { useNavigate } from '../../../shared/routing/route-provider.js';
 import { hasNo } from '../../../shared/utils/types.js';
 import { ErrorPage } from '../../error-page/error-page.js';
 import { LoadingPage } from '../../loading-page/loading-page.js';
-import { CHECKOUT_PATHS } from '../constants.js';
+import { PATHS } from '../../paths.js';
 import { EditAddresses } from './components/edit-address.js';
 import { ReadOnlyAddresses } from './components/readonly-address.js';
 import { usePatchShippingDetails } from './hooks/use-patch-shipping-details.js';
@@ -38,13 +38,13 @@ function ShippingPage() {
         if (isAuthenticated === undefined)
             return;
         if (!isAuthenticated)
-            return navigate(CHECKOUT_PATHS.CHECKOUT_SHIPPING_VIA_SIGNIN);
+            return navigate(PATHS.CHECKOUT_SHIPPING_VIA_SIGNIN);
         if (hasNo(cart))
             return;
         if (hasNo(cart.cartLines) || cart.cartLines.length === 0)
-            return navigate(CHECKOUT_PATHS.CART);
+            return navigate(PATHS.CART);
         if (hasNo(cart.billTo))
-            return navigate(CHECKOUT_PATHS.CHECKOUT_SHIPPING_VIA_SIGNIN);
+            return navigate(PATHS.CHECKOUT_SHIPPING_VIA_SIGNIN);
     }, [cart, navigate, isAuthenticated, isNavigating]);
     useEffect(() => {
         /* Guards for when the bill to address is saved and we should navigate to the next page */
@@ -58,7 +58,7 @@ function ShippingPage() {
             return location?.reload();
         if (hasNo(cart?.billTo?.address1))
             return;
-        return navigate(CHECKOUT_PATHS.REVIEW_AND_SUBMIT);
+        return navigate(PATHS.REVIEW_AND_SUBMIT);
     }, [isSuccess, cart, navigate, isNavigating, isPatching, isError]);
     useEffect(() => {
         if (!cart || gaEventPushed.current)

package/dist/pages/components/page/page.d.ts

@@ -2,9 +2,11 @@ import { ReactNode } from 'react';
 import { BreadcrumbLink } from '../../../breadcrumbs/breadcrumb';
 import { PageMetaDataProps } from '../page-meta-data/page-meta-data';
 export interface PageProps extends PageMetaDataProps {
-    breadCrumb: BreadcrumbLink[];
+    breadcrumb?: BreadcrumbLink[];
     children: ReactNode;
     className?: string;
+    fluid?: boolean;
+    fullHeight?: boolean;
     title?: string;
 }
-export declare function Page({ alternateLanguageUrls, breadCrumb, canonicalUrl, children, className, meta, openGraph, title, windowTitle, }: PageProps): import("react/jsx-runtime").JSX.Element;
+export declare function Page({ alternateLanguageUrls, breadcrumb, canonicalUrl, children, className, fluid, fullHeight, meta, openGraph, title, windowTitle, }: PageProps): import("react/jsx-runtime").JSX.Element;

package/dist/pages/components/page/page.js

@@ -1,17 +1,15 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Breadcrumb } from '../../../breadcrumbs/breadcrumb.js';
 import { Heading } from '../../../typography/heading/heading.js';
 import { PageContainer } from '../page-container/page-container.js';
 import { PageMetaData } from '../page-meta-data/page-meta-data.js';
-import styles from './page.module.css.js';
 
 function PageTitle({ children }) {
-    return (jsx(Heading, { italic: true, uppercase: true, breakpoints: { lg: 'm', xxl: 'xl' }, className: styles.title, size: "s", tag: "h1", children: children }));
+    return (jsx(Heading, { italic: true, uppercase: true, breakpoints: { lg: 'm', xxl: 'xl' }, size: "s", tag: "h1", children: children }));
 }
-function Page({ alternateLanguageUrls, breadCrumb, canonicalUrl, children, className, meta, openGraph, title, windowTitle, }) {
-    return (jsxs(PageContainer, { className: clsx(styles.page, className), children: [jsx(PageMetaData, { alternateLanguageUrls: alternateLanguageUrls, canonicalUrl: canonicalUrl, meta: meta, openGraph: openGraph, windowTitle: windowTitle }), jsx("div", { className: styles.breadcrumb, children: jsx(Breadcrumb, { links: breadCrumb }) }), title && jsx(PageTitle, { children: title }), children] }));
+function Page({ alternateLanguageUrls, breadcrumb, canonicalUrl, children, className, fluid, fullHeight, meta, openGraph, title, windowTitle, }) {
+    return (jsxs(Fragment, { children: [jsx(PageMetaData, { alternateLanguageUrls: alternateLanguageUrls, canonicalUrl: canonicalUrl, meta: meta, openGraph: openGraph, windowTitle: windowTitle }), jsx(PageContainer, { breadcrumbSlot: breadcrumb && jsx(Breadcrumb, { links: breadcrumb }), className: className, fluid: fluid, fullHeight: fullHeight, titleSlot: title && jsx(PageTitle, { children: title }), children: children })] }));
 }
 
 export { Page };

package/dist/pages/components/page-container/page-container.d.ts

@@ -1,5 +1,9 @@
 import { ReactNode } from 'react';
-export declare function PageContainer({ children, className, }: {
+export declare function PageContainer({ breadcrumbSlot, children, className, fluid, fullHeight, titleSlot, }: {
+    breadcrumbSlot?: ReactNode;
     children: ReactNode;
     className?: string;
+    fluid?: boolean;
+    fullHeight?: boolean;
+    titleSlot?: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/pages/components/page-container/page-container.js

@@ -1,9 +1,9 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import styles from './page-container.module.css.js';
 
-function PageContainer({ children, className, }) {
-    return (jsx("div", { className: styles['page-container'], children: jsx("div", { className: clsx(styles['inner-page-container'], className), children: children }) }));
+function PageContainer({ breadcrumbSlot, children, className, fluid, fullHeight, titleSlot, }) {
+    return (jsx("div", { className: clsx(styles['page-container'], fullHeight && styles['full-height'], fluid && styles['fluid'], className), children: jsxs("main", { className: styles['page-main'], children: [breadcrumbSlot && (jsx("div", { className: styles.breadcrumb, children: breadcrumbSlot })), titleSlot && jsx("div", { className: styles.title, children: titleSlot }), jsx("div", { className: styles.content, children: children })] }) }));
 }
 
 export { PageContainer };

package/dist/pages/components/page-container/page-container.module.css.js

@@ -1,3 +1,3 @@
-var styles = {"page-container":"page-container-module-eFYSe","inner-page-container":"page-container-module-ZhEJP"};
+var styles = {"page-container":"page-container-module-eFYSe","page-main":"page-container-module-JkoQY","full-height":"page-container-module-iCrH5","fluid":"page-container-module-glxAS","breadcrumb":"page-container-module-WfQXa","title":"page-container-module-GKN5s","content":"page-container-module-r0SOZ"};
 
 export { styles as default };

package/dist/pages/error-page/error-page.js

@@ -5,6 +5,7 @@ import { isRequestError } from '../../shared/fetch/request.js';
 import { environment } from '../../shared/utils/environment.js';
 import { Heading } from '../../typography/heading/heading.js';
 import { Page } from '../components/page/page.js';
+import { PATHS } from '../paths.js';
 
 function ErrorPage({ error }) {
     useEffect(() => {
@@ -13,9 +14,9 @@ function ErrorPage({ error }) {
                 throw error;
         }, 0);
     }, [error]);
-    return (jsx(Page, { breadCrumb: [
-            { href: '/', label: 'Home' },
-            { href: '/', label: 'Error' },
+    return (jsx(Page, { breadcrumb: [
+            { href: PATHS.HOME, label: 'Home' },
+            { href: PATHS.HOME, label: 'Error' },
         ], title: "Something went wrong", children: environment !== 'production' && (jsxs(Fragment, { children: [jsx(Heading, { size: "l", children: isRequestError(error) ? (jsxs(Fragment, { children: [error.status, " - ", error.statusText || 'Unknown error'] })) : (jsx(Fragment, { children: error.message })) }), isRequestError(error) && (jsxs(Fragment, { children: [jsx(Heading, { size: "xs", children: "Error details" }), jsx(Heading, { size: "xxs", children: "Body" }), jsx("pre", { children: JSON.stringify(error.body, null, 2) }), jsx(Heading, { size: "xxs", children: "Options" }), jsx("pre", { children: JSON.stringify(error.options, null, 2) })] }))] })) }));
 }
 

package/dist/pages/{checkout/constants.d.ts → paths.d.ts}

@@ -1,8 +1,11 @@
-export declare const CHECKOUT_PATHS: {
+export declare const PATHS: {
+    readonly ACCOUNT: "/account";
+    readonly ACCOUNT_ADDRESSES: "/MyAccount/Addresses";
     readonly CART: "/cart";
     readonly CHECKOUT_SHIPPING: "/CheckoutShipping";
     readonly CHECKOUT_SHIPPING_VIA_SIGNIN: "/signin?returnUrl=/CheckoutShipping";
     readonly HOME: "/";
     readonly ORDER_CONFIRMATION: "/OrderConfirmation";
     readonly REVIEW_AND_SUBMIT: "/CheckoutReviewAndSubmit";
+    readonly SIGN_IN: "/signin";
 };

package/dist/pages/{checkout/constants.js → paths.js}

@@ -1,10 +1,13 @@
-const CHECKOUT_PATHS = {
+const PATHS = {
+    ACCOUNT: '/account',
+    ACCOUNT_ADDRESSES: '/MyAccount/Addresses',
     CART: '/cart',
     CHECKOUT_SHIPPING: '/CheckoutShipping',
     CHECKOUT_SHIPPING_VIA_SIGNIN: '/signin?returnUrl=/CheckoutShipping',
     HOME: '/',
     ORDER_CONFIRMATION: '/OrderConfirmation',
     REVIEW_AND_SUBMIT: '/CheckoutReviewAndSubmit',
+    SIGN_IN: '/signin',
 };
 
-export { CHECKOUT_PATHS };
+export { PATHS };

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

@@ -20,7 +20,7 @@ function ProductDetails({ data, priceComponent, recentlyViewedComponent, }) {
         },
         product,
     });
-    return (jsx(Page, { alternateLanguageUrls: page.alternateLanguageUrls, breadCrumb: breadCrumb, canonicalUrl: page.canonicalPath, meta: {
+    return (jsx(Page, { alternateLanguageUrls: page.alternateLanguageUrls, breadcrumb: breadCrumb, canonicalUrl: page.canonicalPath, meta: {
             description: page.metaDescription,
             keywords: page.metaKeywords,
         }, openGraph: {

package/dist/pages/product/product-listing-page/no-results/no-results.js

@@ -8,7 +8,7 @@ import styles from './no-results.module.css.js';
 
 function NoResults({ content, title }) {
     const { lg } = useBreakpoint();
-    return (jsxs("div", { className: styles['no-results'], children: [jsx(Heading, { bold: false, className: styles.title, size: lg ? 's' : 'xs', tag: "h2", children: title }), jsx("p", { className: styles.body, children: content }), jsx("div", { className: styles.buttons, children: jsx(RouteButton, { withArrow: true, href: "/", size: "md", children: jsx(FormattedMessage, { id: "Continue shopping" }) }) })] }));
+    return (jsxs("div", { className: styles['no-results'], children: [jsx(Heading, { bold: false, className: styles.title, size: lg ? 's' : 'xs', tag: "h2", children: title }), jsx("p", { className: styles.body, children: content }), jsx("div", { className: styles.buttons, children: jsx(RouteButton, { withArrow: true, "data-test-selector": "buttonContinueShopping", href: "/", size: "md", children: jsx(FormattedMessage, { id: "Continue shopping" }) }) })] }));
 }
 
 export { NoResults };

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

@@ -24,7 +24,7 @@ import styles from './product-listing-page.module.css.js';
 function ProductListing({ data, searchClient, }) {
     const languageCode = useLanguageCode();
     const category = data.breadCrumb.slice(1).map(breadCrumb => breadCrumb.label);
-    return (jsx(AlgoliaProvider, { categoryPages: data.categoryPages, hierarchicalCategories: data.hierarchicalCategories, languageCode: languageCode, offlineSearchClient: offlineSearchClient, searchClient: searchClient, children: jsx(Page, { alternateLanguageUrls: data.page.alternateLanguageUrls, breadCrumb: data.breadCrumb, canonicalUrl: data.page.canonicalPath, className: styles['product-listing'], meta: {
+    return (jsx(AlgoliaProvider, { categoryPages: data.categoryPages, hierarchicalCategories: data.hierarchicalCategories, languageCode: languageCode, offlineSearchClient: offlineSearchClient, searchClient: searchClient, children: jsx(Page, { alternateLanguageUrls: data.page.alternateLanguageUrls, breadcrumb: data.breadCrumb, canonicalUrl: data.page.canonicalPath, className: styles['product-listing'], meta: {
                 description: data.page.metaDescription,
                 keywords: data.page.metaKeywords,
             }, openGraph: {

package/dist/pages/product/search-result-page/search-results-page.js

@@ -27,7 +27,9 @@ function SearchResultsPage({ location, searchClient, }) {
     const keyword = Array.isArray(keywords) ? keywords.join(' ') : keywords;
     if (!keyword)
         return jsx("h1", { children: "No search results...." });
-    return (jsx(AlgoliaProvider, { languageCode: languageCode, query: keyword, searchClient: searchClient, children: jsx(Page, { breadCrumb: [], 
+    return (jsx(AlgoliaProvider, { languageCode: languageCode, query: keyword, searchClient: searchClient, children: jsx(Page
+        // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
+        , { 
             // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
             canonicalUrl: typeof window === 'undefined' ? '' : window.location.href, className: styles['search-results'], title: t("'{0}' in all products", {
                 replacementValues: { 0: keyword },

package/dist/shared/api/storefront/hooks/authentication/use-create-guest-account.d.ts

@@ -1,4 +1,2 @@
 import { AccountModel } from 'shared/api/storefront/model/storefront.model';
-export declare function useCreateGuestAccount(): import("@tanstack/react-query").UseMutationResult<AccountModel, Error, {
-    defaultWarehouseId: string;
-}, unknown>;
+export declare function useCreateGuestAccount(): import("@tanstack/react-query").UseMutationResult<AccountModel, Error, void, unknown>;