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

@@ -1,3 +1,4 @@
import { applyForOnboardingCall, fetchNextOnboardingPrompt, submitEmailOnSignup } from '@/api/workflow-webhooks';
import {
ABOUT_MODAL_KEY,
COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY,
@@ -19,11 +20,15 @@ import {
WORKFLOW_OPEN_MODAL_KEY,
WORKFLOW_SETTINGS_MODAL_KEY,
VIEWS,
ONBOARDING_CALL_SIGNUP_MODAL_KEY,
FAKE_DOOR_FEATURES,
COMMUNITY_PACKAGE_MANAGE_ACTIONS,
} from '@/constants';
import Vue from 'vue';
import { ActionContext, Module } from 'vuex';
import {
IFakeDoor,
IFakeDoorLocation,
IRootState,
IRunDataDisplayMode,
IUiState,
@@ -61,6 +66,9 @@ const module: Module<IUiState, IRootState> = {
[DUPLICATE_MODAL_KEY]: {
open: false,
},
[ONBOARDING_CALL_SIGNUP_MODAL_KEY]: {
open: false,
},
[PERSONALIZATION_MODAL_KEY]: {
open: false,
},
@@ -117,6 +125,36 @@ const module: Module<IUiState, IRootState> = {
mappingTelemetry: {},
},
mainPanelPosition: 0.5,
fakeDoorFeatures: [
{
id: FAKE_DOOR_FEATURES.ENVIRONMENTS,
featureName: 'fakeDoor.settings.environments.name',
icon: 'server',
infoText: 'fakeDoor.settings.environments.infoText',
actionBoxTitle: 'fakeDoor.settings.environments.actionBox.title',
actionBoxDescription: 'fakeDoor.settings.environments.actionBox.description',
linkURL: 'https://n8n-community.typeform.com/to/l7QOrERN#f=environments',
uiLocations: ['settings'],
},
{
id: FAKE_DOOR_FEATURES.LOGGING,
featureName: 'fakeDoor.settings.logging.name',
icon: 'sign-in-alt',
infoText: 'fakeDoor.settings.logging.infoText',
actionBoxTitle: 'fakeDoor.settings.logging.actionBox.title',
actionBoxDescription: 'fakeDoor.settings.logging.actionBox.description',
linkURL: 'https://n8n-community.typeform.com/to/l7QOrERN#f=logging',
uiLocations: ['settings'],
},
{
id: FAKE_DOOR_FEATURES.SHARING,
featureName: 'fakeDoor.credentialEdit.sharing.name',
actionBoxTitle: 'fakeDoor.credentialEdit.sharing.actionBox.title',
actionBoxDescription: 'fakeDoor.credentialEdit.sharing.actionBox.description',
linkURL: 'https://n8n-community.typeform.com/to/l7QOrERN#f=sharing',
uiLocations: ['credentialsModal'],
},
],
draggable: {
isDragging: false,
type: '',
@@ -153,6 +191,13 @@ const module: Module<IUiState, IRootState> = {
outputPanelDispalyMode: (state: IUiState) => state.ndv.output.displayMode,
outputPanelEditMode: (state: IUiState): IUiState['ndv']['output']['editMode'] => state.ndv.output.editMode,
mainPanelPosition: (state: IUiState) => state.mainPanelPosition,
getFakeDoorFeatures: (state: IUiState) => state.fakeDoorFeatures,
getFakeDoorByLocation: (state: IUiState) => (location: IFakeDoorLocation) => {
return state.fakeDoorFeatures.filter(fakeDoor => fakeDoor.uiLocations.includes(location));
},
getFakeDoorById: (state: IUiState) => (id: string) => {
return state.fakeDoorFeatures.find(fakeDoor => fakeDoor.id.toString() === id);
},
focusedMappableInput: (state: IUiState) => state.ndv.focusedMappableInput,
isDraggableDragging: (state: IUiState) => state.draggable.isDragging,
draggableType: (state: IUiState) => state.draggable.type,
@@ -264,6 +309,21 @@ const module: Module<IUiState, IRootState> = {
context.commit('setMode', { name: CREDENTIAL_EDIT_MODAL_KEY, mode: 'new' });
context.commit('openModal', CREDENTIAL_EDIT_MODAL_KEY);
},
getNextOnboardingPrompt: async (context: ActionContext<IUiState, IRootState>) => {
const instanceId = context.rootGetters.instanceId;
const currentUser = context.rootGetters['users/currentUser'];
return await fetchNextOnboardingPrompt(instanceId, currentUser);
},
applyForOnboardingCall: async (context: ActionContext<IUiState, IRootState>, { email }) => {
const instanceId = context.rootGetters.instanceId;
const currentUser = context.rootGetters['users/currentUser'];
return await applyForOnboardingCall(instanceId, currentUser, email);
},
submitContactEmail: async (context: ActionContext<IUiState, IRootState>, { email, agree }) => {
const instanceId = context.rootGetters.instanceId;
const currentUser = context.rootGetters['users/currentUser'];
return await submitEmailOnSignup(instanceId, currentUser, email, agree);
},
async openCommunityPackageUninstallConfirmModal(context: ActionContext<IUiState, IRootState>, packageName: string) {
context.commit('setActiveId', { name: COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY, id: packageName});
context.commit('setMode', { name: COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY, mode: COMMUNITY_PACKAGE_MANAGE_ACTIONS.UNINSTALL });