feat: Add the UI flow for Microsoft Oauth (#6243)

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

@@ -50,12 +50,11 @@
             :script="currentInbox.callback_webhook_url"
           />
         </div>
-        <div class="medium-6 small-offset-3">
-          <woot-code
-            v-if="isAEmailInbox"
-            lang="html"
-            :script="currentInbox.forward_to_email"
-          />
+        <div
+          v-if="isAEmailInbox && !currentInbox.provider"
+          class="medium-6 small-offset-3"
+        >
+          <woot-code lang="html" :script="currentInbox.forward_to_email" />
         </div>
         <div class="footer">
           <router-link
@@ -140,7 +139,7 @@ export default {
         )}`;
       }
 
-      if (this.isAEmailInbox) {
+      if (this.isAEmailInbox && !this.currentInbox.provider) {
         return this.$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.FINISH_MESSAGE');
       }
 

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

@@ -470,7 +470,7 @@ export default {
         this.isATwilioChannel ||
         this.isALineChannel ||
         this.isAPIInbox ||
-        this.isAnEmailChannel ||
+        (this.isAnEmailChannel && !this.inbox.provider) ||
         this.isAWhatsAppChannel ||
         this.isAWebWidgetInbox
       ) {

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

@@ -1,111 +1,71 @@
 <template>
-  <div class="wizard-body small-9 columns">
+  <div
+    v-if="!provider"
+    class="wizard-body small-12 medium-9 columns height-auto"
+  >
     <page-header
-      :header-title="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.TITLE')"
-      :header-content="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.DESC')"
+      :header-title="$t('INBOX_MGMT.ADD.EMAIL_PROVIDER.TITLE')"
+      :header-content="$t('INBOX_MGMT.ADD.EMAIL_PROVIDER.DESCRIPTION')"
     />
-    <form class="row" @submit.prevent="createChannel()">
-      <div class="medium-8 columns">
-        <label :class="{ error: $v.channelName.$error }">
-          {{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.LABEL') }}
-          <input
-            v-model.trim="channelName"
-            type="text"
-            :placeholder="
-              $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
-            "
-            @blur="$v.channelName.$touch"
-          />
-          <span v-if="$v.channelName.$error" class="message">{{
-            $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.ERROR')
-          }}</span>
-        </label>
-      </div>
-
-      <div class="medium-8 columns">
-        <label :class="{ error: $v.email.$error }">
-          {{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.LABEL') }}
-          <input
-            v-model.trim="email"
-            type="text"
-            :placeholder="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.PLACEHOLDER')"
-            @blur="$v.email.$touch"
-          />
-        </label>
-        <p class="help-text">
-          {{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.SUBTITLE') }}
-        </p>
-      </div>
-
-      <div class="medium-12 columns">
-        <woot-submit-button
-          :loading="uiFlags.isCreating"
-          :button-text="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.SUBMIT_BUTTON')"
-        />
-      </div>
-    </form>
+    <div class="row channel-list">
+      <channel-selector
+        v-for="emailProvider in emailProviderList"
+        :key="emailProvider.key"
+        :title="emailProvider.title"
+        :src="emailProvider.src"
+        @click="() => onClick(emailProvider.key)"
+      />
+    </div>
   </div>
+  <microsoft v-else-if="provider === 'microsoft'" />
+  <forward-to-option v-else-if="provider === 'other_provider'" />
 </template>
-
 <script>
+import ForwardToOption from './emailChannels/ForwardToOption';
+import Microsoft from './emailChannels/Microsoft';
 import { mapGetters } from 'vuex';
-import alertMixin from 'shared/mixins/alertMixin';
-import { required, email } from 'vuelidate/lib/validators';
-import router from '../../../../index';
+import ChannelSelector from 'dashboard/components/ChannelSelector.vue';
 import PageHeader from '../../SettingsSubPageHeader';
 
 export default {
   components: {
+    ChannelSelector,
+    ForwardToOption,
+    Microsoft,
     PageHeader,
   },
-  mixins: [alertMixin],
   data() {
-    return {
-      channelName: '',
-      email: '',
-    };
+    return { provider: '' };
   },
   computed: {
-    ...mapGetters({
-      uiFlags: 'inboxes/getUIFlags',
-    }),
-  },
-  validations: {
-    channelName: { required },
-    email: { required, email },
+    ...mapGetters({ globalConfig: 'globalConfig/get' }),
+    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 => provider.isEnabled);
+    },
   },
   methods: {
-    async createChannel() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
-        return;
-      }
-
-      try {
-        const emailChannel = await this.$store.dispatch(
-          'inboxes/createChannel',
-          {
-            name: this.channelName,
-            channel: {
-              type: 'email',
-              email: this.email,
-            },
-          }
-        );
-
-        router.replace({
-          name: 'settings_inboxes_add_agents',
-          params: {
-            page: 'new',
-            inbox_id: emailChannel.id,
-          },
-        });
-      } catch (error) {
-        this.showAlert(
-          this.$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.API.ERROR_MESSAGE')
-        );
-      }
+    onClick(provider) {
+      this.provider = provider;
     },
   },
 };
 </script>
+
+<style scoped>
+.channel-list {
+  margin-top: var(--space-medium);
+}
+</style>

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

@@ -0,0 +1,111 @@
+<template>
+  <div class="wizard-body small-9 columns">
+    <page-header
+      :header-title="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.TITLE')"
+      :header-content="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.DESC')"
+    />
+    <form class="row" @submit.prevent="createChannel()">
+      <div class="medium-8 columns">
+        <label :class="{ error: $v.channelName.$error }">
+          {{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.LABEL') }}
+          <input
+            v-model.trim="channelName"
+            type="text"
+            :placeholder="
+              $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
+            "
+            @blur="$v.channelName.$touch"
+          />
+          <span v-if="$v.channelName.$error" class="message">{{
+            $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.ERROR')
+          }}</span>
+        </label>
+      </div>
+
+      <div class="medium-8 columns">
+        <label :class="{ error: $v.email.$error }">
+          {{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.LABEL') }}
+          <input
+            v-model.trim="email"
+            type="text"
+            :placeholder="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.PLACEHOLDER')"
+            @blur="$v.email.$touch"
+          />
+        </label>
+        <p class="help-text">
+          {{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.SUBTITLE') }}
+        </p>
+      </div>
+
+      <div class="medium-12 columns">
+        <woot-submit-button
+          :loading="uiFlags.isCreating"
+          :button-text="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.SUBMIT_BUTTON')"
+        />
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import alertMixin from 'shared/mixins/alertMixin';
+import { required, email } from 'vuelidate/lib/validators';
+import router from '../../../../../index';
+import PageHeader from '../../../SettingsSubPageHeader';
+
+export default {
+  components: {
+    PageHeader,
+  },
+  mixins: [alertMixin],
+  data() {
+    return {
+      channelName: '',
+      email: '',
+    };
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'inboxes/getUIFlags',
+    }),
+  },
+  validations: {
+    channelName: { required },
+    email: { required, email },
+  },
+  methods: {
+    async createChannel() {
+      this.$v.$touch();
+      if (this.$v.$invalid) {
+        return;
+      }
+
+      try {
+        const emailChannel = await this.$store.dispatch(
+          'inboxes/createChannel',
+          {
+            name: this.channelName,
+            channel: {
+              type: 'email',
+              email: this.email,
+            },
+          }
+        );
+
+        router.replace({
+          name: 'settings_inboxes_add_agents',
+          params: {
+            page: 'new',
+            inbox_id: emailChannel.id,
+          },
+        });
+      } catch (error) {
+        this.showAlert(
+          this.$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.API.ERROR_MESSAGE')
+        );
+      }
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,69 @@
+<template>
+  <div class="wizard-body columns content-box small-9">
+    <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"
+        button-text="Sign in with Microsoft"
+        type="submit"
+        :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';
+
+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;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.microsoft--sign-in-form {
+  margin-top: var(--space-medium);
+}
+</style>