[CI-4786] Add removing search term on track recommendation click (#230)

* [CI-4786] Add removing search term on track recommendation click

* [CI-4786] Implement reusable tracking capture utility and update tests for search term clearing on recommendation selection

* [CI-4786] Capture tracking request for recommendation selection click and validate tracking

Author: Alexey-Pavlov

src/hooks/useDownShift.ts

@@ -2,7 +2,11 @@ import { useCombobox, UseComboboxProps, UseComboboxReturnValue } from 'downshift
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
 import { Nullable } from '@constructor-io/constructorio-client-javascript/lib/types';
 import { Item, OnSubmit } from '../types';
-import { trackSearchSubmit, trackAutocompleteSelect } from '../utils/tracking';
+import {
+  trackSearchSubmit,
+  trackAutocompleteSelect,
+  trackRecommendationSelect,
+} from '../utils/tracking';
 
 let idCounter = 0;
 
@@ -44,15 +48,17 @@ const useDownShift: UseDownShift = ({
             // Autocomplete Select tracking
             // Recommendation Select tracking
             if (selectedItem.podId && selectedItem.data?.id && selectedItem.strategy) {
-              cioClient?.tracker.trackRecommendationClick({
+              const recommendationData = {
                 itemName: selectedItem.value,
                 itemId: selectedItem.data.id,
                 variationId: selectedItem.data.variation_id,
                 podId: selectedItem.podId,
                 strategyId: selectedItem.strategy.id,
                 section: selectedItem.section,
                 resultId: selectedItem.result_id,
-              });
+              };
+              trackRecommendationSelect(cioClient, recommendationData);
+
               // Select tracking for all other Constructor sections:
               // (ie: Search Suggestions, Products, Custom Cio sections, etc)
               // This does not apply to custom user defined sections that aren't part of Constructor index

src/stories/tests/ComponentTests.stories.tsx

@@ -6,7 +6,7 @@ import { storageGetItem, storageSetItem } from '../../utils/storage';
 import { ComponentTemplate } from '../Autocomplete/Component';
 import { apiKey, onSubmitDefault as onSubmit } from '../../constants';
 import { CioAutocompleteProps } from '../../types';
-import { isTrackingRequestSent } from '../../utils/tracking';
+import { isTrackingRequestSent, captureTrackingRequest } from '../../utils/tracking';
 import { CONSTANTS } from '../../utils/beaconUtils';
 
 export default {
@@ -76,8 +76,13 @@ FocusFiresTrackingEvent.args = defaultArgs;
 FocusFiresTrackingEvent.play = async ({ canvasElement }) => {
   await sleep(100);
   const canvas = within(canvasElement);
-  await userEvent.click(canvas.getByTestId('cio-input'));
-  const isFocusTrackingRequestSent = isTrackingRequestSent('action=focus');
+  const input = canvas.getByTestId('cio-input');
+
+  // Use the reusable tracking capture utility
+  const isFocusTrackingRequestSent = await captureTrackingRequest('action=focus', async () => {
+    await userEvent.click(input);
+  });
+
   expect(isFocusTrackingRequestSent).toBeTruthy();
 };
 
@@ -357,6 +362,56 @@ SelectProductSuggestionClearsSearchTermStorage.play = async ({ canvasElement })
   await sleep(1000);
 };
 
+// - select recommendation from zero state => Search Term Storage is Cleared
+export const SelectZeroStateRecommendationClearsSearchTermStorage = ComponentTemplate.bind({});
+SelectZeroStateRecommendationClearsSearchTermStorage.args = {
+  ...defaultArgs,
+  autocompleteClassName: 'cio-autocomplete full-example-autocomplete-styles',
+  advancedParameters: {
+    displaySearchSuggestionImages: true,
+    displaySearchSuggestionResultCounts: true,
+    numTermsWithGroupSuggestions: 6,
+  },
+  sections: [
+    {
+      indexSectionName: 'Search Suggestions',
+      numResults: 8,
+      displaySearchTermHighlights: true,
+    },
+  ],
+  zeroStateSections: [
+    {
+      podId: 'bestsellers',
+      type: 'recommendations',
+      numResults: 6,
+    },
+  ],
+};
+SelectZeroStateRecommendationClearsSearchTermStorage.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  storageSetItem(CONSTANTS.SEARCH_TERM_STORAGE_KEY, 'test search term');
+
+  await userEvent.click(canvas.getByTestId('cio-input'));
+  await sleep(1000);
+  expect(canvas.getAllByText('Best Sellers').length).toBeGreaterThan(0);
+
+  const bestSellersSection = canvas.getByTestId('cio-results').querySelector('.cio-section');
+  const recommendationItems = bestSellersSection?.querySelectorAll('[data-cnstrc-item-id]');
+
+  const firstRecommendation = recommendationItems?.[0];
+  const isSelectTrackingRequestSent = await captureTrackingRequest(
+    '/recommendation_result_click',
+    async () => {
+      if (firstRecommendation) {
+        await userEvent.click(firstRecommendation);
+      }
+    }
+  );
+
+  expect(isSelectTrackingRequestSent).toBeTruthy();
+  expect(storageGetItem(CONSTANTS.SEARCH_TERM_STORAGE_KEY)).toBeNull();
+};
+
 // - click search icon => network search submit event
 export const SearchIconSubmitSearch = ComponentTemplate.bind({});
 SearchIconSubmitSearch.args = defaultArgs;
@@ -505,7 +560,7 @@ InGroupSuggestions.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   await userEvent.type(canvas.getByTestId('cio-input'), 'socks', { delay: 100 });
   await sleep(1000);
-  expect(canvas.getAllByText('in Socks').length).toEqual(1);
+  expect(canvas.getAllByText(/in Socks/)).toHaveLength(1);
 };
 
 export const InGroupSuggestionsTwo = ComponentTemplate.bind({});

src/stories/tests/HooksTests.stories.tsx

@@ -2,8 +2,8 @@ import { within, userEvent, expect, fn } from '@storybook/test';
 import { CioAutocomplete } from '../../index';
 import { argTypes } from '../Autocomplete/argTypes';
 import { getCioClient, sleep } from '../../utils/helpers';
-import { isTrackingRequestSent } from '../../utils/tracking';
-import { HooksTemplate } from '../Autocomplete/Hook/index';
+import { isTrackingRequestSent, captureTrackingRequest } from '../../utils/tracking';
+import { HooksTemplate } from '../Autocomplete/Hook';
 import { apiKey, onSubmitDefault as onSubmit } from '../../constants';
 import { CioAutocompleteProps } from '../../types';
 
@@ -73,8 +73,13 @@ FocusFiresTrackingEvent.args = defaultArgs;
 FocusFiresTrackingEvent.play = async ({ canvasElement }) => {
   await sleep(100);
   const canvas = within(canvasElement);
-  await userEvent.click(canvas.getByTestId('cio-input'));
-  const isFocusTrackingRequestSent = isTrackingRequestSent('action=focus');
+  const input = canvas.getByTestId('cio-input');
+
+  // Use the reusable tracking capture utility
+  const isFocusTrackingRequestSent = await captureTrackingRequest('action=focus', async () => {
+    await userEvent.click(input);
+  });
+
   expect(isFocusTrackingRequestSent).toBeTruthy();
 };
 
@@ -435,7 +440,7 @@ InGroupSuggestions.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   await userEvent.type(canvas.getByTestId('cio-input'), 'socks', { delay: 100 });
   await sleep(1000);
-  expect(canvas.getAllByText('in Socks').length).toEqual(1);
+  expect(canvas.getAllByText(/in Socks/)).toHaveLength(1);
 };
 
 export const InGroupSuggestionsTwo = HooksTemplate.bind({});

src/utils/tracking.ts

@@ -55,3 +55,36 @@ export const trackAutocompleteSelect = (cioClient, itemName, autocompleteData: a
     storageRemoveItem(CONSTANTS.SEARCH_TERM_STORAGE_KEY);
   }
 };
+
+export const trackRecommendationSelect = (cioClient, recommendationData: any = {}) => {
+  storageRemoveItem(CONSTANTS.SEARCH_TERM_STORAGE_KEY);
+  cioClient?.tracker.trackRecommendationClick(recommendationData);
+};
+
+export const captureTrackingRequest = async (
+  urlPattern: string,
+  action: () => Promise<void>
+): Promise<boolean> => {
+  let trackingCaptured = false;
+  const originalSetItem = Storage.prototype.setItem;
+
+  Storage.prototype.setItem = function setItemInterceptor(key, value) {
+    if (key === '_constructorio_requests') {
+      try {
+        const requests = JSON.parse(value);
+        if (requests.some((req: any) => req?.url?.includes(urlPattern))) {
+          trackingCaptured = true;
+        }
+      } catch (e) {
+        // Ignore parsing errors
+      }
+    }
+    return originalSetItem.call(this, key, value);
+  };
+
+  await action();
+
+  Storage.prototype.setItem = originalSetItem;
+
+  return trackingCaptured || isTrackingRequestSent(urlPattern);
+};