@sonic-equipment/ui 133.0.0 → 135.0.0

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/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 };