@sonic-equipment/ui 156.0.0 → 158.0.0

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

@@ -0,0 +1,89 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+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 { SwitchField } from '../../../../forms/switch-field/switch-field.js';
+import { TextField } from '../../../../forms/text-field/text-field.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';
+
+function CreateAccountForm({ errorType, isDisabled: _isDisabled = false, isPendingCreateAccount, onSubmit, }) {
+    const t = useFormattedMessage();
+    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 = {
+        'Unexpected error': t('An unexpected error occured. Please try again.'),
+    };
+    const { countries, currentCountry: defaultSelectedCountry, isFetching: isLoadingCountries, } = useCountries({ enabled: true });
+    // form submit handler
+    const handleSubmit = ({ formData }) => {
+        const companyName = formData.get('companyName')?.toString() || '';
+        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 isSubscribed = Boolean(formData.get('isSubscribed'));
+        const isPrivateAccount = Boolean(formData.get('isPrivateAccount'));
+        const countryId = formData.get('countrySelect')?.toString();
+        const countryCode = countries?.find(country => country.id === countryId)?.abbreviation;
+        if (!isCountryCode(countryCode))
+            throw new Error('CountryCode value is required');
+        if (!email)
+            throw new Error('Email value is required');
+        if (!password)
+            throw new Error('Password value is required');
+        if (!isPrivateAccount && !companyName)
+            throw new Error('CompanyName value is required');
+        if (isPrivateAccount && !lastName)
+            throw new Error('LastName value is required');
+        onSubmit({
+            data: {
+                companyName,
+                countryCode,
+                email,
+                firstName,
+                isPrivateAccount,
+                isSubscribed,
+                lastName,
+                password,
+            },
+        });
+    };
+    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
+    const footer = (jsx(FormSegment, { children: jsx(Button, { "data-test-selector": "createAccount_createButton", isDisabled: isDisabled, isLoading: isPendingCreateAccount && 'Creating account...', type: "submit", withArrow: true, children: t('create account') }) }));
+    return (jsxs(Form, { "aria-label": title, autoComplete: true, className: styles['create-account-form'], errorMessage: errorType && errorMessages[errorType], footer: footer, header: header, onSubmit: handleSubmit, title: title, children: [jsxs(FormSegmentGroup, { children: [jsx(FormSegment, { children: jsx(TextField, { autoComplete: "username", "data-test-selector": "createAccount_email", inputMode: "email", isDisabled: isDisabled, isRequired: true, label: t('Email'), name: "email", type: "email", validate: value => {
+                                if (!value)
+                                    return value;
+                                return (validateEmail(value) || t('Please enter a valid email address'));
+                            } }) }), jsx(FormSegment, { children: jsx(TextField, { 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, type: "password", validate: value => {
+                                if (!value)
+                                    return;
+                                return (validatePassword(value) ||
+                                    t('Password does not meet requirements'));
+                            } }) }), jsx(FormSegment, { children: jsx(TextField, { 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, type: "password", 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') }) }) })] }));
+}
+
+export { CreateAccountForm };

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

@@ -0,0 +1,3 @@
+var styles = {"create-account-form":"create-account-form-module-TMU8F"};
+
+export { styles as default };

package/dist/{sign-in-form → pages/account/components/sign-in-form}/sign-in-form.d.ts

@@ -8,11 +8,11 @@ interface GuestLoginData {
     guestSignIn: true;
 }
 export type SubmitData = LoginData | GuestLoginData;
-export type ErrorMessage = 'Access denied' | 'Unexpected error';
+export type SignInErrorTypes = 'Access denied' | 'Unexpected error' | undefined;
 export interface SignInFormProps {
     allowGuestSignIn?: boolean;
     createAccountPath: string;
-    errorMessage?: ErrorMessage;
+    errorType?: SignInErrorTypes;
     initialEmail?: string;
     initialRememberMe?: boolean;
     isDisabled?: boolean;
@@ -23,5 +23,5 @@ export interface SignInFormProps {
         data: SubmitData;
     }) => void;
 }
-export declare function SignInForm({ allowGuestSignIn, createAccountPath, errorMessage, initialEmail, initialRememberMe, isDisabled: _isDisabled, isPendingGuestSignIn, isPendingUserSignIn, onRecoverPasswordDialogOpen, onSubmit, }: SignInFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function SignInForm({ allowGuestSignIn, createAccountPath, errorType, initialEmail, initialRememberMe, isDisabled: _isDisabled, isPendingGuestSignIn, isPendingUserSignIn, onRecoverPasswordDialogOpen, onSubmit, }: SignInFormProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,71 @@
+"use client";
+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 { SwitchField } from '../../../../forms/switch-field/switch-field.js';
+import { TextField } from '../../../../forms/text-field/text-field.js';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import { validateEmail } from '../../../../shared/model/address.js';
+import { voidFunction } from '../../../../shared/model/defaults.js';
+import { RouteLink } from '../../../../shared/routing/route-link.js';
+import { Heading } from '../../../../typography/heading/heading.js';
+import styles from './sign-in-form.module.css.js';
+
+const GUEST_SIGN_IN_BUTTON_NAME = 'guestSignin';
+function SignInForm({ allowGuestSignIn = false, createAccountPath, errorType, initialEmail, initialRememberMe, isDisabled: _isDisabled = false, isPendingGuestSignIn = false, isPendingUserSignIn = false, onRecoverPasswordDialogOpen = voidFunction, onSubmit = voidFunction, }) {
+    const t = useFormattedMessage();
+    const title = t('sign in');
+    const isDisabled = isPendingUserSignIn || isPendingGuestSignIn || _isDisabled;
+    // form submit handler
+    const handleSubmit = ({ formData, submitter }) => {
+        // in case of guest sign-in submit
+        if (submitter?.name === GUEST_SIGN_IN_BUTTON_NAME) {
+            return onSubmit({
+                data: {
+                    guestSignIn: true,
+                },
+            });
+        }
+        // regular sign-in
+        const email = formData.get('email')?.toString();
+        const password = formData.get('password')?.toString();
+        const rememberMe = Boolean(formData.get('rememberMe'));
+        if (!email)
+            throw new Error('Email value is required');
+        if (!password)
+            throw new Error('Password value is required');
+        onSubmit({
+            data: {
+                email,
+                guestSignIn: false,
+                password,
+                rememberMe,
+            },
+        });
+    };
+    // error message to display
+    const errorMessage = (function (type) {
+        switch (type) {
+            case undefined:
+                return;
+            case 'Access denied':
+                return t('Your email and password were not recognized.');
+            default:
+                return t('An unexpected error occured. Please try again.');
+        }
+    })(errorType);
+    // form header
+    const header = (jsx(Heading, { "data-test-selector": "PageTitle", italic: true, size: "m", tag: "h1", uppercase: true, children: title }));
+    // form footer
+    const footer = (jsxs(Fragment, { children: [jsx(FormSegment, { isFloating: true, children: jsx(SwitchField, { defaultSelected: initialRememberMe, isDisabled: isDisabled, name: "rememberMe", value: "true", children: t('Remember me') }) }), jsx(FormSegment, { children: jsx(Button, { "data-test-selector": "signIn_submit", isDisabled: isDisabled, isLoading: isPendingUserSignIn && t('Signing in…'), type: "submit", withArrow: true, children: t('sign in') }) }), jsxs(FormSegment, { children: [jsx("p", { className: styles['footer-options'], children: jsx(Link, { color: "primary", "data-test-selector": "signIn_forgotPassword", hasUnderline: true, isDisabled: isDisabled, onClick: onRecoverPasswordDialogOpen, children: t('Forgot password?') }) }), jsx("p", { className: styles['footer-options'], children: jsxs(Fragment, { children: [t('New user?'), ' ', jsx(RouteLink, { "data-test-selector": "signInCreateNewAccount_createNewAccount", hasUnderline: true, href: createAccountPath, isDisabled: isDisabled, children: t('create account') })] }) })] }), allowGuestSignIn && (jsx(FormSegment, { children: jsx(Button, { color: "secondary", isDisabled: isDisabled, isLoading: isPendingGuestSignIn && t('Signing in…'), isValidating: false, name: GUEST_SIGN_IN_BUTTON_NAME, type: "submit", value: "true", variant: "outline", children: t('Or continue as guest') }) }))] }));
+    return (jsx(Form, { autoComplete: true, className: styles['sign-in-form'], errorMessage: errorMessage, footer: footer, header: header, onSubmit: handleSubmit, title: title, children: jsxs(FormSegmentGroup, { children: [jsx(FormSegment, { children: jsx(TextField, { autoComplete: "username", "data-test-selector": "signIn_userName", defaultValue: initialEmail, inputMode: "email", isDisabled: isDisabled, isRequired: true, label: t('Email'), name: "email", showLabel: true, type: "email", validate: value => {
+                            if (!value)
+                                return value;
+                            return (validateEmail(value) || t('Please enter a valid email address'));
+                        } }) }), jsx(FormSegment, { children: jsx(TextField, { autoComplete: "current-password", "data-test-selector": "signIn_password", isDisabled: isDisabled, isRequired: true, label: t('Password'), name: "password", showLabel: true, type: "password" }) })] }) }));
+}
+
+export { SignInForm };

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

@@ -0,0 +1,3 @@
+var styles = {"sign-in-form":"sign-in-form-module-BoJwR","footer-options":"sign-in-form-module-PQ4Ik"};
+
+export { styles as default };

package/dist/pages/account/create-account-page/create-account-page.d.ts

@@ -0,0 +1,3 @@
+export declare function CreateAccountPage({ returnUrl }?: {
+    returnUrl?: string;
+}): import("react/jsx-runtime").JSX.Element | undefined;

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

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+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 { useFetchSession } from '../../../shared/api/storefront/hooks/authentication/use-fetch-session.js';
+import { ExistingAccountError } from '../../../shared/api/storefront/services/authentication-service.js';
+import { RouteButton } from '../../../shared/routing/route-button.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';
+import { SignInPageLayout } from '../layouts/sign-in-page-layout/sign-in-page-layout.js';
+
+function CreateAccountPage({ returnUrl } = {}) {
+    const { navigate } = useNavigate();
+    const { data: session, isLoading: isLoadingSession } = useFetchSession();
+    const { error: errorCreateAccount, isPending: isPendingCreateAccount, isSuccess, mutate: createAccount, } = useCreateAccount();
+    const isExistingAccount = errorCreateAccount instanceof ExistingAccountError;
+    const isDisabled = isSuccess || isExistingAccount;
+    const continuePath = returnUrl && returnUrl !== PATHS.ACCOUNT_CREATE ? returnUrl : PATHS.ACCOUNT;
+    const isReturnToShipping = returnUrl === PATHS.CHECKOUT_SHIPPING;
+    const onSubmit = ({ data }) => {
+        createAccount(data, {
+            onSuccess() {
+                if (isReturnToShipping)
+                    navigate(continuePath);
+            },
+        });
+    };
+    const errorType = useMemo(() => !errorCreateAccount || errorCreateAccount instanceof ExistingAccountError
+        ? undefined
+        : 'Unexpected error', [errorCreateAccount]);
+    if (isLoadingSession)
+        return jsx(LoadingPage, {});
+    if (session && session.isAuthenticated && !isSuccess && !isExistingAccount) {
+        // A user is already signed in (either as guest or not), redirect them
+        navigate(continuePath);
+        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(RouteButton, { color: "primary", href: continuePath, size: "md", withArrow: true, children: jsx(FormattedMessage, { id: "Continue" }) }), hasCloseButton: false, isDismissable: false, isKeyboardDismissDisabled: true, isOpen: isSuccess, 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(RouteButton, { color: "primary", href: `${PATHS.SIGN_IN}${returnUrl ? `?returnUrl=${returnUrl}` : ''}`, 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-background-image.d.ts

@@ -0,0 +1,6 @@
+export declare const SIGN_IN_PAGE_BACKGROUND_IMAGE: {
+    1: string;
+    2: string;
+    3: string;
+    altText: string;
+};

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

@@ -0,0 +1,9 @@
+// TODO: We need larger images
+const SIGN_IN_PAGE_BACKGROUND_IMAGE = {
+    1: 'https://res.cloudinary.com/dkz9eknwh/image/upload/w_1658,h_1008/v1740665245/images/sign-in-page.webp',
+    2: 'https://res.cloudinary.com/dkz9eknwh/image/upload/w_1658,h_1008/v1740665245/images/sign-in-page.webp',
+    3: 'https://res.cloudinary.com/dkz9eknwh/image/upload/w_1658,h_1008/v1740665245/images/sign-in-page.webp',
+    altText: '',
+};
+
+export { SIGN_IN_PAGE_BACKGROUND_IMAGE };

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

@@ -3,6 +3,6 @@ import { ImageType } from '../../../../shared/model/image';
 export interface SignInPageLayoutProps {
     children?: ReactNode;
     fullHeight?: boolean;
-    image: ImageType;
+    image?: ImageType;
 }
 export declare function SignInPageLayout({ children, fullHeight, image, }: SignInPageLayoutProps): import("react/jsx-runtime").JSX.Element;

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

@@ -2,9 +2,10 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useIsBreakpoint } from '../../../../shared/hooks/use-is-breakpoint.js';
 import { Image } from '../../../../media/image/image.js';
+import { SIGN_IN_PAGE_BACKGROUND_IMAGE } from './sign-in-page-background-image.js';
 import styles from './sign-in-page-layout.module.css.js';
 
-function SignInPageLayout({ children, fullHeight, image, }) {
+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: "" }) }) }))] }));
 }

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

@@ -7,18 +7,11 @@ import { useSignIn } from '../../../shared/api/storefront/hooks/authentication/u
 import { isRequestError } from '../../../shared/fetch/request.js';
 import { useDisclosure } from '../../../shared/hooks/use-disclosure.js';
 import { useNavigate } from '../../../shared/routing/use-navigate.js';
-import { SignInForm } from '../../../sign-in-form/sign-in-form.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';
 
-// TODO: We need larger images
-const IMAGE = {
-    1: 'https://res.cloudinary.com/dkz9eknwh/image/upload/w_1658,h_1008/v1740665245/images/sign-in-page.webp',
-    2: 'https://res.cloudinary.com/dkz9eknwh/image/upload/w_1658,h_1008/v1740665245/images/sign-in-page.webp',
-    3: 'https://res.cloudinary.com/dkz9eknwh/image/upload/w_1658,h_1008/v1740665245/images/sign-in-page.webp',
-    altText: '',
-};
 function SignInPage({ returnUrl } = {}) {
     const { navigate } = useNavigate();
     const [isSuccess, setIsSuccess] = useState(false);
@@ -26,7 +19,7 @@ function SignInPage({ returnUrl } = {}) {
     const { data: session } = useFetchSession();
     const { error: errorSignIn, isPending: isPendingSignIn, mutate: signIn, reset: resetSignIn, } = useSignIn();
     const { error: errorCreateGuest, isPending: isPendingCreateGuest, mutate: createGuest, reset: resetCreateGuest, } = useCreateGuestAccount();
-    const errorMessage = useMemo(() => {
+    const errorType = useMemo(() => {
         const error = errorSignIn || errorCreateGuest;
         if (!error)
             return undefined;
@@ -63,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, image: IMAGE, children: jsx(SignInForm, { allowGuestSignIn: allowGuestSignIn, createAccountPath: createAccountPath, errorMessage: errorMessage, 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(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) })] }));
 }
 
 export { SignInPage };

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

@@ -55,7 +55,7 @@ function OrderConfirmationPageContent({ cart, }) {
                 secondary: (jsxs(Fragment, { children: [cart.canSaveOrder && (jsx(RouteButton, { color: "secondary", onClick: () => {
                                 saveCartForLater.mutate({ cart });
                             }, variant: "outline", children: jsx(FormattedMessage, { id: "Save order" }) })), jsx(PrintButton, {})] })),
-            }, overview: jsx(CartTotals, { currencyCode: currencyCode, fulfillmentMethod: t(`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: {
+            }, 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,

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

@@ -33,6 +33,7 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
     const { sendPurchaseEventFromPaymentPage } = useAlgoliaInsights();
     const invalidateCurrentCart = useInvalidateCurrentCart();
     const dropinRef = useRef(null);
+    const hasReturnedFromAdyen = useHasReturnedFromAdyen();
     const [paymentError, setPaymentError] = useState();
     const [apiError, setAPIError] = useState();
     const invalidateAdyen = useInvalidateAdyen();
@@ -40,7 +41,7 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
     const cartRef = useRef(_cart);
     const cart = cartRef.current;
     const hasAtp = atp.length > 1;
-    const [asSoonAsPossible, setAsSoonAsPossible] = useState(!hasAtp);
+    const [asSoonAsPossible, setAsSoonAsPossible] = useState(!hasAtp || (hasReturnedFromAdyen && !cart.requestedDeliveryDate));
     const [deliveryDate, setDeliveryDate] = useState(cart.requestedDeliveryDateDisplay?.toString() || '');
     const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(cart.paymentOptions?.paymentMethods?.[0]?.name || 'ADY');
     if (!isCountryCode(_cart.billTo?.country?.abbreviation))
@@ -54,7 +55,6 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
         cart.paymentOptions &&
         cart.billTo?.id &&
         countryCode;
-    const hasReturnedFromAdyen = useHasReturnedFromAdyen();
     const isDisabled = isProcessing;
     useEffect(() => {
         if (!hasReturnedFromAdyen)
@@ -187,6 +187,7 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
             industry: formData.get('industry')?.toString() || '',
         };
         cart.requestedDeliveryDate = formData.get('deliveryDate')?.toString();
+        cart.requestedDeliveryDateDisplay = undefined;
         if (cart.customerVatNumber &&
             lastVATNumber.current !== cart.customerVatNumber &&
             !(await validateVAT(cart.customerVatNumber)))
@@ -299,11 +300,11 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
     return (jsxs(Form, { className: styles['payment-form'], "data-test-selector": "paymentForm", id: form, onSubmit: e => {
             e.preventDefault();
             onSubmit(e);
-        }, validationErrors: validationErrors, children: [Boolean(apiError) && (jsx("div", { className: styles['error-message'], children: jsx(FormattedMessage, { id: "An unexpected error occured" }) })), hasAtp && (jsxs("div", { className: styles['delivery-date'], children: [jsx(Select, { showLabel: true, "data-test-selector": "deliveryDateSelect", isDisabled: isDisabled || asSoonAsPossible, isRequired: !asSoonAsPossible, label: t('Select a desired delivery date'), name: "deliveryDate", onChange: setDeliveryDate, options: atpSelectOptions, selectedOption: deliveryDate, variant: "solid" }, String(asSoonAsPossible)), jsxs("div", { className: styles['asap-checkbox'], children: [jsx(Checkbox, { "data-test-selector": "asapCheckbox", isDisabled: isDisabled, isSelected: asSoonAsPossible, onChange: checked => {
+        }, validationErrors: validationErrors, children: [Boolean(apiError) && (jsx("div", { className: styles['error-message'], children: jsx(FormattedMessage, { id: "An unexpected error occured" }) })), hasAtp && (jsxs("div", { className: styles['delivery-date'], children: [jsx(Select, { showLabel: true, "data-test-selector": "deliveryDateSelect", defaultSelectedOption: deliveryDate, isDisabled: isDisabled || asSoonAsPossible, isRequired: !asSoonAsPossible, label: t('Select a desired delivery date'), name: "deliveryDate", onChange: setDeliveryDate, options: atpSelectOptions, selectedOption: deliveryDate, variant: "solid" }, String(asSoonAsPossible)), jsxs("div", { className: styles['asap-checkbox'], children: [jsx(Checkbox, { "data-test-selector": "asapCheckbox", isDisabled: isDisabled || Boolean(cart.requestedDeliveryDateDisplay), isSelected: asSoonAsPossible, onChange: checked => {
                                     setAsSoonAsPossible(checked);
                                     if (checked)
                                         setDeliveryDate('');
-                                }, children: jsx(FormattedMessage, { id: "As soon as possible" }) }), jsx(InfoIconTooltip, { variant: "stroke", children: t('Selecting As Soon As Possible will enable us to send the products to you as they become available.') })] })] })), jsx(Select, { isRequired: true, "data-test-selector": "industrySelect", defaultSelectedOption: cart.properties.industry, isDisabled: isDisabled, label: t('Industry'), name: "industry", options: {
+                                }, children: t('As soon as possible') }), jsx(InfoIconTooltip, { variant: "stroke", children: t('Selecting As Soon As Possible will enable us to send the products to you as they become available.') })] })] })), jsx(Select, { isRequired: true, "data-test-selector": "industrySelect", defaultSelectedOption: cart.properties.industry, isDisabled: isDisabled, label: t('Industry'), name: "industry", options: {
                     /* eslint-disable sort-keys-fix/sort-keys-fix */
                     PP: 'Private User',
                     AU: 'Automotive',
@@ -315,7 +316,7 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
                     MA: 'Maritime',
                     OT: 'Other',
                     /* eslint-enable sort-keys-fix/sort-keys-fix */
-                }, 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'), 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: 
                 /* eslint-disable ssr-friendly/no-dom-globals-in-react-fc */
                 typeof window === 'undefined'
                     ? ''

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

@@ -18,7 +18,7 @@ function ShippingPageContent({ cart, editAddress, errorPatchBillingAddress, fulf
     const t = useFormattedMessage();
     const fulfillmentMethodOptions = fulfillmentMethods?.reduce((acc, method) => ({
         ...acc,
-        [method]: t(`fulfillmentMethod.${method}`),
+        [method]: t(`fulfillmentmethod.${method}`),
     }), {});
     const hasBillToAddress = Boolean(cart.billTo?.address1);
     const currencyCode = getCurrencyCodeBySymbol(cart.currencySymbol);

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

@@ -39,7 +39,7 @@ function ShippingPage() {
     const isAuthenticated = session?.isAuthenticated;
     const isLoading = isLoadingCart || isLoadingCountries || isLoadingFulfillmentMethods;
     const { isNavigating, navigate } = useNavigate();
-    const isPickup = cart?.fulfillmentMethod === 'PickUp';
+    const isPickup = Boolean(cart?.fulfillmentMethod.match(/pickup/i));
     useEffect(() => {
         /* Initial guards. When these are not met, we should not proceed */
         if (isNavigating)

package/dist/shared/api/storefront/hooks/authentication/use-create-account.d.ts

@@ -0,0 +1,3 @@
+import { AccountModel } from 'shared/api/storefront/model/storefront.model';
+import { CreateAccountRequestBody } from 'shared/api/storefront/services/authentication-service';
+export declare function useCreateAccount(): import("@tanstack/react-query").UseMutationResult<AccountModel, Error, CreateAccountRequestBody, unknown>;

package/dist/shared/api/storefront/hooks/authentication/use-create-account.js

@@ -0,0 +1,28 @@
+import { useQueryClient, useMutation } from '@tanstack/react-query';
+import { createAccount, createSession } from '../../services/authentication-service.js';
+
+function useCreateAccount() {
+    const queryClient = useQueryClient();
+    return useMutation({
+        mutationFn: async (account) => {
+            try {
+                const body = await createAccount(account);
+                const updatedSession = await createSession({
+                    accessToken: '',
+                    isGuest: false,
+                    password: account.password,
+                    rememberMe: false,
+                    userName: body.userName,
+                });
+                queryClient.setQueriesData({ exact: true, queryKey: ['session'] }, updatedSession);
+                return body;
+            }
+            catch (error) {
+                queryClient.resetQueries();
+                throw error;
+            }
+        },
+    });
+}
+
+export { useCreateAccount };

package/dist/shared/api/storefront/services/authentication-service.d.ts

@@ -1,3 +1,4 @@
+import { RequestError } from '../../../fetch/request';
 import { AccountModel, PatchSessionModel, SessionModel } from '../model/storefront.model';
 export declare function fetchSession(): Promise<SessionModel>;
 export declare function patchSession({ session, }: {
@@ -31,3 +32,25 @@ export declare function createGuestAccount({ defaultWarehouseId, }: {
 export declare function recoverPassword({ userName, }: {
     userName: string;
 }): Promise<SessionModel>;
+export declare class ExistingAccountError extends RequestError {
+    constructor(error: Error);
+}
+export interface CreateAccountRequestBase {
+    email: string;
+    firstName?: string;
+    isSubscribed: boolean;
+    lastName: string;
+    password: string;
+}
+export interface CreatePrivateAccountRequestBody extends CreateAccountRequestBase {
+    companyName?: string | undefined;
+    countryCode: string;
+    isPrivateAccount: true;
+}
+export interface CreateBusinessAccountRequestBody extends CreateAccountRequestBase {
+    companyName: string;
+    countryCode: string;
+    isPrivateAccount: false;
+}
+export type CreateAccountRequestBody = CreatePrivateAccountRequestBody | CreateBusinessAccountRequestBody;
+export declare function createAccount({ companyName, countryCode, email, firstName, isPrivateAccount, isSubscribed, lastName, password, }: CreateAccountRequestBody): Promise<AccountModel>;

package/dist/shared/api/storefront/services/authentication-service.js

@@ -1,5 +1,5 @@
 import { config } from '../../../../config.js';
-import { request } from '../../../fetch/request.js';
+import { request, RequestError, isRequestError } from '../../../fetch/request.js';
 
 async function fetchSession() {
     const { body } = await request({
@@ -92,5 +92,43 @@ async function recoverPassword({ userName, }) {
     });
     return body;
 }
+class ExistingAccountError extends RequestError {
+    constructor(error) {
+        super(error);
+        this.name = 'ExistingAccountError';
+    }
+}
+async function createAccount({ companyName, countryCode, email, firstName, isPrivateAccount, isSubscribed, lastName, password, }) {
+    try {
+        const { body } = await request({
+            body: {
+                email,
+                firstName,
+                isSubscribed,
+                lastName,
+                password,
+                properties: {
+                    PrivateAccount: isPrivateAccount,
+                    companyName,
+                    country: countryCode,
+                },
+                userName: '',
+            },
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            method: 'POST',
+            url: `${config.SHOP_API_URL}/api/v1/accounts`,
+        });
+        return body;
+    }
+    catch (error) {
+        if (isRequestError(error) &&
+            error.status === 400 &&
+            error.body?.message === 'Email Address already exists')
+            throw new ExistingAccountError(error);
+        throw error;
+    }
+}
 
-export { createGuestAccount, createSession, fetchSession, patchSession, recoverPassword, signIn, signOut };
+export { ExistingAccountError, createAccount, createGuestAccount, createSession, fetchSession, patchSession, recoverPassword, signIn, signOut };

package/dist/shared/hooks/use-script.d.ts

@@ -1,13 +1,13 @@
-interface UseScriptCodeBaseProps {
+interface UseScriptCodePropsBase {
     async?: boolean;
     enabled?: boolean;
     type?: 'module' | 'text/javascript';
 }
-interface UseScriptCodeProps extends UseScriptCodeBaseProps {
+interface UseScriptCodeProps extends UseScriptCodePropsBase {
     code: string;
     nonce?: string;
 }
-interface UseScriptUrlProps extends UseScriptCodeBaseProps {
+interface UseScriptUrlProps extends UseScriptCodePropsBase {
     src: string;
 }
 type UseScriptProps = UseScriptUrlProps | UseScriptCodeProps;

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

@@ -0,0 +1,19 @@
+export declare const validatePassword: (value: string) => boolean;
+export interface AccountBase {
+    email: string;
+    firstName?: string;
+    isSubscribed: boolean;
+    lastName: string;
+    password: string;
+}
+export interface PrivateAccount extends AccountBase {
+    companyName?: string | undefined;
+    countryCode: string;
+    isPrivateAccount: true;
+}
+export interface BusinessAccount extends AccountBase {
+    companyName: string;
+    countryCode: string;
+    isPrivateAccount: false;
+}
+export type Account = PrivateAccount | BusinessAccount;

package/dist/shared/model/account.js

@@ -0,0 +1,4 @@
+const passwordRequirementsRegExp = new RegExp(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*\W).{8,}$/);
+const validatePassword = (value) => passwordRequirementsRegExp.test(value);
+
+export { validatePassword };