@sonic-equipment/ui 260.0.6 → 260.0.8

package/dist/country-language-selector/connected-country-language-selector.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import { useState, useMemo, useCallback, useEffect } from 'react';
 import { useCookie } from '../cookies/use-cookie.js';
 import { useCountriesLanguages } from '../country-selector/use-countries-languages.js';
 import { isCountryLanguageCode } from '../intl/types.js';
@@ -32,100 +32,99 @@ function ConnectedCountryLanguageSelector({ className, countries: _countries, is
     const [isOpen, setIsOpen] = useState(_isOpen ?? !CLSelectorCookie?.includes('closed=true'));
     const { countries } = useCountriesLanguages({});
     const router = useRouter();
-    // options for the selector menu
-    const menuOptions = {
-        other: t('Choose your country or region…'),
-    };
-    // option groups for the selector menu to sort the menu options under
-    const menuOptionGroups = [];
-    // array to hold option data for easy lookup on submit
-    const optionData = [];
-    // construct menu options, groups and option data
-    countries?.forEach(country => {
-        const options = [];
-        const countryCode = country.abbreviation.toLowerCase();
-        // stop if countryCode is not included in _countries prop
-        if (_countries && !_countries.includes(country.abbreviation)) {
-            return;
-        }
-        const languageCodes = country.languages
-            .map(({ languageCode }) => languageCode.toLowerCase())
-            .sort();
-        // group label to sort on
-        const groupLabel = t(`clselector.country.${countryCode}.${languageCodes[0]}`);
-        // group reactNode to display
-        const groupReactNode = languageCodes.flatMap((languageCode, index) => {
-            const translation = t(`clselector.country.${countryCode}.${languageCode}`);
-            return index === 0
-                ? [
-                    jsx("span", { lang: languageCode, children: translation }, languageCode),
-                ]
-                : [
-                    '/',
-                    jsx("span", { lang: languageCode, children: translation }, languageCode),
-                ];
-        });
-        languageCodes.forEach(languageCode => {
-            const optionKey = `${languageCode}-${countryCode}`;
-            const optionCountryLabel = `clselector.country.${countryCode}.${languageCode}`;
-            const optionLanguageLabel = `clselector.language.${languageCode}.${languageCode}`;
-            // add option key to group's options
-            options.push(optionKey);
-            const { alternativeHrefs, pathname } = router.url;
-            let path;
-            if (alternativeHrefs && alternativeHrefs[optionKey]) {
-                path = `/${optionKey}${alternativeHrefs[optionKey]}`;
-            }
-            else if (!alternativeHrefs ||
-                Object.keys(alternativeHrefs).length === 0) {
-                const currentCountryLanguage = pathname.split('/')[1]?.toLowerCase();
-                path = isCountryLanguageCode(currentCountryLanguage)
-                    ? pathname
-                        .toLowerCase()
-                        .replace(`${currentCountryLanguage}`, `${optionKey}`)
-                    : `/${optionKey}${pathname}`;
-            }
-            else {
-                path = `/${optionKey}`;
+    const { alternativeHrefs, pathname } = router.url;
+    const { defaultSelectedOption, menuOptionGroups, menuOptions, optionData } = useMemo(() => {
+        const menuOptions = {
+            other: t('Choose your country or region…'),
+        };
+        const menuOptionGroups = [];
+        const optionData = [];
+        countries?.forEach(country => {
+            const options = [];
+            const countryCode = country.abbreviation.toLowerCase();
+            if (_countries && !_countries.includes(country.abbreviation)) {
+                return;
             }
-            // add option key/value to menu options
-            menuOptions[optionKey] =
-                environment === 'next-production' ? (jsx("span", { lang: languageCode, children: `${t(optionCountryLabel)} - ${t(optionLanguageLabel)}` })) : (
-                // in development, show the path to help identify the correct option
-                jsxs("span", { lang: languageCode, children: [`${t(optionCountryLabel)} - ${t(optionLanguageLabel)}`, jsx("code", { style: { fontSize: '12px' }, children: path })] }));
-            // add to option data
-            optionData.push({
-                country: countryCode,
-                key: optionKey,
-                language: languageCode,
-                path,
+            const languageCodes = country.languages
+                .map(({ languageCode }) => languageCode.toLowerCase())
+                .sort();
+            const groupLabel = t(`clselector.country.${countryCode}.${languageCodes[0]}`);
+            const groupReactNode = languageCodes.flatMap((languageCode, index) => {
+                const translation = t(`clselector.country.${countryCode}.${languageCode}`);
+                return index === 0
+                    ? [
+                        jsx("span", { lang: languageCode, children: translation }, languageCode),
+                    ]
+                    : [
+                        '/',
+                        jsx("span", { lang: languageCode, children: translation }, languageCode),
+                    ];
+            });
+            languageCodes.forEach(languageCode => {
+                const optionKey = `${languageCode}-${countryCode}`;
+                const optionCountryLabel = `clselector.country.${countryCode}.${languageCode}`;
+                const optionLanguageLabel = `clselector.language.${languageCode}.${languageCode}`;
+                options.push(optionKey);
+                let path;
+                if (alternativeHrefs && alternativeHrefs[optionKey]) {
+                    path = `/${optionKey}${alternativeHrefs[optionKey]}`;
+                }
+                else if (!alternativeHrefs ||
+                    Object.keys(alternativeHrefs).length === 0) {
+                    const currentCountryLanguage = pathname.split('/')[1]?.toLowerCase();
+                    path = isCountryLanguageCode(currentCountryLanguage)
+                        ? pathname
+                            .toLowerCase()
+                            .replace(`${currentCountryLanguage}`, `${optionKey}`)
+                        : `/${optionKey}${pathname}`;
+                }
+                else {
+                    path = `/${optionKey}`;
+                }
+                menuOptions[optionKey] =
+                    environment === 'next-production' ? (jsx("span", { lang: languageCode, children: `${t(optionCountryLabel)} - ${t(optionLanguageLabel)}` })) : (jsxs("span", { lang: languageCode, children: [`${t(optionCountryLabel)} - ${t(optionLanguageLabel)}`, jsx("code", { style: { fontSize: '12px' }, children: path })] }));
+                optionData.push({
+                    country: countryCode,
+                    key: optionKey,
+                    language: languageCode,
+                    path,
+                });
+            });
+            menuOptionGroups.push({
+                key: countryCode,
+                label: groupLabel,
+                options,
+                reactNode: groupReactNode,
             });
         });
-        // push new group to groups
-        menuOptionGroups.push({
-            key: countryCode,
-            label: groupLabel,
-            options,
-            reactNode: groupReactNode,
-        });
-    });
-    // sort groups alphabetically by label
-    menuOptionGroups.sort((a, b) => a.label.localeCompare(b.label));
-    // determine default selected option
-    const defaultSelectedLanguageCountry = selectedLanguage && selectedCountry
-        ? `${selectedLanguage.toLowerCase()}-${selectedCountry.toLowerCase()}`
-        : undefined;
-    const defaultSelectedOption = defaultSelectedLanguageCountry &&
-        Object.keys(menuOptions).includes(defaultSelectedLanguageCountry)
-        ? defaultSelectedLanguageCountry
-        : undefined;
-    // handle close action
-    const handleClose = () => {
+        menuOptionGroups.sort((a, b) => a.label.localeCompare(b.label));
+        const defaultSelectedLanguageCountry = selectedLanguage && selectedCountry
+            ? `${selectedLanguage.toLowerCase()}-${selectedCountry.toLowerCase()}`
+            : undefined;
+        const defaultSelectedOption = defaultSelectedLanguageCountry &&
+            Object.keys(menuOptions).includes(defaultSelectedLanguageCountry)
+            ? defaultSelectedLanguageCountry
+            : undefined;
+        return {
+            defaultSelectedOption,
+            menuOptionGroups,
+            menuOptions,
+            optionData,
+        };
+    }, [
+        _countries,
+        alternativeHrefs,
+        countries,
+        pathname,
+        selectedCountry,
+        selectedLanguage,
+        t,
+    ]);
+    const handleClose = useCallback(() => {
         setIsOpen(false);
         setCLSelectorCookie('closed=true');
-    };
-    // handle submit action
-    const handleSubmit = (selectedOption) => {
+    }, [setCLSelectorCookie]);
+    const handleSubmit = useCallback((selectedOption) => {
         setIsOpen(false);
         if (selectedOption === 'other') {
             setCLSelectorCookie('closed=true');
@@ -141,7 +140,7 @@ function ConnectedCountryLanguageSelector({ className, countries: _countries, is
             setCLSelectorCookie(`closed=true;language=${language};country=${country}`);
             navigate(path, { ignoreLocalePrefix: true, reload: true });
         }
-    };
+    }, [navigate, optionData, setCLSelectorCookie]);
     // react to CountryLanguageSelectorButton clicked
     useEffect(() => {
         if (showSelector) {

package/dist/country-select/hooks/use-countries.js

@@ -1,5 +1,5 @@
 "use client";
-import { useMemo } from 'react';
+import { useMemo, useEffect } from 'react';
 import { useCookie } from '../../cookies/use-cookie.js';
 import { isCountryCode, isCultureCode, isLanguageCode } from '../../intl/types.js';
 import { useFetchCountriesWithLanguages } from '../../shared/api/storefront/hooks/website/use-fetch-countries-with-languages.js';
@@ -39,8 +39,10 @@ function useCountries({ enabled = true, } = {}) {
         });
         return countries;
     }, [apiCountries, sessionCountries]);
-    if (countries !== sessionCountries)
-        setSessionCountries(countries);
+    useEffect(() => {
+        if (countries !== sessionCountries)
+            setSessionCountries(countries);
+    }, [countries, sessionCountries, setSessionCountries]);
     const currentCountry = countries?.find(country => country.id === currentCountryId);
     return {
         countries,

package/dist/lists/orderline-list/orderline-list.js

@@ -23,7 +23,10 @@ function OrderLineList({ children, onRemoveAll }) {
                         // eslint-disable-next-line @eslint-react/no-children-map
                         Children.map(children, (child, index) => (
                         // eslint-disable-next-line @eslint-react/no-array-index-key
-                        jsx("li", { className: styles.item, children: child }, index))) })] }), onRemoveAll && (jsx(ConfirmationDialog, { isOpen: isOpen, onCancel: close, onConfirm: onRemoveAll, title: t('Are you sure you want to remove all items from your cart?') }))] }));
+                        jsx("li", { className: styles.item, children: child }, index))) })] }), onRemoveAll && (jsx(ConfirmationDialog, { isOpen: isOpen, onCancel: close, onConfirm: () => {
+                    close();
+                    onRemoveAll();
+                }, title: t('Are you sure you want to remove all items from your cart?') }))] }));
 }
 
 export { OrderLineList };

package/dist/modals/modal/modal.d.ts

@@ -15,4 +15,4 @@ export interface ModalProps {
     onOpenChange?: (isOpen: boolean) => void;
     shouldCloseOnInteractOutside?: boolean;
 }
-export declare function Modal({ children, className, hasCloseButton, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, shouldCloseOnInteractOutside, }: ModalProps): import("react/jsx-runtime").JSX.Element | undefined;
+export declare function Modal({ children, className, hasCloseButton, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, shouldCloseOnInteractOutside, }: ModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/modals/modal/modal.js

@@ -7,28 +7,9 @@ import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 import resetStyles from '../../shared/reset.module.css.js';
 import styles from './modal.module.css.js';
 
-const getDocument = () => typeof window === 'undefined' ? undefined : window.document;
 function Modal({ children, className, hasCloseButton, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, shouldCloseOnInteractOutside = true, }) {
     const t = useFormattedMessage();
-    const document = getDocument();
-    if (!document)
-        return;
-    return (jsx(ModalOverlay, { ref: ref => {
-            ref?.addEventListener('click', e => {
-                if ((!e.target || ref.contains(e.target)) &&
-                    ref !== e.target)
-                    return;
-                e.preventDefault();
-                e.stopPropagation();
-            });
-            ref?.addEventListener('touchend', e => {
-                if ((!e.target || ref.contains(e.target)) &&
-                    ref !== e.target)
-                    return;
-                e.preventDefault();
-                e.stopPropagation();
-            });
-        }, className: clsx(styles['modal-overlay'], resetStyles.reset, typeof className === 'string' ? className : className?.overlay), isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, shouldCloseOnInteractOutside: () => shouldCloseOnInteractOutside, UNSTABLE_portalContainer: document.body, children: jsxs(Modal$1, { className: clsx(styles.modal, {
+    return (jsx(ModalOverlay, { className: clsx(styles['modal-overlay'], resetStyles.reset, typeof className === 'string' ? className : className?.overlay), isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, shouldCloseOnInteractOutside: () => shouldCloseOnInteractOutside, children: jsxs(Modal$1, { className: clsx(styles.modal, {
                 [styles['is-full-screen']]: isFullScreen,
             }, typeof className === 'string' ? undefined : className?.modal), children: [hasCloseButton && (jsx(IconButton, { className: styles.close, icon: "Close", isDisabled: !isDismissable, label: t('Close'), onClick: () => onOpenChange?.(false), theme: "secondary" })), jsx("div", { className: clsx(styles.content, typeof className === 'string' ? className : className?.content), children: children })] }) }));
 }

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef, useState, useEffect, useCallback } from 'react';
+import { useRef, useState, useEffect, useMemo, useCallback } from 'react';
 import { Form } from 'react-aria-components';
 import { useAlgoliaInsights } from '../../../../algolia/use-algolia-insights.js';
 import { Accordion } from '../../../../collapsables/accordion/accordion.js';
@@ -57,16 +57,29 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
         cartRef.current = _cart;
     }, [_cart]);
     const [validationErrors, setValidationErrors] = useState({});
-    const atpSelectOptions = atp
+    const atpSelectOptions = useMemo(() => atp
         .filter(atp => Boolean(atp.date))
         .reduce((acc, atp) => ({
         ...acc,
         [atp.date || '']: atp.displayDate,
-    }), {});
-    const paymentMethodOptions = cart.paymentOptions?.paymentMethods?.reduce((acc, method) => {
+    }), {}), [atp]);
+    const paymentMethodOptions = useMemo(() => cart.paymentOptions?.paymentMethods?.reduce((acc, method) => {
         acc[method.name] = t(`paymentMethod.${method.description}`);
         return acc;
-    }, {});
+    }, {}), [cart.paymentOptions?.paymentMethods, t]);
+    const industryOptions = useMemo(() => ({
+        /* eslint-disable sort-keys-fix/sort-keys-fix */
+        PP: t('industry.PP'),
+        AU: t('industry.AU'),
+        MC: t('industry.MC'),
+        BC: t('industry.BC'),
+        TR: t('industry.TR'),
+        AG: t('industry.AG'),
+        AV: t('industry.AV'),
+        MA: t('industry.MA'),
+        OT: t('industry.OT'),
+        /* eslint-enable sort-keys-fix/sort-keys-fix */
+    }), [t]);
     const onPlaceOrderCompleted = useCallback(({ cart, payment_type }) => {
         dataLayer.push(createEcommerceEvent({
             cart,
@@ -231,19 +244,7 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
                                     setAsSoonAsPossible(checked);
                                     if (checked)
                                         setDeliveryDate('');
-                                }, children: t('As soon as possible') }), jsx(InfoIconTooltip, { size: "sm", variant: "stroke", children: t('Selecting As Soon As Possible will enable us to send the products to you as they become available.') })] })] })), jsx(Select, { isRequired: true, showLabel: true, "data-test-selector": "industrySelect", defaultSelectedOption: cart.properties.industry, isDisabled: isDisabled, label: t('Industry'), name: "industry", options: {
-                    /* eslint-disable sort-keys-fix/sort-keys-fix */
-                    PP: t('industry.PP'),
-                    AU: t('industry.AU'),
-                    MC: t('industry.MC'),
-                    BC: t('industry.BC'),
-                    TR: t('industry.TR'),
-                    AG: t('industry.AG'),
-                    AV: t('industry.AV'),
-                    MA: t('industry.MA'),
-                    OT: t('industry.OT'),
-                    /* eslint-enable sort-keys-fix/sort-keys-fix */
-                }, placeholder: t('Select an industry'), variant: "solid" }), jsx(TextField, { showLabel: true, defaultValue: cart.customerVatNumber, isDisabled: isDisabled, label: t('VAT Number'), minLength: 8, name: "customerVatNumber" }, `vat${Boolean(validationErrors.customerVatNumber)}`), jsx(TextField, { showLabel: true, defaultValue: cart.poNumber, isDisabled: isDisabled, isRequired: cart.requiresPoNumber, label: t('PO Number'), name: "poNumber" }), paymentMethodOptions && Object.keys(paymentMethodOptions).length > 1 && (jsx(Select, { "data-test-selector": "paymentMethodSelect", defaultSelectedOption: cart.paymentOptions?.paymentMethods?.[0]?.name || 'ADY', isDisabled: isDisabled, label: t('Payment method'), name: "paymentMethod", onChange: setSelectedPaymentMethod, options: paymentMethodOptions, selectedOption: selectedPaymentMethod, variant: "solid" })), isAdyenPayment && cart.billTo && (jsx(AdyenPayment, { amount: cart.orderGrandTotal, cartId: cart.trackId, countryCode: countryCode, currencyCode: currencyCode, customerId: cart.billTo.id, dropinRef: dropinRef, environment: isProductionEnvironment ? 'live' : 'test', isDisabled: isDisabled, onComplete: onComplete, onError: onError, orderAmount: cart.orderGrandTotal, returnUrl: 
+                                }, children: t('As soon as possible') }), jsx(InfoIconTooltip, { size: "sm", variant: "stroke", children: t('Selecting As Soon As Possible will enable us to send the products to you as they become available.') })] })] })), jsx(Select, { isRequired: true, showLabel: true, "data-test-selector": "industrySelect", defaultSelectedOption: cart.properties.industry || 'AU', isDisabled: isDisabled, label: t('Industry'), name: "industry", options: industryOptions, placeholder: t('Select an industry'), variant: "solid" }), jsx(TextField, { showLabel: true, defaultValue: cart.customerVatNumber, isDisabled: isDisabled, label: t('VAT Number'), minLength: 8, name: "customerVatNumber" }, `vat${Boolean(validationErrors.customerVatNumber)}`), jsx(TextField, { showLabel: true, defaultValue: cart.poNumber, isDisabled: isDisabled, isRequired: cart.requiresPoNumber, label: t('PO Number'), name: "poNumber" }), paymentMethodOptions && Object.keys(paymentMethodOptions).length > 1 && (jsx(Select, { "data-test-selector": "paymentMethodSelect", defaultSelectedOption: cart.paymentOptions?.paymentMethods?.[0]?.name || 'ADY', isDisabled: isDisabled, label: t('Payment method'), name: "paymentMethod", onChange: setSelectedPaymentMethod, options: paymentMethodOptions, selectedOption: selectedPaymentMethod, variant: "solid" })), isAdyenPayment && cart.billTo && (jsx(AdyenPayment, { amount: cart.orderGrandTotal, cartId: cart.trackId, countryCode: countryCode, currencyCode: currencyCode, customerId: cart.billTo.id, dropinRef: dropinRef, environment: isProductionEnvironment ? 'live' : 'test', isDisabled: isDisabled, onComplete: onComplete, onError: onError, orderAmount: cart.orderGrandTotal, returnUrl: 
                 /* eslint-disable ssr-friendly/no-dom-globals-in-react-fc */
                 typeof window === 'undefined'
                     ? ''

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

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useMemo } from 'react';
 import { Button } from '../../../buttons/button/button.js';
 import { CartTotals } from '../../../cart-totals/cart-totals.js';
 import { CartTotalsSummary } from '../../../cart-totals/cart-totals-summary.js';
@@ -18,10 +19,10 @@ import styles from './shipping-page.module.css.js';
 function ShippingPageContent({ cart, editAddress, errorPatchBillingAddress, fulfillmentMethods, isGuest, isLoadingFulfillmentMethods, isPatching, isPatchingSession, onChangeFulfillmentMethod, readOnlyAddress, }) {
     const t = useFormattedMessage();
     const paths = usePaths();
-    const fulfillmentMethodOptions = fulfillmentMethods?.reduce((acc, method) => ({
+    const fulfillmentMethodOptions = useMemo(() => fulfillmentMethods?.reduce((acc, method) => ({
         ...acc,
         [method]: t(`fulfillmentmethod.${method}`),
-    }), {});
+    }), {}), [fulfillmentMethods, t]);
     const hasBillToAddress = Boolean(cart.billTo?.address1);
     const currencyCode = getCurrencyCodeBySymbol(cart.currencySymbol);
     if (!currencyCode)

package/package.json

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