enhancement: Enable reply box for whatsapp template message (#2082)

* remove 24-hours reply restriction in WhatsApp

* remove the console.logs

* move reply policy to separate constants file

* fix spelling mistake

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

@@ -1,10 +1,13 @@
 <template>
   <div class="view-box fill-height">
-    <div v-if="!currentChat.can_reply" class="banner messenger-policy--banner">
+    <div
+      v-if="!currentChat.can_reply && !isATwilioWhatsappChannel"
+      class="banner messenger-policy--banner"
+    >
       <span>
         {{ $t('CONVERSATION.CANNOT_REPLY') }}
         <a
-          href="https://developers.facebook.com/docs/messenger-platform/policy/policy-overview/"
+          :href="facebookReplyPolicy"
           rel="noopener noreferrer nofollow"
           target="_blank"
         >
@@ -12,6 +15,21 @@
         </a>
       </span>
     </div>
+    <div
+      v-if="!currentChat.can_reply && isATwilioWhatsappChannel"
+      class="banner messenger-policy--banner"
+    >
+      <span>
+        {{ $t('CONVERSATION.TWILIO_WHATSAPP_CAN_REPLY') }}
+        <a
+          :href="twilioWhatsAppReplyPolicy"
+          rel="noopener noreferrer nofollow"
+          target="_blank"
+        >
+          {{ $t('CONVERSATION.TWILIO_WHATSAPP_24_HOURS_WINDOW') }}
+        </a>
+      </span>
+    </div>
 
     <div v-if="isATweet" class="banner">
       <span v-if="!selectedTweetId">
@@ -86,20 +104,16 @@ import Message from './Message';
 import conversationMixin from '../../../mixins/conversations';
 import { getTypingUsersText } from '../../../helper/commons';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
+import { REPLY_POLICY } from 'shared/constants/links';
+import inboxMixin from 'shared/mixins/inboxMixin';
 
 export default {
   components: {
     Message,
     ReplyBox,
   },
-
+  mixins: [conversationMixin, inboxMixin],
-  mixins: [conversationMixin],
-
   props: {
-    inboxId: {
-      type: [Number, String],
-      required: true,
-    },
     isContactPanelOpen: {
       type: Boolean,
       default: false,
@@ -124,6 +138,12 @@ export default {
       getUnreadCount: 'getUnreadCount',
       loadingChatList: 'getChatListLoadingStatus',
     }),
+    inboxId() {
+      return this.currentChat.inbox_id;
+    },
+    inbox() {
+      return this.$store.getters['inboxes/getInbox'](this.inboxId);
+    },
 
     typingUsersList() {
       const userList = this.$store.getters[
@@ -191,6 +211,12 @@ export default {
       }
       return '';
     },
+    facebookReplyPolicy() {
+      return REPLY_POLICY.FACEBOOK;
+    },
+    twilioWhatsAppReplyPolicy() {
+      return REPLY_POLICY.TWILIO_WHATSAPP;
+    },
   },
 
   watch: {

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

@@ -133,7 +133,7 @@ export default {
       return !!this.uiSettings.enter_to_send_enabled;
     },
     isPrivate() {
-      if (this.currentChat.can_reply) {
+      if (this.currentChat.can_reply || this.isATwilioWhatsappChannel) {
         return this.isOnPrivateNote;
       }
       return true;
@@ -230,7 +230,7 @@ export default {
         return;
       }
 
-      if (canReply) {
+      if (canReply || this.isATwilioWhatsappChannel) {
         this.replyType = REPLY_EDITOR_MODES.REPLY;
       } else {
         this.replyType = REPLY_EDITOR_MODES.NOTE;
@@ -305,7 +305,7 @@ export default {
     setReplyMode(mode = REPLY_EDITOR_MODES.REPLY) {
       const { can_reply: canReply } = this.currentChat;
 
-      if (canReply) this.replyType = mode;
+      if (canReply || this.isATwilioWhatsappChannel) this.replyType = mode;
       if (this.showRichContentEditor) {
         return;
       }

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

@@ -88,7 +88,7 @@
         "SUBMIT_BUTTON": "Δημιουργία Κιβωτίου"
       },
       "TWILIO": {
-        "TITLE": "SMS κανάλι από το Twillio",
+        "TITLE": "SMS κανάλι από το Twilio",
         "DESC": "Ενσωματώστε το Twilio και αρχίστε να υποστηρίζετε τους πελάτες σας μέσω SMS.",
         "ACCOUNT_SID": {
           "LABEL": "SID Λογαριασμού",
@@ -116,7 +116,7 @@
         },
         "API_CALLBACK": {
           "TITLE": "URL επανάκλησης",
-          "SUBTITLE": "Πρέπει να ρυθμίσετε το callback URL στο Twillio με το URL που αναφέρεται εδώ."
+          "SUBTITLE": "Πρέπει να ρυθμίσετε το callback URL στο Twilio με το URL που αναφέρεται εδώ."
         },
         "SUBMIT_BUTTON": "Δημιουργία Καναλιού Twillio",
         "API": {

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

@@ -20,6 +20,8 @@
     "LOADING_CONVERSATIONS": "Loading Conversations",
     "CANNOT_REPLY": "You cannot reply due to",
     "24_HOURS_WINDOW": "24 hour message window restriction",
+    "TWILIO_WHATSAPP_CAN_REPLY": "You can only reply to this conversation using a template message due to",
+    "TWILIO_WHATSAPP_24_HOURS_WINDOW": "24 hour message window restriction",
     "LAST_INCOMING_TWEET": "You are replying to the last incoming tweet",
     "REPLYING_TO": "You are replying to:",
     "REMOVE_SELECTION": "Remove Selection",
@@ -112,5 +114,4 @@
       "PLACEHOLDER": "None"
     }
   }
-
 }

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

@@ -118,7 +118,7 @@
           "TITLE": "URL Callback",
           "SUBTITLE": "Anda harus mengkonfigurasi pesan URL callback di Twilio dengan URL yang disebutkan di sini."
         },
-        "SUBMIT_BUTTON": "Buat Channel Twillio",
+        "SUBMIT_BUTTON": "Buat Channel Twilio",
         "API": {
           "ERROR_MESSAGE": "Kami tidak dapat mengautentikasi kredensial Twilio, harap coba lagi"
         }

app/javascript/shared/constants/links.js

@@ -0,0 +1,6 @@
+export const REPLY_POLICY = {
+  FACEBOOK:
+    'https://developers.facebook.com/docs/messenger-platform/policy/policy-overview/',
+  TWILIO_WHATSAPP:
+    'https://www.twilio.com/docs/whatsapp/tutorial/send-whatsapp-notification-messages-templates#sending-non-template-messages-within-a-24-hour-session',
+};