@sonic-equipment/ui 132.0.0 → 134.0.0

package/dist/tooltip/tooltip.d.ts

@@ -1,9 +1,10 @@
 import { ReactElement, ReactNode } from 'react';
 import { Placement } from 'react-aria';
 export interface TooltipProps {
+    children: ReactNode;
+    className?: string;
     offset?: number;
     placement?: Placement;
-    text: string | ReactNode;
     trigger?: ReactElement;
 }
-export declare function Tooltip({ offset, placement, text, trigger, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tooltip({ children, className, offset, placement, trigger, }: TooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/tooltip/tooltip.js

@@ -1,7 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useMemo, cloneElement } from 'react';
+import { usePress } from 'react-aria';
 import { DialogTrigger, Popover, OverlayArrow, Dialog } from 'react-aria-components';
 import { IconButton } from '../buttons/icon-button/icon-button.js';
+import clsx from 'clsx';
 import { StrokeInformationIcon } from '../icons/stroke/stroke-information-icon.js';
 import { useDisclosure } from '../shared/hooks/use-disclosure.js';
 import styles from './tooltip.module.css.js';
@@ -9,13 +11,17 @@ import styles from './tooltip.module.css.js';
 function InfoIcon(props) {
     return (jsx(IconButton, { ...props, className: styles.trigger, children: jsx(StrokeInformationIcon, {}) }));
 }
-function Tooltip({ offset, placement = 'bottom', text, trigger = jsx(InfoIcon, {}), }) {
-    const { isOpen, setIsOpen, toggle } = useDisclosure();
-    const triggerRef = useRef(null);
+function TriggerButton({ buttonRef, className, trigger, }) {
+    const { pressProps } = usePress({ ref: buttonRef });
     const triggerWithHandler = useMemo(() => cloneElement(trigger, {
-        onClick: toggle,
-    }), [trigger, toggle]);
-    return (jsxs(DialogTrigger, { isOpen: isOpen, onOpenChange: setIsOpen, children: [jsx("div", { ref: triggerRef, className: styles['trigger-wrapper'], children: triggerWithHandler }), jsxs(Popover, { className: styles.popover, offset: offset, placement: placement, triggerRef: triggerRef, children: [jsx(OverlayArrow, { className: styles.arrow, children: jsx("svg", { height: 12, viewBox: "0 0 12 12", width: 12, children: jsx("path", { d: "M0 0 L6 6 L12 0" }) }) }), jsx(Dialog, { className: styles.dialog, children: text })] })] }));
+        ...pressProps,
+    }), [trigger, pressProps]);
+    return (jsx("div", { ref: buttonRef, className: clsx(className, styles['trigger-wrapper']), children: triggerWithHandler }));
+}
+function Tooltip({ children, className, offset, placement = 'bottom', trigger = jsx(InfoIcon, {}), }) {
+    const { isOpen, setIsOpen } = useDisclosure();
+    const triggerRef = useRef(null);
+    return (jsxs(DialogTrigger, { isOpen: isOpen, onOpenChange: setIsOpen, children: [jsx(TriggerButton, { buttonRef: triggerRef, className: className, trigger: trigger }), jsxs(Popover, { className: styles.popover, offset: offset, placement: placement, triggerRef: triggerRef, children: [jsx(OverlayArrow, { className: styles.arrow, children: jsx("svg", { height: 12, viewBox: "0 0 12 12", width: 12, children: jsx("path", { d: "M0 0 L6 6 L12 0" }) }) }), jsx(Dialog, { className: styles.dialog, children: children })] })] }));
 }
 
 export { Tooltip };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "132.0.0",
+  "version": "134.0.0",
   "type": "module",
   "license": "MIT",
   "engines": {

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

@@ -1,3 +0,0 @@
-var styles = {"loading":"adyen-payment-module-liZWP"};
-
-export { styles as default };

package/dist/checkout/payment.js

@@ -1,213 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
-import { Form } from 'react-aria-components';
-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 { usePatchSession } from '../shared/api/storefront/hooks/authentication/use-patch-session.js';
-import { usePatchCart } from '../shared/api/storefront/hooks/cart/use-patch-cart.js';
-import { usePlaceOrder } from '../shared/api/storefront/hooks/cart/use-place-order.js';
-import { useInvalidateAdyen } from '../shared/api/storefront/hooks/payment/use-invalidate-adyen.js';
-import { validateVATNumber } from '../shared/api/storefront/services/finance-service.js';
-import { useDebouncedCallback } from '../shared/hooks/use-debounced-callback.js';
-import { currencySymbolToISO } from '../shared/model/currency.js';
-import { Tooltip } from '../tooltip/tooltip.js';
-import { AdyenPayment } from './adyen-payment.js';
-import { useHasReturnedFromAdyen } from './use-has-returned-from-adyen.js';
-import styles from './payment.module.css.js';
-
-function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete, onProcessing, onValidating, }) {
-    const { isLoading: isPatchingCart, mutate: patchCart } = usePatchCart();
-    const { isLoading: isPatchingSession } = usePatchSession();
-    const { isLoading: isPlacingCart, mutate: placeOrder } = usePlaceOrder();
-    const dropinRef = useRef(null);
-    const [paymentError, setPaymentError] = useState();
-    const [apiError, setAPIError] = useState();
-    const invalidateAdyen = useInvalidateAdyen();
-    const [isValidatingVAT, setIsValidatingVAT] = useState(false);
-    const t = useFormattedMessage();
-    const cartRef = useRef(_cart);
-    const cart = cartRef.current;
-    const hasAtp = atp.length > 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]);
-    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 paymentMethodOptions = cart.paymentOptions?.paymentMethods?.reduce((acc, method) => {
-        acc[method.name] = t(`paymentMethod.${method.description}`);
-        return acc;
-    }, {});
-    const debouncedValidator = useDebouncedCallback(async (value) => {
-        if (!value)
-            return setValidationErrors({});
-        if (value.length < 8) {
-            return setValidationErrors({
-                ...validationErrors,
-                vatNumber: t('validation.tooShort'),
-            });
-        }
-        try {
-            setIsValidatingVAT(true);
-            const response = await validateVATNumber({ vatNumber: value });
-            if (response.isValid) {
-                setValidationErrors(prev => {
-                    delete prev.vatNumber;
-                    return prev;
-                });
-            }
-            else {
-                setValidationErrors({
-                    ...validationErrors,
-                    vatNumber: t('validation.invalid'),
-                });
-            }
-        }
-        catch {
-            setValidationErrors({
-                ...validationErrors,
-                vatNumber: t('validation.invalid'),
-            });
-        }
-        finally {
-            setIsValidatingVAT(false);
-        }
-    }, 500);
-    const isAdyenPayment = cart.paymentMethod?.name !== 'PBI' &&
-        cart.paymentOptions &&
-        cart.billTo?.id &&
-        countryCode;
-    async function onSubmit(e) {
-        const formData = new FormData(e.currentTarget);
-        const cart = cartRef.current;
-        setValidationErrors(prev => prev); // NOTE: This makes sure the form is revalidated on submit
-        if (Object.keys(validationErrors).length > 0)
-            return;
-        if (isAdyenPayment) {
-            /* Adyen Payment */
-            if (!dropinRef.current) {
-                console.warn('Adyen Dropin not ready');
-                return;
-            }
-            dropinRef.current.showValidation();
-            if (!dropinRef.current.isValid)
-                return;
-            try {
-                await patchCart({
-                    cart: {
-                        ...cart,
-                        customerVatNumber: formData.get('vatNumber')?.toString(),
-                        poNumber: formData.get('poNumber')?.toString(),
-                        properties: {
-                            ...cart.properties,
-                            industry: formData.get('industry')?.toString() || '',
-                        },
-                        requestedDeliveryDate: formData.get('deliveryDate')?.toString(),
-                    },
-                });
-            }
-            catch (error) {
-                console.error(error);
-                setAPIError(error);
-            }
-            try {
-                dropinRef.current.submit();
-            }
-            catch (error) {
-                console.error(error);
-                setPaymentError(error);
-            }
-        }
-        else {
-            /* Pay by Invoice */
-            const cart = cartRef.current;
-            try {
-                await placeOrder({ cart });
-            }
-            catch (error) {
-                console.error(error);
-                setAPIError(error);
-            }
-            return onPaymentComplete();
-        }
-    }
-    const onComplete = useCallback(async (result) => {
-        const cart = cartRef.current;
-        try {
-            await placeOrder({
-                cart: {
-                    ...cart,
-                    paymentMethod: null,
-                    paymentOptions: {
-                        ...cart.paymentOptions, // Hack needed to make B2B happy
-                        adyenPspReference: result.pspReference,
-                        isAdyenDropIn: true,
-                    },
-                },
-            });
-        }
-        catch (error) {
-            console.error(error);
-            setAPIError(error);
-        }
-        return onPaymentComplete();
-    }, [onPaymentComplete, placeOrder]);
-    const onError = useCallback((error, result) => {
-        invalidateAdyen();
-        // invalidateCurrentCart()
-        setPaymentError(error);
-        console.error(error);
-        _onError?.(error, result);
-    }, [_onError, invalidateAdyen]);
-    return (jsxs(Form, { className: styles['payment-form'], "data-test-selector": "paymentForm", id: form, onSubmit: e => {
-            e.preventDefault();
-            onSubmit(e);
-        }, validationErrors: validationErrors, children: [Boolean(apiError) && (jsx("div", { className: styles['error-message'], children: jsx(FormattedMessage, { id: "An unexpected error occured" }) })), hasAtp && (jsxs("div", { className: styles['delivery-date'], children: [jsx(Select, { showLabel: true, "data-test-selector": "deliveryDateSelect", isDisabled: hasReturnedFromAdyen || asSoonAsPossible, isRequired: !asSoonAsPossible, label: t('Select a desired delivery date'), name: "deliveryDate", onChange: setDeliveryDate, options: atpSelectOptions, selectedOption: deliveryDate, variant: "solid" }, String(asSoonAsPossible)), jsxs("div", { className: styles['asap-checkbox'], children: [jsx(Checkbox, { "data-test-selector": "asapCheckbox", isDisabled: hasReturnedFromAdyen || !hasAtp, isSelected: asSoonAsPossible, onChange: checked => {
-                                    setAsSoonAsPossible(checked);
-                                    if (checked)
-                                        setDeliveryDate('');
-                                }, children: jsx(FormattedMessage, { id: "As soon as possible" }) }), jsx(Tooltip, { text: t('Selecting As Soon As Possible will enable us to send the products to you as they become available.') })] })] })), jsx(Select, { isRequired: true, "data-test-selector": "industrySelect", defaultSelectedOption: cart.properties.industry, isDisabled: hasReturnedFromAdyen, label: t('Industry'), name: "industry", options: {
-                    /* eslint-disable sort-keys-fix/sort-keys-fix */
-                    PP: 'Private User',
-                    AU: 'Automotive',
-                    MC: 'Motorcycle',
-                    BC: 'Bicycle',
-                    TR: 'Truck',
-                    AG: 'Agricultural',
-                    AV: 'Aviation',
-                    MA: 'Maritime',
-                    OT: 'Other',
-                    /* eslint-enable sort-keys-fix/sort-keys-fix */
-                }, variant: "solid" }), jsx(TextField, { showLabel: true, defaultValue: cart.customerVatNumber, isDisabled: hasReturnedFromAdyen || isProcessing, label: t('VAT Number'), name: "vatNumber", onInput: e => debouncedValidator(e.target.value), validate: () => validationErrors.vatNumber ?? true }), jsx(TextField, { showLabel: true, defaultValue: cart.poNumber, isDisabled: hasReturnedFromAdyen || isProcessing, label: t('PO Number'), name: "poNumber" }), paymentMethodOptions && Object.keys(paymentMethodOptions).length > 1 && (jsx(Select, { "data-test-selector": "paymentMethodSelect", defaultSelectedOption: cart.paymentOptions?.paymentMethods?.[0]?.name || 'ADY', isDisabled: (hasReturnedFromAdyen ||
-                    (cart.paymentOptions?.paymentMethods &&
-                        cart.paymentOptions.paymentMethods.length <= 1)) ??
-                    true, label: t('Payment method'), name: "paymentMethod", options: paymentMethodOptions, variant: "solid" })), isAdyenPayment && cart.billTo && (jsx(AdyenPayment, { amount: cart.orderGrandTotal, cartId: cart.trackId, countryCode: countryCode, currencyCode: currencySymbolToISO[cart.currencySymbol], customerId: cart.billTo.id, dropinRef: dropinRef, 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

@@ -1,3 +0,0 @@
-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/shared/utils/wait.d.ts

@@ -1 +0,0 @@
-export declare function wait(ms: number): Promise<unknown>;

package/dist/shared/utils/wait.js

@@ -1,5 +0,0 @@
-function wait(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
-}
-
-export { wait };