@searchspring/snap-preact-components 0.58.1 → 0.58.3

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 (19) 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/RecommendationBundle/RecommendationBundle.d.ts +1 -0
  5. package/dist/cjs/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts.map +1 -1
  6. package/dist/cjs/components/Organisms/RecommendationBundle/RecommendationBundle.js +15 -12
  7. package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts +4 -0
  8. package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts.map +1 -1
  9. package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.js +8 -3
  10. package/dist/esm/components/Molecules/Grid/Grid.js +1 -1
  11. package/dist/esm/components/Molecules/List/List.js +1 -1
  12. package/dist/esm/components/Molecules/Swatches/Swatches.js +1 -1
  13. package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts +1 -0
  14. package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts.map +1 -1
  15. package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.js +15 -12
  16. package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts +4 -0
  17. package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts.map +1 -1
  18. package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.js +11 -3
  19. package/package.json +11 -11
@@ -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
  }
@@ -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))));
@@ -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) {
@@ -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;
@@ -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;AAwG7D,eAAO,MAAM,oBAAoB,eAAyB,yBAAyB,KAAG,WAidpF,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;CAC/B"}
@@ -42,7 +42,6 @@ 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");
46
45
  var CSS = {
47
46
  recommendationBundle: function (_a) {
48
47
  var slidesPerView = _a.slidesPerView, spaceBetween = _a.spaceBetween, ctaInline = _a.ctaInline, vertical = _a.vertical, separatorIcon = _a.separatorIcon;
@@ -157,7 +156,7 @@ exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties)
157
156
  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
157
  props = __assign(__assign(__assign({}, props), displaySettings), { theme: theme });
159
158
  }
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"]);
159
+ 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, 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", "className"]);
161
160
  var mergedCarouselProps = __assign({ enabled: true, loop: false, spaceBetween: 10 }, carousel);
162
161
  var seedInCarousel = mergedCarouselProps.seedInCarousel, prevButton = mergedCarouselProps.prevButton, nextButton = mergedCarouselProps.nextButton, hideButtons = mergedCarouselProps.hideButtons, loop = mergedCarouselProps.loop, spaceBetween = mergedCarouselProps.spaceBetween, pagination = mergedCarouselProps.pagination;
163
162
  var carouselEnabled = mergedCarouselProps.enabled;
@@ -166,7 +165,7 @@ exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties)
166
165
  }
167
166
  var resultsToRender = results || ((_d = controller.store) === null || _d === void 0 ? void 0 : _d.results);
168
167
  if (limit) {
169
- resultsToRender = resultsToRender.slice(0, limit);
168
+ resultsToRender = resultsToRender.slice(0, hideSeed ? limit + 1 : limit);
170
169
  }
171
170
  var cartStore = controller.store.cart;
172
171
  if (!cartStore) {
@@ -209,7 +208,7 @@ exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties)
209
208
  var _preSelectedCount = typeof preselectedCount == 'number' ? preselectedCount : carouselEnabled ? slidesPerView : resultsToRender.length;
210
209
  //this resets the selected items if the results to render changes
211
210
  // so you dont end up with something selected that is no longer rendered
212
- (0, react_2.useEffect)(function () {
211
+ (0, hooks_1.useEffect)(function () {
213
212
  cartStore.reset();
214
213
  if (_preSelectedCount) {
215
214
  resultsToRender === null || resultsToRender === void 0 ? void 0 : resultsToRender.forEach(function (result, idx) {
@@ -295,8 +294,8 @@ exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties)
295
294
  'ss__recommendation-bundle__wrapper--vertical': vertical,
296
295
  }) },
297
296
  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 },
297
+ !seedInCarousel && !hideSeed && ((0, react_1.jsx)("div", { className: "ss__recommendation-bundle__wrapper__seed-container" },
298
+ (0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: seed, track: { impression: false } },
300
299
  (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
300
  result: seed,
302
301
  seed: true,
@@ -305,10 +304,12 @@ exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties)
305
304
  })) : ((0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: seed }))))))),
306
305
  (0, react_1.jsx)("div", { className: "ss__recommendation-bundle__wrapper__carousel" },
307
306
  (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) {
307
+ ? resultsToRender
308
+ .filter(function (result, idx) { return (hideSeed && idx == 0 ? false : true); })
309
+ .map(function (result, idx) {
309
310
  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 },
311
+ if (idx == 0 && !hideSeed) {
312
+ return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result, track: { impression: false } },
312
313
  (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
  }
314
315
  else {
@@ -322,10 +323,12 @@ exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties)
322
323
  var selected = selectedItems.findIndex(function (item) { return item.id == result.id; }) > -1;
323
324
  return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result },
324
325
  (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
+ }))))) : (resultsToRender
327
+ .filter(function (result, idx) { return (hideSeed && idx == 0 ? false : true); })
328
+ .map(function (result, idx) {
326
329
  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 },
330
+ if (idx == 0 && !hideSeed) {
331
+ return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result, track: { impression: false } },
329
332
  (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
333
  }
331
334
  else {
@@ -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
@@ -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"}
@@ -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
  });
@@ -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';
@@ -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';
@@ -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';
@@ -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;
@@ -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;AAwG7D,eAAO,MAAM,oBAAoB,eAAyB,yBAAyB,KAAG,WAidpF,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;CAC/B"}
@@ -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 } 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,6 @@ 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';
18
17
  const CSS = {
19
18
  recommendationBundle: ({ slidesPerView, spaceBetween, ctaInline, vertical, separatorIcon }) => css({
20
19
  '.ss__recommendation-bundle__wrapper': {
@@ -144,7 +143,7 @@ export const RecommendationBundle = observer((properties) => {
144
143
  theme,
145
144
  };
146
145
  }
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;
146
+ const { title, controller, breakpoints, results, carousel, preselectedCount, separatorIcon, hideCheckboxes, limit, seedText, vertical, onAddToCart, separatorIconSeedOnly, resultComponent, ctaSlot, hideSeed, ctaButtonText, ctaButtonSuccessText, ctaButtonSuccessTimeout, disableStyles, ctaIcon, ctaInline, style, className, ...additionalProps } = props;
148
147
  const mergedCarouselProps = {
149
148
  enabled: true,
150
149
  loop: false,
@@ -158,7 +157,7 @@ export const RecommendationBundle = observer((properties) => {
158
157
  }
159
158
  let resultsToRender = results || controller.store?.results;
160
159
  if (limit) {
161
- resultsToRender = resultsToRender.slice(0, limit);
160
+ resultsToRender = resultsToRender.slice(0, hideSeed ? limit + 1 : limit);
162
161
  }
163
162
  const cartStore = controller.store.cart;
164
163
  if (!cartStore) {
@@ -300,8 +299,8 @@ export const RecommendationBundle = observer((properties) => {
300
299
  'ss__recommendation-bundle__wrapper--vertical': vertical,
301
300
  }) },
302
301
  carouselEnabled ? (jsx(Fragment, null,
303
- !seedInCarousel && (jsx("div", { className: "ss__recommendation-bundle__wrapper__seed-container" },
304
- jsx(RecommendationResultTracker, { controller: controller, result: seed },
302
+ !seedInCarousel && !hideSeed && (jsx("div", { className: "ss__recommendation-bundle__wrapper__seed-container" },
303
+ jsx(RecommendationResultTracker, { controller: controller, result: seed, track: { impression: false } },
305
304
  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
305
  result: seed,
307
306
  seed: true,
@@ -310,10 +309,12 @@ export const RecommendationBundle = observer((properties) => {
310
309
  })) : (jsx(Result, { ...subProps.result, controller: controller, result: seed })))))),
311
310
  jsx("div", { className: "ss__recommendation-bundle__wrapper__carousel" },
312
311
  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) => {
312
+ ? resultsToRender
313
+ .filter((result, idx) => (hideSeed && idx == 0 ? false : true))
314
+ .map((result, idx) => {
314
315
  const selected = selectedItems.findIndex((item) => item.id == result.id) > -1;
315
- if (idx == 0) {
316
- return (jsx(RecommendationResultTracker, { controller: controller, result: result },
316
+ if (idx == 0 && !hideSeed) {
317
+ return (jsx(RecommendationResultTracker, { controller: controller, result: result, track: { impression: false } },
317
318
  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
  }
319
320
  else {
@@ -327,10 +328,12 @@ export const RecommendationBundle = observer((properties) => {
327
328
  const selected = selectedItems.findIndex((item) => item.id == result.id) > -1;
328
329
  return (jsx(RecommendationResultTracker, { controller: controller, result: result },
329
330
  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
+ }))))) : (resultsToRender
332
+ .filter((result, idx) => (hideSeed && idx == 0 ? false : true))
333
+ .map((result, idx) => {
331
334
  const selected = selectedItems.findIndex((item) => item.id == result.id) > -1;
332
- if (idx == 0) {
333
- return (jsx(RecommendationResultTracker, { controller: controller, result: result },
335
+ if (idx == 0 && !hideSeed) {
336
+ return (jsx(RecommendationResultTracker, { controller: controller, result: result, track: { impression: false } },
334
337
  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
338
  }
336
339
  else {
@@ -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
@@ -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"}
@@ -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.1",
3
+ "version": "0.58.3",
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.1",
32
+ "@searchspring/snap-toolbox": "^0.58.3",
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.1",
56
- "@searchspring/snap-controller": "^0.58.1",
57
- "@searchspring/snap-event-manager": "^0.58.1",
58
- "@searchspring/snap-logger": "^0.58.1",
59
- "@searchspring/snap-profiler": "^0.58.1",
60
- "@searchspring/snap-store-mobx": "^0.58.1",
61
- "@searchspring/snap-tracker": "^0.58.1",
62
- "@searchspring/snap-url-manager": "^0.58.1",
55
+ "@searchspring/snap-client": "^0.58.3",
56
+ "@searchspring/snap-controller": "^0.58.3",
57
+ "@searchspring/snap-event-manager": "^0.58.3",
58
+ "@searchspring/snap-logger": "^0.58.3",
59
+ "@searchspring/snap-profiler": "^0.58.3",
60
+ "@searchspring/snap-store-mobx": "^0.58.3",
61
+ "@searchspring/snap-tracker": "^0.58.3",
62
+ "@searchspring/snap-url-manager": "^0.58.3",
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": "4b2be249e619f0041f4cfe779688e7b9aba6def5"
87
+ "gitHead": "d46572dc3453d97aac5ebc3d6c2d41333539de2e"
88
88
  }