@sonic-equipment/ui 147.0.0 → 149.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.
Files changed (80) hide show
  1. package/dist/address-info-display/address-info-display.js +1 -2
  2. package/dist/algolia/algolia-hit-type.d.ts +2 -0
  3. package/dist/algolia/algolia-results-count.js +8 -0
  4. package/dist/algolia/constants/index.d.ts +1 -0
  5. package/dist/algolia/constants/index.js +3 -0
  6. package/dist/algolia/use-algolia-insights.js +3 -3
  7. package/dist/cards/orderline-card/orderline-card.js +2 -2
  8. package/dist/cards/orderline-card/orderline-card.module.css.js +1 -1
  9. package/dist/cards/product-card/product-card.js +3 -2
  10. package/dist/cards/product-card/product-card.module.css.js +1 -1
  11. package/dist/cart-totals/cart-totals-summary.d.ts +4 -2
  12. package/dist/cart-totals/cart-totals-summary.js +3 -2
  13. package/dist/cart-totals/cart-totals.d.ts +7 -5
  14. package/dist/cart-totals/cart-totals.js +3 -2
  15. package/dist/country-selector/connected-country-selector.js +2 -2
  16. package/dist/delivery-time/delivery-time.js +2 -2
  17. package/dist/display/price/price.d.ts +18 -0
  18. package/dist/display/price/price.js +30 -0
  19. package/dist/display/price/price.module.css.js +3 -0
  20. package/dist/display/product-sku/product-sku.d.ts +2 -1
  21. package/dist/display/product-sku/product-sku.js +3 -2
  22. package/dist/exports.d.ts +5 -2
  23. package/dist/global-search/search-result-panel/sections/with-results.js +1 -0
  24. package/dist/index.js +9 -6
  25. package/dist/intl/intl-context.d.ts +10 -4
  26. package/dist/intl/intl-context.js +4 -0
  27. package/dist/intl/intl-provider.d.ts +4 -2
  28. package/dist/intl/intl-provider.js +18 -4
  29. package/dist/intl/missing-translation-provider.js +3 -2
  30. package/dist/intl/translation-id.d.ts +1 -1
  31. package/dist/intl/types.d.ts +2 -0
  32. package/dist/intl/types.js +6 -1
  33. package/dist/intl/use-country-code.d.ts +3 -0
  34. package/dist/intl/use-country-code.js +15 -0
  35. package/dist/intl/use-culture-code.d.ts +2 -1
  36. package/dist/intl/use-culture-code.js +5 -4
  37. package/dist/intl/use-currency-code.d.ts +4 -0
  38. package/dist/intl/use-currency-code.js +15 -0
  39. package/dist/intl/use-formatted-message.js +2 -3
  40. package/dist/intl/use-intl.d.ts +1 -0
  41. package/dist/intl/use-intl.js +9 -0
  42. package/dist/intl/use-language-code.js +2 -3
  43. package/dist/pages/checkout/cart-page/cart-page.js +6 -1
  44. package/dist/pages/checkout/order-confirmation-page/order-confirmation-page-content.js +6 -1
  45. package/dist/pages/checkout/payment-page/components/adyen-payment.d.ts +3 -2
  46. package/dist/pages/checkout/payment-page/components/payment.js +69 -40
  47. package/dist/pages/checkout/payment-page/payment-page-content.js +7 -2
  48. package/dist/pages/checkout/payment-page/utils/parse-amount.d.ts +2 -1
  49. package/dist/pages/checkout/shipping-page/components/edit-address-form.js +2 -2
  50. package/dist/pages/checkout/shipping-page/shipping-page-content.js +6 -2
  51. package/dist/pages/product/components/product-overview.d.ts +8 -0
  52. package/dist/pages/product/components/product-overview.js +20 -0
  53. package/dist/pages/product/product-details-page/components/product-details-panel/product-details-panel.js +2 -2
  54. package/dist/pages/product/product-details-page/components/product-details-panel/product-details-panel.module.css.js +1 -1
  55. package/dist/pages/product/product-listing-page/product-listing-product-overview/product-listing-product-overview.js +3 -6
  56. package/dist/pages/product/search-result-page/search-result-product-overview/search-result-product-overview.js +3 -6
  57. package/dist/shared/api/bff/model/bff.model.d.ts +3 -0
  58. package/dist/shared/api/storefront/hooks/cart/use-place-order.d.ts +1 -1
  59. package/dist/shared/api/storefront/model/storefront.model.d.ts +4 -0
  60. package/dist/shared/api/storefront/services/cart-service.d.ts +1 -1
  61. package/dist/shared/api/storefront/services/cart-service.js +1 -1
  62. package/dist/shared/api/storefront/services/finance-service.d.ts +1 -1
  63. package/dist/shared/ga/use-data-layer.js +4 -4
  64. package/dist/shared/model/currency.d.ts +8 -1
  65. package/dist/shared/model/currency.js +28 -30
  66. package/dist/shared/model/hit.d.ts +2 -0
  67. package/dist/shared/model/hit.js +1 -0
  68. package/dist/shared/model/price.d.ts +5 -2
  69. package/dist/shared/utils/price.d.ts +19 -5
  70. package/dist/shared/utils/price.js +36 -7
  71. package/dist/shared/utils/string.d.ts +0 -1
  72. package/dist/shared/utils/string.js +1 -4
  73. package/dist/styles.css +467 -278
  74. package/package.json +1 -1
  75. package/dist/display/product-price/product-price.d.ts +0 -7
  76. package/dist/display/product-price/product-price.js +0 -19
  77. package/dist/display/product-price/product-price.module.css.js +0 -3
  78. package/dist/display/product-price/product-total-price.d.ts +0 -7
  79. package/dist/display/product-price/product-total-price.js +0 -16
  80. package/dist/display/product-price/product-total-price.module.css.js +0 -3
@@ -1,10 +1,9 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { capitalizeFirstLetter } from '../shared/utils/string.js';
3
2
  import styles from './address-info-display.module.css.js';
4
3
 
5
4
  function AddressInfoDisplay({ address, 'data-test-selector': dataTestSelector, }) {
6
5
  const { address1, address2, address3, city, companyName, country, email, firstName, lastName, phone, postalCode, } = address;
7
- return (jsxs("address", { className: styles.address, "data-test-selector": dataTestSelector, children: [(firstName || lastName) && (jsx("p", { "data-test-selector": "addressInfoDisplay_name", children: `${firstName} ${lastName}` })), companyName && (jsx("p", { "data-test-selector": "addressInfoDisplay_companyName", children: companyName })), address1 && (jsx("p", { "data-test-selector": "addressInfoDisplay_address1", children: address1 })), address2 && (jsx("p", { "data-test-selector": "addressInfoDisplay_address2", children: address2 })), address3 && (jsx("p", { "data-test-selector": "addressInfoDisplay_address3", children: address3 })), (postalCode || city) && (jsxs("p", { "data-test-selector": "addressInfoDisplay_postalCodeAndCity", children: [postalCode, " ", city ? capitalizeFirstLetter(city) : ''] })), country && (jsx("p", { "data-test-selector": "addressInfoDisplay_country", children: country })), phone && jsx("p", { "data-test-selector": "addressInfoDisplay_phone", children: phone }), email && jsx("p", { "data-test-selector": "addressInfoDisplay_email", children: email })] }));
6
+ return (jsxs("address", { className: styles.address, "data-test-selector": dataTestSelector, children: [(firstName || lastName) && (jsx("p", { "data-test-selector": "addressInfoDisplay_name", children: `${firstName} ${lastName}` })), companyName && (jsx("p", { "data-test-selector": "addressInfoDisplay_companyName", children: companyName })), address1 && (jsx("p", { "data-test-selector": "addressInfoDisplay_address1", children: address1 })), address2 && (jsx("p", { "data-test-selector": "addressInfoDisplay_address2", children: address2 })), address3 && (jsx("p", { "data-test-selector": "addressInfoDisplay_address3", children: address3 })), (postalCode || city) && (jsxs("p", { children: [postalCode && (jsxs("span", { "data-test-selector": "addressInfoDisplay_postalCode", children: [postalCode, ' '] })), city && (jsx("span", { "data-test-selector": "addressInfoDisplay_city", children: city }))] })), country && (jsx("p", { "data-test-selector": "addressInfoDisplay_country", children: country })), phone && jsx("p", { "data-test-selector": "addressInfoDisplay_phone", children: phone }), email && jsx("p", { "data-test-selector": "addressInfoDisplay_email", children: email })] }));
8
7
  }
9
8
 
10
9
  export { AddressInfoDisplay };
@@ -1,4 +1,5 @@
1
1
  import { Hit } from '@algolia/client-search';
2
+ import { CurrencyCode } from '../intl/types';
2
3
  import { ImageType } from '../shared/model/image';
3
4
  interface AlgoliaHitBase {
4
5
  [key: string]: any;
@@ -17,6 +18,7 @@ export interface AlgoliaProduct extends AlgoliaHitBase {
17
18
  categories: string[];
18
19
  categoryPageId: string[];
19
20
  consumerPrice: number;
21
+ currencyCode: CurrencyCode;
20
22
  discountedPrice: number;
21
23
  drawerQuantity: string;
22
24
  ean: string;
@@ -1,6 +1,7 @@
1
1
  "use client";
2
2
  import { useHits } from 'react-instantsearch';
3
3
  import { useFormattedMessage } from '../intl/use-formatted-message.js';
4
+ import { MAX_QUERY_RESULTS } from './constants/index.js';
4
5
 
5
6
  function AlgoliaResultsCount() {
6
7
  const { results } = useHits();
@@ -8,6 +9,13 @@ function AlgoliaResultsCount() {
8
9
  if (!results)
9
10
  return null;
10
11
  const count = results.nbHits;
12
+ if (count > MAX_QUERY_RESULTS) {
13
+ return t('More than {0} articles', {
14
+ replacementValues: {
15
+ '0': MAX_QUERY_RESULTS.toString(),
16
+ },
17
+ });
18
+ }
11
19
  return `${count} ${count === 1 ? t('article') : t('articles')}`;
12
20
  }
13
21
 
@@ -0,0 +1 @@
1
+ export declare const MAX_QUERY_RESULTS = 1000;
@@ -0,0 +1,3 @@
1
+ const MAX_QUERY_RESULTS = 1000;
2
+
3
+ export { MAX_QUERY_RESULTS };
@@ -2,7 +2,7 @@
2
2
  import { useContext, useMemo } from 'react';
3
3
  import aa from 'search-insights';
4
4
  import { logger } from '../logging/logger.js';
5
- import { currencySymbolToISO } from '../shared/model/currency.js';
5
+ import { getCurrencyCodeBySymbol } from '../shared/model/currency.js';
6
6
  import { ensureArray } from '../shared/utils/array.js';
7
7
  import { userToken } from './algolia-initialization.js';
8
8
  import { AlgoliaInsightsProviderContext } from './algolia-insights-provider.js';
@@ -10,7 +10,7 @@ import { useAlgoliaInsightsGlobalState } from './use-algolia-insights-provider-g
10
10
 
11
11
  function getCurrencyFromPriceString(priceString) {
12
12
  const currencySymbol = priceString?.replace(/[\d ,.-]/g, '');
13
- return currencySymbol ? currencySymbolToISO[currencySymbol] : undefined;
13
+ return getCurrencyCodeBySymbol(currencySymbol || '');
14
14
  }
15
15
  function useAlgoliaInsights() {
16
16
  const context = useContext(AlgoliaInsightsProviderContext);
@@ -243,7 +243,7 @@ function useAlgoliaInsights() {
243
243
  if (!cart.cartLines || cart.cartLines.length === 0)
244
244
  return logger.warn('Unable to send purchasedObjectIDs event, no cartLines', cart);
245
245
  aa('purchasedObjectIDs', {
246
- currency: currencySymbolToISO[cart.currencySymbol],
246
+ currency: getCurrencyCodeBySymbol(cart.currencySymbol),
247
247
  eventName: 'Purchase Successful',
248
248
  index: context.index,
249
249
  objectData: cart.cartLines.map(cartLine => ({
@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import clsx from 'clsx';
3
3
  import { Tag } from '../../badges/tag/tag.js';
4
4
  import { DeliveryTime } from '../../delivery-time/delivery-time.js';
5
- import { ProductTotalPrice } from '../../display/product-price/product-total-price.js';
5
+ import { Price } from '../../display/price/price.js';
6
6
  import { ProductSku } from '../../display/product-sku/product-sku.js';
7
7
  import { FormattedMessage } from '../../intl/formatted-message.js';
8
8
  import { Image } from '../../media/image/image.js';
@@ -12,7 +12,7 @@ import styles from './orderline-card.module.css.js';
12
12
 
13
13
  function OrderLineCard(props) {
14
14
  const { deliveryDate, href, image, isReadonly, price, productId, sku, tags, title, } = props;
15
- return (jsxs(RouteLink, { className: clsx(styles['orderline-card'], isReadonly && styles.readonly), href: href, id: productId, isDisabled: isReadonly, children: [jsx("div", { className: styles['image-container'], children: jsx(Image, { ...image }) }), jsxs("div", { className: styles.body, children: [jsxs("div", { className: styles['title-container'], children: [tags && (jsx("div", { className: styles.tag, children: tags.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) })), jsx(Heading, { className: styles.title, size: "xxxs", tag: "h3", children: title }), jsx("div", { className: styles.sku, children: jsx(ProductSku, { sku: sku }) })] }), isReadonly ? (jsx("p", { className: styles.amount, children: jsx(FormattedMessage, { id: "Amount: {0}", replacementValues: { '0': props.quantity.toString() } }) })) : (jsx("div", { className: styles['add-to-cart-button'], children: props.addToCartButton })), jsx(ProductTotalPrice, { className: styles.price, originalTotalPrice: price.originalTotalPrice, pricePerUnit: price.pricePerUnit, totalPrice: price.totalPrice }), deliveryDate && (jsx(DeliveryTime, { className: styles.delivery, deliveryDate: deliveryDate })), !isReadonly && (jsx("div", { className: styles.remove, children: props.removeButton }))] })] }));
15
+ return (jsxs(RouteLink, { className: clsx(styles['orderline-card'], isReadonly && styles.readonly), href: href, id: productId, isDisabled: isReadonly, children: [jsx("div", { className: styles['image-container'], role: "presentation", children: jsx(Image, { ...image }) }), jsx(Heading, { className: styles.title, size: "xxxs", tag: "h3", children: title }), tags && tags.length > 0 && (jsx("div", { className: styles.tags, children: tags.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) })), jsx(ProductSku, { className: styles.sku, sku: sku }), isReadonly ? (jsx("p", { className: styles.amount, children: jsx(FormattedMessage, { id: "Amount: {0}", replacementValues: { '0': props.quantity.toString() } }) })) : (jsx("div", { className: styles['add-to-cart-button'], children: props.addToCartButton })), jsx(Price, { className: styles.price, currencyCode: price.currencyCode, originalPrice: price.originalTotalPrice, price: price.totalPrice, pricePerUnit: price.pricePerUnit, variant: "sonic" }), deliveryDate && (jsx(DeliveryTime, { className: styles.delivery, deliveryDate: deliveryDate })), !isReadonly && jsx("div", { className: styles.remove, children: props.removeButton })] }));
16
16
  }
17
17
 
18
18
  export { OrderLineCard };
@@ -1,3 +1,3 @@
1
- var styles = {"orderline-card":"orderline-card-module-AMTMm","readonly":"orderline-card-module-NU77X","image-container":"orderline-card-module-TlhUg","body":"orderline-card-module-L0kX1","title-container":"orderline-card-module-D-6JE","tag":"orderline-card-module-uiHOY","title":"orderline-card-module-C8xE6","amount":"orderline-card-module-s-u3O","add-to-cart-button":"orderline-card-module-ZjAaX","price":"orderline-card-module-q3yjo","delivery":"orderline-card-module-N-Oe-","remove":"orderline-card-module-0CunP"};
1
+ var styles = {"orderline-card":"orderline-card-module-AMTMm","readonly":"orderline-card-module-NU77X","remove":"orderline-card-module-0CunP","title":"orderline-card-module-C8xE6","tags":"orderline-card-module-gXavY","sku":"orderline-card-module-Zcir0","image-container":"orderline-card-module-TlhUg","add-to-cart-button":"orderline-card-module-ZjAaX","price":"orderline-card-module-q3yjo","amount":"orderline-card-module-s-u3O","delivery":"orderline-card-module-N-Oe-"};
2
2
 
3
3
  export { styles as default };
@@ -1,15 +1,16 @@
1
1
  "use client";
2
2
  import { jsx, jsxs } from 'react/jsx-runtime';
3
3
  import { Tag } from '../../badges/tag/tag.js';
4
- import { ProductPrice } from '../../display/product-price/product-price.js';
4
+ import { Price } from '../../display/price/price.js';
5
5
  import { ProductSku } from '../../display/product-sku/product-sku.js';
6
6
  import { FormattedMessage } from '../../intl/formatted-message.js';
7
7
  import { Image } from '../../media/image/image.js';
8
8
  import { RouteLink } from '../../shared/routing/route-link.js';
9
+ import { Heading } from '../../typography/heading/heading.js';
9
10
  import styles from './product-card.module.css.js';
10
11
 
11
12
  function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, href, id, image, onClick, price, sku, tags, title, }) {
12
- return (jsx("div", { className: styles['product-card-container'], children: jsxs(RouteLink, { className: styles['product-card'], "data-product-id": sku, href: href, id: id, onClick: onClick, children: [jsx("div", { className: styles.image, children: jsx(Image, { ...image }) }), jsx("div", { className: styles['favorite-button'], children: FavoriteButton && FavoriteButton }), jsxs("div", { className: styles.content, children: [jsxs("div", { className: styles.top, children: [jsx("div", { className: styles.tag, children: tags?.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) }), jsx("h2", { className: styles.title, children: title }), jsx(ProductSku, { sku: sku })] }), jsxs("div", { className: styles.bottom, children: [jsx("div", { className: styles.price, children: jsx(ProductPrice, { isVatIncluded: price.isVatIncluded, originalPrice: price.originalPrice, price: price.price }) }), jsx("div", { className: styles['add-to-cart-button'], children: AddToCartButton })] })] })] }) }));
13
+ return (jsx("div", { className: styles['product-card-container'], children: jsxs(RouteLink, { className: styles['product-card'], "data-product-id": sku, href: href, id: id, onClick: onClick, children: [jsx("div", { className: styles['image-container'], children: jsx(Image, { ...image }) }), jsx("div", { className: styles['favorite-button'], children: FavoriteButton && FavoriteButton }), tags && tags.length > 0 && (jsx("div", { className: styles.tags, children: tags.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) })), jsx(Heading, { className: styles.title, size: "xxxs", tag: "h2", children: title }), jsx(ProductSku, { className: styles.sku, sku: sku }), jsx(Price, { className: styles.price, currencyCode: price.currencyCode, isVatIncluded: price.isVatIncluded, originalPrice: price.originalPrice, price: price.price, variant: "sonic" }), jsx("div", { className: styles['add-to-cart-button'], children: AddToCartButton })] }) }));
13
14
  }
14
15
 
15
16
  export { ProductCard };
@@ -1,3 +1,3 @@
1
- var styles = {"product-card-container":"product-card-module-LepTy","product-card":"product-card-module-pLaiB","favorite-button":"product-card-module-tvEdz","content":"product-card-module-e0kMu","top":"product-card-module-Q0VvF","tag":"product-card-module-HkWBE","title":"product-card-module-CStNi","bottom":"product-card-module-kD2tU","image":"product-card-module-p-zoi","price":"product-card-module-irW0D","add-to-cart-button":"product-card-module-SnCvX"};
1
+ var styles = {"product-card-container":"product-card-module-LepTy","product-card":"product-card-module-pLaiB","favorite-button":"product-card-module-tvEdz","title":"product-card-module-CStNi","tags":"product-card-module-nL-hY","sku":"product-card-module-XzunM","image-container":"product-card-module-65ZVi","price":"product-card-module-irW0D","add-to-cart-button":"product-card-module-SnCvX"};
2
2
 
3
3
  export { styles as default };
@@ -1,5 +1,7 @@
1
+ import { CurrencyCode } from '../intl/types';
1
2
  export interface StickyTotalCostsProps {
2
3
  className?: string;
3
- totalAmount: string;
4
+ currencyCode: CurrencyCode;
5
+ totalAmount: number;
4
6
  }
5
- export declare function CartTotalsSummary({ className, totalAmount, }: StickyTotalCostsProps): import("react/jsx-runtime").JSX.Element;
7
+ export declare function CartTotalsSummary({ className, currencyCode, totalAmount, }: StickyTotalCostsProps): import("react/jsx-runtime").JSX.Element;
@@ -2,10 +2,11 @@ import { jsx, jsxs } from 'react/jsx-runtime';
2
2
  import clsx from 'clsx';
3
3
  import { FormattedMessage } from '../intl/formatted-message.js';
4
4
  import { Heading } from '../typography/heading/heading.js';
5
+ import { Price } from '../display/price/price.js';
5
6
  import styles from './cart-totals-summary.module.css.js';
6
7
 
7
- function CartTotalsSummary({ className, totalAmount, }) {
8
- return (jsx("div", { className: clsx(styles['cart-totals-summary'], className), children: jsxs(Heading, { bold: true, size: "xxxs", children: [jsx(FormattedMessage, { id: "Total amount is" }), jsx("br", {}), totalAmount] }) }));
8
+ function CartTotalsSummary({ className, currencyCode, totalAmount, }) {
9
+ return (jsx("div", { className: clsx(styles['cart-totals-summary'], className), children: jsxs(Heading, { bold: true, size: "xxxs", children: [jsx(FormattedMessage, { id: "Total amount is" }), jsx("br", {}), jsx(Price, { currencyCode: currencyCode, price: totalAmount })] }) }));
9
10
  }
10
11
 
11
12
  export { CartTotalsSummary };
@@ -1,13 +1,15 @@
1
+ import { CurrencyCode } from '../intl/types';
1
2
  export interface CartTotalsProps {
3
+ currencyCode: CurrencyCode;
2
4
  deliveryDate?: string;
3
5
  fulfillmentMethod?: string;
4
6
  isPayByInvoice?: boolean;
5
7
  orderNumber?: string;
6
- shippingCost: string;
7
- subtotal: string;
8
- tax: string;
9
- total: string;
8
+ shippingCost: number;
9
+ subtotal: number;
10
+ tax: number;
11
+ total: number;
10
12
  vatPercentage: number | undefined;
11
13
  }
12
14
  export declare const formatDisplayPriceToSymbolSpaceValue: (displayPrice: string) => string;
13
- export declare function CartTotals({ deliveryDate, fulfillmentMethod, isPayByInvoice, orderNumber, shippingCost, subtotal, tax, total, vatPercentage, }: CartTotalsProps): import("react/jsx-runtime").JSX.Element;
15
+ export declare function CartTotals({ currencyCode, deliveryDate, fulfillmentMethod, isPayByInvoice, orderNumber, shippingCost, subtotal, tax, total, vatPercentage, }: CartTotalsProps): import("react/jsx-runtime").JSX.Element;
@@ -1,13 +1,14 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import { Price } from '../display/price/price.js';
2
3
  import { FormattedMessage } from '../intl/formatted-message.js';
3
4
  import { useFormattedMessage } from '../intl/use-formatted-message.js';
4
5
  import { Heading } from '../typography/heading/heading.js';
5
6
  import styles from './cart-totals.module.css.js';
6
7
 
7
8
  const formatDisplayPriceToSymbolSpaceValue = (displayPrice) => displayPrice.replace(/^(\D)([\d,.]*$)/, (_, symbol, value) => `${symbol} ${value}`);
8
- function CartTotals({ deliveryDate, fulfillmentMethod, isPayByInvoice, orderNumber, shippingCost, subtotal, tax, total, vatPercentage, }) {
9
+ function CartTotals({ currencyCode, deliveryDate, fulfillmentMethod, isPayByInvoice, orderNumber, shippingCost, subtotal, tax, total, vatPercentage, }) {
9
10
  const t = useFormattedMessage();
10
- return (jsxs("div", { className: styles['cart-totals'], children: [orderNumber && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Order number" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "orderConfirmation_orderNumber", children: orderNumber }) }) })] })), deliveryDate !== undefined && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Delivery date" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "deliveryDate", children: deliveryDate || t('As soon as possible') }) }) })] })), fulfillmentMethod && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Fulfillment method" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "fulfillmentMethod", children: fulfillmentMethod }) }) })] })), isPayByInvoice && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Payment method" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "paymentMethod", children: jsx(FormattedMessage, { id: "Pay by invoice" }) }) }) })] })), jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Cost overview" }) }), jsxs("div", { children: [jsxs("div", { className: styles.line, children: [jsxs("p", { className: styles.label, children: [jsx(FormattedMessage, { id: "Subtotal" }), ' ', jsx(FormattedMessage, { id: "Excl. VAT" })] }), jsx("p", { className: styles.value, "data-test-selector": "cartTotal_subTotal", children: formatDisplayPriceToSymbolSpaceValue(subtotal) })] }), jsxs("div", { className: styles.line, children: [jsx("p", { className: styles.label, children: jsx(FormattedMessage, { id: "Shipping and handling" }) }), jsx("p", { className: styles.value, "data-test-selector": "shippingCost", children: formatDisplayPriceToSymbolSpaceValue(shippingCost) })] }), jsxs("div", { className: styles.line, children: [jsxs("p", { className: styles.label, children: [jsx(FormattedMessage, { id: "VAT" }), ' ', vatPercentage ? `${vatPercentage}%` : ''] }), jsx("p", { className: styles.value, "data-test-selector": "vatAmount", children: formatDisplayPriceToSymbolSpaceValue(tax) })] })] })] }), jsx("section", { className: styles.totals, children: jsxs("div", { className: styles.line, children: [jsx("p", { className: styles.label, children: jsx(FormattedMessage, { id: "Total" }) }), jsx("p", { className: styles.value, "data-test-selector": "cartTotal_orderGrandTotalDisplay", children: formatDisplayPriceToSymbolSpaceValue(total) })] }) })] }));
11
+ return (jsxs("div", { className: styles['cart-totals'], children: [orderNumber && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Order number" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "orderConfirmation_orderNumber", children: orderNumber }) }) })] })), deliveryDate !== undefined && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Delivery date" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "deliveryDate", children: deliveryDate || t('As soon as possible') }) }) })] })), fulfillmentMethod && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Fulfillment method" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "fulfillmentMethod", children: fulfillmentMethod }) }) })] })), isPayByInvoice && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Payment method" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "paymentMethod", children: jsx(FormattedMessage, { id: "Pay by invoice" }) }) }) })] })), jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Cost overview" }) }), jsxs("div", { children: [jsxs("div", { className: styles.line, children: [jsxs("p", { className: styles.label, children: [jsx(FormattedMessage, { id: "Subtotal" }), ' ', jsx(FormattedMessage, { id: "Excl. VAT" })] }), jsx(Price, { className: styles.value, currencyCode: currencyCode, "data-test-selector": "cartTotal_subTotal", price: subtotal })] }), jsxs("div", { className: styles.line, children: [jsx("p", { className: styles.label, children: jsx(FormattedMessage, { id: "Shipping and handling" }) }), jsx(Price, { className: styles.value, currencyCode: currencyCode, "data-test-selector": "shippingCost", price: shippingCost })] }), jsxs("div", { className: styles.line, children: [jsxs("p", { className: styles.label, children: [jsx(FormattedMessage, { id: "VAT" }), ' ', vatPercentage ? `${vatPercentage}%` : ''] }), jsx(Price, { className: styles.value, currencyCode: currencyCode, "data-test-selector": "vatAmount", price: tax })] })] })] }), jsx("section", { className: styles.totals, children: jsxs("div", { className: styles.line, children: [jsx("p", { className: styles.label, children: jsx(FormattedMessage, { id: "Total" }) }), jsx(Price, { className: styles.value, currencyCode: currencyCode, "data-test-selector": "cartTotal_orderGrandTotalDisplay", price: total })] }) })] }));
11
12
  }
12
13
 
13
14
  export { CartTotals, formatDisplayPriceToSymbolSpaceValue };
@@ -15,9 +15,9 @@ function ConnectedCountrySelector({ defaultCountryCode, defaultLanguageCode, onC
15
15
  const isCountryLanguageSelected = useMemo(() => selectedCountry !== undefined && selectedLanguage !== undefined, [selectedCountry, selectedLanguage]);
16
16
  const isDismissable = isCountryLanguageSelected;
17
17
  useEffect(() => {
18
- setIsOpen(!isCountryLanguageSelected);
18
+ setIsOpen(!isFetching && !isCountryLanguageSelected);
19
19
  // eslint-disable-next-line react-hooks/exhaustive-deps
20
- }, [isCountryLanguageSelected]);
20
+ }, [isFetching, isCountryLanguageSelected]);
21
21
  if (isFetching)
22
22
  return null;
23
23
  return (jsxs(Fragment, { children: [jsx(CountrySelectorTrigger, { onClick: open, selectedCountry: selectedCountry, selectedLanguage: selectedLanguage, showCountry: showCountry }), jsx(CountrySelectorDialog, { countries: countries, isDismissable: isDismissable, isOpen: isOpen, onOpenChange: open => {
@@ -4,7 +4,7 @@ import clsx from 'clsx';
4
4
  import { FormattedMessage } from '../intl/formatted-message.js';
5
5
  import { useFormattedMessage } from '../intl/use-formatted-message.js';
6
6
  import { getDateUnitObject } from '../shared/utils/date.js';
7
- import { Tooltip } from '../tooltip/tooltip.js';
7
+ import { InfoIconTooltip } from '../info-icon-tooltip/info-icon-tooltip.js';
8
8
  import styles from './delivery-time.module.css.js';
9
9
 
10
10
  function DeliveryTime({ className, deliveryDate }) {
@@ -13,7 +13,7 @@ function DeliveryTime({ className, deliveryDate }) {
13
13
  return (jsxs("div", { className: clsx(styles['delivery-time'], className), children: [jsx("p", { children: jsx(FormattedMessage, { id: "Delivery expected in {0} {1}", replacementValues: {
14
14
  '0': number.toString(),
15
15
  '1': t.pluralize('unit', unit, number),
16
- } }) }), jsx(Tooltip, { children: jsx(FormattedMessage, { id: "The expected delivery is an indication based on the product availability and the shipping location." }) })] }));
16
+ } }) }), jsx(InfoIconTooltip, { variant: "stroke", children: jsx(FormattedMessage, { id: "The expected delivery is an indication based on the product availability and the shipping location." }) })] }));
17
17
  }
18
18
 
19
19
  export { DeliveryTime };
@@ -0,0 +1,18 @@
1
+ import { CultureCode, CurrencyCode } from '../../intl/types';
2
+ type Variant = 'default' | 'sonic';
3
+ export interface PriceProps {
4
+ className?: string;
5
+ currencyCode: CurrencyCode;
6
+ 'data-test-selector'?: string;
7
+ isVatIncluded?: boolean | null;
8
+ locale?: CultureCode;
9
+ originalPrice?: number;
10
+ price: number;
11
+ pricePerUnit?: number;
12
+ style?: React.CSSProperties;
13
+ unitAmount?: number;
14
+ unitType?: string;
15
+ variant?: Variant;
16
+ }
17
+ export declare function Price({ className, currencyCode, 'data-test-selector': dataTestSelector, isVatIncluded, locale, originalPrice, price, pricePerUnit, style, unitAmount, unitType, variant, }: PriceProps): import("react/jsx-runtime").JSX.Element;
18
+ export {};
@@ -0,0 +1,30 @@
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import clsx from 'clsx';
3
+ import { useFormattedMessage } from '../../intl/use-formatted-message.js';
4
+ import { useIntl } from '../../intl/use-intl.js';
5
+ import { formatCurrency, parseCurrency } from '../../shared/utils/price.js';
6
+ import styles from './price.module.css.js';
7
+
8
+ function SinglePrice({ className, currencyCode, isDiscount, isOld, locale, price, small, variant = 'default', }) {
9
+ const priceString = formatCurrency({
10
+ currencyCode,
11
+ locale,
12
+ price,
13
+ replaceNonBreakingSpace: true,
14
+ });
15
+ const { currency, decimal, fraction, integer, literal } = parseCurrency({
16
+ currencyCode,
17
+ locale,
18
+ price,
19
+ });
20
+ return (jsxs("data", { className: clsx(className, styles['single-price'], styles[variant], small && styles['small'], isDiscount && styles['is-discount'], isOld && styles['is-old']), "data-price-string": priceString, value: price, children: [jsx("span", { className: styles.symbol, children: currency }), jsxs("span", { className: styles.number, children: [literal && jsx("span", { className: styles.literal, children: literal }), jsx("span", { className: styles.integer, children: integer }), decimal && jsx("span", { className: styles.decimal, children: decimal }), fraction && jsx("span", { className: styles.fraction, children: fraction })] })] }));
21
+ }
22
+ function Price({ className, currencyCode, 'data-test-selector': dataTestSelector, isVatIncluded = null, locale, originalPrice, price, pricePerUnit, style, unitAmount = 1, unitType = 'pc', variant = 'default', }) {
23
+ const t = useFormattedMessage();
24
+ const { cultureCode: defaultLocale } = useIntl();
25
+ const priceLocale = locale || defaultLocale;
26
+ const showOriginalPrice = originalPrice !== undefined && price !== originalPrice;
27
+ return (jsxs("div", { className: clsx(styles['price'], styles[variant], className), "data-currency-code": currencyCode, "data-current-price": price, "data-locale": priceLocale, "data-original-price": originalPrice, "data-price-per-unit": pricePerUnit, "data-test-selector": dataTestSelector, "data-unit-amount": pricePerUnit && unitAmount, "data-unit-type": pricePerUnit && unitType, "data-vat": isVatIncluded === null ? undefined : isVatIncluded, style: style, children: [showOriginalPrice && (jsx(SinglePrice, { className: styles['original-price'], currencyCode: currencyCode, isOld: showOriginalPrice, locale: priceLocale, price: originalPrice, small: variant === 'sonic', variant: variant })), jsx(SinglePrice, { className: styles['current-price'], currencyCode: currencyCode, isDiscount: showOriginalPrice, locale: priceLocale, price: price, variant: variant }), pricePerUnit && (jsxs("span", { className: styles['price-per-unit'], children: [jsx(SinglePrice, { currencyCode: currencyCode, locale: priceLocale, price: pricePerUnit }), "/", unitAmount > 1 && unitAmount, t.pluralize('priceUnit', unitType, unitAmount)] })), isVatIncluded !== null && (jsx("span", { className: styles.vat, children: t(isVatIncluded ? 'Incl. VAT' : 'Excl. VAT') }))] }));
28
+ }
29
+
30
+ export { Price };
@@ -0,0 +1,3 @@
1
+ var styles = {"single-price":"price-module-Qyyas","symbol":"price-module--Oil0","number":"price-module-QnS4t","fraction":"price-module-p8hAn","sonic":"price-module-vUbWV","literal":"price-module-9HAVF","is-discount":"price-module-bpZpP","small":"price-module-TEd4d","is-old":"price-module-fydQn","price":"price-module-tbuNk","price-per-unit":"price-module-ZURYg","vat":"price-module-uVTD7","original-price":"price-module-x77Vd","current-price":"price-module-9XVqt"};
2
+
3
+ export { styles as default };
@@ -1,4 +1,5 @@
1
1
  export interface ProductSkuProps {
2
+ className?: string;
2
3
  sku: string;
3
4
  }
4
- export declare function ProductSku({ sku }: ProductSkuProps): import("react/jsx-runtime").JSX.Element;
5
+ export declare function ProductSku({ className, sku }: ProductSkuProps): import("react/jsx-runtime").JSX.Element;
@@ -1,8 +1,9 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
+ import clsx from 'clsx';
2
3
  import styles from './product-sku.module.css.js';
3
4
 
4
- function ProductSku({ sku }) {
5
- return (jsx("p", { className: styles['product-sku'], "data-test-selector": "productNumber", children: sku }));
5
+ function ProductSku({ className, sku }) {
6
+ return (jsx("p", { className: clsx(styles['product-sku'], className), "data-test-selector": "productNumber", children: sku }));
6
7
  }
7
8
 
8
9
  export { ProductSku };
package/dist/exports.d.ts CHANGED
@@ -68,8 +68,7 @@ export * from './country-selector/country-selector-trigger/country-selector-trig
68
68
  export * from './country-selector/use-countries-languages';
69
69
  export * from './delivery-time/delivery-time';
70
70
  export * from './display/info-display/info-display';
71
- export * from './display/product-price/product-price';
72
- export * from './display/product-price/product-total-price';
71
+ export * from './display/price/price';
73
72
  export * from './display/product-sku/product-sku';
74
73
  export * from './filters/active-filters/active-filters';
75
74
  export * from './filters/multi-select/multi-select';
@@ -122,8 +121,11 @@ export * from './intl/intl-provider';
122
121
  export * from './intl/missing-translation-provider';
123
122
  export * from './intl/translation-id';
124
123
  export * from './intl/types';
124
+ export * from './intl/use-country-code';
125
125
  export * from './intl/use-culture-code';
126
+ export * from './intl/use-currency-code';
126
127
  export * from './intl/use-formatted-message';
128
+ export * from './intl/use-intl';
127
129
  export * from './intl/use-language-code';
128
130
  export * from './intl/utils';
129
131
  export * from './lists/download-document-list/download-document-list';
@@ -183,6 +185,7 @@ export * from './pages/components/page/page';
183
185
  export * from './pages/error-page/error-page';
184
186
  export * from './pages/loading-page/loading-page';
185
187
  export * from './pages/paths';
188
+ export * from './pages/product/components/product-overview';
186
189
  export * from './pages/product/layouts/product-details-page-layout/product-details-page-layout';
187
190
  export * from './pages/product/product-details-page/components/product-details-images/product-detail-images';
188
191
  export * from './pages/product/product-details-page/components/product-details-panel/product-details-panel';
@@ -83,6 +83,7 @@ function ProductHitCard({ autocomplete, hit, index, source, }) {
83
83
  queryId: hit.queryId,
84
84
  });
85
85
  }, price: {
86
+ currencyCode: hit.currencyCode,
86
87
  isVatIncluded: hit.isVatIncluded,
87
88
  originalPrice: hit.originalPrice,
88
89
  price: hit.price,
package/dist/index.js CHANGED
@@ -73,8 +73,7 @@ export { CountrySelectorTrigger } from './country-selector/country-selector-trig
73
73
  export { useCountriesLanguages } from './country-selector/use-countries-languages.js';
74
74
  export { DeliveryTime } from './delivery-time/delivery-time.js';
75
75
  export { InfoDisplay } from './display/info-display/info-display.js';
76
- export { ProductPrice } from './display/product-price/product-price.js';
77
- export { ProductTotalPrice } from './display/product-price/product-total-price.js';
76
+ export { Price } from './display/price/price.js';
78
77
  export { ProductSku } from './display/product-sku/product-sku.js';
79
78
  export { ActiveFilters } from './filters/active-filters/active-filters.js';
80
79
  export { MultiSelect } from './filters/multi-select/multi-select.js';
@@ -124,9 +123,12 @@ export { FormattedMessage } from './intl/formatted-message.js';
124
123
  export { IntlContext } from './intl/intl-context.js';
125
124
  export { IntlProvider } from './intl/intl-provider.js';
126
125
  export { MissingTranslationProvider } from './intl/missing-translation-provider.js';
127
- export { isCountryCode, isCultureCode, isLanguageCode } from './intl/types.js';
126
+ export { isCountryCode, isCultureCode, isCurrencyCode, isLanguageCode } from './intl/types.js';
127
+ export { useCountryCode, useUpdateCountryCode } from './intl/use-country-code.js';
128
128
  export { useCultureCode, useUpdateCultureCode } from './intl/use-culture-code.js';
129
+ export { useCurrencyCode, useUpdateCurrencyCode } from './intl/use-currency-code.js';
129
130
  export { useFormattedMessage } from './intl/use-formatted-message.js';
131
+ export { useIntl } from './intl/use-intl.js';
130
132
  export { useLanguageCode } from './intl/use-language-code.js';
131
133
  export { getLanguageCodeFromCultureCode, spireTranslateAdapter } from './intl/utils.js';
132
134
  export { DownloadDocumentList } from './lists/download-document-list/download-document-list.js';
@@ -186,6 +188,7 @@ export { Page } from './pages/components/page/page.js';
186
188
  export { ErrorPage } from './pages/error-page/error-page.js';
187
189
  export { LoadingPage } from './pages/loading-page/loading-page.js';
188
190
  export { PATHS } from './pages/paths.js';
191
+ export { ProductOverview } from './pages/product/components/product-overview.js';
189
192
  export { ProductDetailsPageLayout } from './pages/product/layouts/product-details-page-layout/product-details-page-layout.js';
190
193
  export { ProductDetailImages } from './pages/product/product-details-page/components/product-details-images/product-detail-images.js';
191
194
  export { ProductDetailsPanel } from './pages/product/product-details-page/components/product-details-panel/product-details-panel.js';
@@ -290,7 +293,7 @@ export { validateEmail, validatePhone } from './shared/model/address.js';
290
293
  export { announcementSubTypes, announcementTypes, isAnnouncementSubtype, isAnnouncementType } from './shared/model/announcement.js';
291
294
  export { transformAlgoliaCategoryData } from './shared/model/category.js';
292
295
  export { isCountry, isLanguage } from './shared/model/countries-languages.js';
293
- export { currencySymbolToISO } from './shared/model/currency.js';
296
+ export { currencies, getCurrencyCodeBySymbol } from './shared/model/currency.js';
294
297
  export { voidFunction } from './shared/model/defaults.js';
295
298
  export { isProductHit, transformAlgoliaProductHitToProductHit, transformAlgoliaPromoHitToPromoHit } from './shared/model/hit.js';
296
299
  export { isResponsiveImage } from './shared/model/image.js';
@@ -314,10 +317,10 @@ export { environment, environments } from './shared/utils/environment.js';
314
317
  export { EventEmitter } from './shared/utils/event-emitter.js';
315
318
  export { clone, deepMerge, isPlainObject, default as main, merge } from './shared/utils/merge.js';
316
319
  export { ensureNumber } from './shared/utils/number.js';
317
- export { currencies, formatPrice, getCurrencyByCountryCode } from './shared/utils/price.js';
320
+ export { formatCurrency, getCurrencyByCountryCode, parseCurrency } from './shared/utils/price.js';
318
321
  export { isPromise, wait } from './shared/utils/promise.js';
319
322
  export { random, randomInt } from './shared/utils/random.js';
320
- export { camelCase, capitalizeFirstLetter } from './shared/utils/string.js';
323
+ export { camelCase } from './shared/utils/string.js';
321
324
  export { TIME } from './shared/utils/time.js';
322
325
  export { has, hasNo } from './shared/utils/types.js';
323
326
  export { createUUID } from './shared/utils/uuid.js';
@@ -1,8 +1,14 @@
1
- import { CultureCode, FormattedMessageFunction } from './types';
2
- interface IntlContextType {
1
+ import { CountryCode, CultureCode, CurrencyCode, FormattedMessageFunction } from './types';
2
+ export type UpdateCountryCode = (countryCode: CountryCode) => void;
3
+ export type UpdateCultureCode = (cultureCode: CultureCode) => void;
4
+ export type UpdateCurrencyCode = (currencyCode: CurrencyCode) => void;
5
+ export interface IntlContextType {
6
+ countryCode: CountryCode;
3
7
  cultureCode: CultureCode;
8
+ currencyCode: CurrencyCode;
4
9
  formattedMessage: FormattedMessageFunction;
5
- updateCultureCode: (cultureCode: CultureCode) => void;
10
+ updateCountryCode?: UpdateCountryCode;
11
+ updateCultureCode?: UpdateCultureCode;
12
+ updateCurrencyCode?: UpdateCurrencyCode;
6
13
  }
7
14
  export declare const IntlContext: React.Context<IntlContextType>;
8
- export {};
@@ -3,9 +3,13 @@ import { createContext } from 'react';
3
3
  import { voidFunction } from '../shared/model/defaults.js';
4
4
 
5
5
  const IntlContext = createContext({
6
+ countryCode: 'NL',
6
7
  cultureCode: 'en-GB',
8
+ currencyCode: 'EUR',
7
9
  formattedMessage: id => id,
10
+ updateCountryCode: voidFunction,
8
11
  updateCultureCode: voidFunction,
12
+ updateCurrencyCode: voidFunction,
9
13
  });
10
14
 
11
15
  export { IntlContext };
@@ -1,8 +1,10 @@
1
- import { CultureCode, FormattedMessageFunction } from './types';
1
+ import { CountryCode, CultureCode, CurrencyCode, FormattedMessageFunction } from './types';
2
2
  interface IntlProviderProps {
3
3
  children: React.ReactNode;
4
+ countryCode: CountryCode;
4
5
  cultureCode: CultureCode;
6
+ currencyCode: CurrencyCode;
5
7
  formattedMessage: FormattedMessageFunction;
6
8
  }
7
- export declare function IntlProvider({ children, cultureCode: _cultureCode, formattedMessage, }: IntlProviderProps): import("react/jsx-runtime").JSX.Element;
9
+ export declare function IntlProvider({ children, countryCode: _countryCode, cultureCode: _cultureCode, currencyCode: _currencyCode, formattedMessage, }: IntlProviderProps): import("react/jsx-runtime").JSX.Element;
8
10
  export {};
@@ -3,13 +3,27 @@ import { jsx } from 'react/jsx-runtime';
3
3
  import { useState, useMemo } from 'react';
4
4
  import { IntlContext } from './intl-context.js';
5
5
 
6
- function IntlProvider({ children, cultureCode: _cultureCode, formattedMessage, }) {
7
- const [cultureCode, updateCultureCode] = useState(_cultureCode);
6
+ function IntlProvider({ children, countryCode: _countryCode, cultureCode: _cultureCode, currencyCode: _currencyCode, formattedMessage, }) {
7
+ const [cultureCode, updateCultureCode] = useState();
8
+ const [currencyCode, updateCurrencyCode] = useState();
9
+ const [countryCode, updateCountryCode] = useState();
8
10
  const value = useMemo(() => ({
9
- cultureCode,
11
+ countryCode: countryCode || _countryCode,
12
+ cultureCode: cultureCode || _cultureCode,
13
+ currencyCode: currencyCode || _currencyCode,
10
14
  formattedMessage,
15
+ updateCountryCode,
11
16
  updateCultureCode,
12
- }), [cultureCode, formattedMessage]);
17
+ updateCurrencyCode,
18
+ }), [
19
+ _countryCode,
20
+ _cultureCode,
21
+ _currencyCode,
22
+ countryCode,
23
+ cultureCode,
24
+ currencyCode,
25
+ formattedMessage,
26
+ ]);
13
27
  return jsx(IntlContext.Provider, { value: value, children: children });
14
28
  }
15
29
 
@@ -1,13 +1,14 @@
1
1
  import { jsx, Fragment } from 'react/jsx-runtime';
2
- import { useContext, useCallback, useMemo } from 'react';
2
+ import { useCallback, useMemo } from 'react';
3
3
  import { useFetchTranslations } from '../shared/api/storefront/hooks/translation/use-fetch-translations.js';
4
4
  import { useFeatureFlags } from '../shared/feature-flags/use-feature-flags.js';
5
5
  import { IntlContext } from './intl-context.js';
6
+ import { useIntl } from './use-intl.js';
6
7
  import { getLanguageCodeFromCultureCode } from './utils.js';
7
8
 
8
9
  function MissingTranslationProvider({ children, }) {
9
10
  const { missing, translations: showTranslations } = useFeatureFlags();
10
- const intlProps = useContext(IntlContext);
11
+ const intlProps = useIntl();
11
12
  const { data: translations, isLoading } = useFetchTranslations(getLanguageCodeFromCultureCode(intlProps.cultureCode), { enabled: missing });
12
13
  const formattedMessage = useCallback((id, options) => {
13
14
  const message = intlProps.formattedMessage(id, options);
@@ -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.' | 'Your email and password were not recognized.' | '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' | 'Billing address' | 'Billing and shipping address' | 'Billing and shipping information' | 'Cancel' | 'Cart' | 'Changing your address is currently not possible. Please contact customer support to change your address.' | 'Chosen filters' | 'City' | 'Clear filters' | 'Clear' | 'Click the button below to continue shopping.' | 'Close' | 'Company name' | 'Conceal value' | 'Continue shopping' | 'Continue' | 'Cost overview' | 'Country' | 'create account' | 'Create new list' | 'Currency Change' | 'Delivery date' | 'Delivery expected in {0} {1}' | 'Double check your spelling' | 'Downloads' | 'Easily add your favorite products' | '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' | 'Features' | '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.' | 'Incl. VAT' | 'Includes' | 'Industry' | 'Information' | 'Language' | 'Last name' | 'List name already exists' | 'New list name' | 'New user?' | 'of' | 'Or continue as guest' | 'Order number' | 'Order' | 'Order confirmation' | 'Order date' | 'Order number' | 'Order' | 'Pay by invoice' | 'Pay' | 'Payment method' | 'Payment' | 'Password' | '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' | 'Processing' | 'Product Features' | 'Product' | 'Products' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Requested delivery date' | 'Remember me' | 'Remove all' | 'Requested delivery date' | 'Submitting…' | 'Submit email address' | 'Recover your password' | 'Reveal value' | 'Review and payment' | 'Save order' | 'Save' | 'Saved cart for later.' | 'Search' | 'Searching again using more general terms' | 'See all results' | 'Select a desired delivery date' | 'Selecting this country will result in your cart to be converted to the currency {0}' | 'Select a list' | 'Selecting As Soon As Possible will enable us to send the products to you as they become available.' | 'Share your favorite list with others' | 'Ship' | 'Shipping address' | 'Shipping and handling' | 'Shipping details' | 'Shop more efficiently and quicker with a favorites list' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'sign in' | 'Signing in…' | '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' | 'Submit' | 'Subtotal' | 'Suggestions' | 'tag.limited' | 'tag.new' | '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.' | '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 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, ' | 'If you want to proceed, click the continue button. If you want to change your country, close this message and select a different country.' | 'You could try checking the spelling of your search query' | 'You could try exploring our products by category' | 'You could try' | 'You must ' | 'Your cart has been emptied.' | 'Your favorites are available on multiple devices' | '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.' | 'Your email and password were not recognized.' | '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' | 'Billing address' | 'Billing and shipping address' | 'Billing and shipping information' | 'Cancel' | 'Cart' | 'Changing your address is currently not possible. Please contact customer support to change your address.' | 'Chosen filters' | 'City' | 'Clear filters' | 'Clear' | 'Click the button below to continue shopping.' | 'Close' | 'Company name' | 'Conceal value' | 'Continue shopping' | 'Continue' | 'Cost overview' | 'Country' | 'create account' | 'Create new list' | 'Currency Change' | 'Delivery date' | 'Delivery expected in {0} {1}' | 'Double check your spelling' | 'Downloads' | 'Easily add your favorite products' | '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' | 'Features' | '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.' | 'Incl. VAT' | 'Includes' | 'Industry' | 'Information' | 'Language' | 'Last name' | 'List name already exists' | 'More than {0} articles' | 'New list name' | 'New user?' | 'of' | 'Or continue as guest' | 'Order number' | 'Order' | 'Order confirmation' | 'Order date' | 'Order number' | 'Order' | 'Pay by invoice' | 'Pay' | 'Payment method' | 'Payment' | 'Password' | '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' | 'Processing' | 'Product Features' | 'Product' | 'Products' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Requested delivery date' | 'Remember me' | 'Remove all' | 'Requested delivery date' | 'Submitting…' | 'Submit email address' | 'Recover your password' | 'Reveal value' | 'Review and payment' | 'Save order' | 'Save' | 'Saved cart for later.' | 'Search' | 'Searching again using more general terms' | 'See all results' | 'Select a desired delivery date' | 'Selecting this country will result in your cart to be converted to the currency {0}' | 'Select a list' | 'Selecting As Soon As Possible will enable us to send the products to you as they become available.' | 'Share your favorite list with others' | 'Ship' | 'Shipping address' | 'Shipping and handling' | 'Shipping details' | 'Shop more efficiently and quicker with a favorites list' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'sign in' | 'Signing in…' | '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' | 'Submit' | 'Subtotal' | 'Suggestions' | 'tag.limited' | 'tag.new' | '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.' | '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 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, ' | 'If you want to proceed, click the continue button. If you want to change your country, close this message and select a different country.' | 'You could try checking the spelling of your search query' | 'You could try exploring our products by category' | 'You could try' | 'You must ' | 'Your cart has been emptied.' | 'Your favorites are available on multiple devices' | 'Your shopping cart is still empty' | 'You have reached the end of the results, but there may be more articles available. Adjust your filters or search to discover more!';
@@ -2,8 +2,10 @@ import { TranslationId } from './translation-id';
2
2
  export type Translations = Record<TranslationId, string>;
3
3
  type Letter = 'a' | 'b' | 'c' | 'd' | 'e' | 'f' | 'g' | 'h' | 'i' | 'j' | 'k' | 'l' | 'm' | 'n' | 'o' | 'p' | 'q' | 'r' | 's' | 't' | 'u' | 'v' | 'w' | 'x' | 'y' | 'z';
4
4
  export type CountryCode = Uppercase<`${Letter}${Letter}`>;
5
+ export type CurrencyCode = Uppercase<`${Letter}${Letter}${Letter}`>;
5
6
  export type LanguageCode = Uppercase<`${Letter}${Letter}`>;
6
7
  export declare function isCountryCode(value: unknown): value is CountryCode;
8
+ export declare function isCurrencyCode(value: unknown): value is CurrencyCode;
7
9
  export declare function isLanguageCode(value: unknown): value is LanguageCode;
8
10
  export type CultureCode = `${Lowercase<string>}-${Uppercase<string>}`;
9
11
  export declare function isCultureCode(value: unknown): value is CultureCode;