@sonic-equipment/ui 0.0.119 → 1.0.0

package/dist/pages/account/components/change-password-form/change-password-form.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Button } from '../../../../buttons/button/button.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 { DynamicLoadingOverlay } from '../../../../loading/dynamic-loading-overlay.js';
+import { voidFunction } from '../../../../shared/model/defaults.js';
+import { Heading } from '../../../../typography/heading/heading.js';
+import { ChangePassword } from '../../../my-sonic/actions/change-password/change-password.js';
+
+function ChangePasswordForm({ errorType, isDisabled: _isDisabled = false, isLoading = false, isPendingChangingPassword = false, onSubmit = voidFunction, }) {
+    const t = useFormattedMessage();
+    const title = t('Change password');
+    const isDisabled = isPendingChangingPassword || _isDisabled;
+    // form submit handler
+    const handleSubmit = ({ formData }) => {
+        // const currentPassword = formData.get('current-password')?.toString()
+        const newPassword = formData.get('new-password')?.toString();
+        if (!newPassword)
+            throw new Error('Password values are required');
+        onSubmit({
+            data: {
+                newPassword,
+            },
+        });
+    };
+    // error message to display
+    const errorMessage = (function (type) {
+        switch (type) {
+            case undefined:
+                return;
+            case 'User Not Found':
+                return t('The user to change the password for could not be found. Please, reset your password again, or contact Customer Support.');
+            case 'Invalid Token':
+                return t('The password could not be changed. Please, reset your password again, or contact Customer Support.');
+            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 = (jsx(FormSegment, { children: jsx(Button, { "data-test-selector": "changePassword_submit", isDisabled: isDisabled, isLoading: isPendingChangingPassword && t('Changing password…'), type: "submit", withArrow: true, children: t('Change password') }) }));
+    return (jsx(Form, { autoComplete: true, errorMessage: errorMessage, footer: footer, header: header, onSubmit: handleSubmit, title: title, children: jsx(DynamicLoadingOverlay, { isLoading: isLoading, children: jsx(FormSegmentGroup, { children: jsx(ChangePassword, { isDisabled: isDisabled, requireCurrentPassword: false }) }) }) }));
+}
+
+export { ChangePasswordForm };

package/dist/pages/account/components/create-account-form/create-account-form.d.ts

@@ -0,0 +1,11 @@
+import { Account } from '../../../../shared/model/account';
+export type CreateAccountErrorType = 'Unexpected error';
+export interface CreateAccountFormProps {
+    errorType?: CreateAccountErrorType;
+    isDisabled?: boolean;
+    isPendingCreateAccount?: boolean;
+    onSubmit: (args: {
+        data: Account;
+    }) => void;
+}
+export declare function CreateAccountForm({ errorType, isDisabled: _isDisabled, isPendingCreateAccount, onSubmit, }: CreateAccountFormProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,75 @@
+"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 { 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 { 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 [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('new-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,
+            },
+        });
+    };
+    // 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(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/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/pages/account/components/sign-in-form/sign-in-form.d.ts

@@ -0,0 +1,28 @@
+interface LoginData {
+    email: string;
+    guestSignIn: false;
+    password: string;
+    rememberMe: boolean;
+}
+interface GuestLoginData {
+    guestSignIn: true;
+}
+export type SignInSubmitData = LoginData | GuestLoginData;
+export type SignInErrorTypes = 'Access denied' | 'Account locked' | 'Unexpected error' | 'Unprocessable entity' | undefined;
+export interface SignInFormProps {
+    allowGuestSignIn?: boolean;
+    createAccountPath: string;
+    errorType?: SignInErrorTypes;
+    initialEmail?: string;
+    initialRememberMe?: boolean;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    isPendingGuestSignIn?: boolean;
+    isPendingUserSignIn?: boolean;
+    onRecoverPasswordDialogOpen?: () => void;
+    onSubmit?: ({ data }: {
+        data: SignInSubmitData;
+    }) => void;
+}
+export declare function SignInForm({ allowGuestSignIn, createAccountPath, errorType, initialEmail, initialRememberMe, isDisabled: _isDisabled, isLoading, 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,77 @@
+"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 { 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 { DynamicLoadingOverlay } from '../../../../loading/dynamic-loading-overlay.js';
+import { validateEmail } from '../../../../shared/model/address.js';
+import { voidFunction } from '../../../../shared/model/defaults.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, isLoading = 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.');
+            case 'Account locked':
+                return t('Your account is temporarily locked. Please try again later or contact Customer Support.');
+            case 'Unprocessable entity':
+                return; // a Change Password dialog is shown
+            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(Link, { "data-test-selector": "signInCreateNewAccount_createNewAccount", hasUnderline: true, href: createAccountPath, isDisabled: isDisabled, children: t('Create account') })] }) })] }), allowGuestSignIn && (jsx(FormSegment, { children: jsx(Button, { color: "secondary", "data-test-selector": "continueAsGuest", 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: jsx(DynamicLoadingOverlay, { isLoading: isLoading, 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(PasswordField, { autoComplete: "current-password", "data-test-selector": "signIn_password", isDisabled: isDisabled, isRequired: true, label: t('Password'), name: "password", showLabel: true }) })] }) }) }));
+}
+
+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,51 @@
+"use client";
+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/account/use-create-account.js';
+import { useFetchSession } from '../../../shared/api/storefront/hooks/authentication/use-fetch-session.js';
+import { ExistingAccountError } from '../../../shared/api/storefront/services/account-service.js';
+import { useNavigate } from '../../../shared/routing/use-navigate.js';
+import { usePaths } from '../../../shared/routing/use-paths.js';
+import { LoadingPage } from '../../loading-page/loading-page.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 paths = usePaths();
+    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;
+    let continuePath = paths.ACCOUNT;
+    let isReturnToShipping = false;
+    if (returnUrl) {
+        const decodedReturnUrl = decodeURIComponent(returnUrl).toLowerCase();
+        continuePath = returnUrl;
+        isReturnToShipping = decodedReturnUrl.includes(paths.CHECKOUT_SHIPPING.toLowerCase());
+    }
+    const onSubmit = ({ data }) => {
+        createAccount(data, {
+            onSuccess() {
+                if (isReturnToShipping)
+                    navigate(continuePath, { reload: true });
+            },
+        });
+    };
+    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, { reload: true });
+        return;
+    }
+    return (jsxs(Fragment, { children: [jsx(SignInPageLayout, { fullHeight: true, "data-test-selector": "create-account-page", 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-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

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { ImageType } from '../../../../shared/model/image';
+export interface SignInPageLayoutProps {
+    children?: ReactNode;
+    'data-test-selector': string;
+    fullHeight?: boolean;
+    image?: ImageType;
+}
+export declare function SignInPageLayout({ children, 'data-test-selector': dataTestSelector, fullHeight, image, }: SignInPageLayoutProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,12 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+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, 'data-test-selector': dataTestSelector, fullHeight, image = SIGN_IN_PAGE_BACKGROUND_IMAGE, }) {
+    return (jsxs("div", { className: clsx(styles['sign-in-page-layout'], fullHeight && styles['full-height']), "data-test-selector": dataTestSelector, children: [jsx("section", { className: styles.main, children: children }), jsx("div", { className: styles.side, children: jsx("div", { className: styles.image, children: jsx(Image, { image: image, title: "" }) }) })] }));
+}
+
+export { SignInPageLayout };

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

@@ -0,0 +1,3 @@
+var styles = {"sign-in-page-layout":"sign-in-page-layout-module-Z1oE2","full-height":"sign-in-page-layout-module-D5yqX","main":"sign-in-page-layout-module-s6x7v","side":"sign-in-page-layout-module-W-FMF","image":"sign-in-page-layout-module-cbE8y"};
+
+export { styles as default };

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

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

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

@@ -0,0 +1,103 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useMemo } from 'react';
+import { FormattedMessage } from '../../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
+import { RecoverPasswordDialog } from '../../../modals/recover-password/recover-password-dialog.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 { usePatchSession } from '../../../shared/api/storefront/hooks/authentication/use-patch-session.js';
+import { useSignIn } from '../../../shared/api/storefront/hooks/authentication/use-sign-in.js';
+import { InvalidEmailPasswordCombinationError, AccountLockedOutError } from '../../../shared/api/storefront/services/authentication-service.js';
+import { UnprocessableContentRequestError } from '../../../shared/fetch/request.js';
+import { useDisclosure } from '../../../shared/hooks/use-disclosure.js';
+import { useNavigate } from '../../../shared/routing/use-navigate.js';
+import { usePaths } from '../../../shared/routing/use-paths.js';
+import { useToast } from '../../../toast/use-toast.js';
+import { ChangePasswordDialog } from '../../my-sonic/actions/change-password/change-password-dialog.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';
+
+function SignInPage({ returnUrl } = {}) {
+    const paths = usePaths();
+    const { navigate } = useNavigate();
+    const [userName, setUserName] = useState();
+    const [rememberMe, setRememberMe] = useState(false);
+    const [isSuccess, setIsSuccess] = useState(false);
+    const { isOpen: isRecoverPasswordDialogOpen, setIsOpen: setRecoverPasswordDialogOpen, } = useDisclosure(false);
+    const { isOpen: isChangePasswordDialogOpen, setIsOpen: setChangePasswordDialogOpen, } = useDisclosure(false);
+    const { data: session, isLoading } = useFetchSession();
+    const t = useFormattedMessage();
+    const { addToast } = useToast();
+    /* Sign in */
+    const { error: errorSignIn, isPending: isPendingSignIn, mutate: signIn, reset: resetSignIn, } = useSignIn();
+    const { error: errorCreateGuest, isPending: isPendingCreateGuest, mutate: createGuest, reset: resetCreateGuest, } = useCreateGuestAccount();
+    const signInErrorType = useMemo(() => {
+        const error = errorSignIn || errorCreateGuest;
+        if (!error)
+            return undefined;
+        if (errorCreateGuest)
+            return 'Unexpected error';
+        if (error instanceof InvalidEmailPasswordCombinationError)
+            return 'Access denied';
+        if (error instanceof AccountLockedOutError)
+            return 'Account locked';
+        if (error instanceof UnprocessableContentRequestError) {
+            setChangePasswordDialogOpen(true);
+            return 'Unprocessable entity';
+        }
+        return 'Unexpected error';
+    }, [errorCreateGuest, errorSignIn, setChangePasswordDialogOpen]);
+    const onSignInSuccess = () => {
+        setIsSuccess(true);
+        navigate(returnUrl || paths.HOME, { reload: true });
+    };
+    const decodedReturnUrl = returnUrl
+        ? decodeURIComponent(returnUrl).toLowerCase()
+        : undefined;
+    const allowGuestSignIn = !!decodedReturnUrl?.includes(paths.CHECKOUT_SHIPPING.toLowerCase());
+    const createAccountPath = `${paths.ACCOUNT_CREATE}${returnUrl ? `?returnUrl=${encodeURIComponent(returnUrl)}` : ''}`;
+    const onSignIn = ({ data }) => {
+        resetSignIn();
+        resetCreateGuest();
+        if (data.guestSignIn) {
+            if (session?.isGuest && session.isAuthenticated)
+                return onSignInSuccess();
+            createGuest(void undefined, { onSuccess: onSignInSuccess });
+        }
+        else {
+            setUserName(data.email);
+            setRememberMe(data.rememberMe);
+            signIn({
+                password: data.password,
+                rememberMe: data.rememberMe,
+                userName: data.email,
+            }, { onSuccess: onSignInSuccess });
+        }
+    };
+    // Change password
+    const { error: errorChangePassword, isLoading: isSessionUpdating, mutate: changePassword, } = usePatchSession();
+    const onChangePassword = async (currentPassword, newPassword) => {
+        await changePassword({
+            session: {
+                newPassword,
+                password: currentPassword,
+                userName: userName || '',
+            },
+        });
+        addToast({
+            body: jsx(FormattedMessage, { id: "Password changed. Please sign in again." }),
+            isUserDismissable: false,
+            messageType: 'success',
+        });
+        setChangePasswordDialogOpen(false);
+        signIn({
+            password: newPassword,
+            rememberMe,
+            userName: userName || '',
+        }, { onSuccess: onSignInSuccess });
+    };
+    return (jsxs(Fragment, { children: [jsx(SignInPageLayout, { fullHeight: true, "data-test-selector": "signInPage", children: jsx(SignInForm, { allowGuestSignIn: allowGuestSignIn, createAccountPath: createAccountPath, errorType: signInErrorType, initialEmail: session?.isGuest ? '' : session?.email, initialRememberMe: session?.rememberMe, isDisabled: !session || isSuccess, isLoading: isLoading, isPendingGuestSignIn: isPendingCreateGuest, isPendingUserSignIn: isPendingSignIn, onRecoverPasswordDialogOpen: () => setRecoverPasswordDialogOpen(true), onSubmit: onSignIn }) }), jsx(RecoverPasswordDialog, { isOpen: isRecoverPasswordDialogOpen, onOpenChange: isOpen => setRecoverPasswordDialogOpen(isOpen) }), jsx(ChangePasswordDialog, { allowClose: true, error: errorChangePassword, informationalText: t('You are required to change your password and then sign in again, using your new credentials.'), isOpen: isChangePasswordDialogOpen, isUpdating: isSessionUpdating, onClose: () => setChangePasswordDialogOpen(false), onPasswordChanged: onChangePassword, userName: userName })] }));
+}
+
+export { SignInPage };

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

@@ -0,0 +1,133 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Button } from '../../../buttons/button/button.js';
+import { ConnectedOrderLineCard } from '../../../cards/orderline-card/connected-orderline-card.js';
+import { CartTotals } from '../../../cart-totals/cart-totals.js';
+import { CartTotalsSummary } from '../../../cart-totals/cart-totals-summary.js';
+import { FormattedMessage } from '../../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
+import { OrderLineList } from '../../../lists/orderline-list/orderline-list.js';
+import { CheckoutPageLayout } from '../layouts/checkout-page-layout/checkout-page-layout.js';
+import { Page } from '../../components/page/page.js';
+import { ErrorPage } from '../../error-page/error-page.js';
+import { LoadingPage } from '../../loading-page/loading-page.js';
+import { useDeleteCartLineById } from '../../../shared/api/storefront/hooks/cart/use-delete-cart-line-by-id.js';
+import { useDeleteCurrentCart } from '../../../shared/api/storefront/hooks/cart/use-delete-current-cart.js';
+import { useFetchCurrentCartLinesWithAtp } from '../../../shared/api/storefront/hooks/cart/use-fetch-current-cart-lines-with-atp.js';
+import { useFetchCurrentCartWithAtp } from '../../../shared/api/storefront/hooks/cart/use-fetch-current-cart-with-atp.js';
+import { getCurrencyCodeBySymbol } from '../../../shared/model/currency.js';
+import { usePaths } from '../../../shared/routing/use-paths.js';
+import { ensureNumber } from '../../../shared/utils/number.js';
+import { useToast } from '../../../toast/use-toast.js';
+import { EmptyCart } from './components/empty-cart-page.js';
+
+function CartContent({ cartLines }) {
+    const paths = usePaths();
+    const { addToast } = useToast();
+    const { data: currentCart } = useFetchCurrentCartWithAtp();
+    // const saveCartForLater = useSaveCartForLater({
+    //   onError: () => {
+    //     addToast({
+    //       body: <FormattedMessage id="Unable to save cart for later." />,
+    //       isUserDismissable: false,
+    //       messageType: 'danger',
+    //     })
+    //   },
+    //   onSuccess: () => {
+    //     addToast({
+    //       body: <FormattedMessage id="Saved cart for later." />,
+    //       isUserDismissable: false,
+    //       messageType: 'success',
+    //     })
+    //   },
+    // })
+    const deleteCurrentCart = useDeleteCurrentCart({
+        onError: () => {
+            addToast({
+                body: jsx(FormattedMessage, { id: "Unable to empty your cart." }),
+                isUserDismissable: false,
+                messageType: 'danger',
+            });
+        },
+        onSuccess: () => {
+            addToast({
+                body: jsx(FormattedMessage, { id: "Your cart has been emptied." }),
+                isUserDismissable: false,
+                messageType: 'success',
+            });
+        },
+    });
+    const deleteCartLine = useDeleteCartLineById({
+        onError: () => {
+            addToast({
+                body: (jsx(FormattedMessage, { id: "Unable to remove the product from your cart." })),
+                isUserDismissable: false,
+                messageType: 'danger',
+            });
+        },
+        onSuccess: () => {
+            addToast({
+                body: (jsx(FormattedMessage, { id: "The product has been removed from your cart." })),
+                isUserDismissable: false,
+                messageType: 'success',
+            });
+        },
+    });
+    // const isAuthenticated = useIsAuthenticated()
+    if (!currentCart)
+        return null;
+    const currencyCode = getCurrencyCodeBySymbol(currentCart.currencySymbol);
+    if (!currencyCode)
+        throw new Error(`Currency code not found for symbol ${currentCart.currencySymbol}`);
+    return (jsx(CheckoutPageLayout, { actions: {
+            primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutShippingCartTotalContinueButton", href: paths.CHECKOUT_SHIPPING, children: jsx(FormattedMessage, { id: "Start checkout" }) })),
+            // secondary: isAuthenticated ? (
+            //   <Button
+            //     color="secondary"
+            //     data-test-selector="saveCartForLaterButton"
+            //     onClick={() => {
+            //       saveCartForLater.mutate({ cart: currentCart })
+            //     }}
+            //     variant="outline">
+            //     <FormattedMessage id="Save order" />
+            //   </Button>
+            // ) : (
+            //   <Button
+            //     color="secondary"
+            //     data-test-selector="saveCartForLaterButton"
+            //     href={paths.SIGN_IN}
+            //     variant="outline">
+            //     <FormattedMessage id="Save order" />
+            //   </Button>
+            // ),
+        }, mobileSummary: jsx(CartTotalsSummary, { currencyCode: currencyCode, totalAmount: currentCart.orderGrandTotal }), overview: jsx(CartTotals, { currencyCode: currencyCode, shippingCost: currentCart.shippingAndHandling, subtotal: currentCart.orderSubTotal, tax: currentCart.totalTax, total: currentCart.orderGrandTotal, vatPercentage: cartLines[0]?.pricing?.vatRate || 0 }), children: jsx(OrderLineList, { onRemoveAll: () => deleteCurrentCart.mutate(), children: cartLines.map(cartLine => (jsx(ConnectedOrderLineCard, { deliveryDate: cartLine.atp?.date ?? null, href: cartLine.productUri, image: {
+                    fit: 'contain',
+                    image: {
+                        '1': cartLine.smallImagePath,
+                        '2': cartLine.smallImagePath,
+                        '3': cartLine.smallImagePath,
+                        altText: cartLine.altText,
+                    },
+                    title: cartLine.altText,
+                }, isReadonly: false, onRemove: () => deleteCartLine.mutate({ cartLineId: cartLine.id }), orderLineId: cartLine.id, price: {
+                    currencyCode,
+                    originalTotalPrice: ensureNumber(cartLine.properties.totalListPrice),
+                    pricePerUnit: cartLine.pricing?.unitNetPrice || 0,
+                    totalPrice: cartLine.pricing?.extendedUnitNetPrice || 0,
+                }, productId: cartLine.productId || '', sku: cartLine.erpNumber || '', tags: [cartLine.properties.label].filter(Boolean), title: cartLine.shortDescription }, cartLine.id))) }) }));
+}
+function CartPage() {
+    const paths = usePaths();
+    const t = useFormattedMessage();
+    const { data: cartLines, error, isLoading, } = useFetchCurrentCartLinesWithAtp();
+    if (error)
+        return jsx(ErrorPage, { error: error });
+    if (isLoading)
+        return jsx(LoadingPage, {});
+    return (jsx(Page, { breadcrumb: [
+            { href: paths.HOME, label: 'home' },
+            { href: paths.CART, label: t('Cart') },
+        ], canonicalUrl: paths.CART, "data-test-selector": "cartPage", title: t('Cart'), children: cartLines?.length ? (jsx(CartContent, { cartLines: cartLines })) : (jsx(EmptyCart, {})) }));
+}
+
+export { CartPage };

package/dist/pages/checkout/cart-page/components/empty-cart-page.d.ts

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

package/dist/pages/checkout/cart-page/components/empty-cart-page.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { FormattedMessage } from '../../../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import { NoResults } from '../../../product/product-listing-page/no-results/no-results.js';
+
+function EmptyCart() {
+    const t = useFormattedMessage();
+    return (jsx(NoResults, { content: jsxs(Fragment, { children: [jsx(FormattedMessage, { id: "There are no products in your shopping cart." }), jsx("br", {}), jsx(FormattedMessage, { id: "Click the button below to continue shopping." })] }), title: t('Your shopping cart is still empty') }));
+}
+
+export { EmptyCart };