@sonic-equipment/ui 0.0.119 → 1.0.0

package/dist/pages/my-sonic/pages/order-history/order-history-page.js

@@ -0,0 +1,193 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import { Breadcrumb } from '../../../../breadcrumbs/breadcrumb.js';
+import { Link } from '../../../../buttons/link/link.js';
+import { Price } from '../../../../display/price/price.js';
+import { Pagination } from '../../../../filters/pagination/pagination.js';
+import { SearchField } from '../../../../forms/fields/search-field/search-field.js';
+import { SelectField } from '../../../../forms/fields/select-field/select-field.js';
+import { SolidCartIcon } from '../../../../icons/solid/solid-cart-icon.js';
+import { FormattedDate } from '../../../../intl/formatted-date.js';
+import { FormattedMessage } from '../../../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import { useIntl } from '../../../../intl/use-intl.js';
+import { DynamicLoadingOverlay } from '../../../../loading/dynamic-loading-overlay.js';
+import { useFetchOrders } from '../../../../shared/api/storefront/hooks/orders/use-fetch-orders.js';
+import { orderStatuses } from '../../../../shared/api/storefront/model/storefront.model.js';
+import { DefaultErrorView } from '../../../../shared/error/default-error-view.js';
+import { usePaths } from '../../../../shared/routing/use-paths.js';
+import { scrollIntoViewRef } from '../../../../shared/utils/scrolling.js';
+import { DataTable } from '../../../../table/data-table.js';
+import { MySonicLayoutBreadcrumb } from '../../layouts/my-sonic-layout/my-sonic-layout-breadcrumb.js';
+import { MySonicLayoutPage } from '../../layouts/my-sonic-layout/my-sonic-layout-page.js';
+import styles from './order-history-page.module.css.js';
+
+const dateOptions = {
+    day: 'numeric',
+    month: 'numeric',
+    year: 'numeric',
+};
+function OrderHistoryPage() {
+    const t = useFormattedMessage();
+    const { cultureCode } = useIntl();
+    const orderHistoryRef = useRef(null);
+    const paths = usePaths();
+    const [status, setStatus] = useState();
+    const [search, setSearch] = useState('');
+    const [sort, setSort] = useState({
+        name: 'webOrderNumber',
+        order: 'DESC',
+    });
+    const [page, setPage] = useState(1);
+    const { data, error, isFetching } = useFetchOrders({
+        page,
+        pageSize: 20,
+        search,
+        sort,
+        status,
+    });
+    useEffect(() => {
+        scrollIntoViewRef(orderHistoryRef);
+    }, [page]);
+    if (error)
+        return (jsx(MySonicLayoutPage, { "data-test-selector": "order-history", title: t('Order history'), children: jsx(DefaultErrorView, { error: error, title: "" }) }));
+    const { orders, pagination } = data ?? {
+        orders: [],
+        pagination: {},
+    };
+    const searchOrders = (value) => {
+        if (value.length >= 3 || value.length === 0) {
+            setPage(1);
+            setSearch(value);
+        }
+    };
+    const filterOrders = (value) => {
+        if (value === status)
+            return;
+        setPage(1);
+        setStatus(value === 'any' ? undefined : value);
+    };
+    const filterOptions = orderStatuses.reduce((options, status) => ({
+        ...options,
+        [status]: t(`orderStatus.${status}`),
+    }), { any: t('orderStatus.Any') });
+    return (jsx(MySonicLayoutPage, { "data-test-selector": "order-history", title: t('Order history'), children: jsxs("section", { ref: orderHistoryRef, className: styles['order-history'], children: [jsx("div", { className: styles['search'], children: jsx(SearchField, { isDebounced: true, "data-test-selector": "order-history-search", label: t('Search orders'), onChange: searchOrders, placeholder: t('Search orders'), showLabel: false, variant: "outline" }) }), jsx("div", { className: styles['filter'], children: jsx(SelectField, { "data-test-selector": "order-history-filter", label: t('Filter order status'), onChange: filterOrders, options: filterOptions, selectedOption: status, showLabel: false }) }), jsx("div", { "aria-label": t('Results'), "aria-live": "polite", className: styles['results'], children: jsx(DynamicLoadingOverlay, { isLoading: isFetching, children: orders && orders.length > 0 ? (jsx(DataTable, { actions: [
+                                {
+                                    'data-test-selector': 'order-history-reorder',
+                                    isPrimary: false,
+                                    key: 'reorder',
+                                    label: 'Reorder',
+                                    onAction: order => window?.alert(`Reorder ${order.id}`),
+                                },
+                            ], columns: [
+                                {
+                                    header: {
+                                        label: 'orderProperty.Number',
+                                    },
+                                    key: 'webOrderNumber',
+                                    props: {
+                                        cssColumn: 'minmax(15ch, min-content)',
+                                        nowrap: true,
+                                        sticky: true,
+                                    },
+                                    sort: { direction: 'DESC', isEnabled: true },
+                                    value: {
+                                        render: order => (jsx(Link, { hasUnderline: true, color: "secondary", "data-test-selector": "order-history-ordernumber-link", href: `${paths.ACCOUNT_ORDERS}/${order.webOrderNumber}?returnUrl=${encodeURIComponent(`${paths.ACCOUNT_ORDERS}`)}`, children: order.webOrderNumber })),
+                                    },
+                                },
+                                {
+                                    header: { label: 'orderProperty.Date' },
+                                    key: 'orderDate',
+                                    props: {
+                                        cssColumn: 'minmax(13ch, min-content)',
+                                        nowrap: true,
+                                    },
+                                    sort: { isEnabled: true },
+                                    value: {
+                                        render: order => (jsx(FormattedDate, { date: order.orderDate, options: dateOptions })),
+                                    },
+                                },
+                                {
+                                    header: { label: 'orderProperty.Price' },
+                                    key: 'orderTotal',
+                                    props: {
+                                        align: 'end',
+                                        cssColumn: 'minmax(12ch, min-content)',
+                                        nowrap: true,
+                                    },
+                                    sort: {
+                                        columnName: 'orderTotal',
+                                        isEnabled: true,
+                                    },
+                                    value: {
+                                        render: order => (jsx(Price, { currencyCode: order.currencyCode, locale: cultureCode, price: order.orderTotal })),
+                                    },
+                                },
+                                {
+                                    header: { label: 'orderProperty.Status' },
+                                    key: 'status',
+                                    props: {
+                                        cssColumn: 'minmax(25ch, min-content)',
+                                        nowrap: true,
+                                    },
+                                    value: {
+                                        render: order => t(`orderStatus.${order.status}`),
+                                    },
+                                },
+                                {
+                                    header: { label: 'orderProperty.Shipping Address' },
+                                    key: 'address',
+                                    props: { cssColumn: 'minmax(25ch, 1fr)', truncated: 2 },
+                                    sort: { columnName: 'stAddress1', isEnabled: true },
+                                    value: {
+                                        render: row => `${row.stAddress1} ${row.shipToPostalCode} ${row.shipToCity} ${row.stCountry.toUpperCase()}`,
+                                    },
+                                },
+                                {
+                                    header: { label: 'orderProperty.PO Number' },
+                                    key: 'customerPO',
+                                    props: {
+                                        cssColumn: 'minmax(17ch, min-content)',
+                                        truncated: 1,
+                                    },
+                                    sort: { isEnabled: true },
+                                    value: { propertyName: 'customerPO' },
+                                },
+                                {
+                                    header: {
+                                        Icon: SolidCartIcon,
+                                        label: 'Reorder',
+                                    },
+                                    key: 'reorder',
+                                    props: {
+                                        align: 'center',
+                                        'data-test-selector': 'reorderButton',
+                                        nowrap: true,
+                                    },
+                                    value: {
+                                        render: order => (jsx(Link, { hasUnderline: true, color: "secondary", "data-test-selector": "order-history-reorder-link", href: `${paths.ACCOUNT_ORDERS}/${order.webOrderNumber}?returnUrl=${encodeURIComponent(`${paths.ACCOUNT_ORDERS}`)}`, children: jsx(FormattedMessage, { id: "Reorder" }) })),
+                                    },
+                                },
+                            ], data: orders, onSort: (key, direction) => {
+                                if (direction === 'NONE')
+                                    return;
+                                setSort({
+                                    name: key,
+                                    order: direction,
+                                });
+                            }, row: {
+                                'data-test-selector': (order, _) => `order-${order.id}`,
+                            } })) : (!isFetching && (jsx("p", { className: styles['no-results'], children: t('No orders found.') }))) }) }), orders && orders.length > 0 && (jsx("nav", { className: styles['paging'], children: jsx(Pagination, { currentPage: pagination?.currentPage || 1, "data-test-selector": "order-history-pagination", onChange: page => setPage(page), totalPages: pagination?.numberOfPages || 1 }) })), jsx("div", { className: styles['sticky-bar'], role: "presentation" })] }) }));
+}
+function OrderHistoryPageBreadcrumb() {
+    const t = useFormattedMessage();
+    const paths = usePaths();
+    return (jsx(MySonicLayoutBreadcrumb, { children: jsx(Breadcrumb, { links: [
+                { href: paths.HOME, label: t('Home') },
+                { href: paths.MY_SONIC, label: t('My Sonic') },
+                { href: paths.ACCOUNT_ORDERS, label: t('Orders') },
+            ] }) }));
+}
+
+export { OrderHistoryPage, OrderHistoryPageBreadcrumb };

package/dist/pages/my-sonic/pages/order-history/order-history-page.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"order-history":"order-history-page-module-A-YGB","search":"order-history-page-module-A-oqW","filter":"order-history-page-module--fnE1","results":"order-history-page-module-Gp4CJ","no-results":"order-history-page-module-ulch1","paging":"order-history-page-module-D35yK","sticky-bar":"order-history-page-module-xgntY"};
+
+export { styles as default };

package/dist/pages/my-sonic/pages/upload-order-page/upload-order-page.d.ts

@@ -0,0 +1,4 @@
+export declare function UploadOrderPage({ templatePath }: {
+    templatePath?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function UploadOrderPageBreadcrumb(): import("react/jsx-runtime").JSX.Element;

package/dist/pages/my-sonic/pages/upload-order-page/upload-order-page.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Breadcrumb } from '../../../../breadcrumbs/breadcrumb.js';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import { usePaths } from '../../../../shared/routing/use-paths.js';
+import { UploadOrder } from '../../actions/upload-order/upload-order.js';
+import { MySonicLayoutBreadcrumb } from '../../layouts/my-sonic-layout/my-sonic-layout-breadcrumb.js';
+import { MySonicLayoutPage } from '../../layouts/my-sonic-layout/my-sonic-layout-page.js';
+
+function UploadOrderPage({ templatePath }) {
+    const t = useFormattedMessage();
+    return (jsx(MySonicLayoutPage, { title: t('Upload order'), children: jsx(UploadOrder, { templatePath: templatePath }) }));
+}
+function UploadOrderPageBreadcrumb() {
+    const t = useFormattedMessage();
+    const paths = usePaths();
+    return (jsx(MySonicLayoutBreadcrumb, { children: jsx(Breadcrumb, { links: [
+                { href: paths.HOME, label: t('Home') },
+                { href: paths.MY_SONIC, label: t('My Sonic') },
+                { href: paths.UPLOAD_ORDER, label: t('Upload order') },
+            ] }) }));
+}
+
+export { UploadOrderPage, UploadOrderPageBreadcrumb };

package/dist/pages/my-sonic/widgets/components/address-data-card.d.ts

@@ -0,0 +1,23 @@
+import { DataCardProps } from '../../../../cards/data-card/data-card';
+export interface AddressDataCardProps {
+    actions?: DataCardProps['actions'];
+    data: {
+        address1: string | undefined;
+        address2: string | undefined;
+        address3: string | undefined;
+        address4: string | undefined;
+        attention: string | undefined;
+        city: string | undefined;
+        country: string | undefined;
+        email: string | undefined;
+        firstName: string | undefined;
+        lastName: string | undefined;
+        phone: string | undefined;
+        postalCode: string | undefined;
+    };
+    'data-test-selector'?: string;
+    isLoading?: DataCardProps['isLoading'];
+    showError?: DataCardProps['showError'];
+    title?: DataCardProps['title'];
+}
+export declare function AddressDataCard({ actions, data: { address1, address2, address3, address4, attention, city, country, email, firstName, lastName, phone, postalCode, }, 'data-test-selector': dataTestSelector, isLoading, showError, title, }: AddressDataCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/pages/my-sonic/widgets/components/address-data-card.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { DataCard } from '../../../../cards/data-card/data-card.js';
+
+function AddressDataCard({ actions, data: { address1, address2, address3, address4, attention, city, country, email, firstName, lastName, phone, postalCode, }, 'data-test-selector': dataTestSelector, isLoading = false, showError = false, title, }) {
+    const data = [
+        { key: 'first-name', label: 'First name', value: firstName },
+        { key: 'last-name', label: 'Last name', value: lastName },
+        {
+            key: 'attention',
+            label: 'Attention',
+            value: attention,
+        },
+        {
+            key: 'address1',
+            label: 'Address 1',
+            value: address1,
+        },
+        {
+            key: 'address2',
+            label: 'Address 2',
+            value: address2,
+        },
+        {
+            key: 'address3',
+            label: 'Address 3',
+            value: address3,
+        },
+        {
+            key: 'address4',
+            label: 'Address 4',
+            value: address4,
+        },
+        { key: 'postal-code', label: 'Postal Code', value: postalCode },
+        { key: 'city', label: 'City', value: city },
+        { key: 'country', label: 'Country', value: country },
+        { key: 'email', label: 'Email', value: email },
+        { key: 'phone', label: 'Phone', value: phone },
+    ];
+    return (jsx(DataCard, { actions: actions, data: data, "data-test-selector": dataTestSelector, isLoading: isLoading, showError: showError, title: title }));
+}
+
+export { AddressDataCard };

package/dist/pages/my-sonic/widgets/connected-address-book-widget.d.ts

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

package/dist/pages/my-sonic/widgets/connected-address-book-widget.js

@@ -0,0 +1,174 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState, useRef } from 'react';
+import { Button } from '../../../buttons/button/button.js';
+import { TableCard } from '../../../cards/table-card/table-card.js';
+import { Pagination } from '../../../filters/pagination/pagination.js';
+import { SearchField } from '../../../forms/fields/search-field/search-field.js';
+import { Icon } from '../../../icon/icon.js';
+import { SolidEditIcon } from '../../../icons/solid/solid-edit-icon.js';
+import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
+import { DynamicLoadingOverlay } from '../../../loading/dynamic-loading-overlay.js';
+import { useFetchPagedShipToAddresses } from '../../../shared/api/storefront/hooks/customer/use-fetch-paged-ship-to-addresses.js';
+import { useLocation } from '../../../shared/routing/use-location.js';
+import { usePaths } from '../../../shared/routing/use-paths.js';
+import { scrollIntoViewRef } from '../../../shared/utils/scrolling.js';
+import { DataTable } from '../../../table/data-table.js';
+import styles from './connected-address-book-widget.module.css.js';
+
+function ConnectedAddressBookWidget() {
+    const t = useFormattedMessage();
+    const { pathname, search: searchParams } = useLocation();
+    const href = `${pathname}${searchParams}`;
+    const paths = usePaths();
+    const addressBookId = 'address-book';
+    const [sort, setSort] = useState({
+        name: 'companyName',
+        order: 'ASC',
+    });
+    const [search, setSearch] = useState('');
+    const [page, setPage] = useState(1);
+    const addressBookRef = useRef(null);
+    const { data, error, isFetching } = useFetchPagedShipToAddresses({
+        page,
+        pageSize: 20,
+        search,
+        sort,
+    });
+    const { pagination, shipTos: addresses } = data ?? {
+        pagination: {},
+        shipTos: [],
+    };
+    const searchAddresses = (value) => {
+        if (value.length >= 3 || value.length === 0) {
+            setPage(1);
+            setSearch(value);
+            scrollIntoViewRef(addressBookRef);
+        }
+    };
+    return (jsx(TableCard, { ref: addressBookRef, stickyHeader: true, actions: [
+            jsx(SearchField, { isDebounced: true, className: styles['search-field'], "data-test-selector": "address-book-search", label: t('Search'), onChange: searchAddresses, placeholder: t('Search'), showLabel: false, size: "md", variant: "outline" }, "searchAddresses"),
+            jsx(Button, { color: "secondary", "data-test-selector": "address-book-add-address", href: `${paths.ACCOUNT_EDIT_BILL_TO_ADDRESS}/current${paths.ACCOUNT_EDIT_SHIP_TO_ADDRESS}/new?returnUrl=${encodeURIComponent(`${href}#${addressBookId}`)}`, size: "sm", variant: "outline", children: t('Add address') }, "addAddress"),
+        ], className: styles['address-book-widget'], "data-test-selector": "address-book", id: addressBookId, isLoading: isFetching, paging: addresses &&
+            addresses.length > 0 && (jsx("nav", { className: styles['paging'], children: jsx(Pagination, { currentPage: pagination?.currentPage || 1, onChange: page => {
+                    setPage(page);
+                    scrollIntoViewRef(addressBookRef);
+                }, totalPages: pagination?.numberOfPages || 1 }) })), results: addresses ? addresses.length : 0, showError: error, title: "Address book", children: jsx("div", { "aria-label": "Results", "aria-live": "polite", className: styles['results'], children: jsx(DynamicLoadingOverlay, { isLoading: isFetching, children: jsx(DataTable, { actions: [
+                        {
+                            'data-test-selector': 'edit-address',
+                            href: address => `${paths.ACCOUNT_EDIT_BILL_TO_ADDRESS}/current${paths.ACCOUNT_EDIT_SHIP_TO_ADDRESS}/${address.id}?returnUrl=${encodeURIComponent(`${href}#${addressBookId}`)}`,
+                            key: 'edit',
+                            label: 'Edit',
+                        },
+                    ], columns: [
+                        {
+                            header: {
+                                isHidden: true,
+                                label: 'Default shipping address',
+                            },
+                            key: 'default',
+                            props: {
+                                cssColumn: '32px',
+                                isNarrow: true,
+                            },
+                            value: {
+                                render: address => {
+                                    return (address.isDefault && (jsx(Icon, { className: styles['default-icon'], "data-test-selector": "default-address", label: `(${t('addressProperty.Default')})`, name: "StarSolid" })));
+                                },
+                            },
+                        },
+                        {
+                            header: {
+                                label: 'addressProperty.Company Name',
+                            },
+                            key: 'companyName',
+                            props: {
+                                cssColumn: 'minmax(20ch, min-content)',
+                                sticky: true,
+                                truncated: 3,
+                            },
+                            sort: { direction: sort.order, isEnabled: true },
+                            value: {
+                                propertyName: 'companyName',
+                            },
+                        },
+                        {
+                            header: { label: 'addressProperty.Address Line' },
+                            key: 'address1',
+                            props: {
+                                cssColumn: 'minmax(28ch, auto)',
+                                truncated: 2,
+                            },
+                            sort: {
+                                isEnabled: true,
+                            },
+                            value: {
+                                propertyName: 'address1',
+                            },
+                        },
+                        {
+                            header: { label: 'addressProperty.Postal Code' },
+                            key: 'postalCode',
+                            props: {
+                                cssColumn: 'minmax(12ch, min-content)',
+                                nowrap: true,
+                            },
+                            sort: {
+                                isEnabled: true,
+                            },
+                            value: { propertyName: 'postalCode' },
+                        },
+                        {
+                            header: { label: 'addressProperty.City' },
+                            key: 'city',
+                            props: {
+                                cssColumn: 'minmax(22ch, min-content)',
+                                truncated: 2,
+                            },
+                            sort: {
+                                isEnabled: true,
+                            },
+                            value: { propertyName: 'city' },
+                        },
+                        {
+                            header: { label: 'addressProperty.Country' },
+                            key: 'country.name',
+                            props: {
+                                cssColumn: 'minmax(15ch, min-content)',
+                                truncated: 2,
+                            },
+                            sort: {
+                                isEnabled: true,
+                            },
+                            value: { render: address => address.country?.name },
+                        },
+                        {
+                            header: {
+                                Icon: SolidEditIcon,
+                                label: 'Edit',
+                            },
+                            key: 'edit',
+                            props: {
+                                align: 'center',
+                                cssColumn: 'minmax(10ch, min-content)',
+                                nowrap: true,
+                            },
+                            value: {
+                                action: 'edit',
+                            },
+                        },
+                    ], data: addresses && addresses.length > 0 ? addresses : [], onSort: (key, direction) => {
+                        if (direction === 'NONE')
+                            return;
+                        setSort({
+                            name: key,
+                            order: direction,
+                        });
+                        scrollIntoViewRef(addressBookRef);
+                    }, row: {
+                        'data-test-selector': (address, _) => `address-${address.id}`,
+                        selected: (address, _) => address.isDefault,
+                    } }) }) }) }));
+}
+
+export { ConnectedAddressBookWidget };

package/dist/pages/my-sonic/widgets/connected-address-book-widget.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"address-book-widget":"connected-address-book-widget-module-Xd9WN","results":"connected-address-book-widget-module-9mOgI","default-icon":"connected-address-book-widget-module-g9kHi","search-field":"connected-address-book-widget-module-3ir-C"};
+
+export { styles as default };

package/dist/pages/my-sonic/widgets/connected-bill-to-address-widget.d.ts

@@ -0,0 +1,3 @@
+export declare function ConnectedBillToAddressWidget({ billToId, }?: {
+    billToId?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/pages/my-sonic/widgets/connected-bill-to-address-widget.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Button } from '../../../buttons/button/button.js';
+import { FormattedMessage } from '../../../intl/formatted-message.js';
+import { useFetchBillToAddress } from '../../../shared/api/storefront/hooks/customer/use-fetch-bill-to-address.js';
+import { useLocation } from '../../../shared/routing/use-location.js';
+import { usePaths } from '../../../shared/routing/use-paths.js';
+import { AddressDataCard } from './components/address-data-card.js';
+
+function ConnectedBillToAddressWidget({ billToId = 'current', } = {}) {
+    const paths = usePaths();
+    const { pathname, search } = useLocation();
+    const href = `${pathname}${search}`;
+    const editAddressUrl = `${paths.ACCOUNT_EDIT_BILL_TO_ADDRESS}/${billToId}?returnUrl=${encodeURIComponent(href)}`;
+    const { data: billToAddress, error, isLoading, } = useFetchBillToAddress({ billToId });
+    return (jsx(AddressDataCard, { actions: [
+            jsx(Button, { color: "secondary", href: editAddressUrl, size: "sm", variant: "outline", children: jsx(FormattedMessage, { id: "Edit" }) }, "edit"),
+        ], data: {
+            address1: billToAddress?.address1,
+            address2: billToAddress?.address2,
+            address3: billToAddress?.address3,
+            address4: billToAddress?.address4,
+            attention: billToAddress?.attention,
+            city: billToAddress?.city,
+            country: billToAddress?.country?.name,
+            email: billToAddress?.email,
+            firstName: billToAddress?.firstName,
+            lastName: billToAddress?.lastName,
+            phone: billToAddress?.phone,
+            postalCode: billToAddress?.postalCode,
+        }, "data-test-selector": "bill-to-address-widget", isLoading: isLoading, showError: error, title: "Billing address" }));
+}
+
+export { ConnectedBillToAddressWidget };

package/dist/pages/my-sonic/widgets/connected-customer-information-widget.d.ts

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

package/dist/pages/my-sonic/widgets/connected-customer-information-widget.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Button } from '../../../buttons/button/button.js';
+import { DataCard } from '../../../cards/data-card/data-card.js';
+import { FormattedMessage } from '../../../intl/formatted-message.js';
+import { useFetchBillToAddresses } from '../../../shared/api/storefront/hooks/customer/use-fetch-bill-to-addresses.js';
+import { useFetchCurrentBillToAddress } from '../../../shared/api/storefront/hooks/customer/use-fetch-current-bill-to-address.js';
+import { ConnectedChangeCustomerDialog } from '../actions/change-customer/connected-change-customer-dialog.js';
+
+function ConnectedCustomerInformationWidget() {
+    const [isOpenChangeCustomerDialog, setIsOpenChangeCustomerDialog] = useState(false);
+    const { data: billToAddress, error: fetchBillToAddressError, isLoading: isLoadingFetchCurrentBillToAddress, } = useFetchCurrentBillToAddress();
+    const { data: billToAddresses, error: fetchBillToAddressesError, isLoading: isLoadingFetchBillToAddresses, } = useFetchBillToAddresses();
+    const hasMoreThanOneBillToAddress = Boolean((billToAddresses?.pagination?.totalItemCount || 0) > 1);
+    const data = billToAddress
+        ? [
+            {
+                key: 'company-name',
+                label: 'Company name',
+                value: billToAddress.companyName,
+            },
+            {
+                key: 'coc-number',
+                label: 'CoC number',
+                value: billToAddress.properties.cocRegistration,
+            },
+            {
+                key: 'billing',
+                label: 'Billing',
+                value: [
+                    billToAddress.address1,
+                    billToAddress.address2,
+                    billToAddress.address3,
+                    billToAddress.address4,
+                    billToAddress.postalCode,
+                    billToAddress.city,
+                    billToAddress.country?.abbreviation,
+                ]
+                    .filter(Boolean)
+                    .join(', ') || null,
+            },
+        ]
+        : [];
+    function onChangeCustomer() {
+        setIsOpenChangeCustomerDialog(true);
+    }
+    return (jsxs(Fragment, { children: [jsx(DataCard, { actions: hasMoreThanOneBillToAddress
+                    ? [
+                        jsx(Button, { color: "secondary", onClick: onChangeCustomer, size: "sm", variant: "outline", children: jsx(FormattedMessage, { id: "Select other customer" }) }, "edit"),
+                    ]
+                    : undefined, data: data, "data-test-selector": "customer-information-widget", isLoading: isLoadingFetchCurrentBillToAddress || isLoadingFetchBillToAddresses, showError: fetchBillToAddressError || fetchBillToAddressesError, title: "Selected customer" }), hasMoreThanOneBillToAddress && (jsx(ConnectedChangeCustomerDialog, { allowSetDefault: true, isOpen: isOpenChangeCustomerDialog, onClose: () => setIsOpenChangeCustomerDialog(false), onCustomerSelected: () => {
+                    window?.location.reload();
+                } }, billToAddress?.id))] }));
+}
+
+export { ConnectedCustomerInformationWidget };

package/dist/pages/my-sonic/widgets/connected-ship-to-address-widget.d.ts

@@ -0,0 +1,4 @@
+export declare function ConnectedShipToAddressWidget({ billToId, shipToId, }?: {
+    billToId?: string;
+    shipToId?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/pages/my-sonic/widgets/connected-ship-to-address-widget.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Button } from '../../../buttons/button/button.js';
+import { FormattedMessage } from '../../../intl/formatted-message.js';
+import { useFetchShipToAddress } from '../../../shared/api/storefront/hooks/customer/use-fetch-ship-to-address.js';
+import { useLocation } from '../../../shared/routing/use-location.js';
+import { usePaths } from '../../../shared/routing/use-paths.js';
+import { AddressDataCard } from './components/address-data-card.js';
+
+function ConnectedShipToAddressWidget({ billToId = 'current', shipToId = 'current', } = {}) {
+    const paths = usePaths();
+    const { pathname, search } = useLocation();
+    const href = `${pathname}${search}`;
+    const editAddressUrl = `${paths.ACCOUNT_EDIT_BILL_TO_ADDRESS}/${billToId}${paths.ACCOUNT_EDIT_SHIP_TO_ADDRESS}/${shipToId}?returnUrl=${encodeURIComponent(href)}`;
+    const createAddressUrl = `${paths.ACCOUNT_EDIT_BILL_TO_ADDRESS}/${billToId}${paths.ACCOUNT_EDIT_SHIP_TO_ADDRESS}/new?returnUrl=${encodeURIComponent(href)}`;
+    const { data: shipToAddress, error, isLoading, } = useFetchShipToAddress({
+        billToId,
+        shipToId,
+    });
+    return (jsx(AddressDataCard, { actions: [
+            jsx(Button, { color: "secondary", href: editAddressUrl, size: "sm", variant: "outline", children: jsx(FormattedMessage, { id: "Edit" }) }, "edit"),
+            jsx(Button, { color: "secondary", href: createAddressUrl, size: "sm", variant: "outline", children: jsx(FormattedMessage, { id: "Create" }) }, "create"),
+        ], data: {
+            address1: shipToAddress?.address1,
+            address2: shipToAddress?.address2,
+            address3: shipToAddress?.address3,
+            address4: shipToAddress?.address4,
+            attention: shipToAddress?.attention,
+            city: shipToAddress?.city,
+            country: shipToAddress?.country?.name,
+            email: shipToAddress?.email,
+            firstName: shipToAddress?.firstName,
+            lastName: shipToAddress?.lastName,
+            phone: shipToAddress?.phone,
+            postalCode: shipToAddress?.postalCode,
+        }, "data-test-selector": "ship-to-address-widget", isLoading: isLoading, showError: error, title: "Shipping address" }));
+}
+
+export { ConnectedShipToAddressWidget };

package/dist/pages/my-sonic/widgets/connected-user-account-widget.d.ts

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