@athoscommerce/snap-preact 1.5.1-beta.110 → 1.5.1-beta.112

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.
@@ -1 +1 @@
1
- {"version":3,"file":"ChatProductQueryMessage.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AA4brE,eAAO,MAAM,uBAAuB,gBAAyB,4BAA4B;;CAgQvF,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
+ {"version":3,"file":"ChatProductQueryMessage.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AA2crE,eAAO,MAAM,uBAAuB,gBAAyB,4BAA4B;;CAiQvF,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"}
@@ -33,7 +33,7 @@ var defaultStyles = function (_a) {
33
33
  flexDirection: 'column',
34
34
  gap: '1em',
35
35
  '.ss__chat-product-query-message__header': {
36
- background: new utilities_1.Colour(colorPrimary).lightenHex(0.2),
36
+ background: new utilities_1.Colour(colorPrimary).lightenHex(0.05),
37
37
  padding: '1em',
38
38
  display: 'flex',
39
39
  flexDirection: 'column',
@@ -110,7 +110,7 @@ var defaultStyles = function (_a) {
110
110
  '.ss__chat-product-query-message__header__product__actions': {
111
111
  display: 'flex',
112
112
  flexDirection: 'column',
113
- alignItems: 'flex-end',
113
+ alignItems: 'stretch',
114
114
  alignSelf: 'stretch',
115
115
  justifyContent: 'center',
116
116
  gap: '0.35em',
@@ -128,6 +128,7 @@ var defaultStyles = function (_a) {
128
128
  },
129
129
  },
130
130
  '.ss__chat-product-query-message__header__product__actions__add-to-cart .ss__button': {
131
+ flexDirection: 'row-reverse',
131
132
  borderRadius: '0.5em',
132
133
  padding: '0.4em 0.75em',
133
134
  fontWeight: 'bold',
@@ -135,22 +136,36 @@ var defaultStyles = function (_a) {
135
136
  whiteSpace: 'nowrap',
136
137
  cursor: 'pointer',
137
138
  fontSize: '0.8em',
138
- background: '#D4A843',
139
- color: '#1F2937',
139
+ background: '#feeeae',
140
+ color: '#000',
141
+ justifyContent: 'center',
142
+ width: '100%',
143
+ textAlign: 'center',
144
+ svg: {
145
+ fill: '#000',
146
+ stroke: '#000',
147
+ },
140
148
  '&:not(.ss__button--disabled):hover': {
141
- background: '#c49a3a',
149
+ background: '#fde68a',
142
150
  },
143
151
  },
144
- // Visual styles for the Show similar / Discuss product buttons live in the
145
- // Chat component so the chat-level theme drives them. Only layout-related
146
- // rules remain here.
147
152
  '.ss__chat-product-query-message__header__product__actions__show-similar .ss__button, .ss__chat-product-query-message__header__product__actions__discuss-product .ss__button': {
153
+ flexDirection: 'row-reverse',
148
154
  borderRadius: '0.5em',
149
155
  padding: '0.4em 0.75em',
150
156
  fontWeight: 'bold',
151
157
  whiteSpace: 'nowrap',
152
158
  cursor: 'pointer',
153
159
  fontSize: '0.8em',
160
+ background: '#000',
161
+ color: '#fff',
162
+ justifyContent: 'center',
163
+ width: '100%',
164
+ textAlign: 'center',
165
+ svg: {
166
+ fill: '#fff',
167
+ stroke: '#fff',
168
+ },
154
169
  },
155
170
  },
156
171
  },
@@ -456,10 +471,10 @@ exports.ChatProductQueryMessage = (0, mobx_react_lite_1.observer)(function (prop
456
471
  (_a = controller === null || controller === void 0 ? void 0 : controller.store.currentChat) === null || _a === void 0 ? void 0 : _a.popProductQueryMessage(chatItem.sourceMessageId);
457
472
  controller === null || controller === void 0 ? void 0 : controller.store.clearProductQuickview();
458
473
  };
459
- 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: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header'), children: [cameFromInspiration && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: (0, classnames_1.default)('ss__chat-product-query-message__header__back'), "aria-label": "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: "Back to inspiration" })] })), (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.brand && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__details__brand'), children: displayedCore.brand })), 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: [displayedCore.url && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__actions__go-to-product'), children: (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: "Go to product" }) })), (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, { content: 'Add to Cart', onClick: function () {
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: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header'), children: [cameFromInspiration && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: (0, classnames_1.default)('ss__chat-product-query-message__header__back'), "aria-label": "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: "Back to inspiration" })] })), (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.brand && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__details__brand'), children: displayedCore.brand })), 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: [displayedCore.url && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__actions__go-to-product'), children: (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: "Go to product" }) })), (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 () {
460
475
  controller === null || controller === void 0 ? void 0 : controller.track.product.addToCart(product);
461
476
  controller === null || controller === void 0 ? void 0 : controller.addToCart(product);
462
- } }) }), (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, { 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, { content: 'Discuss Product', onClick: function () { return controller === null || controller === void 0 ? void 0 : controller.productQuery(sourceProduct); } }) })] })] })] }), selections.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: selections.map(function (selection) { 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) {
477
+ } }) }), (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); } }) })] })] })] }), selections.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: selections.map(function (selection) { 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) {
463
478
  var _a;
464
479
  var isUnavailable = !selectionValue.available;
465
480
  var isSelected = ((_a = selection.selected) === null || _a === void 0 ? void 0 : _a.value) === selectionValue.value;
@@ -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;;CA85C/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"}
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;;CAw5C/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"}
@@ -299,7 +299,7 @@ exports.ChatOrganism = (0, mobx_react_lite_1.observer)(function (properties) {
299
299
  })() }), (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__history__chat__button__date", children: chat.createdAt.toLocaleString() })] }) }, chat.id)); }) })) : null] })); };
300
300
  var FacetButton = function (props) { return (0, jsx_runtime_1.jsx)(Button_1.Button, { icon: props.open ? 'angle-down' : 'angle-up', children: props.label }); };
301
301
  var getFacetButtonLabel = function (facet) {
302
- var _a, _b, _c;
302
+ var _a, _b;
303
303
  var base = facet.label || facet.field;
304
304
  // Slider facets show the active low-high range in the button when narrowed.
305
305
  if (facet.type === 'range') {
@@ -311,24 +311,19 @@ exports.ChatOrganism = (0, mobx_react_lite_1.observer)(function (properties) {
311
311
  }
312
312
  return base;
313
313
  }
314
- var applied = new Set();
315
- // Count values marked as filtered (already applied on the server)
316
- (facet.values || []).forEach(function (value) {
314
+ // Count current selections from the urlManager (source of truth for live state).
315
+ // `value.filtered` reflects the server's snapshot at response time and goes stale
316
+ // once the user deselects locally.
317
+ var applied = (facet.values || []).filter(function (value) {
317
318
  var _a, _b;
318
- if (value === null || value === void 0 ? void 0 : value.filtered) {
319
- if ('low' in value && 'high' in value) {
320
- applied.add("".concat((_a = value.low) !== null && _a !== void 0 ? _a : '*', ":").concat((_b = value.high) !== null && _b !== void 0 ? _b : '*'));
321
- }
322
- else {
323
- applied.add(value.value);
324
- }
325
- }
326
- });
327
- // Count pending facet attachments (newly selected, not yet sent)
328
- (((_c = controller.store.currentChat) === null || _c === void 0 ? void 0 : _c.attachments.items) || [])
329
- .filter(function (item) { return item.type === 'facet' && item.key === facet.field && (item.state === 'active' || item.state === 'attached'); })
330
- .forEach(function (item) { return applied.add(item.value); });
331
- return applied.size > 0 ? "".concat(base, " (").concat(applied.size, ")") : base;
319
+ if (!value)
320
+ return false;
321
+ var optionValue = 'low' in value && 'high' in value
322
+ ? "".concat((_a = value.low) !== null && _a !== void 0 ? _a : '*', ":").concat((_b = value.high) !== null && _b !== void 0 ? _b : '*')
323
+ : value.value || value.label;
324
+ return controller.store.isFacetSelected(facet.field, optionValue);
325
+ }).length;
326
+ return applied > 0 ? "".concat(base, " (").concat(applied, ")") : base;
332
327
  };
333
328
  // Slider dropdown grows to fill the remaining chat width from its anchor,
334
329
  // so the price range slider isn't cramped inside a 150px-wide dropdown.
@@ -1 +1 @@
1
- {"version":3,"file":"ChatProductQueryMessage.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AA4brE,eAAO,MAAM,uBAAuB,gBAAyB,4BAA4B;;CAgQvF,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
+ {"version":3,"file":"ChatProductQueryMessage.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AA2crE,eAAO,MAAM,uBAAuB,gBAAyB,4BAA4B;;CAiQvF,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"}
@@ -15,7 +15,7 @@ const defaultStyles = ({ primaryColor, primaryColorText }) => {
15
15
  flexDirection: 'column',
16
16
  gap: '1em',
17
17
  '.ss__chat-product-query-message__header': {
18
- background: new Colour(colorPrimary).lightenHex(0.2),
18
+ background: new Colour(colorPrimary).lightenHex(0.05),
19
19
  padding: '1em',
20
20
  display: 'flex',
21
21
  flexDirection: 'column',
@@ -92,7 +92,7 @@ const defaultStyles = ({ primaryColor, primaryColorText }) => {
92
92
  '.ss__chat-product-query-message__header__product__actions': {
93
93
  display: 'flex',
94
94
  flexDirection: 'column',
95
- alignItems: 'flex-end',
95
+ alignItems: 'stretch',
96
96
  alignSelf: 'stretch',
97
97
  justifyContent: 'center',
98
98
  gap: '0.35em',
@@ -110,6 +110,7 @@ const defaultStyles = ({ primaryColor, primaryColorText }) => {
110
110
  },
111
111
  },
112
112
  '.ss__chat-product-query-message__header__product__actions__add-to-cart .ss__button': {
113
+ flexDirection: 'row-reverse',
113
114
  borderRadius: '0.5em',
114
115
  padding: '0.4em 0.75em',
115
116
  fontWeight: 'bold',
@@ -117,22 +118,36 @@ const defaultStyles = ({ primaryColor, primaryColorText }) => {
117
118
  whiteSpace: 'nowrap',
118
119
  cursor: 'pointer',
119
120
  fontSize: '0.8em',
120
- background: '#D4A843',
121
- color: '#1F2937',
121
+ background: '#feeeae',
122
+ color: '#000',
123
+ justifyContent: 'center',
124
+ width: '100%',
125
+ textAlign: 'center',
126
+ svg: {
127
+ fill: '#000',
128
+ stroke: '#000',
129
+ },
122
130
  '&:not(.ss__button--disabled):hover': {
123
- background: '#c49a3a',
131
+ background: '#fde68a',
124
132
  },
125
133
  },
126
- // Visual styles for the Show similar / Discuss product buttons live in the
127
- // Chat component so the chat-level theme drives them. Only layout-related
128
- // rules remain here.
129
134
  '.ss__chat-product-query-message__header__product__actions__show-similar .ss__button, .ss__chat-product-query-message__header__product__actions__discuss-product .ss__button': {
135
+ flexDirection: 'row-reverse',
130
136
  borderRadius: '0.5em',
131
137
  padding: '0.4em 0.75em',
132
138
  fontWeight: 'bold',
133
139
  whiteSpace: 'nowrap',
134
140
  cursor: 'pointer',
135
141
  fontSize: '0.8em',
142
+ background: '#000',
143
+ color: '#fff',
144
+ justifyContent: 'center',
145
+ width: '100%',
146
+ textAlign: 'center',
147
+ svg: {
148
+ fill: '#fff',
149
+ stroke: '#fff',
150
+ },
136
151
  },
137
152
  },
138
153
  },
@@ -432,10 +447,10 @@ export const ChatProductQueryMessage = observer((properties) => {
432
447
  controller?.store.currentChat?.popProductQueryMessage(chatItem.sourceMessageId);
433
448
  controller?.store.clearProductQuickview();
434
449
  };
435
- return (_jsx(CacheProvider, { children: _jsxs("div", { className: classnames('ss__chat-product-query-message', className, internalClassName), ...styling, children: [_jsxs("div", { className: classnames('ss__chat-product-query-message__header'), children: [cameFromInspiration && (_jsxs("button", { type: "button", className: classnames('ss__chat-product-query-message__header__back'), "aria-label": "Back to inspiration", onClick: handleBack, children: [_jsx(Icon, { icon: "angle-left", size: "14px" }), _jsx("span", { children: "Back to inspiration" })] })), _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.brand && (_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__details__brand'), children: displayedCore.brand })), 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: [displayedCore.url && (_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__actions__go-to-product'), children: _jsx("a", { href: displayedCore.url, onClick: (e) => controller?.track.product.click(e, product), target: "_blank", rel: "noopener noreferrer", children: "Go to product" }) })), _jsx("div", { className: classnames('ss__chat-product-query-message__header__product__actions__add-to-cart'), children: _jsx(Button, { content: 'Add to Cart', onClick: () => {
450
+ return (_jsx(CacheProvider, { children: _jsxs("div", { className: classnames('ss__chat-product-query-message', className, internalClassName), ...styling, children: [_jsxs("div", { className: classnames('ss__chat-product-query-message__header'), children: [cameFromInspiration && (_jsxs("button", { type: "button", className: classnames('ss__chat-product-query-message__header__back'), "aria-label": "Back to inspiration", onClick: handleBack, children: [_jsx(Icon, { icon: "angle-left", size: "14px" }), _jsx("span", { children: "Back to inspiration" })] })), _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.brand && (_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__details__brand'), children: displayedCore.brand })), 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: [displayedCore.url && (_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__actions__go-to-product'), children: _jsx("a", { href: displayedCore.url, onClick: (e) => controller?.track.product.click(e, product), target: "_blank", rel: "noopener noreferrer", children: "Go to product" }) })), _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: () => {
436
451
  controller?.track.product.addToCart(product);
437
452
  controller?.addToCart(product);
438
- } }) }), controller?.store.features.similarProducts.enabled && (_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__actions__show-similar'), children: _jsx(Button, { content: 'Show Similar', onClick: () => controller?.productSimilar(sourceProduct) }) })), _jsx("div", { className: classnames('ss__chat-product-query-message__header__product__actions__discuss-product'), children: _jsx(Button, { content: 'Discuss Product', onClick: () => controller?.productQuery(sourceProduct) }) })] })] })] }), selections.length > 0 && (_jsx("div", { className: classnames('ss__chat-product-query-message__variants'), role: "group", "aria-label": "Variant selection", children: selections.map((selection) => (_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) => {
453
+ } }) }), 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) }) })] })] })] }), selections.length > 0 && (_jsx("div", { className: classnames('ss__chat-product-query-message__variants'), role: "group", "aria-label": "Variant selection", children: selections.map((selection) => (_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) => {
439
454
  const isUnavailable = !selectionValue.available;
440
455
  const isSelected = selection.selected?.value === selectionValue.value;
441
456
  return (_jsxs("button", { type: "button", className: classnames('ss__chat-product-query-message__variants__swatch', {
@@ -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;;CA85C/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"}
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;;CAw5C/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"}
@@ -247,23 +247,18 @@ export const ChatOrganism = observer((properties) => {
247
247
  }
248
248
  return base;
249
249
  }
250
- const applied = new Set();
251
- // Count values marked as filtered (already applied on the server)
252
- (facet.values || []).forEach((value) => {
253
- if (value?.filtered) {
254
- if ('low' in value && 'high' in value) {
255
- applied.add(`${value.low ?? '*'}:${value.high ?? '*'}`);
256
- }
257
- else {
258
- applied.add(value.value);
259
- }
260
- }
261
- });
262
- // Count pending facet attachments (newly selected, not yet sent)
263
- (controller.store.currentChat?.attachments.items || [])
264
- .filter((item) => item.type === 'facet' && item.key === facet.field && (item.state === 'active' || item.state === 'attached'))
265
- .forEach((item) => applied.add(item.value));
266
- return applied.size > 0 ? `${base} (${applied.size})` : base;
250
+ // Count current selections from the urlManager (source of truth for live state).
251
+ // `value.filtered` reflects the server's snapshot at response time and goes stale
252
+ // once the user deselects locally.
253
+ const applied = (facet.values || []).filter((value) => {
254
+ if (!value)
255
+ return false;
256
+ const optionValue = 'low' in value && 'high' in value
257
+ ? `${value.low ?? '*'}:${value.high ?? '*'}`
258
+ : value.value || value.label;
259
+ return controller.store.isFacetSelected(facet.field, optionValue);
260
+ }).length;
261
+ return applied > 0 ? `${base} (${applied})` : base;
267
262
  };
268
263
  // Slider dropdown grows to fill the remaining chat width from its anchor,
269
264
  // so the price range slider isn't cramped inside a 150px-wide dropdown.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@athoscommerce/snap-preact",
3
- "version": "1.5.1-beta.110+686b0c2b6",
3
+ "version": "1.5.1-beta.112+05d95b25d",
4
4
  "description": "Snap Preact",
5
5
  "main": "dist/cjs/src/index.js",
6
6
  "module": "dist/esm/src/index.js",
@@ -26,16 +26,16 @@
26
26
  "storybook": "storybook dev -c ./components/.storybook -p 6006"
27
27
  },
28
28
  "dependencies": {
29
- "@athoscommerce/snap-client": "1.5.1-beta.110+686b0c2b6",
30
- "@athoscommerce/snap-controller": "1.5.1-beta.110+686b0c2b6",
31
- "@athoscommerce/snap-event-manager": "1.5.1-beta.110+686b0c2b6",
32
- "@athoscommerce/snap-logger": "1.5.1-beta.110+686b0c2b6",
33
- "@athoscommerce/snap-platforms": "1.5.1-beta.110+686b0c2b6",
34
- "@athoscommerce/snap-profiler": "1.5.1-beta.110+686b0c2b6",
35
- "@athoscommerce/snap-store-mobx": "1.5.1-beta.110+686b0c2b6",
36
- "@athoscommerce/snap-toolbox": "1.5.1-beta.110+686b0c2b6",
37
- "@athoscommerce/snap-tracker": "1.5.1-beta.110+686b0c2b6",
38
- "@athoscommerce/snap-url-manager": "1.5.1-beta.110+686b0c2b6",
29
+ "@athoscommerce/snap-client": "1.5.1-beta.112+05d95b25d",
30
+ "@athoscommerce/snap-controller": "1.5.1-beta.112+05d95b25d",
31
+ "@athoscommerce/snap-event-manager": "1.5.1-beta.112+05d95b25d",
32
+ "@athoscommerce/snap-logger": "1.5.1-beta.112+05d95b25d",
33
+ "@athoscommerce/snap-platforms": "1.5.1-beta.112+05d95b25d",
34
+ "@athoscommerce/snap-profiler": "1.5.1-beta.112+05d95b25d",
35
+ "@athoscommerce/snap-store-mobx": "1.5.1-beta.112+05d95b25d",
36
+ "@athoscommerce/snap-toolbox": "1.5.1-beta.112+05d95b25d",
37
+ "@athoscommerce/snap-tracker": "1.5.1-beta.112+05d95b25d",
38
+ "@athoscommerce/snap-url-manager": "1.5.1-beta.112+05d95b25d",
39
39
  "@emotion/react": "11.13.0",
40
40
  "classnames": "^2.3.2",
41
41
  "color": "^4.2.3",
@@ -103,5 +103,5 @@
103
103
  "require": "./dist/cjs/toolbox/src/index.js"
104
104
  }
105
105
  },
106
- "gitHead": "686b0c2b6f5f8d52241b817161fcaa1651626211"
106
+ "gitHead": "05d95b25dbb4e784493aa8a92c3667d4fd783276"
107
107
  }