@sonic-equipment/ui 185.0.0 → 187.0.0

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

@@ -6,9 +6,9 @@ import { useAlgoliaInsights } from '../../../../algolia/use-algolia-insights.js'
 import { Accordion } from '../../../../collapsables/accordion/accordion.js';
 import { AccordionItem } from '../../../../collapsables/accordion/accordion-item.js';
 import { InfoDisplay } from '../../../../display/info-display/info-display.js';
-import { Checkbox } from '../../../../forms/checkbox/checkbox.js';
-import { Select } from '../../../../forms/select/select.js';
-import { TextField } from '../../../../forms/text-field/text-field.js';
+import { Checkbox } from '../../../../forms/elements/checkbox/checkbox.js';
+import { Select } from '../../../../forms/elements/select/select.js';
+import { TextField } from '../../../../forms/fields/text-field/text-field.js';
 import { InfoIconTooltip } from '../../../../info-icon-tooltip/info-icon-tooltip.js';
 import { FormattedMessage } from '../../../../intl/formatted-message.js';
 import { isCountryCode } from '../../../../intl/types.js';
@@ -18,7 +18,6 @@ import { useInvalidateCurrentCart } from '../../../../shared/api/storefront/hook
 import { usePatchCart } from '../../../../shared/api/storefront/hooks/cart/use-patch-cart.js';
 import { usePlaceOrder } from '../../../../shared/api/storefront/hooks/cart/use-place-order.js';
 import { useInvalidateAdyen } from '../../../../shared/api/storefront/hooks/payment/use-invalidate-adyen.js';
-import { validateVATNumber } from '../../../../shared/api/storefront/services/finance-service.js';
 import { useDataLayer } from '../../../../shared/ga/use-data-layer.js';
 import { getCurrencyCodeBySymbol } from '../../../../shared/model/currency.js';
 import { environment } from '../../../../shared/utils/environment.js';
@@ -27,7 +26,7 @@ import { useHasReturnedFromAdyen } from '../hooks/use-has-returned-from-adyen.js
 import { AdyenPayment } from './adyen-payment.js';
 import styles from './payment.module.css.js';
 
-function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPaymentComplete, onProcessing, onValidatingVAT, }) {
+function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPaymentComplete, onProcessing, }) {
     const { createEcommerceEvent, dataLayer } = useDataLayer();
     const { mutate: patchCart } = usePatchCart();
     const { mutate: placeOrder } = usePlaceOrder();
@@ -49,7 +48,6 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
         throw new Error(`Country code not found for cart with country abbreviation: ${_cart.billTo?.country?.abbreviation}`);
     const countryCode = _cart.billTo.country.abbreviation;
     const currencyCode = getCurrencyCodeBySymbol(cart.currencySymbol);
-    const lastVATNumber = useRef(cart.customerVatNumber);
     if (!currencyCode)
         throw new Error(`Currency code not found for cart with currency symbol: ${cart.currencySymbol}`);
     const isAdyenPayment = selectedPaymentMethod === 'ADY' &&
@@ -66,7 +64,6 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
         cartRef.current = _cart;
     }, [_cart]);
     const [validationErrors, setValidationErrors] = useState({});
-    const [customerVatNumber, setCustomerVatNumber] = useState(cart.customerVatNumber);
     const atpSelectOptions = atp
         .filter(atp => Boolean(atp.date))
         .reduce((acc, atp) => ({
@@ -77,72 +74,6 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
         acc[method.name] = t(`paymentMethod.${method.description}`);
         return acc;
     }, {});
-    const validateVAT = useCallback(async (value) => {
-        if (!value) {
-            setValidationErrors(errors => {
-                const result = { ...errors };
-                delete result.customerVatNumber;
-                return result;
-            });
-            return true;
-        }
-        if (value.length < 8) {
-            setValidationErrors({
-                ...validationErrors,
-                customerVatNumber: t('validation.tooShort'),
-            });
-            return false;
-        }
-        try {
-            if (lastVATNumber.current === value)
-                return true;
-            onValidatingVAT(true);
-            const response = await validateVATNumber({ vatNumber: value });
-            lastVATNumber.current = value;
-            if (response.isValid) {
-                setValidationErrors(validationErrors => {
-                    const result = { ...validationErrors };
-                    delete result.customerVatNumber;
-                    return result;
-                });
-                return true;
-            }
-            else {
-                setValidationErrors(validationErrors => ({
-                    ...validationErrors,
-                    customerVatNumber: t('validation.invalid'),
-                }));
-                return false;
-            }
-        }
-        catch {
-            // When an error occurs, we don't want to show the error message
-            // because it might be a temporary issue with the service.
-            // The customer can not do anything about it, so we just remove the error message.
-            setValidationErrors(validationErrors => {
-                const result = { ...validationErrors };
-                delete result.customerVatNumber;
-                return result;
-            });
-            return true;
-        }
-        finally {
-            onValidatingVAT(false);
-        }
-    }, [onValidatingVAT, t, validationErrors]);
-    useEffect(() => {
-        /* When a customer has an existing VAT that is
-         * not valid (e.g. invalid, undetermined, or failure),
-         * then trigger a client side validation. */
-        if (!cart.customerVatNumber)
-            return;
-        if (cart.properties.customerVatNumberStatus === 'valid')
-            return;
-        onValidatingVAT(true);
-        lastVATNumber.current = '';
-        validateVAT(cart.customerVatNumber);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
     const onPlaceOrderCompleted = useCallback(({ cart, payment_type }) => {
         dataLayer.push(createEcommerceEvent({
             cart,
@@ -189,10 +120,6 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
         };
         cart.requestedDeliveryDate = formData.get('deliveryDate')?.toString();
         cart.requestedDeliveryDateDisplay = undefined;
-        if (cart.customerVatNumber &&
-            lastVATNumber.current !== cart.customerVatNumber &&
-            !(await validateVAT(cart.customerVatNumber)))
-            return;
         if (Object.keys(validationErrors).length > 0)
             return;
         if (isAdyenPayment) {
@@ -317,30 +244,36 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
                     MA: t('industry.MA'),
                     OT: t('industry.OT'),
                     /* eslint-enable sort-keys-fix/sort-keys-fix */
-                }, placeholder: t('Select an industry'), variant: "solid" }), jsx(TextField, { showLabel: true, isDisabled: isDisabled, label: t('VAT Number'), name: "customerVatNumber", onBlur: e => validateVAT(e.target.value), onChange: setCustomerVatNumber, validate: () => validationErrors.customerVatNumber ?? true, value: customerVatNumber }, `vat${Boolean(validationErrors.customerVatNumber)}`), jsx(TextField, { showLabel: true, defaultValue: cart.poNumber, isDisabled: isDisabled, isRequired: cart.requiresPoNumber, label: t('PO Number'), name: "poNumber" }), paymentMethodOptions && Object.keys(paymentMethodOptions).length > 1 && (jsx(Select, { "data-test-selector": "paymentMethodSelect", defaultSelectedOption: cart.paymentOptions?.paymentMethods?.[0]?.name || 'ADY', isDisabled: isDisabled, label: t('Payment method'), name: "paymentMethod", onChange: setSelectedPaymentMethod, options: paymentMethodOptions, selectedOption: selectedPaymentMethod, variant: "solid" })), isAdyenPayment && cart.billTo && (jsx(AdyenPayment, { amount: cart.orderGrandTotal, cartId: cart.trackId, countryCode: countryCode, currencyCode: currencyCode, customerId: cart.billTo.id, dropinRef: dropinRef, environment: environment === 'production' ? 'live' : 'test', isDisabled: isDisabled, onComplete: onComplete, onError: onError, orderAmount: cart.orderGrandTotal, returnUrl: 
+                }, placeholder: t('Select an industry'), variant: "solid" }), jsx(TextField, { showLabel: true, isDisabled: isDisabled, label: t('VAT Number'), minLength: 8, name: "customerVatNumber" }, `vat${Boolean(validationErrors.customerVatNumber)}`), jsx(TextField, { showLabel: true, defaultValue: cart.poNumber, isDisabled: isDisabled, isRequired: cart.requiresPoNumber, label: t('PO Number'), name: "poNumber" }), paymentMethodOptions && Object.keys(paymentMethodOptions).length > 1 && (jsx(Select, { "data-test-selector": "paymentMethodSelect", defaultSelectedOption: cart.paymentOptions?.paymentMethods?.[0]?.name || 'ADY', isDisabled: isDisabled, label: t('Payment method'), name: "paymentMethod", onChange: setSelectedPaymentMethod, options: paymentMethodOptions, selectedOption: selectedPaymentMethod, variant: "solid" })), isAdyenPayment && cart.billTo && (jsx(AdyenPayment, { amount: cart.orderGrandTotal, cartId: cart.trackId, countryCode: countryCode, currencyCode: currencyCode, customerId: cart.billTo.id, dropinRef: dropinRef, environment: environment === 'production' ? 'live' : 'test', isDisabled: isDisabled, onComplete: onComplete, onError: onError, orderAmount: cart.orderGrandTotal, returnUrl: 
                 /* eslint-disable ssr-friendly/no-dom-globals-in-react-fc */
                 typeof window === 'undefined'
                     ? ''
-                    : `${window.location.pathname}${window.location.search}` })), Boolean(paymentError) && (jsx("div", { className: styles['error-message'], children: jsx(FormattedMessage, { id: "An error occurred while processing your payment. Please try again." }) })), jsx(InfoDisplay, { id: "shipping-and-invoice-information", label: t('Billing and shipping address'), value: jsx(Accordion, { variant: "select", children: jsx(AccordionItem, { "data-test-selector": "billingAndShippingInformation", id: "invoice-and-shipping", isDisabled: isDisabled, title: t('Billing and shipping information'), children: jsx(BillingAndInvoiceInformation, { billToAddress: {
-                                address1: cart.billTo?.address1,
-                                address2: cart.billTo?.address2,
-                                address3: cart.billTo?.address3,
-                                city: cart.billTo?.city,
-                                companyName: cart.billTo?.companyName,
-                                country: cart.billTo?.country?.name,
-                                email: cart.billTo?.email,
-                                phone: cart.billTo?.phone,
-                                postalCode: cart.billTo?.postalCode,
-                            }, shipToAddress: {
-                                address1: cart.shipTo?.address1,
-                                address2: cart.shipTo?.address2,
-                                address3: cart.shipTo?.address3,
-                                city: cart.shipTo?.city,
-                                companyName: cart.shipTo?.companyName,
-                                country: cart.shipTo?.country?.name,
-                                email: cart.shipTo?.email,
-                                phone: cart.shipTo?.phone,
-                                postalCode: cart.shipTo?.postalCode,
+                    : `${window.location.pathname}${window.location.search}` })), Boolean(paymentError) && (jsx("div", { className: styles['error-message'], children: jsx(FormattedMessage, { id: "An error occurred while processing your payment. Please try again." }) })), jsx(InfoDisplay, { id: "shipping-and-invoice-information", label: t('Billing and shipping address'), value: jsx(Accordion, { variant: "select", children: jsx(AccordionItem, { "data-test-selector": "billingAndShippingInformation", id: "invoice-and-shipping", isDisabled: isDisabled, title: t('Billing and shipping information'), children: jsx(BillingAndInvoiceInformation, { billToAddress: cart.billTo && {
+                                address1: cart.billTo.address1,
+                                address2: cart.billTo.address2,
+                                address3: cart.billTo.address3,
+                                attention: '',
+                                city: cart.billTo.city,
+                                companyName: cart.billTo.companyName,
+                                country: cart.billTo.country,
+                                email: cart.billTo.email,
+                                firstName: '',
+                                lastName: '',
+                                phone: cart.billTo.phone,
+                                postalCode: cart.billTo.postalCode,
+                            }, shipToAddress: cart.shipTo && {
+                                address1: cart.shipTo.address1,
+                                address2: cart.shipTo.address2,
+                                address3: cart.shipTo.address3,
+                                attention: '',
+                                city: cart.shipTo.city,
+                                companyName: cart.shipTo.companyName,
+                                country: cart.shipTo.country,
+                                email: cart.shipTo.email,
+                                firstName: '',
+                                lastName: '',
+                                phone: cart.shipTo.phone,
+                                postalCode: cart.shipTo.postalCode,
                             } }) }) }) })] }));
 }
 

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

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

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

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

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

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

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

@@ -1,28 +1,14 @@
 import { BillToModel } from '../../../../shared/api/storefront/model/storefront.model';
+import { ValidAddress } from '../../../../shared/model/address';
 import { Country } from '../../../../shared/model/countries-languages';
 export declare const EDIT_ADDRESS_FORM_ID = "billToForm";
-export interface Address {
-    address1: string;
-    address2: string;
-    address3: string;
-    attention: string;
-    city: string;
-    companyName: string;
-    country: Country;
-    email: string;
-    firstName: string;
-    lastName: string;
-    phone: string;
-    postalCode: string;
-}
 export interface EditAddressesFormData {
-    address: Address;
+    address: ValidAddress;
     notes: string | undefined;
 }
-export declare function EditAddressesForm({ billTo, countries, currentCountry, isLoading, isPickup, onSubmit, }: {
+export declare function EditCheckoutBillToAddressForm({ billTo, countries, isLoading, isPickup, onSubmit, }: {
     billTo: BillToModel | undefined | null;
     countries: Country[];
-    currentCountry: Country | undefined;
     isLoading: boolean;
     isPickup: boolean;
     onSubmit: (event: EditAddressesFormData) => void;

package/dist/pages/checkout/shipping-page/components/edit-checkout-bill-to-address-form.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Form } from 'react-aria-components';
+import { Checkbox } from '../../../../forms/elements/checkbox/checkbox.js';
+import { TextField } from '../../../../forms/fields/text-field/text-field.js';
+import { EditAddressForm } from '../../../../forms/partials/edit-address-form/edit-address-form.js';
+import { InfoIconTooltip } from '../../../../info-icon-tooltip/info-icon-tooltip.js';
+import { FormattedMessage } from '../../../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import { useFetchCurrentCart } from '../../../../shared/api/storefront/hooks/cart/use-fetch-current-cart.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 { SonicAddress } from './sonic-address.js';
+import styles from './edit-checkout-bill-to-address-form.module.css.js';
+
+const EDIT_ADDRESS_FORM_ID = 'billToForm';
+function EditCheckoutBillToAddressForm({ billTo, countries, isLoading, isPickup, onSubmit, }) {
+    const t = useFormattedMessage();
+    const { data: cart } = useFetchCurrentCart();
+    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('countrySelect')?.toString();
+                            const country = countries.find(country => country.id === countryFormValue);
+                            if (!country)
+                                throw new Error(`Country not found ${formData.get('country')}`);
+                            onSubmit({
+                                address: {
+                                    address1: formData.get('address1')?.toString() || '',
+                                    address2: formData.get('address2')?.toString() || '',
+                                    address3: formData.get('address3')?.toString() || '',
+                                    attention: formData.get('attention')?.toString() || '',
+                                    city: formData.get('city')?.toString() || '',
+                                    companyName: formData.get('companyName')?.toString() || '',
+                                    country,
+                                    email: formData.get('email')?.toString() || '',
+                                    firstName: formData.get('firstName')?.toString() || '',
+                                    lastName: formData.get('lastName')?.toString() || '',
+                                    phone: formData.get('phone')?.toString() || '',
+                                    postalCode: formData.get('postalCode')?.toString() || '',
+                                },
+                                notes: cart?.notes === formData.get('notes')
+                                    ? undefined
+                                    : formData.get('notes')?.toString() || '',
+                            });
+                        }, children: [jsx(EditAddressForm, { address: billTo, countries: countries, isLoading: isLoading }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { defaultValue: cart?.notes, isDisabled: isLoading, isMultiline: true, label: t('Add order notes'), name: "notes", rows: 3, showLabel: true }) })] }) }) }), jsx(CheckoutPageSection, { title: jsx(FormattedMessage, { id: isPickup ? 'Pickup address' : 'Shipping address' }), children: jsx(CheckoutPageSectionContent, { children: jsx(Fragment, { children: isPickup ? (jsx(SonicAddress, {})) : (jsxs("div", { className: styles['use-invoice-checkbox'], children: [jsx(Checkbox, { "data-test-selector": "checkboxUseBillingAddress", isDisabled: true, isSelected: true, children: jsx(FormattedMessage, { id: "Use billing address" }) }), jsx(InfoIconTooltip, { variant: "stroke", children: t('Changing your address is currently not possible. Please contact customer support to change your address.') })] })) }) }) })] }));
+}
+
+export { EDIT_ADDRESS_FORM_ID, EditCheckoutBillToAddressForm };

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

@@ -0,0 +1,3 @@
+var styles = {"form":"edit-checkout-bill-to-address-form-module-UWk3T","span-2":"edit-checkout-bill-to-address-form-module-ajfl4","use-invoice-checkbox":"edit-checkout-bill-to-address-form-module-jumWh"};
+
+export { styles as default };

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

@@ -3,15 +3,15 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Form } from 'react-aria-components';
 import { AddressInfoDisplay } from '../../../../address-info-display/address-info-display.js';
 import { Link } from '../../../../buttons/link/link.js';
-import { Checkbox } from '../../../../forms/checkbox/checkbox.js';
-import { TextField } from '../../../../forms/text-field/text-field.js';
+import { Checkbox } from '../../../../forms/elements/checkbox/checkbox.js';
+import { TextField } from '../../../../forms/fields/text-field/text-field.js';
 import { FormattedMessage } from '../../../../intl/formatted-message.js';
 import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
 import { PATHS } from '../../../paths.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-form.js';
+import { EDIT_ADDRESS_FORM_ID } from './edit-checkout-bill-to-address-form.js';
 import { SonicAddress } from './sonic-address.js';
 import styles from './readonly-address.module.css.js';
 
@@ -29,9 +29,10 @@ function ReadOnlyAddresses({ billTo, isLoading, isPickup, notes, onSubmit, shipT
                                     address1: billTo.address1,
                                     address2: billTo.address2,
                                     address3: billTo.address3,
+                                    attention: billTo.attention,
                                     city: billTo.city,
                                     companyName: billTo.companyName,
-                                    country: billTo.country?.name,
+                                    country: billTo.country,
                                     email: billTo.email,
                                     firstName: billTo.firstName,
                                     lastName: billTo.lastName,
@@ -41,9 +42,10 @@ function ReadOnlyAddresses({ billTo, isLoading, isPickup, notes, onSubmit, shipT
                                         address1: shipTo.address1,
                                         address2: shipTo.address2,
                                         address3: shipTo.address3,
+                                        attention: shipTo.attention,
                                         city: shipTo.city,
                                         companyName: shipTo.companyName,
-                                        country: shipTo.country?.name,
+                                        country: shipTo.country,
                                         email: shipTo.email,
                                         firstName: shipTo.firstName,
                                         lastName: shipTo.lastName,

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

@@ -3,7 +3,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Button } from '../../../buttons/button/button.js';
 import { CartTotals } from '../../../cart-totals/cart-totals.js';
 import { CartTotalsSummary } from '../../../cart-totals/cart-totals-summary.js';
-import { Select } from '../../../forms/select/select.js';
+import { Select } from '../../../forms/elements/select/select.js';
 import { FormattedMessage } from '../../../intl/formatted-message.js';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
 import { getCurrencyCodeBySymbol } from '../../../shared/model/currency.js';
@@ -12,7 +12,7 @@ import { PATHS } from '../../paths.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';
-import { EDIT_ADDRESS_FORM_ID } from './components/edit-address-form.js';
+import { EDIT_ADDRESS_FORM_ID } from './components/edit-checkout-bill-to-address-form.js';
 import styles from './shipping-page.module.css.js';
 
 function ShippingPageContent({ cart, editAddress, errorPatchBillingAddress, fulfillmentMethods, isGuest, isLoadingFulfillmentMethods, isPatching, isPatchingSession, onChangeFulfillmentMethod, readOnlyAddress, }) {

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

@@ -14,7 +14,7 @@ import { ErrorPage } from '../../error-page/error-page.js';
 import { LoadingPage } from '../../loading-page/loading-page.js';
 import { PATHS } from '../../paths.js';
 import { CurrencyChangeDialog } from './components/currency-change-dialog.js';
-import { EditAddressesForm } from './components/edit-address-form.js';
+import { EditCheckoutBillToAddressForm } from './components/edit-checkout-bill-to-address-form.js';
 import { ReadOnlyAddresses } from './components/readonly-address.js';
 import { usePatchShippingDetails } from './hooks/use-patch-shipping-details.js';
 import { ShippingPageContent } from './shipping-page-content.js';
@@ -123,7 +123,7 @@ function ShippingPage() {
     return (jsx(ShippingPageContent, { cart: cart, 
         // TODO: Combine editAddress and readOnlyAddress into one section in order
         // for typescript to correctly infer which properties are set in what case
-        editAddress: jsxs(Fragment, { children: [jsx(EditAddressesForm, { billTo: cart.billTo, countries: countries || [], currentCountry: currentCountry, isLoading: isPatching, isPickup: isPickup, onSubmit: async ({ address, notes }) => {
+        editAddress: jsxs(Fragment, { children: [jsx(EditCheckoutBillToAddressForm, { billTo: cart.billTo, countries: countries || [], isLoading: isPatching, isPickup: isPickup, onSubmit: async ({ address, notes }) => {
                         if (!cart.billTo)
                             return;
                         formData.current = { address, notes };

package/dist/pages/my-sonic/actions/change-customer/change-customer.js

@@ -3,8 +3,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useState, useCallback, useMemo } from 'react';
 import { ListBox, ListBoxItem, Text } from 'react-aria-components';
 import clsx from 'clsx';
-import { Checkbox } from '../../../../forms/checkbox/checkbox.js';
-import { SearchField } from '../../../../forms/search-field/search-field.js';
+import { Checkbox } from '../../../../forms/elements/checkbox/checkbox.js';
+import { SearchField } from '../../../../forms/fields/search-field/search-field.js';
 import { SolidRatingIcon } from '../../../../icons/solid/solid-rating-icon.js';
 import { FormattedMessage } from '../../../../intl/formatted-message.js';
 import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';

package/dist/pages/my-sonic/actions/change-password/change-password-dialog.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { FormSegmentGroup } from '../../../../forms/form/form-segment-group.js';
+import { FormSegmentGroup } from '../../../../forms/layout/form/form-segment-group.js';
 import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
 import { Dialog } from '../../../../modals/dialog/dialog.js';
 import { UnauthorizedRequestError } from '../../../../shared/fetch/request.js';

package/dist/pages/my-sonic/actions/change-password/change-password.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { FormSegment } from '../../../../forms/form/form-segment.js';
-import { PasswordField } from '../../../../forms/password-field/password-field.js';
-import { PasswordValidation } from '../../../../forms/password-validation/password-validation.js';
+import { PasswordField } from '../../../../forms/fields/password-field/password-field.js';
+import { FormSegment } from '../../../../forms/layout/form/form-segment.js';
+import { PasswordValidation } from '../../../../forms/partials/password-validation/password-validation.js';
 import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
 import { ProgressCircle } from '../../../../loading/progress-circle.js';
 import { Message } from '../../../../message/message.js';

package/dist/pages/my-sonic/actions/edit-bill-to-address/edit-bill-to-address.d.ts

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

package/dist/pages/my-sonic/actions/edit-bill-to-address/edit-bill-to-address.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import { EditAddressForm } from '../../../../forms/partials/edit-address-form/edit-address-form.js';
+
+function EditBillToAddress() {
+    return (jsx(EditAddressForm, { address: undefined, countries: [], isLoading: false }));
+}
+
+export { EditBillToAddress };

package/dist/pages/my-sonic/actions/edit-user-info/edit-user-info-dialog.d.ts

@@ -1,4 +1,4 @@
-import { OnSubmitHandler, ValidationErrors } from '../../../../forms/form/form';
+import { OnSubmitHandler, ValidationErrors } from '../../../../forms/layout/form/form';
 import { EditUserInfoProps } from './edit-user-info';
 export interface EditUserInfoDialogProps extends EditUserInfoProps {
     isOpen: boolean;

package/dist/pages/my-sonic/actions/edit-user-info/edit-user-info.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { TextField } from '../../../../forms/text-field/text-field.js';
+import { TextField } from '../../../../forms/fields/text-field/text-field.js';
 import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
 import { ProgressCircle } from '../../../../loading/progress-circle.js';
 import { Message } from '../../../../message/message.js';

package/dist/pages/my-sonic/navigation/my-sonic-mobile-navigation.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { Select } from '../../../forms/select/select.js';
+import { Select } from '../../../forms/elements/select/select.js';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
 import { useNavigate } from '../../../shared/routing/use-navigate.js';
 import { mySonicNavigationItems } from './my-sonic-navigation-items.js';

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

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

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

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

package/dist/shared/data/countries-languages.data.js

@@ -28,6 +28,7 @@ const netherlands = {
     id: '423f6a9b-0b7b-4b3b-8b3b-3b7b0b9a6f43',
     languages: [dutch, english],
     name: 'Netherlands',
+    states: null,
 };
 const unitedKingdom = {
     abbreviation: 'UK',
@@ -35,6 +36,7 @@ const unitedKingdom = {
     id: '423f6a9b-0b7b-4b3b-8b3b-3b7b0b9a6f42',
     languages: [english],
     name: 'United Kingdom',
+    states: null,
 };
 const germany = {
     abbreviation: 'DE',
@@ -42,6 +44,7 @@ const germany = {
     id: '423f6a9b-0b7b-4b3b-8b3b-3b7b0b9a6f45',
     languages: [german, english],
     name: 'Germany',
+    states: null,
 };
 const france = {
     abbreviation: 'FR',
@@ -49,6 +52,7 @@ const france = {
     id: '423f6a9b-0b7b-4b3b-8b3b-3b7b0b9a6f44',
     languages: [french, english],
     name: 'France',
+    states: null,
 };
 const countries = [
     netherlands,

package/dist/shared/model/address.d.ts

@@ -1,15 +1,30 @@
+import { Country } from './countries-languages';
 export declare const validatePhone: (value: string) => boolean;
 export declare const validateEmail: (value: string) => boolean;
-export interface AddressType {
-    address1?: string;
-    address2?: string;
-    address3?: string;
-    city?: string;
-    companyName?: string;
-    country?: string;
-    email?: string;
-    firstName?: string;
-    lastName?: string;
-    phone?: string;
-    postalCode?: string;
+export interface AddressCountry {
+    abbreviation: string;
+    id: string;
+    name: string;
+    states: {
+        abbreviation: string;
+        id: string;
+        name: string;
+    }[] | null;
+}
+export interface Address {
+    address1: string;
+    address2: string;
+    address3: string;
+    attention: string;
+    city: string;
+    companyName: string;
+    country: AddressCountry | null | undefined;
+    email: string;
+    firstName: string;
+    lastName: string;
+    phone: string;
+    postalCode: string;
+}
+export interface ValidAddress extends Omit<Address, 'country'> {
+    country: Country;
 }

package/dist/shared/model/countries-languages.d.ts

@@ -11,6 +11,7 @@ export interface Country {
     id: string;
     languages: Language[];
     name: string;
+    states: null;
 }
 export declare function isLanguage(language: unknown): language is Language;
 export declare function isCountry(country: unknown): country is Country;