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

feat: Enable gmail channel (#9622)

Browse Source 
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
This commit is contained in:
Shivam Mishra
2024-06-13 13:01:05 +05:30
committed by GitHub
parent 5abf0e960a
commit 08516e6c43
5 changed files with 164 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
View File

@@ -367,7 +367,6 @@
"DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.", "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
"EMAIL_PLACEHOLDER": "Enter email address", "EMAIL_PLACEHOLDER": "Enter email address",
"SIGN_IN": "Sign in with Microsoft", "SIGN_IN": "Sign in with Microsoft",
"HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
"ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again" "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
}, },
"GOOGLE": { "GOOGLE": {
@@ -375,7 +374,6 @@
"DESCRIPTION": "Click on the Sign in with Google button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.", "DESCRIPTION": "Click on the Sign in with Google button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
"SIGN_IN": "Sign in with Google", "SIGN_IN": "Sign in with Google",
"EMAIL_PLACEHOLDER": "Enter email address", "EMAIL_PLACEHOLDER": "Enter email address",
"HELP": "To add your Google account as a channel, you need to authenticate your Google account by clicking on 'Sign in with Google' ",
"ERROR_MESSAGE": "There was an error connecting to Google, please try again" "ERROR_MESSAGE": "There was an error connecting to Google, please try again"
} }
}, },

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

@@ -20,58 +20,59 @@
</div> </div>
</div> </div>
<microsoft v-else-if="provider === 'microsoft'" /> <microsoft v-else-if="provider === 'microsoft'" />
<google v-else-if="provider === 'google'" />
<forward-to-option v-else-if="provider === 'other_provider'" /> <forward-to-option v-else-if="provider === 'other_provider'" />
</template> </template>
<script> <script setup>
import { ref, computed } from 'vue';
import ForwardToOption from './emailChannels/ForwardToOption.vue'; import ForwardToOption from './emailChannels/ForwardToOption.vue';
import Microsoft from './emailChannels/Microsoft.vue'; import Microsoft from './emailChannels/Microsoft.vue';
import { mapGetters } from 'vuex'; import Google from './emailChannels/Google.vue';
import ChannelSelector from 'dashboard/components/ChannelSelector.vue'; import ChannelSelector from 'dashboard/components/ChannelSelector.vue';
import PageHeader from '../../SettingsSubPageHeader.vue'; import PageHeader from '../../SettingsSubPageHeader.vue';
export default { import { useStoreGetters } from 'dashboard/composables/store';
components: { import { useI18n } from 'dashboard/composables/useI18n';
ChannelSelector,
ForwardToOption, const provider = ref('');
Microsoft,
PageHeader, const getters = useStoreGetters();
}, const { t } = useI18n();
data() {
return { provider: '' }; const globalConfig = getters['globalConfig/get'];
}, const isAChatwootInstance = getters['globalConfig/isAChatwootInstance'];
computed: {
...mapGetters({ const emailProviderList = computed(() => {
globalConfig: 'globalConfig/get',
isAChatwootInstance: 'globalConfig/isAChatwootInstance',
}),
emailProviderList() {
return [ return [
{ {
title: this.$t('INBOX_MGMT.EMAIL_PROVIDERS.MICROSOFT'), title: t('INBOX_MGMT.EMAIL_PROVIDERS.MICROSOFT'),
isEnabled: !!this.globalConfig.azureAppId, isEnabled: !!globalConfig.value.azureAppId,
key: 'microsoft', key: 'microsoft',
src: '/assets/images/dashboard/channels/microsoft.png', src: '/assets/images/dashboard/channels/microsoft.png',
}, },
{ {
title: this.$t('INBOX_MGMT.EMAIL_PROVIDERS.OTHER_PROVIDERS'), 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, isEnabled: true,
key: 'other_provider', key: 'other_provider',
src: '/assets/images/dashboard/channels/email.png', src: '/assets/images/dashboard/channels/email.png',
}, },
].filter(provider => { ].filter(providerConfig => {
if (this.isAChatwootInstance) { if (isAChatwootInstance.value) {
return true; return true;
} }
return provider.isEnabled; return providerConfig.isEnabled;
}); });
}, });
},
methods: { function onClick(emailProvider) {
onClick(emailProvider) {
if (emailProvider.isEnabled) { if (emailProvider.isEnabled) {
this.provider = emailProvider.key; this.provider = emailProvider.key;
} }
}, }
},
};
</script> </script>

59
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Google.vue
View File

@@ -1,55 +1,18 @@
<script setup> <script setup>
import { ref } from 'vue'; import OAuthChannel from './OAuthChannel.vue';
import { defineComponent } from 'vue';
import { useAlert } from 'dashboard/composables'; defineComponent({
import { useI18n } from 'dashboard/composables/useI18n'; name: 'GoogleOAuthChannel',
import googleClient from 'dashboard/api/channel/googleClient';
import SettingsSubPageHeader from '../../../SettingsSubPageHeader.vue';
const { t } = useI18n();
const isRequestingAuthorization = ref(false);
const email = ref('');
async function requestAuthorization() {
try {
isRequestingAuthorization.value = true;
const response = await googleClient.generateAuthorization({
email: email.value,
}); });
const {
data: { url },
} = response;
window.location.href = url;
} catch (error) {
useAlert(t('INBOX_MGMT.ADD.GOOGLE.ERROR_MESSAGE'));
} finally {
isRequestingAuthorization.value = false;
}
}
</script> </script>
<template> <template>
<div <OAuthChannel
class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0" provider="google"
> :title="$t('INBOX_MGMT.ADD.GOOGLE.TITLE')"
<settings-sub-page-header :description="$t('INBOX_MGMT.ADD.GOOGLE.DESCRIPTION')"
:header-title="$t('INBOX_MGMT.ADD.GOOGLE.TITLE')" :input-placeholder="$t('INBOX_MGMT.ADD.GOOGLE.EMAIL_PLACEHOLDER')"
:header-content="$t('INBOX_MGMT.ADD.GOOGLE.DESCRIPTION')" :submit-button-text="$t('INBOX_MGMT.ADD.GOOGLE.SIGN_IN')"
:error-message="$t('INBOX_MGMT.ADD.GOOGLE.ERROR_MESSAGE')"
/> />
<form class="mt-6" @submit.prevent="requestAuthorization">
<woot-input
v-model="email"
type="email"
:placeholder="$t('INBOX_MGMT.ADD.GOOGLE.EMAIL_PLACEHOLDER')"
/>
<woot-submit-button
icon="brand-twitter"
:button-text="$t('INBOX_MGMT.ADD.GOOGLE.SIGN_IN')"
type="submit"
:loading="isRequestingAuthorization"
/>
</form>
</div>
</template> </template>

82
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Microsoft.vue
View File

@@ -1,71 +1,19 @@
<template> <script setup>
<div import OAuthChannel from './OAuthChannel.vue';
class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0" import { defineComponent } from 'vue';
>
<settings-sub-page-header
:header-title="$t('INBOX_MGMT.ADD.MICROSOFT.TITLE')"
:header-content="$t('INBOX_MGMT.ADD.MICROSOFT.DESCRIPTION')"
/>
<form
class="microsoft--sign-in-form"
@submit.prevent="requestAuthorization"
>
<woot-input
v-model.trim="email"
type="text"
:placeholder="$t('INBOX_MGMT.ADD.MICROSOFT.EMAIL_PLACEHOLDER')"
@blur="$v.email.$touch"
/>
<woot-submit-button
icon="brand-twitter"
type="submit"
:button-text="$t('INBOX_MGMT.ADD.MICROSOFT.SIGN_IN')"
:loading="isRequestingAuthorization"
/>
</form>
</div>
</template>
<script>
import alertMixin from 'shared/mixins/alertMixin';
import microsoftClient from 'dashboard/api/channel/microsoftClient';
import SettingsSubPageHeader from '../../../SettingsSubPageHeader.vue';
import { required, email } from 'vuelidate/lib/validators';
export default { defineComponent({
components: { SettingsSubPageHeader }, name: 'MicrosoftOAuthChannel',
mixins: [alertMixin],
data() {
return { email: '', isRequestingAuthorization: false };
},
validations: {
email: { required, email },
},
methods: {
async requestAuthorization() {
try {
this.$v.$touch();
if (this.$v.$invalid) return;
this.isRequestingAuthorization = true;
const response = await microsoftClient.generateAuthorization({
email: this.email,
}); });
const {
data: { url },
} = response;
window.location.href = url;
} catch (error) {
this.showAlert(this.$t('INBOX_MGMT.ADD.MICROSOFT.ERROR_MESSAGE'));
} finally {
this.isRequestingAuthorization = false;
}
},
},
};
</script> </script>
<style scoped> <template>
.microsoft--sign-in-form { <OAuthChannel
@apply mt-6; provider="microsoft"
} :title="$t('INBOX_MGMT.ADD.MICROSOFT.TITLE')"
</style> :description="$t('INBOX_MGMT.ADD.MICROSOFT.DESCRIPTION')"
:input-placeholder="$t('INBOX_MGMT.ADD.MICROSOFT.EMAIL_PLACEHOLDER')"
:submit-button-text="$t('INBOX_MGMT.ADD.MICROSOFT.SIGN_IN')"
:error-message="$t('INBOX_MGMT.ADD.MICROSOFT.ERROR_MESSAGE')"
/>
</template>

89
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/OAuthChannel.vue Normal file
View File

@@ -0,0 +1,89 @@
<script setup>
import { ref, computed } from 'vue';
import microsoftClient from 'dashboard/api/channel/microsoftClient';
import googleClient from 'dashboard/api/channel/googleClient';
import SettingsSubPageHeader from '../../../SettingsSubPageHeader.vue';
import { useAlert } from 'dashboard/composables';
const props = defineProps({
provider: {
type: String,
required: true,
validate: value => ['microsoft', 'google'].includes(value),
},
title: {
type: String,
required: true,
},
description: {
type: String,
required: true,
},
submitButtonText: {
type: String,
required: true,
},
errorMessage: {
type: String,
required: true,
},
inputPlaceholder: {
type: String,
required: true,
},
});
const isRequestingAuthorization = ref(false);
const email = ref('');
const client = computed(() => {
if (props.provider === 'microsoft') {
return microsoftClient;
}
return googleClient;
});
async function requestAuthorization() {
try {
isRequestingAuthorization.value = true;
const response = await client.value.generateAuthorization({
email: email.value,
});
const {
data: { url },
} = response;
window.location.href = url;
} catch (error) {
useAlert(props.errorMessage);
} finally {
isRequestingAuthorization.value = false;
}
}
</script>
<template>
<div
class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
>
<settings-sub-page-header
:header-title="title"
:header-content="description"
/>
<form class="mt-6" @submit.prevent="requestAuthorization">
<woot-input
v-model="email"
type="email"
:placeholder="inputPlaceholder"
/>
<woot-submit-button
icon="brand-twitter"
type="submit"
:button-text="submitButtonText"
:loading="isRequestingAuthorization"
/>
</form>
</div>
</template>