fix: Facebook reauthorization mailer (#4695)

app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue

@@ -95,6 +95,7 @@ export default {
             ),
             type: inbox.channel_type,
             phoneNumber: inbox.phone_number,
+            reauthorizationRequired: inbox.reauthorization_required,
           }))
           .sort((a, b) =>
             a.label.toLowerCase() > b.label.toLowerCase() ? 1 : -1

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue

@@ -30,6 +30,14 @@
         <span v-if="count" class="badge" :class="{ secondary: !isActive }">
           {{ count }}
         </span>
+        <span v-if="warningIcon" class="badge--icon">
+          <fluent-icon
+            v-tooltip.top-end="$t('SIDEBAR.FACEBOOK_REAUTHORIZE')"
+            class="inbox-icon"
+            :icon="warningIcon"
+            size="12"
+          />
+        </span>
       </a>
     </li>
   </router-link>
@@ -57,6 +65,10 @@ export default {
       type: String,
       default: '',
     },
+    warningIcon: {
+      type: String,
+      default: '',
+    },
     count: {
       type: String,
       default: '',

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue

@@ -34,6 +34,7 @@
         :label-color="child.color"
         :should-truncate="child.truncateLabel"
         :icon="computedInboxClass(child)"
+        :warning-icon="computedInboxErrorClass(child)"
       />
       <router-link
         v-if="showItem(menuItem)"
@@ -63,7 +64,10 @@
 import { mapGetters } from 'vuex';
 
 import adminMixin from '../../../mixins/isAdmin';
-import { getInboxClassByType } from 'dashboard/helper/inbox';
+import {
+  getInboxClassByType,
+  getInboxWarningIconClass,
+} from 'dashboard/helper/inbox';
 
 import SecondaryChildNavItem from './SecondaryChildNavItem';
 
@@ -136,6 +140,15 @@ export default {
       const classByType = getInboxClassByType(type, phoneNumber);
       return classByType;
     },
+    computedInboxErrorClass(child) {
+      const { type, reauthorizationRequired } = child;
+      if (!type) return '';
+      const warningClass = getInboxWarningIconClass(
+        type,
+        reauthorizationRequired
+      );
+      return warningClass;
+    },
     newLinkClick(e, navigate) {
       if (this.menuItem.newLinkRouteName) {
         navigate(e);