From 5693a91fd306cca264615acb4b39999e1a1bc860 Mon Sep 17 00:00:00 2001
From: MJRT <majinhao@outlook.com>
Date: Fri, 3 May 2024 06:05:08 +0800
Subject: [PATCH] feat: Gray out Microsoft email option when Azure App ID is
 not configured  (#9087)

Fixes #9083

Co-authored-by: Pranav <pranavrajs@gmail.com>
---
 .../dashboard/components/ChannelSelector.vue  |  4 ++--
 .../dashboard/settings/inbox/ChannelList.vue  |  5 +++-
 .../settings/inbox/channels/Email.vue         | 24 ++++++++++++++-----
 3 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/app/javascript/dashboard/components/ChannelSelector.vue b/app/javascript/dashboard/components/ChannelSelector.vue
index 33877de94..dd9513fb6 100644
--- a/app/javascript/dashboard/components/ChannelSelector.vue
+++ b/app/javascript/dashboard/components/ChannelSelector.vue
@@ -1,9 +1,9 @@
 <template>
   <button
-    class="sm:w-[50%] md:w-1/3 lg:w-1/4 bg-white dark:bg-slate-900 cursor-pointer flex flex-col transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
+    class="bg-white dark:bg-slate-900 cursor-pointer flex flex-col transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
     @click="$emit('click')"
   >
-    <img :src="src" :alt="title" class="w-[50%] my-4 mx-auto" />
+    <img :src="src" :alt="title" class="w-1/2 my-4 mx-auto" />
     <h3
       class="text-slate-800 dark:text-slate-100 text-base text-center capitalize"
     >
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
index 6a55f5889..93bff206d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
@@ -3,6 +3,7 @@
     class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
     <page-header
+      class="max-w-4xl"
       :header-title="$t('INBOX_MGMT.ADD.AUTH.TITLE')"
       :header-content="
         useInstallationName(
@@ -11,7 +12,9 @@
         )
       "
     />
-    <div class="mt-6 mx-0 flex flex-wrap">
+    <div
+      class="mt-6 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 mx-0 max-w-3xl"
+    >
       <channel-item
         v-for="channel in channelList"
         :key="channel.key"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue
index 109118374..3112b1089 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue
@@ -4,16 +4,18 @@
     class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full md:w-full max-w-full md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
     <page-header
+      class="max-w-4xl"
       :header-title="$t('INBOX_MGMT.ADD.EMAIL_PROVIDER.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.EMAIL_PROVIDER.DESCRIPTION')"
     />
-    <div class="flex flex-row flex-wrap mx-0 mt-6">
+    <div class="grid grid-cols-4 max-w-3xl mx-0 mt-6">
       <channel-selector
         v-for="emailProvider in emailProviderList"
         :key="emailProvider.key"
+        :class="{ inactive: !emailProvider.isEnabled }"
         :title="emailProvider.title"
         :src="emailProvider.src"
-        @click="() => onClick(emailProvider.key)"
+        @click="() => onClick(emailProvider)"
       />
     </div>
   </div>
@@ -38,7 +40,10 @@ export default {
     return { provider: '' };
   },
   computed: {
-    ...mapGetters({ globalConfig: 'globalConfig/get' }),
+    ...mapGetters({
+      globalConfig: 'globalConfig/get',
+      isAChatwootInstance: 'globalConfig/isAChatwootInstance',
+    }),
     emailProviderList() {
       return [
         {
@@ -53,12 +58,19 @@ export default {
           key: 'other_provider',
           src: '/assets/images/dashboard/channels/email.png',
         },
-      ].filter(provider => provider.isEnabled);
+      ].filter(provider => {
+        if (this.isAChatwootInstance) {
+          return true;
+        }
+        return provider.isEnabled;
+      });
     },
   },
   methods: {
-    onClick(provider) {
-      this.provider = provider;
+    onClick(emailProvider) {
+      if (emailProvider.isEnabled) {
+        this.provider = emailProvider.key;
+      }
     },
   },
 };