@athoscommerce/snap-preact 1.10.0 → 1.10.1-beta.150

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

@@ -0,0 +1,252 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatResult = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const Image_1 = require("../../Atoms/Image");
+const Button_1 = require("../../Atoms/Button");
+const Price_1 = require("../../Atoms/Price");
+const CalloutBadge_1 = require("../CalloutBadge");
+const OverlayBadge_1 = require("../OverlayBadge");
+const hooks_1 = require("../../../hooks");
+const defaultStyles = ({ theme }) => {
+    const colorCta = utilities_1.Colour.concrete(theme?.variables?.colors?.accent) || '#feeeae';
+    return (0, react_1.css)({
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        width: '100%',
+        boxSizing: 'border-box',
+        border: '1px solid #e5e7eb',
+        borderRadius: '1em',
+        overflow: 'hidden',
+        // rest slightly scaled down and grow to full size on hover so the zoom
+        // reads as a subtle enlargement without ever exceeding the slide bounds
+        // (the surrounding Slideshow clips overflow), which would otherwise crop
+        // the card's border on hover
+        transform: 'scale(0.96)',
+        transition: 'transform 0.3s ease',
+        '&:hover': {
+            transform: 'scale(1)',
+        },
+        '.ss__chat-result__image': {
+            width: '100%',
+            aspectRatio: '1 / 1',
+            position: 'relative',
+            overflow: 'hidden',
+            // fixed-aspect frame: scale the image to fill it and crop overflow so
+            // results with different intrinsic image aspect ratios still line up
+            // at the same height when displayed side-by-side.
+            img: {
+                width: '100%',
+                height: '100%',
+                objectFit: 'cover',
+            },
+            '.ss__chat-result__image__buttons': {
+                position: 'absolute',
+                bottom: 0,
+                width: '100%',
+                display: 'flex',
+                justifyContent: 'center',
+                gap: '0.5em',
+                padding: '0.5em',
+                boxSizing: 'border-box',
+                '.ss__button': {
+                    padding: '0.25em 0.5em',
+                    background: 'rgba(255, 255, 255, 0.9)',
+                    textAlign: 'center',
+                    justifyContent: 'center',
+                    borderRadius: '2em',
+                    boxShadow: 'inset 0 0 1px 0px rgba(0, 0, 0, 0.5)',
+                    flex: '1 1 0',
+                    minWidth: 0,
+                    fontWeight: 'bold',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                },
+            },
+            '.ss__chat-result__image__icons': {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                gap: '0.5em',
+                padding: '0.5em',
+                flex: '0 0 auto',
+                alignItems: 'flex-start',
+                boxSizing: 'border-box',
+                '.ss__button': {
+                    height: '2.5em',
+                    width: '2.5em',
+                    backgroundColor: '#000',
+                    borderRadius: '50%',
+                    justifyContent: 'center',
+                    boxSizing: 'border-box',
+                    '&.ss__chat-result__image__icons__icon--cart': {
+                        backgroundColor: colorCta,
+                        svg: {
+                            fill: '#000',
+                            stroke: '#000',
+                        },
+                    },
+                    svg: {
+                        fill: '#fff',
+                        stroke: '#fff',
+                    },
+                },
+            },
+        },
+        '.ss__chat-result__content': {
+            background: '#f9fafb',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '0.5em',
+            flex: '1 1 auto',
+            padding: '0.5em 0',
+            '.ss__chat-result__content__title--primary': {
+                padding: '0 0.5em',
+                '&.ss__button': {
+                    display: 'block',
+                    background: 'none',
+                    border: 'none',
+                    color: 'inherit',
+                    font: 'inherit',
+                    textAlign: 'left',
+                    cursor: 'pointer',
+                    width: 'auto',
+                },
+            },
+            '.ss__chat-result__content__title--secondary': {
+                padding: '0 0.5em',
+                color: '#6A7282',
+                fontSize: '90%',
+            },
+            '.ss__chat-result__content__price': {
+                padding: '0 0.5em',
+                color: '#000',
+                fontWeight: 'bold',
+                fontSize: '1.2em',
+            },
+        },
+    });
+};
+exports.ChatResult = (0, providers_1.withTracking)((0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
+        treePath: globalTreePath,
+    };
+    const props = (0, utilities_1.mergeProps)('chatResult', globalTheme, defaultProps, properties);
+    const { controller, result, scrollToBottom, onProductClick, trackingRef, disableStyles, className, internalClassName, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('chatResult', {
+        ...props,
+        customComponent: props.customComponent && props.customComponent !== 'ChatResult' ? props.customComponent : undefined,
+    });
+    if (!shouldRenderDefault) {
+        return overrideElement;
+    }
+    const isInComparison = controller.store.currentChat?.comparisons.items.some((item) => item.result?.id === result.id);
+    // a result is "configurable" when it ships with selectable variant options
+    // (e.g. color/size); those need a selection before they can be added to cart
+    const isConfigurable = !!result.variants?.optionConfig && Object.keys(result.variants.optionConfig).length > 0;
+    const subProps = {
+        button: {
+            disableStyles,
+            theme: props.theme,
+            treePath,
+        },
+        image: {
+            lazy: false,
+            onLoad: scrollToBottom,
+            disableStyles,
+            theme: props.theme,
+            treePath,
+        },
+    };
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const productName = result.display.mappings.core?.name;
+    //initialize lang
+    const defaultLang = {
+        similarButton: {
+            value: 'Similar',
+            attributes: {
+                'aria-label': `Show similar to ${productName || 'product'}`,
+            },
+        },
+        compareButton: {
+            value: 'Compare',
+            attributes: {
+                'aria-label': `Compare ${productName || 'product'}`,
+            },
+        },
+        addedToComparisonButton: {
+            attributes: {
+                'aria-label': `${productName || 'Product'} added to comparison`,
+                title: 'Added to comparison',
+            },
+        },
+        discussButton: {
+            attributes: {
+                'aria-label': `Discuss ${productName || 'product'}`,
+                title: 'Discuss Product',
+            },
+        },
+        addToCartButton: {
+            attributes: {
+                'aria-label': `Add ${productName || 'product'} to cart`,
+                title: 'Add to Cart',
+            },
+        },
+        configureButton: {
+            attributes: {
+                'aria-label': `Configure ${productName || 'product'}`,
+                title: 'Configure',
+            },
+        },
+        productLink: {
+            attributes: {
+                'aria-label': `Open ${productName || 'product'}`,
+            },
+        },
+    };
+    //deep merge with props.lang
+    const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    const mergedLang = (0, hooks_1.useLang)(lang, {
+        controller,
+        result,
+    }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-result', className, internalClassName), ref: trackingRef, ...styling, children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__chat-result__image", children: [(0, jsx_runtime_1.jsx)(OverlayBadge_1.OverlayBadge, { controller: controller, result: result, renderEmpty: true, children: (0, jsx_runtime_1.jsx)(Image_1.Image, { ...subProps.image, className: 'ss__chat-result__detail-slot__image', alt: productName || '', src: result.display.mappings.core?.imageUrl || result.display.mappings.core?.parentImageUrl || '' }) }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat-result__image__buttons", children: [controller.store.features.similarProducts.enabled && ((0, jsx_runtime_1.jsx)(Button_1.Button, { ...subProps.button, className: 'ss__chat-result__image__buttons__similar', onClick: () => {
+                                        controller.productSimilar(result);
+                                    }, ...mergedLang.similarButton.all })), (0, jsx_runtime_1.jsx)(Button_1.Button, { ...subProps.button, className: 'ss__chat-result__image__buttons__compare', icon: isInComparison ? { icon: 'check-thin' } : undefined, "aria-pressed": isInComparison, onClick: () => {
+                                        // toggle: clicking again removes it from comparison, matching the 'x' icon in the comparison view
+                                        if (isInComparison) {
+                                            controller.store.currentChat?.comparisons.remove(result.id);
+                                            return;
+                                        }
+                                        controller.compareProduct(result);
+                                    }, ...(isInComparison ? mergedLang.addedToComparisonButton.attributes : mergedLang.compareButton.all) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat-result__image__icons", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { ...subProps.button, className: 'ss__chat-result__image__icons__icon--inquire', icon: { icon: 'chat' }, onClick: () => {
+                                        controller.productQuery(result);
+                                    }, ...mergedLang.discussButton.attributes }), (0, jsx_runtime_1.jsx)(Button_1.Button, { ...subProps.button, className: 'ss__chat-result__image__icons__icon--cart', icon: { icon: 'cart' }, onClick: () => {
+                                        // configurable products need a variant selection — open the product
+                                        // information panel so the user can pick options before adding to cart
+                                        if (isConfigurable) {
+                                            controller.productQuickView(result);
+                                            return;
+                                        }
+                                        controller.track.product.addToCart(result);
+                                        controller.addToCart(result);
+                                    }, ...(isConfigurable ? mergedLang.configureButton.attributes : mergedLang.addToCartButton.attributes) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat-result__content", children: [productName &&
+                            (onProductClick ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { ...subProps.button, internalClassName: 'ss__chat-result__content__title--primary', content: productName, onClick: (e) => onProductClick(e), ...mergedLang.productLink.attributes })) : ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat-result__content__title--primary", children: productName }))), result.display.mappings.core?.price != null && ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat-result__content__price", children: (0, jsx_runtime_1.jsx)(Price_1.Price, { value: result.display.mappings.core?.price }) })), (0, jsx_runtime_1.jsx)(CalloutBadge_1.CalloutBadge, { controller: controller, result: result })] })] }) }));
+}));

package/dist/cjs/components/src/components/Molecules/ChatResult/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ChatResult"), exports);

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

@@ -0,0 +1,113 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatResultsDisplay = void 0;
+const react_1 = require("@emotion/react");
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const react_2 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const hooks_1 = require("../../../hooks");
+const Slideshow_1 = require("../Slideshow");
+const ChatResult_1 = require("../ChatResult");
+const defaultStyles = () => {
+    return (0, react_2.css)({
+        width: '100%',
+        marginTop: '12px',
+        '.ss__chat-results-display__result': {
+            height: '100%',
+            width: '100%',
+            display: 'flex',
+            cursor: 'pointer',
+        },
+    });
+};
+const slideshowStyleScript = () => {
+    return (0, react_2.css)({
+        '.ss__slideshow__navigation .ss__button': {
+            background: 'rgba(255, 255, 255, 0.85)',
+            borderRadius: '50%',
+            width: '2em',
+            height: '2em',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            boxShadow: '0 1px 3px rgba(0, 0, 0, 0.2)',
+        },
+    });
+};
+exports.ChatResultsDisplay = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
+        treePath: globalTreePath,
+    };
+    const props = (0, utilities_1.mergeProps)('chatResultsDisplay', globalTheme, defaultProps, properties);
+    const { chatItem, controller, scrollToBottom, onProductQuickView, disableStyles, className, internalClassName, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('chatResultsDisplay', props);
+    const currentChat = controller.store.currentChat;
+    const activeMessage = currentChat?.activeMessage;
+    const isSideChatOpen = !!activeMessage &&
+        ['inspirationResult', 'productComparison', 'productQuery'].includes(activeMessage.messageType) &&
+        currentChat?.dismissedSideChatMessageId !== activeMessage.id;
+    const isNarrow = (0, hooks_1.useMediaQuery)('(max-width: 549px)');
+    // only the tablet range needs the narrower slideshow when the side chat is open;
+    // at >= 1200px there's room to keep 2.9 slides alongside the secondary chat
+    const isTabletRange = (0, hooks_1.useMediaQuery)('(min-width: 768px) and (max-width: 1200px)');
+    const isConstrained = !isNarrow && isSideChatOpen && isTabletRange;
+    const slidesToShow = isNarrow || isConstrained ? 1.9 : 2.9;
+    // after all hooks — an override that resolves or fails mid-lifecycle must not
+    // change the hook count between renders
+    if (!shouldRenderDefault) {
+        return overrideElement;
+    }
+    const subProps = {
+        slideshow: {
+            disableStyles,
+            theme: props.theme,
+            treePath,
+            slidesToShow,
+            slidesToMove: isNarrow || isConstrained ? 2 : 3,
+            loop: false,
+            showPagination: false,
+            centerInsufficientSlides: false,
+            overlayNavigation: true,
+            styleScript: slideshowStyleScript,
+        },
+        chatResult: {
+            disableStyles,
+            theme: props.theme,
+            treePath,
+        },
+    };
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const handleResultClick = (e, result) => {
+        // buttons should be able to be clicked without triggering the product click
+        if (e.composedPath().some((el) => el instanceof HTMLElement && el.matches('button, .ss__button, a')))
+            return;
+        controller.track.product.click(e, result);
+        controller.productQuickView(result);
+        onProductQuickView?.();
+    };
+    const renderSlideshow = (results, key) => {
+        const slides = results.map((result) => ({
+            content: ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat-results-display__result", onClick: (e) => handleResultClick(e, result), children: (0, jsx_runtime_1.jsx)(ChatResult_1.ChatResult, { ...subProps.chatResult, result: result, controller: controller, scrollToBottom: scrollToBottom, onProductClick: (e) => {
+                        controller.track.product.click(e, result);
+                        controller.productQuickView(result);
+                        onProductQuickView?.();
+                    } }) }, result.id)),
+        }));
+        return (0, react_1.createElement)(Slideshow_1.Slideshow, { ...subProps.slideshow, key: key, slides: slides });
+    };
+    // the store hydrates message results into Product instances before they reach this component
+    const isRecommendation = chatItem.messageType === 'productRecommendation' && !!chatItem.recommendationResult?.length;
+    if (!isRecommendation && !chatItem.results?.length)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-results-display', className, internalClassName), ...styling, children: isRecommendation
+                ? chatItem.recommendationResult.map((recommendation, index) => recommendation.results?.length ? renderSlideshow(recommendation.results, index) : null)
+                : renderSlideshow(chatItem.results) }) }));
+});

package/dist/cjs/components/src/components/Molecules/ChatResultsDisplay/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ChatResultsDisplay"), exports);

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

@@ -0,0 +1,107 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatSuggestedQuestions = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const react_2 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const hooks_1 = require("../../../hooks");
+const Button_1 = require("../../Atoms/Button");
+const Icon_1 = require("../../Atoms/Icon");
+const defaultStyles = ({ primaryColor, theme }) => {
+    const colorPrimary = primaryColor || utilities_1.Colour.concrete(theme?.variables?.colors?.primary) || '#253B80';
+    return (0, react_2.css)({
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '10px',
+        '.ss__chat-suggested-questions__item.ss__button': {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: '12px',
+            background: '#fff',
+            border: '1px solid #eee',
+            borderRadius: '12px',
+            padding: '14px 16px',
+            cursor: 'pointer',
+            fontSize: '14px',
+            color: '#333',
+            textAlign: 'left',
+            width: '100%',
+            boxSizing: 'border-box',
+            '.ss__button__content': {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                gap: '12px',
+            },
+            '&:not(.ss__button--disabled):hover': {
+                borderColor: '#ccc',
+                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
+            },
+            '&:focus-visible': {
+                outline: `2px solid ${colorPrimary}`,
+                outlineOffset: '2px',
+            },
+            '.ss__chat-suggested-questions__item__text': {
+                flex: 1,
+                fontWeight: 500,
+            },
+            '.ss__chat-suggested-questions__item__icon': {
+                width: '30px',
+                height: '30px',
+                background: colorPrimary,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: '50%',
+                flexShrink: 0,
+                svg: {
+                    fill: '#fff',
+                    stroke: '#fff',
+                },
+            },
+        },
+    });
+};
+exports.ChatSuggestedQuestions = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
+        treePath: globalTreePath,
+    };
+    const props = (0, utilities_1.mergeProps)('chatSuggestedQuestions', globalTheme, defaultProps, properties);
+    const { controller, questions, actions, disableStyles, className, internalClassName, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('chatSuggestedQuestions', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
+    }
+    const items = questions ?? actions?.map((action) => action.message) ?? [];
+    if (items.length === 0) {
+        return null;
+    }
+    const subProps = {
+        button: {
+            disableStyles,
+            theme: props.theme,
+            treePath,
+        },
+        icon: {
+            disableStyles,
+            theme: props.theme,
+            treePath,
+        },
+    };
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-suggested-questions', className, internalClassName), ...styling, children: items.map((item, index) => ((0, react_1.createElement)(Button_1.Button, { ...subProps.button, key: index, internalClassName: "ss__chat-suggested-questions__item", onClick: () => {
+                    controller.openChat(item);
+                } },
+                (0, jsx_runtime_1.jsx)("span", { className: "ss__chat-suggested-questions__item__text", children: item }),
+                (0, jsx_runtime_1.jsx)("span", { className: "ss__chat-suggested-questions__item__icon", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon, icon: "chat" }) })))) }) }));
+});

package/dist/cjs/components/src/components/Molecules/ChatSuggestedQuestions/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ChatSuggestedQuestions"), exports);

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

@@ -51,6 +51,15 @@ const defaultStyles = () => {
                 background: 'rgba(255, 255, 255, 0.5)',
                 padding: '10px',
             },
+            '& .ss__result__discuss-product-button': {
+                position: 'absolute',
+                bottom: '8px',
+                left: '8px',
+                padding: '4px',
+                border: 'none',
+                background: 'rgba(255, 255, 255, 0.5)',
+                cursor: 'pointer',
+            },
         },
         '& .ss__result__details': {
             padding: '10px',
@@ -83,7 +92,7 @@ exports.Result = (0, mobx_react_lite_1.observer)((properties) => {
         hideRating: true,
     };
     const props = (0, utilities_1.mergeProps)('result', globalTheme, defaultProps, properties);
-    const { result, hideBadge, hideTitle, hidePricing, hideImage, detailSlot, fallback, disableStyles, className, internalClassName, layout, onClick, controller, hideVariantSelections, hideAddToCartButton, onAddToCartClick, addToCartButtonText, addToCartButtonSuccessText, addToCartButtonSuccessTimeout, hideRating, trackingRef, treePath, } = props;
+    const { result, hideBadge, hideTitle, hidePricing, hideImage, detailSlot, fallback, disableStyles, className, internalClassName, layout, onClick, controller, hideVariantSelections, hideAddToCartButton, onAddToCartClick, addToCartButtonText, addToCartButtonSuccessText, addToCartButtonSuccessTimeout, hideRating, trackingRef, treePath, discussProductIcon, onDiscussClick, } = props;
     const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('result', {
         ...props,
         customComponent: props.customComponent && props.customComponent !== 'Result' ? props.customComponent : undefined,
@@ -143,7 +152,7 @@ exports.Result = (0, mobx_react_lite_1.observer)((properties) => {
             // default props
             internalClassName: 'ss__result__image',
             alt: core?.name || '',
-            src: core?.imageUrl || '',
+            src: core?.imageUrl || core?.thumbnailImageUrl || '',
             // inherited props
             ...(0, utilities_1.defined)({
                 disableStyles,
@@ -166,6 +175,17 @@ exports.Result = (0, mobx_react_lite_1.observer)((properties) => {
             theme: props.theme,
             treePath,
         },
+        discussProductButton: {
+            // default props
+            internalClassName: 'ss__result__discuss-product-button',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+            treePath,
+        },
         button: {
             // default props
             internalClassName: 'ss__result__button--addToCart',
@@ -196,6 +216,12 @@ exports.Result = (0, mobx_react_lite_1.observer)((properties) => {
         addToCartButtonText: {
             value: addedToCart ? addToCartButtonSuccessText : addToCartButtonText,
         },
+        discussProductButton: {
+            attributes: {
+                'aria-label': 'Discuss this product',
+                title: 'Discuss this product',
+            },
+        },
     };
     //deep merge with props.lang
     const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
@@ -205,13 +231,34 @@ exports.Result = (0, mobx_react_lite_1.observer)((properties) => {
     }, { 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__result', `ss__result--${layout}`, { 'ss__result--sale': isOnSale }, className, internalClassName), ref: trackingRef, children: [!hideImage && ((0, jsx_runtime_1.jsx)("div", { className: "ss__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, { ...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__result__details", children: [!hideBadge && ((0, jsx_runtime_1.jsx)(CalloutBadge_1.CalloutBadge, { ...subProps.calloutBadge, controller: controller })), !hideTitle && ((0, jsx_runtime_1.jsx)("div", { className: "ss__result__details__title", children: (0, jsx_runtime_1.jsx)("a", { href: core.url, onClick: (e) => {
+    return core ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("article", { ...styling, className: (0, classnames_1.default)('ss__result', `ss__result--${layout}`, { 'ss__result--sale': isOnSale }, className, internalClassName), ref: trackingRef, children: [!hideImage && ((0, jsx_runtime_1.jsxs)("div", { className: "ss__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, { ...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 })) }), discussProductIcon && ((0, jsx_runtime_1.jsx)(Button_1.Button, { ...subProps.discussProductButton, icon: discussProductIcon, onClick: (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                if (onDiscussClick) {
+                                    onDiscussClick(e, result);
+                                }
+                                else if (controller?.type === 'chat') {
+                                    // rendered inside a Chat — go straight to the controller
+                                    controller.productQuery(result);
+                                }
+                                else {
+                                    // otherwise hand off to an integrated Chat via the global bus,
+                                    // which the integration layer wires up (see setupEvents)
+                                    const fire = window?.athos?.fire;
+                                    if (typeof fire === 'function') {
+                                        fire('controller/chat/productQuery', { result });
+                                    }
+                                    else {
+                                        controller?.log?.warn('discussProductIcon requires an onDiscussClick handler or an integrated Chat');
+                                    }
+                                }
+                            }, ...mergedLang.discussProductButton.all }))] })), (0, jsx_runtime_1.jsxs)("div", { className: "ss__result__details", children: [!hideBadge && ((0, jsx_runtime_1.jsx)(CalloutBadge_1.CalloutBadge, { ...subProps.calloutBadge, controller: controller })), !hideTitle && ((0, jsx_runtime_1.jsx)("div", { className: "ss__result__details__title", children: (0, jsx_runtime_1.jsx)("a", { href: core.url, onClick: (e) => {
                                     onClick && onClick(e);
                                 }, dangerouslySetInnerHTML: {
                                     __html: displayName || '',
-                                } }) })), !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__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__result__details__variant-selection", children: result.variants?.selections.map((selection) => {
+                                } }) })), !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__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__result__details__variant-selection", children: result.variants?.selections.map((selection) => {
                                 return ((0, jsx_runtime_1.jsx)(VariantSelection_1.VariantSelection, { ...subProps.variantSelection, type: selection.type, selection: selection }));
                             }) })) : null, !hideAddToCartButton && ((0, jsx_runtime_1.jsx)("div", { className: "ss__result__add-to-cart-wrapper", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { ...subProps.button, ...mergedLang.addToCartButtonText.all }) }))] })] }) })) : null;
 });