@sonic-equipment/ui 131.0.0 → 132.0.0

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

@@ -8,7 +8,7 @@ import { Button } from '../button/button.js';
 import styles from './add-to-cart-button.module.css.js';
 
 function AddToCartButton({ initialState = 'initial', isDisabled = false, onChange, quantity, }) {
-    const [currentState, setState] = useState(initialState);
+    const [currentState, setState] = useState(quantity > 0 ? 'spinner' : initialState);
     const [manualInputQuantity, setManualInputQuantity] = useState(null);
     useEffect(() => {
         setState(currentState => {

package/dist/cart-totals/cart-totals.d.ts

@@ -1,6 +1,7 @@
 export interface CartTotalsProps {
     deliveryDate?: string;
     fulfillmentMethod?: string;
+    isPayByInvoice?: boolean;
     orderNumber?: string;
     shippingCost: string;
     subtotal: string;
@@ -9,4 +10,4 @@ export interface CartTotalsProps {
     vatPercentage: number | undefined;
 }
 export declare const formatDisplayPriceToSymbolSpaceValue: (displayPrice: string) => string;
-export declare function CartTotals({ deliveryDate, fulfillmentMethod, orderNumber, shippingCost, subtotal, tax, total, vatPercentage, }: CartTotalsProps): import("react/jsx-runtime").JSX.Element;
+export declare function CartTotals({ deliveryDate, fulfillmentMethod, isPayByInvoice, orderNumber, shippingCost, subtotal, tax, total, vatPercentage, }: CartTotalsProps): import("react/jsx-runtime").JSX.Element;

package/dist/cart-totals/cart-totals.js

@@ -5,9 +5,9 @@ import { Heading } from '../typography/heading/heading.js';
 import styles from './cart-totals.module.css.js';
 
 const formatDisplayPriceToSymbolSpaceValue = (displayPrice) => displayPrice.replace(/^(\D)([\d,.]*$)/, (_, symbol, value) => `${symbol} ${value}`);
-function CartTotals({ deliveryDate, fulfillmentMethod, orderNumber, shippingCost, subtotal, tax, total, vatPercentage, }) {
+function CartTotals({ deliveryDate, fulfillmentMethod, isPayByInvoice, orderNumber, shippingCost, subtotal, tax, total, vatPercentage, }) {
     const t = useFormattedMessage();
-    return (jsxs("div", { className: styles['cart-totals'], children: [orderNumber && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Order number" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "orderConfirmation_orderNumber", children: orderNumber }) }) })] })), deliveryDate !== undefined && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Delivery date" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "deliveryDate", children: deliveryDate || t('As soon as possible') }) }) })] })), fulfillmentMethod && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Fulfillment method" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "fulfillmentMethod", children: fulfillmentMethod }) }) })] })), jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Cost overview" }) }), jsxs("div", { children: [jsxs("div", { className: styles.line, children: [jsxs("p", { className: styles.label, children: [jsx(FormattedMessage, { id: "Subtotal" }), ' ', jsx(FormattedMessage, { id: "Excl. VAT" })] }), jsx("p", { className: styles.value, "data-test-selector": "cartTotal_subTotal", children: formatDisplayPriceToSymbolSpaceValue(subtotal) })] }), jsxs("div", { className: styles.line, children: [jsx("p", { className: styles.label, children: jsx(FormattedMessage, { id: "Shipping and handling" }) }), jsx("p", { className: styles.value, "data-test-selector": "shippingCost", children: formatDisplayPriceToSymbolSpaceValue(shippingCost) })] }), jsxs("div", { className: styles.line, children: [jsxs("p", { className: styles.label, children: [jsx(FormattedMessage, { id: "VAT" }), ' ', vatPercentage ? `${vatPercentage}%` : ''] }), jsx("p", { className: styles.value, "data-test-selector": "vatAmount", children: formatDisplayPriceToSymbolSpaceValue(tax) })] })] })] }), jsx("section", { className: styles.totals, children: jsxs("div", { className: styles.line, children: [jsx("p", { className: styles.label, children: jsx(FormattedMessage, { id: "Total" }) }), jsx("p", { className: styles.value, "data-test-selector": "cartTotal_orderGrandTotalDisplay", children: formatDisplayPriceToSymbolSpaceValue(total) })] }) })] }));
+    return (jsxs("div", { className: styles['cart-totals'], children: [orderNumber && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Order number" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "orderConfirmation_orderNumber", children: orderNumber }) }) })] })), deliveryDate !== undefined && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Delivery date" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "deliveryDate", children: deliveryDate || t('As soon as possible') }) }) })] })), fulfillmentMethod && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Fulfillment method" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "fulfillmentMethod", children: fulfillmentMethod }) }) })] })), isPayByInvoice && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Payment method" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "paymentMethod", children: jsx(FormattedMessage, { id: "Pay by invoice" }) }) }) })] })), jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Cost overview" }) }), jsxs("div", { children: [jsxs("div", { className: styles.line, children: [jsxs("p", { className: styles.label, children: [jsx(FormattedMessage, { id: "Subtotal" }), ' ', jsx(FormattedMessage, { id: "Excl. VAT" })] }), jsx("p", { className: styles.value, "data-test-selector": "cartTotal_subTotal", children: formatDisplayPriceToSymbolSpaceValue(subtotal) })] }), jsxs("div", { className: styles.line, children: [jsx("p", { className: styles.label, children: jsx(FormattedMessage, { id: "Shipping and handling" }) }), jsx("p", { className: styles.value, "data-test-selector": "shippingCost", children: formatDisplayPriceToSymbolSpaceValue(shippingCost) })] }), jsxs("div", { className: styles.line, children: [jsxs("p", { className: styles.label, children: [jsx(FormattedMessage, { id: "VAT" }), ' ', vatPercentage ? `${vatPercentage}%` : ''] }), jsx("p", { className: styles.value, "data-test-selector": "vatAmount", children: formatDisplayPriceToSymbolSpaceValue(tax) })] })] })] }), jsx("section", { className: styles.totals, children: jsxs("div", { className: styles.line, children: [jsx("p", { className: styles.label, children: jsx(FormattedMessage, { id: "Total" }) }), jsx("p", { className: styles.value, "data-test-selector": "cartTotal_orderGrandTotalDisplay", children: formatDisplayPriceToSymbolSpaceValue(total) })] }) })] }));
 }
 
 export { CartTotals, formatDisplayPriceToSymbolSpaceValue };

package/dist/checkout/payment.js

@@ -28,6 +28,7 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
     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();
@@ -95,54 +96,83 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
             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 (!dropinRef.current) {
-            console.warn('Adyen Dropin not ready');
-            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);
+            }
         }
-        dropinRef.current.showValidation();
-        if (!dropinRef.current.isValid)
-            return;
+        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 {
-            // TODO: try catch handle failed patch, display error on top of form
-            await patchCart({
+            await placeOrder({
                 cart: {
                     ...cart,
-                    customerVatNumber: formData.get('vatNumber')?.toString(),
-                    poNumber: formData.get('poNumber')?.toString(),
-                    properties: {
-                        ...cart.properties,
-                        industry: formData.get('industry')?.toString() || '',
+                    paymentMethod: null,
+                    paymentOptions: {
+                        ...cart.paymentOptions, // Hack needed to make B2B happy
+                        adyenPspReference: result.pspReference,
+                        isAdyenDropIn: true,
                     },
-                    requestedDeliveryDate: formData.get('deliveryDate')?.toString(),
                 },
             });
-            dropinRef.current.submit();
         }
         catch (error) {
             console.error(error);
-            setPaymentError(error);
+            setAPIError(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, // Hack needed to make B2B happy
-                    adyenPspReference: result.pspReference,
-                    isAdyenDropIn: true,
-                },
-            },
-        });
         return onPaymentComplete();
     }, [onPaymentComplete, placeOrder]);
     const onError = useCallback((error, result) => {
@@ -155,7 +185,7 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
     return (jsxs(Form, { className: styles['payment-form'], "data-test-selector": "paymentForm", id: form, onSubmit: e => {
             e.preventDefault();
             onSubmit(e);
-        }, validationErrors: validationErrors, children: [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 => {
+        }, 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('');
@@ -171,13 +201,10 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
                     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, { "data-test-selector": "paymentMethodSelect", defaultSelectedOption: cart.paymentOptions?.paymentMethods?.[0]?.name || 'ADY', isDisabled: (hasReturnedFromAdyen ||
+                }, 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" })), 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'
+                    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 })] }) })] }) }) })] })] }));

package/dist/intl/translation-id.d.ts

@@ -1 +1 @@
-export type TranslationId = "'{0}' in all products" | "Try 'Search' and try to find the product you're looking for" | "Unfortnately, We found no articles for your search '{0}'" | ' to your account to manage your lists.' | 'Add order notes' | 'Add to list' | 'Address' | 'Amount: {0}' | 'An error occurred while processing your payment. Please try again.' | 'An unexpected error occured' | 'Are you looking for information about our service? Please visit our customer support page' | 'Are you sure you want to remove all items from your cart?' | 'Are you sure you want to remove this item from your cart?' | 'article' | 'articles' | 'As soon as possible' | 'Attention' | 'Billing address' | 'Billing and shipping address' | 'Cancel' | 'Cart' | 'Changing your address is currently not possible. Please contact customer support to change your address.' | 'Chosen filters' | 'City' | 'Clear filters' | 'Clear' | 'Click the button below to continue shopping.' | 'Company name' | 'Continue shopping' | 'Continue' | 'Cost overview' | 'Country' | 'create account' | 'Create new list' | 'Delivery expected in {0} {1}' | 'Delivery date' | 'Double check your spelling' | 'Downloads' | 'Easily add your favorite products' | 'Edit billing address' | 'Edit shipping address' | 'Email' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'Features' | 'First name' | 'Fulfillment method' | 'Hide filters' | 'Home' | 'Incl. VAT' | 'Includes' | 'Industry' | 'Language' | 'Last name' | 'List name already exists' | 'New list name' | 'of' | 'Order number' | 'Order' | 'Pay' | 'Payment method' | 'Payment' | 'pc' | 'Phone' | 'Pick up' | 'Pickup address' | 'Please Sign In' | 'PO Number' | 'Popular searches' | 'Postal Code' | 'Print' | 'Processing' | 'Product Features' | 'Product' | 'Products' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Remove all' | 'Review and payment' | 'Save order' | 'Save' | 'Saved cart for later.' | 'Search' | 'Searching again using more general terms' | 'See all results' | 'Select a desired delivery date' | 'Select a list' | 'Selecting As Soon As Possible will enable us to send the products to you as they become available.' | 'Share your favorite list with others' | 'Ship' | 'Shipping address' | 'Shipping and handling' | 'Shipping details' | 'Shop more efficiently and quicker with a favorites list' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'sign in' | 'Sonic address' | 'Sorry, there are no products found' | 'Sorry, we could not find matches for' | 'Sort by' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'Specifications' | 'Submit' | 'Subtotal' | 'Suggestions' | 'tag.limited' | 'tag.new' | 'The product has been added to your cart.' | 'The product has been removed from your cart.' | 'The product has been updated in your cart.' | 'There are no products in your shopping cart.' | 'Total amount is' | 'Total' | 'Total' | 'Try another search' | 'Try another search' | 'Unable to add the product to your cart.' | 'Unable to add the product to your cart.' | 'Unable to empty your cart.' | 'Unable to empty your cart.' | 'Unable to remove the product from your cart.' | 'Unable to remove the product from your cart.' | 'Unable to save cart for later.' | 'Unable to save cart for later.' | 'Unable to update the product in your cart.' | 'Unable to update the product in your cart.' | 'Updating address' | 'Use billing address' | 'Use fewer keywords' | 'Validating' | 'validation.badInput' | 'validation.customError' | 'validation.invalid' | 'validation.patternMismatch' | 'validation.rangeOverflow' | 'validation.rangeUnderflow' | 'validation.stepMismatch' | 'validation.tooLong' | 'validation.tooShort' | 'validation.typeMismatch' | 'validation.valid' | 'validation.valueMissing' | 'VAT Number' | 'VAT' | 'Welcome to Sonic Equipment. Please choose your country and language below.' | 'What are you searching for?' | 'You could try checking the spelling of your search query' | 'You could try exploring our products by category' | 'You could try' | 'You must ' | 'Your cart has been emptied.' | 'Your favorites are available on multiple devices' | 'Your shopping cart is still empty';
+export type TranslationId = "'{0}' in all products" | "Try 'Search' and try to find the product you're looking for" | "Unfortnately, We found no articles for your search '{0}'" | ' to your account to manage your lists.' | 'Add order notes' | 'Add to list' | 'Address' | 'Amount: {0}' | 'An error occurred while processing your payment. Please try again.' | 'An unexpected error occured' | 'Are you looking for information about our service? Please visit our customer support page' | 'Are you sure you want to remove all items from your cart?' | 'Are you sure you want to remove this item from your cart?' | 'article' | 'articles' | 'As soon as possible' | 'Attention' | 'Billing address' | 'Billing and shipping address' | 'Cancel' | 'Cart' | 'Changing your address is currently not possible. Please contact customer support to change your address.' | 'Chosen filters' | 'City' | 'Clear filters' | 'Clear' | 'Click the button below to continue shopping.' | 'Company name' | 'Continue shopping' | 'Continue' | 'Cost overview' | 'Country' | 'create account' | 'Create new list' | 'Delivery expected in {0} {1}' | 'Delivery date' | 'Double check your spelling' | 'Downloads' | 'Easily add your favorite products' | 'Edit billing address' | 'Edit shipping address' | 'Email' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'Features' | 'First name' | 'Fulfillment method' | 'Hide filters' | 'Home' | 'Incl. VAT' | 'Includes' | 'Industry' | 'Language' | 'Last name' | 'List name already exists' | 'New list name' | 'of' | 'Order number' | 'Order' | 'Pay by invoice' | 'Pay' | 'Payment method' | 'Payment' | 'pc' | 'Phone' | 'Pick up' | 'Pickup address' | 'Please Sign In' | 'PO Number' | 'Popular searches' | 'Postal Code' | 'Print' | 'Processing' | 'Product Features' | 'Product' | 'Products' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Remove all' | 'Review and payment' | 'Save order' | 'Save' | 'Saved cart for later.' | 'Search' | 'Searching again using more general terms' | 'See all results' | 'Select a desired delivery date' | 'Select a list' | 'Selecting As Soon As Possible will enable us to send the products to you as they become available.' | 'Share your favorite list with others' | 'Ship' | 'Shipping address' | 'Shipping and handling' | 'Shipping details' | 'Shop more efficiently and quicker with a favorites list' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'sign in' | 'Sonic address' | 'Sorry, there are no products found' | 'Sorry, we could not find matches for' | 'Sort by' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'Specifications' | 'Submit' | 'Subtotal' | 'Suggestions' | 'tag.limited' | 'tag.new' | 'The product has been added to your cart.' | 'The product has been removed from your cart.' | 'The product has been updated in your cart.' | 'There are no products in your shopping cart.' | 'Total amount is' | 'Total' | 'Total' | 'Try another search' | 'Try another search' | 'Unable to add the product to your cart.' | 'Unable to add the product to your cart.' | 'Unable to empty your cart.' | 'Unable to empty your cart.' | 'Unable to remove the product from your cart.' | 'Unable to remove the product from your cart.' | 'Unable to save cart for later.' | 'Unable to save cart for later.' | 'Unable to update the product in your cart.' | 'Unable to update the product in your cart.' | 'Updating address' | 'Use billing address' | 'Use fewer keywords' | 'Validating' | 'validation.badInput' | 'validation.customError' | 'validation.invalid' | 'validation.patternMismatch' | 'validation.rangeOverflow' | 'validation.rangeUnderflow' | 'validation.stepMismatch' | 'validation.tooLong' | 'validation.tooShort' | 'validation.typeMismatch' | 'validation.valid' | 'validation.valueMissing' | 'VAT Number' | 'VAT' | 'Welcome to Sonic Equipment. Please choose your country and language below.' | 'What are you searching for?' | 'You could try checking the spelling of your search query' | 'You could try exploring our products by category' | 'You could try' | 'You must ' | 'Your cart has been emptied.' | 'Your favorites are available on multiple devices' | 'Your shopping cart is still empty';

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

@@ -68,7 +68,8 @@ function PaymentPage() {
             { href: '/CheckoutReviewAndSubmit', label: t('Review and payment') },
         ], title: t('Review and payment'), children: jsxs(CheckoutPageLayout, { actions: {
                 primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutShippingCartTotalContinueButton", form: PAYMENT_FORM_ID, isDisabled: isProcessing, isLoading: isProcessing ? (jsx(FormattedMessage, { id: "Processing" })) : isValidating ? (jsx(FormattedMessage, { id: "Validating" })) : (false), type: "submit", children: jsx(FormattedMessage, { id: "Pay" }) })),
-            }, mobileSummary: jsx(CartTotalsSummary, { totalAmount: cart.orderGrandTotalDisplay }), overview: jsx(CartTotals, { deliveryDate: hasAtp ? undefined : cart.requestedDeliveryDate, fulfillmentMethod: cart.fulfillmentMethod, shippingCost: cart.shippingAndHandlingDisplay, subtotal: cart.orderSubTotalDisplay, tax: cart.totalTaxDisplay, total: cart.orderGrandTotalDisplay, vatPercentage: cart.cartLines[0]?.pricing?.vatRate || 0 }), children: [jsx(CheckoutPageSection, { hasBorder: false, title: jsx(FormattedMessage, { id: "Payment" }), children: jsx(CheckoutPageSectionContent, { children: jsx(Payment, { atp: atp, cart: cart, form: PAYMENT_FORM_ID, onPaymentComplete: onPaymentComplete, onProcessing: setIsProcessing, onValidating: setIsValidating }) }) }), jsx(CheckoutPageSection, { hasBorder: false, title: jsx(FormattedMessage, { id: "Order" }), children: jsx(CheckoutPageSectionContent, { stretch: true, children: jsx(OrderLineList, { children: cart.cartLines.map(cartLine => (jsx(OrderLineCard, { deliveryDate: cartLine.atp?.date, href: cartLine.productUri, image: {
+            }, mobileSummary: jsx(CartTotalsSummary, { totalAmount: cart.orderGrandTotalDisplay }), overview: jsx(CartTotals, { deliveryDate: hasAtp ? undefined : cart.requestedDeliveryDate, fulfillmentMethod: cart.fulfillmentMethod, isPayByInvoice: (cart.paymentOptions?.paymentMethods?.length || 1) <= 1 &&
+                    cart.paymentMethod?.name === 'PBI', shippingCost: cart.shippingAndHandlingDisplay, subtotal: cart.orderSubTotalDisplay, tax: cart.totalTaxDisplay, total: cart.orderGrandTotalDisplay, vatPercentage: cart.cartLines[0]?.pricing?.vatRate || 0 }), children: [jsx(CheckoutPageSection, { hasBorder: false, title: jsx(FormattedMessage, { id: "Payment" }), children: jsx(CheckoutPageSectionContent, { children: jsx(Payment, { atp: atp, cart: cart, form: PAYMENT_FORM_ID, onPaymentComplete: onPaymentComplete, onProcessing: setIsProcessing, onValidating: setIsValidating }) }) }), jsx(CheckoutPageSection, { hasBorder: false, title: jsx(FormattedMessage, { id: "Order" }), children: jsx(CheckoutPageSectionContent, { stretch: true, children: jsx(OrderLineList, { children: cart.cartLines.map(cartLine => (jsx(OrderLineCard, { deliveryDate: cartLine.atp?.date, href: cartLine.productUri, image: {
                                     fit: 'contain',
                                     image: {
                                         '1': cartLine.smallImagePath,

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

@@ -1,19 +1,20 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useMemo, useEffect, useCallback } from 'react';
+import { useMemo, useEffect } 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';
 import { Select } from '../../../forms/select/select.js';
 import { FormattedMessage } from '../../../intl/formatted-message.js';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
+import { useAwaitableMutation } from '../../../shared/api/shared/hooks/use-awaitable-mutation.js';
 import { useFetchSession } from '../../../shared/api/storefront/hooks/authentication/use-fetch-session.js';
 import { useIsAuthenticated } from '../../../shared/api/storefront/hooks/authentication/use-is-authenticated.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 { useFetchFulfillmentMethodsForCurrentCart } from '../../../shared/api/storefront/hooks/customer/use-fetch-fulfillment-methods-for-current-cart.js';
-import { usePatchBillToAddress } from '../../../shared/api/storefront/hooks/customer/use-patch-bill-to-address.js';
 import { useFetchCountries } from '../../../shared/api/storefront/hooks/website/use-fetch-countries.js';
+import { patchCart } from '../../../shared/api/storefront/services/cart-service.js';
+import { patchBillToAddress } from '../../../shared/api/storefront/services/customer-service.js';
 import { useNavigate } from '../../../shared/routing/route-provider.js';
 import { hasNo } from '../../../shared/utils/types.js';
 import { Page } from '../../components/page/page.js';
@@ -28,23 +29,19 @@ import styles from './shipping-page.module.css.js';
 
 const REVIEW_AND_SUBMIT_PATH = '/CheckoutReviewAndSubmit';
 function usePatchCartAndBillingAddress() {
-    const { isError: isPatchingBillToAddressError, isLoading: isPatchBillToAddress, isSuccess: isPatchingBillToAddressSuccess, mutate: patchBillToAddress, } = usePatchBillToAddress();
-    const { isError: isPatchCartError, isLoading: isPatchingCart, isSuccess: isPatchCartSuccess, mutate: patchCart, } = usePatchCart();
-    const mutate = useCallback(async ({ billTo, cart, notes, }) => {
-        await Promise.all([
-            billTo &&
-                patchBillToAddress({
-                    billTo,
-                }),
-            patchCart({ cart: { ...cart, notes } }),
-        ].filter(Boolean));
-    }, [patchBillToAddress, patchCart]);
-    return {
-        isError: isPatchingBillToAddressError || isPatchCartError,
-        isPatching: isPatchBillToAddress || isPatchingCart,
-        isSuccess: isPatchingBillToAddressSuccess || isPatchCartSuccess,
-        mutate,
-    };
+    return useAwaitableMutation({
+        mutationFn: async ({ billTo, cart, notes, }) => {
+            await Promise.all([
+                billTo && patchBillToAddress({ billTo }),
+                patchCart({ cart: { ...cart, notes } }),
+            ].filter(Boolean));
+        },
+        onSuccess: ({ queryClient }) => {
+            queryClient.removeQueries({ queryKey: ['customer'] });
+            queryClient.removeQueries({ queryKey: ['carts'] });
+            queryClient.removeQueries({ queryKey: ['session'] });
+        },
+    });
 }
 function ShippingPage() {
     const isAuthenticated = useIsAuthenticated();
@@ -55,7 +52,7 @@ function ShippingPage() {
     const { data: session } = useFetchSession();
     const { data: fulfillmentMethods, isLoading: isLoadingFulfillmentMethods } = useFetchFulfillmentMethodsForCurrentCart();
     const { isLoading: isPatchingSession, mutate: patchSession } = usePatchSession();
-    const { isError, isPatching, isSuccess, mutate: patchCartAndBillingAddress, } = usePatchCartAndBillingAddress();
+    const { isError, isLoading: isPatching, isSuccess, mutate: patchCartAndBillingAddress, } = usePatchCartAndBillingAddress();
     const isLoading = isLoadingCart || isLoadingCountries || isLoadingFulfillmentMethods;
     const t = useFormattedMessage();
     const { isNavigating, navigate } = useNavigate();
@@ -67,7 +64,9 @@ function ShippingPage() {
         ...acc,
         [method]: t(`fulfillmentMethod.${method}`),
     }), {});
+    const isPickup = cart?.fulfillmentMethod === 'PickUp';
     useEffect(() => {
+        /* Initial guards. When these are not met, we should not proceed */
         if (isNavigating)
             return;
         if (isAuthenticated === undefined)
@@ -82,6 +81,7 @@ function ShippingPage() {
             return navigate('/signin?returnUrl=/CheckoutShipping');
     }, [cart, navigate, isAuthenticated, isNavigating]);
     useEffect(() => {
+        /* Guards for when the bill to address is saved and we should navigate to the next page */
         if (isPatching)
             return;
         if (!isSuccess)
@@ -90,11 +90,13 @@ function ShippingPage() {
             return;
         if (isError)
             return location?.reload();
-        navigate(REVIEW_AND_SUBMIT_PATH);
-    }, [isSuccess, navigate, isNavigating, isPatching, isError]);
+        if (hasNo(cart?.billTo?.address1))
+            return;
+        return navigate(REVIEW_AND_SUBMIT_PATH);
+    }, [isSuccess, cart, navigate, isNavigating, isPatching, isError]);
     if (error)
         return jsx(ErrorPage, { error: error });
-    if (isLoading || isNavigating || isError)
+    if (isLoading || isNavigating || isError || isSuccess)
         return jsx(LoadingPage, {});
     if (!isAuthenticated ||
         hasNo(cart) ||
@@ -118,12 +120,11 @@ function ShippingPage() {
                                             },
                                         });
                                         await refetchCart();
-                                    }, options: fulfillmentMethodOptions || {}, variant: "solid" }) }) }) })), hasBillToAddress ? (jsx(ReadOnlyAddresses, { billTo: cart.billTo, isLoading: isPatching, isPickup: cart.fulfillmentMethod === 'PickUp', notes: cart.notes, onSubmit: async ({ notes }) => {
+                                    }, options: fulfillmentMethodOptions || {}, variant: "solid" }) }) }) })), hasBillToAddress ? (jsx(ReadOnlyAddresses, { billTo: cart.billTo, isLoading: isPatching, isPickup: isPickup, notes: cart.notes, onSubmit: async ({ notes }) => {
                             if (!cart.billTo)
                                 return;
                             await patchCartAndBillingAddress({ cart, notes });
-                            navigate(REVIEW_AND_SUBMIT_PATH);
-                        }, shipTo: cart.shipTo })) : (jsx(EditAddresses, { countries: countries || [], isLoading: isPatching, isPickup: cart.fulfillmentMethod === 'PickUp', onSubmit: async ({ address, notes }) => {
+                        }, shipTo: cart.shipTo })) : (jsx(EditAddresses, { countries: countries || [], isLoading: isPatching, isPickup: isPickup, onSubmit: async ({ address, notes }) => {
                             if (!cart.billTo)
                                 return;
                             await patchCartAndBillingAddress({
@@ -131,7 +132,6 @@ function ShippingPage() {
                                 cart,
                                 notes,
                             });
-                            navigate(REVIEW_AND_SUBMIT_PATH);
                         } }))] }) }) }));
 }
 

package/dist/shared/api/storefront/hooks/customer/use-patch-bill-to-address.d.ts

@@ -1,4 +1,6 @@
-export declare function usePatchBillToAddress(): {
+export declare function usePatchBillToAddress({ skipInvalidation, }?: {
+    skipInvalidation?: boolean;
+}): {
     error: unknown;
     isError: boolean;
     isLoading: boolean;

package/dist/shared/api/storefront/hooks/customer/use-patch-bill-to-address.js

@@ -1,10 +1,12 @@
 import { patchBillToAddress } from '../../services/customer-service.js';
 import { useAwaitableMutation } from '../../../shared/hooks/use-awaitable-mutation.js';
 
-function usePatchBillToAddress() {
+function usePatchBillToAddress({ skipInvalidation = false, } = {}) {
     return useAwaitableMutation({
         mutationFn: patchBillToAddress,
         onComplete({ queryClient }) {
+            if (skipInvalidation)
+                return;
             queryClient.invalidateQueries({ queryKey: ['customer'] });
             queryClient.invalidateQueries({ queryKey: ['carts'] });
             queryClient.invalidateQueries({ queryKey: ['session'] });

package/dist/shared/ga/use-data-layer.js

@@ -21,7 +21,7 @@ function useDataLayer(eventOrArgs) {
                         quantity: cartLine.qtyOrdered ?? 0,
                     })) ?? [],
                 },
-                value: event.value ?? cart.orderSubTotal ?? 0, // TODO: Why not grandTotal?
+                value: event.value ?? cart.orderSubTotal ?? 0,
             };
         }
         else if (product) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "131.0.0",
+  "version": "132.0.0",
   "type": "module",
   "license": "MIT",
   "engines": {
@@ -19,16 +19,15 @@
   "main": "dist/index.js",
   "types": "./dist/index.d.ts",
   "scripts": {
-    "build": "rollup --config",
-    "build:export": "pnpm generate:exports:save && rollup --config",
+    "build": "pnpm generate:exports:save && rollup --config",
     "rebuild": "rm -rf dist && pnpm run build",
     "build-storybook": "storybook build",
     "check-updates": "npx npm-check-updates",
     "clean": "rimraf node_modules dist",
     "generate:icons": "node src/utils/icons/import-icons.js",
     "generate:icons:watch": "nodemon src/utils/icons/import-icons.js",
-    "generate:exports": "find ./src -type f | grep -e 'ts[x]*$' | grep -vE \"stories|icons|exports|.model.ts|test|local-storage|src/index|\\.d\\.ts$\" | sed -e \"s/\\.ts[x]*//\" | sed -e \"s/.\\/src/./\" | awk '{ print \"export * from \\\"\" $1 \"\\\"\" }' | sed -e \"s/\\\"/'/g\" | sort",
-    "generate:exports:save": "echo '/* eslint-disable simple-import-sort/exports */' > src/exports.ts && pnpm run --silent generate:exports >> src/exports.ts",
+    "generate:exports": "node src/utils/generate-exports.js",
+    "generate:exports:save": "pnpm run --silent generate:exports > src/exports.ts",
     "reinstall": "pnpm clean; pnpm install && pnpm build",
     "dev": "storybook dev -p 6006",
     "dev:https": "storybook dev --https --ssl-cert src/proxy/server.cert --ssl-key src/proxy/server.key -p 6006",