@searchspring/snap-controller 0.72.1 → 0.73.5

package/dist/esm/Search/SearchController.js

@@ -4,8 +4,8 @@ import { AbstractController } from '../Abstract/AbstractController';
 import { StorageStore, ErrorType } from '@searchspring/snap-store-mobx';
 import { getSearchParams } from '../utils/getParams';
 import { ControllerTypes } from '../types';
-import { ItemTypeEnum, } from '@searchspring/beacon';
 import { CLICK_DUPLICATION_TIMEOUT, isClickWithinProductLink } from '../utils/isClickWithinProductLink';
+import { isClickWithinBannerLink } from '../utils/isClickWithinBannerLink';
 const BACKGROUND_FILTER_FIELD_MATCHES = ['collection', 'category', 'categories', 'hierarchy', 'brand', 'manufacturer'];
 const BACKGROUND_FILTERS_VALUE_FLAGS = [1, 0, '1', '0', 'true', 'false', true, false];
 const defaultConfig = {
@@ -24,7 +24,6 @@ const defaultConfig = {
         },
     },
 };
-const schemaMap = {};
 export class SearchController extends AbstractController {
     constructor(config, { client, store, urlManager, eventManager, profiler, logger, tracker }, context) {
         super(config, { client, store, urlManager, eventManager, profiler, logger, tracker }, context);
@@ -33,13 +32,56 @@ export class SearchController extends AbstractController {
         this.page = {
             type: 'search',
         };
-        this.events = { product: {} };
+        this.events = {};
         this.track = {
-            product: {
-                clickThrough: (e, result) => {
-                    if (this.events.product[result.id]?.clickThrough) {
+            banner: {
+                impression: ({ uid, responseId }) => {
+                    if (this.events[responseId]?.banner[uid]?.impression) {
                         return;
                     }
+                    const banner = { uid };
+                    const data = {
+                        responseId,
+                        banners: [banner],
+                        results: [],
+                    };
+                    this.eventManager.fire('track.banner.impression', { controller: this, product: { uid }, trackEvent: data });
+                    this.tracker.events[this.page.type].impression({ data, siteId: this.config.globals?.siteId });
+                    this.events[responseId].banner[uid] = this.events[responseId].banner[uid] || {};
+                    this.events[responseId].banner[uid].impression = true;
+                },
+                click: (e, banner) => {
+                    const { responseId, uid } = banner;
+                    if (isClickWithinBannerLink(e)) {
+                        if (this.events?.[responseId]?.banner[uid]?.clickThrough) {
+                            return;
+                        }
+                        this.track.banner.clickThrough(e, banner);
+                        this.events[responseId].banner[uid] = this.events[responseId].banner[uid] || {};
+                        this.events[responseId].banner[uid].clickThrough = true;
+                        setTimeout(() => {
+                            this.events[responseId].banner[uid].clickThrough = false;
+                        }, CLICK_DUPLICATION_TIMEOUT);
+                    }
+                },
+                clickThrough: (e, { uid, responseId }) => {
+                    const banner = { uid };
+                    const data = {
+                        responseId,
+                        banners: [banner],
+                    };
+                    this.eventManager.fire('track.banner.clickThrough', { controller: this, event: e, product: { uid }, trackEvent: data });
+                    this.tracker.events[this.page.type].clickThrough({ data, siteId: this.config.globals?.siteId });
+                    this.events[responseId].banner[uid] = this.events[responseId].banner[uid] || {};
+                    this.events[responseId].banner[uid].clickThrough = true;
+                    setTimeout(() => {
+                        this.events[responseId].banner[uid].clickThrough = false;
+                    }, CLICK_DUPLICATION_TIMEOUT);
+                },
+            },
+            product: {
+                clickThrough: (e, result) => {
+                    const responseId = result.responseId;
                     const target = e.target;
                     const resultHref = result.display?.mappings.core?.url || result.mappings.core?.url || '';
                     const elemHref = target?.getAttribute('href');
@@ -66,58 +108,88 @@ export class SearchController extends AbstractController {
                     }
                     // store position data or empty object
                     this.storage.set('scrollMap', scrollMap);
-                    const data = schemaMap[result.id];
+                    const item = {
+                        type: result.type,
+                        uid: result.id,
+                        parentId: result.id,
+                        sku: result.mappings.core?.sku,
+                    };
+                    const data = {
+                        responseId,
+                        results: [item],
+                    };
                     this.eventManager.fire('track.product.clickThrough', { controller: this, event: e, product: result, trackEvent: data });
                     this.tracker.events[this.page.type].clickThrough({ data, siteId: this.config.globals?.siteId });
-                    this.events.product[result.id] = this.events.product[result.id] || {};
-                    this.events.product[result.id].clickThrough = true;
                 },
                 click: (e, result) => {
-                    if (this.events.product[result.id]?.click) {
-                        return;
-                    }
-                    if (result.type === 'banner') {
-                        return;
+                    const responseId = result.responseId;
+                    if (result.type === 'banner' && isClickWithinBannerLink(e)) {
+                        if (this.events?.[responseId]?.product[result.id]?.inlineBannerClickThrough) {
+                            return;
+                        }
+                        this.track.product.clickThrough(e, result);
+                        this.events[responseId].product[result.id] = this.events[responseId].product[result.id] || {};
+                        this.events[responseId].product[result.id].inlineBannerClickThrough = true;
+                        setTimeout(() => {
+                            this.events[responseId].product[result.id].inlineBannerClickThrough = false;
+                        }, CLICK_DUPLICATION_TIMEOUT);
                     }
-                    isClickWithinProductLink(e, result) && this.track.product.clickThrough(e, result);
-                    this.events.product[result.id] = this.events.product[result.id] || {};
-                    this.events.product[result.id].click = true;
-                    setTimeout(() => {
-                        this.events.product[result.id].click = false;
-                    }, CLICK_DUPLICATION_TIMEOUT);
-                },
-                render: (result) => {
-                    if (this.events.product[result.id]?.render) {
-                        return;
+                    else if (isClickWithinProductLink(e, result)) {
+                        if (this.events?.[responseId]?.product[result.id]?.productClickThrough) {
+                            return;
+                        }
+                        this.track.product.clickThrough(e, result);
+                        this.events[responseId].product[result.id] = this.events[responseId].product[result.id] || {};
+                        this.events[responseId].product[result.id].productClickThrough = true;
+                        setTimeout(() => {
+                            this.events[responseId].product[result.id].productClickThrough = false;
+                        }, CLICK_DUPLICATION_TIMEOUT);
                     }
-                    const data = schemaMap[result.id];
-                    this.eventManager.fire('track.product.render', { controller: this, product: result, trackEvent: data });
-                    this.tracker.events[this.page.type].render({ data, siteId: this.config.globals?.siteId });
-                    this.events.product[result.id] = this.events.product[result.id] || {};
-                    this.events.product[result.id].render = true;
                 },
                 impression: (result) => {
-                    if (this.events.product[result.id]?.impression || !this.events.product[result.id]?.render) {
+                    const responseId = result.responseId;
+                    if (this.events[responseId]?.product[result.id]?.impression) {
                         return;
                     }
-                    const data = schemaMap[result.id];
+                    const item = {
+                        type: result.type,
+                        uid: result.id,
+                        parentId: result.id,
+                        sku: result.mappings.core?.sku,
+                    };
+                    const data = {
+                        responseId,
+                        results: [item],
+                        banners: [],
+                    };
                     this.eventManager.fire('track.product.impression', { controller: this, product: result, trackEvent: data });
                     this.tracker.events[this.page.type].impression({ data, siteId: this.config.globals?.siteId });
-                    this.events.product[result.id] = this.events.product[result.id] || {};
-                    this.events.product[result.id].impression = true;
+                    this.events[responseId].product[result.id] = this.events[responseId].product[result.id] || {};
+                    this.events[responseId].product[result.id].impression = true;
                 },
                 addToCart: (result) => {
-                    const data = getSearchAddtocartSchemaData({ searchSchemaData: schemaMap[result.id], results: [result] });
+                    const responseId = result.responseId;
+                    const product = {
+                        parentId: result.id,
+                        uid: result.id,
+                        sku: result.mappings.core?.sku,
+                        qty: result.quantity || 1,
+                        price: Number(result.mappings.core?.price),
+                    };
+                    const data = {
+                        responseId,
+                        results: [product],
+                    };
                     this.eventManager.fire('track.product.addToCart', { controller: this, product: result, trackEvent: data });
-                    this.tracker.events[this.page.type].addToCart({
-                        data,
-                        siteId: this.config.globals?.siteId,
-                    });
+                    this.tracker.events[this.page.type].addToCart({ data, siteId: this.config.globals?.siteId });
                 },
             },
-            redirect: (redirectURL) => {
-                const data = getSearchRedirectSchemaData({ redirectURL });
-                this.eventManager.fire('track.product.redirect', { controller: this, redirectURL, trackEvent: data });
+            redirect: ({ redirectURL, responseId }) => {
+                const data = {
+                    responseId,
+                    redirect: redirectURL,
+                };
+                this.eventManager.fire('track.redirect', { controller: this, redirectURL, trackEvent: data });
                 this.tracker.events.search.redirect({ data, siteId: this.config.globals?.siteId });
             },
         };
@@ -156,7 +228,7 @@ export class SearchController extends AbstractController {
                 }
                 const searchProfile = this.profiler.create({ type: 'event', name: 'search', context: params }).start();
                 let meta = {};
-                let response = {};
+                let response;
                 // infinite scroll functionality (after page 1)
                 if (this.config.settings?.infinite && params.pagination?.page && params.pagination.page > 1) {
                     const preventBackfill = this.config.settings.infinite?.backfill && !this.store.results.length && params.pagination.page > this.config.settings.infinite.backfill;
@@ -185,7 +257,7 @@ export class SearchController extends AbstractController {
                                 }
                             }
                             backfillRequestsParams.push(backfillParams);
-                            return this.client.search(backfillParams);
+                            return this.client[this.page.type](backfillParams);
                         });
                         const backfillResponses = await Promise.all(backfillRequests);
                         // backfillResponses are [meta, searchResponse][]
@@ -193,8 +265,9 @@ export class SearchController extends AbstractController {
                         meta = backfillResponses[0][0];
                         response = backfillResponses[0][1];
                         // accumulate results from all backfill responses
-                        const backfillResults = backfillResponses.reduce((results, response, index) => {
-                            createResultSchemaMapping({ request: backfillRequestsParams[index], response: response });
+                        const backfillResults = backfillResponses.reduce((results, response) => {
+                            const responseId = response[1].tracking.responseId;
+                            this.events[responseId] = this.events[responseId] || { product: {}, banner: {} };
                             return results.concat(...response[1].results);
                         }, []);
                         // overwrite pagination params to expected state
@@ -205,20 +278,20 @@ export class SearchController extends AbstractController {
                     }
                     else {
                         // infinite with no backfills.
-                        [meta, response] = await this.client.search(params);
-                        createResultSchemaMapping({ request: params, response: [meta, response] });
+                        [meta, response] = await this.client[this.page.type](params);
+                        const responseId = response.tracking.responseId;
+                        this.events[responseId] = this.events[responseId] || { product: {}, banner: {} };
                         // append new results to previous results
                         response.results = [...this.previousResults, ...(response.results || [])];
                     }
                 }
                 else {
                     // normal request
-                    // reset events for new search
-                    this.events = { product: {} };
                     // clear previousResults to prevent infinite scroll from using them
                     this.previousResults = [];
-                    [meta, response] = await this.client.search(params);
-                    createResultSchemaMapping({ request: params, response: [meta, response] });
+                    [meta, response] = await this.client[this.page.type](params);
+                    const responseId = response.tracking.responseId;
+                    this.events[responseId] = this.events[responseId] || { product: {}, banner: {} };
                 }
                 // MockClient will overwrite the client search() method and use SearchData to return mock data which already contains meta data
                 if (!response.meta) {
@@ -380,7 +453,7 @@ export class SearchController extends AbstractController {
             if (redirectURL && config?.settings?.redirects?.merchandising && !search?.response?.filters?.length && !searchStore.loaded) {
                 //set loaded to true to prevent infinite search/reloading from happening
                 searchStore.loaded = true;
-                this.track.redirect(redirectURL);
+                this.track.redirect({ redirectURL, responseId: search.response.tracking.responseId });
                 window.location.replace(redirectURL);
                 return false;
             }
@@ -441,21 +514,12 @@ export class SearchController extends AbstractController {
         this.eventManager.on('afterStore', async (search, next) => {
             await next();
             const controller = search.controller;
+            const responseId = search.response.tracking.responseId;
             if (controller.store.loaded && !controller.store.error) {
-                const products = controller.store.results.filter((result) => result.type === 'product' && !this.events.product[result.id]?.render);
-                if (products.length === 0 && !search.response._cached) {
-                    // handle no results
-                    const data = getSearchSchemaData({ params: search.request, response: search.response });
-                    this.eventManager.fire('track.product.render', { controller: this, trackEvent: data });
+                if (!search.response._cached) {
+                    const data = { responseId };
                     this.tracker.events[this.page.type].render({ data, siteId: this.config.globals?.siteId });
                 }
-                products.forEach((result) => {
-                    if (!search.response._cached) {
-                        this.track.product.render(result);
-                    }
-                    this.events.product[result.id] = this.events.product[result.id] || {};
-                    this.events.product[result.id].render = true;
-                });
                 const config = search.controller.config;
                 const nonBackgroundFilters = search?.request?.filters?.filter((filter) => !filter.background);
                 if (config?.settings?.redirects?.singleResult &&
@@ -582,26 +646,6 @@ export class SearchController extends AbstractController {
         return params;
     }
 }
-function createResultSchemaMapping({ request, response }) {
-    const [_, searchResponse] = response;
-    const schema = getSearchSchemaData({
-        params: request,
-        response: searchResponse,
-    });
-    searchResponse.results?.forEach((result, idx) => {
-        schemaMap[result.id] = {
-            ...schema,
-            results: [
-                {
-                    type: ItemTypeEnum.Product,
-                    position: idx + 1,
-                    uid: result.mappings?.core?.uid || '',
-                    sku: result.mappings?.core?.sku,
-                },
-            ],
-        };
-    });
-}
 export function getStorableRequestParams(request) {
     return {
         siteId: request.siteId,
@@ -644,84 +688,3 @@ export function generateHrefSelector(element, href, levels = 7) {
     }
     return;
 }
-function getSearchRedirectSchemaData({ redirectURL }) {
-    return {
-        redirect: redirectURL,
-    };
-}
-function getSearchAddtocartSchemaData({ searchSchemaData, results, }) {
-    return {
-        ...searchSchemaData,
-        results: results?.map((result) => {
-            const core = result.mappings.core;
-            return {
-                uid: core.uid || '',
-                sku: core.sku,
-                price: Number(core.price),
-                qty: result.quantity || 1,
-            };
-        }) || [],
-    };
-}
-function getSearchSchemaData({ params, response }) {
-    const filters = params.filters?.reduce((acc, filter) => {
-        const key = filter.background ? 'bgfilter' : 'filter';
-        acc[key] = acc[key] || [];
-        const value = filter.type === 'range' &&
-            !isNaN(filter.value?.low) &&
-            !isNaN(filter.value?.high)
-            ? [`low=${filter.value?.low}`, `high=${filter.value?.high}`]
-            : [`${filter.value}`];
-        const existing = acc[key].find((item) => item.field === filter.field);
-        if (existing && !existing.value.includes(value[0])) {
-            existing.value.push(...value);
-        }
-        else {
-            acc[key].push({
-                field: filter.field,
-                value,
-            });
-        }
-        return acc;
-    }, {});
-    let correctedQuery;
-    if (response?.search?.originalQuery && response?.search?.query) {
-        correctedQuery = response?.search?.query;
-    }
-    const campaigns = response?.merchandising?.campaigns || [];
-    const experiments = response?.merchandising?.experiments || [];
-    return {
-        q: params.search?.query?.string || '',
-        rq: params.search?.subQuery ? params.search?.subQuery : undefined,
-        correctedQuery,
-        matchType: response?.search?.matchType,
-        ...filters,
-        sort: params.sorts?.map((sort) => {
-            return {
-                field: sort.field,
-                dir: sort.direction,
-            };
-        }),
-        pagination: {
-            totalResults: response?.pagination?.totalResults,
-            page: response?.pagination?.page,
-            resultsPerPage: response?.pagination?.pageSize,
-        },
-        merchandising: {
-            personalized: response?.merchandising?.personalized,
-            redirect: response?.merchandising?.redirect,
-            triggeredCampaigns: (campaigns.length &&
-                campaigns.map((campaign) => {
-                    const experiement = experiments.find((experiment) => experiment.campaignId === campaign.id);
-                    return {
-                        id: campaign.id,
-                        experimentId: experiement?.experimentId,
-                        variationId: experiement?.variationId,
-                    };
-                })) ||
-                undefined,
-        },
-        banners: [],
-        results: [],
-    };
-}

package/dist/esm/utils/isClickWithinBannerLink.d.ts

@@ -0,0 +1,2 @@
+export declare const isClickWithinBannerLink: (e: MouseEvent) => boolean;
+//# sourceMappingURL=isClickWithinBannerLink.d.ts.map

package/dist/esm/utils/isClickWithinBannerLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"isClickWithinBannerLink.d.ts","sourceRoot":"","sources":["../../../src/utils/isClickWithinBannerLink.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,uBAAuB,MAAO,UAAU,KAAG,OAcvD,CAAC"}

package/dist/esm/utils/isClickWithinBannerLink.js

@@ -0,0 +1,17 @@
+import { CLICK_THROUGH_CLOSEST_MAX_LEVELS } from './isClickWithinProductLink';
+const TRACKING_ATTRIBUTE = 'sstracking';
+export const isClickWithinBannerLink = (e) => {
+    let currentElement = e.target;
+    let href = null;
+    let level = 0;
+    while (currentElement && (level < CLICK_THROUGH_CLOSEST_MAX_LEVELS || !currentElement.getAttribute(TRACKING_ATTRIBUTE))) {
+        href = currentElement.getAttribute('href');
+        const isAnchor = currentElement.tagName.toLowerCase() === 'a';
+        if (href && isAnchor) {
+            return true;
+        }
+        currentElement = currentElement.parentElement;
+        level++;
+    }
+    return false;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@searchspring/snap-controller",
-	"version": "0.72.1",
+	"version": "0.73.5",
 	"description": "Snap Controllers",
 	"main": "dist/cjs/index.js",
 	"module": "dist/esm/index.js",
@@ -20,22 +20,22 @@
 		"test:watch": "jest --watch"
 	},
 	"dependencies": {
-		"@searchspring/snap-toolbox": "0.72.1",
+		"@searchspring/snap-toolbox": "0.73.5",
 		"css.escape": "1.5.1",
 		"deepmerge": "4.3.1"
 	},
 	"devDependencies": {
-		"@searchspring/snap-client": "0.72.1",
-		"@searchspring/snap-event-manager": "0.72.1",
-		"@searchspring/snap-logger": "0.72.1",
-		"@searchspring/snap-profiler": "0.72.1",
-		"@searchspring/snap-store-mobx": "0.72.1",
-		"@searchspring/snap-tracker": "0.72.1",
-		"@searchspring/snap-url-manager": "0.72.1"
+		"@searchspring/snap-client": "0.73.5",
+		"@searchspring/snap-event-manager": "0.73.5",
+		"@searchspring/snap-logger": "0.73.5",
+		"@searchspring/snap-profiler": "0.73.5",
+		"@searchspring/snap-store-mobx": "0.73.5",
+		"@searchspring/snap-tracker": "0.73.5",
+		"@searchspring/snap-url-manager": "0.73.5"
 	},
 	"sideEffects": false,
 	"files": [
 		"dist/**/*"
 	],
-	"gitHead": "907fc94dca17369d89e7aa9d60bbe1acdf05a3a7"
+	"gitHead": "3052c4ea9cc631b0b398c72ea0f155084e15b7ee"
 }