From 2be4f7b1f79e50883554adad26a27d5d26225bf3 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Thu, 21 Mar 2024 11:47:23 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20'Browse=20Sales=20templates'?=
 =?UTF-8?q?=20card=20to=20empty=20workflows=20view?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/plugins/i18n/locales/en.json          |  1 +
 packages/editor-ui/src/plugins/icons/index.ts |  2 ++
 .../editor-ui/src/stores/templates.store.ts   |  1 -
 .../editor-ui/src/views/WorkflowsView.vue     | 25 +++++++++++++++++++
 4 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 0d6455d76f3ed..7ba6ebc1280be 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -2091,6 +2091,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",
diff --git a/packages/editor-ui/src/plugins/icons/index.ts b/packages/editor-ui/src/plugins/icons/index.ts
index 231c3e2d5ef5c..d3fcf5bb6a7bf 100644
--- a/packages/editor-ui/src/plugins/icons/index.ts
+++ b/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);
diff --git a/packages/editor-ui/src/stores/templates.store.ts b/packages/editor-ui/src/stores/templates.store.ts
index 434d4d009a68d..a3606e0ab9fe8 100644
--- a/packages/editor-ui/src/stores/templates.store.ts
+++ b/packages/editor-ui/src/stores/templates.store.ts
@@ -163,7 +163,6 @@ export const useTemplatesStore = defineStore(STORES.TEMPLATES, {
 		},
 		/**
 		 * Construct the URL for the template category page on the website for a given category id
-		 * @returns {function(string): string}
 		 */
 		getWebsiteCategoryURL() {
 			return (id: string) => {
diff --git a/packages/editor-ui/src/views/WorkflowsView.vue b/packages/editor-ui/src/views/WorkflowsView.vue
index b6874e6ecaa94..381e12a69610b 100644
--- a/packages/editor-ui/src/views/WorkflowsView.vue
+++ b/packages/editor-ui/src/views/WorkflowsView.vue
@@ -84,6 +84,22 @@
 					</n8n-text>
 				</div>
 				<div v-if="!readOnlyEnv" :class="['text-center', 'mt-2xl', $style.actionsContainer]">
+					<n8n-card
+						v-if="userCloudAccount?.role === 'Sales'"
+						:class="$style.emptyStateCard"
+						hoverable
+						data-test-id="browse-sales-templates-card"
+						@click="openTemplateRepository('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>
 					<n8n-card
 						:class="$style.emptyStateCard"
 						hoverable
@@ -154,6 +170,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 +222,7 @@ const WorkflowsView = defineComponent({
 			useCredentialsStore,
 			useSourceControlStore,
 			useTagsStore,
+			useTemplatesStore,
 		),
 		readOnlyEnv(): boolean {
 			return this.sourceControlStore.preferences.branchReadOnly;
@@ -237,6 +255,9 @@ const WorkflowsView = defineComponent({
 		suggestedTemplates() {
 			return this.uiStore.suggestedTemplates;
 		},
+		userCloudAccount() {
+			return this.usersStore.currentUserCloudInfo;
+		},
 	},
 	watch: {
 		'filters.tags'() {
@@ -272,6 +293,10 @@ const WorkflowsView = defineComponent({
 				source: 'Workflows list',
 			});
 		},
+		openTemplateRepository(category: string) {
+			const url = this.templatesStore.getWebsiteCategoryURL(category);
+			window.open(url, '_blank');
+		},
 		async initialize() {
 			await Promise.all([
 				this.usersStore.fetchUsers(),