feat(hits): return banner from connectHits (#6130)

* feat(hits): return banner from connectHits

* chore(hits): update bundle size

* chore(hits): exclude connectHits-test.ts from v3 tsconfig

* chore(hits): temporarily ignore ts error until js client types updated

* fix(hits): make the banner image url required

* fix(hits): image type is object instead of array

* fix(hits): use correct target values

Co-authored-by: Haroen Viaene <[email protected]>

---------

Co-authored-by: Haroen Viaene <[email protected]>
Co-authored-by: Aymeric Giraudet <[email protected]>

Author: 3 people

bundlesize.config.json

@@ -18,7 +18,7 @@
     },
     {
       "path": "packages/react-instantsearch-core/dist/umd/ReactInstantSearchCore.min.js",
-      "maxSize": "47.25 kB"
+      "maxSize": "47.5 kB"
     },
     {
       "path": "packages/react-instantsearch/dist/umd/ReactInstantSearch.min.js",

packages/algoliasearch-helper/index.d.ts

@@ -1326,6 +1326,49 @@ declare namespace algoliasearchHelper {
           };
         };
       };
+      /**
+       * Defining UI widget configuration
+       */
+      widgets?: {
+        /**
+         * 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';
+          };
+        }>;
+      };
     };
 
     /**

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

@@ -498,6 +498,12 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/hits/js/#co
       const helper = algoliasearchHelper(createSearchClient(), 'indexName', {
         index: 'indexName',
       });
+      const banner = { image: { urls: [{ url: 'https://example.com' }] } };
+      const renderingContent = {
+        widgets: {
+          banners: [banner],
+        },
+      };
 
       const renderState1 = hitsWidget.getRenderState(
         {},
@@ -506,6 +512,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/hits/js/#co
 
       expect(renderState1.hits).toEqual({
         hits: [],
+        banner: undefined,
         sendEvent: expect.any(Function),
         bindEvent: expect.any(Function),
         results: undefined,
@@ -518,7 +525,13 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/hits/js/#co
       ];
 
       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 renderState2 = hitsWidget.getRenderState(
@@ -537,6 +550,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/hits/js/#co
 
       expect(renderState2.hits).toEqual({
         hits: expectedHits,
+        banner,
         sendEvent: renderState1.hits.sendEvent,
         bindEvent: renderState1.hits.bindEvent,
         results,

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

@@ -146,6 +146,7 @@ const connectHits: HitsConnector = function connectHits(
           return {
             hits: [],
             results: undefined,
+            banner: undefined,
             sendEvent,
             bindEvent,
             widgetParams,
@@ -172,9 +173,12 @@ const connectHits: HitsConnector = function connectHits(
           { results }
         );
 
+        const banner = results.renderingContent?.widgets?.banners?.[0];
+
         return {
           hits: transformedHits,
           results,
+          banner,
           sendEvent,
           bindEvent,
           widgetParams,

tsconfig.v3.json

@@ -16,6 +16,7 @@
     // v3 has a wrong definition for optionalWords (only accepts string[])
     "packages/instantsearch.js/src/connectors/voice-search/__tests__/connectVoiceSearch-test.ts",
     // v3 does not have renderingContent (only errors in the test)
+    "packages/instantSearch.js/src/connectors/hits/__tests__/connectHits-test.ts",
     "packages/instantsearch.js/src/connectors/dynamic-widgets/__tests__/connectDynamicWidgets-test.ts",
     "packages/instantsearch.js/src/connectors/hierarchical-menu/__tests__/connectHierarchicalMenu-test.ts",
     "packages/instantsearch.js/src/connectors/menu/__tests__/connectMenu-test.ts",