@sonic-equipment/ui 200.0.0 → 202.0.0

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

@@ -1,6 +1,19 @@
-import { BillToCollectionModel, BillToModel, PatchBillToModel, ShipToCollectionModel, ShipToModel } from 'shared/api/storefront/model/storefront.model';
-export declare function fetchCurrentBillToAddress(): Promise<BillToModel>;
-export declare function fetchCurrentShipToAddress(): Promise<ShipToModel>;
+import { BillToCollectionModel, BillToModel, PatchBillToModel, PatchShipToModel, PostShipToModel, ShipToCollectionModel, ShipToModel } from 'shared/api/storefront/model/storefront.model';
+export declare function fetchCurrentBillToAddress({ includeValidation, }?: {
+    includeValidation?: boolean;
+}): Promise<BillToModel>;
+export declare function fetchBillToAddress({ billToId, includeValidation, }: {
+    billToId: string;
+    includeValidation?: boolean;
+}): Promise<BillToModel>;
+export declare function fetchCurrentShipToAddress({ includeValidation, }?: {
+    includeValidation?: boolean;
+}): Promise<ShipToModel>;
+export declare function fetchShipToAddress({ billToId, includeValidation, shipToId, }: {
+    billToId: string;
+    includeValidation?: boolean;
+    shipToId: string;
+}): Promise<ShipToModel>;
 export interface FetchBillToAddressesParams {
     filter?: string;
     pageSize?: number;
@@ -12,6 +25,14 @@ export declare function fetchShipToAddresses({ shipToId }: {
 export declare function patchBillToAddress({ billTo, }: {
     billTo: PatchBillToModel;
 }): Promise<BillToModel>;
+export declare function patchShipToAddress({ billToId, shipTo, }: {
+    billToId: string;
+    shipTo: PatchShipToModel;
+}): Promise<ShipToModel>;
+export declare function postShipToAddress({ billToId, shipTo, }: {
+    billToId: string;
+    shipTo: PostShipToModel;
+}): Promise<ShipToModel>;
 export declare function fetchFulfillmentMethods({ customerId, }: {
     customerId: string;
 }): Promise<string[]>;

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

@@ -1,17 +1,27 @@
 import { config } from '../../../../config.js';
 import { request } from '../../../fetch/request.js';
 
-async function fetchCurrentBillToAddress() {
+async function fetchCurrentBillToAddress({ includeValidation = false, } = {}) {
+    return fetchBillToAddress({ billToId: 'current', includeValidation });
+}
+async function fetchBillToAddress({ billToId, includeValidation = false, }) {
     const { body } = await request({
         credentials: 'include',
-        url: `${config.SHOP_API_URL}/api/v1/billtos/current`,
+        url: `${config.SHOP_API_URL}/api/v1/billtos/${billToId}${includeValidation ? '?expand=validation' : ''}`,
     });
     return body;
 }
-async function fetchCurrentShipToAddress() {
+async function fetchCurrentShipToAddress({ includeValidation = false, } = {}) {
+    return fetchShipToAddress({
+        billToId: 'current',
+        includeValidation,
+        shipToId: 'current',
+    });
+}
+async function fetchShipToAddress({ billToId, includeValidation = false, shipToId, }) {
     const { body } = await request({
         credentials: 'include',
-        url: `${config.SHOP_API_URL}/api/v1/billtos/current/shiptos/current`,
+        url: `${config.SHOP_API_URL}/api/v1/billtos/${billToId}/shiptos/${shipToId}${includeValidation ? '?expand=validation' : ''}`,
     });
     return body;
 }
@@ -41,6 +51,30 @@ async function patchBillToAddress({ billTo, }) {
     });
     return updatedBillTo;
 }
+async function patchShipToAddress({ billToId, shipTo, }) {
+    const { body: updatedShipTo } = await request({
+        body: shipTo,
+        credentials: 'include',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        method: 'PATCH',
+        url: `${config.SHOP_API_URL}/api/v1/billtos/${billToId}/shiptos/${shipTo.id}`,
+    });
+    return updatedShipTo;
+}
+async function postShipToAddress({ billToId, shipTo, }) {
+    const { body: createdShipTo } = await request({
+        body: shipTo,
+        credentials: 'include',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        method: 'POST',
+        url: `${config.SHOP_API_URL}/api/v1/billtos/${billToId}/shiptos`,
+    });
+    return createdShipTo;
+}
 async function fetchFulfillmentMethods({ customerId, }) {
     const { body: updatedBillTo } = await request({
         credentials: 'include',
@@ -50,4 +84,4 @@ async function fetchFulfillmentMethods({ customerId, }) {
     return updatedBillTo;
 }
 
-export { fetchBillToAddresses, fetchCurrentBillToAddress, fetchCurrentShipToAddress, fetchFulfillmentMethods, fetchShipToAddresses, patchBillToAddress };
+export { fetchBillToAddress, fetchBillToAddresses, fetchCurrentBillToAddress, fetchCurrentShipToAddress, fetchFulfillmentMethods, fetchShipToAddress, fetchShipToAddresses, patchBillToAddress, patchShipToAddress, postShipToAddress };

package/dist/shared/hooks/use-cookiebot.js

@@ -3,19 +3,23 @@ import { useState, useEffect } from 'react';
 
 // https://www.cookiebot.com/en/developer/
 function useCookiebot() {
-    const [hasResponse, setHasResponse] = useState(Boolean(window?.Cookiebot?.hasResponse));
+    const [hasResponse, setHasResponse] = useState(Boolean(typeof window === 'undefined' ? undefined : window.Cookiebot?.hasResponse));
     const [isDialogOpen, setIsDialogOpen] = useState(false);
     const handleDialogDisplay = () => {
         setIsDialogOpen(true);
     };
     const handleAcceptDecline = () => {
-        setHasResponse(Boolean(window?.Cookiebot?.hasResponse));
+        setHasResponse(Boolean(typeof window === 'undefined'
+            ? undefined
+            : window.Cookiebot?.hasResponse));
         setIsDialogOpen(false);
     };
     useEffect(() => {
-        window?.addEventListener('CookiebotOnDialogDisplay', handleDialogDisplay);
-        window?.addEventListener('CookiebotOnAccept', handleAcceptDecline);
-        window?.addEventListener('CookiebotOnDecline', handleAcceptDecline);
+        if (typeof window === 'undefined')
+            return;
+        window.addEventListener('CookiebotOnDialogDisplay', handleDialogDisplay);
+        window.addEventListener('CookiebotOnAccept', handleAcceptDecline);
+        window.addEventListener('CookiebotOnDecline', handleAcceptDecline);
         return () => {
             window?.removeEventListener('CookiebotOnDialogDisplay', handleDialogDisplay);
             window?.removeEventListener('CookiebotOnAccept', handleAcceptDecline);

package/dist/shared/routing/route-context.d.ts

@@ -0,0 +1,2 @@
+import { RouteContextValue } from './types';
+export declare const RouteContext: React.Context<RouteContextValue | undefined>;

package/dist/shared/routing/route-context.js

@@ -0,0 +1,6 @@
+"use client";
+import { createContext } from 'react';
+
+const RouteContext = createContext(undefined);
+
+export { RouteContext };

package/dist/shared/routing/route-provider.js

@@ -1,17 +1,16 @@
 "use client";
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { useGlobalState } from '../providers/global-state-provider.js';
-import { withRouting } from './with-routing.js';
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { RouteContext } from './route-context.js';
 
-function RouteProvider({ children, Link = FallbackRouteLink, navigate, paths, url, }) {
-    useGlobalState('routing', {
+function RouteProvider({ children, Link, navigate, paths, url, }) {
+    const value = useMemo(() => ({
         Link,
         navigate,
         paths,
         url,
-    });
-    return jsx(Fragment, { children: children });
+    }), [Link, navigate, paths, url]);
+    return jsx(RouteContext.Provider, { value: value, children: children });
 }
-const FallbackRouteLink = withRouting('a');
 
 export { RouteProvider };

package/dist/shared/routing/types.d.ts

@@ -3,6 +3,8 @@ export interface Paths {
     ACCOUNT: string;
     ACCOUNT_ADDRESSES: string;
     ACCOUNT_CREATE: string;
+    ACCOUNT_EDIT_BILL_TO_ADDRESS: string;
+    ACCOUNT_EDIT_SHIP_TO_ADDRESS: string;
     ACCOUNT_INVOICES: string;
     ACCOUNT_MY_LISTS: string;
     ACCOUNT_ORDERS: string;
@@ -16,7 +18,7 @@ export interface Paths {
     REVIEW_AND_SUBMIT: string;
     SIGN_IN: string;
 }
-export interface RouteContext {
+export interface RouteContextValue {
     Link?: ElementType<RouteLinkElementProps>;
     navigate: NavigateFunction;
     paths: Paths;

package/dist/shared/routing/use-location.d.ts

@@ -1,9 +1,9 @@
 import qs from 'query-string';
 export declare function useLocation(): {
     basePathname: string | undefined;
-    fullPathname: string | undefined;
+    fullPathname: string;
     href: string;
-    pathname: string | undefined;
+    pathname: string;
     query: qs.ParsedQuery<string>;
-    search: string | undefined;
+    search: string;
 };

package/dist/shared/routing/use-location.js

@@ -1,15 +1,15 @@
+"use client";
 import qs from 'query-string';
-import { useGlobalState } from '../providers/global-state-provider.js';
+import { useRouter } from './use-router.js';
 
 function useLocation() {
-    const [routeState] = useGlobalState('routing');
-    const { url: { basePathname, pathname, search }, } = routeState || { url: {} };
+    const { url: { basePathname, pathname, search }, } = useRouter();
     const query = qs.parse(search || '');
     return {
         basePathname,
         fullPathname: pathname,
         href: `${pathname}${search}`,
-        pathname: pathname?.replace(new RegExp(`^${basePathname}`), ''),
+        pathname: pathname.replace(new RegExp(`^${basePathname}`), ''),
         query,
         search,
     };

package/dist/shared/routing/use-navigate.js

@@ -1,22 +1,19 @@
 "use client";
 import { useRef, useCallback } from 'react';
-import { useGlobalState } from '../providers/global-state-provider.js';
 import { useOnNavigate } from './use-on-navigate.js';
+import { useRouter } from './use-router.js';
 
 function useNavigate() {
     const isNavigatingRef = useRef(false);
-    const [state] = useGlobalState('routing');
+    const routeState = useRouter();
     const trigger = useOnNavigate(() => {
         isNavigatingRef.current = false;
     });
-    if (!state) {
-        throw new Error('RouteProvider not found');
-    }
     const navigate = useCallback((href, options) => {
         trigger(href, options);
         isNavigatingRef.current = true;
-        return state.navigate(href, options);
-    }, [state, trigger]);
+        return routeState.navigate(href, options);
+    }, [routeState, trigger]);
     return { isNavigating: isNavigatingRef.current, navigate };
 }
 

package/dist/shared/routing/use-paths.js

@@ -1,10 +1,9 @@
-import { useGlobalState } from '../providers/global-state-provider.js';
+"use client";
+import { useRouter } from './use-router.js';
 
 function usePaths() {
-    const [routeState] = useGlobalState('routing');
-    if (!routeState)
-        throw new Error('usePaths must be used within a RouteProvider context');
-    return routeState.paths;
+    const { paths } = useRouter();
+    return paths;
 }
 
 export { usePaths };

package/dist/shared/routing/use-route-link-element.d.ts

@@ -1 +1 @@
-export declare function useRouteLinkElement(): React.ElementType<import("./types").RouteLinkElementProps> | undefined;
+export declare function useRouteLinkElement(): React.ElementType<import("./types").RouteLinkElementProps>;

package/dist/shared/routing/use-route-link-element.js

@@ -1,11 +1,10 @@
-import { useGlobalState } from '../providers/global-state-provider.js';
+"use client";
+import { useRouter } from './use-router.js';
+import { FallbackRouteLink } from './with-routing.js';
 
 function useRouteLinkElement() {
-    const [state] = useGlobalState('routing');
-    if (!state) {
-        throw new Error('RouteProvider not found');
-    }
-    return state.Link;
+    const { Link } = useRouter();
+    return Link || FallbackRouteLink;
 }
 
 export { useRouteLinkElement };

package/dist/shared/routing/use-route-link.d.ts

@@ -1,6 +1,6 @@
 import { NavigateOptions } from './types';
 export declare function useRouteLink(): {
-    RouteLinkElement: React.ElementType<import("./types").RouteLinkElementProps> | undefined;
+    RouteLinkElement: React.ElementType<import("./types").RouteLinkElementProps>;
     getRouteLinkProps: (href: string, route?: NavigateOptions) => {
         href: string;
         onNavigate: () => void;

package/dist/shared/routing/use-route-link.js

@@ -1,3 +1,4 @@
+"use client";
 import { useCallback } from 'react';
 import { buildHref } from './route-utils.js';
 import { useLocation } from './use-location.js';

package/dist/shared/routing/use-router.d.ts

@@ -0,0 +1 @@
+export declare function useRouter(): import("./types").RouteContextValue;

package/dist/shared/routing/use-router.js

@@ -0,0 +1,13 @@
+"use client";
+import { useContext } from 'react';
+import { RouteContext } from './route-context.js';
+
+function useRouter() {
+    const context = useContext(RouteContext);
+    if (!context) {
+        throw new Error('useRouter must be used within a RouteProvider');
+    }
+    return context;
+}
+
+export { useRouter };

package/dist/shared/routing/with-routing.d.ts

@@ -5,3 +5,4 @@ export interface WithRoutingProps {
     route?: NavigateOptions;
 }
 export declare function withRouting(component: ElementType<RouteLinkElementProps>): React.FunctionComponent<RouteLinkElementProps>;
+export declare const FallbackRouteLink: React.FunctionComponent<RouteLinkElementProps>;

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

@@ -29,5 +29,6 @@ function withRouting(component) {
     Component.displayName = `WithRouting(${component.toString()})`;
     return Component;
 }
+const FallbackRouteLink = withRouting('a');
 
-export { withRouting };
+export { FallbackRouteLink, withRouting };

package/dist/styles.css

@@ -1386,13 +1386,22 @@ html {
   all: unset;
   display: flex;
   box-sizing: border-box;
-  align-items: baseline;
+  align-items: center;
   color: var(--color-brand-black);
   cursor: pointer;
-  font-size: var(--font-size-14);
+  font-size: inherit;
   forced-color-adjust: none;
+  line-height: 1;
 }
 
+  .checkbox-module-QzsaZ.checkbox-module--o4dt {
+    font-size: var(--font-size-14);
+  }
+
+  .checkbox-module-QzsaZ.checkbox-module-5vjph {
+    font-size: var(--font-size-16);
+  }
+
   .checkbox-module-QzsaZ .checkbox-module-spG9E {
     display: flex;
     width: 16px;
@@ -5354,16 +5363,27 @@ button.swiper-pagination-bullet {
   */
 }
 
-.edit-address-form-module-HF64G {
+.address-form-module-pbmJ- {
   display: grid;
+  gap: var(--space-16);
+  grid-template-columns: auto;
 }
 
-  @media (width >= 576px) {.edit-address-form-module-HF64G {
-    grid-column: span 2
+  .address-form-module-pbmJ- .address-form-module-dRYo2 {
+    display: grid;
+  }
+
+  @media (width >= 576px) {.address-form-module-pbmJ- {
+    align-items: flex-start;
+    grid-template-columns: 1fr 1fr
 }
+
+    .address-form-module-pbmJ- .address-form-module-dRYo2 {
+      grid-column: span 2;
+    }
   }
 
-.edit-address-form-module-V-LOB {
+.address-form-module-62GxY {
   margin-block-start: var(--space-8);
 }
 
@@ -7666,7 +7686,7 @@ button.swiper-pagination-bullet {
     display: grid;
   }
 
-  @media (width >= 576px) {.edit-checkout-bill-to-address-form-module-UWk3T {
+  @media (width >= 768px) {.edit-checkout-bill-to-address-form-module-UWk3T {
     align-items: flex-start;
     grid-template-columns: 1fr 1fr
 }
@@ -7812,6 +7832,72 @@ button.swiper-pagination-bullet {
   margin-block-start: var(--space-16);
 }
 
+.create-ship-to-address-module--IJ52 {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-end;
+  gap: var(--space-8);
+}
+
+  @media (width >= 576px) {.create-ship-to-address-module--IJ52 {
+    flex-direction: row;
+    align-items: center;
+    grid-column: span 2
+}
+  }
+
+@media (width >= 576px) {
+
+.create-ship-to-address-module-FYIIw {
+    grid-column: span 2
+}
+  }
+
+.edit-bill-to-address-module-u7Vjd {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-end;
+  gap: var(--space-8);
+}
+
+  @media (width >= 576px) {.edit-bill-to-address-module-u7Vjd {
+    flex-direction: row;
+    align-items: center;
+    grid-column: span 2
+}
+  }
+
+@media (width >= 576px) {
+
+.edit-bill-to-address-module-WZIOF {
+    grid-column: span 2
+}
+  }
+
+.edit-ship-to-address-module-aDVqM {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-end;
+  gap: var(--space-8);
+}
+
+  @media (width >= 576px) {.edit-ship-to-address-module-aDVqM {
+    flex-direction: row;
+    align-items: center;
+    grid-column: span 2
+}
+  }
+
+@media (width >= 576px) {
+
+.edit-ship-to-address-module-9FsP4 {
+    grid-column: span 2
+}
+  }
+
 .edit-user-info-module-yQOre {
   display: grid;
   inset: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "200.0.0",
+  "version": "202.0.0",
   "type": "module",
   "license": "MIT",
   "engines": {

package/dist/forms/partials/edit-address-form/edit-address-form.d.ts

@@ -1,9 +0,0 @@
-import { Address } from '../../../shared/model/address';
-import { Country } from '../../../shared/model/countries-languages';
-export interface EditAddressFormProps {
-    address: Address | null | undefined;
-    countries: Country[];
-    currentCountry: Country | undefined;
-    isLoading: boolean;
-}
-export declare function EditAddressForm({ address, countries, currentCountry: _currentCountry, isLoading, }: EditAddressFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/forms/partials/edit-address-form/edit-address-form.js

@@ -1,36 +0,0 @@
-"use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState } from 'react';
-import { CountrySelect } from '../../../country-select/country-select.js';
-import { TextField } from '../../fields/text-field/text-field.js';
-import { FormattedMessage } from '../../../intl/formatted-message.js';
-import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
-import { Message } from '../../../message/message.js';
-import { validatePhone, validateEmail } from '../../../shared/model/address.js';
-import styles from './edit-address-form.module.css.js';
-
-function EditAddressForm({ address, countries, currentCountry: _currentCountry, isLoading, }) {
-    const t = useFormattedMessage();
-    const [companyName, setCompanyName] = useState(address?.companyName || '');
-    const [lastName, setLastName] = useState(address?.lastName || '');
-    const currentCountry = countries.find(c => c.id === address?.country?.id) || _currentCountry;
-    const [selectedCountry, setSelectedCountry] = useState(currentCountry);
-    const currencyHasChanged = Boolean(currentCountry) &&
-        selectedCountry?.currencyCode !== currentCountry?.currencyCode;
-    if (countries.length === 0) {
-        return (jsx(Message, { type: "danger", children: jsx(FormattedMessage, { force: true, id: "No countries available. Unable to change address." }) }));
-    }
-    return (jsxs(Fragment, { children: [jsx(TextField, { defaultValue: address?.firstName, isDisabled: isLoading, label: t('First name'), name: "firstName", showLabel: true }), jsx(TextField, { isDisabled: isLoading, isRequired: !companyName, label: t('Last name'), minLength: 3, name: "lastName", onChange: setLastName, showLabel: true, value: lastName }, `lastname-${Boolean(companyName)}`), jsx(TextField, { defaultValue: address?.companyName, isDisabled: isLoading, label: t('Company name'), name: "companyName", onChange: setCompanyName, showLabel: true, value: companyName }), jsx(TextField, { defaultValue: address?.attention, isDisabled: isLoading, label: t('Attention'), name: "attention", showLabel: true }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, defaultValue: address?.address1, isDisabled: isLoading, label: `${t('Address')} 1`, maxLength: 30, minLength: 3, name: "address1", showLabel: true }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { defaultValue: address?.address2, isDisabled: isLoading, label: `${t('Address')} 2`, maxLength: 30, minLength: 3, name: "address2", showLabel: true }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { defaultValue: address?.address3, isDisabled: isLoading, label: `${t('Address')} 3`, maxLength: 30, minLength: 3, name: "address3", showLabel: true }) }), jsx(TextField, { isRequired: true, defaultValue: address?.postalCode, isDisabled: isLoading, label: t('Postal Code'), maxLength: 10, minLength: 4, name: "postalCode", showLabel: true }), jsx(TextField, { isRequired: true, defaultValue: address?.city, isDisabled: isLoading, label: t('City'), maxLength: 30, minLength: 3, name: "city", showLabel: true }), jsxs("div", { className: styles['span-2'], children: [jsx(CountrySelect, { isRequired: true, countries: countries, "data-test-selector": "countrySelect", isDisabled: isLoading, name: "countrySelect", onCountryChange: setSelectedCountry, selectedCountry: selectedCountry }), currencyHasChanged && (jsx(Message, { className: styles['currency-warning'], type: "warning", children: jsx(FormattedMessage, { id: "Selecting this country will result in your cart to be converted to the currency {0}", replacementValues: {
-                                '0': selectedCountry?.currencyCode || t('Unknown'),
-                            } }) }))] }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, defaultValue: address?.phone, isDisabled: isLoading, label: t('Phone'), name: "phone", showLabel: true, validate: value => {
-                        if (!value)
-                            return value;
-                        return (validatePhone(value) || t('Please enter a valid phone number'));
-                    } }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, defaultValue: address?.email || '', isDisabled: isLoading, 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'));
-                    } }) })] }));
-}
-
-export { EditAddressForm };

package/dist/forms/partials/edit-address-form/edit-address-form.module.css.js

@@ -1,3 +0,0 @@
-var styles = {"span-2":"edit-address-form-module-HF64G","currency-warning":"edit-address-form-module-V-LOB"};
-
-export { styles as default };

package/dist/pages/my-sonic/actions/edit-bill-to-address/edit-bill-to-address.d.ts

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

package/dist/pages/my-sonic/actions/edit-bill-to-address/edit-bill-to-address.js

@@ -1,8 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { EditAddressForm } from '../../../../forms/partials/edit-address-form/edit-address-form.js';
-
-function EditBillToAddress() {
-    return (jsx(EditAddressForm, { address: undefined, countries: [], currentCountry: undefined, isLoading: false }));
-}
-
-export { EditBillToAddress };