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>

app/javascript/dashboard/assets/scss/plugins/_multiselect.scss

@@ -204,4 +204,8 @@
   .multiselect--disabled .multiselect__select {
     background: transparent;
   }
+
+  .multiselect__tags-wrap {
+    flex-shrink: 0;
+  }
 }

app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue

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

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

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

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:
+    '<reply-email-head v-bind="$props" @add="onAdd" @click="onClick"></reply-email-head>',
+});
+
+export const Add = Template.bind({});

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

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