Microsoft Re-authorization flow (#6268)

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

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

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

@@ -0,0 +1,63 @@
+<template>
+  <div class="settings--content">
+    <settings-section
+      :title="$t('INBOX_MGMT.MICROSOFT.TITLE')"
+      :sub-title="$t('INBOX_MGMT.MICROSOFT.SUBTITLE')"
+    >
+      <div class="smtp-details-wrap">
+        <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';
+
+export default {
+  components: {
+    SettingsSection,
+  },
+  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);
+}
+</style>

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

@@ -90,6 +90,10 @@
     </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="settings--content">
@@ -109,12 +113,14 @@ import inboxMixin from 'shared/mixins/inboxMixin';
 import SettingsSection from '../../../../../components/SettingsSection';
 import ImapSettings from '../ImapSettings';
 import SmtpSettings from '../SmtpSettings';
+import MicrosoftReauthorize from '../channels/microsoft/Reauthorize';
 
 export default {
   components: {
     SettingsSection,
     ImapSettings,
     SmtpSettings,
+    MicrosoftReauthorize,
   },
   mixins: [inboxMixin, alertMixin],
   props: {