@sonic-equipment/ui 259.0.4 → 259.0.6

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

@@ -11,8 +11,6 @@ import { CheckoutPageLayout } from '../layouts/checkout-page-layout/checkout-pag
 import { Page } from '../../components/page/page.js';
 import { ErrorPage } from '../../error-page/error-page.js';
 import { LoadingPage } from '../../loading-page/loading-page.js';
-import { useSaveCartForLater } from '../../../shared/api/bff/hooks/cart/use-save-cart-for-later.js';
-import { useIsAuthenticated } from '../../../shared/api/storefront/hooks/authentication/use-is-authenticated.js';
 import { useDeleteCartLineById } from '../../../shared/api/storefront/hooks/cart/use-delete-cart-line-by-id.js';
 import { useDeleteCurrentCart } from '../../../shared/api/storefront/hooks/cart/use-delete-current-cart.js';
 import { useFetchCurrentCartLinesWithAtp } from '../../../shared/api/storefront/hooks/cart/use-fetch-current-cart-lines-with-atp.js';
@@ -27,22 +25,6 @@ function CartContent({ cartLines }) {
     const paths = usePaths();
     const { addToast } = useToast();
     const { data: currentCart } = useFetchCurrentCartWithAtp();
-    const saveCartForLater = useSaveCartForLater({
-        onError: () => {
-            addToast({
-                body: jsx(FormattedMessage, { id: "Unable to save cart for later." }),
-                isUserDismissable: false,
-                messageType: 'danger',
-            });
-        },
-        onSuccess: () => {
-            addToast({
-                body: jsx(FormattedMessage, { id: "Saved cart for later." }),
-                isUserDismissable: false,
-                messageType: 'success',
-            });
-        },
-    });
     const deleteCurrentCart = useDeleteCurrentCart({
         onError: () => {
             addToast({
@@ -75,7 +57,6 @@ function CartContent({ cartLines }) {
             });
         },
     });
-    const isAuthenticated = useIsAuthenticated();
     if (!currentCart)
         return null;
     const currencyCode = getCurrencyCodeBySymbol(currentCart.currencySymbol);
@@ -83,9 +64,6 @@ function CartContent({ cartLines }) {
         throw new Error(`Currency code not found for symbol ${currentCart.currencySymbol}`);
     return (jsx(CheckoutPageLayout, { actions: {
             primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutShippingCartTotalContinueButton", href: paths.CHECKOUT_SHIPPING, children: jsx(FormattedMessage, { id: "Start checkout" }) })),
-            secondary: isAuthenticated ? (jsx(Button, { color: "secondary", "data-test-selector": "saveCartForLaterButton", onClick: () => {
-                    saveCartForLater.mutate({ cart: currentCart });
-                }, variant: "outline", children: jsx(FormattedMessage, { id: "Save order" }) })) : (jsx(Button, { color: "secondary", "data-test-selector": "saveCartForLaterButton", href: paths.SIGN_IN, variant: "outline", children: jsx(FormattedMessage, { id: "Save order" }) })),
         }, mobileSummary: jsx(CartTotalsSummary, { currencyCode: currencyCode, totalAmount: currentCart.orderGrandTotal }), overview: jsx(CartTotals, { currencyCode: currencyCode, shippingCost: currentCart.shippingAndHandling, subtotal: currentCart.orderSubTotal, tax: currentCart.totalTax, total: currentCart.orderGrandTotal, vatPercentage: cartLines[0]?.pricing?.vatRate || 0 }), children: jsx(OrderLineList, { onRemoveAll: () => deleteCurrentCart.mutate(), children: cartLines.map(cartLine => (jsx(ConnectedOrderLineCard, { deliveryDate: cartLine.atp?.date ?? null, href: cartLine.productUri, image: {
                     fit: 'contain',
                     image: {

package/dist/pages/checkout/order-confirmation-page/order-confirmation-page-content.js

@@ -1,7 +1,6 @@
 "use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { Button } from '../../../buttons/button/button.js';
-import { PrintButton } from '../../../buttons/print-button/print-button.js';
 import { OrderLineCard } from '../../../cards/orderline-card/orderline-card.js';
 import { CartTotals } from '../../../cart-totals/cart-totals.js';
 import { InfoDisplay } from '../../../display/info-display/info-display.js';
@@ -9,11 +8,9 @@ import { FormattedDate } from '../../../intl/formatted-date.js';
 import { FormattedMessage } from '../../../intl/formatted-message.js';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
 import { OrderLineList } from '../../../lists/orderline-list/orderline-list.js';
-import { useSaveCartForLater } from '../../../shared/api/bff/hooks/cart/use-save-cart-for-later.js';
 import { getCurrencyCodeBySymbol } from '../../../shared/model/currency.js';
 import { usePaths } from '../../../shared/routing/use-paths.js';
 import { ensureNumber } from '../../../shared/utils/number.js';
-import { useToast } from '../../../toast/use-toast.js';
 import { Page } from '../../components/page/page.js';
 import { BillingAndInvoiceInformation } from '../components/billing-and-invoice-information.js';
 import { CheckoutPageLayout } from '../layouts/checkout-page-layout/checkout-page-layout.js';
@@ -24,23 +21,6 @@ import styles from './order-confirmation-page.module.css.js';
 function OrderConfirmationPageContent({ cart, }) {
     const t = useFormattedMessage();
     const paths = usePaths();
-    const { addToast } = useToast();
-    const saveCartForLater = useSaveCartForLater({
-        onError: () => {
-            addToast({
-                body: jsx(FormattedMessage, { id: "Unable to save cart for later." }),
-                isUserDismissable: false,
-                messageType: 'danger',
-            });
-        },
-        onSuccess: () => {
-            addToast({
-                body: jsx(FormattedMessage, { id: "Saved cart for later." }),
-                isUserDismissable: false,
-                messageType: 'success',
-            });
-        },
-    });
     const currencyCode = getCurrencyCodeBySymbol(cart.currencySymbol);
     if (!currencyCode)
         throw new Error(`Currency code not found for symbol ${cart.currencySymbol}`);
@@ -52,9 +32,6 @@ function OrderConfirmationPageContent({ cart, }) {
             },
         ], "data-test-selector": "orderConfirmationPage", title: t('Order confirmation'), children: jsx(CheckoutPageLayout, { actions: {
                 primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutReviewAndSubmit_continueShopping", href: paths.HOME, children: jsx(FormattedMessage, { id: "Continue shopping" }) })),
-                secondary: (jsxs(Fragment, { children: [cart.canSaveOrder && (jsx(Button, { color: "secondary", onClick: () => {
-                                saveCartForLater.mutate({ cart });
-                            }, variant: "outline", children: jsx(FormattedMessage, { id: "Save order" }) })), jsx(PrintButton, {})] })),
             }, overview: jsx(CartTotals, { currencyCode: currencyCode, fulfillmentMethod: cart.fulfillmentMethod, orderNumber: cart.orderNumber, shippingCost: cart.shippingAndHandling, subtotal: cart.orderSubTotal, tax: cart.totalTax, total: cart.orderGrandTotal, vatPercentage: cart.cartLines?.[0]?.pricing?.vatRate }), children: jsxs("div", { children: [jsx(CheckoutPageSection, { hasBorder: false, title: t('General'), children: jsx(CheckoutPageSectionContent, { children: jsxs("div", { className: styles['general-order-info'], children: [cart.orderDate && (jsx(InfoDisplay, { id: "order-date", label: t('Order date'), value: jsx(FormattedDate, { date: cart.orderDate }) })), cart.requestedDeliveryDateDisplay && (jsx(InfoDisplay, { id: "requested-delivery-date", label: t('Requested delivery date'), value: jsx(FormattedDate, { date: cart.requestedDeliveryDateDisplay }) })), cart.poNumber && (jsx(InfoDisplay, { id: "po-number", label: t('PO Number'), value: cart.poNumber }))] }) }) }), jsx(CheckoutPageSection, { hasBorder: false, title: t('Billing and shipping information'), children: jsx(CheckoutPageSectionContent, { children: jsx(BillingAndInvoiceInformation, { billToAddress: cart.billTo && {
                                     address1: cart.billTo.address1,
                                     address2: cart.billTo.address2,

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

@@ -6,6 +6,7 @@ import { useFetchSession } from '../../../shared/api/storefront/hooks/authentica
 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 { useFetchFulfillmentMethodsForCurrentCart } from '../../../shared/api/storefront/hooks/customer/use-fetch-fulfillment-methods-for-current-cart.js';
+import { UnauthorizedRequestError, ForbiddenRequestError } from '../../../shared/fetch/request.js';
 import { useDataLayer } from '../../../shared/ga/use-data-layer.js';
 import { useDisclosure } from '../../../shared/hooks/use-disclosure.js';
 import { useNavigate } from '../../../shared/routing/use-navigate.js';
@@ -82,7 +83,7 @@ function ShippingPage() {
     }, [cart, createEcommerceEvent, dataLayer]);
     if (errorFetchCart)
         return jsx(ErrorPage, { error: errorFetchCart });
-    if (isLoading || isNavigating || isError || isSuccess)
+    if (isLoading || isNavigating || isSuccess)
         return jsx(LoadingPage, {});
     if (hasNoBillToAddress && !countries)
         throw new Error('Countries are missing');
@@ -97,29 +98,38 @@ function ShippingPage() {
     async function handleSubmit({ address, cart, notes, }) {
         if (!cart.billTo)
             throw new Error('No billTo address found');
-        await patchShippingDetails({
-            billTo: {
-                ...cart.billTo,
-                address1: address.address1,
-                address2: address.address2,
-                address3: address.address3,
-                attention: address.attention,
-                city: address.city,
-                companyName: address.companyName,
-                country: { id: address.country.id },
-                email: address.email,
-                firstName: address.firstName,
-                lastName: address.lastName,
-                phone: address.phone,
-                postalCode: address.postalCode,
-            },
-            cart,
-            notes,
-        });
-        dataLayer.push(createEcommerceEvent({
-            cart,
-            event: { event: 'add_shipping_info' },
-        }));
+        try {
+            await patchShippingDetails({
+                billTo: {
+                    ...cart.billTo,
+                    address1: address.address1,
+                    address2: address.address2,
+                    address3: address.address3,
+                    attention: address.attention,
+                    city: address.city,
+                    companyName: address.companyName,
+                    country: { id: address.country.id },
+                    email: address.email,
+                    firstName: address.firstName,
+                    lastName: address.lastName,
+                    phone: address.phone,
+                    postalCode: address.postalCode,
+                },
+                cart,
+                notes,
+            });
+            dataLayer.push(createEcommerceEvent({
+                cart,
+                event: { event: 'add_shipping_info' },
+            }));
+        }
+        catch (error) {
+            if (error instanceof UnauthorizedRequestError ||
+                error instanceof ForbiddenRequestError)
+                throw error;
+            // Error is tracked by usePatchShippingDetails via isError/error state,
+            // surfaced to the UI via errorPatchBillingAddress
+        }
     }
     return (jsx(ShippingPageContent, { cart: cart, 
         // TODO: Combine editAddress and readOnlyAddress into one section in order
@@ -157,28 +167,37 @@ function ShippingPage() {
         }, readOnlyAddress: jsx(ReadOnlyAddresses, { billTo: cart.billTo, cartId: cart.id, countries: countries || [], currentCountry: currentCountry, isLoading: isPatching, isPickup: isPickup, notes: cart.notes, onSubmit: async ({ cart: updatedCart, notes, shipTo }) => {
                 if (!cart.billTo)
                     return;
-                if (notes ||
-                    cart.shipTo === null ||
-                    (shipTo && shipTo.id !== cart.shipTo?.id) ||
-                    (updatedCart &&
-                        (updatedCart.shipTo?.id !== cart.shipTo?.id ||
-                            updatedCart.shipTo === null))) {
-                    await patchShippingDetails({
-                        cart: {
-                            ...cart,
-                            ...updatedCart,
-                        },
-                        notes,
-                        shipTo,
-                    });
+                try {
+                    if (notes ||
+                        cart.shipTo === null ||
+                        (shipTo && shipTo.id !== cart.shipTo?.id) ||
+                        (updatedCart &&
+                            (updatedCart.shipTo?.id !== cart.shipTo?.id ||
+                                updatedCart.shipTo === null))) {
+                        await patchShippingDetails({
+                            cart: {
+                                ...cart,
+                                ...updatedCart,
+                            },
+                            notes,
+                            shipTo,
+                        });
+                    }
+                    else {
+                        navigate(paths.REVIEW_AND_SUBMIT);
+                    }
+                    dataLayer.push(createEcommerceEvent({
+                        cart,
+                        event: { event: 'add_shipping_info' },
+                    }));
                 }
-                else {
-                    navigate(paths.REVIEW_AND_SUBMIT);
+                catch (error) {
+                    if (error instanceof UnauthorizedRequestError ||
+                        error instanceof ForbiddenRequestError)
+                        throw error;
+                    // Error is tracked by usePatchShippingDetails via isError/error state,
+                    // surfaced to the UI via errorPatchBillingAddress
                 }
-                dataLayer.push(createEcommerceEvent({
-                    cart,
-                    event: { event: 'add_shipping_info' },
-                }));
             }, shipTo: cart.shipTo }) }));
 }
 

package/dist/shared/error/default-error-view.js

@@ -6,12 +6,15 @@ import { Details } from '../../display/details/details.js';
 import { StrokeRecentIcon } from '../../icons/stroke/stroke-recent-icon.js';
 import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 import { Heading } from '../../typography/heading/heading.js';
+import { isRequestError } from '../fetch/request.js';
 import { isProductionEnvironment } from '../utils/environment.js';
 import styles from './default-error-view.module.css.js';
 
 function DefaultErrorView({ className, error, errorInfo, resetError, resetLabel, showErrorDetails = !isProductionEnvironment, showReset, title, }) {
     const t = useFormattedMessage();
-    return (jsxs("section", { className: clsx(styles['default-error-view'], className), children: [title && (jsx(Heading, { className: styles['title'], size: "s", tag: "h1", children: title || t('Something went wrong') })), jsx("p", { children: error.message || t('An unexpected error occured. Please try again.') }), showErrorDetails && (jsxs(Details, { className: styles['error-details'], lang: "en", summary: "Technical Details (only visible in development mode)", children: [jsx("output", { className: styles['error-kind'], children: error.toString() }), error.stack && (jsxs("div", { className: styles['error-info'], children: [jsx(Heading, { className: styles['error-info-title'], size: "xs", tag: "h2", children: "Stack:" }), jsx("pre", { className: styles['error-info-data'], children: error.stack })] })), errorInfo?.componentStack && (jsxs("div", { className: styles['component-info'], children: [jsx(Heading, { className: styles['error-info-title'], size: "xs", tag: "h2", children: "Component stack:" }), jsx("pre", { className: styles['error-info-data'], children: errorInfo.componentStack })] }))] })), showReset && resetError && (jsx(Button, { light: true, className: styles['reset-button'], color: "secondary", icon: jsx(StrokeRecentIcon, {}), onClick: resetError, size: "sm", type: "button", variant: "outline", children: resetLabel || t('Reset') }))] }));
+    return (jsxs("section", { className: clsx(styles['default-error-view'], className), children: [title && (jsx(Heading, { className: styles['title'], size: "s", tag: "h1", children: title || t('Something went wrong') })), jsx("p", { children: !isRequestError(error) && error.message
+                    ? error.message
+                    : t('An unexpected error occured. Please try again.') }), showErrorDetails && (jsxs(Details, { className: styles['error-details'], lang: "en", summary: "Technical Details (only visible in development mode)", children: [jsx("output", { className: styles['error-kind'], children: error.toString() }), error.stack && (jsxs("div", { className: styles['error-info'], children: [jsx(Heading, { className: styles['error-info-title'], size: "xs", tag: "h2", children: "Stack:" }), jsx("pre", { className: styles['error-info-data'], children: error.stack })] })), errorInfo?.componentStack && (jsxs("div", { className: styles['component-info'], children: [jsx(Heading, { className: styles['error-info-title'], size: "xs", tag: "h2", children: "Component stack:" }), jsx("pre", { className: styles['error-info-data'], children: errorInfo.componentStack })] }))] })), showReset && resetError && (jsx(Button, { light: true, className: styles['reset-button'], color: "secondary", icon: jsx(StrokeRecentIcon, {}), onClick: resetError, size: "sm", type: "button", variant: "outline", children: resetLabel || t('Reset') }))] }));
 }
 
 export { DefaultErrorView };

package/dist/shared/fetch/request.js

@@ -68,6 +68,19 @@ class RequestError extends Error {
         this.options = options?.options;
         // eslint-disable-next-line unicorn/custom-error-definition
         this.name = this.name || this.constructor.name || 'RequestError';
+        // Replace the non-serializable Response cause with a plain object so error
+        // reporting tools (e.g. Sentry) can capture full request/response context.
+        this.cause = {
+            request: {
+                method: this.options?.method ?? 'GET',
+                url: this.options?.url,
+            },
+            response: {
+                body: this.body,
+                status: this.status,
+                statusText: this.statusText,
+            },
+        };
     }
     toJSON() {
         return {

package/package.json

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