@sonic-equipment/ui 132.0.0 → 133.0.0

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

@@ -0,0 +1,115 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import { PrintButton } from '../../../buttons/print-button/print-button.js';
+import { OrderLineCard } from '../../../cards/orderline-card/orderline-card.js';
+import { CartTotals } from '../../../cart-totals/cart-totals.js';
+import { InfoDisplay } from '../../../display/info-display/info-display.js';
+import { FormattedMessage } from '../../../intl/formatted-message.js';
+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 { LoadingPage } from '../../loading-page/loading-page.js';
+import { useIsAuthenticated } from '../../../shared/api/storefront/hooks/authentication/use-is-authenticated.js';
+import { useFetchCartById } from '../../../shared/api/storefront/hooks/cart/use-fetch-cart-by-id.js';
+import { useSaveCartForLater } from '../../../shared/api/storefront/hooks/cart/use-save-cart-for-later.js';
+import { RouteButton } from '../../../shared/routing/route-button.js';
+import { useNavigate } from '../../../shared/routing/route-provider.js';
+import { formatDateToLocaleString } from '../../../shared/utils/date.js';
+import { hasNo } from '../../../shared/utils/types.js';
+import { useToast } from '../../../toast/use-toast.js';
+import { Page } from '../../components/page/page.js';
+import { ErrorPage } from '../../error-page/error-page.js';
+import { BillingAndInvoiceInformation } from '../components/billing-and-invoice-information.js';
+import { CHECKOUT_PATHS } from '../constants.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 styles from './order-confirmation-page.module.css.js';
+
+function OrderConfirmationPage({ cartId }) {
+    const isAuthenticated = useIsAuthenticated();
+    const t = useFormattedMessage();
+    const cultureCode = useCultureCode();
+    const { addToast } = useToast();
+    const { isNavigating, navigate } = useNavigate();
+    const { data: cart, error, isLoading: cartIsLoading, } = useFetchCartById({
+        id: cartId,
+    });
+    useEffect(() => {
+        if (!cart)
+            return;
+        if (isAuthenticated === undefined)
+            return;
+        if (!isAuthenticated)
+            return navigate(CHECKOUT_PATHS.CART);
+        if (cart.status === 'Cart')
+            navigate(CHECKOUT_PATHS.CART);
+    }, [cart, navigate, isAuthenticated]);
+    const saveCartForLater = useSaveCartForLater({
+        onError: () => {
+            addToast({
+                body: jsx(FormattedMessage, { id: "Unable to save cart for later." }),
+                isUserDismissable: false,
+                messageType: 'danger',
+            });
+        },
+        onSuccess: () => {
+            addToast({
+                body: jsx(FormattedMessage, { id: "Saved cart for later." }),
+                isUserDismissable: false,
+                messageType: 'success',
+            });
+        },
+    });
+    if (error)
+        return jsx(ErrorPage, { error: error });
+    if (cartIsLoading || isNavigating)
+        return jsx(LoadingPage, {});
+    if (!isAuthenticated ||
+        hasNo(cart) ||
+        hasNo(cart.cartLines) ||
+        cart.cartLines.length === 0) {
+        return null;
+    }
+    return (jsx(Page, { breadCrumb: [{ href: CHECKOUT_PATHS.HOME, label: t('Home') }], title: t('Order confirmation'), children: jsx(CheckoutPageLayout, { actions: {
+                primary: (jsx(RouteButton, { withArrow: true, "data-test-selector": "checkoutShippingCartTotalContinueButton", href: "/", children: jsx(FormattedMessage, { id: "Continue shopping" }) })),
+                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.requestedDeliveryDate && (jsx(InfoDisplay, { id: "requested-delivery-date", label: t('Requested delivery date'), value: formatDateToLocaleString(new Date(cart.requestedDeliveryDate), 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,
+                                    city: cart.billTo?.city,
+                                    companyName: cart.billTo?.companyName,
+                                    country: cart.billTo?.country?.name,
+                                    email: cart.billTo?.email,
+                                    phone: cart.billTo?.phone,
+                                    postalCode: cart.billTo?.postalCode,
+                                }, shipToAddress: {
+                                    address1: cart.shipTo?.address1,
+                                    address2: cart.shipTo?.address2,
+                                    address3: cart.shipTo?.address3,
+                                    city: cart.shipTo?.city,
+                                    companyName: cart.shipTo?.companyName,
+                                    country: cart.shipTo?.country?.name,
+                                    email: cart.shipTo?.email,
+                                    phone: cart.shipTo?.phone,
+                                    postalCode: cart.shipTo?.postalCode,
+                                } }) }) }), jsx(CheckoutPageSection, { hasBorder: false, title: t('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,
+                                            '2': cartLine.smallImagePath,
+                                            '3': cartLine.smallImagePath,
+                                            altText: cartLine.altText,
+                                        },
+                                        title: cartLine.altText,
+                                    }, isReadonly: true, price: {
+                                        originalTotalPrice: cartLine.pricing?.extendedUnitNetPrice || 0,
+                                        pricePerUnit: cartLine.pricing?.unitNetPrice || 0,
+                                        totalPrice: cartLine.pricing?.extendedUnitNetPrice || 0,
+                                    }, productId: cartLine.productId || '', quantity: cartLine.qtyOrdered || 1, sku: cartLine.erpNumber || '', tags: [], title: cartLine.productName }, cartLine.id))) }) }) })] }) }) }));
+}
+
+export { OrderConfirmationPage };

package/dist/pages/checkout/order-confirmation-page/order-confirmation-page.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"general-order-info":"order-confirmation-page-module-UvVzH"};
+
+export { styles as default };

package/dist/{checkout → pages/checkout/payment-page/components}/adyen-payment.js

@@ -3,11 +3,11 @@ import { useRef, useEffect } from 'react';
 import AdyenCheckout from '@adyen/adyen-web';
 import clsx from 'clsx';
 import qs from 'query-string';
-import { useCultureCode } from '../intl/use-culture-code.js';
-import { useCreateAdyenSession } from '../shared/api/storefront/hooks/payment/use-create-adyen-session.js';
-import { useFetchAdyenConfig } from '../shared/api/storefront/hooks/payment/use-fetch-adyen-config.js';
-import { getAdyenPaymentDetails, postAdyenPayment } from '../shared/api/storefront/services/cart-service.js';
-import { parseAmount } from './parse-amount.js';
+import { useCultureCode } from '../../../../intl/use-culture-code.js';
+import { useCreateAdyenSession } from '../../../../shared/api/storefront/hooks/payment/use-create-adyen-session.js';
+import { useFetchAdyenConfig } from '../../../../shared/api/storefront/hooks/payment/use-fetch-adyen-config.js';
+import { getAdyenPaymentDetails, postAdyenPayment } from '../../../../shared/api/storefront/services/cart-service.js';
+import { parseAmount } from '../utils/parse-amount.js';
 import styles from './adyen-payment.module.css.js';
 
 function AdyenPayment({ amount, cartId, countryCode, currencyCode, customerId, dropinRef, environment, onComplete, onError, orderAmount, returnUrl, }) {

package/dist/pages/checkout/payment-page/components/adyen-payment.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"loading":"adyen-payment-module-rV-qW"};
+
+export { styles as default };

package/dist/{checkout → pages/checkout/payment-page/components}/payment.d.ts

@@ -1,10 +1,12 @@
-import { AdyenPaymentModel, CartModel, CheckoutAtpEntry } from '../shared/api/storefront/model/storefront.model';
+import { AdyenPaymentModel, CartModel, CheckoutAtpEntry } from '../../../../shared/api/storefront/model/storefront.model';
 export declare function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete, onProcessing, onValidating, }: {
     atp: CheckoutAtpEntry[];
     cart: CartModel;
     form: string;
     onError?: (error: unknown, result: AdyenPaymentModel | null) => void;
-    onPaymentComplete: () => void;
+    onPaymentComplete: ({ cartId }: {
+        cartId: string;
+    }) => void;
     onProcessing: (processing: boolean) => void;
     onValidating: (validating: boolean) => void;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/{checkout → pages/checkout/payment-page/components}/payment.js

@@ -1,25 +1,26 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
 import { Form } from 'react-aria-components';
-import { Address } from '../address/address.js';
-import { Accordion } from '../collapsables/accordion/accordion.js';
-import { AccordionItem } from '../collapsables/accordion/accordion-item.js';
-import { Checkbox } from '../forms/checkbox/checkbox.js';
-import { Label } from '../forms/label/label.js';
-import { Select } from '../forms/select/select.js';
-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 { usePatchSession } from '../shared/api/storefront/hooks/authentication/use-patch-session.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';
-import { useInvalidateAdyen } from '../shared/api/storefront/hooks/payment/use-invalidate-adyen.js';
-import { validateVATNumber } from '../shared/api/storefront/services/finance-service.js';
-import { useDebouncedCallback } from '../shared/hooks/use-debounced-callback.js';
-import { currencySymbolToISO } from '../shared/model/currency.js';
-import { Tooltip } from '../tooltip/tooltip.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';
+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 { usePatchSession } from '../../../../shared/api/storefront/hooks/authentication/use-patch-session.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';
+import { useInvalidateAdyen } from '../../../../shared/api/storefront/hooks/payment/use-invalidate-adyen.js';
+import { validateVATNumber } from '../../../../shared/api/storefront/services/finance-service.js';
+import { useDebouncedCallback } from '../../../../shared/hooks/use-debounced-callback.js';
+import { currencySymbolToISO } from '../../../../shared/model/currency.js';
+import { Tooltip } from '../../../../tooltip/tooltip.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 { useHasReturnedFromAdyen } from './use-has-returned-from-adyen.js';
 import styles from './payment.module.css.js';
 
 function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete, onProcessing, onValidating, }) {
@@ -34,11 +35,16 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
     const t = useFormattedMessage();
     const cartRef = useRef(_cart);
     const cart = cartRef.current;
-    const hasAtp = atp.length > 0 && atp[0]?.date !== null;
+    const hasAtp = atp.length > 1;
     const [asSoonAsPossible, setAsSoonAsPossible] = useState(!hasAtp);
     const [deliveryDate, setDeliveryDate] = useState(cart.requestedDeliveryDateDisplay?.toString() || '');
-    const hasReturnedFromAdyen = useHasReturnedFromAdyen();
+    const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(cart.paymentOptions?.paymentMethods?.[0]?.name || 'ADY');
     const countryCode = _cart.billTo?.country?.abbreviation;
+    const isAdyenPayment = selectedPaymentMethod === 'ADY' &&
+        cart.paymentOptions &&
+        cart.billTo?.id &&
+        countryCode;
+    const hasReturnedFromAdyen = useHasReturnedFromAdyen();
     const isProcessing = useMemo(() => hasReturnedFromAdyen || isPlacingCart, [isPlacingCart, hasReturnedFromAdyen]);
     useEffect(() => {
         cartRef.current = _cart;
@@ -53,7 +59,9 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
         onProcessing(isProcessing);
     }, [isProcessing, onProcessing]);
     const [validationErrors, setValidationErrors] = useState({});
-    const atpSelectOptions = atp.reduce((acc, atp) => ({
+    const atpSelectOptions = atp
+        .filter(atp => Boolean(atp.date))
+        .reduce((acc, atp) => ({
         ...acc,
         [atp.date || '']: atp.displayDate,
     }), {});
@@ -96,10 +104,6 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
             setIsValidatingVAT(false);
         }
     }, 500);
-    const isAdyenPayment = cart.paymentMethod?.name !== 'PBI' &&
-        cart.paymentOptions &&
-        cart.billTo?.id &&
-        countryCode;
     async function onSubmit(e) {
         const formData = new FormData(e.currentTarget);
         const cart = cartRef.current;
@@ -115,18 +119,19 @@ 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(),
+            };
             try {
-                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(),
-                    },
+                cartRef.current = await patchCart({
+                    cart: updatedCart,
                 });
             }
             catch (error) {
@@ -146,15 +151,17 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
             const cart = cartRef.current;
             try {
                 await placeOrder({ cart });
+                return onPaymentComplete({ cartId: cart.trackId });
             }
             catch (error) {
                 console.error(error);
-                setAPIError(error);
+                setPaymentError(error);
             }
-            return onPaymentComplete();
         }
     }
-    const onComplete = useCallback(async (result) => {
+    const onComplete = useCallback(
+    /* Adyen payment continuation after submit */
+    async (result) => {
         const cart = cartRef.current;
         try {
             await placeOrder({
@@ -168,12 +175,13 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
                     },
                 },
             });
+            return onPaymentComplete({ cartId: cart.trackId });
         }
         catch (error) {
             console.error(error);
+            // TODO: Errors from the placeOrder call are not displayed
             setAPIError(error);
         }
-        return onPaymentComplete();
     }, [onPaymentComplete, placeOrder]);
     const onError = useCallback((error, result) => {
         invalidateAdyen();
@@ -201,13 +209,35 @@ 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, 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 ||
+                }, 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", options: paymentMethodOptions, 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, environment: "test", onComplete: onComplete, onError: onError, orderAmount: cart.orderGrandTotal, returnUrl: typeof window === 'undefined'
+                    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, 
+                // TODO: Use the correct Adyen environment before going live
+                environment: "test", onComplete: onComplete, onError: onError, orderAmount: cart.orderGrandTotal, returnUrl: typeof window === 'undefined'
                     ? ''
-                    : // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
-                        `https://sonicequipment.commerce.insitesandbox.com${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." }) })), jsxs("div", { className: styles['invoice-and-shipping'], children: [jsx(Label, { children: jsx(FormattedMessage, { id: "Billing and shipping address" }) }), jsx(Accordion, { variant: "select", children: jsx(AccordionItem, { id: "invoice-and-shipping", title: "Factuur- en verzendinformatie", children: jsxs("div", { className: styles['content'], children: [jsx("section", { className: styles.section, children: jsxs("div", { children: [jsx("p", { className: styles.label, children: jsx(FormattedMessage, { id: "Billing address" }) }), jsx(Address, { address1: cart.billTo?.address1, address2: cart.billTo?.address2, address3: cart.billTo?.address3, city: cart.billTo?.city, companyName: cart.billTo?.companyName, country: cart.billTo?.country?.name, email: cart.billTo?.email, phone: cart.billTo?.phone, postalCode: cart.billTo?.postalCode })] }) }), jsx("section", { className: styles.section, children: jsxs("div", { children: [jsx("p", { className: styles.label, children: jsx(FormattedMessage, { id: "Shipping address" }) }), jsx(Address, { address1: cart.shipTo?.address1, address2: cart.shipTo?.address2, address3: cart.shipTo?.address3, city: cart.shipTo?.city, companyName: cart.shipTo?.companyName, country: cart.shipTo?.country?.name, email: cart.shipTo?.email, phone: cart.shipTo?.phone, postalCode: cart.shipTo?.postalCode })] }) })] }) }) })] })] }));
+                    : /* 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: {
+                                address1: cart.billTo?.address1,
+                                address2: cart.billTo?.address2,
+                                address3: cart.billTo?.address3,
+                                city: cart.billTo?.city,
+                                companyName: cart.billTo?.companyName,
+                                country: cart.billTo?.country?.name,
+                                email: cart.billTo?.email,
+                                phone: cart.billTo?.phone,
+                                postalCode: cart.billTo?.postalCode,
+                            }, shipToAddress: {
+                                address1: cart.shipTo?.address1,
+                                address2: cart.shipTo?.address2,
+                                address3: cart.shipTo?.address3,
+                                city: cart.shipTo?.city,
+                                companyName: cart.shipTo?.companyName,
+                                country: cart.shipTo?.country?.name,
+                                email: cart.shipTo?.email,
+                                phone: cart.shipTo?.phone,
+                                postalCode: cart.shipTo?.postalCode,
+                            } }) }) }) })] }));
 }
 
 export { Payment };

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

@@ -0,0 +1,3 @@
+var styles = {"error-message":"payment-module-ZvObJ","payment-form":"payment-module-i4R0m","delivery-date":"payment-module-gtAqD","asap-checkbox":"payment-module-fP31W"};
+
+export { styles as default };

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

@@ -4,8 +4,6 @@ import { Button } from '../../../buttons/button/button.js';
 import { OrderLineCard } from '../../../cards/orderline-card/orderline-card.js';
 import { CartTotals } from '../../../cart-totals/cart-totals.js';
 import { CartTotalsSummary } from '../../../cart-totals/cart-totals-summary.js';
-import { Payment } from '../../../checkout/payment.js';
-import { useHasReturnedFromAdyen } from '../../../checkout/use-has-returned-from-adyen.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';
@@ -17,9 +15,12 @@ import { hasNo } from '../../../shared/utils/types.js';
 import { Page } from '../../components/page/page.js';
 import { ErrorPage } from '../../error-page/error-page.js';
 import { LoadingPage } from '../../loading-page/loading-page.js';
+import { CHECKOUT_PATHS } from '../constants.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';
+import { useHasReturnedFromAdyen } from './hooks/use-has-returned-from-adyen.js';
 
 const PAYMENT_FORM_ID = 'paymentForm';
 function PaymentPage() {
@@ -29,28 +30,30 @@ function PaymentPage() {
         forceRecalculation: !hasReturnedFromAdyen,
     });
     const { data: atp, isLoading: isAtpLoading } = useFetchCurrentCheckoutAtp();
-    const hasAtp = atp && atp.length > 0 && atp[0]?.date !== null;
+    const hasAtp = atp && atp.length > 1;
     const isLoading = isLoadingCart || isAtpLoading;
     const t = useFormattedMessage();
     const [isProcessing, setIsProcessing] = useState(false);
     const [isValidating, setIsValidating] = useState(false);
     const { isNavigating, navigate } = useNavigate();
-    const onPaymentComplete = useCallback(() => navigate('/CheckoutConfirmation'), [navigate]);
+    const onPaymentComplete = useCallback(({ cartId }) => {
+        navigate(`${CHECKOUT_PATHS.ORDER_CONFIRMATION}?cartId=${cartId}`);
+    }, [navigate]);
     useEffect(() => {
         if (isNavigating)
             return;
         if (isAuthenticated === undefined)
             return;
         if (!isAuthenticated)
-            return navigate('/signin?returnUrl=/CheckoutShipping');
+            return navigate(CHECKOUT_PATHS.CHECKOUT_SHIPPING_VIA_SIGNIN);
         if (hasNo(cart))
             return;
         if (hasNo(cart.cartLines) || cart.cartLines.length === 0)
-            return navigate('/cart');
+            return navigate(CHECKOUT_PATHS.CART);
         if (hasNo(cart.billTo))
-            return navigate('/signin?returnUrl=/CheckoutShipping');
+            return navigate(CHECKOUT_PATHS.CHECKOUT_SHIPPING_VIA_SIGNIN);
         if (hasNo(cart.billTo.address1))
-            return navigate('/CheckoutShipping');
+            return navigate(CHECKOUT_PATHS.CHECKOUT_SHIPPING);
     }, [cart, navigate, isAuthenticated, isNavigating]);
     if (error)
         return jsx(ErrorPage, { error: error });
@@ -64,8 +67,11 @@ function PaymentPage() {
         hasNo(cart.billTo?.address1))
         return null;
     return (jsx(Page, { breadCrumb: [
-            { href: '/', label: t('Home') },
-            { href: '/CheckoutReviewAndSubmit', label: t('Review and payment') },
+            { href: CHECKOUT_PATHS.HOME, label: t('Home') },
+            {
+                href: CHECKOUT_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": "checkoutShippingCartTotalContinueButton", form: PAYMENT_FORM_ID, isDisabled: isProcessing, isLoading: isProcessing ? (jsx(FormattedMessage, { id: "Processing" })) : isValidating ? (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 &&

package/dist/{checkout → pages/checkout/payment-page/utils}/parse-amount.js

@@ -1,4 +1,4 @@
-import { getCurrencyByCountryCode } from '../shared/utils/price.js';
+import { getCurrencyByCountryCode } from '../../../../shared/utils/price.js';
 
 function parseAmount(amount, countryCode) {
     return {

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

@@ -6,6 +6,7 @@ import { Checkbox } from '../../../../forms/checkbox/checkbox.js';
 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 { useFetchCurrentCart } from '../../../../shared/api/storefront/hooks/cart/use-fetch-current-cart.js';
 import { validatePhone, validateEmail } from '../../../../shared/model/address.js';
 import { Tooltip } from '../../../../tooltip/tooltip.js';
 import { CheckoutPageSection } from '../../layouts/checkout-page-layout/components/checkout-page-section.js';
@@ -18,10 +19,11 @@ function EditAddresses({ countries, isLoading, isPickup, onSubmit, }) {
     const t = useFormattedMessage();
     const [companyName, setCompanyName] = useState('');
     const [lastName, setLastName] = useState('');
+    const { data: cart } = useFetchCurrentCart();
     return (jsxs(Fragment, { children: [jsx(CheckoutPageSection, { title: jsx(FormattedMessage, { id: "Billing address" }), children: jsx(CheckoutPageSectionContent, { children: jsxs(Form, { className: styles.form, "data-test-selector": "billToAddressForm", id: EDIT_ADDRESS_FORM_ID, onSubmit: e => {
                             e.preventDefault();
                             const formData = new FormData(e.currentTarget);
-                            const countryFormValue = formData.get('country')?.toString();
+                            const countryFormValue = formData.get('countrySelect')?.toString();
                             const country = countries.find(country => country.id === countryFormValue);
                             if (!country)
                                 throw new Error(`Country not found ${formData.get('country')}`);
@@ -44,11 +46,13 @@ function EditAddresses({ countries, isLoading, isPickup, onSubmit, }) {
                         }, children: [jsx(TextField, { isDisabled: isLoading, label: t('First name'), name: "firstName", showLabel: true }), jsx(TextField, { isDisabled: isLoading, isRequired: !companyName, label: t('Last name'), minLength: 3, name: "lastName", onChange: setLastName, showLabel: true, value: lastName }, `lastname-${Boolean(companyName)}`), jsx(TextField, { isDisabled: isLoading, label: t('Company name'), name: "companyName", onChange: setCompanyName, showLabel: true, value: companyName }), jsx(TextField, { isDisabled: isLoading, label: t('Attention'), name: "attention", showLabel: true }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, isDisabled: isLoading, label: `${t('Address')} 1`, maxLength: 30, minLength: 3, name: "address1", showLabel: true }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isDisabled: isLoading, label: `${t('Address')} 2`, maxLength: 30, minLength: 3, name: "address2", showLabel: true }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isDisabled: isLoading, label: `${t('Address')} 3`, maxLength: 30, minLength: 3, name: "address3", showLabel: true }) }), jsx(TextField, { isRequired: true, isDisabled: isLoading, label: t('Postal Code'), maxLength: 10, minLength: 4, name: "postalCode", showLabel: true }), jsx(TextField, { isRequired: true, isDisabled: isLoading, label: t('City'), maxLength: 30, minLength: 3, name: "city", showLabel: true }), jsx("div", { className: styles['span-2'], children: jsx(CountrySelect, { isRequired: true, countries: countries, "data-test-selector": "countrySelect", name: "countrySelect" }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, isDisabled: isLoading, label: t('Phone'), name: "phone", showLabel: true, validate: value => {
                                         if (!value)
                                             return value;
-                                        return (validatePhone(value) || 'Vul een geldig telefoonnummer in');
-                                    } }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, isDisabled: isLoading, label: t('Email'), name: "email", showLabel: true, type: "email", validate: value => {
+                                        return (validatePhone(value) ||
+                                            t('Please enter a valid phone number'));
+                                    } }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, defaultValue: cart?.billTo?.email || '', isDisabled: isLoading, label: t('Email'), name: "email", showLabel: true, type: "email", validate: value => {
                                         if (!value)
                                             return value;
-                                        return validateEmail(value) || 'Vul een geldig emailadres in';
+                                        return (validateEmail(value) ||
+                                            t('Please enter a valid e-mail address'));
                                     } }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isDisabled: isLoading, isMultiline: true, label: t('Add order notes'), name: "notes", rows: 3, showLabel: true }) })] }) }) }), jsx(CheckoutPageSection, { title: jsx(FormattedMessage, { id: isPickup ? 'Pickup address' : 'Shipping address' }), children: jsx(CheckoutPageSectionContent, { children: jsx(Fragment, { children: isPickup ? (jsx(SonicAddress, {})) : (jsxs("div", { className: styles['use-invoice-checkbox'], children: [jsx(Checkbox, { "data-test-selector": "checkboxUseBillingAddress", isDisabled: true, isSelected: true, children: jsx(FormattedMessage, { id: "Use billing address" }) }), jsx(Tooltip, { text: t('Changing your address is currently not possible. Please contact customer support to change your address.') })] })) }) }) })] }));
 }
 

package/dist/pages/checkout/shipping-page/hooks/use-patch-shipping-details.d.ts

@@ -0,0 +1,12 @@
+import { BillToModel, CartModel } from '../../../../shared/api/storefront/model/storefront.model';
+export declare function usePatchShippingDetails(): {
+    error: unknown;
+    isError: boolean;
+    isLoading: boolean;
+    isSuccess: boolean;
+    mutate: (args_0: {
+        billTo?: BillToModel;
+        cart: CartModel;
+        notes: string | undefined;
+    }) => Promise<void>;
+};

package/dist/pages/checkout/shipping-page/hooks/use-patch-shipping-details.js

@@ -0,0 +1,21 @@
+import { useAwaitableMutation } from '../../../../shared/api/shared/hooks/use-awaitable-mutation.js';
+import { patchCart } from '../../../../shared/api/storefront/services/cart-service.js';
+import { patchBillToAddress } from '../../../../shared/api/storefront/services/customer-service.js';
+
+function usePatchShippingDetails() {
+    return useAwaitableMutation({
+        mutationFn: async ({ billTo, cart, notes, }) => {
+            await Promise.all([
+                billTo && patchBillToAddress({ billTo }),
+                patchCart({ cart: { ...cart, notes } }),
+            ].filter(Boolean));
+        },
+        onSuccess: ({ queryClient }) => {
+            queryClient.removeQueries({ queryKey: ['customer'] });
+            queryClient.removeQueries({ queryKey: ['carts'] });
+            queryClient.removeQueries({ queryKey: ['session'] });
+        },
+    });
+}
+
+export { usePatchShippingDetails };