@sonic-equipment/ui 131.0.0 → 133.0.0

package/dist/pages/checkout/constants.js

@@ -0,0 +1,10 @@
+const CHECKOUT_PATHS = {
+    CART: '/cart',
+    CHECKOUT_SHIPPING: '/CheckoutShipping',
+    CHECKOUT_SHIPPING_VIA_SIGNIN: '/signin?returnUrl=/CheckoutShipping',
+    HOME: '/',
+    ORDER_CONFIRMATION: '/OrderConfirmation',
+    REVIEW_AND_SUBMIT: '/CheckoutReviewAndSubmit',
+};
+
+export { CHECKOUT_PATHS };

package/dist/pages/checkout/layouts/checkout-page-layout/components/checkout-page-section.module.css.js

@@ -1,3 +1,3 @@
-var styles = {"section":"checkout-page-section-module-zyovs","has-border":"checkout-page-section-module-pe5iL","section-header":"checkout-page-section-module-lcEdH","section-content":"checkout-page-section-module-ZkhMj","stretch":"checkout-page-section-module-24DRv","section-link":"checkout-page-section-module-l508k"};
+var styles = {"section":"checkout-page-section-module-zyovs","has-border":"checkout-page-section-module-pe5iL","section-header":"checkout-page-section-module-lcEdH","section-link":"checkout-page-section-module-l508k","section-content":"checkout-page-section-module-ZkhMj","stretch":"checkout-page-section-module-24DRv"};
 
 export { styles as default };

package/dist/pages/checkout/order-confirmation-page/order-confirmation-page.d.ts

@@ -0,0 +1,4 @@
+export interface OrderConfirmationPageProps {
+    cartId: string;
+}
+export declare function OrderConfirmationPage({ cartId }: OrderConfirmationPageProps): import("react/jsx-runtime").JSX.Element | null;

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/pages/checkout/payment-page/components/payment.js

@@ -0,0 +1,243 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
+import { Form } from 'react-aria-components';
+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 styles from './payment.module.css.js';
+
+function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete, onProcessing, onValidating, }) {
+    const { isLoading: isPatchingCart, mutate: patchCart } = usePatchCart();
+    const { isLoading: isPatchingSession } = usePatchSession();
+    const { isLoading: isPlacingCart, mutate: placeOrder } = usePlaceOrder();
+    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;
+    const hasAtp = atp.length > 1;
+    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 isAdyenPayment = selectedPaymentMethod === 'ADY' &&
+        cart.paymentOptions &&
+        cart.billTo?.id &&
+        countryCode;
+    const hasReturnedFromAdyen = useHasReturnedFromAdyen();
+    const isProcessing = useMemo(() => hasReturnedFromAdyen || isPlacingCart, [isPlacingCart, hasReturnedFromAdyen]);
+    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))
+        .reduce((acc, atp) => ({
+        ...acc,
+        [atp.date || '']: atp.displayDate,
+    }), {});
+    const paymentMethodOptions = cart.paymentOptions?.paymentMethods?.reduce((acc, method) => {
+        acc[method.name] = t(`paymentMethod.${method.description}`);
+        return acc;
+    }, {});
+    const debouncedValidator = useDebouncedCallback(async (value) => {
+        if (!value)
+            return setValidationErrors({});
+        if (value.length < 8) {
+            return setValidationErrors({
+                ...validationErrors,
+                vatNumber: t('validation.tooShort'),
+            });
+        }
+        try {
+            setIsValidatingVAT(true);
+            const response = await validateVATNumber({ vatNumber: value });
+            if (response.isValid) {
+                setValidationErrors(prev => {
+                    delete prev.vatNumber;
+                    return prev;
+                });
+            }
+            else {
+                setValidationErrors({
+                    ...validationErrors,
+                    vatNumber: t('validation.invalid'),
+                });
+            }
+        }
+        catch {
+            setValidationErrors({
+                ...validationErrors,
+                vatNumber: t('validation.invalid'),
+            });
+        }
+        finally {
+            setIsValidatingVAT(false);
+        }
+    }, 500);
+    async function onSubmit(e) {
+        const formData = new FormData(e.currentTarget);
+        const cart = cartRef.current;
+        setValidationErrors(prev => prev); // NOTE: This makes sure the form is revalidated on submit
+        if (Object.keys(validationErrors).length > 0)
+            return;
+        if (isAdyenPayment) {
+            /* Adyen Payment */
+            if (!dropinRef.current) {
+                console.warn('Adyen Dropin not ready');
+                return;
+            }
+            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 {
+                cartRef.current = await patchCart({
+                    cart: updatedCart,
+                });
+            }
+            catch (error) {
+                console.error(error);
+                setAPIError(error);
+            }
+            try {
+                dropinRef.current.submit();
+            }
+            catch (error) {
+                console.error(error);
+                setPaymentError(error);
+            }
+        }
+        else {
+            /* Pay by Invoice */
+            const cart = cartRef.current;
+            try {
+                await placeOrder({ cart });
+                return onPaymentComplete({ cartId: cart.trackId });
+            }
+            catch (error) {
+                console.error(error);
+                setPaymentError(error);
+            }
+        }
+    }
+    const onComplete = useCallback(
+    /* Adyen payment continuation after submit */
+    async (result) => {
+        const cart = cartRef.current;
+        try {
+            await placeOrder({
+                cart: {
+                    ...cart,
+                    paymentMethod: null,
+                    paymentOptions: {
+                        ...cart.paymentOptions, // Hack needed to make B2B happy
+                        adyenPspReference: result.pspReference,
+                        isAdyenDropIn: true,
+                    },
+                },
+            });
+            return onPaymentComplete({ cartId: cart.trackId });
+        }
+        catch (error) {
+            console.error(error);
+            // TODO: Errors from the placeOrder call are not displayed
+            setAPIError(error);
+        }
+    }, [onPaymentComplete, placeOrder]);
+    const onError = useCallback((error, result) => {
+        invalidateAdyen();
+        // invalidateCurrentCart()
+        setPaymentError(error);
+        console.error(error);
+        _onError?.(error, result);
+    }, [_onError, invalidateAdyen]);
+    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 => {
+                                    setAsSoonAsPossible(checked);
+                                    if (checked)
+                                        setDeliveryDate('');
+                                }, children: jsx(FormattedMessage, { id: "As soon as possible" }) }), jsx(Tooltip, { text: 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: {
+                    /* eslint-disable sort-keys-fix/sort-keys-fix */
+                    PP: 'Private User',
+                    AU: 'Automotive',
+                    MC: 'Motorcycle',
+                    BC: 'Bicycle',
+                    TR: 'Truck',
+                    AG: 'Agricultural',
+                    AV: 'Aviation',
+                    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, 
+                // TODO: Use the correct Adyen environment before going live
+                environment: "test", onComplete: onComplete, onError: onError, orderAmount: cart.orderGrandTotal, returnUrl: 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: {
+                                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,11 +67,15 @@ 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, 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: PAYMENT_FORM_ID, 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: {
+            }, 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: PAYMENT_FORM_ID, 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: {
                                     fit: 'contain',
                                     image: {
                                         '1': cartLine.smallImagePath,

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