@sonic-equipment/ui 137.0.0 → 138.0.0

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

@@ -1,19 +1,34 @@
 import { useQueryClient, useMutation } from '@tanstack/react-query';
-import { createGuestAccount, createSession } from '../../services/authentication-service.js';
+import { fetchSession, createGuestAccount, createSession } from '../../services/authentication-service.js';
 
 function useCreateGuestAccount() {
     const queryClient = useQueryClient();
     return useMutation({
-        mutationFn: async ({ defaultWarehouseId }) => {
-            const body = await createGuestAccount({ defaultWarehouseId });
-            await createSession({
-                accessToken: body.accessToken,
-                password: body.password,
-                userName: body.userName,
-            });
-            queryClient.resetQueries();
-            queryClient.clear();
-            return body;
+        mutationFn: async () => {
+            try {
+                let session = queryClient.getQueryData(['session']);
+                if (!session) {
+                    session = await fetchSession();
+                    queryClient.setQueryData(['session'], session);
+                }
+                if (!session.pickUpWarehouse) {
+                    throw new Error('No default pick up warehouse found');
+                }
+                const defaultWarehouseId = session.pickUpWarehouse.id;
+                const body = await createGuestAccount({ defaultWarehouseId });
+                await createSession({
+                    accessToken: body.accessToken,
+                    isGuest: true,
+                    password: body.password,
+                    rememberMe: false,
+                    userName: body.userName,
+                });
+                return body;
+            }
+            finally {
+                queryClient.resetQueries();
+                queryClient.clear();
+            }
         },
     });
 }

package/dist/shared/api/storefront/hooks/authentication/use-fetch-session.js

@@ -6,6 +6,7 @@ function useFetchSession({ enabled = true, } = {}) {
     return useQuery({
         enabled,
         gcTime: 15 * TIME.MINUTE,
+        placeholderData: prev => prev,
         queryFn: async () => {
             return await fetchSession();
         },

package/dist/shared/api/storefront/hooks/authentication/use-sign-in.d.ts

@@ -1,5 +1,6 @@
 import { AuthenticationResponse } from '../../services/authentication-service';
 export declare function useSignIn(): import("@tanstack/react-query").UseMutationResult<AuthenticationResponse, Error, {
     password: string;
+    rememberMe: boolean;
     userName: string;
 }, unknown>;

package/dist/shared/api/storefront/hooks/authentication/use-sign-in.js

@@ -4,20 +4,20 @@ import { signIn, createSession } from '../../services/authentication-service.js'
 function useSignIn() {
     const queryClient = useQueryClient();
     return useMutation({
-        mutationFn: async ({ password, userName }) => {
+        mutationFn: async ({ password, rememberMe, userName }) => {
             try {
                 const body = await signIn({ password, userName });
                 await createSession({
                     accessToken: body.access_token,
+                    isGuest: false,
                     password,
+                    rememberMe,
                     userName,
                 });
-                queryClient.resetQueries();
                 return body;
             }
-            catch (error) {
+            finally {
                 queryClient.resetQueries();
-                throw error;
             }
         },
     });

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

@@ -14,17 +14,16 @@ export declare function signIn({ password, userName, }: {
     userName: string;
 }): Promise<AuthenticationResponse>;
 export interface CreateSessionRequestBody {
-    isGuest?: boolean | undefined;
-    password?: string | undefined;
-    rememberMe?: boolean | undefined;
+    isGuest: boolean;
+    keepMeSignedIn?: boolean;
+    password: string | undefined;
+    rememberMe: boolean | undefined;
     returnUrl?: string | undefined;
     userName: string;
 }
-export declare function createSession({ accessToken, password, userName, }: {
+export declare function createSession({ accessToken, isGuest, keepMeSignedIn, password, rememberMe, returnUrl, userName, }: {
     accessToken: string;
-    password: string;
-    userName: string;
-}): Promise<SessionModel>;
+} & CreateSessionRequestBody): Promise<SessionModel>;
 export declare function signOut(): Promise<void>;
 export declare function createGuestAccount({ defaultWarehouseId, }: {
     defaultWarehouseId: string;

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

@@ -37,12 +37,14 @@ async function signIn({ password, userName, }) {
     });
     return body;
 }
-async function createSession({ accessToken, password, userName, }) {
+async function createSession({ accessToken, isGuest, keepMeSignedIn, password, rememberMe, returnUrl, userName, }) {
     const { body } = await request({
         body: {
-            isGuest: false,
+            isGuest,
+            keepMeSignedIn,
             password,
-            rememberMe: true,
+            rememberMe,
+            returnUrl,
             userName,
         },
         headers: {

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

@@ -8,7 +8,8 @@ async function fetchTranslations(languageCode) {
         url: `${config.SHOP_API_URL}/api/v1/translationdictionaries?page=1&pageSize=9999&languageCode=${languageCode}`,
     });
     body.translationDictionaries?.forEach(dictionary => {
-        translations[dictionary.keyword.toLowerCase()] = dictionary.translation;
+        translations[dictionary.keyword.toLowerCase()] =
+            dictionary.translation;
     });
     return translations;
 }

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

@@ -1,28 +1 @@
-export declare const currencySymbolToISO: {
-    readonly '': "EUR";
-    readonly $: "USD";
-    readonly 'Bs.': "VES";
-    readonly Ft: "HUF";
-    readonly Kč: "CZK";
-    readonly R: "ZAR";
-    readonly kr: "SEK";
-    readonly lei: "RON";
-    readonly zł: "PLN";
-    readonly '\u00A3': "GBP";
-    readonly '\u00A5': "JPY";
-    readonly '\u0E3F': "THB";
-    readonly '\u20A1': "CRC";
-    readonly '\u20A6': "NGN";
-    readonly '\u20A9': "KRW";
-    readonly '\u20AA': "ILS";
-    readonly '\u20AB': "VND";
-    readonly '\u20AC': "EUR";
-    readonly '\u20AE': "MNT";
-    readonly '\u20B1': "PHP";
-    readonly '\u20B2': "PYG";
-    readonly '\u20B4': "UAH";
-    readonly '\u20B5': "GHS";
-    readonly '\u20B9': "INR";
-    readonly '\u20BA': "TRY";
-    readonly '\u20BD': "RUB";
-};
+export declare const currencySymbolToISO: Record<string, string>;

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

@@ -19,8 +19,8 @@ export interface ImageSourceType {
 }
 export interface ResponsiveImageType {
     altText: string;
-    lg: DPRSrcSet;
-    md: DPRSrcSet;
-    sm: DPRSrcSet;
+    lg?: DPRSrcSet;
+    md?: DPRSrcSet;
+    sm?: DPRSrcSet;
 }
 export declare function isResponsiveImage(image: ImageType | ResponsiveImageType | undefined): image is ResponsiveImageType;

package/dist/shared/routing/with-routing.js

@@ -24,7 +24,7 @@ function withRouting(component) {
                 if (e.ctrlKey || e.metaKey || e.shiftKey) {
                     return window?.open(href, '_blank');
                 }
-                navigate(href, route);
+                return navigate(href, route);
             },
         };
         return createElement(component, props);

package/dist/shared/utils/local-storage.d.ts

@@ -3,5 +3,5 @@
 declare const HAS_LOCAL_STORAGE_SUPPORT: boolean;
 declare function mockStorage(): void;
 declare const noopCallback: () => void;
-declare function createStorage(): {};
+declare function createStorage(): Record<string, string>;
 declare const _: void;

package/dist/shared/utils/local-storage.js

@@ -57,14 +57,14 @@ function createStorage() {
     });
     Object.defineProperty(s, 'getItem', {
         get: () => {
-            return k => {
+            return (k) => {
                 return s.hasOwnProperty(String(k)) ? s[String(k)] : null;
             };
         },
     });
     Object.defineProperty(s, 'removeItem', {
         get: () => {
-            return k => {
+            return (k) => {
                 if (s.hasOwnProperty(String(k))) {
                     delete s[String(k)];
                 }
@@ -86,9 +86,8 @@ function createStorage() {
         },
     });
     Object.defineProperty(s, 'key', {
-        value: k => {
-            const key = Object.keys(s)[String(k)];
-            return key ?? null;
+        value: (k) => {
+            return Object.keys(s)[k] || null;
         },
     });
     Object.defineProperty(s, 'itemInsertionCallback', {

package/dist/shared/utils/price.d.ts

@@ -1,39 +1,5 @@
 export declare const formatPrice: (price: number) => string;
-export declare const currencies: {
-    AR: string;
-    AU: string;
-    BR: string;
-    CA: string;
-    CH: string;
-    CN: string;
-    CZ: string;
-    DK: string;
-    GB: string;
-    HK: string;
-    HR: string;
-    HU: string;
-    ID: string;
-    IN: string;
-    JP: string;
-    KR: string;
-    LA: string;
-    MG: string;
-    MX: string;
-    MY: string;
-    NO: string;
-    NZ: string;
-    PH: string;
-    PL: string;
-    RO: string;
-    RS: string;
-    RU: string;
-    SE: string;
-    SG: string;
-    SK: string;
-    TH: string;
-    TW: string;
-    US: string;
-    VN: string;
-    default: string;
+export declare const currencies: Record<string, string> & {
+    default: 'EUR';
 };
-export declare const getCurrencyByCountryCode: (countryCode: string) => any;
+export declare const getCurrencyByCountryCode: (countryCode: string) => string;

package/dist/sign-in-form/sign-in-form.d.ts

@@ -1,19 +1,25 @@
 interface LoginData {
     email: string;
-    guestSignin: false;
+    guestSignIn: false;
     password: string;
-    remember?: boolean;
+    rememberMe: boolean;
 }
 interface GuestLoginData {
-    guestSignin: true;
+    guestSignIn: true;
 }
+export type SubmitData = LoginData | GuestLoginData;
+export type ErrorMessage = 'Access denied' | 'Unexpected error';
 export interface SignInFormProps {
     allowGuestSignIn?: boolean;
+    errorMessage?: ErrorMessage;
     initialEmail?: string;
-    initialRemember?: boolean;
+    initialRememberMe?: boolean;
+    isDisabled?: boolean;
+    isPendingGuestSignIn?: boolean;
+    isPendingUserSignIn?: boolean;
     onSubmit?: ({ data }: {
-        data: LoginData | GuestLoginData;
+        data: SubmitData;
     }) => void;
 }
-export declare function SignInForm({ allowGuestSignIn, initialEmail, initialRemember, onSubmit, }: SignInFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function SignInForm({ allowGuestSignIn, errorMessage, initialEmail, initialRememberMe, isDisabled: _isDisabled, isPendingGuestSignIn, isPendingUserSignIn, onSubmit, }: SignInFormProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/sign-in-form/sign-in-form.js

@@ -7,12 +7,15 @@ import { Link } from '../buttons/link/link.js';
 import { Switch } from '../forms/switch/switch.js';
 import { TextField } from '../forms/text-field/text-field.js';
 import { useFormattedMessage } from '../intl/use-formatted-message.js';
+import { Message } from '../message/message.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, initialEmail, initialRemember, onSubmit = () => { }, }) {
+function SignInForm({ allowGuestSignIn = false, errorMessage, initialEmail, initialRememberMe, isDisabled: _isDisabled = false, isPendingGuestSignIn = false, isPendingUserSignIn = false, onSubmit = () => { }, }) {
     const t = useFormattedMessage();
+    const title = t('sign in');
+    const isDisabled = isPendingUserSignIn || isPendingGuestSignIn || _isDisabled;
     const handleSubmit = (event) => {
         event.preventDefault();
         const form = event.currentTarget;
@@ -22,14 +25,14 @@ function SignInForm({ allowGuestSignIn = false, initialEmail, initialRemember, o
         if (submitter?.name === GUEST_SIGN_IN_BUTTON_NAME) {
             return onSubmit({
                 data: {
-                    guestSignin: true,
+                    guestSignIn: true,
                 },
             });
         }
         // regular sign-in
         const email = formData.get('email')?.toString();
         const password = formData.get('password')?.toString();
-        const remember = Boolean(formData.get('remember'));
+        const rememberMe = Boolean(formData.get('rememberMe'));
         if (!email)
             throw new Error('Email value is required');
         if (!password)
@@ -37,13 +40,13 @@ function SignInForm({ allowGuestSignIn = false, initialEmail, initialRemember, o
         onSubmit({
             data: {
                 email,
-                guestSignin: false,
+                guestSignIn: false,
                 password,
-                remember,
+                rememberMe,
             },
         });
     };
-    return (jsxs(Form, { "aria-label": t('sign in'), autoComplete: "off", className: clsx(styles['sign-in-form'], styles['form']), onSubmit: handleSubmit, validationBehavior: "native", children: [jsx("header", { className: styles['form-header'], children: jsx(Heading, { "data-test-selector": "PageTitle", italic: true, size: "m", tag: "h1", uppercase: true, children: t('sign in') }) }), jsxs("fieldset", { className: clsx(styles['form-fieldset'], styles['columns']), children: [jsx("div", { className: styles['form-segment'], children: jsx(TextField, { "data-test-selector": "signIn_userName", defaultValue: initialEmail, isRequired: true, label: t('Email'), name: "email", showLabel: true, type: "email" }) }), jsx("div", { className: styles['form-segment'], children: jsx(TextField, { "data-test-selector": "signIn_password", isRequired: true, label: t('Password'), name: "password", showLabel: true, type: "password" }) })] }), jsxs("footer", { className: styles['form-footer'], children: [jsx("div", { className: styles['form-segment'], children: jsx(Switch, { className: styles['floating'], defaultSelected: initialRemember, name: "remember", value: "true", children: t('Remember me') }) }), jsx("div", { className: styles['form-segment'], children: jsx(Button, { "data-test-selector": "signIn_submit", type: "submit", withArrow: true, children: t('sign in') }) }), jsxs("div", { className: styles['form-segment'], children: [jsx("p", { children: jsx(Link, { "data-test-selector": "signIn_forgotPassword", hasUnderline: true, href: "#", children: t('Forgot password?') }) }), jsxs("p", { children: [t('New user?'), ' ', jsx(Link, { "data-test-selector": "signInCreateNewAccount_createNewAccount", hasUnderline: true, href: "#", children: t('create account') })] })] }), allowGuestSignIn && (jsx("div", { className: styles['form-segment'], children: jsx(Button, { color: "secondary", isValidating: false, name: GUEST_SIGN_IN_BUTTON_NAME, type: "submit", value: "true", variant: "outline", children: t('Or sign in as guest') }) }))] })] }));
+    return (jsxs(Form, { "aria-label": title, autoComplete: "off", className: clsx(styles['sign-in-form'], styles['form']), onSubmit: handleSubmit, validationBehavior: "native", children: [jsx("header", { className: styles['form-header'], children: jsx(Heading, { "data-test-selector": "PageTitle", italic: true, size: "m", tag: "h1", uppercase: true, children: title }) }), errorMessage === 'Access denied' && (jsx(Message, { type: "danger", children: t('Your email and password were not recognized.') })), errorMessage === 'Unexpected error' && (jsx(Message, { type: "danger", children: t('An unexpected error occured. Please try again.') })), jsxs("fieldset", { className: clsx(styles['form-fieldset'], styles['columns']), children: [jsx("div", { className: styles['form-segment'], children: jsx(TextField, { "data-test-selector": "signIn_userName", defaultValue: initialEmail, isDisabled: isDisabled, isRequired: true, label: t('Email'), name: "email", showLabel: true, type: "email" }) }), jsx("div", { className: styles['form-segment'], children: jsx(TextField, { "data-test-selector": "signIn_password", isDisabled: isDisabled, isRequired: true, label: t('Password'), name: "password", showLabel: true, type: "password" }) })] }), jsxs("footer", { className: styles['form-footer'], children: [jsx("div", { className: styles['form-segment'], children: jsx(Switch, { className: styles['floating'], defaultSelected: initialRememberMe, isDisabled: isDisabled, name: "rememberMe", value: "true", children: t('Remember me') }) }), jsx("div", { className: styles['form-segment'], children: jsx(Button, { "data-test-selector": "signIn_submit", isDisabled: isDisabled, isLoading: isPendingUserSignIn && t('Signing in…'), type: "submit", withArrow: true, children: t('sign in') }) }), jsxs("div", { className: styles['form-segment'], children: [jsx("p", { children: jsx(Link, { color: "primary", "data-test-selector": "signIn_forgotPassword", hasUnderline: true, href: "#", isDisabled: isDisabled, children: t('Forgot password?') }) }), jsxs("p", { children: [t('New user?'), ' ', jsx(Link, { "data-test-selector": "signInCreateNewAccount_createNewAccount", hasUnderline: true, href: "#", isDisabled: isDisabled, children: t('create account') })] })] }), allowGuestSignIn && (jsx("div", { className: styles['form-segment'], 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') }) }))] })] }));
 }
 
 export { SignInForm };