@athoscommerce/snap-preact 1.11.0 → 1.12.1-beta.152

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

@@ -0,0 +1,173 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatProductComparisonMessage = 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 hooks_1 = require("../../../hooks");
+const Image_1 = require("../../Atoms/Image");
+const Button_1 = require("../../Atoms/Button");
+const defaultStyles = () => {
+    return (0, react_1.css)({
+        padding: '1em',
+        '.ss__chat-product-comparison-message__table-wrapper': {
+            overflowX: 'auto',
+        },
+        '.ss__chat-product-comparison-message__table': {
+            borderCollapse: 'collapse',
+            width: '100%',
+            fontSize: '0.9em',
+            '.ss__chat-product-comparison-message__table__caption': {
+                position: 'absolute',
+                width: '1px',
+                height: '1px',
+                padding: 0,
+                margin: '-1px',
+                overflow: 'hidden',
+                clip: 'rect(0, 0, 0, 0)',
+                whiteSpace: 'nowrap',
+                border: 0,
+            },
+            'th, td': {
+                padding: '0.6em 0.8em',
+                textAlign: 'left',
+                verticalAlign: 'top',
+                border: '1px solid #E5E7EB',
+            },
+            'tbody tr:nth-of-type(even)': {
+                background: '#F9FAFB',
+            },
+            '.ss__chat-product-comparison-message__table__product-header': {
+                textAlign: 'center',
+                minWidth: '120px',
+                '.ss__chat-product-comparison-message__table__product-header__link.ss__button': {
+                    background: 'none',
+                    border: 'none',
+                    padding: 0,
+                    font: 'inherit',
+                    color: 'inherit',
+                    display: 'block',
+                    width: '100%',
+                    cursor: 'pointer',
+                    textAlign: 'center',
+                    '&:hover .ss__chat-product-comparison-message__table__product-header__name': {
+                        textDecoration: 'underline',
+                    },
+                },
+                '.ss__chat-product-comparison-message__table__product-header__image': {
+                    width: '80px',
+                    height: '80px',
+                    objectFit: 'contain',
+                    display: 'block',
+                    margin: '0 auto 0.4em',
+                },
+                '.ss__chat-product-comparison-message__table__product-header__name': {
+                    fontWeight: 'bold',
+                    fontSize: '0.85em',
+                },
+            },
+            '.ss__chat-product-comparison-message__table__feature-name': {
+                fontWeight: '600',
+                background: '#F3F4F6',
+                whiteSpace: 'nowrap',
+            },
+            '.ss__chat-product-comparison-message__table__value': {
+                textAlign: 'center',
+            },
+        },
+    });
+};
+exports.ChatProductComparisonMessage = (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)('chatProductComparisonMessage', globalTheme, defaultProps, properties);
+    const { chatItem, controller, disableStyles, className, internalClassName, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('chatProductComparisonMessage', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
+    }
+    const subProps = {
+        image: {
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+        productHeaderButton: {
+            disableStyles,
+            theme: props.theme,
+            treePath,
+        },
+    };
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    //initialize lang
+    const defaultLang = {
+        comparisonTable: {
+            value: 'Product comparison',
+            attributes: {
+                'aria-label': 'Product comparison',
+            },
+        },
+        featureColumnHeader: {
+            attributes: {
+                'aria-label': 'Feature',
+            },
+        },
+    };
+    //deep merge with props.lang
+    const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    const mergedLang = (0, hooks_1.useLang)(lang, {
+        controller,
+        chatItem,
+    }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    const { messageType, comparisonData, searchResults } = chatItem;
+    if (messageType !== 'productComparison') {
+        controller?.log?.warn('ChatProductComparisonMessage received message with unsupported type:', messageType, 'Expected type: productComparison');
+        return null;
+    }
+    const headings = searchResults.length ? searchResults.map((r) => String(r?.id)) : [];
+    const getDisplay = (r) => r?.display || r;
+    const allProductsHaveImage = headings.length > 0 &&
+        headings.every((heading) => {
+            const core = getDisplay(searchResults.find((r) => r?.id === heading))?.mappings?.core;
+            return !!(core?.imageUrl || core?.parentImageUrl);
+        });
+    return comparisonData.features.length ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-comparison-message', className, internalClassName), ...styling, children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-comparison-message__table-wrapper'), children: (0, jsx_runtime_1.jsxs)("table", { className: (0, classnames_1.default)('ss__chat-product-comparison-message__table'), ...mergedLang.comparisonTable.attributes, children: [(0, jsx_runtime_1.jsx)("caption", { className: "ss__chat-product-comparison-message__table__caption", ...mergedLang.comparisonTable.value }), (0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { scope: "col", ...mergedLang.featureColumnHeader.attributes }), headings.map((heading) => {
+                                        const product = searchResults.find((r) => r?.id === heading);
+                                        const display = getDisplay(product);
+                                        const productName = display?.mappings?.core?.name ?? heading;
+                                        const handleOpenProduct = (e) => {
+                                            if (!controller || !product)
+                                                return;
+                                            controller.track.product.click(e, product);
+                                            controller.productQuickView(product);
+                                        };
+                                        const productDefaultLang = {
+                                            viewProductButton: {
+                                                attributes: {
+                                                    'aria-label': `View details for ${productName}`,
+                                                },
+                                            },
+                                        };
+                                        const productLang = (0, deepmerge_1.default)(productDefaultLang, props.lang || {});
+                                        const productMergedLang = (0, hooks_1.useLang)(productLang, {
+                                            controller,
+                                            chatItem,
+                                            product,
+                                        }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+                                        return ((0, jsx_runtime_1.jsx)("th", { scope: "col", className: (0, classnames_1.default)('ss__chat-product-comparison-message__table__product-header'), children: (0, jsx_runtime_1.jsxs)(Button_1.Button, { ...subProps.productHeaderButton, internalClassName: (0, classnames_1.default)('ss__chat-product-comparison-message__table__product-header__link'), onClick: handleOpenProduct, ...productMergedLang.viewProductButton.attributes, children: [allProductsHaveImage && ((0, jsx_runtime_1.jsx)(Image_1.Image, { ...subProps.image, className: (0, classnames_1.default)('ss__chat-product-comparison-message__table__product-header__image'), src: (display.mappings.core.imageUrl || display.mappings.core.parentImageUrl), alt: productName })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-comparison-message__table__product-header__name'), children: productName })] }) }, heading));
+                                    })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: comparisonData.features.map((feature, index) => ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { scope: "row", className: (0, classnames_1.default)('ss__chat-product-comparison-message__table__feature-name'), children: feature.featureName }), headings.map((heading) => ((0, jsx_runtime_1.jsx)("td", { className: (0, classnames_1.default)('ss__chat-product-comparison-message__table__value'), children: feature.values[heading] ?? '—' }, heading)))] }, index))) })] }) }) }) })) : null;
+});

package/dist/cjs/components/src/components/Molecules/ChatProductComparisonMessage/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("./ChatProductComparisonMessage"), exports);