fix: Add a check for 24 hour window before sending a message (#1084)

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

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

@@ -5,6 +5,18 @@
       :is-contact-panel-open="isContactPanelOpen"
       @contactPanelToggle="onToggleContactPanel"
     />
+    <div v-if="!currentChat.can_reply" class="messenger-policy--banner">
+      <span>
+        {{ $t('CONVERSATION.CANNOT_REPLY') }}
+        <a
+          href="https://developers.facebook.com/docs/messenger-platform/policy/policy-overview/"
+          rel="noopener noreferrer nofollow"
+          target="_blank"
+        >
+          {{ $t('CONVERSATION.24_HOURS_WINDOW') }}
+        </a>
+      </span>
+    </div>
     <ul class="conversation-panel">
       <transition name="slide-up">
         <li>
@@ -210,3 +222,19 @@ export default {
   },
 };
 </script>
+
+<style scoped lang="scss">
+.messenger-policy--banner {
+  background: var(--r-400);
+  color: var(--white);
+  font-size: var(--font-size-mini);
+  padding: var(--space-slab) var(--space-normal);
+  text-align: center;
+
+  a {
+    text-decoration: underline;
+    color: var(--white);
+    font-size: var(--font-size-mini);
+  }
+}
+</style>

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

@@ -108,7 +108,7 @@ export default {
   data() {
     return {
       message: '',
-      isPrivate: false,
+      isPrivateTabActive: false,
       isFocused: false,
       showEmojiPicker: false,
       showCannedResponsesList: false,
@@ -117,6 +117,12 @@ export default {
   },
   computed: {
     ...mapGetters({ currentChat: 'getSelectedChat' }),
+    isPrivate() {
+      if (this.currentChat.can_reply) {
+        return this.isPrivateTabActive;
+      }
+      return true;
+    },
     inboxId() {
       return this.currentChat.inbox_id;
     },
@@ -214,6 +220,13 @@ export default {
     },
   },
   watch: {
+    currentChat(conversation) {
+      if (conversation.can_reply) {
+        this.isPrivateTabActive = false;
+      } else {
+        this.isPrivateTabActive = true;
+      }
+    },
     message(updatedMessage) {
       if (this.isPrivate) {
         return;
@@ -278,11 +291,11 @@ export default {
       }, 100);
     },
     setPrivateReplyMode() {
-      this.isPrivate = true;
+      this.isPrivateTabActive = true;
       this.$refs.messageInput.focus();
     },
     setReplyMode() {
-      this.isPrivate = false;
+      this.isPrivateTabActive = false;
       this.$refs.messageInput.focus();
     },
     emojiOnClick(emoji) {
@@ -327,7 +340,10 @@ export default {
       }
       this.isUploading = true;
       this.$store
-        .dispatch('sendAttachment', [this.currentChat.id, { file: file.file }])
+        .dispatch('sendAttachment', [
+          this.currentChat.id,
+          { file: file.file, isPrivate: this.isPrivate },
+        ])
         .then(() => {
           this.isUploading = false;
           this.$emit('scrollToMessage');