@sonic-equipment/ui 0.0.119 → 120.0.0

package/dist/node_modules/.pnpm/swiper@11.1.14/node_modules/swiper/swiper-react.js

@@ -0,0 +1,389 @@
+import React, { forwardRef, useState, useRef, useEffect, useLayoutEffect, createContext } from 'react';
+import { S as Swiper$1 } from './shared/swiper-core.js';
+import { g as getParams, m as mountSwiper, a as getChangedParams, u as updateOnVirtualData } from './shared/update-on-virtual-data.js';
+import { d as uniqueClasses, w as wrapperClass, n as needsNavigation, b as needsScrollbar, a as needsPagination, e as extend, u as updateSwiper } from './shared/update-swiper.js';
+
+/**
+ * Swiper React 11.1.14
+ * Most modern mobile touch slider and framework with hardware accelerated transitions
+ * https://swiperjs.com
+ *
+ * Copyright 2014-2024 Vladimir Kharlampidi
+ *
+ * Released under the MIT License
+ *
+ * Released on: September 12, 2024
+ */
+
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+function isChildSwiperSlide(child) {
+  return child.type && child.type.displayName && child.type.displayName.includes('SwiperSlide');
+}
+function processChildren(c) {
+  const slides = [];
+  React.Children.toArray(c).forEach(child => {
+    if (isChildSwiperSlide(child)) {
+      slides.push(child);
+    } else if (child.props && child.props.children) {
+      processChildren(child.props.children).forEach(slide => slides.push(slide));
+    }
+  });
+  return slides;
+}
+function getChildren(c) {
+  const slides = [];
+  const slots = {
+    'container-start': [],
+    'container-end': [],
+    'wrapper-start': [],
+    'wrapper-end': []
+  };
+  React.Children.toArray(c).forEach(child => {
+    if (isChildSwiperSlide(child)) {
+      slides.push(child);
+    } else if (child.props && child.props.slot && slots[child.props.slot]) {
+      slots[child.props.slot].push(child);
+    } else if (child.props && child.props.children) {
+      const foundSlides = processChildren(child.props.children);
+      if (foundSlides.length > 0) {
+        foundSlides.forEach(slide => slides.push(slide));
+      } else {
+        slots['container-end'].push(child);
+      }
+    } else {
+      slots['container-end'].push(child);
+    }
+  });
+  return {
+    slides,
+    slots
+  };
+}
+
+function renderVirtual(swiper, slides, virtualData) {
+  if (!virtualData) return null;
+  const getSlideIndex = index => {
+    let slideIndex = index;
+    if (index < 0) {
+      slideIndex = slides.length + index;
+    } else if (slideIndex >= slides.length) {
+      // eslint-disable-next-line
+      slideIndex = slideIndex - slides.length;
+    }
+    return slideIndex;
+  };
+  const style = swiper.isHorizontal() ? {
+    [swiper.rtlTranslate ? 'right' : 'left']: `${virtualData.offset}px`
+  } : {
+    top: `${virtualData.offset}px`
+  };
+  const {
+    from,
+    to
+  } = virtualData;
+  const loopFrom = swiper.params.loop ? -slides.length : 0;
+  const loopTo = swiper.params.loop ? slides.length * 2 : slides.length;
+  const slidesToRender = [];
+  for (let i = loopFrom; i < loopTo; i += 1) {
+    if (i >= from && i <= to) {
+      slidesToRender.push(slides[getSlideIndex(i)]);
+    }
+  }
+  return slidesToRender.map((child, index) => {
+    return /*#__PURE__*/React.cloneElement(child, {
+      swiper,
+      style,
+      key: child.props.virtualIndex || child.key || `slide-${index}`
+    });
+  });
+}
+
+function useIsomorphicLayoutEffect(callback, deps) {
+  // eslint-disable-next-line
+  if (typeof window === 'undefined') return useEffect(callback, deps);
+  return useLayoutEffect(callback, deps);
+}
+
+const SwiperSlideContext = /*#__PURE__*/createContext(null);
+const SwiperContext = /*#__PURE__*/createContext(null);
+
+const Swiper = /*#__PURE__*/forwardRef(function (_temp, externalElRef) {
+  let {
+    className,
+    tag: Tag = 'div',
+    wrapperTag: WrapperTag = 'div',
+    children,
+    onSwiper,
+    ...rest
+  } = _temp === void 0 ? {} : _temp;
+  let eventsAssigned = false;
+  const [containerClasses, setContainerClasses] = useState('swiper');
+  const [virtualData, setVirtualData] = useState(null);
+  const [breakpointChanged, setBreakpointChanged] = useState(false);
+  const initializedRef = useRef(false);
+  const swiperElRef = useRef(null);
+  const swiperRef = useRef(null);
+  const oldPassedParamsRef = useRef(null);
+  const oldSlides = useRef(null);
+  const nextElRef = useRef(null);
+  const prevElRef = useRef(null);
+  const paginationElRef = useRef(null);
+  const scrollbarElRef = useRef(null);
+  const {
+    params: swiperParams,
+    passedParams,
+    rest: restProps,
+    events
+  } = getParams(rest);
+  const {
+    slides,
+    slots
+  } = getChildren(children);
+  const onBeforeBreakpoint = () => {
+    setBreakpointChanged(!breakpointChanged);
+  };
+  Object.assign(swiperParams.on, {
+    _containerClasses(swiper, classes) {
+      setContainerClasses(classes);
+    }
+  });
+  const initSwiper = () => {
+    // init swiper
+    Object.assign(swiperParams.on, events);
+    eventsAssigned = true;
+    const passParams = {
+      ...swiperParams
+    };
+    delete passParams.wrapperClass;
+    swiperRef.current = new Swiper$1(passParams);
+    if (swiperRef.current.virtual && swiperRef.current.params.virtual.enabled) {
+      swiperRef.current.virtual.slides = slides;
+      const extendWith = {
+        cache: false,
+        slides,
+        renderExternal: setVirtualData,
+        renderExternalUpdate: false
+      };
+      extend(swiperRef.current.params.virtual, extendWith);
+      extend(swiperRef.current.originalParams.virtual, extendWith);
+    }
+  };
+  if (!swiperElRef.current) {
+    initSwiper();
+  }
+
+  // Listen for breakpoints change
+  if (swiperRef.current) {
+    swiperRef.current.on('_beforeBreakpoint', onBeforeBreakpoint);
+  }
+  const attachEvents = () => {
+    if (eventsAssigned || !events || !swiperRef.current) return;
+    Object.keys(events).forEach(eventName => {
+      swiperRef.current.on(eventName, events[eventName]);
+    });
+  };
+  const detachEvents = () => {
+    if (!events || !swiperRef.current) return;
+    Object.keys(events).forEach(eventName => {
+      swiperRef.current.off(eventName, events[eventName]);
+    });
+  };
+  useEffect(() => {
+    return () => {
+      if (swiperRef.current) swiperRef.current.off('_beforeBreakpoint', onBeforeBreakpoint);
+    };
+  });
+
+  // set initialized flag
+  useEffect(() => {
+    if (!initializedRef.current && swiperRef.current) {
+      swiperRef.current.emitSlidesClasses();
+      initializedRef.current = true;
+    }
+  });
+
+  // mount swiper
+  useIsomorphicLayoutEffect(() => {
+    if (externalElRef) {
+      externalElRef.current = swiperElRef.current;
+    }
+    if (!swiperElRef.current) return;
+    if (swiperRef.current.destroyed) {
+      initSwiper();
+    }
+    mountSwiper({
+      el: swiperElRef.current,
+      nextEl: nextElRef.current,
+      prevEl: prevElRef.current,
+      paginationEl: paginationElRef.current,
+      scrollbarEl: scrollbarElRef.current,
+      swiper: swiperRef.current
+    }, swiperParams);
+    if (onSwiper && !swiperRef.current.destroyed) onSwiper(swiperRef.current);
+    // eslint-disable-next-line
+    return () => {
+      if (swiperRef.current && !swiperRef.current.destroyed) {
+        swiperRef.current.destroy(true, false);
+      }
+    };
+  }, []);
+
+  // watch for params change
+  useIsomorphicLayoutEffect(() => {
+    attachEvents();
+    const changedParams = getChangedParams(passedParams, oldPassedParamsRef.current, slides, oldSlides.current, c => c.key);
+    oldPassedParamsRef.current = passedParams;
+    oldSlides.current = slides;
+    if (changedParams.length && swiperRef.current && !swiperRef.current.destroyed) {
+      updateSwiper({
+        swiper: swiperRef.current,
+        slides,
+        passedParams,
+        changedParams,
+        nextEl: nextElRef.current,
+        prevEl: prevElRef.current,
+        scrollbarEl: scrollbarElRef.current,
+        paginationEl: paginationElRef.current
+      });
+    }
+    return () => {
+      detachEvents();
+    };
+  });
+
+  // update on virtual update
+  useIsomorphicLayoutEffect(() => {
+    updateOnVirtualData(swiperRef.current);
+  }, [virtualData]);
+
+  // bypass swiper instance to slides
+  function renderSlides() {
+    if (swiperParams.virtual) {
+      return renderVirtual(swiperRef.current, slides, virtualData);
+    }
+    return slides.map((child, index) => {
+      return /*#__PURE__*/React.cloneElement(child, {
+        swiper: swiperRef.current,
+        swiperSlideIndex: index
+      });
+    });
+  }
+  return /*#__PURE__*/React.createElement(Tag, _extends({
+    ref: swiperElRef,
+    className: uniqueClasses(`${containerClasses}${className ? ` ${className}` : ''}`)
+  }, restProps), /*#__PURE__*/React.createElement(SwiperContext.Provider, {
+    value: swiperRef.current
+  }, slots['container-start'], /*#__PURE__*/React.createElement(WrapperTag, {
+    className: wrapperClass(swiperParams.wrapperClass)
+  }, slots['wrapper-start'], renderSlides(), slots['wrapper-end']), needsNavigation(swiperParams) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: prevElRef,
+    className: "swiper-button-prev"
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: nextElRef,
+    className: "swiper-button-next"
+  })), needsScrollbar(swiperParams) && /*#__PURE__*/React.createElement("div", {
+    ref: scrollbarElRef,
+    className: "swiper-scrollbar"
+  }), needsPagination(swiperParams) && /*#__PURE__*/React.createElement("div", {
+    ref: paginationElRef,
+    className: "swiper-pagination"
+  }), slots['container-end']));
+});
+Swiper.displayName = 'Swiper';
+
+const SwiperSlide = /*#__PURE__*/forwardRef(function (_temp, externalRef) {
+  let {
+    tag: Tag = 'div',
+    children,
+    className = '',
+    swiper,
+    zoom,
+    lazy,
+    virtualIndex,
+    swiperSlideIndex,
+    ...rest
+  } = _temp === void 0 ? {} : _temp;
+  const slideElRef = useRef(null);
+  const [slideClasses, setSlideClasses] = useState('swiper-slide');
+  const [lazyLoaded, setLazyLoaded] = useState(false);
+  function updateClasses(_s, el, classNames) {
+    if (el === slideElRef.current) {
+      setSlideClasses(classNames);
+    }
+  }
+  useIsomorphicLayoutEffect(() => {
+    if (typeof swiperSlideIndex !== 'undefined') {
+      slideElRef.current.swiperSlideIndex = swiperSlideIndex;
+    }
+    if (externalRef) {
+      externalRef.current = slideElRef.current;
+    }
+    if (!slideElRef.current || !swiper) {
+      return;
+    }
+    if (swiper.destroyed) {
+      if (slideClasses !== 'swiper-slide') {
+        setSlideClasses('swiper-slide');
+      }
+      return;
+    }
+    swiper.on('_slideClass', updateClasses);
+    // eslint-disable-next-line
+    return () => {
+      if (!swiper) return;
+      swiper.off('_slideClass', updateClasses);
+    };
+  });
+  useIsomorphicLayoutEffect(() => {
+    if (swiper && slideElRef.current && !swiper.destroyed) {
+      setSlideClasses(swiper.getSlideClasses(slideElRef.current));
+    }
+  }, [swiper]);
+  const slideData = {
+    isActive: slideClasses.indexOf('swiper-slide-active') >= 0,
+    isVisible: slideClasses.indexOf('swiper-slide-visible') >= 0,
+    isPrev: slideClasses.indexOf('swiper-slide-prev') >= 0,
+    isNext: slideClasses.indexOf('swiper-slide-next') >= 0
+  };
+  const renderChildren = () => {
+    return typeof children === 'function' ? children(slideData) : children;
+  };
+  const onLoad = () => {
+    setLazyLoaded(true);
+  };
+  return /*#__PURE__*/React.createElement(Tag, _extends({
+    ref: slideElRef,
+    className: uniqueClasses(`${slideClasses}${className ? ` ${className}` : ''}`),
+    "data-swiper-slide-index": virtualIndex,
+    onLoad: onLoad
+  }, rest), zoom && /*#__PURE__*/React.createElement(SwiperSlideContext.Provider, {
+    value: slideData
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "swiper-zoom-container",
+    "data-swiper-zoom": typeof zoom === 'number' ? zoom : undefined
+  }, renderChildren(), lazy && !lazyLoaded && /*#__PURE__*/React.createElement("div", {
+    className: "swiper-lazy-preloader"
+  }))), !zoom && /*#__PURE__*/React.createElement(SwiperSlideContext.Provider, {
+    value: slideData
+  }, renderChildren(), lazy && !lazyLoaded && /*#__PURE__*/React.createElement("div", {
+    className: "swiper-lazy-preloader"
+  })));
+});
+SwiperSlide.displayName = 'SwiperSlide';
+
+export { Swiper, SwiperSlide };

package/dist/notifications/announcements/announcement-provider.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import { useCultureCode } from '../../intl/use-culture-code.js';
+import { useFetchAnnouncements } from '../../shared/api/bff/hooks/use-fetch-announcements.js';
+import { useLocalStorage } from '../../shared/hooks/use-local-storage.js';
+import { ConnectedAnnouncement } from './connected-announcement.js';
+import styles from './announcement-provider.module.css.js';
+
+function AnnouncementProvider() {
+    const cultureCode = useCultureCode();
+    const nodeRef = useRef(null);
+    const { data: announcements, error } = useFetchAnnouncements({
+        cultureCode,
+    });
+    useEffect(() => {
+        if (!error)
+            return;
+        console.error(error);
+    }, [error]);
+    const [dismissedIds, setDismissedIds] = useLocalStorage('dismissedAnnouncementIds', []);
+    const filteredAnnouncements = announcements?.filter(({ id }) => !dismissedIds.includes(id));
+    return (jsx(TransitionGroup, { className: styles['announcement-provider'], children: filteredAnnouncements?.map(announcement => (jsx(CSSTransition, { classNames: {
+                enter: styles['announcement-enter'],
+                enterActive: styles['announcement-enter-active'],
+                exit: styles['announcement-exit'],
+                exitActive: styles['announcement-exit-active'],
+            }, nodeRef: nodeRef, timeout: 300, children: jsx(ConnectedAnnouncement, { announcement: announcement, onDismiss: id => setDismissedIds(dismissedIds => [...dismissedIds, id]) }) }, announcement.id))) }));
+}
+
+export { AnnouncementProvider };

package/dist/notifications/announcements/announcement-provider.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"announcement-provider":"announcement-provider-module-sVIKY","announcement-enter":"announcement-provider-module-ksjgO","announcement-enter-active":"announcement-provider-module-k0zd-","announcement-exit":"announcement-provider-module-w2N0B","announcement-exit-active":"announcement-provider-module-4lfx2"};
+
+export { styles as default };

package/dist/notifications/announcements/announcement.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { IconButton } from '../../buttons/icon-button/icon-button.js';
+import { GlyphsArrowSemiBoldRightIcon } from '../../icons/glyph/glyphs-arrow-semibold-right-icon.js';
+import { SolidAttentionIcon } from '../../icons/solid/solid-attention-icon.js';
+import { SolidEventIcon } from '../../icons/solid/solid-event-icon.js';
+import { SolidInformationIcon } from '../../icons/solid/solid-information-icon.js';
+import { SolidNewsIcon } from '../../icons/solid/solid-news-icon.js';
+import { SolidNoticeIcon } from '../../icons/solid/solid-notice-icon.js';
+import { SolidSaleIcon } from '../../icons/solid/solid-sale-icon.js';
+import { SolidTagIcon } from '../../icons/solid/solid-tag-icon.js';
+import { StrokeCloseboxIcon } from '../../icons/stroke/stroke-closebox-icon.js';
+import { RouteLink } from '../../shared/routing/route-link.js';
+import styles from './announcement.module.css.js';
+
+const iconMap = {
+    critical: jsx(SolidAttentionIcon, {}),
+    event: jsx(SolidEventIcon, {}),
+    informative: jsx(SolidInformationIcon, {}),
+    new_product_introduction: jsx(SolidTagIcon, {}),
+    news: jsx(SolidNewsIcon, {}),
+    notice: jsx(SolidNoticeIcon, {}),
+    sales: jsx(SolidSaleIcon, {}),
+};
+function Announcement({ announcement: { href, id, subType, text, title, type }, onDismiss, }) {
+    return (jsxs(RouteLink, { className: clsx(styles.announcement, styles[type], styles[subType]), href: href, children: [jsxs("div", { className: styles.wrapper, children: [jsx("div", { className: styles.icon, children: iconMap[subType] }), jsxs("div", { className: styles.content, children: [jsx("h2", { className: styles.title, children: title }), jsxs("p", { className: styles.text, children: [text, jsx(GlyphsArrowSemiBoldRightIcon, {})] })] })] }), jsx("div", { className: styles.close, children: jsx(IconButton, { color: "current-color", onClick: () => onDismiss?.(id), children: jsx(StrokeCloseboxIcon, {}) }) })] }));
+}
+
+export { Announcement };

package/dist/notifications/announcements/announcement.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"announcement":"announcement-module-Xi0L5","wrapper":"announcement-module-4XVjD","icon":"announcement-module-lxmA2","content":"announcement-module-1Jn7y","title":"announcement-module-8k2rK","text":"announcement-module-yXGsN","close":"announcement-module-gZ9ae","informative":"announcement-module-0LTWL","notice":"announcement-module-Ga3lN","critical":"announcement-module-S3nSW","promo":"announcement-module-E6DqW"};
+
+export { styles as default };

package/dist/notifications/announcements/connected-announcement.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState, useCallback, useEffect } from 'react';
+import { TIME } from '../../shared/utils/time.js';
+import { Announcement } from './announcement.js';
+
+const now = () => new Date();
+function ConnectedAnnouncement({ announcement: { endDate, startDate, ...announcement }, onDismiss, }) {
+    const [isVisible, setIsVisible] = useState((!startDate || startDate <= now()) && (!endDate || endDate > now()));
+    const getIsVisible = useCallback(() => isVisible, [isVisible]);
+    useEffect(() => {
+        if (endDate && now() >= endDate)
+            return;
+        const intervalId = setInterval(() => {
+            const isStillVisible = (!startDate || startDate <= now()) && (!endDate || endDate > now());
+            if (getIsVisible() && !isStillVisible)
+                clearInterval(intervalId);
+            setIsVisible(isStillVisible);
+        }, 1 * TIME.MINUTE);
+        return () => clearInterval(intervalId);
+    }, [endDate, getIsVisible, startDate]);
+    if (!isVisible)
+        return null;
+    return jsx(Announcement, { announcement: announcement, onDismiss: onDismiss });
+}
+
+export { ConnectedAnnouncement, now };

package/dist/observers/intersection-observer.js

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import { useIntersectionObserver } from '../shared/hooks/use-intersection-observer.js';
+
+function IntersectionObserverComponent({ children, isDisabled, onIntersectingChange, }) {
+    const topRef = useRef(null);
+    const bottomRef = useRef(null);
+    useIntersectionObserver({
+        isDisabled,
+        observables: [{ ref: topRef }, { ref: bottomRef }],
+        onIntersectingChange,
+    });
+    if (isDisabled)
+        return children;
+    return (jsxs("div", { children: [jsx("div", { ref: topRef }), children, jsx("div", { ref: bottomRef })] }));
+}
+
+export { IntersectionObserverComponent };

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

@@ -0,0 +1,114 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ConnectedOrderLineCard } from '../../cards/orderline-card/connected-orderline-card.js';
+import { CartTotals } from '../../cart-totals/cart-totals.js';
+import { CartTotalsSummary } from '../../cart-totals/cart-totals-summary.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 { ErrorPage } from '../error-page/error-page.js';
+import { CheckoutPageLayout } from '../layouts/checkout-page-layout/checkout-page-layout.js';
+import { LoadingPage } from '../loading-page/loading-page.js';
+import { Page } from '../page/page.js';
+import { NoResults } from '../product-listing-page/no-results/no-results.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 { useSaveCartForLater } from '../../shared/api/storefront/hooks/cart/use-save-cart-for-later.js';
+import { RouteButton } from '../../shared/routing/route-button.js';
+import { useToast } from '../../toast/use-toast.js';
+import { useFetchCurrentCartLinesWithAtp } from '../../shared/api/storefront/hooks/cart/use-fetch-current-cart-lines-with-atp.js';
+import { useFetchCurrentCartWithAtp } from '../../shared/api/storefront/hooks/cart/use-fetch-current-cart-with-atp.js';
+
+function EmptyCart() {
+    const t = useFormattedMessage();
+    return (jsx(NoResults, { content: jsxs(Fragment, { children: [jsx(FormattedMessage, { id: "There are no products in your shopping cart." }), jsx("br", {}), jsx(FormattedMessage, { id: "Click the button below to continue shopping." })] }), title: t('Your shopping cart is still empty') }));
+}
+function CartContent({ cartLines }) {
+    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({
+                body: jsx(FormattedMessage, { id: "Unable to empty your cart." }),
+                isUserDismissable: false,
+                messageType: 'danger',
+            });
+        },
+        onSuccess: () => {
+            addToast({
+                body: jsx(FormattedMessage, { id: "Your cart has been emptied." }),
+                isUserDismissable: false,
+                messageType: 'success',
+            });
+        },
+    });
+    const deleteCartLine = useDeleteCartLineById({
+        onError: () => {
+            addToast({
+                body: (jsx(FormattedMessage, { id: "Unable to remove the product from your cart." })),
+                isUserDismissable: false,
+                messageType: 'danger',
+            });
+        },
+        onSuccess: () => {
+            addToast({
+                body: (jsx(FormattedMessage, { id: "The product has been removed from your cart." })),
+                isUserDismissable: false,
+                messageType: 'success',
+            });
+        },
+    });
+    const isAuthenticated = useIsAuthenticated();
+    if (!currentCart)
+        return null;
+    return (jsx(CheckoutPageLayout, { actions: {
+            primary: (jsx(RouteButton, { withArrow: true, href: "/CheckoutShipping", children: jsx(FormattedMessage, { id: "Continue shopping" }) })),
+            secondary: (jsx(RouteButton, { color: "secondary", href: isAuthenticated ? undefined : '/signin', onClick: () => {
+                    if (!isAuthenticated)
+                        return;
+                    saveCartForLater.mutate({ cart: currentCart });
+                }, variant: "outline", children: jsx(FormattedMessage, { id: "Save order" }) })),
+        }, mobileSummary: jsx(CartTotalsSummary, { totalAmount: currentCart.orderGrandTotalDisplay }), overview: jsx(CartTotals, { shippingCost: currentCart.shippingAndHandlingDisplay, subtotal: currentCart.orderSubTotalDisplay, tax: currentCart.totalTaxDisplay, total: currentCart.orderGrandTotalDisplay, vatPercentage: cartLines[0]?.pricing?.vatRate || 0 }), children: jsx(OrderLineList, { onRemoveAll: () => deleteCurrentCart.mutate(), children: cartLines.map(cartLine => (jsx(ConnectedOrderLineCard, { deliveryDate: cartLine.atp?.date, href: cartLine.productUri, image: {
+                    image: {
+                        '1': cartLine.smallImagePath,
+                        '2': cartLine.smallImagePath,
+                        '3': cartLine.smallImagePath,
+                        altText: cartLine.altText,
+                    },
+                    title: cartLine.altText,
+                }, onRemove: () => deleteCartLine.mutate({ cartLineId: cartLine.id }), orderLineId: cartLine.id, price: {
+                    originalTotalPrice: cartLine.pricing?.extendedUnitNetPrice || 0,
+                    pricePerUnit: cartLine.pricing?.unitNetPrice || 0,
+                    totalPrice: cartLine.pricing?.extendedUnitNetPrice || 0,
+                }, productId: cartLine.productId || '', readonly: false, sku: cartLine.erpNumber || '', tags: [], title: cartLine.productName }, cartLine.id))) }) }));
+}
+function CartPage() {
+    const t = useFormattedMessage();
+    const { data: cartLines, error, isLoading, } = useFetchCurrentCartLinesWithAtp();
+    if (error)
+        return jsx(ErrorPage, { error: error });
+    if (isLoading)
+        return jsx(LoadingPage, {});
+    return (jsx(Page, { breadCrumb: [
+            { href: '/', label: 'home' },
+            { href: '/cart', label: t('Cart') },
+        ], title: t('Cart'), children: cartLines?.length ? (jsx(CartContent, { cartLines: cartLines })) : (jsx(EmptyCart, {})) }));
+}
+
+export { CartPage };

package/dist/pages/error-page/error-page.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import { isRequestError } from '../../shared/fetch/request.js';
+import { environment } from '../../shared/utils/environment.js';
+import { Heading } from '../../typography/heading/heading.js';
+import { Page } from '../page/page.js';
+
+function ErrorPage({ error }) {
+    useEffect(() => {
+        setTimeout(() => {
+            if (!isRequestError(error))
+                throw error;
+        }, 0);
+    }, [error]);
+    return (jsx(Page, { breadCrumb: [
+            { href: '/', label: 'Home' },
+            { href: '/', label: 'Error' },
+        ], title: "Something went wrong", children: environment !== 'production' && (jsxs(Fragment, { children: [jsx(Heading, { size: "l", children: isRequestError(error) ? (jsxs(Fragment, { children: [error.status, " - ", error.statusText || 'Unknown error'] })) : (jsx(Fragment, { children: error.message })) }), isRequestError(error) && (jsxs(Fragment, { children: [jsx(Heading, { size: "xs", children: "Error details" }), jsx(Heading, { size: "xxs", children: "Body" }), jsx("pre", { children: JSON.stringify(error.body, null, 2) }), jsx(Heading, { size: "xxs", children: "Options" }), jsx("pre", { children: JSON.stringify(error.options, null, 2) })] }))] })) }));
+}
+
+export { ErrorPage };