Fallback to Merchandisers displayName set for recommendation pods (#193)

* Fallback to Merchandisers displayName set for recommendation pods

* Update docs

Author: mocca102

src/constants.ts

@@ -72,6 +72,7 @@ export const sectionsDescription = `- by default, typing a query will fetch data
 - the order of the objects in the \`sections\` array determines the order of the results
 - each autocomplete section object must have a \`indexSectionName\`
 - each recommendation section object must have a \`podId\`
+- passing displayName in the sectionConfiguration will override the displayName set by Merchandisers on the Customer Dashboard for the recommendation section
 - each custom section object must have a \`displayName\`
 - each section object can specify a \`type\`
 - each section object can override the default \`numResults\` of 8
@@ -112,6 +113,7 @@ export const zeroStateDescription = `- when the text input field has no text, we
 - the order of the objects in the \`zeroStateSections\` array determines the order of the results
 - each autocomplete section object must have a \`indexSectionName\`
 - each recommendation section object must have a \`podId\`
+- passing displayName in the sectionConfiguration will override the displayName set by Merchandisers on the Customer Dashboard for the recommendation section
 - each custom section object must have a \`displayName\`
 - each section object can specify a \`type\`
 - each section object can override the default \`numResults\` of 8`;

src/hooks/useSections/index.ts

@@ -62,7 +62,8 @@ export default function useSections(
     sectionsResults,
     activeSections,
     sectionsRefs,
-    query
+    query,
+    recommendations.podsData
   );
 
   return {

src/hooks/useSections/useActiveSectionsWithData.ts

@@ -1,12 +1,14 @@
+/* eslint-disable max-params */
 import { RefObject, useEffect, useState } from 'react';
-import { UserDefinedSection, Section, SectionsData } from '../../types';
+import { UserDefinedSection, Section, SectionsData, PodData } from '../../types';
 import { getActiveSectionsWithData } from '../../utils';
 
 export default function useActiveSectionsWithData(
   sectionsResults: SectionsData,
   activeSections: UserDefinedSection[],
   sectionsRefs: React.MutableRefObject<RefObject<HTMLLIElement>[]>,
-  query: string
+  query: string,
+  podsData: Record<string, PodData>
 ) {
   const [activeSectionsWithData, setActiveSectionsWithData] = useState<Section[]>([]);
 
@@ -15,13 +17,14 @@ export default function useActiveSectionsWithData(
     const activeSectionsWithDataValue = getActiveSectionsWithData(
       activeSections,
       sectionsResults,
-      sectionsRefs
+      sectionsRefs,
+      podsData
     );
 
     if (activeSectionsWithDataValue.length || !query) {
       setActiveSectionsWithData(activeSectionsWithDataValue);
     }
-  }, [activeSections, sectionsResults, sectionsRefs, query]);
+  }, [activeSections, sectionsResults, sectionsRefs, query, podsData]);
 
   return activeSectionsWithData;
 }

src/stories/tests/ComponentTests.stories.tsx

@@ -224,22 +224,22 @@ TypeSearchTermRenderSectionsDefaultOrder.play = async ({ canvasElement }) => {
   expect(canvas.getAllByTestId('cio-item-Products').length).toBeGreaterThan(0);
   expect(canvas.getAllByText('Best Sellers').length).toBeGreaterThan(0);
 
-  expect(canvas.getByTestId('cio-results').children[0].className).toContain('cio-section');
-  expect(canvas.getByTestId('cio-results').children[0].className).toContain(
+  expect(canvas.getByTestId('cio-results').children[1].className).toContain('cio-section');
+  expect(canvas.getByTestId('cio-results').children[1].className).toContain(
     'cio-section-search-suggestions'
   );
 
-  expect(canvas.getByTestId('cio-results').children[1].className).toContain('cio-section');
-  expect(canvas.getByTestId('cio-results').children[1].className).toContain('cio-section-products');
-
-  // bestsellers indexSectionName is products, and we render class based on that
   expect(canvas.getByTestId('cio-results').children[2].className).toContain('cio-section');
   expect(canvas.getByTestId('cio-results').children[2].className).toContain('cio-section-products');
 
+  // bestsellers indexSectionName is products, and we render class based on that
+  expect(canvas.getByTestId('cio-results').children[3].className).toContain('cio-section');
+  expect(canvas.getByTestId('cio-results').children[3].className).toContain('cio-section-products');
+
   // @deprecated The following classNames will be removed in the next major version
-  expect(canvas.getByTestId('cio-results').children[0].className).toContain('Search Suggestions');
-  expect(canvas.getByTestId('cio-results').children[1].className).toContain('Products');
-  expect(canvas.getByTestId('cio-results').children[2].className).toContain('bestsellers');
+  expect(canvas.getByTestId('cio-results').children[1].className).toContain('Search Suggestions');
+  expect(canvas.getByTestId('cio-results').children[2].className).toContain('Products');
+  expect(canvas.getByTestId('cio-results').children[3].className).toContain('bestsellers');
 };
 
 // - type search term => render all sections in custom order
@@ -268,22 +268,22 @@ TypeSearchTermRenderSectionsCustomOrder.play = async ({ canvasElement }) => {
   expect(canvas.getAllByTestId('cio-item-Products').length).toBeGreaterThan(0);
   expect(canvas.getAllByText('Best Sellers').length).toBeGreaterThan(0);
 
-  expect(canvas.getByTestId('cio-results').children[0].className).toContain('cio-section');
-  expect(canvas.getByTestId('cio-results').children[0].className).toContain('cio-section-products');
-
-  // bestsellers indexSectionName is products, and we render class based on that
   expect(canvas.getByTestId('cio-results').children[1].className).toContain('cio-section');
   expect(canvas.getByTestId('cio-results').children[1].className).toContain('cio-section-products');
 
+  // bestsellers indexSectionName is products, and we render class based on that
   expect(canvas.getByTestId('cio-results').children[2].className).toContain('cio-section');
-  expect(canvas.getByTestId('cio-results').children[2].className).toContain(
+  expect(canvas.getByTestId('cio-results').children[2].className).toContain('cio-section-products');
+
+  expect(canvas.getByTestId('cio-results').children[3].className).toContain('cio-section');
+  expect(canvas.getByTestId('cio-results').children[3].className).toContain(
     'cio-section-search-suggestions'
   );
 
   // @deprecated The following classNames will be removed in the next major version
-  expect(canvas.getByTestId('cio-results').children[0].className).toContain('Products');
-  expect(canvas.getByTestId('cio-results').children[1].className).toContain('bestsellers');
-  expect(canvas.getByTestId('cio-results').children[2].className).toContain('Search Suggestions');
+  expect(canvas.getByTestId('cio-results').children[1].className).toContain('Products');
+  expect(canvas.getByTestId('cio-results').children[2].className).toContain('bestsellers');
+  expect(canvas.getByTestId('cio-results').children[3].className).toContain('Search Suggestions');
 };
 
 // - select term suggestion => network tracking event

src/utils.ts

@@ -13,7 +13,7 @@ import {
   CONSTANTS,
 } from './beaconUtils';
 import { isRecommendationsSection } from './typeGuards';
-import { Item, Section, UserDefinedSection, SectionsData, Translations } from './types';
+import { Item, Section, UserDefinedSection, SectionsData, Translations, PodData } from './types';
 import version from './version';
 
 export type GetItemPosition = (args: { item: Item; items: Item[] }) => {
@@ -180,7 +180,8 @@ export const getCioClient = (apiKey?: string, cioJsClientOptions?: ConstructorCl
 export const getActiveSectionsWithData = (
   activeSections: UserDefinedSection[],
   sectionsResults: SectionsData,
-  sectionsRefs: React.MutableRefObject<React.RefObject<HTMLLIElement>[]>
+  sectionsRefs: React.MutableRefObject<React.RefObject<HTMLLIElement>[]>,
+  podsData: Record<string, PodData>
 ) => {
   const activeSectionsWithData: Section[] = [];
 
@@ -216,6 +217,11 @@ export const getActiveSectionsWithData = (
         data: sectionData,
       };
 
+      if (sectionConfig.type === 'recommendations') {
+        section.displayName =
+          sectionConfig.displayName || podsData[sectionConfig.podId].displayName;
+      }
+
       // If ref passed as part of `SectionConfiguration`, use it.
       // Otherwise, use the ref from our library generated refs array
       const userDefinedSectionRef = sectionConfig.ref;