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>
2022-07-27 16:28:13 +02:00
parent 553b14a13c
commit 3ebfa45570
28 changed files with 676 additions and 12 deletions
--- a/packages/editor-ui/src/views/AuthView.vue
+++ b/packages/editor-ui/src/views/AuthView.vue
@@ -84,3 +84,10 @@ body {
 }
 </style>

+<style lang="scss">
+
+.el-checkbox__label span {
+	font-size: var(--font-size-2xs) !important;
+}
+
+</style>
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -154,7 +154,25 @@ import {
 } from 'jsplumb';
 import { MessageBoxInputData } from 'element-ui/types/message-box';
 import { jsPlumb, OnConnectionBindInfo } from 'jsplumb';
-import { DEFAULT_STICKY_HEIGHT, DEFAULT_STICKY_WIDTH, MODAL_CANCEL, MODAL_CLOSE, MODAL_CONFIRMED, NODE_NAME_PREFIX, NODE_OUTPUT_DEFAULT_KEY, PLACEHOLDER_EMPTY_WORKFLOW_ID, QUICKSTART_NOTE_NAME, START_NODE_TYPE, STICKY_NODE_TYPE, VIEWS, WEBHOOK_NODE_TYPE, WORKFLOW_OPEN_MODAL_KEY } from '@/constants';
+import {
+	DEFAULT_STICKY_HEIGHT,
+	DEFAULT_STICKY_WIDTH,
+	FIRST_ONBOARDING_PROMPT_TIMEOUT,
+	MODAL_CANCEL,
+	MODAL_CLOSE,
+	MODAL_CONFIRMED,
+	NODE_NAME_PREFIX,
+	NODE_OUTPUT_DEFAULT_KEY,
+	ONBOARDING_CALL_SIGNUP_MODAL_KEY,
+	ONBOARDING_PROMPT_TIMEBOX,
+	PLACEHOLDER_EMPTY_WORKFLOW_ID,
+	QUICKSTART_NOTE_NAME,
+	START_NODE_TYPE,
+	STICKY_NODE_TYPE,
+	VIEWS,
+	WEBHOOK_NODE_TYPE,
+	WORKFLOW_OPEN_MODAL_KEY,
+} from '@/constants';
 import { copyPaste } from '@/components/mixins/copyPaste';
 import { externalHooks } from '@/components/mixins/externalHooks';
 import { genericHelpers } from '@/components/mixins/genericHelpers';
@@ -215,11 +233,12 @@ import { mapGetters } from 'vuex';

 import {
 	addNodeTranslation,
-	addHeaders,
 } from '@/plugins/i18n';

 import '../plugins/N8nCustomConnectorType';
 import '../plugins/PlusEndpointType';
+import { getAccountAge } from '@/modules/userHelpers';
+import { IUser } from 'n8n-design-system';
 import {dataPinningEventBus} from "@/event-bus/data-pinning-event-bus";

 interface AddNodeOptions {
@@ -312,9 +331,15 @@ export default mixins(
 			}
 		},
 		computed: {
+			...mapGetters('users', [
+				'currentUser',
+			]),
 			...mapGetters('ui', [
 				'sidebarMenuCollapsed',
 			]),
+			...mapGetters('settings', [
+				'isOnboardingCallPromptFeatureEnabled',
+			]),
 			defaultLocale (): string {
 				return this.$store.getters.defaultLocale;
 			},
@@ -3060,6 +3085,35 @@ export default mixins(

 			this.$externalHooks().run('nodeView.mount');

+			if (
+				this.currentUser.personalizationAnswers !== null &&
+				this.isOnboardingCallPromptFeatureEnabled &&
+				getAccountAge(this.currentUser) <= ONBOARDING_PROMPT_TIMEBOX
+			) {
+				const onboardingResponse = await this.$store.dispatch('ui/getNextOnboardingPrompt');
+				const promptTimeout = onboardingResponse.toast_sequence_number === 1 ? FIRST_ONBOARDING_PROMPT_TIMEOUT : 1000;
+
+				if (onboardingResponse.title && onboardingResponse.description) {
+					setTimeout(async () => {
+						this.$showToast({
+							type: 'info',
+							title: onboardingResponse.title,
+							message: onboardingResponse.description,
+							duration: 0,
+							customClass: 'clickable',
+							closeOnClick: true,
+							onClick: () => {
+								this.$telemetry.track('user clicked onboarding toast', {
+									seq_num: onboardingResponse.toast_sequence_number,
+									title: onboardingResponse.title,
+									description: onboardingResponse.description,
+								});
+								this.$store.commit('ui/openModal', ONBOARDING_CALL_SIGNUP_MODAL_KEY, {root: true});
+							},
+						});
+					}, promptTimeout);
+				}
+			}
 			dataPinningEventBus.$on('pin-data', this.addPinDataConnections);
 			dataPinningEventBus.$on('unpin-data', this.removePinDataConnections);
 		},
--- a/packages/editor-ui/src/views/SettingsFakeDoorView.vue
+++ b/packages/editor-ui/src/views/SettingsFakeDoorView.vue
@@ -0,0 +1,39 @@
+<template>
+	<SettingsView>
+		<FeatureComingSoon :featureId="featureId"></FeatureComingSoon>
+	</SettingsView>
+</template>
+
+<script lang="ts">
+import { IFakeDoor } from '@/Interface';
+import Vue from 'vue';
+import SettingsView from './SettingsView.vue';
+import FeatureComingSoon from '../components/FeatureComingSoon.vue';
+
+export default Vue.extend({
+	name: 'SettingsFakeDoorView',
+	components: {
+		SettingsView,
+		FeatureComingSoon,
+	},
+	props: {
+		featureId: {
+			type: String,
+			required: true,
+		},
+	},
+	computed: {
+		featureInfo(): IFakeDoor {
+			return this.$store.getters['ui/getFakeDoorFeatures'][this.featureId] as IFakeDoor;
+		},
+	},
+	methods: {
+		openLinkPage() {
+			window.open(this.featureInfo.linkURL, '_blank');
+		},
+	},
+});
+</script>
+
+<style lang="scss" module>
+</style>
--- a/packages/editor-ui/src/views/SetupView.vue
+++ b/packages/editor-ui/src/views/SetupView.vue
@@ -79,6 +79,13 @@ export default mixins(
 						capitalize: true,
 					},
 				},
+				{
+					name: 'agree',
+					properties: {
+						label: this.$locale.baseText('auth.agreement.label'),
+						type: 'checkbox',
+					},
+				},
 			],
 		};

@@ -130,7 +137,7 @@ export default mixins(
 				this.$locale.baseText('auth.setup.goBack'),
 			);
 		},
-		async onSubmit(values: {[key: string]: string}) {
+		async onSubmit(values: {[key: string]: string | boolean}) {
 			try {
 				const confirmSetup = await this.confirmSetupOrGoBack();
 				if (!confirmSetup) {
@@ -140,6 +147,13 @@ export default mixins(
 				const forceRedirectedHere = this.$store.getters['settings/showSetupPage'];
 				this.loading = true;
 				await this.$store.dispatch('users/createOwner', values);
+
+				if (values.agree === true) {
+					try {
+						await this.$store.dispatch('ui/submitContactEmail', { email: values.email, agree: values.agree });
+					} catch { }
+				}
+
 				if (forceRedirectedHere) {
 					await this.$router.push({ name: VIEWS.HOMEPAGE });
 				}
--- a/packages/editor-ui/src/views/SignupView.vue
+++ b/packages/editor-ui/src/views/SignupView.vue
@@ -59,6 +59,13 @@ export default mixins(
 						capitalize: true,
 					},
 				},
+				{
+					name: 'agree',
+					properties: {
+						label: this.$locale.baseText('auth.agreement.label'),
+						type: 'checkbox',
+					},
+				},
 			],
 		};
 		return {
@@ -95,13 +102,19 @@ export default mixins(
 		},
 	},
 	methods: {
-		async onSubmit(values: {[key: string]: string}) {
+		async onSubmit(values: {[key: string]: string | boolean}) {
 			try {
 				this.loading = true;
 				const inviterId = this.$route.query.inviterId;
 				const inviteeId = this.$route.query.inviteeId;
 				await this.$store.dispatch('users/signup', {...values, inviterId, inviteeId});

+				if (values.agree === true) {
+					try {
+						await this.$store.dispatch('ui/submitContactEmail', { email: values.email, agree: values.agree });
+					} catch { }
+				}
+
 				await this.$router.push({ name: VIEWS.HOMEPAGE });
 			} catch (error) {
 				this.$showError(error, this.$locale.baseText('auth.signup.setupYourAccountError'));