Bug: Fix Facebook v7.0 API issues (#863)

* Fix v7.0 API issues

Co-authored-by: Sojan <sojan@pepalo.com>

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -208,7 +208,9 @@ export default {
     async sendMessage() {
       const isMessageEmpty = !this.message.replace(/\n/g, '').length;
       if (isMessageEmpty) return;
-
+      if (this.message.length > this.maxLength) {
+        return;
+      }
       if (!this.showCannedResponsesList) {
         try {
           await this.$store.dispatch('sendMessage', {

app/javascript/dashboard/i18n/locale/en/inboxMgmt.json

@@ -29,7 +29,13 @@
     ],
     "ADD": {
       "FB": {
-        "HELP": "PS: By signing in, we only get access to your Page's messages. Your private messages can never be accessed by Chatwoot."
+        "HELP": "PS: By signing in, we only get access to your Page's messages. Your private messages can never be accessed by Chatwoot.",
+        "CHOOSE_PAGE": "Choose Page",
+        "CHOOSE_PLACEHOLDER": "Select a page from the list",
+        "INBOX_NAME": "Inbox Name",
+        "ADD_NAME": "Add a name for your inbox",
+        "PICK_NAME": "Pick A Name Your Inbox",
+        "PICK_A_VALUE": "Pick a value"
       },
       "TWITTER": {
         "HELP": "To add your Twitter profile as a channel, you need to authenticate your Twitter Profile by clicking on 'Sign in with Twitter' "

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue

@@ -17,10 +17,7 @@
       </p>
     </div>
     <div v-else>
-      <loading-state
-        v-if="showLoader"
-        :message="emptyStateMessage"
-      ></loading-state>
+      <loading-state v-if="showLoader" :message="emptyStateMessage" />
       <form v-if="!showLoader" class="row" @submit.prevent="createChannel()">
         <div class="medium-12 columns">
           <page-header
@@ -36,7 +33,7 @@
         <div class="medium-7 columns">
           <div class="medium-12 columns">
             <div class="input-wrap" :class="{ error: $v.selectedPage.$error }">
-              Choose Page
+              {{ $t('INBOX_MGMT.ADD.FB.CHOOSE_PAGE') }}
               <multiselect
                 v-model.trim="selectedPage"
                 :close-on-select="true"
@@ -44,26 +41,26 @@
                 :options="getSelectablePages"
                 track-by="id"
                 label="name"
-                placeholder="Pick a value"
-                selected-label=""
+                :placeholder="$t('INBOX_MGMT.ADD.FB.PICK_A_VALUE')"
+                selected-label
                 @select="setPageName"
               />
               <span v-if="$v.selectedPage.$error" class="message">
-                Select a page from the list
+                {{ $t('INBOX_MGMT.ADD.FB.CHOOSE_PLACEHOLDER') }}
               </span>
             </div>
           </div>
           <div class="medium-12 columns">
             <label :class="{ error: $v.pageName.$error }">
-              Inbox Name
+              {{ $t('INBOX_MGMT.ADD.FB.INBOX_NAME') }}
               <input
                 v-model.trim="pageName"
                 type="text"
-                placeholder="Pick A Name Your Inbox"
+                :placeholder="$t('INBOX_MGMT.ADD.FB.PICK_NAME')"
                 @input="$v.pageName.$touch"
               />
               <span v-if="$v.pageName.$error" class="message">
-                Add a name for your inbox
+                {{ $t('INBOX_MGMT.ADD.FB.ADD_NAME') }}
               </span>
             </label>
           </div>
@@ -166,7 +163,7 @@ export default {
           FB.init({
             appId: window.chatwootConfig.fbAppId,
             xfbml: true,
-            version: 'v4.0',
+            version: 'v7.0',
             status: true,
           });
           window.fbSDKLoaded = true;
@@ -209,7 +206,7 @@ export default {
           }
         },
         {
-          scope: 'manage_pages,pages_messaging,pages_messaging_phone_number',
+          scope: 'pages_manage_metadata,pages_messaging',
         }
       );
     },

app/models/channel/facebook_page.rb

@@ -28,13 +28,26 @@ class Channel::FacebookPage < ApplicationRecord
 
   has_one :inbox, as: :channel, dependent: :destroy
 
+  after_create_commit :subscribe
   before_destroy :unsubscribe
 
-  private
+  def subscribe
+    # ref https://developers.facebook.com/docs/messenger-platform/reference/webhook-events
+    response = Facebook::Messenger::Subscriptions.subscribe(
+      access_token: page_access_token,
+      subscribed_fields: %w[
+        messages message_deliveries message_echoes message_reads
+      ]
+    )
+  rescue => e
+    Rails.logger.debug "Rescued: #{e.inspect}"
+    true
+  end
 
   def unsubscribe
     Facebook::Messenger::Subscriptions.unsubscribe(access_token: page_access_token)
   rescue => e
+    Rails.logger.debug "Rescued: #{e.inspect}"
     true
   end
 end

app/models/inbox.rb

@@ -41,7 +41,6 @@ class Inbox < ApplicationRecord
   has_one :agent_bot, through: :agent_bot_inbox
   has_many :webhooks, dependent: :destroy
 
-  after_create :subscribe_webhook, if: :facebook?
   after_destroy :delete_round_robin_agents
 
   def add_member(user_id)
@@ -83,16 +82,4 @@ class Inbox < ApplicationRecord
   def round_robin_key
     format(Constants::RedisKeys::ROUND_ROBIN_AGENTS, inbox_id: id)
   end
-
-  def subscribe_webhook
-    Facebook::Messenger::Subscriptions.subscribe(
-      access_token: channel.page_access_token,
-      subscribed_fields: %w[
-        messages messaging_postbacks messaging_optins message_deliveries
-        message_reads messaging_payments messaging_pre_checkouts messaging_checkout_updates
-        messaging_account_linking messaging_referrals message_echoes messaging_game_plays
-        standby messaging_handovers messaging_policy_enforcement message_reactions
-      ]
-    )
-  end
 end