feat: new re-authorization flow for Microsoft (#9510)

This PR adds a cleaner re-authorization flow to Microsoft. This PR has
the following changes

1. Use `reauthorization_required` value for Microsoft Channel
2. Refactor `InboxReconnectionRequired` to reuse the `banner` component
3. Refactor `microsoft/Reauthorize.vue` to reuse
`InboxReconnectionRequired` component
4. Update `reauthorizable.rb` to update cache keys if the model has an
inbox
5. Update `microsoft/callbacks_controller.rb` to handle the
reauthorization case with a redirect to the inbox settings page if the
inbox already exists at the time of authorization.

## How Has This Been Tested?

- [x] Local Instance
- [ ] Staging Instance
- [x] Unit tests

## Pending Tasks

- [ ] ~Success Toast~ will do this in a follow-up PR with the screen

## Demo

The following video shows the whole process of creation and
re-authorization of the Microsoft channel


https://www.loom.com/share/e5cd9bd4439c4741b0dcfe66d67f88b3?sid=100f3642-43e4-46b3-8123-88a5dd9d8509

---------

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

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

@@ -21,10 +21,7 @@
       </woot-tabs>
     </setting-intro-banner>
 
-    <inbox-reconnection-required
-      v-if="isReconnectionRequired"
-      class="mx-8 mt-5"
-    />
+    <microsoft-reauthorize v-if="microsoftUnauthorized" :inbox="inbox" />
 
     <div v-if="selectedTabKey === 'inbox_settings'" class="mx-8">
       <settings-section
@@ -440,7 +437,7 @@ 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 InboxReconnectionRequired from './components/InboxReconnectionRequired';
+import MicrosoftReauthorize from './channels/microsoft/Reauthorize.vue';
 import WidgetBuilder from './WidgetBuilder.vue';
 import BotConfiguration from './components/BotConfiguration.vue';
 import { FEATURE_FLAGS } from '../../../../featureFlags';
@@ -459,7 +456,7 @@ export default {
     WeeklyAvailability,
     WidgetBuilder,
     SenderNameExamplePreview,
-    InboxReconnectionRequired,
+    MicrosoftReauthorize,
   },
   mixins: [alertMixin, configMixin, inboxMixin],
   data() {
@@ -621,8 +618,8 @@ export default {
         return true;
       return false;
     },
-    isReconnectionRequired() {
-      return false;
+    microsoftUnauthorized() {
+      return this.inbox.microsoft_reauthorization;
     },
   },
   watch: {

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

@@ -1,63 +1,44 @@
-<template>
-  <div class="mx-8">
-    <settings-section
-      :title="$t('INBOX_MGMT.MICROSOFT.TITLE')"
-      :sub-title="$t('INBOX_MGMT.MICROSOFT.SUBTITLE')"
-    >
-      <div class="mb-6">
-        <form @submit.prevent="requestAuthorization">
-          <woot-submit-button
-            icon="brand-twitter"
-            button-text="Sign in with Microsoft"
-            type="submit"
-            :loading="isRequestingAuthorization"
-          />
-        </form>
-      </div>
-    </settings-section>
-  </div>
-</template>
-<script>
-import alertMixin from 'shared/mixins/alertMixin';
-import microsoftClient from '../../../../../../api/channel/microsoftClient';
-import SettingsSection from '../../../../../../components/SettingsSection.vue';
+<script setup>
+import { ref } from 'vue';
+import InboxReconnectionRequired from '../../components/InboxReconnectionRequired';
+import microsoftClient from 'dashboard/api/channel/microsoftClient';
 
-export default {
-  components: {
-    SettingsSection,
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useAlert } from 'dashboard/composables';
+
+const { t } = useI18n();
+
+const props = defineProps({
+  inbox: {
+    type: Object,
+    default: () => ({}),
   },
-  mixins: [alertMixin],
-  props: {
-    inbox: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  data() {
-    return { isRequestingAuthorization: false };
-  },
-  methods: {
-    async requestAuthorization() {
-      try {
-        this.isRequestingAuthorization = true;
-        const response = await microsoftClient.generateAuthorization({
-          email: this.inbox.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>
-<style lang="scss" scoped>
-.smtp-details-wrap {
-  margin-bottom: var(--space-medium);
+});
+
+const isRequestingAuthorization = ref(false);
+
+async function requestAuthorization() {
+  try {
+    isRequestingAuthorization.value = true;
+    const response = await microsoftClient.generateAuthorization({
+      email: props.inbox.email,
+    });
+
+    const {
+      data: { url },
+    } = response;
+    window.location.href = url;
+  } catch (error) {
+    useAlert(t('INBOX_MGMT.ADD.MICROSOFT.ERROR_MESSAGE'));
+  } finally {
+    isRequestingAuthorization.value = false;
+  }
 }
-</style>
+</script>
+
+<template>
+  <inbox-reconnection-required
+    class="mx-8 mt-5"
+    @reauthorize="requestAuthorization"
+  />
+</template>

app/javascript/dashboard/routes/dashboard/settings/inbox/components/InboxReconnectionRequired.vue

@@ -1,19 +1,14 @@
 <script setup>
-defineProps({
-  actionUrl: {
-    type: String,
-    required: true,
-  },
-});
+import Banner from 'dashboard/components/ui/Banner.vue';
 </script>
 
 <template>
-  <div
-    class="flex items-center gap-2 px-4 py-3 text-sm text-white bg-red-500 rounded-md dark:bg-red-800/30 dark:text-red-50 min-h-10"
-  >
-    <fluent-icon icon="error-circle" class="text-white dark:text-red-50" />
-    <slot>
-      <span v-html="$t('INBOX_MGMT.RECONNECTION_REQUIRED', { actionUrl })" />
-    </slot>
-  </div>
+  <banner
+    color-scheme="alert"
+    class="justify-start rounded-md"
+    :banner-message="$t('INBOX_MGMT.RECONNECTION_REQUIRED')"
+    :action-button-label="$t('INBOX_MGMT.CLICK_TO_RECONNECT')"
+    has-action-button
+    @click="$emit('reauthorize')"
+  />
 </template>

app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue

@@ -104,10 +104,6 @@
     </div>
     <imap-settings :inbox="inbox" />
     <smtp-settings v-if="inbox.imap_enabled" :inbox="inbox" />
-    <microsoft-reauthorize
-      v-if="inbox.microsoft_reauthorization"
-      :inbox="inbox"
-    />
   </div>
   <div v-else-if="isAWhatsAppChannel && !isATwilioChannel">
     <div v-if="inbox.provider_config" class="mx-8">
@@ -130,7 +126,7 @@
         "
       >
         <div
-          class="whatsapp-settings--content items-center flex flex-1 justify-between mt-2"
+          class="flex items-center justify-between flex-1 mt-2 whatsapp-settings--content"
         >
           <woot-input
             v-model.trim="whatsAppInboxAPIKey"
@@ -160,7 +156,6 @@ import inboxMixin from 'shared/mixins/inboxMixin';
 import SettingsSection from '../../../../../components/SettingsSection.vue';
 import ImapSettings from '../ImapSettings.vue';
 import SmtpSettings from '../SmtpSettings.vue';
-import MicrosoftReauthorize from '../channels/microsoft/Reauthorize.vue';
 import { required } from 'vuelidate/lib/validators';
 
 export default {
@@ -168,7 +163,6 @@ export default {
     SettingsSection,
     ImapSettings,
     SmtpSettings,
-    MicrosoftReauthorize,
   },
   mixins: [inboxMixin, alertMixin],
   props: {