f18ed01eb7
When moving form using Gmail Legacy auth to using OAuth, we need the email address that will be used to connect. This is because we need to store this email address in the cache and reuse when we get the callback to find the associated inbox. However there are cases where the imap login might be `support@company.com` and the email used to communicate will be `contact@company.com` (Probably an alias) In that case, we need to send the correct email address to Chatwoot when re-authenticating At the moment, we used the inbox email. This PR adds a check that defaults to to `imap_login` if that is available and imap is enabled This PR also fixes an unrelated problem where the email inbox creation flow was not working --- Tested it, it is working correctly 
80 lines
2.5 KiB
Vue
80 lines
2.5 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
import ForwardToOption from './emailChannels/ForwardToOption.vue';
|
|
import Microsoft from './emailChannels/Microsoft.vue';
|
|
import Google from './emailChannels/Google.vue';
|
|
import ChannelSelector from 'dashboard/components/ChannelSelector.vue';
|
|
import PageHeader from '../../SettingsSubPageHeader.vue';
|
|
|
|
import { useStoreGetters } from 'dashboard/composables/store';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const provider = ref('');
|
|
|
|
const getters = useStoreGetters();
|
|
const { t } = useI18n();
|
|
|
|
const globalConfig = getters['globalConfig/get'];
|
|
const isAChatwootInstance = getters['globalConfig/isAChatwootInstance'];
|
|
|
|
const emailProviderList = computed(() => {
|
|
return [
|
|
{
|
|
title: t('INBOX_MGMT.EMAIL_PROVIDERS.MICROSOFT'),
|
|
isEnabled: !!globalConfig.value.azureAppId,
|
|
key: 'microsoft',
|
|
src: '/assets/images/dashboard/channels/microsoft.png',
|
|
},
|
|
{
|
|
title: t('INBOX_MGMT.EMAIL_PROVIDERS.GOOGLE'),
|
|
isEnabled: !!window.chatwootConfig.googleOAuthClientId,
|
|
key: 'google',
|
|
src: '/assets/images/dashboard/channels/google.png',
|
|
},
|
|
{
|
|
title: t('INBOX_MGMT.EMAIL_PROVIDERS.OTHER_PROVIDERS'),
|
|
isEnabled: true,
|
|
key: 'other_provider',
|
|
src: '/assets/images/dashboard/channels/email.png',
|
|
},
|
|
].filter(providerConfig => {
|
|
if (isAChatwootInstance.value) {
|
|
return true;
|
|
}
|
|
return providerConfig.isEnabled;
|
|
});
|
|
});
|
|
|
|
function onClick(emailProvider) {
|
|
if (emailProvider.isEnabled) {
|
|
provider.value = emailProvider.key;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="!provider"
|
|
class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full md:w-full max-w-full md:max-w-[75%] flex-shrink-0 flex-grow-0"
|
|
>
|
|
<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">
|
|
<ChannelSelector
|
|
v-for="emailProvider in emailProviderList"
|
|
:key="emailProvider.key"
|
|
:class="{ inactive: !emailProvider.isEnabled }"
|
|
:title="emailProvider.title"
|
|
:src="emailProvider.src"
|
|
@click="() => onClick(emailProvider)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<Microsoft v-else-if="provider === 'microsoft'" />
|
|
<Google v-else-if="provider === 'google'" />
|
|
<ForwardToOption v-else-if="provider === 'other_provider'" />
|
|
</template>
|