Adds character count to reply box 😳 (#1634)

* Added characters remaining to reply box

* Changed warning text for character length

* Decreased font size of message

app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue

@@ -19,12 +19,18 @@
         {{ $t('CONVERSATION.REPLYBOX.PRIVATE_NOTE') }}
       </button>
     </div>
-    <div class="action-wrap"></div>
+    <div class="action-wrap">
+      <div v-if="isMessageLengthReachingThreshold" class="tabs-title">
+        <span :class="charLengthClass">
+          {{ characterLengthWarning }}
+        </span>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import { REPLY_EDITOR_MODES } from './constants';
+import { REPLY_EDITOR_MODES, CHAR_LENGTH_WARNING } from './constants';
 import EmojiOrIcon from 'shared/components/EmojiOrIcon';
 export default {
   name: 'ReplyTopPanel',
@@ -40,6 +46,14 @@ export default {
       type: Function,
       default: () => {},
     },
+    isMessageLengthReachingThreshold: {
+      type: Boolean,
+      default: () => false,
+    },
+    charactersRemaining: {
+      type: Number,
+      default: () => 0,
+    },
   },
   computed: {
     replyButtonClass() {
@@ -52,6 +66,14 @@ export default {
         'is-active': this.mode === REPLY_EDITOR_MODES.NOTE,
       };
     },
+    charLengthClass() {
+      return this.charactersRemaining < 0 ? 'message-error' : 'message-length';
+    },
+    characterLengthWarning() {
+      return this.charactersRemaining < 0
+        ? `${-this.charactersRemaining} ${CHAR_LENGTH_WARNING.NEGATIVE}`
+        : `${this.charactersRemaining} ${CHAR_LENGTH_WARNING.UNDER_50}`;
+    },
   },
   methods: {
     handleReplyClick() {
@@ -113,5 +135,14 @@ export default {
 .action-wrap {
   display: flex;
   align-items: center;
+  margin: 0 var(--space-normal);
+  font-size: var(--font-size-mini);
+
+  .message-error {
+    color: var(--r-600);
+  }
+  .message-length {
+    color: var(--s-600);
+  }
 }
 </style>

app/javascript/dashboard/components/widgets/WootWriter/constants.js

@@ -2,3 +2,8 @@ export const REPLY_EDITOR_MODES = {
   REPLY: 'REPLY',
   NOTE: 'NOTE',
 };
+
+export const CHAR_LENGTH_WARNING = {
+  UNDER_50: 'characters remaining',
+  NEGATIVE: 'characters over',
+};

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

@@ -1,6 +1,11 @@
 <template>
   <div class="reply-box" :class="replyBoxClass">
-    <reply-top-panel :mode="replyType" :set-reply-mode="setReplyMode" />
+    <reply-top-panel
+      :mode="replyType"
+      :set-reply-mode="setReplyMode"
+      :is-message-length-reaching-threshold="isMessageLengthReachingThreshold"
+      :characters-remaining="charactersRemaining"
+    />
     <div class="reply-box__top">
       <canned-response
         v-if="showCannedResponsesList"
@@ -111,10 +116,10 @@ export default {
         : this.$t('CONVERSATION.FOOTER.MSG_INPUT');
     },
     isMessageLengthReachingThreshold() {
-      return this.message.length > this.maxLength - 40;
+      return this.message.length > this.maxLength - 50;
     },
-    characterCountIndicator() {
+    charactersRemaining() {
-      return `${this.message.length} / ${this.maxLength}`;
+      return this.maxLength - this.message.length;
     },
     isReplyButtonDisabled() {
       const isMessageEmpty = !this.message.trim().replace(/\n/g, '').length;