feat: Code clean up

app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue

@@ -15,22 +15,22 @@ const props = defineProps({
     type: Boolean,
     required: true,
   },
-  // isTwilioInbox: {
-  //   type: Boolean,
-  //   required: true,
-  // },
-  // isApiInbox: {
-  //   type: Boolean,
-  //   required: true,
-  // },
   messageTemplates: {
-    type: Object,
-    default: () => {},
+    type: Array,
+    default: () => [],
   },
   channelType: {
     type: String,
     required: true,
   },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+  disableSendButton: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits([
@@ -141,6 +141,8 @@ const onClickInsertEmoji = emoji => {
         label="Send (↵)"
         size="sm"
         class="!text-xs font-medium"
+        :disabled="isLoading || disableSendButton"
+        :is-loading="isLoading"
         @click="emit('sendMessage')"
       />
     </div>

app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from 'vue';
+
 import TagInput from 'dashboard/components-next/taginput/TagInput.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 
@@ -36,6 +37,10 @@ const props = defineProps({
     type: Boolean,
     required: true,
   },
+  hasErrors: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits([
@@ -96,6 +101,11 @@ const selectedContactLabel = computed(() => {
         :disabled="contactableInboxesList?.length > 0 && showInboxesDropdown"
         type="email"
         class="flex-1 min-h-7"
+        :class="
+          hasErrors
+            ? '[&_input]:placeholder:!text-n-ruby-9 [&_input]:dark:placeholder:!text-n-ruby-9'
+            : ''
+        "
         @focus="emit('updateDropdown', 'contacts', true)"
         @input="emit('searchContacts', $event)"
         @on-click-outside="emit('updateDropdown', 'contacts', false)"

app/javascript/dashboard/components-next/NewConversation/components/EmailOptions.vue

@@ -32,11 +32,15 @@ const props = defineProps({
   },
   showBccInput: {
     type: Boolean,
-    required: true,
+    default: false,
   },
   isLoading: {
     type: Boolean,
-    required: true,
+    default: false,
+  },
+  hasErrors: {
+    type: Boolean,
+    default: false,
   },
 });
 
@@ -88,6 +92,11 @@ const handleBccUpdate = value => {
         placeholder="Enter your email subject here"
         label="Subject :"
         focus-on-mount
+        :custom-input-class="
+          hasErrors
+            ? 'placeholder:!text-n-ruby-9 dark:placeholder:!text-n-ruby-9'
+            : ''
+        "
         @update:model-value="emit('update:subject', $event)"
       />
     </div>

app/javascript/dashboard/components-next/NewConversation/components/InboxSelector.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from 'vue';
+import { generateLabelForContactableInboxesList } from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper.js';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
@@ -21,6 +22,10 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  hasErrors: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits([
@@ -29,24 +34,6 @@ const emit = defineEmits([
   'handleInboxAction',
 ]);
 
-const generateLabelForContactableInboxesList = ({
-  name,
-  email,
-  channelType,
-  phoneNumber,
-}) => {
-  if (channelType === 'EMAIL') {
-    return `${name} (${email})`;
-  }
-  if (channelType === 'TWILIO' || channelType === 'WHATSAPP') {
-    return `${name} (${phoneNumber})`;
-  }
-  if (channelType === 'API') {
-    return `${name} (API)`;
-  }
-  return name;
-};
-
 const targetInboxLabel = computed(() => {
   return generateLabelForContactableInboxesList(props.targetInbox);
 });
@@ -84,7 +71,7 @@ const targetInboxLabel = computed(() => {
         label="Show inboxes"
         variant="link"
         size="sm"
-        color="slate"
+        :color="hasErrors ? 'ruby' : 'slate'"
         :disabled="!selectedContact"
         class="hover:!no-underline"
         @click="emit('toggleDropdown', !showInboxesDropdown)"

app/javascript/dashboard/components-next/NewConversation/components/MessageEditor.vue

@@ -11,6 +11,10 @@ defineProps({
     type: Boolean,
     required: true,
   },
+  hasErrors: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);
@@ -22,6 +26,11 @@ const emit = defineEmits(['update:modelValue']);
       :model-value="modelValue"
       placeholder="Write your message here..."
       class="[&>div]:!border-transparent [&>div]:px-4 [&>div]:py-4 [&>div]:!bg-transparent h-full [&_.ProseMirror-woot-style]:!max-h-[200px]"
+      :class="
+        hasErrors
+          ? '[&_.empty-node]:before:!text-n-ruby-9 [&_.empty-node]:dark:before:!text-n-ruby-9'
+          : ''
+      "
       :show-character-count="false"
       @update:model-value="emit('update:modelValue', $event)"
     />
@@ -32,6 +41,11 @@ const emit = defineEmits(['update:modelValue']);
       placeholder="Write your message here..."
       class="!px-0 [&>div]:!px-4 [&>div]:!border-transparent [&>div]:!bg-transparent"
       auto-height
+      :custom-text-area-class="
+        hasErrors
+          ? 'placeholder:!text-n-ruby-9 dark:placeholder:!text-n-ruby-9'
+          : ''
+      "
       @update:model-value="emit('update:modelValue', $event)"
     />
   </div>