@sonic-equipment/ui 0.0.119 → 1.0.0

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

@@ -0,0 +1,280 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect, useMemo, 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 { InfoDisplay } from '../../../../display/info-display/info-display.js';
+import { Checkbox } from '../../../../forms/elements/checkbox/checkbox.js';
+import { Select } from '../../../../forms/elements/select/select.js';
+import { TextField } from '../../../../forms/fields/text-field/text-field.js';
+import { InfoIconTooltip } from '../../../../info-icon-tooltip/info-icon-tooltip.js';
+import { FormattedMessage } from '../../../../intl/formatted-message.js';
+import { isCountryCode } from '../../../../intl/types.js';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import { logger } from '../../../../logging/logger.js';
+import { usePatchCart } from '../../../../shared/api/bff/hooks/cart/use-patch-cart.js';
+import { usePlaceOrder } from '../../../../shared/api/bff/hooks/cart/use-place-order.js';
+import { useInvalidateCurrentCart } from '../../../../shared/api/storefront/hooks/cart/use-invalidate-current-cart.js';
+import { useInvalidateAdyen } from '../../../../shared/api/storefront/hooks/payment/use-invalidate-adyen.js';
+import { useDataLayer } from '../../../../shared/ga/use-data-layer.js';
+import { getCurrencyCodeBySymbol } from '../../../../shared/model/currency.js';
+import { isProductionEnvironment } from '../../../../shared/utils/environment.js';
+import { BillingAndInvoiceInformation } from '../../components/billing-and-invoice-information.js';
+import { removeAdyenQueryParamsFromUrl, AdyenPayment } from './adyen-payment.js';
+import styles from './payment.module.css.js';
+
+function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPaymentComplete, onProcessing, }) {
+    const { createEcommerceEvent, dataLayer } = useDataLayer();
+    const { mutate: patchCart } = usePatchCart();
+    const { mutate: placeOrder } = usePlaceOrder();
+    const { sendPurchaseEventFromPaymentPage } = useAlgoliaInsights();
+    const invalidateCurrentCart = useInvalidateCurrentCart();
+    const dropinRef = useRef(null);
+    const [paymentError, setPaymentError] = useState();
+    const [apiError, setAPIError] = useState();
+    const invalidateAdyen = useInvalidateAdyen();
+    const t = useFormattedMessage();
+    const cartRef = useRef(_cart);
+    const cart = cartRef.current;
+    const hasAtp = atp.length > 1;
+    const [asSoonAsPossible, setAsSoonAsPossible] = useState(!hasAtp || (!isProcessing && !cart.requestedDeliveryDate));
+    const [deliveryDate, setDeliveryDate] = useState(cart.requestedDeliveryDateDisplay?.toString() || '');
+    const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(cart.paymentOptions?.paymentMethods?.[0]?.name || 'ADY');
+    if (!isCountryCode(_cart.billTo?.country?.abbreviation))
+        throw new Error(`Country code not found for cart with country abbreviation: ${_cart.billTo?.country?.abbreviation}`);
+    const countryCode = _cart.billTo.country.abbreviation;
+    const currencyCode = getCurrencyCodeBySymbol(cart.currencySymbol);
+    if (!currencyCode)
+        throw new Error(`Currency code not found for cart with currency symbol: ${cart.currencySymbol}`);
+    const isAdyenPayment = selectedPaymentMethod === 'ADY' &&
+        cart.paymentOptions &&
+        cart.billTo?.id &&
+        countryCode;
+    const isDisabled = isProcessing;
+    useEffect(() => {
+        cartRef.current = _cart;
+    }, [_cart]);
+    const [validationErrors, setValidationErrors] = useState({});
+    const atpSelectOptions = useMemo(() => atp
+        .filter(atp => Boolean(atp.date))
+        .reduce((acc, atp) => ({
+        ...acc,
+        [atp.date || '']: atp.displayDate,
+    }), {}), [atp]);
+    const paymentMethodOptions = useMemo(() => cart.paymentOptions?.paymentMethods?.reduce((acc, method) => {
+        acc[method.name] = t(`paymentMethod.${method.description}`);
+        return acc;
+    }, {}), [cart.paymentOptions?.paymentMethods, t]);
+    const industryOptions = useMemo(() => ({
+        /* eslint-disable sort-keys-fix/sort-keys-fix */
+        PP: t('industry.PP'),
+        AU: t('industry.AU'),
+        MC: t('industry.MC'),
+        BC: t('industry.BC'),
+        TR: t('industry.TR'),
+        AG: t('industry.AG'),
+        AV: t('industry.AV'),
+        MA: t('industry.MA'),
+        OT: t('industry.OT'),
+        /* eslint-enable sort-keys-fix/sort-keys-fix */
+    }), [t]);
+    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: getCurrencyCodeBySymbol(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
+        cart.customerVatNumber = formData.get('customerVatNumber')?.toString();
+        cart.poNumber = formData.get('poNumber')?.toString();
+        cart.properties = {
+            ...cart.properties,
+            industry: formData.get('industry')?.toString() || '',
+        };
+        cart.requestedDeliveryDate = formData.get('deliveryDate')?.toString();
+        cart.requestedDeliveryDateDisplay = undefined;
+        if (Object.keys(validationErrors).length > 0)
+            return;
+        if (isAdyenPayment) {
+            /* Adyen Payment */
+            if (!dropinRef.current) {
+                logger.warn('Adyen Dropin not ready');
+                return;
+            }
+            dropinRef.current.showValidation();
+            if (!dropinRef.current.isValid)
+                return;
+            onProcessing(true);
+            try {
+                try {
+                    cartRef.current = await patchCart({
+                        cart,
+                        forceRecalculation: false,
+                    });
+                    if (cartRef.current.properties.customerVatNumberStatus === 'invalid') {
+                        return setValidationErrors({
+                            ...validationErrors,
+                            customerVatNumber: t('validation.invalid'),
+                        });
+                    }
+                }
+                catch (error) {
+                    setAPIError(error);
+                    throw error;
+                }
+                try {
+                    dropinRef.current.submit();
+                }
+                catch (error) {
+                    setPaymentError(error);
+                    throw error;
+                }
+            }
+            catch (error) {
+                logger.error(error);
+                invalidateCurrentCart();
+                onProcessing(false);
+            }
+            finally {
+                onProcessing(false);
+                removeAdyenQueryParamsFromUrl();
+            }
+        }
+        else {
+            /* Pay by Invoice */
+            const cart = cartRef.current;
+            try {
+                onProcessing(true);
+                cartRef.current = await placeOrder({ cart });
+                onPlaceOrderCompleted({
+                    cart: cartRef.current,
+                    payment_type: cartRef.current.paymentMethod?.name || '',
+                });
+                return onPaymentComplete({ cartId: cartRef.current.trackId });
+            }
+            catch (error) {
+                logger.error(error);
+                setPaymentError(error);
+                invalidateCurrentCart();
+                onProcessing(false);
+            }
+            finally {
+                onProcessing(false);
+                removeAdyenQueryParamsFromUrl();
+            }
+        }
+    }
+    const onComplete = useCallback(
+    /* Adyen payment continuation after submit */
+    async (result) => {
+        const cart = cartRef.current;
+        try {
+            onProcessing(true);
+            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) {
+            logger.error(error);
+            onProcessing(false);
+            setAPIError(error);
+        }
+        finally {
+            onProcessing(false);
+            removeAdyenQueryParamsFromUrl();
+        }
+    }, [onPaymentComplete, onPlaceOrderCompleted, onProcessing, placeOrder]);
+    const onError = useCallback((error, result) => {
+        invalidateAdyen();
+        setPaymentError(error);
+        logger.error(error);
+        onProcessing(false);
+        _onError?.(error, result);
+    }, [_onError, invalidateAdyen, onProcessing]);
+    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", defaultSelectedOption: deliveryDate, isDisabled: isDisabled || asSoonAsPossible, isRequired: !asSoonAsPossible, label: t('Select a desired delivery date'), name: "deliveryDate", onChange: setDeliveryDate, options: atpSelectOptions, selectedOption: deliveryDate, variant: "solid" }, String(asSoonAsPossible)), jsxs("div", { className: styles['asap-checkbox'], children: [jsx(Checkbox, { "data-test-selector": "asapCheckbox", isDisabled: isDisabled || Boolean(cart.requestedDeliveryDateDisplay), isSelected: asSoonAsPossible, onChange: checked => {
+                                    setAsSoonAsPossible(checked);
+                                    if (checked)
+                                        setDeliveryDate('');
+                                }, children: t('As soon as possible') }), jsx(InfoIconTooltip, { size: "sm", 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, showLabel: true, "data-test-selector": "industrySelect", defaultSelectedOption: cart.properties.industry || 'AU', isDisabled: isDisabled, label: t('Industry'), name: "industry", options: industryOptions, placeholder: t('Select an industry'), variant: "solid" }), jsx(TextField, { showLabel: true, defaultValue: cart.customerVatNumber, isDisabled: isDisabled, label: t('VAT Number'), minLength: 8, name: "customerVatNumber" }, `vat${Boolean(validationErrors.customerVatNumber)}`), jsx(TextField, { showLabel: true, defaultValue: cart.poNumber, isDisabled: isDisabled, isRequired: cart.requiresPoNumber, label: t('PO Number'), name: "poNumber" }), paymentMethodOptions && Object.keys(paymentMethodOptions).length > 1 && (jsx(Select, { "data-test-selector": "paymentMethodSelect", defaultSelectedOption: cart.paymentOptions?.paymentMethods?.[0]?.name || 'ADY', isDisabled: isDisabled, label: t('Payment method'), name: "paymentMethod", onChange: setSelectedPaymentMethod, options: paymentMethodOptions, selectedOption: selectedPaymentMethod, variant: "solid" })), isAdyenPayment && cart.billTo && (jsx(AdyenPayment, { amount: cart.orderGrandTotal, cartId: cart.trackId, countryCode: countryCode, currencyCode: currencyCode, customerId: cart.billTo.id, dropinRef: dropinRef, environment: isProductionEnvironment ? 'live' : 'test', isDisabled: isDisabled, onComplete: onComplete, onError: onError, orderAmount: cart.orderGrandTotal, returnUrl: 
+                /* eslint-disable ssr-friendly/no-dom-globals-in-react-fc */
+                typeof window === 'undefined'
+                    ? ''
+                    : `${window.location.pathname}${window.location.search}` })), Boolean(paymentError) && (jsx("div", { className: styles['error-message'], children: jsx(FormattedMessage, { id: "An error occurred while processing your payment. Please try again." }) })), jsx(InfoDisplay, { id: "shipping-and-invoice-information", label: t('Billing and shipping address'), value: jsx(Accordion, { variant: "select", children: jsx(AccordionItem, { "data-test-selector": "billingAndShippingInformation", id: "invoice-and-shipping", isDisabled: isDisabled, title: t('Billing and shipping information'), children: jsx(BillingAndInvoiceInformation, { billToAddress: cart.billTo && {
+                                address1: cart.billTo.address1,
+                                address2: cart.billTo.address2,
+                                address3: cart.billTo.address3,
+                                attention: '',
+                                city: cart.billTo.city,
+                                companyName: cart.billTo.companyName,
+                                country: cart.billTo.country,
+                                email: cart.billTo.email,
+                                firstName: '',
+                                lastName: '',
+                                phone: cart.billTo.phone,
+                                postalCode: cart.billTo.postalCode,
+                            }, shipToAddress: cart.shipTo && {
+                                address1: cart.shipTo.address1,
+                                address2: cart.shipTo.address2,
+                                address3: cart.shipTo.address3,
+                                attention: '',
+                                city: cart.shipTo.city,
+                                companyName: cart.shipTo.companyName,
+                                country: cart.shipTo.country,
+                                email: cart.shipTo.email,
+                                firstName: '',
+                                lastName: '',
+                                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/hooks/use-get-adyen-redirect-result.d.ts

@@ -0,0 +1 @@
+export declare function useGetAdyenRedirectResult(): string | undefined;

package/dist/pages/checkout/payment-page/hooks/use-get-adyen-redirect-result.js

@@ -0,0 +1,14 @@
+"use client";
+import { useRef } from 'react';
+import qs from 'query-string';
+
+function useGetAdyenRedirectResult() {
+    const redirectResult = useRef((typeof window === 'undefined'
+        ? { redirectResult: undefined }
+        : qs.parse(window.location.search || '')).redirectResult);
+    return typeof redirectResult.current === 'string'
+        ? redirectResult.current
+        : undefined;
+}
+
+export { useGetAdyenRedirectResult };

package/dist/pages/checkout/payment-page/hooks/use-has-returned-from-adyen.d.ts

@@ -0,0 +1 @@
+export declare function useHasReturnedFromAdyen(): boolean;

package/dist/pages/checkout/payment-page/hooks/use-has-returned-from-adyen.js

@@ -0,0 +1,9 @@
+"use client";
+import { useGetAdyenRedirectResult } from './use-get-adyen-redirect-result.js';
+
+function useHasReturnedFromAdyen() {
+    const redirectResult = useGetAdyenRedirectResult();
+    return Boolean(redirectResult);
+}
+
+export { useHasReturnedFromAdyen };

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

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

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

@@ -0,0 +1,51 @@
+"use client";
+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 { getCurrencyCodeBySymbol } from '../../../shared/model/currency.js';
+import { usePaths } from '../../../shared/routing/use-paths.js';
+import { ensureNumber } from '../../../shared/utils/number.js';
+import { Page } from '../../components/page/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 { Payment } from './components/payment.js';
+
+function PaymentPageContent({ atp, cart, formId, hasAtp, isProcessing, onPaymentComplete, setIsProcessing, }) {
+    const t = useFormattedMessage();
+    const paths = usePaths();
+    const currencyCode = getCurrencyCodeBySymbol(cart.currencySymbol);
+    if (!currencyCode)
+        throw new Error(`Currency code not found for symbol ${cart.currencySymbol}`);
+    return (jsx(Page, { breadcrumb: [
+            { href: paths.HOME, label: t('Home') },
+            {
+                href: paths.REVIEW_AND_SUBMIT,
+                label: t('Review and payment'),
+            },
+        ], "data-test-selector": "paymentPage", title: t('Review and payment'), children: jsxs(CheckoutPageLayout, { actions: {
+                primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutReviewAndSubmit_placeOrder", form: formId, isDisabled: isProcessing, isLoading: isProcessing ? jsx(FormattedMessage, { id: "Processing" }) : false, type: "submit", children: cart.paymentMethod?.name === 'PBI' ? (jsx(FormattedMessage, { id: "Finalize order" })) : (jsx(FormattedMessage, { id: "Finalize payment" })) })),
+            }, mobileSummary: jsx(CartTotalsSummary, { currencyCode: currencyCode, totalAmount: cart.orderGrandTotal }), overview: jsx(CartTotals, { currencyCode: currencyCode, deliveryDate: hasAtp ? undefined : cart.requestedDeliveryDate, fulfillmentMethod: cart.fulfillmentMethod, isPayByInvoice: (cart.paymentOptions?.paymentMethods?.length || 1) <= 1 &&
+                    cart.paymentMethod?.name === 'PBI', shippingCost: cart.shippingAndHandling, subtotal: cart.orderSubTotal, tax: cart.totalTax, total: cart.orderGrandTotal, vatPercentage: cart.cartLines?.[0]?.pricing?.vatRate || 0 }), children: [jsx(CheckoutPageSection, { hasBorder: false, title: jsx(FormattedMessage, { id: "Payment" }), children: jsx(CheckoutPageSectionContent, { children: jsx(Payment, { atp: atp, cart: cart, form: formId, isProcessing: isProcessing, onPaymentComplete: onPaymentComplete, onProcessing: setIsProcessing }) }) }), 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 ?? null, 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: {
+                                    currencyCode,
+                                    originalTotalPrice: ensureNumber(cartLine.properties.totalListPrice),
+                                    pricePerUnit: cartLine.pricing?.unitNetPrice || 0,
+                                    totalPrice: cartLine.pricing?.extendedUnitNetPrice || 0,
+                                }, productId: cartLine.productId || '', quantity: cartLine.qtyOrdered || 1, sku: cartLine.erpNumber || '', tags: [], title: cartLine.shortDescription }, cartLine.id))) }) }) })] }) }));
+}
+
+export { PaymentPageContent };

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

@@ -0,0 +1,3 @@
+export declare function PaymentPage({ hasReturnedFromAdyen, }: {
+    hasReturnedFromAdyen?: boolean;
+}): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,64 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState, useCallback, useEffect } from 'react';
+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/use-navigate.js';
+import { usePaths } from '../../../shared/routing/use-paths.js';
+import { hasNo } from '../../../shared/utils/types.js';
+import { ErrorPage } from '../../error-page/error-page.js';
+import { LoadingPage } from '../../loading-page/loading-page.js';
+import { PaymentPageContent } from './payment-page-content.js';
+
+const PAYMENT_FORM_ID = 'paymentForm';
+function PaymentPage({ hasReturnedFromAdyen, }) {
+    const paths = usePaths();
+    const isAuthenticated = useIsAuthenticated();
+    const { data: cart, error, isLoading: isLoadingCart, } = useFetchCurrentCartWithAtp({
+        forceRecalculation: !hasReturnedFromAdyen,
+    });
+    const { data: atp, isLoading: isAtpLoading } = useFetchCurrentCheckoutAtp();
+    const hasAtp = atp !== undefined && atp.length > 1;
+    const isLoading = isLoadingCart || isAtpLoading;
+    const [isProcessing, setIsProcessing] = useState(false);
+    const { isNavigating, navigate } = useNavigate();
+    const onPaymentComplete = useCallback(({ cartId }) => {
+        setTimeout(() => {
+            navigate(`${paths.ORDER_CONFIRMATION}?cartId=${cartId}`);
+        }, 500);
+    }, [navigate, paths]);
+    useEffect(() => {
+        if (isNavigating)
+            return;
+        if (isAuthenticated === undefined)
+            return;
+        if (!isAuthenticated)
+            return navigate(paths.CHECKOUT_SHIPPING_VIA_SIGNIN);
+        if (hasNo(cart))
+            return;
+        if (hasNo(cart.cartLines) || cart.cartLines.length === 0)
+            return navigate(paths.CART);
+        if (hasNo(cart.billTo))
+            return navigate(paths.CHECKOUT_SHIPPING_VIA_SIGNIN);
+        if (hasNo(cart.billTo.address1))
+            return navigate(paths.CHECKOUT_SHIPPING);
+    }, [cart, navigate, isAuthenticated, isNavigating, paths]);
+    if (error)
+        return jsx(ErrorPage, { error: error });
+    if (!isAtpLoading && !atp)
+        return jsx(ErrorPage, { error: new Error('ATP not found') });
+    if (isLoading || isNavigating)
+        return jsx(LoadingPage, {});
+    if (!isAuthenticated ||
+        hasNo(cart) ||
+        hasNo(cart.cartLines) ||
+        cart.cartLines.length === 0 ||
+        hasNo(cart.billTo?.address1))
+        return null;
+    if (!atp)
+        throw new Error('Unexpected condition: ATP is undefined');
+    return (jsx(PaymentPageContent, { atp: atp, cart: cart, formId: PAYMENT_FORM_ID, hasAtp: hasAtp, isProcessing: isProcessing, onPaymentComplete: onPaymentComplete, setIsProcessing: setIsProcessing }));
+}
+
+export { PaymentPage };

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

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

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

@@ -0,0 +1,10 @@
+import { getCurrencyByCountryCode } from '../../../../shared/utils/price.js';
+
+function parseAmount(amount, countryCode) {
+    return {
+        currency: getCurrencyByCountryCode(countryCode),
+        value: Number(amount),
+    };
+}
+
+export { parseAmount };

package/dist/pages/checkout/shipping-page/components/address-book-selector.d.ts

@@ -0,0 +1,6 @@
+export interface AddressBookSelectorProps {
+    billToId: string;
+    className?: string;
+    currentShipToId?: string;
+}
+export declare function AddressBookSelector({ className, currentShipToId, }: AddressBookSelectorProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,81 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useCallback, useMemo } from 'react';
+import { ListBox, ListBoxItem, Text } from 'react-aria-components';
+import clsx from 'clsx';
+import { Checkbox } from '../../../../forms/elements/checkbox/checkbox.js';
+import { SearchField } from '../../../../forms/fields/search-field/search-field.js';
+import { FormattedMessage } from '../../../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import { Message } from '../../../../message/message.js';
+import { useFetchPagedShipToAddresses } from '../../../../shared/api/storefront/hooks/customer/use-fetch-paged-ship-to-addresses.js';
+import { UnauthorizedRequestError } from '../../../../shared/fetch/request.js';
+import { HighlightText } from '../../../../text/highlight-text/highlight-text.js';
+import styles from './address-book-selector.module.css.js';
+
+const DEFAULT_PAGE_SIZE = 20;
+function AddressBookSelector({ 
+// billToId,
+className, currentShipToId, }) {
+    const t = useFormattedMessage();
+    const listBoxRef = useRef(null);
+    const [selectedAddressId, setSelectedAddressId] = useState(currentShipToId);
+    const [search, setSearch] = useState('');
+    const [page] = useState(1);
+    const { data, error, isFetching } = useFetchPagedShipToAddresses({
+        page,
+        pageSize: DEFAULT_PAGE_SIZE,
+        search,
+    });
+    const hasMoreResults = !isFetching &&
+        data?.pagination &&
+        data.pagination.totalItemCount > DEFAULT_PAGE_SIZE;
+    const onAddressSelectionChanged = useCallback((key) => {
+        if (key && key !== 'undefined' && key !== '') {
+            setSelectedAddressId(String(key));
+        }
+    }, []);
+    const [listBoxItems, rerenderKey] = useMemo(() => {
+        const listBoxItems = [...(data?.shipTos || [])];
+        if (error instanceof UnauthorizedRequestError) {
+            listBoxItems.push({
+                id: 'message',
+                message: t('You are not authorized to view addresses. Please log in or contact support.'),
+                type: 'danger',
+            });
+        }
+        else if (error) {
+            listBoxItems.push({
+                id: 'message',
+                message: t('An error occurred while fetching addresses. Please try again later.'),
+                type: 'danger',
+            });
+        }
+        else if (hasMoreResults) {
+            listBoxItems.push({
+                id: 'message',
+                message: t('There are more addresses, please refine your search if needed.'),
+                type: 'warning',
+            });
+        }
+        return [
+            listBoxItems,
+            Math.random().toString(36).slice(2, 15) + currentShipToId,
+        ];
+    }, [data?.shipTos, error, hasMoreResults, t, currentShipToId]);
+    return (jsxs("div", { className: clsx(styles['address-book-selector-container'], className), children: [jsx(SearchField, { autoFocus: true, isDebounced: true, "aria-controls": "filtered-address-results-list", isDisabled: isFetching, isLoading: isFetching, label: t('Search addresses'), onChange: setSearch, onKeyUp: ({ key }) => {
+                    if (key === 'ArrowDown') {
+                        listBoxRef.current?.focus();
+                    }
+                }, placeholder: t('Search addresses'), showLabel: false, size: "md", value: search, variant: "outline" }), jsx(ListBox, { ref: listBoxRef, "aria-label": "List of addresses", "aria-live": "polite", className: styles['list-box'], id: "filtered-address-results-list", items: listBoxItems, onSelectionChange: keys => onAddressSelectionChanged(String([...keys][0])), renderEmptyState: () => !isFetching && (jsx(Message, { type: "info", children: jsx(FormattedMessage, { id: "Address not found" }) })), selectedKeys: selectedAddressId ? [selectedAddressId] : [], selectionBehavior: "replace", selectionMode: "single", children: listBoxItem => 'type' in listBoxItem ? (jsx(ListBoxItem, { isDisabled: true, textValue: listBoxItem.id, children: jsx(Message, { type: listBoxItem.type, children: jsx(Text, { slot: "description", children: listBoxItem.message }) }) }, "marker")) : (jsxs(ListBoxItem, { className: styles['list-box-item'], id: listBoxItem.id, textValue: listBoxItem.id, children: [jsx(Checkbox, { isReadOnly: true, isSelected: selectedAddressId === listBoxItem.id }), jsxs("div", { className: styles['list-box-item-content'], children: [jsx(Text, { slot: "label", children: jsx("div", { className: styles['company-name'], children: jsx(HighlightText, { className: styles['company-name-text'], highlightText: search, text: `${listBoxItem.address1} ${listBoxItem.address2 || ''}`.trim() }) }) }), jsxs(Text, { slot: "description", children: [jsx("div", { children: jsx(HighlightText, { highlightText: search, text: [listBoxItem.companyName, listBoxItem.customerName]
+                                                    .filter(Boolean)
+                                                    .join(', ') }) }), jsx("div", { children: jsx(HighlightText, { highlightText: search, text: [
+                                                    listBoxItem.city,
+                                                    listBoxItem.postalCode,
+                                                    listBoxItem.country?.name,
+                                                ]
+                                                    .filter(Boolean)
+                                                    .join(', ') }) })] })] })] }, `${listBoxItem.id}-${selectedAddressId === listBoxItem.id}`)) }, `${rerenderKey}-${selectedAddressId}`), selectedAddressId && (jsx("input", { name: "selectedShipToId", type: "hidden", value: selectedAddressId }))] }));
+}
+
+export { AddressBookSelector };

package/dist/pages/checkout/shipping-page/components/address-book-selector.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"address-book-selector-container":"address-book-selector-module-vK8zS","list-box":"address-book-selector-module-l-Ld-","list-box-item":"address-book-selector-module-mdKrg","list-box-item-content":"address-book-selector-module-ApSjS","company-name":"address-book-selector-module-sWeiG","company-name-text":"address-book-selector-module-txXx3"};
+
+export { styles as default };

package/dist/pages/checkout/shipping-page/components/currency-change-dialog.d.ts

@@ -0,0 +1,6 @@
+export interface CurrencyChangeDialogProps {
+    isOpen: boolean;
+    onOpenChange: (isOpen: boolean) => void;
+    onSubmit: () => void;
+}
+export declare function CurrencyChangeDialog({ isOpen, onOpenChange, onSubmit, }: CurrencyChangeDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/pages/checkout/shipping-page/components/currency-change-dialog.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Link } from '../../../../buttons/link/link.js';
+import { FormattedMessage } from '../../../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import { Dialog } from '../../../../modals/dialog/dialog.js';
+import { usePaths } from '../../../../shared/routing/use-paths.js';
+
+function CurrencyChangeDialog({ isOpen, onOpenChange, onSubmit, }) {
+    const t = useFormattedMessage();
+    const paths = usePaths();
+    return (jsx(Dialog, { "data-test-selector": "currencyChangeDialog", isOpen: isOpen, onOpenChange: onOpenChange, onSubmit: onSubmit, shouldCloseOnInteractOutside: true, submitLabel: "Continue", title: t('Currency Change'), children: jsxs("p", { children: [jsx(FormattedMessage, { id: "You selected a country where we invoice in a different currency. This will result in your cart being converted to the new currency. If you would like to review your order, " }), jsx(Link, { hasUnderline: true, color: "secondary", href: paths.CART, onClick: onSubmit, children: jsx(FormattedMessage, { id: "please go back to your cart." }) }), ' ', jsx(FormattedMessage, { id: "If you want to proceed, click the continue button. If you want to change your country, close this message and select a different country." })] }) }));
+}
+
+export { CurrencyChangeDialog };

package/dist/pages/checkout/shipping-page/components/edit-checkout-bill-to-address-form.d.ts

@@ -0,0 +1,16 @@
+import { BillToModel } from '../../../../shared/api/storefront/model/storefront.model';
+import { ValidAddress } from '../../../../shared/model/address';
+import { Country } from '../../../../shared/model/countries-languages';
+export declare const EDIT_ADDRESS_FORM_ID = "billToForm";
+export interface EditAddressesFormData {
+    address: ValidAddress;
+    notes: string | undefined;
+}
+export declare function EditCheckoutBillToAddressForm({ billTo, countries, currentCountry, isLoading, isPickup, onSubmit, }: {
+    billTo: BillToModel | undefined | null;
+    countries: Country[];
+    currentCountry: Country | undefined;
+    isLoading: boolean;
+    isPickup: boolean;
+    onSubmit: (event: EditAddressesFormData) => void;
+}): import("react/jsx-runtime").JSX.Element;