From 1a4faab3816e0f333741aa2f54b22f616f61a2b0 Mon Sep 17 00:00:00 2001 From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com> Date: Wed, 11 Aug 2021 11:34:47 +0530 Subject: [PATCH] feat: Creates story for cc bcc input component in reply box (#2763) * feat: Creates cc bcc input component for reply box * Adds email inputs for cc and bcc * Cleans storybook code * Fixes eslint issues * Update app/javascript/dashboard/components/widgets/conversation/stories/ReplyEmailHead.stories.js Co-authored-by: Muhsin Keloth * Review fixes * Update app/javascript/dashboard/components/widgets/conversation/stories/ReplyEmailHead.stories.js Co-authored-by: Muhsin Keloth * Update app/javascript/dashboard/components/widgets/conversation/stories/ReplyEmailHead.stories.js Co-authored-by: Muhsin Keloth * Update app/javascript/dashboard/components/widgets/conversation/stories/ReplyEmailHead.stories.js Co-authored-by: Muhsin Keloth Co-authored-by: Muhsin Keloth --- .../assets/scss/plugins/_multiselect.scss | 4 + .../widgets/conversation/ReplyEmailHead.vue | 119 ++++++++++++++++++ .../conversation/helpers/emailHeadHelper.js | 7 ++ .../helpers/specs/emailHeadHelper.spec.js | 13 ++ .../stories/ReplyEmailHead.stories.js | 27 ++++ .../i18n/locale/en/conversation.json | 15 ++- .../store/modules/conversation/actions.js | 1 - 7 files changed, 184 insertions(+), 2 deletions(-) create mode 100644 app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue create mode 100644 app/javascript/dashboard/components/widgets/conversation/helpers/emailHeadHelper.js create mode 100644 app/javascript/dashboard/components/widgets/conversation/helpers/specs/emailHeadHelper.spec.js create mode 100644 app/javascript/dashboard/components/widgets/conversation/stories/ReplyEmailHead.stories.js diff --git a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss index 51309625a..7ae877045 100644 --- a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss +++ b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss @@ -204,4 +204,8 @@ .multiselect--disabled .multiselect__select { background: transparent; } + + .multiselect__tags-wrap { + flex-shrink: 0; + } } diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue new file mode 100644 index 000000000..4f30f03bd --- /dev/null +++ b/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue @@ -0,0 +1,119 @@ + + + + diff --git a/app/javascript/dashboard/components/widgets/conversation/helpers/emailHeadHelper.js b/app/javascript/dashboard/components/widgets/conversation/helpers/emailHeadHelper.js new file mode 100644 index 000000000..ad36393a7 --- /dev/null +++ b/app/javascript/dashboard/components/widgets/conversation/helpers/emailHeadHelper.js @@ -0,0 +1,7 @@ +import emailValidator from 'vuelidate/lib/validators/email'; + +export const validEmailsByComma = value => { + if (!value.length) return true; + const emails = value.split(','); + return emails.every(email => emailValidator(email)); +}; diff --git a/app/javascript/dashboard/components/widgets/conversation/helpers/specs/emailHeadHelper.spec.js b/app/javascript/dashboard/components/widgets/conversation/helpers/specs/emailHeadHelper.spec.js new file mode 100644 index 000000000..2275a810b --- /dev/null +++ b/app/javascript/dashboard/components/widgets/conversation/helpers/specs/emailHeadHelper.spec.js @@ -0,0 +1,13 @@ +import { validEmailsByComma } from '../emailHeadHelper'; + +describe('#validEmailsByComma', () => { + it('returns true when empty string is passed', () => { + expect(validEmailsByComma('')).toEqual(true); + }); + it('returns true when valid emails separated by comma is passed', () => { + expect(validEmailsByComma('ni@njan.com,po@va.da')).toEqual(true); + }); + it('returns false when one of the email passed is invalid', () => { + expect(validEmailsByComma('ni@njan.com,pova.da')).toEqual(false); + }); +}); diff --git a/app/javascript/dashboard/components/widgets/conversation/stories/ReplyEmailHead.stories.js b/app/javascript/dashboard/components/widgets/conversation/stories/ReplyEmailHead.stories.js new file mode 100644 index 000000000..a21a66874 --- /dev/null +++ b/app/javascript/dashboard/components/widgets/conversation/stories/ReplyEmailHead.stories.js @@ -0,0 +1,27 @@ +import ReplyEmailHead from '../ReplyEmailHead'; + +export default { + title: 'Components/ReplyBox/EmailHead', + component: ReplyEmailHead, + argTypes: { + ccEmails: { + control: { + type: 'string', + }, + }, + bccEmails: { + control: { + type: 'string', + }, + }, + }, +}; + +const Template = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { ReplyEmailHead }, + template: + '', +}); + +export const Add = Template.bind({}); diff --git a/app/javascript/dashboard/i18n/locale/en/conversation.json b/app/javascript/dashboard/i18n/locale/en/conversation.json index eeeb727f1..ef7a66691 100644 --- a/app/javascript/dashboard/i18n/locale/en/conversation.json +++ b/app/javascript/dashboard/i18n/locale/en/conversation.json @@ -64,7 +64,20 @@ "TIP_EMOJI_ICON": "Show emoji selector", "TIP_ATTACH_ICON": "Attach files", "ENTER_TO_SEND": "Enter to send", - "DRAG_DROP": "Drag and drop here to attach" + "DRAG_DROP": "Drag and drop here to attach", + "EMAIL_HEAD": { + "ADD_BCC": "Add bcc", + "CC": { + "LABEL": "CC", + "PLACEHOLDER": "Emails separated by commas", + "ERROR": "Please enter valid email addresses" + }, + "BCC": { + "LABEL": "BCC", + "PLACEHOLDER": "Emails separated by commas", + "ERROR": "Please enter valid email addresses" + } + } }, "VISIBLE_TO_AGENTS": "Private Note: Only visible to you and your team", "CHANGE_STATUS": "Conversation status changed", diff --git a/app/javascript/widget/store/modules/conversation/actions.js b/app/javascript/widget/store/modules/conversation/actions.js index 49ab9b331..42c915521 100644 --- a/app/javascript/widget/store/modules/conversation/actions.js +++ b/app/javascript/widget/store/modules/conversation/actions.js @@ -24,7 +24,6 @@ export const actions = { refreshActionCableConnector(pubsubToken); dispatch('conversationAttributes/getAttributes', {}, { root: true }); } catch (error) { - console.log(error); // Ignore error } finally { commit('setConversationUIFlag', { isCreating: false });