@athoscommerce/snap-preact 1.2.3-beta.2 → 1.2.3-beta.3

package/dist/esm/components/src/components/Organisms/Chat/ChatResult.js

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react-lite';
 import { Image } from '../../Atoms/Image';
 import { Button } from '../../Atoms/Button';
 import { mergeProps, mergeStyles } from '../../../utilities';
-import { css, useTheme, useTreePath, useSnap } from '../../../providers';
+import { css, useTheme, useTreePath, useSnap, withTracking } from '../../../providers';
 import { CalloutBadge, OverlayBadge, Price } from '../../..';
 import { useComponent } from '../../../hooks';
 const defaultStyles = () => {
@@ -100,7 +100,7 @@ const defaultStyles = () => {
         },
     });
 };
-export const ChatResult = observer((properties) => {
+export const ChatResult = withTracking(observer((properties) => {
     const globalTheme = useTheme();
     const globalTreePath = useTreePath();
     const snap = useSnap();
@@ -108,7 +108,7 @@ export const ChatResult = observer((properties) => {
         treePath: globalTreePath,
     };
     const props = mergeProps('chatResult', globalTheme, defaultProps, properties);
-    const { controller, result, scrollToBottom, customComponent } = props;
+    const { controller, result, scrollToBottom, customComponent, trackingRef } = props;
     if (customComponent) {
         const ComponentOverride = useComponent(snap?.templates?.library.import.component.result || {}, customComponent);
         if (ComponentOverride) {
@@ -116,6 +116,9 @@ export const ChatResult = observer((properties) => {
         }
     }
     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: {
             // component theme overrides
@@ -131,13 +134,20 @@ export const ChatResult = observer((properties) => {
         },
     };
     const styling = mergeStyles(properties, defaultStyles);
-    return (_jsxs("div", { className: "ss__chat__result", ...styling, children: [_jsxs("div", { className: "ss__chat__result__image", children: [_jsx(OverlayBadge, { controller: controller, result: result, renderEmpty: true, children: _jsx(Image, { className: 'ss__chat__result__detail-slot__image', alt: result.display.mappings.core?.name || '', src: result.display.mappings.core?.imageUrl || '', ...subProps.image }) }), _jsxs("div", { className: "ss__chat__result__image__buttons", children: [controller.store.features.similarProducts.enabled && (_jsx(Button, { className: 'ss__chat__result__image__buttons__similar', content: 'Similar', onClick: () => {
+    return (_jsxs("div", { className: "ss__chat__result", ref: trackingRef, ...styling, children: [_jsxs("div", { className: "ss__chat__result__image", children: [_jsx(OverlayBadge, { controller: controller, result: result, renderEmpty: true, children: _jsx(Image, { className: 'ss__chat__result__detail-slot__image', alt: result.display.mappings.core?.name || '', src: result.display.mappings.core?.imageUrl || '', ...subProps.image }) }), _jsxs("div", { className: "ss__chat__result__image__buttons", children: [controller.store.features.similarProducts.enabled && (_jsx(Button, { className: 'ss__chat__result__image__buttons__similar', content: 'Similar', onClick: () => {
                                     controller.discussProduct(result, { requestType: 'productSimilar' });
                                 } })), _jsx(Button, { className: 'ss__chat__result__image__buttons__compare', content: isInComparison ? undefined : 'Compare', icon: isInComparison ? { icon: 'check-thin', title: 'Added to comparison' } : undefined, onClick: () => {
                                     controller.compareProduct(result);
                                 } })] }), _jsxs("div", { className: "ss__chat__result__image__icons", children: [_jsx(Button, { className: 'ss__chat__result__image__icons__icon--inquire', icon: { icon: 'chat', title: 'Discuss Product' }, onClick: () => {
                                     controller.discussProduct(result, { requestType: 'productQuery' });
-                                } }), _jsx(Button, { className: 'ss__chat__result__image__icons__icon--cart', icon: { icon: 'cart', title: 'Add to Cart' }, onClick: () => {
+                                } }), _jsx(Button, { className: 'ss__chat__result__image__icons__icon--cart', icon: { icon: 'cart', title: isConfigurable ? 'Configure' : 'Add to 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.viewProduct(result);
+                                        return;
+                                    }
+                                    controller.track.product.addToCart(result);
                                     controller.addToCart(result);
-                                } })] })] }), _jsxs("div", { className: "ss__chat__result__content", children: [result.display.mappings.core?.name && _jsx("div", { className: "ss__chat__result__content__title--primary", children: result.display.mappings.core?.name }), result.display.mappings.core?.price && (_jsx("div", { className: "ss__chat__result__content__price", children: _jsx(Price, { value: result.display.mappings.core?.price }) })), _jsx(CalloutBadge, { controller: controller, result: result })] })] }));
-});
+                                } })] })] }), _jsxs("div", { className: "ss__chat__result__content", children: [result.display.mappings.core?.name && (_jsx("div", { className: "ss__chat__result__content__title--primary", children: result.display.mappings.core?.name })), result.display.mappings.core?.price && (_jsx("div", { className: "ss__chat__result__content__price", children: _jsx(Price, { value: result.display.mappings.core?.price }) })), _jsx(CalloutBadge, { controller: controller, result: result })] })] }));
+}));

package/dist/esm/components/src/components/Organisms/Chat/MessageUser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageUser.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/MessageUser.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAyHhE,eAAO,MAAM,WAAW,WAAoB,gBAAgB;;CAsE1D,CAAC;AAEH,UAAU,gBAAgB;IACzB,QAAQ,EAAE,GAAG,CAAC;IACd,UAAU,EAAE,cAAc,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;CACvC"}
+{"version":3,"file":"MessageUser.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/MessageUser.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAwIhE,eAAO,MAAM,WAAW,WAAoB,gBAAgB;;CA6F1D,CAAC;AAEH,UAAU,gBAAgB;IACzB,QAAQ,EAAE,GAAG,CAAC;IACd,UAAU,EAAE,cAAc,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;CACvC"}

package/dist/esm/components/src/components/Organisms/Chat/MessageUser.js

@@ -27,6 +27,11 @@ const defaultStyles = () => {
             alignItems: 'center',
             gap: '10px',
         },
+        '.ss__chat__message-user__text-wrapper': {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-end',
+        },
         '.ss__chat__message-user__text': {
             padding: '0.5em 1em',
             borderRadius: '12px',
@@ -39,9 +44,10 @@ const defaultStyles = () => {
             padding: 0,
             margin: 0,
             display: 'flex',
-            gap: '8px',
-            flexWrap: 'nowrap',
+            flexWrap: 'wrap',
             justifyContent: 'flex-end',
+            flex: '0 0 40px',
+            alignSelf: 'flex-end',
             '.ss__chat__message-user__attachment__product, .ss__chat__message-user__attachment__image, .ss__chat__message-user__attachment__facet': {
                 width: '40px',
                 height: '40px',
@@ -67,6 +73,11 @@ const defaultStyles = () => {
                     borderColor: colorPrimary,
                 },
             },
+            '.ss__chat__message-user__attachment__facet--overflow': {
+                fontSize: '12px',
+                fontWeight: 600,
+                color: '#555',
+            },
         },
     });
 };
@@ -80,7 +91,12 @@ function getRequestTypeLabel(chatItem) {
         case 'productComparison':
             return 'Comparing products';
         case 'productSearch':
-            return 'Filtering products';
+            if (chatItem.request?.searchFilters?.length) {
+                return 'Filtering products';
+            }
+            else {
+                return 'Searching products';
+            }
         case 'imageSearch':
             return 'Searching by image';
         case 'productSimilar':
@@ -142,23 +158,38 @@ export const MessageUser = observer((props) => {
             onViewProduct?.(product);
         }
     };
-    return (_jsxs("div", { className: "ss__chat__message-user", ...styling, children: [requestTypeLabel ? _jsx("div", { className: "ss__chat__message-user__request-type", children: requestTypeLabel }) : null, _jsxs("div", { className: "ss__chat__message-user__row", children: [_jsx("ul", { className: "ss__chat__message-user__attachments", children: chatItem.attachments?.length
-                            ? chatItem.attachments?.map((attachmentId) => {
-                                const attachment = store.currentChat?.attachments.get(attachmentId);
-                                switch (attachment?.type) {
-                                    case 'image':
-                                        return (_jsx("li", { className: "ss__chat__message-user__attachment__image", children: _jsx(Image, { style: { height: '200px', width: '200px' }, src: attachment.thumbnailUrl || attachment.base64 || '', alt: '' }) }, attachment.id));
-                                    case 'product': {
-                                        const canOpen = !!findProductInChat(store.currentChat?.chat, attachment.productId);
-                                        return (_jsx("li", { className: classnames('ss__chat__message-user__attachment__product', {
-                                                'ss__chat__message-user__attachment__product--clickable': canOpen,
-                                            }), onClick: canOpen ? () => handleProductAttachmentClick(attachment) : undefined, title: canOpen ? `View details for ${attachment.name}` : undefined, children: _jsx(Image, { style: { height: '200px', width: '200px' }, src: attachment.thumbnailUrl || '', alt: attachment.name }) }, attachment.id));
-                                    }
-                                    case 'facet':
-                                        return (_jsx("li", { className: "ss__chat__message-user__attachment__facet", children: _jsx(Icon, { title: `Filter: ${attachment.facetLabel} = ${attachment.label}`, icon: "filter-funnel", size: 27 }) }, attachment.id));
-                                    default:
+    return (_jsx("div", { className: "ss__chat__message-user", ...styling, children: _jsxs("div", { className: "ss__chat__message-user__row", children: [_jsx("ul", { className: "ss__chat__message-user__attachments", children: (() => {
+                        if (!chatItem.attachments?.length)
+                            return null;
+                        const resolved = chatItem.attachments.map((id) => store.currentChat?.attachments.get(id)).filter(Boolean);
+                        const totalFacets = resolved.filter((a) => a.type === 'facet').length;
+                        const hiddenFacetCount = Math.max(0, totalFacets - 2);
+                        let facetIndex = 0;
+                        const items = resolved
+                            .map((attachment) => {
+                            switch (attachment.type) {
+                                case 'image':
+                                    return (_jsx("li", { className: "ss__chat__message-user__attachment__image", children: _jsx(Image, { style: { height: '200px', width: '200px' }, src: attachment.thumbnailUrl || attachment.base64 || '', alt: '' }) }, attachment.id));
+                                case 'product': {
+                                    const canOpen = !!findProductInChat(store.currentChat?.chat, attachment.productId);
+                                    return (_jsx("li", { className: classnames('ss__chat__message-user__attachment__product', {
+                                            'ss__chat__message-user__attachment__product--clickable': canOpen,
+                                        }), onClick: canOpen ? () => handleProductAttachmentClick(attachment) : undefined, title: canOpen ? `View details for ${attachment.name}` : undefined, children: _jsx(Image, { style: { height: '200px', width: '200px' }, src: attachment.thumbnailUrl || '', alt: attachment.name }) }, attachment.id));
+                                }
+                                case 'facet': {
+                                    facetIndex += 1;
+                                    if (facetIndex > 2)
                                         return null;
+                                    return (_jsx("li", { className: "ss__chat__message-user__attachment__facet", children: _jsx(Icon, { title: `Filter: ${attachment.facetLabel} = ${attachment.label}`, icon: "filter-funnel", size: 27 }) }, attachment.id));
                                 }
-                            })
-                            : null }), chatItem.text ? (_jsx("div", { className: "ss__chat__message-user__text", dangerouslySetInnerHTML: { __html: marked.parse(chatItem.text) } })) : null] })] }));
+                                default:
+                                    return null;
+                            }
+                        })
+                            .filter(Boolean);
+                        if (hiddenFacetCount > 0) {
+                            items.push(_jsxs("li", { className: "ss__chat__message-user__attachment__facet ss__chat__message-user__attachment__facet--overflow", title: `${hiddenFacetCount} more filter${hiddenFacetCount === 1 ? '' : 's'}`, children: ["+", hiddenFacetCount] }, "facet-overflow"));
+                        }
+                        return items;
+                    })() }), _jsxs("div", { className: "ss__chat__message-user__text-wrapper", children: [requestTypeLabel ? _jsx("div", { className: "ss__chat__message-user__request-type", children: requestTypeLabel }) : null, chatItem.text ? (_jsx("div", { className: "ss__chat__message-user__text", dangerouslySetInnerHTML: { __html: marked.parse(chatItem.text) } })) : null] })] }) }));
 });

package/dist/esm/components/src/components/Organisms/Chat/ResultsDisplay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResultsDisplay.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/ResultsDisplay.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAgChE,eAAO,MAAM,cAAc,WAAoB,mBAAmB;;CA2EhE,CAAC;AAEH,MAAM,WAAW,mBAAmB;IACnC,QAAQ,EAAE,GAAG,CAAC;IACd,UAAU,EAAE,cAAc,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B"}
+{"version":3,"file":"ResultsDisplay.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/ResultsDisplay.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAgChE,eAAO,MAAM,cAAc,WAAoB,mBAAmB;;CA8EhE,CAAC;AAEH,MAAM,WAAW,mBAAmB;IACnC,QAAQ,EAAE,GAAG,CAAC;IACd,UAAU,EAAE,cAAc,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B"}

package/dist/esm/components/src/components/Organisms/Chat/ResultsDisplay.js

@@ -38,7 +38,9 @@ export const ResultsDisplay = observer((props) => {
         ['inspirationResult', 'productComparison', 'productQuery'].includes(activeMessage.messageType) &&
         currentChat?.dismissedSideChatMessageId !== activeMessage.id;
     const isNarrow = typeof window !== 'undefined' && window.innerWidth < 550;
-    const isConstrained = !isNarrow && isSideChatOpen && typeof window !== 'undefined' && window.innerWidth >= 768;
+    // only the tablet range needs the narrower carousel when the side chat is open;
+    // at >= 1200px there's room to keep 2.9 slides alongside the secondary chat
+    const isConstrained = !isNarrow && isSideChatOpen && typeof window !== 'undefined' && window.innerWidth >= 768 && window.innerWidth <= 1200;
     const slidesPerView = isNarrow || isConstrained ? 1.9 : 2.9;
     const carouselProps = {
         breakpoints: undefined,
@@ -54,6 +56,7 @@ export const ResultsDisplay = observer((props) => {
         // 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.viewProduct(result);
         onViewProduct?.();
     };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@athoscommerce/snap-preact",
-	"version": "1.2.3-beta.2+2c4c9a7f8",
+	"version": "1.2.3-beta.3+25a2f4522",
 	"description": "Snap Preact",
 	"main": "dist/cjs/src/index.js",
 	"module": "dist/esm/src/index.js",
@@ -26,16 +26,16 @@
 		"storybook": "storybook dev -c ./components/.storybook -p 6006"
 	},
 	"dependencies": {
-		"@athoscommerce/snap-client": "1.2.3-beta.2+2c4c9a7f8",
-		"@athoscommerce/snap-controller": "1.2.3-beta.2+2c4c9a7f8",
-		"@athoscommerce/snap-event-manager": "1.2.3-beta.2+2c4c9a7f8",
-		"@athoscommerce/snap-logger": "1.2.3-beta.2+2c4c9a7f8",
-		"@athoscommerce/snap-platforms": "1.2.3-beta.2+2c4c9a7f8",
-		"@athoscommerce/snap-profiler": "1.2.3-beta.2+2c4c9a7f8",
-		"@athoscommerce/snap-store-mobx": "1.2.3-beta.2+2c4c9a7f8",
-		"@athoscommerce/snap-toolbox": "1.2.3-beta.2+2c4c9a7f8",
-		"@athoscommerce/snap-tracker": "1.2.3-beta.2+2c4c9a7f8",
-		"@athoscommerce/snap-url-manager": "1.2.3-beta.2+2c4c9a7f8",
+		"@athoscommerce/snap-client": "1.2.3-beta.3+25a2f4522",
+		"@athoscommerce/snap-controller": "1.2.3-beta.3+25a2f4522",
+		"@athoscommerce/snap-event-manager": "1.2.3-beta.3+25a2f4522",
+		"@athoscommerce/snap-logger": "1.2.3-beta.3+25a2f4522",
+		"@athoscommerce/snap-platforms": "1.2.3-beta.3+25a2f4522",
+		"@athoscommerce/snap-profiler": "1.2.3-beta.3+25a2f4522",
+		"@athoscommerce/snap-store-mobx": "1.2.3-beta.3+25a2f4522",
+		"@athoscommerce/snap-toolbox": "1.2.3-beta.3+25a2f4522",
+		"@athoscommerce/snap-tracker": "1.2.3-beta.3+25a2f4522",
+		"@athoscommerce/snap-url-manager": "1.2.3-beta.3+25a2f4522",
 		"@emotion/react": "11.13.0",
 		"classnames": "^2.3.2",
 		"color": "^4.2.3",
@@ -97,5 +97,5 @@
 			"require": "./dist/cjs/toolbox/src/index.js"
 		}
 	},
-	"gitHead": "2c4c9a7f897641582adeeb5c5b57993143387548"
+	"gitHead": "25a2f452248ffbf114c80137ea8ad95516b3f106"
 }