From 3f0d96c24dcc60f7e60e63360aca2098d9ae7a93 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Fri, 22 Sep 2023 16:41:04 +0530
Subject: [PATCH] chore: Add better error messages for Facebook unauthorized
 (#7936)

---
 .../dashboard/i18n/locale/en/inboxMgmt.json   |  2 ++
 .../settings/inbox/channels/Facebook.vue      | 31 ++++++++++++++++---
 app/services/instagram/message_text.rb        |  1 +
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
index 99ac944a8..74eff2033 100644
--- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
@@ -371,6 +371,8 @@
     "DETAILS": {
       "LOADING_FB": "Authenticating you with Facebook...",
       "ERROR_FB_AUTH": "Something went wrong, Please refresh page...",
+      "ERROR_FB_UNAUTHORIZED": "You're not authorized to perform this action. ",
+      "ERROR_FB_UNAUTHORIZED_HELP": "Please ensure you have access to the Facebook page with full control. You can read more about Facebook roles <a href=\" https://www.facebook.com/help/187316341316631\">here</a>.",
       "CREATING_CHANNEL": "Creating your Inbox...",
       "TITLE": "Configure Inbox Details",
       "DESC": ""
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
index 47f865e2d..6f55c3801 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
@@ -17,9 +17,16 @@
       </p>
     </div>
     <div v-else>
-      <loading-state v-if="showLoader" :message="emptyStateMessage" />
+      <div v-if="hasError" class="max-w-lg mx-auto text-center">
+        <h5>{{ errorStateMessage }}</h5>
+        <p
+          v-if="errorStateDescription"
+          v-dompurify-html="errorStateDescription"
+        />
+      </div>
+      <loading-state v-else-if="showLoader" :message="emptyStateMessage" />
       <form
-        v-if="!showLoader"
+        v-else
         class="mx-0 flex flex-wrap"
         @submit.prevent="createChannel()"
       >
@@ -99,6 +106,7 @@ export default {
   data() {
     return {
       isCreating: false,
+      hasError: false,
       omniauth_token: '',
       user_access_token: '',
       channel: 'facebook',
@@ -106,6 +114,8 @@ export default {
       pageName: '',
       pageList: [],
       emptyStateMessage: this.$t('INBOX_MGMT.DETAILS.LOADING_FB'),
+      errorStateMessage: '',
+      errorStateDescription: '',
       hasLoginStarted: false,
     };
   },
@@ -194,19 +204,30 @@ export default {
     tryFBlogin() {
       FB.login(
         response => {
+          this.hasError = false;
           if (response.status === 'connected') {
             this.fetchPages(response.authResponse.accessToken);
           } else if (response.status === 'not_authorized') {
+            // eslint-disable-next-line no-console
+            console.error('FACEBOOK AUTH ERROR', response);
+            this.hasError = true;
             // The person is logged into Facebook, but not your app.
-            this.emptyStateMessage = this.$t(
-              'INBOX_MGMT.DETAILS.ERROR_FB_AUTH'
+            this.errorStateMessage = this.$t(
+              'INBOX_MGMT.DETAILS.ERROR_FB_UNAUTHORIZED'
+            );
+            this.errorStateDescription = this.$t(
+              'INBOX_MGMT.DETAILS.ERROR_FB_UNAUTHORIZED_HELP'
             );
           } else {
+            // eslint-disable-next-line no-console
+            console.error('FACEBOOK AUTH ERROR', response);
+            this.hasError = true;
             // The person is not logged into Facebook, so we're not sure if
             // they are logged into this app or not.
-            this.emptyStateMessage = this.$t(
+            this.errorStateMessage = this.$t(
               'INBOX_MGMT.DETAILS.ERROR_FB_AUTH'
             );
+            this.errorStateDescription = '';
           }
         },
         {
diff --git a/app/services/instagram/message_text.rb b/app/services/instagram/message_text.rb
index 143f6c7f0..22114feef 100644
--- a/app/services/instagram/message_text.rb
+++ b/app/services/instagram/message_text.rb
@@ -44,6 +44,7 @@ class Instagram::MessageText < Instagram::WebhooksBaseService
       @inbox.channel.authorization_error!
       ChatwootExceptionTracker.new(e, account: @inbox.account).capture_exception
     rescue StandardError, Koala::Facebook::ClientError => e
+      Rails.logger.warn("[FacebookUserFetchClientError]: #{e.message}")
       ChatwootExceptionTracker.new(e, account: @inbox.account).capture_exception
     end