feat: Nudge users to become template creators if eligible (#8357)

packages/editor-ui/src/api/ctas.ts

@@ -0,0 +1,8 @@
+import type { IRestApiContext } from '@/Interface';
+import { get } from '@/utils/apiUtils';
+
+export async function getBecomeCreatorCta(context: IRestApiContext): Promise<boolean> {
+	const response = await get(context.baseUrl, '/cta/become-creator');
+
+	return response;
+}

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

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { useBecomeTemplateCreatorStore } from './becomeTemplateCreatorStore';
+import { useI18n } from '@/composables/useI18n';
+
+const i18n = useI18n();
+const store = useBecomeTemplateCreatorStore();
+</script>
+
+<template>
+	<div
+		v-if="store.showBecomeCreatorCta"
+		:class="$style.container"
+		data-test-id="become-template-creator-cta"
+	>
+		<div :class="$style.textAndCloseButton">
+			<p :class="$style.text">
+				{{ i18n.baseText('becomeCreator.text') }}
+			</p>
+
+			<button
+				:class="$style.closeButton"
+				data-test-id="close-become-template-creator-cta"
+				@click="store.dismissCta()"
+			>
+				<n8n-icon icon="times" size="xsmall" :title="i18n.baseText('generic.close')" />
+			</button>
+		</div>
+
+		<n8n-button
+			:class="$style.becomeCreatorButton"
+			:label="i18n.baseText('becomeCreator.buttonText')"
+			size="xmini"
+			type="secondary"
+			element="a"
+			href="https://creators.n8n.io/hub"
+			target="_blank"
+		/>
+	</div>
+</template>
+
+<style module lang="scss">
+.container {
+	display: flex;
+	flex-direction: column;
+	background-color: var(--color-background-light);
+	border: var(--border-base);
+	border-right: 0;
+}
+
+.textAndCloseButton {
+	display: flex;
+	margin-top: var(--spacing-xs);
+	margin-left: var(--spacing-s);
+	margin-right: var(--spacing-2xs);
+}
+
+.text {
+	flex: 1;
+	font-size: var(--font-size-3xs);
+	line-height: var(--font-line-height-compact);
+}
+
+.closeButton {
+	flex: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: var(--spacing-2xs);
+	height: var(--spacing-2xs);
+	border: none;
+	color: var(--color-text-light);
+	background-color: transparent;
+}
+
+.becomeCreatorButton {
+	margin: var(--spacing-s);
+}
+</style>

packages/editor-ui/src/components/BecomeTemplateCreatorCta/becomeTemplateCreatorStore.ts

@@ -0,0 +1,94 @@
+import { DateTime } from 'luxon';
+import { defineStore } from 'pinia';
+import { computed, ref } from 'vue';
+import { STORES } from '@/constants';
+import { useCloudPlanStore } from '@/stores/cloudPlan.store';
+import { useStorage } from '@/composables/useStorage';
+import { useRootStore } from '@/stores/n8nRoot.store';
+import { getBecomeCreatorCta } from '@/api/ctas';
+
+const LOCAL_STORAGE_KEY = 'N8N_BECOME_TEMPLATE_CREATOR_CTA_DISMISSED_AT';
+const RESHOW_DISMISSED_AFTER_DAYS = 30;
+const POLL_INTERVAL_IN_MS = 15 * 60 * 1000; // 15 minutes
+
+export const useBecomeTemplateCreatorStore = defineStore(STORES.BECOME_TEMPLATE_CREATOR, () => {
+	const cloudPlanStore = useCloudPlanStore();
+	const rootStore = useRootStore();
+
+	//#region State
+
+	const dismissedAt = useStorage(LOCAL_STORAGE_KEY);
+	const ctaMeetsCriteria = ref(false);
+	const monitorCtasTimer = ref<ReturnType<typeof setInterval> | null>(null);
+
+	//#endregion State
+
+	//#region Computed
+
+	const isDismissed = computed(() => {
+		return dismissedAt.value ? !hasEnoughTimePassedSinceDismissal(dismissedAt.value) : false;
+	});
+
+	const showBecomeCreatorCta = computed(() => {
+		return ctaMeetsCriteria.value && !cloudPlanStore.userIsTrialing && !isDismissed.value;
+	});
+
+	//#endregion Computed
+
+	//#region Actions
+
+	const dismissCta = () => {
+		dismissedAt.value = DateTime.now().toISO();
+	};
+
+	const fetchBecomeCreatorCta = async () => {
+		const becomeCreatorCta = await getBecomeCreatorCta(rootStore.getRestApiContext);
+
+		ctaMeetsCriteria.value = becomeCreatorCta;
+	};
+
+	const fetchUserCtasIfNeeded = async () => {
+		if (isDismissed.value || cloudPlanStore.userIsTrialing || ctaMeetsCriteria.value) {
+			return;
+		}
+
+		await fetchBecomeCreatorCta();
+	};
+
+	const startMonitoringCta = () => {
+		if (monitorCtasTimer.value) {
+			return;
+		}
+
+		// Initial check after 1s so we don't bombard the API immediately during startup
+		setTimeout(fetchUserCtasIfNeeded, 1000);
+
+		monitorCtasTimer.value = setInterval(fetchUserCtasIfNeeded, POLL_INTERVAL_IN_MS);
+	};
+
+	const stopMonitoringCta = () => {
+		if (!monitorCtasTimer.value) {
+			return;
+		}
+
+		clearInterval(monitorCtasTimer.value);
+		monitorCtasTimer.value = null;
+	};
+
+	//#endregion Actions
+
+	return {
+		showBecomeCreatorCta,
+		dismissCta,
+		startMonitoringCta,
+		stopMonitoringCta,
+	};
+});
+
+function hasEnoughTimePassedSinceDismissal(dismissedAt: string) {
+	const reshowAtTime = DateTime.fromISO(dismissedAt).plus({
+		days: RESHOW_DISMISSED_AFTER_DAYS,
+	});
+
+	return reshowAtTime <= DateTime.now();
+}

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

@@ -23,6 +23,7 @@
 			</template>
 
 			<template #beforeLowerMenu>
+				<BecomeTemplateCreatorCta v-if="fullyExpanded && !userIsTrialing" />
 				<ExecutionsUsage
 					v-if="fullyExpanded && userIsTrialing"
 					:cloud-plan-data="currentPlanAndUsageData"
@@ -119,10 +120,12 @@ import { useVersionsStore } from '@/stores/versions.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { isNavigationFailure } from 'vue-router';
 import ExecutionsUsage from '@/components/ExecutionsUsage.vue';
+import BecomeTemplateCreatorCta from '@/components/BecomeTemplateCreatorCta/BecomeTemplateCreatorCta.vue';
 import MainSidebarSourceControl from '@/components/MainSidebarSourceControl.vue';
 import { hasPermission } from '@/rbac/permissions';
 import { useExternalHooks } from '@/composables/useExternalHooks';
 import { useDebounce } from '@/composables/useDebounce';
+import { useBecomeTemplateCreatorStore } from '@/components/BecomeTemplateCreatorCta/becomeTemplateCreatorStore';
 
 export default defineComponent({
 	name: 'MainSidebar',
@@ -130,6 +133,7 @@ export default defineComponent({
 		GiftNotificationIcon,
 		ExecutionsUsage,
 		MainSidebarSourceControl,
+		BecomeTemplateCreatorCta,
 	},
 	mixins: [userHelpers],
 	setup(props, ctx) {
@@ -158,6 +162,7 @@ export default defineComponent({
 			useWorkflowsStore,
 			useCloudPlanStore,
 			useSourceControlStore,
+			useBecomeTemplateCreatorStore,
 		),
 		logoPath(): string {
 			if (this.isCollapsed) return this.basePath + 'n8n-logo-collapsed.svg';
@@ -368,11 +373,14 @@ export default defineComponent({
 
 			this.fullyExpanded = !this.isCollapsed;
 		});
+
+		this.becomeTemplateCreatorStore.startMonitoringCta();
 	},
 	created() {
 		window.addEventListener('resize', this.onResize);
 	},
 	beforeUnmount() {
+		this.becomeTemplateCreatorStore.stopMonitoringCta();
 		window.removeEventListener('resize', this.onResize);
 	},
 	methods: {

packages/editor-ui/src/constants.ts

@@ -603,6 +603,7 @@ export const enum STORES {
 	RBAC = 'rbac',
 	COLLABORATION = 'collaboration',
 	PUSH = 'push',
+	BECOME_TEMPLATE_CREATOR = 'becomeTemplateCreator',
 }
 
 export const enum SignInType {

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -30,6 +30,7 @@
 	},
 	"generic.any": "Any",
 	"generic.cancel": "Cancel",
+	"generic.close": "Close",
 	"generic.confirm": "Confirm",
 	"generic.deleteWorkflowError": "Problem deleting workflow",
 	"generic.filtersApplied": "Filters are currently applied.",
@@ -2371,5 +2372,8 @@
 	"templateSetup.continue.button": "Continue",
 	"templateSetup.credential.description": "The credential you select will be used in the {0} node of the workflow template. | The credential you select will be used in the {0} nodes of the workflow template.",
 	"templateSetup.continue.button.fillRemaining": "Fill remaining credentials to continue",
-	"setupCredentialsModal.title": "Set up template"
+	"setupCredentialsModal.title": "Set up template",
+	"becomeCreator.text": "Share your workflows with 40k+ users, unlock perks, and shine as a featured template creator!",
+	"becomeCreator.buttonText": "Become a creator",
+	"becomeCreator.closeButtonTitle": "Close"
 }