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

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();
+}