From e3eca0dad87c2d3bd09dc1eeed7fa746049bd0a1 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Wed, 27 Nov 2024 15:56:29 +0530
Subject: [PATCH] feat: allow error variant

---
 app/javascript/dashboard/components-next/message/Message.vue | 5 +++++
 .../dashboard/components-next/message/Messages.story.vue     | 2 ++
 .../dashboard/components-next/message/bubbles/Text.vue       | 1 +
 .../dashboard/components-next/message/constants.js           | 1 +
 4 files changed, 9 insertions(+)

diff --git a/app/javascript/dashboard/components-next/message/Message.vue b/app/javascript/dashboard/components-next/message/Message.vue
index a65cf6f7a..4b096524a 100644
--- a/app/javascript/dashboard/components-next/message/Message.vue
+++ b/app/javascript/dashboard/components-next/message/Message.vue
@@ -75,6 +75,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  error: {
+    type: String,
+    default: '',
+  },
   currentUserId: {
     type: Number,
     required: true,
@@ -91,6 +95,7 @@ const props = defineProps({
  */
 const variant = computed(() => {
   if (props.private) return MESSAGE_VARIANTS.PRIVATE;
+  if (props.error) return MESSAGE_VARIANTS.ERROR;
 
   const variants = {
     [MESSAGE_TYPES.INCOMING]: MESSAGE_VARIANTS.USER,
diff --git a/app/javascript/dashboard/components-next/message/Messages.story.vue b/app/javascript/dashboard/components-next/message/Messages.story.vue
index ef80301cf..ebf32a6ec 100644
--- a/app/javascript/dashboard/components-next/message/Messages.story.vue
+++ b/app/javascript/dashboard/components-next/message/Messages.story.vue
@@ -556,6 +556,8 @@ const messages = [
     content:
       "Let us know if you have any questions, I'll close this conversation for now",
     account_id: 1,
+    error:
+      'Business account is restricted from messaging users in this country.',
     inbox_id: 475,
     message_type: 1,
     created_at: 1732196013,
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Text.vue b/app/javascript/dashboard/components-next/message/bubbles/Text.vue
index 4371ce264..ac4df0f29 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Text.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Text.vue
@@ -28,6 +28,7 @@ const varaintBaseMap = {
     'bg-n-alpha-1 px-2 py-0.5 text-n-slate-11 text-sm',
   [MESSAGE_VARIANTS.BOT]: 'bg-n-teal-5 p-3 text-n-slate-12',
   [MESSAGE_VARIANTS.TEMPLATE]: 'bg-n-teal-5 p-3 text-n-slate-12',
+  [MESSAGE_VARIANTS.ERROR]: 'bg-n-ruby-4 p-3 text-n-ruby-12',
 };
 
 const orientationMap = {
diff --git a/app/javascript/dashboard/components-next/message/constants.js b/app/javascript/dashboard/components-next/message/constants.js
index 9cbe49671..13bf4b943 100644
--- a/app/javascript/dashboard/components-next/message/constants.js
+++ b/app/javascript/dashboard/components-next/message/constants.js
@@ -11,6 +11,7 @@ export const MESSAGE_VARIANTS = {
   ACTIVITY: 'activity',
   PRIVATE: 'private',
   BOT: 'bot',
+  ERROR: 'error',
   TEMPLATE: 'template',
 };