@athoscommerce/snap-preact 1.5.1-beta.114 → 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.map +1 -1
- package/dist/cjs/components/src/components/Atoms/Dropdown/Dropdown.js +15 -3
- 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 +218 -43
- 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 +211 -175
- package/dist/esm/components/src/components/Atoms/Dropdown/Dropdown.d.ts.map +1 -1
- package/dist/esm/components/src/components/Atoms/Dropdown/Dropdown.js +14 -3
- 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 +194 -23
- 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 +67 -5
- 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"}
|
|
@@ -106,11 +106,18 @@ exports.Dropdown = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
106
106
|
(0, hooks_1.useEffect)(function () {
|
|
107
107
|
if (usePortal && dropdownOpen) {
|
|
108
108
|
var updateCoords_1 = function () {
|
|
109
|
+
var _a;
|
|
109
110
|
if (buttonRef.current) {
|
|
110
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;
|
|
111
118
|
setCoords({
|
|
112
119
|
top: dropUp ? rect.top : rect.bottom,
|
|
113
|
-
left:
|
|
120
|
+
left: left,
|
|
114
121
|
width: rect.width,
|
|
115
122
|
});
|
|
116
123
|
}
|
|
@@ -138,9 +145,14 @@ exports.Dropdown = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
138
145
|
(0, hooks_1.useLayoutEffect)(function () {
|
|
139
146
|
var _a, _b;
|
|
140
147
|
if (usePortal && dropdownOpen && contentRef.current && coords.width > 0) {
|
|
141
|
-
|
|
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;
|
|
142
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;
|
|
143
|
-
var shouldFlip =
|
|
155
|
+
var shouldFlip = coords.left + contentWidth > limit;
|
|
144
156
|
setFlipX(shouldFlip);
|
|
145
157
|
if (shouldFlip)
|
|
146
158
|
setFlipRight(Math.max(0, window.innerWidth - limit));
|
|
@@ -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"}
|