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',
         }
       );
     },