@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
package/dist/esm/components/src/components/Molecules/ChatAttachmentContext/ChatAttachmentContext.js
CHANGED
|
@@ -48,7 +48,7 @@ const defaultStyles = () => {
|
|
|
48
48
|
border: '1px solid #eee',
|
|
49
49
|
borderRadius: '0.5em',
|
|
50
50
|
background: '#f9fafb',
|
|
51
|
-
maxWidth: '
|
|
51
|
+
maxWidth: 'calc(50% - 0.25em)',
|
|
52
52
|
'&.ss__chat-attachment-context__item--clickable': {
|
|
53
53
|
cursor: 'pointer',
|
|
54
54
|
'&:hover': {
|
|
@@ -63,6 +63,7 @@ const defaultStyles = () => {
|
|
|
63
63
|
background: '#fff5f5',
|
|
64
64
|
borderColor: '#fca5a5',
|
|
65
65
|
color: '#b91c1c',
|
|
66
|
+
maxWidth: '100%',
|
|
66
67
|
},
|
|
67
68
|
'.ss__chat-attachment-context__item__content': {
|
|
68
69
|
position: 'relative',
|
|
@@ -156,7 +157,7 @@ export const ChatAttachmentContext = observer((properties) => {
|
|
|
156
157
|
return (_jsxs("div", { className: classnames('ss__chat-attachment-context__item', {
|
|
157
158
|
'ss__chat-attachment-context__item--error': item.hasError,
|
|
158
159
|
'ss__chat-attachment-context__item--clickable': isClickable,
|
|
159
|
-
}), onClick: item.onClick, onKeyDown: (e) => handleItemKeyDown(e, item.onClick), role: isClickable ? 'button' : undefined, tabIndex: isClickable ? 0 : undefined, "aria-label": isClickable ? `Open ${item.name}` : undefined, children: [item.hasError ? (_jsxs(_Fragment, { children: [_jsx("div", { className: 'ss__chat-attachment-context__item__error-icon', "aria-hidden": "true", children: "!" }), _jsx("div", { className: 'ss__chat-attachment-context__item__error-message', children: item.errorMessage || `Upload Failed - ${item.name}` })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'ss__chat-attachment-context__item__content', children: [item.imageUrl && _jsx(Image, { ...subProps.image, className: item.isLoading ? 'loading' : '', src: item.imageUrl, alt: item.name }), item.isLoading && (_jsxs("div", { className: 'ss__chat-attachment-context__item__loading', role: "status", "aria-label": `Loading ${item.name}`, children: [_jsx("div", { className: 'ss__chat-attachment-context__item__loading__dot' }), _jsx("div", { className: 'ss__chat-attachment-context__item__loading__dot' }), _jsx("div", { className: 'ss__chat-attachment-context__item__loading__dot' })] }))] }), _jsx("div", { className: 'ss__chat-attachment-context__item__name', title: item.name, children: item.name })] })), item.onRemove && (items.length > 1 || !onClose) && (_jsx(Button, { ...subProps.removeButton, className: 'ss__chat-attachment-context__item__remove', "aria-label": `Remove ${item.name}`, onClick: (e) => {
|
|
160
|
+
}), onClick: item.onClick, onKeyDown: (e) => handleItemKeyDown(e, item.onClick), role: isClickable ? 'button' : undefined, tabIndex: isClickable ? 0 : undefined, "aria-label": isClickable ? `Open ${item.name}` : undefined, children: [item.hasError ? (_jsxs(_Fragment, { children: [_jsx("div", { className: 'ss__chat-attachment-context__item__error-icon', "aria-hidden": "true", children: "!" }), _jsx("div", { className: 'ss__chat-attachment-context__item__error-message', children: item.errorMessage || `Upload Failed - ${item.name}` })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'ss__chat-attachment-context__item__content', children: [item.imageUrl && _jsx(Image, { ...subProps.image, className: item.isLoading ? 'loading' : '', src: item.imageUrl, alt: item.name }), item.isLoading && (_jsxs("div", { className: 'ss__chat-attachment-context__item__loading', role: "status", "aria-label": `Loading ${item.name}`, children: [_jsx("div", { className: 'ss__chat-attachment-context__item__loading__dot' }), _jsx("div", { className: 'ss__chat-attachment-context__item__loading__dot' }), _jsx("div", { className: 'ss__chat-attachment-context__item__loading__dot' })] }))] }), _jsx("div", { className: 'ss__chat-attachment-context__item__name', title: item.name, children: item.name })] })), item.onRemove && (items.length > 1 || !onClose || isClickable) && (_jsx(Button, { ...subProps.removeButton, className: 'ss__chat-attachment-context__item__remove', "aria-label": `Remove ${item.name}`, onClick: (e) => {
|
|
160
161
|
e.stopPropagation();
|
|
161
162
|
if (!item.isLoading)
|
|
162
163
|
item.onRemove?.();
|
|
@@ -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"}
|
|
@@ -37,6 +37,20 @@ const defaultStyles = () => {
|
|
|
37
37
|
'.ss__chat-product-comparison-message__table__product-header': {
|
|
38
38
|
textAlign: 'center',
|
|
39
39
|
minWidth: '120px',
|
|
40
|
+
'.ss__chat-product-comparison-message__table__product-header__link': {
|
|
41
|
+
background: 'none',
|
|
42
|
+
border: 'none',
|
|
43
|
+
padding: 0,
|
|
44
|
+
font: 'inherit',
|
|
45
|
+
color: 'inherit',
|
|
46
|
+
display: 'block',
|
|
47
|
+
width: '100%',
|
|
48
|
+
cursor: 'pointer',
|
|
49
|
+
textAlign: 'center',
|
|
50
|
+
'&:hover .ss__chat-product-comparison-message__table__product-header__name': {
|
|
51
|
+
textDecoration: 'underline',
|
|
52
|
+
},
|
|
53
|
+
},
|
|
40
54
|
'.ss__chat-product-comparison-message__table__product-header__image': {
|
|
41
55
|
width: '80px',
|
|
42
56
|
height: '80px',
|
|
@@ -67,7 +81,7 @@ export const ChatProductComparisonMessage = observer((properties) => {
|
|
|
67
81
|
treePath: globalTreePath,
|
|
68
82
|
};
|
|
69
83
|
const props = mergeProps('chatProductComparisonMessage', globalTheme, defaultProps, properties);
|
|
70
|
-
const { chatItem, className, internalClassName } = props;
|
|
84
|
+
const { chatItem, controller, className, internalClassName } = props;
|
|
71
85
|
// const subProps: ChatProductComparisonMessageSubProps = {
|
|
72
86
|
// };
|
|
73
87
|
const styling = mergeStyles(props, defaultStyles);
|
|
@@ -95,6 +109,12 @@ export const ChatProductComparisonMessage = observer((properties) => {
|
|
|
95
109
|
const product = searchResults.find((r) => r?.id === heading);
|
|
96
110
|
const display = getDisplay(product);
|
|
97
111
|
const productName = display?.mappings?.core?.name ?? heading;
|
|
98
|
-
|
|
112
|
+
const handleOpenProduct = (e) => {
|
|
113
|
+
if (!controller || !product)
|
|
114
|
+
return;
|
|
115
|
+
controller.track.product.click(e, product);
|
|
116
|
+
controller.productQuickView(product);
|
|
117
|
+
};
|
|
118
|
+
return (_jsx("th", { scope: "col", className: classnames('ss__chat-product-comparison-message__table__product-header'), children: _jsxs("button", { type: "button", className: classnames('ss__chat-product-comparison-message__table__product-header__link'), onClick: handleOpenProduct, "aria-label": `View details for ${productName}`, children: [allProductsHaveImage && (_jsx("img", { className: classnames('ss__chat-product-comparison-message__table__product-header__image'), src: (display.mappings.core.imageUrl || display.mappings.core.parentImageUrl), alt: productName })), _jsx("div", { className: classnames('ss__chat-product-comparison-message__table__product-header__name'), children: productName })] }) }, heading));
|
|
99
119
|
})] }) }), _jsx("tbody", { children: comparisonData.features.map((feature, index) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", className: classnames('ss__chat-product-comparison-message__table__feature-name'), children: feature.featureName }), headings.map((heading) => (_jsx("td", { className: classnames('ss__chat-product-comparison-message__table__value'), children: feature.values[heading] ?? '—' }, heading)))] }, index))) })] }) }) }) })) : null;
|
|
100
120
|
});
|
|
@@ -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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { useEffect } from 'preact/hooks';
|
|
2
3
|
import { observer } from 'mobx-react-lite';
|
|
3
4
|
import { css } from '@emotion/react';
|
|
4
5
|
import classnames from 'classnames';
|
|
@@ -14,36 +15,44 @@ const defaultStyles = ({ primaryColor, primaryColorText }) => {
|
|
|
14
15
|
display: 'flex',
|
|
15
16
|
flexDirection: 'column',
|
|
16
17
|
gap: '1em',
|
|
18
|
+
paddingBottom: '1em',
|
|
19
|
+
'.ss__chat-product-query-message__header__back': {
|
|
20
|
+
// Overlay banner pinned to the top of the secondary chat's scrollable messages
|
|
21
|
+
// container so it stays visible while the product details scroll underneath.
|
|
22
|
+
// Styling mirrors `.ss__chat__session-feedback` (dark primary bg, primary text,
|
|
23
|
+
// 8px/15px padding, 10px gap, 14px font). Rendered as a direct child of the
|
|
24
|
+
// component root (not the header) so sticky holds across the full scroll range.
|
|
25
|
+
// Negative marginBottom cancels the root's `gap: 1em` so the banner sits flush
|
|
26
|
+
// against the header below it.
|
|
27
|
+
position: 'sticky',
|
|
28
|
+
top: 0,
|
|
29
|
+
zIndex: 2,
|
|
30
|
+
marginBottom: '-1em',
|
|
31
|
+
display: 'flex',
|
|
32
|
+
alignItems: 'center',
|
|
33
|
+
gap: '10px',
|
|
34
|
+
padding: '8px 15px',
|
|
35
|
+
background: new Colour(colorPrimary).darkenHex(0.1),
|
|
36
|
+
color: colorPrimaryText,
|
|
37
|
+
fontSize: '14px',
|
|
38
|
+
cursor: 'pointer',
|
|
39
|
+
border: 'none',
|
|
40
|
+
font: 'inherit',
|
|
41
|
+
width: 'auto',
|
|
42
|
+
'&:focus-visible': {
|
|
43
|
+
outline: `2px solid ${colorPrimaryText}`,
|
|
44
|
+
outlineOffset: '-2px',
|
|
45
|
+
},
|
|
46
|
+
svg: {
|
|
47
|
+
fill: colorPrimaryText,
|
|
48
|
+
stroke: colorPrimaryText,
|
|
49
|
+
},
|
|
50
|
+
},
|
|
17
51
|
'.ss__chat-product-query-message__header': {
|
|
18
52
|
background: new Colour(colorPrimary).lightenHex(0.05),
|
|
19
53
|
padding: '1em',
|
|
20
54
|
display: 'flex',
|
|
21
55
|
flexDirection: 'column',
|
|
22
|
-
'.ss__chat-product-query-message__header__back': {
|
|
23
|
-
display: 'flex',
|
|
24
|
-
alignItems: 'center',
|
|
25
|
-
gap: '0.35em',
|
|
26
|
-
color: colorPrimaryText,
|
|
27
|
-
cursor: 'pointer',
|
|
28
|
-
alignSelf: 'flex-start',
|
|
29
|
-
padding: '0.5em 0',
|
|
30
|
-
fontSize: '0.85em',
|
|
31
|
-
opacity: 0.85,
|
|
32
|
-
background: 'transparent',
|
|
33
|
-
border: 'none',
|
|
34
|
-
font: 'inherit',
|
|
35
|
-
'&:hover': {
|
|
36
|
-
opacity: 1,
|
|
37
|
-
},
|
|
38
|
-
'&:focus-visible': {
|
|
39
|
-
outline: `2px solid ${colorPrimaryText}`,
|
|
40
|
-
outlineOffset: '2px',
|
|
41
|
-
},
|
|
42
|
-
svg: {
|
|
43
|
-
fill: colorPrimaryText,
|
|
44
|
-
stroke: colorPrimaryText,
|
|
45
|
-
},
|
|
46
|
-
},
|
|
47
56
|
'.ss__price': {
|
|
48
57
|
color: colorPrimaryText,
|
|
49
58
|
},
|
|
@@ -67,7 +76,7 @@ const defaultStyles = ({ primaryColor, primaryColorText }) => {
|
|
|
67
76
|
flex: 1,
|
|
68
77
|
'.ss__chat-product-query-message__header__product__details__name': {
|
|
69
78
|
fontWeight: 'bold',
|
|
70
|
-
fontSize: '
|
|
79
|
+
fontSize: '1.2em',
|
|
71
80
|
a: {
|
|
72
81
|
color: colorPrimaryText,
|
|
73
82
|
textDecoration: 'none',
|
|
@@ -76,10 +85,6 @@ const defaultStyles = ({ primaryColor, primaryColorText }) => {
|
|
|
76
85
|
},
|
|
77
86
|
},
|
|
78
87
|
},
|
|
79
|
-
'.ss__chat-product-query-message__header__product__details__brand': {
|
|
80
|
-
fontSize: '0.8em',
|
|
81
|
-
color: 'rgba(255, 255, 255, 0.7)',
|
|
82
|
-
},
|
|
83
88
|
'.ss__chat-product-query-message__header__product__details__price': {
|
|
84
89
|
fontWeight: 'bold',
|
|
85
90
|
fontSize: '1.1em',
|
|
@@ -97,18 +102,6 @@ const defaultStyles = ({ primaryColor, primaryColorText }) => {
|
|
|
97
102
|
justifyContent: 'center',
|
|
98
103
|
gap: '0.35em',
|
|
99
104
|
flexShrink: 0,
|
|
100
|
-
'.ss__chat-product-query-message__header__product__actions__go-to-product': {
|
|
101
|
-
a: {
|
|
102
|
-
color: colorPrimaryText,
|
|
103
|
-
opacity: 0.85,
|
|
104
|
-
fontSize: '0.8em',
|
|
105
|
-
textDecoration: 'underline',
|
|
106
|
-
cursor: 'pointer',
|
|
107
|
-
'&:hover': {
|
|
108
|
-
opacity: 1,
|
|
109
|
-
},
|
|
110
|
-
},
|
|
111
|
-
},
|
|
112
105
|
'.ss__chat-product-query-message__header__product__actions__add-to-cart .ss__button': {
|
|
113
106
|
flexDirection: 'row-reverse',
|
|
114
107
|
borderRadius: '0.5em',
|
|
@@ -154,6 +147,9 @@ const defaultStyles = ({ primaryColor, primaryColorText }) => {
|
|
|
154
147
|
},
|
|
155
148
|
'.ss__chat-product-query-message__variants': {
|
|
156
149
|
padding: '0 2em',
|
|
150
|
+
display: 'flex',
|
|
151
|
+
flexDirection: 'column',
|
|
152
|
+
gap: '1em',
|
|
157
153
|
'.ss__chat-product-query-message__variants__label': {
|
|
158
154
|
fontWeight: '600',
|
|
159
155
|
fontSize: '0.9em',
|
|
@@ -196,6 +192,16 @@ const defaultStyles = ({ primaryColor, primaryColorText }) => {
|
|
|
196
192
|
'&.ss__chat-product-query-message__variants__swatch--unavailable': {
|
|
197
193
|
opacity: 0.4,
|
|
198
194
|
},
|
|
195
|
+
'&.ss__chat-product-query-message__variants__swatch--text-only': {
|
|
196
|
+
padding: '0.4em 0.75em',
|
|
197
|
+
'&.ss__chat-product-query-message__variants__swatch--selected': {
|
|
198
|
+
padding: '0.3em 0.65em',
|
|
199
|
+
},
|
|
200
|
+
'.ss__chat-product-query-message__variants__swatch__value': {
|
|
201
|
+
fontSize: '1em',
|
|
202
|
+
maxWidth: 'none',
|
|
203
|
+
},
|
|
204
|
+
},
|
|
199
205
|
'.ss__chat-product-query-message__variants__swatch__image': {
|
|
200
206
|
width: '48px',
|
|
201
207
|
height: '48px',
|
|
@@ -232,7 +238,7 @@ const defaultStyles = ({ primaryColor, primaryColorText }) => {
|
|
|
232
238
|
borderCollapse: 'separate',
|
|
233
239
|
borderSpacing: 0,
|
|
234
240
|
fontSize: '0.9em',
|
|
235
|
-
border: `
|
|
241
|
+
border: `1px solid ${colorPrimary}`,
|
|
236
242
|
borderTop: 'none',
|
|
237
243
|
borderBottomLeftRadius: '0.5em',
|
|
238
244
|
borderBottomRightRadius: '0.5em',
|
|
@@ -273,16 +279,6 @@ const defaultStyles = ({ primaryColor, primaryColorText }) => {
|
|
|
273
279
|
justifyContent: 'flex-end',
|
|
274
280
|
},
|
|
275
281
|
},
|
|
276
|
-
'.ss__chat-product-query-message__section__description': {
|
|
277
|
-
padding: '0.75em',
|
|
278
|
-
fontSize: '0.9em',
|
|
279
|
-
color: '#374151',
|
|
280
|
-
lineHeight: '1.5',
|
|
281
|
-
border: `3px solid ${colorPrimary}`,
|
|
282
|
-
borderTop: 'none',
|
|
283
|
-
borderBottomLeftRadius: '0.5em',
|
|
284
|
-
borderBottomRightRadius: '0.5em',
|
|
285
|
-
},
|
|
286
282
|
'.ss__chat-product-query-message__section__features': {
|
|
287
283
|
margin: 0,
|
|
288
284
|
padding: '0.5em 1.25em',
|
|
@@ -293,6 +289,12 @@ const defaultStyles = ({ primaryColor, primaryColorText }) => {
|
|
|
293
289
|
},
|
|
294
290
|
},
|
|
295
291
|
},
|
|
292
|
+
'.ss__chat-product-query-message__description': {
|
|
293
|
+
padding: '0 1em',
|
|
294
|
+
fontSize: '0.9em',
|
|
295
|
+
color: '#374151',
|
|
296
|
+
lineHeight: '1.5',
|
|
297
|
+
},
|
|
296
298
|
});
|
|
297
299
|
};
|
|
298
300
|
// fields that have dedicated rendering in the product card; skip them in the info table
|
|
@@ -428,6 +430,7 @@ export const ChatProductQueryMessage = observer((properties) => {
|
|
|
428
430
|
const chatMessages = controller?.store.currentChat?.chat || [];
|
|
429
431
|
const sourceMessage = chatItem.sourceMessageId ? chatMessages.find((m) => m.id === chatItem.sourceMessageId) : null;
|
|
430
432
|
const cameFromInspiration = sourceMessage?.messageType === 'inspirationResult';
|
|
433
|
+
const cameFromComparison = sourceMessage?.messageType === 'productComparison';
|
|
431
434
|
if (!product) {
|
|
432
435
|
return (_jsx(CacheProvider, { children: _jsx("div", { className: classnames('ss__chat-product-query-message', className, internalClassName), ...styling, children: _jsx("div", { className: classnames('ss__chat-product-query-message__header'), children: _jsx("div", { className: classnames('ss__chat-product-query-message__header__product'), children: _jsx("div", { className: classnames('ss__chat-product-query-message__header__product__details'), children: _jsx("div", { className: classnames('ss__chat-product-query-message__header__product__details__name'), children: productQuickviewError || 'Loading product details...' }) }) }) }) }) }));
|
|
433
436
|
}
|
|
@@ -435,6 +438,24 @@ export const ChatProductQueryMessage = observer((properties) => {
|
|
|
435
438
|
const displayedCore = displayed.mappings?.core || {};
|
|
436
439
|
const variants = product.variants;
|
|
437
440
|
const selections = variants?.selections || [];
|
|
441
|
+
// Ensure every selection has an initial value picked. Without this, entering
|
|
442
|
+
// the quickview from inspiration leaves all selections empty, and the first
|
|
443
|
+
// variant click can't narrow `refineSelections` to a single variant — so the
|
|
444
|
+
// active variant (and hero image) doesn't update until a second selection is
|
|
445
|
+
// made. Pre-selecting the first available value for each selection on mount
|
|
446
|
+
// matches the carousel behavior. Single-value selections also get hidden from
|
|
447
|
+
// the UI (handled by `visibleSelections` below).
|
|
448
|
+
useEffect(() => {
|
|
449
|
+
selections.forEach((selection) => {
|
|
450
|
+
if (selection.selected)
|
|
451
|
+
return;
|
|
452
|
+
const target = selection.values.find((v) => v.available) || selection.values[0];
|
|
453
|
+
if (target) {
|
|
454
|
+
selection.select(target.value);
|
|
455
|
+
}
|
|
456
|
+
});
|
|
457
|
+
}, [selections]);
|
|
458
|
+
const visibleSelections = selections.filter((selection) => selection.values.length > 1);
|
|
438
459
|
const displayedData = {
|
|
439
460
|
mappings: displayed.mappings,
|
|
440
461
|
attributes: displayed.attributes || {},
|
|
@@ -447,18 +468,26 @@ export const ChatProductQueryMessage = observer((properties) => {
|
|
|
447
468
|
controller?.store.currentChat?.popProductQueryMessage(chatItem.sourceMessageId);
|
|
448
469
|
controller?.store.clearProductQuickview();
|
|
449
470
|
};
|
|
450
|
-
return (_jsx(CacheProvider, { children: _jsxs("div", { className: classnames('ss__chat-product-query-message', className, internalClassName), ...styling, children: [
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
471
|
+
return (_jsx(CacheProvider, { children: _jsxs("div", { className: classnames('ss__chat-product-query-message', className, internalClassName), ...styling, children: [(cameFromInspiration || cameFromComparison) && (_jsxs("button", { type: "button", className: classnames('ss__chat-product-query-message__header__back'), "aria-label": cameFromComparison ? 'Back to comparison' : 'Back to inspiration', onClick: handleBack, children: [_jsx(Icon, { icon: "angle-left", size: "14px" }), _jsx("span", { children: cameFromComparison ? 'Back to comparison' : 'Back to inspiration' })] })), _jsx("div", { className: classnames('ss__chat-product-query-message__header'), children: _jsxs("div", { className: classnames('ss__chat-product-query-message__header__product'), children: [(displayedCore.imageUrl || displayedCore.parentImageUrl) && (_jsx(Image, { className: classnames('ss__chat-product-query-message__header__product__image'), src: (displayedCore.imageUrl || displayedCore.parentImageUrl), alt: displayedCore.name || '' })), _jsxs("div", { className: classnames('ss__chat-product-query-message__header__product__details'), children: [displayedCore.name && (_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__details__name'), children: displayedCore.url ? (_jsx("a", { href: displayedCore.url, onClick: (e) => controller?.track.product.click(e, product), target: "_blank", rel: "noopener noreferrer", children: displayedCore.name })) : (displayedCore.name) })), displayedCore.price != null && (_jsxs("div", { className: classnames('ss__chat-product-query-message__header__product__details__price'), children: [displayedCore.msrp != null && Number(displayedCore.msrp) > Number(displayedCore.price) && (_jsx(Price, { value: displayedCore.msrp, lineThrough: true })), _jsx(Price, { value: displayedCore.price })] }))] }), _jsxs("div", { className: classnames('ss__chat-product-query-message__header__product__actions'), children: [_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__actions__add-to-cart'), children: _jsx(Button, { icon: "cart", content: 'Add to Cart', onClick: () => {
|
|
472
|
+
controller?.track.product.addToCart(product);
|
|
473
|
+
controller?.addToCart(product);
|
|
474
|
+
} }) }), controller?.store.features.similarProducts.enabled && (_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__actions__show-similar'), children: _jsx(Button, { icon: "search-thin", content: 'Show Similar', onClick: () => controller?.productSimilar(sourceProduct) }) })), _jsx("div", { className: classnames('ss__chat-product-query-message__header__product__actions__discuss-product'), children: _jsx(Button, { icon: "chat", content: 'Discuss Product', onClick: () => controller?.productQuery(sourceProduct) }) })] })] }) }), visibleSelections.length > 0 && (_jsx("div", { className: classnames('ss__chat-product-query-message__variants'), role: "group", "aria-label": "Variant selection", children: visibleSelections.map((selection) => {
|
|
475
|
+
// If every value in this selection shares the same thumbnail (or none have
|
|
476
|
+
// one), the image carries no signal — show text only.
|
|
477
|
+
const firstThumb = selection.values[0]?.thumbnailImageUrl;
|
|
478
|
+
const allSameThumb = selection.values.every((v) => v.thumbnailImageUrl === firstThumb);
|
|
479
|
+
const showThumbs = !allSameThumb;
|
|
480
|
+
return (_jsxs("div", { children: [_jsxs("div", { className: classnames('ss__chat-product-query-message__variants__label'), id: `ss__chat-pq-variant-${selection.field}`, children: [formatLabel(selection.field), " (", selection.values.length, ")"] }), _jsx("div", { className: classnames('ss__chat-product-query-message__variants__swatches'), role: "radiogroup", "aria-labelledby": `ss__chat-pq-variant-${selection.field}`, children: selection.values.map((selectionValue) => {
|
|
481
|
+
const isUnavailable = !selectionValue.available;
|
|
482
|
+
const isSelected = selection.selected?.value === selectionValue.value;
|
|
483
|
+
return (_jsxs("button", { type: "button", className: classnames('ss__chat-product-query-message__variants__swatch', {
|
|
484
|
+
'ss__chat-product-query-message__variants__swatch--selected': isSelected,
|
|
485
|
+
'ss__chat-product-query-message__variants__swatch--unavailable': isUnavailable,
|
|
486
|
+
'ss__chat-product-query-message__variants__swatch--text-only': !showThumbs,
|
|
487
|
+
}), title: selectionValue.value, role: "radio", "aria-checked": isSelected, "aria-disabled": isUnavailable, "aria-label": `${formatLabel(selection.field)}: ${selectionValue.value}${isUnavailable ? ' (unavailable)' : ''}`, onClick: () => selection.select(selectionValue.value), children: [showThumbs && selectionValue.thumbnailImageUrl ? (_jsx(Image, { className: classnames('ss__chat-product-query-message__variants__swatch__image'), src: selectionValue.thumbnailImageUrl, alt: selectionValue.value })) : null, _jsx("span", { className: classnames('ss__chat-product-query-message__variants__swatch__value'), children: selectionValue.value })] }, selectionValue.value));
|
|
488
|
+
}) })] }, selection.field));
|
|
489
|
+
}) })), descriptionRow && _jsx("div", { className: classnames('ss__chat-product-query-message__description'), children: descriptionRow.value }), infoRows.length > 0 && (_jsxs("div", { className: classnames('ss__chat-product-query-message__section'), children: [_jsx("div", { className: classnames('ss__chat-product-query-message__section__title'), children: "Product Information" }), _jsx("table", { className: classnames('ss__chat-product-query-message__section__table'), "aria-label": "Product information", children: _jsx("tbody", { children: infoRows.map((row) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: row.label }), _jsx("td", { children: row.rawKey === 'availability' ? (_jsx("span", { className: classnames({
|
|
461
490
|
'ss__chat-product-query-message__section__table__availability--in-stock': row.value === 'In Stock',
|
|
462
491
|
'ss__chat-product-query-message__section__table__availability--out-of-stock': row.value === 'Out of Stock',
|
|
463
|
-
}), children: row.value === 'In Stock' ? `\u2713 ${row.value}` : row.value })) : row.rawKey.toLowerCase() === 'price' ? (_jsxs("span", { className: "ss__chat-product-query-message__section__table__price", children: [displayedCore.msrp != null && Number(displayedCore.msrp) > Number(row.value) && (_jsx(Price, { value: Number(displayedCore.msrp), lineThrough: true })), _jsx(Price, { value: Number(row.value) })] })) : (row.value) })] }, row.key))) }) })] })),
|
|
492
|
+
}), children: row.value === 'In Stock' ? `\u2713 ${row.value}` : row.value })) : row.rawKey.toLowerCase() === 'price' ? (_jsxs("span", { className: "ss__chat-product-query-message__section__table__price", children: [displayedCore.msrp != null && Number(displayedCore.msrp) > Number(row.value) && (_jsx(Price, { value: Number(displayedCore.msrp), lineThrough: true })), _jsx(Price, { value: Number(row.value) })] })) : (row.value) })] }, row.key))) }) })] })), features.length > 0 && (_jsxs("div", { className: classnames('ss__chat-product-query-message__section'), children: [_jsx("div", { className: classnames('ss__chat-product-query-message__section__title'), children: "Features" }), _jsx("ul", { className: classnames('ss__chat-product-query-message__section__features'), children: features.map((feature, idx) => (_jsx("li", { children: feature }, idx))) })] }))] }) }));
|
|
464
493
|
});
|
|
@@ -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"}
|