@sonic-equipment/ui 132.0.0 → 134.0.0

package/dist/shared/api/bff/model/bff.model.d.ts

@@ -142,10 +142,10 @@ export interface Usp {
 }
 export interface ProductDetailsPageDataResponse {
     breadCrumb: BreadCrumb[];
-    included?: ProductSummary[];
-    page?: PageModel;
+    included: ProductSummary[];
+    page: PageModel;
     product: ProductDetails;
-    recentlyViewed?: ProductSummary[];
+    recentlyViewed: ProductSummary[];
     usps?: Usp[];
 }
 export interface ProductListingPageDataResponse {
@@ -156,7 +156,7 @@ export interface ProductListingPageDataResponse {
     categories: Category | null;
     categoryPages: string;
     hierarchicalCategories: string[];
-    page?: PageModel;
+    page: PageModel;
     promoBanners: PromoBanners | null;
 }
 export {};

package/dist/shared/api/bff/services/bff-service.js

@@ -40,7 +40,7 @@ async function fetchProductListingPageData({ cultureCode, pageUrl, }) {
         url: `${config.BFF_API_URL}/plp/?pageUrl=${pageUrl}`,
     });
     return {
-        breadCrumb: body.breadCrumb,
+        ...body,
         category: body.categories
             ? {
                 href: body.categories.path,
@@ -53,9 +53,6 @@ async function fetchProductListingPageData({ cultureCode, pageUrl, }) {
                 title: body.categories.shortDescription,
             }
             : undefined,
-        categoryPages: body.categoryPages,
-        hierarchicalCategories: body.hierarchicalCategories,
-        page: body.page,
         promoBanners: body.promoBanners
             ? {
                 top: body.promoBanners.top || undefined,

package/dist/shared/api/storefront/hooks/cart/use-fetch-cart-by-id.d.ts

@@ -0,0 +1,8 @@
+import { CartModel } from '../../model/storefront.model';
+export interface UseFetchCartByIdArgs<T> {
+    enabled?: boolean;
+    forceRecalculation?: boolean;
+    id: string;
+    select?: (data: CartModel) => T;
+}
+export declare function useFetchCartById<T = CartModel>({ enabled, forceRecalculation, id, select, }: UseFetchCartByIdArgs<T>): import("@tanstack/react-query").UseQueryResult<T, Error>;

package/dist/shared/api/storefront/hooks/cart/use-fetch-cart-by-id.js

@@ -0,0 +1,20 @@
+import { useQuery } from '@tanstack/react-query';
+import { TIME } from '../../../../utils/time.js';
+import { fetchCart } from '../../services/cart-service.js';
+
+function useFetchCartById({ enabled = true, forceRecalculation = true, id, select, }) {
+    return useQuery({
+        enabled,
+        gcTime: 15 * TIME.MINUTE,
+        placeholderData: prev => prev,
+        queryFn: () => {
+            return fetchCart({ forceRecalculation, id });
+        },
+        queryKey: ['carts', id],
+        retry: 3,
+        select: select || (cartModel => cartModel),
+        staleTime: 15 * TIME.MINUTE,
+    });
+}
+
+export { useFetchCartById };

package/dist/shared/api/storefront/hooks/cart/use-fetch-current-cart-count.d.ts

@@ -1 +1 @@
-export declare function useFetchCurrentCartCount(): number | undefined;
+export declare function useFetchCurrentCartCount(): number;

package/dist/shared/api/storefront/hooks/cart/use-fetch-current-cart-count.js

@@ -1,8 +1,8 @@
-import { useFetchCurrentCartLines } from './use-fetch-current-cart-lines.js';
+import { useFetchCurrentCart } from './use-fetch-current-cart.js';
 
 function useFetchCurrentCartCount() {
-    const { data } = useFetchCurrentCartLines();
-    return data?.reduce((acc, cartLine) => acc + (cartLine.qtyOrdered || 0), 0);
+    const { data } = useFetchCurrentCart();
+    return data?.totalCountDisplay || 0;
 }
 
 export { useFetchCurrentCartCount };

package/dist/shared/api/storefront/hooks/cart/use-fetch-current-cart.d.ts

@@ -1,6 +1,3 @@
 import { CartModel } from '../../model/storefront.model';
-export declare function useFetchCurrentCart<T = CartModel>({ enabled, forceRecalculation, select, }?: {
-    enabled?: boolean;
-    forceRecalculation?: boolean;
-    select?: (data: CartModel) => T;
-}): import("@tanstack/react-query").UseQueryResult<T, Error>;
+import { UseFetchCartByIdArgs } from './use-fetch-cart-by-id';
+export declare function useFetchCurrentCart<T = CartModel>(args?: Omit<UseFetchCartByIdArgs<T>, 'id'>): import("@tanstack/react-query").UseQueryResult<T, Error>;

package/dist/shared/api/storefront/hooks/cart/use-fetch-current-cart.js

@@ -1,20 +1,7 @@
-import { useQuery } from '@tanstack/react-query';
-import { TIME } from '../../../../utils/time.js';
-import { fetchCurrentCart } from '../../services/cart-service.js';
+import { useFetchCartById } from './use-fetch-cart-by-id.js';
 
-function useFetchCurrentCart({ enabled = true, forceRecalculation = true, select, } = {}) {
-    return useQuery({
-        enabled,
-        gcTime: 15 * TIME.MINUTE,
-        placeholderData: prev => prev,
-        queryFn: () => {
-            return fetchCurrentCart({ forceRecalculation });
-        },
-        queryKey: ['carts', 'current'],
-        retry: 3,
-        select: select || (cartModel => cartModel),
-        staleTime: 15 * TIME.MINUTE,
-    });
+function useFetchCurrentCart(args) {
+    return useFetchCartById({ ...args, id: 'current' });
 }
 
 export { useFetchCurrentCart };

package/dist/shared/api/storefront/hooks/cart/use-patch-cart.js

@@ -1,17 +1,20 @@
+import { useCallback } from 'react';
 import { useAwaitableMutation } from '../../../shared/hooks/use-awaitable-mutation.js';
 import { patchCart } from '../../services/cart-service.js';
 
 function usePatchCart({ skipInvalidation = false, } = {}) {
+    const onError = useCallback(({ args: [{ cart }], queryClient }) => {
+        queryClient.invalidateQueries({ queryKey: ['carts', cart.id] });
+    }, []);
+    const onSuccess = useCallback(({ args: [{ cart }], queryClient }) => {
+        if (skipInvalidation)
+            return;
+        queryClient.removeQueries({ queryKey: ['carts', cart.id] });
+    }, [skipInvalidation]);
     return useAwaitableMutation({
         mutationFn: patchCart,
-        onError: ({ args: [{ cart }], queryClient }) => {
-            queryClient.invalidateQueries({ queryKey: ['carts', cart.id] });
-        },
-        onSuccess: ({ args: [{ cart }], data: updatedCart, queryClient }) => {
-            if (skipInvalidation)
-                return;
-            queryClient.setQueriesData({ exact: true, queryKey: ['carts', updatedCart.id] }, { ...updatedCart, cartLines: cart.cartLines });
-        },
+        onError,
+        onSuccess,
     });
 }
 

package/dist/shared/api/storefront/hooks/cart/use-place-order.js

@@ -4,10 +4,10 @@ import { placeOrder } from '../../services/cart-service.js';
 
 const usePlaceOrder = () => {
     const onComplete = useCallback(({ args: [{ cart }], queryClient }) => {
-        queryClient.invalidateQueries({ queryKey: ['carts', cart.id] });
+        queryClient.removeQueries({ queryKey: ['carts', cart.id] });
     }, []);
     const onSuccess = useCallback(({ data: updatedCart, queryClient }) => {
-        queryClient.setQueryData(['carts', updatedCart.id], updatedCart);
+        queryClient.removeQueries({ queryKey: ['carts', updatedCart.id] });
     }, []);
     return useAwaitableMutation({
         mutationFn: placeOrder,

package/dist/shared/fetch/request.d.ts

@@ -49,10 +49,10 @@ export declare class InternalServerErrorRequestError extends RequestError {
     constructor(responseOrError: Response | unknown, options?: RequestErrorOptions);
 }
 export type RequestHeaders = Record<string, string | null | undefined>;
-type RequestHeadersWithBody = RequestHeaders & {
+export type RequestHeadersWithBody = RequestHeaders & {
     'Content-Type': string;
 };
-interface BaseRequestOptions {
+export interface BaseRequestOptions {
     cache?: RequestCache;
     credentials?: RequestCredentials;
     headers?: RequestHeaders;
@@ -65,38 +65,43 @@ interface BaseRequestOptions {
     timeout?: number;
     url: string;
 }
-interface RequestOptionsWithFormData extends BaseRequestOptions {
+export interface RequestOptionsWithFormData extends BaseRequestOptions {
     body: FormData;
     headers: RequestHeaders;
 }
-interface RequestOptionsWithBody extends BaseRequestOptions {
+export interface RequestOptionsWithBody extends BaseRequestOptions {
     body: unknown;
     headers: RequestHeadersWithBody;
 }
-interface RequestOptionsWithoutBody extends BaseRequestOptions {
+export interface RequestOptionsWithoutBody extends BaseRequestOptions {
     body?: never;
     headers?: RequestHeaders;
 }
-type RequestOptions = RequestOptionsWithBody | RequestOptionsWithoutBody | RequestOptionsWithFormData;
-type AfterRequestHandler<T> = (args: {
+export type RequestOptions = RequestOptionsWithBody | RequestOptionsWithoutBody | RequestOptionsWithFormData;
+type BeforeRequestHandler = (options?: RequestOptions) => RequestOptions | void;
+type BeforeRequestHandlerAsync = (options?: RequestOptions) => Promise<RequestOptions | void>;
+export interface AfterRequestHandlerArgs<T> {
     body: T | undefined;
     error?: RequestError;
     options: RequestOptions;
     response?: Response;
-}) => void;
-type BeforeRequestHandler = (options?: RequestOptions) => RequestOptions | void;
-type RequestReturnType<T> = Promise<{
+}
+export type AfterRequestHandler<T> = (args: AfterRequestHandlerArgs<T>) => void;
+export type AfterRequestHandlerAsync<T> = (args: AfterRequestHandlerArgs<T>) => Promise<void>;
+export declare const isJsonBody: (options: RequestOptions) => boolean;
+export declare const isFormData: (body: unknown) => body is FormData;
+export type RequestReturnType<T> = Promise<{
     body: T;
     headers: Headers;
     status: number;
     statusText: string;
 }>;
-interface Request {
+export interface Request {
     <T>(options: RequestOptions): RequestReturnType<T>;
-    _afterHandlers: AfterRequestHandler<any>[];
-    _beforeHandlers: BeforeRequestHandler[];
     after<T = any>(handler: AfterRequestHandler<T>): void;
+    after<T = any>(handler: AfterRequestHandlerAsync<T>): void;
     before(handler: BeforeRequestHandler): void;
+    before(handler: BeforeRequestHandlerAsync): void;
     headers: Omit<RequestHeaders, 'Content-Type'>;
 }
 export declare const request: Request;

package/dist/shared/fetch/request.js

@@ -1,4 +1,5 @@
 import qs from 'query-string';
+import { isPromise } from '../utils/promise.js';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const isResponse = (response) => Boolean(response?.json);
@@ -181,17 +182,20 @@ const createBody = (options) => {
     throw new Error(`request: Unknown body type for request ${url}. Unable to send request.`);
 };
 const createHeaders = (...headers) => {
-    const allHeaders = {};
+    const allHeaders = new Headers();
     for (const header of headers) {
         if (!header)
             continue;
         for (const key of Object.keys(header)) {
             if (header[key])
-                allHeaders[key] = header[key];
+                allHeaders.append(key, String(header[key]));
         }
     }
     return allHeaders;
 };
+const beforeHandlers = [];
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const afterHandlers = [];
 /* Because of a bug in the rollup dts package the following code must be put inside of a IIFE.
  * The bug occurs when assigning properties to the request function at the top level of this file.
  * request.headers = {}
@@ -204,7 +208,12 @@ const request = (function createRequestFunction() {
         let error;
         let isTimeout = false;
         try {
-            options = request._beforeHandlers.reduce((options, handler) => handler(options) || options, options);
+            for await (const handler of beforeHandlers) {
+                const promiseOrOptions = handler(options);
+                options = isPromise(promiseOrOptions)
+                    ? (await promiseOrOptions) || options
+                    : promiseOrOptions || options;
+            }
             options.timeout = options.timeout || 1000 * 60 * 2;
             const url = qs.stringifyUrl({ query: options.params, url: options.url });
             const controller = new AbortController();
@@ -245,19 +254,23 @@ const request = (function createRequestFunction() {
             throw error;
         }
         finally {
-            request._afterHandlers.forEach(handler => handler({ body, error, options, response }));
+            for await (const handler of afterHandlers) {
+                const promiseOrVoid = handler({ body, error, options, response });
+                if (isPromise(promiseOrVoid))
+                    await promiseOrVoid;
+            }
         }
     };
     request.headers = {};
-    request._afterHandlers = [];
-    request._beforeHandlers = [];
     request.after = (handler) => {
-        request._afterHandlers.push(handler);
+        afterHandlers.push(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        handler);
     };
     request.before = (handler) => {
-        request._beforeHandlers.push(handler);
+        beforeHandlers.push(handler);
     };
     return request;
 })();
 
-export { BadRequestError, ForbiddenRequestError, InternalServerErrorRequestError, NotFoundRequestError, RequestError, TimeoutRequestError, UnauthorizedRequestError, UnprocessableContentRequestError, isRequestError, request };
+export { BadRequestError, ForbiddenRequestError, InternalServerErrorRequestError, NotFoundRequestError, RequestError, TimeoutRequestError, UnauthorizedRequestError, UnprocessableContentRequestError, isFormData, isJsonBody, isRequestError, request };

package/dist/shared/ga/use-data-layer.d.ts

@@ -8,9 +8,13 @@ interface GAProductModel {
     unitListPriceDisplay: string;
 }
 interface GACartModel {
-    cartLines: CartModel['cartLines'];
+    cartLines?: CartModel['cartLines'];
     currencySymbol: string;
+    orderGrandTotal: number;
     orderSubTotal: number;
+    shippingAndHandling: number;
+    totalTax: number;
+    trackId: string;
 }
 interface GACartLineModel {
     erpNumber: string;
@@ -26,12 +30,12 @@ interface CreateEcommerceEventArgsWithCartLine {
     event: GAEcommerceEvent;
 }
 interface CreateEcommerceEventArgsWithCart {
+    cart: GACartModel;
     event: GAEcommerceEvent;
-    product: GAProductModel;
 }
 interface CreateEcommerceEventArgsWithProduct {
-    cart: GACartModel;
     event: GAEcommerceEvent;
+    product: GAProductModel;
 }
 interface CreateEcommerceEvent {
     (args: CreateEcommerceEventArgsWithCart): GAEcommerceEvent;

package/dist/shared/ga/use-data-layer.js

@@ -12,7 +12,8 @@ function useDataLayer(eventOrArgs) {
                 ...event,
                 ecommerce: {
                     ...event.ecommerce,
-                    currency: event.ecommerce?.currency ?? cart.currencySymbol,
+                    currency: event.ecommerce?.currency ??
+                        currencySymbolToISO[cart.currencySymbol],
                     customer: event.ecommerce?.customer ?? customerNumber,
                     items: cart.cartLines?.map(cartLine => ({
                         item_id: cartLine.erpNumber,
@@ -20,6 +21,10 @@ function useDataLayer(eventOrArgs) {
                         price: cartLine.pricing?.unitNetPrice,
                         quantity: cartLine.qtyOrdered ?? 0,
                     })) ?? [],
+                    shipping: cart.shippingAndHandling,
+                    tax: cart.totalTax,
+                    transaction_id: cart.trackId,
+                    value: cart.orderGrandTotal,
                 },
                 value: event.value ?? cart.orderSubTotal ?? 0,
             };

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

@@ -1,2 +1,15 @@
 export declare const validatePhone: (value: string) => boolean;
 export declare const validateEmail: (value: string) => boolean;
+export interface AddressType {
+    address1?: string;
+    address2?: string;
+    address3?: string;
+    city?: string;
+    companyName?: string;
+    country?: string;
+    email?: string;
+    firstName?: string;
+    lastName?: string;
+    phone?: string;
+    postalCode?: string;
+}

package/dist/shared/providers/react-query-container.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
-export declare function ReactQueryContainer({ children }: {
+export declare function ReactQueryContainer({ children, enableDevTools, }: {
     children: ReactNode;
+    enableDevTools?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/shared/providers/react-query-container.js

@@ -15,8 +15,8 @@ const queryClient = new QueryClient({
         },
     },
 });
-function ReactQueryContainer({ children }) {
-    return (jsxs(QueryClientProvider, { client: queryClient, children: [environment !== 'production' && (jsx(ReactQueryDevtools, { initialIsOpen: false })), children] }));
+function ReactQueryContainer({ children, enableDevTools = environment !== 'production', }) {
+    return (jsxs(QueryClientProvider, { client: queryClient, children: [enableDevTools && jsx(ReactQueryDevtools, { initialIsOpen: false }), children] }));
 }
 
 export { ReactQueryContainer };

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

@@ -1,3 +1,4 @@
+import { CultureCode } from '../../intl/types';
 export type DateUnit = 'day' | 'week' | 'month';
 export type DateUnitObject = {
     number: number;
@@ -9,3 +10,4 @@ export type DateThreshold = {
 };
 export declare function getDateUnitObject(date: Date): DateUnitObject;
 export declare function convertDateUnitToPluralOrSingle(unit: DateUnit, number: number): 'day' | 'days' | 'week' | 'weeks' | 'month' | 'months';
+export declare function formatDateToLocaleString(date?: Date, cultureCode?: CultureCode): string;

package/dist/shared/utils/date.js

@@ -54,5 +54,15 @@ function convertDateUnitToPluralOrSingle(unit, number) {
             return 'months';
     }
 }
+function formatDateToLocaleString(date, cultureCode) {
+    if (!date || !cultureCode)
+        return '';
+    return date.toLocaleDateString(cultureCode, {
+        day: 'numeric',
+        month: 'long',
+        weekday: 'long',
+        year: 'numeric',
+    });
+}
 
-export { convertDateUnitToPluralOrSingle, getDateUnitObject };
+export { convertDateUnitToPluralOrSingle, formatDateToLocaleString, getDateUnitObject };

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

@@ -0,0 +1,2 @@
+export declare function wait(ms: number): Promise<unknown>;
+export declare function isPromise<T>(value: any): value is Promise<T>;

package/dist/shared/utils/promise.js

@@ -0,0 +1,9 @@
+function wait(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isPromise(value) {
+    return value && typeof value.then === 'function';
+}
+
+export { isPromise, wait };

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

@@ -0,0 +1,19 @@
+interface LoginData {
+    email: string;
+    guestSignin: false;
+    password: string;
+    remember?: boolean;
+}
+interface GuestLoginData {
+    guestSignin: true;
+}
+export interface SignInFormProps {
+    allowGuestSignIn?: boolean;
+    initialEmail?: string;
+    initialRemember?: boolean;
+    onSubmit?: ({ data }: {
+        data: LoginData | GuestLoginData;
+    }) => void;
+}
+export declare function SignInForm({ allowGuestSignIn, initialEmail, initialRemember, onSubmit, }: SignInFormProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,49 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Form } from 'react-aria-components';
+import clsx from 'clsx';
+import { Button } from '../buttons/button/button.js';
+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 { 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 = () => { }, }) {
+    const t = useFormattedMessage();
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        const form = event.currentTarget;
+        const formData = new FormData(form);
+        // in case of guest sign-in submit
+        const submitter = event.nativeEvent.submitter;
+        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 remember = Boolean(formData.get('remember'));
+        if (!email)
+            throw new Error('Email value is required');
+        if (!password)
+            throw new Error('Password value is required');
+        onSubmit({
+            data: {
+                email,
+                guestSignin: false,
+                password,
+                remember,
+            },
+        });
+    };
+    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') }) }))] })] }));
+}
+
+export { SignInForm };

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

@@ -0,0 +1,3 @@
+var styles = {"sign-in-form":"sign-in-form-module-4DkkP","form":"sign-in-form-module-bGXUd","form-segment":"sign-in-form-module-TumIz","floating":"sign-in-form-module-bIzyz","form-fieldset":"sign-in-form-module-EoTYu","columns":"sign-in-form-module-9eIx-","form-footer":"sign-in-form-module-aYBAy"};
+
+export { styles as default };