From 909755c34057c4b6c5b9e47bbede5c9da1ebb736 Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Tue, 12 Nov 2024 22:02:26 +0530
Subject: [PATCH] chore: Clean up

---
 .../ContactCustomAttributes.vue               | 12 ++++++--
 .../ContactsSidebar/ContactHistory.vue        |  7 ++++-
 .../Contacts/ContactsSidebar/ContactNotes.vue |  5 +++-
 .../CustomAttributes/DateAttribute.vue        |  6 ++--
 .../CustomAttributes/ListAttribute.vue        |  6 ++--
 .../CustomAttributes/OtherAttribute.vue       | 28 +++++++++++++++----
 .../dashboard/i18n/locale/en/contact.json     |  7 ++++-
 7 files changed, 54 insertions(+), 17 deletions(-)

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue
index f8ae821d7..d2e678241 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue
@@ -20,6 +20,10 @@ const attributes = useMapGetter('attributes/getAttributesByModelType');
 
 const contactAttributes = computed(() => attributes.value('contact_attribute'));
 
+const hasContactAttributes = computed(
+  () => contactAttributes.value?.length > 0
+);
+
 // Convert attribute key value from snake_case to camelCase
 const toCamelCase = str =>
   str.toLowerCase().replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
@@ -79,11 +83,12 @@ const filteredUnusedAttributes = computed(() => {
 
 const unusedAttributesCount = computed(() => unusedAttributes.value?.length);
 const hasNoUnusedAttributes = computed(() => unusedAttributesCount.value === 0);
+const hasNoUsedAttributes = computed(() => usedAttributes.value.length === 0);
 </script>
 
 <template>
-  <div class="flex flex-col gap-6 px-6 py-6">
-    <div class="flex flex-col gap-2">
+  <div v-if="hasContactAttributes" class="flex flex-col gap-6 px-6 py-6">
+    <div v-if="!hasNoUsedAttributes" class="flex flex-col gap-2">
       <ContactCustomAttributeItem
         v-for="attribute in usedAttributes"
         :key="attribute.id"
@@ -129,4 +134,7 @@ const hasNoUnusedAttributes = computed(() => unusedAttributesCount.value === 0);
       </div>
     </div>
   </div>
+  <p v-else class="px-6 py-10 text-sm leading-6 text-center text-n-slate-11">
+    {{ t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.EMPTY_STATE') }}
+  </p>
 </template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactHistory.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactHistory.vue
index 9e8722a07..595b2eedc 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactHistory.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactHistory.vue
@@ -2,10 +2,12 @@
 import { computed } from 'vue';
 import { useMapGetter } from 'dashboard/composables/store';
 import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import ConversationCard from 'dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue';
 
+const { t } = useI18n();
 const route = useRoute();
 
 const conversations = useMapGetter(
@@ -32,7 +34,7 @@ const contactConversations = computed(() =>
   >
     <Spinner />
   </div>
-  <div v-else class="flex flex-col py-6">
+  <div v-else-if="contactConversations.length > 0" class="flex flex-col py-6">
     <div
       v-for="conversation in contactConversations"
       :key="conversation.id"
@@ -48,4 +50,7 @@ const contactConversations = computed(() =>
       />
     </div>
   </div>
+  <p v-else class="px-6 py-10 text-sm leading-6 text-center text-n-slate-11">
+    {{ t('CONTACTS_LAYOUT.SIDEBAR.HISTORY.EMPTY_STATE') }}
+  </p>
 </template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue
index 2f7478730..a51129483 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue
@@ -87,7 +87,7 @@ useKeyboardEvents(keyboardEvents);
     >
       <Spinner />
     </div>
-    <div v-else>
+    <div v-else-if="notes.length > 0">
       <div
         v-for="note in notes"
         :key="note.id"
@@ -128,5 +128,8 @@ useKeyboardEvents(keyboardEvents);
         />
       </div>
     </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') }}
+    </p>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue b/app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue
index 5d0537cb4..78478b43d 100644
--- a/app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue
+++ b/app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue
@@ -77,7 +77,7 @@ const handleInputUpdate = async () => {
 
 <template>
   <div
-    class="flex items-center w-full gap-2"
+    class="flex items-center w-full min-w-0 gap-2"
     :class="{
       'justify-start': isEditingView,
       'justify-end': !isEditingView,
@@ -85,11 +85,11 @@ const handleInputUpdate = async () => {
   >
     <span
       v-if="!isEditingValue"
-      class="text-sm"
+      class="min-w-0 text-sm"
       :class="{
         'cursor-pointer text-n-slate-11 hover:text-n-slate-12 py-2 select-none font-medium':
           !isEditingView,
-        'text-n-slate-12': isEditingView,
+        'text-n-slate-12 truncate flex-1': isEditingView,
       }"
       @click="toggleEditValue(!isEditingView)"
     >
diff --git a/app/javascript/dashboard/components-next/CustomAttributes/ListAttribute.vue b/app/javascript/dashboard/components-next/CustomAttributes/ListAttribute.vue
index a4da94a23..ac931caf9 100644
--- a/app/javascript/dashboard/components-next/CustomAttributes/ListAttribute.vue
+++ b/app/javascript/dashboard/components-next/CustomAttributes/ListAttribute.vue
@@ -42,7 +42,7 @@ const handleAttributeAction = async action => {
 
 <template>
   <div
-    class="flex items-center w-full gap-2"
+    class="flex items-center w-full min-w-0 gap-2"
     :class="{
       'justify-start': isEditingView,
       'justify-end': !isEditingView,
@@ -53,11 +53,11 @@ const handleAttributeAction = async action => {
       class="relative flex items-center"
     >
       <span
-        class="text-sm"
+        class="min-w-0 text-sm"
         :class="{
           'cursor-pointer text-n-slate-11 hover:text-n-slate-12 py-2 select-none font-medium':
             !isEditingView,
-          'text-n-slate-12': isEditingView,
+          'text-n-slate-12 truncate flex-1': isEditingView,
         }"
         @click="toggleAttributeListDropdown(!props.isEditingView)"
       >
diff --git a/app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue b/app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue
index 31f463493..ab5aa1cd3 100644
--- a/app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue
+++ b/app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue
@@ -115,7 +115,7 @@ const handleInputUpdate = async () => {
 
 <template>
   <div
-    class="flex items-center w-full gap-2"
+    class="flex items-center w-full min-w-0 gap-2"
     :class="{
       'justify-start': isEditingView,
       'justify-end': !isEditingView,
@@ -123,17 +123,33 @@ const handleInputUpdate = async () => {
   >
     <span
       v-if="!isEditingValue"
-      class="text-sm"
+      class="min-w-0 text-sm"
       :class="{
         'cursor-pointer text-n-slate-11 hover:text-n-slate-12 py-2 select-none font-medium':
           !isEditingView,
-        'text-n-slate-12': isEditingView,
+        'text-n-slate-12 truncate flex-1':
+          isEditingView && !isAttributeTypeLink,
+        'truncate flex-1 hover:text-n-brand text-n-blue-text':
+          isEditingView && isAttributeTypeLink,
       }"
       @click="toggleEditValue(!isEditingView)"
     >
-      {{
-        attribute.value || t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.TRIGGER.INPUT')
-      }}
+      <a
+        v-if="isAttributeTypeLink && attribute.value"
+        :href="attribute.value"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="hover:underline"
+        @click.stop
+      >
+        {{ attribute.value }}
+      </a>
+      <template v-else>
+        {{
+          attribute.value ||
+          t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.TRIGGER.INPUT')
+        }}
+      </template>
     </span>
 
     <div
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index 0c0cb6955..e62f75948 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -536,7 +536,11 @@
         "PLACEHOLDER": "Add a note",
         "WROTE": "wrote",
         "YOU": "You",
-        "SAVE": "Save note"
+        "SAVE": "Save note",
+        "EMPTY_STATE": "There are no notes associated to this contact. You can add a note by typing in the box above."
+      },
+      "HISTORY": {
+        "EMPTY_STATE": "There are no previous conversations associated to this contact"
       },
       "MERGE": {
         "TITLE": "Merge contact",
@@ -561,6 +565,7 @@
       "ATTRIBUTES": {
         "SEARCH_PLACEHOLDER": "Search for attributes",
         "UNUSED_ATTRIBUTES": "{count} Used attribute | {count} Unused attributes",
+        "EMPTY_STATE": "There are no contact custom attributes available in this account. You can create a custom attribute in settings.",
         "YES": "Yes",
         "NO": "No",
         "TRIGGER": {