From 8ac1cab27e41886e34caf8b480cb03302f164257 Mon Sep 17 00:00:00 2001
From: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>
Date: Sat, 4 Feb 2023 10:40:23 +0530
Subject: [PATCH] feat: Show contact created date in contact panel (#6364)

* feat: Show contact created date in contact panel

* Add created at in Contacts table

* Moves created at info as tooltip

---------

Co-authored-by: Nithin David <1277421+nithindavid@users.noreply.github.com>
---
 .../dashboard/i18n/locale/en/contact.json         |  2 ++
 .../contacts/components/ContactsTable.vue         |  9 +++++++++
 .../conversation/contact/ContactInfo.vue          | 15 +++++++++++++--
 app/views/api/v1/models/_contact.json.jbuilder    |  2 +-
 4 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index 0a7f4092a..14ab0032d 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -15,6 +15,7 @@
     "INITIATED_FROM": "Initiated from",
     "INITIATED_AT": "Initiated at",
     "IP_ADDRESS": "IP Address",
+    "CREATED_AT_LABEL": "Created",
     "NEW_MESSAGE": "New message",
     "CONVERSATIONS": {
       "NO_RECORDS_FOUND": "There are no previous conversations associated to this contact.",
@@ -206,6 +207,7 @@
         "PHONE_NUMBER": "Phone Number",
         "CONVERSATIONS": "Conversations",
         "LAST_ACTIVITY": "Last Activity",
+        "CREATED_AT": "Created At",
         "COUNTRY": "Country",
         "CITY": "City",
         "SOCIAL_PROFILES": "Social Profiles",
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
index 956b0e717..60ba4f4b6 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
@@ -92,6 +92,7 @@ export default {
         // as it simplier the sort attribute calculation
         const additional = item.additional_attributes || {};
         const { last_activity_at: lastActivityAt } = item;
+        const { created_at: createdAt } = item;
         return {
           ...item,
           phone_number: item.phone_number || '---',
@@ -104,6 +105,7 @@ export default {
           last_activity_at: lastActivityAt
             ? this.dynamicTime(lastActivityAt)
             : '---',
+          created_at: createdAt ? this.dynamicTime(createdAt) : '---',
         };
       });
     },
@@ -244,6 +246,13 @@ export default {
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.LAST_ACTIVITY'),
           align: 'left',
         },
+        {
+          field: 'created_at',
+          key: 'created_at',
+          sortBy: this.sortConfig.created_at || '',
+          title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.CREATED_AT'),
+          align: 'left',
+        },
         {
           field: 'conversationsCount',
           key: 'conversationsCount',
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
index 27192737d..647ec8114 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
@@ -14,6 +14,16 @@
           <h3 class="sub-block-title contact--name">
             {{ contact.name }}
           </h3>
+          <fluent-icon
+            v-if="contact.created_at"
+            v-tooltip="
+              `${$t('CONTACT_PANEL.CREATED_AT_LABEL')} ${dynamicTime(
+                contact.created_at
+              )}`
+            "
+            icon="info"
+            size="14"
+          />
           <a
             :href="contactProfileLink"
             class="fs-default"
@@ -28,6 +38,7 @@
             />
           </a>
         </div>
+
         <p v-if="additionalAttributes.description" class="contact--bio">
           {{ additionalAttributes.description }}
         </p>
@@ -147,7 +158,7 @@
 </template>
 <script>
 import { mixin as clickaway } from 'vue-clickaway';
-
+import timeMixin from 'dashboard/mixins/time';
 import ContactInfoRow from './ContactInfoRow';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import SocialIcons from './SocialIcons';
@@ -169,7 +180,7 @@ export default {
     NewConversation,
     ContactMergeModal,
   },
-  mixins: [alertMixin, adminMixin, clickaway],
+  mixins: [alertMixin, adminMixin, clickaway, timeMixin],
   props: {
     contact: {
       type: Object,
diff --git a/app/views/api/v1/models/_contact.json.jbuilder b/app/views/api/v1/models/_contact.json.jbuilder
index c5ce61bb4..406f9f4fd 100644
--- a/app/views/api/v1/models/_contact.json.jbuilder
+++ b/app/views/api/v1/models/_contact.json.jbuilder
@@ -9,7 +9,7 @@ json.thumbnail resource.avatar_url
 json.custom_attributes resource.custom_attributes
 json.conversations_count resource.conversations_count if resource[:conversations_count].present?
 json.last_activity_at resource.last_activity_at.to_i if resource[:last_activity_at].present?
-
+json.created_at resource.created_at.to_i if resource[:created_at].present?
 # we only want to output contact inbox when its /contacts endpoints
 if defined?(with_contact_inboxes) && with_contact_inboxes.present?
   json.contact_inboxes do