@sonic-equipment/ui 122.0.0 → 124.0.0

package/dist/buttons/add-to-cart-button/add-to-cart-button.js

@@ -72,7 +72,7 @@ function SpinnerState({ isDisabled, onChange, onManualInput, quantity, }) {
     useEffect(() => {
         setInternalQuantity(quantity);
     }, [quantity]);
-    return (jsx(NumberField, { withButtons: true, autoGrow: true, formatOptions: {
+    return (jsx(NumberField, { withButtons: true, autoGrow: true, "data-test-selector": "quantity", formatOptions: {
             maximumFractionDigits: 0,
             style: 'decimal',
             useGrouping: false,
@@ -95,7 +95,7 @@ function ManualInputState({ isDisabled, onCancel, onConfirm, quantity, }) {
         if (e.key === 'Escape')
             onCancel();
     };
-    return (jsxs("div", { className: styles['manual-input-container'], children: [jsx("div", { className: styles['left-button-spacer'] }), jsx(NumberField, { autoFocus: true, autoGrow: true, defaultValue: quantity ? ensureNumber(quantity) : undefined, formatOptions: {
+    return (jsxs("div", { className: styles['manual-input-container'], children: [jsx("div", { className: styles['left-button-spacer'] }), jsx(NumberField, { autoFocus: true, autoGrow: true, "data-test-selector": "quantity", defaultValue: quantity ? ensureNumber(quantity) : undefined, formatOptions: {
                     maximumFractionDigits: 0,
                     style: 'decimal',
                     useGrouping: false,

package/dist/buttons/add-to-cart-button/connected-add-to-cart-button.js

@@ -5,11 +5,13 @@ import { useAddProductToCurrentCart } from '../../shared/api/storefront/hooks/ca
 import { useDeleteCartLineById } from '../../shared/api/storefront/hooks/cart/use-delete-cart-line-by-id.js';
 import { useFetchCurrentCartLines } from '../../shared/api/storefront/hooks/cart/use-fetch-current-cart-lines.js';
 import { useUpdateCartLineById } from '../../shared/api/storefront/hooks/cart/use-update-cart-line-by-id.js';
+import { useDataLayer } from '../../shared/ga/use-data-layer.js';
 import { useCartEvents } from '../../shared/providers/cart-provider.js';
 import { useToast } from '../../toast/use-toast.js';
 import { AddToCartButton } from './add-to-cart-button.js';
 
 const ConnectedAddToCartButton = ({ onAddToCart, productId }) => {
+    const { createEcommerceEvent, dataLayer } = useDataLayer();
     const { isPending: isPendingAddToCart, mutate: addToCart } = useAddProductToCurrentCart();
     const { data: cartLines, isLoading: isLoadingCartLines } = useFetchCurrentCartLines();
     const { isPending: isPendingDeleteCartLine, mutate: deleteCartLine } = useDeleteCartLineById();
@@ -77,6 +79,12 @@ const ConnectedAddToCartButton = ({ onAddToCart, productId }) => {
                 onSuccess: cartLine => {
                     onAddToCart?.({ cartLine });
                     onCartLineAdded?.(cartLine);
+                    dataLayer.push(createEcommerceEvent({
+                        cartLine,
+                        event: {
+                            event: 'add_to_cart',
+                        },
+                    }));
                     addToast({
                         body: (jsx(FormattedMessage, { id: "The product has been added to your cart." })),
                         isUserDismissable: false,

package/dist/buttons/button/button.d.ts

@@ -9,10 +9,11 @@ export interface ButtonProps {
     icon?: React.ReactNode;
     iconPosition?: 'left' | 'right';
     isDisabled?: boolean;
+    isLoading?: string | ReactNode | boolean;
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
     size?: 'sm' | 'md' | 'lg';
     type?: 'button' | 'submit' | 'reset';
     variant?: 'solid' | 'outline' | 'ghost';
     withArrow?: boolean;
 }
-export declare function Button({ _pseudo, children, className, color, condensed, 'data-test-selector': dataTestSelector, icon, iconPosition, isDisabled, onClick: _onClick, size, type, variant, withArrow, }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ _pseudo, children, className, color, condensed, 'data-test-selector': dataTestSelector, icon, iconPosition, isDisabled, isLoading, onClick: _onClick, size, type, variant, withArrow, }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/buttons/button/button.js

@@ -1,10 +1,12 @@
 "use client";
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { isValidElement } from 'react';
 import clsx from 'clsx';
+import { ProgressCircle } from '../../loading/progress-circle.js';
 import { GlyphsArrowBoldCapsRightIcon } from '../../icons/glyph/glyphs-arrow-boldcaps-right-icon.js';
 import buttonStyles from './button.module.css.js';
 
-function Button({ _pseudo = 'none', children, className, color = 'primary', condensed, 'data-test-selector': dataTestSelector, icon, iconPosition = 'left', isDisabled, onClick: _onClick, size = 'lg', type = 'button', variant = 'solid', withArrow = false, }) {
+function Button({ _pseudo = 'none', children, className, color = 'primary', condensed, 'data-test-selector': dataTestSelector, icon, iconPosition = 'left', isDisabled, isLoading = false, onClick: _onClick, size = 'lg', type = 'button', variant = 'solid', withArrow = false, }) {
     const showIconOnLeft = icon && iconPosition === 'left';
     const showIconOnRight = icon && iconPosition === 'right';
     const onClick = (e) => {
@@ -15,7 +17,10 @@ function Button({ _pseudo = 'none', children, className, color = 'primary', cond
             return;
         e.preventDefault();
     };
-    return (jsxs("button", { className: clsx({ [buttonStyles.condensed]: condensed }, { [buttonStyles.icon]: icon }, buttonStyles.button, buttonStyles[variant], buttonStyles[size], buttonStyles[color], buttonStyles[_pseudo], className), "data-disabled": isDisabled ? true : undefined, "data-test-selector": dataTestSelector, disabled: isDisabled, onClick: onClick, type: type, children: [jsx(Fragment, { children: showIconOnLeft && jsx("span", { className: buttonStyles.icon, children: icon }) }), children, withArrow && (jsx(GlyphsArrowBoldCapsRightIcon, { className: buttonStyles['right-arrow-icon'] })), showIconOnRight && jsx("span", { className: buttonStyles.icon, children: icon })] }));
+    return (jsx("button", { className: clsx({ [buttonStyles.condensed]: condensed }, { [buttonStyles.icon]: icon }, { [buttonStyles['loading-uninformative']]: isLoading === true }, {
+            [buttonStyles['loading-informative']]: isLoading &&
+                (typeof isLoading === 'string' || isValidElement(isLoading)),
+        }, buttonStyles.button, buttonStyles[variant], buttonStyles[size], buttonStyles[color], buttonStyles[_pseudo], className), "data-disabled": isDisabled ? true : undefined, "data-test-selector": dataTestSelector, disabled: isDisabled, onClick: onClick, type: type, children: jsxs(Fragment, { children: [showIconOnLeft && jsx("span", { className: buttonStyles.icon, children: icon }), jsx("span", { className: buttonStyles.children, children: isLoading ? (isLoading === true ? children : isLoading) : children }), withArrow && (jsx(GlyphsArrowBoldCapsRightIcon, { className: buttonStyles['right-arrow-icon'] })), showIconOnRight && jsx("span", { className: buttonStyles.icon, children: icon }), isLoading && (jsx(ProgressCircle, { className: buttonStyles.spinner, size: "sm", variant: color === 'primary' ? 'white' : 'gray' }))] }) }));
 }
 
 export { Button };

package/dist/buttons/button/button.module.css.js

@@ -1,3 +1,3 @@
-var buttonStyles = {"button":"button-module-V4meK","icon":"button-module-XaNWz","sm":"button-module-Pbwz7","md":"button-module-GVTEW","condensed":"button-module-GKHQc","lg":"button-module-nyNY8","primary":"button-module-tmyk8","outline":"button-module-vq9GI","solid":"button-module-AjvlY","hover":"button-module-YzPAr","focus":"button-module--xzsY","active":"button-module-XMFzj","ghost":"button-module-f4UVe","right-arrow-icon":"button-module-ydQAo","secondary":"button-module--1bCH"};
+var buttonStyles = {"button":"button-module-V4meK","icon":"button-module-XaNWz","loading-uninformative":"button-module-LwuW2","loading-informative":"button-module-U5IxM","spinner":"button-module-13ndF","children":"button-module-vqRq-","primary":"button-module-tmyk8","secondary":"button-module--1bCH","sm":"button-module-Pbwz7","md":"button-module-GVTEW","condensed":"button-module-GKHQc","lg":"button-module-nyNY8","outline":"button-module-vq9GI","solid":"button-module-AjvlY","hover":"button-module-YzPAr","focus":"button-module--xzsY","active":"button-module-XMFzj","ghost":"button-module-f4UVe","right-arrow-icon":"button-module-ydQAo"};
 
 export { buttonStyles as default };

package/dist/checkout/adyen-payment.d.ts

@@ -0,0 +1,21 @@
+import { MutableRefObject } from 'react';
+import Dropin from '@adyen/adyen-web/dist/types/components/Dropin';
+import { AdyenPaymentModel } from 'shared/api/storefront/model/shop.model';
+import '@adyen/adyen-web/dist/adyen.css';
+interface AdyenPaymentProps {
+    amount: number;
+    billToId: string;
+    cartId: string;
+    countryCode: string;
+    currencyCode: string;
+    dropinRef: MutableRefObject<Dropin | null>;
+    environment: 'test' | 'live' | 'live-us' | 'live-au' | 'live-apse' | 'live-in';
+    locale: string;
+    onComplete: (result: AdyenPaymentModel) => Promise<void>;
+    onError: (error: unknown, result: AdyenPaymentModel) => void;
+    orderAmount: number;
+    redirectResult: string | undefined;
+    returnUrl: string;
+}
+export declare function AdyenPayment({ amount, billToId, cartId, countryCode, currencyCode, dropinRef, environment, locale, onComplete, onError, orderAmount, redirectResult, returnUrl, }: AdyenPaymentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/checkout/adyen-payment.js

@@ -0,0 +1,165 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import AdyenCheckout from '@adyen/adyen-web';
+import qs from 'query-string';
+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';
+
+function AdyenPayment({ amount, billToId, cartId, countryCode, currencyCode, dropinRef, environment, locale, onComplete, onError, orderAmount, redirectResult, returnUrl, }) {
+    const dropinDivRef = useRef(null);
+    const { data: adyenSettings } = useFetchAdyenConfig();
+    const { data: adyenSession, error, mutate: createAdyenSession, } = useCreateAdyenSession();
+    useEffect(() => {
+        createAdyenSession({
+            cartId,
+            orderAmount,
+            returnUrl,
+        });
+    }, [cartId, countryCode, orderAmount, returnUrl, createAdyenSession]);
+    useEffect(() => {
+        if (!adyenSettings || !adyenSession || !dropinDivRef.current)
+            return;
+        const options = {
+            amount: parseAmount(amount, countryCode),
+            analytics: {
+                enabled: false,
+            },
+            clientKey: adyenSettings.clientKey,
+            countryCode,
+            environment,
+            locale,
+            onAdditionalDetails: (async (state, _component) => {
+                if (!state.details.redirectResult) {
+                    throw new Error('No redirectResult');
+                }
+                const result = await getAdyenPaymentDetails({
+                    redirectResult: state.details.redirectResult,
+                });
+                const { amount: adyenAmount, customerId: adyenCustomerId } = getAndRemoveAdyenQueryParams();
+                if (amount.toFixed(2).replaceAll(/[,.]/gi, '') !== adyenAmount)
+                    return onError(new Error('Invalid amount'), result);
+                if (billToId !== adyenCustomerId)
+                    return onError(new Error('Invalid customer'), result);
+                return handlePaymentResponse(result, onComplete, onError);
+            }),
+            onSubmit: (async (state, _component) => {
+                if (state.data.paymentMethod.type === 'paybybank') {
+                    state.data.countryCode = countryCode;
+                }
+                const result = await postAdyenPayment({
+                    currencyCode,
+                    data: state.data,
+                    orderAmount,
+                    returnUrl,
+                    webOrderNumber: adyenSession.webOrderNumber,
+                });
+                if (result.action) {
+                    if (result.action.type === 'redirect') {
+                        return handleRedirectPaymentAction(result);
+                    }
+                    throw new Error('Invalid payment response');
+                }
+                return handlePaymentResponse(result, onComplete, onError);
+            }),
+            session: {
+                ...adyenSession,
+                id: adyenSession.transactionId,
+            },
+            showPayButton: false,
+        };
+        (async function loadAdyen() {
+            if (!dropinDivRef.current)
+                return;
+            const checkout = await AdyenCheckout(options);
+            const dropIn = checkout.create('dropin');
+            if (redirectResult)
+                checkout.submitDetails({ details: { redirectResult } });
+            if (dropinRef.current)
+                dropinRef.current.unmount();
+            dropinRef.current = dropIn.mount(dropinDivRef.current);
+        })();
+    }, [
+        billToId,
+        adyenSettings,
+        adyenSession,
+        amount,
+        countryCode,
+        currencyCode,
+        environment,
+        locale,
+        orderAmount,
+        redirectResult,
+        returnUrl,
+        dropinRef,
+        onComplete,
+        onError,
+    ]);
+    if (error)
+        return jsx("div", { children: String(error) });
+    return jsx("div", { ref: dropinDivRef, id: "dropin" });
+}
+function getAndRemoveAdyenQueryParams() {
+    if (typeof window === 'undefined')
+        return {};
+    const params = qs.parse(window.location.search || '');
+    const { amount, customerId, redirectResult } = params;
+    delete params['redirectResult'];
+    delete params['amount'];
+    delete params['customerId'];
+    history?.pushState({}, '', `${window.location.pathname}${qs.stringify(params) ? `?${qs.stringify(params)}` : ''}`);
+    return { amount, customerId, redirectResult };
+}
+async function handlePaymentResponse(result, onSubmit, onError) {
+    try {
+        if (result.action) {
+            if (result.action.type === 'redirect') {
+                handleRedirectPaymentAction(result);
+            }
+            else {
+                throw new Error('Adyen_Error');
+            }
+        }
+        else {
+            switch (result.resultCode) {
+                case 'Pending':
+                case 'Received':
+                case 'Authorised':
+                    return await onSubmit(result);
+                case 'Refused':
+                    throw new Error('Adyen_Refused');
+                case 'Cancelled':
+                    throw new Error('Adyen_Cancelled');
+                default:
+                    throw new Error('Adyen_Error');
+            }
+        }
+    }
+    catch (error) {
+        onError(error, result);
+    }
+}
+function handleRedirectPaymentAction(adyenPaymentResult) {
+    if (typeof window === 'undefined' || typeof document === 'undefined')
+        return;
+    if (adyenPaymentResult.action.method === 'GET') {
+        window.location.href = adyenPaymentResult.action.url;
+    }
+    else if (adyenPaymentResult.action.method === 'POST') {
+        const form = document.createElement('form');
+        form.method = 'POST';
+        form.action = adyenPaymentResult.action.url;
+        for (const key in adyenPaymentResult.action.data) {
+            const input = document.createElement('input');
+            input.name = key;
+            input.value = adyenPaymentResult.action.data[key];
+            form.append(input);
+        }
+        document.body.append(form);
+        form.submit();
+        form.remove();
+    }
+}
+
+export { AdyenPayment };

package/dist/checkout/parse-amount.d.ts

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

package/dist/checkout/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/checkout/payment-details.d.ts

@@ -0,0 +1,5 @@
+import { CartModel } from '../shared/api/storefront/model/shop.model';
+export declare function PaymentDetails({ cart, onCartChanged, }: {
+    cart: CartModel;
+    onCartChanged: (cart: CartModel) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/checkout/payment-details.js

@@ -0,0 +1,21 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { TextField } from '../forms/text-field/text-field.js';
+import { useFormattedMessage } from '../intl/use-formatted-message.js';
+import { useDebouncedCallback } from '../shared/hooks/use-debounced-callback.js';
+
+function PaymentDetails({ cart, onCartChanged, }) {
+    const [vatNumber, setVatNumber] = useState(cart.customerVatNumber);
+    const [poNumber, setPONumber] = useState(cart.poNumber);
+    const t = useFormattedMessage();
+    const onCartChangedDebounced = useDebouncedCallback(onCartChanged, 500);
+    useEffect(() => {
+        if (!vatNumber || !poNumber)
+            return;
+        onCartChangedDebounced({ ...cart, customerVatNumber: vatNumber, poNumber });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [vatNumber, poNumber]);
+    return (jsxs(Fragment, { children: [jsx(TextField, { isRequired: true, showLabel: true, label: t('VAT Number'), minLength: 8, onChange: setVatNumber, value: vatNumber }), jsx(TextField, { isRequired: true, showLabel: true, label: t('PO Number'), onChange: setPONumber, value: poNumber })] }));
+}
+
+export { PaymentDetails };

package/dist/checkout/payment.d.ts

@@ -0,0 +1,6 @@
+import { AdyenPaymentModel, CartModel } from '../shared/api/storefront/model/shop.model';
+export declare function Payment({ cart: _cart, onError, onPaymentComplete, }: {
+    cart: CartModel;
+    onError: (error: unknown, result: AdyenPaymentModel) => void;
+    onPaymentComplete: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/checkout/payment.js

@@ -0,0 +1,69 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useRef, useEffect, useCallback } from 'react';
+import { Form } from 'react-aria-components';
+import qs from 'query-string';
+import { Button } from '../buttons/button/button.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 { currencySymbolToISO } from '../shared/model/currency.js';
+import { AdyenPayment } from './adyen-payment.js';
+import { PaymentDetails } from './payment-details.js';
+
+function Payment({ cart: _cart, onError, onPaymentComplete, }) {
+    const patchCart = usePatchCart();
+    const placeOrder = usePlaceOrder();
+    const dropinRef = useRef(null);
+    const cartRef = useRef(_cart);
+    const cart = cartRef.current;
+    const { redirectResult } = 
+    // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
+    typeof window === 'undefined' ? {} : qs.parse(window.location.search || '');
+    const allowSubmit = !redirectResult;
+    const countryCode = _cart.billTo?.country?.abbreviation;
+    useEffect(() => {
+        cartRef.current = _cart;
+    }, [_cart]);
+    async function onSubmit() {
+        const cart = cartRef.current;
+        dropinRef.current?.showValidation();
+        if (!cart.customerVatNumber)
+            return;
+        if (dropinRef.current) {
+            if (!dropinRef.current.isValid)
+                return;
+            await patchCart({ cart });
+            dropinRef.current.submit();
+        }
+    }
+    const onComplete = useCallback(async (result) => {
+        const cart = cartRef.current;
+        await placeOrder({
+            cart: {
+                ...cart,
+                paymentMethod: null,
+                paymentOptions: {
+                    ...cart.paymentOptions,
+                    adyenPspReference: result.pspReference,
+                    isAdyenDropIn: true,
+                },
+            },
+        });
+        return onPaymentComplete();
+    }, [onPaymentComplete, placeOrder]);
+    return (jsxs(Fragment, { children: [jsx("h2", { children: "Payment" }), jsxs(Form, { onSubmit: e => {
+                    e.preventDefault();
+                    onSubmit();
+                }, children: [!redirectResult && (jsx(PaymentDetails, { cart: cart, onCartChanged: cart => {
+                            cartRef.current = cart;
+                        } })), cart.paymentMethod?.name === 'PBI' && 'Pay by invoice', cart.paymentMethod?.name !== 'PBI' &&
+                        cart.paymentOptions &&
+                        cart.billTo?.id &&
+                        countryCode && (jsx(AdyenPayment, { amount: cart.orderGrandTotal, billToId: cart.billTo.id, cartId: cart.trackId, countryCode: countryCode, currencyCode: currencySymbolToISO[cart.currencySymbol], dropinRef: dropinRef, environment: "test", locale: "nl-NL", onComplete: onComplete, onError: onError, orderAmount: cart.orderGrandTotal, redirectResult: !redirectResult || Array.isArray(redirectResult)
+                            ? undefined
+                            : redirectResult, returnUrl: typeof window === 'undefined'
+                            ? ''
+                            : // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
+                                `${window.location.pathname}${window.location.search ? `?${window.location.search}` : ''}` })), jsx(Button, { isDisabled: !allowSubmit, type: "submit", children: "Pay" })] })] }));
+}
+
+export { Payment };

package/dist/collapsables/accordion/accordion-item.d.ts

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 export type BorderType = 'top' | 'middle' | 'middle-accentuated' | 'bottom';
 export interface AccordionItemProps {
     _pseudo?: 'none' | 'focus' | 'hover' | 'active';
+    allowToggle?: boolean;
     borderType?: BorderType | BorderType[];
     children: ReactNode;
     className?: string;
@@ -11,4 +12,4 @@ export interface AccordionItemProps {
     size?: 'md' | 'lg';
     title: ReactNode;
 }
-export declare function AccordionItem({ _pseudo, borderType, children, className, id, initialIsOpen, isDisabled, size, title, }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function AccordionItem({ _pseudo, allowToggle, borderType, children, className, id, initialIsOpen, isDisabled, size, title, }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/collapsables/accordion/accordion-item.js

@@ -7,12 +7,16 @@ import { useDisclosure } from '../../shared/hooks/use-disclosure.js';
 import { ensureArray } from '../../shared/utils/array.js';
 import styles from './accordion.module.css.js';
 
-function AccordionItem({ _pseudo = 'none', borderType = 'bottom', children, className, id, initialIsOpen = false, isDisabled = false, size, title, }) {
+function AccordionItem({ _pseudo = 'none', allowToggle = true, borderType = 'bottom', children, className, id, initialIsOpen = false, isDisabled = false, size, title, }) {
     const { isOpen, toggle } = useDisclosure(initialIsOpen);
     const panelId = `panel-${id}`;
     return (jsxs("div", { className: clsx(className, ...ensureArray(borderType).map(type => styles[`border-type-${type}`]), styles['accordion-item'], {
             [styles['is-open']]: isOpen,
-        }), children: [jsx("h3", { children: jsxs("button", { "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles.button, styles[_pseudo]), disabled: isDisabled, id: id, onClick: toggle, type: "button", children: [title, jsx("span", { className: styles.icon, children: size === 'lg' ? (jsx(GlyphsChevronsBoldDownIcon, {})) : (jsx(GlyphsChevronsSlimDownIcon, {})) })] }) }), jsx("div", { "aria-labelledby": id, className: styles.panel, id: panelId, role: "region", children: jsx("div", { className: styles.content, children: children }) })] }));
+            [styles['allow-toggle']]: allowToggle,
+        }), children: [jsx("h3", { children: jsxs("button", { "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles.button, styles[_pseudo]), disabled: isDisabled, id: id, onClick: () => {
+                        if (allowToggle)
+                            toggle();
+                    }, type: "button", children: [title, jsx("span", { className: styles.icon, children: size === 'lg' ? (jsx(GlyphsChevronsBoldDownIcon, {})) : (jsx(GlyphsChevronsSlimDownIcon, {})) })] }) }), jsx("div", { "aria-labelledby": id, className: styles.panel, id: panelId, role: "region", children: jsx("div", { className: styles.content, children: children }) })] }));
 }
 
 export { AccordionItem };

package/dist/collapsables/accordion/accordion.module.css.js

@@ -1,3 +1,3 @@
-var styles = {"accordion":"accordion-module-9WvAH","indented":"accordion-module-6CcEH","white":"accordion-module-CaVdG","accordion-item":"accordion-module-lf9d-","lg":"accordion-module-0qnae","with-seperators":"accordion-module-yOLrW","button":"accordion-module--Rwpb","icon":"accordion-module-Y50uq","focus":"accordion-module-M4BZs","panel":"accordion-module-KZjMo","content":"accordion-module-ejMH3","border-type-bottom":"accordion-module-oTdZK","border-type-top":"accordion-module-0mrLq","border-type-middle":"accordion-module-aAr-R","is-open":"accordion-module-W0F1z","border-type-middle-accentuated":"accordion-module-OB98a"};
+var styles = {"accordion":"accordion-module-9WvAH","indented":"accordion-module-6CcEH","white":"accordion-module-CaVdG","accordion-item":"accordion-module-lf9d-","lg":"accordion-module-0qnae","with-seperators":"accordion-module-yOLrW","button":"accordion-module--Rwpb","icon":"accordion-module-Y50uq","focus":"accordion-module-M4BZs","allow-toggle":"accordion-module-QEO2d","panel":"accordion-module-KZjMo","content":"accordion-module-ejMH3","border-type-bottom":"accordion-module-oTdZK","border-type-top":"accordion-module-0mrLq","border-type-middle":"accordion-module-aAr-R","is-open":"accordion-module-W0F1z","border-type-middle-accentuated":"accordion-module-OB98a"};
 
 export { styles as default };

package/dist/config.js

@@ -3,7 +3,7 @@ import main from './shared/utils/merge.js';
 
 const env = (typeof process === 'undefined'
     ? { VITE_SHOP_API_URL: ""}
-    : main(process.env, { VITE_SHOP_API_URL: ""}));
+    : main({ ...process.env }, { VITE_SHOP_API_URL: ""}));
 const validateEnvVariable = (name, value) => {
     if (value)
         return value;

package/dist/exports.d.ts

@@ -55,6 +55,10 @@ export * from './carousel/usp-carousel/product-usp-carousel-slide';
 export * from './carousel/usp-carousel/usp-carousel';
 export * from './cart-totals/cart-totals';
 export * from './cart-totals/cart-totals-summary';
+export * from './checkout/adyen-payment';
+export * from './checkout/parse-amount';
+export * from './checkout/payment';
+export * from './checkout/payment-details';
 export * from './collapsables/accordion/accordion';
 export * from './collapsables/accordion/accordion-item';
 export * from './collapsables/show-all/show-all';
@@ -163,9 +167,11 @@ export * from './shared/api/bff/hooks/use-fetch-announcements';
 export * from './shared/api/bff/hooks/use-fetch-product-details-page-data';
 export * from './shared/api/bff/hooks/use-fetch-product-listing-page-data';
 export * from './shared/api/bff/services/bff-service';
+export * from './shared/api/storefront/hooks/authentication/use-create-guest-account';
 export * from './shared/api/storefront/hooks/authentication/use-fetch-session';
 export * from './shared/api/storefront/hooks/authentication/use-invalidate-session';
 export * from './shared/api/storefront/hooks/authentication/use-is-authenticated';
+export * from './shared/api/storefront/hooks/authentication/use-patch-session';
 export * from './shared/api/storefront/hooks/authentication/use-sign-in';
 export * from './shared/api/storefront/hooks/authentication/use-sign-out';
 export * from './shared/api/storefront/hooks/cart/use-add-product-to-current-cart';
@@ -184,6 +190,12 @@ export * from './shared/api/storefront/hooks/cart/use-patch-cart';
 export * from './shared/api/storefront/hooks/cart/use-place-order';
 export * from './shared/api/storefront/hooks/cart/use-save-cart-for-later';
 export * from './shared/api/storefront/hooks/cart/use-update-cart-line-by-id';
+export * from './shared/api/storefront/hooks/customer/use-fetch-bill-to-addresses';
+export * from './shared/api/storefront/hooks/customer/use-fetch-ship-to-addresses';
+export * from './shared/api/storefront/hooks/customer/use-update-bill-to-address';
+export * from './shared/api/storefront/hooks/payment/use-create-adyen-session';
+export * from './shared/api/storefront/hooks/payment/use-fetch-adyen-config';
+export * from './shared/api/storefront/hooks/payment/use-invalidate-adyen';
 export * from './shared/api/storefront/hooks/translation/use-fetch-translations';
 export * from './shared/api/storefront/hooks/website/use-fetch-countries';
 export * from './shared/api/storefront/hooks/website/use-fetch-countries-languages';
@@ -198,11 +210,17 @@ export * from './shared/api/storefront/hooks/wishlist/use-fetch-all-wishlists-it
 export * from './shared/api/storefront/hooks/wishlist/use-fetch-wishlists';
 export * from './shared/api/storefront/services/authentication-service';
 export * from './shared/api/storefront/services/cart-service';
+export * from './shared/api/storefront/services/customer-service';
+export * from './shared/api/storefront/services/payment-service';
 export * from './shared/api/storefront/services/translation-service';
 export * from './shared/api/storefront/services/website-service';
 export * from './shared/api/storefront/services/wishlist-service';
 export * from './shared/feature-flags/use-feature-flags';
 export * from './shared/fetch/request';
+export * from './shared/ga/data-layer';
+export * from './shared/ga/google-analytics-provider';
+export * from './shared/ga/types';
+export * from './shared/ga/use-data-layer';
 export * from './shared/hooks/use-breakpoint';
 export * from './shared/hooks/use-cookie';
 export * from './shared/hooks/use-debounced-callback';
@@ -215,8 +233,10 @@ export * from './shared/hooks/use-scroll-lock';
 export * from './shared/hooks/use-scroll-to';
 export * from './shared/hooks/use-session-storage';
 export * from './shared/hooks/use-watch-css-property';
+export * from './shared/model/address';
 export * from './shared/model/announcement';
 export * from './shared/model/category';
+export * from './shared/model/countries';
 export * from './shared/model/countries-languages';
 export * from './shared/model/currency';
 export * from './shared/model/hit';
@@ -238,6 +258,7 @@ export * from './shared/utils/environment';
 export * from './shared/utils/event-emitter';
 export * from './shared/utils/merge';
 export * from './shared/utils/price';
+export * from './shared/utils/random';
 export * from './shared/utils/time';
 export * from './shared/utils/uuid';
 export * from './shared/utils/wait';
@@ -251,4 +272,5 @@ export * from './toast/toast-provider';
 export * from './toast/types';
 export * from './toast/use-toast';
 export * from './tokens/tokens';
+export * from './tooltip/tooltip';
 export * from './typography/heading/heading';

package/dist/forms/field-error/field-error.d.ts

@@ -1,5 +1,18 @@
+import { ReactNode } from 'react';
+export type ValidationError = string | string[];
+export type ValidateFunction<T> = (value: T) => ValidationError | true | null | undefined;
+export interface ValidationResult {
+    /** Whether the input value is invalid. */
+    isInvalid: boolean;
+    /** The native validation details for the input. */
+    validationDetails: ValidityState;
+    /** The current error messages for the input if it is invalid, otherwise an empty array. */
+    validationErrors: string[];
+}
 interface FieldErrorProps {
-    children?: string;
+    children?: ReactNode | ((values: ValidationResult & {
+        defaultChildren: ReactNode;
+    }) => ReactNode);
 }
 export declare function FieldError({ children }: FieldErrorProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/forms/field-error/field-error.js

@@ -1,10 +1,24 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { FieldError as FieldError$1 } from 'react-aria-components';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 import styles from './field-error.module.css.js';
 
 function FieldError({ children }) {
-    return (jsx(FieldError$1, { className: styles['field-error'], children: children }));
+    const t = useFormattedMessage();
+    return (jsx(FieldError$1, { className: styles['field-error'], children: children ||
+            (result => {
+                if (!result.isInvalid)
+                    return;
+                if (result.validationDetails.customError)
+                    return result.validationErrors[0];
+                const validationErrorType = Object.entries(result.validationDetails)
+                    .filter(([, value]) => value)
+                    .map(([key]) => key)[0];
+                if (validationErrorType)
+                    return t(`validation.${validationErrorType}`);
+                return t('validation.invalid');
+            }) }));
 }
 
 export { FieldError };

package/dist/forms/input/input.d.ts

@@ -3,6 +3,7 @@ import { Input as AriaInput } from 'react-aria-components';
 export interface InputProps extends Omit<ComponentProps<typeof AriaInput>, 'size'> {
     _pseudo?: 'focus' | 'none';
     autoGrow?: boolean;
+    label: string;
     size?: 'md' | 'lg';
     value?: string | number;
 }

package/dist/forms/input/input.js

@@ -10,7 +10,7 @@ import styles from './input.module.css.js';
  * This component is used to create an input that grows as the user types.
  * It uses a shadow input to calculate the width of the input.
  */
-const Input = forwardRef(({ _pseudo = 'none', autoGrow, size = 'lg', ...inputProps }, inputRef) => {
+const Input = forwardRef(({ _pseudo = 'none', autoGrow, label, size = 'lg', ...inputProps }, inputRef) => {
     const [props, ref] = useContextProps(inputProps, inputRef, InputContext);
     const { defaultValue, onChange, value: controlledValue } = props;
     const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
@@ -20,7 +20,7 @@ const Input = forwardRef(({ _pseudo = 'none', autoGrow, size = 'lg', ...inputPro
         ? onChange?.(event)
         : setUncontrolledValue(event.target.value);
     const { pressProps } = usePress({});
-    return (jsx("div", { className: clsx(styles['input-container'], styles[size], styles[_pseudo]), children: jsxs("div", { className: clsx({ [styles['growing-input']]: autoGrow }), children: [jsx(Input$1, { size: autoGrow ? 1 : undefined, ...props, ...pressProps, ref: ref, onChange: handleChange, onClick: e => {
+    return (jsx("div", { className: clsx(styles['input-container'], styles[size], styles[_pseudo]), children: jsxs("div", { className: clsx({ [styles['growing-input']]: autoGrow }), children: [jsx(Input$1, { "aria-label": label, size: autoGrow ? 1 : undefined, ...props, ...pressProps, ref: ref, onChange: handleChange, onClick: e => {
                         e.preventDefault();
                         e.stopPropagation();
                         e.target.focus();