@athoscommerce/snap-preact 1.9.1 → 1.10.0

package/dist/cjs/components/src/components/Molecules/OverlayBadge/OverlayBadge.js

@@ -1,29 +1,17 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OverlayBadge = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var mobx_react_lite_1 = require("mobx-react-lite");
-var providers_1 = require("../../../providers");
-var utilities_1 = require("../../../utilities");
-var hooks_1 = require("../../../hooks");
-var defaultBadgeStyles = function (_a) {
-    var section = _a.section, top = _a.top, bottom = _a.bottom, index = _a.index, tag = _a.tag;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const hooks_1 = require("../../../hooks");
+const defaultBadgeStyles = ({ section, top, bottom, index, tag, }) => {
     return (0, react_1.css)({
         position: 'relative',
         display: 'flex',
@@ -38,89 +26,104 @@ var defaultBadgeStyles = function (_a) {
         height: '100%',
     });
 };
-var defaultStyles = function (_a) {
-    var _b, _c, _d, _e, _f, _g;
-    var controller = _a.controller;
-    var group = 'overlay';
-    var grid = (_f = (_e = (_d = (_c = (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.meta) === null || _c === void 0 ? void 0 : _c.badges) === null || _d === void 0 ? void 0 : _d.groups) === null || _e === void 0 ? void 0 : _e[group]) === null || _f === void 0 ? void 0 : _f.grid;
-    var gridProperties = {};
-    if ((grid === null || grid === void 0 ? void 0 : grid.length) && ((_g = grid[0]) === null || _g === void 0 ? void 0 : _g.length)) {
-        var gridTemplateAreas = grid.map(function (row) { return "\"".concat(row.join(' '), "\""); }).join(' ');
-        var columns = grid[0].length;
+const defaultStyles = ({ controller }) => {
+    const group = 'overlay';
+    const grid = controller?.store?.meta?.badges?.groups?.[group]?.grid;
+    let gridProperties = {};
+    if (grid?.length && grid[0]?.length) {
+        const gridTemplateAreas = grid.map((row) => `"${row.join(' ')}"`).join(' ');
+        const columns = grid[0].length;
         gridProperties = {
-            gridTemplateColumns: "repeat(".concat(columns, ", minmax(0, 1fr))"),
-            gridTemplateRows: "repeat(".concat(grid.length, ", minmax(0, 1fr))"),
-            gridTemplateAreas: gridTemplateAreas,
+            gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+            gridTemplateRows: `repeat(${grid.length}, minmax(0, 1fr))`,
+            gridTemplateAreas,
         };
     }
     return (0, react_1.css)({
         position: 'relative',
-        '& .ss__overlay-badge__grid-wrapper': __assign({ pointerEvents: 'none', display: 'grid', position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }, gridProperties),
+        '& .ss__overlay-badge__grid-wrapper': {
+            pointerEvents: 'none',
+            display: 'grid',
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            ...gridProperties,
+        },
     });
 };
-var BadgeRenderer = function (_a) {
-    var badge = _a.badge, badgeComponentMap = _a.badgeComponentMap, treePath = _a.treePath;
-    var BadgeComponent = (0, hooks_1.useComponent)(badgeComponentMap, badge.component).ComponentOverride;
+const BadgeRenderer = ({ badge, badgeComponentMap, treePath }) => {
+    const { ComponentOverride: BadgeComponent } = (0, hooks_1.useComponent)(badgeComponentMap, badge.component);
     if (!BadgeComponent) {
         return null;
     }
-    return (0, jsx_runtime_1.jsx)(BadgeComponent, __assign({}, badge, badge.parameters, { treePath: treePath }));
+    return (0, jsx_runtime_1.jsx)(BadgeComponent, { ...badge, ...badge.parameters, treePath: treePath });
 };
-exports.OverlayBadge = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    var globalTheme = (0, providers_1.useTheme)();
-    var snap = (0, providers_1.useSnap)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.OverlayBadge = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const snap = (0, providers_1.useSnap)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         limit: 1,
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('overlayBadge', globalTheme, defaultProps, properties);
-    var result = props.result, children = props.children, controller = props.controller, renderEmpty = props.renderEmpty, limit = props.limit, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
-    var _h = (0, hooks_1.useCustomComponentOverride)('overlayBadge', props), overrideElement = _h.overrideElement, shouldRenderDefault = _h.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('overlayBadge', globalTheme, defaultProps, properties);
+    const { result, children, controller, renderEmpty, limit, className, internalClassName, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('overlayBadge', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
     if (!children) {
-        (_a = controller === null || controller === void 0 ? void 0 : controller.log) === null || _a === void 0 ? void 0 : _a.warn('OverlayBadge component must have children');
+        controller?.log?.warn('OverlayBadge component must have children');
         return null;
     }
-    var meta = (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.meta;
+    const meta = controller?.store?.meta;
     if (!meta) {
-        (_c = controller === null || controller === void 0 ? void 0 : controller.log) === null || _c === void 0 ? void 0 : _c.warn('Controller must have a meta store');
+        controller?.log?.warn('Controller must have a meta store');
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
     }
-    var group = 'overlay';
-    var badgeComponentMap = __assign(__assign(__assign({}, utilities_1.defaultBadgeComponentMap), (((_d = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _d === void 0 ? void 0 : _d.library.import.component.badge) || {})), props.componentMap);
-    var sections = (_g = (_f = (_e = meta === null || meta === void 0 ? void 0 : meta.badges) === null || _e === void 0 ? void 0 : _e.groups) === null || _f === void 0 ? void 0 : _f[group]) === null || _g === void 0 ? void 0 : _g.sections;
+    const group = 'overlay';
+    const badgeComponentMap = {
+        ...utilities_1.defaultBadgeComponentMap,
+        ...(snap?.templates?.library.import.component.badge || {}),
+        ...props.componentMap,
+    };
+    const sections = meta?.badges?.groups?.[group]?.sections;
     // build locations and filter out the locations that have no badges in them to prevent rendering
-    var locations = sections === null || sections === void 0 ? void 0 : sections.map(function (section) {
-        var _a, _b;
-        var sectionSlots = (_b = (_a = meta === null || meta === void 0 ? void 0 : meta.data) === null || _a === void 0 ? void 0 : _a.badges) === null || _b === void 0 ? void 0 : _b.locations[section];
-        var slots = sectionSlots === null || sectionSlots === void 0 ? void 0 : sectionSlots.map(function (slot, index) {
-            var _a;
-            return ({
-                tag: slot.tag,
-                name: slot.name,
-                top: index == 0,
-                bottom: index == sectionSlots.length - 1,
-                badges: (_a = result === null || result === void 0 ? void 0 : result.display.badges) === null || _a === void 0 ? void 0 : _a.atLocation("".concat(section, "/").concat(slot.tag)).slice(0, limit),
-            });
-        }).filter(function (slot) { var _a; return (_a = slot.badges) === null || _a === void 0 ? void 0 : _a.length; });
+    const locations = sections
+        ?.map((section) => {
+        const sectionSlots = meta?.data?.badges?.locations[section];
+        const slots = sectionSlots
+            ?.map((slot, index) => ({
+            tag: slot.tag,
+            name: slot.name,
+            top: index == 0,
+            bottom: index == sectionSlots.length - 1,
+            badges: result?.display.badges?.atLocation(`${section}/${slot.tag}`).slice(0, limit),
+        }))
+            .filter((slot) => slot.badges?.length);
         return {
-            section: section,
-            slots: slots,
+            section,
+            slots,
         };
-    }).filter(function (location) { var _a; return (_a = location.slots) === null || _a === void 0 ? void 0 : _a.length; });
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    if (renderEmpty || (locations === null || locations === void 0 ? void 0 : locations.length)) {
-        return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__overlay-badge', className, internalClassName), children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__overlay-badge__grid-wrapper", children: locations.map(function (location, index) {
-                            var _a;
-                            return (_a = location.slots) === null || _a === void 0 ? void 0 : _a.map(function (slot) {
-                                var badgeStyles = defaultBadgeStyles(__assign(__assign({}, props), { tag: slot.tag, section: location.section, index: index, top: slot.top, bottom: slot.bottom }));
-                                return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__overlay-badge__grid-wrapper__slot', "ss__overlay-badge__grid-wrapper__slot--".concat(slot.tag)), css: [badgeStyles], children: slot.badges.map(function (badge, badgeIndex) { return ((0, jsx_runtime_1.jsx)(BadgeRenderer, { badge: badge, badgeComponentMap: badgeComponentMap, treePath: treePath }, "".concat(slot.tag, "-").concat(badge.component, "-").concat(badgeIndex))); }) }, "".concat(location.section, "-").concat(slot.tag)));
+    })
+        .filter((location) => location.slots?.length);
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    if (renderEmpty || locations?.length) {
+        return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { ...styling, className: (0, classnames_1.default)('ss__overlay-badge', className, internalClassName), children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__overlay-badge__grid-wrapper", children: locations.map((location, index) => {
+                            return location.slots?.map((slot) => {
+                                const badgeStyles = defaultBadgeStyles({
+                                    ...props,
+                                    tag: slot.tag,
+                                    section: location.section,
+                                    index,
+                                    top: slot.top,
+                                    bottom: slot.bottom,
+                                });
+                                return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__overlay-badge__grid-wrapper__slot', `ss__overlay-badge__grid-wrapper__slot--${slot.tag}`), css: [badgeStyles], children: slot.badges.map((badge, badgeIndex) => ((0, jsx_runtime_1.jsx)(BadgeRenderer, { badge: badge, badgeComponentMap: badgeComponentMap, treePath: treePath }, `${slot.tag}-${badge.component}-${badgeIndex}`))) }, `${location.section}-${slot.tag}`));
                             });
-                        }) }), children] })) }));
+                        }) }), children] }) }));
     }
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 });

package/dist/cjs/components/src/components/Molecules/OverlayResult/OverlayResult.js

@@ -1,39 +1,28 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OverlayResult = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var hooks_1 = require("preact/hooks");
-var mobx_react_lite_1 = require("mobx-react-lite");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var Image_1 = require("../../Atoms/Image");
-var Price_1 = require("../../Atoms/Price");
-var providers_1 = require("../../../providers");
-var utilities_1 = require("../../../utilities");
-var snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
-var CalloutBadge_1 = require("../CalloutBadge");
-var OverlayBadge_1 = require("../OverlayBadge");
-var Rating_1 = require("../Rating");
-var Button_1 = require("../../Atoms/Button");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var hooks_2 = require("../../../hooks");
-var VariantSelection_1 = require("../VariantSelection");
-var defaultStyles = function (props) {
-    var overlayBackground = props.overlayBackground, disableSlide = props.disableSlide;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const hooks_1 = require("preact/hooks");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const Image_1 = require("../../Atoms/Image");
+const Price_1 = require("../../Atoms/Price");
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
+const CalloutBadge_1 = require("../CalloutBadge");
+const OverlayBadge_1 = require("../OverlayBadge");
+const Rating_1 = require("../Rating");
+const Button_1 = require("../../Atoms/Button");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const hooks_2 = require("../../../hooks");
+const VariantSelection_1 = require("../VariantSelection");
+const defaultStyles = (props) => {
+    const { overlayBackground, disableSlide } = props;
     return (0, react_1.css)({
         position: 'relative',
         overflow: 'hidden',
@@ -130,11 +119,10 @@ var defaultStyles = function (props) {
         },
     });
 };
-exports.OverlayResult = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.OverlayResult = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         treePath: globalTreePath,
         addToCartButtonText: 'Add To Cart',
         addToCartButtonSuccessText: 'Added!',
@@ -142,101 +130,138 @@ exports.OverlayResult = (0, mobx_react_lite_1.observer)(function (properties) {
         hideAddToCartButton: true,
         overlayBackground: 'linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%)',
     };
-    var props = (0, utilities_1.mergeProps)('overlayResult', globalTheme, defaultProps, properties);
-    var result = props.result, hideBadge = props.hideBadge, hideTitle = props.hideTitle, hidePricing = props.hidePricing, hideImage = props.hideImage, detailSlot = props.detailSlot, fallback = props.fallback, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, onClick = props.onClick, controller = props.controller, hideVariantSelections = props.hideVariantSelections, hideAddToCartButton = props.hideAddToCartButton, onAddToCartClick = props.onAddToCartClick, addToCartButtonText = props.addToCartButtonText, addToCartButtonSuccessText = props.addToCartButtonSuccessText, addToCartButtonSuccessTimeout = props.addToCartButtonSuccessTimeout, hideRating = props.hideRating, trackingRef = props.trackingRef, treePath = props.treePath;
-    var _k = (0, hooks_2.useCustomComponentOverride)('overlayResult', __assign(__assign({}, props), { customComponent: !((_a = treePath === null || treePath === void 0 ? void 0 : treePath.split(' ')) === null || _a === void 0 ? void 0 : _a.includes('result')) && props.customComponent && props.customComponent !== 'OverlayResult'
+    const props = (0, utilities_1.mergeProps)('overlayResult', globalTheme, defaultProps, properties);
+    const { result, hideBadge, hideTitle, hidePricing, hideImage, detailSlot, fallback, disableStyles, className, internalClassName, onClick, controller, hideVariantSelections, hideAddToCartButton, onAddToCartClick, addToCartButtonText, addToCartButtonSuccessText, addToCartButtonSuccessTimeout, hideRating, trackingRef, treePath, } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('overlayResult', {
+        ...props,
+        customComponent: !treePath?.split(' ')?.includes('result') && props.customComponent && props.customComponent !== 'OverlayResult'
             ? props.customComponent
-            : undefined })), overrideElement = _k.overrideElement, shouldRenderDefault = _k.shouldRenderDefault;
+            : undefined,
+    });
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var core = ((_b = result === null || result === void 0 ? void 0 : result.display) === null || _b === void 0 ? void 0 : _b.mappings.core) || ((_c = result === null || result === void 0 ? void 0 : result.mappings) === null || _c === void 0 ? void 0 : _c.core);
-    var _l = (0, hooks_1.useState)(false), addedToCart = _l[0], setAddedToCart = _l[1];
-    var subProps = {
-        variantSelection: __assign(__assign({ 
+    const core = result?.display?.mappings.core || result?.mappings?.core;
+    const [addedToCart, setAddedToCart] = (0, hooks_1.useState)(false);
+    const subProps = {
+        variantSelection: {
             // global theme
-            internalClassName: 'ss__overlay-result__variant-selection' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__overlay-result__variant-selection',
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: treePath }),
-        price: __assign(__assign({ 
+            theme: props.theme,
+            treePath,
+        },
+        price: {
             // global theme
-            internalClassName: 'ss__overlay-result__price' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__overlay-result__price',
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: treePath }),
-        calloutBadge: __assign(__assign({ 
+            theme: props.theme,
+            treePath,
+        },
+        calloutBadge: {
             // default props
-            internalClassName: 'ss__overlay-result__callout-badge', result: result }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__overlay-result__callout-badge',
+            result,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: treePath }),
-        overlayBadge: __assign(__assign({ 
+            theme: props.theme,
+            treePath,
+        },
+        overlayBadge: {
             // default props
-            internalClassName: 'ss__overlay-result__overlay-badge', result: result, controller: controller }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__overlay-result__overlay-badge',
+            result,
+            controller: controller,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: treePath }),
-        image: __assign(__assign({ 
+            theme: props.theme,
+            treePath,
+        },
+        image: {
             // default props
-            internalClassName: 'ss__overlay-result__image', alt: (core === null || core === void 0 ? void 0 : core.name) || '', src: (core === null || core === void 0 ? void 0 : core.imageUrl) || '' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-            fallback: fallback,
-        })), { 
+            internalClassName: 'ss__overlay-result__image',
+            alt: core?.name || '',
+            src: core?.imageUrl || '',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+                fallback: fallback,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: treePath }),
-        rating: __assign(__assign({ 
+            theme: props.theme,
+            treePath,
+        },
+        rating: {
             // default props
-            internalClassName: 'ss__overlay-result__rating', value: (core === null || core === void 0 ? void 0 : core.rating) || 0, count: Number((core === null || core === void 0 ? void 0 : core.ratingCount) || 0) }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__overlay-result__rating',
+            value: core?.rating || 0,
+            count: Number(core?.ratingCount || 0),
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: treePath }),
-        button: __assign(__assign({ 
+            theme: props.theme,
+            treePath,
+        },
+        button: {
             // default props
-            internalClassName: 'ss__overlay-result__button--addToCart', onClick: function (e) {
+            internalClassName: 'ss__overlay-result__button--addToCart',
+            onClick: (e) => {
                 setAddedToCart(true);
                 if (onAddToCartClick) {
                     onAddToCartClick(e, result);
                 }
-                controller === null || controller === void 0 ? void 0 : controller.addToCart([result]);
-                setTimeout(function () { return setAddedToCart(false); }, addToCartButtonSuccessTimeout);
-            } }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+                controller?.addToCart([result]);
+                setTimeout(() => setAddedToCart(false), addToCartButtonSuccessTimeout);
+            },
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: treePath }),
+            theme: props.theme,
+            treePath,
+        },
     };
-    var displayName = core === null || core === void 0 ? void 0 : core.name;
+    let displayName = core?.name;
     if (props.truncateTitle) {
-        displayName = snap_toolbox_1.filters.truncate((core === null || core === void 0 ? void 0 : core.name) || '', props.truncateTitle.limit, props.truncateTitle.append);
+        displayName = snap_toolbox_1.filters.truncate(core?.name || '', props.truncateTitle.limit, props.truncateTitle.append);
     }
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     //initialize lang
-    var defaultLang = {
+    const defaultLang = {
         addToCartButtonText: {
             value: addedToCart ? addToCartButtonSuccessText : addToCartButtonText,
         },
     };
     //deep merge with props.lang
-    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
-    var mergedLang = (0, hooks_2.useLang)(lang, {
+    const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    const mergedLang = (0, hooks_2.useLang)(lang, {
         result: result,
         controller: controller,
-    });
-    var isOnSale = Boolean((core === null || core === void 0 ? void 0 : core.msrp) && (core === null || core === void 0 ? void 0 : core.price) && (core === null || core === void 0 ? void 0 : core.price) < (core === null || core === void 0 ? void 0 : core.msrp));
-    var renderPrices = ((_g = (_f = (_e = (_d = controller === null || controller === void 0 ? void 0 : controller.store) === null || _d === void 0 ? void 0 : _d.config) === null || _e === void 0 ? void 0 : _e.asyncState) === null || _f === void 0 ? void 0 : _f.product) === null || _g === void 0 ? void 0 : _g.price) ? result.state.priceFetched : true;
-    return core ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("article", __assign({}, styling, { className: (0, classnames_1.default)('ss__overlay-result', { 'ss__overlay-result--sale': isOnSale }, className, internalClassName), ref: trackingRef, children: [!hideImage && ((0, jsx_runtime_1.jsx)("div", { className: "ss__overlay-result__image-wrapper", children: (0, jsx_runtime_1.jsx)("a", { href: core.url, onClick: function (e) {
+    }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    const isOnSale = Boolean(core?.msrp && core?.price && core?.price < core?.msrp);
+    const renderPrices = controller?.store?.config?.asyncState?.product?.price ? result.state.priceFetched : true;
+    return core ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("article", { ...styling, className: (0, classnames_1.default)('ss__overlay-result', { 'ss__overlay-result--sale': isOnSale }, className, internalClassName), ref: trackingRef, children: [!hideImage && ((0, jsx_runtime_1.jsx)("div", { className: "ss__overlay-result__image-wrapper", children: (0, jsx_runtime_1.jsx)("a", { href: core.url, onClick: (e) => {
                             onClick && onClick(e);
-                        }, children: !hideBadge ? ((0, jsx_runtime_1.jsx)(OverlayBadge_1.OverlayBadge, __assign({}, subProps.overlayBadge, { controller: controller, children: (0, jsx_runtime_1.jsx)(Image_1.Image, __assign({}, subProps.image)) }))) : ((0, jsx_runtime_1.jsx)(Image_1.Image, __assign({}, subProps.image))) }) })), (0, jsx_runtime_1.jsxs)("div", { className: "ss__overlay-result__details", children: [!hideTitle && ((0, jsx_runtime_1.jsx)("div", { className: "ss__overlay-result__details__title", children: (0, jsx_runtime_1.jsx)("a", { href: core.url, onClick: function (e) {
+                        }, children: !hideBadge ? ((0, jsx_runtime_1.jsx)(OverlayBadge_1.OverlayBadge, { ...subProps.overlayBadge, controller: controller, children: (0, jsx_runtime_1.jsx)(Image_1.Image, { ...subProps.image }) })) : ((0, jsx_runtime_1.jsx)(Image_1.Image, { ...subProps.image })) }) })), (0, jsx_runtime_1.jsxs)("div", { className: "ss__overlay-result__details", children: [!hideTitle && ((0, jsx_runtime_1.jsx)("div", { className: "ss__overlay-result__details__title", children: (0, jsx_runtime_1.jsx)("a", { href: core.url, onClick: (e) => {
                                     onClick && onClick(e);
                                 }, dangerouslySetInnerHTML: {
                                     __html: displayName || '',
-                                } }) })), (0, jsx_runtime_1.jsx)("div", { className: "ss__overlay-result__details__extra", children: (0, jsx_runtime_1.jsxs)("div", { className: "ss__overlay-result__details__extra-inner", children: [!hideBadge && ((0, jsx_runtime_1.jsx)(CalloutBadge_1.CalloutBadge, __assign({}, subProps.calloutBadge, { controller: controller }))), !hideRating && (0, jsx_runtime_1.jsx)(Rating_1.Rating, __assign({}, subProps.rating)), !hidePricing && renderPrices && core.price && core.price > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__overlay-result__details__pricing", children: isOnSale ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Price_1.Price, __assign({}, subProps.price, { value: core.msrp, lineThrough: true, name: 'msrp' })), "\u00A0", (0, jsx_runtime_1.jsx)(Price_1.Price, __assign({}, subProps.price, { value: core.price, name: 'price' }))] })) : ((0, jsx_runtime_1.jsx)(Price_1.Price, __assign({}, subProps.price, { value: core.price }))) })) : null, (0, utilities_1.cloneWithProps)(detailSlot, { result: result, treePath: treePath }), !hideVariantSelections && ((_h = result.variants) === null || _h === void 0 ? void 0 : _h.selections.length) ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__overlay-result__details__variant-selection", children: (_j = result.variants) === null || _j === void 0 ? void 0 : _j.selections.map(function (selection) {
-                                            return (0, jsx_runtime_1.jsx)(VariantSelection_1.VariantSelection, __assign({}, subProps.variantSelection, { selection: selection }));
-                                        }) })) : null, !hideAddToCartButton && ((0, jsx_runtime_1.jsx)("div", { className: "ss__overlay-result__add-to-cart-wrapper", children: (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, subProps.button, { content: addToCartButtonText }, mergedLang.addToCartButtonText.all)) }))] }) })] })] })) })) : null;
+                                } }) })), (0, jsx_runtime_1.jsx)("div", { className: "ss__overlay-result__details__extra", children: (0, jsx_runtime_1.jsxs)("div", { className: "ss__overlay-result__details__extra-inner", children: [!hideBadge && ((0, jsx_runtime_1.jsx)(CalloutBadge_1.CalloutBadge, { ...subProps.calloutBadge, controller: controller })), !hideRating && (0, jsx_runtime_1.jsx)(Rating_1.Rating, { ...subProps.rating }), !hidePricing && renderPrices && core.price && core.price > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__overlay-result__details__pricing", children: isOnSale ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Price_1.Price, { ...subProps.price, value: core.msrp, lineThrough: true, name: 'msrp' }), "\u00A0", (0, jsx_runtime_1.jsx)(Price_1.Price, { ...subProps.price, value: core.price, name: 'price' })] })) : ((0, jsx_runtime_1.jsx)(Price_1.Price, { ...subProps.price, value: core.price })) })) : null, (0, utilities_1.cloneWithProps)(detailSlot, { result, treePath }), !hideVariantSelections && result.variants?.selections.length ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__overlay-result__details__variant-selection", children: result.variants?.selections.map((selection) => {
+                                            return (0, jsx_runtime_1.jsx)(VariantSelection_1.VariantSelection, { ...subProps.variantSelection, selection: selection });
+                                        }) })) : null, !hideAddToCartButton && ((0, jsx_runtime_1.jsx)("div", { className: "ss__overlay-result__add-to-cart-wrapper", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { ...subProps.button, content: addToCartButtonText, ...mergedLang.addToCartButtonText.all }) }))] }) })] })] }) })) : null;
 });