@searchspring/snap-preact-components 0.72.2 → 0.73.5

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 (49) hide show
  1. package/dist/cjs/components/Atoms/Merchandising/Banner/Banner.d.ts +3 -2
  2. package/dist/cjs/components/Atoms/Merchandising/Banner/Banner.d.ts.map +1 -1
  3. package/dist/cjs/components/Atoms/Merchandising/Banner/Banner.js +12 -12
  4. package/dist/cjs/components/Atoms/Merchandising/InlineBanner/InlineBanner.d.ts +3 -1
  5. package/dist/cjs/components/Atoms/Merchandising/InlineBanner/InlineBanner.d.ts.map +1 -1
  6. package/dist/cjs/components/Atoms/Merchandising/InlineBanner/InlineBanner.js +5 -5
  7. package/dist/cjs/components/Molecules/Result/Result.d.ts +1 -1
  8. package/dist/cjs/components/Molecules/Result/Result.d.ts.map +1 -1
  9. package/dist/cjs/components/Molecules/Result/Result.js +3 -2
  10. package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.d.ts.map +1 -1
  11. package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.js +1 -1
  12. package/dist/cjs/components/Organisms/Results/Results.d.ts.map +1 -1
  13. package/dist/cjs/components/Organisms/Results/Results.js +3 -4
  14. package/dist/cjs/components/Trackers/ResultTracker/ResultTracker.d.ts +0 -1
  15. package/dist/cjs/components/Trackers/ResultTracker/ResultTracker.d.ts.map +1 -1
  16. package/dist/cjs/components/Trackers/ResultTracker/ResultTracker.js +2 -8
  17. package/dist/cjs/hooks/useIntersectionAdvanced.d.ts.map +1 -1
  18. package/dist/cjs/hooks/useIntersectionAdvanced.js +1 -0
  19. package/dist/cjs/hooks/useTracking.d.ts +5 -2
  20. package/dist/cjs/hooks/useTracking.d.ts.map +1 -1
  21. package/dist/cjs/hooks/useTracking.js +17 -8
  22. package/dist/cjs/providers/withTracking.d.ts +6 -1
  23. package/dist/cjs/providers/withTracking.d.ts.map +1 -1
  24. package/dist/cjs/providers/withTracking.js +24 -14
  25. package/dist/esm/components/Atoms/Merchandising/Banner/Banner.d.ts +3 -2
  26. package/dist/esm/components/Atoms/Merchandising/Banner/Banner.d.ts.map +1 -1
  27. package/dist/esm/components/Atoms/Merchandising/Banner/Banner.js +12 -11
  28. package/dist/esm/components/Atoms/Merchandising/InlineBanner/InlineBanner.d.ts +3 -1
  29. package/dist/esm/components/Atoms/Merchandising/InlineBanner/InlineBanner.d.ts.map +1 -1
  30. package/dist/esm/components/Atoms/Merchandising/InlineBanner/InlineBanner.js +6 -5
  31. package/dist/esm/components/Molecules/Result/Result.d.ts +1 -1
  32. package/dist/esm/components/Molecules/Result/Result.d.ts.map +1 -1
  33. package/dist/esm/components/Molecules/Result/Result.js +4 -3
  34. package/dist/esm/components/Organisms/Autocomplete/Autocomplete.d.ts.map +1 -1
  35. package/dist/esm/components/Organisms/Autocomplete/Autocomplete.js +1 -0
  36. package/dist/esm/components/Organisms/Results/Results.d.ts.map +1 -1
  37. package/dist/esm/components/Organisms/Results/Results.js +4 -3
  38. package/dist/esm/components/Trackers/ResultTracker/ResultTracker.d.ts +0 -1
  39. package/dist/esm/components/Trackers/ResultTracker/ResultTracker.d.ts.map +1 -1
  40. package/dist/esm/components/Trackers/ResultTracker/ResultTracker.js +2 -8
  41. package/dist/esm/hooks/useIntersectionAdvanced.d.ts.map +1 -1
  42. package/dist/esm/hooks/useIntersectionAdvanced.js +1 -0
  43. package/dist/esm/hooks/useTracking.d.ts +5 -2
  44. package/dist/esm/hooks/useTracking.d.ts.map +1 -1
  45. package/dist/esm/hooks/useTracking.js +17 -8
  46. package/dist/esm/providers/withTracking.d.ts +6 -1
  47. package/dist/esm/providers/withTracking.d.ts.map +1 -1
  48. package/dist/esm/providers/withTracking.js +25 -12
  49. package/package.json +11 -11
package/dist/cjs/components/Atoms/Merchandising/Banner/Banner.d.ts CHANGED
@@ -1,9 +1,10 @@
1
- /// <reference types="react" />
2
1
  import { ComponentProps } from '../../../../types';
3
2
  import { BannerContent, ContentType } from '@searchspring/snap-store-mobx';
4
- export declare function Banner(properties: BannerProps): JSX.Element;
3
+ import type { SearchController, AutocompleteController, RecommendationController } from '@searchspring/snap-controller';
4
+ export declare const Banner: any;
5
5
  export interface BannerProps extends ComponentProps {
6
6
  content: BannerContent;
7
7
  type: ContentType;
8
+ controller?: SearchController | AutocompleteController | RecommendationController;
8
9
  }
9
10
  //# sourceMappingURL=Banner.d.ts.map
package/dist/cjs/components/Atoms/Merchandising/Banner/Banner.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Atoms/Merchandising/Banner/Banner.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,cAAc,EAAc,MAAM,mBAAmB,CAAC;AAE/D,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAY3E,wBAAgB,MAAM,CAAC,UAAU,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA0C3D;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,OAAO,EAAE,aAAa,CAAC;IACvB,IAAI,EAAE,WAAW,CAAC;CAClB"}
1
+ {"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Atoms/Merchandising/Banner/Banner.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAc,MAAM,mBAAmB,CAAC;AAE/D,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAWxH,eAAO,MAAM,MAAM,KA4ClB,CAAC;AAEF,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,OAAO,EAAE,aAAa,CAAC;IACvB,IAAI,EAAE,WAAW,CAAC;IAClB,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}
package/dist/cjs/components/Atoms/Merchandising/Banner/Banner.js CHANGED
@@ -31,11 +31,11 @@ var CSS = {
31
31
  });
32
32
  },
33
33
  };
34
- function Banner(properties) {
35
- var _a, _b, _c;
34
+ exports.Banner = (0, providers_1.withController)((0, providers_1.withTracking)(function (properties) {
35
+ var _a, _b, _c, _d;
36
36
  var globalTheme = (0, providers_1.useTheme)();
37
37
  var props = __assign(__assign(__assign({}, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.banner), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.banner);
38
- var content = props.content, type = props.type, disableStyles = props.disableStyles, className = props.className, style = props.style;
38
+ var trackingRef = props.trackingRef, content = props.content, type = props.type, disableStyles = props.disableStyles, className = props.className, style = props.style;
39
39
  if (type === snap_store_mobx_1.ContentType.INLINE) {
40
40
  console.warn("BannerType '".concat(snap_store_mobx_1.ContentType.INLINE, "' is not supported in <Banner /> component"));
41
41
  return (0, react_1.jsx)(preact_1.Fragment, null);
@@ -47,13 +47,13 @@ function Banner(properties) {
47
47
  else if (style) {
48
48
  styling.css = [style];
49
49
  }
50
- var bannerContent;
51
- if (content && content[type]) {
52
- bannerContent = content[type];
50
+ var banner = (_d = content === null || content === void 0 ? void 0 : content[type]) === null || _d === void 0 ? void 0 : _d[0];
51
+ var value = banner === null || banner === void 0 ? void 0 : banner.value;
52
+ if (!type || !value) {
53
+ return (0, react_1.jsx)(preact_1.Fragment, null);
53
54
  }
54
- return bannerContent && bannerContent.length ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
55
- (0, react_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__banner', "ss__banner--".concat(type), className) }, styling, { dangerouslySetInnerHTML: {
56
- __html: bannerContent.join(''),
57
- } })))) : ((0, react_1.jsx)(preact_1.Fragment, null));
58
- }
59
- exports.Banner = Banner;
55
+ return ((0, react_1.jsx)(providers_1.CacheProvider, null,
56
+ (0, react_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__banner', "ss__banner--".concat(type), className) }, styling, { ref: trackingRef, dangerouslySetInnerHTML: {
57
+ __html: typeof value === 'string' ? value : value.join(''),
58
+ } }))));
59
+ }));
package/dist/cjs/components/Atoms/Merchandising/InlineBanner/InlineBanner.d.ts CHANGED
@@ -1,11 +1,13 @@
1
1
  /// <reference types="react" />
2
2
  import { ComponentProps, LayoutType } from '../../../../types';
3
+ import type { SearchController, AutocompleteController, RecommendationController } from '@searchspring/snap-controller';
3
4
  import type { Banner } from '@searchspring/snap-store-mobx';
4
- export declare function InlineBanner(properties: InlineBannerProps): JSX.Element;
5
+ export declare const InlineBanner: any;
5
6
  export interface InlineBannerProps extends ComponentProps {
6
7
  banner: Banner;
7
8
  width?: string;
8
9
  layout?: LayoutType;
9
10
  onClick?: (e: React.MouseEvent, banner: Banner) => void;
11
+ controller?: SearchController | AutocompleteController | RecommendationController;
10
12
  }
11
13
  //# sourceMappingURL=InlineBanner.d.ts.map
package/dist/cjs/components/Atoms/Merchandising/InlineBanner/InlineBanner.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InlineBanner.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Atoms/Merchandising/InlineBanner/InlineBanner.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,cAAc,EAAU,UAAU,EAAc,MAAM,mBAAmB,CAAC;AAEnF,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAyB5D,wBAAgB,YAAY,CAAC,UAAU,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAuCvE;AAED,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACxD"}
1
+ {"version":3,"file":"InlineBanner.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Atoms/Merchandising/InlineBanner/InlineBanner.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAU,UAAU,EAAc,MAAM,mBAAmB,CAAC;AACnF,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAExH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAyB5D,eAAO,MAAM,YAAY,KA4CxB,CAAC;AAEF,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}
package/dist/cjs/components/Atoms/Merchandising/InlineBanner/InlineBanner.js CHANGED
@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
17
17
  exports.InlineBanner = void 0;
18
18
  /** @jsx jsx */
19
19
  var preact_1 = require("preact");
20
+ var mobx_react_1 = require("mobx-react");
20
21
  var react_1 = require("@emotion/react");
21
22
  var classnames_1 = __importDefault(require("classnames"));
22
23
  var providers_1 = require("../../../../providers");
@@ -45,13 +46,13 @@ var CSS = {
45
46
  });
46
47
  },
47
48
  };
48
- function InlineBanner(properties) {
49
+ exports.InlineBanner = (0, providers_1.withController)((0, providers_1.withTracking)((0, mobx_react_1.observer)(function (properties) {
49
50
  var _a, _b, _c;
50
51
  var globalTheme = (0, providers_1.useTheme)();
51
52
  var props = __assign(__assign(__assign({
52
53
  // default props
53
54
  layout: types_1.Layout.GRID, width: 'auto' }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.inlineBanner), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.inlineBanner);
54
- var banner = props.banner, disableStyles = props.disableStyles, className = props.className, width = props.width, layout = props.layout, onClick = props.onClick, style = props.style;
55
+ var trackingRef = props.trackingRef, banner = props.banner, disableStyles = props.disableStyles, className = props.className, width = props.width, layout = props.layout, onClick = props.onClick, style = props.style;
55
56
  var styling = {};
56
57
  if (!disableStyles) {
57
58
  styling.css = [CSS.inlineBanner({ width: width }), style];
@@ -62,8 +63,7 @@ function InlineBanner(properties) {
62
63
  return banner && banner.value ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
63
64
  (0, react_1.jsx)("div", __assign({ onClick: function (e) {
64
65
  onClick && onClick(e, banner);
65
- }, className: (0, classnames_1.default)('ss__inline-banner', "ss__inline-banner--".concat(layout), className) }, styling, { dangerouslySetInnerHTML: {
66
+ }, className: (0, classnames_1.default)('ss__inline-banner', "ss__inline-banner--".concat(layout), className) }, styling, { ref: trackingRef, dangerouslySetInnerHTML: {
66
67
  __html: banner.value,
67
68
  } })))) : ((0, react_1.jsx)(preact_1.Fragment, null));
68
- }
69
- exports.InlineBanner = InlineBanner;
69
+ })));
package/dist/cjs/components/Molecules/Result/Result.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  import { ComponentProps, LayoutType } from '../../../types';
3
3
  import type { SearchController, AutocompleteController, RecommendationController } from '@searchspring/snap-controller';
4
4
  import type { Product } from '@searchspring/snap-store-mobx';
5
- export declare const Result: (properties: ResultProps) => JSX.Element;
5
+ export declare const Result: any;
6
6
  interface TruncateTitleProps {
7
7
  limit: number;
8
8
  append?: string;
package/dist/cjs/components/Molecules/Result/Result.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Result.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Result/Result.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAsB,MAAM,gBAAgB,CAAC;AAGhF,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AA4D7D,eAAO,MAAM,MAAM,eAAyB,WAAW,KAAG,WAmKxD,CAAC;AAQH,UAAU,kBAAkB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;IAClE,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}
1
+ {"version":3,"file":"Result.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Result/Result.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAsB,MAAM,gBAAgB,CAAC;AAIhF,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AA4D7D,eAAO,MAAM,MAAM,KAuKlB,CAAC;AAQF,UAAU,kBAAkB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;IAClE,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}
package/dist/cjs/components/Molecules/Result/Result.js CHANGED
@@ -28,6 +28,7 @@ var snap_toolbox_1 = require("@searchspring/snap-toolbox");
28
28
  var types_1 = require("../../../types");
29
29
  var CalloutBadge_1 = require("../../Molecules/CalloutBadge");
30
30
  var OverlayBadge_1 = require("../../Molecules/OverlayBadge");
31
+ var providers_2 = require("../../../providers");
31
32
  var CSS = {
32
33
  result: function () {
33
34
  return (0, react_1.css)({
@@ -82,7 +83,7 @@ var CSS = {
82
83
  });
83
84
  },
84
85
  };
85
- exports.Result = (0, mobx_react_1.observer)(function (properties) {
86
+ exports.Result = (0, providers_1.withController)((0, providers_2.withTracking)((0, mobx_react_1.observer)(function (properties) {
86
87
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
87
88
  var globalTheme = (0, providers_1.useTheme)();
88
89
  var props = __assign(__assign(__assign({
@@ -155,4 +156,4 @@ exports.Result = (0, mobx_react_1.observer)(function (properties) {
155
156
  "\u00A0",
156
157
  (0, react_1.jsx)(Price_1.Price, __assign({}, subProps.price, { value: core.price })))) : ((0, react_1.jsx)(Price_1.Price, __assign({}, subProps.price, { value: core.price }))))),
157
158
  (0, utilities_1.cloneWithProps)(detailSlot, { result: result }))))) : ((0, react_1.jsx)(preact_1.Fragment, null));
158
- });
159
+ })));
package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":";AASA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAU5E,OAAO,EAAE,cAAc,EAAgB,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAsJ5F,eAAO,MAAM,YAAY,eAAyB,iBAAiB,KAAG,WAidpE,CAAC;AAoCH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,UAAU,EAAE,sBAAsB,CAAC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACjE"}
1
+ {"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":";AASA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAU5E,OAAO,EAAE,cAAc,EAAgB,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAsJ5F,eAAO,MAAM,YAAY,eAAyB,iBAAiB,KAAG,WAkdpE,CAAC;AAoCH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,UAAU,EAAE,sBAAsB,CAAC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACjE"}
package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.js CHANGED
@@ -245,7 +245,7 @@ exports.Autocomplete = (0, mobx_react_1.observer)(function (properties) {
245
245
  })), { theme: props.theme }),
246
246
  banner: __assign(__assign(__assign({
247
247
  // default props
248
- className: 'ss__autocomplete__banner' }, (_m = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _m === void 0 ? void 0 : _m.banner), (0, utilities_1.defined)({
248
+ className: 'ss__autocomplete__banner', controller: controller }, (_m = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _m === void 0 ? void 0 : _m.banner), (0, utilities_1.defined)({
249
249
  disableStyles: disableStyles,
250
250
  })), {
251
251
  // component theme overrides
package/dist/cjs/components/Organisms/Results/Results.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Results.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Results/Results.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,iBAAiB,EAAmB,MAAM,+BAA+B,CAAC;AAIxF,OAAO,EAAE,cAAc,EAAU,UAAU,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAgClG,eAAO,MAAM,OAAO,eAAyB,WAAW,KAAG,WA4GzD,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}
1
+ {"version":3,"file":"Results.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Results/Results.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,iBAAiB,EAAmB,MAAM,+BAA+B,CAAC;AAIxF,OAAO,EAAE,cAAc,EAAU,UAAU,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AA8BlG,eAAO,MAAM,OAAO,eAAyB,WAAW,KAAG,WAsGzD,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}
package/dist/cjs/components/Organisms/Results/Results.js CHANGED
@@ -52,7 +52,6 @@ var CSS = {
52
52
  });
53
53
  },
54
54
  };
55
- var ResultComponent = (0, providers_1.withTracking)(Result_1.Result);
56
55
  exports.Results = (0, mobx_react_1.observer)(function (properties) {
57
56
  var _a, _b, _c, _d, _e, _f, _g, _h;
58
57
  var globalTheme = (0, providers_1.useTheme)();
@@ -80,14 +79,14 @@ exports.Results = (0, mobx_react_1.observer)(function (properties) {
80
79
  var subProps = {
81
80
  result: __assign(__assign(__assign({
82
81
  // default props
83
- className: 'ss__results__result' }, (_f = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _f === void 0 ? void 0 : _f.result), (0, utilities_1.defined)({
82
+ className: 'ss__results__result', controller: controller }, (_f = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _f === void 0 ? void 0 : _f.result), (0, utilities_1.defined)({
84
83
  disableStyles: disableStyles,
85
84
  })), {
86
85
  // component theme overrides
87
86
  theme: props === null || props === void 0 ? void 0 : props.theme }),
88
87
  inlineBanner: __assign(__assign(__assign({
89
88
  // default props
90
- className: 'ss__results__inline-banner' }, (_g = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _g === void 0 ? void 0 : _g.inlineBanner), (0, utilities_1.defined)({
89
+ className: 'ss__results__inline-banner', controller: controller }, (_g = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _g === void 0 ? void 0 : _g.inlineBanner), (0, utilities_1.defined)({
91
90
  disableStyles: disableStyles,
92
91
  })), {
93
92
  // component theme overrides
@@ -111,7 +110,7 @@ exports.Results = (0, mobx_react_1.observer)(function (properties) {
111
110
  case snap_store_mobx_1.ContentType.BANNER:
112
111
  return (0, react_1.jsx)(InlineBanner_1.InlineBanner, __assign({}, subProps.inlineBanner, { key: result.id, banner: result, layout: props.layout }));
113
112
  default:
114
- return ((0, react_1.jsx)(ResultComponent, __assign({ key: result.id }, subProps.result, { result: result, layout: props.layout, controller: controller })));
113
+ return (0, react_1.jsx)(Result_1.Result, __assign({ key: result.id }, subProps.result, { result: result, layout: props.layout }));
115
114
  }
116
115
  })();
117
116
  })))) : ((0, react_1.jsx)(preact_1.Fragment, null));
package/dist/cjs/components/Trackers/ResultTracker/ResultTracker.d.ts CHANGED
@@ -10,7 +10,6 @@ export interface ResultTrackerProps extends ComponentProps {
10
10
  result: Product | Banner;
11
11
  controller: SearchController | AutocompleteController | RecommendationController;
12
12
  track?: {
13
- render?: boolean;
14
13
  impression?: boolean;
15
14
  click?: boolean;
16
15
  };
package/dist/cjs/components/Trackers/ResultTracker/ResultTracker.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ResultTracker.d.ts","sourceRoot":"","sources":["../../../../../src/components/Trackers/ResultTracker/ResultTracker.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAI9C,OAAO,KAAK,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AASrE,eAAO,MAAM,aAAa,eAAyB,kBAAkB,KAAG,WAsDtE,CAAC;AAEH,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACzD,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IACjF,KAAK,CAAC,EAAE;QACP,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,KAAK,CAAC,EAAE,OAAO,CAAC;KAChB,CAAC;CACF"}
1
+ {"version":3,"file":"ResultTracker.d.ts","sourceRoot":"","sources":["../../../../../src/components/Trackers/ResultTracker/ResultTracker.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAI9C,OAAO,KAAK,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AASrE,eAAO,MAAM,aAAa,eAAyB,kBAAkB,KAAG,WAiDtE,CAAC;AAEH,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACzD,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IACjF,KAAK,CAAC,EAAE;QACP,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,KAAK,CAAC,EAAE,OAAO,CAAC;KAChB,CAAC;CACF"}
package/dist/cjs/components/Trackers/ResultTracker/ResultTracker.js CHANGED
@@ -27,7 +27,6 @@ exports.ResultTracker = (0, mobx_react_1.observer)(function (properties) {
27
27
  var _a, _b, _c;
28
28
  var globalTheme = (0, providers_1.useTheme)();
29
29
  var defaultTrack = {
30
- render: true,
31
30
  impression: true,
32
31
  click: true,
33
32
  };
@@ -36,12 +35,7 @@ exports.ResultTracker = (0, mobx_react_1.observer)(function (properties) {
36
35
  var mergedTrack = __assign(__assign({}, defaultTrack), track);
37
36
  var _d = (0, utilities_1.createImpressionObserver)(), ref = _d.ref, inViewport = _d.inViewport;
38
37
  if (inViewport && mergedTrack.impression) {
39
- if (result.type === 'product') {
40
- controller === null || controller === void 0 ? void 0 : controller.track.product.impression(result);
41
- }
42
- else {
43
- // track banner in future
44
- }
38
+ controller === null || controller === void 0 ? void 0 : controller.track.product.impression(result);
45
39
  }
46
40
  var styling = {};
47
41
  if (!disableStyles) {
@@ -51,7 +45,7 @@ exports.ResultTracker = (0, mobx_react_1.observer)(function (properties) {
51
45
  styling.css = [style];
52
46
  }
53
47
  return ((0, react_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__result-tracker', "ss__".concat(controller === null || controller === void 0 ? void 0 : controller.type, "-result-tracker"), className), onClick: function (e) {
54
- if (result.type === 'product' && mergedTrack.click) {
48
+ if (mergedTrack.click) {
55
49
  controller === null || controller === void 0 ? void 0 : controller.track.product.click(e, result);
56
50
  }
57
51
  }, ref: ref }, styling), children));
package/dist/cjs/hooks/useIntersectionAdvanced.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useIntersectionAdvanced.d.ts","sourceRoot":"","sources":["../../../src/hooks/useIntersectionAdvanced.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,UAAU,EAAE,MAAM,cAAc,CAAC;AAEvE,MAAM,WAAW,sBAAsB;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAGD,eAAO,MAAM,uBAAuB,QAAS,WAAW,WAAW,GAAG,IAAI,CAAC,YAAW,sBAAsB,KAAQ,OAqInH,CAAC"}
1
+ {"version":3,"file":"useIntersectionAdvanced.d.ts","sourceRoot":"","sources":["../../../src/hooks/useIntersectionAdvanced.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,UAAU,EAAE,MAAM,cAAc,CAAC;AAEvE,MAAM,WAAW,sBAAsB;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAGD,eAAO,MAAM,uBAAuB,QAAS,WAAW,WAAW,GAAG,IAAI,CAAC,YAAW,sBAAsB,KAAQ,OAsInH,CAAC"}
package/dist/cjs/hooks/useIntersectionAdvanced.js CHANGED
@@ -23,6 +23,7 @@ var useIntersectionAdvanced = function (ref, options) {
23
23
  }
24
24
  visibleStartRef.current = null;
25
25
  lastResetKeyRef.current = resetKey;
26
+ return false;
26
27
  }
27
28
  (0, hooks_1.useEffect)(function () {
28
29
  setIntersecting(false);
package/dist/cjs/hooks/useTracking.d.ts CHANGED
@@ -1,11 +1,14 @@
1
- import { Product } from '@searchspring/snap-store-mobx';
1
+ import { Banner, BannerContent, ContentType, Product } from '@searchspring/snap-store-mobx';
2
2
  import type { SearchController, AutocompleteController, RecommendationController } from '@searchspring/snap-controller';
3
3
  import { type Ref } from 'preact/hooks';
4
4
  interface UseTrackingProps {
5
5
  controller: SearchController | AutocompleteController | RecommendationController;
6
6
  result: Product;
7
+ banner?: Banner;
8
+ type?: ContentType;
9
+ content?: BannerContent;
7
10
  }
8
- export declare function useTracking({ controller, result }: UseTrackingProps): {
11
+ export declare function useTracking({ controller, result, banner, type, content }: UseTrackingProps): {
9
12
  trackingRef: Ref<HTMLElement | null>;
10
13
  };
11
14
  export {};
package/dist/cjs/hooks/useTracking.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useTracking.d.ts","sourceRoot":"","sources":["../../../src/hooks/useTracking.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,EAAa,KAAK,GAAG,EAAE,MAAM,cAAc,CAAC;AAGnD,UAAU,gBAAgB;IACzB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IACjF,MAAM,EAAE,OAAO,CAAC;CAChB;AAED,wBAAgB,WAAW,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,gBAAgB,GAAG;IAAE,WAAW,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAAE,CAuC9G"}
1
+ {"version":3,"file":"useTracking.d.ts","sourceRoot":"","sources":["../../../src/hooks/useTracking.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,WAAW,EAA8B,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,EAAa,KAAK,GAAG,EAAE,MAAM,cAAc,CAAC;AAInD,UAAU,gBAAgB;IACzB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IACjF,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,wBAAgB,WAAW,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,gBAAgB,GAAG;IAAE,WAAW,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAAE,CA4CrI"}
package/dist/cjs/hooks/useTracking.js CHANGED
@@ -3,39 +3,48 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useTracking = void 0;
4
4
  var hooks_1 = require("preact/hooks");
5
5
  var utilities_1 = require("../utilities");
6
+ var withTracking_1 = require("../providers/withTracking");
6
7
  function useTracking(_a) {
7
- var controller = _a.controller, result = _a.result;
8
+ var controller = _a.controller, result = _a.result, banner = _a.banner, type = _a.type, content = _a.content;
8
9
  if (!controller) {
9
10
  console.warn('Warning: No controller provided to useTracking');
10
11
  }
11
12
  if (!result) {
12
13
  console.warn('Warning: No result provided to useTracking');
13
14
  }
15
+ if (!result && !banner && (!type || !content)) {
16
+ console.warn('Warning: No result or banner provided to withTracking');
17
+ }
14
18
  var _b = (0, utilities_1.createImpressionObserver)(), ref = _b.ref, inViewport = _b.inViewport;
15
19
  (0, hooks_1.useEffect)(function () {
16
20
  if (inViewport) {
17
21
  // TODO: add support for disabling tracking events via config like in ResultTracker
18
- if (result.type === 'product') {
19
- controller === null || controller === void 0 ? void 0 : controller.track.product.impression(result);
22
+ if (type && content && !result && ['search', 'autocomplete'].includes((controller === null || controller === void 0 ? void 0 : controller.type) || '')) {
23
+ controller === null || controller === void 0 ? void 0 : controller.track.banner.impression(content[type][0]);
20
24
  }
21
- else {
22
- // track banner in future
25
+ else if (!(result === null || result === void 0 ? void 0 : result.bundleSeed)) {
26
+ controller === null || controller === void 0 ? void 0 : controller.track.product.impression((result || banner));
23
27
  }
24
28
  }
25
29
  }, [inViewport]);
26
30
  (0, hooks_1.useEffect)(function () {
27
31
  var currentRef = ref.current;
28
32
  if (currentRef) {
29
- currentRef.setAttribute('sstracking', 'true');
30
33
  var handleClick_1 = function (e) {
31
- controller === null || controller === void 0 ? void 0 : controller.track.product.click(e, result);
34
+ if (type && content && !result && ['search', 'autocomplete'].includes((controller === null || controller === void 0 ? void 0 : controller.type) || '')) {
35
+ controller === null || controller === void 0 ? void 0 : controller.track.banner.click(e, content[type][0]);
36
+ }
37
+ else {
38
+ controller === null || controller === void 0 ? void 0 : controller.track.product.click(e, (result || banner));
39
+ }
32
40
  };
41
+ currentRef.setAttribute(withTracking_1.TRACKING_ATTRIBUTE, 'true');
33
42
  currentRef.addEventListener('click', handleClick_1);
34
43
  return function () {
35
44
  currentRef.removeEventListener('click', handleClick_1);
36
45
  };
37
46
  }
38
- }, [result]);
47
+ }, [controller, result, banner, type, content]);
39
48
  return { trackingRef: ref };
40
49
  }
41
50
  exports.useTracking = useTracking;
package/dist/cjs/providers/withTracking.d.ts CHANGED
@@ -1,9 +1,14 @@
1
1
  import { ComponentType, FunctionComponent } from 'preact';
2
- import type { Product } from '@searchspring/snap-store-mobx';
2
+ import type { Banner, Product } from '@searchspring/snap-store-mobx';
3
3
  import type { SearchController, AutocompleteController, RecommendationController } from '@searchspring/snap-controller';
4
+ import type { ContentType, BannerContent } from '@searchspring/snap-store-mobx';
5
+ export declare const TRACKING_ATTRIBUTE = "sstracking";
4
6
  interface WithTrackingProps {
5
7
  controller?: SearchController | AutocompleteController | RecommendationController;
6
8
  result?: Product;
9
+ banner?: Banner;
10
+ type?: ContentType;
11
+ content?: BannerContent;
7
12
  [key: string]: any;
8
13
  }
9
14
  export declare function withTracking<Props extends WithTrackingProps>(WrappedComponent: ComponentType<Props>): FunctionComponent<Props>;
package/dist/cjs/providers/withTracking.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"withTracking.d.ts","sourceRoot":"","sources":["../../../src/providers/withTracking.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,aAAa,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAC7D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAC7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAIxH,UAAU,iBAAiB;IAC1B,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IAClF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACnB;AAED,wBAAgB,YAAY,CAAC,KAAK,SAAS,iBAAiB,EAAE,gBAAgB,EAAE,aAAa,CAAC,KAAK,CAAC,4BAqEnG"}
1
+ {"version":3,"file":"withTracking.d.ts","sourceRoot":"","sources":["../../../src/providers/withTracking.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,aAAa,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAC7D,OAAO,KAAK,EAAE,MAAM,EAA8B,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACjG,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAIhF,eAAO,MAAM,kBAAkB,eAAe,CAAC;AAC/C,UAAU,iBAAiB;IAC1B,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IAClF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACnB;AAED,wBAAgB,YAAY,CAAC,KAAK,SAAS,iBAAiB,EAAE,gBAAgB,EAAE,aAAa,CAAC,KAAK,CAAC,4BAiFnG"}
package/dist/cjs/providers/withTracking.js CHANGED
@@ -22,19 +22,24 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  return t;
23
23
  };
24
24
  Object.defineProperty(exports, "__esModule", { value: true });
25
- exports.withTracking = void 0;
25
+ exports.withTracking = exports.TRACKING_ATTRIBUTE = void 0;
26
26
  var preact_1 = require("preact");
27
27
  var utilities_1 = require("../utilities");
28
28
  var hooks_1 = require("preact/hooks");
29
+ exports.TRACKING_ATTRIBUTE = 'sstracking';
29
30
  function withTracking(WrappedComponent) {
30
31
  var WithTracking = function (props) {
31
32
  var _a;
32
- var controller = props.controller, result = props.result, restProps = __rest(props, ["controller", "result"]);
33
- if (!controller) {
34
- console.warn('Warning: No controller provided to withTracking');
33
+ var controller = props.controller, result = props.result, banner = props.banner, type = props.type, content = props.content, restProps = __rest(props, ["controller", "result", "banner", "type", "content"]);
34
+ if (props.trackingRef) {
35
+ // case where withTracking may get used more than once
36
+ return (0, preact_1.h)(WrappedComponent, __assign({}, props));
35
37
  }
36
- if (!result) {
37
- console.warn('Warning: No result provided to withTracking');
38
+ if (!controller && (!type || !content)) {
39
+ console.warn('Warning: No controller provided to withTracking', props);
40
+ }
41
+ if (!result && !banner && (!type || !content)) {
42
+ console.warn('Warning: No result or banner provided to withTracking');
38
43
  }
39
44
  var resetKey;
40
45
  if ((controller === null || controller === void 0 ? void 0 : controller.type) === 'search' || (controller === null || controller === void 0 ? void 0 : controller.type) === 'autocomplete') {
@@ -58,27 +63,32 @@ function withTracking(WrappedComponent) {
58
63
  var _b = (0, utilities_1.createImpressionObserver)({ resetKey: resetKey }), ref = _b.ref, inViewport = _b.inViewport;
59
64
  if (inViewport) {
60
65
  // TODO: add support for disabling tracking events via config like in ResultTracker
61
- if ((result === null || result === void 0 ? void 0 : result.type) === 'product' && !(result === null || result === void 0 ? void 0 : result.bundleSeed)) {
62
- controller === null || controller === void 0 ? void 0 : controller.track.product.impression(result);
66
+ if (type && content && !result && ['search', 'autocomplete'].includes((controller === null || controller === void 0 ? void 0 : controller.type) || '')) {
67
+ controller === null || controller === void 0 ? void 0 : controller.track.banner.impression(content[type][0]);
63
68
  }
64
- else {
65
- // track banner in future
69
+ else if (!(result === null || result === void 0 ? void 0 : result.bundleSeed)) {
70
+ controller === null || controller === void 0 ? void 0 : controller.track.product.impression((result || banner));
66
71
  }
67
72
  }
68
73
  var handleClick = (0, hooks_1.useCallback)(function (e) {
69
- controller === null || controller === void 0 ? void 0 : controller.track.product.click(e, result);
70
- }, [controller, result]);
74
+ if (type && content && !result && ['search', 'autocomplete'].includes((controller === null || controller === void 0 ? void 0 : controller.type) || '')) {
75
+ controller === null || controller === void 0 ? void 0 : controller.track.banner.click(e, content[type][0]);
76
+ }
77
+ else {
78
+ controller === null || controller === void 0 ? void 0 : controller.track.product.click(e, (result || banner));
79
+ }
80
+ }, [controller, result, banner, type, content]);
71
81
  (0, hooks_1.useEffect)(function () {
72
82
  var currentRef = ref.current;
73
83
  if (currentRef) {
74
- currentRef.setAttribute('sstracking', 'true');
84
+ currentRef.setAttribute(exports.TRACKING_ATTRIBUTE, 'true');
75
85
  currentRef.addEventListener('click', handleClick, true); // Use capture phase
76
86
  return function () {
77
87
  currentRef.removeEventListener('click', handleClick, true);
78
88
  };
79
89
  }
80
90
  }, [ref, handleClick]);
81
- var trackingProps = __assign(__assign({}, restProps), { controller: controller, result: result, trackingRef: ref });
91
+ var trackingProps = __assign(__assign({}, restProps), { controller: controller, result: result, banner: banner, type: type, content: content, trackingRef: ref });
82
92
  return (0, preact_1.h)(WrappedComponent, __assign({}, trackingProps));
83
93
  };
84
94
  return WithTracking;
package/dist/esm/components/Atoms/Merchandising/Banner/Banner.d.ts CHANGED
@@ -1,9 +1,10 @@
1
- /// <reference types="react" />
2
1
  import { ComponentProps } from '../../../../types';
3
2
  import { BannerContent, ContentType } from '@searchspring/snap-store-mobx';
4
- export declare function Banner(properties: BannerProps): JSX.Element;
3
+ import type { SearchController, AutocompleteController, RecommendationController } from '@searchspring/snap-controller';
4
+ export declare const Banner: any;
5
5
  export interface BannerProps extends ComponentProps {
6
6
  content: BannerContent;
7
7
  type: ContentType;
8
+ controller?: SearchController | AutocompleteController | RecommendationController;
8
9
  }
9
10
  //# sourceMappingURL=Banner.d.ts.map
package/dist/esm/components/Atoms/Merchandising/Banner/Banner.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Atoms/Merchandising/Banner/Banner.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,cAAc,EAAc,MAAM,mBAAmB,CAAC;AAE/D,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAY3E,wBAAgB,MAAM,CAAC,UAAU,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA0C3D;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,OAAO,EAAE,aAAa,CAAC;IACvB,IAAI,EAAE,WAAW,CAAC;CAClB"}
1
+ {"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Atoms/Merchandising/Banner/Banner.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAc,MAAM,mBAAmB,CAAC;AAE/D,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAWxH,eAAO,MAAM,MAAM,KA4ClB,CAAC;AAEF,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,OAAO,EAAE,aAAa,CAAC;IACvB,IAAI,EAAE,WAAW,CAAC;IAClB,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}
package/dist/esm/components/Atoms/Merchandising/Banner/Banner.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 { useTheme, CacheProvider } from '../../../../providers';
5
+ import { useTheme, CacheProvider, withController, withTracking } from '../../../../providers';
6
6
  import { ContentType } from '@searchspring/snap-store-mobx';
7
7
  const CSS = {
8
8
  banner: () => css({
@@ -12,7 +12,7 @@ const CSS = {
12
12
  },
13
13
  }),
14
14
  };
15
- export function Banner(properties) {
15
+ export const Banner = withController(withTracking((properties) => {
16
16
  const globalTheme = useTheme();
17
17
  const props = {
18
18
  // global theme
@@ -21,7 +21,7 @@ export function Banner(properties) {
21
21
  ...properties,
22
22
  ...properties.theme?.components?.banner,
23
23
  };
24
- const { content, type, disableStyles, className, style } = props;
24
+ const { trackingRef, content, type, disableStyles, className, style } = props;
25
25
  if (type === ContentType.INLINE) {
26
26
  console.warn(`BannerType '${ContentType.INLINE}' is not supported in <Banner /> component`);
27
27
  return jsx(Fragment, null);
@@ -33,12 +33,13 @@ export function Banner(properties) {
33
33
  else if (style) {
34
34
  styling.css = [style];
35
35
  }
36
- let bannerContent;
37
- if (content && content[type]) {
38
- bannerContent = content[type];
36
+ const banner = content?.[type]?.[0];
37
+ const value = banner?.value;
38
+ if (!type || !value) {
39
+ return jsx(Fragment, null);
39
40
  }
40
- return bannerContent && bannerContent.length ? (jsx(CacheProvider, null,
41
- jsx("div", { className: classnames('ss__banner', `ss__banner--${type}`, className), ...styling, dangerouslySetInnerHTML: {
42
- __html: bannerContent.join(''),
43
- } }))) : (jsx(Fragment, null));
44
- }
41
+ return (jsx(CacheProvider, null,
42
+ jsx("div", { className: classnames('ss__banner', `ss__banner--${type}`, className), ...styling, ref: trackingRef, dangerouslySetInnerHTML: {
43
+ __html: typeof value === 'string' ? value : value.join(''),
44
+ } })));
45
+ }));
package/dist/esm/components/Atoms/Merchandising/InlineBanner/InlineBanner.d.ts CHANGED
@@ -1,11 +1,13 @@
1
1
  /// <reference types="react" />
2
2
  import { ComponentProps, LayoutType } from '../../../../types';
3
+ import type { SearchController, AutocompleteController, RecommendationController } from '@searchspring/snap-controller';
3
4
  import type { Banner } from '@searchspring/snap-store-mobx';
4
- export declare function InlineBanner(properties: InlineBannerProps): JSX.Element;
5
+ export declare const InlineBanner: any;
5
6
  export interface InlineBannerProps extends ComponentProps {
6
7
  banner: Banner;
7
8
  width?: string;
8
9
  layout?: LayoutType;
9
10
  onClick?: (e: React.MouseEvent, banner: Banner) => void;
11
+ controller?: SearchController | AutocompleteController | RecommendationController;
10
12
  }
11
13
  //# sourceMappingURL=InlineBanner.d.ts.map
package/dist/esm/components/Atoms/Merchandising/InlineBanner/InlineBanner.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InlineBanner.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Atoms/Merchandising/InlineBanner/InlineBanner.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,cAAc,EAAU,UAAU,EAAc,MAAM,mBAAmB,CAAC;AAEnF,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAyB5D,wBAAgB,YAAY,CAAC,UAAU,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAuCvE;AAED,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACxD"}
1
+ {"version":3,"file":"InlineBanner.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Atoms/Merchandising/InlineBanner/InlineBanner.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAU,UAAU,EAAc,MAAM,mBAAmB,CAAC;AACnF,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAExH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAyB5D,eAAO,MAAM,YAAY,KA4CxB,CAAC;AAEF,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}
package/dist/esm/components/Atoms/Merchandising/InlineBanner/InlineBanner.js CHANGED
@@ -1,8 +1,9 @@
1
1
  /** @jsx jsx */
2
2
  import { Fragment } from 'preact';
3
+ import { observer } from 'mobx-react';
3
4
  import { jsx, css } from '@emotion/react';
4
5
  import classnames from 'classnames';
5
- import { useTheme, CacheProvider } from '../../../../providers';
6
+ import { useTheme, CacheProvider, withController, withTracking } from '../../../../providers';
6
7
  import { Layout } from '../../../../types';
7
8
  const CSS = {
8
9
  inlineBanner: ({ width }) => css({
@@ -25,7 +26,7 @@ const CSS = {
25
26
  },
26
27
  }),
27
28
  };
28
- export function InlineBanner(properties) {
29
+ export const InlineBanner = withController(withTracking(observer((properties) => {
29
30
  const globalTheme = useTheme();
30
31
  const props = {
31
32
  // default props
@@ -37,7 +38,7 @@ export function InlineBanner(properties) {
37
38
  ...properties,
38
39
  ...properties.theme?.components?.inlineBanner,
39
40
  };
40
- const { banner, disableStyles, className, width, layout, onClick, style } = props;
41
+ const { trackingRef, banner, disableStyles, className, width, layout, onClick, style } = props;
41
42
  const styling = {};
42
43
  if (!disableStyles) {
43
44
  styling.css = [CSS.inlineBanner({ width }), style];
@@ -48,7 +49,7 @@ export function InlineBanner(properties) {
48
49
  return banner && banner.value ? (jsx(CacheProvider, null,
49
50
  jsx("div", { onClick: (e) => {
50
51
  onClick && onClick(e, banner);
51
- }, className: classnames('ss__inline-banner', `ss__inline-banner--${layout}`, className), ...styling, dangerouslySetInnerHTML: {
52
+ }, className: classnames('ss__inline-banner', `ss__inline-banner--${layout}`, className), ...styling, ref: trackingRef, dangerouslySetInnerHTML: {
52
53
  __html: banner.value,
53
54
  } }))) : (jsx(Fragment, null));
54
- }
55
+ })));
package/dist/esm/components/Molecules/Result/Result.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  import { ComponentProps, LayoutType } from '../../../types';
3
3
  import type { SearchController, AutocompleteController, RecommendationController } from '@searchspring/snap-controller';
4
4
  import type { Product } from '@searchspring/snap-store-mobx';
5
- export declare const Result: (properties: ResultProps) => JSX.Element;
5
+ export declare const Result: any;
6
6
  interface TruncateTitleProps {
7
7
  limit: number;
8
8
  append?: string;
package/dist/esm/components/Molecules/Result/Result.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Result.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Result/Result.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAsB,MAAM,gBAAgB,CAAC;AAGhF,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AA4D7D,eAAO,MAAM,MAAM,eAAyB,WAAW,KAAG,WAmKxD,CAAC;AAQH,UAAU,kBAAkB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;IAClE,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}
1
+ {"version":3,"file":"Result.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Result/Result.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAsB,MAAM,gBAAgB,CAAC;AAIhF,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AA4D7D,eAAO,MAAM,MAAM,KAuKlB,CAAC;AAQF,UAAU,kBAAkB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;IAClE,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}
package/dist/esm/components/Molecules/Result/Result.js CHANGED
@@ -5,12 +5,13 @@ import { jsx, css } from '@emotion/react';
5
5
  import classnames from 'classnames';
6
6
  import { Image } from '../../Atoms/Image';
7
7
  import { Price } from '../../Atoms/Price';
8
- import { useTheme, CacheProvider } from '../../../providers';
8
+ import { useTheme, CacheProvider, withController } from '../../../providers';
9
9
  import { defined, cloneWithProps } from '../../../utilities';
10
10
  import { filters } from '@searchspring/snap-toolbox';
11
11
  import { Layout } from '../../../types';
12
12
  import { CalloutBadge } from '../../Molecules/CalloutBadge';
13
13
  import { OverlayBadge } from '../../Molecules/OverlayBadge';
14
+ import { withTracking } from '../../../providers';
14
15
  const CSS = {
15
16
  result: () => css({
16
17
  '&.ss__result--grid': {
@@ -63,7 +64,7 @@ const CSS = {
63
64
  },
64
65
  }),
65
66
  };
66
- export const Result = observer((properties) => {
67
+ export const Result = withController(withTracking(observer((properties) => {
67
68
  const globalTheme = useTheme();
68
69
  const props = {
69
70
  // default props
@@ -162,4 +163,4 @@ export const Result = observer((properties) => {
162
163
  "\u00A0",
163
164
  jsx(Price, { ...subProps.price, value: core.price }))) : (jsx(Price, { ...subProps.price, value: core.price })))),
164
165
  cloneWithProps(detailSlot, { result }))))) : (jsx(Fragment, null));
165
- });
166
+ })));
package/dist/esm/components/Organisms/Autocomplete/Autocomplete.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":";AASA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAU5E,OAAO,EAAE,cAAc,EAAgB,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAsJ5F,eAAO,MAAM,YAAY,eAAyB,iBAAiB,KAAG,WAidpE,CAAC;AAoCH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,UAAU,EAAE,sBAAsB,CAAC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACjE"}
1
+ {"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":";AASA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAU5E,OAAO,EAAE,cAAc,EAAgB,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAsJ5F,eAAO,MAAM,YAAY,eAAyB,iBAAiB,KAAG,WAkdpE,CAAC;AAoCH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,UAAU,EAAE,sBAAsB,CAAC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACjE"}
package/dist/esm/components/Organisms/Autocomplete/Autocomplete.js CHANGED
@@ -245,6 +245,7 @@ export const Autocomplete = observer((properties) => {
245
245
  banner: {
246
246
  // default props
247
247
  className: 'ss__autocomplete__banner',
248
+ controller,
248
249
  // global theme
249
250
  ...globalTheme?.components?.banner,
250
251
  // inherited props
package/dist/esm/components/Organisms/Results/Results.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Results.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Results/Results.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,iBAAiB,EAAmB,MAAM,+BAA+B,CAAC;AAIxF,OAAO,EAAE,cAAc,EAAU,UAAU,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAgClG,eAAO,MAAM,OAAO,eAAyB,WAAW,KAAG,WA4GzD,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}
1
+ {"version":3,"file":"Results.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Results/Results.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,iBAAiB,EAAmB,MAAM,+BAA+B,CAAC;AAIxF,OAAO,EAAE,cAAc,EAAU,UAAU,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AA8BlG,eAAO,MAAM,OAAO,eAAyB,WAAW,KAAG,WAsGzD,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}
package/dist/esm/components/Organisms/Results/Results.js CHANGED
@@ -9,7 +9,7 @@ import { InlineBanner } from '../../Atoms/Merchandising/InlineBanner';
9
9
  import { Result } from '../../Molecules/Result';
10
10
  import { Layout } from '../../../types';
11
11
  import { defined } from '../../../utilities';
12
- import { useTheme, CacheProvider, withTracking } from '../../../providers';
12
+ import { useTheme, CacheProvider } from '../../../providers';
13
13
  import { useDisplaySettings } from '../../../hooks/useDisplaySettings';
14
14
  const CSS = {
15
15
  results: ({ columns, gapSize }) => css({
@@ -32,7 +32,6 @@ const CSS = {
32
32
  },
33
33
  }),
34
34
  };
35
- const ResultComponent = withTracking(Result);
36
35
  export const Results = observer((properties) => {
37
36
  const globalTheme = useTheme();
38
37
  const defaultBreakpointsProps = {
@@ -74,6 +73,7 @@ export const Results = observer((properties) => {
74
73
  result: {
75
74
  // default props
76
75
  className: 'ss__results__result',
76
+ controller,
77
77
  // global theme
78
78
  ...globalTheme?.components?.result,
79
79
  // inherited props
@@ -86,6 +86,7 @@ export const Results = observer((properties) => {
86
86
  inlineBanner: {
87
87
  // default props
88
88
  className: 'ss__results__inline-banner',
89
+ controller,
89
90
  // global theme
90
91
  ...globalTheme?.components?.inlineBanner,
91
92
  // inherited props
@@ -113,7 +114,7 @@ export const Results = observer((properties) => {
113
114
  case ContentType.BANNER:
114
115
  return jsx(InlineBanner, { ...subProps.inlineBanner, key: result.id, banner: result, layout: props.layout });
115
116
  default:
116
- return (jsx(ResultComponent, { key: result.id, ...subProps.result, result: result, layout: props.layout, controller: controller }));
117
+ return jsx(Result, { key: result.id, ...subProps.result, result: result, layout: props.layout });
117
118
  }
118
119
  })())))) : (jsx(Fragment, null));
119
120
  });
package/dist/esm/components/Trackers/ResultTracker/ResultTracker.d.ts CHANGED
@@ -10,7 +10,6 @@ export interface ResultTrackerProps extends ComponentProps {
10
10
  result: Product | Banner;
11
11
  controller: SearchController | AutocompleteController | RecommendationController;
12
12
  track?: {
13
- render?: boolean;
14
13
  impression?: boolean;
15
14
  click?: boolean;
16
15
  };
package/dist/esm/components/Trackers/ResultTracker/ResultTracker.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ResultTracker.d.ts","sourceRoot":"","sources":["../../../../../src/components/Trackers/ResultTracker/ResultTracker.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAI9C,OAAO,KAAK,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AASrE,eAAO,MAAM,aAAa,eAAyB,kBAAkB,KAAG,WAsDtE,CAAC;AAEH,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACzD,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IACjF,KAAK,CAAC,EAAE;QACP,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,KAAK,CAAC,EAAE,OAAO,CAAC;KAChB,CAAC;CACF"}
1
+ {"version":3,"file":"ResultTracker.d.ts","sourceRoot":"","sources":["../../../../../src/components/Trackers/ResultTracker/ResultTracker.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAI9C,OAAO,KAAK,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AASrE,eAAO,MAAM,aAAa,eAAyB,kBAAkB,KAAG,WAiDtE,CAAC;AAEH,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACzD,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IACjF,KAAK,CAAC,EAAE;QACP,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,KAAK,CAAC,EAAE,OAAO,CAAC;KAChB,CAAC;CACF"}
package/dist/esm/components/Trackers/ResultTracker/ResultTracker.js CHANGED
@@ -9,7 +9,6 @@ const CSS = {
9
9
  export const ResultTracker = observer((properties) => {
10
10
  const globalTheme = useTheme();
11
11
  const defaultTrack = {
12
- render: true,
13
12
  impression: true,
14
13
  click: true,
15
14
  };
@@ -28,12 +27,7 @@ export const ResultTracker = observer((properties) => {
28
27
  };
29
28
  const { ref, inViewport } = createImpressionObserver();
30
29
  if (inViewport && mergedTrack.impression) {
31
- if (result.type === 'product') {
32
- controller?.track.product.impression(result);
33
- }
34
- else {
35
- // track banner in future
36
- }
30
+ controller?.track.product.impression(result);
37
31
  }
38
32
  const styling = {};
39
33
  if (!disableStyles) {
@@ -43,7 +37,7 @@ export const ResultTracker = observer((properties) => {
43
37
  styling.css = [style];
44
38
  }
45
39
  return (jsx("div", { className: classnames('ss__result-tracker', `ss__${controller?.type}-result-tracker`, className), onClick: (e) => {
46
- if (result.type === 'product' && mergedTrack.click) {
40
+ if (mergedTrack.click) {
47
41
  controller?.track.product.click(e, result);
48
42
  }
49
43
  }, ref: ref, ...styling }, children));
package/dist/esm/hooks/useIntersectionAdvanced.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useIntersectionAdvanced.d.ts","sourceRoot":"","sources":["../../../src/hooks/useIntersectionAdvanced.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,UAAU,EAAE,MAAM,cAAc,CAAC;AAEvE,MAAM,WAAW,sBAAsB;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAGD,eAAO,MAAM,uBAAuB,QAAS,WAAW,WAAW,GAAG,IAAI,CAAC,YAAW,sBAAsB,KAAQ,OAqInH,CAAC"}
1
+ {"version":3,"file":"useIntersectionAdvanced.d.ts","sourceRoot":"","sources":["../../../src/hooks/useIntersectionAdvanced.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,UAAU,EAAE,MAAM,cAAc,CAAC;AAEvE,MAAM,WAAW,sBAAsB;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAGD,eAAO,MAAM,uBAAuB,QAAS,WAAW,WAAW,GAAG,IAAI,CAAC,YAAW,sBAAsB,KAAQ,OAsInH,CAAC"}
package/dist/esm/hooks/useIntersectionAdvanced.js CHANGED
@@ -19,6 +19,7 @@ export const useIntersectionAdvanced = (ref, options = {}) => {
19
19
  }
20
20
  visibleStartRef.current = null;
21
21
  lastResetKeyRef.current = resetKey;
22
+ return false;
22
23
  }
23
24
  useEffect(() => {
24
25
  setIntersecting(false);
package/dist/esm/hooks/useTracking.d.ts CHANGED
@@ -1,11 +1,14 @@
1
- import { Product } from '@searchspring/snap-store-mobx';
1
+ import { Banner, BannerContent, ContentType, Product } from '@searchspring/snap-store-mobx';
2
2
  import type { SearchController, AutocompleteController, RecommendationController } from '@searchspring/snap-controller';
3
3
  import { type Ref } from 'preact/hooks';
4
4
  interface UseTrackingProps {
5
5
  controller: SearchController | AutocompleteController | RecommendationController;
6
6
  result: Product;
7
+ banner?: Banner;
8
+ type?: ContentType;
9
+ content?: BannerContent;
7
10
  }
8
- export declare function useTracking({ controller, result }: UseTrackingProps): {
11
+ export declare function useTracking({ controller, result, banner, type, content }: UseTrackingProps): {
9
12
  trackingRef: Ref<HTMLElement | null>;
10
13
  };
11
14
  export {};
package/dist/esm/hooks/useTracking.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useTracking.d.ts","sourceRoot":"","sources":["../../../src/hooks/useTracking.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,EAAa,KAAK,GAAG,EAAE,MAAM,cAAc,CAAC;AAGnD,UAAU,gBAAgB;IACzB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IACjF,MAAM,EAAE,OAAO,CAAC;CAChB;AAED,wBAAgB,WAAW,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,gBAAgB,GAAG;IAAE,WAAW,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAAE,CAuC9G"}
1
+ {"version":3,"file":"useTracking.d.ts","sourceRoot":"","sources":["../../../src/hooks/useTracking.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,WAAW,EAA8B,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,EAAa,KAAK,GAAG,EAAE,MAAM,cAAc,CAAC;AAInD,UAAU,gBAAgB;IACzB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IACjF,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,wBAAgB,WAAW,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,gBAAgB,GAAG;IAAE,WAAW,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAAE,CA4CrI"}
package/dist/esm/hooks/useTracking.js CHANGED
@@ -1,36 +1,45 @@
1
1
  import { useEffect } from 'preact/hooks';
2
2
  import { createImpressionObserver } from '../utilities';
3
- export function useTracking({ controller, result }) {
3
+ import { TRACKING_ATTRIBUTE } from '../providers/withTracking';
4
+ export function useTracking({ controller, result, banner, type, content }) {
4
5
  if (!controller) {
5
6
  console.warn('Warning: No controller provided to useTracking');
6
7
  }
7
8
  if (!result) {
8
9
  console.warn('Warning: No result provided to useTracking');
9
10
  }
11
+ if (!result && !banner && (!type || !content)) {
12
+ console.warn('Warning: No result or banner provided to withTracking');
13
+ }
10
14
  const { ref, inViewport } = createImpressionObserver();
11
15
  useEffect(() => {
12
16
  if (inViewport) {
13
17
  // TODO: add support for disabling tracking events via config like in ResultTracker
14
- if (result.type === 'product') {
15
- controller?.track.product.impression(result);
18
+ if (type && content && !result && ['search', 'autocomplete'].includes(controller?.type || '')) {
19
+ controller?.track.banner.impression(content[type][0]);
16
20
  }
17
- else {
18
- // track banner in future
21
+ else if (!result?.bundleSeed) {
22
+ controller?.track.product.impression((result || banner));
19
23
  }
20
24
  }
21
25
  }, [inViewport]);
22
26
  useEffect(() => {
23
27
  const currentRef = ref.current;
24
28
  if (currentRef) {
25
- currentRef.setAttribute('sstracking', 'true');
26
29
  const handleClick = (e) => {
27
- controller?.track.product.click(e, result);
30
+ if (type && content && !result && ['search', 'autocomplete'].includes(controller?.type || '')) {
31
+ controller?.track.banner.click(e, content[type][0]);
32
+ }
33
+ else {
34
+ controller?.track.product.click(e, (result || banner));
35
+ }
28
36
  };
37
+ currentRef.setAttribute(TRACKING_ATTRIBUTE, 'true');
29
38
  currentRef.addEventListener('click', handleClick);
30
39
  return () => {
31
40
  currentRef.removeEventListener('click', handleClick);
32
41
  };
33
42
  }
34
- }, [result]);
43
+ }, [controller, result, banner, type, content]);
35
44
  return { trackingRef: ref };
36
45
  }
package/dist/esm/providers/withTracking.d.ts CHANGED
@@ -1,9 +1,14 @@
1
1
  import { ComponentType, FunctionComponent } from 'preact';
2
- import type { Product } from '@searchspring/snap-store-mobx';
2
+ import type { Banner, Product } from '@searchspring/snap-store-mobx';
3
3
  import type { SearchController, AutocompleteController, RecommendationController } from '@searchspring/snap-controller';
4
+ import type { ContentType, BannerContent } from '@searchspring/snap-store-mobx';
5
+ export declare const TRACKING_ATTRIBUTE = "sstracking";
4
6
  interface WithTrackingProps {
5
7
  controller?: SearchController | AutocompleteController | RecommendationController;
6
8
  result?: Product;
9
+ banner?: Banner;
10
+ type?: ContentType;
11
+ content?: BannerContent;
7
12
  [key: string]: any;
8
13
  }
9
14
  export declare function withTracking<Props extends WithTrackingProps>(WrappedComponent: ComponentType<Props>): FunctionComponent<Props>;
package/dist/esm/providers/withTracking.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"withTracking.d.ts","sourceRoot":"","sources":["../../../src/providers/withTracking.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,aAAa,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAC7D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAC7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAIxH,UAAU,iBAAiB;IAC1B,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IAClF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACnB;AAED,wBAAgB,YAAY,CAAC,KAAK,SAAS,iBAAiB,EAAE,gBAAgB,EAAE,aAAa,CAAC,KAAK,CAAC,4BAqEnG"}
1
+ {"version":3,"file":"withTracking.d.ts","sourceRoot":"","sources":["../../../src/providers/withTracking.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,aAAa,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAC7D,OAAO,KAAK,EAAE,MAAM,EAA8B,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACjG,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAIhF,eAAO,MAAM,kBAAkB,eAAe,CAAC;AAC/C,UAAU,iBAAiB;IAC1B,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IAClF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACnB;AAED,wBAAgB,YAAY,CAAC,KAAK,SAAS,iBAAiB,EAAE,gBAAgB,EAAE,aAAa,CAAC,KAAK,CAAC,4BAiFnG"}
package/dist/esm/providers/withTracking.js CHANGED
@@ -1,14 +1,19 @@
1
1
  import { h } from 'preact';
2
2
  import { createImpressionObserver } from '../utilities';
3
3
  import { useEffect, useCallback } from 'preact/hooks';
4
+ export const TRACKING_ATTRIBUTE = 'sstracking';
4
5
  export function withTracking(WrappedComponent) {
5
6
  const WithTracking = (props) => {
6
- const { controller, result, ...restProps } = props;
7
- if (!controller) {
8
- console.warn('Warning: No controller provided to withTracking');
7
+ const { controller, result, banner, type, content, ...restProps } = props;
8
+ if (props.trackingRef) {
9
+ // case where withTracking may get used more than once
10
+ return h(WrappedComponent, { ...props });
9
11
  }
10
- if (!result) {
11
- console.warn('Warning: No result provided to withTracking');
12
+ if (!controller && (!type || !content)) {
13
+ console.warn('Warning: No controller provided to withTracking', props);
14
+ }
15
+ if (!result && !banner && (!type || !content)) {
16
+ console.warn('Warning: No result or banner provided to withTracking');
12
17
  }
13
18
  let resetKey;
14
19
  if (controller?.type === 'search' || controller?.type === 'autocomplete') {
@@ -32,20 +37,25 @@ export function withTracking(WrappedComponent) {
32
37
  const { ref, inViewport } = createImpressionObserver({ resetKey });
33
38
  if (inViewport) {
34
39
  // TODO: add support for disabling tracking events via config like in ResultTracker
35
- if (result?.type === 'product' && !result?.bundleSeed) {
36
- controller?.track.product.impression(result);
40
+ if (type && content && !result && ['search', 'autocomplete'].includes(controller?.type || '')) {
41
+ controller?.track.banner.impression(content[type][0]);
37
42
  }
38
- else {
39
- // track banner in future
43
+ else if (!result?.bundleSeed) {
44
+ controller?.track.product.impression((result || banner));
40
45
  }
41
46
  }
42
47
  const handleClick = useCallback((e) => {
43
- controller?.track.product.click(e, result);
44
- }, [controller, result]);
48
+ if (type && content && !result && ['search', 'autocomplete'].includes(controller?.type || '')) {
49
+ controller?.track.banner.click(e, content[type][0]);
50
+ }
51
+ else {
52
+ controller?.track.product.click(e, (result || banner));
53
+ }
54
+ }, [controller, result, banner, type, content]);
45
55
  useEffect(() => {
46
56
  const currentRef = ref.current;
47
57
  if (currentRef) {
48
- currentRef.setAttribute('sstracking', 'true');
58
+ currentRef.setAttribute(TRACKING_ATTRIBUTE, 'true');
49
59
  currentRef.addEventListener('click', handleClick, true); // Use capture phase
50
60
  return () => {
51
61
  currentRef.removeEventListener('click', handleClick, true);
@@ -56,6 +66,9 @@ export function withTracking(WrappedComponent) {
56
66
  ...restProps,
57
67
  controller,
58
68
  result,
69
+ banner,
70
+ type,
71
+ content,
59
72
  trackingRef: ref,
60
73
  };
61
74
  return h(WrappedComponent, { ...trackingProps });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@searchspring/snap-preact-components",
3
- "version": "0.72.2",
3
+ "version": "0.73.5",
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.72.2",
32
+ "@searchspring/snap-toolbox": "0.73.5",
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.72.2",
56
- "@searchspring/snap-controller": "0.72.2",
57
- "@searchspring/snap-event-manager": "0.72.2",
58
- "@searchspring/snap-logger": "0.72.2",
59
- "@searchspring/snap-profiler": "0.72.2",
60
- "@searchspring/snap-store-mobx": "0.72.2",
61
- "@searchspring/snap-tracker": "0.72.2",
62
- "@searchspring/snap-url-manager": "0.72.2",
55
+ "@searchspring/snap-client": "0.73.5",
56
+ "@searchspring/snap-controller": "0.73.5",
57
+ "@searchspring/snap-event-manager": "0.73.5",
58
+ "@searchspring/snap-logger": "0.73.5",
59
+ "@searchspring/snap-profiler": "0.73.5",
60
+ "@searchspring/snap-store-mobx": "0.73.5",
61
+ "@searchspring/snap-tracker": "0.73.5",
62
+ "@searchspring/snap-url-manager": "0.73.5",
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": "e6a243a563a22c1d6f87f8b42c540b46b875c54f"
87
+ "gitHead": "3052c4ea9cc631b0b398c72ea0f155084e15b7ee"
88
88
  }