@searchspring/snap-preact-components 0.64.0 → 0.65.1
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/Organisms/Recommendation/Recommendation.js +5 -5
- package/dist/cjs/components/Organisms/RecommendationBundle/BundleSelector.d.ts +1 -1
- package/dist/cjs/components/Organisms/RecommendationBundle/BundleSelector.d.ts.map +1 -1
- package/dist/cjs/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts.map +1 -1
- package/dist/cjs/components/Organisms/RecommendationBundle/RecommendationBundle.js +33 -15
- package/dist/cjs/components/Organisms/Results/Results.d.ts.map +1 -1
- package/dist/cjs/components/Organisms/Results/Results.js +14 -25
- package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.d.ts +3 -1
- package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.d.ts.map +1 -1
- package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.js +2 -12
- package/dist/cjs/components/Trackers/ResultTracker/ResultTracker.d.ts +18 -0
- package/dist/cjs/components/Trackers/ResultTracker/ResultTracker.d.ts.map +1 -0
- package/dist/cjs/components/Trackers/ResultTracker/ResultTracker.js +68 -0
- package/dist/cjs/components/Trackers/ResultTracker/index.d.ts +2 -0
- package/dist/cjs/components/Trackers/ResultTracker/index.d.ts.map +1 -0
- package/dist/cjs/components/Trackers/{Recommendation/ResultTracker → ResultTracker}/index.js +1 -1
- package/dist/cjs/index.d.ts +3 -2
- package/dist/cjs/index.d.ts.map +1 -1
- package/dist/cjs/index.js +6 -2
- package/dist/esm/components/Organisms/Recommendation/Recommendation.js +5 -5
- package/dist/esm/components/Organisms/RecommendationBundle/BundleSelector.d.ts +1 -1
- package/dist/esm/components/Organisms/RecommendationBundle/BundleSelector.d.ts.map +1 -1
- package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts.map +1 -1
- package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.js +33 -15
- package/dist/esm/components/Organisms/Results/Results.d.ts.map +1 -1
- package/dist/esm/components/Organisms/Results/Results.js +3 -10
- package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.d.ts +3 -1
- package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.d.ts.map +1 -1
- package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.js +2 -12
- package/dist/esm/components/Trackers/ResultTracker/ResultTracker.d.ts +18 -0
- package/dist/esm/components/Trackers/ResultTracker/ResultTracker.d.ts.map +1 -0
- package/dist/esm/components/Trackers/ResultTracker/ResultTracker.js +58 -0
- package/dist/esm/components/Trackers/ResultTracker/index.d.ts +2 -0
- package/dist/esm/components/Trackers/ResultTracker/index.d.ts.map +1 -0
- package/dist/esm/components/Trackers/ResultTracker/index.js +1 -0
- package/dist/esm/index.d.ts +3 -2
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +4 -2
- package/package.json +11 -11
- package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts +0 -15
- package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts.map +0 -1
- package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.js +0 -59
- package/dist/cjs/components/Trackers/Recommendation/ResultTracker/index.d.ts +0 -2
- package/dist/cjs/components/Trackers/Recommendation/ResultTracker/index.d.ts.map +0 -1
- package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts +0 -15
- package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts.map +0 -1
- package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.js +0 -51
- package/dist/esm/components/Trackers/Recommendation/ResultTracker/index.d.ts +0 -2
- package/dist/esm/components/Trackers/Recommendation/ResultTracker/index.d.ts.map +0 -1
- package/dist/esm/components/Trackers/Recommendation/ResultTracker/index.js +0 -1
|
@@ -40,7 +40,7 @@ var hooks_2 = require("../../../hooks");
|
|
|
40
40
|
var providers_1 = require("../../../providers");
|
|
41
41
|
var useDisplaySettings_1 = require("../../../hooks/useDisplaySettings");
|
|
42
42
|
var ProfileTracker_1 = require("../../Trackers/Recommendation/ProfileTracker");
|
|
43
|
-
var ResultTracker_1 = require("../../Trackers/
|
|
43
|
+
var ResultTracker_1 = require("../../Trackers/ResultTracker");
|
|
44
44
|
var CSS = {
|
|
45
45
|
recommendation: function (_a) {
|
|
46
46
|
var vertical = _a.vertical;
|
|
@@ -109,11 +109,11 @@ exports.Recommendation = (0, mobx_react_1.observer)(function (properties) {
|
|
|
109
109
|
(0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__recommendation', className), ref: recsRef }), isVisible ? ((0, react_1.jsx)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller },
|
|
110
110
|
title && (0, react_1.jsx)("h3", { className: "ss__recommendation__title" }, title),
|
|
111
111
|
(0, react_1.jsx)(Carousel_1.Carousel, __assign({ prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, pagination: pagination, breakpoints: breakpoints }, subProps.carousel, additionalProps, displaySettings), Array.isArray(children) && children.length
|
|
112
|
-
? children.map(function (child, idx) { return ((0, react_1.jsx)(ResultTracker_1.
|
|
113
|
-
: resultsToRender.map(function (result) { return ((0, react_1.jsx)(ResultTracker_1.
|
|
112
|
+
? children.map(function (child, idx) { return ((0, react_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: resultsToRender[idx] }, child)); })
|
|
113
|
+
: resultsToRender.map(function (result) { return ((0, react_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: result },
|
|
114
114
|
(0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: result })))); })))) : ((0, react_1.jsx)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller }, Array.isArray(children) && children.length
|
|
115
|
-
? children.map(function (child, idx) { return ((0, react_1.jsx)(ResultTracker_1.
|
|
115
|
+
? children.map(function (child, idx) { return ((0, react_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: resultsToRender[idx] },
|
|
116
116
|
(0, react_1.jsx)(preact_1.Fragment, null))); })
|
|
117
|
-
: resultsToRender.map(function (result) { return ((0, react_1.jsx)(ResultTracker_1.
|
|
117
|
+
: resultsToRender.map(function (result) { return ((0, react_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: result },
|
|
118
118
|
(0, react_1.jsx)(preact_1.Fragment, null))); })))))) : ((0, react_1.jsx)(preact_1.Fragment, null));
|
|
119
119
|
});
|
|
@@ -15,7 +15,7 @@ export interface BundleSelectorProps extends ComponentProps {
|
|
|
15
15
|
seedText?: string;
|
|
16
16
|
seed?: boolean;
|
|
17
17
|
hideCheckboxes?: boolean;
|
|
18
|
-
onCheck?: () => void;
|
|
18
|
+
onCheck?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
|
|
19
19
|
icon?: string | Partial<IconProps> | boolean;
|
|
20
20
|
}
|
|
21
21
|
//# sourceMappingURL=BundleSelector.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BundleSelector.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/RecommendationBundle/BundleSelector.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAK9C,OAAO,EAAY,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAQ,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,eAAO,MAAM,cAAc,eAAyB,mBAAmB,KAAG,WAmDxE,CAAC;AAEH,MAAM,WAAW,sBAAsB;IACtC,IAAI,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CACjC;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"BundleSelector.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/RecommendationBundle/BundleSelector.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAK9C,OAAO,EAAY,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAQ,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,eAAO,MAAM,cAAc,eAAyB,mBAAmB,KAAG,WAmDxE,CAAC;AAEH,MAAM,WAAW,sBAAsB;IACtC,IAAI,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CACjC;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACjE,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;CAC7C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RecommendationBundle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/RecommendationBundle/RecommendationBundle.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAY,aAAa,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAIpF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAI9E,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAyG7D,eAAO,MAAM,oBAAoB,eAAyB,yBAAyB,KAAG,
|
|
1
|
+
{"version":3,"file":"RecommendationBundle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/RecommendationBundle/RecommendationBundle.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAY,aAAa,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAIpF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAI9E,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAyG7D,eAAO,MAAM,oBAAoB,eAAyB,yBAAyB,KAAG,WA8fpF,CAAC;AAEH,KAAK,mBAAmB,GAAG;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;AAE3B,MAAM,WAAW,yBAA0B,SAAQ,cAAc;IAChE,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,wBAAwB,CAAC;IACrC,WAAW,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IACvD,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,eAAe,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,UAAU,CAAC,EAAE;QACZ,OAAO,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACF"}
|
|
@@ -39,7 +39,7 @@ var utilities_1 = require("../../../utilities");
|
|
|
39
39
|
var providers_1 = require("../../../providers");
|
|
40
40
|
var useDisplaySettings_1 = require("../../../hooks/useDisplaySettings");
|
|
41
41
|
var ProfileTracker_1 = require("../../Trackers/Recommendation/ProfileTracker");
|
|
42
|
-
var ResultTracker_1 = require("../../Trackers/
|
|
42
|
+
var ResultTracker_1 = require("../../Trackers/ResultTracker");
|
|
43
43
|
var BundleSelector_1 = require("./BundleSelector");
|
|
44
44
|
var BundleCTA_1 = require("./BundleCTA");
|
|
45
45
|
var hooks_2 = require("../../../hooks");
|
|
@@ -266,7 +266,7 @@ exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties)
|
|
|
266
266
|
};
|
|
267
267
|
var addToCart = function (e) {
|
|
268
268
|
// add to cart tracking
|
|
269
|
-
controller.track.
|
|
269
|
+
controller.track.bundle.addToCart(selectedItems);
|
|
270
270
|
//call the function passed
|
|
271
271
|
onAddToCart && onAddToCart(e, selectedItems);
|
|
272
272
|
};
|
|
@@ -302,8 +302,11 @@ exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties)
|
|
|
302
302
|
}) },
|
|
303
303
|
carouselEnabled ? ((0, react_1.jsx)(preact_1.Fragment, null,
|
|
304
304
|
!seedInCarousel && !hideSeed && ((0, react_1.jsx)("div", { className: "ss__recommendation-bundle__wrapper__seed-container" },
|
|
305
|
-
(0, react_1.jsx)(ResultTracker_1.
|
|
306
|
-
(0, react_1.jsx)(BundleSelector_1.BundleSelector, { seedText: seedText, seed: true, onCheck: function () {
|
|
305
|
+
(0, react_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: seed, track: { impression: false } },
|
|
306
|
+
(0, react_1.jsx)(BundleSelector_1.BundleSelector, { seedText: seedText, seed: true, onCheck: function (e) {
|
|
307
|
+
e.stopPropagation();
|
|
308
|
+
onProductSelect(seed);
|
|
309
|
+
}, checked: selectedItems.findIndex(function (item) { return item.id == seed.id; }) > -1, icon: separatorIcon, hideCheckboxes: hideCheckboxes, theme: props.theme, ref: seedRef }, resultComponent ? ((0, utilities_1.cloneWithProps)(resultComponent, {
|
|
307
310
|
result: seed,
|
|
308
311
|
seed: true,
|
|
309
312
|
selected: selectedItems.findIndex(function (item) { return item.id == seed.id; }) > -1,
|
|
@@ -316,35 +319,50 @@ exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties)
|
|
|
316
319
|
.map(function (result, idx) {
|
|
317
320
|
var selected = selectedItems.findIndex(function (item) { return item.id == result.id; }) > -1;
|
|
318
321
|
if (idx == 0 && !hideSeed) {
|
|
319
|
-
return ((0, react_1.jsx)(ResultTracker_1.
|
|
320
|
-
(0, react_1.jsx)(BundleSelector_1.BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: function () {
|
|
322
|
+
return ((0, react_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: result, track: { impression: false } },
|
|
323
|
+
(0, react_1.jsx)(BundleSelector_1.BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: function (e) {
|
|
324
|
+
e.stopPropagation();
|
|
325
|
+
onProductSelect(result);
|
|
326
|
+
}, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme }, resultComponent ? ((0, utilities_1.cloneWithProps)(resultComponent, { result: result, seed: true, selected: selected, onProductSelect: onProductSelect })) : ((0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: result }))))));
|
|
321
327
|
}
|
|
322
328
|
else {
|
|
323
|
-
return ((0, react_1.jsx)(ResultTracker_1.
|
|
324
|
-
(0, react_1.jsx)(BundleSelector_1.BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: function () {
|
|
329
|
+
return ((0, react_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: result },
|
|
330
|
+
(0, react_1.jsx)(BundleSelector_1.BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: function (e) {
|
|
331
|
+
e.stopPropagation();
|
|
332
|
+
onProductSelect(result);
|
|
333
|
+
}, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme, className: idx + 1 == resultsToRender.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '' }, resultComponent ? ((0, utilities_1.cloneWithProps)(resultComponent, { result: result, seed: false, selected: selected, onProductSelect: onProductSelect })) : ((0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: result }))))));
|
|
325
334
|
}
|
|
326
335
|
})
|
|
327
336
|
: resultsToRender
|
|
328
337
|
.filter(function (result, idx) { return idx !== 0; })
|
|
329
338
|
.map(function (result, idx, results) {
|
|
330
339
|
var selected = selectedItems.findIndex(function (item) { return item.id == result.id; }) > -1;
|
|
331
|
-
return ((0, react_1.jsx)(ResultTracker_1.
|
|
332
|
-
(0, react_1.jsx)(BundleSelector_1.BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: function () {
|
|
340
|
+
return ((0, react_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: result },
|
|
341
|
+
(0, react_1.jsx)(BundleSelector_1.BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: function (e) {
|
|
342
|
+
e.stopPropagation();
|
|
343
|
+
onProductSelect(result);
|
|
344
|
+
}, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme, className: idx + 1 == results.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '' }, resultComponent ? ((0, utilities_1.cloneWithProps)(resultComponent, { result: result, seed: false, selected: selected, onProductSelect: onProductSelect })) : ((0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: result }))))));
|
|
333
345
|
}))))) : (resultsToRender
|
|
334
346
|
.filter(function (result, idx) { return (hideSeed && idx == 0 ? false : true); })
|
|
335
347
|
.map(function (result, idx) {
|
|
336
348
|
var selected = selectedItems.findIndex(function (item) { return item.id == result.id; }) > -1;
|
|
337
349
|
if (idx == 0 && !hideSeed) {
|
|
338
|
-
return ((0, react_1.jsx)(ResultTracker_1.
|
|
339
|
-
(0, react_1.jsx)(BundleSelector_1.BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: function () {
|
|
350
|
+
return ((0, react_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: result, track: { impression: false } },
|
|
351
|
+
(0, react_1.jsx)(BundleSelector_1.BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: function (e) {
|
|
352
|
+
e.stopPropagation();
|
|
353
|
+
onProductSelect(result);
|
|
354
|
+
}, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme }, resultComponent ? ((0, utilities_1.cloneWithProps)(resultComponent, { result: result, seed: true, selected: selected, onProductSelect: onProductSelect })) : ((0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: result }))))));
|
|
340
355
|
}
|
|
341
356
|
else {
|
|
342
|
-
return ((0, react_1.jsx)(ResultTracker_1.
|
|
343
|
-
(0, react_1.jsx)(BundleSelector_1.BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: function () {
|
|
357
|
+
return ((0, react_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: result },
|
|
358
|
+
(0, react_1.jsx)(BundleSelector_1.BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: function (e) {
|
|
359
|
+
e.stopPropagation();
|
|
360
|
+
onProductSelect(result);
|
|
361
|
+
}, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme, className: idx + 1 == resultsToRender.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '' }, resultComponent ? ((0, utilities_1.cloneWithProps)(resultComponent, { result: result, seed: false, selected: selected, onProductSelect: onProductSelect })) : ((0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: result }))))));
|
|
344
362
|
}
|
|
345
363
|
})),
|
|
346
364
|
ctaInline && ((0, react_1.jsx)(BundleCTA_1.BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCart: function (e) { return addToCart(e); }, ctaButtonText: ctaButtonText, ctaButtonSuccessText: ctaButtonSuccessText, ctaButtonSuccessTimeout: ctaButtonSuccessTimeout, ctaIcon: ctaIcon }))),
|
|
347
|
-
!ctaInline && ((0, react_1.jsx)(BundleCTA_1.BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCart: function (e) { return addToCart(e); }, ctaButtonText: ctaButtonText, ctaButtonSuccessText: ctaButtonSuccessText, ctaButtonSuccessTimeout: ctaButtonSuccessTimeout, ctaIcon: ctaIcon })))) : ((0, react_1.jsx)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller }, resultsToRender.map(function (result) { return ((0, react_1.jsx)(ResultTracker_1.
|
|
365
|
+
!ctaInline && ((0, react_1.jsx)(BundleCTA_1.BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCart: function (e) { return addToCart(e); }, ctaButtonText: ctaButtonText, ctaButtonSuccessText: ctaButtonSuccessText, ctaButtonSuccessTimeout: ctaButtonSuccessTimeout, ctaIcon: ctaIcon })))) : ((0, react_1.jsx)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller }, resultsToRender.map(function (result) { return ((0, react_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: result },
|
|
348
366
|
(0, react_1.jsx)(preact_1.Fragment, null))); })))))) : ((0, react_1.jsx)(preact_1.Fragment, null));
|
|
349
367
|
return (0, react_1.jsx)(preact_1.Fragment, null);
|
|
350
368
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Results.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Results/Results.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,iBAAiB,EAAmB,MAAM,+BAA+B,CAAC;AAIxF,OAAO,EAAE,cAAc,EAAU,UAAU,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Results.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Results/Results.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,iBAAiB,EAAmB,MAAM,+BAA+B,CAAC;AAIxF,OAAO,EAAE,cAAc,EAAU,UAAU,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AA+BlG,eAAO,MAAM,OAAO,eAAyB,WAAW,KAAG,WA8GzD,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}
|
|
@@ -28,9 +28,9 @@ var types_1 = require("../../../types");
|
|
|
28
28
|
var utilities_1 = require("../../../utilities");
|
|
29
29
|
var providers_1 = require("../../../providers");
|
|
30
30
|
var useDisplaySettings_1 = require("../../../hooks/useDisplaySettings");
|
|
31
|
+
var ResultTracker_1 = require("../../Trackers/ResultTracker");
|
|
31
32
|
var CSS = {
|
|
32
33
|
results: function (_a) {
|
|
33
|
-
var _b;
|
|
34
34
|
var columns = _a.columns, gapSize = _a.gapSize;
|
|
35
35
|
return (0, react_1.css)({
|
|
36
36
|
display: 'flex',
|
|
@@ -38,20 +38,11 @@ var CSS = {
|
|
|
38
38
|
gap: gapSize,
|
|
39
39
|
gridTemplateRows: 'auto',
|
|
40
40
|
gridTemplateColumns: "repeat(".concat(columns, ", 1fr)"),
|
|
41
|
-
'& .ss__result':
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
marginBottom: gapSize
|
|
47
|
-
},
|
|
48
|
-
_b["&:nth-of-type(".concat(columns, "n)")] = {
|
|
49
|
-
marginRight: '0',
|
|
50
|
-
},
|
|
51
|
-
_b["&:nth-last-of-type(-n+".concat(columns, ")")] = {
|
|
52
|
-
marginBottom: '0',
|
|
53
|
-
},
|
|
54
|
-
_b),
|
|
41
|
+
'& .ss__result': {
|
|
42
|
+
boxSizing: 'border-box',
|
|
43
|
+
flex: '0 1 auto',
|
|
44
|
+
width: "calc(".concat(100 / columns, "% - (").concat(columns - 1, " * ").concat(gapSize, " / ").concat(columns, " ) )"),
|
|
45
|
+
},
|
|
55
46
|
'@supports (display: grid)': {
|
|
56
47
|
display: 'grid',
|
|
57
48
|
'& .ss__result': {
|
|
@@ -114,14 +105,12 @@ exports.Results = (0, mobx_react_1.observer)(function (properties) {
|
|
|
114
105
|
styling.css = [style];
|
|
115
106
|
}
|
|
116
107
|
return (results === null || results === void 0 ? void 0 : results.length) ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
|
|
117
|
-
(0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__results', "ss__results-".concat(props.layout), className) }), results.map(function (result) {
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
})();
|
|
126
|
-
})))) : ((0, react_1.jsx)(preact_1.Fragment, null));
|
|
108
|
+
(0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__results', "ss__results-".concat(props.layout), className) }), results.map(function (result) { return ((0, react_1.jsx)(ResultTracker_1.ResultTracker, { result: result, controller: controller }, (function () {
|
|
109
|
+
switch (result.type) {
|
|
110
|
+
case snap_store_mobx_1.ContentType.BANNER:
|
|
111
|
+
return (0, react_1.jsx)(InlineBanner_1.InlineBanner, __assign({}, subProps.inlineBanner, { key: result.id, banner: result, layout: props.layout }));
|
|
112
|
+
default:
|
|
113
|
+
return ((0, react_1.jsx)(Result_1.Result, __assign({ key: result.id }, subProps.result, { result: result, layout: props.layout, controller: controller })));
|
|
114
|
+
}
|
|
115
|
+
})())); })))) : ((0, react_1.jsx)(preact_1.Fragment, null));
|
|
127
116
|
});
|
package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.d.ts
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/** @jsx jsx */
|
|
3
|
+
import { ComponentChildren } from 'preact';
|
|
2
4
|
import type { RecommendationController } from '@searchspring/snap-controller';
|
|
3
5
|
import { ComponentProps } from '../../../../types';
|
|
4
6
|
export declare const RecommendationProfileTracker: (properties: RecommendationProfileTrackerProps) => JSX.Element;
|
|
5
7
|
export interface RecommendationProfileTrackerProps extends ComponentProps {
|
|
6
|
-
children:
|
|
8
|
+
children: ComponentChildren;
|
|
7
9
|
controller: RecommendationController;
|
|
8
10
|
}
|
|
9
11
|
//# sourceMappingURL=RecommendationProfileTracker.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RecommendationProfileTracker.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"RecommendationProfileTracker.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAE,iBAAiB,EAA6B,MAAM,QAAQ,CAAC;AAItE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAc,MAAM,mBAAmB,CAAC;AAO/D,eAAO,MAAM,4BAA4B,eAAyB,iCAAiC,KAAG,WA8BpG,CAAC;AAEH,MAAM,WAAW,iCAAkC,SAAQ,cAAc;IACxE,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,UAAU,EAAE,wBAAwB,CAAC;CACrC"}
|
package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.js
CHANGED
|
@@ -18,10 +18,8 @@ exports.RecommendationProfileTracker = void 0;
|
|
|
18
18
|
/** @jsx jsx */
|
|
19
19
|
var preact_1 = require("preact");
|
|
20
20
|
var react_1 = require("@emotion/react");
|
|
21
|
-
var hooks_1 = require("preact/hooks");
|
|
22
21
|
var mobx_react_1 = require("mobx-react");
|
|
23
22
|
var providers_1 = require("../../../../providers");
|
|
24
|
-
var hooks_2 = require("../../../../hooks");
|
|
25
23
|
var classnames_1 = __importDefault(require("classnames"));
|
|
26
24
|
var CSS = {
|
|
27
25
|
RecommendationProfileTracker: function () { return (0, react_1.css)({}); },
|
|
@@ -30,16 +28,8 @@ exports.RecommendationProfileTracker = (0, mobx_react_1.observer)(function (prop
|
|
|
30
28
|
var _a, _b, _c;
|
|
31
29
|
var globalTheme = (0, providers_1.useTheme)();
|
|
32
30
|
var props = __assign(__assign(__assign({}, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.RecommendationProfileTracker), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.RecommendationProfileTracker);
|
|
33
|
-
var children = props.children,
|
|
31
|
+
var children = props.children, className = props.className, style = props.style, disableStyles = props.disableStyles;
|
|
34
32
|
var childs = (0, preact_1.toChildArray)(children);
|
|
35
|
-
// do impression tracking for "profile"
|
|
36
|
-
var componentRef = (0, hooks_1.useRef)(null);
|
|
37
|
-
var inViewport = (0, hooks_2.useIntersection)(componentRef, '0px');
|
|
38
|
-
if (inViewport) {
|
|
39
|
-
controller.track.impression();
|
|
40
|
-
}
|
|
41
|
-
// takes care of rendering profile
|
|
42
|
-
childs.length && controller.track.render();
|
|
43
33
|
var styling = {};
|
|
44
34
|
if (!disableStyles) {
|
|
45
35
|
styling.css = [CSS.RecommendationProfileTracker(), style];
|
|
@@ -47,5 +37,5 @@ exports.RecommendationProfileTracker = (0, mobx_react_1.observer)(function (prop
|
|
|
47
37
|
else if (style) {
|
|
48
38
|
styling.css = [style];
|
|
49
39
|
}
|
|
50
|
-
return childs.length ? ((0, react_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__recommendation-profile-tracker', className)
|
|
40
|
+
return childs.length ? ((0, react_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__recommendation-profile-tracker', className) }, styling), children)) : ((0, react_1.jsx)(preact_1.Fragment, null));
|
|
51
41
|
});
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
/** @jsx jsx */
|
|
3
|
+
import { ComponentChildren } from 'preact';
|
|
4
|
+
import type { AutocompleteController, RecommendationController, SearchController } from '@searchspring/snap-controller';
|
|
5
|
+
import { ComponentProps } from '../../../types';
|
|
6
|
+
import type { Banner, Product } from '@searchspring/snap-store-mobx';
|
|
7
|
+
export declare const ResultTracker: (properties: ResultTrackerProps) => JSX.Element;
|
|
8
|
+
export interface ResultTrackerProps extends ComponentProps {
|
|
9
|
+
children: ComponentChildren;
|
|
10
|
+
result: Product | Banner;
|
|
11
|
+
controller: SearchController | AutocompleteController | RecommendationController;
|
|
12
|
+
track?: {
|
|
13
|
+
render?: boolean;
|
|
14
|
+
impression?: boolean;
|
|
15
|
+
click?: boolean;
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
//# sourceMappingURL=ResultTracker.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ResultTracker.d.ts","sourceRoot":"","sources":["../../../../../src/components/Trackers/ResultTracker/ResultTracker.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAM9C,OAAO,KAAK,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAOrE,eAAO,MAAM,aAAa,eAAyB,kBAAkB,KAAG,WA+DtE,CAAC;AAEH,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACzD,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IACjF,KAAK,CAAC,EAAE;QACP,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,KAAK,CAAC,EAAE,OAAO,CAAC;KAChB,CAAC;CACF"}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.ResultTracker = void 0;
|
|
18
|
+
var react_1 = require("@emotion/react");
|
|
19
|
+
var hooks_1 = require("preact/hooks");
|
|
20
|
+
var mobx_react_1 = require("mobx-react");
|
|
21
|
+
var providers_1 = require("../../../providers");
|
|
22
|
+
var hooks_2 = require("../../../hooks");
|
|
23
|
+
var classnames_1 = __importDefault(require("classnames"));
|
|
24
|
+
var CSS = {
|
|
25
|
+
ResultTracker: function () { return (0, react_1.css)({}); },
|
|
26
|
+
};
|
|
27
|
+
exports.ResultTracker = (0, mobx_react_1.observer)(function (properties) {
|
|
28
|
+
var _a, _b, _c, _d, _e;
|
|
29
|
+
var globalTheme = (0, providers_1.useTheme)();
|
|
30
|
+
var defaultTrack = {
|
|
31
|
+
render: true,
|
|
32
|
+
impression: true,
|
|
33
|
+
click: true,
|
|
34
|
+
};
|
|
35
|
+
var props = __assign(__assign(__assign({}, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.ResultTracker), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.ResultTracker);
|
|
36
|
+
var children = props.children, result = props.result, track = props.track, controller = props.controller, className = props.className, disableStyles = props.disableStyles, style = props.style;
|
|
37
|
+
var mergedTrack = __assign(__assign({}, defaultTrack), track);
|
|
38
|
+
var resultRef = (0, hooks_1.useRef)(null);
|
|
39
|
+
var resultInViewport = (0, hooks_2.useIntersection)(resultRef, '0px', true);
|
|
40
|
+
(0, hooks_1.useEffect)(function () {
|
|
41
|
+
var _a, _b;
|
|
42
|
+
if (mergedTrack.render) {
|
|
43
|
+
if (result.type === 'product') {
|
|
44
|
+
(_b = (_a = controller === null || controller === void 0 ? void 0 : controller.track) === null || _a === void 0 ? void 0 : _a.product) === null || _b === void 0 ? void 0 : _b.render(result);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}, [result]);
|
|
48
|
+
if (resultInViewport && mergedTrack.impression) {
|
|
49
|
+
if (result.type === 'product' && (controller === null || controller === void 0 ? void 0 : controller.track)) {
|
|
50
|
+
(_e = (_d = controller === null || controller === void 0 ? void 0 : controller.track) === null || _d === void 0 ? void 0 : _d.product) === null || _e === void 0 ? void 0 : _e.impression(result);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
var styling = {};
|
|
54
|
+
if (!disableStyles) {
|
|
55
|
+
styling.css = [CSS.ResultTracker(), style];
|
|
56
|
+
}
|
|
57
|
+
else if (style) {
|
|
58
|
+
styling.css = [style];
|
|
59
|
+
}
|
|
60
|
+
return ((0, react_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__result-tracker', "ss__".concat(controller === null || controller === void 0 ? void 0 : controller.type, "-result-tracker"), className), onClick: function (e) {
|
|
61
|
+
var _a, _b;
|
|
62
|
+
if (mergedTrack.click) {
|
|
63
|
+
if (result.type === 'product') {
|
|
64
|
+
(_b = (_a = controller === null || controller === void 0 ? void 0 : controller.track) === null || _a === void 0 ? void 0 : _a.product) === null || _b === void 0 ? void 0 : _b.click(e, result);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}, ref: resultRef }, styling), children));
|
|
68
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Trackers/ResultTracker/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}
|
package/dist/cjs/components/Trackers/{Recommendation/ResultTracker → ResultTracker}/index.js
RENAMED
|
@@ -14,4 +14,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
14
14
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
__exportStar(require("./
|
|
17
|
+
__exportStar(require("./ResultTracker"), exports);
|
package/dist/cjs/index.d.ts
CHANGED
|
@@ -13,8 +13,6 @@ export * from './components/Atoms/Merchandising';
|
|
|
13
13
|
export * from './components/Atoms/Overlay';
|
|
14
14
|
export * from './components/Atoms/Price';
|
|
15
15
|
export * from './components/Atoms/Skeleton';
|
|
16
|
-
export * from './components/Trackers/Recommendation/ResultTracker';
|
|
17
|
-
export * from './components/Trackers/Recommendation/ProfileTracker';
|
|
18
16
|
export * from './components/Molecules/CalloutBadge';
|
|
19
17
|
export * from './components/Molecules/Carousel';
|
|
20
18
|
export * from './components/Molecules/Checkbox';
|
|
@@ -42,6 +40,9 @@ export * from './components/Organisms/FilterSummary';
|
|
|
42
40
|
export * from './components/Organisms/Recommendation';
|
|
43
41
|
export * from './components/Organisms/RecommendationBundle';
|
|
44
42
|
export * from './components/Organisms/Results';
|
|
43
|
+
export * from './components/Trackers/Recommendation/ProfileTracker';
|
|
44
|
+
export * from './components/Trackers/ResultTracker';
|
|
45
|
+
export { ResultTracker as RecommendationResultTracker, ResultTrackerProps as RecommendationResultTrackerProps, } from './components/Trackers/ResultTracker';
|
|
45
46
|
export * from './hooks';
|
|
46
47
|
export * from './providers';
|
|
47
48
|
export * from './toolbox';
|
package/dist/cjs/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAG5C,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,qCAAqC,CAAC;AACpD,cAAc,yCAAyC,CAAC;AACxD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,yCAAyC,CAAC;AACxD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,oCAAoC,CAAC;AACnD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AAGxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sCAAsC,CAAC;AACrD,cAAc,uCAAuC,CAAC;AACtD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,gCAAgC,CAAC;AAG/C,cAAc,qDAAqD,CAAC;AACpE,cAAc,qCAAqC,CAAC;AACpD,OAAO,EACN,aAAa,IAAI,2BAA2B,EAC5C,kBAAkB,IAAI,gCAAgC,GACtD,MAAM,qCAAqC,CAAC;AAG7C,cAAc,SAAS,CAAC;AAGxB,cAAc,aAAa,CAAC;AAG5B,cAAc,WAAW,CAAC"}
|
package/dist/cjs/index.js
CHANGED
|
@@ -14,6 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
14
14
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.RecommendationResultTracker = void 0;
|
|
17
18
|
// ATOMS
|
|
18
19
|
__exportStar(require("./components/Atoms/BadgeImage"), exports);
|
|
19
20
|
__exportStar(require("./components/Atoms/BadgePill"), exports);
|
|
@@ -30,8 +31,6 @@ __exportStar(require("./components/Atoms/Merchandising"), exports);
|
|
|
30
31
|
__exportStar(require("./components/Atoms/Overlay"), exports);
|
|
31
32
|
__exportStar(require("./components/Atoms/Price"), exports);
|
|
32
33
|
__exportStar(require("./components/Atoms/Skeleton"), exports);
|
|
33
|
-
__exportStar(require("./components/Trackers/Recommendation/ResultTracker"), exports);
|
|
34
|
-
__exportStar(require("./components/Trackers/Recommendation/ProfileTracker"), exports);
|
|
35
34
|
// MOLECULES
|
|
36
35
|
__exportStar(require("./components/Molecules/CalloutBadge"), exports);
|
|
37
36
|
__exportStar(require("./components/Molecules/Carousel"), exports);
|
|
@@ -61,6 +60,11 @@ __exportStar(require("./components/Organisms/FilterSummary"), exports);
|
|
|
61
60
|
__exportStar(require("./components/Organisms/Recommendation"), exports);
|
|
62
61
|
__exportStar(require("./components/Organisms/RecommendationBundle"), exports);
|
|
63
62
|
__exportStar(require("./components/Organisms/Results"), exports);
|
|
63
|
+
// TRACKERS
|
|
64
|
+
__exportStar(require("./components/Trackers/Recommendation/ProfileTracker"), exports);
|
|
65
|
+
__exportStar(require("./components/Trackers/ResultTracker"), exports);
|
|
66
|
+
var ResultTracker_1 = require("./components/Trackers/ResultTracker");
|
|
67
|
+
Object.defineProperty(exports, "RecommendationResultTracker", { enumerable: true, get: function () { return ResultTracker_1.ResultTracker; } });
|
|
64
68
|
// HOOKS
|
|
65
69
|
__exportStar(require("./hooks"), exports);
|
|
66
70
|
// PROVIDERS
|
|
@@ -12,7 +12,7 @@ import { useIntersection } from '../../../hooks';
|
|
|
12
12
|
import { useTheme, CacheProvider } from '../../../providers';
|
|
13
13
|
import { useDisplaySettings } from '../../../hooks/useDisplaySettings';
|
|
14
14
|
import { RecommendationProfileTracker } from '../../Trackers/Recommendation/ProfileTracker';
|
|
15
|
-
import {
|
|
15
|
+
import { ResultTracker } from '../../Trackers/ResultTracker';
|
|
16
16
|
const CSS = {
|
|
17
17
|
recommendation: ({ vertical }) => css({
|
|
18
18
|
height: vertical ? '100%' : undefined,
|
|
@@ -103,11 +103,11 @@ export const Recommendation = observer((properties) => {
|
|
|
103
103
|
jsx("div", { ...styling, className: classnames('ss__recommendation', className), ref: recsRef }, isVisible ? (jsx(RecommendationProfileTracker, { controller: controller },
|
|
104
104
|
title && jsx("h3", { className: "ss__recommendation__title" }, title),
|
|
105
105
|
jsx(Carousel, { prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, pagination: pagination, breakpoints: breakpoints, ...subProps.carousel, ...additionalProps, ...displaySettings }, Array.isArray(children) && children.length
|
|
106
|
-
? children.map((child, idx) => (jsx(
|
|
107
|
-
: resultsToRender.map((result) => (jsx(
|
|
106
|
+
? children.map((child, idx) => (jsx(ResultTracker, { controller: controller, result: resultsToRender[idx] }, child)))
|
|
107
|
+
: resultsToRender.map((result) => (jsx(ResultTracker, { controller: controller, result: result },
|
|
108
108
|
jsx(Result, { ...subProps.result, controller: controller, result: result }))))))) : (jsx(RecommendationProfileTracker, { controller: controller }, Array.isArray(children) && children.length
|
|
109
|
-
? children.map((child, idx) => (jsx(
|
|
109
|
+
? children.map((child, idx) => (jsx(ResultTracker, { controller: controller, result: resultsToRender[idx] },
|
|
110
110
|
jsx(Fragment, null))))
|
|
111
|
-
: resultsToRender.map((result) => (jsx(
|
|
111
|
+
: resultsToRender.map((result) => (jsx(ResultTracker, { controller: controller, result: result },
|
|
112
112
|
jsx(Fragment, null))))))))) : (jsx(Fragment, null));
|
|
113
113
|
});
|
|
@@ -15,7 +15,7 @@ export interface BundleSelectorProps extends ComponentProps {
|
|
|
15
15
|
seedText?: string;
|
|
16
16
|
seed?: boolean;
|
|
17
17
|
hideCheckboxes?: boolean;
|
|
18
|
-
onCheck?: () => void;
|
|
18
|
+
onCheck?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
|
|
19
19
|
icon?: string | Partial<IconProps> | boolean;
|
|
20
20
|
}
|
|
21
21
|
//# sourceMappingURL=BundleSelector.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BundleSelector.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/RecommendationBundle/BundleSelector.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAK9C,OAAO,EAAY,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAQ,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,eAAO,MAAM,cAAc,eAAyB,mBAAmB,KAAG,WAmDxE,CAAC;AAEH,MAAM,WAAW,sBAAsB;IACtC,IAAI,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CACjC;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"BundleSelector.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/RecommendationBundle/BundleSelector.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAK9C,OAAO,EAAY,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAQ,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,eAAO,MAAM,cAAc,eAAyB,mBAAmB,KAAG,WAmDxE,CAAC;AAEH,MAAM,WAAW,sBAAsB;IACtC,IAAI,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CACjC;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACjE,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;CAC7C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RecommendationBundle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/RecommendationBundle/RecommendationBundle.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAY,aAAa,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAIpF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAI9E,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAyG7D,eAAO,MAAM,oBAAoB,eAAyB,yBAAyB,KAAG,
|
|
1
|
+
{"version":3,"file":"RecommendationBundle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/RecommendationBundle/RecommendationBundle.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAY,aAAa,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAIpF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAI9E,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAyG7D,eAAO,MAAM,oBAAoB,eAAyB,yBAAyB,KAAG,WA8fpF,CAAC;AAEH,KAAK,mBAAmB,GAAG;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;AAE3B,MAAM,WAAW,yBAA0B,SAAQ,cAAc;IAChE,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,wBAAwB,CAAC;IACrC,WAAW,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IACvD,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,eAAe,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,UAAU,CAAC,EAAE;QACZ,OAAO,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACF"}
|
|
@@ -11,7 +11,7 @@ import { cloneWithProps, defined } from '../../../utilities';
|
|
|
11
11
|
import { useTheme, CacheProvider } from '../../../providers';
|
|
12
12
|
import { useDisplaySettings } from '../../../hooks/useDisplaySettings';
|
|
13
13
|
import { RecommendationProfileTracker } from '../../Trackers/Recommendation/ProfileTracker';
|
|
14
|
-
import {
|
|
14
|
+
import { ResultTracker } from '../../Trackers/ResultTracker';
|
|
15
15
|
import { BundleSelector } from './BundleSelector';
|
|
16
16
|
import { BundledCTA } from './BundleCTA';
|
|
17
17
|
import { useIntersection } from '../../../hooks';
|
|
@@ -276,7 +276,7 @@ export const RecommendationBundle = observer((properties) => {
|
|
|
276
276
|
};
|
|
277
277
|
const addToCart = (e) => {
|
|
278
278
|
// add to cart tracking
|
|
279
|
-
controller.track.
|
|
279
|
+
controller.track.bundle.addToCart(selectedItems);
|
|
280
280
|
//call the function passed
|
|
281
281
|
onAddToCart && onAddToCart(e, selectedItems);
|
|
282
282
|
};
|
|
@@ -311,8 +311,11 @@ export const RecommendationBundle = observer((properties) => {
|
|
|
311
311
|
}) },
|
|
312
312
|
carouselEnabled ? (jsx(Fragment, null,
|
|
313
313
|
!seedInCarousel && !hideSeed && (jsx("div", { className: "ss__recommendation-bundle__wrapper__seed-container" },
|
|
314
|
-
jsx(
|
|
315
|
-
jsx(BundleSelector, { seedText: seedText, seed: true, onCheck: () =>
|
|
314
|
+
jsx(ResultTracker, { controller: controller, result: seed, track: { impression: false } },
|
|
315
|
+
jsx(BundleSelector, { seedText: seedText, seed: true, onCheck: (e) => {
|
|
316
|
+
e.stopPropagation();
|
|
317
|
+
onProductSelect(seed);
|
|
318
|
+
}, checked: selectedItems.findIndex((item) => item.id == seed.id) > -1, icon: separatorIcon, hideCheckboxes: hideCheckboxes, theme: props.theme, ref: seedRef }, resultComponent ? (cloneWithProps(resultComponent, {
|
|
316
319
|
result: seed,
|
|
317
320
|
seed: true,
|
|
318
321
|
selected: selectedItems.findIndex((item) => item.id == seed.id) > -1,
|
|
@@ -325,35 +328,50 @@ export const RecommendationBundle = observer((properties) => {
|
|
|
325
328
|
.map((result, idx) => {
|
|
326
329
|
const selected = selectedItems.findIndex((item) => item.id == result.id) > -1;
|
|
327
330
|
if (idx == 0 && !hideSeed) {
|
|
328
|
-
return (jsx(
|
|
329
|
-
jsx(BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: () =>
|
|
331
|
+
return (jsx(ResultTracker, { controller: controller, result: result, track: { impression: false } },
|
|
332
|
+
jsx(BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: (e) => {
|
|
333
|
+
e.stopPropagation();
|
|
334
|
+
onProductSelect(result);
|
|
335
|
+
}, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: true, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
|
|
330
336
|
}
|
|
331
337
|
else {
|
|
332
|
-
return (jsx(
|
|
333
|
-
jsx(BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: () =>
|
|
338
|
+
return (jsx(ResultTracker, { controller: controller, result: result },
|
|
339
|
+
jsx(BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: (e) => {
|
|
340
|
+
e.stopPropagation();
|
|
341
|
+
onProductSelect(result);
|
|
342
|
+
}, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme, className: idx + 1 == resultsToRender.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '' }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: false, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
|
|
334
343
|
}
|
|
335
344
|
})
|
|
336
345
|
: resultsToRender
|
|
337
346
|
.filter((result, idx) => idx !== 0)
|
|
338
347
|
.map((result, idx, results) => {
|
|
339
348
|
const selected = selectedItems.findIndex((item) => item.id == result.id) > -1;
|
|
340
|
-
return (jsx(
|
|
341
|
-
jsx(BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: () =>
|
|
349
|
+
return (jsx(ResultTracker, { controller: controller, result: result },
|
|
350
|
+
jsx(BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: (e) => {
|
|
351
|
+
e.stopPropagation();
|
|
352
|
+
onProductSelect(result);
|
|
353
|
+
}, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme, className: idx + 1 == results.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '' }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: false, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
|
|
342
354
|
}))))) : (resultsToRender
|
|
343
355
|
.filter((result, idx) => (hideSeed && idx == 0 ? false : true))
|
|
344
356
|
.map((result, idx) => {
|
|
345
357
|
const selected = selectedItems.findIndex((item) => item.id == result.id) > -1;
|
|
346
358
|
if (idx == 0 && !hideSeed) {
|
|
347
|
-
return (jsx(
|
|
348
|
-
jsx(BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: () =>
|
|
359
|
+
return (jsx(ResultTracker, { controller: controller, result: result, track: { impression: false } },
|
|
360
|
+
jsx(BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: (e) => {
|
|
361
|
+
e.stopPropagation();
|
|
362
|
+
onProductSelect(result);
|
|
363
|
+
}, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: true, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
|
|
349
364
|
}
|
|
350
365
|
else {
|
|
351
|
-
return (jsx(
|
|
352
|
-
jsx(BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: () =>
|
|
366
|
+
return (jsx(ResultTracker, { controller: controller, result: result },
|
|
367
|
+
jsx(BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: (e) => {
|
|
368
|
+
e.stopPropagation();
|
|
369
|
+
onProductSelect(result);
|
|
370
|
+
}, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme, className: idx + 1 == resultsToRender.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '' }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: false, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
|
|
353
371
|
}
|
|
354
372
|
})),
|
|
355
373
|
ctaInline && (jsx(BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCart: (e) => addToCart(e), ctaButtonText: ctaButtonText, ctaButtonSuccessText: ctaButtonSuccessText, ctaButtonSuccessTimeout: ctaButtonSuccessTimeout, ctaIcon: ctaIcon }))),
|
|
356
|
-
!ctaInline && (jsx(BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCart: (e) => addToCart(e), ctaButtonText: ctaButtonText, ctaButtonSuccessText: ctaButtonSuccessText, ctaButtonSuccessTimeout: ctaButtonSuccessTimeout, ctaIcon: ctaIcon })))) : (jsx(RecommendationProfileTracker, { controller: controller }, resultsToRender.map((result) => (jsx(
|
|
374
|
+
!ctaInline && (jsx(BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCart: (e) => addToCart(e), ctaButtonText: ctaButtonText, ctaButtonSuccessText: ctaButtonSuccessText, ctaButtonSuccessTimeout: ctaButtonSuccessTimeout, ctaIcon: ctaIcon })))) : (jsx(RecommendationProfileTracker, { controller: controller }, resultsToRender.map((result) => (jsx(ResultTracker, { controller: controller, result: result },
|
|
357
375
|
jsx(Fragment, null))))))))) : (jsx(Fragment, null));
|
|
358
376
|
return jsx(Fragment, null);
|
|
359
377
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Results.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Results/Results.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,iBAAiB,EAAmB,MAAM,+BAA+B,CAAC;AAIxF,OAAO,EAAE,cAAc,EAAU,UAAU,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Results.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Results/Results.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,iBAAiB,EAAmB,MAAM,+BAA+B,CAAC;AAIxF,OAAO,EAAE,cAAc,EAAU,UAAU,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AA+BlG,eAAO,MAAM,OAAO,eAAyB,WAAW,KAAG,WA8GzD,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}
|
|
@@ -11,6 +11,7 @@ import { Layout } from '../../../types';
|
|
|
11
11
|
import { defined } from '../../../utilities';
|
|
12
12
|
import { useTheme, CacheProvider } from '../../../providers';
|
|
13
13
|
import { useDisplaySettings } from '../../../hooks/useDisplaySettings';
|
|
14
|
+
import { ResultTracker } from '../../Trackers/ResultTracker';
|
|
14
15
|
const CSS = {
|
|
15
16
|
results: ({ columns, gapSize }) => css({
|
|
16
17
|
display: 'flex',
|
|
@@ -22,14 +23,6 @@ const CSS = {
|
|
|
22
23
|
boxSizing: 'border-box',
|
|
23
24
|
flex: '0 1 auto',
|
|
24
25
|
width: `calc(${100 / columns}% - (${columns - 1} * ${gapSize} / ${columns} ) )`,
|
|
25
|
-
marginRight: gapSize,
|
|
26
|
-
marginBottom: gapSize,
|
|
27
|
-
[`&:nth-of-type(${columns}n)`]: {
|
|
28
|
-
marginRight: '0',
|
|
29
|
-
},
|
|
30
|
-
[`&:nth-last-of-type(-n+${columns})`]: {
|
|
31
|
-
marginBottom: '0',
|
|
32
|
-
},
|
|
33
26
|
},
|
|
34
27
|
'@supports (display: grid)': {
|
|
35
28
|
display: 'grid',
|
|
@@ -115,12 +108,12 @@ export const Results = observer((properties) => {
|
|
|
115
108
|
styling.css = [style];
|
|
116
109
|
}
|
|
117
110
|
return results?.length ? (jsx(CacheProvider, null,
|
|
118
|
-
jsx("div", { ...styling, className: classnames('ss__results', `ss__results-${props.layout}`, className) }, results.map((result) => (() => {
|
|
111
|
+
jsx("div", { ...styling, className: classnames('ss__results', `ss__results-${props.layout}`, className) }, results.map((result) => (jsx(ResultTracker, { result: result, controller: controller }, (() => {
|
|
119
112
|
switch (result.type) {
|
|
120
113
|
case ContentType.BANNER:
|
|
121
114
|
return jsx(InlineBanner, { ...subProps.inlineBanner, key: result.id, banner: result, layout: props.layout });
|
|
122
115
|
default:
|
|
123
116
|
return (jsx(Result, { key: result.id, ...subProps.result, result: result, layout: props.layout, controller: controller }));
|
|
124
117
|
}
|
|
125
|
-
})())))) : (jsx(Fragment, null));
|
|
118
|
+
})())))))) : (jsx(Fragment, null));
|
|
126
119
|
});
|
package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.d.ts
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/** @jsx jsx */
|
|
3
|
+
import { ComponentChildren } from 'preact';
|
|
2
4
|
import type { RecommendationController } from '@searchspring/snap-controller';
|
|
3
5
|
import { ComponentProps } from '../../../../types';
|
|
4
6
|
export declare const RecommendationProfileTracker: (properties: RecommendationProfileTrackerProps) => JSX.Element;
|
|
5
7
|
export interface RecommendationProfileTrackerProps extends ComponentProps {
|
|
6
|
-
children:
|
|
8
|
+
children: ComponentChildren;
|
|
7
9
|
controller: RecommendationController;
|
|
8
10
|
}
|
|
9
11
|
//# sourceMappingURL=RecommendationProfileTracker.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RecommendationProfileTracker.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"RecommendationProfileTracker.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAE,iBAAiB,EAA6B,MAAM,QAAQ,CAAC;AAItE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAc,MAAM,mBAAmB,CAAC;AAO/D,eAAO,MAAM,4BAA4B,eAAyB,iCAAiC,KAAG,WA8BpG,CAAC;AAEH,MAAM,WAAW,iCAAkC,SAAQ,cAAc;IACxE,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,UAAU,EAAE,wBAAwB,CAAC;CACrC"}
|
package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.js
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
2
|
import { Fragment, toChildArray } from 'preact';
|
|
3
3
|
import { jsx, css } from '@emotion/react';
|
|
4
|
-
import { useRef } from 'preact/hooks';
|
|
5
4
|
import { observer } from 'mobx-react';
|
|
6
5
|
import { useTheme } from '../../../../providers';
|
|
7
|
-
import { useIntersection } from '../../../../hooks';
|
|
8
6
|
import classnames from 'classnames';
|
|
9
7
|
const CSS = {
|
|
10
8
|
RecommendationProfileTracker: () => css({}),
|
|
@@ -19,16 +17,8 @@ export const RecommendationProfileTracker = observer((properties) => {
|
|
|
19
17
|
...properties,
|
|
20
18
|
...properties.theme?.components?.RecommendationProfileTracker,
|
|
21
19
|
};
|
|
22
|
-
const { children,
|
|
20
|
+
const { children, className, style, disableStyles } = props;
|
|
23
21
|
const childs = toChildArray(children);
|
|
24
|
-
// do impression tracking for "profile"
|
|
25
|
-
const componentRef = useRef(null);
|
|
26
|
-
const inViewport = useIntersection(componentRef, '0px');
|
|
27
|
-
if (inViewport) {
|
|
28
|
-
controller.track.impression();
|
|
29
|
-
}
|
|
30
|
-
// takes care of rendering profile
|
|
31
|
-
childs.length && controller.track.render();
|
|
32
22
|
const styling = {};
|
|
33
23
|
if (!disableStyles) {
|
|
34
24
|
styling.css = [CSS.RecommendationProfileTracker(), style];
|
|
@@ -36,5 +26,5 @@ export const RecommendationProfileTracker = observer((properties) => {
|
|
|
36
26
|
else if (style) {
|
|
37
27
|
styling.css = [style];
|
|
38
28
|
}
|
|
39
|
-
return childs.length ? (jsx("div", { className: classnames('ss__recommendation-profile-tracker', className),
|
|
29
|
+
return childs.length ? (jsx("div", { className: classnames('ss__recommendation-profile-tracker', className), ...styling }, children)) : (jsx(Fragment, null));
|
|
40
30
|
});
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
/** @jsx jsx */
|
|
3
|
+
import { ComponentChildren } from 'preact';
|
|
4
|
+
import type { AutocompleteController, RecommendationController, SearchController } from '@searchspring/snap-controller';
|
|
5
|
+
import { ComponentProps } from '../../../types';
|
|
6
|
+
import type { Banner, Product } from '@searchspring/snap-store-mobx';
|
|
7
|
+
export declare const ResultTracker: (properties: ResultTrackerProps) => JSX.Element;
|
|
8
|
+
export interface ResultTrackerProps extends ComponentProps {
|
|
9
|
+
children: ComponentChildren;
|
|
10
|
+
result: Product | Banner;
|
|
11
|
+
controller: SearchController | AutocompleteController | RecommendationController;
|
|
12
|
+
track?: {
|
|
13
|
+
render?: boolean;
|
|
14
|
+
impression?: boolean;
|
|
15
|
+
click?: boolean;
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
//# sourceMappingURL=ResultTracker.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ResultTracker.d.ts","sourceRoot":"","sources":["../../../../../src/components/Trackers/ResultTracker/ResultTracker.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAM9C,OAAO,KAAK,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAOrE,eAAO,MAAM,aAAa,eAAyB,kBAAkB,KAAG,WA+DtE,CAAC;AAEH,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACzD,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IACjF,KAAK,CAAC,EAAE;QACP,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,KAAK,CAAC,EAAE,OAAO,CAAC;KAChB,CAAC;CACF"}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { jsx, css } from '@emotion/react';
|
|
2
|
+
import { useRef, useEffect } from 'preact/hooks';
|
|
3
|
+
import { observer } from 'mobx-react';
|
|
4
|
+
import { useTheme } from '../../../providers';
|
|
5
|
+
import { useIntersection } from '../../../hooks';
|
|
6
|
+
import classnames from 'classnames';
|
|
7
|
+
const CSS = {
|
|
8
|
+
ResultTracker: () => css({}),
|
|
9
|
+
};
|
|
10
|
+
export const ResultTracker = observer((properties) => {
|
|
11
|
+
const globalTheme = useTheme();
|
|
12
|
+
const defaultTrack = {
|
|
13
|
+
render: true,
|
|
14
|
+
impression: true,
|
|
15
|
+
click: true,
|
|
16
|
+
};
|
|
17
|
+
const props = {
|
|
18
|
+
// default props
|
|
19
|
+
// global theme
|
|
20
|
+
...globalTheme?.components?.ResultTracker,
|
|
21
|
+
// props
|
|
22
|
+
...properties,
|
|
23
|
+
...properties.theme?.components?.ResultTracker,
|
|
24
|
+
};
|
|
25
|
+
const { children, result, track, controller, className, disableStyles, style } = props;
|
|
26
|
+
const mergedTrack = {
|
|
27
|
+
...defaultTrack,
|
|
28
|
+
...track,
|
|
29
|
+
};
|
|
30
|
+
const resultRef = useRef(null);
|
|
31
|
+
const resultInViewport = useIntersection(resultRef, '0px', true);
|
|
32
|
+
useEffect(() => {
|
|
33
|
+
if (mergedTrack.render) {
|
|
34
|
+
if (result.type === 'product') {
|
|
35
|
+
controller?.track?.product?.render(result);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}, [result]);
|
|
39
|
+
if (resultInViewport && mergedTrack.impression) {
|
|
40
|
+
if (result.type === 'product' && controller?.track) {
|
|
41
|
+
controller?.track?.product?.impression(result);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
const styling = {};
|
|
45
|
+
if (!disableStyles) {
|
|
46
|
+
styling.css = [CSS.ResultTracker(), style];
|
|
47
|
+
}
|
|
48
|
+
else if (style) {
|
|
49
|
+
styling.css = [style];
|
|
50
|
+
}
|
|
51
|
+
return (jsx("div", { className: classnames('ss__result-tracker', `ss__${controller?.type}-result-tracker`, className), onClick: (e) => {
|
|
52
|
+
if (mergedTrack.click) {
|
|
53
|
+
if (result.type === 'product') {
|
|
54
|
+
controller?.track?.product?.click(e, result);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}, ref: resultRef, ...styling }, children));
|
|
58
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Trackers/ResultTracker/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './ResultTracker';
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -13,8 +13,6 @@ export * from './components/Atoms/Merchandising';
|
|
|
13
13
|
export * from './components/Atoms/Overlay';
|
|
14
14
|
export * from './components/Atoms/Price';
|
|
15
15
|
export * from './components/Atoms/Skeleton';
|
|
16
|
-
export * from './components/Trackers/Recommendation/ResultTracker';
|
|
17
|
-
export * from './components/Trackers/Recommendation/ProfileTracker';
|
|
18
16
|
export * from './components/Molecules/CalloutBadge';
|
|
19
17
|
export * from './components/Molecules/Carousel';
|
|
20
18
|
export * from './components/Molecules/Checkbox';
|
|
@@ -42,6 +40,9 @@ export * from './components/Organisms/FilterSummary';
|
|
|
42
40
|
export * from './components/Organisms/Recommendation';
|
|
43
41
|
export * from './components/Organisms/RecommendationBundle';
|
|
44
42
|
export * from './components/Organisms/Results';
|
|
43
|
+
export * from './components/Trackers/Recommendation/ProfileTracker';
|
|
44
|
+
export * from './components/Trackers/ResultTracker';
|
|
45
|
+
export { ResultTracker as RecommendationResultTracker, ResultTrackerProps as RecommendationResultTrackerProps, } from './components/Trackers/ResultTracker';
|
|
45
46
|
export * from './hooks';
|
|
46
47
|
export * from './providers';
|
|
47
48
|
export * from './toolbox';
|
package/dist/esm/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAG5C,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,qCAAqC,CAAC;AACpD,cAAc,yCAAyC,CAAC;AACxD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,yCAAyC,CAAC;AACxD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,oCAAoC,CAAC;AACnD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AAGxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sCAAsC,CAAC;AACrD,cAAc,uCAAuC,CAAC;AACtD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,gCAAgC,CAAC;AAG/C,cAAc,qDAAqD,CAAC;AACpE,cAAc,qCAAqC,CAAC;AACpD,OAAO,EACN,aAAa,IAAI,2BAA2B,EAC5C,kBAAkB,IAAI,gCAAgC,GACtD,MAAM,qCAAqC,CAAC;AAG7C,cAAc,SAAS,CAAC;AAGxB,cAAc,aAAa,CAAC;AAG5B,cAAc,WAAW,CAAC"}
|
package/dist/esm/index.js
CHANGED
|
@@ -14,8 +14,6 @@ export * from './components/Atoms/Merchandising';
|
|
|
14
14
|
export * from './components/Atoms/Overlay';
|
|
15
15
|
export * from './components/Atoms/Price';
|
|
16
16
|
export * from './components/Atoms/Skeleton';
|
|
17
|
-
export * from './components/Trackers/Recommendation/ResultTracker';
|
|
18
|
-
export * from './components/Trackers/Recommendation/ProfileTracker';
|
|
19
17
|
// MOLECULES
|
|
20
18
|
export * from './components/Molecules/CalloutBadge';
|
|
21
19
|
export * from './components/Molecules/Carousel';
|
|
@@ -45,6 +43,10 @@ export * from './components/Organisms/FilterSummary';
|
|
|
45
43
|
export * from './components/Organisms/Recommendation';
|
|
46
44
|
export * from './components/Organisms/RecommendationBundle';
|
|
47
45
|
export * from './components/Organisms/Results';
|
|
46
|
+
// TRACKERS
|
|
47
|
+
export * from './components/Trackers/Recommendation/ProfileTracker';
|
|
48
|
+
export * from './components/Trackers/ResultTracker';
|
|
49
|
+
export { ResultTracker as RecommendationResultTracker, } from './components/Trackers/ResultTracker';
|
|
48
50
|
// HOOKS
|
|
49
51
|
export * from './hooks';
|
|
50
52
|
// PROVIDERS
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@searchspring/snap-preact-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.65.1",
|
|
4
4
|
"description": "Snap Preact Component Library",
|
|
5
5
|
"author": "Searchspring",
|
|
6
6
|
"license": "MIT",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@cypress/react": "^8.0.0",
|
|
31
31
|
"@emotion/react": "11.9.0",
|
|
32
|
-
"@searchspring/snap-toolbox": "^0.
|
|
32
|
+
"@searchspring/snap-toolbox": "^0.65.1",
|
|
33
33
|
"classnames": "^2.3.2",
|
|
34
34
|
"cypress": "^13.7.1",
|
|
35
35
|
"cypress-wait-until": "^1.7.2",
|
|
@@ -52,14 +52,14 @@
|
|
|
52
52
|
"@babel/preset-env": "^7.21.4",
|
|
53
53
|
"@babel/preset-react": "^7.18.6",
|
|
54
54
|
"@babel/runtime": "^7.21.0",
|
|
55
|
-
"@searchspring/snap-client": "^0.
|
|
56
|
-
"@searchspring/snap-controller": "^0.
|
|
57
|
-
"@searchspring/snap-event-manager": "^0.
|
|
58
|
-
"@searchspring/snap-logger": "^0.
|
|
59
|
-
"@searchspring/snap-profiler": "^0.
|
|
60
|
-
"@searchspring/snap-store-mobx": "^0.
|
|
61
|
-
"@searchspring/snap-tracker": "^0.
|
|
62
|
-
"@searchspring/snap-url-manager": "^0.
|
|
55
|
+
"@searchspring/snap-client": "^0.65.1",
|
|
56
|
+
"@searchspring/snap-controller": "^0.65.1",
|
|
57
|
+
"@searchspring/snap-event-manager": "^0.65.1",
|
|
58
|
+
"@searchspring/snap-logger": "^0.65.1",
|
|
59
|
+
"@searchspring/snap-profiler": "^0.65.1",
|
|
60
|
+
"@searchspring/snap-store-mobx": "^0.65.1",
|
|
61
|
+
"@searchspring/snap-tracker": "^0.65.1",
|
|
62
|
+
"@searchspring/snap-url-manager": "^0.65.1",
|
|
63
63
|
"@storybook/addon-actions": "6.4.22",
|
|
64
64
|
"@storybook/addon-controls": "6.4.22",
|
|
65
65
|
"@storybook/addon-docs": "6.4.22",
|
|
@@ -84,5 +84,5 @@
|
|
|
84
84
|
"webpack-merge": "^5.8.0"
|
|
85
85
|
},
|
|
86
86
|
"sideEffects": false,
|
|
87
|
-
"gitHead": "
|
|
87
|
+
"gitHead": "cd33cd87ad8d51302000b31bce6aa90b4b25ba89"
|
|
88
88
|
}
|
package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import type { RecommendationController } from '@searchspring/snap-controller';
|
|
3
|
-
import { ComponentProps } from '../../../../types';
|
|
4
|
-
import type { Product } from '@searchspring/snap-store-mobx';
|
|
5
|
-
export declare const RecommendationResultTracker: (properties: RecommendationResultTrackerProps) => JSX.Element;
|
|
6
|
-
export interface RecommendationResultTrackerProps extends ComponentProps {
|
|
7
|
-
children: any;
|
|
8
|
-
result: Product;
|
|
9
|
-
controller: RecommendationController;
|
|
10
|
-
track?: {
|
|
11
|
-
impression?: boolean;
|
|
12
|
-
click?: boolean;
|
|
13
|
-
};
|
|
14
|
-
}
|
|
15
|
-
//# sourceMappingURL=RecommendationResultTracker.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RecommendationResultTracker.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.tsx"],"names":[],"mappings":";AAOA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAc,MAAM,mBAAmB,CAAC;AAC/D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAO7D,eAAO,MAAM,2BAA2B,eAAyB,gCAAgC,KAAG,WAwDlG,CAAC;AAEH,MAAM,WAAW,gCAAiC,SAAQ,cAAc;IACvE,QAAQ,EAAE,GAAG,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,wBAAwB,CAAC;IACrC,KAAK,CAAC,EAAE;QACP,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,KAAK,CAAC,EAAE,OAAO,CAAC;KAChB,CAAC;CACF"}
|
package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.js
DELETED
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.RecommendationResultTracker = void 0;
|
|
18
|
-
var react_1 = require("@emotion/react");
|
|
19
|
-
var hooks_1 = require("preact/hooks");
|
|
20
|
-
var mobx_react_1 = require("mobx-react");
|
|
21
|
-
var providers_1 = require("../../../../providers");
|
|
22
|
-
var hooks_2 = require("../../../../hooks");
|
|
23
|
-
var classnames_1 = __importDefault(require("classnames"));
|
|
24
|
-
var CSS = {
|
|
25
|
-
RecommendationResultTracker: function () { return (0, react_1.css)({}); },
|
|
26
|
-
};
|
|
27
|
-
exports.RecommendationResultTracker = (0, mobx_react_1.observer)(function (properties) {
|
|
28
|
-
var _a, _b, _c;
|
|
29
|
-
var globalTheme = (0, providers_1.useTheme)();
|
|
30
|
-
var defaultTrack = {
|
|
31
|
-
impression: true,
|
|
32
|
-
click: true,
|
|
33
|
-
};
|
|
34
|
-
var props = __assign(__assign(__assign({}, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.RecommendationResultTracker), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.RecommendationResultTracker);
|
|
35
|
-
var children = props.children, result = props.result, track = props.track, controller = props.controller, className = props.className, disableStyles = props.disableStyles, style = props.style;
|
|
36
|
-
var mergedTrack = __assign(__assign({}, defaultTrack), track);
|
|
37
|
-
var resultRef = (0, hooks_1.useRef)(null);
|
|
38
|
-
var resultInViewport = (0, hooks_2.useIntersection)(resultRef, '0px');
|
|
39
|
-
if (!controller.events.render) {
|
|
40
|
-
controller.log.warn('<RecommendationResultTracker> used without <RecommendationProfileTracker>');
|
|
41
|
-
}
|
|
42
|
-
controller.track.product.render(result);
|
|
43
|
-
if (resultInViewport && mergedTrack.impression) {
|
|
44
|
-
// intersection observer can trigger in any random order,
|
|
45
|
-
// so we need to check if profile impression has been sent and send if not.
|
|
46
|
-
if (!controller.events.impression) {
|
|
47
|
-
controller.track.impression();
|
|
48
|
-
}
|
|
49
|
-
controller.track.product.impression(result);
|
|
50
|
-
}
|
|
51
|
-
var styling = {};
|
|
52
|
-
if (!disableStyles) {
|
|
53
|
-
styling.css = [CSS.RecommendationResultTracker(), style];
|
|
54
|
-
}
|
|
55
|
-
else if (style) {
|
|
56
|
-
styling.css = [style];
|
|
57
|
-
}
|
|
58
|
-
return ((0, react_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__recommendation-result-tracker', className), onClick: function (e) { return mergedTrack.click && controller.track.product.click(e, result); }, ref: resultRef }, styling), children));
|
|
59
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Trackers/Recommendation/ResultTracker/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC"}
|
package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import type { RecommendationController } from '@searchspring/snap-controller';
|
|
3
|
-
import { ComponentProps } from '../../../../types';
|
|
4
|
-
import type { Product } from '@searchspring/snap-store-mobx';
|
|
5
|
-
export declare const RecommendationResultTracker: (properties: RecommendationResultTrackerProps) => JSX.Element;
|
|
6
|
-
export interface RecommendationResultTrackerProps extends ComponentProps {
|
|
7
|
-
children: any;
|
|
8
|
-
result: Product;
|
|
9
|
-
controller: RecommendationController;
|
|
10
|
-
track?: {
|
|
11
|
-
impression?: boolean;
|
|
12
|
-
click?: boolean;
|
|
13
|
-
};
|
|
14
|
-
}
|
|
15
|
-
//# sourceMappingURL=RecommendationResultTracker.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RecommendationResultTracker.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.tsx"],"names":[],"mappings":";AAOA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAc,MAAM,mBAAmB,CAAC;AAC/D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAO7D,eAAO,MAAM,2BAA2B,eAAyB,gCAAgC,KAAG,WAwDlG,CAAC;AAEH,MAAM,WAAW,gCAAiC,SAAQ,cAAc;IACvE,QAAQ,EAAE,GAAG,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,wBAAwB,CAAC;IACrC,KAAK,CAAC,EAAE;QACP,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,KAAK,CAAC,EAAE,OAAO,CAAC;KAChB,CAAC;CACF"}
|
package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.js
DELETED
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import { jsx, css } from '@emotion/react';
|
|
2
|
-
import { useRef } from 'preact/hooks';
|
|
3
|
-
import { observer } from 'mobx-react';
|
|
4
|
-
import { useTheme } from '../../../../providers';
|
|
5
|
-
import { useIntersection } from '../../../../hooks';
|
|
6
|
-
import classnames from 'classnames';
|
|
7
|
-
const CSS = {
|
|
8
|
-
RecommendationResultTracker: () => css({}),
|
|
9
|
-
};
|
|
10
|
-
export const RecommendationResultTracker = observer((properties) => {
|
|
11
|
-
const globalTheme = useTheme();
|
|
12
|
-
const defaultTrack = {
|
|
13
|
-
impression: true,
|
|
14
|
-
click: true,
|
|
15
|
-
};
|
|
16
|
-
const props = {
|
|
17
|
-
// default props
|
|
18
|
-
// global theme
|
|
19
|
-
...globalTheme?.components?.RecommendationResultTracker,
|
|
20
|
-
// props
|
|
21
|
-
...properties,
|
|
22
|
-
...properties.theme?.components?.RecommendationResultTracker,
|
|
23
|
-
};
|
|
24
|
-
const { children, result, track, controller, className, disableStyles, style } = props;
|
|
25
|
-
const mergedTrack = {
|
|
26
|
-
...defaultTrack,
|
|
27
|
-
...track,
|
|
28
|
-
};
|
|
29
|
-
const resultRef = useRef(null);
|
|
30
|
-
const resultInViewport = useIntersection(resultRef, '0px');
|
|
31
|
-
if (!controller.events.render) {
|
|
32
|
-
controller.log.warn('<RecommendationResultTracker> used without <RecommendationProfileTracker>');
|
|
33
|
-
}
|
|
34
|
-
controller.track.product.render(result);
|
|
35
|
-
if (resultInViewport && mergedTrack.impression) {
|
|
36
|
-
// intersection observer can trigger in any random order,
|
|
37
|
-
// so we need to check if profile impression has been sent and send if not.
|
|
38
|
-
if (!controller.events.impression) {
|
|
39
|
-
controller.track.impression();
|
|
40
|
-
}
|
|
41
|
-
controller.track.product.impression(result);
|
|
42
|
-
}
|
|
43
|
-
const styling = {};
|
|
44
|
-
if (!disableStyles) {
|
|
45
|
-
styling.css = [CSS.RecommendationResultTracker(), style];
|
|
46
|
-
}
|
|
47
|
-
else if (style) {
|
|
48
|
-
styling.css = [style];
|
|
49
|
-
}
|
|
50
|
-
return (jsx("div", { className: classnames('ss__recommendation-result-tracker', className), onClick: (e) => mergedTrack.click && controller.track.product.click(e, result), ref: resultRef, ...styling }, children));
|
|
51
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Trackers/Recommendation/ResultTracker/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './RecommendationResultTracker';
|