From 5e5f34bedc67f26b624a7ee24cd986be57381d0b Mon Sep 17 00:00:00 2001 From: Pranav Raj S Date: Sat, 1 Aug 2020 20:56:47 +0530 Subject: [PATCH] chore: Add an indicator for incoming emails (#1112) --- .../scss/widgets/_conversation-view.scss | 67 ----------- .../widgets/conversation/Message.vue | 44 ++++--- .../widgets/conversation/bubble/Actions.vue | 111 ++++++++++++++++++ .../widgets/conversation/bubble/Audio.vue | 41 ------- .../widgets/conversation/bubble/File.vue | 10 +- .../widgets/conversation/bubble/Image.vue | 21 ++-- .../widgets/conversation/bubble/Map.vue | 36 ------ .../widgets/conversation/bubble/Text.vue | 16 ++- .../dashboard/i18n/locale/en/chatlist.json | 3 +- .../shared/constants/contentType.js | 3 + .../shared/mixins/contentTypeMixin.js | 9 ++ .../mixins/specs/contentTypeMixin.spec.js | 32 +++++ .../messages/index.json.jbuilder | 1 + package.json | 1 - yarn.lock | 31 ----- 15 files changed, 207 insertions(+), 219 deletions(-) create mode 100644 app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue delete mode 100644 app/javascript/dashboard/components/widgets/conversation/bubble/Audio.vue delete mode 100644 app/javascript/dashboard/components/widgets/conversation/bubble/Map.vue create mode 100644 app/javascript/shared/constants/contentType.js create mode 100644 app/javascript/shared/mixins/contentTypeMixin.js create mode 100644 app/javascript/shared/mixins/specs/contentTypeMixin.spec.js diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss index 8c615a016..257ad16d7 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss @@ -8,21 +8,9 @@ font-weight: $font-weight-normal; position: relative; - .icon { - bottom: $space-smaller; - position: absolute; - right: $space-small; - } - .message-text__wrap { position: relative; - .time { - color: $color-primary-light; - display: block; - font-size: $font-size-micro; - line-height: 1.8; - } .link { color: $color-white; @@ -37,24 +25,10 @@ } } - .audio { - .time { - margin-top: -$space-two; - } - } - .image { cursor: pointer; position: relative; - .time { - bottom: $space-smaller; - color: $color-white; - position: absolute; - right: $space-small; - white-space: nowrap; - } - .modal-container { text-align: center; } @@ -74,30 +48,6 @@ width: 100%; } } - - .map { - @include flex; - flex-direction: column; - text-align: right; - - img { - @include padding($space-small); - max-height: 30rem; - max-width: 20rem; - } - - .time { - @include padding($space-small); - margin-left: -$space-smaller; - margin-top: -$space-two; - white-space: nowrap; - } - - .locname { - font-weight: $font-weight-medium; - padding: $space-smaller; - } - } } .conversations-sidebar { @@ -257,14 +207,6 @@ color: $color-body; margin-right: auto; - .time { - color: $color-light-gray; - } - - .image .time { - color: $color-white; - } - .link { color: $color-primary-dark; } @@ -321,10 +263,6 @@ right: $space-one; top: $space-smaller + $space-micro; } - - .time { - color: $color-light-gray; - } } } @@ -389,11 +327,6 @@ } } - .time { - color: $medium-gray; - font-size: $font-size-micro; - margin-left: $space-slab; - } } } diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue index 4009a4a7b..8ecf4f7e7 100644 --- a/app/javascript/dashboard/components/widgets/conversation/Message.vue +++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue @@ -5,6 +5,7 @@ @@ -21,12 +22,10 @@ /> -

@@ -39,14 +38,16 @@ import timeMixin from '../../../mixins/time'; import BubbleText from './bubble/Text'; import BubbleImage from './bubble/Image'; import BubbleFile from './bubble/File'; - +import contentTypeMixin from 'shared/mixins/contentTypeMixin'; +import BubbleActions from './bubble/Actions'; export default { components: { + BubbleActions, BubbleText, BubbleImage, BubbleFile, }, - mixins: [timeMixin, messageFormatterMixin], + mixins: [timeMixin, messageFormatterMixin, contentTypeMixin], props: { data: { type: Object, @@ -62,6 +63,12 @@ export default { message() { return this.formatMessage(this.data.content); }, + contentType() { + const { + data: { content_type: contentType }, + } = this; + return contentType; + }, alignBubble() { return !this.data.message_type ? 'left' : 'right'; }, @@ -82,14 +89,6 @@ export default { } return false; }, - isPrivate() { - return this.data.private; - }, - toolTipMessage() { - return this.data.private - ? { content: this.$t('CONVERSATION.VISIBLE_TO_AGENTS'), classes: 'top' } - : false; - }, sentByMessage() { const { sender } = this.data; @@ -109,7 +108,7 @@ export default { bubbleClass() { return { bubble: this.isBubble, - 'is-private': this.isPrivate, + 'is-private': this.data.private, 'is-image': this.hasImageAttachment, }; }, @@ -119,13 +118,10 @@ export default { }, }; - diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Audio.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Audio.vue deleted file mode 100644 index 097dbe618..000000000 --- a/app/javascript/dashboard/components/widgets/conversation/bubble/Audio.vue +++ /dev/null @@ -1,41 +0,0 @@ - - - diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue index 6d9a97053..d7ee7e108 100644 --- a/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue +++ b/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue @@ -16,13 +16,17 @@ {{ $t('CONVERSATION.DOWNLOAD') }} - {{ readableTime }} diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue index 1d266516c..1a8c44a6f 100644 --- a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue +++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue @@ -1,12 +1,24 @@ diff --git a/app/javascript/dashboard/i18n/locale/en/chatlist.json b/app/javascript/dashboard/i18n/locale/en/chatlist.json index 52f8a93c6..083aa86da 100644 --- a/app/javascript/dashboard/i18n/locale/en/chatlist.json +++ b/app/javascript/dashboard/i18n/locale/en/chatlist.json @@ -76,6 +76,7 @@ "ICON": "ion-link", "CONTENT": "has shared a url" } - } + }, + "RECEIVED_VIA_EMAIL": "Received via email" } } diff --git a/app/javascript/shared/constants/contentType.js b/app/javascript/shared/constants/contentType.js new file mode 100644 index 000000000..e5b37217f --- /dev/null +++ b/app/javascript/shared/constants/contentType.js @@ -0,0 +1,3 @@ +export const CONTENT_TYPES = { + INCOMING_EMAIL: 'incoming_email', +}; diff --git a/app/javascript/shared/mixins/contentTypeMixin.js b/app/javascript/shared/mixins/contentTypeMixin.js new file mode 100644 index 000000000..149d7b7b7 --- /dev/null +++ b/app/javascript/shared/mixins/contentTypeMixin.js @@ -0,0 +1,9 @@ +import { CONTENT_TYPES } from '../constants/contentType'; + +export default { + computed: { + isEmailContentType() { + return this.contentType === CONTENT_TYPES.INCOMING_EMAIL; + }, + }, +}; diff --git a/app/javascript/shared/mixins/specs/contentTypeMixin.spec.js b/app/javascript/shared/mixins/specs/contentTypeMixin.spec.js new file mode 100644 index 000000000..a523c0513 --- /dev/null +++ b/app/javascript/shared/mixins/specs/contentTypeMixin.spec.js @@ -0,0 +1,32 @@ +import { shallowMount } from '@vue/test-utils'; +import contentTypeMixin from '../contentTypeMixin'; + +describe('contentTypeMixin', () => { + it('returns true if contentType is incoming_email', () => { + const Component = { + render() {}, + mixins: [contentTypeMixin], + computed: { + contentType() { + return 'incoming_email'; + }, + }, + }; + const wrapper = shallowMount(Component); + expect(wrapper.vm.isEmailContentType).toBe(true); + }); + + it('returns false if contentType is not incoming_email', () => { + const Component = { + render() {}, + mixins: [contentTypeMixin], + computed: { + contentType() { + return 'input_select'; + }, + }, + }; + const wrapper = shallowMount(Component); + expect(wrapper.vm.isEmailContentType).toBe(false); + }); +}); diff --git a/app/views/api/v1/accounts/conversations/messages/index.json.jbuilder b/app/views/api/v1/accounts/conversations/messages/index.json.jbuilder index a89ea7f0c..873518df1 100644 --- a/app/views/api/v1/accounts/conversations/messages/index.json.jbuilder +++ b/app/views/api/v1/accounts/conversations/messages/index.json.jbuilder @@ -13,6 +13,7 @@ json.payload do json.inbox_id message.inbox_id json.conversation_id message.conversation.display_id json.message_type message.message_type_before_type_cast + json.content_type message.content_type json.created_at message.created_at.to_i json.private message.private json.source_id message.source_id diff --git a/package.json b/package.json index f7f59d831..ad69ca804 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,6 @@ "url-loader": "^2.0.0", "v-tooltip": "~2.0.2", "vue": "^2.6.0", - "vue-aplayer": "~0.1.1", "vue-audio": "~0.0.7", "vue-axios": "~1.2.2", "vue-chartjs": "^3.4.2", diff --git a/yarn.lock b/yarn.lock index 3c67aab7a..9d485c69a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1585,15 +1585,6 @@ anymatch@^3.0.3: normalize-path "^3.0.0" picomatch "^2.0.4" -aplayer@^1.5.8: - version "1.10.1" - resolved "https://registry.yarnpkg.com/aplayer/-/aplayer-1.10.1.tgz#318289206107452cc39e8f552fa6cc6cb459a90c" - integrity sha512-HAfyxgCUTLAqtYlxzzK9Fyqg6y+kZ9CqT1WfeWE8FSzwspT6oBqWOZHANPHF3RGTtC33IsyEgrfthPDzU5r9kQ== - dependencies: - balloon-css "^0.5.0" - promise-polyfill "7.1.0" - smoothscroll "0.4.0" - aproba@^1.0.3, aproba@^1.1.1: version "1.2.0" resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a" @@ -2021,11 +2012,6 @@ balanced-match@^1.0.0: resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767" integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c= -balloon-css@^0.5.0: - version "0.5.2" - resolved "https://registry.yarnpkg.com/balloon-css/-/balloon-css-0.5.2.tgz#9e2163565a136c9d4aa20e8400772ce3b738d3ff" - integrity sha512-zheJpzwyNrG4t39vusA67v3BYg1HTVXOF8cErPEHzWK88PEOFwgo6Ea9VHOgOWNMgeuOtFVtB73NE2NWl9uDyQ== - base64-js@^1.0.2: version "1.3.1" resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1" @@ -8539,11 +8525,6 @@ promise-inflight@^1.0.1: resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3" integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM= -promise-polyfill@7.1.0: - version "7.1.0" - resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-7.1.0.tgz#4d749485b44577c14137591c6f36e5d7e2dd3378" - integrity sha512-P6NJ2wU/8fac44ENORsuqT8TiolKGB2u0fEClPtXezn7w5cmLIjM/7mhPlTebke2EPr6tmqZbXvnX0TxwykGrg== - prompts@^2.0.1: version "2.3.1" resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.3.1.tgz#b63a9ce2809f106fa9ae1277c275b167af46ea05" @@ -9442,11 +9423,6 @@ slice-ansi@^2.1.0: astral-regex "^1.0.0" is-fullwidth-code-point "^2.0.0" -smoothscroll@0.4.0: - version "0.4.0" - resolved "https://registry.yarnpkg.com/smoothscroll/-/smoothscroll-0.4.0.tgz#40e507b46461408ba1b787d0081e1e883c4124a5" - integrity sha512-sggQ3U2Un38b3+q/j1P4Y4fCboCtoUIaBYoge+Lb6Xg1H8RTIif/hugVr+ErMtIDpvBbhQfTjtiTeYAfbw1ZGQ== - snapdragon-node@^2.0.1: version "2.1.1" resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b" @@ -10524,13 +10500,6 @@ vm-browserify@^1.0.1: resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0" integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ== -vue-aplayer@~0.1.1: - version "0.1.1" - resolved "https://registry.yarnpkg.com/vue-aplayer/-/vue-aplayer-0.1.1.tgz#c5b486c664ac2818618ccf29a6dd1e4e2856dcdc" - integrity sha1-xbSGxmSsKBhhjM8ppt0eTihW3Nw= - dependencies: - aplayer "^1.5.8" - vue-audio@~0.0.7: version "0.0.12" resolved "https://registry.yarnpkg.com/vue-audio/-/vue-audio-0.0.12.tgz#0e4d7af19bc2cc8924a90a57e01edd7de0945cc4"