feat: Add opt-in enterprise license trial checkbox (no-changelog) (#7826)

<img width="518" alt="image"
src="https://github.com/n8n-io/n8n/assets/6179477/6422a057-de94-49dc-90fd-7381b5642902">

---------

Co-authored-by: Omar Ajoue <krynble@gmail.com>

packages/design-system/src/components/N8nFormInputs/FormInputs.vue

@@ -124,6 +124,7 @@ export default defineComponent({
 				[name]: value,
 			};
 			this.$emit('update', { name, value });
+			this.$emit('update:modelValue', this.values);
 		},
 		onValidate(name: string, valid: boolean) {
 			this.validity = {

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

@@ -1,4 +1,4 @@
-import { makeRestApiRequest } from '@/utils/apiUtils';
+import { makeRestApiRequest, request } from '@/utils/apiUtils';
 import type { IRestApiContext, UsageState } from '@/Interface';
 
 export const getLicense = async (context: IRestApiContext): Promise<UsageState['data']> => {
@@ -15,3 +15,22 @@ export const activateLicenseKey = async (
 export const renewLicense = async (context: IRestApiContext): Promise<UsageState['data']> => {
 	return makeRestApiRequest(context, 'POST', '/license/renew');
 };
+
+export const requestLicenseTrial = async (data: {
+	licenseType: 'enterprise';
+	firstName: string;
+	lastName: string;
+	email: string;
+	instanceUrl: string;
+}): Promise<UsageState['data']> => {
+	return request({
+		method: 'POST',
+		baseURL: 'https://enterprise.n8n.io',
+		endpoint: '/enterprise-trial',
+		data,
+		withCredentials: false,
+		headers: {
+			'Content-Type': 'application/json',
+		},
+	});
+};

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

@@ -15,6 +15,7 @@
 		<template #content>
 			<div :class="$style.container">
 				<n8n-form-inputs
+					v-model="formValues"
 					:inputs="survey"
 					:columnView="true"
 					:eventBus="formBus"
@@ -22,6 +23,20 @@
 					tagSize="small"
 					@submit="onSubmit"
 				/>
+				<n8n-card v-if="canRegisterForEnterpriseTrial">
+					<n8n-checkbox v-model="registerForEnterpriseTrial">
+						<i18n-t keypath="personalizationModal.registerEmailForTrial">
+							<template #trial>
+								<strong>
+									{{ $locale.baseText('personalizationModal.registerEmailForTrial.enterprise') }}
+								</strong>
+							</template>
+						</i18n-t>
+						<n8n-text size="small" tag="div" color="text-light">
+							{{ $locale.baseText('personalizationModal.registerEmailForTrial.notice') }}
+						</n8n-text>
+					</n8n-checkbox>
+				</n8n-card>
 			</div>
 		</template>
 		<template #footer>
@@ -140,6 +155,8 @@ import { useUsersStore } from '@/stores/users.store';
 import { createEventBus } from 'n8n-design-system/utils';
 import { usePostHog } from '@/stores/posthog.store';
 import { useExternalHooks } from '@/composables/useExternalHooks';
+import { useUsageStore } from '@/stores/usage.store';
+import { useMessage } from '@/composables/useMessage';
 
 export default defineComponent({
 	name: 'PersonalizationModal',
@@ -153,11 +170,13 @@ export default defineComponent({
 	},
 	data() {
 		return {
+			formValues: {} as Record<string, string>,
 			isSaving: false,
 			PERSONALIZATION_MODAL_KEY,
 			otherWorkAreaFieldVisible: false,
 			otherCompanyIndustryFieldVisible: false,
 			showAllIndustryQuestions: true,
+			registerForEnterpriseTrial: false,
 			modalBus: createEventBus(),
 			formBus: createEventBus(),
 		};
@@ -168,10 +187,47 @@ export default defineComponent({
 		return {
 			externalHooks,
 			...useToast(),
+			...useMessage(),
 		};
 	},
 	computed: {
-		...mapStores(useRootStore, useSettingsStore, useUIStore, useUsersStore, usePostHog),
+		...mapStores(
+			useRootStore,
+			useSettingsStore,
+			useUIStore,
+			useUsersStore,
+			useUsageStore,
+			usePostHog,
+		),
+		currentUser() {
+			return this.usersStore.currentUser;
+		},
+		canRegisterForEnterpriseTrial() {
+			if (this.settingsStore.isCloudDeployment) {
+				return false;
+			}
+
+			const isSizeEligible = [COMPANY_SIZE_500_999, COMPANY_SIZE_1000_OR_MORE].includes(
+				this.formValues[COMPANY_SIZE_KEY],
+			);
+
+			const emailParts = (this.currentUser?.email || '@').split('@');
+			const emailDomain = emailParts[emailParts.length - 1];
+			const emailDomainParts = emailDomain.split('.');
+			const isEmailEligible = ![
+				'gmail',
+				'yahoo',
+				'hotmail',
+				'aol',
+				'live',
+				'outlook',
+				'icloud',
+				'mail',
+				'email',
+			].find((provider) => emailDomainParts.includes(provider));
+
+			return isSizeEligible && isEmailEligible;
+		},
 		survey() {
 			const survey: IFormInputs = [
 				{
@@ -664,8 +720,35 @@ export default defineComponent({
 				this.showError(e, 'Error while submitting results');
 			}
 
+			let licenseRequestSucceeded = false;
+			try {
+				if (this.registerForEnterpriseTrial && this.canRegisterForEnterpriseTrial) {
+					await this.usageStore.requestEnterpriseLicenseTrial();
+					licenseRequestSucceeded = true;
+				}
+			} catch (e) {
+				this.showError(
+					e,
+					this.$locale.baseText('personalizationModal.registerEmailForTrial.error'),
+				);
+			}
+
 			this.isSaving = false;
 			this.closeDialog();
+
+			if (licenseRequestSucceeded) {
+				await this.alert(
+					this.$locale.baseText('personalizationModal.registerEmailForTrial.success.message'),
+					{
+						title: this.$locale.baseText(
+							'personalizationModal.registerEmailForTrial.success.title',
+						),
+						confirmButtonText: this.$locale.baseText(
+							'personalizationModal.registerEmailForTrial.success.button',
+						),
+					},
+				);
+			}
 		},
 		async fetchOnboardingPrompt() {
 			if (

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

@@ -1242,6 +1242,13 @@
 	"personalizationModal.buildBackendServices": "Build backend services (endpoints)",
 	"personalizationModal.manipulateFiles": "Manipulate/transfer files",
 	"personalizationModal.specifyOtherSalesAndMarketingGoal": "Specify your other Sales and Marketing goals",
+	"personalizationModal.registerEmailForTrial": "Register your email to activate a free 14 day trial of our {trial}",
+	"personalizationModal.registerEmailForTrial.enterprise": "Enterprise features",
+	"personalizationModal.registerEmailForTrial.notice": "By checking this box, you agree to let us store your name and email to activate your trial and send over your license key. We’ll check-in at the end of the trial to ensure you’re getting the most out of our Enterprise features.",
+	"personalizationModal.registerEmailForTrial.success.title": "Your enterprise license is on its way",
+	"personalizationModal.registerEmailForTrial.success.message": "You'll shortly receive an email to activate your enterprise license. If you don't see it, check your spam folder.",
+	"personalizationModal.registerEmailForTrial.success.button": "Start using n8n",
+	"personalizationModal.registerEmailForTrial.error": "Error while registering for enterprise trial",
 	"pushConnection.nodeExecutedSuccessfully": "Node executed successfully",
 	"pushConnection.workflowExecutedSuccessfully": "Workflow executed successfully",
 	"pushConnectionTracker.cannotConnectToServer": "You have a connection issue or the server is down. <br />n8n should reconnect automatically once the issue is resolved.",

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

@@ -1,7 +1,7 @@
 import { computed, reactive } from 'vue';
 import { defineStore } from 'pinia';
 import type { UsageState } from '@/Interface';
-import { activateLicenseKey, getLicense, renewLicense } from '@/api/usage';
+import { activateLicenseKey, getLicense, renewLicense, requestLicenseTrial } from '@/api/usage';
 import { useRootStore } from '@/stores/n8nRoot.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUsersStore } from '@/stores/users.store';
@@ -84,12 +84,29 @@ export const useUsageStore = defineStore('usage', () => {
 		}
 	};
 
+	const requestEnterpriseLicenseTrial = async () => {
+		if (!usersStore.currentUser) {
+			throw new Error('User is not logged in');
+		}
+
+		const data = await requestLicenseTrial({
+			licenseType: 'enterprise',
+			firstName: usersStore.currentUser.firstName ?? '',
+			lastName: usersStore.currentUser.lastName ?? '',
+			email: usersStore.currentUser.email ?? '',
+			instanceUrl: window.location.origin,
+		});
+
+		return data;
+	};
+
 	return {
 		setLoading,
 		getLicenseInfo,
 		setData,
 		activateLicense,
 		refreshLicenseManagementToken,
+		requestEnterpriseLicenseTrial,
 		planName,
 		planId,
 		executionLimit,

packages/editor-ui/src/utils/apiUtils.ts

@@ -43,12 +43,13 @@ class ResponseError extends Error {
 	}
 }
 
-async function request(config: {
+export async function request(config: {
 	method: Method;
 	baseURL: string;
 	endpoint: string;
 	headers?: IDataObject;
 	data?: IDataObject;
+	withCredentials?: boolean;
 }) {
 	const { method, baseURL, endpoint, headers, data } = config;
 	const options: AxiosRequestConfig = {
@@ -62,7 +63,7 @@ async function request(config: {
 		!baseURL.includes('api.n8n.io') &&
 		!baseURL.includes('n8n.cloud')
 	) {
-		options.withCredentials = true;
+		options.withCredentials = options.withCredentials ?? true;
 	}
 	if (['POST', 'PATCH', 'PUT'].includes(method)) {
 		options.data = data;