akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Latest changes

Browse Source
This commit is contained in:
Nithin David Thomas
2024-02-15 22:22:21 +05:30
parent 90a6a9d058
commit f7088b29cc
12 changed files with 156 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/i18n/locale/en/signup.json
+1 -1
View File
@@ -41,7 +41,7 @@
"SUBMIT": "Create account",
"HAVE_AN_ACCOUNT": "Already have an account?"
},
"ONBOARDING": {
"START_ONBOARDING": {
"PROFILE": {
"INTRO": "Welcome, let’s get started.",
"TITLE": "Set up profile",
app/javascript/v3/components/Form/Input.vue
+1 -1
View File
@@ -28,7 +28,7 @@
'px-3 py-2 mb-0': spacing === 'compact',
'pl-9': icon,
}"
class="block w-full border-none shadow-sm appearance-none rounded-xl outline outline-1 focus:outline-2 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 sm:text-sm sm:leading-6 dark:bg-slate-800"
class="block w-full border-none shadow-sm appearance-none rounded-xl outline outline-1 focus:outline focus:outline-2 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 sm:text-sm sm:leading-6 dark:bg-slate-800"
@input="onInput"
@blur="$emit('blur')"
/>
app/javascript/v3/views/auth/signup/Index.vue
+10 -3
View File
@@ -19,7 +19,7 @@
<mask id="cutoutMask">
<path
d="M263.999 65.0769C293.048 65.0769 317.641 45.9499 325.929 19.5735C329.219 9.10348 337.794 0 348.744 0H508.172C519.122 0 527.999 8.89875 527.999 19.8759V95.5C527.999 95.5 519.122 95.5 508.172 95.5H263.999H-0.000976562V19.8759C-0.000976562 8.89877 8.87604 0 19.8264 0H179.254C190.204 0 198.779 9.10349 202.069 19.5735C210.357 45.9499 234.95 65.0769 263.999 65.0769Z"
fill="#FCFCFD"
fill="white"
/>
</mask>
</defs>
@@ -29,10 +29,10 @@
class="flex w-full h-full relative z-50 items-center justify-center overflow-auto"
>
<div
class="flex-1 min-h-[640px] inline-flex items-center h-full justify-center py-6"
class="relative flex-1 min-h-[640px] inline-flex items-center h-full justify-center py-6"
>
<div
class="relative bg-white dark:bg-slate-800 before:bg-white dark:before:bg-slate-800 px-16 pt-8 pb-16 max-w-[528px] w-full rounded-3xl signup-box"
class="relative bg-white dark:bg-slate-800 before:bg-white before:border-slate-200 dark:before:border-slate-700 dark:before:bg-slate-800 px-16 pt-8 pb-16 max-w-[528px] w-full rounded-3xl signup-box"
>
<div class="absolute -top-[116px] right-0 left-0 w-24 h-24 mx-auto">
<img
@@ -112,4 +112,11 @@ export default {
-webkit-mask-image: url('#cutoutMask');
mask-image: url('#cutoutMask');
}
.dark .signup-box {
-webkit-filter: drop-shadow(1px 1px 0 var(--s-800))
drop-shadow(-1px -1px 0 var(--s-800));
filter: drop-shadow(1px 1px 0 var(--s-800))
drop-shadow(-1px -1px 0 var(--s-800));
}
</style>
app/javascript/v3/views/onboarding/FoundersNote.vue
+1 -1
View File
@@ -59,7 +59,7 @@
<submit-button
button-class="flex justify-center w-full text-sm text-center mt-8"
:button-text="$t('ONBOARDING.FOUNDERS_NOTE.SUBMIT')"
:button-text="$t('START_ONBOARDING.FOUNDERS_NOTE.SUBMIT')"
@click="onSubmit"
/>
</div>
app/javascript/v3/views/onboarding/InviteTeam.vue
+17 -11
View File
@@ -6,12 +6,12 @@
<h2
class="font-bold text-[28px] leading-8 tracking-[2%] text-slate-900 dark:text-white"
>
{{ $t('ONBOARDING.INVITE_TEAM.TITLE') }}
{{ $t('START_ONBOARDING.INVITE_TEAM.TITLE') }}
</h2>
<p
class="text-base text-slate-600 leading-6 tracking-[-1.1%] mt-2 dark:text-slate-200"
>
{{ $t('ONBOARDING.INVITE_TEAM.BODY') }}
{{ $t('START_ONBOARDING.INVITE_TEAM.BODY') }}
</p>
<div class="mt-10">
<section class="space-y-5">
@@ -21,7 +21,7 @@
name="email"
spacing="compact"
class="flex-grow"
:placeholder="$t('ONBOARDING.INVITE_TEAM.PLACEHOLDER')"
:placeholder="$t('START_ONBOARDING.INVITE_TEAM.PLACEHOLDER')"
@keyup.enter="pushEmail"
/>
<woot-button
@@ -29,7 +29,7 @@
color-scheme="secondary"
@click="pushEmail"
>
{{ $t('ONBOARDING.INVITE_TEAM.ADD') }}
{{ $t('START_ONBOARDING.INVITE_TEAM.ADD') }}
</woot-button>
</div>
<div
@@ -41,7 +41,7 @@
>
<div v-if="emailsToInvite.length === 0" class="px-5 py-16">
<p class="text-sm text-slate-400">
{{ $t('ONBOARDING.INVITE_TEAM.LIST_EMPTY') }}
{{ $t('START_ONBOARDING.INVITE_TEAM.LIST_EMPTY') }}
</p>
</div>
<div
@@ -69,7 +69,7 @@
<div class="space-y-2">
<submit-button
button-class="flex justify-center w-full text-sm text-center"
:button-text="$t('ONBOARDING.INVITE_TEAM.SUBMIT.BUTTON')"
:button-text="$t('START_ONBOARDING.INVITE_TEAM.SUBMIT.BUTTON')"
@click="onSubmit"
/>
@@ -80,7 +80,7 @@
is-expanded
@click="skipToFoundersNote"
>
{{ $t('ONBOARDING.INVITE_TEAM.SKIP') }}
{{ $t('START_ONBOARDING.INVITE_TEAM.SKIP') }}
</woot-button>
</div>
</section>
@@ -114,23 +114,29 @@ export default {
this.emailsToInvite = [...new Set(this.emailsToInvite)];
this.emailToAdd = '';
},
skipToFoundersNote() {
async skipToFoundersNote() {
try {
await AgentAPI.bulkInvite({ emails: [] });
this.$router.push({ name: 'onboarding_founders_note' });
} catch (error) {
this.showAlert(this.$t('START_ONBOARDING.INVITE_TEAM.SUBMIT.ERROR'));
}
this.$router.push({ name: 'onboarding_founders_note' });
},
async onSubmit() {
if (this.emailsToInvite.length === 0) {
this.showAlert(
this.$t('ONBOARDING.INVITE_TEAM.SUBMIT.NO_MEMBER_ERROR')
this.$t('START_ONBOARDING.INVITE_TEAM.SUBMIT.NO_MEMBER_ERROR')
);
return;
}
try {
await AgentAPI.bulkInvite({ emails: this.emailsToInvite });
this.showAlert(this.$t('ONBOARDING.INVITE_TEAM.SUBMIT.SUCCESS'));
this.showAlert(this.$t('START_ONBOARDING.INVITE_TEAM.SUBMIT.SUCCESS'));
this.$router.push({ name: 'onboarding_founders_note' });
} catch (error) {
this.showAlert(this.$t('ONBOARDING.INVITE_TEAM.SUBMIT.ERROR'));
this.showAlert(this.$t('START_ONBOARDING.INVITE_TEAM.SUBMIT.ERROR'));
}
},
},
app/javascript/v3/views/onboarding/RouteLayout.vue
+38 -38
View File
@@ -2,7 +2,9 @@
<section
class="relative min-h-screen px-8 dark:text-white bg-[#FCFCFD] dark:bg-slate-900 flex items-center justify-center bg-[url('/assets/images/dashboard/onboarding/intro.svg')] dark:bg-[url('/assets/images/dashboard/onboarding/intro-dark.svg')] bg-[length:715px_555px] bg-no-repeat bg-[left_calc(-56px)_bottom_calc(-133px)]"
>
<spinner v-if="!showIntroHeader" class="absolute inset-0" />
<div
v-else
class="relative max-w-[1440px] w-full mx-auto flex gap-16 min-h-[80vh] justify-center"
>
<div class="relative w-5/12 px-16 py-[88px] mt-10">
@@ -43,7 +45,7 @@
class="relative w-7/12 py-[88px] flex justify-center overflow-hidden h-fit"
>
<div
class="absolute inset-0 h-full w-full bg-white dark:bg-slate-900 bg-[radial-gradient(var(--w-200)_1px,transparent_1px)] [background-size:16px_16px]"
class="absolute inset-0 h-full w-full bg-[#FCFCFD] dark:bg-slate-900 bg-[radial-gradient(var(--w-200)_1px,transparent_1px)] [background-size:16px_16px]"
/>
<div
class="absolute h-full w-full overlay-gradient top-0 left-0 scale-y-110 blur-[3px]"
@@ -61,50 +63,29 @@
import { mapGetters } from 'vuex';
import globalConfigMixin from 'shared/mixins/globalConfigMixin';
import Spinner from 'shared/components/Spinner.vue';
import OnboardingStep from './OnboardingStep.vue';
import { UISteps, API_ONBOARDING_STEP_ROUTE } from './constants';
const UISteps = [
{
name: 'onboarding_setup_profile',
title: 'Setup Profile',
icon: 'person',
isActive: false,
isComplete: false,
},
{
name: 'onboarding_setup_company',
title: 'Setup Company',
icon: 'toolbox',
isActive: false,
isComplete: false,
},
{
name: 'onboarding_invite_team',
title: 'Invite your team',
icon: 'people-team',
isActive: false,
isComplete: false,
},
// {
// name: 'onboarding_founders_note',
// title: "Founder's Note",
// icon: '',
// hidden: true,
// isActive: false,
// isComplete: false,
// },
];
export default {
components: {
Spinner,
OnboardingStep,
},
mixins: [globalConfigMixin],
data() {
return {
showIntroHeader: false,
showLoading: true,
};
},
computed: {
...mapGetters({
globalConfig: 'globalConfig/get',
currentUser: 'getCurrentUser',
currentAccountId: 'getCurrentAccountId',
getAccount: 'accounts/getAccount',
}),
currentStep() {
return this.$route.name;
},
@@ -113,12 +94,12 @@ export default {
this.currentStep === 'onboarding_setup_company' ||
this.currentStep === 'onboarding_invite_team'
) {
return this.$t('ONBOARDING.COMPANY.PAGE_TITLE', {
return this.$t('START_ONBOARDING.COMPANY.PAGE_TITLE', {
userName: this.userName,
});
}
return this.$t('ONBOARDING.PROFILE.INTRO');
return this.$t('START_ONBOARDING.PROFILE.INTRO');
},
steps() {
let foundCurrentStep = false;
@@ -136,27 +117,46 @@ export default {
userName() {
return this.currentUser.name;
},
...mapGetters({
globalConfig: 'globalConfig/get',
currentUser: 'getCurrentUser',
}),
accountDetails() {
return this.getAccount(this.currentAccountId);
},
},
watch: {
watch: {
$route() {
this.showIntroHeader = false;
this.showLoading = true;
setTimeout(() => {
this.showIntroHeader = true;
}, 10);
},
accountDetails() {
this.navigateToSavedStep();
},
},
},
mounted() {
this.showIntroHeader = true;
this.showLoading = true;
this.navigateToSavedStep();
},
beforeDestroy() {
this.showIntroHeader = false;
},
methods: {
navigateToSavedStep() {
if (!this.accountDetails) return;
const { custom_attributes: { onboarding_step: savedStep } = {} } =
this.accountDetails;
const stepName = API_ONBOARDING_STEP_ROUTE[savedStep];
if (stepName !== this.currentStep) {
this.showLoading = false;
this.$router.replace({ name: stepName });
}
},
},
};
</script>
<style scoped>
app/javascript/v3/views/onboarding/SetupCompany.vue
+17 -16
View File
@@ -6,12 +6,12 @@
<h2
class="font-bold text-[28px] leading-8 tracking-[2%] text-slate-900 dark:text-white"
>
{{ $t('ONBOARDING.COMPANY.TITLE') }}
{{ $t('START_ONBOARDING.COMPANY.TITLE') }}
</h2>
<p
class="text-base text-slate-600 leading-6 tracking-[-1.1%] mt-2 dark:text-slate-200"
>
{{ $t('ONBOARDING.COMPANY.BODY') }}
{{ $t('START_ONBOARDING.COMPANY.BODY') }}
</p>
<div class="space-y-8 mt-10">
@@ -22,16 +22,16 @@
name="companyName"
spacing="compact"
:has-error="$v.companyName.$error"
:label="$t('ONBOARDING.COMPANY.COMPANY_NAME.LABEL')"
:placeholder="$t('ONBOARDING.COMPANY.COMPANY_NAME.PLACEHOLDER')"
:error-message="$t('ONBOARDING.COMPANY.COMPANY_NAME.ERROR')"
:label="$t('START_ONBOARDING.COMPANY.COMPANY_NAME.LABEL')"
:placeholder="$t('START_ONBOARDING.COMPANY.COMPANY_NAME.PLACEHOLDER')"
:error-message="$t('START_ONBOARDING.COMPANY.COMPANY_NAME.ERROR')"
/>
<form-select
v-model="locale"
name="locale"
icon="local-language"
:label="$t('ONBOARDING.COMPANY.LOCALE.LABEL')"
:placeholder="$t('ONBOARDING.COMPANY.LOCALE.PLACEHOLDER')"
:label="$t('START_ONBOARDING.COMPANY.LOCALE.LABEL')"
:placeholder="$t('START_ONBOARDING.COMPANY.LOCALE.PLACEHOLDER')"
>
<option
v-for="lang in languagesSortedByCode"
@@ -47,8 +47,8 @@
name="timezone"
icon="globe-clock"
spacing="compact"
:label="$t('ONBOARDING.COMPANY.TIMEZONE.LABEL')"
:placeholder="$t('ONBOARDING.COMPANY.TIMEZONE.PLACEHOLDER')"
:label="$t('START_ONBOARDING.COMPANY.TIMEZONE.LABEL')"
:placeholder="$t('START_ONBOARDING.COMPANY.TIMEZONE.PLACEHOLDER')"
>
<option
v-for="zone in timeZones"
@@ -62,21 +62,21 @@
<form-radio-tags
v-model="industry"
name="industry"
:label="$t('ONBOARDING.COMPANY.INDUSTRY.LABEL')"
:placeholder="$t('ONBOARDING.COMPANY.SIZE.PLACEHOLDER')"
:label="$t('START_ONBOARDING.COMPANY.INDUSTRY.LABEL')"
:placeholder="$t('START_ONBOARDING.COMPANY.SIZE.PLACEHOLDER')"
:options="industryOptions"
/>
<form-radio-tags
v-model="companySize"
name="companySize"
:label="$t('ONBOARDING.COMPANY.SIZE.LABEL')"
:placeholder="$t('ONBOARDING.COMPANY.SIZE.PLACEHOLDER')"
:label="$t('START_ONBOARDING.COMPANY.SIZE.LABEL')"
:placeholder="$t('START_ONBOARDING.COMPANY.SIZE.PLACEHOLDER')"
:options="companySizeOptions"
/>
</div>
<submit-button
button-class="flex justify-center w-full text-sm text-center"
:button-text="$t('ONBOARDING.COMPANY.SUBMIT.BUTTON')"
:button-text="$t('START_ONBOARDING.COMPANY.SUBMIT.BUTTON')"
@click="onSubmit"
/>
</div>
@@ -189,11 +189,12 @@ export default {
locale: this.locale,
company_size: this.companySize,
industry: this.industry,
onboarding_step: 'account_update',
});
this.showAlert(this.$t('ONBOARDING.COMPANY.SUBMIT.SUCCESS'));
this.showAlert(this.$t('START_ONBOARDING.COMPANY.SUBMIT.SUCCESS'));
this.$router.push({ name: 'onboarding_invite_team' });
} catch (error) {
this.showAlert(this.$t('ONBOARDING.COMPANY.SUBMIT.ERROR'));
this.showAlert(this.$t('START_ONBOARDING.COMPANY.SUBMIT.ERROR'));
}
},
setLocale(locale) {
app/javascript/v3/views/onboarding/SetupProfile.vue
+21 -17
View File
@@ -6,12 +6,12 @@
<h2
class="font-bold text-[28px] leading-8 tracking-[2%] text-slate-900 dark:text-white"
>
{{ $t('ONBOARDING.PROFILE.TITLE') }}
{{ $t('START_ONBOARDING.PROFILE.TITLE') }}
</h2>
<p
class="text-base text-slate-600 leading-6 tracking-[-1.1%] mt-2 dark:text-slate-200"
>
{{ $t('ONBOARDING.PROFILE.BODY') }}
{{ $t('START_ONBOARDING.PROFILE.BODY') }}
</p>
<div class="mt-10">
<form class="space-y-6" @submit="onSubmit">
@@ -19,7 +19,7 @@
<div>
<with-label name="user_avatar">
<template #label>
{{ $t('ONBOARDING.PROFILE.AVATAR.LABEL') }}
{{ $t('START_ONBOARDING.PROFILE.AVATAR.LABEL') }}
</template>
<div class="flex gap-2">
<woot-thumbnail
@@ -65,7 +65,7 @@
variant="hollow"
@click="onFileBrowse"
>
{{ $t('ONBOARDING.PROFILE.AVATAR.PLACEHOLDER') }}
{{ $t('START_ONBOARDING.PROFILE.AVATAR.PLACEHOLDER') }}
</woot-button>
<woot-button
v-else
@@ -84,26 +84,30 @@
name="full_name"
spacing="compact"
:has-error="$v.fullName.$error"
:label="$t('ONBOARDING.PROFILE.FULL_NAME.LABEL')"
:placeholder="$t('ONBOARDING.PROFILE.FULL_NAME.PLACEHOLDER')"
:error-message="$t('ONBOARDING.PROFILE.FULL_NAME.ERROR')"
:label="$t('START_ONBOARDING.PROFILE.FULL_NAME.LABEL')"
:placeholder="$t('START_ONBOARDING.PROFILE.FULL_NAME.PLACEHOLDER')"
:error-message="$t('START_ONBOARDING.PROFILE.FULL_NAME.ERROR')"
/>
<form-input
v-model="displayName"
name="display_name"
spacing="compact"
:has-error="$v.displayName.$error"
:label="$t('ONBOARDING.PROFILE.DISPLAY_NAME.LABEL')"
:placeholder="$t('ONBOARDING.PROFILE.DISPLAY_NAME.PLACEHOLDER')"
:error-message="$t('ONBOARDING.PROFILE.DISPLAY_NAME.ERROR')"
:label="$t('START_ONBOARDING.PROFILE.DISPLAY_NAME.LABEL')"
:placeholder="
$t('START_ONBOARDING.PROFILE.DISPLAY_NAME.PLACEHOLDER')
"
:error-message="$t('START_ONBOARDING.PROFILE.DISPLAY_NAME.ERROR')"
/>
<form-input
v-model="phoneNumber"
name="phone_number"
spacing="compact"
:has-error="$v.phoneNumber.$error"
:label="$t('ONBOARDING.PROFILE.PHONE_NUMBER.LABEL')"
:placeholder="$t('ONBOARDING.PROFILE.PHONE_NUMBER.PLACEHOLDER')"
:label="$t('START_ONBOARDING.PROFILE.PHONE_NUMBER.LABEL')"
:placeholder="
$t('START_ONBOARDING.PROFILE.PHONE_NUMBER.PLACEHOLDER')
"
:error-message="$t('CONTACT_FORM.FORM.PHONE_NUMBER.ERROR')"
@blur="$v.phoneNumber.$touch"
/>
@@ -112,13 +116,13 @@
name="signature"
spacing="compact"
:allow-resize="false"
:label="$t('ONBOARDING.PROFILE.SIGNATURE.LABEL')"
:placeholder="$t('ONBOARDING.PROFILE.SIGNATURE.PLACEHOLDER')"
:label="$t('START_ONBOARDING.PROFILE.SIGNATURE.LABEL')"
:placeholder="$t('START_ONBOARDING.PROFILE.SIGNATURE.PLACEHOLDER')"
/>
</div>
<submit-button
button-class="flex justify-center w-full text-sm text-center"
:button-text="$t('ONBOARDING.PROFILE.SUBMIT.BUTTON')"
:button-text="$t('START_ONBOARDING.PROFILE.SUBMIT.BUTTON')"
/>
</form>
</div>
@@ -229,13 +233,13 @@ export default {
avatar: this.avatarFile,
message_signature: this.signature || '',
});
this.showAlert(this.$t('ONBOARDING.PROFILE.SUBMIT.SUCCESS'));
this.showAlert(this.$t('START_ONBOARDING.PROFILE.SUBMIT.SUCCESS'));
document.startViewTransition(() => {
this.$router.push({ name: 'onboarding_setup_company' });
});
} catch (error) {
this.showAlert(this.$t('ONBOARDING.PROFILE.SUBMIT.ERROR'));
this.showAlert(this.$t('START_ONBOARDING.PROFILE.SUBMIT.ERROR'));
}
},
async deleteAvatar(event) {
app/javascript/v3/views/onboarding/constants.js
+29
View File
@@ -0,0 +1,29 @@
export const UISteps = [
{
name: 'onboarding_setup_profile',
title: 'Setup Profile',
icon: 'person',
isActive: false,
isComplete: false,
},
{
name: 'onboarding_setup_company',
title: 'Setup Company',
icon: 'toolbox',
isActive: false,
isComplete: false,
},
{
name: 'onboarding_invite_team',
title: 'Invite your team',
icon: 'people-team',
isActive: false,
isComplete: false,
},
];
export const API_ONBOARDING_STEP_ROUTE = {
profile_update: 'onboarding_setup_profile',
account_update: 'onboarding_setup_company',
invite_team: 'onboarding_invite_team',
};