Fix Templates Banner on home page (#2103)

<!--
Ensure the title clearly reflects what was changed.
Provide a clear and concise description of the changes made. The PR
should only contain the changes related to the issue, and no other
unrelated changes.
-->

Fixes OPS-3843

The banner is not visible in the templates dialog so I copied the check
from there

https://github.com/openops-cloud/openops/blob/9b4caf09455206483e7084229db2a2601418a79b/packages/react-ui/src/app/features/templates/components/select-flow-template-dialog-content.tsx#L99-L106

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: Roman Snapko

packages/react-ui/src/app/features/home/components/home-onboarding-view.tsx

@@ -23,6 +23,7 @@ import { Permission } from '@openops/shared';
 import { t } from 'i18next';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useShowTemplatesBanner } from '../../templates/hooks/use-show-templates-banner';
 import { useOpenBenchmarkWizard } from './use-open-benchmark-wizard';
 import { useBenchmarkBannerState } from './useBenchmarkBannerState';
 
@@ -56,11 +57,12 @@ const HomeOnboardingView = ({
   });
   const { updateUserSettings } = userSettingsHooks.useUpdateUserSettings();
 
-  const { cloudUser, isHomeCloudConnectionClosed } = useAppStore((state) => ({
-    cloudUser: state.cloudUser,
+  const { isHomeCloudConnectionClosed } = useAppStore((state) => ({
     isHomeCloudConnectionClosed: state.userSettings.isHomeCloudConnectionClosed,
   }));
 
+  const { isCloudUser } = useShowTemplatesBanner();
+
   const { checkAccess } = useAuthorization();
   const hasWriteFlowPermission = checkAccess(Permission.WRITE_FLOW);
 
@@ -72,7 +74,7 @@ const HomeOnboardingView = ({
     setTimeout(() => {
       refetch({ cancelRefetch: true });
     }, 1000);
-  }, [cloudUser, refetch, setSelectedDomains]);
+  }, [isCloudUser, refetch, setSelectedDomains]);
 
   const onExploreMoreClick = () => {
     const currentUser = authenticationSession.getCurrentUser();
@@ -123,11 +125,11 @@ const HomeOnboardingView = ({
         onSeeAllClick={onExploreTemplatesClick}
         onFilterClick={onTemplatesFilterClick}
         templates={templatesWithIntegrations}
-        showFilters={!!cloudUser}
+        showFilters={isCloudUser}
         filters={domains}
         onTemplateClick={onTemplateClick}
       />
-      {!cloudUser && !isHomeCloudConnectionClosed && (
+      {!isCloudUser && !isHomeCloudConnectionClosed && (
         <DismissiblePanel
           className="h-fit"
           buttonClassName="z-50 size-6"
@@ -140,7 +142,7 @@ const HomeOnboardingView = ({
           />
         </DismissiblePanel>
       )}
-      {(isHelpViewClosed || cloudUser || isHomeCloudConnectionClosed) && (
+      {(isHelpViewClosed || isCloudUser || isHomeCloudConnectionClosed) && (
         <div className="flex-1 border rounded-sm overflow-hidden min-h-[120px]">
           <NoWorkflowsPlaceholder
             onExploreTemplatesClick={onExploreTemplatesClick}

packages/react-ui/src/app/features/templates/components/select-flow-template-dialog-content.tsx

@@ -1,5 +1,4 @@
 import { useAuthorization } from '@/app/common/hooks/authorization-hooks';
-import { flagsHooks } from '@/app/common/hooks/flags-hooks';
 import { useTheme } from '@/app/common/providers/theme-provider';
 import { OPENOPS_CONNECT_TEMPLATES_URL } from '@/app/constants/cloud';
 import { ExpandedTemplate } from '@/app/features/templates/components/expanded-template';
@@ -19,8 +18,8 @@ import {
 } from '@openops/components/ui';
 import { FlowTemplateDto, Permission } from '@openops/shared';
 import { popupFeatures } from '../../cloud/lib/popup';
-import { useCloudProfile } from '../../cloud/lib/use-cloud-profile';
 import { useUserInfoPolling } from '../../cloud/lib/use-user-info-polling';
+import { useShowTemplatesBanner } from '../hooks/use-show-templates-banner';
 import {
   FlowTemplateFilterSidebarProps,
   PublicFlowTemplateFilterSidebarWrapper,
@@ -96,14 +95,11 @@ const SelectFlowTemplateDialogContent = ({
 }: SelectFlowTemplateDialogContentProps) => {
   const { theme } = useTheme();
   const ownerLogoUrl = useOwnerLogoUrl();
-  const { isConnectedToCloudTemplates } = useCloudProfile();
   const { createPollingInterval } = useUserInfoPolling();
-  const useCloudTemplates = flagsHooks.useShouldFetchCloudTemplates();
+  const { isCloudUser } = useShowTemplatesBanner();
   const { checkAccess } = useAuthorization();
   const hasWriteFlowPermission = checkAccess(Permission.WRITE_FLOW);
-  const isFullCatalog =
-    !isTemplatePreselected &&
-    (isConnectedToCloudTemplates || !useCloudTemplates);
+  const isFullCatalog = !isTemplatePreselected && isCloudUser;
 
   const onExploreMoreClick = () => {
     const currentUser = authenticationSession.getCurrentUser();

packages/react-ui/src/app/features/templates/components/select-flow-template-dialog.tsx

@@ -23,7 +23,7 @@ import { useMutation } from '@tanstack/react-query';
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useDebounceValue } from 'usehooks-ts';
-import { useCloudProfile } from '../../cloud/lib/use-cloud-profile';
+import { useShowTemplatesBanner } from '../hooks/use-show-templates-banner';
 import { cloudTemplatesApi } from '../lib/cloud-templates-api';
 import { SelectFlowTemplateDialogContent } from './select-flow-template-dialog-content';
 
@@ -93,7 +93,7 @@ const SelectFlowTemplateDialog = ({
     TEMPLATE_FILTER_DEBOUNCE_DELAY,
   );
 
-  const { isConnectedToCloudTemplates } = useCloudProfile();
+  const { isCloudUser } = useShowTemplatesBanner();
 
   const { templatesWithIntegrations, isLoading: isTemplateListLoading } =
     templatesHooks.useTemplatesMetadataWithIntegrations({
@@ -105,7 +105,7 @@ const SelectFlowTemplateDialog = ({
       categories: selectedCategories,
       useCloudTemplates,
       gettingStartedTemplateFilter: 'exclude',
-      isConnectedToCloudTemplates,
+      isConnectedToCloudTemplates: isCloudUser,
     });
 
   const {

packages/react-ui/src/app/features/templates/hooks/use-show-templates-banner.ts

@@ -0,0 +1,20 @@
+import { flagsHooks } from '@/app/common/hooks/flags-hooks';
+import { useMemo } from 'react';
+import { useCloudProfile } from '../../cloud/lib/use-cloud-profile';
+
+/**
+ * Custom hook to determine if the templates banner should be shown.
+ * It checks if the user is connected to cloud templates and if the cloud templates flag is enabled.
+ *
+ * @returns {boolean} isCloudUser - True if the user is connected to cloud templates and cloud templates are enabled.
+ */
+export const useShowTemplatesBanner = () => {
+  const { isConnectedToCloudTemplates } = useCloudProfile();
+  const useCloudTemplates = flagsHooks.useShouldFetchCloudTemplates();
+
+  const isCloudUser = useMemo(() => {
+    return isConnectedToCloudTemplates && !!useCloudTemplates;
+  }, [isConnectedToCloudTemplates, useCloudTemplates]);
+
+  return { isCloudUser };
+};