@sonic-equipment/ui 0.0.119 → 1.0.0

package/dist/pages/checkout/shipping-page/components/edit-checkout-bill-to-address-form.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Form } from 'react-aria-components';
+import { Checkbox } from '../../../../forms/elements/checkbox/checkbox.js';
+import { TextField } from '../../../../forms/fields/text-field/text-field.js';
+import { AddressForm } from '../../../../forms/partials/address-form/address-form.js';
+import { InfoIconTooltip } from '../../../../info-icon-tooltip/info-icon-tooltip.js';
+import { FormattedMessage } from '../../../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import { useFetchCurrentCart } from '../../../../shared/api/storefront/hooks/cart/use-fetch-current-cart.js';
+import { CheckoutPageSection } from '../../layouts/checkout-page-layout/components/checkout-page-section.js';
+import { CheckoutPageSectionContent } from '../../layouts/checkout-page-layout/components/checkout-page-section-content.js';
+import { SonicAddress } from './sonic-address.js';
+import styles from './edit-checkout-bill-to-address-form.module.css.js';
+
+const EDIT_ADDRESS_FORM_ID = 'billToForm';
+function EditCheckoutBillToAddressForm({ billTo, countries, currentCountry, isLoading, isPickup, onSubmit, }) {
+    const t = useFormattedMessage();
+    const { data: cart } = useFetchCurrentCart();
+    return (jsxs(Fragment, { children: [jsx(CheckoutPageSection, { title: jsx(FormattedMessage, { id: "Billing address" }), children: jsx(CheckoutPageSectionContent, { children: jsxs(Form, { className: styles.form, "data-test-selector": "billToAddressForm", id: EDIT_ADDRESS_FORM_ID, onSubmit: e => {
+                            e.preventDefault();
+                            const formData = new FormData(e.currentTarget);
+                            const countryFormValue = formData.get('countrySelect')?.toString();
+                            const country = countries.find(country => country.id === countryFormValue);
+                            if (!country)
+                                throw new Error(`Country not found ${formData.get('country')}`);
+                            onSubmit({
+                                address: {
+                                    address1: formData.get('address1')?.toString() || '',
+                                    address2: formData.get('address2')?.toString() || '',
+                                    address3: formData.get('address3')?.toString() || '',
+                                    attention: formData.get('attention')?.toString() || '',
+                                    city: formData.get('city')?.toString() || '',
+                                    companyName: formData.get('companyName')?.toString() || '',
+                                    country,
+                                    email: formData.get('email')?.toString() || '',
+                                    firstName: formData.get('firstName')?.toString() || '',
+                                    lastName: formData.get('lastName')?.toString() || '',
+                                    phone: formData.get('phone')?.toString() || '',
+                                    postalCode: formData.get('postalCode')?.toString() || '',
+                                },
+                                notes: cart?.notes === formData.get('notes')
+                                    ? undefined
+                                    : formData.get('notes')?.toString() || '',
+                            });
+                        }, children: [jsx(AddressForm, { showCurrencyChangeWarning: true, address: billTo, countries: countries, currentCountry: currentCountry, isLoading: isLoading }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { defaultValue: cart?.notes, isDisabled: isLoading, isMultiline: true, label: t('Add order notes'), name: "notes", rows: 3, showLabel: true }) })] }) }) }), jsx(CheckoutPageSection, { title: jsx(FormattedMessage, { id: isPickup ? 'Pickup address' : 'Shipping address' }), children: jsx(CheckoutPageSectionContent, { children: jsx(Fragment, { children: isPickup ? (jsx(SonicAddress, {})) : (jsxs("div", { className: styles['use-invoice-checkbox'], children: [jsx(Checkbox, { "data-test-selector": "checkboxUseBillingAddress", isDisabled: true, isSelected: true, children: jsx(FormattedMessage, { id: "Use billing address" }) }), jsx(InfoIconTooltip, { size: "sm", variant: "stroke", children: t('Changing your address is currently not possible. Please contact customer support to change your address.') })] })) }) }) })] }));
+}
+
+export { EDIT_ADDRESS_FORM_ID, EditCheckoutBillToAddressForm };

package/dist/pages/checkout/shipping-page/components/edit-checkout-bill-to-address-form.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"form":"edit-checkout-bill-to-address-form-module-UWk3T","span-2":"edit-checkout-bill-to-address-form-module-ajfl4","use-invoice-checkbox":"edit-checkout-bill-to-address-form-module-jumWh"};
+
+export { styles as default };

package/dist/pages/checkout/shipping-page/components/readonly-address.d.ts

@@ -0,0 +1,17 @@
+import { BillToModel, PatchCartModel, PostShipToModel, ShipToModel } from '../../../../shared/api/storefront/model/storefront.model';
+import { Country } from '../../../../shared/model/countries-languages';
+export declare function ReadOnlyAddresses({ billTo, cartId, countries, currentCountry, isLoading, isPickup, notes, onSubmit, shipTo, }: {
+    billTo: BillToModel | undefined | null;
+    cartId: string;
+    countries: Country[];
+    currentCountry?: Country | undefined;
+    isLoading: boolean;
+    isPickup: boolean;
+    notes: string | undefined;
+    onSubmit: (args: {
+        cart?: PatchCartModel;
+        notes: string | undefined;
+        shipTo?: PostShipToModel;
+    }) => void;
+    shipTo: ShipToModel | undefined | null;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/pages/checkout/shipping-page/components/readonly-address.js

@@ -0,0 +1,130 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Form } from 'react-aria-components';
+import { AddressInfoDisplay } from '../../../../address-info-display/address-info-display.js';
+import { TextField } from '../../../../forms/fields/text-field/text-field.js';
+import { AddressForm } from '../../../../forms/partials/address-form/address-form.js';
+import { FormattedMessage } from '../../../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import { CheckoutPageSection } from '../../layouts/checkout-page-layout/components/checkout-page-section.js';
+import { CheckoutPageSectionContent } from '../../layouts/checkout-page-layout/components/checkout-page-section-content.js';
+import { AddressBookSelector } from './address-book-selector.js';
+import { EDIT_ADDRESS_FORM_ID } from './edit-checkout-bill-to-address-form.js';
+import ShipToModeSelector from './ship-to-mode-selector.js';
+import { SonicAddress } from './sonic-address.js';
+import styles from './readonly-address.module.css.js';
+
+function ReadOnlyAddresses({ billTo, cartId, countries, currentCountry, isLoading, isPickup, notes, onSubmit, shipTo, }) {
+    const t = useFormattedMessage();
+    const billToId = billTo?.id;
+    const shipToId = shipTo?.id;
+    const isShipToABillToAddress = billToId && shipToId && billToId === shipToId;
+    const onSubmitHandler = (event) => {
+        event.preventDefault();
+        const formData = new FormData(event.currentTarget);
+        const shippingType = formData
+            .get('shippingType')
+            ?.toString();
+        switch (shippingType) {
+            case 'selectFromAddressBook': {
+                const selectedShipToId = formData.get('selectedShipToId')?.toString();
+                if (!selectedShipToId) {
+                    return;
+                }
+                onSubmit({
+                    cart: {
+                        id: cartId,
+                        shipTo: { id: selectedShipToId },
+                    },
+                    notes: notes === formData.get('notes')
+                        ? undefined
+                        : formData.get('notes')?.toString() || '',
+                });
+                break;
+            }
+            case 'useNewAddress': {
+                const countryFormValue = formData.get('countrySelect')?.toString();
+                const country = countries.find(country => country.id === countryFormValue);
+                if (!country)
+                    throw new Error(`Country not found ${formData.get('country')}`);
+                const shipToUpdate = {
+                    address1: formData.get('address1')?.toString() || '',
+                    address2: formData.get('address2')?.toString() || '',
+                    address3: formData.get('address3')?.toString() || '',
+                    attention: formData.get('attention')?.toString() || '',
+                    city: formData.get('city')?.toString() || '',
+                    companyName: formData.get('companyName')?.toString() || '',
+                    country,
+                    email: formData.get('email')?.toString() || '',
+                    firstName: formData.get('firstName')?.toString() || '',
+                    isNew: true,
+                    lastName: formData.get('lastName')?.toString() || '',
+                    phone: formData.get('phone')?.toString() || '',
+                    postalCode: formData.get('postalCode')?.toString() || '',
+                };
+                onSubmit({
+                    notes: notes === formData.get('notes')
+                        ? undefined
+                        : formData.get('notes')?.toString() || '',
+                    shipTo: shipToUpdate,
+                });
+                break;
+            }
+            case 'useBillTo': {
+                const country = countries.find(country => country.id === billTo.country.id);
+                if (!country)
+                    throw new Error(`Country not found ${formData.get('country')}`);
+                onSubmit({
+                    cart: {
+                        id: cartId,
+                        shipTo: null,
+                    },
+                    notes: notes === formData.get('notes')
+                        ? undefined
+                        : formData.get('notes')?.toString() || '',
+                });
+                break;
+            }
+            default:
+                onSubmit({
+                    notes: notes === formData.get('notes')
+                        ? undefined
+                        : formData.get('notes')?.toString() || '',
+                });
+                break;
+        }
+    };
+    return (jsxs(Form, { id: EDIT_ADDRESS_FORM_ID, onSubmit: onSubmitHandler, children: [jsx(CheckoutPageSection, { title: jsx(FormattedMessage, { id: "Billing address" }), children: jsxs(CheckoutPageSectionContent, { children: [billTo && (jsx(AddressInfoDisplay, { address: {
+                                address1: billTo.address1,
+                                address2: billTo.address2,
+                                address3: billTo.address3,
+                                attention: billTo.attention,
+                                city: billTo.city,
+                                companyName: billTo.companyName,
+                                country: billTo.country,
+                                email: billTo.email,
+                                firstName: billTo.firstName,
+                                lastName: billTo.lastName,
+                                phone: billTo.phone,
+                                postalCode: billTo.postalCode,
+                            }, "data-test-selector": "billToAddress" })), jsx("div", { className: styles.notes, children: jsx(TextField, { defaultValue: notes, isDisabled: isLoading, isMultiline: true, label: t('Add order notes'), name: "notes", rows: 3, showLabel: true }) })] }) }), jsx(CheckoutPageSection, { title: jsx(FormattedMessage, { id: isPickup ? 'Pickup address' : 'Shipping address' }), children: jsx(CheckoutPageSectionContent, { stretch: true, children: isPickup ? (jsx(SonicAddress, {})) : (jsx(ShipToModeSelector, { addressBookSelector: billTo?.id && (jsx("div", { className: styles['address-book-selector'], children: jsx(AddressBookSelector, { billToId: billTo.id, currentShipToId: shipTo?.id }) })), defaultShippingOption: isShipToABillToAddress
+                            ? 'useBillTo'
+                            : shipTo
+                                ? 'selectFromAddressBook'
+                                : 'useNewAddress', newAddressForm: jsx("div", { className: styles['new-address-form'], children: jsx(AddressForm, { address: shipTo, countries: countries, currentCountry: currentCountry }) }), shipToInfoDisplay: shipTo && (jsx("div", { className: styles['ship-to-info-display'], children: jsx(AddressInfoDisplay, { address: {
+                                    address1: shipTo.address1,
+                                    address2: shipTo.address2,
+                                    address3: shipTo.address3,
+                                    attention: shipTo.attention,
+                                    city: shipTo.city,
+                                    companyName: shipTo.companyName,
+                                    country: shipTo.country,
+                                    email: shipTo.email,
+                                    firstName: shipTo.firstName,
+                                    lastName: shipTo.lastName,
+                                    phone: shipTo.phone,
+                                    postalCode: shipTo.postalCode,
+                                }, "data-test-selector": "shipToAddress" }) })) })) }) })] }));
+}
+
+export { ReadOnlyAddresses };

package/dist/pages/checkout/shipping-page/components/readonly-address.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"notes":"readonly-address-module-1hAQK","ship-to-info-display":"readonly-address-module-1bMRB","address-book-selector":"readonly-address-module-8Y-8n","new-address-form":"readonly-address-module-p6QoO"};
+
+export { styles as default };

package/dist/pages/checkout/shipping-page/components/ship-to-mode-selector.d.ts

@@ -0,0 +1,8 @@
+export type ShippingOption = 'useBillTo' | 'selectFromAddressBook' | 'useNewAddress';
+export type ShipToSelectorProps = {
+    addressBookSelector?: React.ReactNode;
+    defaultShippingOption?: ShippingOption;
+    newAddressForm: React.ReactNode;
+    shipToInfoDisplay?: React.ReactNode;
+};
+export default function ShipToModeSelector(props: ShipToSelectorProps): import("react/jsx-runtime").JSX.Element;

package/dist/pages/checkout/shipping-page/components/ship-to-mode-selector.js

@@ -0,0 +1,25 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { SelectField } from '../../../../forms/fields/select-field/select-field.js';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+
+function ShipToModeSelector(props) {
+    const t = useFormattedMessage();
+    const [shippingOption, setShippingOption] = useState(props.defaultShippingOption ?? 'useBillTo');
+    const options = {
+        // @ts-expect-error - Translation key will be added to translation files
+        selectFromAddressBook: t('Select from address book'),
+        useBillTo: t('Use billing address'),
+        // useDefaultShipTo: t('Use default shipping address'),
+        useNewAddress: t('Use new address'),
+    };
+    const additionalComponentForShipping = {
+        selectFromAddressBook: props.addressBookSelector,
+        useBillTo: null,
+        // useDefaultShipTo: props.shipToInfoDisplay,
+        useNewAddress: props.newAddressForm,
+    }[shippingOption];
+    return (jsxs(Fragment, { children: [jsx(SelectField, { "data-test-selector": "order-history-filter", label: t('Shipping address'), name: "shippingType", onChange: setShippingOption, options: options, selectedOption: shippingOption, showLabel: false }), additionalComponentForShipping] }));
+}
+
+export { ShipToModeSelector as default };

package/dist/pages/checkout/shipping-page/components/sonic-address.d.ts

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

package/dist/pages/checkout/shipping-page/components/sonic-address.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import styles from './sonic-address.module.css.js';
+
+function SonicAddress() {
+    const t = useFormattedMessage();
+    return (jsx("div", { className: styles['sonic-address'], 
+        // eslint-disable-next-line @eslint-react/dom/no-dangerously-set-innerhtml
+        dangerouslySetInnerHTML: {
+            __html: t('Sonic address').replaceAll(String.raw `\n`, '\n'),
+        }, "data-test-selector": "pickupAddressSonic" }));
+}
+
+export { SonicAddress };

package/dist/pages/checkout/shipping-page/components/sonic-address.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"sonic-address":"sonic-address-module-9Q9-Q"};
+
+export { styles as default };

package/dist/pages/checkout/shipping-page/hooks/use-patch-shipping-details.d.ts

@@ -0,0 +1,22 @@
+import { BillToModel, CartModel, PatchBillToModel, PatchCartModel, SessionModel } from '../../../../shared/api/storefront/model/storefront.model';
+export declare function usePatchShippingDetails(): {
+    error: unknown;
+    isError: boolean;
+    isLoading: boolean;
+    isSuccess: boolean;
+    mutate: (args_0: {
+        billTo?: PatchBillToModel;
+        cart: PatchCartModel;
+        notes: string | undefined;
+        shipTo?: Partial<Omit<import("../../../../shared/api/storefront/model/storefront.model").ShipToModel, "country"> & {
+            country?: import("../../../../shared/api/storefront/model/storefront.model").CountryModel | {
+                id: string;
+            } | null;
+        }>;
+    }) => Promise<{
+        patchedBillTo: BillToModel | undefined;
+        patchedCart: CartModel | undefined;
+        patchedSession: SessionModel | undefined;
+    }>;
+    reset: () => void;
+};

package/dist/pages/checkout/shipping-page/hooks/use-patch-shipping-details.js

@@ -0,0 +1,60 @@
+"use client";
+import { patchCart } from '../../../../shared/api/bff/services/bff-service.js';
+import { useAwaitableMutation } from '../../../../shared/api/shared/hooks/use-awaitable-mutation.js';
+import { patchSession } from '../../../../shared/api/storefront/services/authentication-service.js';
+import { postShipToAddress, patchBillToAddress } from '../../../../shared/api/storefront/services/customer-service.js';
+
+function usePatchShippingDetails() {
+    return useAwaitableMutation({
+        mutationFn: async ({ billTo, cart, notes, shipTo, }) => {
+            const postedShipTo = shipTo
+                ? await postShipToAddress({
+                    billToId: cart.billTo.id,
+                    shipTo,
+                })
+                : undefined;
+            const patchedBillTo = billTo
+                ? await patchBillToAddress({ billTo })
+                : undefined;
+            const patchedSession = patchedBillTo || cart.shipTo !== null
+                ? await patchSession({
+                    session: {
+                        billTo: patchedBillTo ? { id: patchedBillTo.id } : undefined,
+                        customerWasUpdated: true,
+                        shipTo: postedShipTo ? { id: postedShipTo.id } : undefined,
+                    },
+                })
+                : undefined;
+            const patchedCart = patchedBillTo ||
+                patchedSession ||
+                notes !== undefined ||
+                postedShipTo ||
+                cart.shipTo === null
+                ? await patchCart({
+                    cart: {
+                        ...cart,
+                        billTo: patchedBillTo || cart.billTo,
+                        notes,
+                        shipTo: postedShipTo ?? cart.shipTo ?? { id: cart.billTo.id },
+                    },
+                })
+                : undefined;
+            return { patchedBillTo, patchedCart, patchedSession };
+        },
+        onSuccess: ({ data: { patchedBillTo, patchedCart, patchedSession }, queryClient, }) => {
+            if (patchedBillTo)
+                queryClient.setQueryData(['customer', 'bill-to-addresses'], patchedBillTo);
+            if (patchedSession) {
+                queryClient.setQueryData(['session'], patchedSession);
+            }
+            else if (patchedBillTo) {
+                queryClient.invalidateQueries({ queryKey: ['session'] });
+            }
+            if (patchedCart) {
+                queryClient.setQueryData(['carts', patchedCart.id], patchedCart);
+            }
+        },
+    });
+}
+
+export { usePatchShippingDetails };

package/dist/pages/checkout/shipping-page/shipping-page-content.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { CartModel } from '../../../shared/api/storefront/model/storefront.model';
+export interface ShippingPageContentProps {
+    cart: CartModel;
+    editAddress: ReactNode;
+    errorPatchBillingAddress?: unknown;
+    fulfillmentMethods: string[] | undefined;
+    isGuest: boolean;
+    isLoadingFulfillmentMethods: boolean;
+    isPatching: boolean;
+    isPatchingSession: boolean;
+    onChangeFulfillmentMethod: (value: string) => void;
+    readOnlyAddress: ReactNode;
+}
+export declare function ShippingPageContent({ cart, editAddress, errorPatchBillingAddress, fulfillmentMethods, isGuest, isLoadingFulfillmentMethods, isPatching, isPatchingSession, onChangeFulfillmentMethod, readOnlyAddress, }: ShippingPageContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/pages/checkout/shipping-page/shipping-page-content.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { Button } from '../../../buttons/button/button.js';
+import { CartTotals } from '../../../cart-totals/cart-totals.js';
+import { CartTotalsSummary } from '../../../cart-totals/cart-totals-summary.js';
+import { Select } from '../../../forms/elements/select/select.js';
+import { FormattedMessage } from '../../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
+import { getCurrencyCodeBySymbol } from '../../../shared/model/currency.js';
+import { usePaths } from '../../../shared/routing/use-paths.js';
+import { Page } from '../../components/page/page.js';
+import { CheckoutPageLayout } from '../layouts/checkout-page-layout/checkout-page-layout.js';
+import { CheckoutPageSection } from '../layouts/checkout-page-layout/components/checkout-page-section.js';
+import { CheckoutPageSectionContent } from '../layouts/checkout-page-layout/components/checkout-page-section-content.js';
+import { EDIT_ADDRESS_FORM_ID } from './components/edit-checkout-bill-to-address-form.js';
+import styles from './shipping-page.module.css.js';
+
+function ShippingPageContent({ cart, editAddress, errorPatchBillingAddress, fulfillmentMethods, isGuest, isLoadingFulfillmentMethods, isPatching, isPatchingSession, onChangeFulfillmentMethod, readOnlyAddress, }) {
+    const t = useFormattedMessage();
+    const paths = usePaths();
+    const fulfillmentMethodOptions = useMemo(() => fulfillmentMethods?.reduce((acc, method) => ({
+        ...acc,
+        [method]: t(`fulfillmentmethod.${method}`),
+    }), {}), [fulfillmentMethods, t]);
+    const hasBillToAddress = Boolean(cart.billTo?.address1);
+    const currencyCode = getCurrencyCodeBySymbol(cart.currencySymbol);
+    if (!currencyCode)
+        throw new Error(`Currency code not found for symbol ${cart.currencySymbol}`);
+    return (jsx(Page, { breadcrumb: [
+            { href: paths.HOME, label: t('Home') },
+            {
+                href: paths.CHECKOUT_SHIPPING,
+                label: t('Shipping details'),
+            },
+        ], "data-test-selector": "shippingPage", title: t('Shipping details'), children: jsxs(CheckoutPageLayout, { actions: {
+                primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutShippingCartTotalContinueButton", form: EDIT_ADDRESS_FORM_ID, isDisabled: isPatching, isLoading: isPatching || isPatchingSession ? (jsx(FormattedMessage, { id: "Updating address" })) : undefined, type: "submit", children: jsx(FormattedMessage, { id: "Checkout order" }) })),
+            }, mobileSummary: jsx(CartTotalsSummary, { currencyCode: currencyCode, totalAmount: cart.orderGrandTotal }), overview: jsx(CartTotals, { currencyCode: currencyCode, fulfillmentMethod: fulfillmentMethods && fulfillmentMethods.length === 1
+                    ? cart.fulfillmentMethod
+                    : undefined, shippingCost: cart.shippingAndHandling, subtotal: cart.orderSubTotal, tax: cart.totalTax, total: cart.orderGrandTotal, vatPercentage: cart.cartLines?.[0]?.pricing?.vatRate }), children: [jsxs(Fragment, { children: [fulfillmentMethods && fulfillmentMethods.length > 1 && (jsx(CheckoutPageSection, { hasBorder: true, title: t('Fulfillment method'), children: jsx(CheckoutPageSectionContent, { children: jsx("div", { className: styles['fulfillment-select-wrapper'], children: jsx(Select, { isRequired: true, showLabel: true, "data-test-selector": "fulfillmentMethodSelect", defaultSelectedOption: cart.fulfillmentMethod, isLoading: isLoadingFulfillmentMethods, label: t('Fulfillment method'), name: "fulfillmentMethod", onChange: onChangeFulfillmentMethod, options: fulfillmentMethodOptions || {}, variant: "solid" }) }) }) })), hasBillToAddress && !isGuest ? readOnlyAddress : editAddress] }), Boolean(errorPatchBillingAddress) && (jsx("div", { className: styles['error-message'], children: jsx(FormattedMessage, { id: "An unexpected error occured" }) }))] }) }));
+}
+
+export { ShippingPageContent };

package/dist/pages/checkout/shipping-page/shipping-page.d.ts

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

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

@@ -0,0 +1,190 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { useCountries } from '../../../country-select/hooks/use-countries.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 { useFetchCurrentCart } from '../../../shared/api/storefront/hooks/cart/use-fetch-current-cart.js';
+import { useFetchFulfillmentMethodsForCurrentCart } from '../../../shared/api/storefront/hooks/customer/use-fetch-fulfillment-methods-for-current-cart.js';
+import { useDataLayer } from '../../../shared/ga/use-data-layer.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 { hasNo } from '../../../shared/utils/types.js';
+import { ErrorPage } from '../../error-page/error-page.js';
+import { LoadingPage } from '../../loading-page/loading-page.js';
+import { CurrencyChangeDialog } from './components/currency-change-dialog.js';
+import { EditCheckoutBillToAddressForm } from './components/edit-checkout-bill-to-address-form.js';
+import { ReadOnlyAddresses } from './components/readonly-address.js';
+import { usePatchShippingDetails } from './hooks/use-patch-shipping-details.js';
+import { ShippingPageContent } from './shipping-page-content.js';
+
+function ShippingPage() {
+    const paths = usePaths();
+    const { createEcommerceEvent, dataLayer } = useDataLayer();
+    const gaEventPushed = useRef(false);
+    const { data: cart, error: errorFetchCart, isLoading: isLoadingCart, refetch: refetchCart, } = useFetchCurrentCart();
+    const { data: session, isLoading: isLoadingSession } = useFetchSession();
+    const hasNoBillToAddress = hasNo(cart?.billTo?.address1);
+    const isGuest = Boolean(session?.isGuest);
+    const { countries, currentCountry: selectedCountry, isFetching: isLoadingCountries, } = useCountries({
+        enabled: hasNoBillToAddress || isGuest,
+    });
+    const currentCountry = countries && cart?.billTo?.country
+        ? countries.find(country => country.id === cart.billTo?.country?.id)
+        : selectedCountry;
+    const { close: closeCurrencyWarningDialog, isOpen: currencyWarningDialogIsOpen, open: openCurrencyWarningDialog, toggle: toggleCurrencyWarningDialog, } = useDisclosure();
+    const formData = useRef();
+    const { data: fulfillmentMethods, isLoading: isLoadingFulfillmentMethods } = useFetchFulfillmentMethodsForCurrentCart();
+    const { isLoading: isPatchingSession, mutate: patchSession } = usePatchSession();
+    const { error: errorPatchBillingAddress, isError, isLoading: isPatching, isSuccess, mutate: patchShippingDetails, } = usePatchShippingDetails();
+    const isAuthenticated = session?.isAuthenticated;
+    const isLoading = isLoadingCart ||
+        isLoadingCountries ||
+        isLoadingFulfillmentMethods ||
+        isLoadingSession;
+    const { isNavigating, navigate } = useNavigate();
+    const isPickup = Boolean(cart?.fulfillmentMethod.match(/pickup/i));
+    useEffect(() => {
+        /* Initial guards. When these are not met, we should not proceed */
+        if (isNavigating)
+            return;
+        if (isAuthenticated === undefined)
+            return;
+        if (isLoading)
+            return;
+        if (isAuthenticated === false)
+            return navigate(paths.CHECKOUT_SHIPPING_VIA_SIGNIN);
+        if (hasNo(cart))
+            return;
+        if (hasNo(cart.cartLines) || cart.cartLines.length === 0)
+            return navigate(paths.CART);
+        if (hasNo(cart.billTo))
+            return navigate(paths.CHECKOUT_SHIPPING_VIA_SIGNIN);
+    }, [cart, navigate, isAuthenticated, isNavigating, paths, isLoading]);
+    useEffect(() => {
+        /* Guards for when the bill to address is saved and we should navigate to the next page */
+        if (isPatching)
+            return;
+        if (!isSuccess)
+            return;
+        if (isNavigating)
+            return;
+        if (isError)
+            return location?.reload();
+        if (hasNo(cart?.billTo?.address1))
+            return;
+        return navigate(paths.REVIEW_AND_SUBMIT);
+    }, [isSuccess, cart, paths, navigate, isNavigating, isPatching, isError]);
+    useEffect(() => {
+        if (!cart || gaEventPushed.current)
+            return;
+        dataLayer.push(createEcommerceEvent({
+            cart,
+            event: { event: 'begin_checkout' },
+        }));
+        gaEventPushed.current = true;
+    }, [cart, createEcommerceEvent, dataLayer]);
+    if (errorFetchCart)
+        return jsx(ErrorPage, { error: errorFetchCart });
+    if (isLoading || isNavigating || isError || isSuccess)
+        return jsx(LoadingPage, {});
+    if (hasNoBillToAddress && !countries)
+        throw new Error('Countries are missing');
+    if (!isAuthenticated ||
+        hasNo(session) ||
+        hasNo(cart) ||
+        hasNo(cart.cartLines) ||
+        cart.cartLines.length === 0 ||
+        hasNo(cart.billTo))
+        // TODO: Return error page, but first check all the conditions
+        return null;
+    async function handleSubmit({ address, cart, notes, }) {
+        if (!cart.billTo)
+            throw new Error('No billTo address found');
+        await patchShippingDetails({
+            billTo: {
+                ...cart.billTo,
+                address1: address.address1,
+                address2: address.address2,
+                address3: address.address3,
+                attention: address.attention,
+                city: address.city,
+                companyName: address.companyName,
+                country: { id: address.country.id },
+                email: address.email,
+                firstName: address.firstName,
+                lastName: address.lastName,
+                phone: address.phone,
+                postalCode: address.postalCode,
+            },
+            cart,
+            notes,
+        });
+        dataLayer.push(createEcommerceEvent({
+            cart,
+            event: { event: 'add_shipping_info' },
+        }));
+    }
+    return (jsx(ShippingPageContent, { cart: cart, 
+        // TODO: Combine editAddress and readOnlyAddress into one section in order
+        // for typescript to correctly infer which properties are set in what case
+        editAddress: jsxs(Fragment, { children: [jsx(EditCheckoutBillToAddressForm, { billTo: cart.billTo, countries: countries || [], currentCountry: currentCountry, isLoading: isPatching, isPickup: isPickup, onSubmit: async ({ address, notes }) => {
+                        if (!cart.billTo)
+                            return;
+                        formData.current = { address, notes };
+                        /* When the currency changes, depending on the country,
+                         * we need to show a dialog to ask the customer if they
+                         * want to review their cart with the new currency */
+                        if (address.country.currencyCode === currentCountry?.currencyCode) {
+                            handleSubmit({ address, cart, notes });
+                        }
+                        else {
+                            openCurrencyWarningDialog();
+                        }
+                    } }), jsx(CurrencyChangeDialog, { isOpen: currencyWarningDialogIsOpen, onOpenChange: toggleCurrencyWarningDialog, onSubmit: () => {
+                        if (!formData.current)
+                            return;
+                        closeCurrencyWarningDialog();
+                        handleSubmit({
+                            address: formData.current.address,
+                            cart,
+                            notes: formData.current.notes,
+                        });
+                    } })] }), errorPatchBillingAddress: errorPatchBillingAddress, fulfillmentMethods: fulfillmentMethods, isGuest: isGuest, isLoadingFulfillmentMethods: isLoadingFulfillmentMethods, isPatching: isPatching, isPatchingSession: isPatchingSession, onChangeFulfillmentMethod: async (value) => {
+            await patchSession({
+                session: {
+                    ...session,
+                    fulfillmentMethod: value,
+                },
+            });
+            await refetchCart();
+        }, readOnlyAddress: jsx(ReadOnlyAddresses, { billTo: cart.billTo, cartId: cart.id, countries: countries || [], currentCountry: currentCountry, isLoading: isPatching, isPickup: isPickup, notes: cart.notes, onSubmit: async ({ cart: updatedCart, notes, shipTo }) => {
+                if (!cart.billTo)
+                    return;
+                if (notes ||
+                    cart.shipTo === null ||
+                    (shipTo && shipTo.id !== cart.shipTo?.id) ||
+                    (updatedCart &&
+                        (updatedCart.shipTo?.id !== cart.shipTo?.id ||
+                            updatedCart.shipTo === null))) {
+                    await patchShippingDetails({
+                        cart: {
+                            ...cart,
+                            ...updatedCart,
+                        },
+                        notes,
+                        shipTo,
+                    });
+                }
+                else {
+                    navigate(paths.REVIEW_AND_SUBMIT);
+                }
+                dataLayer.push(createEcommerceEvent({
+                    cart,
+                    event: { event: 'add_shipping_info' },
+                }));
+            }, shipTo: cart.shipTo }) }));
+}
+
+export { ShippingPage };

package/dist/pages/checkout/shipping-page/shipping-page.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"fulfillment-select-wrapper":"shipping-page-module-v6oci","error-message":"shipping-page-module-FK0yX"};
+
+export { styles as default };

package/dist/pages/components/page/page.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { BreadcrumbLink } from '../../../breadcrumbs/breadcrumb';
+import { PageMetaDataProps } from '../page-meta-data/page-meta-data';
+export interface PageProps extends PageMetaDataProps {
+    breadcrumb?: BreadcrumbLink[];
+    children: ReactNode;
+    className?: string;
+    'data-test-selector'?: string;
+    fluid?: boolean;
+    fullHeight?: boolean;
+    title?: string;
+}
+export declare function Page({ alternateLanguageUrls, breadcrumb, canonicalUrl, children, className, 'data-test-selector': dataTestSelector, fluid, fullHeight, meta, openGraph, title, windowTitle, }: PageProps): import("react/jsx-runtime").JSX.Element;