@searchspring/snap-preact-components 0.58.2 → 0.59.0

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.
Files changed (25) hide show
  1. package/dist/cjs/components/Molecules/Grid/Grid.js +5 -5
  2. package/dist/cjs/components/Molecules/List/List.js +4 -4
  3. package/dist/cjs/components/Molecules/Swatches/Swatches.js +5 -5
  4. package/dist/cjs/components/Organisms/Recommendation/Recommendation.d.ts +4 -0
  5. package/dist/cjs/components/Organisms/Recommendation/Recommendation.d.ts.map +1 -1
  6. package/dist/cjs/components/Organisms/Recommendation/Recommendation.js +20 -8
  7. package/dist/cjs/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts +5 -0
  8. package/dist/cjs/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts.map +1 -1
  9. package/dist/cjs/components/Organisms/RecommendationBundle/RecommendationBundle.js +63 -52
  10. package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts +4 -0
  11. package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts.map +1 -1
  12. package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.js +8 -3
  13. package/dist/esm/components/Molecules/Grid/Grid.js +1 -1
  14. package/dist/esm/components/Molecules/List/List.js +1 -1
  15. package/dist/esm/components/Molecules/Swatches/Swatches.js +1 -1
  16. package/dist/esm/components/Organisms/Recommendation/Recommendation.d.ts +4 -0
  17. package/dist/esm/components/Organisms/Recommendation/Recommendation.d.ts.map +1 -1
  18. package/dist/esm/components/Organisms/Recommendation/Recommendation.js +24 -8
  19. package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts +5 -0
  20. package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts.map +1 -1
  21. package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.js +67 -52
  22. package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts +4 -0
  23. package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts.map +1 -1
  24. package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.js +11 -3
  25. package/package.json +11 -11
package/dist/cjs/components/Molecules/Grid/Grid.js CHANGED
@@ -29,8 +29,8 @@ var preact_1 = require("preact");
29
29
  var react_1 = require("@emotion/react");
30
30
  var classnames_1 = __importDefault(require("classnames"));
31
31
  var providers_1 = require("../../../providers");
32
- var react_2 = require("react");
33
- var hooks_1 = require("../../../hooks");
32
+ var hooks_1 = require("preact/hooks");
33
+ var hooks_2 = require("../../../hooks");
34
34
  var Image_1 = require("../../Atoms/Image");
35
35
  var utilities_1 = require("../../../utilities");
36
36
  var snap_toolbox_1 = require("@searchspring/snap-toolbox");
@@ -155,7 +155,7 @@ function Grid(properties) {
155
155
  selected = [selected];
156
156
  }
157
157
  // selection state
158
- var _e = (0, react_2.useState)(selected || []), selection = _e[0], setSelection = _e[1];
158
+ var _e = (0, hooks_1.useState)(selected || []), selection = _e[0], setSelection = _e[1];
159
159
  var makeSelection = function (e, option) {
160
160
  if (multiSelect) {
161
161
  var newArray = void 0;
@@ -180,7 +180,7 @@ function Grid(properties) {
180
180
  };
181
181
  var limit = rows && columns ? columns * rows : options.length;
182
182
  var remainder = Math.max(0, options.length - (limit - (overflowButtonInGrid ? 1 : 0)));
183
- var _f = (0, react_2.useState)(remainder), limited = _f[0], setLimited = _f[1];
183
+ var _f = (0, hooks_1.useState)(remainder), limited = _f[0], setLimited = _f[1];
184
184
  var OverflowButtonElem = function () {
185
185
  var showButton = hideShowLess ? (!limited ? false : true) : true;
186
186
  return showButton && remainder > 0 && options.length !== limit ? ((0, react_1.jsx)("div", { className: "ss__grid__show-more-wrapper ".concat(overflowButtonInGrid ? 'ss__grid__option' : ''), onClick: function (e) {
@@ -199,7 +199,7 @@ function Grid(properties) {
199
199
  'ss__grid__option--selected': selected,
200
200
  'ss__grid__option--disabled': option === null || option === void 0 ? void 0 : option.disabled,
201
201
  'ss__grid__option--unavailable': (option === null || option === void 0 ? void 0 : option.available) === false,
202
- }), style: { background: option.background ? option.background : option.backgroundImageUrl ? undefined : option.value }, onClick: function (e) { return !disabled && !(option === null || option === void 0 ? void 0 : option.disabled) && makeSelection(e, option); }, ref: function (e) { return (0, hooks_1.useA11y)(e); }, title: option.label, role: "option", "aria-selected": selected },
202
+ }), style: { background: option.background ? option.background : option.backgroundImageUrl ? undefined : option.value }, onClick: function (e) { return !disabled && !(option === null || option === void 0 ? void 0 : option.disabled) && makeSelection(e, option); }, ref: function (e) { return (0, hooks_2.useA11y)(e); }, title: option.label, role: "option", "aria-selected": selected },
203
203
  !option.background && option.backgroundImageUrl ? ((0, react_1.jsx)(Image_1.Image, __assign({}, subProps.image, { src: option.backgroundImageUrl, alt: option.label || option.value.toString() }))) : ((0, react_1.jsx)(preact_1.Fragment, null)),
204
204
  !hideLabels ? (0, react_1.jsx)("label", { className: "ss__grid__option__label" }, option.label || option.value) : (0, react_1.jsx)(preact_1.Fragment, null)));
205
205
  }
package/dist/cjs/components/Molecules/List/List.js CHANGED
@@ -30,9 +30,9 @@ var react_1 = require("@emotion/react");
30
30
  var classnames_1 = __importDefault(require("classnames"));
31
31
  var providers_1 = require("../../../providers");
32
32
  var utilities_1 = require("../../../utilities");
33
- var react_2 = require("react");
33
+ var hooks_1 = require("preact/hooks");
34
34
  var Checkbox_1 = require("../Checkbox");
35
- var hooks_1 = require("../../../hooks");
35
+ var hooks_2 = require("../../../hooks");
36
36
  var Icon_1 = require("../../Atoms/Icon");
37
37
  var snap_toolbox_1 = require("@searchspring/snap-toolbox");
38
38
  var CSS = {
@@ -112,7 +112,7 @@ function List(properties) {
112
112
  selected = [selected];
113
113
  }
114
114
  // selection state
115
- var _d = (0, react_2.useState)(selected || []), selection = _d[0], setSelection = _d[1];
115
+ var _d = (0, hooks_1.useState)(selected || []), selection = _d[0], setSelection = _d[1];
116
116
  var makeSelection = function (e, option) {
117
117
  var newArray;
118
118
  if (multiSelect) {
@@ -149,7 +149,7 @@ function List(properties) {
149
149
  'ss__list__option--selected': selected,
150
150
  'ss__list__option--disabled': option === null || option === void 0 ? void 0 : option.disabled,
151
151
  'ss__list__option--unavailable': (option === null || option === void 0 ? void 0 : option.available) === false,
152
- }), ref: function (e) { return (0, hooks_1.useA11y)(e); }, onClick: function (e) { return !disabled && !(option === null || option === void 0 ? void 0 : option.disabled) && makeSelection(e, option); }, title: option.label, role: "option", "aria-selected": selected },
152
+ }), ref: function (e) { return (0, hooks_2.useA11y)(e); }, onClick: function (e) { return !disabled && !(option === null || option === void 0 ? void 0 : option.disabled) && makeSelection(e, option); }, title: option.label, role: "option", "aria-selected": selected },
153
153
  !hideOptionCheckboxes && (0, react_1.jsx)(Checkbox_1.Checkbox, __assign({}, subProps.checkbox, { checked: selected, disableA11y: true })),
154
154
  option.icon && !hideOptionIcons && ((0, react_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof option.icon == 'string' ? { icon: option.icon } : option.icon)))),
155
155
  !hideOptionLabels && (option.label || !option.icon) && ((0, react_1.jsx)("label", { className: "ss__list__option__label" }, option.label || option.value))));
package/dist/cjs/components/Molecules/Swatches/Swatches.js CHANGED
@@ -20,8 +20,8 @@ var preact_1 = require("preact");
20
20
  var react_1 = require("@emotion/react");
21
21
  var classnames_1 = __importDefault(require("classnames"));
22
22
  var providers_1 = require("../../../providers");
23
- var react_2 = require("react");
24
- var hooks_1 = require("../../../hooks");
23
+ var hooks_1 = require("preact/hooks");
24
+ var hooks_2 = require("../../../hooks");
25
25
  var Carousel_1 = require("../Carousel");
26
26
  var utilities_1 = require("../../../utilities");
27
27
  var Grid_1 = require("../Grid");
@@ -104,7 +104,7 @@ function Swatches(properties) {
104
104
  // default props
105
105
  type: 'carousel', hideLabels: true }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.swatches), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.swatches);
106
106
  var breakpoints = props.breakpoints || (props.type == 'carousel' ? defaultCarouselBreakpoints : {});
107
- var displaySettings = (0, hooks_1.useDisplaySettings)(breakpoints);
107
+ var displaySettings = (0, hooks_2.useDisplaySettings)(breakpoints);
108
108
  if (displaySettings && Object.keys(displaySettings).length) {
109
109
  var theme_1 = (0, deepmerge_1.default)((props === null || props === void 0 ? void 0 : props.theme) || {}, (displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.theme) || {}, { arrayMerge: function (destinationArray, sourceArray) { return sourceArray; } });
110
110
  props = __assign(__assign(__assign({}, props), displaySettings), { theme: theme_1 });
@@ -143,7 +143,7 @@ function Swatches(properties) {
143
143
  styling.css = [style];
144
144
  }
145
145
  // selection state
146
- var _g = (0, react_2.useState)(selected || undefined), selection = _g[0], setSelection = _g[1];
146
+ var _g = (0, hooks_1.useState)(selected || undefined), selection = _g[0], setSelection = _g[1];
147
147
  var makeSelection = function (e, option) {
148
148
  if (onSelect) {
149
149
  onSelect(e, option);
@@ -158,7 +158,7 @@ function Swatches(properties) {
158
158
  'ss__swatches__carousel__swatch--selected': selected,
159
159
  'ss__swatches__carousel__swatch--disabled': option === null || option === void 0 ? void 0 : option.disabled,
160
160
  'ss__swatches__carousel__swatch--unavailable': (option === null || option === void 0 ? void 0 : option.available) === false,
161
- }), title: label, style: { background: option.background ? option.background : option.backgroundImageUrl ? "" : option.value }, onClick: function (e) { return !disabled && !(option === null || option === void 0 ? void 0 : option.disabled) && makeSelection(e, option); }, ref: function (e) { return (0, hooks_1.useA11y)(e); }, role: "option", "aria-selected": selected },
161
+ }), title: label, style: { background: option.background ? option.background : option.backgroundImageUrl ? "" : option.value }, onClick: function (e) { return !disabled && !(option === null || option === void 0 ? void 0 : option.disabled) && makeSelection(e, option); }, ref: function (e) { return (0, hooks_2.useA11y)(e); }, role: "option", "aria-selected": selected },
162
162
  !option.background && option.backgroundImageUrl ? ((0, react_1.jsx)(Image_1.Image, __assign({}, subProps.image, { src: option.backgroundImageUrl, alt: option.label || option.value.toString() }))) : ((0, react_1.jsx)(preact_1.Fragment, null)),
163
163
  !hideLabels && (0, react_1.jsx)("span", { className: "ss__swatches__carousel__swatch__value" }, label || option.value)));
164
164
  }))) : ((0, react_1.jsx)(Grid_1.Grid, __assign({}, subProps.grid, { options: options, onSelect: function (e, option) {
package/dist/cjs/components/Organisms/Recommendation/Recommendation.d.ts CHANGED
@@ -17,5 +17,9 @@ export interface RecommendationProps extends ComponentProps {
17
17
  controller: RecommendationController;
18
18
  children?: ComponentChildren;
19
19
  vertical?: boolean;
20
+ lazyRender?: {
21
+ enabled: boolean;
22
+ offset?: string;
23
+ };
20
24
  }
21
25
  //# sourceMappingURL=Recommendation.d.ts.map
package/dist/cjs/components/Organisms/Recommendation/Recommendation.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAMxD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAM7D,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAe9E,eAAO,MAAM,cAAc,eAAyB,mBAAmB,KAAG,WA+HxE,CAAC;AAEH,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,wBAAwB,CAAC;IACrC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB"}
1
+ {"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAMxD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAO7D,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAe9E,eAAO,MAAM,cAAc,eAAyB,mBAAmB,KAAG,WA8JxE,CAAC;AAEH,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,wBAAwB,CAAC;IACrC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE;QACZ,OAAO,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACF"}
package/dist/cjs/components/Organisms/Recommendation/Recommendation.js CHANGED
@@ -32,9 +32,11 @@ var react_1 = require("@emotion/react");
32
32
  var classnames_1 = __importDefault(require("classnames"));
33
33
  var mobx_react_1 = require("mobx-react");
34
34
  var deepmerge_1 = __importDefault(require("deepmerge"));
35
+ var hooks_1 = require("preact/hooks");
35
36
  var Carousel_1 = require("../../Molecules/Carousel");
36
37
  var Result_1 = require("../../Molecules/Result");
37
38
  var utilities_1 = require("../../../utilities");
39
+ var hooks_2 = require("../../../hooks");
38
40
  var providers_1 = require("../../../providers");
39
41
  var useDisplaySettings_1 = require("../../../hooks/useDisplaySettings");
40
42
  var ProfileTracker_1 = require("../../Trackers/Recommendation/ProfileTracker");
@@ -63,7 +65,8 @@ exports.Recommendation = (0, mobx_react_1.observer)(function (properties) {
63
65
  var theme = (0, deepmerge_1.default)((props === null || props === void 0 ? void 0 : props.theme) || {}, (displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.theme) || {}, { arrayMerge: function (destinationArray, sourceArray) { return sourceArray; } });
64
66
  props = __assign(__assign(__assign({}, props), displaySettings), { theme: theme });
65
67
  }
66
- var title = props.title, controller = props.controller, children = props.children, breakpoints = props.breakpoints, loop = props.loop, results = props.results, pagination = props.pagination, nextButton = props.nextButton, prevButton = props.prevButton, hideButtons = props.hideButtons, disableStyles = props.disableStyles, style = props.style, className = props.className, vertical = props.vertical, additionalProps = __rest(props, ["title", "controller", "children", "breakpoints", "loop", "results", "pagination", "nextButton", "prevButton", "hideButtons", "disableStyles", "style", "className", "vertical"]);
68
+ var title = props.title, controller = props.controller, children = props.children, breakpoints = props.breakpoints, loop = props.loop, results = props.results, pagination = props.pagination, nextButton = props.nextButton, prevButton = props.prevButton, hideButtons = props.hideButtons, disableStyles = props.disableStyles, style = props.style, className = props.className, lazyRender = props.lazyRender, vertical = props.vertical, additionalProps = __rest(props, ["title", "controller", "children", "breakpoints", "loop", "results", "pagination", "nextButton", "prevButton", "hideButtons", "disableStyles", "style", "className", "lazyRender", "vertical"]);
69
+ var mergedlazyRender = __assign({ enabled: true, offset: '10%' }, lazyRender);
67
70
  if (!controller || controller.type !== 'recommendation') {
68
71
  throw new Error("<Recommendation> Component requires 'controller' prop with an instance of RecommendationController");
69
72
  }
@@ -96,12 +99,21 @@ exports.Recommendation = (0, mobx_react_1.observer)(function (properties) {
96
99
  else if (style) {
97
100
  styling.css = [style];
98
101
  }
102
+ var _g = (0, hooks_1.useState)(false), isVisible = _g[0], setIsVisible = _g[1];
103
+ var recsRef = (0, hooks_1.useRef)(null);
104
+ var inView = (mergedlazyRender === null || mergedlazyRender === void 0 ? void 0 : mergedlazyRender.enabled) ? (0, hooks_2.useIntersection)(recsRef, "".concat(mergedlazyRender.offset, " 0px ").concat(mergedlazyRender.offset, " 0px"), true) : true;
105
+ if (inView) {
106
+ setIsVisible(true);
107
+ }
99
108
  return children || (resultsToRender === null || resultsToRender === void 0 ? void 0 : resultsToRender.length) ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
100
- (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__recommendation', className) }),
101
- (0, react_1.jsx)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller },
102
- title && (0, react_1.jsx)("h3", { className: "ss__recommendation__title" }, title),
103
- (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
104
- ? children.map(function (child, idx) { return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: resultsToRender[idx] }, child)); })
105
- : resultsToRender.map(function (result) { return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result },
106
- (0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: result })))); })))))) : ((0, react_1.jsx)(preact_1.Fragment, null));
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
+ title && (0, react_1.jsx)("h3", { className: "ss__recommendation__title" }, title),
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.RecommendationResultTracker, { controller: controller, result: resultsToRender[idx] }, child)); })
113
+ : resultsToRender.map(function (result) { return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result },
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.RecommendationResultTracker, { controller: controller, result: resultsToRender[idx] },
116
+ (0, react_1.jsx)(preact_1.Fragment, null))); })
117
+ : resultsToRender.map(function (result) { return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result },
118
+ (0, react_1.jsx)(preact_1.Fragment, null))); })))))) : ((0, react_1.jsx)(preact_1.Fragment, null));
107
119
  });
package/dist/cjs/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts CHANGED
@@ -19,6 +19,7 @@ export interface RecommendationBundleProps extends ComponentProps {
19
19
  resultComponent?: JSX.Element;
20
20
  preselectedCount?: number;
21
21
  hideCheckboxes?: boolean;
22
+ hideSeed?: boolean;
22
23
  seedText?: string;
23
24
  separatorIconSeedOnly?: boolean;
24
25
  separatorIcon?: string | Partial<IconProps> | boolean;
@@ -30,6 +31,10 @@ export interface RecommendationBundleProps extends ComponentProps {
30
31
  ctaSlot?: JSX.Element;
31
32
  vertical?: boolean;
32
33
  carousel?: BundleCarouselProps;
34
+ lazyRender?: {
35
+ enabled: boolean;
36
+ offset?: string;
37
+ };
33
38
  }
34
39
  export {};
35
40
  //# sourceMappingURL=RecommendationBundle.d.ts.map
package/dist/cjs/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts.map CHANGED
@@ -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,WA4cpF,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,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;CAC/B"}
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,WA4epF,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"}
package/dist/cjs/components/Organisms/RecommendationBundle/RecommendationBundle.js CHANGED
@@ -42,7 +42,7 @@ var ProfileTracker_1 = require("../../Trackers/Recommendation/ProfileTracker");
42
42
  var ResultTracker_1 = require("../../Trackers/Recommendation/ResultTracker");
43
43
  var BundleSelector_1 = require("./BundleSelector");
44
44
  var BundleCTA_1 = require("./BundleCTA");
45
- var react_2 = require("react");
45
+ var hooks_2 = require("../../../hooks");
46
46
  var CSS = {
47
47
  recommendationBundle: function (_a) {
48
48
  var slidesPerView = _a.slidesPerView, spaceBetween = _a.spaceBetween, ctaInline = _a.ctaInline, vertical = _a.vertical, separatorIcon = _a.separatorIcon;
@@ -157,7 +157,8 @@ exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties)
157
157
  var theme = (0, deepmerge_1.default)((props === null || props === void 0 ? void 0 : props.theme) || {}, (displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.theme) || {}, { arrayMerge: function (destinationArray, sourceArray) { return sourceArray; } });
158
158
  props = __assign(__assign(__assign({}, props), displaySettings), { theme: theme });
159
159
  }
160
- var title = props.title, controller = props.controller, breakpoints = props.breakpoints, results = props.results, carousel = props.carousel, preselectedCount = props.preselectedCount, separatorIcon = props.separatorIcon, hideCheckboxes = props.hideCheckboxes, limit = props.limit, seedText = props.seedText, vertical = props.vertical, onAddToCart = props.onAddToCart, separatorIconSeedOnly = props.separatorIconSeedOnly, resultComponent = props.resultComponent, ctaSlot = props.ctaSlot, ctaButtonText = props.ctaButtonText, ctaButtonSuccessText = props.ctaButtonSuccessText, ctaButtonSuccessTimeout = props.ctaButtonSuccessTimeout, disableStyles = props.disableStyles, ctaIcon = props.ctaIcon, ctaInline = props.ctaInline, style = props.style, className = props.className, additionalProps = __rest(props, ["title", "controller", "breakpoints", "results", "carousel", "preselectedCount", "separatorIcon", "hideCheckboxes", "limit", "seedText", "vertical", "onAddToCart", "separatorIconSeedOnly", "resultComponent", "ctaSlot", "ctaButtonText", "ctaButtonSuccessText", "ctaButtonSuccessTimeout", "disableStyles", "ctaIcon", "ctaInline", "style", "className"]);
160
+ var title = props.title, controller = props.controller, breakpoints = props.breakpoints, results = props.results, carousel = props.carousel, preselectedCount = props.preselectedCount, separatorIcon = props.separatorIcon, hideCheckboxes = props.hideCheckboxes, limit = props.limit, seedText = props.seedText, vertical = props.vertical, onAddToCart = props.onAddToCart, separatorIconSeedOnly = props.separatorIconSeedOnly, resultComponent = props.resultComponent, ctaSlot = props.ctaSlot, hideSeed = props.hideSeed, ctaButtonText = props.ctaButtonText, ctaButtonSuccessText = props.ctaButtonSuccessText, ctaButtonSuccessTimeout = props.ctaButtonSuccessTimeout, disableStyles = props.disableStyles, ctaIcon = props.ctaIcon, ctaInline = props.ctaInline, style = props.style, lazyRender = props.lazyRender, className = props.className, additionalProps = __rest(props, ["title", "controller", "breakpoints", "results", "carousel", "preselectedCount", "separatorIcon", "hideCheckboxes", "limit", "seedText", "vertical", "onAddToCart", "separatorIconSeedOnly", "resultComponent", "ctaSlot", "hideSeed", "ctaButtonText", "ctaButtonSuccessText", "ctaButtonSuccessTimeout", "disableStyles", "ctaIcon", "ctaInline", "style", "lazyRender", "className"]);
161
+ var mergedlazyRender = __assign({ enabled: true, offset: '10%' }, lazyRender);
161
162
  var mergedCarouselProps = __assign({ enabled: true, loop: false, spaceBetween: 10 }, carousel);
162
163
  var seedInCarousel = mergedCarouselProps.seedInCarousel, prevButton = mergedCarouselProps.prevButton, nextButton = mergedCarouselProps.nextButton, hideButtons = mergedCarouselProps.hideButtons, loop = mergedCarouselProps.loop, spaceBetween = mergedCarouselProps.spaceBetween, pagination = mergedCarouselProps.pagination;
163
164
  var carouselEnabled = mergedCarouselProps.enabled;
@@ -166,7 +167,7 @@ exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties)
166
167
  }
167
168
  var resultsToRender = results || ((_d = controller.store) === null || _d === void 0 ? void 0 : _d.results);
168
169
  if (limit) {
169
- resultsToRender = resultsToRender.slice(0, limit);
170
+ resultsToRender = resultsToRender.slice(0, hideSeed ? limit + 1 : limit);
170
171
  }
171
172
  var cartStore = controller.store.cart;
172
173
  if (!cartStore) {
@@ -209,7 +210,7 @@ exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties)
209
210
  var _preSelectedCount = typeof preselectedCount == 'number' ? preselectedCount : carouselEnabled ? slidesPerView : resultsToRender.length;
210
211
  //this resets the selected items if the results to render changes
211
212
  // so you dont end up with something selected that is no longer rendered
212
- (0, react_2.useEffect)(function () {
213
+ (0, hooks_1.useEffect)(function () {
213
214
  cartStore.reset();
214
215
  if (_preSelectedCount) {
215
216
  resultsToRender === null || resultsToRender === void 0 ? void 0 : resultsToRender.forEach(function (result, idx) {
@@ -285,55 +286,65 @@ exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties)
285
286
  };
286
287
  var seedRef = (0, hooks_1.useRef)();
287
288
  var carouselRef = (0, hooks_1.useRef)();
289
+ var _l = (0, hooks_1.useState)(false), isVisible = _l[0], setIsVisible = _l[1];
290
+ var recsRef = (0, hooks_1.useRef)(null);
291
+ var inView = (mergedlazyRender === null || mergedlazyRender === void 0 ? void 0 : mergedlazyRender.enabled) ? (0, hooks_2.useIntersection)(recsRef, "".concat(mergedlazyRender.offset, " 0px ").concat(mergedlazyRender.offset, " 0px"), true) : true;
292
+ if (inView) {
293
+ setIsVisible(true);
294
+ }
288
295
  return (resultsToRender === null || resultsToRender === void 0 ? void 0 : resultsToRender.length) ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
289
- (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__recommendation-bundle', { 'ss__recommendation-bundle--stacked': !ctaInline }, className) }),
290
- (0, react_1.jsx)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller },
291
- title && ((0, react_1.jsx)("h3", { className: "ss__recommendation-bundle__title" },
292
- (0, react_1.jsx)("span", null, title))),
293
- (0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__recommendation-bundle__wrapper', {
294
- 'ss__recommendation-bundle__wrapper--seed-in-carousel': seedInCarousel,
295
- 'ss__recommendation-bundle__wrapper--vertical': vertical,
296
- }) },
297
- carouselEnabled ? ((0, react_1.jsx)(preact_1.Fragment, null,
298
- !seedInCarousel && ((0, react_1.jsx)("div", { className: "ss__recommendation-bundle__wrapper__seed-container" },
299
- (0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: seed },
300
- (0, react_1.jsx)(BundleSelector_1.BundleSelector, { seedText: seedText, seed: true, onCheck: function () { return onProductSelect(seed); }, 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, {
301
- result: seed,
302
- seed: true,
303
- selected: selectedItems.findIndex(function (item) { return item.id == seed.id; }) > -1,
304
- onProductSelect: onProductSelect,
305
- })) : ((0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: seed }))))))),
306
- (0, react_1.jsx)("div", { className: "ss__recommendation-bundle__wrapper__carousel" },
307
- (0, react_1.jsx)(Carousel_1.Carousel, __assign({ prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, spaceBetween: spaceBetween, pagination: pagination, breakpoints: modifiedBreakpoints, watchSlidesProgress: true, observer: true, vertical: vertical, onResize: function () { return setSeedwidth(); } }, subProps.carousel, additionalProps, displaySettings, { ref: carouselRef }), seedInCarousel
308
- ? resultsToRender.map(function (result, idx) {
309
- var selected = selectedItems.findIndex(function (item) { return item.id == result.id; }) > -1;
310
- if (idx == 0) {
311
- return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result },
312
- (0, react_1.jsx)(BundleSelector_1.BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: function () { return onProductSelect(result); }, 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 }))))));
313
- }
314
- else {
315
- return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result },
316
- (0, react_1.jsx)(BundleSelector_1.BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: function () { return onProductSelect(result); }, 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 }))))));
317
- }
318
- })
319
- : resultsToRender
320
- .filter(function (result, idx) { return idx !== 0; })
321
- .map(function (result, idx, results) {
322
- var selected = selectedItems.findIndex(function (item) { return item.id == result.id; }) > -1;
296
+ (0, react_1.jsx)("div", __assign({}, styling, { ref: recsRef, className: (0, classnames_1.default)('ss__recommendation-bundle', { 'ss__recommendation-bundle--stacked': !ctaInline }, className) }), isVisible ? ((0, react_1.jsx)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller },
297
+ title && ((0, react_1.jsx)("h3", { className: "ss__recommendation-bundle__title" },
298
+ (0, react_1.jsx)("span", null, title))),
299
+ (0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__recommendation-bundle__wrapper', {
300
+ 'ss__recommendation-bundle__wrapper--seed-in-carousel': seedInCarousel,
301
+ 'ss__recommendation-bundle__wrapper--vertical': vertical,
302
+ }) },
303
+ carouselEnabled ? ((0, react_1.jsx)(preact_1.Fragment, null,
304
+ !seedInCarousel && !hideSeed && ((0, react_1.jsx)("div", { className: "ss__recommendation-bundle__wrapper__seed-container" },
305
+ (0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: seed, track: { impression: false } },
306
+ (0, react_1.jsx)(BundleSelector_1.BundleSelector, { seedText: seedText, seed: true, onCheck: function () { return onProductSelect(seed); }, 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
+ result: seed,
308
+ seed: true,
309
+ selected: selectedItems.findIndex(function (item) { return item.id == seed.id; }) > -1,
310
+ onProductSelect: onProductSelect,
311
+ })) : ((0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: seed }))))))),
312
+ (0, react_1.jsx)("div", { className: "ss__recommendation-bundle__wrapper__carousel" },
313
+ (0, react_1.jsx)(Carousel_1.Carousel, __assign({ prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, spaceBetween: spaceBetween, pagination: pagination, breakpoints: modifiedBreakpoints, watchSlidesProgress: true, observer: true, vertical: vertical, onResize: function () { return setSeedwidth(); } }, subProps.carousel, additionalProps, displaySettings, { ref: carouselRef }), seedInCarousel
314
+ ? resultsToRender
315
+ .filter(function (result, idx) { return (hideSeed && idx == 0 ? false : true); })
316
+ .map(function (result, idx) {
317
+ var selected = selectedItems.findIndex(function (item) { return item.id == result.id; }) > -1;
318
+ if (idx == 0 && !hideSeed) {
319
+ return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result, track: { impression: false } },
320
+ (0, react_1.jsx)(BundleSelector_1.BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: function () { return onProductSelect(result); }, 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
+ }
322
+ else {
323
323
  return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result },
324
- (0, react_1.jsx)(BundleSelector_1.BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: function () { return onProductSelect(result); }, 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 }))))));
325
- }))))) : (resultsToRender.map(function (result, idx) {
326
- var selected = selectedItems.findIndex(function (item) { return item.id == result.id; }) > -1;
327
- if (idx == 0) {
328
- return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result },
329
- (0, react_1.jsx)(BundleSelector_1.BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: function () { return onProductSelect(result); }, 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 }))))));
330
- }
331
- else {
332
- return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result },
333
- (0, react_1.jsx)(BundleSelector_1.BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: function () { return onProductSelect(result); }, 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 }))))));
334
- }
335
- })),
336
- 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 }))),
337
- !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)(preact_1.Fragment, null));
324
+ (0, react_1.jsx)(BundleSelector_1.BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: function () { return onProductSelect(result); }, 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
+ }
326
+ })
327
+ : resultsToRender
328
+ .filter(function (result, idx) { return idx !== 0; })
329
+ .map(function (result, idx, results) {
330
+ var selected = selectedItems.findIndex(function (item) { return item.id == result.id; }) > -1;
331
+ return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result },
332
+ (0, react_1.jsx)(BundleSelector_1.BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: function () { return onProductSelect(result); }, 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
+ }))))) : (resultsToRender
334
+ .filter(function (result, idx) { return (hideSeed && idx == 0 ? false : true); })
335
+ .map(function (result, idx) {
336
+ var selected = selectedItems.findIndex(function (item) { return item.id == result.id; }) > -1;
337
+ if (idx == 0 && !hideSeed) {
338
+ return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result, track: { impression: false } },
339
+ (0, react_1.jsx)(BundleSelector_1.BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: function () { return onProductSelect(result); }, 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
+ }
341
+ else {
342
+ return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result },
343
+ (0, react_1.jsx)(BundleSelector_1.BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: function () { return onProductSelect(result); }, 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
+ }
345
+ })),
346
+ 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.RecommendationResultTracker, { controller: controller, result: result },
348
+ (0, react_1.jsx)(preact_1.Fragment, null))); })))))) : ((0, react_1.jsx)(preact_1.Fragment, null));
338
349
  return (0, react_1.jsx)(preact_1.Fragment, null);
339
350
  });
package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts CHANGED
@@ -7,5 +7,9 @@ export interface RecommendationResultTrackerProps extends ComponentProps {
7
7
  children: any;
8
8
  result: Product;
9
9
  controller: RecommendationController;
10
+ track?: {
11
+ impression?: boolean;
12
+ click?: boolean;
13
+ };
10
14
  }
11
15
  //# sourceMappingURL=RecommendationResultTracker.d.ts.map
package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts.map CHANGED
@@ -1 +1 @@
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,WAiDlG,CAAC;AAEH,MAAM,WAAW,gCAAiC,SAAQ,cAAc;IACvE,QAAQ,EAAE,GAAG,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,wBAAwB,CAAC;CACrC"}
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 CHANGED
@@ -27,15 +27,20 @@ var CSS = {
27
27
  exports.RecommendationResultTracker = (0, mobx_react_1.observer)(function (properties) {
28
28
  var _a, _b, _c;
29
29
  var globalTheme = (0, providers_1.useTheme)();
30
+ var defaultTrack = {
31
+ impression: true,
32
+ click: true,
33
+ };
30
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);
31
- var children = props.children, result = props.result, controller = props.controller, className = props.className, disableStyles = props.disableStyles, style = props.style;
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);
32
37
  var resultRef = (0, hooks_1.useRef)(null);
33
38
  var resultInViewport = (0, hooks_2.useIntersection)(resultRef, '0px');
34
39
  if (!controller.events.render) {
35
40
  controller.log.warn('<RecommendationResultTracker> used without <RecommendationProfileTracker>');
36
41
  }
37
42
  controller.track.product.render(result);
38
- if (resultInViewport) {
43
+ if (resultInViewport && mergedTrack.impression) {
39
44
  // intersection observer can trigger in any random order,
40
45
  // so we need to check if profile impression has been sent and send if not.
41
46
  if (!controller.events.impression) {
@@ -50,5 +55,5 @@ exports.RecommendationResultTracker = (0, mobx_react_1.observer)(function (prope
50
55
  else if (style) {
51
56
  styling.css = [style];
52
57
  }
53
- return ((0, react_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__recommendation-result-tracker', className), onClick: function (e) { return controller.track.product.click(e, result); }, ref: resultRef }, styling), children));
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));
54
59
  });
package/dist/esm/components/Molecules/Grid/Grid.js CHANGED
@@ -3,7 +3,7 @@ import { Fragment } from 'preact';
3
3
  import { jsx, css } from '@emotion/react';
4
4
  import classnames from 'classnames';
5
5
  import { useTheme, CacheProvider } from '../../../providers';
6
- import { useState } from 'react';
6
+ import { useState } from 'preact/hooks';
7
7
  import { useA11y } from '../../../hooks';
8
8
  import { Image } from '../../Atoms/Image';
9
9
  import { cloneWithProps, defined } from '../../../utilities';
package/dist/esm/components/Molecules/List/List.js CHANGED
@@ -4,7 +4,7 @@ import { jsx, css } from '@emotion/react';
4
4
  import classnames from 'classnames';
5
5
  import { useTheme, CacheProvider } from '../../../providers';
6
6
  import { defined } from '../../../utilities';
7
- import { useState } from 'react';
7
+ import { useState } from 'preact/hooks';
8
8
  import { Checkbox } from '../Checkbox';
9
9
  import { useA11y } from '../../../hooks';
10
10
  import { Icon } from '../../Atoms/Icon';
package/dist/esm/components/Molecules/Swatches/Swatches.js CHANGED
@@ -3,7 +3,7 @@ import { Fragment } from 'preact';
3
3
  import { jsx, css } from '@emotion/react';
4
4
  import classnames from 'classnames';
5
5
  import { useTheme, CacheProvider } from '../../../providers';
6
- import { useState } from 'react';
6
+ import { useState } from 'preact/hooks';
7
7
  import { useA11y, useDisplaySettings } from '../../../hooks';
8
8
  import { Carousel } from '../Carousel';
9
9
  import { defined } from '../../../utilities';
package/dist/esm/components/Organisms/Recommendation/Recommendation.d.ts CHANGED
@@ -17,5 +17,9 @@ export interface RecommendationProps extends ComponentProps {
17
17
  controller: RecommendationController;
18
18
  children?: ComponentChildren;
19
19
  vertical?: boolean;
20
+ lazyRender?: {
21
+ enabled: boolean;
22
+ offset?: string;
23
+ };
20
24
  }
21
25
  //# sourceMappingURL=Recommendation.d.ts.map
package/dist/esm/components/Organisms/Recommendation/Recommendation.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAMxD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAM7D,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAe9E,eAAO,MAAM,cAAc,eAAyB,mBAAmB,KAAG,WA+HxE,CAAC;AAEH,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,wBAAwB,CAAC;IACrC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB"}
1
+ {"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAMxD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAO7D,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAe9E,eAAO,MAAM,cAAc,eAAyB,mBAAmB,KAAG,WA8JxE,CAAC;AAEH,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,wBAAwB,CAAC;IACrC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE;QACZ,OAAO,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACF"}
package/dist/esm/components/Organisms/Recommendation/Recommendation.js CHANGED
@@ -4,9 +4,11 @@ import { jsx, css } from '@emotion/react';
4
4
  import classnames from 'classnames';
5
5
  import { observer } from 'mobx-react';
6
6
  import deepmerge from 'deepmerge';
7
+ import { useState, useRef } from 'preact/hooks';
7
8
  import { Carousel, defaultCarouselBreakpoints, defaultVerticalCarouselBreakpoints } from '../../Molecules/Carousel';
8
9
  import { Result } from '../../Molecules/Result';
9
10
  import { defined } from '../../../utilities';
11
+ import { useIntersection } from '../../../hooks';
10
12
  import { useTheme, CacheProvider } from '../../../providers';
11
13
  import { useDisplaySettings } from '../../../hooks/useDisplaySettings';
12
14
  import { RecommendationProfileTracker } from '../../Trackers/Recommendation/ProfileTracker';
@@ -43,7 +45,12 @@ export const Recommendation = observer((properties) => {
43
45
  theme,
44
46
  };
45
47
  }
46
- const { title, controller, children, breakpoints, loop, results, pagination, nextButton, prevButton, hideButtons, disableStyles, style, className, vertical, ...additionalProps } = props;
48
+ const { title, controller, children, breakpoints, loop, results, pagination, nextButton, prevButton, hideButtons, disableStyles, style, className, lazyRender, vertical, ...additionalProps } = props;
49
+ const mergedlazyRender = {
50
+ enabled: true,
51
+ offset: '10%',
52
+ ...lazyRender,
53
+ };
47
54
  if (!controller || controller.type !== 'recommendation') {
48
55
  throw new Error(`<Recommendation> Component requires 'controller' prop with an instance of RecommendationController`);
49
56
  }
@@ -86,12 +93,21 @@ export const Recommendation = observer((properties) => {
86
93
  else if (style) {
87
94
  styling.css = [style];
88
95
  }
96
+ const [isVisible, setIsVisible] = useState(false);
97
+ const recsRef = useRef(null);
98
+ const inView = mergedlazyRender?.enabled ? useIntersection(recsRef, `${mergedlazyRender.offset} 0px ${mergedlazyRender.offset} 0px`, true) : true;
99
+ if (inView) {
100
+ setIsVisible(true);
101
+ }
89
102
  return children || resultsToRender?.length ? (jsx(CacheProvider, null,
90
- jsx("div", { ...styling, className: classnames('ss__recommendation', className) },
91
- jsx(RecommendationProfileTracker, { controller: controller },
92
- title && jsx("h3", { className: "ss__recommendation__title" }, title),
93
- jsx(Carousel, { prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, pagination: pagination, breakpoints: breakpoints, ...subProps.carousel, ...additionalProps, ...displaySettings }, Array.isArray(children) && children.length
94
- ? children.map((child, idx) => (jsx(RecommendationResultTracker, { controller: controller, result: resultsToRender[idx] }, child)))
95
- : resultsToRender.map((result) => (jsx(RecommendationResultTracker, { controller: controller, result: result },
96
- jsx(Result, { ...subProps.result, controller: controller, result: result }))))))))) : (jsx(Fragment, null));
103
+ jsx("div", { ...styling, className: classnames('ss__recommendation', className), ref: recsRef }, isVisible ? (jsx(RecommendationProfileTracker, { controller: controller },
104
+ title && jsx("h3", { className: "ss__recommendation__title" }, title),
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(RecommendationResultTracker, { controller: controller, result: resultsToRender[idx] }, child)))
107
+ : resultsToRender.map((result) => (jsx(RecommendationResultTracker, { controller: controller, result: result },
108
+ jsx(Result, { ...subProps.result, controller: controller, result: result }))))))) : (jsx(RecommendationProfileTracker, { controller: controller }, Array.isArray(children) && children.length
109
+ ? children.map((child, idx) => (jsx(RecommendationResultTracker, { controller: controller, result: resultsToRender[idx] },
110
+ jsx(Fragment, null))))
111
+ : resultsToRender.map((result) => (jsx(RecommendationResultTracker, { controller: controller, result: result },
112
+ jsx(Fragment, null))))))))) : (jsx(Fragment, null));
97
113
  });
package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts CHANGED
@@ -19,6 +19,7 @@ export interface RecommendationBundleProps extends ComponentProps {
19
19
  resultComponent?: JSX.Element;
20
20
  preselectedCount?: number;
21
21
  hideCheckboxes?: boolean;
22
+ hideSeed?: boolean;
22
23
  seedText?: string;
23
24
  separatorIconSeedOnly?: boolean;
24
25
  separatorIcon?: string | Partial<IconProps> | boolean;
@@ -30,6 +31,10 @@ export interface RecommendationBundleProps extends ComponentProps {
30
31
  ctaSlot?: JSX.Element;
31
32
  vertical?: boolean;
32
33
  carousel?: BundleCarouselProps;
34
+ lazyRender?: {
35
+ enabled: boolean;
36
+ offset?: string;
37
+ };
33
38
  }
34
39
  export {};
35
40
  //# sourceMappingURL=RecommendationBundle.d.ts.map
package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts.map CHANGED
@@ -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,WA4cpF,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,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;CAC/B"}
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,WA4epF,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"}
package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.js CHANGED
@@ -2,7 +2,7 @@
2
2
  import { Fragment } from 'preact';
3
3
  import { jsx, css } from '@emotion/react';
4
4
  import classnames from 'classnames';
5
- import { useRef } from 'preact/hooks';
5
+ import { useRef, useEffect, useState } from 'preact/hooks';
6
6
  import { observer } from 'mobx-react';
7
7
  import deepmerge from 'deepmerge';
8
8
  import { Carousel } from '../../Molecules/Carousel';
@@ -14,7 +14,7 @@ import { RecommendationProfileTracker } from '../../Trackers/Recommendation/Prof
14
14
  import { RecommendationResultTracker } from '../../Trackers/Recommendation/ResultTracker';
15
15
  import { BundleSelector } from './BundleSelector';
16
16
  import { BundledCTA } from './BundleCTA';
17
- import { useEffect } from 'react';
17
+ import { useIntersection } from '../../../hooks';
18
18
  const CSS = {
19
19
  recommendationBundle: ({ slidesPerView, spaceBetween, ctaInline, vertical, separatorIcon }) => css({
20
20
  '.ss__recommendation-bundle__wrapper': {
@@ -144,7 +144,12 @@ export const RecommendationBundle = observer((properties) => {
144
144
  theme,
145
145
  };
146
146
  }
147
- const { title, controller, breakpoints, results, carousel, preselectedCount, separatorIcon, hideCheckboxes, limit, seedText, vertical, onAddToCart, separatorIconSeedOnly, resultComponent, ctaSlot, ctaButtonText, ctaButtonSuccessText, ctaButtonSuccessTimeout, disableStyles, ctaIcon, ctaInline, style, className, ...additionalProps } = props;
147
+ const { title, controller, breakpoints, results, carousel, preselectedCount, separatorIcon, hideCheckboxes, limit, seedText, vertical, onAddToCart, separatorIconSeedOnly, resultComponent, ctaSlot, hideSeed, ctaButtonText, ctaButtonSuccessText, ctaButtonSuccessTimeout, disableStyles, ctaIcon, ctaInline, style, lazyRender, className, ...additionalProps } = props;
148
+ const mergedlazyRender = {
149
+ enabled: true,
150
+ offset: '10%',
151
+ ...lazyRender,
152
+ };
148
153
  const mergedCarouselProps = {
149
154
  enabled: true,
150
155
  loop: false,
@@ -158,7 +163,7 @@ export const RecommendationBundle = observer((properties) => {
158
163
  }
159
164
  let resultsToRender = results || controller.store?.results;
160
165
  if (limit) {
161
- resultsToRender = resultsToRender.slice(0, limit);
166
+ resultsToRender = resultsToRender.slice(0, hideSeed ? limit + 1 : limit);
162
167
  }
163
168
  const cartStore = controller.store.cart;
164
169
  if (!cartStore) {
@@ -290,55 +295,65 @@ export const RecommendationBundle = observer((properties) => {
290
295
  };
291
296
  const seedRef = useRef();
292
297
  const carouselRef = useRef();
298
+ const [isVisible, setIsVisible] = useState(false);
299
+ const recsRef = useRef(null);
300
+ const inView = mergedlazyRender?.enabled ? useIntersection(recsRef, `${mergedlazyRender.offset} 0px ${mergedlazyRender.offset} 0px`, true) : true;
301
+ if (inView) {
302
+ setIsVisible(true);
303
+ }
293
304
  return resultsToRender?.length ? (jsx(CacheProvider, null,
294
- jsx("div", { ...styling, className: classnames('ss__recommendation-bundle', { 'ss__recommendation-bundle--stacked': !ctaInline }, className) },
295
- jsx(RecommendationProfileTracker, { controller: controller },
296
- title && (jsx("h3", { className: "ss__recommendation-bundle__title" },
297
- jsx("span", null, title))),
298
- jsx("div", { className: classnames('ss__recommendation-bundle__wrapper', {
299
- 'ss__recommendation-bundle__wrapper--seed-in-carousel': seedInCarousel,
300
- 'ss__recommendation-bundle__wrapper--vertical': vertical,
301
- }) },
302
- carouselEnabled ? (jsx(Fragment, null,
303
- !seedInCarousel && (jsx("div", { className: "ss__recommendation-bundle__wrapper__seed-container" },
304
- jsx(RecommendationResultTracker, { controller: controller, result: seed },
305
- jsx(BundleSelector, { seedText: seedText, seed: true, onCheck: () => onProductSelect(seed), checked: selectedItems.findIndex((item) => item.id == seed.id) > -1, icon: separatorIcon, hideCheckboxes: hideCheckboxes, theme: props.theme, ref: seedRef }, resultComponent ? (cloneWithProps(resultComponent, {
306
- result: seed,
307
- seed: true,
308
- selected: selectedItems.findIndex((item) => item.id == seed.id) > -1,
309
- onProductSelect,
310
- })) : (jsx(Result, { ...subProps.result, controller: controller, result: seed })))))),
311
- jsx("div", { className: "ss__recommendation-bundle__wrapper__carousel" },
312
- jsx(Carousel, { prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, spaceBetween: spaceBetween, pagination: pagination, breakpoints: modifiedBreakpoints, watchSlidesProgress: true, observer: true, vertical: vertical, onResize: () => setSeedwidth(), ...subProps.carousel, ...additionalProps, ...displaySettings, ref: carouselRef }, seedInCarousel
313
- ? resultsToRender.map((result, idx) => {
314
- const selected = selectedItems.findIndex((item) => item.id == result.id) > -1;
315
- if (idx == 0) {
316
- return (jsx(RecommendationResultTracker, { controller: controller, result: result },
317
- jsx(BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: () => onProductSelect(result), checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: true, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
318
- }
319
- else {
320
- return (jsx(RecommendationResultTracker, { controller: controller, result: result },
321
- jsx(BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: () => onProductSelect(result), 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 })))));
322
- }
323
- })
324
- : resultsToRender
325
- .filter((result, idx) => idx !== 0)
326
- .map((result, idx, results) => {
327
- const selected = selectedItems.findIndex((item) => item.id == result.id) > -1;
305
+ jsx("div", { ...styling, ref: recsRef, className: classnames('ss__recommendation-bundle', { 'ss__recommendation-bundle--stacked': !ctaInline }, className) }, isVisible ? (jsx(RecommendationProfileTracker, { controller: controller },
306
+ title && (jsx("h3", { className: "ss__recommendation-bundle__title" },
307
+ jsx("span", null, title))),
308
+ jsx("div", { className: classnames('ss__recommendation-bundle__wrapper', {
309
+ 'ss__recommendation-bundle__wrapper--seed-in-carousel': seedInCarousel,
310
+ 'ss__recommendation-bundle__wrapper--vertical': vertical,
311
+ }) },
312
+ carouselEnabled ? (jsx(Fragment, null,
313
+ !seedInCarousel && !hideSeed && (jsx("div", { className: "ss__recommendation-bundle__wrapper__seed-container" },
314
+ jsx(RecommendationResultTracker, { controller: controller, result: seed, track: { impression: false } },
315
+ jsx(BundleSelector, { seedText: seedText, seed: true, onCheck: () => onProductSelect(seed), checked: selectedItems.findIndex((item) => item.id == seed.id) > -1, icon: separatorIcon, hideCheckboxes: hideCheckboxes, theme: props.theme, ref: seedRef }, resultComponent ? (cloneWithProps(resultComponent, {
316
+ result: seed,
317
+ seed: true,
318
+ selected: selectedItems.findIndex((item) => item.id == seed.id) > -1,
319
+ onProductSelect,
320
+ })) : (jsx(Result, { ...subProps.result, controller: controller, result: seed })))))),
321
+ jsx("div", { className: "ss__recommendation-bundle__wrapper__carousel" },
322
+ jsx(Carousel, { prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, spaceBetween: spaceBetween, pagination: pagination, breakpoints: modifiedBreakpoints, watchSlidesProgress: true, observer: true, vertical: vertical, onResize: () => setSeedwidth(), ...subProps.carousel, ...additionalProps, ...displaySettings, ref: carouselRef }, seedInCarousel
323
+ ? resultsToRender
324
+ .filter((result, idx) => (hideSeed && idx == 0 ? false : true))
325
+ .map((result, idx) => {
326
+ const selected = selectedItems.findIndex((item) => item.id == result.id) > -1;
327
+ if (idx == 0 && !hideSeed) {
328
+ return (jsx(RecommendationResultTracker, { controller: controller, result: result, track: { impression: false } },
329
+ jsx(BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: () => onProductSelect(result), 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
+ }
331
+ else {
328
332
  return (jsx(RecommendationResultTracker, { controller: controller, result: result },
329
- jsx(BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: () => onProductSelect(result), 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 })))));
330
- }))))) : (resultsToRender.map((result, idx) => {
331
- const selected = selectedItems.findIndex((item) => item.id == result.id) > -1;
332
- if (idx == 0) {
333
- return (jsx(RecommendationResultTracker, { controller: controller, result: result },
334
- jsx(BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: () => onProductSelect(result), checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: true, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
335
- }
336
- else {
337
- return (jsx(RecommendationResultTracker, { controller: controller, result: result },
338
- jsx(BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: () => onProductSelect(result), 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 })))));
339
- }
340
- })),
341
- ctaInline && (jsx(BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCart: (e) => addToCart(e), ctaButtonText: ctaButtonText, ctaButtonSuccessText: ctaButtonSuccessText, ctaButtonSuccessTimeout: ctaButtonSuccessTimeout, ctaIcon: ctaIcon }))),
342
- !ctaInline && (jsx(BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCart: (e) => addToCart(e), ctaButtonText: ctaButtonText, ctaButtonSuccessText: ctaButtonSuccessText, ctaButtonSuccessTimeout: ctaButtonSuccessTimeout, ctaIcon: ctaIcon })))))) : (jsx(Fragment, null));
333
+ jsx(BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: () => onProductSelect(result), 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
+ }
335
+ })
336
+ : resultsToRender
337
+ .filter((result, idx) => idx !== 0)
338
+ .map((result, idx, results) => {
339
+ const selected = selectedItems.findIndex((item) => item.id == result.id) > -1;
340
+ return (jsx(RecommendationResultTracker, { controller: controller, result: result },
341
+ jsx(BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: () => onProductSelect(result), 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
+ }))))) : (resultsToRender
343
+ .filter((result, idx) => (hideSeed && idx == 0 ? false : true))
344
+ .map((result, idx) => {
345
+ const selected = selectedItems.findIndex((item) => item.id == result.id) > -1;
346
+ if (idx == 0 && !hideSeed) {
347
+ return (jsx(RecommendationResultTracker, { controller: controller, result: result, track: { impression: false } },
348
+ jsx(BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: () => onProductSelect(result), 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
+ }
350
+ else {
351
+ return (jsx(RecommendationResultTracker, { controller: controller, result: result },
352
+ jsx(BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: () => onProductSelect(result), 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
+ }
354
+ })),
355
+ 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(RecommendationResultTracker, { controller: controller, result: result },
357
+ jsx(Fragment, null))))))))) : (jsx(Fragment, null));
343
358
  return jsx(Fragment, null);
344
359
  });
package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts CHANGED
@@ -7,5 +7,9 @@ export interface RecommendationResultTrackerProps extends ComponentProps {
7
7
  children: any;
8
8
  result: Product;
9
9
  controller: RecommendationController;
10
+ track?: {
11
+ impression?: boolean;
12
+ click?: boolean;
13
+ };
10
14
  }
11
15
  //# sourceMappingURL=RecommendationResultTracker.d.ts.map
package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts.map CHANGED
@@ -1 +1 @@
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,WAiDlG,CAAC;AAEH,MAAM,WAAW,gCAAiC,SAAQ,cAAc;IACvE,QAAQ,EAAE,GAAG,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,wBAAwB,CAAC;CACrC"}
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 CHANGED
@@ -9,6 +9,10 @@ const CSS = {
9
9
  };
10
10
  export const RecommendationResultTracker = observer((properties) => {
11
11
  const globalTheme = useTheme();
12
+ const defaultTrack = {
13
+ impression: true,
14
+ click: true,
15
+ };
12
16
  const props = {
13
17
  // default props
14
18
  // global theme
@@ -17,14 +21,18 @@ export const RecommendationResultTracker = observer((properties) => {
17
21
  ...properties,
18
22
  ...properties.theme?.components?.RecommendationResultTracker,
19
23
  };
20
- const { children, result, controller, className, disableStyles, style } = props;
24
+ const { children, result, track, controller, className, disableStyles, style } = props;
25
+ const mergedTrack = {
26
+ ...defaultTrack,
27
+ ...track,
28
+ };
21
29
  const resultRef = useRef(null);
22
30
  const resultInViewport = useIntersection(resultRef, '0px');
23
31
  if (!controller.events.render) {
24
32
  controller.log.warn('<RecommendationResultTracker> used without <RecommendationProfileTracker>');
25
33
  }
26
34
  controller.track.product.render(result);
27
- if (resultInViewport) {
35
+ if (resultInViewport && mergedTrack.impression) {
28
36
  // intersection observer can trigger in any random order,
29
37
  // so we need to check if profile impression has been sent and send if not.
30
38
  if (!controller.events.impression) {
@@ -39,5 +47,5 @@ export const RecommendationResultTracker = observer((properties) => {
39
47
  else if (style) {
40
48
  styling.css = [style];
41
49
  }
42
- return (jsx("div", { className: classnames('ss__recommendation-result-tracker', className), onClick: (e) => controller.track.product.click(e, result), ref: resultRef, ...styling }, children));
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));
43
51
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@searchspring/snap-preact-components",
3
- "version": "0.58.2",
3
+ "version": "0.59.0",
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.58.2",
32
+ "@searchspring/snap-toolbox": "^0.59.0",
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.58.2",
56
- "@searchspring/snap-controller": "^0.58.2",
57
- "@searchspring/snap-event-manager": "^0.58.2",
58
- "@searchspring/snap-logger": "^0.58.2",
59
- "@searchspring/snap-profiler": "^0.58.2",
60
- "@searchspring/snap-store-mobx": "^0.58.2",
61
- "@searchspring/snap-tracker": "^0.58.2",
62
- "@searchspring/snap-url-manager": "^0.58.2",
55
+ "@searchspring/snap-client": "^0.59.0",
56
+ "@searchspring/snap-controller": "^0.59.0",
57
+ "@searchspring/snap-event-manager": "^0.59.0",
58
+ "@searchspring/snap-logger": "^0.59.0",
59
+ "@searchspring/snap-profiler": "^0.59.0",
60
+ "@searchspring/snap-store-mobx": "^0.59.0",
61
+ "@searchspring/snap-tracker": "^0.59.0",
62
+ "@searchspring/snap-url-manager": "^0.59.0",
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": "4c7b492e09e8c0c20bbaa178ad9d3d4225a57ad2"
87
+ "gitHead": "3106e08ab0114c0bb0de8f7d7beb6f65968f9c75"
88
88
  }