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],
-
+  mixins: [conversationMixin, inboxMixin],
   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;
       }