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 <muhsinkeramam@gmail.com> * Review fixes * Update app/javascript/dashboard/components/widgets/conversation/stories/ReplyEmailHead.stories.js Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com> * Update app/javascript/dashboard/components/widgets/conversation/stories/ReplyEmailHead.stories.js Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com> * Update app/javascript/dashboard/components/widgets/conversation/stories/ReplyEmailHead.stories.js Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com> Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
This commit is contained in:
Nithin David Thomas
GitHub
parent
c3314dd186
commit
1a4faab381
7 changed files with 184 additions and 2 deletions
|
|
@ -204,4 +204,8 @@
|
|||
.multiselect--disabled .multiselect__select {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.multiselect__tags-wrap {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,119 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="input-group-wrap">
|
||||
<div class="input-group small" :class="{ error: $v.ccEmails.$error }">
|
||||
<label class="input-group-label">
|
||||
{{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.LABEL') }}
|
||||
</label>
|
||||
<div class="input-group-field">
|
||||
<woot-input
|
||||
v-model.trim="ccEmails"
|
||||
type="email"
|
||||
:class="{ error: $v.ccEmails.$error }"
|
||||
:placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
|
||||
@blur="$v.ccEmails.$touch"
|
||||
/>
|
||||
</div>
|
||||
<woot-button
|
||||
v-if="!showBcc"
|
||||
variant="clear"
|
||||
size="small"
|
||||
@click="handleAddBcc"
|
||||
>
|
||||
{{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.ADD_BCC') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
<span v-if="$v.ccEmails.$error" class="message">
|
||||
{{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.ERROR') }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="showBcc" class="input-group-wrap">
|
||||
<div class="input-group small" :class="{ error: $v.bccEmails.$error }">
|
||||
<label class="input-group-label">
|
||||
{{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.LABEL') }}
|
||||
</label>
|
||||
<div class="input-group-field">
|
||||
<woot-input
|
||||
v-model.trim="bccEmails"
|
||||
type="email"
|
||||
:class="{ error: $v.bccEmails.$error }"
|
||||
:placeholder="
|
||||
$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.PLACEHOLDER')
|
||||
"
|
||||
@blur="$v.bccEmails.$touch"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span v-if="$v.bccEmails.$error" class="message">
|
||||
{{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.ERROR') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { validEmailsByComma } from './helpers/emailHeadHelper';
|
||||
export default {
|
||||
props: {
|
||||
ccEmails: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
bccEmails: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showBcc: false,
|
||||
};
|
||||
},
|
||||
validations: {
|
||||
ccEmails: {
|
||||
hasValidEmails(value) {
|
||||
return validEmailsByComma(value);
|
||||
},
|
||||
},
|
||||
bccEmails: {
|
||||
hasValidEmails(value) {
|
||||
return validEmailsByComma(value);
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleAddBcc() {
|
||||
this.showBcc = true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.input-group-wrap .message {
|
||||
font-size: var(--font-size-small);
|
||||
color: var(--r-500);
|
||||
}
|
||||
.input-group {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
margin-bottom: var(--space-smaller);
|
||||
margin-top: var(--space-smaller);
|
||||
|
||||
.input-group-label {
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
font-size: var(--font-size-mini);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
.input-group-field::v-deep input {
|
||||
margin-bottom: 0;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group.error {
|
||||
border-bottom-color: var(--r-500);
|
||||
.input-group-label {
|
||||
color: var(--r-500);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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));
|
||||
};
|
||||
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
|
@ -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:
|
||||
'<reply-email-head v-bind="$props" @add="onAdd" @click="onClick"></reply-email-head>',
|
||||
});
|
||||
|
||||
export const Add = Template.bind({});
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 });
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue