LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: Sojan Jose <sojan@pepalo.com>
This commit is contained in:
Pranav Raj S
2020-07-25 22:54:45 +05:30
committed by GitHub
parent 12ee7e5d82
commit 0f2d3418f9
26 changed files with 292 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/javascript/dashboard/api/inbox/message.js
View File

@@ -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`,

2
app/javascript/dashboard/assets/scss/_variables.scss
View File

@@ -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;

4
app/javascript/dashboard/assets/scss/app.scss
View File

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

28
app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
View File

@@ -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>

24
app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
View File

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

2
app/javascript/dashboard/i18n/locale/en/conversation.json
View File

@@ -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",

7
app/javascript/dashboard/store/modules/conversations/actions.js
View File

@@ -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) {

10
app/javascript/dashboard/store/modules/conversations/index.js
View File

@@ -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 {

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

@@ -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]]);
});
});
});

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

@@ -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);
});
});
});

4
app/javascript/dashboard/store/mutation-types.js
View File

@@ -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',

69
app/javascript/shared/assets/stylesheets/colors.scss Normal file
View File

@@ -0,0 +1,69 @@
:root {
--white: #fff;
--w-50: #E3F2FF;
--w-100: #BBDDFF;
--w-200: #8FC9FF;
--w-300: #61B3FF;
--w-400: #3FA3FF;
--w-500: #1F93FF;
--w-600: #2284F0;
--w-700: #2272DC;
--w-800: #2161CA;
--w-900: #1F41AB;
--g-50: #E6F8E6;
--g-100: #C4EEC2;
--g-200: #9DE29A;
--g-300: #6FD86F;
--g-400: #44CE4B;
--g-500: #00C41D;
--g-600: #00B412;
--g-700: #00A200;
--g-800: #009000;
--g-900: #007000;
--y-50: #FFFEE8;
--y-100: #FFFAC5;
--y-200: #FFF69E;
--y-300: #FEF176;
--y-400: #FCEC56;
--y-500: #F9E736;
--y-600: #FFDD3A;
--y-700: #FFC532;
--y-800: #FDAD2A;
--y-900: #F9841B;
--s-50: #E7EEFB;
--s-100: #C8D6E6;
--s-200: #ABBACE;
--s-300: #8C9EB6;
--s-400: #7489A4;
--s-500: #5D7592;
--s-600: #506781;
--s-700: #40546B;
--s-800: #314155;
--s-900: #1F2D3D;
--b-50:#F8F9FE;
--b-100: #F2F3F7;
--b-200: #E9EAEF;
--b-300: #DADBDF;
--b-400: #B6B7BB;
--b-500: #96979C;
--b-600: #6E6F73;
--b-700: #5A5B5F;
--b-800: #3C3D40;
--b-900: #1B1C1F;
--r-50: #FFEBEE;
--r-100: #FFCCD1;
--r-200: #F69898;
--r-300: #EF6F6F;
--r-400: #F94B4A;
--r-500: #FF382D;
--r-600: #F02B2D;
--r-700: #DE1E27;
--r-800: #D11320;
--r-900: #C30011;
}

13
app/javascript/shared/assets/stylesheets/font-size.scss Normal file
View File

@@ -0,0 +1,13 @@
:root {
--font-size-nano: 0.8rem;
--font-size-micro: 1.0rem;
--font-size-mini: 1.2rem;
--font-size-small: 1.4rem;
--font-size-default: 1.6rem;
--font-size-medium: 1.8rem;
--font-size-large: 2.2rem;
--font-size-big: 2.4rem;
--font-size-bigger: 3.0rem;
--font-size-mega: 3.4rem;
--font-size-giga: 4.0rem;
}

16
app/javascript/shared/assets/stylesheets/spacing.scss Normal file
View File

@@ -0,0 +1,16 @@
:root {
// spaces
--space-zero: 0;
--space-micro: 0.2rem;
--space-smaller: 0.4rem;
--space-small: 0.8rem;
--space-one: 1rem;
--space-slab: 1.2rem;
--space-normal: 1.6rem;
--space-two: 2.0rem;
--space-medium: 2.4rem;
--space-large: 3.2rem;
--space-larger: 4.8rem;
--space-jumbo: 6.4rem;
--space-mega: 10.0rem;
}