@sonic-equipment/ui 184.0.0 → 186.0.0

package/dist/modals/recover-password/recover-password-dialog.js

@@ -2,7 +2,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useEffect } from 'react';
 import { Button } from '../../buttons/button/button.js';
-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 { Message } from '../../message/message.js';
 import { useRecoverPassword } from '../../shared/api/storefront/hooks/authentication/use-recover-password.js';
@@ -17,9 +17,7 @@ function RecoverPasswordDialog({ isOpen, onOpenChange, }) {
             reset();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isOpen]);
-    const onSubmit = (event) => {
-        const form = event.currentTarget;
-        const formData = new FormData(form);
+    const onSubmit = ({ formData }) => {
         const email = formData.get('email')?.toString();
         if (!email)
             throw new Error('Email value is required');

package/dist/pages/account/components/create-account-form/create-account-form.js

@@ -4,15 +4,14 @@ import { useState } from 'react';
 import { Button } from '../../../../buttons/button/button.js';
 import { CountrySelect } from '../../../../country-select/country-select.js';
 import { useCountries } from '../../../../country-select/hooks/use-countries.js';
-import { Form } from '../../../../forms/form/form.js';
-import { FormSegment } from '../../../../forms/form/form-segment.js';
-import { FormSegmentGroup } from '../../../../forms/form/form-segment-group.js';
-import { PasswordField } from '../../../../forms/password-field/password-field.js';
-import { SwitchField } from '../../../../forms/switch-field/switch-field.js';
-import { TextField } from '../../../../forms/text-field/text-field.js';
+import { SwitchField } from '../../../../forms/fields/switch-field/switch-field.js';
+import { TextField } from '../../../../forms/fields/text-field/text-field.js';
+import { Form } from '../../../../forms/layout/form/form.js';
+import { FormSegment } from '../../../../forms/layout/form/form-segment.js';
+import { FormSegmentGroup } from '../../../../forms/layout/form/form-segment-group.js';
+import { PasswordValidation } from '../../../../forms/partials/password-validation/password-validation.js';
 import { isCountryCode } from '../../../../intl/types.js';
 import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
-import { validatePassword } from '../../../../shared/model/account.js';
 import { validateEmail } from '../../../../shared/model/address.js';
 import { Heading } from '../../../../typography/heading/heading.js';
 import styles from './create-account-form.module.css.js';
@@ -22,8 +21,6 @@ function CreateAccountForm({ errorType, isDisabled: _isDisabled = false, isPendi
     const title = t('create account');
     const isDisabled = isPendingCreateAccount || _isDisabled;
     const [isPrivateAccount, setIsPrivateAccount] = useState(false);
-    const [password, setPassword] = useState('');
-    const [passwordConfirm, setPasswordConfirm] = useState('');
     const [lastName, setLastName] = useState('');
     const [companyName, setCompanyName] = useState('');
     const errorMessages = {
@@ -36,7 +33,7 @@ function CreateAccountForm({ errorType, isDisabled: _isDisabled = false, isPendi
         const firstName = formData.get('firstName')?.toString();
         const lastName = formData.get('lastName')?.toString() || '';
         const email = formData.get('email')?.toString();
-        const password = formData.get('password')?.toString();
+        const password = formData.get('new-password')?.toString();
         const isSubscribed = Boolean(formData.get('isSubscribed'));
         const isPrivateAccount = Boolean(formData.get('isPrivateAccount'));
         const countryId = formData.get('countrySelect')?.toString();
@@ -64,13 +61,6 @@ function CreateAccountForm({ errorType, isDisabled: _isDisabled = false, isPendi
             },
         });
     };
-    const isMismatchingPasswords = () => {
-        if (!passwordConfirm)
-            return;
-        if (passwordConfirm === password)
-            return false;
-        return true;
-    };
     // form header
     const header = (jsx(Heading, { "data-test-selector": "PageTitle", italic: true, size: "m", tag: "h1", uppercase: true, children: title }));
     // form footer
@@ -79,12 +69,7 @@ function CreateAccountForm({ errorType, isDisabled: _isDisabled = false, isPendi
                                 if (!value)
                                     return value;
                                 return (validateEmail(value) || t('Please enter a valid email address'));
-                            } }) }), jsx(FormSegment, { children: jsx(PasswordField, { autoComplete: "new-password", "data-test-selector": "createAccount_password", info: "Password must be at least 8 characters long, include at least one number, at least one lowercase character, at least one uppercase character and at least one non-alphanumeric character.", isDisabled: isDisabled, isRequired: true, label: t('Password'), name: "password", onChange: setPassword, validate: value => {
-                                if (!value)
-                                    return;
-                                return (validatePassword(value) ||
-                                    t('Password does not meet requirements'));
-                            } }) }), jsx(FormSegment, { children: jsx(PasswordField, { autoComplete: "new-password", customErrorMessage: "Passwords do not match", "data-test-selector": "createAccount_passwordConfirm", isDisabled: isDisabled, isInvalid: isMismatchingPasswords(), isRequired: true, label: t('Confirm password'), onChange: setPasswordConfirm, value: passwordConfirm }) })] }), jsxs(FormSegmentGroup, { children: [jsx(FormSegment, { children: jsx(SwitchField, { isDisabled: isDisabled, isSelected: isPrivateAccount, name: "isPrivateAccount", onChange: setIsPrivateAccount, children: t('Private account') }) }), jsx(FormSegment, { children: jsx(TextField, { autoComplete: "organization", "data-test-selector": "createAccount_companyName", isDisabled: isDisabled, isRequired: !isPrivateAccount, label: t('Company name'), name: "companyName", onChange: setCompanyName, value: companyName }, `companyName-${Boolean(isPrivateAccount)}`) }), jsx(FormSegment, { children: jsx(TextField, { autoComplete: "given-name", "data-test-selector": "createAccount_firstName", isDisabled: isDisabled, label: t('First name'), name: "firstName" }) }), jsx(FormSegment, { children: jsx(TextField, { autoComplete: "family-name", "data-test-selector": "createAccount_lastName", isDisabled: isDisabled, isRequired: isPrivateAccount, label: t('Last name'), name: "lastName", onChange: setLastName, value: lastName }, `lastname-${Boolean(isPrivateAccount)}`) }), jsx(FormSegment, { children: jsx(CountrySelect, { isRequired: true, countries: countries || [], "data-test-selector": "createAccount_countrySelect", defaultSelectedCountry: defaultSelectedCountry, isDisabled: isLoadingCountries || isDisabled, isLoading: isLoadingCountries, name: "countrySelect" }, defaultSelectedCountry?.id) })] }), jsx(FormSegmentGroup, { children: jsx(FormSegment, { children: jsx(SwitchField, { isDisabled: isDisabled, name: "isSubscribed", children: t('Sign me up for newsletters and product updates') }) }) })] }));
+                            } }) }), jsx(PasswordValidation, { isDisabled: isDisabled })] }), jsxs(FormSegmentGroup, { children: [jsx(FormSegment, { children: jsx(SwitchField, { isDisabled: isDisabled, isSelected: isPrivateAccount, name: "isPrivateAccount", onChange: setIsPrivateAccount, children: t('Private account') }) }), jsx(FormSegment, { children: jsx(TextField, { autoComplete: "organization", "data-test-selector": "createAccount_companyName", isDisabled: isDisabled, isRequired: !isPrivateAccount, label: t('Company name'), name: "companyName", onChange: setCompanyName, value: companyName }, `companyName-${Boolean(isPrivateAccount)}`) }), jsx(FormSegment, { children: jsx(TextField, { autoComplete: "given-name", "data-test-selector": "createAccount_firstName", isDisabled: isDisabled, label: t('First name'), name: "firstName" }) }), jsx(FormSegment, { children: jsx(TextField, { autoComplete: "family-name", "data-test-selector": "createAccount_lastName", isDisabled: isDisabled, isRequired: isPrivateAccount, label: t('Last name'), name: "lastName", onChange: setLastName, value: lastName }, `lastname-${Boolean(isPrivateAccount)}`) }), jsx(FormSegment, { children: jsx(CountrySelect, { isRequired: true, countries: countries || [], "data-test-selector": "createAccount_countrySelect", defaultSelectedCountry: defaultSelectedCountry, isDisabled: isLoadingCountries || isDisabled, isLoading: isLoadingCountries, name: "countrySelect" }, defaultSelectedCountry?.id) })] }), jsx(FormSegmentGroup, { children: jsx(FormSegment, { children: jsx(SwitchField, { isDisabled: isDisabled, name: "isSubscribed", children: t('Sign me up for newsletters and product updates') }) }) })] }));
 }
 
 export { CreateAccountForm };

package/dist/pages/account/components/sign-in-form/sign-in-form.js

@@ -2,12 +2,12 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Button } from '../../../../buttons/button/button.js';
 import { Link } from '../../../../buttons/link/link.js';
-import { Form } from '../../../../forms/form/form.js';
-import { FormSegment } from '../../../../forms/form/form-segment.js';
-import { FormSegmentGroup } from '../../../../forms/form/form-segment-group.js';
-import { PasswordField } from '../../../../forms/password-field/password-field.js';
-import { SwitchField } from '../../../../forms/switch-field/switch-field.js';
-import { TextField } from '../../../../forms/text-field/text-field.js';
+import { PasswordField } from '../../../../forms/fields/password-field/password-field.js';
+import { SwitchField } from '../../../../forms/fields/switch-field/switch-field.js';
+import { TextField } from '../../../../forms/fields/text-field/text-field.js';
+import { Form } from '../../../../forms/layout/form/form.js';
+import { FormSegment } from '../../../../forms/layout/form/form-segment.js';
+import { FormSegmentGroup } from '../../../../forms/layout/form/form-segment-group.js';
 import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
 import { validateEmail } from '../../../../shared/model/address.js';
 import { voidFunction } from '../../../../shared/model/defaults.js';

package/dist/pages/account/create-account-page/create-account-page.js

@@ -1,14 +1,13 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { Button } from '../../../buttons/button/button.js';
 import { FormattedMessage } from '../../../intl/formatted-message.js';
 import { Dialog } from '../../../modals/dialog/dialog.js';
-import { useCreateAccount } from '../../../shared/api/storefront/hooks/authentication/use-create-account.js';
+import { useCreateAccount } from '../../../shared/api/storefront/hooks/account/use-create-account.js';
 import { useFetchSession } from '../../../shared/api/storefront/hooks/authentication/use-fetch-session.js';
-import { ExistingAccountError } from '../../../shared/api/storefront/services/authentication-service.js';
+import { ExistingAccountError } from '../../../shared/api/storefront/services/account-service.js';
 import { useNavigate } from '../../../shared/routing/use-navigate.js';
-import { Page } from '../../components/page/page.js';
 import { LoadingPage } from '../../loading-page/loading-page.js';
 import { PATHS } from '../../paths.js';
 import { CreateAccountForm } from '../components/create-account-form/create-account-form.js';
@@ -40,7 +39,7 @@ function CreateAccountPage({ returnUrl } = {}) {
         navigate(continuePath, { reload: true });
         return;
     }
-    return (jsxs(Page, { fluid: true, fullHeight: true, "data-test-selector": "createAccountPage", children: [jsx(SignInPageLayout, { fullHeight: true, children: jsx(CreateAccountForm, { errorType: errorType, isDisabled: isDisabled, isPendingCreateAccount: isPendingCreateAccount, onSubmit: onSubmit }) }), jsx(Dialog, { footer: jsx(Button, { color: "primary", href: continuePath, route: { reload: true }, size: "md", withArrow: true, children: jsx(FormattedMessage, { id: "Continue" }) }), hasCloseButton: false, isDismissable: false, isKeyboardDismissDisabled: true, isOpen: isSuccess && !isReturnToShipping, title: "Account created", children: jsx("p", { children: jsx(FormattedMessage, { id: "Your new Sonic Equipment account was succesfully created. You should receive an email soon with further instructions on how to activate this account. If you do not receive this email, please contact Customer Support." }) }) }), jsx(Dialog, { footer: jsx(Button, { color: "primary", href: `${PATHS.SIGN_IN}${returnUrl ? `?returnUrl=${continuePath}` : ''}`, route: { reload: true }, size: "md", withArrow: true, children: jsx(FormattedMessage, { id: "Continue to sign in" }) }), hasCloseButton: false, isDismissable: false, isKeyboardDismissDisabled: true, isOpen: isExistingAccount, title: "Existing account", children: jsx("p", { children: jsx(FormattedMessage, { id: "The email address you entered is already associated with an existing account. Please sign in to this account or contact Customer Support." }) }) })] }));
+    return (jsxs(Fragment, { children: [jsx(SignInPageLayout, { fullHeight: true, children: jsx(CreateAccountForm, { errorType: errorType, isDisabled: isDisabled, isPendingCreateAccount: isPendingCreateAccount, onSubmit: onSubmit }) }), jsx(Dialog, { footer: jsx(Button, { color: "primary", href: continuePath, route: { reload: true }, size: "md", withArrow: true, children: jsx(FormattedMessage, { id: "Continue" }) }), hasCloseButton: false, isDismissable: false, isKeyboardDismissDisabled: true, isOpen: isSuccess && !isReturnToShipping, title: "Account created", children: jsx("p", { children: jsx(FormattedMessage, { id: "Your new Sonic Equipment account was succesfully created. You should receive an email soon with further instructions on how to activate this account. If you do not receive this email, please contact Customer Support." }) }) }), jsx(Dialog, { footer: jsx(Button, { color: "primary", href: `${PATHS.SIGN_IN}${returnUrl ? `?returnUrl=${continuePath}` : ''}`, route: { reload: true }, size: "md", withArrow: true, children: jsx(FormattedMessage, { id: "Continue to sign in" }) }), hasCloseButton: false, isDismissable: false, isKeyboardDismissDisabled: true, isOpen: isExistingAccount, title: "Existing account", children: jsx("p", { children: jsx(FormattedMessage, { id: "The email address you entered is already associated with an existing account. Please sign in to this account or contact Customer Support." }) }) })] }));
 }
 
 export { CreateAccountPage };

package/dist/pages/account/layouts/sign-in-page-layout/sign-in-page-layout.js

@@ -8,7 +8,7 @@ import styles from './sign-in-page-layout.module.css.js';
 
 function SignInPageLayout({ children, fullHeight, image = SIGN_IN_PAGE_BACKGROUND_IMAGE, }) {
     const isLg = useIsBreakpoint('lg');
-    return (jsxs("div", { className: clsx(styles['sign-in-page-layout'], fullHeight && styles['full-height']), children: [jsx("div", { className: styles.main, children: children }), isLg && (jsx("div", { className: styles.side, children: jsx("div", { className: styles.image, children: jsx(Image, { image: image, title: "" }) }) }))] }));
+    return (jsxs("div", { className: clsx(styles['sign-in-page-layout'], fullHeight && styles['full-height']), children: [jsx("section", { className: styles.main, children: children }), isLg && (jsx("div", { className: styles.side, children: jsx("div", { className: styles.image, children: jsx(Image, { image: image, title: "" }) }) }))] }));
 }
 
 export { SignInPageLayout };

package/dist/pages/account/sign-in-page/sign-in-page.js

@@ -2,13 +2,12 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState, useMemo } from 'react';
 import { RecoverPasswordDialog } from '../../../modals/recover-password/recover-password-dialog.js';
-import { useCreateGuestAccount } from '../../../shared/api/storefront/hooks/authentication/use-create-guest-account.js';
+import { useCreateGuestAccount } from '../../../shared/api/storefront/hooks/account/use-create-guest-account.js';
 import { useFetchSession } from '../../../shared/api/storefront/hooks/authentication/use-fetch-session.js';
 import { useSignIn } from '../../../shared/api/storefront/hooks/authentication/use-sign-in.js';
 import { isRequestError } from '../../../shared/fetch/request.js';
 import { useDisclosure } from '../../../shared/hooks/use-disclosure.js';
 import { useNavigate } from '../../../shared/routing/use-navigate.js';
-import { Page } from '../../components/page/page.js';
 import { PATHS } from '../../paths.js';
 import { SignInForm } from '../components/sign-in-form/sign-in-form.js';
 import { SignInPageLayout } from '../layouts/sign-in-page-layout/sign-in-page-layout.js';
@@ -57,7 +56,7 @@ function SignInPage({ returnUrl } = {}) {
     const onRecoverPasswordDialogOpen = () => {
         setRecoverPasswordDialogOpen(true);
     };
-    return (jsxs(Fragment, { children: [jsx(Page, { fullHeight: true, "data-test-selector": "signInPage", fluid: true, children: jsx(SignInPageLayout, { fullHeight: true, children: jsx(SignInForm, { allowGuestSignIn: allowGuestSignIn, createAccountPath: createAccountPath, errorType: errorType, initialEmail: session?.isGuest ? '' : session?.email, initialRememberMe: session?.rememberMe, isDisabled: !session || isSuccess, isPendingGuestSignIn: isPendingCreateGuest, isPendingUserSignIn: isPendingSignIn, onRecoverPasswordDialogOpen: onRecoverPasswordDialogOpen, onSubmit: onSubmit }) }) }), jsx(RecoverPasswordDialog, { isOpen: isRecoverPasswordDialogOpen, onOpenChange: isOpen => setRecoverPasswordDialogOpen(isOpen) })] }));
+    return (jsxs(Fragment, { children: [jsx(SignInPageLayout, { fullHeight: true, children: jsx(SignInForm, { allowGuestSignIn: allowGuestSignIn, createAccountPath: createAccountPath, errorType: errorType, initialEmail: session?.isGuest ? '' : session?.email, initialRememberMe: session?.rememberMe, isDisabled: !session || isSuccess, isPendingGuestSignIn: isPendingCreateGuest, isPendingUserSignIn: isPendingSignIn, onRecoverPasswordDialogOpen: onRecoverPasswordDialogOpen, onSubmit: onSubmit }) }), jsx(RecoverPasswordDialog, { isOpen: isRecoverPasswordDialogOpen, onOpenChange: isOpen => setRecoverPasswordDialogOpen(isOpen) })] }));
 }
 
 export { SignInPage };

package/dist/pages/checkout/components/billing-and-invoice-information.d.ts

@@ -1,7 +1,7 @@
-import { AddressType } from '../../../shared/model/address';
+import { Address } from '../../../shared/model/address';
 interface BillingAndInvoiceInformationProps {
-    billToAddress: AddressType;
-    shipToAddress: AddressType;
+    billToAddress: Address | undefined | null;
+    shipToAddress: Address | undefined | null;
 }
 export declare function BillingAndInvoiceInformation({ billToAddress, shipToAddress, }: BillingAndInvoiceInformationProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/pages/checkout/components/billing-and-invoice-information.js

@@ -7,7 +7,7 @@ import styles from './billing-and-invoice-information.module.css.js';
 
 function BillingAndInvoiceInformation({ billToAddress, shipToAddress, }) {
     const t = useFormattedMessage();
-    return (jsxs("div", { className: styles['billing-and-invoice-information'], children: [jsx("section", { className: styles.section, children: jsx(InfoDisplay, { id: "billing-address", label: t('Billing address'), value: jsx(AddressInfoDisplay, { address: billToAddress, "data-test-selector": "orderConfirmationBillingInformation" }) }) }), jsx("section", { className: styles.section, children: jsx(InfoDisplay, { id: "shipping-address", label: t('Shipping address'), value: jsx(AddressInfoDisplay, { address: shipToAddress, "data-test-selector": "orderConfirmationShippingInformation" }) }) })] }));
+    return (jsxs("div", { className: styles['billing-and-invoice-information'], children: [billToAddress && (jsx("section", { className: styles.section, children: jsx(InfoDisplay, { id: "billing-address", label: t('Billing address'), value: jsx(AddressInfoDisplay, { address: billToAddress, "data-test-selector": "orderConfirmationBillingInformation" }) }) })), shipToAddress && (jsx("section", { className: styles.section, children: jsx(InfoDisplay, { id: "shipping-address", label: t('Shipping address'), value: jsx(AddressInfoDisplay, { address: shipToAddress, "data-test-selector": "orderConfirmationShippingInformation" }) }) }))] }));
 }
 
 export { BillingAndInvoiceInformation };

package/dist/pages/checkout/order-confirmation-page/order-confirmation-page-content.js

@@ -56,26 +56,32 @@ function OrderConfirmationPageContent({ cart, }) {
                 secondary: (jsxs(Fragment, { children: [cart.canSaveOrder && (jsx(Button, { color: "secondary", onClick: () => {
                                 saveCartForLater.mutate({ cart });
                             }, variant: "outline", children: jsx(FormattedMessage, { id: "Save order" }) })), jsx(PrintButton, {})] })),
-            }, overview: jsx(CartTotals, { currencyCode: currencyCode, fulfillmentMethod: cart.fulfillmentMethod, orderNumber: cart.orderNumber, shippingCost: cart.shippingAndHandling, subtotal: cart.orderSubTotal, tax: cart.totalTax, total: cart.orderGrandTotal, vatPercentage: cart.cartLines?.[0]?.pricing?.vatRate }), children: jsxs("div", { children: [jsx(CheckoutPageSection, { hasBorder: false, title: t('General'), children: jsx(CheckoutPageSectionContent, { children: jsxs("div", { className: styles['general-order-info'], children: [cart.orderDate && (jsx(InfoDisplay, { id: "order-date", label: t('Order date'), value: formatDateToLocaleString(new Date(cart.orderDate), cultureCode) })), cart.requestedDeliveryDateDisplay && (jsx(InfoDisplay, { id: "requested-delivery-date", label: t('Requested delivery date'), value: formatDateToLocaleString(new Date(cart.requestedDeliveryDateDisplay.toString()), cultureCode) })), cart.poNumber && (jsx(InfoDisplay, { id: "po-number", label: t('PO Number'), value: cart.poNumber }))] }) }) }), jsx(CheckoutPageSection, { hasBorder: false, title: t('Billing and shipping information'), children: jsx(CheckoutPageSectionContent, { 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,
+            }, overview: jsx(CartTotals, { currencyCode: currencyCode, fulfillmentMethod: cart.fulfillmentMethod, orderNumber: cart.orderNumber, shippingCost: cart.shippingAndHandling, subtotal: cart.orderSubTotal, tax: cart.totalTax, total: cart.orderGrandTotal, vatPercentage: cart.cartLines?.[0]?.pricing?.vatRate }), children: jsxs("div", { children: [jsx(CheckoutPageSection, { hasBorder: false, title: t('General'), children: jsx(CheckoutPageSectionContent, { children: jsxs("div", { className: styles['general-order-info'], children: [cart.orderDate && (jsx(InfoDisplay, { id: "order-date", label: t('Order date'), value: formatDateToLocaleString(new Date(cart.orderDate), cultureCode) })), cart.requestedDeliveryDateDisplay && (jsx(InfoDisplay, { id: "requested-delivery-date", label: t('Requested delivery date'), value: formatDateToLocaleString(new Date(cart.requestedDeliveryDateDisplay.toString()), cultureCode) })), cart.poNumber && (jsx(InfoDisplay, { id: "po-number", label: t('PO Number'), value: cart.poNumber }))] }) }) }), jsx(CheckoutPageSection, { hasBorder: false, title: t('Billing and shipping information'), children: jsx(CheckoutPageSectionContent, { 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,
                                 } }) }) }), jsx(CheckoutPageSection, { hasBorder: false, title: t('Order'), children: jsx(CheckoutPageSectionContent, { stretch: true, children: jsx(OrderLineList, { children: cart.cartLines?.map(cartLine => (jsx(OrderLineCard, { deliveryDate: undefined, href: cartLine.productUri, image: {
                                         fit: 'contain',
                                         image: {

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';
@@ -321,26 +321,32 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
                 /* 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/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/hooks/use-patch-shipping-details.d.ts

@@ -13,4 +13,5 @@ export declare function usePatchShippingDetails(): {
         patchedCart: CartModel | undefined;
         patchedSession: SessionModel | undefined;
     }>;
+    reset: () => void;
 };

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/components/page-container/page-container.js

@@ -4,7 +4,7 @@ import resetStyles from '../../../shared/reset.module.css.js';
 import styles from './page-container.module.css.js';
 
 function PageContainer({ breadcrumbSlot, children, className, 'data-test-selector': dataTestSelector, fluid, fullHeight, titleSlot, }) {
-    return (jsx("div", { className: clsx(styles['page-container'], resetStyles.reset, fullHeight && styles['full-height'], fluid && styles['fluid'], className), "data-test-selector": dataTestSelector, children: jsxs("main", { className: styles['page-main'], children: [breadcrumbSlot && (jsx("div", { className: styles.breadcrumb, children: breadcrumbSlot })), titleSlot && jsx("div", { className: styles.title, children: titleSlot }), jsx("div", { className: styles.content, children: children })] }) }));
+    return (jsx("div", { className: clsx(styles['page-container'], resetStyles.reset, fullHeight && styles['full-height'], fluid && styles['fluid'], className), "data-test-selector": dataTestSelector, children: jsxs("div", { className: styles['page-main'], children: [breadcrumbSlot && (jsx("div", { className: styles.breadcrumb, children: breadcrumbSlot })), titleSlot && jsx("div", { className: styles.title, children: titleSlot }), jsx("div", { className: styles.content, children: children })] }) }));
 }
 
 export { PageContainer };

package/dist/pages/my-sonic/actions/change-customer/change-customer-dialog.d.ts

@@ -1,7 +1,8 @@
 import { BillToCollectionModel } from '../../../../shared/api/storefront/model/storefront.model';
 export interface ChangeCustomerDialogProps {
-    currentlySelectedCustomerId?: string;
+    allowSetDefault?: boolean;
     data?: BillToCollectionModel;
+    defaultCustomerId?: string;
     error?: Error | null | unknown;
     filter?: string;
     hasErrorSubmitting?: boolean;
@@ -9,7 +10,7 @@ export interface ChangeCustomerDialogProps {
     isOpen: boolean;
     isUpdating?: boolean;
     onClose: () => void;
-    onCustomerSelected: (id: string) => void;
+    onCustomerSelected: (id: string, setAsDefault: boolean) => void;
     onFilterChanged?: (filter: string) => void;
 }
-export declare function ChangeCustomerDialog({ currentlySelectedCustomerId, data, error, filter, hasErrorSubmitting, isLoading, isOpen, isUpdating, onClose, onCustomerSelected, onFilterChanged, }: ChangeCustomerDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChangeCustomerDialog({ allowSetDefault, data, defaultCustomerId, error, filter, hasErrorSubmitting, isLoading, isOpen, isUpdating, onClose, onCustomerSelected, onFilterChanged, }: ChangeCustomerDialogProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -8,17 +8,23 @@ import { Dialog } from '../../../../modals/dialog/dialog.js';
 import { ChangeCustomer } from './change-customer.js';
 import styles from './change-customer-dialog.module.css.js';
 
-function ChangeCustomerDialog({ currentlySelectedCustomerId, data, error, filter, hasErrorSubmitting, isLoading, isOpen, isUpdating = false, onClose, onCustomerSelected, onFilterChanged, }) {
+function ChangeCustomerDialog({ allowSetDefault = false, data, defaultCustomerId, error, filter, hasErrorSubmitting, isLoading, isOpen, isUpdating = false, onClose, onCustomerSelected, onFilterChanged, }) {
     const t = useFormattedMessage();
     const [hasCustomerSelected, setHasCustomerSelected] = useState(false);
     const [selectedCustomerId, setSelectedCustomerId] = useState();
-    return (jsx(Dialog, { allowSubmit: !hasErrorSubmitting && hasCustomerSelected, className: styles['change-customer-dialog'], isOpen: isOpen, isSubmitting: isUpdating || hasErrorSubmitting, onOpenChange: isOpen => !isOpen && onClose(), onSubmit: () => selectedCustomerId && onCustomerSelected(selectedCustomerId), title: t('Change customer'), children: hasErrorSubmitting ? (jsx(Message, { className: styles.error, type: "danger", children: jsx(FormattedMessage, { id: "An error occurred while changing the customer." }) })) : (jsx(ChangeCustomer, { className: styles.content, data: data, error: error, filter: filter, isLoading: isLoading, onCustomerSelected: id => {
+    const [setAsDefault, setSetAsDefault] = useState(false);
+    if (!isOpen && setAsDefault)
+        setSetAsDefault(false);
+    if (!isOpen)
+        return null;
+    return (jsx(Dialog, { allowSubmit: !hasErrorSubmitting && hasCustomerSelected, className: styles['change-customer-dialog'], isOpen: isOpen, isSubmitting: isUpdating || hasErrorSubmitting, onOpenChange: isOpen => !isOpen && onClose(), onSubmit: () => selectedCustomerId &&
+            onCustomerSelected(selectedCustomerId, setAsDefault), title: t('Change customer'), children: hasErrorSubmitting ? (jsx(Message, { className: styles.error, type: "danger", children: jsx(FormattedMessage, { id: "An error occurred while changing the customer." }) })) : (jsx(ChangeCustomer, { allowSetDefault: allowSetDefault, className: styles.content, data: data, defaultCustomerId: defaultCustomerId, error: error, filter: filter, isLoading: isLoading, onCustomerSelected: id => {
                 setSelectedCustomerId(id);
-                onCustomerSelected(id);
+                onCustomerSelected(id, setAsDefault);
             }, onCustomerSelectionChanged: id => {
                 setSelectedCustomerId(id);
                 setHasCustomerSelected(true);
-            }, onFilterChanged: onFilterChanged, selectedId: currentlySelectedCustomerId })) }));
+            }, onFilterChanged: onFilterChanged, onSetAsDefaultChange: setSetAsDefault, setAsDefault: setAsDefault })) }));
 }
 
 export { ChangeCustomerDialog };