From ef51083b3c21e100acde93e8697527fa02486607 Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Thu, 21 Nov 2024 13:34:42 +0530
Subject: [PATCH 1/6] chore: Minor fix

---
 .../ContactsCard/ContactsCard.story.vue       | 216 ------------------
 .../ContactsForm/ContactsForm.story.vue       | 101 --------
 .../CustomAttributes/CheckboxAttribute.vue    |  22 +-
 .../CustomAttributes/DateAttribute.vue        |   1 -
 .../CustomAttributes/ListAttribute.vue        |   1 -
 .../CustomAttributes/OtherAttribute.vue       |   2 +-
 .../{ => story}/CustomAttributes.story.vue    |  55 +----
 .../CustomAttributes/story/fixtures.js        |  39 ++++
 .../components-next/switch/Switch.story.vue   |  56 +++++
 .../components-next/switch/Switch.vue         |  38 +++
 .../dashboard/i18n/locale/en/components.json  |   3 +
 11 files changed, 155 insertions(+), 379 deletions(-)
 delete mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.story.vue
 delete mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.story.vue
 rename app/javascript/dashboard/components-next/CustomAttributes/{ => story}/CustomAttributes.story.vue (64%)
 create mode 100644 app/javascript/dashboard/components-next/CustomAttributes/story/fixtures.js
 create mode 100644 app/javascript/dashboard/components-next/switch/Switch.story.vue
 create mode 100644 app/javascript/dashboard/components-next/switch/Switch.vue

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.story.vue b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.story.vue
deleted file mode 100644
index 8b06bf4e1..000000000
--- a/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.story.vue
+++ /dev/null
@@ -1,216 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-
-import ContactsCard from './ContactsCard.vue';
-
-const contacts = [
-  {
-    additionalAttributes: {
-      socialProfiles: {},
-    },
-    availabilityStatus: null,
-    email: 'johndoe@chatwoot.com',
-    id: 370,
-    name: 'John Doe',
-    phoneNumber: '+918634322418',
-    identifier: null,
-    thumbnail: 'https://api.dicebear.com/9.x/thumbs/svg?seed=Felix',
-    customAttributes: {},
-    lastActivityAt: 1731608270,
-    createdAt: 1731586271,
-  },
-  {
-    additionalAttributes: {
-      city: 'kerala',
-      country: 'India',
-      description: 'Curious about the web. ',
-      companyName: 'Chatwoot',
-      countryCode: '',
-      socialProfiles: {
-        github: 'abozler',
-        twitter: 'ozler',
-        facebook: 'abozler',
-        linkedin: 'abozler',
-        instagram: 'ozler',
-      },
-    },
-    availabilityStatus: null,
-    email: 'ozler@chatwoot.com',
-    id: 29,
-    name: 'Abraham Ozlers',
-    phoneNumber: '+246232222222',
-    identifier: null,
-    thumbnail: 'https://api.dicebear.com/9.x/thumbs/svg?seed=Upload',
-    customAttributes: {
-      dateContact: '2024-02-01T00:00:00.000Z',
-      linkContact: 'https://staging.chatwoot.com/app/accounts/3/contacts-new',
-      listContact: 'Not spam',
-      numberContact: '12',
-    },
-    lastActivityAt: 1712127410,
-    createdAt: 1712127389,
-  },
-  {
-    additionalAttributes: {
-      city: 'Kerala',
-      country: 'India',
-      description:
-        "I'm Candice developer focusing on building things for the web 🌍. Currently, I’m working as a Product Developer here at @chatwootapp ⚡️🔥",
-      companyName: 'Chatwoot',
-      countryCode: 'IN',
-      socialProfiles: {
-        github: 'cmathersonj',
-        twitter: 'cmather',
-        facebook: 'cmathersonj',
-        linkedin: 'cmathersonj',
-        instagram: 'cmathersonjs',
-      },
-    },
-    availabilityStatus: null,
-    email: 'cmathersonj@va.test',
-    id: 22,
-    name: 'Candice Matherson',
-    phoneNumber: '+917474774742',
-    identifier: null,
-    thumbnail: 'https://api.dicebear.com/9.x/thumbs/svg?seed=Emery',
-    customAttributes: {
-      dateContact: '2024-11-12T03:23:06.963Z',
-      linkContact: 'https://sd.sd',
-      textContact: 'hey',
-      numberContact: '12',
-      checkboxContact: true,
-    },
-    lastActivityAt: 1712123233,
-    createdAt: 1712123233,
-  },
-  {
-    additionalAttributes: {
-      city: '',
-      country: '',
-      description: '',
-      companyName: '',
-      countryCode: '',
-      socialProfiles: {
-        github: '',
-        twitter: '',
-        facebook: '',
-        linkedin: '',
-        instagram: '',
-      },
-    },
-    availabilityStatus: null,
-    email: 'ofolkardi@taobao.test',
-    id: 21,
-    name: 'Ophelia Folkard',
-    phoneNumber: '',
-    identifier: null,
-    thumbnail:
-      'https://sivin-tunnel.chatwoot.dev/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBPZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--08dcac8eb72ef12b2cad92d58dddd04cd8a5f513/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--df796c2af3c0153e55236c2f3cf3a199ac2cb6f7/32.jpg',
-    customAttributes: {},
-    lastActivityAt: 1712123233,
-    createdAt: 1712123233,
-  },
-  {
-    additionalAttributes: {
-      socialProfiles: {},
-    },
-    availabilityStatus: null,
-    email: 'wcasteloth@exblog.jp',
-    id: 20,
-    name: 'Willy Castelot',
-    phoneNumber: '+919384',
-    identifier: null,
-    thumbnail: 'https://api.dicebear.com/9.x/thumbs/svg?seed=Jade',
-    customAttributes: {},
-    lastActivityAt: 1712123233,
-    createdAt: 1712123233,
-  },
-  {
-    additionalAttributes: {
-      city: '',
-      country: '',
-      description: '',
-      companyName: '',
-      countryCode: '',
-      socialProfiles: {
-        github: '',
-        twitter: '',
-        facebook: '',
-        linkedin: '',
-        instagram: '',
-      },
-    },
-    availabilityStatus: null,
-    email: 'ederingtong@printfriendly.test',
-    id: 19,
-    name: 'Elisabeth Derington',
-    phoneNumber: '',
-    identifier: null,
-    thumbnail: 'https://api.dicebear.com/9.x/avataaars/svg?seed=Jade',
-    customAttributes: {},
-    lastActivityAt: 1712123232,
-    createdAt: 1712123232,
-  },
-];
-
-const expandedCardId = ref(null);
-
-const toggleExpanded = id => {
-  expandedCardId.value = expandedCardId.value === id ? null : id;
-};
-</script>
-
-<template>
-  <Story
-    title="Components/Contacts/ContactsCard"
-    :layout="{ type: 'grid', width: '800px' }"
-  >
-    <Variant title="Default with expandable function">
-      <div class="flex flex-col p-4">
-        <ContactsCard
-          v-bind="contacts[0]"
-          :is-expanded="expandedCardId === contacts[0].id"
-          @toggle="toggleExpanded(contacts[0].id)"
-          @update-contact="() => {}"
-          @show-contact="() => {}"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="With Company Name and without phone number">
-      <div class="flex flex-col p-4">
-        <ContactsCard
-          v-bind="{ ...contacts[1], phoneNumber: '' }"
-          :is-expanded="false"
-          @toggle="() => {}"
-          @update-contact="() => {}"
-          @show-contact="() => {}"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Expanded State">
-      <div class="flex flex-col p-4">
-        <ContactsCard
-          v-bind="contacts[2]"
-          is-expanded
-          @toggle="() => {}"
-          @update-contact="() => {}"
-          @show-contact="() => {}"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Without Email and Phone">
-      <div class="flex flex-col p-4">
-        <ContactsCard
-          v-bind="{ ...contacts[3], email: '', phoneNumber: '' }"
-          :is-expanded="false"
-          @toggle="() => {}"
-          @update-contact="() => {}"
-          @show-contact="() => {}"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.story.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.story.vue
deleted file mode 100644
index 35d36837f..000000000
--- a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.story.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<script setup>
-import ContactsForm from './ContactsForm.vue';
-
-// Sample contact data based on the structure from ContactsCard.vue
-const contactData = {
-  id: 370,
-  name: 'John Doe',
-  email: 'johndoe@chatwoot.com',
-  phoneNumber: '+918634322418',
-  additionalAttributes: {
-    city: 'Kerala',
-    country: 'India',
-    description: 'Curious about the web.',
-    companyName: 'Chatwoot',
-    countryCode: 'IN',
-    socialProfiles: {
-      github: 'johndoe',
-      twitter: 'johndoe',
-      facebook: 'johndoe',
-      linkedin: 'johndoe',
-      instagram: 'johndoe',
-    },
-  },
-};
-
-const handleUpdate = updatedData => {
-  console.log('Form updated:', updatedData);
-};
-</script>
-
-<template>
-  <Story
-    title="Components/Contacts/ContactsForm"
-    :layout="{ type: 'grid', width: '600px' }"
-  >
-    <Variant title="Default without border">
-      <div class="p-6 border rounded-lg border-n-strong">
-        <ContactsForm :contact-data="contactData" @update="handleUpdate" />
-      </div>
-    </Variant>
-
-    <Variant title="Details View with border">
-      <div class="p-6 border rounded-lg border-n-strong">
-        <ContactsForm
-          :contact-data="contactData"
-          is-details-view
-          @update="handleUpdate"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Minimal Data">
-      <div class="p-6 border rounded-lg border-n-strong">
-        <ContactsForm
-          :contact-data="{
-            id: 21,
-            name: 'Ophelia Folkard',
-            email: 'ofolkardi@taobao.test',
-            phoneNumber: '',
-            additionalAttributes: {
-              city: '',
-              country: '',
-              description: '',
-              companyName: '',
-              countryCode: '',
-              socialProfiles: {
-                github: '',
-                twitter: '',
-                facebook: '',
-                linkedin: '',
-                instagram: '',
-              },
-            },
-          }"
-          @update="handleUpdate"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="With All Social Profiles">
-      <div class="p-6 border rounded-lg border-n-strong">
-        <ContactsForm
-          :contact-data="{
-            ...contactData,
-            additionalAttributes: {
-              ...contactData.additionalAttributes,
-              socialProfiles: {
-                github: 'cmathersonj',
-                twitter: 'cmather',
-                facebook: 'cmathersonj',
-                linkedin: 'cmathersonj',
-                instagram: 'cmathersonjs',
-              },
-            },
-          }"
-          @update="handleUpdate"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>
diff --git a/app/javascript/dashboard/components-next/CustomAttributes/CheckboxAttribute.vue b/app/javascript/dashboard/components-next/CustomAttributes/CheckboxAttribute.vue
index 896c1741d..d5ecc3aab 100644
--- a/app/javascript/dashboard/components-next/CustomAttributes/CheckboxAttribute.vue
+++ b/app/javascript/dashboard/components-next/CustomAttributes/CheckboxAttribute.vue
@@ -1,8 +1,10 @@
-<!-- Attribute type "Checkbox" -->
 <script setup>
-import Button from 'dashboard/components-next/button/Button.vue';
+import { ref } from 'vue';
 
-defineProps({
+import Button from 'dashboard/components-next/button/Button.vue';
+import Switch from 'dashboard/components-next/switch/Switch.vue';
+
+const props = defineProps({
   attribute: {
     type: Object,
     required: true,
@@ -15,8 +17,10 @@ defineProps({
 
 const emit = defineEmits(['update', 'delete']);
 
-const handleChange = event => {
-  emit('update', event.target.checked);
+const attributeValue = ref(Boolean(props.attribute.value));
+
+const handleChange = value => {
+  emit('update', value);
 };
 </script>
 
@@ -28,13 +32,7 @@ const handleChange = event => {
       'justify-end': !isEditingView,
     }"
   >
-    <input
-      :checked="Boolean(attribute.value)"
-      class="px-2 py-1 text-sm border rounded bg-n-solid-2 border-n-slate-5"
-      type="checkbox"
-      @change="handleChange"
-    />
-
+    <Switch v-model="attributeValue" @change="handleChange" />
     <Button
       v-if="isEditingView"
       variant="faded"
diff --git a/app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue b/app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue
index 78478b43d..f564f0d1c 100644
--- a/app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue
+++ b/app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue
@@ -1,4 +1,3 @@
-<!-- Attribute type "Date" -->
 <script setup>
 import { ref, computed } from 'vue';
 import { parseISO } from 'date-fns';
diff --git a/app/javascript/dashboard/components-next/CustomAttributes/ListAttribute.vue b/app/javascript/dashboard/components-next/CustomAttributes/ListAttribute.vue
index 675023288..a9831762f 100644
--- a/app/javascript/dashboard/components-next/CustomAttributes/ListAttribute.vue
+++ b/app/javascript/dashboard/components-next/CustomAttributes/ListAttribute.vue
@@ -1,4 +1,3 @@
-<!-- Attribute type "List" -->
 <script setup>
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
diff --git a/app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue b/app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue
index ab5aa1cd3..8b5b538c3 100644
--- a/app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue
+++ b/app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue
@@ -135,7 +135,7 @@ const handleInputUpdate = async () => {
       @click="toggleEditValue(!isEditingView)"
     >
       <a
-        v-if="isAttributeTypeLink && attribute.value"
+        v-if="isAttributeTypeLink && attribute.value && isEditingView"
         :href="attribute.value"
         target="_blank"
         rel="noopener noreferrer"
diff --git a/app/javascript/dashboard/components-next/CustomAttributes/CustomAttributes.story.vue b/app/javascript/dashboard/components-next/CustomAttributes/story/CustomAttributes.story.vue
similarity index 64%
rename from app/javascript/dashboard/components-next/CustomAttributes/CustomAttributes.story.vue
rename to app/javascript/dashboard/components-next/CustomAttributes/story/CustomAttributes.story.vue
index 3246002fc..ea87a3f0c 100644
--- a/app/javascript/dashboard/components-next/CustomAttributes/CustomAttributes.story.vue
+++ b/app/javascript/dashboard/components-next/CustomAttributes/story/CustomAttributes.story.vue
@@ -1,8 +1,10 @@
 <script setup>
-import OtherAttribute from './OtherAttribute.vue';
-import ListAttribute from './ListAttribute.vue';
-import DateAttribute from './DateAttribute.vue';
-import CheckboxAttribute from './CheckboxAttribute.vue';
+import Attributes from './fixtures';
+
+import OtherAttribute from '../OtherAttribute.vue';
+import ListAttribute from '../ListAttribute.vue';
+import DateAttribute from '../DateAttribute.vue';
+import CheckboxAttribute from '../CheckboxAttribute.vue';
 
 const componentMap = {
   list: ListAttribute,
@@ -11,47 +13,6 @@ const componentMap = {
   default: OtherAttribute,
 };
 
-// Sample attributes data
-const attributes = [
-  {
-    attributeKey: 'textContact',
-    attributeDisplayName: 'Text Input',
-    attributeDisplayType: 'text',
-    value: 'Sample text value',
-  },
-  {
-    attributeKey: 'linkContact',
-    attributeDisplayName: 'URL Input',
-    attributeDisplayType: 'link',
-    value: 'https://www.chatwoot.com',
-  },
-  {
-    attributeKey: 'numberContact',
-    attributeDisplayName: 'Number Input',
-    attributeDisplayType: 'number',
-    value: '42',
-  },
-  {
-    attributeKey: 'listContact',
-    attributeDisplayName: 'List Input',
-    attributeDisplayType: 'list',
-    value: 'Option 2',
-    attributeValues: ['Option 1', 'Option 2', 'Option 3'],
-  },
-  {
-    attributeKey: 'dateContact',
-    attributeDisplayName: 'Date Input',
-    attributeDisplayType: 'date',
-    value: '2024-03-25T00:00:00.000Z',
-  },
-  {
-    attributeKey: 'checkboxContact',
-    attributeDisplayName: 'Checkbox Input',
-    attributeDisplayType: 'checkbox',
-    value: true,
-  },
-];
-
 const getCurrentComponent = type => {
   return componentMap[type] || componentMap.default;
 };
@@ -73,7 +34,7 @@ const handleDelete = type => {
     <Variant title="Create View">
       <div class="flex flex-col gap-4 p-4 border rounded-lg border-n-strong">
         <div
-          v-for="attribute in attributes"
+          v-for="attribute in Attributes"
           :key="attribute.attributeKey"
           class="grid grid-cols-[140px,1fr] group-hover/attribute items-center gap-1 min-h-10"
         >
@@ -97,7 +58,7 @@ const handleDelete = type => {
     <Variant title="Saved View">
       <div class="flex flex-col gap-4 p-4 border rounded-lg border-n-strong">
         <div
-          v-for="attribute in attributes"
+          v-for="attribute in Attributes"
           :key="attribute.attributeKey"
           class="grid grid-cols-[140px,1fr] group-hover/attribute items-center gap-1 min-h-10"
         >
diff --git a/app/javascript/dashboard/components-next/CustomAttributes/story/fixtures.js b/app/javascript/dashboard/components-next/CustomAttributes/story/fixtures.js
new file mode 100644
index 000000000..7cd600dcf
--- /dev/null
+++ b/app/javascript/dashboard/components-next/CustomAttributes/story/fixtures.js
@@ -0,0 +1,39 @@
+export default [
+  {
+    attributeKey: 'textContact',
+    attributeDisplayName: 'Text Input',
+    attributeDisplayType: 'text',
+    value: 'Sample text value',
+  },
+  {
+    attributeKey: 'linkContact',
+    attributeDisplayName: 'URL Input',
+    attributeDisplayType: 'link',
+    value: 'https://www.chatwoot.com',
+  },
+  {
+    attributeKey: 'numberContact',
+    attributeDisplayName: 'Number Input',
+    attributeDisplayType: 'number',
+    value: '42',
+  },
+  {
+    attributeKey: 'listContact',
+    attributeDisplayName: 'List Input',
+    attributeDisplayType: 'list',
+    value: 'Option 2',
+    attributeValues: ['Option 1', 'Option 2', 'Option 3'],
+  },
+  {
+    attributeKey: 'dateContact',
+    attributeDisplayName: 'Date Input',
+    attributeDisplayType: 'date',
+    value: '2024-03-25T00:00:00.000Z',
+  },
+  {
+    attributeKey: 'checkboxContact',
+    attributeDisplayName: 'Checkbox Input',
+    attributeDisplayType: 'checkbox',
+    value: true,
+  },
+];
diff --git a/app/javascript/dashboard/components-next/switch/Switch.story.vue b/app/javascript/dashboard/components-next/switch/Switch.story.vue
new file mode 100644
index 000000000..9e4f7ae63
--- /dev/null
+++ b/app/javascript/dashboard/components-next/switch/Switch.story.vue
@@ -0,0 +1,56 @@
+<script setup>
+import Switch from './Switch.vue';
+import { ref } from 'vue';
+
+// Default varian
+const isEnabled = ref(false);
+
+// States variant
+const defaultValue = ref(false);
+const checkedValue = ref(true);
+
+// Events variant
+const eventValue = ref(false);
+const lastChange = ref('No changes yet');
+
+const onChange = value => {
+  lastChange.value = `Changed to: ${value} at ${new Date().toLocaleTimeString()}`;
+};
+</script>
+
+<template>
+  <Story title="Components/Switch" :layout="{ type: 'grid', width: '200px' }">
+    <Variant title="Default">
+      <div class="p-2">
+        <Switch v-model="isEnabled" />
+      </div>
+    </Variant>
+
+    <Variant title="States">
+      <div class="p-2 space-y-4">
+        <div class="flex items-center gap-4">
+          <span class="w-20">Default:</span>
+          <Switch v-model="defaultValue" />
+        </div>
+
+        <div class="flex items-center gap-4">
+          <span class="w-20">Checked:</span>
+          <Switch v-model="checkedValue" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Events">
+      <div class="p-2 space-y-4">
+        <Switch v-model="eventValue" @change="onChange" />
+        <div class="text-sm text-gray-600">Last change: {{ lastChange }}</div>
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div class="p-2">
+        <Switch v-model="isEnabled" disabled />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/switch/Switch.vue b/app/javascript/dashboard/components-next/switch/Switch.vue
new file mode 100644
index 000000000..e8f409c0e
--- /dev/null
+++ b/app/javascript/dashboard/components-next/switch/Switch.vue
@@ -0,0 +1,38 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+const emit = defineEmits(['change']);
+
+const { t } = useI18n();
+
+const modelValue = defineModel({
+  type: Boolean,
+  default: false,
+});
+
+const updateValue = () => {
+  modelValue.value = !modelValue.value;
+  emit('change', !modelValue.value);
+};
+</script>
+
+<template>
+  <button
+    type="button"
+    class="relative h-4 transition-colors duration-200 ease-in-out rounded-full w-7 focus:outline-none focus:ring-1 focus:ring-primary-500 focus:ring-offset-n-slate-2 focus:ring-offset-2"
+    :class="modelValue ? 'bg-n-brand' : 'bg-n-alpha-1 dark:bg-n-alpha-2'"
+    role="switch"
+    :aria-checked="modelValue"
+    @click="updateValue"
+  >
+    <span class="sr-only">{{ t('SWITCH.TOGGLE') }}</span>
+    <span
+      class="absolute top-px left-0.5 h-3 w-3 transform rounded-full shadow-sm transition-transform duration-200 ease-in-out"
+      :class="
+        modelValue
+          ? 'translate-x-2.5 bg-white'
+          : 'translate-x-0 bg-white dark:bg-n-black'
+      "
+    />
+  </button>
+</template>
diff --git a/app/javascript/dashboard/i18n/locale/en/components.json b/app/javascript/dashboard/i18n/locale/en/components.json
index 7a0533cef..2a728fe13 100644
--- a/app/javascript/dashboard/i18n/locale/en/components.json
+++ b/app/javascript/dashboard/i18n/locale/en/components.json
@@ -30,5 +30,8 @@
   },
   "BREADCRUMB": {
     "ARIA_LABEL": "Breadcrumb"
+  },
+  "SWITCH": {
+    "TOGGLE": "Toggle switch"
   }
 }

From 2a724cad7c7b0ad7951859c8eee38be658227f13 Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Thu, 21 Nov 2024 14:52:19 +0530
Subject: [PATCH 2/6] chore: Create contact merge component

---
 .../ContactsForm/ContactMergeForm.vue         | 112 ++++++++++++++++++
 .../story/ContactMergeForm.story.vue          |  73 ++++++++++++
 .../ContactsForm/story/ContactsForm.story.vue |   2 +-
 .../Contacts/ContactsForm/story/fixtures.js   |  29 ++++-
 .../Contacts/ContactsSidebar/ContactMerge.vue |  92 +++-----------
 5 files changed, 228 insertions(+), 80 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactMergeForm.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactMergeForm.story.vue

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactMergeForm.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactMergeForm.vue
new file mode 100644
index 000000000..dc38c4649
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactMergeForm.vue
@@ -0,0 +1,112 @@
+<script setup>
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+import { useI18n } from 'vue-i18n';
+
+defineProps({
+  selectedContact: {
+    type: Object,
+    required: true,
+  },
+  primaryContactId: {
+    type: [Number, null],
+    default: null,
+  },
+  primaryContactList: {
+    type: Array,
+    default: () => [],
+  },
+  isSearching: {
+    type: Boolean,
+    default: false,
+  },
+  hasError: {
+    type: Boolean,
+    default: false,
+  },
+  errorMessage: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:primaryContactId', 'search']);
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between h-5 gap-2">
+        <label class="text-sm text-n-slate-12">
+          {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PRIMARY') }}
+        </label>
+        <span
+          class="flex items-center justify-center w-24 h-5 text-xs rounded-md text-n-teal-11 bg-n-alpha-2"
+        >
+          {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PRIMARY_HELP_LABEL') }}
+        </span>
+      </div>
+      <ComboBox
+        id="inbox"
+        :model-value="primaryContactId"
+        :options="primaryContactList"
+        :empty-state="
+          isSearching
+            ? t('CONTACTS_LAYOUT.SIDEBAR.MERGE.IS_SEARCHING')
+            : t('CONTACTS_LAYOUT.SIDEBAR.MERGE.EMPTY_STATE')
+        "
+        :search-placeholder="
+          t('CONTACTS_LAYOUT.SIDEBAR.MERGE.SEARCH_PLACEHOLDER')
+        "
+        :placeholder="t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PLACEHOLDER')"
+        :has-error="hasError"
+        :message="errorMessage"
+        class="[&>div>button]:bg-n-alpha-black2"
+        @update:model-value="value => emit('update:primaryContactId', value)"
+        @search="query => emit('search', query)"
+      />
+    </div>
+    <div class="relative flex justify-center gap-2 top-4">
+      <div v-for="i in 3" :key="i" class="relative w-4 h-8">
+        <div
+          class="absolute w-0 h-0 border-l-[4px] border-r-[4px] border-b-[6px] border-l-transparent border-r-transparent border-n-strong ltr:translate-x-[4px] rtl:-translate-x-[4px] -translate-y-[4px]"
+        />
+        <div
+          class="absolute w-[1px] h-full bg-n-strong left-1/2 transform -translate-x-1/2"
+        />
+      </div>
+    </div>
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between h-5 gap-2">
+        <label class="text-sm text-n-slate-12">
+          {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PARENT') }}
+        </label>
+        <span
+          class="flex items-center justify-center w-24 h-5 text-xs rounded-md text-n-ruby-11 bg-n-alpha-2"
+        >
+          {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PARENT_HELP_LABEL') }}
+        </span>
+      </div>
+      <div
+        class="border border-n-strong h-[60px] gap-2 flex items-center rounded-xl p-3"
+      >
+        <Avatar
+          :name="selectedContact.name || ''"
+          :src="selectedContact.thumbnail || ''"
+          :size="32"
+          rounded-full
+        />
+        <div class="flex flex-col gap-1">
+          <span class="text-sm leading-4 truncate text-n-slate-11">
+            {{ selectedContact.name }}
+          </span>
+          <span class="text-sm leading-4 truncate text-n-slate-11">
+            {{ selectedContact.email }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactMergeForm.story.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactMergeForm.story.vue
new file mode 100644
index 000000000..dbf22dadd
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactMergeForm.story.vue
@@ -0,0 +1,73 @@
+<script setup>
+import ContactMergeForm from '../ContactMergeForm.vue';
+import { contactData, primaryContactList } from './fixtures';
+
+const handleSearch = query => {
+  console.log('Searching for:', query);
+};
+
+const handleUpdate = value => {
+  console.log('Primary contact updated:', value);
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Contacts/ContactMergeForm"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Default">
+      <div class="p-6 border rounded-lg border-n-strong">
+        <ContactMergeForm
+          :selected-contact="contactData"
+          :primary-contact-list="primaryContactList"
+          :primary-contact-id="null"
+          :is-searching="false"
+          @update:primary-contact-id="handleUpdate"
+          @search="handleSearch"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Selected Primary Contact">
+      <div class="p-6 border rounded-lg border-n-strong">
+        <ContactMergeForm
+          :selected-contact="contactData"
+          :primary-contact-list="primaryContactList"
+          :primary-contact-id="1"
+          :is-searching="false"
+          @update:primary-contact-id="handleUpdate"
+          @search="handleSearch"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Error State">
+      <div class="p-6 border rounded-lg border-n-strong">
+        <ContactMergeForm
+          :selected-contact="contactData"
+          :primary-contact-list="primaryContactList"
+          :primary-contact-id="null"
+          :is-searching="false"
+          has-error
+          error-message="Please select a primary contact"
+          @update:primary-contact-id="handleUpdate"
+          @search="handleSearch"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Empty Primary Contact List">
+      <div class="p-6 border rounded-lg border-n-strong">
+        <ContactMergeForm
+          :selected-contact="contactData"
+          :primary-contact-list="[]"
+          :primary-contact-id="null"
+          :is-searching="false"
+          @update:primary-contact-id="handleUpdate"
+          @search="handleSearch"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactsForm.story.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactsForm.story.vue
index 4be69380c..306df1df0 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactsForm.story.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactsForm.story.vue
@@ -1,6 +1,6 @@
 <script setup>
 import ContactsForm from '../ContactsForm.vue';
-import contactData from './fixtures';
+import { contactData } from './fixtures';
 
 const handleUpdate = updatedData => {
   console.log('Form updated:', updatedData);
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/fixtures.js b/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/fixtures.js
index 30eb6ee22..9d9590d63 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/fixtures.js
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/fixtures.js
@@ -1,4 +1,4 @@
-export default {
+export const contactData = {
   id: 370,
   name: 'John Doe',
   email: 'johndoe@chatwoot.com',
@@ -18,3 +18,30 @@ export default {
     },
   },
 };
+
+export const primaryContactList = [
+  {
+    id: 1,
+    name: 'Jane Smith',
+    email: 'jane@chatwoot.com',
+    thumbnail: '',
+    label: '(ID: 1) Jane Smith',
+    value: 1,
+  },
+  {
+    id: 2,
+    name: 'Mike Johnson',
+    email: 'mike@chatwoot.com',
+    thumbnail: '',
+    label: '(ID: 2) Mike Johnson',
+    value: 2,
+  },
+  {
+    id: 3,
+    name: 'Sarah Wilson',
+    email: 'sarah@chatwoot.com',
+    thumbnail: '',
+    label: '(ID: 3) Sarah Wilson',
+    value: 3,
+  },
+];
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue
index da9345996..65cbfafe2 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue
@@ -10,9 +10,8 @@ import ContactAPI from 'dashboard/api/contacts';
 import { debounce } from '@chatwoot/utils';
 import { CONTACTS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
-import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+import ContactMergeForm from 'dashboard/components-next/Contacts/ContactsForm/ContactMergeForm.vue';
 
 const props = defineProps({
   selectedContact: {
@@ -110,82 +109,19 @@ const onMergeContacts = async () => {
         {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.DESCRIPTION') }}
       </p>
     </div>
-    <div class="flex flex-col">
-      <div class="flex flex-col gap-2">
-        <div class="flex items-center justify-between h-5 gap-2">
-          <label class="text-sm text-n-slate-12">
-            {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PRIMARY') }}
-          </label>
-          <span
-            class="flex items-center justify-center w-24 h-5 text-xs rounded-md text-n-teal-11 bg-n-alpha-2"
-          >
-            {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PRIMARY_HELP_LABEL') }}
-          </span>
-        </div>
-        <ComboBox
-          id="inbox"
-          v-model="state.primaryContactId"
-          :options="primaryContactList"
-          :empty-state="
-            isSearching
-              ? t('CONTACTS_LAYOUT.SIDEBAR.MERGE.IS_SEARCHING')
-              : t('CONTACTS_LAYOUT.SIDEBAR.MERGE.EMPTY_STATE')
-          "
-          :search-placeholder="
-            t('CONTACTS_LAYOUT.SIDEBAR.MERGE.SEARCH_PLACEHOLDER')
-          "
-          :placeholder="t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PLACEHOLDER')"
-          :has-error="!!v$.primaryContactId.$error"
-          :message="
-            v$.primaryContactId.$error
-              ? t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PRIMARY_REQUIRED_ERROR')
-              : ''
-          "
-          class="[&>div>button]:bg-n-alpha-black2"
-          @search="onContactSearch"
-        />
-      </div>
-      <div class="relative flex justify-center gap-2 top-4">
-        <div v-for="i in 3" :key="i" class="relative w-4 h-8">
-          <div
-            class="absolute w-0 h-0 border-l-[4px] border-r-[4px] border-b-[6px] border-l-transparent border-r-transparent border-n-strong ltr:translate-x-[4px] rtl:-translate-x-[4px] -translate-y-[4px]"
-          />
-          <div
-            class="absolute w-[1px] h-full bg-n-strong left-1/2 transform -translate-x-1/2"
-          />
-        </div>
-      </div>
-      <div class="flex flex-col gap-2">
-        <div class="flex items-center justify-between h-5 gap-2">
-          <label class="text-sm text-n-slate-12">
-            {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PARENT') }}
-          </label>
-          <span
-            class="flex items-center justify-center w-24 h-5 text-xs rounded-md text-n-ruby-11 bg-n-alpha-2"
-          >
-            {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PARENT_HELP_LABEL') }}
-          </span>
-        </div>
-        <div
-          class="border border-n-strong h-[60px] gap-2 flex items-center rounded-xl p-3"
-        >
-          <Avatar
-            :name="selectedContact.name || ''"
-            :src="selectedContact.thumbnail || ''"
-            :size="32"
-            rounded-full
-          />
-          <div class="flex flex-col gap-1">
-            <span class="text-sm leading-4 truncate text-n-slate-11">
-              {{ selectedContact.name }}
-            </span>
-            <span class="text-sm leading-4 truncate text-n-slate-11">
-              {{ selectedContact.email }}
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
+    <ContactMergeForm
+      v-model:primary-contact-id="state.primaryContactId"
+      :selected-contact="selectedContact"
+      :primary-contact-list="primaryContactList"
+      :is-searching="isSearching"
+      :has-error="!!v$.primaryContactId.$error"
+      :error-message="
+        v$.primaryContactId.$error
+          ? t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PRIMARY_REQUIRED_ERROR')
+          : ''
+      "
+      @search="onContactSearch"
+    />
     <div class="flex items-center justify-between gap-3">
       <Button
         variant="faded"

From b9b3c43d6327d7e909e53fff2b3aa9a47c3ef84a Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Thu, 21 Nov 2024 15:25:06 +0530
Subject: [PATCH 3/6] feat: Contact note item component

---
 .../Contacts/ContactsSidebar/ContactNotes.vue | 48 ++-----------
 .../components/ContactNoteItem.vue            | 63 +++++++++++++++++
 .../story/ContactNoteItem.story.vue           | 39 +++++++++++
 .../components/story/fixtures.js              | 69 +++++++++++++++++++
 app/javascript/histoire.setup.ts              |  3 +
 5 files changed, 180 insertions(+), 42 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ContactNoteItem.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/story/ContactNoteItem.story.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/story/fixtures.js

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue
index a51129483..dfe3f437c 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue
@@ -3,21 +3,17 @@ import { reactive, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { useRoute } from 'vue-router';
-import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
-import { dynamicTime } from 'shared/helpers/timeHelper';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 
 import Editor from 'dashboard/components-next/Editor/Editor.vue';
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
+import ContactNoteItem from './components/ContactNoteItem.vue';
 
 const { t } = useI18n();
 const store = useStore();
 const route = useRoute();
 
-const { formatMessage } = useMessageFormatter();
-
 const state = reactive({
   message: '',
 });
@@ -88,45 +84,13 @@ useKeyboardEvents(keyboardEvents);
       <Spinner />
     </div>
     <div v-else-if="notes.length > 0">
-      <div
+      <ContactNoteItem
         v-for="note in notes"
         :key="note.id"
-        class="flex flex-col gap-2 px-6 py-2 border-b border-n-strong group/note"
-      >
-        <div class="flex items-center justify-between">
-          <div class="flex items-center gap-1.5 py-2.5 min-w-0">
-            <Avatar
-              :name="note.user.name"
-              :src="note.user.thumbnail"
-              :size="16"
-              rounded-full
-            />
-            <div class="min-w-0 truncate">
-              <span
-                class="inline-flex items-center gap-1 text-sm text-n-slate-11"
-              >
-                <span class="font-medium">{{ getWrittenBy(note) }}</span>
-                {{ $t('CONTACTS_LAYOUT.SIDEBAR.NOTES.WROTE') }}
-                <span class="font-medium">{{
-                  dynamicTime(note.createdAt)
-                }}</span>
-              </span>
-            </div>
-          </div>
-          <Button
-            variant="faded"
-            color="ruby"
-            size="xs"
-            icon="i-lucide-trash"
-            class="opacity-0 group-hover/note:opacity-100"
-            @click="onDelete(note.id)"
-          />
-        </div>
-        <p
-          v-dompurify-html="formatMessage(note.content || '')"
-          class="mb-0 prose-sm prose-p:mb-1 prose-p:mt-0 prose-ul:mb-1 prose-ul:mt-0 text-n-slate-12"
-        />
-      </div>
+        :note="note"
+        :written-by="getWrittenBy(note)"
+        @delete="onDelete"
+      />
     </div>
     <p v-else class="px-6 py-6 text-sm leading-6 text-center text-n-slate-11">
       {{ t('CONTACTS_LAYOUT.SIDEBAR.NOTES.EMPTY_STATE') }}
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ContactNoteItem.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ContactNoteItem.vue
new file mode 100644
index 000000000..81f7a147f
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ContactNoteItem.vue
@@ -0,0 +1,63 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  note: {
+    type: Object,
+    required: true,
+  },
+  writtenBy: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['delete']);
+
+const { t } = useI18n();
+const { formatMessage } = useMessageFormatter();
+
+const handleDelete = () => {
+  emit('delete', props.note.id);
+};
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-2 px-6 py-2 border-b border-n-strong group/note"
+  >
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-1.5 py-2.5 min-w-0">
+        <Avatar
+          :name="note.user.name"
+          :src="note.user.thumbnail"
+          :size="16"
+          rounded-full
+        />
+        <div class="min-w-0 truncate">
+          <span class="inline-flex items-center gap-1 text-sm text-n-slate-11">
+            <span class="font-medium">{{ writtenBy }}</span>
+            {{ t('CONTACTS_LAYOUT.SIDEBAR.NOTES.WROTE') }}
+            <span class="font-medium">{{ dynamicTime(note.createdAt) }}</span>
+          </span>
+        </div>
+      </div>
+      <Button
+        variant="faded"
+        color="ruby"
+        size="xs"
+        icon="i-lucide-trash"
+        class="opacity-0 group-hover/note:opacity-100"
+        @click="handleDelete"
+      />
+    </div>
+    <p
+      v-dompurify-html="formatMessage(note.content || '')"
+      class="mb-0 prose-sm prose-p:mb-1 prose-p:mt-0 prose-ul:mb-1 prose-ul:mt-0 text-n-slate-12"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/story/ContactNoteItem.story.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/story/ContactNoteItem.story.vue
new file mode 100644
index 000000000..0dbf8bf01
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/story/ContactNoteItem.story.vue
@@ -0,0 +1,39 @@
+<script setup>
+import ContactNoteItem from '../ContactNoteItem.vue';
+import notes from './fixtures';
+
+const controls = {
+  writtenBy: {
+    type: 'text',
+    default: 'You',
+  },
+};
+
+// Example delete handler
+const onDelete = noteId => {
+  console.log('Note deleted:', noteId);
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Contacts/ContactNoteItem"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Multiple Notes">
+      <div class="flex flex-col border rounded-lg border-n-strong">
+        <ContactNoteItem
+          v-for="note in notes"
+          :key="note.id"
+          :note="note"
+          :written-by="
+            note.id === notes[1].id
+              ? controls.writtenBy.default
+              : note.user.name
+          "
+          @delete="onDelete"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/story/fixtures.js b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/story/fixtures.js
new file mode 100644
index 000000000..440ad95df
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/story/fixtures.js
@@ -0,0 +1,69 @@
+export default [
+  {
+    id: 12,
+    content:
+      'This tutorial will show you how to use Chatwoot and, hence, ensure you practice effective customer communication. We will explain in detail the following:\n\n* Step-by-step setup of your account, with illustrative screenshots.\n\n* An in-depth explanation of all the core features of Chatwoot.\n\n* Get your account up and running by the end of this tutorial.\n\n* Basic concepts of customer communication.',
+    accountId: null,
+    contactId: null,
+    user: {
+      id: 30,
+      account_id: 2,
+      availability_status: 'offline',
+      auto_offline: true,
+      confirmed: true,
+      email: 'bruce@paperlayer.test',
+      available_name: 'Bruce',
+      name: 'Bruce',
+      role: 'administrator',
+      thumbnail:
+        'https://sivin-tunnel.chatwoot.dev/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBJZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--515dbb35e9ba3c36d14f4c4b77220a675513c1fb/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--df796c2af3c0153e55236c2f3cf3a199ac2cb6f7/2.jpg',
+      custom_role_id: null,
+    },
+    createdAt: 1730786556,
+    updatedAt: 1730786556,
+  },
+  {
+    id: 10,
+    content:
+      'We discussed a couple of things:\n\n* Product offering and how it can be useful to talk with people.\n\n* They’ll reach out to us after an internal review.',
+    accountId: null,
+    contactId: null,
+    user: {
+      id: 1,
+      account_id: 2,
+      availability_status: 'online',
+      auto_offline: false,
+      confirmed: true,
+      email: 'hillary@chatwoot.com',
+      available_name: 'Hillary',
+      name: 'Hillary',
+      role: 'administrator',
+      thumbnail: '',
+      custom_role_id: null,
+    },
+    createdAt: 1730782566,
+    updatedAt: 1730782566,
+  },
+  {
+    id: 9,
+    content:
+      'We discussed a couple of things:\n\n* Product offering and how it can be useful to talk with people.\n\n* They’ll reach out to us after an internal review.',
+    accountId: null,
+    contactId: null,
+    user: {
+      id: 1,
+      account_id: 2,
+      availability_status: 'online',
+      auto_offline: false,
+      confirmed: true,
+      email: 'john@chatwoot.com',
+      available_name: 'John',
+      name: 'John',
+      role: 'administrator',
+      thumbnail: '',
+      custom_role_id: null,
+    },
+    createdAt: 1730782564,
+    updatedAt: 1730782564,
+  },
+];
diff --git a/app/javascript/histoire.setup.ts b/app/javascript/histoire.setup.ts
index 173d7415b..ebc2da9fd 100644
--- a/app/javascript/histoire.setup.ts
+++ b/app/javascript/histoire.setup.ts
@@ -6,6 +6,8 @@ import { vResizeObserver } from '@vueuse/components';
 import { directive as onClickaway } from 'vue3-click-away';
 import FloatingVue from 'floating-vue';
 import store from 'dashboard/store';
+import VueDOMPurifyHTML from 'vue-dompurify-html';
+import { domPurifyConfig } from 'shared/helpers/HTMLSanitizer.js';
 
 const i18n = createI18n({
   legacy: false, // https://github.com/intlify/vue-i18n/issues/1902
@@ -23,4 +25,5 @@ export const setupVue3 = defineSetupVue3(({ app }) => {
     arrowOverflow: false,
     disposeTimeout: 5000000,
   });
+  app.use(VueDOMPurifyHTML, domPurifyConfig);
 });

From 7083137c5a3816b039b41a9aa046d417cca705c8 Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Thu, 21 Nov 2024 15:48:43 +0530
Subject: [PATCH 4/6] chore: Label components

---
 .../Contacts/ContactLabels/ContactLabels.vue  | 50 ++------------
 .../components-next/label/AddLabel.vue        | 49 +++++++++++++
 .../components-next/label/LabelItem.vue       | 22 ++++++
 .../label/story/AddLabel.story.vue            | 27 ++++++++
 .../label/story/Label.story.vue               | 21 ++++++
 .../components-next/label/story/fixtures.js   | 68 +++++++++++++++++++
 6 files changed, 194 insertions(+), 43 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/label/AddLabel.vue
 create mode 100644 app/javascript/dashboard/components-next/label/LabelItem.vue
 create mode 100644 app/javascript/dashboard/components-next/label/story/AddLabel.story.vue
 create mode 100644 app/javascript/dashboard/components-next/label/story/Label.story.vue
 create mode 100644 app/javascript/dashboard/components-next/label/story/fixtures.js

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue b/app/javascript/dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue
index 2078b2290..6f1c5f11a 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue
@@ -1,10 +1,10 @@
 <script setup>
 import { computed, watch, onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
 import { useMapGetter, useStore } from 'dashboard/composables/store';
 
-import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import LabelItem from 'dashboard/components-next/label/LabelItem.vue';
+import AddLabel from 'dashboard/components-next/label/AddLabel.vue';
 
 const props = defineProps({
   contactId: {
@@ -14,7 +14,6 @@ const props = defineProps({
 });
 
 const store = useStore();
-const { t } = useI18n();
 const route = useRoute();
 
 const showDropdown = ref(false);
@@ -100,45 +99,10 @@ onMounted(() => {
 
 <template>
   <div class="flex flex-wrap items-center gap-2">
-    <div
-      v-for="label in savedLabels"
-      :key="label.id"
-      class="bg-n-alpha-2 rounded-md flex items-center h-7 w-fit py-1 ltr:pl-1 rtl:pr-1 ltr:pr-1.5 rtl:pl-1.5"
-    >
-      <div
-        class="w-2 h-2 m-1 rounded-sm"
-        :style="{ backgroundColor: label.color }"
-      />
-      <span class="text-sm text-n-slate-12">
-        {{ label.title }}
-      </span>
-    </div>
-    <div class="relative">
-      <button
-        class="flex items-center gap-1 px-2 py-1 rounded-md outline-dashed h-[26px] outline-1 outline-n-slate-6 hover:bg-n-alpha-2"
-        :class="{ 'bg-n-alpha-2': showDropdown }"
-        @click="showDropdown = !showDropdown"
-      >
-        <span class="i-lucide-plus" />
-        <span class="text-sm text-n-slate-11">
-          {{ t('CONTACTS_LAYOUT.DETAILS.TAG_BUTTON') }}
-        </span>
-      </button>
-      <DropdownMenu
-        v-if="showDropdown"
-        v-on-clickaway="() => (showDropdown = false)"
-        :menu-items="labelMenuItems"
-        show-search
-        class="z-[100] w-48 mt-2 overflow-y-auto ltr:left-0 rtl:right-0 top-full max-h-52"
-        @action="handleLabelAction"
-      >
-        <template #thumbnail="{ item }">
-          <div
-            class="rounded-sm size-2"
-            :style="{ backgroundColor: item.thumbnail.color }"
-          />
-        </template>
-      </DropdownMenu>
-    </div>
+    <LabelItem v-for="label in savedLabels" :key="label.id" :label="label" />
+    <AddLabel
+      :label-menu-items="labelMenuItems"
+      @update-label="handleLabelAction"
+    />
   </div>
 </template>
diff --git a/app/javascript/dashboard/components-next/label/AddLabel.vue b/app/javascript/dashboard/components-next/label/AddLabel.vue
new file mode 100644
index 000000000..23c6ebe42
--- /dev/null
+++ b/app/javascript/dashboard/components-next/label/AddLabel.vue
@@ -0,0 +1,49 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+defineProps({
+  labelMenuItems: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['updateLabel']);
+
+const { t } = useI18n();
+
+const showDropdown = ref(false);
+</script>
+
+<template>
+  <div class="relative">
+    <button
+      class="flex items-center gap-1 px-2 py-1 rounded-md outline-dashed h-[26px] outline-1 outline-n-slate-6 hover:bg-n-alpha-2"
+      :class="{ 'bg-n-alpha-2': showDropdown }"
+      @click="showDropdown = !showDropdown"
+    >
+      <span class="i-lucide-plus" />
+      <span class="text-sm text-n-slate-11">
+        {{ t('CONTACTS_LAYOUT.DETAILS.TAG_BUTTON') }}
+      </span>
+    </button>
+    <DropdownMenu
+      v-if="showDropdown"
+      v-on-clickaway="() => (showDropdown = false)"
+      :menu-items="labelMenuItems"
+      show-search
+      class="z-[100] w-48 mt-2 overflow-y-auto ltr:left-0 rtl:right-0 top-full max-h-52"
+      @action="emit('updateLabel', $event)"
+    >
+      <template #thumbnail="{ item }">
+        <div
+          class="rounded-sm size-2"
+          :style="{ backgroundColor: item.thumbnail.color }"
+        />
+      </template>
+    </DropdownMenu>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/label/LabelItem.vue b/app/javascript/dashboard/components-next/label/LabelItem.vue
new file mode 100644
index 000000000..b96b9b368
--- /dev/null
+++ b/app/javascript/dashboard/components-next/label/LabelItem.vue
@@ -0,0 +1,22 @@
+<script setup>
+defineProps({
+  label: {
+    type: Object,
+    default: null,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="bg-n-alpha-2 rounded-md flex items-center h-7 w-fit py-1 ltr:pl-1 rtl:pr-1 ltr:pr-1.5 rtl:pl-1.5"
+  >
+    <div
+      class="w-2 h-2 m-1 rounded-sm"
+      :style="{ backgroundColor: label.color }"
+    />
+    <span class="text-sm text-n-slate-12">
+      {{ label.title }}
+    </span>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/label/story/AddLabel.story.vue b/app/javascript/dashboard/components-next/label/story/AddLabel.story.vue
new file mode 100644
index 000000000..ea6466feb
--- /dev/null
+++ b/app/javascript/dashboard/components-next/label/story/AddLabel.story.vue
@@ -0,0 +1,27 @@
+<script setup>
+import AddLabel from '../AddLabel.vue';
+import { labelMenuItems } from './fixtures';
+
+function onUpdateLabel(label) {
+  console.log('Label updated:', label);
+}
+</script>
+
+<template>
+  <Story title="Components/Label/Add Label">
+    <Variant title="Default (button with label menu items with active state)">
+      <div class="h-[300px] p-4">
+        <AddLabel
+          :label-menu-items="labelMenuItems"
+          @update-label="onUpdateLabel"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Empty List (button with empty label menu)">
+      <div class="h-[300px] p-4">
+        <AddLabel :label-menu-items="[]" @update-label="onUpdateLabel" />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/label/story/Label.story.vue b/app/javascript/dashboard/components-next/label/story/Label.story.vue
new file mode 100644
index 000000000..5319d56ae
--- /dev/null
+++ b/app/javascript/dashboard/components-next/label/story/Label.story.vue
@@ -0,0 +1,21 @@
+<script setup>
+import Label from '../LabelItem.vue';
+import { label } from './fixtures';
+</script>
+
+<template>
+  <Story title="Components/Label/Label item">
+    <Variant title="Default">
+      <Label :label="label" />
+    </Variant>
+
+    <Variant title="Custom Label">
+      <Label
+        :label="{
+          title: 'Custom Label',
+          color: '#FF5733',
+        }"
+      />
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/label/story/fixtures.js b/app/javascript/dashboard/components-next/label/story/fixtures.js
new file mode 100644
index 000000000..ba61d45bf
--- /dev/null
+++ b/app/javascript/dashboard/components-next/label/story/fixtures.js
@@ -0,0 +1,68 @@
+export const label = {
+  id: 1,
+  title: 'delivery',
+  color: '#A2FDD5',
+};
+
+export const labelMenuItems = [
+  {
+    label: 'delivery',
+    value: 3,
+    thumbnail: {
+      name: 'delivery',
+      color: '#A2FDD5',
+    },
+    isSelected: true,
+    action: 'addLabel',
+  },
+  {
+    label: 'lead',
+    value: 6,
+    thumbnail: {
+      name: 'lead',
+      color: '#F161C8',
+    },
+    isSelected: false,
+    action: 'addLabel',
+  },
+  {
+    label: 'ops-handover',
+    value: 4,
+    thumbnail: {
+      name: 'ops-handover',
+      color: '#A53326',
+    },
+    isSelected: false,
+    action: 'addLabel',
+  },
+  {
+    label: 'billing',
+    value: 1,
+    thumbnail: {
+      name: 'billing',
+      color: '#28AD21',
+    },
+    isSelected: false,
+    action: 'addLabel',
+  },
+  {
+    label: 'premium-customer',
+    value: 5,
+    thumbnail: {
+      name: 'premium-customer',
+      color: '#6FD4EF',
+    },
+    isSelected: false,
+    action: 'addLabel',
+  },
+  {
+    label: 'software',
+    value: 2,
+    thumbnail: {
+      name: 'software',
+      color: '#8F6EF2',
+    },
+    isSelected: false,
+    action: 'addLabel',
+  },
+];

From 2d0c813300754a4d81492342fc9ab63c5601a5e8 Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Thu, 21 Nov 2024 15:54:01 +0530
Subject: [PATCH 5/6] chore: Minor fix

---
 app/javascript/dashboard/components-next/label/AddLabel.vue | 2 +-
 app/javascript/dashboard/i18n/locale/en/components.json     | 3 +++
 app/javascript/dashboard/i18n/locale/en/contact.json        | 1 -
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/javascript/dashboard/components-next/label/AddLabel.vue b/app/javascript/dashboard/components-next/label/AddLabel.vue
index 23c6ebe42..c9571e771 100644
--- a/app/javascript/dashboard/components-next/label/AddLabel.vue
+++ b/app/javascript/dashboard/components-next/label/AddLabel.vue
@@ -27,7 +27,7 @@ const showDropdown = ref(false);
     >
       <span class="i-lucide-plus" />
       <span class="text-sm text-n-slate-11">
-        {{ t('CONTACTS_LAYOUT.DETAILS.TAG_BUTTON') }}
+        {{ t('LABEL.TAG_BUTTON') }}
       </span>
     </button>
     <DropdownMenu
diff --git a/app/javascript/dashboard/i18n/locale/en/components.json b/app/javascript/dashboard/i18n/locale/en/components.json
index 2a728fe13..69cd57fee 100644
--- a/app/javascript/dashboard/i18n/locale/en/components.json
+++ b/app/javascript/dashboard/i18n/locale/en/components.json
@@ -33,5 +33,8 @@
   },
   "SWITCH": {
     "TOGGLE": "Toggle switch"
+  },
+  "LABEL": {
+    "TAG_BUTTON": "tag"
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index 729bdb3ce..5cdb9b321 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -501,7 +501,6 @@
       }
     },
     "DETAILS": {
-      "TAG_BUTTON": "tag",
       "CREATED_AT": "Created {date}",
       "LAST_ACTIVITY": "Last active {date}",
       "DELETE_CONTACT_DESCRIPTION": "Permanently delete this contact. This action is irreversible",

From 7b6195f28b3ca453825c6c2064de69c09d7c3715 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 21 Nov 2024 16:25:13 +0530
Subject: [PATCH 6/6] fix: Component `<woot-tabs />` reactivity issue. (#10476)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Pull Request Template

## Description

This PR will fix reactivity issue with `<woot-tabs />` component.

**Cause of issue**
The `<woot-tabs />` component used an internal ref,
`internalActiveIndex` to track the `active` tab. However, it didn’t sync
with the `index` prop when updated by the parent, causing mismatched tab
selections.

**Solution**
The component now directly uses `props.index` to ensure it always
reflects the latest value from the parent. The unnecessary
`internalActiveIndex` ref has been removed. Changes to the active tab
emit a `change` event to update the parent.


## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

**Loom video**

**Before**

https://www.loom.com/share/76eb32f1e7f7422f84055a102bf80951?sid=bc28c6ff-9640-4d3b-956c-99c1ec164971

**After**

https://www.loom.com/share/6bd8125ede5d43dc8fe115c3f1fb159b?sid=c376617a-94fb-4f71-8664-e0bd9e7af0b4

## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---
 app/javascript/dashboard/components/ui/Tabs/Tabs.vue | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/app/javascript/dashboard/components/ui/Tabs/Tabs.vue b/app/javascript/dashboard/components/ui/Tabs/Tabs.vue
index 682957204..3a7344fb4 100644
--- a/app/javascript/dashboard/components/ui/Tabs/Tabs.vue
+++ b/app/javascript/dashboard/components/ui/Tabs/Tabs.vue
@@ -1,5 +1,4 @@
 <script setup>
-// [VITE] TODO: Test this component across different screen sizes and usages
 import { ref, provide, onMounted, computed } from 'vue';
 import { useEventListener } from '@vueuse/core';
 
@@ -17,15 +16,10 @@ const props = defineProps({
 const emit = defineEmits(['change']);
 
 const hasScroll = ref(false);
-// TODO: We may not this internalActiveIndex, we can use activeIndex directly
-// But right I'll keep it and fix it when testing the rest of the codebase
-const internalActiveIndex = ref(props.index);
 
-// Create a proxy for activeIndex using computed
 const activeIndex = computed({
-  get: () => internalActiveIndex.value,
+  get: () => props.index,
   set: newValue => {
-    internalActiveIndex.value = newValue;
     emit('change', newValue);
   },
 });