@sonic-equipment/ui 126.0.0 → 128.0.0

package/dist/index.js

@@ -65,6 +65,8 @@ export { AdyenPayment } from './checkout/adyen-payment.js';
 export { parseAmount } from './checkout/parse-amount.js';
 export { Payment } from './checkout/payment.js';
 export { PaymentDetails } from './checkout/payment-details.js';
+export { useGetAdyenRedirectResult } from './checkout/use-get-adyen-redirect-result.js';
+export { useHasReturnedFromAdyen } from './checkout/use-has-returned-from-adyen.js';
 export { Accordion } from './collapsables/accordion/accordion.js';
 export { AccordionItem } from './collapsables/accordion/accordion-item.js';
 export { ShowAll } from './collapsables/show-all/show-all.js';
@@ -143,31 +145,37 @@ export { Announcement } from './notifications/announcements/announcement.js';
 export { AnnouncementProvider } from './notifications/announcements/announcement-provider.js';
 export { ConnectedAnnouncement, now } from './notifications/announcements/connected-announcement.js';
 export { IntersectionObserverComponent } from './observers/intersection-observer.js';
-export { CartPage } from './pages/cart-page/cart-page.js';
+export { CartPage } from './pages/checkout/cart-page/cart-page.js';
+export { CheckoutPageLayout } from './pages/checkout/layouts/checkout-page-layout/checkout-page-layout.js';
+export { CheckoutPageSection } from './pages/checkout/layouts/checkout-page-layout/components/checkout-page-section.js';
+export { CheckoutPageSectionContent } from './pages/checkout/layouts/checkout-page-layout/components/checkout-page-section-content.js';
+export { CheckoutPageSectionHeader } from './pages/checkout/layouts/checkout-page-layout/components/checkout-page-section-header.js';
+export { CheckoutPageSectionLink } from './pages/checkout/layouts/checkout-page-layout/components/checkout-page-section-link.js';
+export { PaymentPage } from './pages/checkout/payment-page/payment-page.js';
+export { EDIT_ADDRESS_FORM_ID, EditAddresses } from './pages/checkout/shipping-page/components/edit-address.js';
+export { ReadOnlyAddresses } from './pages/checkout/shipping-page/components/readonly-address.js';
+export { ShippingPage } from './pages/checkout/shipping-page/shipping-page.js';
+export { PageContainer } from './pages/components/page-container/page-container.js';
+export { PageMetaData } from './pages/components/page-meta-data/page-meta-data.js';
+export { Page } from './pages/components/page/page.js';
 export { ErrorPage } from './pages/error-page/error-page.js';
-export { CheckoutPageLayout } from './pages/layouts/checkout-page-layout/checkout-page-layout.js';
-export { ProductDetailsPageLayout } from './pages/layouts/product-details-page-layout/product-details-page-layout.js';
 export { LoadingPage } from './pages/loading-page/loading-page.js';
-export { PageContainer } from './pages/page-container/page-container.js';
-export { Page } from './pages/page/page.js';
-export { ProductDetailImages } from './pages/product-details-page/components/product-details-images/product-detail-images.js';
-export { ProductDetailsPanel } from './pages/product-details-page/components/product-details-panel/product-details-panel.js';
-export { ProductDetailsRecentlyViewed } from './pages/product-details-page/components/product-details-recently-viewed/product-details-recently-viewed.js';
-export { ProductDetails } from './pages/product-details-page/product-details.js';
-export { ProductDetailsPage } from './pages/product-details-page/product-details-page.js';
-export { NoResults } from './pages/product-listing-page/no-results/no-results.js';
-export { ProductListing } from './pages/product-listing-page/product-listing.js';
-export { ProductListingPage } from './pages/product-listing-page/product-listing-page.js';
-export { ProductListingPageCategoryCarousel } from './pages/product-listing-page/product-listing-page-category-carousel/product-listing-page-category-carousel.js';
-export { ProductListingPageContext } from './pages/product-listing-page/product-listing-page-provider/product-listing-page-context.js';
-export { ProductListingPageProvider, useProductListingPageProvider } from './pages/product-listing-page/product-listing-page-provider/product-listing-page-provider.js';
-export { ProductListingProductOverview } from './pages/product-listing-page/product-listing-product-overview/product-listing-product-overview.js';
-export { SearchResultProductOverview } from './pages/search-result-page/search-result-product-overview/search-result-product-overview.js';
-export { SearchResultsPage } from './pages/search-result-page/search-results-page.js';
-export { SearchResultsPageCategoryCarousel } from './pages/search-result-page/search-results-page-category-carousel/search-results-page-category-carousel.js';
-export { EDIT_ADDRESS_FORM_ID, EditAddresses } from './pages/shipping-page/components/edit-address.js';
-export { ReadOnlyAddresses } from './pages/shipping-page/components/readonly-address.js';
-export { ShippingPage } from './pages/shipping-page/shipping-page.js';
+export { ProductDetailsPageLayout } from './pages/product/layouts/product-details-page-layout/product-details-page-layout.js';
+export { ProductDetailImages } from './pages/product/product-details-page/components/product-details-images/product-detail-images.js';
+export { ProductDetailsPanel } from './pages/product/product-details-page/components/product-details-panel/product-details-panel.js';
+export { ProductDetailsRecentlyViewed } from './pages/product/product-details-page/components/product-details-recently-viewed/product-details-recently-viewed.js';
+export { ProductDetails } from './pages/product/product-details-page/product-details.js';
+export { ProductDetailsPage } from './pages/product/product-details-page/product-details-page.js';
+export { NoResults } from './pages/product/product-listing-page/no-results/no-results.js';
+export { ProductListing } from './pages/product/product-listing-page/product-listing.js';
+export { ProductListingPage } from './pages/product/product-listing-page/product-listing-page.js';
+export { ProductListingPageCategoryCarousel } from './pages/product/product-listing-page/product-listing-page-category-carousel/product-listing-page-category-carousel.js';
+export { ProductListingPageContext } from './pages/product/product-listing-page/product-listing-page-provider/product-listing-page-context.js';
+export { ProductListingPageProvider, useProductListingPageProvider } from './pages/product/product-listing-page/product-listing-page-provider/product-listing-page-provider.js';
+export { ProductListingProductOverview } from './pages/product/product-listing-page/product-listing-product-overview/product-listing-product-overview.js';
+export { SearchResultProductOverview } from './pages/product/search-result-page/search-result-product-overview/search-result-product-overview.js';
+export { SearchResultsPage } from './pages/product/search-result-page/search-results-page.js';
+export { SearchResultsPageCategoryCarousel } from './pages/product/search-result-page/search-results-page-category-carousel/search-results-page-category-carousel.js';
 export { PromoBanner } from './promos/promo-banner/promo-banner.js';
 export { PromoBanners } from './promos/promo-banners/promo-banners.js';
 export { PromoCard } from './promos/promo-card/promo-card.js';
@@ -200,6 +208,8 @@ export { usePatchCartLineById } from './shared/api/storefront/hooks/cart/use-pat
 export { usePlaceOrder } from './shared/api/storefront/hooks/cart/use-place-order.js';
 export { useSaveCartForLater } from './shared/api/storefront/hooks/cart/use-save-cart-for-later.js';
 export { useFetchBillToAddresses } from './shared/api/storefront/hooks/customer/use-fetch-bill-to-addresses.js';
+export { useFetchFulfillmentMethodsByCustomerId } from './shared/api/storefront/hooks/customer/use-fetch-fulfillment-methods-by-customer-id.js';
+export { useFetchFulfillmentMethodsForCurrentCart } from './shared/api/storefront/hooks/customer/use-fetch-fulfillment-methods-for-current-cart.js';
 export { useFetchShipToAddresses } from './shared/api/storefront/hooks/customer/use-fetch-ship-to-addresses.js';
 export { usePatchBillToAddress } from './shared/api/storefront/hooks/customer/use-patch-bill-to-address.js';
 export { useCreateAdyenSession } from './shared/api/storefront/hooks/payment/use-create-adyen-session.js';
@@ -218,8 +228,9 @@ export { useDeleteWishListItemFromWishList } from './shared/api/storefront/hooks
 export { useFetchAllWishListsItems } from './shared/api/storefront/hooks/wishlist/use-fetch-all-wishlists-items.js';
 export { useFetchWishLists } from './shared/api/storefront/hooks/wishlist/use-fetch-wishlists.js';
 export { createGuestAccount, createSession, fetchSession, patchSession, signIn, signOut } from './shared/api/storefront/services/authentication-service.js';
-export { addProductToCurrentCart, convertToMinorUnits, deleteCartLineById, deleteCurrentCart, fetchCurrentCart, fetchCurrentCartLines, fetchCurrentCartProductAtp, fetchCurrentCartPromotions, fetchCurrentCheckoutAtp, getAdyenPaymentDetails, patchCart, patchCartLineById, placeOrder, postAdyenPayment, saveCartForLater } from './shared/api/storefront/services/cart-service.js';
-export { fetchBillToAddresses, fetchShipToAddresses, patchBillToAddress } from './shared/api/storefront/services/customer-service.js';
+export { addProductToCurrentCart, convertToMinorUnits, deleteCartLineById, deleteCurrentCart, fetchCart, fetchCurrentCart, fetchCurrentCartLines, fetchCurrentCartProductAtp, fetchCurrentCartPromotions, fetchCurrentCheckoutAtp, getAdyenPaymentDetails, patchCart, patchCartLineById, placeOrder, postAdyenPayment, saveCartForLater } from './shared/api/storefront/services/cart-service.js';
+export { fetchBillToAddresses, fetchFulfillmentMethods, fetchShipToAddresses, patchBillToAddress } from './shared/api/storefront/services/customer-service.js';
+export { validateVATNumber } from './shared/api/storefront/services/finance-service.js';
 export { createAdyenSession, fetchAdyenConfig } from './shared/api/storefront/services/payment-service.js';
 export { fetchTranslations } from './shared/api/storefront/services/translation-service.js';
 export { fetchCountries, fetchCountriesLanguages, fetchCountriesWithLanguages, fetchSettings, updateLocale } from './shared/api/storefront/services/website-service.js';
@@ -232,12 +243,14 @@ export { isGAEvent } from './shared/ga/types.js';
 export { useDataLayer } from './shared/ga/use-data-layer.js';
 export { useBreakpoint } from './shared/hooks/use-breakpoint.js';
 export { useCookie } from './shared/hooks/use-cookie.js';
+export { useCSSLink } from './shared/hooks/use-css-link.js';
 export { useDebouncedCallback } from './shared/hooks/use-debounced-callback.js';
 export { useDisclosure } from './shared/hooks/use-disclosure.js';
 export { useEnableMobileZoom } from './shared/hooks/use-enable-mobile-zoom.js';
 export { useIntersectionObserver } from './shared/hooks/use-intersection-observer.js';
 export { useIsBreakpoint } from './shared/hooks/use-is-breakpoint.js';
 export { useResizeObserver } from './shared/hooks/use-resize-observer.js';
+export { useScript } from './shared/hooks/use-script.js';
 export { useScrollLock } from './shared/hooks/use-scroll-lock.js';
 export { scrollToTop, useScrollTo } from './shared/hooks/use-scroll-to.js';
 export { useSessionStorage } from './shared/hooks/use-session-storage.js';
@@ -256,7 +269,7 @@ export { ReactQueryContainer } from './shared/providers/react-query-container.js
 export { RouteButton } from './shared/routing/route-button.js';
 export { RouteIconButton } from './shared/routing/route-icon-button.js';
 export { RouteLink } from './shared/routing/route-link.js';
-export { RouteProvider, useLocale, useNavigate, useOnNavigate } from './shared/routing/route-provider.js';
+export { RouteProvider, useBasePath, useNavigate, useOnNavigate } from './shared/routing/route-provider.js';
 export { withRouting } from './shared/routing/with-routing.js';
 export { ensureArray } from './shared/utils/array.js';
 export { breakpoints, getCurrentBreakpoints } from './shared/utils/breakpoints.js';
@@ -266,8 +279,9 @@ export { EventEmitter } from './shared/utils/event-emitter.js';
 export { clone, deepMerge, isPlainObject, default as main, merge } from './shared/utils/merge.js';
 export { currencies, formatPrice, getCurrencyByCountryCode } from './shared/utils/price.js';
 export { random, randomInt } from './shared/utils/random.js';
-export { capitalizeFirstLetter } from './shared/utils/string.js';
+export { camelCase, capitalizeFirstLetter } from './shared/utils/string.js';
 export { TIME } from './shared/utils/time.js';
+export { has, hasNo } from './shared/utils/types.js';
 export { createUUID } from './shared/utils/uuid.js';
 export { wait } from './shared/utils/wait.js';
 export { Sidebar } from './sidebar/sidebar.js';

package/dist/intl/missing-translation-provider.js

@@ -13,9 +13,16 @@ function MissingTranslationProvider({ children, }) {
         const message = intlProps.formattedMessage(id, options);
         if (!missing && !showTranslations)
             return message;
-        if (missing && !translations?.[id])
+        if (missing &&
+            !translations?.[id.toLocaleLowerCase()] &&
+            !options?.optional) {
             return `❗️${message}❗️`;
-        return showTranslations ? `⭐️${message}⭐️` : message;
+        }
+        return showTranslations
+            ? options?.optional
+                ? `❓${message}❓`
+                : `⭐️${message}⭐️`
+            : message;
     }, [intlProps, missing, showTranslations, translations]);
     if (!missing && !showTranslations)
         return jsx(Fragment, { children: children });

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 to list' | 'Add order notes' | 'Address' | 'Amount: {0}' | '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?' | 'Attention' | 'Billing 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 new list' | 'Delivery expected in {0} {1}' | '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' | 'Features' | 'First name' | 'Fulfillment method' | 'Hide filters' | 'Home' | 'Incl. VAT' | 'Includes' | 'Language' | 'Last name' | 'List name already exists' | 'New list name' | 'Order number' | 'PO Number' | 'Phone' | 'Please Sign In' | 'Popular searches' | 'Postal Code' | 'Print' | 'Product Features' | 'Product' | 'Products' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Remove all' | 'Save order' | 'Save' | 'Saved cart for later.' | 'Searching again using more general terms' | 'See all results' | 'Select a list' | 'Share your favorite list with others' | 'Shipping and handling' | 'Shop more efficiently and quicker with a favorites list' | 'Shipping details' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'Sorry, there are no products found' | 'Sorry, we could not find matches for' | 'Sort by' | 'Specifications' | 'Submit' | 'Subtotal' | 'Suggestions' | '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.' | 'Unable to add the product to your cart.' | 'Unable to update the product in your cart.' | 'Unable to remove the product from your cart.' | 'Unable to empty your cart.' | 'Unable to save cart for later.' | 'Use billing address' | 'Try another search' | 'Total' | 'Total amount is' | 'Total' | 'Try another search' | 'Unable to add the product to your cart.' | 'Unable to empty your cart.' | 'Unable to remove the product from your cart.' | 'Unable to save cart for later.' | 'Unable to update the product in your cart.' | 'Use fewer keywords' | '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' | 'article' | 'articles' | 'create account' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'of' | 'pc' | 'Shipping address' | 'sign in' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'tag.limited' | 'tag.new' | 'validation.badInput' | 'validation.customError' | 'validation.invalid' | 'validation.patternMismatch' | 'validation.rangeOverflow' | 'validation.rangeUnderflow' | 'validation.stepMismatch' | 'validation.tooLong' | 'validation.tooShort' | 'validation.typeMismatch' | 'validation.valid' | 'validation.valueMissing';
+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}' | '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' | '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' | '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/loading/loading-overlay.js

@@ -3,7 +3,7 @@ import { ProgressCircle } from './progress-circle.js';
 import styles from './loading-overlay.module.css.js';
 
 function LoadingOverlay() {
-    return (jsx("div", { className: styles['loading-overlay'], children: jsx(ProgressCircle, {}) }));
+    return (jsx("div", { className: styles['loading-overlay'], children: jsx(ProgressCircle, { variant: "gray" }) }));
 }
 
 export { LoadingOverlay };

package/dist/pages/{cart-page → checkout/cart-page}/cart-page.js

@@ -1,23 +1,23 @@
 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 { 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 { 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';
+import { Page } from '../../components/page/page.js';
+import { ErrorPage } from '../../error-page/error-page.js';
+import { LoadingPage } from '../../loading-page/loading-page.js';
+import { NoResults } from '../../product/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();
@@ -93,11 +93,11 @@ function CartContent({ cartLines }) {
                         altText: cartLine.altText,
                     },
                     title: cartLine.altText,
-                }, onRemove: () => deleteCartLine.mutate({ cartLineId: cartLine.id }), orderLineId: cartLine.id, price: {
+                }, isReadonly: false, 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))) }) }));
+                }, productId: cartLine.productId || '', sku: cartLine.erpNumber || '', tags: [], title: cartLine.productName }, cartLine.id))) }) }));
 }
 function CartPage() {
     const t = useFormattedMessage();

package/dist/pages/{layouts → checkout/layouts}/checkout-page-layout/checkout-page-layout.js

@@ -1,9 +1,9 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useRef, useMemo } from 'react';
 import clsx from 'clsx';
-import { useIntersectionObserver } from '../../../shared/hooks/use-intersection-observer.js';
-import { useIsBreakpoint } from '../../../shared/hooks/use-is-breakpoint.js';
-import { useWatchCssProperty } from '../../../shared/hooks/use-watch-css-property.js';
+import { useIntersectionObserver } from '../../../../shared/hooks/use-intersection-observer.js';
+import { useIsBreakpoint } from '../../../../shared/hooks/use-is-breakpoint.js';
+import { useWatchCssProperty } from '../../../../shared/hooks/use-watch-css-property.js';
 import styles from './checkout-page-layout.module.css.js';
 
 function CheckoutPageLayout({ actions, children, mobileSummary, overview, }) {

package/dist/pages/checkout/layouts/checkout-page-layout/checkout-page-layout.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"checkout-page-layout":"checkout-page-layout-module-lULV3","wrapper":"checkout-page-layout-module-cUEmU","sticky-side":"checkout-page-layout-module-B3M80","actions":"checkout-page-layout-module-8UNBq","top-actions":"checkout-page-layout-module-430Iq","top-actions-sticky":"checkout-page-layout-module-wGAXb"};
+
+export { styles as default };

package/dist/pages/checkout/layouts/checkout-page-layout/components/checkout-page-section-content.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+interface CheckoutPageSectionContentProps {
+    children: ReactNode;
+    stretch?: boolean;
+}
+export declare function CheckoutPageSectionContent({ children, stretch, }: CheckoutPageSectionContentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/pages/checkout/layouts/checkout-page-layout/components/checkout-page-section-content.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import styles from './checkout-page-section.module.css.js';
+
+function CheckoutPageSectionContent({ children, stretch, }) {
+    return (jsx("div", { className: clsx(styles['section-content'], stretch && styles.stretch), children: children }));
+}
+
+export { CheckoutPageSectionContent };

package/dist/pages/checkout/layouts/checkout-page-layout/components/checkout-page-section-header.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { HeadingProps } from '../../../../../typography/heading/heading';
+export interface CheckoutPageSectionHeaderProps {
+    size?: HeadingProps['size'];
+    tag?: HeadingProps['tag'];
+    title: string | ReactNode;
+}
+export declare function CheckoutPageSectionHeader({ size, tag, title, }: CheckoutPageSectionHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/pages/checkout/layouts/checkout-page-layout/components/checkout-page-section-header.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { Heading } from '../../../../../typography/heading/heading.js';
+import styles from './checkout-page-section.module.css.js';
+
+function CheckoutPageSectionHeader({ size = 'xs', tag = 'h2', title, }) {
+    return (jsx(Heading, { className: styles['section-header'], size: size, tag: tag, children: title }));
+}
+
+export { CheckoutPageSectionHeader };

package/dist/pages/checkout/layouts/checkout-page-layout/components/checkout-page-section-link.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export declare function CheckoutPageSectionLink({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/pages/checkout/layouts/checkout-page-layout/components/checkout-page-section-link.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import styles from './checkout-page-section.module.css.js';
+
+function CheckoutPageSectionLink({ children }) {
+    return jsx("div", { className: styles['section-link'], children: children });
+}
+
+export { CheckoutPageSectionLink };

package/dist/pages/checkout/layouts/checkout-page-layout/components/checkout-page-section.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export interface CheckoutPageSectionProps {
+    children: ReactNode;
+    hasBorder?: boolean;
+    title: string | ReactNode;
+}
+export declare function CheckoutPageSection({ children, hasBorder, title, }: CheckoutPageSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/pages/checkout/layouts/checkout-page-layout/components/checkout-page-section.js

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { CheckoutPageSectionHeader } from './checkout-page-section-header.js';
+import styles from './checkout-page-section.module.css.js';
+
+function CheckoutPageSection({ children, hasBorder = true, title, }) {
+    return (jsxs("section", { className: clsx(styles.section, { [styles['has-border']]: hasBorder }), children: [title && jsx(CheckoutPageSectionHeader, { title: title }), children] }));
+}
+
+export { CheckoutPageSection };

package/dist/pages/checkout/layouts/checkout-page-layout/components/checkout-page-section.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"section":"checkout-page-section-module-zyovs","has-border":"checkout-page-section-module-pe5iL","section-header":"checkout-page-section-module-lcEdH","section-content":"checkout-page-section-module-ZkhMj","stretch":"checkout-page-section-module-24DRv","section-link":"checkout-page-section-module-l508k"};
+
+export { styles as default };

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

@@ -0,0 +1 @@
+export declare function PaymentPage(): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useCallback, useEffect } from 'react';
+import { Button } from '../../../buttons/button/button.js';
+import { OrderLineCard } from '../../../cards/orderline-card/orderline-card.js';
+import { CartTotals } from '../../../cart-totals/cart-totals.js';
+import { CartTotalsSummary } from '../../../cart-totals/cart-totals-summary.js';
+import { Payment } from '../../../checkout/payment.js';
+import { useHasReturnedFromAdyen } from '../../../checkout/use-has-returned-from-adyen.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 { useIsAuthenticated } from '../../../shared/api/storefront/hooks/authentication/use-is-authenticated.js';
+import { useFetchCurrentCheckoutAtp } from '../../../shared/api/storefront/hooks/cart/use-fetch-current-cart-checkout-atp.js';
+import { useFetchCurrentCartWithAtp } from '../../../shared/api/storefront/hooks/cart/use-fetch-current-cart-with-atp.js';
+import { useFetchFulfillmentMethodsForCurrentCart } from '../../../shared/api/storefront/hooks/customer/use-fetch-fulfillment-methods-for-current-cart.js';
+import { useNavigate } from '../../../shared/routing/route-provider.js';
+import { hasNo } from '../../../shared/utils/types.js';
+import { Page } from '../../components/page/page.js';
+import { ErrorPage } from '../../error-page/error-page.js';
+import { LoadingPage } from '../../loading-page/loading-page.js';
+import { CheckoutPageLayout } from '../layouts/checkout-page-layout/checkout-page-layout.js';
+import { CheckoutPageSection } from '../layouts/checkout-page-layout/components/checkout-page-section.js';
+import { CheckoutPageSectionContent } from '../layouts/checkout-page-layout/components/checkout-page-section-content.js';
+
+const PAYMENT_FORM_ID = 'paymentForm';
+function PaymentPage() {
+    const hasReturnedFromAdyen = useHasReturnedFromAdyen();
+    const isAuthenticated = useIsAuthenticated();
+    const { data: cart, error, isLoading: isLoadingCart, } = useFetchCurrentCartWithAtp({
+        forceRecalculation: !hasReturnedFromAdyen,
+    });
+    const { data: atp, isLoading: isAtpLoading } = useFetchCurrentCheckoutAtp();
+    const { data: fulfillmentMethods, isLoading: isFulfillmentMethodsLoading } = useFetchFulfillmentMethodsForCurrentCart();
+    const isLoading = isLoadingCart || isAtpLoading || isFulfillmentMethodsLoading;
+    const t = useFormattedMessage();
+    const [isProcessing, setIsProcessing] = useState(false);
+    const [isValidating, setIsValidating] = useState(false);
+    const { isNavigating, navigate } = useNavigate();
+    const onPaymentComplete = useCallback(() => navigate('/CheckoutConfirmation'), [navigate]);
+    useEffect(() => {
+        if (isNavigating)
+            return;
+        if (isAuthenticated === undefined)
+            return;
+        if (!isAuthenticated)
+            return navigate('/signin?returnUrl=/CheckoutShipping');
+        if (hasNo(cart))
+            return;
+        if (hasNo(cart.cartLines) || cart.cartLines.length === 0)
+            return navigate('/cart');
+        if (hasNo(cart.billTo))
+            return navigate('/signin?returnUrl=/CheckoutShipping');
+        if (hasNo(cart.billTo.address1))
+            return navigate('/CheckoutShipping');
+    }, [cart, navigate, isAuthenticated, isNavigating]);
+    if (error)
+        return jsx(ErrorPage, { error: error });
+    if (isLoading || isNavigating)
+        return jsx(LoadingPage, {});
+    if (!isAuthenticated ||
+        hasNo(atp) ||
+        hasNo(cart) ||
+        hasNo(fulfillmentMethods) ||
+        hasNo(cart.cartLines) ||
+        cart.cartLines.length === 0 ||
+        hasNo(cart.billTo?.address1))
+        return null;
+    return (jsx(Page, { breadCrumb: [
+            { href: '/', label: t('Home') },
+            { 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, { 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, fulfillmentMethods: fulfillmentMethods, 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,
+                                        '2': cartLine.smallImagePath,
+                                        '3': cartLine.smallImagePath,
+                                        altText: cartLine.altText,
+                                    },
+                                    title: cartLine.altText,
+                                }, isReadonly: true, price: {
+                                    originalTotalPrice: cartLine.pricing?.extendedUnitNetPrice || 0,
+                                    pricePerUnit: cartLine.pricing?.unitNetPrice || 0,
+                                    totalPrice: cartLine.pricing?.extendedUnitNetPrice || 0,
+                                }, productId: cartLine.productId || '', quantity: cartLine.qtyOrdered || 1, sku: cartLine.erpNumber || '', tags: [], title: cartLine.productName }, cartLine.id))) }) }) })] }) }));
+}
+
+export { PaymentPage };

package/dist/pages/{shipping-page → checkout/shipping-page}/components/edit-address.d.ts

@@ -1,4 +1,4 @@
-import { CountryModel } from '../../../shared/api/storefront/model/storefront.model';
+import { CountryModel } from '../../../../shared/api/storefront/model/storefront.model';
 export declare const EDIT_ADDRESS_FORM_ID = "billToForm";
 interface Address {
     address1: string;

package/dist/pages/{shipping-page → checkout/shipping-page}/components/edit-address.js

@@ -1,14 +1,15 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useState, useMemo } from 'react';
+import { useState } from 'react';
 import { Form } from 'react-aria-components';
-import { CountrySelect } from '../../../country-selector/country-select/country-select.js';
-import { Checkbox } from '../../../forms/checkbox/checkbox.js';
-import { TextField } from '../../../forms/text-field/text-field.js';
-import { FormattedMessage } from '../../../intl/formatted-message.js';
-import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
-import { validatePhone, validateEmail } from '../../../shared/model/address.js';
-import { Tooltip } from '../../../tooltip/tooltip.js';
-import { Heading } from '../../../typography/heading/heading.js';
+import { CountrySelect } from '../../../../country-selector/country-select/country-select.js';
+import { Checkbox } from '../../../../forms/checkbox/checkbox.js';
+import { TextField } from '../../../../forms/text-field/text-field.js';
+import { FormattedMessage } from '../../../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import { validatePhone, validateEmail } from '../../../../shared/model/address.js';
+import { Tooltip } from '../../../../tooltip/tooltip.js';
+import { CheckoutPageSection } from '../../layouts/checkout-page-layout/components/checkout-page-section.js';
+import { CheckoutPageSectionContent } from '../../layouts/checkout-page-layout/components/checkout-page-section-content.js';
 import styles from './edit-address.module.css.js';
 
 const EDIT_ADDRESS_FORM_ID = 'billToForm';
@@ -16,8 +17,7 @@ function EditAddresses({ countries, isLoading, onSubmit, }) {
     const t = useFormattedMessage();
     const [companyName, setCompanyName] = useState('');
     const [lastName, setLastName] = useState('');
-    const lastNameKey = useMemo(() => `lastname-${Boolean(companyName)}`, [companyName]);
-    return (jsxs(Fragment, { children: [jsxs("section", { className: styles['form-container'], children: [jsx(Heading, { className: styles['form-header'], size: "xs", tag: "h2", children: jsx(FormattedMessage, { id: "Billing address" }) }), jsxs(Form, { className: styles.form, "data-test-selector": "billToAddressForm", id: EDIT_ADDRESS_FORM_ID, onSubmit: e => {
+    return (jsxs(Fragment, { children: [jsx(CheckoutPageSection, { title: jsx(FormattedMessage, { id: "Billing address" }), children: jsx(CheckoutPageSectionContent, { children: jsxs(Form, { className: styles.form, "data-test-selector": "billToAddressForm", id: EDIT_ADDRESS_FORM_ID, onSubmit: e => {
                             e.preventDefault();
                             const formData = new FormData(e.currentTarget);
                             const countryFormValue = formData.get('country')?.toString();
@@ -40,7 +40,7 @@ function EditAddresses({ countries, isLoading, onSubmit, }) {
                                 },
                                 notes: formData.get('notes')?.toString() || '',
                             });
-                        }, children: [jsx(TextField, { isDisabled: isLoading, label: t('First name'), name: "firstName", showLabel: true }), jsx(TextField, { isDisabled: isLoading, isRequired: !companyName, label: t('Last name'), minLength: 3, name: "lastName", onChange: setLastName, showLabel: true, value: lastName }, lastNameKey), jsx(TextField, { isDisabled: isLoading, label: t('Company name'), name: "companyName", onChange: setCompanyName, showLabel: true, value: companyName }), jsx(TextField, { isDisabled: isLoading, label: t('Attention'), name: "attention", showLabel: true }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, isDisabled: isLoading, label: `${t('Address')} 1`, maxLength: 30, minLength: 3, name: "address1", showLabel: true }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isDisabled: isLoading, label: `${t('Address')} 2`, maxLength: 30, minLength: 3, name: "address2", showLabel: true }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isDisabled: isLoading, label: `${t('Address')} 3`, maxLength: 30, minLength: 3, name: "address3", showLabel: true }) }), jsx(TextField, { isRequired: true, isDisabled: isLoading, label: t('Postal Code'), maxLength: 10, minLength: 4, name: "postalCode", showLabel: true }), jsx(TextField, { isRequired: true, isDisabled: isLoading, label: t('City'), maxLength: 30, minLength: 3, name: "city", showLabel: true }), jsx("div", { className: styles['span-2'], children: jsx(CountrySelect, { isRequired: true, countries: countries, name: "country" }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, isDisabled: isLoading, label: t('Phone'), name: "phone", showLabel: true, validate: value => {
+                        }, children: [jsx(TextField, { isDisabled: isLoading, label: t('First name'), name: "firstName", showLabel: true }), jsx(TextField, { isDisabled: isLoading, isRequired: !companyName, label: t('Last name'), minLength: 3, name: "lastName", onChange: setLastName, showLabel: true, value: lastName }, `lastname-${Boolean(companyName)}`), jsx(TextField, { isDisabled: isLoading, label: t('Company name'), name: "companyName", onChange: setCompanyName, showLabel: true, value: companyName }), jsx(TextField, { isDisabled: isLoading, label: t('Attention'), name: "attention", showLabel: true }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, isDisabled: isLoading, label: `${t('Address')} 1`, maxLength: 30, minLength: 3, name: "address1", showLabel: true }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isDisabled: isLoading, label: `${t('Address')} 2`, maxLength: 30, minLength: 3, name: "address2", showLabel: true }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isDisabled: isLoading, label: `${t('Address')} 3`, maxLength: 30, minLength: 3, name: "address3", showLabel: true }) }), jsx(TextField, { isRequired: true, isDisabled: isLoading, label: t('Postal Code'), maxLength: 10, minLength: 4, name: "postalCode", showLabel: true }), jsx(TextField, { isRequired: true, isDisabled: isLoading, label: t('City'), maxLength: 30, minLength: 3, name: "city", showLabel: true }), jsx("div", { className: styles['span-2'], children: jsx(CountrySelect, { isRequired: true, countries: countries, name: "country" }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, isDisabled: isLoading, label: t('Phone'), name: "phone", showLabel: true, validate: value => {
                                         if (!value)
                                             return value;
                                         return (validatePhone(value) || 'Vul een geldig telefoonnummer in');
@@ -48,7 +48,7 @@ function EditAddresses({ countries, isLoading, onSubmit, }) {
                                         if (!value)
                                             return value;
                                         return validateEmail(value) || 'Vul een geldig emailadres in';
-                                    } }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isDisabled: isLoading, isMultiline: true, label: t('Add order notes'), name: "notes", rows: 3, showLabel: true }) })] })] }), jsxs("section", { className: styles['form-container'], children: [jsx(Heading, { className: styles['form-header'], size: "xs", tag: "h2", children: jsx(FormattedMessage, { id: "Shipping address" }) }), jsxs("div", { className: styles['use-invoice-checkbox'], children: [jsx(Checkbox, { isDisabled: true, isSelected: true, children: jsx(FormattedMessage, { id: "Use billing address" }) }), jsx(Tooltip, { text: t('Changing your address is currently not possible. Please contact customer support to change your address.') })] })] })] }));
+                                    } }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isDisabled: isLoading, isMultiline: true, label: t('Add order notes'), name: "notes", rows: 3, showLabel: true }) })] }) }) }), jsx(CheckoutPageSection, { title: jsx(FormattedMessage, { id: "Shipping address" }), children: jsx(CheckoutPageSectionContent, { children: jsxs("div", { className: styles['use-invoice-checkbox'], children: [jsx(Checkbox, { isDisabled: true, isSelected: true, children: jsx(FormattedMessage, { id: "Use billing address" }) }), jsx(Tooltip, { text: t('Changing your address is currently not possible. Please contact customer support to change your address.') })] }) }) })] }));
 }
 
 export { EDIT_ADDRESS_FORM_ID, EditAddresses };

package/dist/pages/checkout/shipping-page/components/edit-address.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"form":"edit-address-module-oC1yA","span-2":"edit-address-module-7ANZQ","use-invoice-checkbox":"edit-address-module-QAPy-"};
+
+export { styles as default };

package/dist/pages/{shipping-page → checkout/shipping-page}/components/readonly-address.d.ts

@@ -1,4 +1,4 @@
-import { BillToModel, ShipToModel } from '../../../shared/api/storefront/model/storefront.model';
+import { BillToModel, ShipToModel } from '../../../../shared/api/storefront/model/storefront.model';
 export declare function ReadOnlyAddresses({ billTo, isLoading, notes, onSubmit, shipTo, }: {
     billTo: BillToModel | undefined | null;
     isLoading: boolean;

package/dist/pages/checkout/shipping-page/components/readonly-address.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Form } from 'react-aria-components';
+import { Address } from '../../../../address/address.js';
+import { Checkbox } from '../../../../forms/checkbox/checkbox.js';
+import { TextField } from '../../../../forms/text-field/text-field.js';
+import { FormattedMessage } from '../../../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import { RouteLink } from '../../../../shared/routing/route-link.js';
+import { CheckoutPageSection } from '../../layouts/checkout-page-layout/components/checkout-page-section.js';
+import { CheckoutPageSectionContent } from '../../layouts/checkout-page-layout/components/checkout-page-section-content.js';
+import { CheckoutPageSectionLink } from '../../layouts/checkout-page-layout/components/checkout-page-section-link.js';
+import { EDIT_ADDRESS_FORM_ID } from './edit-address.js';
+import styles from './readonly-address.module.css.js';
+
+const ACCOUNT_ADDRESSES_PATH = '/MyAccount/Addresses';
+function ReadOnlyAddresses({ billTo, isLoading, notes, onSubmit, shipTo, }) {
+    const t = useFormattedMessage();
+    return (jsxs(Form, { "data-test-selector": "billToAddressForm", id: EDIT_ADDRESS_FORM_ID, onSubmit: e => {
+            e.preventDefault();
+            const formData = new FormData(e.currentTarget);
+            onSubmit({
+                notes: formData.get('notes')?.toString() || '',
+            });
+        }, children: [jsxs(CheckoutPageSection, { title: jsx(FormattedMessage, { id: "Billing address" }), children: [jsx(CheckoutPageSectionLink, { children: jsxs(RouteLink, { color: "secondary", href: ACCOUNT_ADDRESSES_PATH, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit billing address" }), " >"] }) }), jsxs(CheckoutPageSectionContent, { children: [billTo && (jsx(Address, { address1: billTo.address1, address2: billTo.address2, address3: billTo.address3, city: billTo.city, companyName: billTo.companyName, country: billTo.country?.name, email: billTo.email, firstName: billTo.firstName, lastName: billTo.lastName, phone: billTo.phone, postalCode: billTo.postalCode })), jsx("div", { className: styles.notes, children: jsx(TextField, { defaultValue: notes, isDisabled: isLoading, isMultiline: true, label: t('Add order notes'), name: "notes", rows: 3, showLabel: true }) })] })] }), jsxs(CheckoutPageSection, { title: jsx(FormattedMessage, { id: "Shipping address" }), children: [jsx(CheckoutPageSectionLink, { children: jsxs(RouteLink, { color: "secondary", href: ACCOUNT_ADDRESSES_PATH, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit shipping address" }), " >"] }) }), jsxs(CheckoutPageSectionContent, { children: [jsx(Checkbox, { className: styles['use-invoice-checkbox'], isDisabled: true, isSelected: true, children: jsx(FormattedMessage, { id: "Use billing address" }) }), shipTo && (jsx(Address, { address1: shipTo.address1, address2: shipTo.address2, address3: shipTo.address3, city: shipTo.city, companyName: shipTo.companyName, country: shipTo.country?.name, email: shipTo.email, firstName: shipTo.firstName, lastName: shipTo.lastName, phone: shipTo.phone, postalCode: shipTo.postalCode }))] })] })] }));
+}
+
+export { ReadOnlyAddresses };

package/dist/pages/checkout/shipping-page/components/readonly-address.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"notes":"readonly-address-module-1hAQK","use-invoice-checkbox":"readonly-address-module-jMyJ-"};
+
+export { styles as default };