feat: Fetch user cloud role and pass it on in website links (#8942)

cypress/e2e/29-templates.cy.ts

@@ -28,9 +28,11 @@ describe('Workflow templates', () => {
 		// Link should contain instance address and n8n version
 		mainSidebar.getters.templates().parent('a').then(($a) => {
 			const href = $a.attr('href');
-			// Link should have current instance address and n8n version
+			const params = new URLSearchParams(href);
-			expect(href).to.include(`utm_instance=${window.location.origin}`);
+			// Link should have all mandatory parameters expected on the website
-			expect(href).to.match(/utm_n8n_version=[0-9]+\.[0-9]+\.[0-9]+/);
+			expect(decodeURIComponent(`${params.get('utm_instance')}`)).to.include(window.location.origin);
+			expect(params.get('utm_n8n_version')).to.match(/[0-9]+\.[0-9]+\.[0-9]+/);
+			expect(params.get('utm_awc')).to.match(/[0-9]+/);
 		});
 		mainSidebar.getters.templates().parent('a').should('have.attr', 'target', '_blank');
 	});

packages/editor-ui/src/Interface.ts

@@ -1758,6 +1758,7 @@ export declare namespace Cloud {
 		username: string;
 		email: string;
 		hasEarlyAccess?: boolean;
+		role?: string;
 	};
 }
 

packages/editor-ui/src/components/MainSidebar.vue

@@ -387,7 +387,10 @@ export default defineComponent({
 			});
 		},
 		trackTemplatesClick() {
-			this.$telemetry.track('User clicked on templates', {});
+			this.$telemetry.track('User clicked on templates', {
+				role: this.usersStore.currentUserCloudInfo?.role,
+				active_workflow_count: this.workflowsStore.activeWorkflows.length,
+			});
 		},
 		async onUserActionToggle(action: string) {
 			switch (action) {

packages/editor-ui/src/constants.ts

@@ -752,7 +752,10 @@ export const MOUSE_EVENT_BUTTONS = {
 export const TEMPLATES_URLS = {
 	DEFAULT_API_HOST: 'https://api.n8n.io/api/',
 	BASE_WEBSITE_URL: 'https://n8n.io/workflows',
-	UTM_QUERY: 'utm_source=n8n_app&utm_medium=template_library',
+	UTM_QUERY: {
+		utm_source: 'n8n_app',
+		utm_medium: 'template_library',
+	},
 };
 
 export const ROLE = {

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -2102,6 +2102,7 @@
 	"workflows.empty.description": "Create your first workflow",
 	"workflows.empty.description.readOnlyEnv": "No workflows here yet",
 	"workflows.empty.startFromScratch": "Start from scratch",
+	"workflows.empty.browseTemplates": "Browse {category} templates",
 	"workflows.shareModal.title": "Share '{name}'",
 	"workflows.shareModal.select.placeholder": "Add users...",
 	"workflows.shareModal.list.delete": "Remove access",

packages/editor-ui/src/plugins/icons/index.ts

@@ -74,6 +74,7 @@ import {
 	faGraduationCap,
 	faGripLinesVertical,
 	faGripVertical,
+	faHandHoldingUsd,
 	faHandScissors,
 	faHandPointLeft,
 	faHashtag,
@@ -237,6 +238,7 @@ export const FontAwesomePlugin: Plugin<{}> = {
 		addIcon(faGlobe);
 		addIcon(faGlobeAmericas);
 		addIcon(faGraduationCap);
+		addIcon(faHandHoldingUsd);
 		addIcon(faHandScissors);
 		addIcon(faHandPointLeft);
 		addIcon(faHashtag);

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

@@ -22,6 +22,8 @@ import {
 } from '@/api/templates';
 import { getFixedNodesList } from '@/utils/nodeViewUtils';
 import { useRootStore } from '@/stores/n8nRoot.store';
+import { useUsersStore } from './users.store';
+import { useWorkflowsStore } from './workflows.store';
 
 const TEMPLATES_PAGE_SIZE = 20;
 
@@ -115,14 +117,38 @@ export const useTemplatesStore = defineStore(STORES.TEMPLATES, {
 			const settingsStore = useSettingsStore();
 			return settingsStore.templatesHost !== TEMPLATES_URLS.DEFAULT_API_HOST;
 		},
+		/**
+		 * Constructs URLSearchParams object based on the default parameters for the template repository
+		 * and provided additional parameters
+		 */
+		getWebsiteTemplateRepositoryParameters() {
+			const rootStore = useRootStore();
+			const userStore = useUsersStore();
+			const workflowsStore = useWorkflowsStore();
+			const defaultParameters: Record<string, string> = {
+				...TEMPLATES_URLS.UTM_QUERY,
+				utm_instance: this.currentN8nPath,
+				utm_n8n_version: rootStore.versionCli,
+				utm_awc: String(workflowsStore.activeWorkflows.length),
+			};
+			if (userStore.currentUserCloudInfo?.role) {
+				defaultParameters.utm_user_role = userStore.currentUserCloudInfo.role;
+			}
+			return (additionalParameters: Record<string, string> = {}) => {
+				return new URLSearchParams({
+					...defaultParameters,
+					...additionalParameters,
+				});
+			};
+		},
 		/**
 		 * Construct the URL for the template repository on the website
 		 * @returns {string}
 		 */
 		getWebsiteTemplateRepositoryURL(): string {
-			return `${TEMPLATES_URLS.BASE_WEBSITE_URL}?${TEMPLATES_URLS.UTM_QUERY}&utm_instance=${
+			return `${
-				this.currentN8nPath
+				TEMPLATES_URLS.BASE_WEBSITE_URL
-			}&utm_n8n_version=${useRootStore().versionCli}`;
+			}?${this.getWebsiteTemplateRepositoryParameters().toString()}`;
 		},
 		/**
 		 * Construct the URL for the template page on the website for a given template id
@@ -130,20 +156,19 @@ export const useTemplatesStore = defineStore(STORES.TEMPLATES, {
 		 */
 		getWebsiteTemplatePageURL() {
 			return (id: string) => {
-				return `${TEMPLATES_URLS.BASE_WEBSITE_URL}/${id}?${TEMPLATES_URLS.UTM_QUERY}&utm_instance=${
+				return `${
-					this.currentN8nPath
+					TEMPLATES_URLS.BASE_WEBSITE_URL
-				}&utm_n8n_version=${useRootStore().versionCli}`;
+				}/${id}?${this.getWebsiteTemplateRepositoryParameters().toString()}`;
 			};
 		},
 		/**
 		 * Construct the URL for the template category page on the website for a given category id
-		 * @returns {function(string): string}
 		 */
 		getWebsiteCategoryURL() {
 			return (id: string) => {
-				return `${TEMPLATES_URLS.BASE_WEBSITE_URL}/?categories=${id}&${
+				return `${TEMPLATES_URLS.BASE_WEBSITE_URL}/?${this.getWebsiteTemplateRepositoryParameters({
-					TEMPLATES_URLS.UTM_QUERY
+					categories: id,
-				}&utm_instance=${this.currentN8nPath}&utm_n8n_version=${useRootStore().versionCli}`;
+				}).toString()}`;
 			};
 		},
 	},

packages/editor-ui/src/views/WorkflowsView.vue

@@ -84,6 +84,27 @@
 					</n8n-text>
 				</div>
 				<div v-if="!readOnlyEnv" :class="['text-center', 'mt-2xl', $style.actionsContainer]">
+					<a
+						v-if="userCloudAccount?.role === 'Sales'"
+						:href="getTemplateRepositoryURL('Sales')"
+						:class="$style.emptyStateCard"
+						target="_blank"
+					>
+						<n8n-card
+							hoverable
+							data-test-id="browse-sales-templates-card"
+							@click="trackCategoryLinkClick('Sales')"
+						>
+							<n8n-icon :class="$style.emptyStateCardIcon" icon="hand-holding-usd" />
+							<n8n-text size="large" class="mt-xs" color="text-base">
+								{{
+									$locale.baseText('workflows.empty.browseTemplates', {
+										interpolate: { category: 'Sales' },
+									})
+								}}
+							</n8n-text>
+						</n8n-card>
+					</a>
 					<n8n-card
 						:class="$style.emptyStateCard"
 						hoverable
@@ -154,6 +175,7 @@ import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUsersStore } from '@/stores/users.store';
+import { useTemplatesStore } from '@/stores/templates.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useCredentialsStore } from '@/stores/credentials.store';
 import { useSourceControlStore } from '@/stores/sourceControl.store';
@@ -205,6 +227,8 @@ const WorkflowsView = defineComponent({
 			useCredentialsStore,
 			useSourceControlStore,
 			useTagsStore,
+			useTemplatesStore,
+			useUsersStore,
 		),
 		readOnlyEnv(): boolean {
 			return this.sourceControlStore.preferences.branchReadOnly;
@@ -237,6 +261,9 @@ const WorkflowsView = defineComponent({
 		suggestedTemplates() {
 			return this.uiStore.suggestedTemplates;
 		},
+		userCloudAccount() {
+			return this.usersStore.currentUserCloudInfo;
+		},
 	},
 	watch: {
 		'filters.tags'() {
@@ -272,6 +299,15 @@ const WorkflowsView = defineComponent({
 				source: 'Workflows list',
 			});
 		},
+		getTemplateRepositoryURL(category: string) {
+			return this.templatesStore.getWebsiteCategoryURL(category);
+		},
+		trackCategoryLinkClick(category: string) {
+			this.$telemetry.track(`User clicked Browse ${category} Templates`, {
+				role: this.usersStore.currentUserCloudInfo?.role,
+				active_workflow_count: this.workflowsStore.activeWorkflows.length,
+			});
+		},
 		async initialize() {
 			await Promise.all([
 				this.usersStore.fetchUsers(),