feat(editor): Add lead enrichment suggestions to workflow list (#8042)

## Summary
We want to show lead enrichment template suggestions to cloud users that
agreed to this. This PR introduces the front-end part of this feature
- Handoff document
- Figma Hi-fi
- [How to
test](https://linear.app/n8n/issue/ADO-1549/[n8n-fe]-update-workflows-list-page-to-show-fake-door-templates#comment-b6644c99)

Tests are being worked on in a separate PR

## Related tickets and issues
Fixes ADO-1546
Fixes ADO-1549
Fixes ADO-1604

## Review / Merge checklist
- [ ] PR title and summary are descriptive. **Remember, the title
automatically goes into the changelog. Use `(no-changelog)` otherwise.**
([conventions](https://github.com/n8n-io/n8n/blob/master/.github/pull_request_title_conventions.md))
- [ ] [Docs updated](https://github.com/n8n-io/n8n-docs) or follow-up
ticket created.
- [ ] Tests included.
> A bug is not considered fixed, unless a test is added to prevent it
from happening again.
   > A feature is not complete without tests.

---------

Co-authored-by: ricardo <ricardoespinoza105@gmail.com>

packages/editor-ui/src/stores/cloudPlan.store.ts

@@ -5,9 +5,14 @@ import { useRootStore } from '@/stores/n8nRoot.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUIStore } from '@/stores/ui.store';
 import { useUsersStore } from '@/stores/users.store';
-import { getAdminPanelLoginCode, getCurrentPlan, getCurrentUsage } from '@/api/cloudPlans';
+import {
+	getAdminPanelLoginCode,
+	getCurrentPlan,
+	getCurrentUsage,
+	fetchSuggestedTemplates,
+} from '@/api/cloudPlans';
 import { DateTime } from 'luxon';
-import { CLOUD_TRIAL_CHECK_INTERVAL, STORES } from '@/constants';
+import { CLOUD_TRIAL_CHECK_INTERVAL, SUGGESTED_TEMPLATES_FLAG, STORES } from '@/constants';
 import { hasPermission } from '@/rbac/permissions';
 
 const DEFAULT_STATE: CloudPlanState = {
@@ -163,6 +168,17 @@ export const useCloudPlanStore = defineStore(STORES.CLOUD_PLAN, () => {
 		window.location.href = `https://${adminPanelHost}/login?code=${code}`;
 	};
 
+	const loadSuggestedTemplates = async () => {
+		try {
+			const additionalTemplates = await fetchSuggestedTemplates(rootStore.getRestApiContext);
+			if (additionalTemplates.sections && additionalTemplates.sections.length > 0) {
+				useUIStore().setSuggestedTemplates(additionalTemplates);
+			}
+		} catch (error) {
+			console.warn('Error checking for lead enrichment templates:', error);
+		}
+	};
+
 	const initialize = async () => {
 		if (state.initialized) {
 			return;
@@ -180,6 +196,12 @@ export const useCloudPlanStore = defineStore(STORES.CLOUD_PLAN, () => {
 			console.warn('Error fetching user cloud account:', error);
 		}
 
+		const localStorageFlag = localStorage.getItem(SUGGESTED_TEMPLATES_FLAG);
+		// Don't show if users already opted in
+		if (localStorageFlag !== 'false') {
+			await loadSuggestedTemplates();
+		}
+
 		state.initialized = true;
 	};
 

packages/editor-ui/src/stores/ui.store.ts

@@ -37,6 +37,7 @@ import {
 	DEBUG_PAYWALL_MODAL_KEY,
 	N8N_PRICING_PAGE_URL,
 	WORKFLOW_HISTORY_VERSION_RESTORE,
+	SUGGESTED_TEMPLATES_PREVIEW_MODAL_KEY,
 } from '@/constants';
 import type {
 	CloudUpdateLinkSourceType,
@@ -53,6 +54,7 @@ import type {
 	NewCredentialsModal,
 	ThemeOption,
 	AppliedThemeOption,
+	SuggestedTemplates,
 } from '@/Interface';
 import { defineStore } from 'pinia';
 import { useRootStore } from '@/stores/n8nRoot.store';
@@ -181,6 +183,9 @@ export const useUIStore = defineStore(STORES.UI, {
 			[WORKFLOW_HISTORY_VERSION_RESTORE]: {
 				open: false,
 			},
+			[SUGGESTED_TEMPLATES_PREVIEW_MODAL_KEY]: {
+				open: false,
+			},
 		},
 		modalStack: [],
 		sidebarMenuCollapsed: true,
@@ -217,6 +222,11 @@ export const useUIStore = defineStore(STORES.UI, {
 		executionSidebarAutoRefresh: true,
 		bannersHeight: 0,
 		bannerStack: [],
+		suggestedTemplates: undefined,
+		// Notifications that should show when a view is initialized
+		// This enables us to set a queue of notifications form outside (another component)
+		// and then show them when the view is initialized
+		pendingNotificationsForViews: {},
 	}),
 	getters: {
 		appliedTheme(): AppliedThemeOption {
@@ -642,5 +652,20 @@ export const useUIStore = defineStore(STORES.UI, {
 		clearBannerStack() {
 			this.bannerStack = [];
 		},
+		setSuggestedTemplates(templates: SuggestedTemplates) {
+			this.suggestedTemplates = templates;
+		},
+		deleteSuggestedTemplates() {
+			this.suggestedTemplates = undefined;
+		},
+		getNotificationsForView(view: VIEWS): NotificationOptions[] {
+			return this.pendingNotificationsForViews[view] ?? [];
+		},
+		setNotificationsForView(view: VIEWS, notifications: NotificationOptions[]) {
+			this.pendingNotificationsForViews[view] = notifications;
+		},
+		deleteNotificationsForView(view: VIEWS) {
+			delete this.pendingNotificationsForViews[view];
+		},
 	},
 });