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

app/controllers/dashboard_controller.rb

@@ -55,7 +55,8 @@ class DashboardController < ActionController::Base
       ENABLE_ACCOUNT_SIGNUP: GlobalConfigService.load('ENABLE_ACCOUNT_SIGNUP', 'false'),
       FB_APP_ID: GlobalConfigService.load('FB_APP_ID', ''),
       FACEBOOK_API_VERSION: 'v14.0',
-      IS_ENTERPRISE: ChatwootApp.enterprise?
+      IS_ENTERPRISE: ChatwootApp.enterprise?,
+      AZURE_APP_ID: ENV.fetch('AZURE_APP_ID', '')
     }
   end
 end

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

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

app/javascript/dashboard/components/ChannelSelector.vue

@@ -36,7 +36,7 @@ export default {
   margin: -1px;
   padding: var(--space-normal) 0;
   transition: all 0.2s ease-in;
-
+  align-items: center;
   &:hover {
     border: 1px solid var(--w-500);
     box-shadow: var(--shadow-medium);

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

@@ -53,10 +53,6 @@
           "ENABLE": "Create conversations from mentioned Tweets"
         }
       },
-      "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"
-      },
       "WEBSITE_CHANNEL": {
         "TITLE": "Website channel",
         "DESC": "Create a channel for your website and start supporting your customers via our website widget.",
@@ -348,6 +344,17 @@
       "FINISH": {
         "TITLE": "Nailed It!",
         "DESC": "You have successfully finished integrating your Facebook Page with Chatwoot. Next time a customer messages your Page, the conversation will automatically appear on your inbox.<br>We are also providing you with a widget script that you can easily add to your website. Once this is live on your website, customers can message you right from your website without the help of any external tool and the conversation will appear right here, on Chatwoot.<br>Cool, huh? Well, we sure try to be :)"
+      },
+      "EMAIL_PROVIDER": {
+        "TITLE": "Select your email provider",
+        "DESCRIPTION": "Select an email provider from the list below. If you don't see your email provider in the list, you can select the other provider option and provide the IMAP and SMTP Credentials."
+      },
+      "MICROSOFT": {
+        "TITLE": "Microsoft Email",
+        "DESCRIPTION": "Click on the Sign in with Microsoft 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.",
+        "EMAIL_PLACEHOLDER": "Enter email address",
+        "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"
       }
     },
     "DETAILS": {
@@ -674,6 +681,10 @@
       },
       "BRANDING_TEXT": "Powered by Chatwoot",
       "SCRIPT_SETTINGS": "\n      window.chatwootSettings = {options};"
+    },
+    "EMAIL_PROVIDERS": {
+      "MICROSOFT": "Microsoft",
+      "OTHER_PROVIDERS": "Other Providers"
     }
   }
 }

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">
+        <div
-          <woot-code
+          v-if="isAEmailInbox && !currentInbox.provider"
-            v-if="isAEmailInbox"
+          class="medium-6 small-offset-3"
-            lang="html"
+        >
-            :script="currentInbox.forward_to_email"
+          <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-title="$t('INBOX_MGMT.ADD.EMAIL_PROVIDER.TITLE')"
-      :header-content="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.DESC')"
+      :header-content="$t('INBOX_MGMT.ADD.EMAIL_PROVIDER.DESCRIPTION')"
     />
-    <form class="row" @submit.prevent="createChannel()">
+    <div class="row channel-list">
-      <div class="medium-8 columns">
+      <channel-selector
-        <label :class="{ error: $v.channelName.$error }">
+        v-for="emailProvider in emailProviderList"
-          {{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.LABEL') }}
+        :key="emailProvider.key"
-          <input
+        :title="emailProvider.title"
-            v-model.trim="channelName"
+        :src="emailProvider.src"
-            type="text"
+        @click="() => onClick(emailProvider.key)"
-            :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>
+  <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 ChannelSelector from 'dashboard/components/ChannelSelector.vue';
-import { required, email } from 'vuelidate/lib/validators';
-import router from '../../../../index';
 import PageHeader from '../../SettingsSubPageHeader';
 
 export default {
   components: {
+    ChannelSelector,
+    ForwardToOption,
+    Microsoft,
     PageHeader,
   },
-  mixins: [alertMixin],
   data() {
-    return {
+    return { provider: '' };
-      channelName: '',
-      email: '',
-    };
   },
   computed: {
-    ...mapGetters({
+    ...mapGetters({ globalConfig: 'globalConfig/get' }),
-      uiFlags: 'inboxes/getUIFlags',
+    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);
     },
-  validations: {
-    channelName: { required },
-    email: { required, email },
   },
   methods: {
-    async createChannel() {
+    onClick(provider) {
-      this.$v.$touch();
+      this.provider = provider;
-      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>
+
+<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>

app/javascript/shared/store/globalConfig.js

@@ -2,6 +2,7 @@ const {
   API_CHANNEL_NAME: apiChannelName,
   API_CHANNEL_THUMBNAIL: apiChannelThumbnail,
   APP_VERSION: appVersion,
+  AZURE_APP_ID: azureAppId,
   BRAND_NAME: brandName,
   CHATWOOT_INBOX_TOKEN: chatwootInboxToken,
   CSML_EDITOR_HOST: csmlEditorHost,
@@ -23,6 +24,7 @@ const state = {
   apiChannelName,
   apiChannelThumbnail,
   appVersion,
+  azureAppId,
   brandName,
   chatwootInboxToken,
   csmlEditorHost,

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

@@ -89,9 +89,10 @@ if resource.api?
   json.additional_attributes resource.channel.try(:additional_attributes)
 end
 
+json.provider resource.channel.try(:provider)
+
 ### WhatsApp Channel
 if resource.whatsapp?
-  json.provider resource.channel.try(:provider)
   json.message_templates resource.channel.try(:message_templates)
   json.provider_config resource.channel.try(:provider_config) if Current.account_user&.administrator?
 end