From 08516e6c43338ee5d91f3f19b376a98b7e7689f4 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 13 Jun 2024 13:01:05 +0530
Subject: [PATCH] feat: Enable gmail channel (#9622)

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
---
 .../dashboard/i18n/locale/en/inboxMgmt.json   |  2 -
 .../settings/inbox/channels/Email.vue         | 91 ++++++++++---------
 .../inbox/channels/emailChannels/Google.vue   | 63 +++----------
 .../channels/emailChannels/Microsoft.vue      | 84 ++++-------------
 .../channels/emailChannels/OAuthChannel.vue   | 89 ++++++++++++++++++
 5 files changed, 164 insertions(+), 165 deletions(-)
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/OAuthChannel.vue

diff --git a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
index 38ebfb122..82e6e7c2b 100644
--- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
@@ -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.",
         "EMAIL_PLACEHOLDER": "Enter email address",
         "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"
       },
       "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.",
         "SIGN_IN": "Sign in with Google",
         "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"
       }
     },
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue
index 34a5d2070..375e5aefb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue
@@ -20,58 +20,59 @@
     </div>
   </div>
   <microsoft v-else-if="provider === 'microsoft'" />
+  <google v-else-if="provider === 'google'" />
   <forward-to-option v-else-if="provider === 'other_provider'" />
 </template>
-<script>
+<script setup>
+import { ref, computed } from 'vue';
 import ForwardToOption from './emailChannels/ForwardToOption.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 PageHeader from '../../SettingsSubPageHeader.vue';
 
-export default {
-  components: {
-    ChannelSelector,
-    ForwardToOption,
-    Microsoft,
-    PageHeader,
-  },
-  data() {
-    return { provider: '' };
-  },
-  computed: {
-    ...mapGetters({
-      globalConfig: 'globalConfig/get',
-      isAChatwootInstance: 'globalConfig/isAChatwootInstance',
-    }),
-    emailProviderList() {
-      return [
-        {
-          title: this.$t('INBOX_MGMT.EMAIL_PROVIDERS.MICROSOFT'),
-          isEnabled: !!this.globalConfig.azureAppId,
-          key: 'microsoft',
-          src: '/assets/images/dashboard/channels/microsoft.png',
-        },
-        {
-          title: this.$t('INBOX_MGMT.EMAIL_PROVIDERS.OTHER_PROVIDERS'),
-          isEnabled: true,
-          key: 'other_provider',
-          src: '/assets/images/dashboard/channels/email.png',
-        },
-      ].filter(provider => {
-        if (this.isAChatwootInstance) {
-          return true;
-        }
-        return provider.isEnabled;
-      });
+import { useStoreGetters } from 'dashboard/composables/store';
+import { useI18n } from 'dashboard/composables/useI18n';
+
+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',
     },
-  },
-  methods: {
-    onClick(emailProvider) {
-      if (emailProvider.isEnabled) {
-        this.provider = emailProvider.key;
-      }
+    {
+      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) {
+    this.provider = emailProvider.key;
+  }
+}
 </script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Google.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Google.vue
index 9fb3fe978..b0588bdd6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Google.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Google.vue
@@ -1,55 +1,18 @@
 <script setup>
-import { ref } from 'vue';
+import OAuthChannel from './OAuthChannel.vue';
+import { defineComponent } from 'vue';
 
-import { useAlert } from 'dashboard/composables';
-import { useI18n } from 'dashboard/composables/useI18n';
-
-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;
-  }
-}
+defineComponent({
+  name: 'GoogleOAuthChannel',
+});
 </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="$t('INBOX_MGMT.ADD.GOOGLE.TITLE')"
-      :header-content="$t('INBOX_MGMT.ADD.GOOGLE.DESCRIPTION')"
-    />
-    <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>
+  <OAuthChannel
+    provider="google"
+    :title="$t('INBOX_MGMT.ADD.GOOGLE.TITLE')"
+    :description="$t('INBOX_MGMT.ADD.GOOGLE.DESCRIPTION')"
+    :input-placeholder="$t('INBOX_MGMT.ADD.GOOGLE.EMAIL_PLACEHOLDER')"
+    :submit-button-text="$t('INBOX_MGMT.ADD.GOOGLE.SIGN_IN')"
+    :error-message="$t('INBOX_MGMT.ADD.GOOGLE.ERROR_MESSAGE')"
+  />
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Microsoft.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Microsoft.vue
index e3b1f032e..ee0b29360 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Microsoft.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Microsoft.vue
@@ -1,71 +1,19 @@
-<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="$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';
+<script setup>
+import OAuthChannel from './OAuthChannel.vue';
+import { defineComponent } from 'vue';
 
-export default {
-  components: { SettingsSubPageHeader },
-  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;
-      }
-    },
-  },
-};
+defineComponent({
+  name: 'MicrosoftOAuthChannel',
+});
 </script>
 
-<style scoped>
-.microsoft--sign-in-form {
-  @apply mt-6;
-}
-</style>
+<template>
+  <OAuthChannel
+    provider="microsoft"
+    :title="$t('INBOX_MGMT.ADD.MICROSOFT.TITLE')"
+    :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>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/OAuthChannel.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/OAuthChannel.vue
new file mode 100644
index 000000000..b6ccef365
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/OAuthChannel.vue
@@ -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>