mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-18 18:41:14 +00:00
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ć
committed by
GitHub
GitHub
parent
553b14a13c
commit
3ebfa45570
128
packages/editor-ui/src/components/OnboardingCallSignupModal.vue
Normal file
128
packages/editor-ui/src/components/OnboardingCallSignupModal.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user