@athoscommerce/snap-preact 1.5.1-beta.112 → 1.5.1-beta.116
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/src/components/Atoms/Dropdown/Dropdown.d.ts +3 -0
- package/dist/cjs/components/src/components/Atoms/Dropdown/Dropdown.d.ts.map +1 -1
- package/dist/cjs/components/src/components/Atoms/Dropdown/Dropdown.js +28 -7
- package/dist/cjs/components/src/components/Molecules/ChatAttachmentContext/ChatAttachmentContext.d.ts.map +1 -1
- package/dist/cjs/components/src/components/Molecules/ChatAttachmentContext/ChatAttachmentContext.js +3 -2
- package/dist/cjs/components/src/components/Molecules/ChatProductComparisonMessage/ChatProductComparisonMessage.d.ts.map +1 -1
- package/dist/cjs/components/src/components/Molecules/ChatProductComparisonMessage/ChatProductComparisonMessage.js +22 -2
- package/dist/cjs/components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.d.ts.map +1 -1
- package/dist/cjs/components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.js +96 -66
- package/dist/cjs/components/src/components/Organisms/Chat/Chat.d.ts.map +1 -1
- package/dist/cjs/components/src/components/Organisms/Chat/Chat.js +276 -76
- package/dist/cjs/components/src/components/Organisms/Chat/Chat.styles.d.ts.map +1 -1
- package/dist/cjs/components/src/components/Organisms/Chat/Chat.styles.js +217 -178
- package/dist/cjs/components/src/components/Organisms/Chat/hooks/useChatFileUpload.js +4 -4
- package/dist/cjs/src/Templates/SnapTemplates.d.ts.map +1 -1
- package/dist/cjs/src/Templates/SnapTemplates.js +1 -1
- package/dist/esm/components/src/components/Atoms/Dropdown/Dropdown.d.ts +3 -0
- package/dist/esm/components/src/components/Atoms/Dropdown/Dropdown.d.ts.map +1 -1
- package/dist/esm/components/src/components/Atoms/Dropdown/Dropdown.js +26 -8
- package/dist/esm/components/src/components/Molecules/ChatAttachmentContext/ChatAttachmentContext.d.ts.map +1 -1
- package/dist/esm/components/src/components/Molecules/ChatAttachmentContext/ChatAttachmentContext.js +3 -2
- package/dist/esm/components/src/components/Molecules/ChatProductComparisonMessage/ChatProductComparisonMessage.d.ts.map +1 -1
- package/dist/esm/components/src/components/Molecules/ChatProductComparisonMessage/ChatProductComparisonMessage.js +22 -2
- package/dist/esm/components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.d.ts.map +1 -1
- package/dist/esm/components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.js +94 -65
- package/dist/esm/components/src/components/Organisms/Chat/Chat.d.ts.map +1 -1
- package/dist/esm/components/src/components/Organisms/Chat/Chat.js +240 -45
- package/dist/esm/components/src/components/Organisms/Chat/Chat.styles.d.ts.map +1 -1
- package/dist/esm/components/src/components/Organisms/Chat/Chat.styles.js +73 -8
- package/dist/esm/components/src/components/Organisms/Chat/hooks/useChatFileUpload.js +3 -3
- package/dist/esm/src/Templates/SnapTemplates.d.ts.map +1 -1
- package/dist/esm/src/Templates/SnapTemplates.js +4 -1
- package/package.json +12 -12
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAK,MAAM,QAAQ,CAAC;AAQ9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAqC7D,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;
|
|
1
|
+
{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAK,MAAM,QAAQ,CAAC;AAQ9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAqC7D,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CAmQzD,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,2BAA2B,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;AACxF,MAAM,MAAM,2BAA2B,GAAG;IACzC,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC7E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC7E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE;QAAE,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;KAAE,CAAC;CAC9C,CAAC"}
|
|
@@ -67,7 +67,7 @@ exports.Dropdown = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
67
67
|
treePath: globalTreePath,
|
|
68
68
|
};
|
|
69
69
|
var props = (0, utilities_1.mergeProps)('dropdown', globalTheme, defaultProps, properties);
|
|
70
|
-
var button = props.button, content = props.content, children = props.children, disabled = props.disabled, open = props.open, toggleOnHover = props.toggleOnHover, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, disableClick = props.disableClick, onClick = props.onClick, onToggle = props.onToggle, focusTrapContent = props.focusTrapContent, startOpen = props.startOpen, disableClickOutside = props.disableClickOutside, disableA11y = props.disableA11y, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath, usePortal = props.usePortal, dropUp = props.dropUp, customComponent = props.customComponent;
|
|
70
|
+
var button = props.button, content = props.content, children = props.children, disabled = props.disabled, open = props.open, toggleOnHover = props.toggleOnHover, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, disableClick = props.disableClick, onClick = props.onClick, onToggle = props.onToggle, focusTrapContent = props.focusTrapContent, startOpen = props.startOpen, disableClickOutside = props.disableClickOutside, disableA11y = props.disableA11y, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath, usePortal = props.usePortal, dropUp = props.dropUp, boundaryRef = props.boundaryRef, customComponent = props.customComponent;
|
|
71
71
|
if (customComponent) {
|
|
72
72
|
var ComponentOverride = (0, hooks_2.useComponent)(((_b = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _b === void 0 ? void 0 : _b.library.import.component.dropdown) || {}, customComponent);
|
|
73
73
|
if (ComponentOverride) {
|
|
@@ -88,6 +88,7 @@ exports.Dropdown = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
88
88
|
var contentRef = (0, hooks_1.useRef)(null);
|
|
89
89
|
var _d = (0, hooks_1.useState)({ top: 0, left: 0, width: 0 }), coords = _d[0], setCoords = _d[1];
|
|
90
90
|
var _e = (0, hooks_1.useState)(false), flipX = _e[0], setFlipX = _e[1];
|
|
91
|
+
var _f = (0, hooks_1.useState)(0), flipRight = _f[0], setFlipRight = _f[1];
|
|
91
92
|
var innerRef;
|
|
92
93
|
if (!disableClickOutside) {
|
|
93
94
|
innerRef = (0, hooks_2.useClickOutside)(function (e) {
|
|
@@ -105,11 +106,18 @@ exports.Dropdown = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
105
106
|
(0, hooks_1.useEffect)(function () {
|
|
106
107
|
if (usePortal && dropdownOpen) {
|
|
107
108
|
var updateCoords_1 = function () {
|
|
109
|
+
var _a;
|
|
108
110
|
if (buttonRef.current) {
|
|
109
111
|
var rect = buttonRef.current.getBoundingClientRect();
|
|
112
|
+
// Clamp the anchor to the boundary's horizontal range so the dropdown
|
|
113
|
+
// stays visible inside the boundary even when the button scrolls out
|
|
114
|
+
// of view (e.g. a horizontally-scrolling facets row). The right edge
|
|
115
|
+
// is handled by the flip-x logic below.
|
|
116
|
+
var boundaryRect = (_a = boundaryRef === null || boundaryRef === void 0 ? void 0 : boundaryRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
117
|
+
var left = boundaryRect ? Math.max(boundaryRect.left, Math.min(rect.left, boundaryRect.right)) : rect.left;
|
|
110
118
|
setCoords({
|
|
111
119
|
top: dropUp ? rect.top : rect.bottom,
|
|
112
|
-
left:
|
|
120
|
+
left: left,
|
|
113
121
|
width: rect.width,
|
|
114
122
|
});
|
|
115
123
|
}
|
|
@@ -129,12 +137,25 @@ exports.Dropdown = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
129
137
|
setFlipX(false);
|
|
130
138
|
}
|
|
131
139
|
}, [dropdownOpen]);
|
|
132
|
-
// After the portal renders, check if content overflows the right
|
|
133
|
-
// and flip the horizontal anchor if so.
|
|
140
|
+
// After the portal renders, check if content overflows the right edge of the
|
|
141
|
+
// boundary (when provided) or the viewport and flip the horizontal anchor if so.
|
|
142
|
+
// When flipped, anchor the portal to the boundary's right edge so the dropdown
|
|
143
|
+
// stops at the boundary rather than at the button's right edge.
|
|
144
|
+
// useLayoutEffect fires before paint to avoid flash.
|
|
134
145
|
(0, hooks_1.useLayoutEffect)(function () {
|
|
146
|
+
var _a, _b;
|
|
135
147
|
if (usePortal && dropdownOpen && contentRef.current && coords.width > 0) {
|
|
136
|
-
|
|
137
|
-
|
|
148
|
+
// Measure against the would-be unflipped right edge so the check is
|
|
149
|
+
// stable regardless of the current flipX state. Reading rect.right
|
|
150
|
+
// after a flip reports the anchored edge instead of the natural one,
|
|
151
|
+
// which causes the dropdown to oscillate between flipped/unflipped on
|
|
152
|
+
// every scroll tick.
|
|
153
|
+
var contentWidth = contentRef.current.offsetWidth;
|
|
154
|
+
var limit = (_b = (_a = boundaryRef === null || boundaryRef === void 0 ? void 0 : boundaryRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().right) !== null && _b !== void 0 ? _b : window.innerWidth;
|
|
155
|
+
var shouldFlip = coords.left + contentWidth > limit;
|
|
156
|
+
setFlipX(shouldFlip);
|
|
157
|
+
if (shouldFlip)
|
|
158
|
+
setFlipRight(Math.max(0, window.innerWidth - limit));
|
|
138
159
|
}
|
|
139
160
|
}, [usePortal, dropdownOpen, coords.left, coords.width]);
|
|
140
161
|
var toggleOpenDropdown = function (e, state) {
|
|
@@ -209,5 +230,5 @@ exports.Dropdown = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
209
230
|
(0, compat_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__dropdown__portal', className, internalClassName, {
|
|
210
231
|
'ss__dropdown__portal--open': dropdownOpen,
|
|
211
232
|
'ss__dropdown__portal--flip-x': flipX,
|
|
212
|
-
}), css: styling.css, style: __assign({ position: 'fixed', top: coords.top, left: coords.left, width: coords.width, zIndex: 9999 }, (dropUp ? { transform: 'translateY(-100%)' } : {})), children: contentElement }), document.body)] })) }));
|
|
233
|
+
}), css: styling.css, style: __assign(__assign(__assign({ position: 'fixed', top: coords.top }, (flipX ? { right: flipRight } : { left: coords.left, width: coords.width })), { zIndex: 9999 }), (dropUp ? { transform: 'translateY(-100%)' } : {})), children: contentElement }), document.body)] })) }));
|
|
213
234
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatAttachmentContext.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatAttachmentContext/ChatAttachmentContext.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"ChatAttachmentContext.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatAttachmentContext/ChatAttachmentContext.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AA6H7D,eAAO,MAAM,qBAAqB,gBAAyB,0BAA0B,KAAG,GAAG,CAAC,OAAO;;CAqHjG,CAAC;AAQH,MAAM,MAAM,yBAAyB,GAAG;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,yBAAyB,EAAE,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,GAAG,cAAc,CAAC,0BAA0B,CAAC,CAAC"}
|
package/dist/cjs/components/src/components/Molecules/ChatAttachmentContext/ChatAttachmentContext.js
CHANGED
|
@@ -65,7 +65,7 @@ var defaultStyles = function () {
|
|
|
65
65
|
border: '1px solid #eee',
|
|
66
66
|
borderRadius: '0.5em',
|
|
67
67
|
background: '#f9fafb',
|
|
68
|
-
maxWidth: '
|
|
68
|
+
maxWidth: 'calc(50% - 0.25em)',
|
|
69
69
|
'&.ss__chat-attachment-context__item--clickable': {
|
|
70
70
|
cursor: 'pointer',
|
|
71
71
|
'&:hover': {
|
|
@@ -80,6 +80,7 @@ var defaultStyles = function () {
|
|
|
80
80
|
background: '#fff5f5',
|
|
81
81
|
borderColor: '#fca5a5',
|
|
82
82
|
color: '#b91c1c',
|
|
83
|
+
maxWidth: '100%',
|
|
83
84
|
},
|
|
84
85
|
'.ss__chat-attachment-context__item__content': {
|
|
85
86
|
position: 'relative',
|
|
@@ -173,7 +174,7 @@ exports.ChatAttachmentContext = (0, mobx_react_lite_1.observer)(function (proper
|
|
|
173
174
|
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-attachment-context__item', {
|
|
174
175
|
'ss__chat-attachment-context__item--error': item.hasError,
|
|
175
176
|
'ss__chat-attachment-context__item--clickable': isClickable,
|
|
176
|
-
}), onClick: item.onClick, onKeyDown: function (e) { return handleItemKeyDown(e, item.onClick); }, role: isClickable ? 'button' : undefined, tabIndex: isClickable ? 0 : undefined, "aria-label": isClickable ? "Open ".concat(item.name) : undefined, children: [item.hasError ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__error-icon', "aria-hidden": "true", children: "!" }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__error-message', children: item.errorMessage || "Upload Failed - ".concat(item.name) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat-attachment-context__item__content', children: [item.imageUrl && (0, jsx_runtime_1.jsx)(Image_1.Image, __assign({}, subProps.image, { className: item.isLoading ? 'loading' : '', src: item.imageUrl, alt: item.name })), item.isLoading && ((0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat-attachment-context__item__loading', role: "status", "aria-label": "Loading ".concat(item.name), children: [(0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__loading__dot' }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__loading__dot' }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__loading__dot' })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__name', title: item.name, children: item.name })] })), item.onRemove && (items.length > 1 || !onClose) && ((0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, subProps.removeButton, { className: 'ss__chat-attachment-context__item__remove', "aria-label": "Remove ".concat(item.name), onClick: function (e) {
|
|
177
|
+
}), onClick: item.onClick, onKeyDown: function (e) { return handleItemKeyDown(e, item.onClick); }, role: isClickable ? 'button' : undefined, tabIndex: isClickable ? 0 : undefined, "aria-label": isClickable ? "Open ".concat(item.name) : undefined, children: [item.hasError ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__error-icon', "aria-hidden": "true", children: "!" }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__error-message', children: item.errorMessage || "Upload Failed - ".concat(item.name) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat-attachment-context__item__content', children: [item.imageUrl && (0, jsx_runtime_1.jsx)(Image_1.Image, __assign({}, subProps.image, { className: item.isLoading ? 'loading' : '', src: item.imageUrl, alt: item.name })), item.isLoading && ((0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat-attachment-context__item__loading', role: "status", "aria-label": "Loading ".concat(item.name), children: [(0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__loading__dot' }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__loading__dot' }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__loading__dot' })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__name', title: item.name, children: item.name })] })), item.onRemove && (items.length > 1 || !onClose || isClickable) && ((0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, subProps.removeButton, { className: 'ss__chat-attachment-context__item__remove', "aria-label": "Remove ".concat(item.name), onClick: function (e) {
|
|
177
178
|
var _a;
|
|
178
179
|
e.stopPropagation();
|
|
179
180
|
if (!item.isLoading)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatProductComparisonMessage.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatProductComparisonMessage/ChatProductComparisonMessage.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,EAAE,iCAAiC,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"ChatProductComparisonMessage.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatProductComparisonMessage/ChatProductComparisonMessage.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,EAAE,iCAAiC,EAAE,MAAM,4BAA4B,CAAC;AAmF/E,eAAO,MAAM,4BAA4B,gBAAyB,iCAAiC;;CAsGjG,CAAC;AAMH,MAAM,MAAM,iCAAiC,GAAG;IAC/C,QAAQ,EAAE,iCAAiC,CAAC;IAC5C,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC,gCAAgC,CAAC,CAAC;CACjD,GAAG,+CAA+C,GAClD,cAAc,CAAC,iCAAiC,CAAC,CAAC;AAEnD,MAAM,MAAM,+CAA+C,GAAG;IAC7D,QAAQ,EAAE,iCAAiC,CAAC;CAC5C,CAAC;AAEF,MAAM,WAAW,gCAAgC;CAKhD"}
|
|
@@ -54,6 +54,20 @@ var defaultStyles = function () {
|
|
|
54
54
|
'.ss__chat-product-comparison-message__table__product-header': {
|
|
55
55
|
textAlign: 'center',
|
|
56
56
|
minWidth: '120px',
|
|
57
|
+
'.ss__chat-product-comparison-message__table__product-header__link': {
|
|
58
|
+
background: 'none',
|
|
59
|
+
border: 'none',
|
|
60
|
+
padding: 0,
|
|
61
|
+
font: 'inherit',
|
|
62
|
+
color: 'inherit',
|
|
63
|
+
display: 'block',
|
|
64
|
+
width: '100%',
|
|
65
|
+
cursor: 'pointer',
|
|
66
|
+
textAlign: 'center',
|
|
67
|
+
'&:hover .ss__chat-product-comparison-message__table__product-header__name': {
|
|
68
|
+
textDecoration: 'underline',
|
|
69
|
+
},
|
|
70
|
+
},
|
|
57
71
|
'.ss__chat-product-comparison-message__table__product-header__image': {
|
|
58
72
|
width: '80px',
|
|
59
73
|
height: '80px',
|
|
@@ -84,7 +98,7 @@ exports.ChatProductComparisonMessage = (0, mobx_react_lite_1.observer)(function
|
|
|
84
98
|
treePath: globalTreePath,
|
|
85
99
|
};
|
|
86
100
|
var props = (0, utilities_1.mergeProps)('chatProductComparisonMessage', globalTheme, defaultProps, properties);
|
|
87
|
-
var chatItem = props.chatItem, className = props.className, internalClassName = props.internalClassName;
|
|
101
|
+
var chatItem = props.chatItem, controller = props.controller, className = props.className, internalClassName = props.internalClassName;
|
|
88
102
|
// const subProps: ChatProductComparisonMessageSubProps = {
|
|
89
103
|
// };
|
|
90
104
|
var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
|
|
@@ -114,7 +128,13 @@ exports.ChatProductComparisonMessage = (0, mobx_react_lite_1.observer)(function
|
|
|
114
128
|
var product = searchResults.find(function (r) { return (r === null || r === void 0 ? void 0 : r.id) === heading; });
|
|
115
129
|
var display = getDisplay(product);
|
|
116
130
|
var productName = (_c = (_b = (_a = display === null || display === void 0 ? void 0 : display.mappings) === null || _a === void 0 ? void 0 : _a.core) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : heading;
|
|
117
|
-
|
|
131
|
+
var handleOpenProduct = function (e) {
|
|
132
|
+
if (!controller || !product)
|
|
133
|
+
return;
|
|
134
|
+
controller.track.product.click(e, product);
|
|
135
|
+
controller.productQuickView(product);
|
|
136
|
+
};
|
|
137
|
+
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", { type: "button", className: (0, classnames_1.default)('ss__chat-product-comparison-message__table__product-header__link'), onClick: handleOpenProduct, "aria-label": "View details for ".concat(productName), children: [allProductsHaveImage && ((0, jsx_runtime_1.jsx)("img", { 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));
|
|
118
138
|
})] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: comparisonData.features.map(function (feature, index) { return ((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(function (heading) {
|
|
119
139
|
var _a;
|
|
120
140
|
return ((0, jsx_runtime_1.jsx)("td", { className: (0, classnames_1.default)('ss__chat-product-comparison-message__table__value'), children: (_a = feature.values[heading]) !== null && _a !== void 0 ? _a : '—' }, heading));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatProductQueryMessage.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ChatProductQueryMessage.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AA2crE,eAAO,MAAM,uBAAuB,gBAAyB,4BAA4B;;CAyQvF,CAAC;AAEH,MAAM,MAAM,4BAA4B,GAAG;IAC1C,QAAQ,EAAE,2BAA2B,CAAC;IACtC,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC1B,GAAG,0CAA0C,GAC7C,cAAc,CAAC,4BAA4B,CAAC,CAAC;AAE9C,MAAM,MAAM,2BAA2B,GAAG;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,cAAc,CAAC;IAC5B,aAAa,EAAE,GAAG,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,0CAA0C,GAAG;IACxD,QAAQ,EAAE,2BAA2B,CAAC;CACtC,CAAC;AAEF,MAAM,WAAW,2BAA2B;CAE3C"}
|
|
@@ -16,6 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
17
|
exports.ChatProductQueryMessage = void 0;
|
|
18
18
|
var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
|
|
19
|
+
var hooks_1 = require("preact/hooks");
|
|
19
20
|
var mobx_react_lite_1 = require("mobx-react-lite");
|
|
20
21
|
var react_1 = require("@emotion/react");
|
|
21
22
|
var classnames_1 = __importDefault(require("classnames"));
|
|
@@ -32,36 +33,44 @@ var defaultStyles = function (_a) {
|
|
|
32
33
|
display: 'flex',
|
|
33
34
|
flexDirection: 'column',
|
|
34
35
|
gap: '1em',
|
|
36
|
+
paddingBottom: '1em',
|
|
37
|
+
'.ss__chat-product-query-message__header__back': {
|
|
38
|
+
// Overlay banner pinned to the top of the secondary chat's scrollable messages
|
|
39
|
+
// container so it stays visible while the product details scroll underneath.
|
|
40
|
+
// Styling mirrors `.ss__chat__session-feedback` (dark primary bg, primary text,
|
|
41
|
+
// 8px/15px padding, 10px gap, 14px font). Rendered as a direct child of the
|
|
42
|
+
// component root (not the header) so sticky holds across the full scroll range.
|
|
43
|
+
// Negative marginBottom cancels the root's `gap: 1em` so the banner sits flush
|
|
44
|
+
// against the header below it.
|
|
45
|
+
position: 'sticky',
|
|
46
|
+
top: 0,
|
|
47
|
+
zIndex: 2,
|
|
48
|
+
marginBottom: '-1em',
|
|
49
|
+
display: 'flex',
|
|
50
|
+
alignItems: 'center',
|
|
51
|
+
gap: '10px',
|
|
52
|
+
padding: '8px 15px',
|
|
53
|
+
background: new utilities_1.Colour(colorPrimary).darkenHex(0.1),
|
|
54
|
+
color: colorPrimaryText,
|
|
55
|
+
fontSize: '14px',
|
|
56
|
+
cursor: 'pointer',
|
|
57
|
+
border: 'none',
|
|
58
|
+
font: 'inherit',
|
|
59
|
+
width: 'auto',
|
|
60
|
+
'&:focus-visible': {
|
|
61
|
+
outline: "2px solid ".concat(colorPrimaryText),
|
|
62
|
+
outlineOffset: '-2px',
|
|
63
|
+
},
|
|
64
|
+
svg: {
|
|
65
|
+
fill: colorPrimaryText,
|
|
66
|
+
stroke: colorPrimaryText,
|
|
67
|
+
},
|
|
68
|
+
},
|
|
35
69
|
'.ss__chat-product-query-message__header': {
|
|
36
70
|
background: new utilities_1.Colour(colorPrimary).lightenHex(0.05),
|
|
37
71
|
padding: '1em',
|
|
38
72
|
display: 'flex',
|
|
39
73
|
flexDirection: 'column',
|
|
40
|
-
'.ss__chat-product-query-message__header__back': {
|
|
41
|
-
display: 'flex',
|
|
42
|
-
alignItems: 'center',
|
|
43
|
-
gap: '0.35em',
|
|
44
|
-
color: colorPrimaryText,
|
|
45
|
-
cursor: 'pointer',
|
|
46
|
-
alignSelf: 'flex-start',
|
|
47
|
-
padding: '0.5em 0',
|
|
48
|
-
fontSize: '0.85em',
|
|
49
|
-
opacity: 0.85,
|
|
50
|
-
background: 'transparent',
|
|
51
|
-
border: 'none',
|
|
52
|
-
font: 'inherit',
|
|
53
|
-
'&:hover': {
|
|
54
|
-
opacity: 1,
|
|
55
|
-
},
|
|
56
|
-
'&:focus-visible': {
|
|
57
|
-
outline: "2px solid ".concat(colorPrimaryText),
|
|
58
|
-
outlineOffset: '2px',
|
|
59
|
-
},
|
|
60
|
-
svg: {
|
|
61
|
-
fill: colorPrimaryText,
|
|
62
|
-
stroke: colorPrimaryText,
|
|
63
|
-
},
|
|
64
|
-
},
|
|
65
74
|
'.ss__price': {
|
|
66
75
|
color: colorPrimaryText,
|
|
67
76
|
},
|
|
@@ -85,7 +94,7 @@ var defaultStyles = function (_a) {
|
|
|
85
94
|
flex: 1,
|
|
86
95
|
'.ss__chat-product-query-message__header__product__details__name': {
|
|
87
96
|
fontWeight: 'bold',
|
|
88
|
-
fontSize: '
|
|
97
|
+
fontSize: '1.2em',
|
|
89
98
|
a: {
|
|
90
99
|
color: colorPrimaryText,
|
|
91
100
|
textDecoration: 'none',
|
|
@@ -94,10 +103,6 @@ var defaultStyles = function (_a) {
|
|
|
94
103
|
},
|
|
95
104
|
},
|
|
96
105
|
},
|
|
97
|
-
'.ss__chat-product-query-message__header__product__details__brand': {
|
|
98
|
-
fontSize: '0.8em',
|
|
99
|
-
color: 'rgba(255, 255, 255, 0.7)',
|
|
100
|
-
},
|
|
101
106
|
'.ss__chat-product-query-message__header__product__details__price': {
|
|
102
107
|
fontWeight: 'bold',
|
|
103
108
|
fontSize: '1.1em',
|
|
@@ -115,18 +120,6 @@ var defaultStyles = function (_a) {
|
|
|
115
120
|
justifyContent: 'center',
|
|
116
121
|
gap: '0.35em',
|
|
117
122
|
flexShrink: 0,
|
|
118
|
-
'.ss__chat-product-query-message__header__product__actions__go-to-product': {
|
|
119
|
-
a: {
|
|
120
|
-
color: colorPrimaryText,
|
|
121
|
-
opacity: 0.85,
|
|
122
|
-
fontSize: '0.8em',
|
|
123
|
-
textDecoration: 'underline',
|
|
124
|
-
cursor: 'pointer',
|
|
125
|
-
'&:hover': {
|
|
126
|
-
opacity: 1,
|
|
127
|
-
},
|
|
128
|
-
},
|
|
129
|
-
},
|
|
130
123
|
'.ss__chat-product-query-message__header__product__actions__add-to-cart .ss__button': {
|
|
131
124
|
flexDirection: 'row-reverse',
|
|
132
125
|
borderRadius: '0.5em',
|
|
@@ -172,6 +165,9 @@ var defaultStyles = function (_a) {
|
|
|
172
165
|
},
|
|
173
166
|
'.ss__chat-product-query-message__variants': {
|
|
174
167
|
padding: '0 2em',
|
|
168
|
+
display: 'flex',
|
|
169
|
+
flexDirection: 'column',
|
|
170
|
+
gap: '1em',
|
|
175
171
|
'.ss__chat-product-query-message__variants__label': {
|
|
176
172
|
fontWeight: '600',
|
|
177
173
|
fontSize: '0.9em',
|
|
@@ -214,6 +210,16 @@ var defaultStyles = function (_a) {
|
|
|
214
210
|
'&.ss__chat-product-query-message__variants__swatch--unavailable': {
|
|
215
211
|
opacity: 0.4,
|
|
216
212
|
},
|
|
213
|
+
'&.ss__chat-product-query-message__variants__swatch--text-only': {
|
|
214
|
+
padding: '0.4em 0.75em',
|
|
215
|
+
'&.ss__chat-product-query-message__variants__swatch--selected': {
|
|
216
|
+
padding: '0.3em 0.65em',
|
|
217
|
+
},
|
|
218
|
+
'.ss__chat-product-query-message__variants__swatch__value': {
|
|
219
|
+
fontSize: '1em',
|
|
220
|
+
maxWidth: 'none',
|
|
221
|
+
},
|
|
222
|
+
},
|
|
217
223
|
'.ss__chat-product-query-message__variants__swatch__image': {
|
|
218
224
|
width: '48px',
|
|
219
225
|
height: '48px',
|
|
@@ -250,7 +256,7 @@ var defaultStyles = function (_a) {
|
|
|
250
256
|
borderCollapse: 'separate',
|
|
251
257
|
borderSpacing: 0,
|
|
252
258
|
fontSize: '0.9em',
|
|
253
|
-
border: "
|
|
259
|
+
border: "1px solid ".concat(colorPrimary),
|
|
254
260
|
borderTop: 'none',
|
|
255
261
|
borderBottomLeftRadius: '0.5em',
|
|
256
262
|
borderBottomRightRadius: '0.5em',
|
|
@@ -291,16 +297,6 @@ var defaultStyles = function (_a) {
|
|
|
291
297
|
justifyContent: 'flex-end',
|
|
292
298
|
},
|
|
293
299
|
},
|
|
294
|
-
'.ss__chat-product-query-message__section__description': {
|
|
295
|
-
padding: '0.75em',
|
|
296
|
-
fontSize: '0.9em',
|
|
297
|
-
color: '#374151',
|
|
298
|
-
lineHeight: '1.5',
|
|
299
|
-
border: "3px solid ".concat(colorPrimary),
|
|
300
|
-
borderTop: 'none',
|
|
301
|
-
borderBottomLeftRadius: '0.5em',
|
|
302
|
-
borderBottomRightRadius: '0.5em',
|
|
303
|
-
},
|
|
304
300
|
'.ss__chat-product-query-message__section__features': {
|
|
305
301
|
margin: 0,
|
|
306
302
|
padding: '0.5em 1.25em',
|
|
@@ -311,6 +307,12 @@ var defaultStyles = function (_a) {
|
|
|
311
307
|
},
|
|
312
308
|
},
|
|
313
309
|
},
|
|
310
|
+
'.ss__chat-product-query-message__description': {
|
|
311
|
+
padding: '0 1em',
|
|
312
|
+
fontSize: '0.9em',
|
|
313
|
+
color: '#374151',
|
|
314
|
+
lineHeight: '1.5',
|
|
315
|
+
},
|
|
314
316
|
});
|
|
315
317
|
};
|
|
316
318
|
// fields that have dedicated rendering in the product card; skip them in the info table
|
|
@@ -451,6 +453,7 @@ exports.ChatProductQueryMessage = (0, mobx_react_lite_1.observer)(function (prop
|
|
|
451
453
|
var chatMessages = ((_a = controller === null || controller === void 0 ? void 0 : controller.store.currentChat) === null || _a === void 0 ? void 0 : _a.chat) || [];
|
|
452
454
|
var sourceMessage = chatItem.sourceMessageId ? chatMessages.find(function (m) { return m.id === chatItem.sourceMessageId; }) : null;
|
|
453
455
|
var cameFromInspiration = (sourceMessage === null || sourceMessage === void 0 ? void 0 : sourceMessage.messageType) === 'inspirationResult';
|
|
456
|
+
var cameFromComparison = (sourceMessage === null || sourceMessage === void 0 ? void 0 : sourceMessage.messageType) === 'productComparison';
|
|
454
457
|
if (!product) {
|
|
455
458
|
return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__chat-product-query-message', className, internalClassName) }, styling, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header'), children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product'), children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__details'), children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__details__name'), children: productQuickviewError || 'Loading product details...' }) }) }) }) })) }));
|
|
456
459
|
}
|
|
@@ -458,6 +461,24 @@ exports.ChatProductQueryMessage = (0, mobx_react_lite_1.observer)(function (prop
|
|
|
458
461
|
var displayedCore = ((_b = displayed.mappings) === null || _b === void 0 ? void 0 : _b.core) || {};
|
|
459
462
|
var variants = product.variants;
|
|
460
463
|
var selections = (variants === null || variants === void 0 ? void 0 : variants.selections) || [];
|
|
464
|
+
// Ensure every selection has an initial value picked. Without this, entering
|
|
465
|
+
// the quickview from inspiration leaves all selections empty, and the first
|
|
466
|
+
// variant click can't narrow `refineSelections` to a single variant — so the
|
|
467
|
+
// active variant (and hero image) doesn't update until a second selection is
|
|
468
|
+
// made. Pre-selecting the first available value for each selection on mount
|
|
469
|
+
// matches the carousel behavior. Single-value selections also get hidden from
|
|
470
|
+
// the UI (handled by `visibleSelections` below).
|
|
471
|
+
(0, hooks_1.useEffect)(function () {
|
|
472
|
+
selections.forEach(function (selection) {
|
|
473
|
+
if (selection.selected)
|
|
474
|
+
return;
|
|
475
|
+
var target = selection.values.find(function (v) { return v.available; }) || selection.values[0];
|
|
476
|
+
if (target) {
|
|
477
|
+
selection.select(target.value);
|
|
478
|
+
}
|
|
479
|
+
});
|
|
480
|
+
}, [selections]);
|
|
481
|
+
var visibleSelections = selections.filter(function (selection) { return selection.values.length > 1; });
|
|
461
482
|
var displayedData = {
|
|
462
483
|
mappings: displayed.mappings,
|
|
463
484
|
attributes: displayed.attributes || {},
|
|
@@ -471,19 +492,28 @@ exports.ChatProductQueryMessage = (0, mobx_react_lite_1.observer)(function (prop
|
|
|
471
492
|
(_a = controller === null || controller === void 0 ? void 0 : controller.store.currentChat) === null || _a === void 0 ? void 0 : _a.popProductQueryMessage(chatItem.sourceMessageId);
|
|
472
493
|
controller === null || controller === void 0 ? void 0 : controller.store.clearProductQuickview();
|
|
473
494
|
};
|
|
474
|
-
return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)('ss__chat-product-query-message', className, internalClassName) }, styling, { children: [(
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
495
|
+
return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)('ss__chat-product-query-message', className, internalClassName) }, styling, { children: [(cameFromInspiration || cameFromComparison) && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: (0, classnames_1.default)('ss__chat-product-query-message__header__back'), "aria-label": cameFromComparison ? 'Back to comparison' : 'Back to inspiration', onClick: handleBack, children: [(0, jsx_runtime_1.jsx)(__1.Icon, { icon: "angle-left", size: "14px" }), (0, jsx_runtime_1.jsx)("span", { children: cameFromComparison ? 'Back to comparison' : 'Back to inspiration' })] })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header'), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product'), children: [(displayedCore.imageUrl || displayedCore.parentImageUrl) && ((0, jsx_runtime_1.jsx)(Image_1.Image, { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__image'), src: (displayedCore.imageUrl || displayedCore.parentImageUrl), alt: displayedCore.name || '' })), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__details'), children: [displayedCore.name && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__details__name'), children: displayedCore.url ? ((0, jsx_runtime_1.jsx)("a", { href: displayedCore.url, onClick: function (e) { return controller === null || controller === void 0 ? void 0 : controller.track.product.click(e, product); }, target: "_blank", rel: "noopener noreferrer", children: displayedCore.name })) : (displayedCore.name) })), displayedCore.price != null && ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__details__price'), children: [displayedCore.msrp != null && Number(displayedCore.msrp) > Number(displayedCore.price) && ((0, jsx_runtime_1.jsx)(__1.Price, { value: displayedCore.msrp, lineThrough: true })), (0, jsx_runtime_1.jsx)(__1.Price, { value: displayedCore.price })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__actions'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__actions__add-to-cart'), children: (0, jsx_runtime_1.jsx)(Button_1.Button, { icon: "cart", content: 'Add to Cart', onClick: function () {
|
|
496
|
+
controller === null || controller === void 0 ? void 0 : controller.track.product.addToCart(product);
|
|
497
|
+
controller === null || controller === void 0 ? void 0 : controller.addToCart(product);
|
|
498
|
+
} }) }), (controller === null || controller === void 0 ? void 0 : controller.store.features.similarProducts.enabled) && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__actions__show-similar'), children: (0, jsx_runtime_1.jsx)(Button_1.Button, { icon: "search-thin", content: 'Show Similar', onClick: function () { return controller === null || controller === void 0 ? void 0 : controller.productSimilar(sourceProduct); } }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__actions__discuss-product'), children: (0, jsx_runtime_1.jsx)(Button_1.Button, { icon: "chat", content: 'Discuss Product', onClick: function () { return controller === null || controller === void 0 ? void 0 : controller.productQuery(sourceProduct); } }) })] })] }) }), visibleSelections.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__variants'), role: "group", "aria-label": "Variant selection", children: visibleSelections.map(function (selection) {
|
|
499
|
+
var _a;
|
|
500
|
+
// If every value in this selection shares the same thumbnail (or none have
|
|
501
|
+
// one), the image carries no signal — show text only.
|
|
502
|
+
var firstThumb = (_a = selection.values[0]) === null || _a === void 0 ? void 0 : _a.thumbnailImageUrl;
|
|
503
|
+
var allSameThumb = selection.values.every(function (v) { return v.thumbnailImageUrl === firstThumb; });
|
|
504
|
+
var showThumbs = !allSameThumb;
|
|
505
|
+
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__variants__label'), id: "ss__chat-pq-variant-".concat(selection.field), children: [formatLabel(selection.field), " (", selection.values.length, ")"] }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__variants__swatches'), role: "radiogroup", "aria-labelledby": "ss__chat-pq-variant-".concat(selection.field), children: selection.values.map(function (selectionValue) {
|
|
506
|
+
var _a;
|
|
507
|
+
var isUnavailable = !selectionValue.available;
|
|
508
|
+
var isSelected = ((_a = selection.selected) === null || _a === void 0 ? void 0 : _a.value) === selectionValue.value;
|
|
509
|
+
return ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: (0, classnames_1.default)('ss__chat-product-query-message__variants__swatch', {
|
|
510
|
+
'ss__chat-product-query-message__variants__swatch--selected': isSelected,
|
|
511
|
+
'ss__chat-product-query-message__variants__swatch--unavailable': isUnavailable,
|
|
512
|
+
'ss__chat-product-query-message__variants__swatch--text-only': !showThumbs,
|
|
513
|
+
}), title: selectionValue.value, role: "radio", "aria-checked": isSelected, "aria-disabled": isUnavailable, "aria-label": "".concat(formatLabel(selection.field), ": ").concat(selectionValue.value).concat(isUnavailable ? ' (unavailable)' : ''), onClick: function () { return selection.select(selectionValue.value); }, children: [showThumbs && selectionValue.thumbnailImageUrl ? ((0, jsx_runtime_1.jsx)(Image_1.Image, { className: (0, classnames_1.default)('ss__chat-product-query-message__variants__swatch__image'), src: selectionValue.thumbnailImageUrl, alt: selectionValue.value })) : null, (0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('ss__chat-product-query-message__variants__swatch__value'), children: selectionValue.value })] }, selectionValue.value));
|
|
514
|
+
}) })] }, selection.field));
|
|
515
|
+
}) })), descriptionRow && (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__description'), children: descriptionRow.value }), infoRows.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__section'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__section__title'), children: "Product Information" }), (0, jsx_runtime_1.jsx)("table", { className: (0, classnames_1.default)('ss__chat-product-query-message__section__table'), "aria-label": "Product information", children: (0, jsx_runtime_1.jsx)("tbody", { children: infoRows.map(function (row) { return ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { scope: "row", children: row.label }), (0, jsx_runtime_1.jsx)("td", { children: row.rawKey === 'availability' ? ((0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)({
|
|
486
516
|
'ss__chat-product-query-message__section__table__availability--in-stock': row.value === 'In Stock',
|
|
487
517
|
'ss__chat-product-query-message__section__table__availability--out-of-stock': row.value === 'Out of Stock',
|
|
488
|
-
}), children: row.value === 'In Stock' ? "\u2713 ".concat(row.value) : row.value })) : row.rawKey.toLowerCase() === 'price' ? ((0, jsx_runtime_1.jsxs)("span", { className: "ss__chat-product-query-message__section__table__price", children: [displayedCore.msrp != null && Number(displayedCore.msrp) > Number(row.value) && ((0, jsx_runtime_1.jsx)(__1.Price, { value: Number(displayedCore.msrp), lineThrough: true })), (0, jsx_runtime_1.jsx)(__1.Price, { value: Number(row.value) })] })) : (row.value) })] }, row.key)); }) }) })] })),
|
|
518
|
+
}), children: row.value === 'In Stock' ? "\u2713 ".concat(row.value) : row.value })) : row.rawKey.toLowerCase() === 'price' ? ((0, jsx_runtime_1.jsxs)("span", { className: "ss__chat-product-query-message__section__table__price", children: [displayedCore.msrp != null && Number(displayedCore.msrp) > Number(row.value) && ((0, jsx_runtime_1.jsx)(__1.Price, { value: Number(displayedCore.msrp), lineThrough: true })), (0, jsx_runtime_1.jsx)(__1.Price, { value: Number(row.value) })] })) : (row.value) })] }, row.key)); }) }) })] })), features.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__section'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__section__title'), children: "Features" }), (0, jsx_runtime_1.jsx)("ul", { className: (0, classnames_1.default)('ss__chat-product-query-message__section__features'), children: features.map(function (feature, idx) { return ((0, jsx_runtime_1.jsx)("li", { children: feature }, idx)); }) })] }))] })) }));
|
|
489
519
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/Chat.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAKhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AA6BrE,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,GAAG,CAAC,OAAO;;
|
|
1
|
+
{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/Chat.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAKhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AA6BrE,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,GAAG,CAAC,OAAO;;CAkmD/E,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC/B,UAAU,EAAE,cAAc,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;CACzB,GAAG,uBAAuB,GAC1B,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAEnC,MAAM,MAAM,uBAAuB,GAAG;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,+BAA+B,CAAC,EAAE,OAAO,CAAC;IAC1C,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,sBAAsB,CAAC,EAAE,MAAM,CAAC;CAChC,CAAC;AAEF,MAAM,WAAW,QAAQ;CAExB"}
|