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/components/CredentialEdit/CredentialEdit.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
@@ -57,6 +57,14 @@
 						<n8n-menu-item index="connection"
 							><span slot="title">{{ $locale.baseText('credentialEdit.credentialEdit.connection') }}</span></n8n-menu-item
 						>
+						<n8n-menu-item
+							v-for="fakeDoor in credentialsFakeDoorFeatures"
+							v-bind:key="fakeDoor.featureName"
+							:index="`coming-soon/${fakeDoor.id}`"
+							:class="$style.tab"
+						>
+							<span slot="title">{{ $locale.baseText(fakeDoor.featureName) }}</span>
+						</n8n-menu-item>
 						<n8n-menu-item index="details"
 							><span slot="title">{{ $locale.baseText('credentialEdit.credentialEdit.details') }}</span></n8n-menu-item
 						>
@@ -89,6 +97,9 @@
 						@accessChange="onNodeAccessChange"
 					/>
 				</div>
+				<div v-if="activeTab.startsWith('coming-soon')" :class="$style.mainContent">
+					<FeatureComingSoon :featureId="activeTab.split('/')[1]"></FeatureComingSoon>
+				</div>
 			</div>
 		</template>
 	</Modal>
@@ -100,6 +111,7 @@ import Vue from 'vue';
 import {
 	ICredentialsDecryptedResponse,
 	ICredentialsResponse,
+	IFakeDoor,
 } from '@/Interface';

 import {
@@ -108,6 +120,7 @@ import {
 	ICredentialNodeAccess,
 	ICredentialsDecrypted,
 	ICredentialType,
+	INode,
 	INodeCredentialTestResult,
 	INodeParameters,
 	INodeProperties,
@@ -126,6 +139,7 @@ import CredentialInfo from './CredentialInfo.vue';
 import SaveButton from '../SaveButton.vue';
 import Modal from '../Modal.vue';
 import InlineNameEdit from '../InlineNameEdit.vue';
+import FeatureComingSoon from '../FeatureComingSoon.vue';

 interface NodeAccessMap {
 	[nodeType: string]: ICredentialNodeAccess | null;
@@ -140,6 +154,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 		InlineNameEdit,
 		Modal,
 		SaveButton,
+		FeatureComingSoon,
 	},
 	props: {
 		modalName: {
@@ -351,6 +366,9 @@ export default mixins(showMessage, nodeHelpers).extend({
 			}
 			return true;
 		},
+		credentialsFakeDoorFeatures(): IFakeDoor[] {
+			return this.$store.getters['ui/getFakeDoorByLocation']('credentialsModal');
+		},
 	},
 	methods: {
 		async beforeClose() {
@@ -474,6 +492,15 @@ export default mixins(showMessage, nodeHelpers).extend({
 		},
 		onTabSelect(tab: string) {
 			this.activeTab = tab;
+			const tabName: string = tab.replaceAll('coming-soon/', '');
+			const credType: string = this.credentialType ? this.credentialType.name : '';
+			const activeNode: INode | null = this.$store.getters.activeNode;
+
+			this.$telemetry.track('User viewed credential tab', {
+				credential_type: credType,
+				node_type: activeNode ? activeNode.type : null,
+				tab: tabName,
+			});
 		},
 		onNodeAccessChange({name, value}: {name: string, value: boolean}) {
 			this.hasUnsavedChanges = true;
--- a/packages/editor-ui/src/components/FeatureComingSoon.vue
+++ b/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>
+
--- a/packages/editor-ui/src/components/Modals.vue
+++ b/packages/editor-ui/src/components/Modals.vue
@@ -89,6 +89,10 @@
 			<ActivationModal />
 		</ModalRoot>

+		<ModalRoot :name="ONBOARDING_CALL_SIGNUP_MODAL_KEY">
+			<OnboardingCallSignupModal />
+		</ModalRoot>
+
 		<ModalRoot :name="COMMUNITY_PACKAGE_INSTALL_MODAL_KEY">
 			<CommunityPackageInstallModal />
 		</ModalRoot>
@@ -102,6 +106,7 @@
 				/>
 			</template>
 		</ModalRoot>
+
 	</div>
 </template>

@@ -120,6 +125,7 @@ import {
 	DUPLICATE_MODAL_KEY,
 	EXECUTIONS_MODAL_KEY,
 	INVITE_USER_MODAL_KEY,
+	ONBOARDING_CALL_SIGNUP_MODAL_KEY,
 	PERSONALIZATION_MODAL_KEY,
 	TAGS_MANAGER_MODAL_KEY,
 	VALUE_SURVEY_MODAL_KEY,
@@ -140,6 +146,7 @@ import InviteUsersModal from "./InviteUsersModal.vue";
 import CredentialsSelectModal from "./CredentialsSelectModal.vue";
 import DuplicateWorkflowDialog from "./DuplicateWorkflowDialog.vue";
 import ModalRoot from "./ModalRoot.vue";
+import OnboardingCallSignupModal from './OnboardingCallSignupModal.vue';
 import PersonalizationModal from "./PersonalizationModal.vue";
 import TagsManager from "./TagsManager/TagsManager.vue";
 import UpdatesPanel from "./UpdatesPanel.vue";
@@ -167,6 +174,7 @@ export default Vue.extend({
 		InviteUsersModal,
 		ExecutionsList,
 		ModalRoot,
+		OnboardingCallSignupModal,
 		PersonalizationModal,
 		TagsManager,
 		UpdatesPanel,
@@ -185,6 +193,7 @@ export default Vue.extend({
 		CHANGE_PASSWORD_MODAL_KEY,
 		DELETE_USER_MODAL_KEY,
 		DUPLICATE_MODAL_KEY,
+		ONBOARDING_CALL_SIGNUP_MODAL_KEY,
 		PERSONALIZATION_MODAL_KEY,
 		INVITE_USER_MODAL_KEY,
 		TAGS_MANAGER_MODAL_KEY,
--- a/packages/editor-ui/src/components/OnboardingCallSignupModal.vue
+++ b/packages/editor-ui/src/components/OnboardingCallSignupModal.vue
@@ -0,0 +1,128 @@
+<template>
+	<Modal
+		:name="ONBOARDING_CALL_SIGNUP_MODAL_KEY"
+		:title="$locale.baseText('onboardingCallSignupModal.title')"
+		:eventBus="modalBus"
+		:center="true"
+		:showClose="false"
+		:beforeClose="onModalClose"
+		width="460px"
+	>
+		<template slot="content">
+			<div class="pb-m">
+				<n8n-text>
+					{{ $locale.baseText('onboardingCallSignupModal.description') }}
+				</n8n-text>
+			</div>
+			<div @keyup.enter="onSignup">
+				<n8n-input v-model="email" :placeholder="$locale.baseText('onboardingCallSignupModal.emailInput.placeholder')" />
+				<n8n-text v-if="showError" size="small" class="mt-4xs" tag="div" color="danger">
+					{{ $locale.baseText('onboardingCallSignupModal.infoText.emailError') }}
+				</n8n-text>
+			</div>
+		</template>
+		<template slot="footer">
+			<div :class="$style.buttonsContainer">
+				<n8n-button
+					:label="$locale.baseText('onboardingCallSignupModal.cancelButton.label')"
+					:disabled="loading"
+					size="medium"
+					float="right"
+					type="outline"
+					@click="onCancel"
+				/>
+				<n8n-button
+					:disabled="email === '' || loading"
+					:label="$locale.baseText('onboardingCallSignupModal.signupButton.label')"
+					size="medium"
+					float="right"
+					:loading="loading"
+					@click="onSignup"
+				/>
+			</div>
+		</template>
+	</Modal>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+import {
+	ONBOARDING_CALL_SIGNUP_MODAL_KEY,
+	VALID_EMAIL_REGEX,
+} from '@/constants';
+import Modal from './Modal.vue';
+
+import mixins from 'vue-typed-mixins';
+import { showMessage } from './mixins/showMessage';
+
+export default mixins(
+	showMessage,
+).extend({
+	components: {
+		Modal,
+	},
+	name: 'OnboardingCallSignupModal',
+	props: [ 'modalName' ],
+	data() {
+		return {
+			email: '',
+			modalBus: new Vue(),
+			ONBOARDING_CALL_SIGNUP_MODAL_KEY,
+			showError: false,
+			okToClose: false,
+			loading: false,
+		};
+	},
+	computed: {
+		isEmailValid(): boolean {
+			return VALID_EMAIL_REGEX.test(String(this.email).toLowerCase());
+		},
+	},
+	methods: {
+		async onSignup() {
+			if (!this.isEmailValid) {
+				this.showError = true;
+				return;
+			}
+			this.showError = false;
+			this.loading = true;
+			this.okToClose = false;
+
+			try {
+				await this.$store.dispatch('ui/applyForOnboardingCall', { email: this.email });
+				this.$showMessage({
+					type: 'success',
+					title: this.$locale.baseText('onboardingCallSignupSucess.title'),
+					message: this.$locale.baseText('onboardingCallSignupSucess.message'),
+				});
+				this.okToClose = true;
+				this.modalBus.$emit('close');
+			} catch (e) {
+				this.$showError(
+					e,
+					this.$locale.baseText('onboardingCallSignupFailed.title'),
+					this.$locale.baseText('onboardingCallSignupFailed.message'),
+				);
+				this.loading = false;
+				this.okToClose = true;
+			}
+		},
+		async onCancel() {
+			this.okToClose = true;
+			this.modalBus.$emit('close');
+		},
+		onModalClose() {
+			return this.okToClose;
+		},
+	},
+});
+</script>
+
+<style lang="scss" module>
+.buttonsContainer {
+	display: flex;
+	justify-content: flex-end;
+	column-gap: var(--spacing-xs);
+}
+</style>
--- a/packages/editor-ui/src/components/PersonalizationModal.vue
+++ b/packages/editor-ui/src/components/PersonalizationModal.vue
@@ -108,6 +108,9 @@ import {
 	OTHER_FOCUS,
 	COMPANY_INDUSTRY_EXTENDED_KEY,
 	OTHER_COMPANY_INDUSTRY_EXTENDED_KEY,
+	ONBOARDING_PROMPT_TIMEBOX,
+	FIRST_ONBOARDING_PROMPT_TIMEOUT,
+	ONBOARDING_CALL_SIGNUP_MODAL_KEY,
 } from '../constants';
 import { workflowHelpers } from '@/components/mixins/workflowHelpers';
 import { showMessage } from '@/components/mixins/showMessage';
@@ -115,6 +118,7 @@ import Modal from './Modal.vue';
 import { IFormInput, IFormInputs, IPersonalizationSurveyAnswersV2 } from '@/Interface';
 import Vue from 'vue';
 import { mapGetters } from 'vuex';
+import { getAccountAge } from '@/modules/userHelpers';

 export default mixins(showMessage, workflowHelpers).extend({
 	components: { Modal },
@@ -135,6 +139,12 @@ export default mixins(showMessage, workflowHelpers).extend({
 		...mapGetters({
 			baseUrl: 'getBaseUrl',
 		}),
+		...mapGetters('users', [
+			'currentUser',
+		]),
+		...mapGetters('settings', [
+			'isOnboardingCallPromptFeatureEnabled',
+		]),
 		survey() {
 			const survey: IFormInputs = [
 				{
@@ -500,6 +510,7 @@ export default mixins(showMessage, workflowHelpers).extend({
 					this.closeDialog();
 				}

+				await this.fetchOnboardingPrompt();
 				this.submitted = true;
 			} catch (e) {
 				this.$showError(e, 'Error while submitting results');
@@ -507,6 +518,33 @@ export default mixins(showMessage, workflowHelpers).extend({

 			this.$data.isSaving = false;
 		},
+		async fetchOnboardingPrompt() {
+			if (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);
+				}
+			}
+		},
 	},
 });
 </script>
--- a/packages/editor-ui/src/components/SettingsSidebar.vue
+++ b/packages/editor-ui/src/components/SettingsSidebar.vue
@@ -25,6 +25,17 @@
 				</i>
 				<span slot="title">{{ $locale.baseText('settings.n8napi') }}</span>
 			</n8n-menu-item>
+			<n8n-menu-item
+				v-for="fakeDoor in settingsFakeDoorFeatures"
+				v-bind:key="fakeDoor.featureName"
+				:index="`/settings/coming-soon/${fakeDoor.id}`"
+				:class="$style.tab"
+			>
+				<i :class="$style.icon">
+					<font-awesome-icon :icon="fakeDoor.icon" />
+				</i>
+				<span slot="title">{{ $locale.baseText(fakeDoor.featureName) }}</span>
+			</n8n-menu-item>
 			<n8n-menu-item index="/settings/community-nodes" v-if="canAccessCommunityNodes()" :class="$style.tab">
 				<i :class="$style.icon">
 					<font-awesome-icon icon="cube" />
@@ -45,6 +56,7 @@ import mixins from 'vue-typed-mixins';
 import { mapGetters } from 'vuex';
 import { ABOUT_MODAL_KEY, VIEWS } from '@/constants';
 import { userHelpers } from './mixins/userHelpers';
+import { IFakeDoor } from '@/Interface';

 export default mixins(
 	userHelpers,
@@ -52,6 +64,9 @@ export default mixins(
 	name: 'SettingsSidebar',
 	computed: {
 		...mapGetters('settings', ['versionCli']),
+		settingsFakeDoorFeatures(): IFakeDoor[] {
+			return this.$store.getters['ui/getFakeDoorByLocation']('settings');
+		},
 	},
 	methods: {
 		canAccessPersonalSettings(): boolean {