From 6c682a6869b5b634bf73f594a8255d5393920dcf Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 30 May 2024 09:41:04 +0530
Subject: [PATCH] feat: add reauthorization banner for Facebook (#9553)

---
 .../SecondaryChildNavItem.vue                 |  6 ++---
 app/javascript/dashboard/helper/inbox.js      |  3 ++-
 .../dashboard/i18n/locale/en/settings.json    |  2 +-
 .../dashboard/settings/inbox/Settings.vue     |  7 +++--
 .../settings/inbox/facebook/Reauthorize.vue   | 26 +++++++------------
 app/javascript/shared/mixins/inboxMixin.js    |  3 +++
 app/views/api/v1/models/_inbox.json.jbuilder  |  2 +-
 7 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
index 8ea982955..24ad62353 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
@@ -65,11 +65,11 @@
         </div>
         <span
           v-if="warningIcon"
-          class="inline-flex rounded-sm mr-1 bg-slate-100"
+          class="inline-flex mr-1 bg-red-50 dark:bg-red-900 p-0.5 rounded-sm"
         >
           <fluent-icon
-            v-tooltip.top-end="$t('SIDEBAR.FACEBOOK_REAUTHORIZE')"
-            class="text-xxs"
+            v-tooltip.top-end="$t('SIDEBAR.REAUTHORIZE')"
+            class="text-xxs text-red-500 dark:text-red-300"
             :icon="warningIcon"
             size="12"
           />
diff --git a/app/javascript/dashboard/helper/inbox.js b/app/javascript/dashboard/helper/inbox.js
index 1174fd45a..71c615c4b 100644
--- a/app/javascript/dashboard/helper/inbox.js
+++ b/app/javascript/dashboard/helper/inbox.js
@@ -87,7 +87,8 @@ export const getInboxClassByType = (type, phoneNumber) => {
 };
 
 export const getInboxWarningIconClass = (type, reauthorizationRequired) => {
-  if (type === INBOX_TYPES.FB && reauthorizationRequired) {
+  const allowedInboxTypes = [INBOX_TYPES.FB, INBOX_TYPES.EMAIL];
+  if (allowedInboxTypes.includes(type) && reauthorizationRequired) {
     return 'warning';
   }
   return '';
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index 1f4d44e22..445b7244e 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -274,7 +274,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Overview",
-    "FACEBOOK_REAUTHORIZE": "Your Facebook connection has expired, please reconnect your Facebook page to continue services",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
       "ALL_ARTICLES": "All Articles",
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
index be4d94cb5..8ec9c6df1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -22,6 +22,7 @@
     </setting-intro-banner>
 
     <microsoft-reauthorize v-if="microsoftUnauthorized" :inbox="inbox" />
+    <facebook-reauthorize v-if="facebookUnauthorized" :inbox="inbox" />
 
     <div v-if="selectedTabKey === 'inbox_settings'" class="mx-8">
       <settings-section
@@ -399,7 +400,6 @@
           @click="updateInbox"
         />
       </settings-section>
-      <facebook-reauthorize v-if="isAFacebookInbox" :inbox-id="inbox.id" />
     </div>
 
     <div v-if="selectedTabKey === 'collaborators'" class="mx-8">
@@ -619,7 +619,10 @@ export default {
       return false;
     },
     microsoftUnauthorized() {
-      return this.inbox.microsoft_reauthorization;
+      return this.isAMicrosoftInbox && this.inbox.reauthorization_required;
+    },
+    facebookUnauthorized() {
+      return this.isAFacebookInbox && this.inbox.reauthorization_required;
     },
   },
   watch: {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue
index e94f8748c..d90f88d3b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue
@@ -1,38 +1,32 @@
 <template>
-  <settings-section
-    :title="$t('INBOX_MGMT.FACEBOOK_REAUTHORIZE.TITLE')"
-    :sub-title="$t('INBOX_MGMT.FACEBOOK_REAUTHORIZE.SUBTITLE')"
-  >
-    <a class="fb--login" href="#" @click="tryFBlogin">
-      <img
-        src="~dashboard/assets/images/channels/facebook_login.png"
-        alt="Facebook-logo"
-      />
-    </a>
-  </settings-section>
+  <inbox-reconnection-required class="mx-8 mt-5" @reauthorize="tryFBlogin" />
 </template>
 
 <script>
 /* global FB */
-import SettingsSection from '../../../../../components/SettingsSection.vue';
+import InboxReconnectionRequired from '../components/InboxReconnectionRequired';
 import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
   components: {
-    SettingsSection,
+    InboxReconnectionRequired,
   },
   mixins: [alertMixin],
   props: {
-    inboxId: {
-      type: Number,
+    inbox: {
+      type: Object,
       required: true,
     },
   },
+  computed: {
+    inboxId() {
+      return this.inbox.id;
+    },
+  },
   mounted() {
     this.initFB();
     this.loadFBsdk();
   },
-
   methods: {
     initFB() {
       if (window.fbSDKLoaded === undefined) {
diff --git a/app/javascript/shared/mixins/inboxMixin.js b/app/javascript/shared/mixins/inboxMixin.js
index 8266a5d37..26a5b1d1c 100644
--- a/app/javascript/shared/mixins/inboxMixin.js
+++ b/app/javascript/shared/mixins/inboxMixin.js
@@ -44,6 +44,9 @@ export default {
     whatsAppAPIProvider() {
       return this.inbox.provider || '';
     },
+    isAMicrosoftInbox() {
+      return this.isAnEmailChannel && this.inbox.provider === 'microsoft';
+    },
     isAPIInbox() {
       return this.channelType === INBOX_TYPES.API;
     },
diff --git a/app/views/api/v1/models/_inbox.json.jbuilder b/app/views/api/v1/models/_inbox.json.jbuilder
index a9956c7e6..335498e5b 100644
--- a/app/views/api/v1/models/_inbox.json.jbuilder
+++ b/app/views/api/v1/models/_inbox.json.jbuilder
@@ -74,7 +74,7 @@ if resource.email?
     json.imap_enable_ssl resource.channel.try(:imap_enable_ssl)
 
     if resource.channel.try(:microsoft?)
-      json.microsoft_reauthorization resource.channel.try(:provider_config).empty? || resource.channel.try(:reauthorization_required?)
+      json.reauthorization_required resource.channel.try(:provider_config).empty? || resource.channel.try(:reauthorization_required?)
     end
   end