feat: add Google login flow and inbox creation (#9580)

This PR adds the following changes

1. Refactor `microsoft/callbacks_controller` to move common logic to
`oauth_callback_controller`, most of the logic is re-used for Google
2. Add UI components, `googleClient` and I18n entries for Google login
3. Add Google callback and inbox creation
4. Add a `joinUrl` utility along with specs (need to move it to utils)
5. Add `GoogleConcern`, `Google::AuthorizationsController` and
`Google::CallbacksController`

> Note: The UI is hidden for now, so we can merge this without any
hiccups, to enable it just revert the commit `05c18de`

### Preview


https://github.com/chatwoot/chatwoot/assets/18097732/1606d150-4561-49dc-838d-e0b00fe49ce3

### Linear Tickers

[CW-3370](https://linear.app/chatwoot/issue/CW-3370)
[CW-3371](https://linear.app/chatwoot/issue/CW-3371)

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/api/channel/googleClient.js

@@ -0,0 +1,14 @@
+/* global axios */
+import ApiClient from '../ApiClient';
+
+class MicrosoftClient extends ApiClient {
+  constructor() {
+    super('google', { accountScoped: true });
+  }
+
+  generateAuthorization(payload) {
+    return axios.post(`${this.url}/authorization`, payload);
+  }
+}
+
+export default new MicrosoftClient();

app/javascript/dashboard/components/ChannelSelector.vue

@@ -1,6 +1,6 @@
 <template>
   <button
-    class="bg-white dark:bg-slate-900 cursor-pointer flex flex-col transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
+    class="bg-white dark:bg-slate-900 cursor-pointer flex flex-col justify-end transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
     @click="$emit('click')"
   >
     <img :src="src" :alt="title" class="w-1/2 my-4 mx-auto" />

app/javascript/dashboard/i18n/locale/en/inboxMgmt.json

@@ -369,6 +369,14 @@
         "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": {
+        "TITLE": "Google Email",
+        "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"
       }
     },
     "DETAILS": {
@@ -736,6 +744,7 @@
     },
     "EMAIL_PROVIDERS": {
       "MICROSOFT": "Microsoft",
+      "GOOGLE": "Google",
       "OTHER_PROVIDERS": "Other Providers"
     }
   }

app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue

@@ -541,7 +541,8 @@ export default {
         this.isALineChannel ||
         this.isAPIInbox ||
         (this.isAnEmailChannel && !this.inbox.provider) ||
-        (this.isAnEmailChannel && this.inbox.provider === 'microsoft') ||
+        this.isAMicrosoftInbox ||
+        this.isAGoogleInbox ||
         this.isAWhatsAppChannel ||
         this.isAWebWidgetInbox
       ) {

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue

@@ -8,7 +8,7 @@
       :header-title="$t('INBOX_MGMT.ADD.EMAIL_PROVIDER.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.EMAIL_PROVIDER.DESCRIPTION')"
     />
-    <div class="grid grid-cols-4 max-w-3xl mx-0 mt-6">
+    <div class="grid max-w-3xl grid-cols-4 mx-0 mt-6">
       <channel-selector
         v-for="emailProvider in emailProviderList"
         :key="emailProvider.key"

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

@@ -0,0 +1,55 @@
+<script setup>
+import { ref } 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;
+  }
+}
+</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>
+</template>

app/javascript/shared/mixins/inboxMixin.js

@@ -47,6 +47,9 @@ export default {
     isAMicrosoftInbox() {
       return this.isAnEmailChannel && this.inbox.provider === 'microsoft';
     },
+    isAGoogleInbox() {
+      return this.isAnEmailChannel && this.inbox.provider === 'google';
+    },
     isAPIInbox() {
       return this.channelType === INBOX_TYPES.API;
     },