feat(infinite-hits): return banner info with connectInfiniteHits (#6230)

* feat(infinite-hits): return banner info with connectInfiniteHits

* chore(hits): extract Banner type

Author: taylorcjohnson

packages/algoliasearch-helper/index.d.ts

@@ -1335,41 +1335,7 @@ declare namespace algoliasearchHelper {
         /**
          * Configuration for banners
          */
-        banners?: Array<{
-          /**
-           * Configuration for the banner image
-           */
-          image: {
-            /**
-             * Set of possible URLs of the banner image
-             */
-            urls: Array<{
-              /**
-               * URL of the banner image
-               */
-              url: string;
-            }>;
-            /**
-             * Alt text of the banner image
-             */
-            title?: string;
-          };
-          /**
-           * Configuration for the banner click navigation
-           */
-          link?: {
-            /**
-             * URL to navigate to when the banner is clicked
-             */
-            url: string;
-            /**
-             * Target of the navigation
-             * - `_blank` opens the URL in a new tab
-             * - `_self` opens the URL in the same tab
-             */
-            target?: '_blank' | '_self';
-          };
-        }>;
+        banners?: Banner[];
       };
     };
 
@@ -1509,6 +1475,42 @@ declare namespace algoliasearchHelper {
     getRefinements(): SearchResults.Refinement[];
   }
 
+  export type Banner = {
+    /**
+     * Configuration for the banner image
+     */
+    image: {
+      /**
+       * Set of possible URLs of the banner image
+       */
+      urls: Array<{
+        /**
+         * URL of the banner image
+         */
+        url: string;
+      }>;
+      /**
+       * Alt text of the banner image
+       */
+      title?: string;
+    };
+    /**
+     * Configuration for the banner click navigation
+     */
+    link?: {
+      /**
+       * URL to navigate to when the banner is clicked
+       */
+      url: string;
+      /**
+       * Target of the navigation
+       * - `_blank` opens the URL in a new tab
+       * - `_self` opens the URL in the same tab
+       */
+      target?: '_blank' | '_self';
+    };
+  };
+
   namespace SearchResults {
     interface Facet {
       name: string;

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

@@ -2,23 +2,12 @@
 import { cx } from '../lib';
 
 import type { ComponentProps, Renderer, SendEventForHits } from '../types';
+import type { Banner } from 'algoliasearch-helper';
 
 // Should be imported from a shared package in the future
 type Hit = Record<string, unknown> & {
   objectID: string;
 };
-type Banner = {
-  image: {
-    urls: Array<{
-      url: string;
-    }>;
-    title?: string;
-  };
-  link?: {
-    url: string;
-    target?: '_blank' | '_self';
-  };
-};
 
 type BannerProps = ComponentProps<'aside'> & {
   banner: Banner;

packages/instantsearch.js/src/connectors/hits/connectHits.ts

@@ -21,19 +21,13 @@ import type {
   Renderer,
   IndexRenderState,
 } from '../../types';
-import type { SearchResults } from 'algoliasearch-helper';
+import type { Banner, SearchResults } from 'algoliasearch-helper';
 
 const withUsage = createDocumentationMessageGenerator({
   name: 'hits',
   connector: true,
 });
 
-type Banner = NonNullable<
-  NonNullable<
-    Required<SearchResults<Hit>['renderingContent']>
-  >['widgets']['banners']
->[number];
-
 export type HitsRenderState<THit extends NonNullable<object> = BaseHit> = {
   /**
    * The matched hits from Algolia API.

packages/instantsearch.js/src/connectors/infinite-hits/__tests__/connectInfiniteHits-test.ts

@@ -1331,6 +1331,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/infinite-hi
         bindEvent: expect.any(Function),
         isFirstPage: true,
         isLastPage: true,
+        banner: undefined,
         results: undefined,
         showMore: expect.any(Function),
         showPrevious: expect.any(Function),
@@ -1394,6 +1395,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/infinite-hi
         bindEvent: renderState1.infiniteHits.bindEvent,
         isFirstPage: true,
         isLastPage: true,
+        banner: undefined,
         results,
         showMore: renderState1.infiniteHits.showMore,
         showPrevious: renderState1.infiniteHits.showPrevious,
@@ -1424,6 +1426,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/infinite-hi
         bindEvent: expect.any(Function),
         isFirstPage: true,
         isLastPage: true,
+        banner: undefined,
         results: undefined,
         showMore: expect.any(Function),
         showPrevious: expect.any(Function),
@@ -1439,6 +1442,12 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/infinite-hi
       const helper = algoliasearchHelper(createSearchClient(), 'indexName', {
         index: 'indexName',
       });
+      const banner = { image: { urls: [{ url: 'https://example.com' }] } };
+      const renderingContent = {
+        widgets: {
+          banners: [banner],
+        },
+      };
 
       const initOptions = createInitOptions({ state: helper.state, helper });
 
@@ -1450,7 +1459,13 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/infinite-hi
       ];
 
       const results = new SearchResults(helper.state, [
-        createSingleSearchResponse({ hits, queryID: 'theQueryID' }),
+        createSingleSearchResponse({
+          hits,
+          queryID: 'theQueryID',
+          // @TODO: remove once algoliasearch js client has been updated
+          // @ts-expect-error
+          renderingContent,
+        }),
       ]);
 
       const renderOptions = createRenderOptions({
@@ -1488,6 +1503,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/infinite-hi
         bindEvent: renderState1.bindEvent,
         isFirstPage: true,
         isLastPage: true,
+        banner,
         results,
         showMore: renderState1.showMore,
         showPrevious: renderState1.showPrevious,

packages/instantsearch.js/src/connectors/infinite-hits/connectInfiniteHits.ts

@@ -25,6 +25,7 @@ import type {
   IndexRenderState,
 } from '../../types';
 import type {
+  Banner,
   AlgoliaSearchHelper as Helper,
   PlainSearchParameters,
   SearchParameters,
@@ -138,6 +139,11 @@ export type InfiniteHitsRenderState<
    * The response from the Algolia API.
    */
   results?: SearchResults<Hit<THit>>;
+
+  /**
+   * The banner to display above the hits.
+   */
+  banner?: Banner;
 };
 
 const withUsage = createDocumentationMessageGenerator({
@@ -342,6 +348,8 @@ export default (function connectInfiniteHits<
 
         const cachedHits = cache.read({ state: normalizeState(state) }) || {};
 
+        const banner = results?.renderingContent?.widgets?.banners?.[0];
+
         if (!results) {
           showPrevious = getShowPrevious(helper);
           showMore = getShowMore(helper);
@@ -426,6 +434,7 @@ export default (function connectInfiniteHits<
           currentPageHits,
           sendEvent,
           bindEvent,
+          banner,
           results,
           showPrevious,
           showMore,