feat: let users re auth legacy google inboxes (#10179)

This PR allows migration of legacy GMail inbox users to new OAuth based
inbox

## How to test?

1. Create an inbox from the seed data and set it's IMAP address to
`imap.gmail.com` from the UI
2. Open `rails console` and run the following

   ```
   inbox = Inbox.find(100) # use your inbox id here
   channel = inbox.channel
   channel.update(email: 'hello@chatwoot.com')
   channel.prompt_reauthorization!
   ```
3. This will show the prompt on the UI. Once you click on Reauthorize,
it should open Google Auth. Reauthroize with the same email address as
used in the inbox and it should start working as usual

### Setting up ENV

```sh
GOOGLE_OAUTH_CLIENT_ID=<some-hash>.apps.googleusercontent.com
GOOGLE_OAUTH_CLIENT_SECRET=<client-secret>
GOOGLE_OAUTH_CALLBACK_URL="http://localhost:3000/omniauth/google_oauth2/callback"
```

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

@@ -7,12 +7,13 @@ import SettingIntroBanner from 'dashboard/components/widgets/SettingIntroBanner.
 import SettingsSection from '../../../../components/SettingsSection.vue';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import FacebookReauthorize from './facebook/Reauthorize.vue';
+import MicrosoftReauthorize from './channels/microsoft/Reauthorize.vue';
+import GoogleReauthorize from './channels/google/Reauthorize.vue';
 import PreChatFormSettings from './PreChatForm/Settings.vue';
 import WeeklyAvailability from './components/WeeklyAvailability.vue';
 import GreetingsEditor from 'shared/components/GreetingsEditor.vue';
 import ConfigurationPage from './settingsPage/ConfigurationPage.vue';
 import CollaboratorsPage from './settingsPage/CollaboratorsPage.vue';
-import MicrosoftReauthorize from './channels/microsoft/Reauthorize.vue';
 import WidgetBuilder from './WidgetBuilder.vue';
 import BotConfiguration from './components/BotConfiguration.vue';
 import { FEATURE_FLAGS } from '../../../../featureFlags';
@@ -32,6 +33,7 @@ export default {
     WidgetBuilder,
     SenderNameExamplePreview,
     MicrosoftReauthorize,
+    GoogleReauthorize,
   },
   mixins: [inboxMixin],
   setup() {
@@ -203,6 +205,16 @@ export default {
     facebookUnauthorized() {
       return this.isAFacebookInbox && this.inbox.reauthorization_required;
     },
+    googleUnauthorized() {
+      const isLegacyInbox = ['imap.gmail.com', 'imap.google.com'].includes(
+        this.inbox.imap_address
+      );
+
+      return (
+        (this.isAGoogleInbox || isLegacyInbox) &&
+        this.inbox.reauthorization_required
+      );
+    },
   },
   watch: {
     $route(to) {
@@ -367,9 +379,9 @@ export default {
         />
       </woot-tabs>
     </SettingIntroBanner>
-
     <MicrosoftReauthorize v-if="microsoftUnauthorized" :inbox="inbox" />
     <FacebookReauthorize v-if="facebookUnauthorized" :inbox="inbox" />
+    <GoogleReauthorize v-if="googleUnauthorized" :inbox="inbox" />
 
     <div v-if="selectedTabKey === 'inbox_settings'" class="mx-8">
       <SettingsSection

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/google/Reauthorize.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { ref } from 'vue';
+import InboxReconnectionRequired from '../../components/InboxReconnectionRequired';
+import googleClient from 'dashboard/api/channel/googleClient';
+
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useAlert } from 'dashboard/composables';
+
+const props = defineProps({
+  inbox: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const { t } = useI18n();
+
+const isRequestingAuthorization = ref(false);
+
+async function requestAuthorization() {
+  try {
+    isRequestingAuthorization.value = true;
+    const response = await googleClient.generateAuthorization({
+      email: props.inbox.email,
+    });
+
+    const {
+      data: { url },
+    } = response;
+    window.location.href = url;
+  } catch (error) {
+    useAlert(t('INBOX_MGMT.ADD.GOOGLE.ERROR_MESSAGE'));
+  } finally {
+    isRequestingAuthorization.value = false;
+  }
+}
+</script>
+
+<template>
+  <InboxReconnectionRequired
+    class="mx-8 mt-5"
+    @reauthorize="requestAuthorization"
+  />
+</template>

app/views/api/v1/models/_inbox.json.jbuilder

@@ -72,10 +72,8 @@ if resource.email?
     json.imap_port resource.channel.try(:imap_port)
     json.imap_enabled resource.channel.try(:imap_enabled)
     json.imap_enable_ssl resource.channel.try(:imap_enable_ssl)
-
+    # show this even for regular imap channels, to allow transitioning to OAuth
-    if resource.channel.try(:microsoft?) || resource.channel.try(:google?)
+    json.reauthorization_required resource.channel.try(:provider_config).empty? || resource.channel.try(:reauthorization_required?)
-      json.reauthorization_required resource.channel.try(:provider_config).empty? || resource.channel.try(:reauthorization_required?)
-    end
   end
 
   ## SMTP