Merge branch 'develop' into fix/CW-3385

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"
       }
     },

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>

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>

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>

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>