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

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

@@ -1,252 +0,0 @@
-"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/ChatResultsDisplay/ChatResultsDisplay.js

@@ -1,113 +0,0 @@
-"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/ChatSuggestedQuestions/ChatSuggestedQuestions.js

@@ -1,107 +0,0 @@
-"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

@@ -1,17 +0,0 @@
-"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);