@sonic-equipment/ui 126.0.0 → 128.0.0

package/dist/checkout/payment.js

@@ -1,48 +1,152 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useRef, useEffect, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
 import { Form } from 'react-aria-components';
-import qs from 'query-string';
-import { Button } from '../buttons/button/button.js';
+import { Address } from '../address/address.js';
+import { Accordion } from '../collapsables/accordion/accordion.js';
+import { AccordionItem } from '../collapsables/accordion/accordion-item.js';
+import { Checkbox } from '../forms/checkbox/checkbox.js';
+import { Label } from '../forms/label/label.js';
+import { Select } from '../forms/select/select.js';
+import { TextField } from '../forms/text-field/text-field.js';
+import { FormattedMessage } from '../intl/formatted-message.js';
+import { useFormattedMessage } from '../intl/use-formatted-message.js';
+import { useFetchSession } from '../shared/api/storefront/hooks/authentication/use-fetch-session.js';
+import { usePatchSession } from '../shared/api/storefront/hooks/authentication/use-patch-session.js';
+import { useFetchCurrentCart } from '../shared/api/storefront/hooks/cart/use-fetch-current-cart.js';
 import { usePatchCart } from '../shared/api/storefront/hooks/cart/use-patch-cart.js';
 import { usePlaceOrder } from '../shared/api/storefront/hooks/cart/use-place-order.js';
+import { useInvalidateAdyen } from '../shared/api/storefront/hooks/payment/use-invalidate-adyen.js';
+import { validateVATNumber } from '../shared/api/storefront/services/finance-service.js';
+import { useDebouncedCallback } from '../shared/hooks/use-debounced-callback.js';
 import { currencySymbolToISO } from '../shared/model/currency.js';
+import { Tooltip } from '../tooltip/tooltip.js';
 import { AdyenPayment } from './adyen-payment.js';
-import { PaymentDetails } from './payment-details.js';
+import { useHasReturnedFromAdyen } from './use-has-returned-from-adyen.js';
+import styles from './payment.module.css.js';
 
-function Payment({ cart: _cart, onError, onPaymentComplete, }) {
-    const { mutate: patchCart } = usePatchCart();
-    const placeOrder = usePlaceOrder();
+function Payment({ atp, cart: _cart, form, fulfillmentMethods, onError: _onError, onPaymentComplete, onProcessing, onValidating, }) {
+    const { data: session } = useFetchSession();
+    const { isLoading: isPatchingCart, mutate: patchCart } = usePatchCart();
+    const { isLoading: isPatchingSession, mutate: patchSession } = usePatchSession();
+    const { isLoading: isPlacingCart, mutate: placeOrder } = usePlaceOrder();
+    const { refetch: refetchCart } = useFetchCurrentCart();
     const dropinRef = useRef(null);
+    const [paymentError, setPaymentError] = useState();
+    const invalidateAdyen = useInvalidateAdyen();
+    const [isValidatingVAT, setIsValidatingVAT] = useState(false);
+    const t = useFormattedMessage();
     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 hasAtp = atp.length > 0 && atp[0]?.date !== null;
+    const [asSoonAsPossible, setAsSoonAsPossible] = useState(!hasAtp);
+    const [deliveryDate, setDeliveryDate] = useState(cart.requestedDeliveryDateDisplay?.toString() || '');
+    const hasReturnedFromAdyen = useHasReturnedFromAdyen();
     const countryCode = _cart.billTo?.country?.abbreviation;
+    const isProcessing = useMemo(() => hasReturnedFromAdyen || isPlacingCart, [isPlacingCart, hasReturnedFromAdyen]);
     useEffect(() => {
         cartRef.current = _cart;
     }, [_cart]);
-    async function onSubmit() {
+    useEffect(() => {
+        onValidating(isValidatingVAT || isPatchingSession);
+    }, [isPatchingSession, isValidatingVAT, onValidating]);
+    useEffect(() => {
+        onProcessing(isPatchingCart);
+    }, [isPatchingCart, onProcessing]);
+    useEffect(() => {
+        onProcessing(isProcessing);
+    }, [isProcessing, onProcessing]);
+    const [validationErrors, setValidationErrors] = useState({});
+    const atpSelectOptions = atp.reduce((acc, atp) => ({
+        ...acc,
+        [atp.date || '']: atp.displayDate,
+    }), {});
+    const fulfillmentMethodOptions = fulfillmentMethods.reduce((acc, method) => ({
+        ...acc,
+        [method]: t(`fulfillmentMethod.${method}`),
+    }), {});
+    const paymentMethodOptions = cart.paymentOptions?.paymentMethods?.reduce((acc, method) => {
+        acc[method.name] = t(`paymentMethod.${method.description}`);
+        return acc;
+    }, {});
+    const debouncedValidator = useDebouncedCallback(async (value) => {
+        if (!value)
+            return setValidationErrors({});
+        if (value.length < 8) {
+            return setValidationErrors({
+                ...validationErrors,
+                vatNumber: t('validation.tooShort'),
+            });
+        }
+        try {
+            setIsValidatingVAT(true);
+            const response = await validateVATNumber({ vatNumber: value });
+            if (response.isValid) {
+                setValidationErrors(prev => {
+                    delete prev.vatNumber;
+                    return prev;
+                });
+            }
+            else {
+                setValidationErrors({
+                    ...validationErrors,
+                    vatNumber: t('validation.invalid'),
+                });
+            }
+        }
+        catch {
+            setValidationErrors({
+                ...validationErrors,
+                vatNumber: t('validation.invalid'),
+            });
+        }
+        finally {
+            setIsValidatingVAT(false);
+        }
+    }, 500);
+    async function onSubmit(e) {
+        const formData = new FormData(e.currentTarget);
         const cart = cartRef.current;
-        dropinRef.current?.showValidation();
-        if (!cart.customerVatNumber)
+        setValidationErrors(prev => prev); // NOTE: This makes sure the form is revalidated on submit
+        if (Object.keys(validationErrors).length > 0)
+            return;
+        if (!dropinRef.current) {
+            console.warn('Adyen Dropin not ready');
+            return;
+        }
+        dropinRef.current.showValidation();
+        if (!dropinRef.current.isValid)
             return;
-        if (dropinRef.current) {
-            if (!dropinRef.current.isValid)
-                return;
-            await patchCart({ cart });
+        try {
+            // TODO: try catch handle failed patch, display error on top of form
+            await patchCart({
+                cart: {
+                    ...cart,
+                    customerVatNumber: formData.get('vatNumber')?.toString(),
+                    fulfillmentMethod: formData.get('fulfillmentMethod')?.toString(),
+                    poNumber: formData.get('poNumber')?.toString(),
+                    properties: {
+                        ...cart.properties,
+                        industry: formData.get('industry')?.toString() || '',
+                    },
+                    requestedDeliveryDate: formData.get('deliveryDate')?.toString(),
+                },
+            });
             dropinRef.current.submit();
         }
+        catch (error) {
+            console.error(error);
+            setPaymentError(error);
+        }
     }
     const onComplete = useCallback(async (result) => {
         const cart = cartRef.current;
+        // TODO: try catch handle error, display error on top
         await placeOrder({
             cart: {
                 ...cart,
                 paymentMethod: null,
                 paymentOptions: {
-                    ...cart.paymentOptions,
+                    ...cart.paymentOptions, // Hack needed to make B2B happy
                     adyenPspReference: result.pspReference,
                     isAdyenDropIn: true,
                 },
@@ -50,20 +154,50 @@ function Payment({ cart: _cart, onError, onPaymentComplete, }) {
         });
         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" })] })] }));
+    const onError = useCallback((error, result) => {
+        invalidateAdyen();
+        // invalidateCurrentCart()
+        setPaymentError(error);
+        console.error(error);
+        _onError?.(error, result);
+    }, [_onError, invalidateAdyen]);
+    return (jsxs(Form, { className: styles['payment-form'], id: form, onSubmit: e => {
+            e.preventDefault();
+            onSubmit(e);
+        }, validationErrors: validationErrors, children: [jsxs("div", { className: styles['delivery-date'], children: [jsx(Select, { showLabel: true, "data-test-selector": "delivery-date", isDisabled: hasReturnedFromAdyen || asSoonAsPossible, isRequired: !asSoonAsPossible, label: t('Select a desired delivery date'), name: "deliveryDate", onChange: setDeliveryDate, options: atpSelectOptions, selectedOption: deliveryDate, variant: "solid" }, String(asSoonAsPossible)), jsxs("div", { className: styles['asap-checkbox'], children: [jsx(Checkbox, { "data-test-selector": "asapCheckbox", isDisabled: hasReturnedFromAdyen || !hasAtp, isSelected: asSoonAsPossible, onChange: checked => {
+                                    setAsSoonAsPossible(checked);
+                                    if (checked)
+                                        setDeliveryDate('');
+                                }, children: jsx(FormattedMessage, { id: "As soon as possible" }) }), jsx(Tooltip, { text: t('Selecting As Soon As Possible will enable us to send the products to you as they become available.') })] })] }), jsx(Select, { isRequired: true, showLabel: true, defaultSelectedOption: cart.fulfillmentMethod, isDisabled: hasReturnedFromAdyen || fulfillmentMethods.length <= 1, label: t('Fulfillment method'), name: "fulfillmentMethod", onChange: async (value) => {
+                    await patchSession({
+                        session: {
+                            ...session,
+                            fulfillmentMethod: value,
+                        },
+                    });
+                    await refetchCart();
+                }, options: fulfillmentMethodOptions, variant: "solid" }), jsx(Select, { isRequired: true, 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, label: t('PO Number'), name: "poNumber" }), paymentMethodOptions && (jsx(Select, { defaultSelectedOption: cart.paymentOptions?.paymentMethods?.[0]?.name || 'ADY', isDisabled: (hasReturnedFromAdyen ||
+                    (cart.paymentOptions?.paymentMethods &&
+                        cart.paymentOptions.paymentMethods.length <= 1)) ??
+                    true, label: t('Payment method'), name: "paymentMethod", options: paymentMethodOptions, variant: "solid" })), cart.paymentMethod?.name !== 'PBI' &&
+                cart.paymentOptions &&
+                cart.billTo?.id &&
+                countryCode && (jsx(AdyenPayment, { amount: cart.orderGrandTotal, cartId: cart.trackId, countryCode: countryCode, currencyCode: currencySymbolToISO[cart.currencySymbol], customerId: cart.billTo.id, dropinRef: dropinRef, environment: "test", onComplete: onComplete, onError: onError, orderAmount: cart.orderGrandTotal, returnUrl: typeof window === 'undefined'
+                    ? ''
+                    : // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
+                        `https://sonicequipment.commerce.insitesandbox.com${window.location.pathname}${window.location.search ? `${window.location.search}` : ''}` })), Boolean(paymentError) && (jsx("div", { className: styles['error-message'], children: jsx(FormattedMessage, { id: "An error occurred while processing your payment. Please try again." }) })), jsxs("div", { className: styles['invoice-and-shipping'], children: [jsx(Label, { children: jsx(FormattedMessage, { id: "Billing and shipping address" }) }), jsx(Accordion, { variant: "select", children: jsx(AccordionItem, { id: "invoice-and-shipping", title: "Factuur- en verzendinformatie", children: jsxs("div", { className: styles['content'], children: [jsx("section", { className: styles.section, children: jsxs("div", { children: [jsx("p", { className: styles.label, children: jsx(FormattedMessage, { id: "Billing address" }) }), jsx(Address, { address1: cart.billTo?.address1, address2: cart.billTo?.address2, address3: cart.billTo?.address3, city: cart.billTo?.city, companyName: cart.billTo?.companyName, country: cart.billTo?.country?.name, email: cart.billTo?.email, phone: cart.billTo?.phone, postalCode: cart.billTo?.postalCode })] }) }), jsx("section", { className: styles.section, children: jsxs("div", { children: [jsx("p", { className: styles.label, children: jsx(FormattedMessage, { id: "Shipping address" }) }), jsx(Address, { address1: cart.shipTo?.address1, address2: cart.shipTo?.address2, address3: cart.shipTo?.address3, city: cart.shipTo?.city, companyName: cart.shipTo?.companyName, country: cart.shipTo?.country?.name, email: cart.shipTo?.email, phone: cart.shipTo?.phone, postalCode: cart.shipTo?.postalCode })] }) })] }) }) })] })] }));
 }
 
 export { Payment };

package/dist/checkout/payment.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"error-message":"payment-module-cF0-P","payment-form":"payment-module-XsBSV","delivery-date":"payment-module-yoZKM","asap-checkbox":"payment-module-iKZK1","invoice-and-shipping":"payment-module-RHQBy","content":"payment-module-3hHuC","section":"payment-module-Vdgdo","label":"payment-module-Hpq8j"};
+
+export { styles as default };

package/dist/checkout/use-get-adyen-redirect-result.d.ts

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

package/dist/checkout/use-get-adyen-redirect-result.js

@@ -0,0 +1,13 @@
+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/checkout/use-has-returned-from-adyen.d.ts

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

package/dist/checkout/use-has-returned-from-adyen.js

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

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

@@ -1,12 +1,20 @@
 import { ReactElement } from 'react';
 import { AccordionItemProps, BorderType } from './accordion-item';
 interface AccordionProps {
-    borderType?: BorderType | BorderType[];
     children?: ReactElement<AccordionItemProps> | ReactElement<AccordionItemProps>[] | false | undefined | null | (false | undefined | null | ReactElement<AccordionItemProps>)[];
+    variant?: 'standard' | 'select';
+}
+interface AccordionStandardProps extends AccordionProps {
+    borderType?: BorderType | BorderType[];
     color?: 'white' | 'black';
     hasLineSeparator?: boolean;
     indented?: boolean;
     size?: 'md' | 'lg';
+    variant?: 'standard';
+}
+interface AccordionDropDownProps extends AccordionProps {
+    variant: 'select';
 }
-export declare function Accordion({ borderType, children, color, hasLineSeparator, indented, size, }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+type Props = AccordionStandardProps | AccordionDropDownProps;
+export declare function Accordion({ variant, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/collapsables/accordion/accordion.js

@@ -3,7 +3,18 @@ import { Children, cloneElement } from 'react';
 import clsx from 'clsx';
 import styles from './accordion.module.css.js';
 
-function Accordion({ borderType = 'bottom', children, color = 'black', hasLineSeparator = true, indented, size = 'md', }) {
+function Accordion({ variant = 'standard', ...rest }) {
+    /* eslint-disable @typescript-eslint/no-unnecessary-condition */
+    if (variant === 'standard') {
+        return jsx(StandardAccordion, { variant: variant, ...rest });
+    }
+    if (variant === 'select') {
+        return jsx(DropDownAccordion, { variant: variant, ...rest });
+    }
+    throw new Error(`Invalid variant ${variant}`);
+    /* eslint-enable @typescript-eslint/no-unnecessary-condition */
+}
+function StandardAccordion({ borderType = 'bottom', children, color = 'black', hasLineSeparator = true, indented, size = 'md', }) {
     return (jsx("div", { className: clsx({ [styles.indented]: indented }, styles.accordion, styles[color], styles[size], hasLineSeparator && styles['with-seperators']), children: Boolean(children) &&
             Children.map(children, child => {
                 if (!child)
@@ -11,5 +22,13 @@ function Accordion({ borderType = 'bottom', children, color = 'black', hasLineSe
                 return cloneElement(child, { borderType, size });
             }) }));
 }
+function DropDownAccordion({ children, variant }) {
+    return (jsx("div", { className: clsx(styles.accordion, styles[variant]), children: Boolean(children) &&
+            Children.map(children, child => {
+                if (!child)
+                    return null;
+                return cloneElement(child);
+            }) }));
+}
 
 export { Accordion };

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","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"};
+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","select":"accordion-module-SAbiG"};
 
 export { styles as default };

package/dist/exports.d.ts

@@ -60,6 +60,8 @@ export * from './checkout/adyen-payment';
 export * from './checkout/parse-amount';
 export * from './checkout/payment';
 export * from './checkout/payment-details';
+export * from './checkout/use-get-adyen-redirect-result';
+export * from './checkout/use-has-returned-from-adyen';
 export * from './collapsables/accordion/accordion';
 export * from './collapsables/accordion/accordion-item';
 export * from './collapsables/show-all/show-all';
@@ -140,32 +142,38 @@ export * from './notifications/announcements/announcement';
 export * from './notifications/announcements/announcement-provider';
 export * from './notifications/announcements/connected-announcement';
 export * from './observers/intersection-observer';
-export * from './pages/cart-page/cart-page';
+export * from './pages/checkout/cart-page/cart-page';
+export * from './pages/checkout/layouts/checkout-page-layout/checkout-page-layout';
+export * from './pages/checkout/layouts/checkout-page-layout/components/checkout-page-section';
+export * from './pages/checkout/layouts/checkout-page-layout/components/checkout-page-section-content';
+export * from './pages/checkout/layouts/checkout-page-layout/components/checkout-page-section-header';
+export * from './pages/checkout/layouts/checkout-page-layout/components/checkout-page-section-link';
+export * from './pages/checkout/payment-page/payment-page';
+export * from './pages/checkout/shipping-page/components/edit-address';
+export * from './pages/checkout/shipping-page/components/readonly-address';
+export * from './pages/checkout/shipping-page/shipping-page';
+export * from './pages/components/page-container/page-container';
+export * from './pages/components/page-meta-data/page-meta-data';
+export * from './pages/components/page/page';
 export * from './pages/error-page/error-page';
-export * from './pages/layouts/checkout-page-layout/checkout-page-layout';
-export * from './pages/layouts/product-details-page-layout/product-details-page-layout';
 export * from './pages/loading-page/loading-page';
-export * from './pages/page-container/page-container';
-export * from './pages/page/page';
-export * from './pages/product-details-page/components/product-details-images/product-detail-images';
-export * from './pages/product-details-page/components/product-details-panel/product-details-panel';
-export * from './pages/product-details-page/components/product-details-recently-viewed/product-details-recently-viewed';
-export * from './pages/product-details-page/product-details';
-export * from './pages/product-details-page/product-details-page';
-export * from './pages/product-listing-page/no-results/no-results';
-export * from './pages/product-listing-page/product-listing';
-export * from './pages/product-listing-page/product-listing-page';
-export * from './pages/product-listing-page/product-listing-page-category-carousel/product-listing-page-category-carousel';
-export * from './pages/product-listing-page/product-listing-page-data-types';
-export * from './pages/product-listing-page/product-listing-page-provider/product-listing-page-context';
-export * from './pages/product-listing-page/product-listing-page-provider/product-listing-page-provider';
-export * from './pages/product-listing-page/product-listing-product-overview/product-listing-product-overview';
-export * from './pages/search-result-page/search-result-product-overview/search-result-product-overview';
-export * from './pages/search-result-page/search-results-page';
-export * from './pages/search-result-page/search-results-page-category-carousel/search-results-page-category-carousel';
-export * from './pages/shipping-page/components/edit-address';
-export * from './pages/shipping-page/components/readonly-address';
-export * from './pages/shipping-page/shipping-page';
+export * from './pages/product/layouts/product-details-page-layout/product-details-page-layout';
+export * from './pages/product/product-details-page/components/product-details-images/product-detail-images';
+export * from './pages/product/product-details-page/components/product-details-panel/product-details-panel';
+export * from './pages/product/product-details-page/components/product-details-recently-viewed/product-details-recently-viewed';
+export * from './pages/product/product-details-page/product-details';
+export * from './pages/product/product-details-page/product-details-page';
+export * from './pages/product/product-listing-page/no-results/no-results';
+export * from './pages/product/product-listing-page/product-listing';
+export * from './pages/product/product-listing-page/product-listing-page';
+export * from './pages/product/product-listing-page/product-listing-page-category-carousel/product-listing-page-category-carousel';
+export * from './pages/product/product-listing-page/product-listing-page-data-types';
+export * from './pages/product/product-listing-page/product-listing-page-provider/product-listing-page-context';
+export * from './pages/product/product-listing-page/product-listing-page-provider/product-listing-page-provider';
+export * from './pages/product/product-listing-page/product-listing-product-overview/product-listing-product-overview';
+export * from './pages/product/search-result-page/search-result-product-overview/search-result-product-overview';
+export * from './pages/product/search-result-page/search-results-page';
+export * from './pages/product/search-result-page/search-results-page-category-carousel/search-results-page-category-carousel';
 export * from './promos/promo-banner/promo-banner';
 export * from './promos/promo-banners/promo-banners';
 export * from './promos/promo-card/promo-card';
@@ -198,6 +206,8 @@ export * from './shared/api/storefront/hooks/cart/use-patch-cart-line-by-id';
 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/customer/use-fetch-bill-to-addresses';
+export * from './shared/api/storefront/hooks/customer/use-fetch-fulfillment-methods-by-customer-id';
+export * from './shared/api/storefront/hooks/customer/use-fetch-fulfillment-methods-for-current-cart';
 export * from './shared/api/storefront/hooks/customer/use-fetch-ship-to-addresses';
 export * from './shared/api/storefront/hooks/customer/use-patch-bill-to-address';
 export * from './shared/api/storefront/hooks/payment/use-create-adyen-session';
@@ -218,6 +228,7 @@ 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/finance-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';
@@ -230,12 +241,14 @@ 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-css-link';
 export * from './shared/hooks/use-debounced-callback';
 export * from './shared/hooks/use-disclosure';
 export * from './shared/hooks/use-enable-mobile-zoom';
 export * from './shared/hooks/use-intersection-observer';
 export * from './shared/hooks/use-is-breakpoint';
 export * from './shared/hooks/use-resize-observer';
+export * from './shared/hooks/use-script';
 export * from './shared/hooks/use-scroll-lock';
 export * from './shared/hooks/use-scroll-to';
 export * from './shared/hooks/use-session-storage';
@@ -268,6 +281,7 @@ export * from './shared/utils/price';
 export * from './shared/utils/random';
 export * from './shared/utils/string';
 export * from './shared/utils/time';
+export * from './shared/utils/types';
 export * from './shared/utils/uuid';
 export * from './shared/utils/wait';
 export * from './sidebar/sidebar';

package/dist/forms/checkbox/checkbox.d.ts

@@ -3,9 +3,10 @@ export interface CheckboxProps {
     _pseudo?: 'none' | 'focus' | 'hover' | 'active';
     children: ReactNode;
     className?: string;
+    'data-test-selector'?: string;
     isDisabled?: boolean;
     isSelected?: boolean;
     onChange?: (isSelected: boolean) => void;
     value?: string;
 }
-export declare function Checkbox({ _pseudo, children, className, isDisabled, isSelected, onChange, value, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export declare function Checkbox({ _pseudo, children, className, 'data-test-selector': dataTestSelector, isDisabled, isSelected, onChange, value, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/forms/checkbox/checkbox.js

@@ -4,8 +4,8 @@ import { Checkbox as Checkbox$1 } from 'react-aria-components';
 import clsx from 'clsx';
 import styles from './checkbox.module.css.js';
 
-function Checkbox({ _pseudo = 'none', children, className, isDisabled, isSelected, onChange, value, }) {
-    return (jsxs(Checkbox$1, { className: clsx(className, styles.checkbox, styles[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, value: value, children: [jsx("div", { className: styles.box, children: jsx("svg", { "aria-hidden": "true", className: styles.checkmark, viewBox: "0 0 18 18", children: jsx("polyline", { points: "1 9 7 14 15 4" }) }) }), children] }));
+function Checkbox({ _pseudo = 'none', children, className, 'data-test-selector': dataTestSelector, isDisabled, isSelected, onChange, value, }) {
+    return (jsxs(Checkbox$1, { className: clsx(className, styles.checkbox, styles[_pseudo]), "data-test-selector": dataTestSelector, isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, value: value, children: [jsx("div", { className: styles.box, children: jsx("svg", { "aria-hidden": "true", className: styles.checkmark, viewBox: "0 0 18 18", children: jsx("polyline", { points: "1 9 7 14 15 4" }) }) }), children] }));
 }
 
 export { Checkbox };

package/dist/forms/input/input.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useState } from 'react';
-import { usePress } from 'react-aria';
 import { useContextProps, InputContext, Input as Input$1 } from 'react-aria-components';
 import clsx from 'clsx';
 import styles from './input.module.css.js';
@@ -19,8 +18,7 @@ const Input = forwardRef(({ _pseudo = 'none', autoGrow, label, size = 'lg', ...i
     const handleChange = (event) => isControlled
         ? 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, { "aria-label": label, 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, ref: ref, onChange: handleChange, onClick: e => {
                         e.preventDefault();
                         e.stopPropagation();
                         e.target.focus();

package/dist/forms/label/label.d.ts

@@ -1,5 +1,5 @@
 interface LabelProps {
-    children: string;
+    children: string | React.ReactNode;
     isRequired?: boolean;
 }
 export declare function Label({ children, isRequired }: LabelProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/forms/select/select.d.ts

@@ -1,11 +1,13 @@
 export interface SelectProps<T> {
     'data-test-selector'?: string;
     defaultSelectedOption?: keyof T;
+    icon?: React.ReactNode;
     isDisabled?: boolean;
+    isLoading?: boolean;
     isRequired?: boolean;
     label: string;
     name?: string;
-    onChange: (value: keyof T) => void;
+    onChange?: (value: keyof T) => void;
     options: T;
     placeholder?: string;
     selectedOption?: keyof T;
@@ -14,4 +16,4 @@ export interface SelectProps<T> {
     size?: 'sm' | 'md';
     variant?: 'outline' | 'solid';
 }
-export declare function Select<T extends Record<string, string>>({ 'data-test-selector': dataTestSelector, defaultSelectedOption, isDisabled, isRequired, label, name, onChange, options, placeholder, selectedOption, showLabel, showPlaceholder, size, variant, }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Select<T extends Record<string, string>>({ 'data-test-selector': dataTestSelector, defaultSelectedOption, icon, isDisabled, isLoading, isRequired, label, name, onChange, options, placeholder, selectedOption, showLabel, showPlaceholder, size, variant, }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/forms/select/select.js

@@ -5,11 +5,12 @@ import { Select as Select$1, Button, SelectValue, Popover, ListBox, Section, Hea
 import clsx from 'clsx';
 import { GlyphsChevronsSlimDownIcon } from '../../icons/glyph/glyphs-chevrons-slim-down-icon.js';
 import { StrokeCheckmarkIcon } from '../../icons/stroke/stroke-checkmark-icon.js';
+import { ProgressCircle } from '../../loading/progress-circle.js';
 import { FieldError } from '../field-error/field-error.js';
 import { Label } from '../label/label.js';
 import styles from './select.module.css.js';
 
-function Select({ 'data-test-selector': dataTestSelector, defaultSelectedOption, isDisabled = false, isRequired = false, label, name, onChange, options, placeholder, selectedOption, showLabel = true, showPlaceholder = true, size = 'md', variant = 'outline', }) {
+function Select({ 'data-test-selector': dataTestSelector, defaultSelectedOption, icon = (jsx(GlyphsChevronsSlimDownIcon, { "aria-hidden": "true", className: styles.chevron })), isDisabled = false, isLoading, isRequired = false, label, name, onChange, options, placeholder, selectedOption, showLabel = true, showPlaceholder = true, size = 'md', variant = 'outline', }) {
     const selectRef = useRef(null);
     useEffect(() => {
         const updateWidth = () => {
@@ -24,9 +25,11 @@ function Select({ 'data-test-selector': dataTestSelector, defaultSelectedOption,
         window.addEventListener('resize', updateWidth);
         return () => window?.removeEventListener('resize', updateWidth);
     }, []);
-    return (jsxs(Select$1, { ref: selectRef, "aria-label": label, className: clsx(styles.select, styles[size], styles[variant]), "data-test-selector": dataTestSelector, defaultSelectedKey: defaultSelectedOption === undefined
+    return (jsxs(Select$1, { ref: selectRef, "aria-label": label, className: clsx(styles.select, styles[size], styles[variant], {
+            [styles['loading']]: isLoading,
+        }), "data-test-selector": dataTestSelector, defaultSelectedKey: defaultSelectedOption === undefined
             ? undefined
-            : String(defaultSelectedOption), isDisabled: isDisabled, isRequired: isRequired, name: name, onSelectionChange: selected => onChange(selected), placeholder: placeholder || label, selectedKey: selectedOption === undefined ? undefined : String(selectedOption), children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), jsxs(Button, { className: styles.button, children: [jsx(SelectValue, { "data-test-selector": "value" }), jsx(GlyphsChevronsSlimDownIcon, { "aria-hidden": "true", className: styles.chevron })] }), jsx(FieldError, {}), jsx(Popover, { ref: ref => 
+            : String(defaultSelectedOption), isDisabled: isDisabled, isRequired: isRequired, name: name, onSelectionChange: selected => onChange?.(selected), placeholder: placeholder || label, selectedKey: selectedOption === undefined ? undefined : String(selectedOption), children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), jsxs(Button, { className: styles.button, children: [jsx(SelectValue, { "data-test-selector": "value" }), jsx("div", { className: styles['icon-wrapper'], children: isLoading ? jsx(ProgressCircle, { variant: "gray" }) : icon })] }), jsx(FieldError, {}), jsx(Popover, { ref: ref => 
                 // Workaround for react/react-aria #1513
                 ref?.addEventListener('touchend', e => e.preventDefault()), className: clsx(styles.popover, styles[variant]), placement: "bottom left", children: jsx(ListBox, { className: styles.listbox, "data-test-selector": dataTestSelector ? `${dataTestSelector}_options` : undefined, children: jsxs(Section, { children: [showPlaceholder && (jsx(Header, { className: styles.header, children: placeholder || label })), Object.entries(options).map(([key, value]) => (jsxs(ListBoxItem, { "aria-label": value, className: styles.item, id: key, textValue: value, children: [selectedOption === key && (jsx("span", { slot: "description", children: jsx(StrokeCheckmarkIcon, { className: styles.check }) })), jsx("span", { slot: "label", children: value })] }, key)))] }) }) })] }));
 }

package/dist/forms/select/select.module.css.js

@@ -1,3 +1,3 @@
-var styles = {"select":"select-module-ui-Wc","sm":"select-module-44a1l","md":"select-module-QUm-8","button":"select-module-aMQIQ","chevron":"select-module-00uRU","focus":"select-module-XMc0P","solid":"select-module-IRd4F","popover":"select-module-z8cWq","listbox":"select-module-S21ba","header":"select-module-4Bm2j","item":"select-module-LgEJO","check":"select-module-lQFw3"};
+var styles = {"select":"select-module-ui-Wc","sm":"select-module-44a1l","md":"select-module-QUm-8","button":"select-module-aMQIQ","icon-wrapper":"select-module-3scUm","focus":"select-module-XMc0P","solid":"select-module-IRd4F","loading":"select-module-nKUxG","popover":"select-module-z8cWq","listbox":"select-module-S21ba","header":"select-module-4Bm2j","item":"select-module-LgEJO","check":"select-module-lQFw3"};
 
 export { styles as default };

package/dist/global-search/search-input/connected-search-input.js

@@ -10,7 +10,7 @@ function ConnectedSearchInput() {
     const { autocomplete, formRef, inputRef } = useAlgoliaSearch();
     const { close } = useGlobalSearchDisclosure();
     const t = useFormattedMessage();
-    const navigate = useNavigate();
+    const { navigate } = useNavigate();
     return (jsx(SearchInput, { autocomplete: autocomplete, formRef: formRef, inputRef: inputRef, onCancel: close, onSubmit: () => {
             if (!inputRef.current?.value)
                 return;