@sonic-equipment/ui 126.0.0 → 128.0.0

package/dist/address/address.d.ts

@@ -1,9 +1,14 @@
 export interface AddressProps {
+    address1?: string;
+    address2?: string;
+    address3?: string;
     city?: string;
     companyName?: string;
     country?: string;
     email?: string;
+    firstName?: string;
+    lastName?: string;
     phone?: string;
     postalCode?: string;
 }
-export declare function Address({ city, companyName, country, email, phone, postalCode, }: AddressProps): import("react/jsx-runtime").JSX.Element;
+export declare function Address({ address1, address2, address3, city, companyName, country, email, firstName, lastName, phone, postalCode, }: AddressProps): import("react/jsx-runtime").JSX.Element;

package/dist/address/address.js

@@ -2,8 +2,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { capitalizeFirstLetter } from '../shared/utils/string.js';
 import styles from './address.module.css.js';
 
-function Address({ city, companyName, country, email, phone, postalCode, }) {
-    return (jsxs("address", { className: styles.address, children: [companyName && jsx("p", { children: companyName }), (postalCode || city) && (jsxs("p", { children: [postalCode, " ", city ? capitalizeFirstLetter(city) : ''] })), country && jsx("p", { children: country }), phone && jsx("p", { children: phone }), email && jsx("p", { children: email })] }));
+function Address({ address1, address2, address3, city, companyName, country, email, firstName, lastName, phone, postalCode, }) {
+    return (jsxs("address", { className: styles.address, children: [(firstName || lastName) && jsx("p", { children: `${firstName} ${lastName}` }), companyName && jsx("p", { children: companyName }), address1 && jsx("p", { children: address1 }), address2 && jsx("p", { children: address2 }), address3 && jsx("p", { children: address3 }), (postalCode || city) && (jsxs("p", { children: [postalCode, " ", city ? capitalizeFirstLetter(city) : ''] })), country && jsx("p", { children: country }), phone && jsx("p", { children: phone }), email && jsx("p", { children: email })] }));
 }
 
 export { Address };

package/dist/algolia/filter-section.js

@@ -21,7 +21,7 @@ function FilterSection({ ...props }) {
     /* eslint-enable @typescript-eslint/no-unnecessary-condition */
 }
 function CollapsibleFilterSection({ children, gap = 'md', initialIsOpen = true, title, variant, }) {
-    return (jsx("section", { className: clsx(filterSectionStyles['filter-section'], filterSectionStyles[variant], filterSectionStyles[gap]), children: jsx(Accordion, { borderType: "middle", children: jsx(AccordionItem, { id: title, initialIsOpen: initialIsOpen, title: jsx("span", { className: filterSectionStyles['accordion-title'], children: jsx(FormattedMessage, { optional: true, fallbackValue: title, id: `facet.${title.toLowerCase()}` }) }), children: jsx("div", { className: filterSectionStyles.content, children: children }) }) }) }));
+    return (jsx("section", { className: clsx(filterSectionStyles['filter-section'], filterSectionStyles[variant], filterSectionStyles[gap]), children: jsx(Accordion, { borderType: "middle", children: jsx(AccordionItem, { id: title, initialIsOpen: initialIsOpen, title: jsx("span", { className: filterSectionStyles['accordion-title'], children: jsx(FormattedMessage, { fallbackValue: title, id: `facet.${title.toLowerCase()}` }) }), children: jsx("div", { className: filterSectionStyles.content, children: children }) }) }) }));
 }
 function WithActionFilterSection({ button, children, gap = 'md', title, variant, }) {
     return (jsxs("section", { className: clsx(filterSectionStyles['filter-section'], filterSectionStyles[variant], filterSectionStyles[gap]), children: [jsxs("div", { className: filterSectionStyles.header, children: [jsx("h3", { className: filterSectionStyles.title, children: title }), jsx("div", { children: button })] }), jsx("div", { className: filterSectionStyles.content, children: children })] }));

package/dist/cards/orderline-card/connected-orderline-card.js

@@ -5,7 +5,7 @@ import { ConnectedRemoveButton } from './connected-remove-button.js';
 import { OrderLineCard } from './orderline-card.js';
 
 function ConnectedOrderLineCard({ onRemove, orderLineId, productId, ...props }) {
-    return (jsx(OrderLineCard, { productId: productId, ...props, addToCartButton: jsx(ConnectedAddToCartButton, { productId: productId }), readonly: false, removeButton: jsx(ConnectedRemoveButton, { id: orderLineId, onRemove: orderLineId => {
+    return (jsx(OrderLineCard, { productId: productId, ...props, addToCartButton: jsx(ConnectedAddToCartButton, { productId: productId }), isReadonly: false, removeButton: jsx(ConnectedRemoveButton, { id: orderLineId, onRemove: orderLineId => {
                 onRemove?.(orderLineId);
             } }) }));
 }

package/dist/cards/orderline-card/orderline-card.d.ts

@@ -5,21 +5,21 @@ export interface BaseOrderLineCardProps {
     deliveryDate?: Date;
     href: string;
     image: ImageSourceType;
+    isReadonly: boolean;
     price: ProductTotalPriceType;
     productId: string;
-    readonly: boolean;
     sku: string;
     tags?: string[];
     title: string;
 }
 export interface InteractiveOrderLineCardProps extends BaseOrderLineCardProps {
     addToCartButton: ReactElement;
-    readonly: false;
+    isReadonly: false;
     removeButton: ReactElement;
 }
 export interface ReadonlyOrderLineCardProps extends BaseOrderLineCardProps {
+    isReadonly: true;
     quantity: number;
-    readonly: true;
 }
 export type OrderLineCardProps = InteractiveOrderLineCardProps | ReadonlyOrderLineCardProps;
 export declare function OrderLineCard(props: OrderLineCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/cards/orderline-card/orderline-card.js

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
 import { Tag } from '../../badges/tag/tag.js';
 import { DeliveryTime } from '../../delivery-time/delivery-time.js';
 import { ProductTotalPrice } from '../../display/product-price/product-total-price.js';
@@ -10,8 +11,8 @@ import { Heading } from '../../typography/heading/heading.js';
 import styles from './orderline-card.module.css.js';
 
 function OrderLineCard(props) {
-    const { deliveryDate, href, image, price, productId, readonly, sku, tags, title, } = props;
-    return (jsxs(RouteLink, { className: styles['orderline-card'], href: href, id: productId, children: [jsx("div", { className: styles['image-container'], children: jsx(Image, { ...image }) }), jsxs("div", { className: styles.body, children: [jsxs("div", { className: styles['title-container'], children: [tags && (jsx("div", { className: styles.tag, children: tags.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { optional: true, fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) })), jsx(Heading, { className: styles.title, size: "xxxs", tag: "h3", children: title }), jsx("div", { className: styles.sku, children: jsx(ProductSku, { sku: sku }) })] }), readonly ? (jsx("p", { className: styles.amount, children: jsx(FormattedMessage, { id: "Amount: {0}", replacementValues: { '0': props.quantity.toString() } }) })) : (jsx("div", { className: styles['add-to-cart-button'], children: props.addToCartButton })), jsx(ProductTotalPrice, { className: styles.price, originalTotalPrice: price.originalTotalPrice, pricePerUnit: price.pricePerUnit, totalPrice: price.totalPrice }), deliveryDate && (jsx(DeliveryTime, { className: styles.delivery, deliveryDate: deliveryDate })), !readonly && jsx("div", { className: styles.remove, children: props.removeButton })] })] }));
+    const { deliveryDate, href, image, isReadonly, price, productId, sku, tags, title, } = props;
+    return (jsxs(RouteLink, { className: clsx(styles['orderline-card'], isReadonly && styles.readonly), href: href, id: productId, isDisabled: isReadonly, children: [jsx("div", { className: styles['image-container'], children: jsx(Image, { ...image }) }), jsxs("div", { className: styles.body, children: [jsxs("div", { className: styles['title-container'], children: [tags && (jsx("div", { className: styles.tag, children: tags.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) })), jsx(Heading, { className: styles.title, size: "xxxs", tag: "h3", children: title }), jsx("div", { className: styles.sku, children: jsx(ProductSku, { sku: sku }) })] }), isReadonly ? (jsx("p", { className: styles.amount, children: jsx(FormattedMessage, { id: "Amount: {0}", replacementValues: { '0': props.quantity.toString() } }) })) : (jsx("div", { className: styles['add-to-cart-button'], children: props.addToCartButton })), jsx(ProductTotalPrice, { className: styles.price, originalTotalPrice: price.originalTotalPrice, pricePerUnit: price.pricePerUnit, totalPrice: price.totalPrice }), deliveryDate && (jsx(DeliveryTime, { className: styles.delivery, deliveryDate: deliveryDate })), !isReadonly && (jsx("div", { className: styles.remove, children: props.removeButton }))] })] }));
 }
 
 export { OrderLineCard };

package/dist/cards/orderline-card/orderline-card.module.css.js

@@ -1,3 +1,3 @@
-var styles = {"orderline-card":"orderline-card-module-AMTMm","image-container":"orderline-card-module-TlhUg","body":"orderline-card-module-L0kX1","title-container":"orderline-card-module-D-6JE","tag":"orderline-card-module-uiHOY","title":"orderline-card-module-C8xE6","amount":"orderline-card-module-s-u3O","add-to-cart-button":"orderline-card-module-ZjAaX","price":"orderline-card-module-q3yjo","delivery":"orderline-card-module-N-Oe-","remove":"orderline-card-module-0CunP"};
+var styles = {"orderline-card":"orderline-card-module-AMTMm","readonly":"orderline-card-module-NU77X","image-container":"orderline-card-module-TlhUg","body":"orderline-card-module-L0kX1","title-container":"orderline-card-module-D-6JE","tag":"orderline-card-module-uiHOY","title":"orderline-card-module-C8xE6","amount":"orderline-card-module-s-u3O","add-to-cart-button":"orderline-card-module-ZjAaX","price":"orderline-card-module-q3yjo","delivery":"orderline-card-module-N-Oe-","remove":"orderline-card-module-0CunP"};
 
 export { styles as default };

package/dist/cards/product-card/product-card.js

@@ -9,7 +9,7 @@ import { RouteLink } from '../../shared/routing/route-link.js';
 import styles from './product-card.module.css.js';
 
 function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, href, id, image, onClick, price, sku, tags, title, }) {
-    return (jsx("div", { className: styles['product-card-container'], children: jsxs(RouteLink, { className: styles['product-card'], "data-product-id": sku, href: href, id: id, onClick: onClick, children: [jsx("div", { className: styles.image, children: jsx(Image, { ...image }) }), jsx("div", { className: styles['favorite-button'], children: FavoriteButton && FavoriteButton }), jsxs("div", { className: styles.content, children: [jsxs("div", { className: styles.top, children: [jsx("div", { className: styles.tag, children: tags?.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { optional: true, fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) }), jsx("h2", { className: styles.title, children: title }), jsx(ProductSku, { sku: sku })] }), jsxs("div", { className: styles.bottom, children: [jsx("div", { className: styles.price, children: jsx(ProductPrice, { isVatIncluded: price.isVatIncluded, originalPrice: price.originalPrice, price: price.price }) }), jsx("div", { className: styles['add-to-cart-button'], children: AddToCartButton })] })] })] }) }));
+    return (jsx("div", { className: styles['product-card-container'], children: jsxs(RouteLink, { className: styles['product-card'], "data-product-id": sku, href: href, id: id, onClick: onClick, children: [jsx("div", { className: styles.image, children: jsx(Image, { ...image }) }), jsx("div", { className: styles['favorite-button'], children: FavoriteButton && FavoriteButton }), jsxs("div", { className: styles.content, children: [jsxs("div", { className: styles.top, children: [jsx("div", { className: styles.tag, children: tags?.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) }), jsx("h2", { className: styles.title, children: title }), jsx(ProductSku, { sku: sku })] }), jsxs("div", { className: styles.bottom, children: [jsx("div", { className: styles.price, children: jsx(ProductPrice, { isVatIncluded: price.isVatIncluded, originalPrice: price.originalPrice, price: price.price }) }), jsx("div", { className: styles['add-to-cart-button'], children: AddToCartButton })] })] })] }) }));
 }
 
 export { ProductCard };

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

@@ -5,6 +5,6 @@ export interface CartTotalsProps {
     subtotal: string;
     tax: string;
     total: string;
-    vatPercentage: number;
+    vatPercentage: number | undefined;
 }
 export declare function CartTotals({ fulfillmentMethod, orderNumber, shippingCost, subtotal, tax, total, vatPercentage, }: CartTotalsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -4,7 +4,7 @@ import { Heading } from '../typography/heading/heading.js';
 import styles from './cart-totals.module.css.js';
 
 function CartTotals({ fulfillmentMethod, orderNumber, shippingCost, subtotal, tax, total, vatPercentage, }) {
-    return (jsxs("div", { className: styles['cart-totals'], children: [orderNumber && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Order number" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "orderConfirmation_orderNumber", children: orderNumber }) }) })] })), fulfillmentMethod && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Fulfillment method" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, children: fulfillmentMethod }) }) })] })), jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Cost overview" }) }), jsxs("div", { children: [jsxs("div", { className: styles.line, children: [jsxs("p", { className: styles.label, children: [jsx(FormattedMessage, { id: "Subtotal" }), ' ', jsx(FormattedMessage, { id: "Excl. VAT" })] }), jsx("p", { className: styles.value, "data-test-selector": "cartTotal_subTotal", children: subtotal })] }), jsxs("div", { className: styles.line, children: [jsx("p", { className: styles.label, children: jsx(FormattedMessage, { id: "Shipping and handling" }) }), jsx("p", { className: styles.value, children: shippingCost })] }), jsxs("div", { className: styles.line, children: [jsxs("p", { className: styles.label, children: [jsx(FormattedMessage, { id: "VAT" }), " ", `${vatPercentage}%`] }), jsx("p", { className: styles.value, children: tax })] })] })] }), jsx("section", { className: styles.totals, children: jsxs("div", { className: styles.line, children: [jsx("p", { className: styles.label, children: jsx(FormattedMessage, { id: "Total" }) }), jsx("p", { className: styles.value, "data-test-selector": "cartTotal_orderGrandTotalDisplay", children: total })] }) })] }));
+    return (jsxs("div", { className: styles['cart-totals'], children: [orderNumber && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Order number" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "orderConfirmation_orderNumber", children: orderNumber }) }) })] })), fulfillmentMethod && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Fulfillment method" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "fulfullmentMethod", children: fulfillmentMethod }) }) })] })), jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Cost overview" }) }), jsxs("div", { children: [jsxs("div", { className: styles.line, children: [jsxs("p", { className: styles.label, children: [jsx(FormattedMessage, { id: "Subtotal" }), ' ', jsx(FormattedMessage, { id: "Excl. VAT" })] }), jsx("p", { className: styles.value, "data-test-selector": "cartTotal_subTotal", children: subtotal })] }), jsxs("div", { className: styles.line, children: [jsx("p", { className: styles.label, children: jsx(FormattedMessage, { id: "Shipping and handling" }) }), jsx("p", { className: styles.value, "data-test-selector": "shippingCost", children: shippingCost })] }), jsxs("div", { className: styles.line, children: [jsxs("p", { className: styles.label, children: [jsx(FormattedMessage, { id: "VAT" }), ' ', vatPercentage ? `${vatPercentage}%` : ''] }), jsx("p", { className: styles.value, "data-test-selector": "vatAmount", children: tax })] })] })] }), jsx("section", { className: styles.totals, children: jsxs("div", { className: styles.line, children: [jsx("p", { className: styles.label, children: jsx(FormattedMessage, { id: "Total" }) }), jsx("p", { className: styles.value, "data-test-selector": "cartTotal_orderGrandTotalDisplay", children: total })] }) })] }));
 }
 
 export { CartTotals };

package/dist/checkout/adyen-payment.d.ts

@@ -4,18 +4,16 @@ import { AdyenPaymentModel } from 'shared/api/storefront/model/storefront.model'
 import '@adyen/adyen-web/dist/adyen.css';
 interface AdyenPaymentProps {
     amount: number;
-    billToId: string;
     cartId: string;
     countryCode: string;
     currencyCode: string;
+    customerId: string;
     dropinRef: MutableRefObject<Dropin | null>;
     environment: 'test' | 'live' | 'live-us' | 'live-au' | 'live-apse' | 'live-in';
-    locale: string;
     onComplete: (result: AdyenPaymentModel) => Promise<void>;
-    onError: (error: unknown, result: AdyenPaymentModel) => void;
+    onError: (error: unknown, result: AdyenPaymentModel | null) => void;
     orderAmount: number;
-    redirectResult: string | undefined;
     returnUrl: string;
 }
-export declare function AdyenPayment({ amount, billToId, cartId, countryCode, currencyCode, dropinRef, environment, locale, onComplete, onError, orderAmount, redirectResult, returnUrl, }: AdyenPaymentProps): import("react/jsx-runtime").JSX.Element;
+export declare function AdyenPayment({ amount, cartId, countryCode, currencyCode, customerId, dropinRef, environment, onComplete, onError, orderAmount, returnUrl, }: AdyenPaymentProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/checkout/adyen-payment.js

@@ -1,13 +1,20 @@
 import { jsx } from 'react/jsx-runtime';
 import { useRef, useEffect } from 'react';
 import AdyenCheckout from '@adyen/adyen-web';
+import clsx from 'clsx';
 import qs from 'query-string';
+import { useCultureCode } from '../intl/use-culture-code.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 { getAdyenPaymentDetails, postAdyenPayment } from '../shared/api/storefront/services/cart-service.js';
 import { parseAmount } from './parse-amount.js';
+import styles from './adyen-payment.module.css.js';
 
-function AdyenPayment({ amount, billToId, cartId, countryCode, currencyCode, dropinRef, environment, locale, onComplete, onError, orderAmount, redirectResult, returnUrl, }) {
+function AdyenPayment({ amount, cartId, countryCode, currencyCode, customerId, dropinRef, environment, onComplete, onError, orderAmount, returnUrl, }) {
+    const cultureCode = useCultureCode();
+    // Get and remove Adyen query string params and keep them in a ref
+    const queryStringParams = useRef(getAndRemoveAdyenQueryParams());
+    const { amount: adyenAmount, customerId: adyenCustomerId, redirectResult, } = queryStringParams.current;
     const dropinDivRef = useRef(null);
     const { data: adyenSettings } = useFetchAdyenConfig();
     const { data: adyenSession, error, mutate: createAdyenSession, } = useCreateAdyenSession();
@@ -29,22 +36,23 @@ function AdyenPayment({ amount, billToId, cartId, countryCode, currencyCode, dro
             clientKey: adyenSettings.clientKey,
             countryCode,
             environment,
-            locale,
+            locale: cultureCode,
             onAdditionalDetails: (async (state, _component) => {
+                dropinDivRef.current?.classList.add(styles.loading);
                 if (!state.details.redirectResult) {
-                    throw new Error('No redirectResult');
+                    return onError(new Error('No redirectResult'), null);
                 }
                 const result = await getAdyenPaymentDetails({
                     redirectResult: state.details.redirectResult,
                 });
-                const { amount: adyenAmount, customerId: adyenCustomerId } = getAndRemoveAdyenQueryParams();
                 if (amount.toFixed(2).replaceAll(/[,.]/gi, '') !== adyenAmount)
                     return onError(new Error('Invalid amount'), result);
-                if (billToId !== adyenCustomerId)
+                if (customerId !== adyenCustomerId)
                     return onError(new Error('Invalid customer'), result);
                 return handlePaymentResponse(result, onComplete, onError);
             }),
             onSubmit: (async (state, _component) => {
+                dropinDivRef.current?.classList.add(styles.loading);
                 if (state.data.paymentMethod.type === 'paybybank') {
                     state.data.countryCode = countryCode;
                 }
@@ -59,7 +67,7 @@ function AdyenPayment({ amount, billToId, cartId, countryCode, currencyCode, dro
                     if (result.action.type === 'redirect') {
                         return handleRedirectPaymentAction(result);
                     }
-                    throw new Error('Invalid payment response');
+                    return onError(new Error('Invalid payment response'), result);
                 }
                 return handlePaymentResponse(result, onComplete, onError);
             }),
@@ -76,29 +84,33 @@ function AdyenPayment({ amount, billToId, cartId, countryCode, currencyCode, dro
             const dropIn = checkout.create('dropin');
             if (redirectResult)
                 checkout.submitDetails({ details: { redirectResult } });
+            // Remove Adyen query strings params from ref
+            queryStringParams.current = {};
             if (dropinRef.current)
                 dropinRef.current.unmount();
             dropinRef.current = dropIn.mount(dropinDivRef.current);
         })();
     }, [
-        billToId,
+        customerId,
         adyenSettings,
         adyenSession,
         amount,
         countryCode,
         currencyCode,
         environment,
-        locale,
+        cultureCode,
         orderAmount,
         redirectResult,
         returnUrl,
         dropinRef,
         onComplete,
         onError,
+        adyenAmount,
+        adyenCustomerId,
     ]);
     if (error)
         return jsx("div", { children: String(error) });
-    return jsx("div", { ref: dropinDivRef, id: "dropin" });
+    return (jsx("div", { ref: dropinDivRef, className: clsx(Boolean(redirectResult) && styles.loading), id: "dropin" }));
 }
 function getAndRemoveAdyenQueryParams() {
     if (typeof window === 'undefined')
@@ -115,7 +127,7 @@ async function handlePaymentResponse(result, onSubmit, onError) {
     try {
         if (result.action) {
             if (result.action.type === 'redirect') {
-                handleRedirectPaymentAction(result);
+                return handleRedirectPaymentAction(result);
             }
             else {
                 throw new Error('Adyen_Error');

package/dist/checkout/adyen-payment.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"loading":"adyen-payment-module-liZWP"};
+
+export { styles as default };

package/dist/checkout/payment-details.d.ts

@@ -1,5 +1,8 @@
-import { CartModel } from '../shared/api/storefront/model/storefront.model';
-export declare function PaymentDetails({ cart, onCartChanged, }: {
+import { CartModel, CheckoutAtpEntry } from '../shared/api/storefront/model/storefront.model';
+export declare function PaymentDetails({ atp, cart, fulfillmentMethods, isDisabled, onCartChanged, }: {
+    atp: CheckoutAtpEntry[];
     cart: CartModel;
+    fulfillmentMethods: string[];
+    isDisabled: boolean;
     onCartChanged: (cart: CartModel) => void;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/checkout/payment-details.js

@@ -1,21 +1,71 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
+import { Checkbox } from '../forms/checkbox/checkbox.js';
+import { Select } from '../forms/select/select.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 { useDebouncedCallback } from '../shared/hooks/use-debounced-callback.js';
+import { Tooltip } from '../tooltip/tooltip.js';
+import styles from './payment.module.css.js';
 
-function PaymentDetails({ cart, onCartChanged, }) {
+function PaymentDetails({ atp, cart, fulfillmentMethods, isDisabled, onCartChanged, }) {
     const [vatNumber, setVatNumber] = useState(cart.customerVatNumber);
     const [poNumber, setPONumber] = useState(cart.poNumber);
+    const [industry, setIndustry] = useState(cart.properties.industry);
+    const [deliveryDate, setDeliveryDate] = useState(cart.requestedDeliveryDate);
+    const [asSoonAsPossible, setAsSoonAsPossible] = useState(false);
+    const [fulfillmentMethod, setFulfillmentMethod] = useState();
+    const [paymentMethod, setPaymentMethod] = useState(cart.paymentOptions?.paymentMethods?.[0]?.name || 'ADY');
     const t = useFormattedMessage();
     const onCartChangedDebounced = useDebouncedCallback(onCartChanged, 500);
     useEffect(() => {
         if (!vatNumber || !poNumber)
             return;
-        onCartChangedDebounced({ ...cart, customerVatNumber: vatNumber, poNumber });
+        onCartChangedDebounced({
+            ...cart,
+            customerVatNumber: vatNumber,
+            fulfillmentMethod: 'Ship',
+            poNumber,
+            properties: { ...cart.properties, industry: industry || '' },
+            requestedDeliveryDate: deliveryDate || '',
+            requestedPickupDate: deliveryDate || '',
+        });
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [vatNumber, poNumber]);
-    return (jsxs(Fragment, { children: [jsx(TextField, { isRequired: true, showLabel: true, label: t('VAT Number'), minLength: 8, onChange: setVatNumber, value: vatNumber }), jsx(TextField, { isRequired: true, showLabel: true, label: t('PO Number'), onChange: setPONumber, value: poNumber })] }));
+    }, [vatNumber, poNumber, industry, deliveryDate]);
+    const atpSelectOptions = atp
+        .filter(atp => atp.date !== null)
+        .reduce((acc, atp) => ({
+        ...acc,
+        [atp.date || '']: atp.displayDate,
+    }), {});
+    const fulfillmentMethodOptions = fulfillmentMethods.reduce((acc, method) => ({
+        ...acc,
+        [method.toLocaleLowerCase()]: t(`fulfillmentMethod.${method}`),
+    }), {});
+    const paymentMethodOptions = cart.paymentOptions?.paymentMethods?.reduce((acc, method) => {
+        acc[method.name] = t(`paymentMethod.${method.description}`);
+        return acc;
+    }, {});
+    return (jsxs(Fragment, { children: [jsxs("div", { className: styles['delivery-date'], children: [jsx(Select, { isRequired: true, showLabel: true, "data-test-selector": "delivery-date", defaultSelectedOption: atp[0]?.date ?? undefined, isDisabled: asSoonAsPossible, label: t('Select a desired delivery date'), onChange: value => setDeliveryDate(value), options: atpSelectOptions, selectedOption: deliveryDate, variant: "solid" }), jsxs("div", { className: styles['asap-checkbox'], children: [jsx(Checkbox, { "data-test-selector": "asapCheckbox", isSelected: asSoonAsPossible, onChange: checked => {
+                                    setAsSoonAsPossible(checked);
+                                    if (checked)
+                                        setDeliveryDate('');
+                                }, children: jsx(FormattedMessage, { id: "As soon as possible" }) }), jsx(Tooltip, { text: t('Selecting As Soon As Possible will enable us to send the products to you as they become available.') })] })] }), jsx(Select, { showLabel: true, isDisabled: fulfillmentMethods.length <= 1, label: t('Fulfillment method'), onChange: setFulfillmentMethod, options: fulfillmentMethodOptions, selectedOption: fulfillmentMethod, variant: "solid" }), jsx(Select, { isRequired: true, label: t('Industry'), onChange: value => setIndustry(value), options: {
+                    /* eslint-disable sort-keys-fix/sort-keys-fix */
+                    PP: 'Private User',
+                    AU: 'Automotive',
+                    MC: 'Motorcycle',
+                    BC: 'Bicycle',
+                    TR: 'Truck',
+                    AG: 'Agricultural',
+                    AV: 'Aviation',
+                    MA: 'Maritime',
+                    OT: 'Other',
+                    /* eslint-enable sort-keys-fix/sort-keys-fix */
+                }, selectedOption: industry, variant: "solid" }), jsx(TextField, { showLabel: true, isDisabled: isDisabled, label: t('VAT Number'), minLength: 8, name: "vatNumber", onChange: setVatNumber, value: vatNumber }), jsx(TextField, { showLabel: true, isDisabled: isDisabled, label: t('PO Number'), onChange: setPONumber, value: poNumber }), paymentMethodOptions && (jsx(Select, { isDisabled: (cart.paymentOptions?.paymentMethods &&
+                    cart.paymentOptions.paymentMethods.length <= 1) ??
+                    true, label: t('Payment method'), onChange: value => setPaymentMethod(value), options: paymentMethodOptions, selectedOption: paymentMethod, variant: "solid" }))] }));
 }
 
 export { PaymentDetails };

package/dist/checkout/payment.d.ts

@@ -1,6 +1,11 @@
-import { AdyenPaymentModel, CartModel } from '../shared/api/storefront/model/storefront.model';
-export declare function Payment({ cart: _cart, onError, onPaymentComplete, }: {
+import { AdyenPaymentModel, CartModel, CheckoutAtpEntry } from '../shared/api/storefront/model/storefront.model';
+export declare function Payment({ atp, cart: _cart, form, fulfillmentMethods, onError: _onError, onPaymentComplete, onProcessing, onValidating, }: {
+    atp: CheckoutAtpEntry[];
     cart: CartModel;
-    onError: (error: unknown, result: AdyenPaymentModel) => void;
+    form: string;
+    fulfillmentMethods: string[];
+    onError?: (error: unknown, result: AdyenPaymentModel | null) => void;
     onPaymentComplete: () => void;
+    onProcessing: (processing: boolean) => void;
+    onValidating: (validating: boolean) => void;
 }): import("react/jsx-runtime").JSX.Element;