✨ Add 'Browse Sales templates' card to empty workflows view

n8n-io · Mar 21, 2024 · 2be4f7b · 2be4f7b
1 parent 693900a
commit 2be4f7b
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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(),