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

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

app/javascript/dashboard/api/inbox/message.js

@@ -20,9 +20,10 @@ class MessageApi extends ApiClient {
     });
   }
 
-  sendAttachment([conversationId, { file }]) {
+  sendAttachment([conversationId, { file, isPrivate = false }]) {
     const formData = new FormData();
     formData.append('attachments[]', file, file.name);
+    formData.append('private', isPrivate);
     return axios({
       method: 'post',
       url: `${this.url}/${conversationId}/messages`,

app/javascript/dashboard/assets/scss/_variables.scss

@@ -46,8 +46,8 @@ $color-gray: #6e6f73;
 $color-light-gray: #999a9b;
 $color-border: #e0e6ed;
 $color-border-light: #f0f4f5;
-$color-background: #f4f6fb;
 $color-border-dark: #cad0d4;
+$color-background: #f4f6fb;
 $color-background-light: #f9fafc;
 $color-white: #fff;
 $color-body: #3c4858;

app/javascript/dashboard/assets/scss/app.scss

@@ -1,5 +1,7 @@
 @import 'shared/assets/fonts/inter';
-
+@import 'shared/assets/stylesheets/colors';
+@import 'shared/assets/stylesheets/spacing';
+@import 'shared/assets/stylesheets/font-size';
 @import 'variables';
 
 @import '~spinkit/scss/spinners/7-three-bounce';

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

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

@@ -9,6 +9,8 @@
     "CLICK_HERE": "Click here",
     "LOADING_INBOXES": "Loading inboxes",
     "LOADING_CONVERSATIONS": "Loading Conversations",
+    "CANNOT_REPLY": "You cannot reply due to",
+    "24_HOURS_WINDOW": "24 hour message window restriction",
     "DOWNLOAD": "Download",
     "HEADER": {
       "RESOLVE_ACTION": "Resolve",

app/javascript/dashboard/store/modules/conversations/actions.js

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import * as types from '../../mutation-types';
 import ConversationApi from '../../../api/inbox/conversation';
 import MessageApi from '../../../api/inbox/message';
+import { MESSAGE_TYPE } from 'widget/helpers/constants';
 
 // actions
 const actions = {
@@ -136,6 +137,12 @@ const actions = {
 
   addMessage({ commit }, message) {
     commit(types.default.ADD_MESSAGE, message);
+    if (message.message_type === MESSAGE_TYPE.INCOMING) {
+      commit(types.default.SET_CONVERSATION_CAN_REPLY, {
+        conversationId: message.conversation_id,
+        canReply: true,
+      });
+    }
   },
 
   updateMessage({ commit }, message) {

app/javascript/dashboard/store/modules/conversations/index.js

@@ -160,6 +160,16 @@ export const mutations = {
   [types.default.SET_ACTIVE_INBOX](_state, inboxId) {
     _state.currentInbox = inboxId ? parseInt(inboxId, 10) : null;
   },
+
+  [types.default.SET_CONVERSATION_CAN_REPLY](
+    _state,
+    { conversationId, canReply }
+  ) {
+    const [chat] = _state.allConversations.filter(c => c.id === conversationId);
+    if (chat) {
+      Vue.set(chat, 'can_reply', canReply);
+    }
+  },
 };
 
 export default {

app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js

@@ -127,4 +127,30 @@ describe('#actions', () => {
       ]);
     });
   });
+  describe('#addMessage', () => {
+    it('sends correct mutations if message is incoming', () => {
+      const message = {
+        id: 1,
+        message_type: 0,
+        conversation_id: 1,
+      };
+      actions.addMessage({ commit }, message);
+      expect(commit.mock.calls).toEqual([
+        [types.default.ADD_MESSAGE, message],
+        [
+          types.default.SET_CONVERSATION_CAN_REPLY,
+          { conversationId: 1, canReply: true },
+        ],
+      ]);
+    });
+    it('sends correct mutations if message is not an incoming message', () => {
+      const message = {
+        id: 1,
+        message_type: 1,
+        conversation_id: 1,
+      };
+      actions.addMessage({ commit }, message);
+      expect(commit.mock.calls).toEqual([[types.default.ADD_MESSAGE, message]]);
+    });
+  });
 });

app/javascript/dashboard/store/modules/specs/conversations/mutations.spec.js

@@ -43,4 +43,15 @@ describe('#mutations', () => {
       expect(state.selectedChatId).toEqual(1);
     });
   });
+
+  describe('#SET_CONVERSATION_CAN_REPLY', () => {
+    it('set canReply flag', () => {
+      const state = { allConversations: [{ id: 1, can_reply: false }] };
+      mutations[types.SET_CONVERSATION_CAN_REPLY](state, {
+        conversationId: 1,
+        canReply: true,
+      });
+      expect(state.allConversations[0].can_reply).toEqual(true);
+    });
+  });
 });

app/javascript/dashboard/store/mutation-types.js

@@ -4,6 +4,7 @@ export default {
   SET_CURRENT_USER: 'SET_CURRENT_USER',
   SET_CURRENT_ACCOUNT_ID: 'SET_CURRENT_ACCOUNT_ID',
   SET_CURRENT_USER_AVAILABILITY: 'SET_CURRENT_USER_AVAILABILITY',
+
   // Chat List
   RECEIVE_CHAT_LIST: 'RECEIVE_CHAT_LIST',
   SET_ALL_CONVERSATION: 'SET_ALL_CONVERSATION',
@@ -17,7 +18,6 @@ export default {
   UPDATE_ASSIGNEE: 'UPDATE_ASSIGNEE',
   UPDATE_CONVERSATION_CONTACT: 'UPDATE_CONVERSATION_CONTACT',
 
-  // Active chat
   SET_CURRENT_CHAT_WINDOW: 'SET_CURRENT_CHAT_WINDOW',
   CLEAR_CURRENT_CHAT_WINDOW: 'CLEAR_CURRENT_CHAT_WINDOW',
   CLEAR_ALL_MESSAGES: 'CLEAR_ALL_MESSAGES',
@@ -33,6 +33,8 @@ export default {
   SET_PREVIOUS_CONVERSATIONS: 'SET_PREVIOUS_CONVERSATIONS',
   SET_ACTIVE_INBOX: 'SET_ACTIVE_INBOX',
 
+  SET_CONVERSATION_CAN_REPLY: 'SET_CONVERSATION_CAN_REPLY',
+
   // Inboxes
   SET_INBOXES_UI_FLAG: 'SET_INBOXES_UI_FLAG',
   SET_INBOXES: 'SET_INBOXES',