LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: Update Inbox/Team creation UI (#12305)

Browse Source
This commit is contained in:
Sivin Varghese
2025-09-02 14:11:38 +05:30
committed by GitHub
parent 8606aa1310
commit b0112a2869
34 changed files with 600 additions and 465 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
View File

@@ -63,9 +63,7 @@ export default {
</script>
<template>
<div
class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
>
<div class="h-full w-full p-6 col-span-6">
<form class="flex flex-wrap flex-col mx-0" @submit.prevent="addAgents()">
<div class="w-full">
<PageHeader

165
app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
View File

@@ -1,83 +1,108 @@
<script>
import ChannelItem from 'dashboard/components/widgets/ChannelItem.vue';
import router from '../../../index';
import PageHeader from '../SettingsSubPageHeader.vue';
import { mapGetters } from 'vuex';
import { useBranding } from 'shared/composables/useBranding';
<script setup>
import { ref, computed, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { useMapGetter } from 'dashboard/composables/store';
export default {
components: {
ChannelItem,
PageHeader,
},
setup() {
const { replaceInstallationName } = useBranding();
return {
replaceInstallationName,
};
},
data() {
return {
enabledFeatures: {},
};
},
computed: {
account() {
return this.$store.getters['accounts/getAccount'](this.accountId);
import { useAccount } from 'dashboard/composables/useAccount';
import ChannelItem from 'dashboard/components/widgets/ChannelItem.vue';
const { t } = useI18n();
const router = useRouter();
const { accountId, currentAccount } = useAccount();
const globalConfig = useMapGetter('globalConfig/get');
const enabledFeatures = ref({});
const channelList = computed(() => {
const { apiChannelName } = globalConfig.value;
return [
{
key: 'website',
title: t('INBOX_MGMT.ADD.AUTH.CHANNEL.WEBSITE.TITLE'),
description: t('INBOX_MGMT.ADD.AUTH.CHANNEL.WEBSITE.DESCRIPTION'),
icon: 'i-woot-website',
},
channelList() {
const { apiChannelName, apiChannelThumbnail } = this.globalConfig;
return [
{ key: 'website', name: 'Website' },
{ key: 'facebook', name: 'Messenger' },
{ key: 'whatsapp', name: 'WhatsApp' },
{ key: 'sms', name: 'SMS' },
{ key: 'email', name: 'Email' },
{
key: 'api',
name: apiChannelName || 'API',
thumbnail: apiChannelThumbnail,
},
{ key: 'telegram', name: 'Telegram' },
{ key: 'line', name: 'Line' },
{ key: 'instagram', name: 'Instagram' },
{ key: 'voice', name: 'Voice' },
];
{
key: 'facebook',
title: t('INBOX_MGMT.ADD.AUTH.CHANNEL.FACEBOOK.TITLE'),
description: t('INBOX_MGMT.ADD.AUTH.CHANNEL.FACEBOOK.DESCRIPTION'),
icon: 'i-woot-messenger',
},
...mapGetters({
accountId: 'getCurrentAccountId',
globalConfig: 'globalConfig/get',
}),
},
mounted() {
this.initializeEnabledFeatures();
},
methods: {
async initializeEnabledFeatures() {
this.enabledFeatures = this.account.features;
{
key: 'whatsapp',
title: t('INBOX_MGMT.ADD.AUTH.CHANNEL.WHATSAPP.TITLE'),
description: t('INBOX_MGMT.ADD.AUTH.CHANNEL.WHATSAPP.DESCRIPTION'),
icon: 'i-woot-whatsapp',
},
initChannelAuth(channel) {
const params = {
sub_page: channel,
accountId: this.accountId,
};
router.push({ name: 'settings_inboxes_page_channel', params });
{
key: 'sms',
title: t('INBOX_MGMT.ADD.AUTH.CHANNEL.SMS.TITLE'),
description: t('INBOX_MGMT.ADD.AUTH.CHANNEL.SMS.DESCRIPTION'),
icon: 'i-woot-sms',
},
},
{
key: 'email',
title: t('INBOX_MGMT.ADD.AUTH.CHANNEL.EMAIL.TITLE'),
description: t('INBOX_MGMT.ADD.AUTH.CHANNEL.EMAIL.DESCRIPTION'),
icon: 'i-woot-mail',
},
{
key: 'api',
title: apiChannelName || t('INBOX_MGMT.ADD.AUTH.CHANNEL.API.TITLE'),
description: t('INBOX_MGMT.ADD.AUTH.CHANNEL.API.DESCRIPTION'),
icon: 'i-woot-api',
},
{
key: 'telegram',
title: t('INBOX_MGMT.ADD.AUTH.CHANNEL.TELEGRAM.TITLE'),
description: t('INBOX_MGMT.ADD.AUTH.CHANNEL.TELEGRAM.DESCRIPTION'),
icon: 'i-woot-telegram',
},
{
key: 'line',
title: t('INBOX_MGMT.ADD.AUTH.CHANNEL.LINE.TITLE'),
description: t('INBOX_MGMT.ADD.AUTH.CHANNEL.LINE.DESCRIPTION'),
icon: 'i-woot-line',
},
{
key: 'instagram',
title: t('INBOX_MGMT.ADD.AUTH.CHANNEL.INSTAGRAM.TITLE'),
description: t('INBOX_MGMT.ADD.AUTH.CHANNEL.INSTAGRAM.DESCRIPTION'),
icon: 'i-woot-instagram',
},
{
key: 'voice',
title: t('INBOX_MGMT.ADD.AUTH.CHANNEL.VOICE.TITLE'),
description: t('INBOX_MGMT.ADD.AUTH.CHANNEL.VOICE.DESCRIPTION'),
icon: 'i-ri-phone-fill',
},
];
});
const initializeEnabledFeatures = async () => {
enabledFeatures.value = currentAccount.value.features;
};
const initChannelAuth = channel => {
const params = {
sub_page: channel,
accountId: accountId.value,
};
router.push({ name: 'settings_inboxes_page_channel', params });
};
onMounted(() => {
initializeEnabledFeatures();
});
</script>
<template>
<div
class="w-full h-full col-span-6 p-6 overflow-auto border border-b-0 rounded-t-lg border-n-weak bg-n-solid-1"
>
<PageHeader
class="max-w-4xl"
:header-title="$t('INBOX_MGMT.ADD.AUTH.TITLE')"
:header-content="replaceInstallationName($t('INBOX_MGMT.ADD.AUTH.DESC'))"
/>
<div class="w-full p-8 overflow-auto">
<div
class="grid max-w-3xl grid-cols-2 mx-0 mt-6 sm:grid-cols-3 lg:grid-cols-4"
class="grid max-w-3xl grid-cols-1 xs:grid-cols-2 mx-0 gap-6 sm:grid-cols-3"
>
<ChannelItem
v-for="channel in channelList"

4
app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
View File

@@ -168,9 +168,7 @@ onMounted(() => {
</script>
<template>
<div
class="overflow-auto col-span-6 p-6 w-full h-full rounded-t-lg border border-b-0 border-n-weak bg-n-solid-1"
>
<div class="w-full h-full col-span-6 p-6 overflow-auto">
<DuplicateInboxBanner
v-if="hasDuplicateInstagramInbox"
:content="$t('INBOX_MGMT.ADD.INSTAGRAM.NEW_INBOX_SUGGESTION')"

137
app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
View File

@@ -1,55 +1,106 @@
<script>
import { mapGetters } from 'vuex';
<script setup>
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import { useMapGetter } from 'dashboard/composables/store';
import { useBranding } from 'shared/composables/useBranding';
export default {
setup() {
const { replaceInstallationName } = useBranding();
import PageHeader from '../SettingsSubPageHeader.vue';
import Icon from 'next/icon/Icon.vue';
const { t } = useI18n();
const route = useRoute();
const { replaceInstallationName } = useBranding();
const globalConfig = useMapGetter('globalConfig/get');
const ALL_CHANNEL_ICONS = [
'i-woot-line',
'i-woot-facebook',
'i-woot-whatsapp',
'i-woot-instagram',
'i-woot-messenger',
'i-woot-website',
'i-woot-mail',
'i-woot-sms',
'i-woot-telegram',
'i-woot-api',
'i-woot-twilio',
'i-woot-gmail',
'i-woot-outlook',
];
const createFlowSteps = computed(() => {
const steps = ['CHANNEL', 'INBOX', 'AGENT', 'FINISH'];
const routes = {
CHANNEL: 'settings_inbox_new',
INBOX: 'settings_inboxes_page_channel',
AGENT: 'settings_inboxes_add_agents',
FINISH: 'settings_inbox_finish',
};
return steps.map(step => {
return {
replaceInstallationName,
title: t(`INBOX_MGMT.CREATE_FLOW.${step}.TITLE`),
body: t(`INBOX_MGMT.CREATE_FLOW.${step}.BODY`),
route: routes[step],
};
},
computed: {
...mapGetters({
globalConfig: 'globalConfig/get',
}),
createFlowSteps() {
const steps = ['CHANNEL', 'INBOX', 'AGENT', 'FINISH'];
});
});
const routes = {
CHANNEL: 'settings_inbox_new',
INBOX: 'settings_inboxes_page_channel',
AGENT: 'settings_inboxes_add_agents',
FINISH: 'settings_inbox_finish',
};
const isFirstStep = computed(() => {
return route.name === 'settings_inbox_new';
});
return steps.map(step => {
return {
title: this.$t(`INBOX_MGMT.CREATE_FLOW.${step}.TITLE`),
body: this.$t(`INBOX_MGMT.CREATE_FLOW.${step}.BODY`),
route: routes[step],
};
});
},
items() {
return this.createFlowSteps.map(item => ({
...item,
body: this.replaceInstallationName(item.body),
}));
},
},
};
const isFinishStep = computed(() => {
return route.name === 'settings_inbox_finish';
});
const pageTitle = computed(() => {
if (isFirstStep.value) {
return t('INBOX_MGMT.ADD.AUTH.TITLE');
}
if (isFinishStep.value) {
return t('INBOX_MGMT.ADD.AUTH.TITLE_FINISH');
}
return t('INBOX_MGMT.ADD.AUTH.TITLE_NEXT');
});
const items = computed(() => {
return createFlowSteps.value.map(item => ({
...item,
body: replaceInstallationName(item.body),
}));
});
</script>
<template>
<div class="grid grid-cols-1 md:grid-cols-8 overflow-auto h-full">
<woot-wizard
class="hidden md:block col-span-2"
:global-config="globalConfig"
:items="items"
/>
<div class="col-span-6">
<router-view />
<div class="mx-2 flex flex-col gap-6 mb-8">
<PageHeader class="block lg:hidden !mb-0" :header-title="pageTitle" />
<div class="hidden lg:grid grid-cols-1 lg:grid-cols-8 items-center gap-2">
<div class="col-span-2 w-full" />
<div class="flex items-center gap-2 col-span-6 ltr:ml-8 rtl:mr-8">
<div
v-for="icon in ALL_CHANNEL_ICONS"
:key="icon"
class="size-8 bg-n-alpha-2 flex items-center flex-shrink-0 justify-center rounded-full"
>
<Icon :icon="icon" class="size-4 text-n-slate-10" />
</div>
</div>
</div>
<div
class="grid grid-cols-1 lg:grid-cols-8 lg:divide-x lg:divide-n-weak rounded-xl border border-n-weak min-h-[52rem]"
>
<woot-wizard
class="hidden lg:block col-span-2 h-fit py-8 px-6"
:global-config="globalConfig"
:items="items"
/>
<div class="col-span-6 overflow-hidden">
<router-view />
</div>
</div>
</div>
</template>

2
app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
View File

@@ -116,7 +116,7 @@ const openDelete = inbox => {
v-else
class="size-12 flex justify-center items-center bg-n-alpha-3 rounded-full p-2 ring ring-n-solid-1 border border-n-strong shadow-sm"
>
<ChannelIcon class="size-5" :inbox="inbox" />
<ChannelIcon class="size-5 text-n-slate-10" :inbox="inbox" />
</div>
<div>
<span class="block font-medium capitalize">

4
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue
View File

@@ -65,9 +65,7 @@ export default {
</script>
<template>
<div
class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
>
<div class="h-full w-full p-6 col-span-6">
<PageHeader
:header-title="$t('INBOX_MGMT.ADD.API_CHANNEL.TITLE')"
:header-content="$t('INBOX_MGMT.ADD.API_CHANNEL.DESC')"

27
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue
View File

@@ -20,22 +20,25 @@ const isAChatwootInstance = getters['globalConfig/isAChatwootInstance'];
const emailProviderList = computed(() => {
return [
{
title: t('INBOX_MGMT.EMAIL_PROVIDERS.MICROSOFT'),
title: t('INBOX_MGMT.EMAIL_PROVIDERS.MICROSOFT.TITLE'),
description: t('INBOX_MGMT.EMAIL_PROVIDERS.MICROSOFT.DESCRIPTION'),
isEnabled: !!globalConfig.value.azureAppId,
key: 'microsoft',
src: '/assets/images/dashboard/channels/microsoft.png',
icon: 'i-woot-outlook',
},
{
title: t('INBOX_MGMT.EMAIL_PROVIDERS.GOOGLE'),
title: t('INBOX_MGMT.EMAIL_PROVIDERS.GOOGLE.TITLE'),
description: t('INBOX_MGMT.EMAIL_PROVIDERS.GOOGLE.DESCRIPTION'),
isEnabled: !!window.chatwootConfig.googleOAuthClientId,
key: 'google',
src: '/assets/images/dashboard/channels/google.png',
icon: 'i-woot-gmail',
},
{
title: t('INBOX_MGMT.EMAIL_PROVIDERS.OTHER_PROVIDERS'),
title: t('INBOX_MGMT.EMAIL_PROVIDERS.OTHER_PROVIDERS.TITLE'),
description: t('INBOX_MGMT.EMAIL_PROVIDERS.OTHER_PROVIDERS.DESCRIPTION'),
isEnabled: true,
key: 'other_provider',
src: '/assets/images/dashboard/channels/email.png',
icon: 'i-woot-mail',
},
].filter(providerConfig => {
if (isAChatwootInstance.value) {
@@ -53,22 +56,20 @@ function onClick(emailProvider) {
</script>
<template>
<div
v-if="!provider"
class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
>
<div v-if="!provider" class="h-full w-full p-6 col-span-6">
<PageHeader
class="max-w-4xl"
:header-title="$t('INBOX_MGMT.ADD.EMAIL_PROVIDER.TITLE')"
:header-content="$t('INBOX_MGMT.ADD.EMAIL_PROVIDER.DESCRIPTION')"
/>
<div class="grid max-w-3xl grid-cols-4 mx-0 mt-6">
<div class="grid max-w-3xl grid-cols-4 gap-6 mx-0 mt-6">
<ChannelSelector
v-for="emailProvider in emailProviderList"
:key="emailProvider.key"
:class="{ inactive: !emailProvider.isEnabled }"
:title="emailProvider.title"
:src="emailProvider.src"
:description="emailProvider.description"
:icon="emailProvider.icon"
:disabled="!emailProvider.isEnabled"
@click="() => onClick(emailProvider)"
/>
</div>

6
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
View File

@@ -206,16 +206,14 @@ export default {
</script>
<template>
<div
class="w-full h-full col-span-6 p-6 overflow-auto border border-b-0 rounded-t-lg border-n-weak bg-n-solid-1"
>
<div class="w-full h-full col-span-6 p-6 overflow-auto">
<div
v-if="!hasLoginStarted"
class="flex flex-col items-center justify-center h-full text-center"
>
<a href="#" @click="startLogin()">
<img
class="w-auto h-10"
class="w-auto h-10 rounded-md"
src="~dashboard/assets/images/channels/facebook_login.png"
alt="Facebook-logo"
/>

4
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue
View File

@@ -71,9 +71,7 @@ export default {
</script>
<template>
<div
class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
>
<div class="h-full w-full p-6 col-span-6">
<PageHeader
:header-title="$t('INBOX_MGMT.ADD.LINE_CHANNEL.TITLE')"
:header-content="$t('INBOX_MGMT.ADD.LINE_CHANNEL.DESC')"

4
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
View File

@@ -18,9 +18,7 @@ export default {
</script>
<template>
<div
class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
>
<div class="h-full w-full p-6 col-span-6">
<PageHeader
:header-title="$t('INBOX_MGMT.ADD.SMS.TITLE')"
:header-content="$t('INBOX_MGMT.ADD.SMS.DESC')"

4
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue
View File

@@ -65,9 +65,7 @@ export default {
</script>
<template>
<div
class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
>
<div class="h-full w-full p-6 col-span-6">
<PageHeader
:header-title="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.TITLE')"
:header-content="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.DESC')"

4
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue
View File

@@ -30,9 +30,7 @@ export default {
</script>
<template>
<div
class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
>
<div class="h-full w-full p-6 col-span-6">
<div class="login-init h-full text-center">
<form @submit.prevent="requestAuthorization">
<NextButton

4
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Voice.vue
View File

@@ -93,9 +93,7 @@ async function createChannel() {
</script>
<template>
<div
class="overflow-auto col-span-6 p-6 w-full h-full rounded-t-lg border border-b-0 border-n-weak bg-n-solid-1"
>
<div class="overflow-auto col-span-6 p-6 w-full h-full">
<PageHeader
:header-title="t('INBOX_MGMT.ADD.VOICE.TITLE')"
:header-content="t('INBOX_MGMT.ADD.VOICE.DESC')"

4
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
View File

@@ -78,9 +78,7 @@ export default {
</script>
<template>
<div
class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
>
<div class="h-full w-full p-6 col-span-6">
<PageHeader
:header-title="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.TITLE')"
:header-content="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.DESC')"

76
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue
View File

@@ -7,6 +7,7 @@ import Twilio from './Twilio.vue';
import ThreeSixtyDialogWhatsapp from './360DialogWhatsapp.vue';
import CloudWhatsapp from './CloudWhatsapp.vue';
import WhatsappEmbeddedSignup from './WhatsappEmbeddedSignup.vue';
import ChannelSelector from 'dashboard/components/ChannelSelector.vue';
import { FEATURE_FLAGS } from 'dashboard/featureFlags';
const route = useRoute();
@@ -45,16 +46,16 @@ const showConfiguration = computed(() => Boolean(selectedProvider.value));
const availableProviders = computed(() => [
{
value: PROVIDER_TYPES.WHATSAPP,
label: t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD'),
key: PROVIDER_TYPES.WHATSAPP,
title: t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD'),
description: t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD_DESC'),
icon: '/assets/images/dashboard/channels/whatsapp.png',
icon: 'i-woot-whatsapp',
},
{
value: PROVIDER_TYPES.TWILIO,
label: t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO'),
key: PROVIDER_TYPES.TWILIO,
title: t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO'),
description: t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO_DESC'),
icon: '/assets/images/dashboard/channels/twilio.png',
icon: 'i-woot-twilio',
},
]);
@@ -92,9 +93,7 @@ const shouldShowCloudWhatsapp = provider => {
</script>
<template>
<div
class="overflow-auto col-span-6 p-6 w-full h-full rounded-t-lg border border-b-0 border-n-weak bg-n-solid-1"
>
<div class="overflow-auto col-span-6 p-6 w-full h-full">
<div v-if="showProviderSelection">
<div class="mb-10 text-left">
<h1 class="mb-2 text-lg font-medium text-slate-12">
@@ -106,51 +105,30 @@ const shouldShowCloudWhatsapp = provider => {
</div>
<div class="flex gap-6 justify-start">
<div
<ChannelSelector
v-for="provider in availableProviders"
:key="provider.value"
class="gap-6 px-5 py-6 w-96 rounded-2xl border transition-all duration-200 cursor-pointer border-n-weak hover:bg-n-slate-3"
@click="selectProvider(provider.value)"
>
<div class="flex justify-start mb-5">
<div
class="flex justify-center items-center rounded-full size-10 bg-n-alpha-2"
>
<img
:src="provider.icon"
:alt="provider.label"
class="object-contain size-[26px]"
/>
</div>
</div>
<div class="text-start">
<h3 class="mb-1.5 text-sm font-medium text-slate-12">
{{ provider.label }}
</h3>
<p class="text-sm text-slate-11">
{{ provider.description }}
</p>
</div>
</div>
:key="provider.key"
:title="provider.title"
:description="provider.description"
:icon="provider.icon"
@click="selectProvider(provider.key)"
/>
</div>
</div>
<div v-else-if="showConfiguration">
<div class="px-6 py-5 rounded-2xl border bg-n-solid-2 border-n-weak">
<WhatsappEmbeddedSignup
v-if="shouldShowEmbeddedSignup(selectedProvider)"
/>
<CloudWhatsapp v-else-if="shouldShowCloudWhatsapp(selectedProvider)" />
<Twilio
v-else-if="selectedProvider === PROVIDER_TYPES.TWILIO"
type="whatsapp"
/>
<ThreeSixtyDialogWhatsapp
v-else-if="selectedProvider === PROVIDER_TYPES.THREE_SIXTY_DIALOG"
/>
<CloudWhatsapp v-else />
</div>
<WhatsappEmbeddedSignup
v-if="shouldShowEmbeddedSignup(selectedProvider)"
/>
<CloudWhatsapp v-else-if="shouldShowCloudWhatsapp(selectedProvider)" />
<Twilio
v-else-if="selectedProvider === PROVIDER_TYPES.TWILIO"
type="whatsapp"
/>
<ThreeSixtyDialogWhatsapp
v-else-if="selectedProvider === PROVIDER_TYPES.THREE_SIXTY_DIALOG"
/>
<CloudWhatsapp v-else />
</div>
</div>
</template>

4
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue
View File

@@ -70,9 +70,7 @@ export default {
</script>
<template>
<div
class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
>
<div class="h-full w-full p-6 col-span-6">
<PageHeader
:header-title="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.TITLE')"
:header-content="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.DESC')"

4
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/OAuthChannel.vue
View File

@@ -60,9 +60,7 @@ async function requestAuthorization() {
</script>
<template>
<div
class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
>
<div class="h-full w-full p-6 col-span-6">
<SettingsSubPageHeader
:header-title="title"
:header-content="description"

4
app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
View File

@@ -88,9 +88,7 @@ export default {
</script>
<template>
<div
class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
>
<div class="h-full w-full p-6 col-span-6">
<form
class="flex flex-wrap mx-0 overflow-x-auto"
@submit.prevent="addAgents"

4
app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue
View File

@@ -37,9 +37,7 @@ export default {
</script>
<template>
<div
class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
>
<div class="h-full w-full p-6 col-span-6">
<PageHeader
:header-title="$t('TEAMS_SETTINGS.CREATE_FLOW.CREATE.TITLE')"
:header-content="$t('TEAMS_SETTINGS.CREATE_FLOW.CREATE.DESC')"

13
app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue
View File

@@ -23,8 +23,15 @@ export default {
</script>
<template>
<div class="grid grid-cols-1 md:grid-cols-8 overflow-auto h-full px-5 flex-1">
<woot-wizard class="hidden md:block col-span-2" :items="items" />
<router-view />
<div class="mx-2 flex flex-col gap-6 mb-8">
<div
class="grid grid-cols-1 lg:grid-cols-8 lg:divide-x lg:divide-n-weak rounded-xl border border-n-weak min-h-[43rem]"
>
<woot-wizard
class="hidden lg:block col-span-2 h-fit py-8 px-6"
:items="items"
/>
<router-view />
</div>
</div>
</template>

4
app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
View File

@@ -103,9 +103,7 @@ export default {
</script>
<template>
<div
class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
>
<div class="h-full w-full p-8 col-span-6">
<form
class="flex flex-wrap mx-0 overflow-x-auto"
@submit.prevent="addAgents"

4
app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue
View File

@@ -57,9 +57,7 @@ export default {
</script>
<template>
<div
class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
>
<div class="h-full w-full p-8 col-span-6">
<PageHeader
:header-title="$t('TEAMS_SETTINGS.EDIT_FLOW.CREATE.TITLE')"
:header-content="$t('TEAMS_SETTINGS.EDIT_FLOW.CREATE.DESC')"

13
app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue
View File

@@ -27,8 +27,15 @@ export default {
</script>
<template>
<div class="grid grid-cols-1 md:grid-cols-8 overflow-auto h-full px-5 flex-1">
<woot-wizard class="hidden md:block col-span-2" :items="items" />
<router-view />
<div class="mx-2 flex flex-col gap-6 mb-8">
<div
class="grid grid-cols-1 lg:grid-cols-8 lg:divide-x lg:divide-n-weak rounded-xl border border-n-weak min-h-[43rem]"
>
<woot-wizard
class="hidden lg:block col-span-2 h-fit py-8 px-6"
:items="items"
/>
<router-view />
</div>
</div>
</template>

4
app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue
View File

@@ -11,9 +11,7 @@ export default {
</script>
<template>
<div
class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
>
<div class="h-full w-full p-6 col-span-6">
<EmptyState
:title="$t('TEAMS_SETTINGS.FINISH.TITLE')"
:message="$t('TEAMS_SETTINGS.FINISH.MESSAGE')"