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>
This commit is contained in:
Milorad FIlipović
2022-07-27 16:28:13 +02:00
committed by GitHub
parent 553b14a13c
commit 3ebfa45570
28 changed files with 676 additions and 12 deletions

View File

@@ -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>