feat: Instagram reauthorization (#11221)

This PR is part of https://github.com/chatwoot/chatwoot/pull/11054 to
make the review cycle easier.

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

@@ -7,6 +7,7 @@ import SettingIntroBanner from 'dashboard/components/widgets/SettingIntroBanner.
 import SettingsSection from '../../../../components/SettingsSection.vue';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import FacebookReauthorize from './facebook/Reauthorize.vue';
+import InstagramReauthorize from './channels/instagram/Reauthorize.vue';
 import MicrosoftReauthorize from './channels/microsoft/Reauthorize.vue';
 import GoogleReauthorize from './channels/google/Reauthorize.vue';
 import PreChatFormSettings from './PreChatForm/Settings.vue';
@@ -36,6 +37,7 @@ export default {
     MicrosoftReauthorize,
     GoogleReauthorize,
     NextButton,
+    InstagramReauthorize,
   },
   mixins: [inboxMixin],
   setup() {
@@ -202,6 +204,9 @@ export default {
         return true;
       return false;
     },
+    instagramUnauthorized() {
+      return this.isAInstagramChannel && this.inbox.reauthorization_required;
+    },
     microsoftUnauthorized() {
       return this.isAMicrosoftInbox && this.inbox.reauthorization_required;
     },
@@ -383,10 +388,11 @@ export default {
         />
       </woot-tabs>
     </SettingIntroBanner>
-    <section class="max-w-6xl mx-auto w-full">
+    <section class="w-full max-w-6xl mx-auto">
       <MicrosoftReauthorize v-if="microsoftUnauthorized" :inbox="inbox" />
       <FacebookReauthorize v-if="facebookUnauthorized" :inbox="inbox" />
       <GoogleReauthorize v-if="googleUnauthorized" :inbox="inbox" />
+      <InstagramReauthorize v-if="instagramUnauthorized" :inbox="inbox" />
       <div v-if="selectedTabKey === 'inbox_settings'" class="mx-8">
         <SettingsSection
           :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_TITLE')"

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/instagram/Reauthorize.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { ref } from 'vue';
+import InboxReconnectionRequired from '../../components/InboxReconnectionRequired.vue';
+
+import instagramClient from 'dashboard/api/channel/instagramClient';
+
+import { useI18n } from 'vue-i18n';
+import { useAlert } from 'dashboard/composables';
+
+const { t } = useI18n();
+
+const isRequestingAuthorization = ref(false);
+
+async function requestAuthorization() {
+  try {
+    isRequestingAuthorization.value = true;
+    const response = await instagramClient.generateAuthorization();
+
+    const {
+      data: { url },
+    } = response;
+
+    window.location.href = url;
+  } catch (error) {
+    useAlert(t('INBOX_MGMT.ADD.INSTAGRAM.ERROR_AUTH'));
+  } finally {
+    isRequestingAuthorization.value = false;
+  }
+}
+</script>
+
+<template>
+  <InboxReconnectionRequired
+    class="mx-8 mt-5"
+    @reauthorize="requestAuthorization"
+  />
+</template>

app/javascript/dashboard/routes/dashboard/settings/inbox/components/ChannelName.vue

@@ -28,6 +28,7 @@ const i18nMap = {
   'Channel::Telegram': 'TELEGRAM',
   'Channel::Line': 'LINE',
   'Channel::Api': 'API',
+  'Channel::Instagram': 'INSTAGRAM',
 };
 
 const twilioChannelName = () => {