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>

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",

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',

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,

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