[CI-3436] Autocomplete UI - Add an option to call zero state requests on focus

src/constants.ts

@@ -243,6 +243,7 @@ To see this in action:
 export const termsWithImagesAndCountsDescription = `Pass boolean flags for \`displaySearchSuggestionImages\` and \`displaySearchSuggestionResultCounts\` fields to display images and counts for search suggestions. These fields need to be made displayable before they can be used. Please contact your Constructor Integration Engineer for details.`;
 
 export const debounceDescription = `Pass an integer to \`debounce\` to override the recommended, default delay employed for debouncing autocomplete network requests between keystrokes as your users type into the text input field. The default value is 250, which results in a debounce delay of 250 milliseconds.`;
+export const fetchZeroStateOnFocusDescription = `Pass a boolean to \`fetchZeroStateOnFocus\` to override the zero state fetching behavior from initial render to input focus.`;
 
 export const translationsDescription = `Pass a \`translations\` object to display translatable words in your preferred language.
 

src/hooks/useCioAutocomplete.ts

@@ -96,6 +96,7 @@ const useCioAutocomplete = (options: UseCioAutocompleteOptions) => {
 
   // Get autocomplete sections (autocomplete + recommendations + custom)
   const {
+    fetchRecommendationResults,
     activeSections,
     activeSectionsWithData,
     zeroStateActiveSections,
@@ -178,6 +179,9 @@ const useCioAutocomplete = (options: UseCioAutocompleteOptions) => {
           openMenu();
         }
         try {
+          if (advancedParameters?.fetchZeroStateOnFocus) {
+            fetchRecommendationResults();
+          }
           cioClient?.tracker?.trackInputFocus();
         } catch (error) {
           // eslint-disable-next-line no-console

src/hooks/useFetchRecommendationPod.ts

@@ -5,54 +5,58 @@ import { Item, SectionsData, RecommendationsSectionConfiguration, PodData } from
 
 const useFetchRecommendationPod = (
   cioClient: Nullable<ConstructorIOClient>,
-  recommendationPods: RecommendationsSectionConfiguration[]
+  recommendationPods: RecommendationsSectionConfiguration[],
+  fetchZeroStateOnFocus: boolean = false
 ) => {
   const [recommendationsResults, setRecommendationsResults] = useState<SectionsData>({});
   const [podsData, setPodsData] = useState<Record<string, PodData>>({});
 
-  useEffect(() => {
+  const fetchRecommendationResults = async () => {
     if (!cioClient || !Array.isArray(recommendationPods) || recommendationPods.length === 0) return;
-    const fetchRecommendationResults = async () => {
-      const responses = await Promise.all(
-        recommendationPods.map(({ podId, indexSectionName, ...parameters }) =>
-          cioClient.recommendations.getRecommendations(podId, {
-            ...parameters,
-            section: indexSectionName,
-          })
-        )
-      );
-      const recommendationsPodResults = {};
-      const recommendationsPodsData = {};
-      responses.forEach(({ response, request }, index) => {
-        const { pod, results } = response;
-        if (pod?.id) {
-          recommendationsPodResults[pod.id] = results?.map((item: Item) => ({
-            ...item,
-            id: item?.data?.id,
-            section: recommendationPods[index]?.indexSectionName,
-            podId: pod.id,
-          }));
-          recommendationsPodsData[pod.id] = {
-            displayName: pod.display_name,
-            podId: pod.id,
-            request,
-          };
-        }
-      });
 
-      try {
-        setRecommendationsResults(recommendationsPodResults);
-        setPodsData(recommendationsPodsData);
-      } catch (error: any) {
-        // eslint-disable-next-line no-console
-        console.log(error);
+    const responses = await Promise.all(
+      recommendationPods.map(({ podId, indexSectionName, ...parameters }) =>
+        cioClient.recommendations.getRecommendations(podId, {
+          ...parameters,
+          section: indexSectionName,
+        })
+      )
+    );
+    const recommendationsPodResults = {};
+    const recommendationsPodsData = {};
+    responses.forEach(({ response, request }, index) => {
+      const { pod, results } = response;
+      if (pod?.id) {
+        recommendationsPodResults[pod.id] = results?.map((item: Item) => ({
+          ...item,
+          id: item?.data?.id,
+          section: recommendationPods[index]?.indexSectionName,
+          podId: pod.id,
+        }));
+        recommendationsPodsData[pod.id] = {
+          displayName: pod.display_name,
+          podId: pod.id,
+          request,
+        };
       }
-    };
+    });
+
+    try {
+      setRecommendationsResults(recommendationsPodResults);
+      setPodsData(recommendationsPodsData);
+    } catch (error: any) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    }
+  };
+
+  useEffect(() => {
+    if (fetchZeroStateOnFocus) return;
     fetchRecommendationResults();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [cioClient]);
 
-  return { recommendationsResults, podsData };
+  return { fetchRecommendationResults, recommendationsResults, podsData };
 };
 
 export default useFetchRecommendationPod;

src/hooks/useRecommendationsObserver.ts

@@ -4,6 +4,8 @@ import ConstructorIO from '@constructor-io/constructorio-client-javascript';
 import { Section } from '../types';
 import { isRecommendationsSection } from '../typeGuards';
 
+const viewedRecommendations = new Set();
+
 /**
  * Custom hook that observes the visibility of recommendation sections and calls trackRecommendationView event.
  * This is done by using the IntersectionObserver API to observe the visibility of each recommendation section.
@@ -41,8 +43,9 @@ function useRecommendationsObserver(
     const observer = new IntersectionObserver((entries) => {
       // For each section, check if it's intersecting
       entries.forEach((entry) => {
-        if (entry.isIntersecting) {
+        if (entry.isIntersecting && !viewedRecommendations.has(entry.target)) {
           trackRecommendationView(entry.target as HTMLElement, sections, constructorIO);
+          viewedRecommendations.add(entry.target);
         }
       });
     }, intersectionObserverOptions);
@@ -63,6 +66,13 @@ function useRecommendationsObserver(
       });
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [menuIsOpen, sections]);
+
+  // clear viewed recommendations when menu is closed
+  useEffect(() => {
+    if (!menuIsOpen) {
+      viewedRecommendations.clear();
+    }
   }, [menuIsOpen]);
 }
 

src/hooks/useSections.ts

@@ -53,10 +53,12 @@ export default function useSections(
   } = useDebouncedFetchSection(query, cioClient, autocompleteSections, advancedParameters);
 
   // Fetch Recommendations Results
-  const { recommendationsResults, podsData } = useFetchRecommendationPod(
-    cioClient,
-    recommendationsSections
-  );
+  const { fetchRecommendationResults, recommendationsResults, podsData } =
+    useFetchRecommendationPod(
+      cioClient,
+      recommendationsSections,
+      advancedParameters?.fetchZeroStateOnFocus
+    );
 
   // Remove sections if necessary
   useEffect(() => {
@@ -101,6 +103,7 @@ export default function useSections(
   }, [autocompleteResults, recommendationsResults, activeSectionConfigs, podsData]);
 
   return {
+    fetchRecommendationResults,
     activeSections,
     activeSectionsWithData,
     zeroStateActiveSections,

src/stories/Autocomplete/Component/AdvancedParameters.stories.tsx

@@ -12,6 +12,7 @@ import {
   termsWithImagesAndCountsDescription,
   debounceDescription,
   translationsDescription,
+  fetchZeroStateOnFocusDescription,
 } from '../../../constants';
 
 export default {
@@ -117,3 +118,22 @@ addComponentStoryDescription(
   `const args = ${stringifyWithDefaults(Translations.args)}`,
   translationsDescription
 );
+
+export const FetchZeroStateOnFocus = ComponentTemplate.bind({});
+FetchZeroStateOnFocus.args = {
+  apiKey,
+  onSubmit,
+  advancedParameters: { fetchZeroStateOnFocus: true },
+  zeroStateSections: [
+    {
+      podId: 'bestsellers',
+      type: 'recommendations',
+      numResults: 3,
+    },
+  ],
+};
+addComponentStoryDescription(
+  FetchZeroStateOnFocus,
+  `const args = ${stringifyWithDefaults(FetchZeroStateOnFocus.args)}`,
+  fetchZeroStateOnFocusDescription
+);

src/stories/Autocomplete/Hook/AdvancedParameters.stories.tsx

@@ -11,6 +11,7 @@ import {
   onSubmitDefault as onSubmit,
   termsWithImagesAndCountsDescription,
   debounceDescription,
+  fetchZeroStateOnFocusDescription,
 } from '../../../constants';
 
 export default {
@@ -97,3 +98,22 @@ addHookStoryCode(
   `const args = ${stringifyWithDefaults(Debounce.args)}`,
   debounceDescription
 );
+
+export const FetchZeroStateOnFocus = HooksTemplate.bind({});
+FetchZeroStateOnFocus.args = {
+  apiKey,
+  onSubmit,
+  advancedParameters: { fetchZeroStateOnFocus: true },
+  zeroStateSections: [
+    {
+      podId: 'bestsellers',
+      type: 'recommendations',
+      numResults: 3,
+    },
+  ],
+};
+addHookStoryCode(
+  FetchZeroStateOnFocus,
+  `const args = ${stringifyWithDefaults(FetchZeroStateOnFocus.args)}`,
+  fetchZeroStateOnFocusDescription
+);

src/types.ts

@@ -26,6 +26,7 @@ export interface AdvancedParametersBase {
   displaySearchSuggestionResultCounts?: boolean;
   debounce?: number;
   translations?: Translations;
+  fetchZeroStateOnFocus?: boolean;
 }
 
 export type AdvancedParameters = AdvancedParametersBase &