@sonic-equipment/ui 132.0.0 → 134.0.0

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

@@ -0,0 +1,83 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+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 { useSaveCartForLater } from '../../../shared/api/storefront/hooks/cart/use-save-cart-for-later.js';
+import { RouteButton } from '../../../shared/routing/route-button.js';
+import { formatDateToLocaleString } from '../../../shared/utils/date.js';
+import { useToast } from '../../../toast/use-toast.js';
+import { Page } from '../../components/page/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 OrderConfirmationPageContent({ cart, }) {
+    const t = useFormattedMessage();
+    const { addToast } = useToast();
+    const cultureCode = useCultureCode();
+    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',
+            });
+        },
+    });
+    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.requestedDeliveryDateDisplay && (jsx(InfoDisplay, { id: "requested-delivery-date", label: t('Requested delivery date'), value: formatDateToLocaleString(new Date(cart.requestedDeliveryDateDisplay.toString()), cultureCode) })), cart.poNumber && (jsx(InfoDisplay, { id: "po-number", label: t('PO Number'), value: cart.poNumber }))] }) }) }), jsx(CheckoutPageSection, { hasBorder: false, title: t('Billing and shipping information'), children: jsx(CheckoutPageSectionContent, { children: jsx(BillingAndInvoiceInformation, { billToAddress: {
+                                    address1: cart.billTo?.address1,
+                                    address2: cart.billTo?.address2,
+                                    address3: cart.billTo?.address3,
+                                    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 { OrderConfirmationPageContent };

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,41 @@
+import { jsx } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+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 { useNavigate } from '../../../shared/routing/route-provider.js';
+import { hasNo } from '../../../shared/utils/types.js';
+import { ErrorPage } from '../../error-page/error-page.js';
+import { CHECKOUT_PATHS } from '../constants.js';
+import { OrderConfirmationPageContent } from './order-confirmation-page-content.js';
+
+function OrderConfirmationPage({ cartId }) {
+    const isAuthenticated = useIsAuthenticated();
+    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]);
+    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(OrderConfirmationPageContent, { cart: cart });
+}
+
+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,288 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useMemo, 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';
+import { TextField } from '../../../../forms/text-field/text-field.js';
+import { InfoIconTooltip } from '../../../../info-icon-tooltip/info-icon-tooltip.js';
+import { FormattedMessage } from '../../../../intl/formatted-message.js';
+import { 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 { 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 { 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 { createEcommerceEvent, dataLayer } = useDataLayer();
+    const { isLoading: isPatchingCart, mutate: patchCart } = usePatchCart();
+    const { isLoading: isPatchingSession } = usePatchSession();
+    const { isLoading: isPlacingCart, mutate: placeOrder } = usePlaceOrder();
+    const { sendPurchaseEventFromPaymentPage } = useAlgoliaInsights();
+    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);
+    const onPlaceOrderCompleted = useCallback(({ cart, payment_type }) => {
+        dataLayer.push(createEcommerceEvent({
+            cart,
+            event: {
+                ecommerce: {
+                    payment_type,
+                },
+                event: 'add_payment_info',
+            },
+        }), createEcommerceEvent({
+            cart,
+            event: {
+                ecommerce: {
+                    payment_type,
+                },
+                event: 'purchase',
+            },
+        }), {
+            currency: currencySymbolToISO[cart.currencySymbol],
+            event: 'transactionComplete',
+            transactionAffiliation: cart.billTo?.companyName,
+            transactionId: cart.orderNumber,
+            transactionProducts: cart.cartLines?.map(cartLine => ({
+                name: cartLine.shortDescription,
+                price: cartLine.pricing?.unitNetPrice,
+                quantity: cartLine.qtyOrdered,
+                sku: cartLine.erpNumber,
+            })) || [],
+            transactionShipping: cart.shippingAndHandling,
+            transactionTax: cart.totalTax,
+            transactionTotal: cart.orderGrandTotal,
+        });
+        sendPurchaseEventFromPaymentPage({ cart });
+    }, [createEcommerceEvent, dataLayer, sendPurchaseEventFromPaymentPage]);
+    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 });
+                onPlaceOrderCompleted({
+                    cart,
+                    payment_type: cart.paymentMethod?.name || '',
+                });
+                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,
+                    },
+                },
+            });
+            onPlaceOrderCompleted({
+                cart,
+                payment_type: 'Adyen',
+            });
+            return onPaymentComplete({ cartId: cart.trackId });
+        }
+        catch (error) {
+            console.error(error);
+            setAPIError(error);
+        }
+    }, [onPaymentComplete, onPlaceOrderCompleted, 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(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: {
+                    /* 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-content.d.ts

@@ -0,0 +1,15 @@
+import { CartModel, CheckoutAtpEntry } from '../../../shared/api/storefront/model/storefront.model';
+export interface PaymentContentProps {
+    atp: CheckoutAtpEntry[];
+    cart: CartModel;
+    formId: string;
+    hasAtp: boolean;
+    isProcessing: boolean;
+    isValidating: boolean;
+    onPaymentComplete: ({ cartId }: {
+        cartId: string;
+    }) => void;
+    setIsProcessing: (isProcessing: boolean) => void;
+    setIsValidating: (isValidating: boolean) => void;
+}
+export declare function PaymentPageContent({ atp, cart, formId, hasAtp, isProcessing, isValidating, onPaymentComplete, setIsProcessing, setIsValidating, }: PaymentContentProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,43 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+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 { 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 { 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, }) {
+    const t = useFormattedMessage();
+    return (jsx(Page, { breadCrumb: [
+            { 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: formId, 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 &&
+                    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: {
+                                    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 { PaymentPageContent };

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

@@ -1,25 +1,15 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useState, useCallback, useEffect } from 'react';
-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';
 import { useIsAuthenticated } from '../../../shared/api/storefront/hooks/authentication/use-is-authenticated.js';
 import { useFetchCurrentCheckoutAtp } from '../../../shared/api/storefront/hooks/cart/use-fetch-current-cart-checkout-atp.js';
 import { useFetchCurrentCartWithAtp } from '../../../shared/api/storefront/hooks/cart/use-fetch-current-cart-with-atp.js';
 import { useNavigate } from '../../../shared/routing/route-provider.js';
 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 { 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 { CHECKOUT_PATHS } from '../constants.js';
+import { useHasReturnedFromAdyen } from './hooks/use-has-returned-from-adyen.js';
+import { PaymentPageContent } from './payment-page-content.js';
 
 const PAYMENT_FORM_ID = 'paymentForm';
 function PaymentPage() {
@@ -29,28 +19,29 @@ 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 });
@@ -63,26 +54,7 @@ function PaymentPage() {
         cart.cartLines.length === 0 ||
         hasNo(cart.billTo?.address1))
         return null;
-    return (jsx(Page, { breadCrumb: [
-            { href: '/', label: t('Home') },
-            { href: '/CheckoutReviewAndSubmit', 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 &&
-                    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,
-                                        '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))) }) }) })] }) }));
+    return (jsx(PaymentPageContent, { atp: atp, cart: cart, formId: PAYMENT_FORM_ID, hasAtp: Boolean(hasAtp), isProcessing: isProcessing, isValidating: isValidating, onPaymentComplete: onPaymentComplete, setIsProcessing: setIsProcessing, setIsValidating: setIsValidating }));
 }
 
 export { PaymentPage };

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 {