@sonic-equipment/ui 174.0.0 → 175.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -9,19 +9,19 @@ export interface DataCardPropsBase {
9
9
  'data-test-selector'?: string;
10
10
  isLoading?: boolean;
11
11
  noTranslations?: boolean;
12
- showError?: boolean;
13
12
  }
14
13
  export interface DataCardPropsWithoutTranslationsProps extends DataCardPropsBase {
15
14
  data: DataItem<string>[];
16
15
  noTranslations: true;
16
+ showError?: Error | string | boolean | null;
17
17
  title?: string;
18
18
  }
19
19
  export interface DataCardPropsWithTranslationsProps extends DataCardPropsBase {
20
20
  actions?: React.ReactNode[];
21
21
  data: DataItem<TranslationId>[];
22
22
  noTranslations?: false;
23
+ showError?: Error | TranslationId | boolean | null;
23
24
  title?: TranslationId;
24
25
  }
25
- type DataCardProps = DataCardPropsWithoutTranslationsProps | DataCardPropsWithTranslationsProps;
26
+ export type DataCardProps = DataCardPropsWithoutTranslationsProps | DataCardPropsWithTranslationsProps;
26
27
  export declare function DataCard({ actions, data, 'data-test-selector': dataTestSelector, isLoading, noTranslations, showError, title, }: DataCardProps): import("react/jsx-runtime").JSX.Element;
27
- export {};
@@ -2,13 +2,14 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
2
2
  import clsx from 'clsx';
3
3
  import { FormattedMessage } from '../../intl/formatted-message.js';
4
4
  import { ProgressCircle } from '../../loading/progress-circle.js';
5
+ import { UnauthorizedRequestError } from '../../shared/fetch/request.js';
5
6
  import { Heading } from '../../typography/heading/heading.js';
6
7
  import styles from './data-card.module.css.js';
7
8
 
8
9
  function DataCard({ actions, data, 'data-test-selector': dataTestSelector, isLoading = false, noTranslations = false, showError = false, title, }) {
9
10
  const visibleData = data.filter(({ value }) => Boolean(value));
10
11
  const hasItems = visibleData.length > 0;
11
- return (jsxs("section", { "data-test-selector": dataTestSelector, children: [title && (jsx(Heading, { className: styles.title, size: "xxs", tag: "h3", children: noTranslations ? (title) : (jsx(FormattedMessage, { id: title })) })), jsxs("div", { className: styles['data-card'], children: [showError && (jsx("div", { className: styles['error-container'], children: jsx(FormattedMessage, { id: "An unexpected error occured" }) })), isLoading && !showError && (jsx("div", { className: styles['loading-container'], children: jsx(ProgressCircle, { variant: "gray" }) })), jsx("div", { className: clsx(styles['container'], {
12
+ return (jsxs("section", { "data-test-selector": dataTestSelector, children: [title && (jsx(Heading, { className: styles.title, size: "xxs", tag: "h3", children: noTranslations ? (title) : (jsx(FormattedMessage, { id: title })) })), jsxs("div", { className: styles['data-card'], children: [showError && (jsx("div", { className: styles['error-container'], children: showError instanceof UnauthorizedRequestError ? (jsx(FormattedMessage, { id: "You are not authorized to access this information." })) : typeof showError === 'string' ? (jsx(FormattedMessage, { id: showError })) : (jsx(FormattedMessage, { id: "An unexpected error occured" })) })), isLoading && !showError && (jsx("div", { className: styles['loading-container'], children: jsx(ProgressCircle, { variant: "gray" }) })), jsx("div", { className: clsx(styles['container'], {
12
13
  [styles['no-data-container']]: !hasItems,
13
14
  [styles.hide]: showError || isLoading,
14
15
  }), children: hasItems ? (jsxs(Fragment, { children: [jsx("dl", { className: styles['data-table'], children: visibleData.map(({ key, label, value }) => (jsxs(Fragment, { children: [jsx("dt", { className: styles['data-table-key'], children: noTranslations ? (label) : (jsx(FormattedMessage, { id: label })) }), jsx("dd", { className: styles['data-table-value'], "data-key": key, children: value })] }, key))) }), actions?.length && (jsx("div", { className: styles['data-card-actions'], children: actions }))] })) : (jsx(FormattedMessage, { id: "There is no information to display" })) })] })] }));
package/dist/exports.d.ts CHANGED
@@ -232,7 +232,10 @@ export * from './pages/loading-page/loading-page';
232
232
  export * from './pages/my-account/navigation/connected-my-account-navigation';
233
233
  export * from './pages/my-account/navigation/my-account-desktop-navigation';
234
234
  export * from './pages/my-account/navigation/my-account-mobile-navigation';
235
+ export * from './pages/my-account/widgets/components/address-data-card';
236
+ export * from './pages/my-account/widgets/connected-bill-to-address-widget';
235
237
  export * from './pages/my-account/widgets/connected-company-information-widget';
238
+ export * from './pages/my-account/widgets/connected-ship-to-address-widget';
236
239
  export * from './pages/my-account/widgets/connected-user-account-widget';
237
240
  export * from './pages/paths';
238
241
  export * from './pages/product/components/product-overview';
@@ -290,6 +293,7 @@ export * from './shared/api/storefront/hooks/cart/use-place-order';
290
293
  export * from './shared/api/storefront/hooks/cart/use-save-cart-for-later';
291
294
  export * from './shared/api/storefront/hooks/customer/use-fetch-bill-to-addresses';
292
295
  export * from './shared/api/storefront/hooks/customer/use-fetch-current-bill-to-address';
296
+ export * from './shared/api/storefront/hooks/customer/use-fetch-current-ship-to-address';
293
297
  export * from './shared/api/storefront/hooks/customer/use-fetch-fulfillment-methods-by-customer-id';
294
298
  export * from './shared/api/storefront/hooks/customer/use-fetch-fulfillment-methods-for-current-cart';
295
299
  export * from './shared/api/storefront/hooks/customer/use-fetch-ship-to-addresses';
package/dist/index.js CHANGED
@@ -234,7 +234,10 @@ export { LoadingPage } from './pages/loading-page/loading-page.js';
234
234
  export { ConnectedMyAccountNavigation } from './pages/my-account/navigation/connected-my-account-navigation.js';
235
235
  export { MyAccountDesktopNavigation } from './pages/my-account/navigation/my-account-desktop-navigation.js';
236
236
  export { MyAccountMobileNavigation } from './pages/my-account/navigation/my-account-mobile-navigation.js';
237
+ export { AddressDataCard } from './pages/my-account/widgets/components/address-data-card.js';
238
+ export { ConnectedBillToAddressWidget } from './pages/my-account/widgets/connected-bill-to-address-widget.js';
237
239
  export { ConnectedCompanyInformationWidget } from './pages/my-account/widgets/connected-company-information-widget.js';
240
+ export { ConnectedShipToAddressWidget } from './pages/my-account/widgets/connected-ship-to-address-widget.js';
238
241
  export { ConnectedUserAccountWidget } from './pages/my-account/widgets/connected-user-account-widget.js';
239
242
  export { PATHS } from './pages/paths.js';
240
243
  export { ProductOverview } from './pages/product/components/product-overview.js';
@@ -291,6 +294,7 @@ export { usePlaceOrder } from './shared/api/storefront/hooks/cart/use-place-orde
291
294
  export { useSaveCartForLater } from './shared/api/storefront/hooks/cart/use-save-cart-for-later.js';
292
295
  export { useFetchBillToAddresses } from './shared/api/storefront/hooks/customer/use-fetch-bill-to-addresses.js';
293
296
  export { useFetchCurrentBillToAddress } from './shared/api/storefront/hooks/customer/use-fetch-current-bill-to-address.js';
297
+ export { useFetchCurrentShipToAddress } from './shared/api/storefront/hooks/customer/use-fetch-current-ship-to-address.js';
294
298
  export { useFetchFulfillmentMethodsByCustomerId } from './shared/api/storefront/hooks/customer/use-fetch-fulfillment-methods-by-customer-id.js';
295
299
  export { useFetchFulfillmentMethodsForCurrentCart } from './shared/api/storefront/hooks/customer/use-fetch-fulfillment-methods-for-current-cart.js';
296
300
  export { useFetchShipToAddresses } from './shared/api/storefront/hooks/customer/use-fetch-ship-to-addresses.js';
@@ -312,7 +316,7 @@ export { useFetchAllWishListsItems } from './shared/api/storefront/hooks/wishlis
312
316
  export { useFetchWishLists } from './shared/api/storefront/hooks/wishlist/use-fetch-wishlists.js';
313
317
  export { ExistingAccountError, createAccount, createGuestAccount, createSession, fetchSession, patchSession, recoverPassword, signIn, signOut } from './shared/api/storefront/services/authentication-service.js';
314
318
  export { addProductToCurrentCart, convertToMinorUnits, deleteCartLineById, deleteCurrentCart, fetchCart, fetchCurrentCart, fetchCurrentCartLines, fetchCurrentCartProductAtp, fetchCurrentCartPromotions, fetchCurrentCheckoutAtp, getAdyenPaymentDetails, patchCart, patchCartLineById, placeOrder, postAdyenPayment, saveCartForLater } from './shared/api/storefront/services/cart-service.js';
315
- export { fetchBillToAddresses, fetchCurrentBillToAddress, fetchFulfillmentMethods, fetchShipToAddresses, patchBillToAddress } from './shared/api/storefront/services/customer-service.js';
319
+ export { fetchBillToAddresses, fetchCurrentBillToAddress, fetchCurrentShipToAddress, fetchFulfillmentMethods, fetchShipToAddresses, patchBillToAddress } from './shared/api/storefront/services/customer-service.js';
316
320
  export { validateVATNumber } from './shared/api/storefront/services/finance-service.js';
317
321
  export { createAdyenSession, fetchAdyenConfig } from './shared/api/storefront/services/payment-service.js';
318
322
  export { fetchTranslations } from './shared/api/storefront/services/translation-service.js';
@@ -1 +1 @@
1
- export type TranslationId = "'{0}' in all products" | "Try 'Search' and try to find the product you're looking for" | "Unfortnately, We found no articles for your search '{0}'" | ' to your account to manage your lists.' | 'Access denied.' | 'Add order notes' | 'Add to list' | 'Address' | 'Amount: {0}' | 'An error occurred while processing your payment. Please try again.' | 'An unexpected error occured' | 'An unexpected error occured. Please try again.' | 'Are you looking for information about our service? Please visit our customer support page' | 'Are you sure you want to remove all items from your cart?' | 'Are you sure you want to remove this item from your cart?' | 'article' | 'articles' | 'As soon as possible' | 'Attention' | 'Availability unknown, please contact customer support for lead time or alternatives.' | 'Billing' | 'Billing address' | 'Billing and shipping address' | 'Billing and shipping information' | 'Cancel' | 'Cart' | 'Change password' | 'Changing your address is currently not possible. Please contact customer support to change your address.' | 'Checkout order' | 'Chosen filters' | 'City' | 'Clear filters' | 'Clear' | 'Click the button below to continue shopping.' | 'Client cases' | 'Close' | 'CoC number' | 'Company name' | 'Conceal value' | 'Confirm password' | 'Continue shopping' | 'Continue to sign in' | 'Continue' | 'Cost overview' | 'Country' | 'create account' | 'Create new list' | 'Currency Change' | 'Current page' | 'Delivery date' | 'Delivery expected on {0}' | 'Double check your spelling' | 'Downloads' | 'Easily add your favorite products' | 'Edit' | 'Edit billing address' | 'Edit shipping address' | 'Email' | 'Enter your email address and we will send you an email that will allow you to recover your password.' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'Favorites' | 'Features' | 'Finalize order' | 'Finalize payment' | 'First name' | 'Forgot password?' | 'Fulfillment method' | 'General' | 'Hide filters' | 'Home' | 'If an account matches the email address you entered, instructions on how to recover the password will be sent to that email address shortly. If you do not receive this email, please contact Customer Support.' | 'If you want to proceed, click the continue button. If you want to change your country, close this message and select a different country.' | 'Incl. VAT' | 'Includes' | 'Industry' | 'industry.AG' | 'industry.AU' | 'industry.AV' | 'industry.BC' | 'industry.MA' | 'industry.MC' | 'industry.OT' | 'industry.PP' | 'industry.TR' | 'Information' | 'Language' | 'Last name' | 'List name already exists' | 'Log out' | 'Main menu' | 'More than {0} articles' | 'My account' | 'My Sonic' | 'Name' | 'Navigate to...' | 'Navigation' | 'New list name' | 'New user?' | 'Number of favorites' | 'Number of products' | 'of' | 'Or continue as guest' | 'Order confirmation' | 'Order date' | 'Order number' | 'Order' | 'Orders' | 'Our products' | 'Overview' | 'Password does not meet requirements' | 'Password' | 'Passwords do not match' | 'Pay by invoice' | 'Payment method' | 'Payment' | 'pc' | 'Phone' | 'Pick up' | 'Pickup address' | 'Please enter a valid email address' | 'Please enter a valid phone number' | 'please go back to your cart.' | 'Please Sign In' | 'PO Number' | 'Popular searches' | 'Postal Code' | 'Print' | 'Private account' | 'Processing' | 'Product Features' | 'Product' | 'Products' | 'Quantity' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Recover your password' | 'Remember me' | 'Remove all' | 'Requested delivery date' | 'Reveal value' | 'Review and payment' | 'Save order' | 'Save' | 'Saved cart for later.' | 'Search' | 'Searching again using more general terms' | 'See all results' | 'Select a country' | 'Select a desired delivery date' | 'Select a language' | 'Select a list' | 'Select an industry' | 'Select other company' | 'Selected company' | 'Selecting As Soon As Possible will enable us to send the products to you as they become available.' | 'Selecting this country will result in your cart to be converted to the currency {0}' | 'Share your favorite list with others' | 'Ship' | 'Shipping address' | 'Shipping and handling' | 'Shipping details' | 'Shop more efficiently and quicker with a favorites list' | 'Shopping cart' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'Sign in or create account' | 'sign in' | 'Sign me up for newsletters and product updates' | 'Signed in' | 'Signed out' | 'Signing in…' | 'Sonic account' | 'Sonic address' | 'Sonic Equipment' | 'Sorry, there are no products found' | 'Sorry, we could not find matches for' | 'Sort by' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'Specifications' | 'Start checkout' | 'Submenu' | 'Submit email address' | 'Submit' | 'Submitting…' | 'Subtotal' | 'Suggestions' | 'Support' | 'tag.limited' | 'tag.new' | 'The email address you entered is already associated with an existing account. Please sign in to this account or contact Customer Support.' | 'The expected delivery is an indication based on the product availability and the shipping location.' | 'The product has been added to your cart.' | 'The product has been removed from your cart.' | 'The product has been updated in your cart.' | 'There are no products in your shopping cart.' | 'There is no information to display' | 'Toggle navigation menu' | 'Total amount is' | 'Total' | 'Try another search' | 'Unable to add the product to your cart.' | 'Unable to empty your cart.' | 'Unable to remove the product from your cart.' | 'Unable to save cart for later.' | 'Unable to update the product in your cart.' | 'Unknown' | 'Updating address' | 'Use billing address' | 'Use fewer keywords' | 'Validating' | 'validation.badInput' | 'validation.customError' | 'validation.invalid' | 'validation.patternMismatch' | 'validation.rangeOverflow' | 'validation.rangeUnderflow' | 'validation.stepMismatch' | 'validation.tooLong' | 'validation.tooShort' | 'validation.typeMismatch' | 'validation.valid' | 'validation.valueMissing' | 'VAT Number' | 'VAT' | 'Welcome to Sonic Equipment. Please choose your country and language below.' | 'What are you searching for?' | 'You could try checking the spelling of your search query' | 'You could try exploring our products by category' | 'You could try' | 'You have reached the end of the results, but there may be more articles available. Adjust your filters or search to discover more!' | 'You must ' | 'You selected a country where we invoice in a different currency. This will result in your cart being converted to the new currency. If you would like to review your order, ' | 'Your cart has been emptied.' | 'Your email and password were not recognized.' | 'Your favorites are available on multiple devices' | 'Your new Sonic Equipment account was succesfully created. You should receive an email soon with further instructions on how to activate this account. If you do not receive this email, please contact Customer Support.' | 'Your shopping cart is still empty';
1
+ export type TranslationId = "'{0}' in all products" | "Try 'Search' and try to find the product you're looking for" | "Unfortnately, We found no articles for your search '{0}'" | ' to your account to manage your lists.' | 'Access denied.' | 'Add order notes' | 'Add to list' | 'Address' | 'Address 1' | 'Address 2' | 'Address 3' | 'Address 4' | 'Amount: {0}' | 'An error occurred while processing your payment. Please try again.' | 'An unexpected error occured' | 'An unexpected error occured. Please try again.' | 'Are you looking for information about our service? Please visit our customer support page' | 'Are you sure you want to remove all items from your cart?' | 'Are you sure you want to remove this item from your cart?' | 'article' | 'articles' | 'As soon as possible' | 'Attention' | 'Availability unknown, please contact customer support for lead time or alternatives.' | 'Billing' | 'Billing address' | 'Billing and shipping address' | 'Billing and shipping information' | 'Cancel' | 'Cart' | 'Change password' | 'Changing your address is currently not possible. Please contact customer support to change your address.' | 'Checkout order' | 'Chosen filters' | 'City' | 'Clear filters' | 'Clear' | 'Click the button below to continue shopping.' | 'Client cases' | 'Close' | 'CoC number' | 'Company name' | 'Conceal value' | 'Confirm password' | 'Continue shopping' | 'Continue to sign in' | 'Continue' | 'Cost overview' | 'Country' | 'create account' | 'Create new list' | 'Currency Change' | 'Current page' | 'Delivery date' | 'Delivery expected on {0}' | 'Double check your spelling' | 'Downloads' | 'Easily add your favorite products' | 'Edit' | 'Edit billing address' | 'Edit shipping address' | 'Email' | 'Enter your email address and we will send you an email that will allow you to recover your password.' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'Favorites' | 'Features' | 'Finalize order' | 'Finalize payment' | 'First name' | 'Forgot password?' | 'Fulfillment method' | 'General' | 'Hide filters' | 'Home' | 'If an account matches the email address you entered, instructions on how to recover the password will be sent to that email address shortly. If you do not receive this email, please contact Customer Support.' | 'If you want to proceed, click the continue button. If you want to change your country, close this message and select a different country.' | 'Incl. VAT' | 'Includes' | 'Industry' | 'industry.AG' | 'industry.AU' | 'industry.AV' | 'industry.BC' | 'industry.MA' | 'industry.MC' | 'industry.OT' | 'industry.PP' | 'industry.TR' | 'Information' | 'Language' | 'Last name' | 'List name already exists' | 'Log out' | 'Main menu' | 'More than {0} articles' | 'My account' | 'My Sonic' | 'Name' | 'Navigate to...' | 'Navigation' | 'New list name' | 'New user?' | 'Number of favorites' | 'Number of products' | 'of' | 'Or continue as guest' | 'Order confirmation' | 'Order date' | 'Order number' | 'Order' | 'Orders' | 'Our products' | 'Overview' | 'Password does not meet requirements' | 'Password' | 'Passwords do not match' | 'Pay by invoice' | 'Payment method' | 'Payment' | 'pc' | 'Phone' | 'Pick up' | 'Pickup address' | 'Please enter a valid email address' | 'Please enter a valid phone number' | 'please go back to your cart.' | 'Please Sign In' | 'PO Number' | 'Popular searches' | 'Postal Code' | 'Print' | 'Private account' | 'Processing' | 'Product Features' | 'Product' | 'Products' | 'Quantity' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Recover your password' | 'Remember me' | 'Remove all' | 'Requested delivery date' | 'Reveal value' | 'Review and payment' | 'Save order' | 'Save' | 'Saved cart for later.' | 'Search' | 'Searching again using more general terms' | 'See all results' | 'Select a country' | 'Select a desired delivery date' | 'Select a language' | 'Select a list' | 'Select an industry' | 'Select other company' | 'Selected company' | 'Selecting As Soon As Possible will enable us to send the products to you as they become available.' | 'Selecting this country will result in your cart to be converted to the currency {0}' | 'Share your favorite list with others' | 'Ship' | 'Shipping address' | 'Shipping and handling' | 'Shipping details' | 'Shop more efficiently and quicker with a favorites list' | 'Shopping cart' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'Sign in or create account' | 'sign in' | 'Sign me up for newsletters and product updates' | 'Signed in' | 'Signed out' | 'Signing in…' | 'Sonic account' | 'Sonic address' | 'Sonic Equipment' | 'Sorry, there are no products found' | 'Sorry, we could not find matches for' | 'Sort by' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'Specifications' | 'Start checkout' | 'Submenu' | 'Submit email address' | 'Submit' | 'Submitting…' | 'Subtotal' | 'Suggestions' | 'Support' | 'tag.limited' | 'tag.new' | 'The email address you entered is already associated with an existing account. Please sign in to this account or contact Customer Support.' | 'The expected delivery is an indication based on the product availability and the shipping location.' | 'The product has been added to your cart.' | 'The product has been removed from your cart.' | 'The product has been updated in your cart.' | 'There are no products in your shopping cart.' | 'There is no information to display' | 'Toggle navigation menu' | 'Total amount is' | 'Total' | 'Try another search' | 'Unable to add the product to your cart.' | 'Unable to empty your cart.' | 'Unable to remove the product from your cart.' | 'Unable to save cart for later.' | 'Unable to update the product in your cart.' | 'Unknown' | 'Updating address' | 'Use billing address' | 'Use fewer keywords' | 'Validating' | 'validation.badInput' | 'validation.customError' | 'validation.invalid' | 'validation.patternMismatch' | 'validation.rangeOverflow' | 'validation.rangeUnderflow' | 'validation.stepMismatch' | 'validation.tooLong' | 'validation.tooShort' | 'validation.typeMismatch' | 'validation.valid' | 'validation.valueMissing' | 'VAT Number' | 'VAT' | 'Welcome to Sonic Equipment. Please choose your country and language below.' | 'What are you searching for?' | 'You could try checking the spelling of your search query' | 'You could try exploring our products by category' | 'You could try' | 'You are not authorized to access this information.' | 'You have reached the end of the results, but there may be more articles available. Adjust your filters or search to discover more!' | 'You must ' | 'You selected a country where we invoice in a different currency. This will result in your cart being converted to the new currency. If you would like to review your order, ' | 'Your cart has been emptied.' | 'Your email and password were not recognized.' | 'Your favorites are available on multiple devices' | 'Your new Sonic Equipment account was succesfully created. You should receive an email soon with further instructions on how to activate this account. If you do not receive this email, please contact Customer Support.' | 'Your shopping cart is still empty';
@@ -0,0 +1,23 @@
1
+ import { DataCardPropsWithTranslationsProps } from '../../../../cards/data-card/data-card';
2
+ export interface AddressDataCardProps {
3
+ data: {
4
+ address1: string | undefined;
5
+ address2: string | undefined;
6
+ address3: string | undefined;
7
+ address4: string | undefined;
8
+ attention: string | undefined;
9
+ city: string | undefined;
10
+ country: string | undefined;
11
+ email: string | undefined;
12
+ firstName: string | undefined;
13
+ lastName: string | undefined;
14
+ phone: string | undefined;
15
+ postalCode: string | undefined;
16
+ };
17
+ 'data-test-selector'?: string;
18
+ isLoading?: DataCardPropsWithTranslationsProps['isLoading'];
19
+ onEdit?: VoidFunction;
20
+ showError?: DataCardPropsWithTranslationsProps['showError'];
21
+ title?: DataCardPropsWithTranslationsProps['title'];
22
+ }
23
+ export declare function AddressDataCard({ data: { address1, address2, address3, address4, attention, city, country, email, firstName, lastName, phone, postalCode, }, 'data-test-selector': dataTestSelector, isLoading, onEdit, showError, title, }: AddressDataCardProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,46 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { Button } from '../../../../buttons/button/button.js';
3
+ import { DataCard } from '../../../../cards/data-card/data-card.js';
4
+ import { FormattedMessage } from '../../../../intl/formatted-message.js';
5
+
6
+ function AddressDataCard({ data: { address1, address2, address3, address4, attention, city, country, email, firstName, lastName, phone, postalCode, }, 'data-test-selector': dataTestSelector, isLoading = false, onEdit, showError = false, title, }) {
7
+ const data = [
8
+ { key: 'first-name', label: 'First name', value: firstName },
9
+ { key: 'last-name', label: 'Last name', value: lastName },
10
+ {
11
+ key: 'attention',
12
+ label: 'Attention',
13
+ value: attention,
14
+ },
15
+ {
16
+ key: 'address1',
17
+ label: 'Address 1',
18
+ value: address1,
19
+ },
20
+ {
21
+ key: 'address2',
22
+ label: 'Address 2',
23
+ value: address2,
24
+ },
25
+ {
26
+ key: 'address3',
27
+ label: 'Address 3',
28
+ value: address3,
29
+ },
30
+ {
31
+ key: 'address4',
32
+ label: 'Address 4',
33
+ value: address4,
34
+ },
35
+ { key: 'postal-code', label: 'Postal Code', value: postalCode },
36
+ { key: 'city', label: 'City', value: city },
37
+ { key: 'country', label: 'Country', value: country },
38
+ { key: 'email', label: 'Email', value: email },
39
+ { key: 'phone', label: 'Phone', value: phone },
40
+ ];
41
+ return (jsx(DataCard, { actions: [
42
+ jsx(Button, { isDisabled: true, color: "secondary", onClick: onEdit, size: "sm", variant: "outline", children: jsx(FormattedMessage, { id: "Edit" }) }, "edit"),
43
+ ], data: data, "data-test-selector": dataTestSelector, isLoading: isLoading, showError: showError, title: title }));
44
+ }
45
+
46
+ export { AddressDataCard };
@@ -0,0 +1 @@
1
+ export declare function ConnectedBillToAddressWidget(): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,23 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { useFetchCurrentBillToAddress } from '../../../shared/api/storefront/hooks/customer/use-fetch-current-bill-to-address.js';
3
+ import { AddressDataCard } from './components/address-data-card.js';
4
+
5
+ function ConnectedBillToAddressWidget() {
6
+ const { data: billToAddress, error, isLoading, } = useFetchCurrentBillToAddress();
7
+ return (jsx(AddressDataCard, { data: {
8
+ address1: billToAddress?.address1,
9
+ address2: billToAddress?.address2,
10
+ address3: billToAddress?.address3,
11
+ address4: billToAddress?.address4,
12
+ attention: billToAddress?.attention,
13
+ city: billToAddress?.city,
14
+ country: billToAddress?.country?.name,
15
+ email: billToAddress?.email,
16
+ firstName: billToAddress?.firstName,
17
+ lastName: billToAddress?.lastName,
18
+ phone: billToAddress?.phone,
19
+ postalCode: billToAddress?.postalCode,
20
+ }, "data-test-selector": "bill-to-address-widget", isLoading: isLoading, showError: error, title: "Billing address" }));
21
+ }
22
+
23
+ export { ConnectedBillToAddressWidget };
@@ -5,7 +5,7 @@ import { FormattedMessage } from '../../../intl/formatted-message.js';
5
5
  import { useFetchCurrentBillToAddress } from '../../../shared/api/storefront/hooks/customer/use-fetch-current-bill-to-address.js';
6
6
 
7
7
  function ConnectedCompanyInformationWidget() {
8
- const { data: billToAddress, isError, isLoading, } = useFetchCurrentBillToAddress();
8
+ const { data: billToAddress, error, isLoading, } = useFetchCurrentBillToAddress();
9
9
  const data = billToAddress
10
10
  ? [
11
11
  {
@@ -37,7 +37,7 @@ function ConnectedCompanyInformationWidget() {
37
37
  : [];
38
38
  return (jsx(DataCard, { actions: [
39
39
  jsx(Button, { isDisabled: true, color: "secondary", size: "sm", variant: "outline", children: jsx(FormattedMessage, { id: "Select other company" }) }, "edit"),
40
- ], data: data, "data-test-selector": "company-information-widget", isLoading: isLoading, showError: isError, title: "Selected company" }));
40
+ ], data: data, "data-test-selector": "company-information-widget", isLoading: isLoading, showError: error, title: "Selected company" }));
41
41
  }
42
42
 
43
43
  export { ConnectedCompanyInformationWidget };
@@ -0,0 +1 @@
1
+ export declare function ConnectedShipToAddressWidget(): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,23 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { useFetchCurrentShipToAddress } from '../../../shared/api/storefront/hooks/customer/use-fetch-current-ship-to-address.js';
3
+ import { AddressDataCard } from './components/address-data-card.js';
4
+
5
+ function ConnectedShipToAddressWidget() {
6
+ const { data: shipToAddress, error, isLoading, } = useFetchCurrentShipToAddress();
7
+ return (jsx(AddressDataCard, { data: {
8
+ address1: shipToAddress?.address1,
9
+ address2: shipToAddress?.address2,
10
+ address3: shipToAddress?.address3,
11
+ address4: shipToAddress?.address4,
12
+ attention: shipToAddress?.attention,
13
+ city: shipToAddress?.city,
14
+ country: shipToAddress?.country?.name,
15
+ email: shipToAddress?.email,
16
+ firstName: shipToAddress?.firstName,
17
+ lastName: shipToAddress?.lastName,
18
+ phone: shipToAddress?.phone,
19
+ postalCode: shipToAddress?.postalCode,
20
+ }, "data-test-selector": "ship-to-address-widget", isLoading: isLoading, showError: error, title: "Shipping address" }));
21
+ }
22
+
23
+ export { ConnectedShipToAddressWidget };
@@ -5,7 +5,7 @@ import { FormattedMessage } from '../../../intl/formatted-message.js';
5
5
  import { useFetchSession } from '../../../shared/api/storefront/hooks/authentication/use-fetch-session.js';
6
6
 
7
7
  function ConnectedUserAccountWidget() {
8
- const { data: session, isError, isLoading } = useFetchSession();
8
+ const { data: session, error, isLoading } = useFetchSession();
9
9
  const data = session
10
10
  ? [
11
11
  { key: 'email', label: 'Email', value: session.email },
@@ -26,7 +26,7 @@ function ConnectedUserAccountWidget() {
26
26
  return (jsx(DataCard, { actions: [
27
27
  jsx(Button, { isDisabled: true, color: "secondary", size: "sm", variant: "outline", children: jsx(FormattedMessage, { id: "Edit" }) }, "edit"),
28
28
  jsx(Button, { isDisabled: true, color: "secondary", size: "sm", variant: "outline", children: jsx(FormattedMessage, { id: "Change password" }) }, "change-pasword"),
29
- ], data: data, "data-test-selector": "user-account-widget", isLoading: isLoading, showError: isError, title: "Sonic account" }));
29
+ ], data: data, "data-test-selector": "user-account-widget", isLoading: isLoading, showError: error, title: "Sonic account" }));
30
30
  }
31
31
 
32
32
  export { ConnectedUserAccountWidget };
@@ -0,0 +1 @@
1
+ export declare function useFetchCurrentShipToAddress(): import("@tanstack/react-query").UseQueryResult<import("../../model/storefront.model").ShipToModel, Error>;
@@ -0,0 +1,17 @@
1
+ import { useQuery } from '@tanstack/react-query';
2
+ import { fetchCurrentShipToAddress } from '../../services/customer-service.js';
3
+
4
+ function useFetchCurrentShipToAddress() {
5
+ return useQuery({
6
+ queryFn: fetchCurrentShipToAddress,
7
+ queryKey: [
8
+ 'customer',
9
+ 'bill-to-address',
10
+ 'current',
11
+ 'ship-to-address',
12
+ 'current',
13
+ ],
14
+ });
15
+ }
16
+
17
+ export { useFetchCurrentShipToAddress };
@@ -1,5 +1,6 @@
1
- import { BillToCollectionModel, BillToModel, PatchBillToModel, ShipToCollectionModel } from 'shared/api/storefront/model/storefront.model';
1
+ import { BillToCollectionModel, BillToModel, PatchBillToModel, ShipToCollectionModel, ShipToModel } from 'shared/api/storefront/model/storefront.model';
2
2
  export declare function fetchCurrentBillToAddress(): Promise<BillToModel>;
3
+ export declare function fetchCurrentShipToAddress(): Promise<ShipToModel>;
3
4
  export declare function fetchBillToAddresses(): Promise<BillToCollectionModel>;
4
5
  export declare function fetchShipToAddresses({ shipToId }: {
5
6
  shipToId: string;
@@ -8,6 +8,13 @@ async function fetchCurrentBillToAddress() {
8
8
  });
9
9
  return body;
10
10
  }
11
+ async function fetchCurrentShipToAddress() {
12
+ const { body } = await request({
13
+ credentials: 'include',
14
+ url: `${config.SHOP_API_URL}/api/v1/billtos/current/shiptos/current`,
15
+ });
16
+ return body;
17
+ }
11
18
  async function fetchBillToAddresses() {
12
19
  const { body } = await request({
13
20
  credentials: 'include',
@@ -43,4 +50,4 @@ async function fetchFulfillmentMethods({ customerId, }) {
43
50
  return updatedBillTo;
44
51
  }
45
52
 
46
- export { fetchBillToAddresses, fetchCurrentBillToAddress, fetchFulfillmentMethods, fetchShipToAddresses, patchBillToAddress };
53
+ export { fetchBillToAddresses, fetchCurrentBillToAddress, fetchCurrentShipToAddress, fetchFulfillmentMethods, fetchShipToAddresses, patchBillToAddress };
package/dist/styles.css CHANGED
@@ -2567,6 +2567,7 @@ html {
2567
2567
  --image-margin: var(--space-12);
2568
2568
  --gap: var(--space-8);
2569
2569
  --image-scale: 1;
2570
+ --image-size: 64px;
2570
2571
  --duration: var(--transition-duration-short);
2571
2572
 
2572
2573
  all: unset;
@@ -2579,6 +2580,20 @@ html {
2579
2580
  -webkit-tap-highlight-color: transparent;
2580
2581
  }
2581
2582
 
2583
+ @container (min-width: 90px) {.category-card-module-4NUjH {
2584
+ --image-margin: var(--space-8);
2585
+ --image-size: 74px;
2586
+ --gap: var(--space-12)
2587
+ }
2588
+ }
2589
+
2590
+ @container (min-width: 96px) {.category-card-module-4NUjH {
2591
+ --image-margin: 0;
2592
+ --image-size: 96px;
2593
+ --gap: var(--space-16)
2594
+ }
2595
+ }
2596
+
2582
2597
  .category-card-module-4NUjH,
2583
2598
  .category-card-module-4NUjH * {
2584
2599
  box-sizing: border-box;
@@ -2600,11 +2615,9 @@ html {
2600
2615
 
2601
2616
  .category-card-module-4NUjH .category-card-module-oNTrK {
2602
2617
  position: relative;
2618
+ display: flex;
2603
2619
  aspect-ratio: 1;
2604
-
2605
- /* block-size: 100%; */
2606
-
2607
- /* inline-size: calc(100% - (var(--image-margin) * 2)); */
2620
+ inline-size: var(--image-size);
2608
2621
  margin-inline: var(--image-margin);
2609
2622
  place-items: center;
2610
2623
  place-self: center;
@@ -2639,18 +2652,6 @@ html {
2639
2652
  --color: var(--color-brand-red);
2640
2653
  }
2641
2654
 
2642
- @container (min-width: 90px) {.category-card-module-4NUjH {
2643
- --image-margin: var(--space-8);
2644
- --gap: var(--space-12)
2645
- }
2646
- }
2647
-
2648
- @container (min-width: 96px) {.category-card-module-4NUjH {
2649
- --image-margin: 0;
2650
- --gap: var(--space-16)
2651
- }
2652
- }
2653
-
2654
2655
  .data-card-module-DMbBO {
2655
2656
  margin-bottom: var(--space-12);
2656
2657
  }
@@ -3143,24 +3144,23 @@ html {
3143
3144
  background-color: var(--color-white);
3144
3145
  block-size: 100%;
3145
3146
  color: var(--color-black);
3146
-
3147
- /* cursor: pointer; */
3148
3147
  gap: 0 var(--space-8);
3149
- grid-template:
3150
- 122px var(--space-8) repeat(3, minmax(0, min-content)) minmax(
3151
- var(--space-8),
3152
- 1fr
3153
- )
3154
- repeat(2, minmax(0, min-content)) / 1fr;
3155
3148
  grid-template-areas:
3156
3149
  'image'
3157
- '.'
3158
3150
  'tags'
3159
3151
  'title'
3160
3152
  'sku'
3161
3153
  '.'
3162
3154
  'price'
3163
3155
  'amount';
3156
+ grid-template-columns: 1fr;
3157
+ /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
3158
+ grid-template-rows:
3159
+ 122px
3160
+ var(--space-24)
3161
+ repeat(2, minmax(0, min-content))
3162
+ minmax(var(--space-16), 1fr)
3163
+ repeat(2, minmax(0, min-content));
3164
3164
  inline-size: 100%;
3165
3165
  text-decoration: none;
3166
3166
  transition:
@@ -3200,7 +3200,7 @@ html {
3200
3200
  grid-area: title;
3201
3201
  -webkit-line-clamp: 4;
3202
3202
  line-height: 1;
3203
- margin-block-end: var(--space-8);
3203
+ margin-block-end: var(--space-4);
3204
3204
  overflow-wrap: break-word;
3205
3205
  text-wrap: balance;
3206
3206
  }
@@ -3225,10 +3225,8 @@ html {
3225
3225
 
3226
3226
  .product-card-module-pLaiB .product-card-module-nL-hY {
3227
3227
  display: flex;
3228
- flex-wrap: wrap;
3229
3228
  gap: var(--space-4);
3230
3229
  grid-area: tags;
3231
- margin-block-end: var(--space-8);
3232
3230
  }
3233
3231
 
3234
3232
  .product-card-module-pLaiB .product-card-module-XzunM {
@@ -3248,7 +3246,7 @@ html {
3248
3246
  .product-card-module-pLaiB .product-card-module-irW0D {
3249
3247
  grid-area: price;
3250
3248
  margin-block-end: var(--space-8);
3251
- place-self: flex-end;
3249
+ place-self: flex-end flex-start;
3252
3250
  }
3253
3251
 
3254
3252
  .product-card-module-pLaiB .product-card-module-SnCvX {
@@ -3263,20 +3261,21 @@ html {
3263
3261
  .product-card-module-pLaiB {
3264
3262
  --box-shadow: var(--box-shadow-heavy);
3265
3263
 
3266
- grid-template:
3267
- 204px var(--space-8) repeat(3, minmax(0, min-content)) minmax(
3268
- var(--space-16),
3269
- 1fr
3270
- )
3271
- minmax(0, min-content) / 1fr minmax(0, max-content);
3272
3264
  grid-template-areas:
3273
3265
  'image image'
3274
- '. .'
3275
3266
  'tags tags'
3276
3267
  'title title'
3277
3268
  'sku sku'
3278
3269
  '. .'
3279
- 'price amount'
3270
+ 'price amount';
3271
+ grid-template-columns: 1fr minmax(0, max-content);
3272
+ /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
3273
+ grid-template-rows:
3274
+ 204px
3275
+ var(--space-24)
3276
+ repeat(2, minmax(0, min-content))
3277
+ minmax(var(--space-24), 1fr)
3278
+ minmax(0, min-content)
3280
3279
  }
3281
3280
 
3282
3281
  .product-card-module-pLaiB .product-card-module-irW0D {
@@ -3292,10 +3291,10 @@ html {
3292
3291
 
3293
3292
  padding: var(--space-16);
3294
3293
  grid-template-rows:
3295
- 288px var(--space-8) repeat(3, minmax(0, min-content)) minmax(
3296
- var(--space-24),
3297
- 1fr
3298
- )
3294
+ 288px
3295
+ var(--space-24)
3296
+ repeat(2, minmax(0, min-content))
3297
+ minmax(var(--space-32), 1fr)
3299
3298
  minmax(0, min-content)
3300
3299
  }
3301
3300
 
@@ -3307,25 +3306,45 @@ html {
3307
3306
  .product-card-module-pLaiB .product-card-module-irW0D {
3308
3307
  --price-toggle-size: var(--price-size-larger);
3309
3308
  }
3309
+ }
3310
3310
 
3311
- .product-card-module-pLaiB .product-card-module-nL-hY {
3312
- margin-block-end: var(--space-16);
3313
- }
3311
+ @keyframes product-overview-grid-module-r-wvY {
3312
+ 99.999% {
3313
+ opacity: 0;
3314
3314
  }
3315
3315
 
3316
+ 100% {
3317
+ opacity: 1;
3318
+ }
3319
+ }
3320
+
3321
+ @keyframes product-overview-grid-module-A6CS7 {
3322
+ 50% {
3323
+ background-color: rgb(255 255 255 / 0%);
3324
+ }
3325
+
3326
+ 100% {
3327
+ background-color: rgb(255 255 255 / 80%);
3328
+ }
3329
+ }
3330
+
3316
3331
  .product-overview-grid-module-bzys- {
3317
- --amount-of-columns: 1;
3332
+ --nr-of-columns: 1;
3318
3333
  --column-gap: 0;
3319
3334
  --row-gap: var(--space-16);
3320
3335
 
3321
3336
  position: relative;
3322
3337
  display: grid;
3323
3338
  gap: var(--row-gap) var(--column-gap);
3324
- grid-template-columns: repeat(var(--amount-of-columns), 1fr);
3339
+ grid-template-columns: repeat(var(--nr-of-columns), 1fr);
3340
+ grid-template-rows: repeat(
3341
+ auto-fill,
3342
+ [item-start] minmax(0, min-content) [item-end] 50px
3343
+ );
3325
3344
  inline-size: 100%;
3326
3345
  }
3327
3346
 
3328
- .product-overview-grid-module-bzys- .product-overview-grid-module-XikkF {
3347
+ .product-overview-grid-module-bzys- .product-overview-grid-module-XikkF {
3329
3348
  position: absolute;
3330
3349
  z-index: var(--loading-layer);
3331
3350
  display: flex;
@@ -3340,43 +3359,16 @@ html {
3340
3359
  user-select: none;
3341
3360
  }
3342
3361
 
3343
- .product-overview-grid-module-bzys- .product-overview-grid-module-XikkF .product-overview-grid-module-DWnnI {
3362
+ .product-overview-grid-module-bzys- .product-overview-grid-module-XikkF .product-overview-grid-module-DWnnI {
3344
3363
  position: fixed;
3345
3364
  animation: product-overview-grid-module-r-wvY 1.2s linear forwards;
3346
3365
  inset-block-start: 50vh;
3347
3366
  }
3348
3367
 
3349
- @keyframes product-overview-grid-module-r-wvY {
3350
- 0% {
3351
- opacity: 0;
3352
- }
3353
-
3354
- 99% {
3355
- opacity: 0;
3356
- }
3357
-
3358
- 100% {
3359
- opacity: 1;
3360
- }
3361
- }
3362
-
3363
- @keyframes product-overview-grid-module-A6CS7 {
3364
- 0% {
3365
- background-color: rgb(255 255 255 / 0%);
3366
- }
3367
-
3368
- 50% {
3369
- background-color: rgb(255 255 255 / 0%);
3370
- }
3371
-
3372
- 100% {
3373
- background-color: rgb(255 255 255 / 80%);
3374
- }
3375
- }
3376
-
3377
3368
  .product-overview-grid-module-MlUVA {
3378
3369
  position: relative;
3379
3370
  display: grid;
3371
+ grid-row: span 2;
3380
3372
  min-block-size: 380px;
3381
3373
  }
3382
3374
 
@@ -3409,7 +3401,7 @@ html {
3409
3401
 
3410
3402
  @media (width >= 576px) {
3411
3403
  .product-overview-grid-module-bzys- {
3412
- --amount-of-columns: 2;
3404
+ --nr-of-columns: 2;
3413
3405
  --row-gap: 0;
3414
3406
  --column-gap: var(--space-16);
3415
3407
  }
@@ -3448,7 +3440,7 @@ html {
3448
3440
 
3449
3441
  @media (width >= 1440px) {
3450
3442
  .product-overview-grid-module-bzys- {
3451
- --amount-of-columns: 3;
3443
+ --nr-of-columns: 3;
3452
3444
  }
3453
3445
  .product-overview-grid-module-MlUVA:nth-child(2n)::after {
3454
3446
  display: block;
@@ -5231,7 +5223,8 @@ button.swiper-pagination-bullet {
5231
5223
  --nr-of-columns: 2;
5232
5224
  --item-padding: var(--space-16);
5233
5225
  --border: 1px solid var(--color-brand-light-gray);
5234
- --image-size: 62px;
5226
+ --card-image-size: 62px;
5227
+ --card-gap: var(--space-8);
5235
5228
 
5236
5229
  position: relative;
5237
5230
  display: grid;
@@ -5254,7 +5247,7 @@ button.swiper-pagination-bullet {
5254
5247
 
5255
5248
  @media (width >= 1024px) {.categories-grid-module-C751R {
5256
5249
  --nr-of-columns: 4;
5257
- --image-size: 74px;
5250
+ --card-image-size: 74px;
5258
5251
 
5259
5252
  border: none;
5260
5253
  gap: var(--space-16)
@@ -5262,7 +5255,8 @@ button.swiper-pagination-bullet {
5262
5255
  }
5263
5256
 
5264
5257
  @media (width >= 1440px) {.categories-grid-module-C751R {
5265
- --image-size: 96px
5258
+ --card-image-size: 96px;
5259
+ --card-gap: var(--space-16)
5266
5260
  }
5267
5261
  }
5268
5262
 
@@ -5299,13 +5293,10 @@ button.swiper-pagination-bullet {
5299
5293
  }
5300
5294
 
5301
5295
  .categories-grid-module-C751R .categories-grid-module-Q7i00 {
5302
- inline-size: 100%;
5296
+ --image-size: var(--card-image-size);
5297
+ --gap: var(--card-gap);
5303
5298
  }
5304
5299
 
5305
- .categories-grid-module-C751R .categories-grid-module-Q7i00 [class*='image-container'] {
5306
- block-size: var(--image-size);
5307
- }
5308
-
5309
5300
  .search-input-module-xCCzd {
5310
5301
  box-sizing: border-box;
5311
5302
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sonic-equipment/ui",
3
- "version": "174.0.0",
3
+ "version": "175.0.0",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "engines": {