feat(recommend): add support for event collection in recommend

packages/instantsearch-ui-components/src/components/Carousel.tsx

@@ -9,6 +9,7 @@ import type {
   RecommendItemComponentProps,
   RecordWithObjectID,
   Renderer,
+  SendEventForHits,
 } from '../types';
 
 export type CarouselProps<
@@ -28,6 +29,7 @@ export type CarouselProps<
   nextIconComponent?: () => JSX.Element;
   classNames?: Partial<CarouselClassNames>;
   translations?: Partial<CarouselTranslations>;
+  sendEvent: SendEventForHits;
 };
 
 export type CarouselClassNames = {
@@ -135,6 +137,7 @@ export function createCarouselComponent({ createElement, Fragment }: Renderer) {
       nextIconComponent: NextIconComponent = NextIconDefaultComponent,
       items,
       translations: userTranslations,
+      sendEvent,
       ...props
     } = userProps;
 
@@ -235,6 +238,12 @@ export function createCarouselComponent({ createElement, Fragment }: Renderer) {
               className={cx(cssClasses.item)}
               aria-roledescription="slide"
               aria-label={`${index + 1} of ${items.length}`}
+              onClick={() => {
+                sendEvent('click:internal', item, 'Item Clicked');
+              }}
+              onAuxClick={() => {
+                sendEvent('click:internal', item, 'Item Clicked');
+              }}
             >
               <ItemComponent item={item} />
             </li>

packages/instantsearch-ui-components/src/components/__tests__/Carousel.test.tsx

@@ -43,6 +43,7 @@ describe('Carousel', () => {
   test('renders items', () => {
     const { container } = render(
       <CarouselWithRefs
+        sendEvent={jest.fn()}
         items={[
           {
             objectID: '1',
@@ -138,6 +139,7 @@ describe('Carousel', () => {
   test('renders custom "Previous" and "Next" components', () => {
     const { container } = render(
       <CarouselWithRefs
+        sendEvent={jest.fn()}
         items={[
           {
             objectID: '1',
@@ -215,6 +217,7 @@ describe('Carousel', () => {
   test('accepts custom translations', () => {
     const { container } = render(
       <CarouselWithRefs
+        sendEvent={jest.fn()}
         items={[{ objectID: '1', __position: 1 }]}
         itemComponent={ItemComponent}
         translations={{
@@ -248,6 +251,7 @@ describe('Carousel', () => {
   test('forwards `div` props to the root element', () => {
     const { container } = render(
       <CarouselWithRefs
+        sendEvent={jest.fn()}
         items={[{ objectID: '1', __position: 1 }]}
         itemComponent={ItemComponent}
         hidden={true}
@@ -262,6 +266,7 @@ describe('Carousel', () => {
   test('accepts custom class names', () => {
     const { container } = render(
       <CarouselWithRefs
+        sendEvent={jest.fn()}
         items={[{ objectID: '1', __position: 1 }]}
         itemComponent={ItemComponent}
         classNames={{

packages/instantsearch-ui-components/src/components/recommend-shared/List.tsx

@@ -25,8 +25,12 @@ export function createListComponent({ createElement }: Renderer) {
             <li
               key={item.objectID}
               className={classNames.item}
-              onClick={sendEvent}
-              onAuxClick={sendEvent}
+              onClick={() => {
+                sendEvent('click:internal', item, 'Item Clicked');
+              }}
+              onAuxClick={() => {
+                sendEvent('click:internal', item, 'Item Clicked');
+              }}
             >
               <ItemComponent item={item} />
             </li>

packages/instantsearch-ui-components/src/types/Recommend.ts

@@ -87,7 +87,8 @@ export type RecommendInnerComponentProps<TObject> = {
 
 export type RecordWithObjectID<TObject = Record<string, unknown>> = TObject & {
   objectID: string;
-  // @TODO: once events are implemented, this type needs `__position` and `__queryID`
+  __position: number;
+  __queryID?: string;
 };
 
 export type RecommendItemComponentProps<TObject> = {

packages/instantsearch.js/src/connectors/frequently-bought-together/connectFrequentlyBoughtTogether.ts

@@ -4,8 +4,12 @@ import {
   noop,
   escapeHits,
   TAG_PLACEHOLDER,
+  createSendEventForHits,
+  addAbsolutePosition,
+  addQueryID,
 } from '../../lib/utils';
 
+import type { SendEventForHits } from '../../lib/utils';
 import type {
   Connector,
   TransformItems,
@@ -30,6 +34,11 @@ export type FrequentlyBoughtTogetherRenderState<
    * The matched recommendations from Algolia API.
    */
   items: Array<AlgoliaHit<THit>>;
+
+  /**
+   * Sends an event to the Insights middleware.
+   */
+  sendEvent: SendEventForHits;
 };
 
 export type FrequentlyBoughtTogetherConnectorParams<
@@ -118,6 +127,8 @@ export default (function connectFrequentlyBoughtTogether<
       throw new Error(withUsage('The `objectIDs` option is required.'));
     }
 
+    let sendEvent: SendEventForHits;
+
     return {
       dependsOn: 'recommend',
       $$type: 'ais.frequentlyBoughtTogether',
@@ -148,23 +159,45 @@ export default (function connectFrequentlyBoughtTogether<
         return renderState;
       },
 
-      getWidgetRenderState({ results }) {
+      getWidgetRenderState({ results, helper, instantSearchInstance }) {
+        if (!sendEvent) {
+          sendEvent = createSendEventForHits({
+            instantSearchInstance,
+            getIndex: () => helper.getIndex(),
+            widgetType: this.$$type,
+          });
+        }
         if (results === null || results === undefined) {
-          return { items: [], widgetParams };
+          return { items: [], widgetParams, sendEvent };
         }
 
         if (escapeHTML && results.hits.length > 0) {
           results.hits = escapeHits(results.hits);
         }
 
+        const itemsWithAbsolutePosition = addAbsolutePosition(
+          results.hits,
+          0,
+          1
+        );
+
+        const itemsWithAbsolutePositionAndQueryID = addQueryID(
+          itemsWithAbsolutePosition,
+          results.queryID
+        );
+
         const transformedItems = transformItems(
-          results.hits as Array<AlgoliaHit<THit>>,
+          itemsWithAbsolutePositionAndQueryID,
           {
             results: results as RecommendResponse<AlgoliaHit<THit>>,
           }
         );
 
-        return { items: transformedItems, widgetParams };
+        return {
+          items: transformedItems,
+          widgetParams,
+          sendEvent,
+        };
       },
 
       dispose({ recommendState }) {

packages/instantsearch.js/src/connectors/looking-similar/connectLookingSimilar.ts

@@ -4,8 +4,12 @@ import {
   noop,
   escapeHits,
   TAG_PLACEHOLDER,
+  createSendEventForHits,
+  addAbsolutePosition,
+  addQueryID,
 } from '../../lib/utils';
 
+import type { SendEventForHits } from '../../lib/utils';
 import type {
   Connector,
   TransformItems,
@@ -30,6 +34,10 @@ export type LookingSimilarRenderState<
    * The matched recommendations from the Algolia API.
    */
   items: Array<AlgoliaHit<THit>>;
+  /**
+   * Sends an event to the Insights middleware.
+   */
+  sendEvent: SendEventForHits;
 };
 
 export type LookingSimilarConnectorParams<
@@ -121,6 +129,8 @@ export default (function connectLookingSimilar<
       throw new Error(withUsage('The `objectIDs` option is required.'));
     }
 
+    let sendEvent: SendEventForHits;
+
     return {
       dependsOn: 'recommend',
       $$type: 'ais.lookingSimilar',
@@ -151,20 +161,44 @@ export default (function connectLookingSimilar<
         return renderState;
       },
 
-      getWidgetRenderState({ results }) {
+      getWidgetRenderState({ results, helper, instantSearchInstance }) {
+        if (!sendEvent) {
+          sendEvent = createSendEventForHits({
+            instantSearchInstance,
+            getIndex: () => helper.getIndex(),
+            widgetType: this.$$type,
+          });
+        }
         if (results === null || results === undefined) {
-          return { items: [], widgetParams };
+          return { items: [], widgetParams, sendEvent };
         }
 
         if (escapeHTML && results.hits.length > 0) {
           results.hits = escapeHits(results.hits);
         }
 
-        return {
-          items: transformItems(results.hits as Array<AlgoliaHit<THit>>, {
+        const itemsWithAbsolutePosition = addAbsolutePosition(
+          results.hits,
+          0,
+          1
+        );
+
+        const itemsWithAbsolutePositionAndQueryID = addQueryID(
+          itemsWithAbsolutePosition,
+          results.queryID
+        );
+
+        const transformedItems = transformItems(
+          itemsWithAbsolutePositionAndQueryID,
+          {
             results: results as RecommendResponse<AlgoliaHit<THit>>,
-          }),
+          }
+        );
+
+        return {
+          items: transformedItems,
           widgetParams,
+          sendEvent,
         };
       },
 

packages/instantsearch.js/src/connectors/related-products/connectRelatedProducts.ts

@@ -4,8 +4,12 @@ import {
   noop,
   escapeHits,
   TAG_PLACEHOLDER,
+  createSendEventForHits,
+  addAbsolutePosition,
+  addQueryID,
 } from '../../lib/utils';
 
+import type { SendEventForHits } from '../../lib/utils';
 import type {
   Connector,
   TransformItems,
@@ -30,6 +34,11 @@ export type RelatedProductsRenderState<
    * The matched recommendations from the Algolia API.
    */
   items: Array<AlgoliaHit<THit>>;
+
+  /**
+   * Sends an event to the Insights middleware.
+   */
+  sendEvent: SendEventForHits;
 };
 
 export type RelatedProductsConnectorParams<
@@ -121,6 +130,8 @@ export default (function connectRelatedProducts<
       throw new Error(withUsage('The `objectIDs` option is required.'));
     }
 
+    let sendEvent: SendEventForHits;
+
     return {
       dependsOn: 'recommend',
       $$type: 'ais.relatedProducts',
@@ -151,20 +162,44 @@ export default (function connectRelatedProducts<
         return renderState;
       },
 
-      getWidgetRenderState({ results }) {
+      getWidgetRenderState({ results, helper, instantSearchInstance }) {
+        if (!sendEvent) {
+          sendEvent = createSendEventForHits({
+            instantSearchInstance,
+            getIndex: () => helper.getIndex(),
+            widgetType: this.$$type,
+          });
+        }
         if (results === null || results === undefined) {
-          return { items: [], widgetParams };
+          return { items: [], widgetParams, sendEvent };
         }
 
         if (escapeHTML && results.hits.length > 0) {
           results.hits = escapeHits(results.hits);
         }
 
-        return {
-          items: transformItems(results.hits as Array<AlgoliaHit<THit>>, {
+        const itemsWithAbsolutePosition = addAbsolutePosition(
+          results.hits,
+          0,
+          1
+        );
+
+        const itemsWithAbsolutePositionAndQueryID = addQueryID(
+          itemsWithAbsolutePosition,
+          results.queryID
+        );
+
+        const transformedItems = transformItems(
+          itemsWithAbsolutePositionAndQueryID,
+          {
             results: results as RecommendResponse<AlgoliaHit<THit>>,
-          }),
+          }
+        );
+
+        return {
+          items: transformedItems,
           widgetParams,
+          sendEvent,
         };
       },