refactor: Add Onboarding call prompts (#3682)

* ✨ Implemented initial onboarding call prompt logic

* ✨ Added onboarding call prompt feature environment variable

* ✨ Implemented onboarding session signup modal

* 📈 Added initial telemetry for the onboarding call prompt

* ✔️ Fixing linter error in server.ts

* 💄 Updating onboaring call prompt and modal wording and styling

* ✨ Implemented initial version of fake doors feature

* ✨ Added parameters to onboarding call prompt request

* ✨ Finished implementing fake doors in settings

* 🔨 Updating onboarding call prompt fetching logic (fetching before timeout starts)

* 👌 Updating onboarding call prompt and fake door components based on the front-end review feedback

* ✨ Updated fake doors so they support UI location specification. Added credentials UI fake doors.

* ⚡ Added checkbox to the signup form, improved N8NCheckbox formatting to better handle overflow

* 💄 Moving seignup checkbox label text to i18n file, updating checkbox component css to force text wrap

* ✨ Update API calls to work with the new workflow request and response formats

* 👌 Updating fake door front-end based on the review feedback

* 👌 Updating onboarding call prompt and fake doors UI based in the product feedback

* ✨  Updated onboarding call prompts front-end to work with new endpoints and added new telemetry events

* 🐛 Fixing onboarding call prompts not appearing in first user sessions

* ⚡️ add createdAt to PublicUser

* 👌 Updating onboarding call prompts front-end to work with the latest back-end and addressing latest product review

* ✨ Improving error handling when submitting user emails on signup

* 💄 Updating info text on Logging feature page

* 💄 Updating first onboarding call prompt timeout to 5 minutes

* 💄 Fixing `N8nCheckbox` component font overflow

Co-authored-by: Ben Hesseldieck <b.hesseldieck@gmail.com>

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

@@ -0,0 +1,71 @@
+<template>
+	<div v-if="this.featureInfo" :class="$style.container">
+			<div v-if="showHeading" :class="[$style.headingContainer, 'mb-l']">
+				<n8n-heading size="2xlarge">{{ $locale.baseText(featureInfo.featureName) }}</n8n-heading>
+			</div>
+			<div v-if="featureInfo.infoText" class="mt-3xl mb-l">
+				<n8n-info-tip theme="info" type="note">
+					<template>
+						<span v-html="$locale.baseText(featureInfo.infoText)"></span>
+					</template>
+				</n8n-info-tip>
+			</div>
+			<div :class="$style.actionBoxContainer">
+				<n8n-action-box
+					:heading="$locale.baseText(featureInfo.actionBoxTitle)"
+					:description="$locale.baseText(featureInfo.actionBoxDescription)"
+					:buttonText="$locale.baseText('fakeDoor.actionBox.button.label')"
+					@click="openLinkPage"
+				/>
+			</div>
+		</div>
+</template>
+
+<script lang="ts">
+import { FAKE_DOOR_FEATURES } from '@/constants';
+import { IFakeDoor } from '@/Interface';
+import Vue from 'vue';
+
+export default Vue.extend({
+	name: 'FeatureComingSoon',
+	props: {
+		featureId: {
+			type: String,
+			required: true,
+		},
+	},
+	computed: {
+		userId(): string {
+			return this.$store.getters['users/currentUserId'];
+		},
+		versionCli(): string {
+			return this.$store.getters['settings/versionCli'];
+		},
+		instanceId(): string {
+			return this.$store.getters.instanceId;
+		},
+		featureInfo(): IFakeDoor {
+			return this.$store.getters['ui/getFakeDoorById'](this.featureId);
+		},
+		showHeading(): boolean {
+			const featuresWithoutHeading = [
+				FAKE_DOOR_FEATURES.SHARING.toString(),
+			];
+			return !featuresWithoutHeading.includes(this.featureId);
+		},
+	},
+	methods: {
+		openLinkPage() {
+			window.open(`${this.featureInfo.linkURL}&u=${this.instanceId}#${this.userId}&v=${this.versionCli}`, '_blank');
+			this.$telemetry.track('user clicked feature waiting list button', { feature: this.featureId });
+		},
+	},
+});
+</script>
+
+<style lang="scss" module>
+	.actionBoxContainer {
+		text-align: center;
+	}
+</style>
+