@sonic-equipment/ui 178.0.0 → 180.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 (102) hide show
  1. package/dist/algolia/algolia-active-filters.js +4 -0
  2. package/dist/config.js +4 -7
  3. package/dist/country-select/country-select.d.ts +1 -0
  4. package/dist/exports.d.ts +19 -9
  5. package/dist/forms/input/input.d.ts +1 -0
  6. package/dist/forms/input/input.js +4 -4
  7. package/dist/forms/input/input.module.css.js +1 -1
  8. package/dist/forms/password-field/password-field.d.ts +2 -0
  9. package/dist/forms/password-field/password-field.js +15 -0
  10. package/dist/forms/search-field/search-field.d.ts +5 -0
  11. package/dist/forms/search-field/search-field.js +19 -0
  12. package/dist/forms/text-field/text-field.d.ts +25 -24
  13. package/dist/forms/text-field/text-field.js +7 -14
  14. package/dist/forms/textarea/textarea.d.ts +1 -0
  15. package/dist/forms/textarea/textarea.js +2 -2
  16. package/dist/forms/textarea/textarea.module.css.js +1 -1
  17. package/dist/global-search/search-highlight/highlight.d.ts +1 -0
  18. package/dist/header/buttons/account/connected-account-button.js +1 -1
  19. package/dist/icons/solid/solid-rating-icon.js +7 -0
  20. package/dist/index.js +20 -10
  21. package/dist/intl/translation-id.d.ts +1 -1
  22. package/dist/modals/dialog/dialog.d.ts +5 -1
  23. package/dist/modals/dialog/dialog.js +10 -4
  24. package/dist/navigation/mobile-navigation/mobile-navigation.js +1 -1
  25. package/dist/observers/intersection-observer.d.ts +9 -1
  26. package/dist/observers/intersection-observer.js +6 -3
  27. package/dist/pages/account/components/create-account-form/create-account-form.js +3 -2
  28. package/dist/pages/account/components/sign-in-form/sign-in-form.js +2 -1
  29. package/dist/pages/my-sonic/actions/change-customer/change-customer-dialog.d.ts +15 -0
  30. package/dist/pages/my-sonic/actions/change-customer/change-customer-dialog.js +23 -0
  31. package/dist/pages/my-sonic/actions/change-customer/change-customer-dialog.module.css.js +3 -0
  32. package/dist/pages/my-sonic/actions/change-customer/change-customer.d.ts +13 -0
  33. package/dist/pages/my-sonic/actions/change-customer/change-customer.js +66 -0
  34. package/dist/pages/my-sonic/actions/change-customer/change-customer.module.css.js +3 -0
  35. package/dist/pages/my-sonic/actions/change-customer/connected-change-customer-dialog.d.ts +2 -0
  36. package/dist/pages/my-sonic/actions/change-customer/connected-change-customer-dialog.js +39 -0
  37. package/dist/pages/my-sonic/navigation/connected-my-sonic-navigation.d.ts +1 -0
  38. package/dist/pages/{my-account/navigation/connected-my-account-navigation.js → my-sonic/navigation/connected-my-sonic-navigation.js} +5 -5
  39. package/dist/pages/my-sonic/navigation/my-sonic-desktop-navigation.d.ts +6 -0
  40. package/dist/pages/my-sonic/navigation/my-sonic-desktop-navigation.js +19 -0
  41. package/dist/pages/my-sonic/navigation/my-sonic-desktop-navigation.module.css.js +3 -0
  42. package/dist/pages/{my-account/navigation/my-account-mobile-navigation.d.ts → my-sonic/navigation/my-sonic-mobile-navigation.d.ts} +1 -1
  43. package/dist/pages/my-sonic/navigation/my-sonic-mobile-navigation.js +22 -0
  44. package/dist/pages/my-sonic/navigation/my-sonic-navigation-items.d.ts +18 -0
  45. package/dist/pages/my-sonic/navigation/my-sonic-navigation-items.js +29 -0
  46. package/dist/pages/my-sonic/widgets/connected-customer-information-widget.d.ts +1 -0
  47. package/dist/pages/my-sonic/widgets/connected-customer-information-widget.js +56 -0
  48. package/dist/pages/product/layouts/product-details-page-layout/product-details-page-layout.d.ts +2 -2
  49. package/dist/pages/product/layouts/product-details-page-layout/product-details-page-layout.js +3 -2
  50. package/dist/pages/product/layouts/product-details-page-layout/product-details-page-layout.module.css.js +1 -1
  51. package/dist/pages/product/product-details-page/components/product-details-recently-viewed-section/product-details-recently-viewed-section.d.ts +1 -0
  52. package/dist/pages/product/product-details-page/components/product-details-recently-viewed-section/product-details-recently-viewed-section.js +24 -0
  53. package/dist/pages/product/product-details-page/components/product-details-recently-viewed-section/product-details-recently-viewed-section.module.css.js +3 -0
  54. package/dist/pages/product/product-details-page/product-details.d.ts +1 -2
  55. package/dist/pages/product/product-details-page/product-details.js +4 -5
  56. package/dist/shared/api/bff/hooks/use-fetch-product-details-page-data.js +6 -2
  57. package/dist/shared/api/bff/hooks/use-fetch-recently-viewed-products.d.ts +4 -0
  58. package/dist/shared/api/bff/hooks/use-fetch-recently-viewed-products.js +15 -0
  59. package/dist/shared/api/bff/model/bff.model.d.ts +0 -1
  60. package/dist/shared/api/bff/services/bff-service.d.ts +4 -1
  61. package/dist/shared/api/bff/services/bff-service.js +11 -1
  62. package/dist/shared/api/storefront/hooks/authentication/use-patch-session.d.ts +12 -1
  63. package/dist/shared/api/storefront/hooks/customer/use-fetch-bill-to-addresses.d.ts +4 -1
  64. package/dist/shared/api/storefront/hooks/customer/use-fetch-bill-to-addresses.js +5 -6
  65. package/dist/shared/api/storefront/hooks/product/use-mark-product-as-viewed.d.ts +2 -0
  66. package/dist/shared/api/storefront/hooks/product/use-mark-product-as-viewed.js +17 -0
  67. package/dist/shared/api/storefront/model/storefront.model.d.ts +4 -1
  68. package/dist/shared/api/storefront/services/customer-service.d.ts +5 -1
  69. package/dist/shared/api/storefront/services/customer-service.js +3 -3
  70. package/dist/shared/api/storefront/services/product-service.d.ts +4 -0
  71. package/dist/shared/api/storefront/services/product-service.js +10 -0
  72. package/dist/shared/feature-flags/use-feature-flags.d.ts +0 -3
  73. package/dist/shared/feature-flags/use-feature-flags.js +0 -3
  74. package/dist/shared/fetch/request.d.ts +1 -1
  75. package/dist/shared/ga/google-analytics-provider.d.ts +1 -1
  76. package/dist/shared/hooks/use-intersection-observer.d.ts +2 -1
  77. package/dist/shared/hooks/use-intersection-observer.js +3 -2
  78. package/dist/styles.css +228 -101
  79. package/dist/text/highlight-text/highlight-text.d.ts +10 -0
  80. package/dist/text/highlight-text/highlight-text.js +19 -0
  81. package/dist/text/highlight-text/highlight-text.module.css.js +3 -0
  82. package/dist/typography/heading/heading.d.ts +3 -1
  83. package/dist/typography/heading/heading.js +2 -1
  84. package/package.json +2 -1
  85. package/dist/icons/solid/solid-dashboard-icon.js +0 -7
  86. package/dist/pages/my-account/navigation/connected-my-account-navigation.d.ts +0 -1
  87. package/dist/pages/my-account/navigation/my-account-desktop-navigation.d.ts +0 -6
  88. package/dist/pages/my-account/navigation/my-account-desktop-navigation.js +0 -17
  89. package/dist/pages/my-account/navigation/my-account-desktop-navigation.module.css.js +0 -3
  90. package/dist/pages/my-account/navigation/my-account-mobile-navigation.js +0 -25
  91. package/dist/pages/my-account/widgets/connected-company-information-widget.d.ts +0 -1
  92. package/dist/pages/my-account/widgets/connected-company-information-widget.js +0 -43
  93. package/dist/pages/product/product-details-page/components/product-details-recently-viewed/product-details-recently-viewed.d.ts +0 -4
  94. package/dist/pages/product/product-details-page/components/product-details-recently-viewed/product-details-recently-viewed.js +0 -15
  95. /package/dist/pages/{my-account → my-sonic}/widgets/components/address-data-card.d.ts +0 -0
  96. /package/dist/pages/{my-account → my-sonic}/widgets/components/address-data-card.js +0 -0
  97. /package/dist/pages/{my-account → my-sonic}/widgets/connected-bill-to-address-widget.d.ts +0 -0
  98. /package/dist/pages/{my-account → my-sonic}/widgets/connected-bill-to-address-widget.js +0 -0
  99. /package/dist/pages/{my-account → my-sonic}/widgets/connected-ship-to-address-widget.d.ts +0 -0
  100. /package/dist/pages/{my-account → my-sonic}/widgets/connected-ship-to-address-widget.js +0 -0
  101. /package/dist/pages/{my-account → my-sonic}/widgets/connected-user-account-widget.d.ts +0 -0
  102. /package/dist/pages/{my-account → my-sonic}/widgets/connected-user-account-widget.js +0 -0
@@ -10,6 +10,10 @@ function AlgoliaActiveFilters() {
10
10
  'hierarchicalCategories.lvl1',
11
11
  'hierarchicalCategories.lvl2',
12
12
  'hierarchicalCategories.lvl3',
13
+ 'hierarchicalStorefrontCategories.lvl0',
14
+ 'hierarchicalStorefrontCategories.lvl1',
15
+ 'hierarchicalStorefrontCategories.lvl2',
16
+ 'hierarchicalStorefrontCategories.lvl3',
13
17
  ];
14
18
  const { refine: clearAllFilters } = useClearRefinements({
15
19
  excludedAttributes: itemsToIgnore,
package/dist/config.js CHANGED
@@ -51,13 +51,10 @@ const configPerEnvironment = {
51
51
  sandbox: () => ({
52
52
  ALGOLIA_API_KEY: 'e0edf30798a6b2e4e44fd25f0f2f9646',
53
53
  ALGOLIA_APP_ID: 'testing9VXJ0U4GSV',
54
- ALGOLIA_HOST: 'sonicequipment.commerce.insitesandbox.com',
55
- BFF_API_URL: 'https://sonicequipment.commerce.insitesandbox.com/api/v1/bff',
56
- COOKIE_DOMAIN: '.insitesandbox.com',
57
- SHOP_API_URL:
58
- // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
59
- env?.VITE_SHOP_API_URL ||
60
- 'https://sonicequipment.commerce.insitesandbox.com',
54
+ ALGOLIA_HOST: 'shop.accept-sonic-equipment.com',
55
+ BFF_API_URL: 'https://shop.accept-sonic-equipment.com/api/v1/bff',
56
+ COOKIE_DOMAIN: '.accept-sonic-equipment.com',
57
+ SHOP_API_URL: 'https://shop.accept-sonic-equipment.com',
61
58
  }),
62
59
  'sandbox-reverse-proxy': () => ({
63
60
  ALGOLIA_API_KEY: 'e0edf30798a6b2e4e44fd25f0f2f9646',
@@ -1,3 +1,4 @@
1
+ import { JSX } from 'react';
1
2
  import { Country } from '../shared/model/countries-languages';
2
3
  interface CountrySelectProps<T extends Country> {
3
4
  countries: T[];
package/dist/exports.d.ts CHANGED
@@ -100,6 +100,8 @@ export * from './forms/form/form-segment-group';
100
100
  export * from './forms/input/input';
101
101
  export * from './forms/label/label';
102
102
  export * from './forms/number-field/number-field';
103
+ export * from './forms/password-field/password-field';
104
+ export * from './forms/search-field/search-field';
103
105
  export * from './forms/select-field/select-field';
104
106
  export * from './forms/select/select';
105
107
  export * from './forms/switch-field/switch-field';
@@ -229,20 +231,24 @@ export * from './pages/components/page-meta-data/page-meta-data';
229
231
  export * from './pages/components/page/page';
230
232
  export * from './pages/error-page/error-page';
231
233
  export * from './pages/loading-page/loading-page';
232
- export * from './pages/my-account/navigation/connected-my-account-navigation';
233
- export * from './pages/my-account/navigation/my-account-desktop-navigation';
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';
237
- export * from './pages/my-account/widgets/connected-company-information-widget';
238
- export * from './pages/my-account/widgets/connected-ship-to-address-widget';
239
- export * from './pages/my-account/widgets/connected-user-account-widget';
234
+ export * from './pages/my-sonic/actions/change-customer/change-customer';
235
+ export * from './pages/my-sonic/actions/change-customer/change-customer-dialog';
236
+ export * from './pages/my-sonic/actions/change-customer/connected-change-customer-dialog';
237
+ export * from './pages/my-sonic/navigation/connected-my-sonic-navigation';
238
+ export * from './pages/my-sonic/navigation/my-sonic-desktop-navigation';
239
+ export * from './pages/my-sonic/navigation/my-sonic-mobile-navigation';
240
+ export * from './pages/my-sonic/navigation/my-sonic-navigation-items';
241
+ export * from './pages/my-sonic/widgets/components/address-data-card';
242
+ export * from './pages/my-sonic/widgets/connected-bill-to-address-widget';
243
+ export * from './pages/my-sonic/widgets/connected-customer-information-widget';
244
+ export * from './pages/my-sonic/widgets/connected-ship-to-address-widget';
245
+ export * from './pages/my-sonic/widgets/connected-user-account-widget';
240
246
  export * from './pages/paths';
241
247
  export * from './pages/product/components/product-overview';
242
248
  export * from './pages/product/layouts/product-details-page-layout/product-details-page-layout';
243
249
  export * from './pages/product/product-details-page/components/product-details-images/product-detail-images';
244
250
  export * from './pages/product/product-details-page/components/product-details-panel/product-details-panel';
245
- export * from './pages/product/product-details-page/components/product-details-recently-viewed/product-details-recently-viewed';
251
+ export * from './pages/product/product-details-page/components/product-details-recently-viewed-section/product-details-recently-viewed-section';
246
252
  export * from './pages/product/product-details-page/product-details';
247
253
  export * from './pages/product/product-details-page/product-details-page';
248
254
  export * from './pages/product/product-listing-page/no-results/no-results';
@@ -263,6 +269,7 @@ export * from './shared/api/bff/hooks/use-fetch-announcements';
263
269
  export * from './shared/api/bff/hooks/use-fetch-navigation-links';
264
270
  export * from './shared/api/bff/hooks/use-fetch-product-details-page-data';
265
271
  export * from './shared/api/bff/hooks/use-fetch-product-listing-page-data';
272
+ export * from './shared/api/bff/hooks/use-fetch-recently-viewed-products';
266
273
  export * from './shared/api/bff/services/bff-service';
267
274
  export * from './shared/api/shared/hooks/use-awaitable-mutation';
268
275
  export * from './shared/api/storefront/hooks/authentication/use-create-account';
@@ -301,6 +308,7 @@ export * from './shared/api/storefront/hooks/customer/use-patch-bill-to-address'
301
308
  export * from './shared/api/storefront/hooks/payment/use-create-adyen-session';
302
309
  export * from './shared/api/storefront/hooks/payment/use-fetch-adyen-config';
303
310
  export * from './shared/api/storefront/hooks/payment/use-invalidate-adyen';
311
+ export * from './shared/api/storefront/hooks/product/use-mark-product-as-viewed';
304
312
  export * from './shared/api/storefront/hooks/translation/use-fetch-translations';
305
313
  export * from './shared/api/storefront/hooks/website/use-fetch-countries-languages';
306
314
  export * from './shared/api/storefront/hooks/website/use-fetch-countries-with-languages';
@@ -318,6 +326,7 @@ export * from './shared/api/storefront/services/cart-service';
318
326
  export * from './shared/api/storefront/services/customer-service';
319
327
  export * from './shared/api/storefront/services/finance-service';
320
328
  export * from './shared/api/storefront/services/payment-service';
329
+ export * from './shared/api/storefront/services/product-service';
321
330
  export * from './shared/api/storefront/services/translation-service';
322
331
  export * from './shared/api/storefront/services/website-service';
323
332
  export * from './shared/api/storefront/services/wishlist-service';
@@ -391,6 +400,7 @@ export * from './sidebar/sidebar-provider';
391
400
  export * from './sidebar/toggle-sidebar-button';
392
401
  export * from './sidebar/types';
393
402
  export * from './sidebar/use-sidebar';
403
+ export * from './text/highlight-text/highlight-text';
394
404
  export * from './toast/toast';
395
405
  export * from './toast/toast-provider';
396
406
  export * from './toast/types';
@@ -10,6 +10,7 @@ export interface InputProps extends Omit<ComponentProps<typeof AriaInput>, 'size
10
10
  label: string;
11
11
  size?: 'md' | 'lg';
12
12
  value?: string | number;
13
+ variant?: 'solid' | 'outline';
13
14
  }
14
15
  /**
15
16
  * This component is used to create an input that grows as the user types.
@@ -9,7 +9,7 @@ import styles from './input.module.css.js';
9
9
  * This component is used to create an input that grows as the user types.
10
10
  * It uses a shadow input to calculate the width of the input.
11
11
  */
12
- const Input = forwardRef(({ _pseudo = 'none', autoComplete, autoGrow, className, inlineElement, label, size = 'lg', ...inputProps }, inputRef) => {
12
+ const Input = forwardRef(({ _pseudo = 'none', autoComplete, autoGrow, className, inlineElement, label, size = 'lg', variant = 'solid', ...inputProps }, inputRef) => {
13
13
  const [props, ref] = useContextProps(inputProps, inputRef, InputContext);
14
14
  const { defaultValue, onChange, value: controlledValue } = props;
15
15
  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
@@ -18,13 +18,13 @@ const Input = forwardRef(({ _pseudo = 'none', autoComplete, autoGrow, className,
18
18
  const handleChange = (event) => isControlled
19
19
  ? onChange?.(event)
20
20
  : setUncontrolledValue(event.target.value);
21
- return (jsx("div", { className: clsx(className, styles['input-container'], styles[size], styles[_pseudo]), children: jsxs("div", { className: clsx(styles.input, {
21
+ return (jsx("div", { className: clsx(className, styles['input-container'], styles[size], styles[_pseudo], styles[variant]), children: jsxs("div", { className: clsx(styles.input, {
22
22
  [styles['growing-input']]: autoGrow,
23
- }), children: [jsx(Input$1, { "aria-label": label, "auto-complete": autoComplete, size: autoGrow ? 1 : undefined, ...props, ref: ref, onChange: handleChange, onClick: e => {
23
+ }), children: [jsx(Input$1, { ...props, ref: ref, "aria-label": label, "auto-complete": autoComplete, onChange: handleChange, onClick: e => {
24
24
  e.preventDefault();
25
25
  e.stopPropagation();
26
26
  e.target.focus();
27
- } }), inlineElement && (jsx("div", { className: styles['inline-element'], children: inlineElement })), autoGrow && jsx("span", { className: styles['shadow-input'], children: value })] }) }));
27
+ }, size: autoGrow ? 1 : undefined }), inlineElement && (jsx("div", { className: styles['inline-element'], children: inlineElement })), autoGrow && jsx("span", { className: styles['shadow-input'], children: value })] }) }));
28
28
  });
29
29
  Input.displayName = 'Input';
30
30
 
@@ -1,3 +1,3 @@
1
- var styles = {"input-container":"input-module-2woJR","shadow-input":"input-module-pNKEt","lg":"input-module-Dx2qC","md":"input-module-sH6e7","focus":"input-module-hEEuy","growing-input":"input-module-6HwY4","inline-element":"input-module-oeAz2","input":"input-module-zjVxG"};
1
+ var styles = {"input-container":"input-module-2woJR","solid":"input-module-uWZm6","outline":"input-module-i5PS-","shadow-input":"input-module-pNKEt","lg":"input-module-Dx2qC","md":"input-module-sH6e7","focus":"input-module-hEEuy","growing-input":"input-module-6HwY4","inline-element":"input-module-oeAz2","input":"input-module-zjVxG"};
2
2
 
3
3
  export { styles as default };
@@ -0,0 +1,2 @@
1
+ import { SingleLineTextFieldProps } from '../text-field/text-field';
2
+ export declare function PasswordField(props: Omit<SingleLineTextFieldProps, 'inlineElement' | 'type'> & {}): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,15 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { useState, useCallback } from 'react';
3
+ import { PasswordRevealToggle } from '../text-field/password-reveal-toggle/password-reveal-toggle.js';
4
+ import { TextField } from '../text-field/text-field.js';
5
+
6
+ function PasswordField(props) {
7
+ const [type, setType] = useState('_password');
8
+ const isPasswordInput = type === '_password';
9
+ const togglePasswordType = useCallback(() => {
10
+ setType(isPasswordInput ? 'text' : '_password');
11
+ }, [isPasswordInput]);
12
+ return (jsx(TextField, { ...props, inlineElement: jsx(PasswordRevealToggle, { onChange: togglePasswordType, showPassword: !isPasswordInput }), isMultiline: false, type: type }));
13
+ }
14
+
15
+ export { PasswordField };
@@ -0,0 +1,5 @@
1
+ import { SingleLineTextFieldProps } from '../text-field/text-field';
2
+ export declare function SearchField({ isDebounced, isLoading, onChange, value: _value, ...props }: Omit<SingleLineTextFieldProps, 'inlineElement' | 'type'> & {
3
+ isDebounced?: boolean;
4
+ isLoading?: boolean;
5
+ }): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,19 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { useState } from 'react';
3
+ import { StrokeSearchIcon } from '../../icons/stroke/stroke-search-icon.js';
4
+ import { ProgressCircle } from '../../loading/progress-circle.js';
5
+ import { useDebouncedCallback } from '../../shared/hooks/use-debounced-callback.js';
6
+ import { TextField } from '../text-field/text-field.js';
7
+
8
+ function SearchField({ isDebounced = false, isLoading = false, onChange, value: _value, ...props }) {
9
+ const [inputValue, setInputValue] = useState(_value);
10
+ const onChangeDebounced = useDebouncedCallback((...args) => onChange?.(...args), 300);
11
+ return (jsx(TextField, { ...props, inlineElement: isLoading ? (jsx(ProgressCircle, { size: "sm", variant: "gray" })) : (jsx(StrokeSearchIcon, {})), isMultiline: false, onChange: isDebounced
12
+ ? (...args) => {
13
+ onChangeDebounced(...args);
14
+ setInputValue(...args);
15
+ }
16
+ : onChange, role: "searchbox", type: "_search", value: isDebounced ? inputValue : _value }));
17
+ }
18
+
19
+ export { SearchField };
@@ -1,48 +1,49 @@
1
1
  import { FocusEvent, FormEventHandler } from 'react';
2
2
  import { ValidateFunction } from '../field-error/field-error';
3
3
  interface TextFieldPropsBase {
4
- autoGrow?: boolean;
5
- 'data-test-selector'?: string;
6
- inputMode?: 'text' | 'tel' | 'search' | 'email' | 'url';
7
- label: string;
8
- placeholder?: string;
9
- size?: 'md' | 'lg';
10
- value?: string;
11
- }
12
- interface SingleLineProps extends TextFieldPropsBase {
13
- isMultiline?: false;
14
- onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
15
- pattern?: string;
16
- rows?: never;
17
- type?: 'text' | 'email' | 'password';
18
- }
19
- interface MultiLineProps extends TextFieldPropsBase {
20
- isMultiline: true;
21
- onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void;
22
- pattern?: never;
23
- rows?: number;
24
- type?: never;
25
- }
26
- export type TextFieldProps = (SingleLineProps | MultiLineProps) & {
27
4
  autoComplete?: string;
28
5
  autoFocus?: boolean;
6
+ autoGrow?: boolean;
29
7
  className?: string;
30
8
  customErrorMessage?: string;
9
+ 'data-test-selector'?: string;
31
10
  defaultValue?: string;
32
11
  info?: string | React.ReactNode;
12
+ inputMode?: 'text' | 'tel' | 'search' | 'email' | 'url';
33
13
  isDisabled?: boolean;
34
14
  isInvalid?: boolean;
35
15
  isReadOnly?: boolean;
36
16
  isRequired?: boolean;
17
+ label: string;
37
18
  maxLength?: number;
38
19
  minLength?: number;
39
20
  name?: string;
40
21
  onChange?: (value: string) => void;
41
22
  onInput?: FormEventHandler<HTMLInputElement>;
42
23
  onKeyUp?: (e: React.KeyboardEvent) => void;
24
+ placeholder?: string;
25
+ role?: string;
43
26
  showLabel?: boolean;
27
+ size?: 'md' | 'lg';
44
28
  validate?: ValidateFunction<string>;
45
29
  value?: string;
46
- };
30
+ variant?: 'solid' | 'outline';
31
+ }
32
+ export interface SingleLineTextFieldProps extends TextFieldPropsBase {
33
+ inlineElement?: React.ReactNode;
34
+ isMultiline?: false;
35
+ onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
36
+ pattern?: string;
37
+ rows?: never;
38
+ type?: 'text' | 'email' | '_search' | '_password';
39
+ }
40
+ export interface MultiLineTextFieldProps extends TextFieldPropsBase {
41
+ isMultiline: true;
42
+ onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void;
43
+ pattern?: never;
44
+ rows?: number;
45
+ type?: never;
46
+ }
47
+ export type TextFieldProps = SingleLineTextFieldProps | MultiLineTextFieldProps;
47
48
  export declare function TextField(props: TextFieldProps): import("react/jsx-runtime").JSX.Element;
48
49
  export {};
@@ -1,6 +1,5 @@
1
1
  "use client";
2
2
  import { jsx } from 'react/jsx-runtime';
3
- import { useState, useCallback } from 'react';
4
3
  import { TextField as TextField$1 } from 'react-aria-components';
5
4
  import clsx from 'clsx';
6
5
  import { InfoIconTooltip } from '../../info-icon-tooltip/info-icon-tooltip.js';
@@ -9,25 +8,19 @@ import { FormFieldLayout } from '../form/form-field-layout.js';
9
8
  import { Input } from '../input/input.js';
10
9
  import { Label } from '../label/label.js';
11
10
  import { TextArea } from '../textarea/textarea.js';
12
- import { PasswordRevealToggle } from './password-reveal-toggle/password-reveal-toggle.js';
13
11
  import styles from './text-field.module.css.js';
14
12
 
15
- function SingleLineInput({ autoGrow, 'data-test-selector': dataTestSelector, inputMode, label, onBlur, pattern, placeholder, size, type: defaultType = 'text', value, }) {
16
- const [type, setType] = useState(defaultType);
17
- const isPasswordInput = type === 'password';
18
- const togglePasswordType = useCallback(() => {
19
- setType(isPasswordInput ? 'text' : 'password');
20
- }, [isPasswordInput]);
21
- return (jsx(Input, { autoGrow: autoGrow, "data-test-selector": dataTestSelector, inlineElement: defaultType === 'password' && (jsx(PasswordRevealToggle, { onChange: togglePasswordType, showPassword: !isPasswordInput })), inputMode: inputMode, label: label, onBlur: onBlur, pattern: pattern, placeholder: placeholder, size: size, type: type, value: value }));
13
+ function SingleLineInput({ autoGrow, 'data-test-selector': dataTestSelector, inlineElement, inputMode, label, onBlur, pattern, placeholder, role, size, type = 'text', value, variant, }) {
14
+ return (jsx(Input, { autoGrow: autoGrow, "data-test-selector": dataTestSelector, inlineElement: inlineElement, inputMode: inputMode, label: label, onBlur: onBlur, pattern: pattern, placeholder: placeholder, role: role, size: size, type: type.replace(/^_/, ''), value: value, variant: variant }));
22
15
  }
23
- function MultiLineInput({ autoGrow, 'data-test-selector': dataTestSelector, inputMode, label, onBlur, placeholder, size, value, }) {
24
- return (jsx(TextArea, { autoGrow: autoGrow, "data-test-selector": dataTestSelector, inputMode: inputMode, label: label, onBlur: onBlur, placeholder: placeholder, size: size, value: value }));
16
+ function MultiLineInput({ autoGrow, 'data-test-selector': dataTestSelector, inputMode, label, onBlur, placeholder, role, size, value, variant, }) {
17
+ return (jsx(TextArea, { autoGrow: autoGrow, "data-test-selector": dataTestSelector, inputMode: inputMode, label: label, onBlur: onBlur, placeholder: placeholder, role: role, size: size, value: value, variant: variant }));
25
18
  }
26
19
  function TextField(props) {
27
- const { autoComplete, autoFocus, autoGrow, className, customErrorMessage, 'data-test-selector': dataTestSelector, defaultValue, info, inputMode, isDisabled, isInvalid, isMultiline, isReadOnly, isRequired, label, maxLength, minLength, name, onBlur, onChange, onInput, onKeyUp, placeholder, showLabel = true, size = 'lg', validate, value, } = props;
28
- return (jsx(TextField$1, { autoComplete: autoComplete, autoFocus: autoFocus, className: clsx(styles['text-field'], className), defaultValue: defaultValue, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxLength: maxLength, minLength: minLength, name: name, onChange: value => onChange?.(value), onInput: onInput, onKeyUp: onKeyUp, validate: validate, value: value, children: jsx(FormFieldLayout, { errorSlot: jsx(FieldError, { children: isInvalid && customErrorMessage }), infoSlot: info && jsx(InfoIconTooltip, { children: info }), labelSlot: showLabel && jsx(Label, { isRequired: isRequired, children: label }), children: isMultiline ? (jsx(MultiLineInput, { isMultiline: true, autoGrow: autoGrow, "data-test-selector": dataTestSelector, inputMode: inputMode, label: label, onBlur: onBlur, placeholder: placeholder, size: size })) : (jsx(SingleLineInput, { autoGrow: autoGrow, "data-test-selector": dataTestSelector, inputMode: inputMode, label: label, onBlur: onBlur,
20
+ const { autoComplete, autoFocus, autoGrow, className, customErrorMessage, 'data-test-selector': dataTestSelector, defaultValue, info, inputMode, isDisabled, isInvalid, isMultiline, isReadOnly, isRequired, label, maxLength, minLength, name, onBlur, onChange, onInput, onKeyUp, pattern, placeholder, role, showLabel = true, size = 'lg', validate, value, variant = 'solid', } = props;
21
+ return (jsx(TextField$1, { "aria-label": label, autoComplete: autoComplete, autoFocus: autoFocus, className: clsx(styles['text-field'], className), defaultValue: defaultValue, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxLength: maxLength, minLength: minLength, name: name, onChange: value => onChange?.(value), onInput: onInput, onKeyUp: onKeyUp, validate: validate, value: value, children: jsx(FormFieldLayout, { errorSlot: jsx(FieldError, { children: isInvalid && customErrorMessage }), infoSlot: info && jsx(InfoIconTooltip, { children: info }), labelSlot: showLabel && jsx(Label, { isRequired: isRequired, children: label }), children: isMultiline ? (jsx(MultiLineInput, { isMultiline: true, autoGrow: autoGrow, "data-test-selector": dataTestSelector, inputMode: inputMode, label: label, onBlur: onBlur, placeholder: placeholder, role: role, size: size, variant: variant })) : (jsx(SingleLineInput, { autoGrow: autoGrow, "data-test-selector": dataTestSelector,
29
22
  // eslint-disable-next-line unicorn/consistent-destructuring
30
- pattern: props.pattern, placeholder: placeholder, size: size, type: props.type })) }) }));
23
+ inlineElement: props.inlineElement, inputMode: inputMode, label: label, onBlur: onBlur, pattern: pattern, placeholder: placeholder, role: role, size: size, type: props.type, variant: variant })) }) }));
31
24
  }
32
25
 
33
26
  export { TextField };
@@ -6,6 +6,7 @@ export interface TextAreaProps extends Omit<ComponentProps<typeof AriaTextArea>,
6
6
  'data-test-selector'?: string;
7
7
  label: string;
8
8
  size?: 'md' | 'lg';
9
+ variant?: 'solid' | 'outline';
9
10
  }
10
11
  /**
11
12
  * This component is used to create a textarea that can grow as the user types.
@@ -11,7 +11,7 @@ import styles from './textarea.module.css.js';
11
11
  * The initial height is calculated based on the style of the textarea.
12
12
  * The height is updated everytime the user types.
13
13
  */
14
- const TextArea = forwardRef(({ autoGrow, className, label, size, ...textAreaProps }, _ref) => {
14
+ const TextArea = forwardRef(({ autoGrow, className, label, size, variant = 'solid', ...textAreaProps }, _ref) => {
15
15
  const textAreaRef = useRef(null);
16
16
  const [props, ref] = useContextProps(textAreaProps, textAreaRef, TextAreaContext);
17
17
  const initialHeight = useRef(null);
@@ -41,7 +41,7 @@ const TextArea = forwardRef(({ autoGrow, className, label, size, ...textAreaProp
41
41
  }
42
42
  updateHeight();
43
43
  }, [ref, autoGrow, updateHeight, size]);
44
- return (jsx(Fragment, { children: jsx("div", { className: clsx(className, styles['input-container']), children: jsx(TextArea$1, { "aria-label": label, ...textAreaProps, ref: node => {
44
+ return (jsx(Fragment, { children: jsx("div", { className: clsx(className, styles['input-container'], styles[variant]), children: jsx(TextArea$1, { "aria-label": label, ...textAreaProps, ref: node => {
45
45
  ref.current =
46
46
  node;
47
47
  return (textAreaRef.current = node);
@@ -1,3 +1,3 @@
1
- var styles = {"input-container":"textarea-module-C6Xr1"};
1
+ var styles = {"input-container":"textarea-module-C6Xr1","solid":"textarea-module-NgOND","outline":"textarea-module-Z-ytQ","lg":"textarea-module-vksG-","md":"textarea-module-6JrQJ"};
2
2
 
3
3
  export { styles as default };
@@ -1,3 +1,4 @@
1
+ import { JSX } from 'react';
1
2
  import { HighlightedHit } from '@algolia/autocomplete-preset-algolia';
2
3
  type HighlightHitParams<THit> = {
3
4
  /**
@@ -8,7 +8,7 @@ import { useFetchSession } from '../../../shared/api/storefront/hooks/authentica
8
8
  function ConnectedAccountButton({ className, 'data-test-selector': dataTestSelector, href, onClick, }) {
9
9
  const t = useFormattedMessage();
10
10
  const { data: { isAuthenticated } = {} } = useFetchSession();
11
- return (jsx(IconButton, { className: className, "data-authenticated": isAuthenticated ? true : false, "data-test-selector": dataTestSelector, href: href, onClick: onClick, children: jsx(AccountIcon, { "aria-label": isAuthenticated ? t('My account') : t('Sign in or create account'), isAuthenticated: isAuthenticated }) }));
11
+ return (jsx(IconButton, { className: className, "data-authenticated": isAuthenticated ? true : false, "data-test-selector": dataTestSelector, href: href, onClick: onClick, children: jsx(AccountIcon, { "aria-label": isAuthenticated ? t('My Sonic') : t('Sign in or create account'), isAuthenticated: isAuthenticated }) }));
12
12
  }
13
13
 
14
14
  export { ConnectedAccountButton };
@@ -0,0 +1,7 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+
3
+ function SolidRatingIcon(props) {
4
+ return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M21.1731743,8.62913585 L15.9350796,8.62913585 C15.235774,8.62913585 14.620799,8.18475073 14.4047967,7.52309384 L12.7860731,2.56808619 C12.6749514,2.22832462 12.3590917,2 12,2 C11.6404539,2 11.3245943,2.22877885 11.2139292,2.56808619 L9.59520561,7.52324525 C9.37920327,8.18475073 8.76422834,8.62913585 8.0650749,8.62913585 L2.826828,8.62913585 C2.46758522,8.62913585 2.15172557,8.85746047 2.04075608,9.19722205 C1.92978659,9.53698362 2.05049826,9.90642133 2.34108914,10.1161227 L6.57878399,13.1786705 C7.14443916,13.5874745 7.37946918,14.3066668 7.16331462,14.9680208 L5.54474322,19.9231799 C5.43362151,20.2629415 5.55418095,20.6322278 5.84461961,20.8422319 C6.13536271,21.0525389 6.52565868,21.0525389 6.81640178,20.8423833 L11.0540966,17.7801383 C11.6197518,17.3711829 12.3800983,17.3708801 12.9457535,17.7801383 L17.1834483,20.8423833 C17.3286676,20.9473097 17.4990035,21 17.6693394,21 C17.8395231,21 18.0097067,20.9474611 18.154926,20.8426862 C18.4455169,20.6328334 18.5663808,20.2636985 18.4554113,19.9233313 L16.8368399,14.9680208 C16.6206854,14.3066668 16.8555632,13.5876259 17.4212183,13.1786705 L21.658761,10.1162741 C21.9495041,9.90657274 22.0702157,9.53713502 21.9592462,9.19737345 C21.8482767,8.85761188 21.5324171,8.62913585 21.1731743,8.62913585 Z", fillRule: "evenodd" }) }));
5
+ }
6
+
7
+ export { SolidRatingIcon };
package/dist/index.js CHANGED
@@ -104,6 +104,8 @@ export { FormSegmentGroup } from './forms/form/form-segment-group.js';
104
104
  export { Input } from './forms/input/input.js';
105
105
  export { Label } from './forms/label/label.js';
106
106
  export { NumberField } from './forms/number-field/number-field.js';
107
+ export { PasswordField } from './forms/password-field/password-field.js';
108
+ export { SearchField } from './forms/search-field/search-field.js';
107
109
  export { SelectField } from './forms/select-field/select-field.js';
108
110
  export { Select } from './forms/select/select.js';
109
111
  export { SwitchField } from './forms/switch-field/switch-field.js';
@@ -231,20 +233,24 @@ export { PageMetaData } from './pages/components/page-meta-data/page-meta-data.j
231
233
  export { Page } from './pages/components/page/page.js';
232
234
  export { ErrorPage } from './pages/error-page/error-page.js';
233
235
  export { LoadingPage } from './pages/loading-page/loading-page.js';
234
- export { ConnectedMyAccountNavigation } from './pages/my-account/navigation/connected-my-account-navigation.js';
235
- export { MyAccountDesktopNavigation } from './pages/my-account/navigation/my-account-desktop-navigation.js';
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';
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';
241
- export { ConnectedUserAccountWidget } from './pages/my-account/widgets/connected-user-account-widget.js';
236
+ export { ChangeCustomer } from './pages/my-sonic/actions/change-customer/change-customer.js';
237
+ export { ChangeCustomerDialog } from './pages/my-sonic/actions/change-customer/change-customer-dialog.js';
238
+ export { ConnectedChangeCustomerDialog } from './pages/my-sonic/actions/change-customer/connected-change-customer-dialog.js';
239
+ export { ConnectedMySonicNavigation } from './pages/my-sonic/navigation/connected-my-sonic-navigation.js';
240
+ export { MySonicDesktopNavigation } from './pages/my-sonic/navigation/my-sonic-desktop-navigation.js';
241
+ export { MySonicMobileNavigation } from './pages/my-sonic/navigation/my-sonic-mobile-navigation.js';
242
+ export { mySonicNavigationItems } from './pages/my-sonic/navigation/my-sonic-navigation-items.js';
243
+ export { AddressDataCard } from './pages/my-sonic/widgets/components/address-data-card.js';
244
+ export { ConnectedBillToAddressWidget } from './pages/my-sonic/widgets/connected-bill-to-address-widget.js';
245
+ export { ConnectedCustomerInformationWidget } from './pages/my-sonic/widgets/connected-customer-information-widget.js';
246
+ export { ConnectedShipToAddressWidget } from './pages/my-sonic/widgets/connected-ship-to-address-widget.js';
247
+ export { ConnectedUserAccountWidget } from './pages/my-sonic/widgets/connected-user-account-widget.js';
242
248
  export { PATHS } from './pages/paths.js';
243
249
  export { ProductOverview } from './pages/product/components/product-overview.js';
244
250
  export { ProductDetailsPageLayout } from './pages/product/layouts/product-details-page-layout/product-details-page-layout.js';
245
251
  export { ProductDetailImages } from './pages/product/product-details-page/components/product-details-images/product-detail-images.js';
246
252
  export { ProductDetailsPanel } from './pages/product/product-details-page/components/product-details-panel/product-details-panel.js';
247
- export { ProductDetailsRecentlyViewed } from './pages/product/product-details-page/components/product-details-recently-viewed/product-details-recently-viewed.js';
253
+ export { ProductDetailsRecentlyViewedSection } from './pages/product/product-details-page/components/product-details-recently-viewed-section/product-details-recently-viewed-section.js';
248
254
  export { ProductDetails } from './pages/product/product-details-page/product-details.js';
249
255
  export { ProductDetailsPage } from './pages/product/product-details-page/product-details-page.js';
250
256
  export { NoResults } from './pages/product/product-listing-page/no-results/no-results.js';
@@ -264,7 +270,8 @@ export { useFetchAnnouncements } from './shared/api/bff/hooks/use-fetch-announce
264
270
  export { useFetchNavigationLinks } from './shared/api/bff/hooks/use-fetch-navigation-links.js';
265
271
  export { useFetchProductDetailsPageData } from './shared/api/bff/hooks/use-fetch-product-details-page-data.js';
266
272
  export { useFetchProductListingPageData } from './shared/api/bff/hooks/use-fetch-product-listing-page-data.js';
267
- export { fetchAnnouncements, fetchNavigationLinks, fetchProductDetailsPageData, fetchProductListingPageData } from './shared/api/bff/services/bff-service.js';
273
+ export { useFetchRecentlyViewedProducts } from './shared/api/bff/hooks/use-fetch-recently-viewed-products.js';
274
+ export { fetchAnnouncements, fetchNavigationLinks, fetchProductDetailsPageData, fetchProductListingPageData, fetchRecentlyViewedProducts } from './shared/api/bff/services/bff-service.js';
268
275
  export { useAwaitableMutation } from './shared/api/shared/hooks/use-awaitable-mutation.js';
269
276
  export { useCreateAccount } from './shared/api/storefront/hooks/authentication/use-create-account.js';
270
277
  export { useCreateGuestAccount } from './shared/api/storefront/hooks/authentication/use-create-guest-account.js';
@@ -302,6 +309,7 @@ export { usePatchBillToAddress } from './shared/api/storefront/hooks/customer/us
302
309
  export { useCreateAdyenSession } from './shared/api/storefront/hooks/payment/use-create-adyen-session.js';
303
310
  export { useFetchAdyenConfig } from './shared/api/storefront/hooks/payment/use-fetch-adyen-config.js';
304
311
  export { useInvalidateAdyen } from './shared/api/storefront/hooks/payment/use-invalidate-adyen.js';
312
+ export { useMarkProductAsRecentlyViewed } from './shared/api/storefront/hooks/product/use-mark-product-as-viewed.js';
305
313
  export { useFetchTranslations } from './shared/api/storefront/hooks/translation/use-fetch-translations.js';
306
314
  export { useFetchCountriesLanguages } from './shared/api/storefront/hooks/website/use-fetch-countries-languages.js';
307
315
  export { useFetchCountriesWithLanguages } from './shared/api/storefront/hooks/website/use-fetch-countries-with-languages.js';
@@ -319,6 +327,7 @@ export { addProductToCurrentCart, convertToMinorUnits, deleteCartLineById, delet
319
327
  export { fetchBillToAddresses, fetchCurrentBillToAddress, fetchCurrentShipToAddress, fetchFulfillmentMethods, fetchShipToAddresses, patchBillToAddress } from './shared/api/storefront/services/customer-service.js';
320
328
  export { validateVATNumber } from './shared/api/storefront/services/finance-service.js';
321
329
  export { createAdyenSession, fetchAdyenConfig } from './shared/api/storefront/services/payment-service.js';
330
+ export { markProductAsRecentlyViewed } from './shared/api/storefront/services/product-service.js';
322
331
  export { fetchTranslations } from './shared/api/storefront/services/translation-service.js';
323
332
  export { fetchCountriesLanguages, fetchCountriesWithLanguages, fetchSettings, updateLocale } from './shared/api/storefront/services/website-service.js';
324
333
  export { WishListNameAlreadyExistsError, addWishListItemToWishList, createWishList, deleteWishList, deleteWishListItemFromWishList, getWishList, getWishListItemsByWishListId, getWishLists } from './shared/api/storefront/services/wishlist-service.js';
@@ -389,6 +398,7 @@ export { Sidebar } from './sidebar/sidebar.js';
389
398
  export { SidebarDetectBreakpoint, SidebarProvider } from './sidebar/sidebar-provider.js';
390
399
  export { ToggleSidebarButton } from './sidebar/toggle-sidebar-button.js';
391
400
  export { useSidebar, useSidebarActions } from './sidebar/use-sidebar.js';
401
+ export { HighlightText } from './text/highlight-text/highlight-text.js';
392
402
  export { Toast } from './toast/toast.js';
393
403
  export { ToastProvider } from './toast/toast-provider.js';
394
404
  export { useToast } from './toast/use-toast.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' | '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';
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.' | 'Account' | 'Access denied.' | 'Add order notes' | 'Add to list' | 'Address 1' | 'Address 2' | 'Address 3' | 'Address 4' | 'Address' | 'Amount: {0}' | 'An error occurred while changing the customer.' | 'An error occurred while fetching customers. Please try again later.' | '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 address' | 'Billing and shipping address' | 'Billing and shipping information' | 'Billing' | 'Cancel' | 'Cart' | 'Change customer' | '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 billing address' | 'Edit shipping address' | 'Edit' | '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 Sonic' | 'Name' | 'Navigate to...' | 'Navigation' | 'New list name' | 'New user?' | 'No results found. Please refine your search.' | '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 for a customer' | '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 customer' | 'Selected customer' | '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 more customers, please refine your search if needed.' | '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 are not authorized to access this information.' | 'You are not authorized to view customers. Please log in or contact support.' | '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';
@@ -3,6 +3,7 @@ import { Form as AriaForm } from 'react-aria-components';
3
3
  import { ModalProps } from '../modal/modal';
4
4
  interface DialogProps extends Omit<ModalProps, 'children' | 'className'> {
5
5
  allowClose?: boolean;
6
+ allowSubmit?: boolean;
6
7
  cancelLabel?: string;
7
8
  children?: ReactNode | ((props: {
8
9
  close: VoidFunction;
@@ -20,15 +21,18 @@ interface DialogProps extends Omit<ModalProps, 'children' | 'className'> {
20
21
  'data-test-selector'?: string;
21
22
  footer?: ReactNode | ((props: DialogFooterProps) => ReactNode);
22
23
  hideTitle?: boolean;
24
+ isSubmitting?: boolean;
23
25
  onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
24
26
  submitLabel?: string;
25
27
  title: string;
26
28
  validationErrors?: ComponentProps<typeof AriaForm>['validationErrors'];
27
29
  }
28
30
  interface DialogFooterProps {
31
+ allowSubmit?: boolean;
29
32
  cancelLabel: string;
30
33
  close: VoidFunction;
34
+ isSubmitting?: boolean;
31
35
  submitLabel: string;
32
36
  }
33
- export declare function Dialog({ allowClose, cancelLabel, children, className, 'data-test-selector': dataTestSelector, footer, hasCloseButton, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, shouldCloseOnInteractOutside, submitLabel, title, validationErrors, }: DialogProps): import("react/jsx-runtime").JSX.Element;
37
+ export declare function Dialog({ allowClose, allowSubmit, cancelLabel, children, className, 'data-test-selector': dataTestSelector, footer, hasCloseButton, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, isSubmitting, onOpenChange, onSubmit, shouldCloseOnInteractOutside, submitLabel, title, validationErrors, }: DialogProps): import("react/jsx-runtime").JSX.Element;
34
38
  export {};
@@ -11,10 +11,10 @@ import { Heading } from '../../typography/heading/heading.js';
11
11
  import { Modal } from '../modal/modal.js';
12
12
  import styles from './dialog.module.css.js';
13
13
 
14
- function Footer({ cancelLabel, close, submitLabel }) {
15
- return (jsxs(Fragment, { children: [jsx(Button, { withArrow: true, color: "primary", "data-test-selector": "dialogSubmit", size: "md", type: "submit", children: jsx(FormattedMessage, { id: submitLabel }) }), jsx(Button, { color: "secondary", "data-test-selector": "dialogCancel", onClick: close, size: "md", variant: "outline", children: jsx(FormattedMessage, { id: cancelLabel }) })] }));
14
+ function Footer({ allowSubmit = true, cancelLabel, close, isSubmitting, submitLabel, }) {
15
+ return (jsxs(Fragment, { children: [jsx(Button, { withArrow: true, color: "primary", "data-test-selector": "dialogSubmit", isDisabled: !allowSubmit, isLoading: isSubmitting ? jsx(FormattedMessage, { id: "Submitting\u2026" }) : undefined, size: "md", type: "submit", children: jsx(FormattedMessage, { id: submitLabel }) }), jsx(Button, { color: "secondary", "data-test-selector": "dialogCancel", onClick: close, size: "md", variant: "outline", children: jsx(FormattedMessage, { id: cancelLabel }) })] }));
16
16
  }
17
- function Dialog({ allowClose = true, cancelLabel = 'Close', children, className, 'data-test-selector': dataTestSelector = 'dialog', footer = Footer, hasCloseButton = true, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, shouldCloseOnInteractOutside, submitLabel = 'Submit', title, validationErrors, }) {
17
+ function Dialog({ allowClose = true, allowSubmit = true, cancelLabel = 'Close', children, className, 'data-test-selector': dataTestSelector = 'dialog', footer = Footer, hasCloseButton = true, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, isSubmitting = false, onOpenChange, onSubmit, shouldCloseOnInteractOutside, submitLabel = 'Submit', title, validationErrors, }) {
18
18
  const t = useFormattedMessage();
19
19
  return (jsx(Modal, { className: clsx(styles['modal-overlay'], typeof className === 'string' ? className : className?.modal), hasCloseButton: false, isDismissable: isDismissable, isFullScreen: isFullScreen, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, shouldCloseOnInteractOutside: shouldCloseOnInteractOutside, children: jsx(Dialog$1, { "aria-label": title, className: clsx(styles.dialog, typeof className === 'string' ? undefined : className?.dialog), "data-test-selector": dataTestSelector, children: ({ close }) => (jsxs(Form, { className: clsx(styles.form, typeof className === 'string' ? undefined : className?.form), onSubmit: e => {
20
20
  e.preventDefault();
@@ -25,7 +25,13 @@ function Dialog({ allowClose = true, cancelLabel = 'Close', children, className,
25
25
  : className?.heading), size: "xs", tag: "h2", children: title })), hasCloseButton && (jsx("div", { className: clsx(styles.close, typeof className === 'string'
26
26
  ? undefined
27
27
  : className?.close), children: jsx(IconButton, { "aria-label": t('Close'), color: "secondary", isDisabled: !allowClose, onClick: close, children: jsx(StrokeCloseboxIcon, {}) }) }))] }), jsx("div", { className: clsx(styles.content, typeof className === 'string' ? undefined : className?.content), children: children instanceof Function ? children({ close }) : children }), jsx("footer", { className: clsx(styles.footer, typeof className === 'string' ? undefined : className?.footer), children: footer instanceof Function
28
- ? footer({ cancelLabel, close, submitLabel })
28
+ ? footer({
29
+ allowSubmit,
30
+ cancelLabel,
31
+ close,
32
+ isSubmitting,
33
+ submitLabel,
34
+ })
29
35
  : footer })] })) }) }));
30
36
  }
31
37
 
@@ -19,7 +19,7 @@ function MobileNavigation({ id, isActive, links, onActiveChange, }) {
19
19
  const t = useFormattedMessage();
20
20
  const { data: { isAuthenticated } = {} } = useFetchSession();
21
21
  const cartCount = useFetchCurrentCartCount();
22
- return (jsxs("section", { "aria-label": t('Main menu'), className: clsx(styles['mobile-navigation'], isActive && styles['active']), "data-test-selector": "mobileNavigationMenu", id: id, children: [jsxs("header", { className: styles['header'], children: [jsx("div", { className: styles['logo'], role: "presentation", children: jsx(SonicLogo, {}) }), jsx("div", { className: styles['hamburger'], children: jsx(HamburgerButton, { "aria-controls": "mobile-navigation", "data-test-selector": "mobileNavigationHamburgerButton", isActive: isActive, onActiveChange: onActiveChange }) })] }), jsx(PanelNavigation, { allowBack: true, className: styles['panels'], "data-test-selector": "mobileNavigationPanel", isNarrow: true, links: links, variant: "primary", children: jsxs(MenuList, { header: t('My Sonic'), scrollable: false, children: [jsx(MenuListItem, { badge: jsx(AccountIcon, { isAuthenticated: isAuthenticated }), "data-authenticated": isAuthenticated ? true : false, "data-test-selector": "mobileNavigationAccountButton", href: PATHS.ACCOUNT, children: isAuthenticated ? t('My account') : t('Sign in or create account') }), jsx(MenuListItem, { badge: jsx(FavoriteIcon, {}), "data-test-selector": "mobileNavigationFavoritesButton", href: PATHS.FAVORITES, children: t('Favorites') }), jsx(MenuListItem, { badge: jsx(CartIcon, { count: cartCount }), "data-count": cartCount, "data-test-selector": "mobileNavigationCartButton", href: PATHS.CART, children: t('Shopping cart') })] }) })] }));
22
+ return (jsxs("section", { "aria-label": t('Main menu'), className: clsx(styles['mobile-navigation'], isActive && styles['active']), "data-test-selector": "mobileNavigationMenu", id: id, children: [jsxs("header", { className: styles['header'], children: [jsx("div", { className: styles['logo'], role: "presentation", children: jsx(SonicLogo, {}) }), jsx("div", { className: styles['hamburger'], children: jsx(HamburgerButton, { "aria-controls": "mobile-navigation", "data-test-selector": "mobileNavigationHamburgerButton", isActive: isActive, onActiveChange: onActiveChange }) })] }), jsx(PanelNavigation, { allowBack: true, className: styles['panels'], "data-test-selector": "mobileNavigationPanel", isNarrow: true, links: links, variant: "primary", children: jsxs(MenuList, { header: t('My Sonic'), scrollable: false, children: [jsx(MenuListItem, { badge: jsx(AccountIcon, { isAuthenticated: isAuthenticated }), "data-authenticated": isAuthenticated ? true : false, "data-test-selector": "mobileNavigationAccountButton", href: PATHS.ACCOUNT, children: isAuthenticated ? t('My Sonic') : t('Sign in or create account') }), jsx(MenuListItem, { badge: jsx(FavoriteIcon, {}), "data-test-selector": "mobileNavigationFavoritesButton", href: PATHS.FAVORITES, children: t('Favorites') }), jsx(MenuListItem, { badge: jsx(CartIcon, { count: cartCount }), "data-count": cartCount, "data-test-selector": "mobileNavigationCartButton", href: PATHS.CART, children: t('Shopping cart') })] }) })] }));
23
23
  }
24
24
 
25
25
  export { MobileNavigation };