feat(editor): Update templates links (#9024)

packages/editor-ui/src/Interface.ts

@@ -687,7 +687,8 @@ export type IPersonalizationLatestVersion = IPersonalizationSurveyAnswersV4;
 export type IPersonalizationSurveyVersions =
 	| IPersonalizationSurveyAnswersV1
 	| IPersonalizationSurveyAnswersV2
-	| IPersonalizationSurveyAnswersV3;
+	| IPersonalizationSurveyAnswersV3
+	| IPersonalizationSurveyAnswersV4;
 
 export type Roles = typeof ROLE;
 export type IRole = Roles[keyof Roles];

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

@@ -243,7 +243,7 @@ export default defineComponent({
 					available:
 						this.settingsStore.isTemplatesEnabled && !this.templatesStore.hasCustomTemplatesHost,
 					link: {
-						href: this.templatesStore.getWebsiteTemplateRepositoryURL,
+						href: this.templatesStore.websiteTemplateRepositoryURL,
 						target: '_blank',
 					},
 				},

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

@@ -77,6 +77,7 @@ import {
 	faHandHoldingUsd,
 	faHandScissors,
 	faHandPointLeft,
+	faHandshake,
 	faHashtag,
 	faHdd,
 	faHistory,
@@ -240,6 +241,7 @@ export const FontAwesomePlugin: Plugin<{}> = {
 		addIcon(faGraduationCap);
 		addIcon(faHandHoldingUsd);
 		addIcon(faHandScissors);
+		addIcon(faHandshake);
 		addIcon(faHandPointLeft);
 		addIcon(faHashtag);
 		addIcon(faHdd);

packages/editor-ui/src/router.ts

@@ -187,7 +187,7 @@ export const routes = [
 		beforeEnter: (_to, _from, next) => {
 			const templatesStore = useTemplatesStore();
 			if (!templatesStore.hasCustomTemplatesHost) {
-				window.location.href = templatesStore.getWebsiteTemplateRepositoryURL;
+				window.location.href = templatesStore.websiteTemplateRepositoryURL;
 			} else {
 				next();
 			}

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

@@ -121,7 +121,7 @@ export const useTemplatesStore = defineStore(STORES.TEMPLATES, {
 		 * Constructs URLSearchParams object based on the default parameters for the template repository
 		 * and provided additional parameters
 		 */
-		getWebsiteTemplateRepositoryParameters() {
+		websiteTemplateRepositoryParameters() {
 			const rootStore = useRootStore();
 			const userStore = useUsersStore();
 			const workflowsStore = useWorkflowsStore();
@@ -131,8 +131,10 @@ export const useTemplatesStore = defineStore(STORES.TEMPLATES, {
 				utm_n8n_version: rootStore.versionCli,
 				utm_awc: String(workflowsStore.activeWorkflows.length),
 			};
-			if (userStore.currentUserCloudInfo?.role) {
+			const userRole: string | undefined =
-				defaultParameters.utm_user_role = userStore.currentUserCloudInfo.role;
+				userStore.currentUserCloudInfo?.role ?? userStore.currentUser?.personalizationAnswers?.role;
+			if (userRole) {
+				defaultParameters.utm_user_role = userRole;
 			}
 			return (additionalParameters: Record<string, string> = {}) => {
 				return new URLSearchParams({
@@ -145,28 +147,17 @@ export const useTemplatesStore = defineStore(STORES.TEMPLATES, {
 		 * Construct the URL for the template repository on the website
 		 * @returns {string}
 		 */
-		getWebsiteTemplateRepositoryURL(): string {
+		websiteTemplateRepositoryURL(): string {
 			return `${
 				TEMPLATES_URLS.BASE_WEBSITE_URL
-			}?${this.getWebsiteTemplateRepositoryParameters().toString()}`;
+			}?${this.websiteTemplateRepositoryParameters().toString()}`;
-		},
-		/**
-		 * Construct the URL for the template page on the website for a given template id
-		 * @returns {function(string): string}
-		 */
-		getWebsiteTemplatePageURL() {
-			return (id: string) => {
-				return `${
-					TEMPLATES_URLS.BASE_WEBSITE_URL
-				}/${id}?${this.getWebsiteTemplateRepositoryParameters().toString()}`;
-			};
 		},
 		/**
 		 * Construct the URL for the template category page on the website for a given category id
 		 */
 		getWebsiteCategoryURL() {
 			return (id: string) => {
-				return `${TEMPLATES_URLS.BASE_WEBSITE_URL}/?${this.getWebsiteTemplateRepositoryParameters({
+				return `${TEMPLATES_URLS.BASE_WEBSITE_URL}/?${this.websiteTemplateRepositoryParameters({
 					categories: id,
 				}).toString()}`;
 			};

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

@@ -85,8 +85,8 @@
 				</div>
 				<div v-if="!readOnlyEnv" :class="['text-center', 'mt-2xl', $style.actionsContainer]">
 					<a
-						v-if="userCloudAccount?.role === 'Sales'"
+						v-if="isSalesUser"
-						:href="getTemplateRepositoryURL('Sales')"
+						:href="getTemplateRepositoryURL()"
 						:class="$style.emptyStateCard"
 						target="_blank"
 					>
@@ -95,7 +95,7 @@
 							data-test-id="browse-sales-templates-card"
 							@click="trackCategoryLinkClick('Sales')"
 						>
-							<n8n-icon :class="$style.emptyStateCardIcon" icon="hand-holding-usd" />
+							<n8n-icon :class="$style.emptyStateCardIcon" icon="handshake" />
 							<n8n-text size="large" class="mt-xs" color="text-base">
 								{{
 									$locale.baseText('workflows.empty.browseTemplates', {
@@ -261,8 +261,14 @@ const WorkflowsView = defineComponent({
 		suggestedTemplates() {
 			return this.uiStore.suggestedTemplates;
 		},
-		userCloudAccount() {
+		userRole() {
-			return this.usersStore.currentUserCloudInfo;
+			const userRole: string | undefined =
+				this.usersStore.currentUserCloudInfo?.role ??
+				this.usersStore.currentUser?.personalizationAnswers?.role;
+			return userRole;
+		},
+		isSalesUser() {
+			return ['Sales', 'sales-and-marketing'].includes(this.userRole);
 		},
 	},
 	watch: {
@@ -299,8 +305,8 @@ const WorkflowsView = defineComponent({
 				source: 'Workflows list',
 			});
 		},
-		getTemplateRepositoryURL(category: string) {
+		getTemplateRepositoryURL() {
-			return this.templatesStore.getWebsiteCategoryURL(category);
+			return this.templatesStore.websiteTemplateRepositoryURL;
 		},
 		trackCategoryLinkClick(category: string) {
 			this.$telemetry.track(`User clicked Browse ${category} Templates`, {