From 2a9da6645c180a5e003b4205c4b12b82f0bb0ba5 Mon Sep 17 00:00:00 2001
From: ricardo <ricardoespinoza105@gmail.com>
Date: Wed, 24 May 2023 17:28:17 -0400
Subject: [PATCH] Change upgrade CTA on community editions

---
 .../src/composables/useUpgradeLink.ts         |  6 ++---
 .../src/plugins/i18n/locales/en.json          |  2 +-
 packages/editor-ui/src/stores/ui.store.ts     | 27 ++++++-------------
 .../editor-ui/src/views/VariablesView.vue     |  8 ++----
 4 files changed, 13 insertions(+), 30 deletions(-)

diff --git a/packages/editor-ui/src/composables/useUpgradeLink.ts b/packages/editor-ui/src/composables/useUpgradeLink.ts
index 5908e241bad67..7f9748e6d1bb6 100644
--- a/packages/editor-ui/src/composables/useUpgradeLink.ts
+++ b/packages/editor-ui/src/composables/useUpgradeLink.ts
@@ -1,11 +1,10 @@
 import type { BaseTextKey } from '@/plugins/i18n';
-import { useUIStore, useUsageStore } from '@/stores';
+import { useUIStore } from '@/stores';
 import { useI18n } from './useI18n';
 import { computed } from 'vue';
 
 export function useUpgradeLink(queryParams = { default: '', desktop: '' }) {
 	const uiStore = useUIStore();
-	const usageStore = useUsageStore();
 	const { i18n } = useI18n();
 
 	const upgradeLinkUrl = computed(() => {
@@ -13,11 +12,10 @@ export function useUpgradeLink(queryParams = { default: '', desktop: '' }) {
 		let url = i18n.baseText(linkUrlTranslationKey);
 
 		if (linkUrlTranslationKey.endsWith('.upgradeLinkUrl')) {
-			url = `${usageStore.viewPlansUrl}${queryParams.default}`;
+			url = `${url}${queryParams.default}`;
 		} else if (linkUrlTranslationKey.endsWith('.desktop')) {
 			url = `${url}${queryParams.desktop}`;
 		}
-
 		return url;
 	});
 
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 0e9829ac5947b..1fa2b2bec4beb 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -1709,7 +1709,7 @@
 	"contextual.communityNodes.unavailable.description.desktop": "Community nodes feature is unavailable on desktop. Please choose one of our available self-hosting plans.",
 	"contextual.communityNodes.unavailable.button.desktop": "View plans",
 
-	"contextual.upgradeLinkUrl": "https://subscription.n8n.io/",
+	"contextual.upgradeLinkUrl": "https://n8n.io/pricing/",
 	"contextual.upgradeLinkUrl.cloud": "https://app.n8n.cloud/account/change-plan",
 	"contextual.upgradeLinkUrl.desktop": "https://n8n.io/pricing/?utm_source=n8n-internal&utm_medium=desktop",
 
diff --git a/packages/editor-ui/src/stores/ui.store.ts b/packages/editor-ui/src/stores/ui.store.ts
index 7fe1177b6940a..5c581aab93e87 100644
--- a/packages/editor-ui/src/stores/ui.store.ts
+++ b/packages/editor-ui/src/stores/ui.store.ts
@@ -49,8 +49,8 @@ import { getCurlToJson } from '@/api/curlHelper';
 import { useWorkflowsStore } from './workflows.store';
 import { useSettingsStore } from './settings.store';
 import { useUsageStore } from './usage.store';
-import type { BaseTextKey } from '@/plugins/i18n';
-import { i18n as locale } from '@/plugins/i18n';
+import { useUpgradeLink } from '@/composables';
+import { useTelemetry } from '@/composables';
 
 export const useUIStore = defineStore(STORES.UI, {
 	state: (): UIState => ({
@@ -314,22 +314,6 @@ export const useUIStore = defineStore(STORES.UI, {
 				return false;
 			};
 		},
-		upgradeLinkUrl() {
-			return (source: string, utm_campaign: string): string => {
-				const usageStore = useUsageStore();
-				const linkUrlTranslationKey = this.contextBasedTranslationKeys
-					.upgradeLinkUrl as BaseTextKey;
-				let linkUrl = locale.baseText(linkUrlTranslationKey);
-
-				if (linkUrlTranslationKey.endsWith('.upgradeLinkUrl')) {
-					linkUrl = `${usageStore.viewPlansUrl}&source=${source}`;
-				} else if (linkUrlTranslationKey.endsWith('.desktop')) {
-					linkUrl = `${linkUrl}&utm_campaign=${utm_campaign || source}`;
-				}
-
-				return linkUrl;
-			};
-		},
 	},
 	actions: {
 		setMode(name: string, mode: string): void {
@@ -480,7 +464,12 @@ export const useUIStore = defineStore(STORES.UI, {
 			return getCurlToJson(rootStore.getRestApiContext, curlCommand);
 		},
 		goToUpgrade(source: string, utm_campaign: string): void {
-			window.open(this.upgradeLinkUrl(source, utm_campaign), '_blank');
+			const { upgradeLinkUrl } = useUpgradeLink();
+			useTelemetry().track('User clicked on paywall CTA', { source });
+			window.open(
+				`${upgradeLinkUrl.value}?source=${source}&utm_campaign=${utm_campaign}`,
+				'_blank',
+			);
 		},
 	},
 });
diff --git a/packages/editor-ui/src/views/VariablesView.vue b/packages/editor-ui/src/views/VariablesView.vue
index da02446222465..2803de775a86e 100644
--- a/packages/editor-ui/src/views/VariablesView.vue
+++ b/packages/editor-ui/src/views/VariablesView.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 import { useEnvironmentsStore, useUIStore, useSettingsStore, useUsersStore } from '@/stores';
-import { useI18n, useTelemetry, useToast, useUpgradeLink, useMessage } from '@/composables';
+import { useI18n, useTelemetry, useToast, useMessage } from '@/composables';
 
 import ResourcesListLayout from '@/components/layouts/ResourcesListLayout.vue';
 import VariablesRow from '@/components/VariablesRow.vue';
@@ -70,10 +70,6 @@ const datatableColumns = computed<DatatableColumn[]>(() => [
 ]);
 
 const contextBasedTranslationKeys = computed(() => uiStore.contextBasedTranslationKeys);
-const { upgradeLinkUrl } = useUpgradeLink({
-	default: '&source=variables',
-	desktop: '&utm_campaign=upgrade-variables',
-});
 
 const newlyAddedVariableIds = ref<number[]>([]);
 
@@ -201,7 +197,7 @@ async function deleteVariable(data: EnvironmentVariable) {
 }
 
 function goToUpgrade() {
-	window.open(upgradeLinkUrl.value, '_blank');
+	uiStore.goToUpgrade('variables', 'upgrade-variables');
 }
 
 function displayName(resource: EnvironmentVariable) {