@sonic-equipment/ui 186.0.0 → 188.0.0

package/dist/navigation/panel-navigation/panel-navigation.d.ts

@@ -1,17 +1,15 @@
 import { ReactNode } from 'react';
-import { NavigationLink } from '../../shared/api/bff/model/bff.model';
+import { MenuHeader } from '../../lists/menu-list/menu-list';
+import { NavigationLinkItem } from '../../shared/api/bff/model/bff.model';
 export interface PanelNavigationProps {
     allowBack?: boolean;
     children?: ReactNode;
     className?: string;
     'data-test-selector'?: string;
-    header?: string | {
-        href: string;
-        title: string;
-    };
+    header?: MenuHeader;
     id?: string;
     isNarrow?: boolean;
-    links?: NavigationLink[];
+    linkItems?: NavigationLinkItem[];
     variant?: 'primary';
 }
-export declare function PanelNavigation({ allowBack, children, className, 'data-test-selector': dataTestSelector, header, id, isNarrow, links, variant, }: PanelNavigationProps): import("react/jsx-runtime").JSX.Element;
+export declare function PanelNavigation({ allowBack, children, className, 'data-test-selector': dataTestSelector, header, id, isNarrow, linkItems, variant, }: PanelNavigationProps): import("react/jsx-runtime").JSX.Element;

package/dist/navigation/panel-navigation/panel-navigation.js

@@ -7,6 +7,7 @@ import { CascadingComponentContainer } from '../../collapsables/cascading-compon
 import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 import { MenuList } from '../../lists/menu-list/menu-list.js';
 import { MenuListItem } from '../../lists/menu-list/menu-list-item.js';
+import { isNavigationLinkGroup } from '../../shared/api/bff/model/bff.model.js';
 import { multiRef } from '../../shared/utils/refs.js';
 import styles from './panel-navigation.module.css.js';
 
@@ -18,7 +19,7 @@ const focusableSelectors = [
     'select:not([disabled])',
     '[tabindex]:not([tabindex="-1"])',
 ].join(',');
-const NavigationMenu = forwardRef(({ allowBack, back, children, className, header, id, isNarrow, links, scrollable, variant, }, ref) => {
+const NavigationMenu = forwardRef(({ allowBack, back, children, className, header, id, isNarrow, linkItems, scrollable, variant, }, ref) => {
     const menuRef = useRef();
     const submenuRef = useRef(null);
     const [selectedNavigationLink, setSelectedNavigationLink] = useState();
@@ -37,9 +38,9 @@ const NavigationMenu = forwardRef(({ allowBack, back, children, className, heade
         setSelectedNavigationVisible(Boolean(selectedNavigationLink));
     }, [selectedNavigationLink]);
     const t = useFormattedMessage();
-    return (jsxs(Fragment, { children: [jsxs("div", { ref: multiRef(ref, menuRef), className: clsx(styles['panel'], isNarrow && styles['narrow'], className), "data-test-selector": "panelNavigation", id: id, children: [jsx(MenuList, { back: back, header: header, scrollable: scrollable, variant: variant, children: links?.map(link => link.links && link.links.length > 0 ? (jsx(MenuListItem, { hasChildren: true, "aria-controls": `menu-${link.key}`, "data-test-selector": "panelNavigationItem", image: link.image, isSelected: selectedNavigationLink?.key === link.key, onClick: () => setSelectedNavigationLink(selectedNavigationLink?.key === link.key
+    return (jsxs(Fragment, { children: [jsxs("div", { ref: multiRef(ref, menuRef), className: clsx(styles['panel'], isNarrow && styles['narrow'], className), "data-test-selector": "panelNavigation", id: id, children: [jsx(MenuList, { back: back, header: header, scrollable: scrollable, variant: variant, children: linkItems?.map(link => link.type === 'link-group' && link.items.length > 0 ? (jsx(MenuListItem, { hasChildren: true, "aria-controls": `menu-${link.key}`, "data-test-selector": "panelNavigationItem", image: link.image, isSelected: selectedNavigationLink?.key === link.key, onClick: () => setSelectedNavigationLink(selectedNavigationLink?.key === link.key
                                 ? undefined
-                                : link), children: link.title }, link.key)) : (jsx(MenuListItem, { "data-test-selector": "panelNavigationItem", href: link.url, image: link.image, openInNewTab: link.openInNewTab, children: link.title }, link.key))) }), children] }), jsx(CascadingComponent, { isVisible: selectedNavigationVisible, nodeRef: submenuRef, onEntered: onFocus(submenuRef), onExited: onFocus(menuRef), onUnmounted: onUnmounted, children: jsx(NavigationMenu, { ref: submenuRef, allowBack: allowBack, back: allowBack
+                                : link), children: link.label }, link.key)) : (jsx(MenuListItem, { "data-test-selector": "panelNavigationItem", href: link.href, image: link.image, openInNewTab: link.openInNewTab, children: link.label }, link.key))) }), children] }), jsx(CascadingComponent, { isVisible: selectedNavigationVisible, nodeRef: submenuRef, onEntered: onFocus(submenuRef), onExited: onFocus(menuRef), onUnmounted: onUnmounted, children: jsx(NavigationMenu, { ref: submenuRef, allowBack: allowBack, back: allowBack
                         ? {
                             onClick: () => {
                                 setSelectedNavigationVisible(false);
@@ -47,23 +48,19 @@ const NavigationMenu = forwardRef(({ allowBack, back, children, className, heade
                             title: header
                                 ? typeof header === 'string'
                                     ? header
-                                    : header.title
+                                    : header.label
                                 : t('Main menu'),
                         }
-                        : undefined, header: selectedNavigationLink?.url
-                        ? {
-                            href: selectedNavigationLink.url,
-                            title: selectedNavigationLink.title,
-                        }
-                        : selectedNavigationLink?.title, id: selectedNavigationLink?.key
+                        : undefined, header: selectedNavigationLink, id: selectedNavigationLink?.key
                         ? `menu-${selectedNavigationLink.key}`
-                        : undefined, isNarrow: isNarrow, links: selectedNavigationLink && 'links' in selectedNavigationLink
-                        ? selectedNavigationLink.links
+                        : undefined, isNarrow: isNarrow, linkItems: selectedNavigationLink &&
+                        isNavigationLinkGroup(selectedNavigationLink)
+                        ? selectedNavigationLink.items
                         : [] }, selectedNavigationLink?.key) })] }));
 });
 NavigationMenu.displayName = 'NavigationMenu';
-function PanelNavigation({ allowBack, children, className, 'data-test-selector': dataTestSelector, header, id, isNarrow, links, variant, }) {
-    return (jsx("section", { className: clsx(styles['panel-navigation'], className), "data-test-selector": dataTestSelector, id: id, children: jsx(CascadingComponentContainer, { children: jsx("div", { className: clsx(styles['panels'], isNarrow && styles['narrow']), children: jsx(NavigationMenu, { allowBack: allowBack, className: children ? styles['top-panel'] : undefined, header: header, id: "panel-navigation-first-level", isNarrow: isNarrow, links: links, scrollable: children ? false : undefined, variant: variant, children: children }) }) }) }));
+function PanelNavigation({ allowBack, children, className, 'data-test-selector': dataTestSelector, header, id, isNarrow, linkItems, variant, }) {
+    return (jsx("section", { className: clsx(styles['panel-navigation'], className), "data-test-selector": dataTestSelector, id: id, children: jsx(CascadingComponentContainer, { children: jsx("div", { className: clsx(styles['panels'], isNarrow && styles['narrow']), children: jsx(NavigationMenu, { allowBack: allowBack, className: children ? styles['top-panel'] : undefined, header: header, id: "panel-navigation-first-level", isNarrow: isNarrow, linkItems: linkItems, scrollable: children ? false : undefined, variant: variant, children: children }) }) }) }));
 }
 
 export { PanelNavigation };

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

@@ -5,6 +5,9 @@ import AdyenCheckout from '@adyen/adyen-web';
 import clsx from 'clsx';
 import qs from 'query-string';
 import { useCultureCode } from '../../../../intl/use-culture-code.js';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import { logger } from '../../../../logging/logger.js';
+import { Message } from '../../../../message/message.js';
 import { useCreateAdyenSession } from '../../../../shared/api/storefront/hooks/payment/use-create-adyen-session.js';
 import { useFetchAdyenConfig } from '../../../../shared/api/storefront/hooks/payment/use-fetch-adyen-config.js';
 import { postAdyenPayment, getAdyenPaymentDetails } from '../../../../shared/api/storefront/services/cart-service.js';
@@ -12,6 +15,7 @@ import { parseAmount } from '../utils/parse-amount.js';
 import styles from './adyen-payment.module.css.js';
 
 function AdyenPayment({ amount, cartId, countryCode, currencyCode, customerId, dropinRef, environment, isDisabled, onComplete, onError, orderAmount, returnUrl, }) {
+    const t = useFormattedMessage();
     const cultureCode = useCultureCode();
     // Get and remove Adyen query string params and keep them in a ref
     const queryStringParams = useRef(getAndRemoveAdyenQueryParams());
@@ -125,8 +129,10 @@ function AdyenPayment({ amount, cartId, countryCode, currencyCode, customerId, d
         adyenAmount,
         adyenCustomerId,
     ]);
-    if (error)
-        return jsx("div", { children: String(error) });
+    if (error) {
+        logger.error('Adyen Payment Error:', error);
+        return (jsx(Message, { type: "danger", children: t('All payment methods are unavailable at this time. Please contact customer support.') }));
+    }
     return (jsx("div", { ref: dropinDivRef, className: clsx(Boolean(redirectResult) && styles.loading, isDisabled && styles.loading), id: "dropin" }));
 }
 function getAndRemoveAdyenQueryParams() {

package/dist/pages/checkout/payment-page/components/payment.d.ts

@@ -9,7 +9,6 @@ interface PaymentProps {
         cartId: string;
     }) => void;
     onProcessing: (processing: boolean) => void;
-    onValidatingVAT: (validating: boolean) => void;
 }
-export declare function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPaymentComplete, onProcessing, onValidatingVAT, }: PaymentProps): import("react/jsx-runtime").JSX.Element;
+export declare function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPaymentComplete, onProcessing, }: PaymentProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -18,7 +18,6 @@ import { useInvalidateCurrentCart } from '../../../../shared/api/storefront/hook
 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 { useDataLayer } from '../../../../shared/ga/use-data-layer.js';
 import { getCurrencyCodeBySymbol } from '../../../../shared/model/currency.js';
 import { environment } from '../../../../shared/utils/environment.js';
@@ -27,7 +26,7 @@ import { useHasReturnedFromAdyen } from '../hooks/use-has-returned-from-adyen.js
 import { AdyenPayment } from './adyen-payment.js';
 import styles from './payment.module.css.js';
 
-function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPaymentComplete, onProcessing, onValidatingVAT, }) {
+function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPaymentComplete, onProcessing, }) {
     const { createEcommerceEvent, dataLayer } = useDataLayer();
     const { mutate: patchCart } = usePatchCart();
     const { mutate: placeOrder } = usePlaceOrder();
@@ -49,7 +48,6 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
         throw new Error(`Country code not found for cart with country abbreviation: ${_cart.billTo?.country?.abbreviation}`);
     const countryCode = _cart.billTo.country.abbreviation;
     const currencyCode = getCurrencyCodeBySymbol(cart.currencySymbol);
-    const lastVATNumber = useRef(cart.customerVatNumber);
     if (!currencyCode)
         throw new Error(`Currency code not found for cart with currency symbol: ${cart.currencySymbol}`);
     const isAdyenPayment = selectedPaymentMethod === 'ADY' &&
@@ -66,7 +64,6 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
         cartRef.current = _cart;
     }, [_cart]);
     const [validationErrors, setValidationErrors] = useState({});
-    const [customerVatNumber, setCustomerVatNumber] = useState(cart.customerVatNumber);
     const atpSelectOptions = atp
         .filter(atp => Boolean(atp.date))
         .reduce((acc, atp) => ({
@@ -77,72 +74,6 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
         acc[method.name] = t(`paymentMethod.${method.description}`);
         return acc;
     }, {});
-    const validateVAT = useCallback(async (value) => {
-        if (!value) {
-            setValidationErrors(errors => {
-                const result = { ...errors };
-                delete result.customerVatNumber;
-                return result;
-            });
-            return true;
-        }
-        if (value.length < 8) {
-            setValidationErrors({
-                ...validationErrors,
-                customerVatNumber: t('validation.tooShort'),
-            });
-            return false;
-        }
-        try {
-            if (lastVATNumber.current === value)
-                return true;
-            onValidatingVAT(true);
-            const response = await validateVATNumber({ vatNumber: value });
-            lastVATNumber.current = value;
-            if (response.isValid) {
-                setValidationErrors(validationErrors => {
-                    const result = { ...validationErrors };
-                    delete result.customerVatNumber;
-                    return result;
-                });
-                return true;
-            }
-            else {
-                setValidationErrors(validationErrors => ({
-                    ...validationErrors,
-                    customerVatNumber: t('validation.invalid'),
-                }));
-                return false;
-            }
-        }
-        catch {
-            // When an error occurs, we don't want to show the error message
-            // because it might be a temporary issue with the service.
-            // The customer can not do anything about it, so we just remove the error message.
-            setValidationErrors(validationErrors => {
-                const result = { ...validationErrors };
-                delete result.customerVatNumber;
-                return result;
-            });
-            return true;
-        }
-        finally {
-            onValidatingVAT(false);
-        }
-    }, [onValidatingVAT, t, validationErrors]);
-    useEffect(() => {
-        /* When a customer has an existing VAT that is
-         * not valid (e.g. invalid, undetermined, or failure),
-         * then trigger a client side validation. */
-        if (!cart.customerVatNumber)
-            return;
-        if (cart.properties.customerVatNumberStatus === 'valid')
-            return;
-        onValidatingVAT(true);
-        lastVATNumber.current = '';
-        validateVAT(cart.customerVatNumber);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
     const onPlaceOrderCompleted = useCallback(({ cart, payment_type }) => {
         dataLayer.push(createEcommerceEvent({
             cart,
@@ -189,10 +120,6 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
         };
         cart.requestedDeliveryDate = formData.get('deliveryDate')?.toString();
         cart.requestedDeliveryDateDisplay = undefined;
-        if (cart.customerVatNumber &&
-            lastVATNumber.current !== cart.customerVatNumber &&
-            !(await validateVAT(cart.customerVatNumber)))
-            return;
         if (Object.keys(validationErrors).length > 0)
             return;
         if (isAdyenPayment) {
@@ -317,7 +244,7 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
                     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, isDisabled: isDisabled, label: t('VAT Number'), name: "customerVatNumber", onBlur: e => validateVAT(e.target.value), onChange: setCustomerVatNumber, validate: () => validationErrors.customerVatNumber ?? true, value: 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: environment === 'production' ? 'live' : 'test', isDisabled: isDisabled, onComplete: onComplete, onError: onError, orderAmount: cart.orderGrandTotal, returnUrl: 
+                }, placeholder: t('Select an industry'), variant: "solid" }), jsx(TextField, { showLabel: true, 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: environment === 'production' ? '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/payment-page/payment-page-content.d.ts

@@ -5,11 +5,9 @@ export interface PaymentContentProps {
     formId: string;
     hasAtp: boolean;
     isProcessing: boolean;
-    isValidatingVAT: boolean;
     onPaymentComplete: ({ cartId }: {
         cartId: string;
     }) => void;
     setIsProcessing: (isProcessing: boolean) => void;
-    setIsValidatingVAT: (isValidating: boolean) => void;
 }
-export declare function PaymentPageContent({ atp, cart, formId, hasAtp, isProcessing, isValidatingVAT, onPaymentComplete, setIsProcessing, setIsValidatingVAT, }: PaymentContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function PaymentPageContent({ atp, cart, formId, hasAtp, isProcessing, onPaymentComplete, setIsProcessing, }: PaymentContentProps): import("react/jsx-runtime").JSX.Element;

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

@@ -16,7 +16,7 @@ import { CheckoutPageSection } from '../layouts/checkout-page-layout/components/
 import { CheckoutPageSectionContent } from '../layouts/checkout-page-layout/components/checkout-page-section-content.js';
 import { Payment } from './components/payment.js';
 
-function PaymentPageContent({ atp, cart, formId, hasAtp, isProcessing, isValidatingVAT, onPaymentComplete, setIsProcessing, setIsValidatingVAT, }) {
+function PaymentPageContent({ atp, cart, formId, hasAtp, isProcessing, onPaymentComplete, setIsProcessing, }) {
     const t = useFormattedMessage();
     const currencyCode = getCurrencyCodeBySymbol(cart.currencySymbol);
     if (!currencyCode)
@@ -28,9 +28,9 @@ function PaymentPageContent({ atp, cart, formId, hasAtp, isProcessing, isValidat
                 label: t('Review and payment'),
             },
         ], "data-test-selector": "paymentPage", title: t('Review and payment'), children: jsxs(CheckoutPageLayout, { actions: {
-                primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutReviewAndSubmit_placeOrder", form: formId, isDisabled: isProcessing, isLoading: isProcessing ? (jsx(FormattedMessage, { id: "Processing" })) : isValidatingVAT ? (jsx(FormattedMessage, { id: "Validating" })) : (false), type: "submit", children: cart.paymentMethod?.name === 'PBI' ? (jsx(FormattedMessage, { id: "Finalize order" })) : (jsx(FormattedMessage, { id: "Finalize payment" })) })),
+                primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutReviewAndSubmit_placeOrder", form: formId, isDisabled: isProcessing, isLoading: isProcessing ? jsx(FormattedMessage, { id: "Processing" }) : false, type: "submit", children: cart.paymentMethod?.name === 'PBI' ? (jsx(FormattedMessage, { id: "Finalize order" })) : (jsx(FormattedMessage, { id: "Finalize payment" })) })),
             }, mobileSummary: jsx(CartTotalsSummary, { currencyCode: currencyCode, totalAmount: cart.orderGrandTotal }), overview: jsx(CartTotals, { currencyCode: currencyCode, deliveryDate: hasAtp ? undefined : cart.requestedDeliveryDate, fulfillmentMethod: cart.fulfillmentMethod, isPayByInvoice: (cart.paymentOptions?.paymentMethods?.length || 1) <= 1 &&
-                    cart.paymentMethod?.name === 'PBI', shippingCost: cart.shippingAndHandling, subtotal: cart.orderSubTotal, tax: cart.totalTax, total: cart.orderGrandTotal, 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: formId, isProcessing: isProcessing, onPaymentComplete: onPaymentComplete, onProcessing: setIsProcessing, onValidatingVAT: setIsValidatingVAT }) }) }), 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 ?? null, href: cartLine.productUri, image: {
+                    cart.paymentMethod?.name === 'PBI', shippingCost: cart.shippingAndHandling, subtotal: cart.orderSubTotal, tax: cart.totalTax, total: cart.orderGrandTotal, 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: formId, isProcessing: isProcessing, onPaymentComplete: onPaymentComplete, onProcessing: setIsProcessing }) }) }), 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 ?? null, href: cartLine.productUri, image: {
                                     fit: 'contain',
                                     image: {
                                         '1': cartLine.smallImagePath,

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

@@ -23,7 +23,6 @@ function PaymentPage() {
     const hasAtp = atp !== undefined && atp.length > 1;
     const isLoading = isLoadingCart || isAtpLoading;
     const [isProcessing, setIsProcessing] = useState(false);
-    const [isValidating, setIsValidating] = useState(false);
     const { isNavigating, navigate } = useNavigate();
     const onPaymentComplete = useCallback(({ cartId }) => {
         navigate(`${PATHS.ORDER_CONFIRMATION}?cartId=${cartId}`);
@@ -58,7 +57,7 @@ function PaymentPage() {
         return null;
     if (!atp)
         throw new Error('Unexpected condition: ATP is undefined');
-    return (jsx(PaymentPageContent, { atp: atp, cart: cart, formId: PAYMENT_FORM_ID, hasAtp: hasAtp, isProcessing: isProcessing, isValidatingVAT: isValidating, onPaymentComplete: onPaymentComplete, setIsProcessing: setIsProcessing, setIsValidatingVAT: setIsValidating }));
+    return (jsx(PaymentPageContent, { atp: atp, cart: cart, formId: PAYMENT_FORM_ID, hasAtp: hasAtp, isProcessing: isProcessing, onPaymentComplete: onPaymentComplete, setIsProcessing: setIsProcessing }));
 }
 
 export { PaymentPage };

package/dist/pages/product/product-details-page/components/product-details-panel/product-details-panel.js

@@ -16,7 +16,7 @@ import styles from './product-details-panel.module.css.js';
 
 function ProductDetailsPanel({ priceComponent, product, }) {
     const { sendAddToCartFromProductDetailsPageEvent, sendAddToWishListFromProductDetailsPageEvent, } = useAlgoliaInsights();
-    return (jsxs("div", { className: styles['product-details-panel'], children: [jsxs("div", { className: styles.heading, children: [jsx(Heading, { italic: true, size: "xs", tag: "h1", children: product.productTitle }), jsx(ProductSku, { sku: product.productNumber })] }), jsxs("div", { className: styles['price-action-container'], children: [priceComponent || (jsx(Price, { className: styles.price, currencyCode: product.currencyCode, "data-test": "productPrice_unitNetPrice", isVatIncluded: product.isVatIncluded, originalPrice: product.originalPrice, price: product.price, variant: "sonic" })), jsxs("div", { className: styles['action-container'], children: [product.canAddToCart && (jsx(ConnectedAddToCartButton, { onAddToCart: ({ cartLine }) => {
+    return (jsxs("div", { className: styles['product-details-panel'], children: [jsxs("div", { className: styles.heading, children: [jsx(Heading, { italic: true, size: "xs", tag: "h1", children: product.productTitle }), jsx(ProductSku, { className: styles.sku, sku: product.productNumber })] }), jsxs("div", { className: styles['price-action-container'], children: [priceComponent || (jsx(Price, { className: styles.price, currencyCode: product.currencyCode, "data-test": "productPrice_unitNetPrice", isVatIncluded: product.isVatIncluded, originalPrice: product.originalPrice, price: product.price, variant: "sonic" })), jsxs("div", { className: styles['action-container'], children: [product.canAddToCart && (jsx(ConnectedAddToCartButton, { onAddToCart: ({ cartLine }) => {
                                     sendAddToCartFromProductDetailsPageEvent({
                                         cartLine,
                                     });

package/dist/pages/product/product-details-page/components/product-details-panel/product-details-panel.module.css.js

@@ -1,3 +1,3 @@
-var styles = {"product-details-panel":"product-details-panel-module-MXfPm","heading":"product-details-panel-module-rtZYR","price-action-container":"product-details-panel-module-wHZCr","price":"product-details-panel-module-dI2JL","action-container":"product-details-panel-module-QLafW","description":"product-details-panel-module-9L-Nm","feature-list":"product-details-panel-module-NC2nx"};
+var styles = {"product-details-panel":"product-details-panel-module-MXfPm","heading":"product-details-panel-module-rtZYR","sku":"product-details-panel-module-IbS9-","price-action-container":"product-details-panel-module-wHZCr","price":"product-details-panel-module-dI2JL","action-container":"product-details-panel-module-QLafW","description":"product-details-panel-module-9L-Nm","feature-list":"product-details-panel-module-NC2nx"};
 
 export { styles as default };

package/dist/shared/api/bff/hooks/use-fetch-navigation-links.d.ts

@@ -1,2 +1,2 @@
 import { FetchNavigationLinksArgs } from '../services/bff-service';
-export declare function useFetchNavigationLinks({ cultureCode, source, }: FetchNavigationLinksArgs): import("@tanstack/react-query").UseQueryResult<import("../model/bff.model").NavigationLinkResponse, Error>;
+export declare function useFetchNavigationLinks({ cultureCode, source, }: FetchNavigationLinksArgs): import("@tanstack/react-query").UseQueryResult<import("../model/bff.model").NavigationSection, Error>;

package/dist/shared/api/bff/model/bff.model.d.ts

@@ -187,21 +187,29 @@ interface Announcement {
 }
 export type AnnouncementResponse = Announcement[];
 export interface NavigationLink {
-    external?: boolean;
-    image?: ImageType;
+    href: string;
+    image?: ImageType | null;
     key: string;
-    links?: NavigationLink[];
+    label: string;
     openInNewTab?: boolean;
-    title: string;
-    type: 'link' | 'category' | 'section';
-    url?: string;
-}
-export interface NavigationLinkResponse {
-    footer: {
-        bottomLinks: NavigationLink[];
-        copyright: string;
-        linkBlocks: NavigationLink[];
-    };
-    header: NavigationLink[];
+    type: 'link';
+}
+export declare const isNavigationLink: (item?: unknown) => item is NavigationLink;
+export interface NavigationLinkGroup extends Omit<NavigationLink, 'type' | 'href'> {
+    header?: string;
+    href?: string | null;
+    items: NavigationLinkItem[];
+    type: 'link-group';
+}
+export declare const isNavigationLinkGroup: (item?: unknown) => item is NavigationLinkGroup;
+export interface NavigationSection {
+    items: NavigationItem[];
+    key: string;
+    type: 'section';
 }
+export declare const isNavigationSection: (item?: unknown) => item is NavigationSection;
+export type NavigationLinkItem = NavigationLink | NavigationLinkGroup;
+export declare const isNavigationLinkItem: (item?: unknown) => item is NavigationLinkItem;
+export type NavigationItem = NavigationSection | NavigationLinkItem;
+export type NavigationResponse = NavigationSection;
 export {};

package/dist/shared/api/bff/model/bff.model.js

@@ -1 +1,12 @@
+const isNavigationLink = (item) => 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+item?.type === 'link';
+const isNavigationLinkGroup = (item) => 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+item?.type === 'link-group';
+const isNavigationSection = (item) => 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+item?.type === 'section';
+const isNavigationLinkItem = (item) => isNavigationLink(item) || isNavigationLinkGroup(item);
 
+export { isNavigationLink, isNavigationLinkGroup, isNavigationLinkItem, isNavigationSection };

package/dist/shared/api/bff/services/bff-service.d.ts

@@ -1,7 +1,7 @@
 import { CultureCode } from '../../../../intl/types';
 import { ProductListingPageData } from '../../../../pages/product/product-listing-page/product-listing-page-data-types';
 import { AnnouncementObject } from '../../../model/announcement';
-import { NavigationLinkResponse, ProductDetailsPageDataResponse, ProductSummary } from '../model/bff.model';
+import { NavigationResponse, ProductDetailsPageDataResponse, ProductSummary } from '../model/bff.model';
 export interface FetchAnnouncementsArgs {
     cultureCode: CultureCode;
 }
@@ -17,7 +17,7 @@ export interface FetchNavigationLinksArgs {
     cultureCode: CultureCode;
     source: NavigationLinkSource;
 }
-export declare function fetchNavigationLinks({ cultureCode, source, }: FetchNavigationLinksArgs): Promise<NavigationLinkResponse>;
+export declare function fetchNavigationLinks({ cultureCode, source, }: FetchNavigationLinksArgs): Promise<NavigationResponse>;
 export declare function fetchRecentlyViewedProducts({ cultureCode, }: {
     cultureCode: CultureCode;
 }): Promise<ProductSummary[]>;

package/dist/shared/api/bff/services/bff-service.js

@@ -102,7 +102,7 @@ async function fetchNavigationLinks({ cultureCode, source, }) {
                 `navigation-${source}-${cultureCode}`,
             ],
         },
-        url: `${config.BFF_API_URL}/navigation`,
+        url: `${config.BFF_API_URL}/v2/navigation`,
     });
     return body;
 }

package/dist/shared/data/navigation.d.ts

@@ -0,0 +1,2 @@
+import { NavigationResponse } from '../api/bff/model/bff.model';
+export declare const navigationData: NavigationResponse;