[CSL-3053] Zero state recommendations a/b support (#129)

* zero state sectiosn a/b

* reactify

* fix

* change feature toggle name

* rename func

Author: stanlp1

src/hooks/useCioAutocomplete.ts

@@ -14,7 +14,7 @@ import usePrevious from './usePrevious';
 import {
   getItemPosition,
   getItemsForActiveSections,
-  getSearchSuggestionFeatures,
+  getFeatures,
   trackRecommendationView,
   toKebabCase,
 } from '../utils';
@@ -102,6 +102,8 @@ const useCioAutocomplete = (options: UseCioAutocompleteOptions) => {
     advancedParameters
   );
 
+  const features = useMemo(() => getFeatures(request), [request]);
+
   // Get dropdown items array from active sections (autocomplete + recommendations + custom)
   const items = useMemo(
     () => getItemsForActiveSections(activeSectionsWithData),
@@ -128,7 +130,7 @@ const useCioAutocomplete = (options: UseCioAutocompleteOptions) => {
     query,
     sections: activeSectionsWithData,
     request,
-    featureToggles: getSearchSuggestionFeatures(request),
+    featureToggles: features,
     isOpen: isOpen && items?.length > 0,
     getMenuProps: () => ({
       ...getMenuProps(),
@@ -162,7 +164,11 @@ const useCioAutocomplete = (options: UseCioAutocompleteOptions) => {
         if (options.onFocus) {
           options.onFocus();
         }
-        if (zeroStateActiveSections && openOnFocus !== false) {
+        if (
+          zeroStateActiveSections &&
+          openOnFocus !== false &&
+          features.featureDisplayZeroStateRecommendations
+        ) {
           openMenu();
         }
         if (query?.length) {

src/hooks/useFetchRecommendationPod.ts

@@ -23,7 +23,7 @@ const useFetchRecommendationPod = (
       );
       const recommendationsPodResults = {};
       const recommendationsPodsData = {};
-      responses.forEach(({ response }, index) => {
+      responses.forEach(({ response, request }, index) => {
         const { pod, results } = response;
         if (pod?.id) {
           recommendationsPodResults[pod.id] = results?.map((item: Item) => ({
@@ -32,7 +32,11 @@ const useFetchRecommendationPod = (
             section: recommendationPods[index]?.indexSectionName,
             podId: pod.id,
           }));
-          recommendationsPodsData[pod.id] = { displayName: pod.display_name, podId: pod.id };
+          recommendationsPodsData[pod.id] = {
+            displayName: pod.display_name,
+            podId: pod.id,
+            request,
+          };
         }
       });
 

src/hooks/useSections.ts

@@ -9,7 +9,7 @@ import {
   UserDefinedSection,
   Section,
 } from '../types';
-import { getActiveSectionsWithData } from '../utils';
+import { getActiveSectionsWithData, getFeatures } from '../utils';
 import useDebouncedFetchSection from './useDebouncedFetchSections';
 import useFetchRecommendationPod from './useFetchRecommendationPod';
 import { isAutocompleteSection, isRecommendationsSection } from '../typeGuards';
@@ -21,12 +21,15 @@ export default function useSections(
   zeroStateSections: UserDefinedSection[] | undefined,
   advancedParameters?: AdvancedParameters
 ) {
-  const zeroStateActiveSections = !query.length && zeroStateSections;
+  const zeroStateActiveSections = !query.length && zeroStateSections?.length;
 
   // Define All Sections
-  const activeSections = zeroStateActiveSections ? zeroStateSections : sections;
+  const [activeSections, setActiveSections] = useState<UserDefinedSection[]>(
+    zeroStateActiveSections ? zeroStateSections : sections
+  );
   const sectionsRefs = useRef<RefObject<HTMLLIElement>[]>(activeSections.map(() => createRef()));
   const [activeSectionsWithData, setActiveSectionsWithData] = useState<Section[]>([]);
+
   const autocompleteSections = useMemo(
     () =>
       activeSections?.filter((config: UserDefinedSection) =>
@@ -56,6 +59,21 @@ export default function useSections(
     recommendationsSections
   );
 
+  // Remove sections if necessary
+  useEffect(() => {
+    const features = getFeatures(Object.values(podsData || {})?.[0]?.request);
+
+    if (zeroStateActiveSections) {
+      if (!features.featureDisplayZeroStateRecommendations) {
+        setActiveSections([]);
+      } else {
+        setActiveSections(zeroStateSections);
+      }
+    } else {
+      setActiveSections(sections);
+    }
+  }, [zeroStateSections, zeroStateActiveSections, sections, podsData]);
+
   // Merge Recommendation Pods Display Name from Dashboard
   const activeSectionConfigs = useMemo(
     () =>

src/types.ts

@@ -187,4 +187,5 @@ export type Translations = {
 export interface PodData {
   podId: string;
   displayName: string;
+  request: Partial<AutocompleteRequestType>;
 }

src/utils.ts

@@ -13,9 +13,11 @@ export type GetItemPosition = (args: { item: Item; items: Item[] }) => {
   sectionId: string;
 };
 
-export function getSearchSuggestionFeatures(request: Partial<AutocompleteRequestType>) {
+export function getFeatures(request: Partial<AutocompleteRequestType>) {
   let featureDisplaySearchSuggestionImages = false;
   let featureDisplaySearchSuggestionResultCounts = false;
+  let featureDisplayZeroStateRecommendations = true;
+
   if (request?.features?.custom_autosuggest_ui === true) {
     switch (request?.feature_variants?.custom_autosuggest_ui) {
       case 'custom_autosuggest_ui_result_count':
@@ -28,13 +30,18 @@ export function getSearchSuggestionFeatures(request: Partial<AutocompleteRequest
         featureDisplaySearchSuggestionImages = true;
         featureDisplaySearchSuggestionResultCounts = true;
         break;
+      case 'custom_autosuggest_ui_disable_recommendations_in_zero_state':
+        featureDisplayZeroStateRecommendations = false;
+        break;
       default:
         break;
     }
   }
+
   return {
     featureDisplaySearchSuggestionImages,
     featureDisplaySearchSuggestionResultCounts,
+    featureDisplayZeroStateRecommendations,
   };
 }