@searchspring/snap-preact-components 0.65.2 → 0.66.0

package/dist/esm/hooks/useTracking.js

@@ -0,0 +1,36 @@
+import { useEffect } from 'preact/hooks';
+import { createImpressionObserver } from '../utilities';
+export function useTracking({ controller, result }) {
+    if (!controller) {
+        console.warn('Warning: No controller provided to useTracking');
+    }
+    if (!result) {
+        console.warn('Warning: No result provided to useTracking');
+    }
+    const { ref, inViewport } = createImpressionObserver();
+    useEffect(() => {
+        if (inViewport) {
+            // TODO: add support for disabling tracking events via config like in ResultTracker
+            if (result.type === 'product') {
+                controller?.track.product.impression(result);
+            }
+            else {
+                // track banner in future
+            }
+        }
+    }, [inViewport]);
+    useEffect(() => {
+        const currentRef = ref.current;
+        if (currentRef) {
+            currentRef.setAttribute('sstracking', 'true');
+            const handleClick = (e) => {
+                controller?.track.product.click(e, result);
+            };
+            currentRef.addEventListener('click', handleClick);
+            return () => {
+                currentRef.removeEventListener('click', handleClick);
+            };
+        }
+    }, [result]);
+    return { trackingRef: ref };
+}

package/dist/esm/providers/index.d.ts

@@ -2,4 +2,5 @@ export * from './cache';
 export * from './controller';
 export * from './store';
 export * from './theme';
+export * from './withTracking';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/providers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC"}

package/dist/esm/providers/index.js

@@ -2,3 +2,4 @@ export * from './cache';
 export * from './controller';
 export * from './store';
 export * from './theme';
+export * from './withTracking';

package/dist/esm/providers/withTracking.d.ts

@@ -0,0 +1,11 @@
+import { ComponentType, FunctionComponent } from 'preact';
+import type { Product } from '@searchspring/snap-store-mobx';
+import type { SearchController, AutocompleteController, RecommendationController } from '@searchspring/snap-controller';
+interface WithTrackingProps {
+    controller?: SearchController | AutocompleteController | RecommendationController;
+    result?: Product;
+    [key: string]: any;
+}
+export declare function withTracking<Props extends WithTrackingProps>(WrappedComponent: ComponentType<Props>): FunctionComponent<Props>;
+export {};
+//# sourceMappingURL=withTracking.d.ts.map

package/dist/esm/providers/withTracking.d.ts.map

@@ -0,0 +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,4BA+CnG"}

package/dist/esm/providers/withTracking.js

@@ -0,0 +1,45 @@
+import { h } from 'preact';
+import { createImpressionObserver } from '../utilities';
+import { useCallback } from 'preact/hooks';
+export function withTracking(WrappedComponent) {
+    const WithTracking = (props) => {
+        const { controller, result, ...restProps } = props;
+        if (!controller) {
+            console.warn('Warning: No controller provided to withTracking');
+        }
+        if (!result) {
+            console.warn('Warning: No result provided to withTracking');
+        }
+        const additionalEffectKeys = [];
+        if (controller?.type === 'autocomplete') {
+            additionalEffectKeys.push(controller.store.state.input);
+        }
+        const { ref, inViewport } = createImpressionObserver({ additionalEffectKeys });
+        if (inViewport) {
+            // TODO: add support for disabling tracking events via config like in ResultTracker
+            if (result?.type === 'product') {
+                controller?.track.product.impression(result);
+            }
+            else {
+                // track banner in future
+            }
+        }
+        const currentRef = ref.current;
+        if (currentRef) {
+            const handleClick = useCallback((e) => {
+                controller?.track.product.click(e, result);
+            }, []);
+            currentRef.setAttribute('sstracking', 'true');
+            currentRef.removeEventListener('click', handleClick);
+            currentRef.addEventListener('click', handleClick);
+        }
+        const trackingProps = {
+            ...restProps,
+            controller,
+            result,
+            trackingRef: ref,
+        };
+        return h(WrappedComponent, { ...trackingProps });
+    };
+    return WithTracking;
+}

package/dist/esm/utilities/createImpressionObserver.d.ts

@@ -0,0 +1,8 @@
+import { type Ref } from 'preact/hooks';
+export declare function createImpressionObserver(options?: {
+    additionalEffectKeys?: unknown[];
+}): {
+    ref: Ref<HTMLElement | null>;
+    inViewport: boolean;
+};
+//# sourceMappingURL=createImpressionObserver.d.ts.map

package/dist/esm/utilities/createImpressionObserver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createImpressionObserver.d.ts","sourceRoot":"","sources":["../../../src/utilities/createImpressionObserver.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAU,MAAM,cAAc,CAAC;AAGhD,wBAAgB,wBAAwB,CAAC,OAAO,CAAC,EAAE;IAAE,oBAAoB,CAAC,EAAE,OAAO,EAAE,CAAA;CAAE,GAAG;IACzF,GAAG,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;CACpB,CAYA"}

package/dist/esm/utilities/createImpressionObserver.js

@@ -0,0 +1,15 @@
+import { useRef } from 'preact/hooks';
+import { useIntersectionAdvanced } from '../hooks';
+export function createImpressionObserver(options) {
+    const ref = useRef(null);
+    const inViewport = useIntersectionAdvanced(ref, {
+        fireOnce: true,
+        threshold: 0.75,
+        minVisibleTime: 1000,
+        additionalEffectKeys: options?.additionalEffectKeys || [],
+    });
+    return {
+        ref,
+        inViewport,
+    };
+}

package/dist/esm/utilities/index.d.ts

@@ -5,4 +5,5 @@ export * from './sprintf';
 export * from './LightenDarkenColor';
 export * from './shiftColor';
 export * from './defaultBadgeComponentMap';
+export * from './createImpressionObserver';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/utilities/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utilities/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utilities/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC"}

package/dist/esm/utilities/index.js

@@ -5,3 +5,4 @@ export * from './sprintf';
 export * from './LightenDarkenColor';
 export * from './shiftColor';
 export * from './defaultBadgeComponentMap';
+export * from './createImpressionObserver';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@searchspring/snap-preact-components",
-	"version": "0.65.2",
+	"version": "0.66.0",
 	"description": "Snap Preact Component Library",
 	"author": "Searchspring",
 	"license": "MIT",
@@ -29,7 +29,7 @@
 	"dependencies": {
 		"@cypress/react": "^8.0.0",
 		"@emotion/react": "11.9.0",
-		"@searchspring/snap-toolbox": "^0.65.2",
+		"@searchspring/snap-toolbox": "^0.66.0",
 		"classnames": "^2.3.2",
 		"cypress": "^13.7.1",
 		"cypress-wait-until": "^1.7.2",
@@ -52,14 +52,14 @@
 		"@babel/preset-env": "^7.21.4",
 		"@babel/preset-react": "^7.18.6",
 		"@babel/runtime": "^7.21.0",
-		"@searchspring/snap-client": "^0.65.2",
-		"@searchspring/snap-controller": "^0.65.2",
-		"@searchspring/snap-event-manager": "^0.65.2",
-		"@searchspring/snap-logger": "^0.65.2",
-		"@searchspring/snap-profiler": "^0.65.2",
-		"@searchspring/snap-store-mobx": "^0.65.2",
-		"@searchspring/snap-tracker": "^0.65.2",
-		"@searchspring/snap-url-manager": "^0.65.2",
+		"@searchspring/snap-client": "^0.66.0",
+		"@searchspring/snap-controller": "^0.66.0",
+		"@searchspring/snap-event-manager": "^0.66.0",
+		"@searchspring/snap-logger": "^0.66.0",
+		"@searchspring/snap-profiler": "^0.66.0",
+		"@searchspring/snap-store-mobx": "^0.66.0",
+		"@searchspring/snap-tracker": "^0.66.0",
+		"@searchspring/snap-url-manager": "^0.66.0",
 		"@storybook/addon-actions": "6.4.22",
 		"@storybook/addon-controls": "6.4.22",
 		"@storybook/addon-docs": "6.4.22",
@@ -84,5 +84,5 @@
 		"webpack-merge": "^5.8.0"
 	},
 	"sideEffects": false,
-	"gitHead": "3e80b62664af7e3104e578d6c2596c439d5dfd78"
+	"gitHead": "97d209ef85cfb63946bea8ce3737b7dcb2803b89"
 }