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

* Fix v7.0 API issues

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

Gemfile.lock

@@ -96,16 +96,16 @@ GEM
     autoprefixer-rails (9.7.6)
       execjs
     aws-eventstream (1.1.0)
-    aws-partitions (1.310.0)
+    aws-partitions (1.315.0)
-    aws-sdk-core (3.94.1)
+    aws-sdk-core (3.95.0)
       aws-eventstream (~> 1, >= 1.0.2)
       aws-partitions (~> 1, >= 1.239.0)
       aws-sigv4 (~> 1.1)
       jmespath (~> 1.0)
-    aws-sdk-kms (1.30.0)
+    aws-sdk-kms (1.31.0)
       aws-sdk-core (~> 3, >= 3.71.0)
       aws-sigv4 (~> 1.1)
-    aws-sdk-s3 (1.63.1)
+    aws-sdk-s3 (1.64.0)
       aws-sdk-core (~> 3, >= 3.83.0)
       aws-sdk-kms (~> 1)
       aws-sigv4 (~> 1.1)
@@ -126,8 +126,8 @@ GEM
     bindex (0.8.1)
     bootsnap (1.4.6)
       msgpack (~> 1.0)
-    brakeman (4.8.1)
+    brakeman (4.8.2)
-    browser (4.0.0)
+    browser (4.1.0)
     builder (3.2.4)
     bullet (6.1.0)
       activesupport (>= 3.0.0)
@@ -194,7 +194,7 @@ GEM
     foreman (0.87.1)
     globalid (0.4.2)
       activesupport (>= 4.2.0)
-    google-api-client (0.38.0)
+    google-api-client (0.39.3)
       addressable (~> 2.5, >= 2.5.1)
       googleauth (~> 0.9)
       httpclient (>= 2.8.1, < 3.0)
@@ -208,7 +208,7 @@ GEM
     google-cloud-env (1.3.1)
       faraday (>= 0.17.3, < 2.0)
     google-cloud-errors (1.0.0)
-    google-cloud-storage (1.26.0)
+    google-cloud-storage (1.26.1)
       addressable (~> 2.5)
       digest-crc (~> 0.4)
       google-api-client (~> 0.33)
@@ -239,11 +239,10 @@ GEM
       concurrent-ruby (~> 1.0)
     ice_nine (0.11.2)
     inflecto (0.0.2)
-    jaro_winkler (1.5.4)
     jbuilder (2.10.0)
       activesupport (>= 5.0.0)
     jmespath (1.4.0)
-    jquery-rails (4.3.5)
+    jquery-rails (4.4.0)
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
@@ -284,7 +283,7 @@ GEM
     method_source (1.0.0)
     mime-types (3.3.1)
       mime-types-data (~> 3.2015)
-    mime-types-data (3.2020.0425)
+    mime-types-data (3.2020.0512)
     mimemagic (0.3.5)
     mini_magick (4.10.1)
     mini_mime (1.0.2)
@@ -312,7 +311,7 @@ GEM
       method_source (~> 1.0)
     pry-rails (0.3.9)
       pry (>= 0.10.4)
-    public_suffix (4.0.4)
+    public_suffix (4.0.5)
     puma (4.3.3)
       nio4r (~> 2.0)
     pundit (2.1.0)
@@ -383,7 +382,7 @@ GEM
     rexml (3.2.4)
     rspec-core (3.9.2)
       rspec-support (~> 3.9.3)
-    rspec-expectations (3.9.1)
+    rspec-expectations (3.9.2)
       diff-lcs (>= 1.2.0, < 2.0)
       rspec-support (~> 3.9.0)
     rspec-mocks (3.9.1)
@@ -398,8 +397,7 @@ GEM
       rspec-mocks (~> 3.9)
       rspec-support (~> 3.9)
     rspec-support (3.9.3)
-    rubocop (0.82.0)
+    rubocop (0.83.0)
-      jaro_winkler (~> 1.5.1)
       parallel (~> 1.10)
       parser (>= 2.7.0.1)
       rainbow (>= 2.2.2, < 4.0)
@@ -471,7 +469,7 @@ GEM
       faraday
       inflecto
       virtus
-    telephone_number (1.4.6)
+    telephone_number (1.4.7)
     thor (0.20.3)
     thread_safe (0.3.6)
     tilt (2.0.10)

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
+      <loading-state v-if="showLoader" :message="emptyStateMessage" />
-        v-if="showLoader"
-        :message="emptyStateMessage"
-      ></loading-state>
       <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"
+                :placeholder="$t('INBOX_MGMT.ADD.FB.PICK_A_VALUE')"
-                selected-label=""
+                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