@sonic-equipment/ui 136.0.0 → 138.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.
- package/dist/algolia/algolia-categories-filters.js +1 -1
- package/dist/algolia/algolia-query-string-routing.js +4 -2
- package/dist/buttons/add-to-cart-button/add-to-cart-button.js +1 -1
- package/dist/buttons/link/link.d.ts +1 -2
- package/dist/buttons/link/link.js +4 -6
- package/dist/collapsables/accordion/accordion-item.js +1 -1
- package/dist/collapsables/accordion/accordion.module.css.js +1 -1
- package/dist/config.js +2 -2
- package/dist/country-selector/country-select/country-select.d.ts +6 -0
- package/dist/country-selector/country-select/country-select.js +10 -4
- package/dist/exports.d.ts +5 -1
- package/dist/footer/footer.js +1 -1
- package/dist/forms/textarea/textarea.js +1 -1
- package/dist/header/header.d.ts +1 -0
- package/dist/header/header.js +9 -0
- package/dist/index.js +5 -1
- package/dist/intl/translation-id.d.ts +1 -1
- package/dist/lists/orderline-list/orderline-list.js +1 -1
- package/dist/media/image/image.js +13 -6
- package/dist/message/message.d.ts +6 -0
- package/dist/message/message.js +19 -0
- package/dist/message/message.module.css.js +3 -0
- package/dist/pages/account/layouts/sign-in-page-layout/sign-in-page-layout.d.ts +8 -0
- package/dist/pages/account/layouts/sign-in-page-layout/sign-in-page-layout.js +12 -0
- package/dist/pages/account/layouts/sign-in-page-layout/sign-in-page-layout.module.css.js +3 -0
- package/dist/pages/account/sign-in-page/sign-in-page.d.ts +3 -0
- package/dist/pages/account/sign-in-page/sign-in-page.js +56 -0
- package/dist/pages/checkout/cart-page/cart-page.js +6 -6
- package/dist/pages/checkout/order-confirmation-page/order-confirmation-page-content.js +8 -2
- package/dist/pages/checkout/order-confirmation-page/order-confirmation-page.js +3 -3
- package/dist/pages/checkout/payment-page/components/adyen-payment.d.ts +2 -1
- package/dist/pages/checkout/payment-page/components/adyen-payment.js +8 -6
- package/dist/pages/checkout/payment-page/components/payment.d.ts +7 -3
- package/dist/pages/checkout/payment-page/components/payment.js +42 -43
- package/dist/pages/checkout/payment-page/payment-page-content.d.ts +3 -3
- package/dist/pages/checkout/payment-page/payment-page-content.js +7 -7
- package/dist/pages/checkout/payment-page/payment-page.js +7 -7
- package/dist/pages/checkout/shipping-page/components/edit-address.d.ts +1 -0
- package/dist/pages/checkout/shipping-page/components/edit-address.js +2 -1
- package/dist/pages/checkout/shipping-page/components/readonly-address.js +3 -3
- package/dist/pages/checkout/shipping-page/hooks/use-patch-shipping-details.d.ts +6 -2
- package/dist/pages/checkout/shipping-page/hooks/use-patch-shipping-details.js +27 -8
- package/dist/pages/checkout/shipping-page/shipping-page-content.js +4 -4
- package/dist/pages/checkout/shipping-page/shipping-page.js +8 -9
- package/dist/pages/components/page/page.d.ts +4 -2
- package/dist/pages/components/page/page.js +4 -6
- package/dist/pages/components/page-container/page-container.d.ts +5 -1
- package/dist/pages/components/page-container/page-container.js +3 -3
- package/dist/pages/components/page-container/page-container.module.css.js +1 -1
- package/dist/pages/error-page/error-page.js +4 -3
- package/dist/pages/{checkout/constants.d.ts → paths.d.ts} +4 -1
- package/dist/pages/{checkout/constants.js → paths.js} +5 -2
- package/dist/pages/product/product-details-page/product-details.js +1 -1
- package/dist/pages/product/product-listing-page/no-results/no-results.js +1 -1
- package/dist/pages/product/product-listing-page/product-listing.js +1 -1
- package/dist/pages/product/search-result-page/search-results-page.js +3 -1
- package/dist/shared/api/shared/hooks/use-awaitable-mutation.d.ts +21 -20
- package/dist/shared/api/storefront/hooks/authentication/use-create-guest-account.d.ts +1 -3
- package/dist/shared/api/storefront/hooks/authentication/use-create-guest-account.js +26 -11
- package/dist/shared/api/storefront/hooks/authentication/use-fetch-session.js +1 -0
- package/dist/shared/api/storefront/hooks/authentication/use-sign-in.d.ts +1 -0
- package/dist/shared/api/storefront/hooks/authentication/use-sign-in.js +4 -4
- package/dist/shared/api/storefront/hooks/cart/use-patch-cart.d.ts +1 -3
- package/dist/shared/api/storefront/hooks/cart/use-patch-cart.js +4 -6
- package/dist/shared/api/storefront/hooks/cart/use-place-order.d.ts +1 -1
- package/dist/shared/api/storefront/hooks/cart/use-place-order.js +6 -5
- package/dist/shared/api/storefront/services/authentication-service.d.ts +6 -7
- package/dist/shared/api/storefront/services/authentication-service.js +5 -3
- package/dist/shared/api/storefront/services/cart-service.js +7 -7
- package/dist/shared/api/storefront/services/translation-service.js +2 -1
- package/dist/shared/model/currency.d.ts +1 -28
- package/dist/shared/model/image.d.ts +4 -5
- package/dist/shared/routing/with-routing.js +1 -1
- package/dist/shared/utils/local-storage.d.ts +1 -1
- package/dist/shared/utils/local-storage.js +4 -5
- package/dist/shared/utils/price.d.ts +3 -37
- package/dist/sign-in-form/sign-in-form.d.ts +12 -6
- package/dist/sign-in-form/sign-in-form.js +9 -6
- package/dist/styles.css +400 -159
- package/package.json +1 -1
- package/dist/pages/components/page/page.module.css.js +0 -3
|
@@ -23,7 +23,7 @@ function AlgoliaCategoriesFilters() {
|
|
|
23
23
|
return null;
|
|
24
24
|
return (jsx(FilterSection, { title: t('facet.categories'), variant: "default", children: categories.map(category => (jsx(Fragment, { children: jsx("div", { className: filterSectionStyles['filter-section-item'], children: jsxs(Link, { hasUnderline: true, className: clsx(styles.category, {
|
|
25
25
|
[styles['is-active']]: category.isRefined,
|
|
26
|
-
}), onClick: () => refine(category.value), children: [jsx(StrokeCategoriesIcon, { height: 24, width: 24 }), jsx("span", { children: category.label }), jsxs("span", { className: styles.count, children: ["(", category.count, ")"] })] }) }) }, category.value))) }));
|
|
26
|
+
}), color: "primary", onClick: () => refine(category.value), children: [jsx(StrokeCategoriesIcon, { height: 24, width: 24 }), jsx("span", { children: category.label }), jsxs("span", { className: styles.count, children: ["(", category.count, ")"] })] }) }) }, category.value))) }));
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
export { AlgoliaCategoriesFilters };
|
|
@@ -45,8 +45,10 @@ function createQueryStringRouting({ algoliaIndex, hierarchicalCategories, }) {
|
|
|
45
45
|
allowDots: true,
|
|
46
46
|
duplicates: 'combine',
|
|
47
47
|
});
|
|
48
|
-
const refinementList = Object.
|
|
49
|
-
refinementList[filter] = [
|
|
48
|
+
const refinementList = Object.entries(queryString.filters || {}).reduce((refinementList, [filter, value]) => {
|
|
49
|
+
refinementList[filter] = [value && String(value)]
|
|
50
|
+
.flat()
|
|
51
|
+
.filter(Boolean);
|
|
50
52
|
return refinementList;
|
|
51
53
|
}, {});
|
|
52
54
|
const hierarchicalMenu = hierarchicalCategories
|
|
@@ -99,7 +99,7 @@ function ManualInputState({ isDisabled, onCancel, onConfirm, quantity, }) {
|
|
|
99
99
|
maximumFractionDigits: 0,
|
|
100
100
|
style: 'decimal',
|
|
101
101
|
useGrouping: false,
|
|
102
|
-
}, isDisabled: isDisabled, label: "Quantity", maxLength: 4, maxValue: 9999, minValue: 0, name: "quantity", onChange: value => setQuantity(String(value)), onKeyUp: onKeyUp, showLabel: false, size: "md" }), jsx(Button, { condensed: true, isDisabled: isDisabled, onClick: e => {
|
|
102
|
+
}, isDisabled: isDisabled, label: "Quantity", maxLength: 4, maxValue: 9999, minValue: 0, name: "quantity", onChange: value => setQuantity(String(value)), onKeyUp: onKeyUp, showLabel: false, size: "md" }), jsx(Button, { condensed: true, "data-test-selector": "confirm", isDisabled: isDisabled, onClick: e => {
|
|
103
103
|
e.preventDefault();
|
|
104
104
|
e.stopPropagation();
|
|
105
105
|
onConfirm(ensureNumber(updatedQuantity));
|
|
@@ -2,9 +2,8 @@ import { AnchorHTMLAttributes } from 'react';
|
|
|
2
2
|
export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
3
3
|
areaSelected?: boolean;
|
|
4
4
|
color?: 'primary' | 'secondary';
|
|
5
|
-
currentColor?: boolean;
|
|
6
5
|
hasUnderline?: boolean;
|
|
7
6
|
isDisabled?: boolean;
|
|
8
7
|
role?: 'option';
|
|
9
8
|
}
|
|
10
|
-
export declare function Link({ children, className, color,
|
|
9
|
+
export declare function Link({ children, className, color, hasUnderline, isDisabled, onClick, onKeyUp, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -3,13 +3,11 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import styles from './link.module.css.js';
|
|
5
5
|
|
|
6
|
-
function Link({ children, className, color
|
|
6
|
+
function Link({ children, className, color, hasUnderline, isDisabled, onClick, onKeyUp, ...props }) {
|
|
7
7
|
return (jsx("a", { className: clsx({
|
|
8
|
-
[styles.hover]: Boolean(props.href),
|
|
9
|
-
[styles['has-underline']]: hasUnderline
|
|
10
|
-
|
|
11
|
-
[styles['current-color']]: currentColor,
|
|
12
|
-
}, styles['link'], className), "data-disabled": isDisabled ? true : undefined, onClick: onClick, onKeyUp: onKeyUp, role: "link", tabIndex: isDisabled ? -1 : 0, ...props, children: children }));
|
|
8
|
+
[styles.hover]: Boolean(props.href || onClick),
|
|
9
|
+
[styles['has-underline']]: hasUnderline,
|
|
10
|
+
}, styles['link'], color && styles[color], className), "data-disabled": isDisabled ? true : undefined, onClick: onClick, onKeyUp: onKeyUp, role: "link", tabIndex: isDisabled ? -1 : 0, ...props, children: children }));
|
|
13
11
|
}
|
|
14
12
|
|
|
15
13
|
export { Link };
|
|
@@ -19,7 +19,7 @@ function AccordionItem({ _pseudo = 'none', allowCollapse = true, allowToggle = t
|
|
|
19
19
|
}
|
|
20
20
|
}, [close, initialIsOpen, open]);
|
|
21
21
|
const panelId = `panel-${id}`;
|
|
22
|
-
return (jsxs("div", { className: clsx(className, ...ensureArray(borderType).map(type => styles[`border-type-${type}`]), styles['accordion-item'], {
|
|
22
|
+
return (jsxs("div", { className: clsx(className, ...ensureArray(borderType).map(type => styles[`border-type-${type}`]), styles['accordion-item'], isDisabled && styles.disabled, {
|
|
23
23
|
[styles['is-open']]: isOpen,
|
|
24
24
|
[styles['allow-toggle']]: allowToggle,
|
|
25
25
|
}), children: [jsx("h3", { children: allowCollapse ? (jsxs("button", { "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles.button, styles[_pseudo]), disabled: isDisabled, id: id, onClick: () => {
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
var styles = {"accordion":"accordion-module-9WvAH","indented":"accordion-module-6CcEH","white":"accordion-module-CaVdG","accordion-item":"accordion-module-lf9d-","lg":"accordion-module-0qnae","with-seperators":"accordion-module-yOLrW","button":"accordion-module--Rwpb","icon":"accordion-module-Y50uq","focus":"accordion-module-M4BZs","allow-toggle":"accordion-module-QEO2d","panel":"accordion-module-KZjMo","content":"accordion-module-ejMH3","border-type-bottom":"accordion-module-oTdZK","border-type-top":"accordion-module-0mrLq","border-type-middle":"accordion-module-aAr-R","is-open":"accordion-module-W0F1z","border-type-middle-accentuated":"accordion-module-OB98a","select":"accordion-module-SAbiG"};
|
|
1
|
+
var styles = {"accordion":"accordion-module-9WvAH","indented":"accordion-module-6CcEH","white":"accordion-module-CaVdG","accordion-item":"accordion-module-lf9d-","lg":"accordion-module-0qnae","with-seperators":"accordion-module-yOLrW","button":"accordion-module--Rwpb","icon":"accordion-module-Y50uq","focus":"accordion-module-M4BZs","allow-toggle":"accordion-module-QEO2d","panel":"accordion-module-KZjMo","content":"accordion-module-ejMH3","border-type-bottom":"accordion-module-oTdZK","border-type-top":"accordion-module-0mrLq","border-type-middle":"accordion-module-aAr-R","is-open":"accordion-module-W0F1z","border-type-middle-accentuated":"accordion-module-OB98a","select":"accordion-module-SAbiG","disabled":"accordion-module-ogvYX"};
|
|
2
2
|
|
|
3
3
|
export { styles as default };
|
package/dist/config.js
CHANGED
|
@@ -13,8 +13,8 @@ const configPerEnvironment = {
|
|
|
13
13
|
local: () => ({
|
|
14
14
|
ALGOLIA_API_KEY: 'e0edf30798a6b2e4e44fd25f0f2f9646',
|
|
15
15
|
ALGOLIA_APP_ID: 'testing9VXJ0U4GSV',
|
|
16
|
-
ALGOLIA_HOST: '
|
|
17
|
-
BFF_API_URL: '
|
|
16
|
+
ALGOLIA_HOST: 'sonic.local.com:4443',
|
|
17
|
+
BFF_API_URL: '/api/v1/bff',
|
|
18
18
|
COOKIE_DOMAIN: undefined,
|
|
19
19
|
SHOP_API_URL:
|
|
20
20
|
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
@@ -8,14 +8,20 @@ interface CountrySelectProps<T extends Country | CountryModel> {
|
|
|
8
8
|
name?: string;
|
|
9
9
|
showLabel?: boolean;
|
|
10
10
|
}
|
|
11
|
+
interface CountrySelectPropsWithDefaultSelectedCountry<T extends Country | CountryModel> extends CountrySelectProps<T> {
|
|
12
|
+
defaultSelectedCountry: T;
|
|
13
|
+
onCountryChange?: (country: T) => void;
|
|
14
|
+
}
|
|
11
15
|
interface CountrySelectPropsWithSelectedCountry<T extends Country | CountryModel> extends CountrySelectProps<T> {
|
|
12
16
|
onCountryChange?: (country: T) => void;
|
|
13
17
|
selectedCountry: T;
|
|
14
18
|
}
|
|
15
19
|
interface CountrySelectPropsWithoutSelectedCountry<T extends Country | CountryModel> extends CountrySelectProps<T> {
|
|
20
|
+
defaultSelectedCountry?: T | undefined;
|
|
16
21
|
onCountryChange?: (country: T | undefined) => void;
|
|
17
22
|
selectedCountry?: T | undefined;
|
|
18
23
|
}
|
|
24
|
+
export declare function CountrySelect<T extends Country | CountryModel>(props: CountrySelectPropsWithDefaultSelectedCountry<T>): JSX.Element;
|
|
19
25
|
export declare function CountrySelect<T extends Country | CountryModel>(props: CountrySelectPropsWithSelectedCountry<T>): JSX.Element;
|
|
20
26
|
export declare function CountrySelect<T extends Country | CountryModel>(props: CountrySelectPropsWithoutSelectedCountry<T>): JSX.Element;
|
|
21
27
|
export {};
|
|
@@ -3,15 +3,21 @@ import { useMemo } from 'react';
|
|
|
3
3
|
import { Select } from '../../forms/select/select.js';
|
|
4
4
|
import { useFormattedMessage } from '../../intl/use-formatted-message.js';
|
|
5
5
|
|
|
6
|
-
function CountrySelect({ countries, 'data-test-selector': dataTestSelector, isDisabled, isRequired, name, onCountryChange, selectedCountry, showLabel = true, }) {
|
|
6
|
+
function CountrySelect({ countries, 'data-test-selector': dataTestSelector, defaultSelectedCountry, isDisabled, isRequired, name, onCountryChange, selectedCountry, showLabel = true, }) {
|
|
7
7
|
const t = useFormattedMessage();
|
|
8
|
-
const countryOptions = useMemo(() => countries
|
|
8
|
+
const countryOptions = useMemo(() => countries
|
|
9
|
+
.map((country) => [
|
|
10
|
+
country.id,
|
|
11
|
+
t(`clSelector.${country.abbreviation}`),
|
|
12
|
+
])
|
|
13
|
+
.sort(([, labelA], [, labelB]) => labelA.localeCompare(labelB))
|
|
14
|
+
.reduce((acc, [id, label]) => ({
|
|
9
15
|
...acc,
|
|
10
|
-
[
|
|
16
|
+
[id]: label,
|
|
11
17
|
}), {}),
|
|
12
18
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
13
19
|
[countries]);
|
|
14
|
-
return (jsx(Select, { "data-test-selector": dataTestSelector, isDisabled: isDisabled, isRequired: isRequired, label: t('Country'), name: name, onChange: value => onCountryChange?.(countries.find(country => country.id === value)), options: countryOptions, selectedOption: selectedCountry?.id, showLabel: showLabel, showPlaceholder: false, variant: "solid" }));
|
|
20
|
+
return (jsx(Select, { "data-test-selector": dataTestSelector, defaultSelectedOption: defaultSelectedCountry?.id, isDisabled: isDisabled, isRequired: isRequired, label: t('Country'), name: name, onChange: value => onCountryChange?.(countries.find(country => country.id === value)), options: countryOptions, selectedOption: selectedCountry?.id, showLabel: showLabel, showPlaceholder: false, variant: "solid" }));
|
|
15
21
|
}
|
|
16
22
|
|
|
17
23
|
export { CountrySelect };
|
package/dist/exports.d.ts
CHANGED
|
@@ -110,6 +110,7 @@ export * from './global-search/search-section/search-section';
|
|
|
110
110
|
export * from './global-search/types';
|
|
111
111
|
export * from './header/cart-icon/connected-cart-icon';
|
|
112
112
|
export * from './header/hamburger-button/hamburger-button';
|
|
113
|
+
export * from './header/header';
|
|
113
114
|
export * from './header/header-layout/header-layout';
|
|
114
115
|
export * from './header/sonic-logo/sonic-logo';
|
|
115
116
|
export * from './info-icon-tooltip/info-icon-tooltip';
|
|
@@ -137,6 +138,7 @@ export * from './media/image-grid/images-grid';
|
|
|
137
138
|
export * from './media/image-lightbox/image-lightbox';
|
|
138
139
|
export * from './media/image/image';
|
|
139
140
|
export * from './media/zoom-image/zoom-image';
|
|
141
|
+
export * from './message/message';
|
|
140
142
|
export * from './modals/confirmation/confirmation-dialog';
|
|
141
143
|
export * from './modals/dialog/dialog';
|
|
142
144
|
export * from './modals/favorite/add-to-favorite-dialog';
|
|
@@ -146,10 +148,11 @@ export * from './notifications/announcements/announcement';
|
|
|
146
148
|
export * from './notifications/announcements/announcement-provider';
|
|
147
149
|
export * from './notifications/announcements/connected-announcement';
|
|
148
150
|
export * from './observers/intersection-observer';
|
|
151
|
+
export * from './pages/account/layouts/sign-in-page-layout/sign-in-page-layout';
|
|
152
|
+
export * from './pages/account/sign-in-page/sign-in-page';
|
|
149
153
|
export * from './pages/checkout/cart-page/cart-page';
|
|
150
154
|
export * from './pages/checkout/cart-page/components/empty-cart-page';
|
|
151
155
|
export * from './pages/checkout/components/billing-and-invoice-information';
|
|
152
|
-
export * from './pages/checkout/constants';
|
|
153
156
|
export * from './pages/checkout/layouts/checkout-page-layout/checkout-page-layout';
|
|
154
157
|
export * from './pages/checkout/layouts/checkout-page-layout/components/checkout-page-section';
|
|
155
158
|
export * from './pages/checkout/layouts/checkout-page-layout/components/checkout-page-section-content';
|
|
@@ -175,6 +178,7 @@ export * from './pages/components/page-meta-data/page-meta-data';
|
|
|
175
178
|
export * from './pages/components/page/page';
|
|
176
179
|
export * from './pages/error-page/error-page';
|
|
177
180
|
export * from './pages/loading-page/loading-page';
|
|
181
|
+
export * from './pages/paths';
|
|
178
182
|
export * from './pages/product/layouts/product-details-page-layout/product-details-page-layout';
|
|
179
183
|
export * from './pages/product/product-details-page/components/product-details-images/product-detail-images';
|
|
180
184
|
export * from './pages/product/product-details-page/components/product-details-panel/product-details-panel';
|
package/dist/footer/footer.js
CHANGED
|
@@ -8,7 +8,7 @@ import styles from './footer.module.css.js';
|
|
|
8
8
|
|
|
9
9
|
function Footer({ bottomLinks, copyright, countrySelector, linkBlocks, }) {
|
|
10
10
|
const isXl = useIsBreakpoint('xl');
|
|
11
|
-
return (jsxs("footer", { className: styles.footer, children: [jsx("div", { className: styles['main-links'], children: linkBlocks.map(linkBlock => (jsx("div", { className: styles['link-block'], children: jsx(Accordion, { color: "white", hasLineSeparator: false, size: "lg", children: jsx(AccordionItem, { allowCollapse: !isXl, id: `link-block-${linkBlock.key}`, initialIsOpen: isXl, title: linkBlock.header, children: jsx("ul", { className: styles['list'], children: linkBlock.links.map(link => (jsx("li", { children: jsx(RouteLink, {
|
|
11
|
+
return (jsxs("footer", { className: styles.footer, children: [jsx("div", { className: styles['main-links'], children: linkBlocks.map(linkBlock => (jsx("div", { className: styles['link-block'], children: jsx(Accordion, { color: "white", hasLineSeparator: false, size: "lg", children: jsx(AccordionItem, { allowCollapse: !isXl, id: `link-block-${linkBlock.key}`, initialIsOpen: isXl, title: linkBlock.header, children: jsx("ul", { className: styles['list'], children: linkBlock.links.map(link => (jsx("li", { children: jsx(RouteLink, { href: link.externalLink || link.internalLink, target: link.openInNewTab ? '_blank' : undefined, children: link.title }) }, link.key))) }) }) }) }, linkBlock.key))) }), jsxs("div", { className: styles['bottom-section'], children: [jsx("p", { className: styles.copyright, children: copyright }), jsx("div", { className: styles['bottom-links'], children: bottomLinks.map(link => (jsx(RouteLink, { className: styles['bottom-link'], href: link.externalLink || link.internalLink, target: link.openInNewTab ? '_blank' : undefined, children: link.title }, link.key))) }), countrySelector] })] }));
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
export { Footer };
|
|
@@ -19,7 +19,7 @@ const TextArea = forwardRef(({ autoGrow, className, label, size, ...textAreaProp
|
|
|
19
19
|
if (!ref.current)
|
|
20
20
|
return;
|
|
21
21
|
if (!autoGrow)
|
|
22
|
-
return ref.current.style.removeProperty('height');
|
|
22
|
+
return void ref.current.style.removeProperty('height');
|
|
23
23
|
ref.current.style.height = `${initialHeight.current}px`;
|
|
24
24
|
if (ref.current.scrollHeight > (initialHeight.current || 0)) {
|
|
25
25
|
ref.current.style.height = ref.current.scrollHeight + 'px';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function Header(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { HeaderLayout } from './header-layout/header-layout.js';
|
|
3
|
+
import { SonicLogo } from './sonic-logo/sonic-logo.js';
|
|
4
|
+
|
|
5
|
+
function Header() {
|
|
6
|
+
return (jsx(HeaderLayout, { hamburgerButton: null, logo: jsx(SonicLogo, { href: "/" }), mainNavigation: null, navigationActions: null, search: null }));
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export { Header };
|
package/dist/index.js
CHANGED
|
@@ -114,6 +114,7 @@ export { SearchListItem } from './global-search/search-section/search-list-item.
|
|
|
114
114
|
export { SearchSection } from './global-search/search-section/search-section.js';
|
|
115
115
|
export { ConnectedCartIcon } from './header/cart-icon/connected-cart-icon.js';
|
|
116
116
|
export { HamburgerButton } from './header/hamburger-button/hamburger-button.js';
|
|
117
|
+
export { Header } from './header/header.js';
|
|
117
118
|
export { HeaderLayout } from './header/header-layout/header-layout.js';
|
|
118
119
|
export { SonicLogo } from './header/sonic-logo/sonic-logo.js';
|
|
119
120
|
export { InfoIconTooltip } from './info-icon-tooltip/info-icon-tooltip.js';
|
|
@@ -140,6 +141,7 @@ export { ImagesGrid } from './media/image-grid/images-grid.js';
|
|
|
140
141
|
export { ImageLightbox } from './media/image-lightbox/image-lightbox.js';
|
|
141
142
|
export { Image } from './media/image/image.js';
|
|
142
143
|
export { ZoomImage } from './media/zoom-image/zoom-image.js';
|
|
144
|
+
export { Message } from './message/message.js';
|
|
143
145
|
export { ConfirmationDialog } from './modals/confirmation/confirmation-dialog.js';
|
|
144
146
|
export { Dialog } from './modals/dialog/dialog.js';
|
|
145
147
|
export { AddToFavoriteDialog } from './modals/favorite/add-to-favorite-dialog.js';
|
|
@@ -149,10 +151,11 @@ export { Announcement } from './notifications/announcements/announcement.js';
|
|
|
149
151
|
export { AnnouncementProvider } from './notifications/announcements/announcement-provider.js';
|
|
150
152
|
export { ConnectedAnnouncement, now } from './notifications/announcements/connected-announcement.js';
|
|
151
153
|
export { IntersectionObserverComponent } from './observers/intersection-observer.js';
|
|
154
|
+
export { SignInPageLayout } from './pages/account/layouts/sign-in-page-layout/sign-in-page-layout.js';
|
|
155
|
+
export { SignInPage } from './pages/account/sign-in-page/sign-in-page.js';
|
|
152
156
|
export { CartPage } from './pages/checkout/cart-page/cart-page.js';
|
|
153
157
|
export { EmptyCart } from './pages/checkout/cart-page/components/empty-cart-page.js';
|
|
154
158
|
export { BillingAndInvoiceInformation } from './pages/checkout/components/billing-and-invoice-information.js';
|
|
155
|
-
export { CHECKOUT_PATHS } from './pages/checkout/constants.js';
|
|
156
159
|
export { CheckoutPageLayout } from './pages/checkout/layouts/checkout-page-layout/checkout-page-layout.js';
|
|
157
160
|
export { CheckoutPageSection } from './pages/checkout/layouts/checkout-page-layout/components/checkout-page-section.js';
|
|
158
161
|
export { CheckoutPageSectionContent } from './pages/checkout/layouts/checkout-page-layout/components/checkout-page-section-content.js';
|
|
@@ -178,6 +181,7 @@ export { PageMetaData } from './pages/components/page-meta-data/page-meta-data.j
|
|
|
178
181
|
export { Page } from './pages/components/page/page.js';
|
|
179
182
|
export { ErrorPage } from './pages/error-page/error-page.js';
|
|
180
183
|
export { LoadingPage } from './pages/loading-page/loading-page.js';
|
|
184
|
+
export { PATHS } from './pages/paths.js';
|
|
181
185
|
export { ProductDetailsPageLayout } from './pages/product/layouts/product-details-page-layout/product-details-page-layout.js';
|
|
182
186
|
export { ProductDetailImages } from './pages/product/product-details-page/components/product-details-images/product-detail-images.js';
|
|
183
187
|
export { ProductDetailsPanel } from './pages/product/product-details-page/components/product-details-panel/product-details-panel.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.' | 'Add order notes' | 'Add to list' | 'Address' | 'Amount: {0}' | 'An error occurred while processing your payment. Please try again.' | 'An unexpected error occured' | '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.' | 'Company name' | 'Conceal value' | 'Continue shopping' | 'Continue' | 'Cost overview' | 'Country' | 'create account' | 'Create new list' | 'Delivery date' | 'Delivery expected in {0} {1}' | 'Double check your spelling' | 'Downloads' | 'Easily add your favorite products' | 'Edit billing address' | 'Edit shipping address' | 'Email' | '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' | 'Incl. VAT' | 'Includes' | 'Industry' | 'Information' | 'Language' | 'Last name' | 'List name already exists' | 'New list name' | 'New user?' | 'of' | 'Or
|
|
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.' | 'Company name' | 'Conceal value' | 'Continue shopping' | 'Continue' | 'Cost overview' | 'Country' | 'create account' | 'Create new list' | 'Delivery date' | 'Delivery expected in {0} {1}' | 'Double check your spelling' | 'Downloads' | 'Easily add your favorite products' | 'Edit billing address' | 'Edit shipping address' | 'Email' | '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' | '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 e-mail address' | 'Please enter a valid phone number' | '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' | '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' | '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' | 'Total' | 'Try another search' | 'Try another search' | 'Unable to add the product to your cart.' | 'Unable to add the product to your cart.' | 'Unable to empty your cart.' | 'Unable to empty your cart.' | 'Unable to remove the product from your cart.' | 'Unable to remove the product from your cart.' | 'Unable to save cart for later.' | 'Unable to save cart for later.' | 'Unable to update the product in your cart.' | 'Unable to update the product in your cart.' | '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 must ' | 'Your cart has been emptied.' | 'Your favorites are available on multiple devices' | 'Your shopping cart is still empty';
|
|
@@ -19,7 +19,7 @@ function OrderLineList({ children, onRemoveAll }) {
|
|
|
19
19
|
return;
|
|
20
20
|
open();
|
|
21
21
|
}
|
|
22
|
-
return (jsxs(Fragment, { children: [jsxs("div", { className: styles['orderline-list'], children: [jsxs("div", { className: styles.header, children: [jsx("p", { className: styles.count, children: `${count} ${productString.toLowerCase()}` }), onRemoveAll && (jsxs(Link, { className: styles['lnk-remove-all'], "data-test-selector": "cartlineHeader_removeAll", onClick: handleRemoveAll, children: [jsx(StrokeTrashIcon, {}), jsx(FormattedMessage, { id: "Remove all" })] }))] }), jsx("div", { className: styles.items, children: Children.map(children, (child, index) => (jsx("div", { className: styles.item, children: child }, index))) })] }), onRemoveAll && (jsx(ConfirmationDialog, { isOpen: isOpen, onCancel: close, onConfirm: onRemoveAll, title: t('Are you sure you want to remove all items from your cart?') }))] }));
|
|
22
|
+
return (jsxs(Fragment, { children: [jsxs("div", { className: styles['orderline-list'], children: [jsxs("div", { className: styles.header, children: [jsx("p", { className: styles.count, children: `${count} ${productString.toLowerCase()}` }), onRemoveAll && (jsxs(Link, { className: styles['lnk-remove-all'], color: "primary", "data-test-selector": "cartlineHeader_removeAll", onClick: handleRemoveAll, children: [jsx(StrokeTrashIcon, {}), jsx(FormattedMessage, { id: "Remove all" })] }))] }), jsx("div", { className: styles.items, children: Children.map(children, (child, index) => (jsx("div", { className: styles.item, children: child }, index))) })] }), onRemoveAll && (jsx(ConfirmationDialog, { isOpen: isOpen, onCancel: close, onConfirm: onRemoveAll, title: t('Are you sure you want to remove all items from your cart?') }))] }));
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
export { OrderLineList };
|
|
@@ -25,22 +25,29 @@ function Image({ className, fallbackSrc = 'https://res.cloudinary.com/dkz9eknwh/
|
|
|
25
25
|
}
|
|
26
26
|
return jsx(ImageComponent, { ...props, hasError: hasError, image: image });
|
|
27
27
|
}
|
|
28
|
+
function createSrcSet(image) {
|
|
29
|
+
return ([
|
|
30
|
+
image[1] && `${image[1]} 1x`,
|
|
31
|
+
image[2] && `${image[2]} 2x`,
|
|
32
|
+
image[3] && `${image[3]} 3x`,
|
|
33
|
+
]
|
|
34
|
+
.filter(Boolean)
|
|
35
|
+
.join(', ') || undefined);
|
|
36
|
+
}
|
|
28
37
|
function ImageComponent({ className, fallbackSrc, fit = 'cover', hasError, image, ...rest }) {
|
|
29
38
|
if (!image)
|
|
30
39
|
return (jsx("img", { alt: "Missing", className: clsx(styles.image, className, styles[fit], styles['has-error']), src: fallbackSrc, ...rest }));
|
|
31
|
-
const srcSet = hasError
|
|
32
|
-
? undefined
|
|
33
|
-
: `${image[1]} 1x, ${image[2]} 2x, ${image[3]} 3x`;
|
|
40
|
+
const srcSet = hasError ? undefined : createSrcSet(image);
|
|
34
41
|
return (jsx("img", { alt: image.altText, className: clsx(styles.image, className, styles[fit], {
|
|
35
42
|
[styles['has-error']]: hasError,
|
|
36
|
-
}), src:
|
|
43
|
+
}), src: fallbackSrc, srcSet: srcSet, ...rest }));
|
|
37
44
|
}
|
|
38
45
|
function PictureComponent({ className, fallbackSrc, fit = 'cover', hasError, image, ...rest }) {
|
|
39
46
|
if (!image)
|
|
40
47
|
return (jsx("picture", { className: clsx(styles.picture, className), children: jsx("img", { alt: "Missing", className: clsx(styles.image, styles[fit], styles['has-error']), src: fallbackSrc, ...rest }) }));
|
|
41
|
-
return (jsxs("picture", { className: clsx(styles.picture, className), children: [jsx("source", { media: "(max-width: 768px)", srcSet:
|
|
48
|
+
return (jsxs("picture", { className: clsx(styles.picture, className), children: [image.sm && (jsx("source", { media: "(max-width: 768px)", srcSet: createSrcSet(image.sm) })), image.md && (jsx("source", { media: "(max-width: 1439px)", srcSet: createSrcSet(image.md) })), image.lg && (jsx("source", { media: "(min-width: 1440px)", srcSet: createSrcSet(image.lg) })), jsx("img", { alt: image.altText, className: clsx(styles.image, styles[fit], {
|
|
42
49
|
[styles['has-error']]: hasError,
|
|
43
|
-
}), src:
|
|
50
|
+
}), src: fallbackSrc, ...rest })] }));
|
|
44
51
|
}
|
|
45
52
|
|
|
46
53
|
export { Image };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export interface MessageProps {
|
|
3
|
+
children?: ReactNode;
|
|
4
|
+
type?: 'default' | 'info' | 'danger' | 'success' | 'warning';
|
|
5
|
+
}
|
|
6
|
+
export declare function Message({ children, type }: MessageProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { SolidAttentionIcon } from '../icons/solid/solid-attention-icon.js';
|
|
4
|
+
import { SolidInformationIcon } from '../icons/solid/solid-information-icon.js';
|
|
5
|
+
import { SolidNoticeIcon } from '../icons/solid/solid-notice-icon.js';
|
|
6
|
+
import { SolidOkayIcon } from '../icons/solid/solid-okay-icon.js';
|
|
7
|
+
import styles from './message.module.css.js';
|
|
8
|
+
|
|
9
|
+
const icons = {
|
|
10
|
+
danger: jsx(SolidAttentionIcon, {}),
|
|
11
|
+
info: jsx(SolidInformationIcon, {}),
|
|
12
|
+
success: jsx(SolidOkayIcon, {}),
|
|
13
|
+
warning: jsx(SolidNoticeIcon, {}),
|
|
14
|
+
};
|
|
15
|
+
function Message({ children, type = 'default' }) {
|
|
16
|
+
return (jsxs("div", { className: clsx(styles.message, styles[type]), role: "note", children: [type !== 'default' && (jsx("div", { className: styles.icon, role: "presentation", children: icons[type] })), jsx("div", { className: styles.body, children: children })] }));
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export { Message };
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
var styles = {"message":"message-module-N1e1t","icon":"message-module-w2hsL","body":"message-module-Gi4uR","default":"message-module-pp9U4","info":"message-module-srkp1","danger":"message-module-oeSdr","success":"message-module-Vp0pA","warning":"message-module-kvANQ"};
|
|
2
|
+
|
|
3
|
+
export { styles as default };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { ImageType } from '../../../../shared/model/image';
|
|
3
|
+
export interface SignInPageLayoutProps {
|
|
4
|
+
children?: ReactNode;
|
|
5
|
+
fullHeight?: boolean;
|
|
6
|
+
image: ImageType;
|
|
7
|
+
}
|
|
8
|
+
export declare function SignInPageLayout({ children, fullHeight, image, }: SignInPageLayoutProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { useIsBreakpoint } from '../../../../shared/hooks/use-is-breakpoint.js';
|
|
4
|
+
import { Image } from '../../../../media/image/image.js';
|
|
5
|
+
import styles from './sign-in-page-layout.module.css.js';
|
|
6
|
+
|
|
7
|
+
function SignInPageLayout({ children, fullHeight, image, }) {
|
|
8
|
+
const isLg = useIsBreakpoint('lg');
|
|
9
|
+
return (jsxs("div", { className: clsx(styles['sign-in-page-layout'], fullHeight && styles['full-height']), children: [jsx("div", { className: styles.main, children: children }), isLg && (jsx("div", { className: styles.side, children: jsx("div", { className: styles.image, children: jsx(Image, { image: image, title: "" }) }) }))] }));
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export { SignInPageLayout };
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
var styles = {"sign-in-page-layout":"sign-in-page-layout-module-Z1oE2","full-height":"sign-in-page-layout-module-D5yqX","main":"sign-in-page-layout-module-s6x7v","side":"sign-in-page-layout-module-W-FMF","image":"sign-in-page-layout-module-cbE8y"};
|
|
2
|
+
|
|
3
|
+
export { styles as default };
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useMemo } from 'react';
|
|
3
|
+
import { useCreateGuestAccount } from '../../../shared/api/storefront/hooks/authentication/use-create-guest-account.js';
|
|
4
|
+
import { useFetchSession } from '../../../shared/api/storefront/hooks/authentication/use-fetch-session.js';
|
|
5
|
+
import { useSignIn } from '../../../shared/api/storefront/hooks/authentication/use-sign-in.js';
|
|
6
|
+
import { isRequestError } from '../../../shared/fetch/request.js';
|
|
7
|
+
import { useNavigate } from '../../../shared/routing/route-provider.js';
|
|
8
|
+
import { SignInForm } from '../../../sign-in-form/sign-in-form.js';
|
|
9
|
+
import { Page } from '../../components/page/page.js';
|
|
10
|
+
import { PATHS } from '../../paths.js';
|
|
11
|
+
import { SignInPageLayout } from '../layouts/sign-in-page-layout/sign-in-page-layout.js';
|
|
12
|
+
|
|
13
|
+
// TODO: We need larger images
|
|
14
|
+
const IMAGE = {
|
|
15
|
+
1: 'https://res.cloudinary.com/dkz9eknwh/image/upload/w_1658,h_1008/v1740665245/images/sign-in-page.webp',
|
|
16
|
+
2: 'https://res.cloudinary.com/dkz9eknwh/image/upload/w_1658,h_1008/v1740665245/images/sign-in-page.webp',
|
|
17
|
+
3: 'https://res.cloudinary.com/dkz9eknwh/image/upload/w_1658,h_1008/v1740665245/images/sign-in-page.webp',
|
|
18
|
+
altText: '',
|
|
19
|
+
};
|
|
20
|
+
function SignInPage({ returnUrl } = {}) {
|
|
21
|
+
const { navigate } = useNavigate();
|
|
22
|
+
const { data: session } = useFetchSession();
|
|
23
|
+
const { error: errorSignIn, isPending: isPendingSignIn, mutate: signIn, reset: resetSignIn, } = useSignIn();
|
|
24
|
+
const { error: errorCreateGuest, isPending: isPendingCreateGuest, mutate: createGuest, reset: resetCreateGuest, } = useCreateGuestAccount();
|
|
25
|
+
const errorMessage = useMemo(() => {
|
|
26
|
+
const error = errorSignIn || errorCreateGuest;
|
|
27
|
+
if (!error)
|
|
28
|
+
return undefined;
|
|
29
|
+
if (errorCreateGuest)
|
|
30
|
+
return 'Unexpected error';
|
|
31
|
+
if (isRequestError(error) && error.status === 403)
|
|
32
|
+
return 'Access denied';
|
|
33
|
+
return 'Unexpected error';
|
|
34
|
+
}, [errorCreateGuest, errorSignIn]);
|
|
35
|
+
const onSuccess = () => navigate(returnUrl || PATHS.ACCOUNT);
|
|
36
|
+
const allowGuestSignIn = returnUrl === PATHS.CHECKOUT_SHIPPING;
|
|
37
|
+
const onSubmit = ({ data }) => {
|
|
38
|
+
resetSignIn();
|
|
39
|
+
resetCreateGuest();
|
|
40
|
+
if (data.guestSignIn) {
|
|
41
|
+
if (session?.isGuest && session.isAuthenticated)
|
|
42
|
+
return onSuccess();
|
|
43
|
+
createGuest(undefined, { onSuccess });
|
|
44
|
+
}
|
|
45
|
+
else {
|
|
46
|
+
signIn({
|
|
47
|
+
password: data.password,
|
|
48
|
+
rememberMe: data.rememberMe,
|
|
49
|
+
userName: data.email,
|
|
50
|
+
}, { onSuccess });
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
return (jsx(Page, { fullHeight: true, fluid: true, children: jsx(SignInPageLayout, { fullHeight: true, image: IMAGE, children: jsx(SignInForm, { allowGuestSignIn: allowGuestSignIn, errorMessage: errorMessage, initialEmail: session?.isGuest ? '' : session?.email, initialRememberMe: session?.rememberMe, isDisabled: !session, isPendingGuestSignIn: isPendingCreateGuest, isPendingUserSignIn: isPendingSignIn, onSubmit: onSubmit }) }) }));
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
export { SignInPage };
|
|
@@ -17,7 +17,7 @@ import { RouteButton } from '../../../shared/routing/route-button.js';
|
|
|
17
17
|
import { useToast } from '../../../toast/use-toast.js';
|
|
18
18
|
import { useFetchCurrentCartLinesWithAtp } from '../../../shared/api/storefront/hooks/cart/use-fetch-current-cart-lines-with-atp.js';
|
|
19
19
|
import { useFetchCurrentCartWithAtp } from '../../../shared/api/storefront/hooks/cart/use-fetch-current-cart-with-atp.js';
|
|
20
|
-
import {
|
|
20
|
+
import { PATHS } from '../../paths.js';
|
|
21
21
|
import { EmptyCart } from './components/empty-cart-page.js';
|
|
22
22
|
|
|
23
23
|
function CartContent({ cartLines }) {
|
|
@@ -76,7 +76,7 @@ function CartContent({ cartLines }) {
|
|
|
76
76
|
return null;
|
|
77
77
|
return (jsx(CheckoutPageLayout, { actions: {
|
|
78
78
|
primary: (jsx(RouteButton, { withArrow: true, "data-test-selector": "checkoutShippingCartTotalContinueButton", href: "/CheckoutShipping", children: jsx(FormattedMessage, { id: "Continue shopping" }) })),
|
|
79
|
-
secondary: (jsx(RouteButton, { color: "secondary", href: isAuthenticated ? undefined :
|
|
79
|
+
secondary: (jsx(RouteButton, { color: "secondary", href: isAuthenticated ? undefined : PATHS.SIGN_IN, onClick: () => {
|
|
80
80
|
if (!isAuthenticated)
|
|
81
81
|
return;
|
|
82
82
|
saveCartForLater.mutate({ cart: currentCart });
|
|
@@ -103,10 +103,10 @@ function CartPage() {
|
|
|
103
103
|
return jsx(ErrorPage, { error: error });
|
|
104
104
|
if (isLoading)
|
|
105
105
|
return jsx(LoadingPage, {});
|
|
106
|
-
return (jsx(Page, {
|
|
107
|
-
{ href:
|
|
108
|
-
{ href:
|
|
109
|
-
], canonicalUrl:
|
|
106
|
+
return (jsx(Page, { breadcrumb: [
|
|
107
|
+
{ href: PATHS.HOME, label: 'home' },
|
|
108
|
+
{ href: PATHS.CART, label: t('Cart') },
|
|
109
|
+
], canonicalUrl: PATHS.CART, title: t('Cart'), children: cartLines?.length ? (jsx(CartContent, { cartLines: cartLines })) : (jsx(EmptyCart, {})) }));
|
|
110
110
|
}
|
|
111
111
|
|
|
112
112
|
export { CartPage };
|
|
@@ -12,8 +12,8 @@ import { RouteButton } from '../../../shared/routing/route-button.js';
|
|
|
12
12
|
import { formatDateToLocaleString } from '../../../shared/utils/date.js';
|
|
13
13
|
import { useToast } from '../../../toast/use-toast.js';
|
|
14
14
|
import { Page } from '../../components/page/page.js';
|
|
15
|
+
import { PATHS } from '../../paths.js';
|
|
15
16
|
import { BillingAndInvoiceInformation } from '../components/billing-and-invoice-information.js';
|
|
16
|
-
import { CHECKOUT_PATHS } from '../constants.js';
|
|
17
17
|
import { CheckoutPageLayout } from '../layouts/checkout-page-layout/checkout-page-layout.js';
|
|
18
18
|
import { CheckoutPageSection } from '../layouts/checkout-page-layout/components/checkout-page-section.js';
|
|
19
19
|
import { CheckoutPageSectionContent } from '../layouts/checkout-page-layout/components/checkout-page-section-content.js';
|
|
@@ -39,7 +39,13 @@ function OrderConfirmationPageContent({ cart, }) {
|
|
|
39
39
|
});
|
|
40
40
|
},
|
|
41
41
|
});
|
|
42
|
-
return (jsx(Page, {
|
|
42
|
+
return (jsx(Page, { breadcrumb: [
|
|
43
|
+
{ href: PATHS.HOME, label: t('Home') },
|
|
44
|
+
{
|
|
45
|
+
href: `${PATHS.ORDER_CONFIRMATION}?cartId=${cart.id}`,
|
|
46
|
+
label: t('Order confirmation'),
|
|
47
|
+
},
|
|
48
|
+
], title: t('Order confirmation'), children: jsx(CheckoutPageLayout, { actions: {
|
|
43
49
|
primary: (jsx(RouteButton, { withArrow: true, "data-test-selector": "checkoutReviewAndSubmit_continueShopping", href: "/", children: jsx(FormattedMessage, { id: "Continue shopping" }) })),
|
|
44
50
|
secondary: (jsxs(Fragment, { children: [cart.canSaveOrder && (jsx(RouteButton, { color: "secondary", onClick: () => {
|
|
45
51
|
saveCartForLater.mutate({ cart });
|
|
@@ -6,7 +6,7 @@ import { useFetchCartById } from '../../../shared/api/storefront/hooks/cart/use-
|
|
|
6
6
|
import { useNavigate } from '../../../shared/routing/route-provider.js';
|
|
7
7
|
import { hasNo } from '../../../shared/utils/types.js';
|
|
8
8
|
import { ErrorPage } from '../../error-page/error-page.js';
|
|
9
|
-
import {
|
|
9
|
+
import { PATHS } from '../../paths.js';
|
|
10
10
|
import { OrderConfirmationPageContent } from './order-confirmation-page-content.js';
|
|
11
11
|
|
|
12
12
|
function OrderConfirmationPage({ cartId }) {
|
|
@@ -21,9 +21,9 @@ function OrderConfirmationPage({ cartId }) {
|
|
|
21
21
|
if (isAuthenticated === undefined)
|
|
22
22
|
return;
|
|
23
23
|
if (!isAuthenticated)
|
|
24
|
-
return navigate(
|
|
24
|
+
return navigate(PATHS.CART);
|
|
25
25
|
if (cart.status === 'Cart')
|
|
26
|
-
navigate(
|
|
26
|
+
navigate(PATHS.CART);
|
|
27
27
|
}, [cart, navigate, isAuthenticated]);
|
|
28
28
|
if (error)
|
|
29
29
|
return jsx(ErrorPage, { error: error });
|
|
@@ -10,10 +10,11 @@ interface AdyenPaymentProps {
|
|
|
10
10
|
customerId: string;
|
|
11
11
|
dropinRef: MutableRefObject<Dropin | null>;
|
|
12
12
|
environment: 'test' | 'live' | 'live-us' | 'live-au' | 'live-apse' | 'live-in';
|
|
13
|
+
isDisabled?: boolean;
|
|
13
14
|
onComplete: (result: AdyenPaymentModel) => Promise<void>;
|
|
14
15
|
onError: (error: unknown, result: AdyenPaymentModel | null) => void;
|
|
15
16
|
orderAmount: number;
|
|
16
17
|
returnUrl: string;
|
|
17
18
|
}
|
|
18
|
-
export declare function AdyenPayment({ amount, cartId, countryCode, currencyCode, customerId, dropinRef, environment, onComplete, onError, orderAmount, returnUrl, }: AdyenPaymentProps): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export declare function AdyenPayment({ amount, cartId, countryCode, currencyCode, customerId, dropinRef, environment, isDisabled, onComplete, onError, orderAmount, returnUrl, }: AdyenPaymentProps): import("react/jsx-runtime").JSX.Element;
|
|
19
20
|
export {};
|
|
@@ -10,7 +10,7 @@ import { getAdyenPaymentDetails, postAdyenPayment } from '../../../../shared/api
|
|
|
10
10
|
import { parseAmount } from '../utils/parse-amount.js';
|
|
11
11
|
import styles from './adyen-payment.module.css.js';
|
|
12
12
|
|
|
13
|
-
function AdyenPayment({ amount, cartId, countryCode, currencyCode, customerId, dropinRef, environment, onComplete, onError, orderAmount, returnUrl, }) {
|
|
13
|
+
function AdyenPayment({ amount, cartId, countryCode, currencyCode, customerId, dropinRef, environment, isDisabled, onComplete, onError, orderAmount, returnUrl, }) {
|
|
14
14
|
const cultureCode = useCultureCode();
|
|
15
15
|
// Get and remove Adyen query string params and keep them in a ref
|
|
16
16
|
const queryStringParams = useRef(getAndRemoveAdyenQueryParams());
|
|
@@ -120,17 +120,19 @@ function AdyenPayment({ amount, cartId, countryCode, currencyCode, customerId, d
|
|
|
120
120
|
]);
|
|
121
121
|
if (error)
|
|
122
122
|
return jsx("div", { children: String(error) });
|
|
123
|
-
return (jsx("div", { ref: dropinDivRef, className: clsx(Boolean(redirectResult) && styles.loading), id: "dropin" }));
|
|
123
|
+
return (jsx("div", { ref: dropinDivRef, className: clsx(Boolean(redirectResult) && styles.loading, isDisabled && styles.loading), id: "dropin" }));
|
|
124
124
|
}
|
|
125
125
|
function getAndRemoveAdyenQueryParams() {
|
|
126
126
|
if (typeof window === 'undefined')
|
|
127
127
|
return {};
|
|
128
128
|
const params = qs.parse(window.location.search || '');
|
|
129
129
|
const { amount, customerId, redirectResult } = params;
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
130
|
+
if (redirectResult) {
|
|
131
|
+
delete params['redirectResult'];
|
|
132
|
+
delete params['amount'];
|
|
133
|
+
delete params['customerId'];
|
|
134
|
+
history?.pushState({}, '', `${window.location.pathname}${qs.stringify(params) ? `?${qs.stringify(params)}` : ''}`);
|
|
135
|
+
}
|
|
134
136
|
return { amount, customerId, redirectResult };
|
|
135
137
|
}
|
|
136
138
|
async function handlePaymentResponse(result, onSubmit, onError) {
|