@sonic-equipment/ui 0.0.93 → 0.0.95
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/index.d.ts +7 -1
- package/dist/index.js +310 -280
- package/dist/src/intl/translation-id.d.ts +1 -1
- package/dist/styles.css +57 -57
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -6,6 +6,7 @@ import { deepEqual } from 'fast-equals';
|
|
|
6
6
|
import clsx from 'clsx';
|
|
7
7
|
import { Breadcrumbs, Breadcrumb as Breadcrumb$1, FieldError as FieldError$1, useContextProps, InputContext, Input as Input$1, Label as Label$1, NumberField as NumberField$1, Button as Button$1, Select as Select$1, SelectValue, Popover, ListBox, Section, Header, ListBoxItem, ModalOverlay, Modal as Modal$1, Dialog as Dialog$1, Form, Checkbox as Checkbox$1, TextAreaContext, TextArea as TextArea$1, TextField as TextField$1 } from 'react-aria-components';
|
|
8
8
|
import { usePress } from 'react-aria';
|
|
9
|
+
import { toast, ToastContainer, Slide } from 'react-toastify';
|
|
9
10
|
import Cookies from 'js-cookie';
|
|
10
11
|
import { TransitionGroup, CSSTransition, Transition } from 'react-transition-group';
|
|
11
12
|
import { useHierarchicalMenu, useCurrentRefinements, useClearRefinements, useRefinementList, useHits, useDynamicWidgets, usePagination, useInstantSearch, InstantSearch, Configure, useSortBy } from 'react-instantsearch';
|
|
@@ -14,7 +15,6 @@ import { simple } from 'instantsearch.js/es/lib/stateMappings/index.js';
|
|
|
14
15
|
import algoliasearch from 'algoliasearch';
|
|
15
16
|
import aa from 'search-insights';
|
|
16
17
|
import ReactDOM from 'react-dom';
|
|
17
|
-
import { ToastContainer, Slide, toast } from 'react-toastify';
|
|
18
18
|
import { createAutocomplete } from '@algolia/autocomplete-core';
|
|
19
19
|
import { getAlgoliaResults, parseAlgoliaHitHighlight } from '@algolia/autocomplete-preset-algolia';
|
|
20
20
|
import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
|
|
@@ -1540,11 +1540,105 @@ function ManualInputState({ isDisabled, onCancel, onConfirm, quantity, }) {
|
|
|
1540
1540
|
}, size: "md", children: "OK" })] }));
|
|
1541
1541
|
}
|
|
1542
1542
|
|
|
1543
|
+
const IntlContext = createContext({
|
|
1544
|
+
formatMessage: text => text,
|
|
1545
|
+
languageCode: 'en-GB',
|
|
1546
|
+
updateLanguageCode: () => { },
|
|
1547
|
+
});
|
|
1548
|
+
|
|
1549
|
+
function useFormattedMessage() {
|
|
1550
|
+
const { formatMessage } = useContext(IntlContext);
|
|
1551
|
+
return (id, { fallbackValue, optional, replacementValues } = {}) => {
|
|
1552
|
+
const message = formatMessage(id,
|
|
1553
|
+
/* The following code converts replacementValues from an object to an array.
|
|
1554
|
+
* This is to keep the external API compatible with react-intls version
|
|
1555
|
+
* and internally compatible with the Spire implementation of translate. */
|
|
1556
|
+
...(replacementValues
|
|
1557
|
+
? Object.keys(replacementValues)
|
|
1558
|
+
.map(parseFloat)
|
|
1559
|
+
.filter(index => !Number.isNaN(index))
|
|
1560
|
+
.reduce((acc, index) => {
|
|
1561
|
+
const replacementValue = replacementValues[index];
|
|
1562
|
+
if (replacementValue === undefined)
|
|
1563
|
+
return acc;
|
|
1564
|
+
acc[index] = replacementValue;
|
|
1565
|
+
return acc;
|
|
1566
|
+
}, [])
|
|
1567
|
+
: []));
|
|
1568
|
+
if (optional && message === undefined)
|
|
1569
|
+
console.warn(`Missing translation with id: ${id}`);
|
|
1570
|
+
return message || fallbackValue || id;
|
|
1571
|
+
};
|
|
1572
|
+
}
|
|
1573
|
+
|
|
1574
|
+
const FormattedMessage = ({ fallbackValue, id, optional, replacementValues, }) => useFormattedMessage()(id, { fallbackValue, optional, replacementValues });
|
|
1575
|
+
|
|
1576
|
+
/**
|
|
1577
|
+
* Create UUID according to
|
|
1578
|
+
* https://www.ietf.org/rfc/rfc4122.txt.
|
|
1579
|
+
*
|
|
1580
|
+
* @returns Generated UUID.
|
|
1581
|
+
*/
|
|
1582
|
+
function createUUID() {
|
|
1583
|
+
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
|
|
1584
|
+
const r = (Math.random() * 16) | 0;
|
|
1585
|
+
const v = c === 'x' ? r : (r & 0x3) | 0x8;
|
|
1586
|
+
return v.toString(16);
|
|
1587
|
+
});
|
|
1588
|
+
}
|
|
1589
|
+
|
|
1590
|
+
function SolidAttentionIcon(props) {
|
|
1591
|
+
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: "M9.0606215,21.2358635 L14.9393785,21.2358635 C15.346918,21.2358635 15.6984208,21.1934114 15.9938869,21.1085074 C16.289353,21.0236033 16.5525556,20.8962472 16.7834947,20.7264391 C17.0144337,20.556631 17.2351842,20.3528613 17.4457463,20.1151299 L21.1747326,15.9887927 C21.3920869,15.7510613 21.560197,15.5269146 21.6790627,15.3163525 C21.7979283,15.1057905 21.8811343,14.8833418 21.9286806,14.6490066 C21.9762269,14.4146714 22,14.1310919 22,13.798268 L22,9.447784 C22,9.1149601 21.9745288,8.83138054 21.9235863,8.59704534 C21.8726439,8.36271014 21.7860418,8.14195959 21.6637799,7.93479368 C21.5415181,7.72762778 21.37171,7.50178299 21.1543556,7.2572593 L17.4457463,3.12073357 C17.2351842,2.88979453 17.0161318,2.68942095 16.7885889,2.51961284 C16.561046,2.34980472 16.2978434,2.22075055 15.9989812,2.13245033 C15.7001189,2.04415011 15.346918,2 14.9393785,2 L9.0606215,2 C8.65308202,2 8.30157922,2.04415011 8.00611309,2.13245033 C7.71064697,2.22075055 7.44914247,2.34980472 7.22159959,2.51961284 C6.99405672,2.68942095 6.77160808,2.88979453 6.55425369,3.12073357 L2.82526745,7.2572593 C2.60112073,7.49499066 2.42961454,7.71743929 2.31074885,7.9246052 C2.19188317,8.1317711 2.11037528,8.35421973 2.06622517,8.5919511 C2.02207506,8.82968246 2,9.1149601 2,9.447784 L2,13.798268 C2,14.1310919 2.02207506,14.4146714 2.06622517,14.6490066 C2.11037528,14.8833418 2.19188317,15.1057905 2.31074885,15.3163525 C2.42961454,15.5269146 2.60112073,15.7510613 2.82526745,15.9887927 L6.55425369,20.1151299 C6.77160808,20.3528613 6.99405672,20.556631 7.22159959,20.7264391 C7.44914247,20.8962472 7.71064697,21.0236033 8.00611309,21.1085074 C8.30157922,21.1934114 8.65308202,21.2358635 9.0606215,21.2358635 Z M12.0152827,13.339786 C11.4583121,13.339786 11.1730345,13.0579046 11.1594498,12.4941416 L11.0269995,7.46102904 C11.0202072,7.18933605 11.1068093,6.96349125 11.2868059,6.78349465 C11.4668025,6.60349805 11.7028358,6.51349975 11.9949058,6.51349975 C12.2869757,6.51349975 12.5247071,6.60519613 12.7080998,6.78858889 C12.8914926,6.97198166 12.983189,7.19952454 12.983189,7.47121752 L12.8405502,12.4941416 C12.8269655,13.0579046 12.5518764,13.339786 12.0152827,13.339786 Z M12.0152827,16.6204789 C11.7028358,16.6204789 11.434539,16.518594 11.2103923,16.3148242 C10.9862455,16.1110545 10.8741722,15.8563423 10.8741722,15.5506877 C10.8741722,15.2518254 10.9862455,14.9988113 11.2103923,14.7916454 C11.434539,14.5844795 11.7028358,14.4808966 12.0152827,14.4808966 C12.3209373,14.4808966 12.585838,14.5827815 12.8099847,14.7865512 C13.0341314,14.9903209 13.1462048,15.2450331 13.1462048,15.5506877 C13.1462048,15.8631347 13.0324334,16.1195449 12.8048905,16.3199185 C12.5773476,16.5202921 12.314145,16.6204789 12.0152827,16.6204789 Z" }) }));
|
|
1592
|
+
}
|
|
1593
|
+
|
|
1594
|
+
function SolidInformationIcon(props) {
|
|
1595
|
+
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: "M11.9997748,2 C17.5138784,2 22,6.48597148 22,11.9997748 C22,17.5138784 17.5138784,22 11.9997748,22 C6.48597148,22 2,17.5138784 2,11.9997748 C2,6.48597148 6.48597148,2 11.9997748,2 Z M12,10.0686973 C11.2652767,10.0686973 10.6699001,10.6642241 10.6699001,11.3989474 L10.6699001,16.8046369 C10.6699001,17.53921 11.2652767,18.1347368 12,18.1347368 C12.7347233,18.1347368 13.3300999,17.53921 13.3300999,16.8046369 L13.3300999,11.3989474 C13.3300999,10.6642241 12.7347233,10.0686973 12,10.0686973 Z M12.00003,5.9387205 C11.2663578,5.9387205 10.6694796,6.53559872 10.6694796,7.26927091 C10.6694796,8.0029431 11.2663578,8.59982131 12.00003,8.59982131 C12.7337022,8.59982131 13.3305804,8.0029431 13.3305804,7.26927091 C13.3305804,6.53559872 12.7337022,5.9387205 12.00003,5.9387205 Z", fillRule: "evenodd" }) }));
|
|
1596
|
+
}
|
|
1597
|
+
|
|
1598
|
+
function SolidNoticeIcon(props) {
|
|
1599
|
+
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: "M4.65060241,21.1425703 L19.3493976,21.1425703 C19.8982597,21.1425703 20.3701473,21.0254351 20.7650602,20.7911647 C21.1599732,20.5568942 21.4645248,20.2406292 21.6787149,19.8423695 C21.892905,19.4441098 22,18.9973226 22,18.502008 C22,18.2811245 21.9682062,18.0568942 21.9046185,17.8293173 C21.8410308,17.6017403 21.748996,17.37751 21.6285141,17.1566265 L14.2690763,4.3253012 C14.0147256,3.89022758 13.6834003,3.56057564 13.2751004,3.33634538 C12.8668005,3.11211513 12.4417671,3 12,3 C11.5515395,3 11.1231593,3.11211513 10.7148594,3.33634538 C10.3065596,3.56057564 9.97858099,3.89022758 9.73092369,4.3253012 L2.37148594,17.1566265 C2.12382865,17.5850067 2,18.0334672 2,18.502008 C2,18.9973226 2.10709505,19.4441098 2.32128514,19.8423695 C2.53547523,20.2406292 2.84002677,20.5568942 3.23493976,20.7911647 C3.62985274,21.0254351 4.10174029,21.1425703 4.65060241,21.1425703 Z M12.0100402,14.7068273 C11.461178,14.7068273 11.1800535,14.4290495 11.1666667,13.873494 L11.0361446,8.91365462 C11.0294511,8.645917 11.1147925,8.42336011 11.2921687,8.24598394 C11.4695448,8.06860776 11.7021419,7.97991968 11.9899598,7.97991968 C12.2777778,7.97991968 12.5120482,8.07028112 12.6927711,8.25100402 C12.873494,8.43172691 12.9638554,8.65595716 12.9638554,8.92369478 L12.8232932,13.873494 C12.8099063,14.4290495 12.538822,14.7068273 12.0100402,14.7068273 Z M12.0100402,17.939759 C11.7021419,17.939759 11.437751,17.8393574 11.2168675,17.6385542 C10.9959839,17.437751 10.8855422,17.186747 10.8855422,16.8855422 C10.8855422,16.5910308 10.9959839,16.3417001 11.2168675,16.1375502 C11.437751,15.9334003 11.7021419,15.8313253 12.0100402,15.8313253 C12.311245,15.8313253 12.5722892,15.9317269 12.7931727,16.1325301 C13.0140562,16.3333333 13.124498,16.5843373 13.124498,16.8855422 C13.124498,17.1934404 13.0123829,17.4461178 12.7881526,17.6435743 C12.5639224,17.8410308 12.3045515,17.939759 12.0100402,17.939759 Z" }) }));
|
|
1600
|
+
}
|
|
1601
|
+
|
|
1602
|
+
function SolidOkayIcon(props) {
|
|
1603
|
+
return (jsx("svg", { fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M12.0051467,22 C13.3707325,22 14.6574026,21.7375193 15.865157,21.2125579 C17.0729113,20.6875965 18.1365586,19.9653457 19.0560988,19.0458055 C19.975639,18.1262652 20.6961743,17.0643335 21.2177046,15.8600103 C21.7392349,14.6556871 22,13.3673014 22,11.9948533 C22,10.6292675 21.7375193,9.34259736 21.2125579,8.13484303 C20.6875965,6.92708869 19.9653457,5.86172585 19.0458055,4.9387545 C18.1262652,4.01578315 17.0626179,3.2952479 15.8548636,2.77714874 C14.6471093,2.25904958 13.3604392,2 11.9948533,2 C10.6292675,2 9.34431292,2.25904958 8.13998971,2.77714874 C6.9356665,3.2952479 5.87201921,4.01578315 4.94904786,4.9387545 C4.02607651,5.86172585 3.3038257,6.92708869 2.78229542,8.13484303 C2.26076514,9.34259736 2,10.6292675 2,11.9948533 C2,13.3673014 2.2624807,14.6556871 2.7874421,15.8600103 C3.3124035,17.0643335 4.03465431,18.1262652 4.95419454,19.0458055 C5.87373477,19.9653457 6.9356665,20.6875965 8.13998971,21.2125579 C9.34431292,21.7375193 10.6326986,22 12.0051467,22 Z M10.9243438,16.7812661 C10.7390633,16.7812661 10.5743695,16.7400926 10.4302625,16.6577458 C10.2861554,16.5753989 10.1489106,16.4518785 10.018528,16.2871848 L7.60988163,13.3329902 C7.43832561,13.1202608 7.35254761,12.9006691 7.35254761,12.6742151 C7.35254761,12.4340367 7.43317893,12.2298851 7.59444159,12.0617602 C7.75570424,11.8936353 7.95642477,11.8095728 8.19660319,11.8095728 C8.34071024,11.8095728 8.47280837,11.8404529 8.59289758,11.9022131 C8.71298679,11.9639732 8.83136044,12.0737691 8.94801853,12.2316006 L10.8831704,14.7020072 L14.9696346,8.14513639 C15.1686396,7.82261108 15.4156802,7.66134843 15.7107566,7.66134843 C15.9372105,7.66134843 16.1413622,7.73511752 16.3232115,7.88265569 C16.5050609,8.03019386 16.5959856,8.22405215 16.5959856,8.46423057 C16.5959856,8.57402642 16.5702522,8.68553783 16.5187854,8.7987648 C16.4673186,8.91199177 16.407274,9.02007205 16.3386516,9.12300566 L11.7786927,16.2768914 C11.5659633,16.6131412 11.2811803,16.7812661 10.9243438,16.7812661 Z" }) }));
|
|
1604
|
+
}
|
|
1605
|
+
|
|
1606
|
+
function StrokeCloseboxIcon(props) {
|
|
1607
|
+
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M8,8 L16,16 M16,8 L8,16", fill: "currentColor", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.4" }) }));
|
|
1608
|
+
}
|
|
1609
|
+
|
|
1610
|
+
var styles$_ = {"toast":"toast-module-VzLw4","close":"toast-module-mAwpu","icon":"toast-module-JqNiT","success":"toast-module-cuSIT","info":"toast-module-ABLCP","warning":"toast-module-jGWiH","danger":"toast-module-t33Ra"};
|
|
1611
|
+
|
|
1612
|
+
const icons = {
|
|
1613
|
+
danger: jsx(SolidAttentionIcon, {}),
|
|
1614
|
+
info: jsx(SolidInformationIcon, {}),
|
|
1615
|
+
success: jsx(SolidOkayIcon, {}),
|
|
1616
|
+
warning: jsx(SolidNoticeIcon, {}),
|
|
1617
|
+
};
|
|
1618
|
+
const Toast = forwardRef(({ className, id, onClose, toastMessage: { body, isUserDismissable, messageType = 'info' }, }, ref) => {
|
|
1619
|
+
return (jsxs("div", { ref: ref, className: clsx(styles$_.toast, styles$_[messageType], className), children: [jsx("span", { className: styles$_.icon, children: icons[messageType] }), body, isUserDismissable && (jsx(IconButton, { className: styles$_.close, color: "secondary", onClick: () => onClose?.(id), children: jsx(StrokeCloseboxIcon, {}) }))] }));
|
|
1620
|
+
});
|
|
1621
|
+
Toast.displayName = 'Toast';
|
|
1622
|
+
|
|
1623
|
+
function useToast() {
|
|
1624
|
+
const count = useRef(0);
|
|
1625
|
+
return {
|
|
1626
|
+
addToast(toastMessage, toastOptions) {
|
|
1627
|
+
const id = createUUID();
|
|
1628
|
+
toast(jsx(Toast, { ref: el => el && (el.style.zIndex = (count.current++).toString()), id: id, onClose: id => toast.dismiss(id), toastMessage: toastMessage }), {
|
|
1629
|
+
toastId: id,
|
|
1630
|
+
...toastOptions,
|
|
1631
|
+
});
|
|
1632
|
+
},
|
|
1633
|
+
};
|
|
1634
|
+
}
|
|
1635
|
+
|
|
1543
1636
|
const ConnectedAddToCartButton = ({ onAddToCart, productId }) => {
|
|
1544
1637
|
const { isPending: isPendingAddToCart, mutate: addToCart } = useAddProductToCurrentCart();
|
|
1545
1638
|
const { data: cartLines, isLoading: isLoadingCartLines } = useFetchCurrentCartLines();
|
|
1546
1639
|
const { isPending: isPendingDeleteCartLine, mutate: deleteCartLine } = useDeleteCartLineById();
|
|
1547
1640
|
const { mutate: updateCartLine } = useUpdateCartLineById();
|
|
1641
|
+
const { addToast } = useToast();
|
|
1548
1642
|
const { onCartLineAdded, onCartLineError, onCartLineRemoved, onCartLineUpdated, } = useCartEvents();
|
|
1549
1643
|
const cartLine = cartLines?.find(line => line.productId === productId);
|
|
1550
1644
|
const quantity = cartLine?.qtyOrdered || 0;
|
|
@@ -1552,9 +1646,21 @@ const ConnectedAddToCartButton = ({ onAddToCart, productId }) => {
|
|
|
1552
1646
|
if (cartLine) {
|
|
1553
1647
|
if (quantity === 0) {
|
|
1554
1648
|
deleteCartLine({ cartLineId: cartLine.id }, {
|
|
1555
|
-
onError: error =>
|
|
1649
|
+
onError: error => {
|
|
1650
|
+
onCartLineError?.(error, cartLine);
|
|
1651
|
+
addToast({
|
|
1652
|
+
body: (jsx(FormattedMessage, { id: "Unable to remove the product from your cart." })),
|
|
1653
|
+
isUserDismissable: false,
|
|
1654
|
+
messageType: 'danger',
|
|
1655
|
+
});
|
|
1656
|
+
},
|
|
1556
1657
|
onSuccess: () => {
|
|
1557
1658
|
onCartLineRemoved?.(cartLine);
|
|
1659
|
+
addToast({
|
|
1660
|
+
body: (jsx(FormattedMessage, { id: "The product has been removed from your cart." })),
|
|
1661
|
+
isUserDismissable: false,
|
|
1662
|
+
messageType: 'success',
|
|
1663
|
+
});
|
|
1558
1664
|
},
|
|
1559
1665
|
});
|
|
1560
1666
|
}
|
|
@@ -1563,19 +1669,43 @@ const ConnectedAddToCartButton = ({ onAddToCart, productId }) => {
|
|
|
1563
1669
|
cartLine: { ...cartLine, qtyOrdered: quantity },
|
|
1564
1670
|
cartLineId: cartLine.id,
|
|
1565
1671
|
}, {
|
|
1566
|
-
onError: error =>
|
|
1672
|
+
onError: error => {
|
|
1673
|
+
onCartLineError?.(error, cartLine);
|
|
1674
|
+
addToast({
|
|
1675
|
+
body: (jsx(FormattedMessage, { id: "Unable to update the product in your cart." })),
|
|
1676
|
+
isUserDismissable: false,
|
|
1677
|
+
messageType: 'danger',
|
|
1678
|
+
});
|
|
1679
|
+
},
|
|
1567
1680
|
onSuccess: () => {
|
|
1568
1681
|
onCartLineUpdated?.({ ...cartLine, qtyOrdered: quantity });
|
|
1682
|
+
addToast({
|
|
1683
|
+
body: (jsx(FormattedMessage, { id: "The product has been updated in your cart." })),
|
|
1684
|
+
isUserDismissable: false,
|
|
1685
|
+
messageType: 'success',
|
|
1686
|
+
});
|
|
1569
1687
|
},
|
|
1570
1688
|
});
|
|
1571
1689
|
}
|
|
1572
1690
|
}
|
|
1573
1691
|
else {
|
|
1574
1692
|
addToCart({ productId, qtyOrdered: quantity, unitOfMeasure: '' }, {
|
|
1575
|
-
onError: error =>
|
|
1693
|
+
onError: error => {
|
|
1694
|
+
onCartLineError?.(error, cartLine);
|
|
1695
|
+
addToast({
|
|
1696
|
+
body: (jsx(FormattedMessage, { id: "Unable to add the product to your cart." })),
|
|
1697
|
+
isUserDismissable: false,
|
|
1698
|
+
messageType: 'danger',
|
|
1699
|
+
});
|
|
1700
|
+
},
|
|
1576
1701
|
onSuccess: cartLine => {
|
|
1577
1702
|
onAddToCart?.();
|
|
1578
1703
|
onCartLineAdded?.(cartLine);
|
|
1704
|
+
addToast({
|
|
1705
|
+
body: (jsx(FormattedMessage, { id: "The product has been added to your cart." })),
|
|
1706
|
+
isUserDismissable: false,
|
|
1707
|
+
messageType: 'success',
|
|
1708
|
+
});
|
|
1579
1709
|
},
|
|
1580
1710
|
});
|
|
1581
1711
|
}
|
|
@@ -1583,48 +1713,15 @@ const ConnectedAddToCartButton = ({ onAddToCart, productId }) => {
|
|
|
1583
1713
|
return (jsx(AddToCartButton, { isDisabled: isPendingDeleteCartLine || isLoadingCartLines || isPendingAddToCart, onChange: handleChange, quantity: quantity }));
|
|
1584
1714
|
};
|
|
1585
1715
|
|
|
1586
|
-
var styles$
|
|
1716
|
+
var styles$Z = {"tag":"tag-module-B7r15","body":"tag-module-4cfCf","shape":"tag-module-c7CRb"};
|
|
1587
1717
|
|
|
1588
1718
|
function Tag({ children }) {
|
|
1589
1719
|
if (!children)
|
|
1590
1720
|
return null;
|
|
1591
|
-
return (jsxs("div", { className: styles$
|
|
1592
|
-
}
|
|
1593
|
-
|
|
1594
|
-
const IntlContext = createContext({
|
|
1595
|
-
formatMessage: text => text,
|
|
1596
|
-
languageCode: 'en-GB',
|
|
1597
|
-
updateLanguageCode: () => { },
|
|
1598
|
-
});
|
|
1599
|
-
|
|
1600
|
-
function useFormattedMessage() {
|
|
1601
|
-
const { formatMessage } = useContext(IntlContext);
|
|
1602
|
-
return (id, { fallbackValue, optional, replacementValues } = {}) => {
|
|
1603
|
-
const message = formatMessage(id,
|
|
1604
|
-
/* The following code converts replacementValues from an object to an array.
|
|
1605
|
-
* This is to keep the external API compatible with react-intls version
|
|
1606
|
-
* and internally compatible with the Spire implementation of translate. */
|
|
1607
|
-
...(replacementValues
|
|
1608
|
-
? Object.keys(replacementValues)
|
|
1609
|
-
.map(parseFloat)
|
|
1610
|
-
.filter(index => !Number.isNaN(index))
|
|
1611
|
-
.reduce((acc, index) => {
|
|
1612
|
-
const replacementValue = replacementValues[index];
|
|
1613
|
-
if (replacementValue === undefined)
|
|
1614
|
-
return acc;
|
|
1615
|
-
acc[index] = replacementValue;
|
|
1616
|
-
return acc;
|
|
1617
|
-
}, [])
|
|
1618
|
-
: []));
|
|
1619
|
-
if (optional && message === undefined)
|
|
1620
|
-
console.warn(`Missing translation with id: ${id}`);
|
|
1621
|
-
return message || fallbackValue || id;
|
|
1622
|
-
};
|
|
1721
|
+
return (jsxs("div", { className: styles$Z.tag, children: [jsx("div", { className: styles$Z.body, children: children }), jsx("svg", { className: styles$Z.shape, height: "16", viewBox: "0 0 9 16", width: "9", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M1.92461763,0 L0,0 L0,16 L1.92461763,16 L6.4117887,16 L8.87489381,7.57121588 C9.23711515,6.3325062 8.79482383,4.99454094 7.78060408,4.2560794 L1.92461763,0 Z", fill: "currentColor" }) })] }));
|
|
1623
1722
|
}
|
|
1624
1723
|
|
|
1625
|
-
|
|
1626
|
-
|
|
1627
|
-
var styles$Z = {"product-price":"product-price-module-oIU1K","original-price":"product-price-module-til0s","is-hidden":"product-price-module-V1NCf","current-price-wrapper":"product-price-module-FfVhl","current-price":"product-price-module-pvy2w","wholes":"product-price-module-GCw07","dot":"product-price-module-N56iV","decimals":"product-price-module-eWOOF","vat":"product-price-module-96DoG"};
|
|
1724
|
+
var styles$Y = {"product-price":"product-price-module-oIU1K","original-price":"product-price-module-til0s","is-hidden":"product-price-module-V1NCf","current-price-wrapper":"product-price-module-FfVhl","current-price":"product-price-module-pvy2w","wholes":"product-price-module-GCw07","dot":"product-price-module-N56iV","decimals":"product-price-module-eWOOF","vat":"product-price-module-96DoG"};
|
|
1628
1725
|
|
|
1629
1726
|
const formatPrice = (price) => new Intl.NumberFormat('en-US', {
|
|
1630
1727
|
maximumFractionDigits: 2,
|
|
@@ -1637,22 +1734,22 @@ function ProductPrice({ className, isVatIncluded, originalPrice, price, }) {
|
|
|
1637
1734
|
const priceWithCurrency = formatPrice(price);
|
|
1638
1735
|
const [wholes, decimals] = priceWithCurrency.split('.');
|
|
1639
1736
|
const showOriginalPrice = priceWithCurrency !== originalPriceWithCurrency;
|
|
1640
|
-
return (jsxs("div", { className: clsx(className, styles$
|
|
1641
|
-
[styles$
|
|
1642
|
-
}), children: originalPriceWithCurrency }), jsxs("div", { className: styles$
|
|
1737
|
+
return (jsxs("div", { className: clsx(className, styles$Y['product-price']), children: [jsx("span", { className: clsx(styles$Y['original-price'], {
|
|
1738
|
+
[styles$Y['is-hidden']]: !showOriginalPrice,
|
|
1739
|
+
}), children: originalPriceWithCurrency }), jsxs("div", { className: styles$Y['current-price-wrapper'], children: [jsxs("div", { className: styles$Y['current-price'], children: [jsx("span", { className: styles$Y.wholes, children: wholes }), jsx("span", { className: styles$Y.dot, children: "." }), jsx("span", { className: styles$Y.decimals, children: decimals })] }), jsx("span", { className: styles$Y.vat, children: isVatIncluded ? (jsx(FormattedMessage, { id: "Incl. VAT" })) : (jsx(FormattedMessage, { id: "Excl. VAT" })) })] })] }));
|
|
1643
1740
|
}
|
|
1644
1741
|
|
|
1645
|
-
var styles$
|
|
1742
|
+
var styles$X = {"product-sku":"product-sku-module-ITb8x"};
|
|
1646
1743
|
|
|
1647
1744
|
function ProductSku({ sku }) {
|
|
1648
|
-
return (jsx("p", { className: styles$
|
|
1745
|
+
return (jsx("p", { className: styles$X['product-sku'], "data-test-selector": "productNumber", children: sku }));
|
|
1649
1746
|
}
|
|
1650
1747
|
|
|
1651
1748
|
function isResponsiveImage(image) {
|
|
1652
1749
|
return Boolean(image?.lg);
|
|
1653
1750
|
}
|
|
1654
1751
|
|
|
1655
|
-
var styles$
|
|
1752
|
+
var styles$W = {"image":"image-module-lg7Kj","contain":"image-module-KFEgG","cover":"image-module-tVKFe","has-error":"image-module-LM93B","picture":"image-module-pNYjR"};
|
|
1656
1753
|
|
|
1657
1754
|
function Image({ className, fallbackSrc = 'https://res.cloudinary.com/dkz9eknwh/image/upload/v1716545808/images/product-card/fallback_p6ngjz.svg', fit = 'cover', height, image, loading = 'eager', title, width, }) {
|
|
1658
1755
|
const [hasError, setHasError] = useState(false);
|
|
@@ -1676,26 +1773,26 @@ function Image({ className, fallbackSrc = 'https://res.cloudinary.com/dkz9eknwh/
|
|
|
1676
1773
|
}
|
|
1677
1774
|
function ImageComponent({ className, fallbackSrc, fit = 'cover', hasError, image, ...rest }) {
|
|
1678
1775
|
if (!image)
|
|
1679
|
-
return (jsx("img", { className: clsx(styles$
|
|
1776
|
+
return (jsx("img", { className: clsx(styles$W.image, className, styles$W[fit], styles$W['has-error']), src: fallbackSrc, ...rest }));
|
|
1680
1777
|
const srcSet = !hasError
|
|
1681
1778
|
? `${image[1]} 1x, ${image[2]} 2x, ${image[3]} 3x`
|
|
1682
1779
|
: undefined;
|
|
1683
|
-
return (jsx("img", { alt: image.altText, className: clsx(styles$
|
|
1684
|
-
[styles$
|
|
1780
|
+
return (jsx("img", { alt: image.altText, className: clsx(styles$W.image, className, styles$W[fit], {
|
|
1781
|
+
[styles$W['has-error']]: hasError,
|
|
1685
1782
|
}), src: !hasError ? image[3] : fallbackSrc, srcSet: srcSet, ...rest }));
|
|
1686
1783
|
}
|
|
1687
1784
|
function PictureComponent({ className, fallbackSrc, fit = 'cover', hasError, image, ...rest }) {
|
|
1688
1785
|
if (!image)
|
|
1689
|
-
return (jsx("picture", { className: clsx(styles$
|
|
1690
|
-
return (jsxs("picture", { className: clsx(styles$
|
|
1691
|
-
[styles$
|
|
1786
|
+
return (jsx("picture", { className: clsx(styles$W.picture, className), children: jsx("img", { className: clsx(styles$W.image, styles$W[fit], styles$W['has-error']), src: fallbackSrc, ...rest }) }));
|
|
1787
|
+
return (jsxs("picture", { className: clsx(styles$W.picture, className), children: [jsx("source", { media: "(max-width: 768px)", srcSet: `${image.sm[1]} 1x, ${image.sm[2]} 2x, ${image.sm[3]} 3x` }), jsx("source", { media: "(max-width: 1439px)", srcSet: `${image.md[1]} 1x, ${image.md[2]} 2x, ${image.md[3]} 3x` }), jsx("source", { media: "(min-width: 1440px)", srcSet: `${image.lg[1]} 1x, ${image.lg[2]} 2x, ${image.lg[3]} 3x` }), jsx("img", { className: clsx(styles$W.image, styles$W[fit], {
|
|
1788
|
+
[styles$W['has-error']]: hasError,
|
|
1692
1789
|
}), src: !hasError ? image.lg[3] : fallbackSrc, ...rest })] }));
|
|
1693
1790
|
}
|
|
1694
1791
|
|
|
1695
|
-
var styles$
|
|
1792
|
+
var styles$V = {"product-card-container":"product-card-module-LepTy","product-card":"product-card-module-pLaiB","favorite-button":"product-card-module-tvEdz","content":"product-card-module-e0kMu","top":"product-card-module-Q0VvF","tag":"product-card-module-HkWBE","title":"product-card-module-CStNi","bottom":"product-card-module-kD2tU","image":"product-card-module-p-zoi","price":"product-card-module-irW0D","add-to-cart-button":"product-card-module-SnCvX"};
|
|
1696
1793
|
|
|
1697
1794
|
function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, href, id, image, onClick, price, sku, tags, title, }) {
|
|
1698
|
-
return (jsx("div", { className: styles$
|
|
1795
|
+
return (jsx("div", { className: styles$V['product-card-container'], children: jsxs(RouteLink, { className: styles$V['product-card'], "data-product-id": sku, href: href, id: id, onClick: onClick, children: [jsx("div", { className: styles$V.image, children: jsx(Image, { ...image }) }), jsx("div", { className: styles$V['favorite-button'], children: FavoriteButton && FavoriteButton }), jsxs("div", { className: styles$V.content, children: [jsxs("div", { className: styles$V.top, children: [jsx("div", { className: styles$V.tag, children: tags?.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { optional: true, fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) }), jsx("h2", { className: styles$V.title, children: title }), jsx(ProductSku, { sku: sku })] }), jsxs("div", { className: styles$V.bottom, children: [jsx("div", { className: styles$V.price, children: jsx(ProductPrice, { isVatIncluded: price.isVatIncluded, originalPrice: price.originalPrice, price: price.price }) }), jsx("div", { className: styles$V['add-to-cart-button'], children: AddToCartButton })] })] })] }) }));
|
|
1699
1796
|
}
|
|
1700
1797
|
|
|
1701
1798
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
@@ -7474,13 +7571,13 @@ function GlyphsArrowBoldCapsLeftIcon(props) {
|
|
|
7474
7571
|
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "11", viewBox: "0 0 11 11", width: "11", children: jsx("path", { d: "M2.31124163,11 C2.06716529,11 1.91839241,10.7730596 2.04771379,10.5980857 L6.08820761,5.13116556 C6.42092595,4.68081431 6.37243043,4.10595375 5.96732409,3.70073526 L2.70240329,0.432177991 C2.53178078,0.261409485 2.67540212,0 2.93972934,0 L5.48361239,0 C5.57518542,0 5.6619622,0.0340936243 5.72102726,0.0931942463 L8.14882304,2.52367916 C9.1607451,3.53657521 9.28198389,4.9729381 8.45036569,6.09787751 L4.91836426,10.876542 C4.86160851,10.9533653 4.7620417,11 4.65492523,11 L2.31124163,11 Z", fillRule: "evenodd", transform: "matrix(-1 0 0 1 11 0)" }) }));
|
|
7475
7572
|
}
|
|
7476
7573
|
|
|
7477
|
-
var styles$
|
|
7574
|
+
var styles$U = {"carousel-navigation-button":"carousel-navigation-button-module-a1-I4"};
|
|
7478
7575
|
|
|
7479
7576
|
const CarouselNavigationButton = forwardRef(function NavigationButton({ className, direction, onClick }, ref) {
|
|
7480
|
-
return (jsx("button", { ref: ref, className: clsx(styles$
|
|
7577
|
+
return (jsx("button", { ref: ref, className: clsx(styles$U['carousel-navigation-button'], className), onClick: () => onClick?.(direction), children: direction === 'previous' ? (jsx(GlyphsArrowBoldCapsLeftIcon, {})) : (jsx(GlyphsArrowBoldCapsRightIcon, {})) }));
|
|
7481
7578
|
});
|
|
7482
7579
|
|
|
7483
|
-
var styles$
|
|
7580
|
+
var styles$T = {"carousel":"carousel-module-ealh-","swiper":"carousel-module-IftbN","is-ready":"carousel-module-RCpfc","has-overflow":"carousel-module-tPg7k","slide":"carousel-module-bUMlb","navigation-button-next":"carousel-module-T7bTr","is-dragging":"carousel-module-34OWD","navigation-button-prev":"carousel-module-984Rr","navigation-buttons":"carousel-module-k7Z4S","navigation-button":"carousel-module-kcqEE","top":"carousel-module-nL-O8","center":"carousel-module-5SGYn"};
|
|
7484
7581
|
|
|
7485
7582
|
function generateSlidesPerViewBreakpoints(slidesPerView) {
|
|
7486
7583
|
return Object.keys(slidesPerView).reduce((result, breakpoint) => ({
|
|
@@ -7519,12 +7616,12 @@ function Carousel({ breakpoints: _breakpoints, className, hasNavigation = true,
|
|
|
7519
7616
|
}
|
|
7520
7617
|
if (slides.length === 0)
|
|
7521
7618
|
return null;
|
|
7522
|
-
return (jsxs("div", { className: clsx(styles$
|
|
7619
|
+
return (jsxs("div", { className: clsx(styles$T.carousel, className), style: spaceBetween !== undefined
|
|
7523
7620
|
? { '--column-gap': `${spaceBetween}px` }
|
|
7524
|
-
: undefined, children: [jsx(Swiper, { breakpoints: _breakpoints, className: clsx(styles$
|
|
7525
|
-
[styles$
|
|
7526
|
-
[styles$
|
|
7527
|
-
[styles$
|
|
7621
|
+
: undefined, children: [jsx(Swiper, { breakpoints: _breakpoints, className: clsx(styles$T.swiper, {
|
|
7622
|
+
[styles$T['is-dragging']]: isDragging,
|
|
7623
|
+
[styles$T['has-overflow']]: hasOverflow,
|
|
7624
|
+
[styles$T['is-ready']]: isReady,
|
|
7528
7625
|
}), freeMode: {
|
|
7529
7626
|
enabled: false,
|
|
7530
7627
|
sticky: true,
|
|
@@ -7535,19 +7632,19 @@ function Carousel({ breakpoints: _breakpoints, className, hasNavigation = true,
|
|
|
7535
7632
|
}, onBeforeInit: swiper => (swiperRef.current = swiper), onSliderMove: () => setIsDragging(true), onSlidesUpdated: () => {
|
|
7536
7633
|
if (!isReady)
|
|
7537
7634
|
setIsReady(true);
|
|
7538
|
-
}, onTouchEnd: () => setIsDragging(false), slidesPerGroupAuto: slidesPerView === 'auto', slidesPerView: slidesPerView, spaceBetween: spaceBetween, children: slides.map((slide, index) => (jsx(SwiperSlide, { className: clsx(styles$
|
|
7635
|
+
}, onTouchEnd: () => setIsDragging(false), slidesPerGroupAuto: slidesPerView === 'auto', slidesPerView: slidesPerView, spaceBetween: spaceBetween, children: slides.map((slide, index) => (jsx(SwiperSlide, { className: clsx(styles$T.slide, slideClasses), children: slide }, index))) }), hasNavigation && (jsxs("div", { className: clsx(styles$T['navigation-buttons'], styles$T[navigationButtonsPosition]), children: [jsx(CarouselNavigationButton, { ref: prevEl, className: clsx(styles$T['navigation-button'], styles$T['navigation-button-prev']), direction: "previous", onClick: direction => handleNavigationButtonClick(direction) }), jsx(CarouselNavigationButton, { ref: nextEl, className: clsx(styles$T['navigation-button'], styles$T['navigation-button-next']), direction: "next", onClick: direction => handleNavigationButtonClick(direction) })] }))] }));
|
|
7539
7636
|
}
|
|
7540
7637
|
|
|
7541
|
-
var styles$
|
|
7638
|
+
var styles$S = {"slide":"category-carousel-module-muLq-"};
|
|
7542
7639
|
|
|
7543
7640
|
function CategoryCarousel({ categoryCards }) {
|
|
7544
|
-
return jsx(Carousel, { slideClasses: styles$
|
|
7641
|
+
return jsx(Carousel, { slideClasses: styles$S.slide, slides: categoryCards });
|
|
7545
7642
|
}
|
|
7546
7643
|
|
|
7547
|
-
var styles$
|
|
7644
|
+
var styles$R = {"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","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"};
|
|
7548
7645
|
|
|
7549
7646
|
function Accordion({ borderType = 'bottom', children, color = 'black', hasLineSeparator = true, indented, size = 'md', }) {
|
|
7550
|
-
return (jsx("div", { className: clsx({ [styles$
|
|
7647
|
+
return (jsx("div", { className: clsx({ [styles$R.indented]: indented }, styles$R.accordion, styles$R[color], styles$R[size], hasLineSeparator && styles$R['with-seperators']), children: Boolean(children) &&
|
|
7551
7648
|
Children.map(children, child => {
|
|
7552
7649
|
if (!child)
|
|
7553
7650
|
return null;
|
|
@@ -7584,7 +7681,7 @@ function useResizeObserver(resizeCallback) {
|
|
|
7584
7681
|
};
|
|
7585
7682
|
}
|
|
7586
7683
|
|
|
7587
|
-
var styles$
|
|
7684
|
+
var styles$Q = {"show-all":"show-all-module-BDp21","panel":"show-all-module-bEdda","content":"show-all-module-RF--F","has-transparency":"show-all-module-30y7l","button":"show-all-module-58e7Q","icon":"show-all-module-fqncI","is-open":"show-all-module-hQeGI","content-fits":"show-all-module-OhPfm"};
|
|
7588
7685
|
|
|
7589
7686
|
function ShowAll({ children, hasTransparency = true, initialHeight = 0, initialIsOpen = false, isOpen: isControlledOpen, onToggle, }) {
|
|
7590
7687
|
const isControlled = isControlledOpen !== undefined && onToggle !== undefined;
|
|
@@ -7595,23 +7692,23 @@ function ShowAll({ children, hasTransparency = true, initialHeight = 0, initialI
|
|
|
7595
7692
|
const { ref } = useResizeObserver((_target, size) => {
|
|
7596
7693
|
setContentFits((size.height || 0) <= initialHeight);
|
|
7597
7694
|
});
|
|
7598
|
-
return (jsxs("div", { ref: showAllRef, className: clsx(styles$
|
|
7599
|
-
[styles$
|
|
7600
|
-
[styles$
|
|
7601
|
-
}), style: contentFits ? undefined : { '--initital-height': `${initialHeight}px` }, children: [jsx("div", { className: styles$
|
|
7602
|
-
[styles$
|
|
7603
|
-
}), children: jsx("div", { ref: ref, children: children }) }) }), !contentFits && (jsxs(RouteLink, { className: styles$
|
|
7695
|
+
return (jsxs("div", { ref: showAllRef, className: clsx(styles$Q['show-all'], {
|
|
7696
|
+
[styles$Q['content-fits']]: contentFits,
|
|
7697
|
+
[styles$Q['is-open']]: isReallyOpen,
|
|
7698
|
+
}), style: contentFits ? undefined : { '--initital-height': `${initialHeight}px` }, children: [jsx("div", { className: styles$Q.panel, children: jsx("div", { className: clsx(styles$Q.content, {
|
|
7699
|
+
[styles$Q['has-transparency']]: !contentFits && hasTransparency,
|
|
7700
|
+
}), children: jsx("div", { ref: ref, children: children }) }) }), !contentFits && (jsxs(RouteLink, { className: styles$Q.button, color: "secondary", onClick: () => {
|
|
7604
7701
|
if (isControlled)
|
|
7605
7702
|
return onToggle(!isControlled);
|
|
7606
7703
|
toggle();
|
|
7607
|
-
}, children: [jsx(GlyphsChevronsSlimDownIcon, { className: styles$
|
|
7704
|
+
}, children: [jsx(GlyphsChevronsSlimDownIcon, { className: styles$Q.icon }), isReallyOpen ? (jsx(FormattedMessage, { id: "Show less" })) : (jsx(FormattedMessage, { id: "Show all" }))] }))] }));
|
|
7608
7705
|
}
|
|
7609
7706
|
|
|
7610
7707
|
function StrokeCheckmarkIcon(props) {
|
|
7611
7708
|
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: "M10.8641425,17 C10.6636971,17 10.4855234,16.9548533 10.3296214,16.8645598 C10.1737194,16.7742664 10.0252413,16.6388262 9.88418708,16.4582393 L6.27839644,12.2189616 C6.09279881,11.9857035 6,11.744921 6,11.496614 C6,11.2332581 6.08723088,11.0094056 6.26169265,10.8250564 C6.43615442,10.6407073 6.65330364,10.5485327 6.91314031,10.5485327 C7.06904232,10.5485327 7.21195249,10.5823928 7.34187082,10.6501129 C7.47178916,10.717833 7.59985152,10.8382242 7.72605791,11.0112867 L10.8195991,14.7200903 L16.2405345,6.53047404 C16.4558278,6.17682468 16.7230883,6 17.0423163,6 C17.2873051,6 17.5081663,6.08088789 17.7048998,6.24266366 C17.9016333,6.40443943 18,6.61700527 18,6.88036117 C18,7.00075245 17.9721604,7.12302483 17.9164811,7.24717833 C17.8608018,7.37133183 17.7958426,7.48984199 17.7216036,7.6027088 L11.7884187,16.4469526 C11.5582777,16.8156509 11.2501856,17 10.8641425,17 Z", fillRule: "evenodd" }) }));
|
|
7612
7709
|
}
|
|
7613
7710
|
|
|
7614
|
-
var styles$
|
|
7711
|
+
var styles$P = {"select":"select-module-ui-Wc","sm":"select-module-44a1l","md":"select-module-QUm-8","button":"select-module-aMQIQ","chevron":"select-module-00uRU","focus":"select-module-XMc0P","solid":"select-module-IRd4F","popover":"select-module-z8cWq","listbox":"select-module-S21ba","header":"select-module-4Bm2j","item":"select-module-LgEJO","check":"select-module-lQFw3"};
|
|
7615
7712
|
|
|
7616
7713
|
function Select({ isDisabled = false, label, onChange, options, placeholder, selectedOption, showLabel = true, showPlaceholder = true, size = 'md', variant = 'outline', }) {
|
|
7617
7714
|
const selectRef = useRef(null);
|
|
@@ -7628,24 +7725,20 @@ function Select({ isDisabled = false, label, onChange, options, placeholder, sel
|
|
|
7628
7725
|
window.addEventListener('resize', updateWidth);
|
|
7629
7726
|
return () => window.removeEventListener('resize', updateWidth);
|
|
7630
7727
|
}, []);
|
|
7631
|
-
return (jsxs(Select$1, { ref: selectRef, "aria-label": label, className: clsx(styles$
|
|
7728
|
+
return (jsxs(Select$1, { ref: selectRef, "aria-label": label, className: clsx(styles$P.select, styles$P[size], styles$P[variant]), isDisabled: isDisabled, onSelectionChange: selected => onChange(selected), placeholder: placeholder || label, selectedKey: String(selectedOption), children: [showLabel && jsx(Label, { children: label }), jsxs(Button$1, { className: styles$P.button, children: [jsx(SelectValue, {}), jsx(GlyphsChevronsSlimDownIcon, { "aria-hidden": "true", className: styles$P.chevron })] }), jsx(Popover, { ref: ref =>
|
|
7632
7729
|
// Workaround for react/react-aria #1513
|
|
7633
|
-
ref?.addEventListener('touchend', e => e.preventDefault()), className: clsx(styles$
|
|
7634
|
-
}
|
|
7635
|
-
|
|
7636
|
-
function StrokeCloseboxIcon(props) {
|
|
7637
|
-
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M8,8 L16,16 M16,8 L8,16", fill: "currentColor", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.4" }) }));
|
|
7730
|
+
ref?.addEventListener('touchend', e => e.preventDefault()), className: clsx(styles$P.popover, styles$P[variant]), placement: "bottom left", triggerRef: selectRef, children: jsx(ListBox, { className: styles$P.listbox, children: jsxs(Section, { children: [showPlaceholder && (jsx(Header, { className: styles$P.header, children: placeholder || label })), Object.entries(options).map(([key, value]) => (jsxs(ListBoxItem, { "aria-label": value, className: styles$P.item, id: key, textValue: value, children: [selectedOption === key && (jsx("span", { slot: "description", children: jsx(StrokeCheckmarkIcon, { className: styles$P.check }) })), jsx("span", { slot: "label", children: value })] }, key)))] }) }) })] }));
|
|
7638
7731
|
}
|
|
7639
7732
|
|
|
7640
|
-
var styles$
|
|
7733
|
+
var styles$O = {"modal-overlay":"modal-module-rVFJc","modal-fade":"modal-module-63Uyl","is-full-screen":"modal-module-uwets","modal":"modal-module-6vlFt","content":"modal-module-FJxzx","modal-slide":"modal-module-jkAe7","modal-delayed-fade":"modal-module-WOZ01","close":"modal-module-7zIZE","modal-zoom":"modal-module-aPJ7X"};
|
|
7641
7734
|
|
|
7642
7735
|
function Modal({ children, className, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, }) {
|
|
7643
|
-
return (jsx(ModalOverlay, { className: clsx(styles$
|
|
7644
|
-
[styles$
|
|
7645
|
-
}), children: jsx("div", { className: styles$
|
|
7736
|
+
return (jsx(ModalOverlay, { className: clsx(styles$O['modal-overlay'], className), isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, children: jsx(Modal$1, { className: clsx(styles$O.modal, {
|
|
7737
|
+
[styles$O['is-full-screen']]: isFullScreen,
|
|
7738
|
+
}), children: jsx("div", { className: styles$O.content, children: children }) }) }));
|
|
7646
7739
|
}
|
|
7647
7740
|
|
|
7648
|
-
var styles$
|
|
7741
|
+
var styles$N = {"heading":"heading-module-pMC65","uppercase":"heading-module-6spgX","italic":"heading-module-XXMDM","bold":"heading-module-xvrxo","xxl":"heading-module-Kn3ZN","xl":"heading-module--hZs-","l":"heading-module-WrJRY","m":"heading-module-hTexc","s":"heading-module-7W29m","xs":"heading-module-SgaLB","xxs":"heading-module-33en7"};
|
|
7649
7742
|
|
|
7650
7743
|
const sizeToTag = {
|
|
7651
7744
|
l: 'h3',
|
|
@@ -7658,24 +7751,24 @@ const sizeToTag = {
|
|
|
7658
7751
|
};
|
|
7659
7752
|
function Heading({ bold = true, children, className, italic, size = 'xxl', tag, uppercase, }) {
|
|
7660
7753
|
return createElement$1(tag || sizeToTag[size], {
|
|
7661
|
-
className: clsx(className, styles$
|
|
7662
|
-
[styles$
|
|
7663
|
-
[styles$
|
|
7664
|
-
[styles$
|
|
7754
|
+
className: clsx(className, styles$N.heading, styles$N[size], {
|
|
7755
|
+
[styles$N.uppercase]: uppercase,
|
|
7756
|
+
[styles$N.italic]: italic,
|
|
7757
|
+
[styles$N.bold]: bold,
|
|
7665
7758
|
}),
|
|
7666
7759
|
}, children);
|
|
7667
7760
|
}
|
|
7668
7761
|
|
|
7669
|
-
var styles$
|
|
7762
|
+
var styles$M = {"dialog":"dialog-module-qKzgy","header":"dialog-module-ZnsAe","close":"dialog-module-Y7Tqg","footer":"dialog-module-y7Axm"};
|
|
7670
7763
|
|
|
7671
7764
|
function Footer({ close }) {
|
|
7672
7765
|
return (jsxs(Fragment, { children: [jsx(Button, { withArrow: true, color: "primary", size: "md", type: "submit", children: "Submit" }), jsx(Button, { color: "secondary", onClick: close, size: "md", variant: "outline", children: "Close" })] }));
|
|
7673
7766
|
}
|
|
7674
7767
|
function Dialog({ allowClose = true, children, className, dialogClassName, footer = Footer, hasCloseButton = true, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, title, validationErrors, }) {
|
|
7675
|
-
return (jsx(Modal, { className: clsx(styles$
|
|
7768
|
+
return (jsx(Modal, { className: clsx(styles$M['modal-overlay'], className), isDismissable: isDismissable, isFullScreen: isFullScreen, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, children: jsx(Dialog$1, { "aria-label": title, className: clsx(styles$M.dialog, dialogClassName), children: ({ close }) => (jsxs(Form, { className: styles$M.form, onSubmit: onSubmit || (e => e.preventDefault), validationErrors: validationErrors, children: [jsxs("header", { className: styles$M.header, children: [!hideTitle && (jsx(Heading, { className: styles$M.heading, size: "xs", children: title })), hasCloseButton && (jsx("div", { className: styles$M.close, children: jsx(IconButton, { color: "secondary", isDisabled: !allowClose, onClick: close, children: jsx(StrokeCloseboxIcon, {}) }) }))] }), jsx("div", { className: styles$M.content, children: children instanceof Function ? children({ close }) : children }), jsx("footer", { className: styles$M.footer, children: footer instanceof Function ? footer({ close }) : footer })] })) }) }));
|
|
7676
7769
|
}
|
|
7677
7770
|
|
|
7678
|
-
var styles$
|
|
7771
|
+
var styles$L = {"country-selector-dialog":"country-selector-dialog-module-mMJS0","content":"country-selector-dialog-module-z-ZqY","logo":"country-selector-dialog-module-7VjsF","intro":"country-selector-dialog-module-IdVDt","selects":"country-selector-dialog-module-Nvikf"};
|
|
7679
7772
|
|
|
7680
7773
|
function CountrySelectorDialog({ countries, isOpen, onSubmit, selectedCountry, selectedLanguage, showCountry = true, }) {
|
|
7681
7774
|
const t = useFormattedMessage();
|
|
@@ -7697,15 +7790,15 @@ function CountrySelectorDialog({ countries, isOpen, onSubmit, selectedCountry, s
|
|
|
7697
7790
|
setCurrentLanguage(fallbackLanguage);
|
|
7698
7791
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
7699
7792
|
}, [currentCountry]);
|
|
7700
|
-
return (jsx(Dialog, { hideTitle: true, allowClose: true, className: styles$
|
|
7793
|
+
return (jsx(Dialog, { hideTitle: true, allowClose: true, className: styles$L.modal, dialogClassName: styles$L['country-selector-dialog'], footer: jsx(Button, { withArrow: true, type: "submit", children: jsx(FormattedMessage, { id: "Save" }) }), hasCloseButton: false, isOpen: isOpen, onOpenChange: () => { }, onSubmit: e => {
|
|
7701
7794
|
onSubmit({ country: currentCountry, language: currentLanguage });
|
|
7702
7795
|
e.preventDefault();
|
|
7703
7796
|
e.stopPropagation();
|
|
7704
|
-
}, title: "Country Selector", children: jsxs("div", { className: styles$
|
|
7797
|
+
}, title: "Country Selector", children: jsxs("div", { className: styles$L.content, children: [jsx("svg", { className: styles$L.logo, height: "32", viewBox: "0 0 134 32", width: "134", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { fill: "none", fillRule: "evenodd", children: [jsx("path", { d: "M15.83 11.533c2.42 0 4.382 1.977 4.382 4.415 0 8.794-7.1 15.95-15.83 15.95C1.963 31.897 0 29.92 0 27.481c0-2.354 1.83-4.278 4.134-4.408l.249-.007c3.797 0 6.905-3.036 7.058-6.826l.006-.293c0-2.438 1.963-4.415 4.383-4.415zM15.83 0c2.42 0 4.383 1.977 4.383 4.415 0 2.355-1.83 4.279-4.134 4.409l-.249.007c-3.8 0-6.906 3.035-7.059 6.824l-.006.293c0 2.438-1.962 4.415-4.382 4.415S0 18.386 0 15.948C0 7.154 7.101 0 15.83 0zm8.208 16.022c0 8.794 7.101 15.95 15.83 15.95s15.83-7.156 15.83-15.95S48.597.074 39.868.074s-15.83 7.154-15.83 15.948zm8.765 0c0-3.924 3.169-7.118 7.065-7.118 3.895 0 7.065 3.194 7.065 7.118 0 3.926-3.17 7.119-7.065 7.119-3.896 0-7.065-3.193-7.065-7.12zm76.888-11.276c-6.173 6.217-6.173 16.335-.002 22.553 6.173 6.217 16.215 6.217 22.388 0a4.44 4.44 0 0 0 .001-6.244 4.359 4.359 0 0 0-6.003-.184l-.194.184a7.04 7.04 0 0 1-9.994 0c-2.753-2.775-2.753-7.29.002-10.065a7.036 7.036 0 0 1 9.751-.233l.24.231a4.36 4.36 0 0 0 6.198 0 4.44 4.44 0 0 0-.001-6.245c-6.173-6.217-16.215-6.216-22.386.003zm-17.162-.174v22.863c0 2.439 1.961 4.416 4.381 4.416 2.422 0 4.384-1.977 4.384-4.416V4.572c0-2.439-1.962-4.416-4.384-4.416-2.42 0-4.38 1.977-4.38 4.416zM64.1.1c-2.42 0-4.383 1.977-4.383 4.415v23.07c0 2.438 1.962 4.415 4.382 4.415s4.383-1.977 4.383-4.415V8.93h3.933c3.895 0 7.065 3.192 7.065 7.118v11.537c0 2.438 1.962 4.415 4.382 4.415s4.383-1.977 4.383-4.415V16.048C88.244 7.254 81.143.1 72.414.1h-8.316z", fill: "#000" }), jsx("path", { d: "M47.036 16.022c0 3.99-3.209 7.222-7.168 7.222-3.96 0-7.169-3.233-7.169-7.222 0-3.989 3.21-7.222 7.169-7.222 3.96 0 7.168 3.233 7.168 7.222", fill: "#E30613" })] }) }), jsx("p", { className: styles$L.intro, children: jsx(FormattedMessage, { id: "Welcome to Sonic Equipment. Please choose your country and language below." }) }), jsxs("div", { className: styles$L.selects, children: [showCountry && (jsx(Select, { label: t('Country'), onChange: value => setCurrentCountry(countries.find(country => country.id === value) ||
|
|
7705
7798
|
currentCountry), options: countryOptions, selectedOption: currentCountry.id, showPlaceholder: false, variant: "solid" })), jsx(Select, { label: t('Language'), onChange: value => setCurrentLanguage(currentCountry.languages.find(language => language.id === value) || currentLanguage), options: languageOptions, selectedOption: currentLanguage.id, showPlaceholder: false, variant: "solid" })] })] }) }));
|
|
7706
7799
|
}
|
|
7707
7800
|
|
|
7708
|
-
var styles$
|
|
7801
|
+
var styles$K = {"country-selector-trigger":"country-selector-trigger-module-aioDu","flag":"country-selector-trigger-module-zOSJK","text":"country-selector-trigger-module-TE8tl","divider":"country-selector-trigger-module-GNRDD"};
|
|
7709
7802
|
|
|
7710
7803
|
function CountrySelectorTrigger({ onClick, selectedCountry, selectedLanguage, showCountry = true, }) {
|
|
7711
7804
|
const t = useFormattedMessage();
|
|
@@ -7713,7 +7806,7 @@ function CountrySelectorTrigger({ onClick, selectedCountry, selectedLanguage, sh
|
|
|
7713
7806
|
return;
|
|
7714
7807
|
const abbreviation = selectedCountry.abbreviation.toLowerCase();
|
|
7715
7808
|
const flagSrc = `https://res.cloudinary.com/dkz9eknwh/image/upload/v1729678637/images/flags/${abbreviation}.svg`;
|
|
7716
|
-
return (jsxs("button", { "aria-label": "Open country selector dialog", className: styles$
|
|
7809
|
+
return (jsxs("button", { "aria-label": "Open country selector dialog", className: styles$K['country-selector-trigger'], onClick: onClick, type: "button", children: [jsx(Image, { className: styles$K.flag, height: 24, image: { 1: flagSrc, 2: flagSrc, 3: flagSrc, altText: abbreviation }, title: abbreviation, width: 24 }), jsxs("div", { className: styles$K.text, children: [showCountry && (jsxs(Fragment, { children: [jsx("span", { children: t(`clSelector.${selectedCountry.name}`) }), jsx("span", { className: styles$K.divider, children: "-" })] })), jsx("span", { children: selectedLanguage.description })] })] }));
|
|
7717
7810
|
}
|
|
7718
7811
|
|
|
7719
7812
|
async function fetchCountriesLanguages() {
|
|
@@ -7911,7 +8004,7 @@ function CountrySelector({ defaultCountryCode, defaultLanguageCode, onChange, sh
|
|
|
7911
8004
|
}, selectedCountry: selectedCountry || defaultCountry, selectedLanguage: selectedLanguage || defaultLanguage, showCountry: showCountry })] }));
|
|
7912
8005
|
}
|
|
7913
8006
|
|
|
7914
|
-
var styles$
|
|
8007
|
+
var styles$J = {"multi-select":"multi-select-module-DC7Ix","filter-item":"multi-select-module-OW-NK"};
|
|
7915
8008
|
|
|
7916
8009
|
function MultiSelect({ amountShown = 3, onChange, options, render, }) {
|
|
7917
8010
|
const shownOptions = options.slice(0, amountShown);
|
|
@@ -7922,24 +8015,24 @@ function MultiSelect({ amountShown = 3, onChange, options, render, }) {
|
|
|
7922
8015
|
options.filter(option => option.isSelected).length === 0) {
|
|
7923
8016
|
return null;
|
|
7924
8017
|
}
|
|
7925
|
-
return (jsxs("div", { className: styles$
|
|
8018
|
+
return (jsxs("div", { className: styles$J['multi-select'], children: [jsx("div", { className: styles$J['filter-items'], children: shownOptions
|
|
7926
8019
|
.concat(isOpen ? [] : hiddenSelectedOptions)
|
|
7927
|
-
.map(option => (jsxs("div", { className: styles$
|
|
8020
|
+
.map(option => (jsxs("div", { className: styles$J['filter-item'], children: [render({ onChange: () => onChange(option), option }), jsxs("span", { children: ["(", option.amount, ")"] })] }, option.value))) }), hiddenOptions.length > 0 && (jsx(ShowAll, { hasTransparency: false, isOpen: isOpen, onToggle: toggle, children: jsx("div", { className: clsx(styles$J['filter-items'], styles$J['hidden']), children: hiddenOptions.map(option => (jsxs("div", { className: styles$J['filter-item'], children: [render({ onChange: () => onChange(option), option }), jsxs("span", { children: ["(", option.amount, ")"] })] }, option.value))) }) }))] }));
|
|
7928
8021
|
}
|
|
7929
8022
|
|
|
7930
|
-
var styles$
|
|
8023
|
+
var styles$I = {"checkbox":"checkbox-module-YNVdd","box":"checkbox-module-UKoyf","checkmark":"checkbox-module-pHIwh","focus":"checkbox-module-v23jy","active":"checkbox-module-7UG-b","color-checkbox":"checkbox-module-nEhvW"};
|
|
7931
8024
|
|
|
7932
8025
|
function Checkbox({ _pseudo = 'none', children, className, isDisabled, isSelected, onChange, value, }) {
|
|
7933
|
-
return (jsxs(Checkbox$1, { className: clsx(className, styles$
|
|
8026
|
+
return (jsxs(Checkbox$1, { className: clsx(className, styles$I.checkbox, styles$I[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, value: value, children: [jsx("div", { className: styles$I.box, children: jsx("svg", { "aria-hidden": "true", className: styles$I.checkmark, viewBox: "0 0 18 18", children: jsx("polyline", { points: "1 9 7 14 15 4" }) }) }), children] }));
|
|
7934
8027
|
}
|
|
7935
8028
|
|
|
7936
8029
|
function ColorCheckbox({ _pseudo = 'none', children, className, color, isDisabled, isSelected, onChange, value, }) {
|
|
7937
|
-
return (jsxs(Checkbox$1, { className: clsx(className, styles$
|
|
8030
|
+
return (jsxs(Checkbox$1, { className: clsx(className, styles$I.checkbox, styles$I['color-checkbox'], styles$I[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, style: {
|
|
7938
8031
|
'--selected-color': color,
|
|
7939
|
-
}, value: value, children: [jsx("div", { className: styles$
|
|
8032
|
+
}, value: value, children: [jsx("div", { className: styles$I.box }), children] }));
|
|
7940
8033
|
}
|
|
7941
8034
|
|
|
7942
|
-
var styles$
|
|
8035
|
+
var styles$H = {"input-container":"textarea-module-C6Xr1","lg":"textarea-module-vksG-","md":"textarea-module-6JrQJ"};
|
|
7943
8036
|
|
|
7944
8037
|
/**
|
|
7945
8038
|
* This component is used to create a textarea that can grow as the user types.
|
|
@@ -7974,7 +8067,7 @@ const TextArea = forwardRef(({ autoGrow, size, ...textAreaProps }, _ref) => {
|
|
|
7974
8067
|
}
|
|
7975
8068
|
updateHeight();
|
|
7976
8069
|
}, [ref, autoGrow, updateHeight, size]);
|
|
7977
|
-
return (jsx("div", { className: styles$
|
|
8070
|
+
return (jsx("div", { className: styles$H['input-container'], children: jsx(TextArea$1, { ...textAreaProps, ref: node => {
|
|
7978
8071
|
ref.current =
|
|
7979
8072
|
node;
|
|
7980
8073
|
textAreaRef.current = node;
|
|
@@ -7985,7 +8078,7 @@ const TextArea = forwardRef(({ autoGrow, size, ...textAreaProps }, _ref) => {
|
|
|
7985
8078
|
});
|
|
7986
8079
|
TextArea.displayName = 'TextArea';
|
|
7987
8080
|
|
|
7988
|
-
var styles$
|
|
8081
|
+
var styles$G = {"field":"text-field-module-JeaK0"};
|
|
7989
8082
|
|
|
7990
8083
|
/**
|
|
7991
8084
|
* This component is used to create a text field.
|
|
@@ -7993,7 +8086,7 @@ var styles$H = {"field":"text-field-module-JeaK0"};
|
|
|
7993
8086
|
* This field can also grow when a user types in text.
|
|
7994
8087
|
*/
|
|
7995
8088
|
function TextField({ autoFocus, autoGrow, defaultValue, isDisabled, isInvalid, isMultiline, isReadOnly, isRequired, label, maxLength, name, onChange, onInput, onKeyUp, placeholder, rows, showLabel = false, size = 'lg', value, }) {
|
|
7996
|
-
return (jsxs(TextField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$
|
|
8089
|
+
return (jsxs(TextField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$G.field, styles$G[size]), defaultValue: defaultValue, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxLength: maxLength, name: name, onChange: value => {
|
|
7997
8090
|
onChange?.(value);
|
|
7998
8091
|
}, onInput: onInput, onKeyUp: e => onKeyUp?.(e), value: value, children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), isMultiline ? (jsx(TextArea, { autoGrow: autoGrow, placeholder: placeholder, rows: rows, size: size })) : (jsx(Input, { autoGrow: autoGrow, placeholder: placeholder, size: size })), jsx(FieldError, {})] }));
|
|
7999
8092
|
}
|
|
@@ -8003,22 +8096,22 @@ function IntlProvider({ children, formatMessage, languageCode: _languageCode, })
|
|
|
8003
8096
|
return (jsx(IntlContext.Provider, { value: { formatMessage, languageCode, updateLanguageCode }, children: children }));
|
|
8004
8097
|
}
|
|
8005
8098
|
|
|
8006
|
-
var styles$
|
|
8099
|
+
var styles$F = {"progress-circle":"progress-circle-module-4nweP","spin":"progress-circle-module-kCf7K"};
|
|
8007
8100
|
|
|
8008
8101
|
function ProgressCircle({ className }) {
|
|
8009
|
-
return (jsxs("svg", { className: clsx(styles$
|
|
8102
|
+
return (jsxs("svg", { className: clsx(styles$F['progress-circle'], className), viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: [jsx("title", { children: "Spinner" }), jsxs("defs", { children: [jsx("pattern", { height: "100%", id: "pattern-1", patternUnits: "objectBoundingBox", width: "100%", children: jsx("use", { xlinkHref: "#image-2" }) }), jsx("image", { height: "24", id: "image-2", width: "24", xlinkHref: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAAB7UlEQVRIDZ2VSaoCQQyG01rOoBtBr+YZXXsFL+BGEHcqDuCE89SPL480hdpiGYil3an/S1KDUavViq/Xq1wul8RPp5Ocz2dhPB6PiR8OB42RAHO5XE7D4zgW/PF4CM/u97tks1n1TCYjURSpB2hraALglw8BQGXOuQQSKk68y+fzL9lRBQAqAUIlVkUoxBUKBZ3sC1irbrdbUoX/PgTyAqDXmFVBBVRCFfYuGMBk67UvRCUA2FFAfgKUSiWhFTgQA9ESjLVgC7NWwEPNFYtFFUEICJnigAxCFbvd7jcAFVi/gbDoCALmOzCMAzebzUILEFculxVgOwcIDqRSqaiTBDadToMhziYDwBgNRmW0rdFoSLPZ1PeDwUDHbz+iTqejyv5VYHuekbVggavVqkLq9fq32hqnLTJxdgmijPQeYSqs1Woa3G63g8QJ1haZKMJkjDgLjLi/Nbvd7m8ARCxry9x2jyn2ej2ZTCb28+tRK/Azpy3vrN/vy2azeffq4zM9aLTFP1jPM4bDoWbPH06o6WXn9/lZgDMxGo1kuVwG/5uhlfkkTsB4PJb5fC7b7VYPH89C7P9GS5nBLYr4er2W/X6vhy4lNPXxR8BisdDWkD13Ee0KtVQAgqvVSncO2XNlc3WEWirAxLmmgf0K+ANZ6DTlvO5jwwAAAABJRU5ErkJggg==" })] }), jsx("g", { fill: "none", fillRule: "evenodd", id: "Page-1", stroke: "none", strokeWidth: "1", children: jsx("path", { d: "M12,0 C18.627417,0 24,5.372583 24,12 C24,14.7277828 23.0855773,17.3196292 21.4324752,19.4188392 C19.1717866,22.2895997 15.7255176,24 12,24 C11.2636203,24 10.6666667,23.4030463 10.6666667,22.6666667 C10.6666667,21.930287 11.2636203,21.3333333 12,21.3333333 C14.8994206,21.3333333 17.5771113,20.0043823 19.3374325,17.7690188 C20.6234737,16.1359252 21.3333333,14.1238938 21.3333333,12 C21.3333333,6.84534234 17.1546577,2.66666667 12,2.66666667 C6.84534234,2.66666667 2.66666667,6.84534234 2.66666667,12 C2.66666667,14.4546154 3.61656005,16.756214 5.28844833,18.485859 C5.80023235,19.015323 5.78589988,19.8594213 5.25643588,20.3712053 C4.72697187,20.8829893 3.88287357,20.8686569 3.37108955,20.3391928 C1.22326178,18.1171666 0,15.1531945 0,12 C0,5.372583 5.372583,0 12,0 Z", fill: "url(#pattern-1)", fillRule: "nonzero", id: "Spinner" }) })] }));
|
|
8010
8103
|
}
|
|
8011
8104
|
|
|
8012
|
-
var styles$
|
|
8105
|
+
var styles$E = {"product-grid":"product-overview-grid-module-bzys-","loading-panel":"product-overview-grid-module-XikkF","fade-in":"product-overview-grid-module-A6CS7","progress-circle":"product-overview-grid-module-DWnnI","fade-in-spinner":"product-overview-grid-module-r-wvY","grid-item":"product-overview-grid-module-MlUVA"};
|
|
8013
8106
|
|
|
8014
8107
|
function ProductOverviewGrid({ children, isLoading, }) {
|
|
8015
|
-
return (jsxs("div", { className: styles$
|
|
8108
|
+
return (jsxs("div", { className: styles$E['product-grid'], children: [Children.map(children, (child, index) => (jsx("div", { className: styles$E['grid-item'], children: child }, index))), isLoading && (jsx("div", { className: styles$E['loading-panel'], children: jsx(ProgressCircle, { className: styles$E['progress-circle'] }) }))] }));
|
|
8016
8109
|
}
|
|
8017
8110
|
|
|
8018
|
-
var styles$
|
|
8111
|
+
var styles$D = {"loading-overlay":"loading-overlay-module-L67Gy"};
|
|
8019
8112
|
|
|
8020
8113
|
function LoadingOverlay() {
|
|
8021
|
-
return (jsx("div", { className: styles$
|
|
8114
|
+
return (jsx("div", { className: styles$D['loading-overlay'], children: jsx(ProgressCircle, {}) }));
|
|
8022
8115
|
}
|
|
8023
8116
|
|
|
8024
8117
|
function useLanguageCode() {
|
|
@@ -8082,19 +8175,7 @@ function GlyphsArrowSemiBoldRightIcon(props) {
|
|
|
8082
8175
|
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "11", viewBox: "0 0 11 11", width: "11", children: jsx("path", { d: "M4.27243829,10 C4.05910402,10.0007527 3.92860879,9.73966348 4.04161427,9.53832073 L6.25359309,5.59919963 C6.37846177,5.37673437 6.36029412,5.09278754 6.20830955,4.89272723 L4.38978231,2.4963789 C4.24091607,2.30024134 4.36625928,2 4.59701551,2 L6.06357848,2 C6.14343478,2 6.2192237,2.03915207 6.27074389,2.10704584 L7.47868905,3.69877757 C8.09849054,4.51523787 8.1726525,5.67297753 7.66341606,6.57973654 L5.82495864,9.85357414 C5.77553993,9.94153429 5.68904024,9.99509493 5.59582936,9.99539668 L4.27243829,10 Z", fillRule: "evenodd" }) }));
|
|
8083
8176
|
}
|
|
8084
8177
|
|
|
8085
|
-
|
|
8086
|
-
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: "M9.0606215,21.2358635 L14.9393785,21.2358635 C15.346918,21.2358635 15.6984208,21.1934114 15.9938869,21.1085074 C16.289353,21.0236033 16.5525556,20.8962472 16.7834947,20.7264391 C17.0144337,20.556631 17.2351842,20.3528613 17.4457463,20.1151299 L21.1747326,15.9887927 C21.3920869,15.7510613 21.560197,15.5269146 21.6790627,15.3163525 C21.7979283,15.1057905 21.8811343,14.8833418 21.9286806,14.6490066 C21.9762269,14.4146714 22,14.1310919 22,13.798268 L22,9.447784 C22,9.1149601 21.9745288,8.83138054 21.9235863,8.59704534 C21.8726439,8.36271014 21.7860418,8.14195959 21.6637799,7.93479368 C21.5415181,7.72762778 21.37171,7.50178299 21.1543556,7.2572593 L17.4457463,3.12073357 C17.2351842,2.88979453 17.0161318,2.68942095 16.7885889,2.51961284 C16.561046,2.34980472 16.2978434,2.22075055 15.9989812,2.13245033 C15.7001189,2.04415011 15.346918,2 14.9393785,2 L9.0606215,2 C8.65308202,2 8.30157922,2.04415011 8.00611309,2.13245033 C7.71064697,2.22075055 7.44914247,2.34980472 7.22159959,2.51961284 C6.99405672,2.68942095 6.77160808,2.88979453 6.55425369,3.12073357 L2.82526745,7.2572593 C2.60112073,7.49499066 2.42961454,7.71743929 2.31074885,7.9246052 C2.19188317,8.1317711 2.11037528,8.35421973 2.06622517,8.5919511 C2.02207506,8.82968246 2,9.1149601 2,9.447784 L2,13.798268 C2,14.1310919 2.02207506,14.4146714 2.06622517,14.6490066 C2.11037528,14.8833418 2.19188317,15.1057905 2.31074885,15.3163525 C2.42961454,15.5269146 2.60112073,15.7510613 2.82526745,15.9887927 L6.55425369,20.1151299 C6.77160808,20.3528613 6.99405672,20.556631 7.22159959,20.7264391 C7.44914247,20.8962472 7.71064697,21.0236033 8.00611309,21.1085074 C8.30157922,21.1934114 8.65308202,21.2358635 9.0606215,21.2358635 Z M12.0152827,13.339786 C11.4583121,13.339786 11.1730345,13.0579046 11.1594498,12.4941416 L11.0269995,7.46102904 C11.0202072,7.18933605 11.1068093,6.96349125 11.2868059,6.78349465 C11.4668025,6.60349805 11.7028358,6.51349975 11.9949058,6.51349975 C12.2869757,6.51349975 12.5247071,6.60519613 12.7080998,6.78858889 C12.8914926,6.97198166 12.983189,7.19952454 12.983189,7.47121752 L12.8405502,12.4941416 C12.8269655,13.0579046 12.5518764,13.339786 12.0152827,13.339786 Z M12.0152827,16.6204789 C11.7028358,16.6204789 11.434539,16.518594 11.2103923,16.3148242 C10.9862455,16.1110545 10.8741722,15.8563423 10.8741722,15.5506877 C10.8741722,15.2518254 10.9862455,14.9988113 11.2103923,14.7916454 C11.434539,14.5844795 11.7028358,14.4808966 12.0152827,14.4808966 C12.3209373,14.4808966 12.585838,14.5827815 12.8099847,14.7865512 C13.0341314,14.9903209 13.1462048,15.2450331 13.1462048,15.5506877 C13.1462048,15.8631347 13.0324334,16.1195449 12.8048905,16.3199185 C12.5773476,16.5202921 12.314145,16.6204789 12.0152827,16.6204789 Z" }) }));
|
|
8087
|
-
}
|
|
8088
|
-
|
|
8089
|
-
function SolidInformationIcon(props) {
|
|
8090
|
-
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: "M11.9997748,2 C17.5138784,2 22,6.48597148 22,11.9997748 C22,17.5138784 17.5138784,22 11.9997748,22 C6.48597148,22 2,17.5138784 2,11.9997748 C2,6.48597148 6.48597148,2 11.9997748,2 Z M12,10.0686973 C11.2652767,10.0686973 10.6699001,10.6642241 10.6699001,11.3989474 L10.6699001,16.8046369 C10.6699001,17.53921 11.2652767,18.1347368 12,18.1347368 C12.7347233,18.1347368 13.3300999,17.53921 13.3300999,16.8046369 L13.3300999,11.3989474 C13.3300999,10.6642241 12.7347233,10.0686973 12,10.0686973 Z M12.00003,5.9387205 C11.2663578,5.9387205 10.6694796,6.53559872 10.6694796,7.26927091 C10.6694796,8.0029431 11.2663578,8.59982131 12.00003,8.59982131 C12.7337022,8.59982131 13.3305804,8.0029431 13.3305804,7.26927091 C13.3305804,6.53559872 12.7337022,5.9387205 12.00003,5.9387205 Z", fillRule: "evenodd" }) }));
|
|
8091
|
-
}
|
|
8092
|
-
|
|
8093
|
-
function SolidNoticeIcon(props) {
|
|
8094
|
-
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: "M4.65060241,21.1425703 L19.3493976,21.1425703 C19.8982597,21.1425703 20.3701473,21.0254351 20.7650602,20.7911647 C21.1599732,20.5568942 21.4645248,20.2406292 21.6787149,19.8423695 C21.892905,19.4441098 22,18.9973226 22,18.502008 C22,18.2811245 21.9682062,18.0568942 21.9046185,17.8293173 C21.8410308,17.6017403 21.748996,17.37751 21.6285141,17.1566265 L14.2690763,4.3253012 C14.0147256,3.89022758 13.6834003,3.56057564 13.2751004,3.33634538 C12.8668005,3.11211513 12.4417671,3 12,3 C11.5515395,3 11.1231593,3.11211513 10.7148594,3.33634538 C10.3065596,3.56057564 9.97858099,3.89022758 9.73092369,4.3253012 L2.37148594,17.1566265 C2.12382865,17.5850067 2,18.0334672 2,18.502008 C2,18.9973226 2.10709505,19.4441098 2.32128514,19.8423695 C2.53547523,20.2406292 2.84002677,20.5568942 3.23493976,20.7911647 C3.62985274,21.0254351 4.10174029,21.1425703 4.65060241,21.1425703 Z M12.0100402,14.7068273 C11.461178,14.7068273 11.1800535,14.4290495 11.1666667,13.873494 L11.0361446,8.91365462 C11.0294511,8.645917 11.1147925,8.42336011 11.2921687,8.24598394 C11.4695448,8.06860776 11.7021419,7.97991968 11.9899598,7.97991968 C12.2777778,7.97991968 12.5120482,8.07028112 12.6927711,8.25100402 C12.873494,8.43172691 12.9638554,8.65595716 12.9638554,8.92369478 L12.8232932,13.873494 C12.8099063,14.4290495 12.538822,14.7068273 12.0100402,14.7068273 Z M12.0100402,17.939759 C11.7021419,17.939759 11.437751,17.8393574 11.2168675,17.6385542 C10.9959839,17.437751 10.8855422,17.186747 10.8855422,16.8855422 C10.8855422,16.5910308 10.9959839,16.3417001 11.2168675,16.1375502 C11.437751,15.9334003 11.7021419,15.8313253 12.0100402,15.8313253 C12.311245,15.8313253 12.5722892,15.9317269 12.7931727,16.1325301 C13.0140562,16.3333333 13.124498,16.5843373 13.124498,16.8855422 C13.124498,17.1934404 13.0123829,17.4461178 12.7881526,17.6435743 C12.5639224,17.8410308 12.3045515,17.939759 12.0100402,17.939759 Z" }) }));
|
|
8095
|
-
}
|
|
8096
|
-
|
|
8097
|
-
var styles$D = {"announcement":"announcement-module-Xi0L5","wrapper":"announcement-module-4XVjD","icon":"announcement-module-lxmA2","content":"announcement-module-1Jn7y","title":"announcement-module-8k2rK","text":"announcement-module-yXGsN","close":"announcement-module-gZ9ae","informative":"announcement-module-0LTWL","notice":"announcement-module-Ga3lN","critical":"announcement-module-S3nSW","promo":"announcement-module-E6DqW"};
|
|
8178
|
+
var styles$C = {"announcement":"announcement-module-Xi0L5","wrapper":"announcement-module-4XVjD","icon":"announcement-module-lxmA2","content":"announcement-module-1Jn7y","title":"announcement-module-8k2rK","text":"announcement-module-yXGsN","close":"announcement-module-gZ9ae","informative":"announcement-module-0LTWL","notice":"announcement-module-Ga3lN","critical":"announcement-module-S3nSW","promo":"announcement-module-E6DqW"};
|
|
8098
8179
|
|
|
8099
8180
|
const iconMap = {
|
|
8100
8181
|
critical: jsx(SolidAttentionIcon, {}),
|
|
@@ -8103,7 +8184,7 @@ const iconMap = {
|
|
|
8103
8184
|
promo: jsx(SolidInformationIcon, {}),
|
|
8104
8185
|
};
|
|
8105
8186
|
function Announcement({ announcement: { href, id, text, title, type }, onDismiss, }) {
|
|
8106
|
-
return (jsxs(RouteLink, { className: clsx(styles$
|
|
8187
|
+
return (jsxs(RouteLink, { className: clsx(styles$C.announcement, styles$C[type]), href: href, children: [jsxs("div", { className: styles$C.wrapper, children: [jsx("div", { className: styles$C.icon, children: iconMap[type] }), jsxs("div", { className: styles$C.content, children: [jsx("h2", { className: styles$C.title, children: title }), jsxs("p", { className: styles$C.text, children: [text, jsx(GlyphsArrowSemiBoldRightIcon, {})] })] })] }), jsx("div", { className: styles$C.close, children: jsx(IconButton, { color: "current-color", onClick: () => onDismiss?.(id), children: jsx(StrokeCloseboxIcon, {}) }) })] }));
|
|
8107
8188
|
}
|
|
8108
8189
|
|
|
8109
8190
|
function ConnectedAnnouncement({ announcement: { endDate, startDate, ...announcement }, onDismiss, }) {
|
|
@@ -8120,7 +8201,7 @@ function ConnectedAnnouncement({ announcement: { endDate, startDate, ...announce
|
|
|
8120
8201
|
return jsx(Announcement, { announcement: announcement, onDismiss: onDismiss });
|
|
8121
8202
|
}
|
|
8122
8203
|
|
|
8123
|
-
var styles$
|
|
8204
|
+
var styles$B = {"announcement-enter":"announcement-provider-module-ksjgO","announcement-enter-active":"announcement-provider-module-k0zd-","announcement-exit":"announcement-provider-module-w2N0B","announcement-exit-active":"announcement-provider-module-4lfx2"};
|
|
8124
8205
|
|
|
8125
8206
|
function AnnouncementProvider() {
|
|
8126
8207
|
const languageCode = useLanguageCode();
|
|
@@ -8130,10 +8211,10 @@ function AnnouncementProvider() {
|
|
|
8130
8211
|
const [dismissedIds, setDismissedIds] = useLocalStorage('dismissedAnnouncementIds', []);
|
|
8131
8212
|
const filteredAnnouncements = announcements?.filter(({ id }) => !dismissedIds.includes(id));
|
|
8132
8213
|
return (jsx(TransitionGroup, { children: filteredAnnouncements?.map(({ href, id, text, title, type }) => (jsx(CSSTransition, { classNames: {
|
|
8133
|
-
enter: styles$
|
|
8134
|
-
enterActive: styles$
|
|
8135
|
-
exit: styles$
|
|
8136
|
-
exitActive: styles$
|
|
8214
|
+
enter: styles$B['announcement-enter'],
|
|
8215
|
+
enterActive: styles$B['announcement-enter-active'],
|
|
8216
|
+
exit: styles$B['announcement-exit'],
|
|
8217
|
+
exitActive: styles$B['announcement-exit-active'],
|
|
8137
8218
|
}, timeout: 300, children: jsx(ConnectedAnnouncement, { announcement: {
|
|
8138
8219
|
href,
|
|
8139
8220
|
id,
|
|
@@ -8143,41 +8224,37 @@ function AnnouncementProvider() {
|
|
|
8143
8224
|
}, onDismiss: id => setDismissedIds(dismissedIds => [...dismissedIds, id]) }) }, id))) }));
|
|
8144
8225
|
}
|
|
8145
8226
|
|
|
8146
|
-
var styles$
|
|
8227
|
+
var styles$A = {"page-container":"page-container-module-PYmbC","inner-page-container":"page-container-module-uD8GF"};
|
|
8147
8228
|
|
|
8148
8229
|
function PageContainer({ children, className, }) {
|
|
8149
|
-
return (jsx("div", { className: styles$
|
|
8230
|
+
return (jsx("div", { className: styles$A['page-container'], children: jsx("div", { className: clsx(styles$A['inner-page-container'], className), children: children }) }));
|
|
8150
8231
|
}
|
|
8151
8232
|
|
|
8152
|
-
var styles$
|
|
8233
|
+
var styles$z = {"page":"page-module-XtZ9Y","breadcrumb":"page-module-ohh9z","title":"page-module-TEmve"};
|
|
8153
8234
|
|
|
8154
8235
|
function PageTitle({ children }) {
|
|
8155
8236
|
const { lg, xxl } = useBreakpoint();
|
|
8156
|
-
return (jsx(Heading, { italic: true, uppercase: true, className: styles$
|
|
8237
|
+
return (jsx(Heading, { italic: true, uppercase: true, className: styles$z.title, size: xxl ? 'xl' : lg ? 'm' : 's', tag: "h1", children: children }));
|
|
8157
8238
|
}
|
|
8158
8239
|
function Page({ breadCrumb, children, className, title }) {
|
|
8159
|
-
return (jsxs(PageContainer, { className: clsx(styles$
|
|
8160
|
-
}
|
|
8161
|
-
|
|
8162
|
-
function SolidOkayIcon(props) {
|
|
8163
|
-
return (jsx("svg", { fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M12.0051467,22 C13.3707325,22 14.6574026,21.7375193 15.865157,21.2125579 C17.0729113,20.6875965 18.1365586,19.9653457 19.0560988,19.0458055 C19.975639,18.1262652 20.6961743,17.0643335 21.2177046,15.8600103 C21.7392349,14.6556871 22,13.3673014 22,11.9948533 C22,10.6292675 21.7375193,9.34259736 21.2125579,8.13484303 C20.6875965,6.92708869 19.9653457,5.86172585 19.0458055,4.9387545 C18.1262652,4.01578315 17.0626179,3.2952479 15.8548636,2.77714874 C14.6471093,2.25904958 13.3604392,2 11.9948533,2 C10.6292675,2 9.34431292,2.25904958 8.13998971,2.77714874 C6.9356665,3.2952479 5.87201921,4.01578315 4.94904786,4.9387545 C4.02607651,5.86172585 3.3038257,6.92708869 2.78229542,8.13484303 C2.26076514,9.34259736 2,10.6292675 2,11.9948533 C2,13.3673014 2.2624807,14.6556871 2.7874421,15.8600103 C3.3124035,17.0643335 4.03465431,18.1262652 4.95419454,19.0458055 C5.87373477,19.9653457 6.9356665,20.6875965 8.13998971,21.2125579 C9.34431292,21.7375193 10.6326986,22 12.0051467,22 Z M10.9243438,16.7812661 C10.7390633,16.7812661 10.5743695,16.7400926 10.4302625,16.6577458 C10.2861554,16.5753989 10.1489106,16.4518785 10.018528,16.2871848 L7.60988163,13.3329902 C7.43832561,13.1202608 7.35254761,12.9006691 7.35254761,12.6742151 C7.35254761,12.4340367 7.43317893,12.2298851 7.59444159,12.0617602 C7.75570424,11.8936353 7.95642477,11.8095728 8.19660319,11.8095728 C8.34071024,11.8095728 8.47280837,11.8404529 8.59289758,11.9022131 C8.71298679,11.9639732 8.83136044,12.0737691 8.94801853,12.2316006 L10.8831704,14.7020072 L14.9696346,8.14513639 C15.1686396,7.82261108 15.4156802,7.66134843 15.7107566,7.66134843 C15.9372105,7.66134843 16.1413622,7.73511752 16.3232115,7.88265569 C16.5050609,8.03019386 16.5959856,8.22405215 16.5959856,8.46423057 C16.5959856,8.57402642 16.5702522,8.68553783 16.5187854,8.7987648 C16.4673186,8.91199177 16.407274,9.02007205 16.3386516,9.12300566 L11.7786927,16.2768914 C11.5659633,16.6131412 11.2811803,16.7812661 10.9243438,16.7812661 Z" }) }));
|
|
8240
|
+
return (jsxs(PageContainer, { className: clsx(styles$z.page, className), children: [jsx("div", { className: styles$z.breadcrumb, children: jsx(Breadcrumb, { links: breadCrumb }) }), title && jsx(PageTitle, { children: title }), children] }));
|
|
8164
8241
|
}
|
|
8165
8242
|
|
|
8166
|
-
var styles$
|
|
8243
|
+
var styles$y = {"list":"list-module-7-DFP","list-item":"list-module-YMLVY","icon":"list-module-wTIOA"};
|
|
8167
8244
|
|
|
8168
8245
|
function List({ children }) {
|
|
8169
|
-
return jsx("ul", { className: styles$
|
|
8246
|
+
return jsx("ul", { className: styles$y.list, children: children });
|
|
8170
8247
|
}
|
|
8171
8248
|
function ListItem({ icon, text }) {
|
|
8172
|
-
return (jsxs("li", { className: styles$
|
|
8249
|
+
return (jsxs("li", { className: styles$y['list-item'], children: [icon && jsx("span", { className: styles$y.icon, children: icon }), text] }));
|
|
8173
8250
|
}
|
|
8174
8251
|
|
|
8175
|
-
var styles$
|
|
8252
|
+
var styles$x = {"sign-in-dialog":"sign-in-dialog-module-P-AHV"};
|
|
8176
8253
|
|
|
8177
8254
|
function SignInDialog({ isOpen, onOpenChange }) {
|
|
8178
8255
|
const { signInUrl } = useFavorite();
|
|
8179
8256
|
const t = useFormattedMessage();
|
|
8180
|
-
return (jsx(Dialog, { isDismissable: true, dialogClassName: styles$
|
|
8257
|
+
return (jsx(Dialog, { isDismissable: true, dialogClassName: styles$x['sign-in-dialog'], footer: jsxs(Fragment, { children: [jsx(RouteButton, { color: "primary", href: `${signInUrl}?returnUrl=${encodeURIComponent(window.location.pathname + window.location.search)}`, onClick: () => onOpenChange(false), variant: "solid", children: jsx(FormattedMessage, { id: "sign in" }) }), jsx(RouteButton, { color: "secondary", href: `${signInUrl}?returnUrl=${encodeURIComponent(window.location.pathname + window.location.search)}`, onClick: () => onOpenChange(false), variant: "outline", children: jsx(FormattedMessage, { id: "create account" }) })] }), isOpen: isOpen, onOpenChange: onOpenChange, title: t('Shop more efficiently and quicker with a favorites list'), children: jsxs(List, { children: [jsx(ListItem, { icon: jsx(SolidOkayIcon, { fill: "var(--color-status-available)" }), text: t('Easily add your favorite products') }), jsx(ListItem, { icon: jsx(SolidOkayIcon, { fill: "var(--color-status-available)" }), text: t('Your favorites are available on multiple devices') }), jsx(ListItem, { icon: jsx(SolidOkayIcon, { fill: "var(--color-status-available)" }), text: t('Share your favorite list with others') })] }) }));
|
|
8181
8258
|
}
|
|
8182
8259
|
|
|
8183
8260
|
function ConnectedFavoriteButton({ onFavorited: _onFavorited, onFavoriting: _onFavoriting, productId, }) {
|
|
@@ -8235,7 +8312,7 @@ function ConnectedProductCard({ id, onAddToCart, onFavorited, onFavoriting, ...p
|
|
|
8235
8312
|
return (jsx(ProductCard, { id: id, ...props, addToCartButton: jsx(ConnectedAddToCartButton, { onAddToCart: onAddToCart, productId: id }), favoriteButton: jsx(ConnectedFavoriteButton, { onFavorited: onFavorited, onFavoriting: onFavoriting, productId: id }) }));
|
|
8236
8313
|
}
|
|
8237
8314
|
|
|
8238
|
-
var styles$
|
|
8315
|
+
var styles$w = {"carousel-container":"card-carousel-module-JXQmk","button":"card-carousel-module-XQ2pX","slide":"card-carousel-module-DxKOG","width-auto":"card-carousel-module-RQ8gl","width-narrow":"card-carousel-module-8uKSt","width-normal":"card-carousel-module-l-ylK"};
|
|
8239
8316
|
|
|
8240
8317
|
function CardCarousel({ allowExpandToGrid = false, cards, cardsPerView = {
|
|
8241
8318
|
md: 2,
|
|
@@ -8244,9 +8321,9 @@ function CardCarousel({ allowExpandToGrid = false, cards, cardsPerView = {
|
|
|
8244
8321
|
}, cardWidth = 'auto', hasOverflow = false, }) {
|
|
8245
8322
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
8246
8323
|
if (!isExpanded) {
|
|
8247
|
-
return (jsxs("div", { className: styles$
|
|
8324
|
+
return (jsxs("div", { className: styles$w['carousel-container'], children: [jsx(Carousel, { hasOverflow: hasOverflow, navigationButtonsPosition: "center", slideClasses: clsx(styles$w.slide, styles$w[`width-${cardWidth}`]), slides: cards, slidesPerView: cardsPerView, spaceBetween: 16 }), allowExpandToGrid && (jsx(Button, { withArrow: true, className: styles$w.button, color: "secondary", onClick: () => setIsExpanded(true), variant: "outline", children: jsx(FormattedMessage, { id: "Show all" }) }))] }));
|
|
8248
8325
|
}
|
|
8249
|
-
return (jsxs("div", { className: styles$
|
|
8326
|
+
return (jsxs("div", { className: styles$w['carousel-container'], children: [jsxs(ProductOverviewGrid, { children: [...cards] }), jsx(Button, { withArrow: true, className: styles$w.button, color: "secondary", onClick: () => setIsExpanded(false), variant: "outline", children: jsx(FormattedMessage, { id: "Show less" }) })] }));
|
|
8250
8327
|
}
|
|
8251
8328
|
|
|
8252
8329
|
class Animation {
|
|
@@ -8390,7 +8467,7 @@ class Animation {
|
|
|
8390
8467
|
}
|
|
8391
8468
|
}
|
|
8392
8469
|
|
|
8393
|
-
var styles$
|
|
8470
|
+
var styles$v = {"pagination-panel":"pagination-module-pQ-Pu","content-container":"pagination-module-EnswA","contained":"pagination-module-4U0M3","page-button":"pagination-module-E-D6l","active-page-button":"pagination-module-rNIvD","circle":"pagination-module-4--ee"};
|
|
8394
8471
|
|
|
8395
8472
|
function between(min, value, max) {
|
|
8396
8473
|
return Math.min(max, Math.max(min, value));
|
|
@@ -8403,8 +8480,8 @@ function Pagination$1({ contained, currentPage = 1, numberOfPages, onChange, })
|
|
|
8403
8480
|
if (numberOfPages <= 1)
|
|
8404
8481
|
return;
|
|
8405
8482
|
return (jsx("div", { className: clsx({
|
|
8406
|
-
[styles$
|
|
8407
|
-
}, styles$
|
|
8483
|
+
[styles$v['contained']]: contained,
|
|
8484
|
+
}, styles$v['pagination-panel']), children: jsxs("div", { className: styles$v['content-container'], children: [jsx("div", { ref: animation.current.refButton, className: clsx(styles$v['active-page-button'], styles$v['page-button']), children: jsx("div", { ref: animation.current.refCircle, className: styles$v['circle'] }) }), Array.from({ length: numberOfPages }, (_, index) => (jsx("div", { ref: animation.current.refPaginationButton(index), className: clsx(styles$v['page-button']), onClick: () => {
|
|
8408
8485
|
onChange?.(index + 1);
|
|
8409
8486
|
}, onKeyPress: e => {
|
|
8410
8487
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
@@ -8413,7 +8490,7 @@ function Pagination$1({ contained, currentPage = 1, numberOfPages, onChange, })
|
|
|
8413
8490
|
}, role: "button", tabIndex: 0 }, index)))] }) }));
|
|
8414
8491
|
}
|
|
8415
8492
|
|
|
8416
|
-
var styles$
|
|
8493
|
+
var styles$u = {"usp-carousel":"usp-carousel-module-UCbpX","pagination":"usp-carousel-module-msaeJ","product-usp":"usp-carousel-module-rtIrb","left":"usp-carousel-module--Vdc3","image":"usp-carousel-module-F-WAS","right":"usp-carousel-module-2fygw","content":"usp-carousel-module-AOJJg","icon":"usp-carousel-module-Diy2d","title":"usp-carousel-module--xcF2","text":"usp-carousel-module-tq8R8","navigation":"usp-carousel-module-L5Kmv"};
|
|
8417
8494
|
|
|
8418
8495
|
const DURATION_IN_MS = 800;
|
|
8419
8496
|
const CONTENT_TRANSLATE_PX = 40;
|
|
@@ -8446,13 +8523,13 @@ const USPCarousel = ({ slides }) => {
|
|
|
8446
8523
|
}
|
|
8447
8524
|
});
|
|
8448
8525
|
}
|
|
8449
|
-
return (jsxs(Swiper, { ref: swiperElementRef, className: styles$
|
|
8526
|
+
return (jsxs(Swiper, { ref: swiperElementRef, className: styles$u['usp-carousel'], longSwipes: false, onActiveIndexChange: swiper => setCurrentIndex(swiper.activeIndex), onSetTransition: (_swiper, transitions) => {
|
|
8450
8527
|
currentTransitionSpeed = transitions;
|
|
8451
|
-
}, onSetTranslate: setTranslate, onSwiper: swiper => (swiperRef.current = swiper), speed: DURATION_IN_MS, virtualTranslate: true, watchSlidesProgress: true, children: [slides.map((slide, index) => (jsx(SwiperSlide, { children: slide }, index))), jsx("div", { className: styles$
|
|
8528
|
+
}, onSetTranslate: setTranslate, onSwiper: swiper => (swiperRef.current = swiper), speed: DURATION_IN_MS, virtualTranslate: true, watchSlidesProgress: true, children: [slides.map((slide, index) => (jsx(SwiperSlide, { children: slide }, index))), jsx("div", { className: styles$u.pagination, id: "pagination" }), jsx("div", { className: styles$u.pagination, children: jsx(Pagination$1, { currentPage: currentIndex + 1, numberOfPages: slides.length, onChange: pageNumber => swiperRef.current?.slideTo(pageNumber - 1) }) })] }));
|
|
8452
8529
|
};
|
|
8453
8530
|
|
|
8454
8531
|
function ProductUsp({ usp }) {
|
|
8455
|
-
return (jsxs("div", { className: styles$
|
|
8532
|
+
return (jsxs("div", { className: styles$u['product-usp'], children: [jsx("div", { className: styles$u.left, children: jsx(Image, { className: styles$u.image, fit: "cover", image: usp.image, title: usp.image.altText }) }), jsx("div", { className: styles$u.right, children: jsxs("div", { "data-content": true, className: styles$u.content, children: [jsx(Image, { className: styles$u.icon, image: usp.icon, title: usp.icon.altText }), jsx(Heading, { italic: true, uppercase: true, className: styles$u.title, size: "xs", children: usp.heading }), jsx("p", { className: styles$u.text, children: usp.text })] }) })] }));
|
|
8456
8533
|
}
|
|
8457
8534
|
|
|
8458
8535
|
function ProductUSPCarousel({ usps }) {
|
|
@@ -8472,16 +8549,16 @@ function ErrorPage({ error }) {
|
|
|
8472
8549
|
], title: "Something went wrong", children: environment !== 'production' && (jsxs(Fragment, { children: [jsx(Heading, { size: "l", children: isRequestError(error) ? (jsxs(Fragment, { children: [error.status, " - ", error.statusText || 'Unknown error'] })) : (jsx(Fragment, { children: error.message })) }), isRequestError(error) && (jsxs(Fragment, { children: [jsx(Heading, { size: "xs", children: "Error details" }), jsx(Heading, { size: "xxs", children: "Body" }), jsx("pre", { children: JSON.stringify(error.body, null, 2) }), jsx(Heading, { size: "xxs", children: "Options" }), jsx("pre", { children: JSON.stringify(error.options, null, 2) })] }))] })) }));
|
|
8473
8550
|
}
|
|
8474
8551
|
|
|
8475
|
-
var styles$
|
|
8552
|
+
var styles$t = {"product-details-page-layout":"product-details-page-layout-module-IQFIn","top":"product-details-page-layout-module--7oUp","image-gallery":"product-details-page-layout-module-Efavu","product-information":"product-details-page-layout-module-Y2490","recently-viewed":"product-details-page-layout-module-EDW8t","included":"product-details-page-layout-module-GSMls","usp":"product-details-page-layout-module-duq6v"};
|
|
8476
8553
|
|
|
8477
8554
|
function ProductDetailsPageLayout({ imageGallery, included, productInformation, recentlyViewed, usp, }) {
|
|
8478
|
-
return (jsxs("div", { className: styles$
|
|
8555
|
+
return (jsxs("div", { className: styles$t['product-details-page-layout'], children: [jsxs("section", { className: styles$t.top, children: [jsx("div", { className: styles$t['image-gallery'], children: imageGallery }), jsx("div", { className: styles$t['product-information'], children: productInformation })] }), jsx("section", { className: styles$t.usp, children: usp }), jsx("section", { className: styles$t.included, children: included }), jsx("section", { className: styles$t['recently-viewed'], children: recentlyViewed })] }));
|
|
8479
8556
|
}
|
|
8480
8557
|
|
|
8481
|
-
var styles$
|
|
8558
|
+
var styles$s = {"blank-page-spacer":"blank-page-spacer-module-lXxle","loading-overlay":"blank-page-spacer-module-hbxDP"};
|
|
8482
8559
|
|
|
8483
8560
|
function BlankPageSpacer({ children }) {
|
|
8484
|
-
return jsx("div", { className: styles$
|
|
8561
|
+
return jsx("div", { className: styles$s['blank-page-spacer'], children: children });
|
|
8485
8562
|
}
|
|
8486
8563
|
|
|
8487
8564
|
function LoadingPage() {
|
|
@@ -8566,7 +8643,7 @@ function useFetchProductDetailsPageData({ languageCode, pageUrl, }) {
|
|
|
8566
8643
|
});
|
|
8567
8644
|
}
|
|
8568
8645
|
|
|
8569
|
-
var styles$
|
|
8646
|
+
var styles$r = {"images-grid":"images-grid-module-i5868","grid-item":"images-grid-module-nY9-n","image":"images-grid-module-TahRy","clickable":"images-grid-module-Ruktz"};
|
|
8570
8647
|
|
|
8571
8648
|
const mainImagePosition = {
|
|
8572
8649
|
1: 0,
|
|
@@ -8588,12 +8665,12 @@ function ImagesGrid({ images, onSelectImage }) {
|
|
|
8588
8665
|
onSelectImage?.(image, images.indexOf(image));
|
|
8589
8666
|
}
|
|
8590
8667
|
}
|
|
8591
|
-
return (jsx("div", { className: styles$
|
|
8592
|
-
[styles$
|
|
8593
|
-
}), onClick: () => onSelectImage?.(image, index), onKeyDown: event => handleKeydown(event, image), role: "button", tabIndex: 0, children: jsx(Image, { className: styles$
|
|
8668
|
+
return (jsx("div", { className: styles$r['images-grid'], "data-count": images.length, children: imageList.map((image, index) => image && (jsx("div", { "aria-label": `Open image ${index}`, className: clsx(styles$r['grid-item'], {
|
|
8669
|
+
[styles$r.clickable]: Boolean(onSelectImage),
|
|
8670
|
+
}), onClick: () => onSelectImage?.(image, index), onKeyDown: event => handleKeydown(event, image), role: "button", tabIndex: 0, children: jsx(Image, { className: styles$r.image, fit: "contain", image: image, title: image.altText }) }, index))) }));
|
|
8594
8671
|
}
|
|
8595
8672
|
|
|
8596
|
-
var styles$
|
|
8673
|
+
var styles$q = {"image-lightbox":"image-lightbox-module-9k3oJ","slide":"image-lightbox-module-K5Gd0","active-image":"image-lightbox-module-UNPOi","thumb":"image-lightbox-module-PUOMT","image":"image-lightbox-module-4RKLg","main-swiper":"image-lightbox-module-hAy3O","pagination":"image-lightbox-module-nN1Kr","sm":"image-lightbox-module-1idAN","thumbs-swiper":"image-lightbox-module-Xbxcn","lg":"image-lightbox-module--V8Xo","navigation-button":"image-lightbox-module-RP7KS","navigation-button-prev":"image-lightbox-module-wOPYF","navigation-button-next":"image-lightbox-module-knizp"};
|
|
8597
8674
|
|
|
8598
8675
|
function ImageLightbox({ images, initialSelectedIndex = 0, variant = 'sm', }) {
|
|
8599
8676
|
const [thumbsSwiper, setThumbsSwiper] = useState();
|
|
@@ -8601,13 +8678,13 @@ function ImageLightbox({ images, initialSelectedIndex = 0, variant = 'sm', }) {
|
|
|
8601
8678
|
const nextEl = useRef(null);
|
|
8602
8679
|
const prevEl = useRef(null);
|
|
8603
8680
|
const mainSwiperRef = useRef(null);
|
|
8604
|
-
return (jsxs("div", { className: clsx(styles$
|
|
8681
|
+
return (jsxs("div", { className: clsx(styles$q['image-lightbox'], styles$q[variant]), children: [jsx(Swiper, { watchSlidesProgress: true, className: styles$q['thumbs-swiper'], direction: variant === 'sm' ? 'horizontal' : 'vertical', modules: [Thumb], onSwiper: swiper => setThumbsSwiper(swiper), slidesPerView: "auto", spaceBetween: 8, children: images.map((image, index) => (jsx(SwiperSlide, { className: styles$q.slide, children: jsx("div", { className: styles$q.thumb, children: jsx(Image, { className: styles$q.image, fit: "contain", height: 80, image: image, title: "Image", width: 80 }) }) }, index))) }), jsxs("div", { className: styles$q['main-swiper'], children: [jsx(Swiper, { initialSlide: initialSelectedIndex, modules: [Thumb, Navigation], navigation: {
|
|
8605
8682
|
nextEl: nextEl.current,
|
|
8606
8683
|
prevEl: prevEl.current,
|
|
8607
|
-
}, onActiveIndexChange: swiper => setCurrentIndex(swiper.activeIndex), onBeforeInit: swiper => (mainSwiperRef.current = swiper), slidesPerView: 1, thumbs: { swiper: thumbsSwiper }, children: images.map((image, index) => (jsx(SwiperSlide, { className: styles$
|
|
8684
|
+
}, onActiveIndexChange: swiper => setCurrentIndex(swiper.activeIndex), onBeforeInit: swiper => (mainSwiperRef.current = swiper), slidesPerView: 1, thumbs: { swiper: thumbsSwiper }, children: images.map((image, index) => (jsx(SwiperSlide, { className: styles$q.slide, children: jsx("div", { className: styles$q['active-image'], children: jsx(Image, { className: styles$q.image, fit: "contain", image: image, title: "Image" }) }) }, index))) }), jsx("div", { className: styles$q.pagination, children: jsx(Pagination$1, { contained: true, currentPage: currentIndex + 1, numberOfPages: images.length, onChange: pageNumber => mainSwiperRef.current?.slideTo(pageNumber - 1) }) }), variant === 'lg' && (jsxs(Fragment, { children: [jsx(CarouselNavigationButton, { ref: prevEl, className: clsx(styles$q['navigation-button'], styles$q['navigation-button-prev']), direction: "previous" }), jsx(CarouselNavigationButton, { ref: nextEl, className: clsx(styles$q['navigation-button'], styles$q['navigation-button-next']), direction: "next" })] }))] })] }));
|
|
8608
8685
|
}
|
|
8609
8686
|
|
|
8610
|
-
var styles$
|
|
8687
|
+
var styles$p = {"image-lightbox-modal":"product-detail-images-module-N3Ms-"};
|
|
8611
8688
|
|
|
8612
8689
|
const MAX_IMAGES = 5;
|
|
8613
8690
|
function ProductDetailImages({ images }) {
|
|
@@ -8624,7 +8701,7 @@ function ProductDetailImages({ images }) {
|
|
|
8624
8701
|
if (!isXl) {
|
|
8625
8702
|
return jsx(ImageLightbox, { images: images });
|
|
8626
8703
|
}
|
|
8627
|
-
return (jsxs(Fragment, { children: [jsx(ImagesGrid, { images: images, onSelectImage: (image, _index) => handleOpenImage(image) }), jsx(Dialog, { hasCloseButton: true, hideTitle: true, isDismissable: true, isFullScreen: true, isKeyboardDismissDisabled: false, isOpen: isOpen, onOpenChange: toggle, title: "Product images", children: jsx("div", { className: styles$
|
|
8704
|
+
return (jsxs(Fragment, { children: [jsx(ImagesGrid, { images: images, onSelectImage: (image, _index) => handleOpenImage(image) }), jsx(Dialog, { hasCloseButton: true, hideTitle: true, isDismissable: true, isFullScreen: true, isKeyboardDismissDisabled: false, isOpen: isOpen, onOpenChange: toggle, title: "Product images", children: jsx("div", { className: styles$p['image-lightbox-modal'], children: jsx(ImageLightbox, { images: images, initialSelectedIndex: selectedImageIndex, variant: "lg" }) }) })] }));
|
|
8628
8705
|
}
|
|
8629
8706
|
|
|
8630
8707
|
function GlyphsChevronsBoldDownIcon(props) {
|
|
@@ -8636,9 +8713,9 @@ function AccordionItem({ _pseudo = 'none', borderType = 'bottom', children, clas
|
|
|
8636
8713
|
const panelId = `panel-${id}`;
|
|
8637
8714
|
return (jsxs("div", { className: clsx(className, ...[]
|
|
8638
8715
|
.concat(borderType)
|
|
8639
|
-
.map(type => styles$
|
|
8640
|
-
[styles$
|
|
8641
|
-
}), children: [jsx("h3", { children: jsxs("button", { "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles$
|
|
8716
|
+
.map(type => styles$R[`border-type-${type}`]), styles$R['accordion-item'], {
|
|
8717
|
+
[styles$R['is-open']]: isOpen,
|
|
8718
|
+
}), children: [jsx("h3", { children: jsxs("button", { "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles$R.button, styles$R[_pseudo]), disabled: isDisabled, id: id, onClick: toggle, type: "button", children: [title, jsx("span", { className: styles$R.icon, children: size === 'lg' ? (jsx(GlyphsChevronsBoldDownIcon, {})) : (jsx(GlyphsChevronsSlimDownIcon, {})) })] }) }), jsx("div", { "aria-labelledby": id, className: styles$R.panel, id: panelId, role: "region", children: jsx("div", { className: styles$R.content, children: children }) })] }));
|
|
8642
8719
|
}
|
|
8643
8720
|
|
|
8644
8721
|
function StrokeDownloadIcon(props) {
|
|
@@ -8649,7 +8726,7 @@ function SolidCloseIcon(props) {
|
|
|
8649
8726
|
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: "M11.9997748,2 C17.5138784,2 22,6.48597148 22,11.9997748 C22,17.5138784 17.5138784,22 11.9997748,22 C6.48597148,22 2,17.5138784 2,11.9997748 C2,6.48597148 6.48597148,2 11.9997748,2 Z M16.4949747,7.50502525 C16.2216077,7.23165825 15.7783923,7.23165825 15.5050253,7.50502525 L12,11.011 L8.49497475,7.50502525 C8.22160774,7.23165825 7.77839226,7.23165825 7.50502525,7.50502525 L7.43121616,7.59179111 C7.23439192,7.86533687 7.25899495,8.24894444 7.50502525,8.49497475 L11.011,12 L7.50502525,15.5050253 C7.23165825,15.7783923 7.23165825,16.2216077 7.50502525,16.4949747 L7.59179111,16.5687838 C7.86533687,16.7656081 8.24894444,16.7410051 8.49497475,16.4949747 L12,12.988 L15.5050253,16.4949747 C15.7783923,16.7683418 16.2216077,16.7683418 16.4949747,16.4949747 L16.5687838,16.4082089 C16.7656081,16.1346631 16.7410051,15.7510556 16.4949747,15.5050253 L12.988,12 L16.4949747,8.49497475 C16.7683418,8.22160774 16.7683418,7.77839226 16.4949747,7.50502525 Z", fillRule: "evenodd" }) }));
|
|
8650
8727
|
}
|
|
8651
8728
|
|
|
8652
|
-
var styles$
|
|
8729
|
+
var styles$o = {"feature-list":"feature-list-module-cxc8U","row":"feature-list-module-tTJ2r","column":"feature-list-module-Tw0KD","column-label":"feature-list-module-J6Xfj","alignment-right":"feature-list-module-deI1-","column-value":"feature-list-module-CqSj1","icon-true":"feature-list-module-ojZvf","icon-false":"feature-list-module-4IjrA"};
|
|
8653
8730
|
|
|
8654
8731
|
function FeatureKey({ label }) {
|
|
8655
8732
|
return label;
|
|
@@ -8658,15 +8735,15 @@ function FeatureValue({ value }) {
|
|
|
8658
8735
|
if (typeof value === 'boolean' ||
|
|
8659
8736
|
(typeof value === 'string' &&
|
|
8660
8737
|
(value.toLowerCase() === 'true' || value.toLowerCase() === 'false'))) {
|
|
8661
|
-
return (jsx(Fragment, { children: String(value).toLowerCase() === 'true' ? (jsx(SolidOkayIcon, { className: styles$
|
|
8738
|
+
return (jsx(Fragment, { children: String(value).toLowerCase() === 'true' ? (jsx(SolidOkayIcon, { className: styles$o['icon-true'] })) : (jsx(SolidCloseIcon, { className: styles$o['icon-false'] })) }));
|
|
8662
8739
|
}
|
|
8663
|
-
return jsx("div", { className: styles$
|
|
8740
|
+
return jsx("div", { className: styles$o.value, children: value });
|
|
8664
8741
|
}
|
|
8665
8742
|
function FeatureList({ className, features, style }) {
|
|
8666
|
-
return (jsx("div", { className: clsx(styles$
|
|
8743
|
+
return (jsx("div", { className: clsx(styles$o['feature-list'], className), children: features.map(({ id, key, value }) => (jsxs("div", { className: styles$o.row, children: [jsx("div", { className: clsx(styles$o.column, styles$o['column-label'], styles$o[`alignment-${style?.keyAlignment || 'left'}`]), children: key && jsx(FeatureKey, { ...key }) }), jsx("div", { className: clsx(styles$o.column, styles$o['column-value'], styles$o[`alignment-${style?.valueAlignment || 'right'}`]), children: Array.isArray(value) ? (value.map((value, index) => (jsx(FeatureValue, { value: value }, `${id}-${index}`)))) : (jsx(FeatureValue, { value: value })) })] }, id))) }));
|
|
8667
8744
|
}
|
|
8668
8745
|
|
|
8669
|
-
var styles$
|
|
8746
|
+
var styles$n = {"download-list-item":"download-document-list-module-Z023h"};
|
|
8670
8747
|
|
|
8671
8748
|
function DownloadDocumentList({ className, documents, }) {
|
|
8672
8749
|
return (jsx(FeatureList, { className: className, features: documents.map(document => ({
|
|
@@ -8675,23 +8752,23 @@ function DownloadDocumentList({ className, documents, }) {
|
|
|
8675
8752
|
})), style: { valueAlignment: 'left' } }));
|
|
8676
8753
|
}
|
|
8677
8754
|
function DownloadListItem({ document: { href, name }, }) {
|
|
8678
|
-
return (jsxs("div", { className: styles$
|
|
8755
|
+
return (jsxs("div", { className: styles$n['download-list-item'], children: [jsx(StrokeDownloadIcon, {}), jsx("a", { href: href, rel: "noreferrer", target: "_blank", children: name })] }));
|
|
8679
8756
|
}
|
|
8680
8757
|
|
|
8681
|
-
var styles$
|
|
8758
|
+
var styles$m = {"product-details-panel":"product-details-panel-module-kfhpL","heading":"product-details-panel-module--1ODE","price-action-container":"product-details-panel-module-CCcmA","action-container":"product-details-panel-module-1vyDM","description":"product-details-panel-module-GfTab","feature-list":"product-details-panel-module-ze0my"};
|
|
8682
8759
|
|
|
8683
8760
|
function ProductDetailsPanel({ product }) {
|
|
8684
|
-
return (jsxs("div", { className: styles$
|
|
8761
|
+
return (jsxs("div", { className: styles$m['product-details-panel'], children: [jsxs("div", { className: styles$m.heading, children: [jsx(Heading, { italic: true, size: "xs", children: product.productTitle }), jsx(ProductSku, { sku: product.productNumber })] }), jsxs("div", { className: styles$m['price-action-container'], children: [jsx(ProductPrice, { isVatIncluded: false, originalPrice: product.unitListPrice, price: product.unitListPrice }), jsxs("div", { className: styles$m['action-container'], children: [product.canAddToCart && (jsx(ConnectedAddToCartButton, { productId: product.storefrontId })), product.canAddToWishlist && (jsx(ConnectedFavoriteButton, { productId: product.storefrontId }))] })] }), jsxs("div", { children: [jsx(Heading, { italic: true, className: styles$m['product-features-heading'], size: "xxs", children: jsx(FormattedMessage, { id: "Product Features" }) }), product.content.htmlContent && (jsx(ShowAll, { initialHeight: 216, children: jsx("div", { className: styles$m.description, dangerouslySetInnerHTML: {
|
|
8685
8762
|
__html: product.content.htmlContent,
|
|
8686
|
-
} }) }))] }), jsx("div", { children: jsxs(Accordion, { indented: true, borderType: ['top', 'middle-accentuated'], children: [Boolean(product.attributeTypes.length) && (jsx(AccordionItem, { id: "specification", title: jsx(FormattedMessage, { id: "Specifications" }), children: jsx(FeatureList, { className: styles$
|
|
8763
|
+
} }) }))] }), jsx("div", { children: jsxs(Accordion, { indented: true, borderType: ['top', 'middle-accentuated'], children: [Boolean(product.attributeTypes.length) && (jsx(AccordionItem, { id: "specification", title: jsx(FormattedMessage, { id: "Specifications" }), children: jsx(FeatureList, { className: styles$m['feature-list'], features: product.attributeTypes.map(attribute => ({
|
|
8687
8764
|
id: `${attribute.id}`,
|
|
8688
8765
|
key: { label: attribute.label },
|
|
8689
8766
|
value: attribute.attributeValues.map(attributeValue => attributeValue.value),
|
|
8690
|
-
})) }) })), Boolean(product.specifications.length) && (jsx(AccordionItem, { id: "features", title: jsx(FormattedMessage, { id: "Features" }), children: jsx(FeatureList, { className: styles$
|
|
8767
|
+
})) }) })), Boolean(product.specifications.length) && (jsx(AccordionItem, { id: "features", title: jsx(FormattedMessage, { id: "Features" }), children: jsx(FeatureList, { className: styles$m['feature-list'], features: product.specifications.map(specification => ({
|
|
8691
8768
|
id: `${specification.id}`,
|
|
8692
8769
|
key: { label: specification.nameDisplay },
|
|
8693
8770
|
value: specification.value,
|
|
8694
|
-
})) }) })), Boolean(product.documents.length) && (jsx(AccordionItem, { id: "downloads", title: jsx(FormattedMessage, { id: "Downloads" }), children: jsx(DownloadDocumentList, { className: styles$
|
|
8771
|
+
})) }) })), Boolean(product.documents.length) && (jsx(AccordionItem, { id: "downloads", title: jsx(FormattedMessage, { id: "Downloads" }), children: jsx(DownloadDocumentList, { className: styles$m['feature-list'], documents: product.documents
|
|
8695
8772
|
.map(document => ({
|
|
8696
8773
|
href: document.filePath,
|
|
8697
8774
|
id: document.id,
|
|
@@ -8787,7 +8864,7 @@ function DefaultFilterSection({ children, gap = 'md', title, variant, }) {
|
|
|
8787
8864
|
return (jsxs("section", { className: clsx(filterSectionStyles['filter-section'], filterSectionStyles[variant], filterSectionStyles[gap]), children: [jsx("h3", { className: filterSectionStyles.title, children: title }), jsx("div", { className: filterSectionStyles.content, children: children })] }));
|
|
8788
8865
|
}
|
|
8789
8866
|
|
|
8790
|
-
var styles$
|
|
8867
|
+
var styles$l = {"filter-panel":"algolia-filter-panel-module-GfhOO","scroll-container":"algolia-filter-panel-module-4ubB1","category":"algolia-filter-panel-module-LKet3","is-active":"algolia-filter-panel-module-yf8kI","value":"algolia-filter-panel-module-gQzED","count":"algolia-filter-panel-module-uAHPx","button":"algolia-filter-panel-module-ABOYv"};
|
|
8791
8868
|
|
|
8792
8869
|
function AlgoliaActiveCategories() {
|
|
8793
8870
|
const { items: categories } = useHierarchicalMenu({
|
|
@@ -8809,19 +8886,19 @@ function Categories({ categories, path: _path, }) {
|
|
|
8809
8886
|
const categorySlug = category.label.toLowerCase().replace(/ /g, '-');
|
|
8810
8887
|
const path = `${_path}/${categorySlug}`;
|
|
8811
8888
|
const isActive = !category.data || !category.data.some(c => c.isRefined);
|
|
8812
|
-
return (jsxs(Fragment, { children: [jsx("div", { className: filterSectionStyles['filter-section-item'], children: jsxs(RouteLink, { hasUnderline: true, className: clsx(styles$
|
|
8813
|
-
[styles$
|
|
8889
|
+
return (jsxs(Fragment, { children: [jsx("div", { className: filterSectionStyles['filter-section-item'], children: jsxs(RouteLink, { hasUnderline: true, className: clsx(styles$l.category, {
|
|
8890
|
+
[styles$l['is-active']]: isActive,
|
|
8814
8891
|
}), href: path, isDisabled: isActive, children: [jsx(StrokeCategoriesIcon, { height: 24, width: 24 }), jsx("span", { children: category.label })] }) }), category.data && (jsx(Categories, { categories: category.data, path: path }))] }, category.value));
|
|
8815
8892
|
});
|
|
8816
8893
|
}
|
|
8817
8894
|
|
|
8818
|
-
var styles$
|
|
8895
|
+
var styles$k = {"active-filter-item":"active-filters-module-Rrmhy","active-filter-value":"active-filters-module-CIuPU","clear-filter-button":"active-filters-module-Ud9kZ"};
|
|
8819
8896
|
|
|
8820
8897
|
const ActiveFilters = ({ onClearAllFilters, onClearFilter, selectedFilterCategories, }) => {
|
|
8821
8898
|
const t = useFormattedMessage();
|
|
8822
8899
|
if (selectedFilterCategories.length === 0)
|
|
8823
8900
|
return null;
|
|
8824
|
-
return (jsx(FilterSection, { button: jsx(RouteLink, { onClick: onClearAllFilters, children: jsx(FormattedMessage, { id: "Clear filters" }) }), title: t('Chosen filters'), variant: "with-action", children: selectedFilterCategories.map(category => category.filters.map(filter => (jsxs("div", { className: clsx(filterSectionStyles['filter-section-item'], styles$
|
|
8901
|
+
return (jsx(FilterSection, { button: jsx(RouteLink, { onClick: onClearAllFilters, children: jsx(FormattedMessage, { id: "Clear filters" }) }), title: t('Chosen filters'), variant: "with-action", children: selectedFilterCategories.map(category => category.filters.map(filter => (jsxs("div", { className: clsx(filterSectionStyles['filter-section-item'], styles$k['active-filter-item']), children: [jsxs("span", { children: [jsxs("span", { children: [jsx(FormattedMessage, { id: `facet.${category.label.toLowerCase()}` }), jsx("span", { children: ": " })] }), jsx("span", { className: styles$k['active-filter-value'], children: filter.label })] }), jsx(IconButton, { className: styles$k['clear-filter-button'], color: "secondary", onClick: () => onClearFilter(category.label, filter), children: jsx(StrokeCloseboxIcon, {}) })] }, `${category.label}-${filter.value}`)))) }));
|
|
8825
8902
|
};
|
|
8826
8903
|
|
|
8827
8904
|
function AlgoliaActiveFilters() {
|
|
@@ -8862,9 +8939,9 @@ function AlgoliaCategoriesFilters() {
|
|
|
8862
8939
|
const t = useFormattedMessage();
|
|
8863
8940
|
if (categories.length <= 0)
|
|
8864
8941
|
return null;
|
|
8865
|
-
return (jsx(FilterSection, { title: t('facet.categories'), variant: "default", children: categories.map(category => (jsx(Fragment$1, { children: jsx("div", { className: filterSectionStyles['filter-section-item'], children: jsxs(Link, { hasUnderline: true, className: clsx(styles$
|
|
8866
|
-
[styles$
|
|
8867
|
-
}), onClick: () => refine(category.value), children: [jsx(StrokeCategoriesIcon, { height: 24, width: 24 }), jsx("span", { children: category.label }), jsxs("span", { className: styles$
|
|
8942
|
+
return (jsx(FilterSection, { title: t('facet.categories'), variant: "default", children: categories.map(category => (jsx(Fragment$1, { children: jsx("div", { className: filterSectionStyles['filter-section-item'], children: jsxs(Link, { hasUnderline: true, className: clsx(styles$l.category, {
|
|
8943
|
+
[styles$l['is-active']]: category.isRefined,
|
|
8944
|
+
}), onClick: () => refine(category.value), children: [jsx(StrokeCategoriesIcon, { height: 24, width: 24 }), jsx("span", { children: category.label }), jsxs("span", { className: styles$l.count, children: ["(", category.count, ")"] })] }) }) }, category.value))) }));
|
|
8868
8945
|
}
|
|
8869
8946
|
|
|
8870
8947
|
function AlgoliaDummyRefinementListConsumer() {
|
|
@@ -8916,7 +8993,7 @@ const MULTISELECT_ATTRIBUTE_IGNORE_LIST = [
|
|
|
8916
8993
|
];
|
|
8917
8994
|
function PanelCloseButton() {
|
|
8918
8995
|
const { close } = useSidebarActions();
|
|
8919
|
-
return (jsx("div", { className: styles$
|
|
8996
|
+
return (jsx("div", { className: styles$l.button, children: jsxs(Button, { withArrow: true, onClick: close, size: "md", children: [jsx(FormattedMessage, { id: "Show" }), " ", jsx(AlgoliaResultsCount, {})] }) }));
|
|
8920
8997
|
}
|
|
8921
8998
|
function AlgoliaFilterPanel({ showActiveCategories = false, showCategoriesFilters = false, }) {
|
|
8922
8999
|
/*
|
|
@@ -8931,7 +9008,7 @@ function AlgoliaFilterPanel({ showActiveCategories = false, showCategoriesFilter
|
|
|
8931
9008
|
facets: ['*'],
|
|
8932
9009
|
maxValuesPerFacet: 100,
|
|
8933
9010
|
});
|
|
8934
|
-
return (jsx("div", { className: styles$
|
|
9011
|
+
return (jsx("div", { className: styles$l['filter-panel'], children: jsxs("div", { className: styles$l['scroll-container'], children: [showActiveCategories && jsx(AlgoliaActiveCategories, {}), showCategoriesFilters && jsx(AlgoliaCategoriesFilters, {}), jsx(AlgoliaActiveFilters, {}), attributesToRender.length === 0 ? (jsx(AlgoliaDummyRefinementListConsumer, {})) : (jsx("section", { children: attributesToRender
|
|
8935
9012
|
.filter(attribute => !MULTISELECT_ATTRIBUTE_IGNORE_LIST.includes(attribute))
|
|
8936
9013
|
.map((attribute, index) => {
|
|
8937
9014
|
return (jsx(AlgoliaMultiSelectFilterSection, { attribute: attribute }, `attribute-${index}`));
|
|
@@ -8942,10 +9019,10 @@ function GlyphsChevronsSlimRightIcon(props) {
|
|
|
8942
9019
|
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "12", viewBox: "0 0 12 12", width: "12", children: jsx("path", { d: "M9,6 L4.06645029,1 C3.87890406,1.08169007 3.69487412,1.19817561 3.51436046,1.34945663 C3.3338468,1.50073764 3.16239331,1.68216803 3,1.89374779 L7.08347812,5.98800959 L3,9.9960307 C3.16649238,10.2121071 3.33794587,10.4031847 3.51436046,10.5692635 C3.69077505,10.7353424 3.87480499,10.8789212 4.06645029,11 L9,6 Z", fillRule: "evenodd" }) }));
|
|
8943
9020
|
}
|
|
8944
9021
|
|
|
8945
|
-
var styles$
|
|
9022
|
+
var styles$j = {"pagination":"pagination-module-k4OgY","page-number-container":"pagination-module-oq89A"};
|
|
8946
9023
|
|
|
8947
9024
|
function Pagination({ currentPage, onChange, totalPages, }) {
|
|
8948
|
-
return (jsxs("div", { className: styles$
|
|
9025
|
+
return (jsxs("div", { className: styles$j.pagination, children: [jsx(IconButton, { isDisabled: currentPage === 1, onClick: () => onChange(currentPage - 1), children: jsx(GlyphsChevronsSlimLeftIcon, {}) }), jsxs("div", { className: styles$j['page-number-container'], children: [jsx(NumberField, { autoGrow: true, label: "current-page", maxValue: totalPages, minValue: 1, onChange: onChange, value: currentPage }), jsx(FormattedMessage, { id: "of" }), jsx("div", { children: totalPages })] }), jsx(IconButton, { isDisabled: currentPage >= totalPages, onClick: () => onChange(currentPage + 1), children: jsx(GlyphsChevronsSlimRightIcon, {}) })] }));
|
|
8949
9026
|
}
|
|
8950
9027
|
|
|
8951
9028
|
function AlgoliaPagination({ onChange }) {
|
|
@@ -9326,20 +9403,20 @@ function AlgoliaSortBy() {
|
|
|
9326
9403
|
return (jsx(Select, { label: t('Sort by'), onChange: value => refine(String(value)), options: options, selectedOption: currentRefinement, showLabel: false, size: "sm" }));
|
|
9327
9404
|
}
|
|
9328
9405
|
|
|
9329
|
-
var styles$
|
|
9406
|
+
var styles$i = {"promo-banner":"promo-banner-module-yuVEO","sm":"promo-banner-module-ut8Kd","lg":"promo-banner-module-CSkIw"};
|
|
9330
9407
|
|
|
9331
9408
|
function PromoBanner({ href, image, variant }) {
|
|
9332
|
-
return (jsx(RouteLink, { className: clsx(styles$
|
|
9409
|
+
return (jsx(RouteLink, { className: clsx(styles$i['promo-banner'], styles$i[variant]), href: href, tabIndex: 0, children: jsx(Image, { fit: "cover", image: image, title: image.altText }) }));
|
|
9333
9410
|
}
|
|
9334
9411
|
|
|
9335
|
-
var styles$
|
|
9412
|
+
var styles$h = {"promos":"promo-banners-module-uVyxh"};
|
|
9336
9413
|
|
|
9337
9414
|
function PromoBanners({ promoBannersData = [] }) {
|
|
9338
9415
|
const { lg } = useBreakpoint();
|
|
9339
9416
|
const promoBanners = promoBannersData.map((promoBanner, index) => (jsx(PromoBanner, { href: promoBanner.href, image: promoBanner.image, variant: index % 2 === 0 ? 'lg' : 'sm' }, `promo-banner-${index}`)));
|
|
9340
9417
|
if (promoBannersData.length === 0)
|
|
9341
9418
|
return null;
|
|
9342
|
-
return (jsx("div", { className: styles$
|
|
9419
|
+
return (jsx("div", { className: styles$h.promos, children: lg ? (jsx(Fragment, { children: promoBanners })) : (jsx(Carousel, { hasNavigation: false, hasOverflow: false, slides: promoBanners, spaceBetween: 16 })) }));
|
|
9343
9420
|
}
|
|
9344
9421
|
|
|
9345
9422
|
function useFetchProductListingPageData({ languageCode, pageUrl, }) {
|
|
@@ -9397,17 +9474,17 @@ const scrollToTop = (scrollOptions) => {
|
|
|
9397
9474
|
});
|
|
9398
9475
|
};
|
|
9399
9476
|
|
|
9400
|
-
var styles$
|
|
9477
|
+
var styles$g = {"sidebar":"sidebar-module-fSa9Q","is-docked":"sidebar-module-AIq0M","transition":"sidebar-module-LEZgg","is-open":"sidebar-module-lV7wp","is-closed":"sidebar-module-dGDrr","close":"sidebar-module-2puGC","is-not-docked":"sidebar-module-Scw7D"};
|
|
9401
9478
|
|
|
9402
9479
|
function InnerSidebar({ children }) {
|
|
9403
9480
|
const { isDocked, isOpen, toggle, transition } = useSidebar();
|
|
9404
|
-
return (jsxs("aside", { className: clsx(styles$
|
|
9405
|
-
[styles$
|
|
9406
|
-
[styles$
|
|
9407
|
-
[styles$
|
|
9408
|
-
[styles$
|
|
9409
|
-
[styles$
|
|
9410
|
-
}), children: [jsx("div", { className: styles$
|
|
9481
|
+
return (jsxs("aside", { className: clsx(styles$g.sidebar, {
|
|
9482
|
+
[styles$g['transition']]: transition,
|
|
9483
|
+
[styles$g['is-open']]: isOpen,
|
|
9484
|
+
[styles$g['is-closed']]: !isOpen,
|
|
9485
|
+
[styles$g['is-docked']]: isDocked,
|
|
9486
|
+
[styles$g['is-not-docked']]: !isDocked,
|
|
9487
|
+
}), children: [jsx("div", { className: styles$g.close, children: jsx(IconButton, { color: "secondary", onClick: toggle, children: jsx(StrokeCloseboxIcon, {}) }) }), children] }));
|
|
9411
9488
|
}
|
|
9412
9489
|
function Sidebar({ children }) {
|
|
9413
9490
|
return jsx(InnerSidebar, { children: children });
|
|
@@ -9422,19 +9499,19 @@ const ToggleSidebarButton = () => {
|
|
|
9422
9499
|
return (jsx(Button, { color: "secondary", icon: jsx(StrokeFilterIcon, {}), onClick: toggle, size: "sm", variant: "outline", children: isOpen ? (jsx(FormattedMessage, { id: "Hide filters" })) : (jsx(FormattedMessage, { id: "Show filters" })) }));
|
|
9423
9500
|
};
|
|
9424
9501
|
|
|
9425
|
-
var styles$
|
|
9502
|
+
var styles$f = {"no-results":"no-results-module-T1cti","title":"no-results-module-mZ8TQ","body":"no-results-module-FQGhC","buttons":"no-results-module-QGZsD"};
|
|
9426
9503
|
|
|
9427
9504
|
function NoResults$1({ content, title }) {
|
|
9428
9505
|
const { lg } = useBreakpoint();
|
|
9429
|
-
return (jsxs("div", { className: styles$
|
|
9506
|
+
return (jsxs("div", { className: styles$f['no-results'], children: [jsx(Heading, { bold: false, className: styles$f.title, size: lg ? 's' : 'xs', tag: "h2", children: title }), jsx("p", { className: styles$f.body, children: content }), jsx("div", { className: styles$f.buttons, children: jsx(RouteButton, { withArrow: true, href: `${config.SHOP_API_URL}`, size: "md", children: jsx(FormattedMessage, { id: "Continue shopping" }) }) })] }));
|
|
9430
9507
|
}
|
|
9431
9508
|
|
|
9432
|
-
var styles$
|
|
9509
|
+
var styles$e = {"category-card":"category-card-module-4NUjH","title":"category-card-module-LEhh3","arrow":"category-card-module-hL4-A","image":"category-card-module-RxWMW","is-selected":"category-card-module-vJ7vB","image-container":"category-card-module-oNTrK"};
|
|
9433
9510
|
|
|
9434
9511
|
function CategoryCard({ className, href, image, isSelected = false, onClick, title, withArrow = false, }) {
|
|
9435
9512
|
return (jsxs(RouteLink, { className: clsx({
|
|
9436
|
-
[styles$
|
|
9437
|
-
}, styles$
|
|
9513
|
+
[styles$e['is-selected']]: isSelected,
|
|
9514
|
+
}, styles$e['category-card'], className), href: href, onClick: onClick, children: [jsx("div", { className: styles$e['image-container'], children: jsx(Image, { className: styles$e.image, ...image, fit: "contain" }) }), jsxs("p", { className: styles$e.title, children: [jsx("span", { children: title }), withArrow && jsx(GlyphsArrowBoldCapsRightIcon, { className: styles$e.arrow })] })] }));
|
|
9438
9515
|
}
|
|
9439
9516
|
|
|
9440
9517
|
function transformAlgoliaCategoryData(categories) {
|
|
@@ -9481,20 +9558,6 @@ function ProductListingPageProvider({ children, data, error, isError, isLoading,
|
|
|
9481
9558
|
return (jsx(ProductListingPageContext.Provider, { value: { data, error, isError, isLoading }, children: children }));
|
|
9482
9559
|
}
|
|
9483
9560
|
|
|
9484
|
-
/**
|
|
9485
|
-
* Create UUID according to
|
|
9486
|
-
* https://www.ietf.org/rfc/rfc4122.txt.
|
|
9487
|
-
*
|
|
9488
|
-
* @returns Generated UUID.
|
|
9489
|
-
*/
|
|
9490
|
-
function createUUID() {
|
|
9491
|
-
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
|
|
9492
|
-
const r = (Math.random() * 16) | 0;
|
|
9493
|
-
const v = c === 'x' ? r : (r & 0x3) | 0x8;
|
|
9494
|
-
return v.toString(16);
|
|
9495
|
-
});
|
|
9496
|
-
}
|
|
9497
|
-
|
|
9498
9561
|
let userToken = generateUserToken();
|
|
9499
9562
|
aa('init', {
|
|
9500
9563
|
apiKey: config.ALGOLIA_API_KEY,
|
|
@@ -9681,10 +9744,10 @@ function useAlgoliaInsights() {
|
|
|
9681
9744
|
sendEvents: Parameters<ReturnType<typeof makeSendEvents>>;
|
|
9682
9745
|
*/
|
|
9683
9746
|
|
|
9684
|
-
var styles$
|
|
9747
|
+
var styles$d = {"promo-card-container":"promo-card-module-idY1g","promo-card":"promo-card-module-e2oii","image":"promo-card-module-jr9sn"};
|
|
9685
9748
|
|
|
9686
9749
|
function PromoCard({ href, image, onClick }) {
|
|
9687
|
-
return (jsx("div", { className: styles$
|
|
9750
|
+
return (jsx("div", { className: styles$d['promo-card-container'], children: jsx(RouteLink, { className: styles$d['promo-card'], href: href, onClick: onClick, children: jsx(Image, { className: styles$d.image, fit: "cover", image: image, title: image.altText }) }) }));
|
|
9688
9751
|
}
|
|
9689
9752
|
|
|
9690
9753
|
function ProductHitCard$2({ hit }) {
|
|
@@ -9712,7 +9775,7 @@ function ProductListingProductOverview() {
|
|
|
9712
9775
|
return (jsx(ProductOverviewGrid, { isLoading: isLoading, children: hits.map(hit => isProductHit(hit) ? (jsx(ProductHitCard$2, { hit: hit }, hit.id)) : (jsx(PromoCard, { href: hit.href, image: hit.image }, hit.id))) }));
|
|
9713
9776
|
}
|
|
9714
9777
|
|
|
9715
|
-
var styles$
|
|
9778
|
+
var styles$c = {"product-listing":"product-listing-page-module-dmIHF","header":"product-listing-page-module-Oz76Z","promos":"product-listing-page-module-iY1yj","action-bar":"product-listing-page-module-XxGrr","sidebar-toggle":"product-listing-page-module-F7bxy","sort":"product-listing-page-module-aQzHr","count":"product-listing-page-module-zx79v","categories":"product-listing-page-module-R4aOl","product-grid-container":"product-listing-page-module-ICkKg","product-grid":"product-listing-page-module-LHE7z","pagination":"product-listing-page-module-xsRaj"};
|
|
9716
9779
|
|
|
9717
9780
|
const defaultSearchClient = createSonicSearchClient({
|
|
9718
9781
|
apiKey: config.ALGOLIA_API_KEY,
|
|
@@ -9730,7 +9793,7 @@ function ProductListingPage({ pageUrl, searchClient = defaultSearchClient, }) {
|
|
|
9730
9793
|
if (!data || isFetching)
|
|
9731
9794
|
return jsx(LoadingPage, {});
|
|
9732
9795
|
const category = data.breadCrumb.slice(1).map(breadCrumb => breadCrumb.label);
|
|
9733
|
-
return (jsx(ProductListingPageProvider, { data: data, error: error, isError: isError, isLoading: isFetching, children: jsx(AlgoliaProvider, { categoryPages: data.categoryPages, hierarchicalCategories: data.hierarchicalCategories, languageCode: languageCode, offlineSearchClient: offlineSearchClient, searchClient: searchClient, children: jsx(Page, { breadCrumb: data.breadCrumb, className: styles$
|
|
9796
|
+
return (jsx(ProductListingPageProvider, { data: data, error: error, isError: isError, isLoading: isFetching, children: jsx(AlgoliaProvider, { categoryPages: data.categoryPages, hierarchicalCategories: data.hierarchicalCategories, languageCode: languageCode, offlineSearchClient: offlineSearchClient, searchClient: searchClient, children: jsx(Page, { breadCrumb: data.breadCrumb, className: styles$c['product-listing'], title: category.slice().pop(), children: jsx(ProductListingPageContent, { currentCategoryPath: data.hierarchicalCategories, promoBanners: data.promoBanners?.top }) }) }, data.categoryPages) }));
|
|
9734
9797
|
}
|
|
9735
9798
|
function ProductListingPageContent({ currentCategoryPath, promoBanners, }) {
|
|
9736
9799
|
const { hits, isLoading } = useAlgoliaHits();
|
|
@@ -9738,7 +9801,7 @@ function ProductListingPageContent({ currentCategoryPath, promoBanners, }) {
|
|
|
9738
9801
|
const t = useFormattedMessage();
|
|
9739
9802
|
return (jsxs(Fragment, { children: [isLoading !== false && !hasHits && jsx(LoadingPage, {}), isLoading === false && !hasHits && (jsx(NoResults$1, { content: jsxs("p", { children: [jsx(FormattedMessage, { id: "You could try exploring our products by category" }), ' ', jsx("br", {}), jsx(FormattedMessage, { id: "Try 'Search' and try to find the product you're looking for" })] }), title: t('Sorry, there are no products found') })), jsxs("div", { style: {
|
|
9740
9803
|
display: !hasHits ? 'none' : undefined,
|
|
9741
|
-
}, children: [promoBanners?.length && (jsx("section", { className: styles$
|
|
9804
|
+
}, children: [promoBanners?.length && (jsx("section", { className: styles$c.promos, children: jsx(PromoBanners, { promoBannersData: promoBanners }) })), jsx("section", { className: styles$c.categories, children: jsx(ProductListingPageCategoryCarousel, { currentCategoryPath: currentCategoryPath }) }), jsxs("section", { className: styles$c['action-bar'], children: [jsx("div", { className: styles$c['sidebar-toggle'], children: jsx(ToggleSidebarButton, {}) }), jsx("span", { className: styles$c.count, children: jsx(AlgoliaResultsCount, {}) }), jsx("div", { className: styles$c.sort, children: jsx(AlgoliaSortBy, {}) })] }), jsx("section", { children: jsxs("div", { className: styles$c['product-grid-container'], children: [jsx(Sidebar, { children: jsx(AlgoliaFilterPanel, { showActiveCategories: true }) }), jsxs("div", { className: styles$c['product-grid'], children: [jsx(ProductListingProductOverview, {}), jsx("div", { className: styles$c.pagination, children: jsx(AlgoliaPagination, { onChange: () => {
|
|
9742
9805
|
setTimeout(() => {
|
|
9743
9806
|
scrollToTop();
|
|
9744
9807
|
}, 100);
|
|
@@ -9786,7 +9849,7 @@ function SearchResultsPageCategoryCarousel() {
|
|
|
9786
9849
|
}, title: category.name }, index))) }));
|
|
9787
9850
|
}
|
|
9788
9851
|
|
|
9789
|
-
var styles$
|
|
9852
|
+
var styles$b = {"search-results":"search-results-page-module-M7SIu","header":"search-results-page-module-DpNT-","action-bar":"search-results-page-module-RJoMk","sidebar-toggle":"search-results-page-module-SzLQb","sort":"search-results-page-module-cgonp","count":"search-results-page-module-hunZp","categories":"search-results-page-module-n2lSj","product-grid-container":"search-results-page-module-TK-iE","product-grid":"search-results-page-module-HWUnk","pagination":"search-results-page-module-SZYiA"};
|
|
9790
9853
|
|
|
9791
9854
|
function SearchResultsPage({ location, searchClient, }) {
|
|
9792
9855
|
const languageCode = useLanguageCode();
|
|
@@ -9795,7 +9858,7 @@ function SearchResultsPage({ location, searchClient, }) {
|
|
|
9795
9858
|
const keyword = Array.isArray(keywords) ? keywords.join(' ') : keywords;
|
|
9796
9859
|
if (!keyword)
|
|
9797
9860
|
return jsx("h1", { children: "No search results...." });
|
|
9798
|
-
return (jsx(AlgoliaProvider, { languageCode: languageCode, query: keyword, searchClient: searchClient, children: jsx(Page, { breadCrumb: [], className: styles$
|
|
9861
|
+
return (jsx(AlgoliaProvider, { languageCode: languageCode, query: keyword, searchClient: searchClient, children: jsx(Page, { breadCrumb: [], className: styles$b['search-results'], title: t("'{0}' in all products", {
|
|
9799
9862
|
replacementValues: { 0: keyword },
|
|
9800
9863
|
}), children: jsx(SearchResultsPageContent, { keyword: keyword }) }) }));
|
|
9801
9864
|
}
|
|
@@ -9807,14 +9870,14 @@ function SearchResultsPageContent({ keyword }) {
|
|
|
9807
9870
|
replacementValues: { 0: keyword },
|
|
9808
9871
|
}) })), jsxs("div", { style: {
|
|
9809
9872
|
display: !hasHits ? 'none' : undefined,
|
|
9810
|
-
}, children: [jsx("section", { className: styles$
|
|
9873
|
+
}, children: [jsx("section", { className: styles$b.categories, children: jsx(SearchResultsPageCategoryCarousel, {}) }), jsxs("section", { className: styles$b['action-bar'], children: [jsx("div", { className: styles$b['sidebar-toggle'], children: jsx(ToggleSidebarButton, {}) }), jsx("span", { className: styles$b.count, children: jsx(AlgoliaResultsCount, {}) }), jsx("div", { className: styles$b.sort, children: jsx(AlgoliaSortBy, {}) })] }), jsx("section", { children: jsxs("div", { className: styles$b['product-grid-container'], children: [jsx(Sidebar, { children: jsx(AlgoliaFilterPanel, { showCategoriesFilters: true }) }), jsxs("div", { className: styles$b['product-grid'], children: [jsx(SearchResultProductOverview, {}), jsx("div", { className: styles$b.pagination, children: jsx(AlgoliaPagination, { onChange: () => {
|
|
9811
9874
|
setTimeout(() => {
|
|
9812
9875
|
scrollToTop();
|
|
9813
9876
|
}, 100);
|
|
9814
9877
|
} }) })] })] }) })] })] }));
|
|
9815
9878
|
}
|
|
9816
9879
|
|
|
9817
|
-
var styles$
|
|
9880
|
+
var styles$a = {"background-overlay":"background-overlay-module-mGiNQ","open":"background-overlay-module-5Uxcl","close":"background-overlay-module-GRInQ"};
|
|
9818
9881
|
|
|
9819
9882
|
function BackgroundOverlay({ className, isOpen, onClick, }) {
|
|
9820
9883
|
const [, setRender] = useState(isOpen);
|
|
@@ -9835,13 +9898,13 @@ function BackgroundOverlay({ className, isOpen, onClick, }) {
|
|
|
9835
9898
|
}, [isOpen]);
|
|
9836
9899
|
if (typeof window === 'undefined')
|
|
9837
9900
|
return null;
|
|
9838
|
-
return ReactDOM.createPortal(jsx("div", { ref: nodeRef, className: clsx(styles$
|
|
9839
|
-
[styles$
|
|
9840
|
-
[styles$
|
|
9901
|
+
return ReactDOM.createPortal(jsx("div", { ref: nodeRef, className: clsx(styles$a['background-overlay'], {
|
|
9902
|
+
[styles$a['open']]: isOpen,
|
|
9903
|
+
[styles$a['close']]: !isOpen,
|
|
9841
9904
|
}, className), onClick: onClick }), document.body);
|
|
9842
9905
|
}
|
|
9843
9906
|
|
|
9844
|
-
var styles$
|
|
9907
|
+
var styles$9 = {"sidebar-container":"sidebar-provider-module-rjeCL","transition":"sidebar-provider-module-C0cKR"};
|
|
9845
9908
|
|
|
9846
9909
|
function SidebarDetectBreakpoint() {
|
|
9847
9910
|
const xxl = useIsBreakpoint('xxl');
|
|
@@ -9871,50 +9934,17 @@ function SidebarDetectBreakpoint() {
|
|
|
9871
9934
|
function SidebarProvider({ children }) {
|
|
9872
9935
|
const state = useSidebar();
|
|
9873
9936
|
const { close, isDocked, isOpen, transition } = state;
|
|
9874
|
-
return (jsxs("div", { className: clsx(styles$
|
|
9875
|
-
[styles$
|
|
9876
|
-
[styles$
|
|
9877
|
-
[styles$
|
|
9937
|
+
return (jsxs("div", { className: clsx(styles$9['sidebar-container'], {
|
|
9938
|
+
[styles$9['transition']]: transition,
|
|
9939
|
+
[styles$9['docked']]: isDocked,
|
|
9940
|
+
[styles$9['open']]: isOpen,
|
|
9878
9941
|
}), children: [jsx(SidebarDetectBreakpoint, {}), children, isDocked && isOpen && (jsx(BackgroundOverlay, { isOpen: isOpen, onClick: close }))] }));
|
|
9879
9942
|
}
|
|
9880
9943
|
|
|
9881
|
-
var styles$
|
|
9944
|
+
var styles$8 = {"container":"toast-provider-module-EoPKW","toast":"toast-provider-module-SeZ02","body":"toast-provider-module-BdbPL"};
|
|
9882
9945
|
|
|
9883
9946
|
function ToastProvider(props) {
|
|
9884
|
-
return (jsx(ToastContainer, { autoClose: 3000, bodyClassName: styles$
|
|
9885
|
-
}
|
|
9886
|
-
|
|
9887
|
-
var styles$8 = {"toast":"toast-module-VzLw4","close":"toast-module-mAwpu","icon":"toast-module-JqNiT","success":"toast-module-cuSIT","info":"toast-module-ABLCP","warning":"toast-module-jGWiH","danger":"toast-module-t33Ra"};
|
|
9888
|
-
|
|
9889
|
-
const icons = {
|
|
9890
|
-
danger: jsx(SolidAttentionIcon, {}),
|
|
9891
|
-
info: jsx(SolidInformationIcon, {}),
|
|
9892
|
-
success: jsx(SolidOkayIcon, {}),
|
|
9893
|
-
warning: jsx(SolidNoticeIcon, {}),
|
|
9894
|
-
};
|
|
9895
|
-
const Toast = forwardRef(({ className, id, onClose, toastMessage: { body, isUserDismissable, messageType = 'info' }, }, ref) => {
|
|
9896
|
-
return (jsxs("div", { ref: ref, className: clsx(styles$8.toast, styles$8[messageType], className), children: [jsx("span", { className: styles$8.icon, children: icons[messageType] }), body, isUserDismissable && (jsx(IconButton, { className: styles$8.close, color: "secondary", onClick: () => onClose?.(id), children: jsx(StrokeCloseboxIcon, {}) }))] }));
|
|
9897
|
-
});
|
|
9898
|
-
Toast.displayName = 'Toast';
|
|
9899
|
-
|
|
9900
|
-
function useToast() {
|
|
9901
|
-
const [toastCount, setToastCount] = useState(0);
|
|
9902
|
-
const targetRef = useRef(null);
|
|
9903
|
-
useEffect(() => {
|
|
9904
|
-
if (targetRef.current) {
|
|
9905
|
-
targetRef.current.style.zIndex = toastCount.toString();
|
|
9906
|
-
}
|
|
9907
|
-
}, [toastCount]);
|
|
9908
|
-
return {
|
|
9909
|
-
addToast(toastMessage, toastOptions) {
|
|
9910
|
-
setToastCount(toastCount => toastCount + 1);
|
|
9911
|
-
const id = createUUID();
|
|
9912
|
-
toast(jsx(Toast, { ref: targetRef, id: id, onClose: id => toast.dismiss(id), toastMessage: toastMessage }), {
|
|
9913
|
-
toastId: id,
|
|
9914
|
-
...toastOptions,
|
|
9915
|
-
});
|
|
9916
|
-
},
|
|
9917
|
-
};
|
|
9947
|
+
return (jsx(ToastContainer, { autoClose: 3000, bodyClassName: styles$8.body, className: styles$8.container, closeButton: false, hideProgressBar: true, newestOnTop: true, toastClassName: styles$8.toast, transition: Slide, ...props }));
|
|
9918
9948
|
}
|
|
9919
9949
|
|
|
9920
9950
|
const categoriesPlugin = ({ productsIndexName, searchClient, }) => {
|