Change upgrade CTA on community editions

n8n-io · May 24, 2023 · 2a9da66 · 2a9da66
1 parent 071955b
commit 2a9da66
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 30 deletions.
diff --git a/packages/editor-ui/src/composables/useUpgradeLink.ts b/packages/editor-ui/src/composables/useUpgradeLink.ts
@@ -1,23 +1,21 @@
 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(() => {
 		const linkUrlTranslationKey = uiStore.contextBasedTranslationKeys.upgradeLinkUrl as BaseTextKey;
 		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
@@ -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
@@ -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
@@ -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) {