feat(v4): Update Inbox view card design (#10599)

app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreviewWithMeta.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 
@@ -20,6 +20,8 @@ const props = defineProps({
 
 const { t } = useI18n();
 
+const slaCardLabelRef = ref(null);
+
 const { getPlainText } = useMessageFormatter();
 
 const lastNonActivityMessageContent = computed(() => {
@@ -45,7 +47,15 @@ const unreadMessagesCount = computed(() => {
   return unreadCount;
 });
 
-const hasSlaThreshold = computed(() => props.conversation?.slaPolicyId);
+const hasSlaThreshold = computed(() => {
+  return (
+    slaCardLabelRef.value?.hasSlaThreshold && props.conversation?.slaPolicyId
+  );
+});
+
+defineExpose({
+  hasSlaThreshold,
+});
 </script>
 
 <template>
@@ -73,7 +83,11 @@ const hasSlaThreshold = computed(() => props.conversation?.slaPolicyId);
           : 'grid-cols-[1fr_20px]'
       "
     >
-      <SLACardLabel v-if="hasSlaThreshold" :conversation="conversation" />
+      <SLACardLabel
+        v-show="hasSlaThreshold"
+        ref="slaCardLabelRef"
+        :conversation="conversation"
+      />
       <div v-if="hasSlaThreshold" class="w-px h-3 bg-n-slate-4" />
       <div class="overflow-hidden">
         <CardLabels

app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { getInboxIconByType } from 'dashboard/helper/inbox';
 import { useRouter, useRoute } from 'vue-router';
 import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper.js';
@@ -33,6 +33,8 @@ const props = defineProps({
 const router = useRouter();
 const route = useRoute();
 
+const cardMessagePreviewWithMetaRef = ref(null);
+
 const currentContact = computed(() => props.contact);
 
 const currentContactName = computed(() => currentContact.value?.name);
@@ -56,8 +58,10 @@ const lastActivityAt = computed(() => {
 });
 
 const showMessagePreviewWithoutMeta = computed(() => {
-  const { slaPolicyId, labels = [] } = props.conversation;
-  return !slaPolicyId && labels.length === 0;
+  const { labels = [] } = props.conversation;
+  return (
+    !cardMessagePreviewWithMetaRef.value?.hasSlaThreshold && labels.length === 0
+  );
 });
 
 const onCardClick = e => {
@@ -82,6 +86,7 @@ const onCardClick = e => {
 
 <template>
   <div
+    role="button"
     class="flex w-full gap-3 px-3 py-4 transition-all duration-300 ease-in-out cursor-pointer"
     @click="onCardClick"
   >
@@ -114,11 +119,12 @@ const onCardClick = e => {
         </div>
       </div>
       <CardMessagePreview
-        v-if="showMessagePreviewWithoutMeta"
+        v-show="showMessagePreviewWithoutMeta"
         :conversation="conversation"
       />
       <CardMessagePreviewWithMeta
-        v-else
+        v-show="!showMessagePreviewWithoutMeta"
+        ref="cardMessagePreviewWithMetaRef"
         :conversation="conversation"
         :account-labels="accountLabels"
       />

app/javascript/dashboard/components-next/Conversation/ConversationCard/SLACardLabel.vue

@@ -31,13 +31,17 @@ const convertObjectCamelCaseToSnakeCase = object => {
 const appliedSLA = computed(() => props.conversation?.appliedSla);
 const isSlaMissed = computed(() => slaStatus.value?.isSlaMissed);
 
+const hasSlaThreshold = computed(() => {
+  return slaStatus.value?.threshold && appliedSLA.value?.id;
+});
+
 const slaStatusText = computed(() => {
   return slaStatus.value?.type?.toUpperCase();
 });
 
 const updateSlaStatus = () => {
   slaStatus.value = evaluateSLAStatus({
-    appliedSla: convertObjectCamelCaseToSnakeCase(appliedSLA.value),
+    appliedSla: convertObjectCamelCaseToSnakeCase(appliedSLA.value || {}),
     chat: props.conversation,
   });
 };
@@ -61,6 +65,21 @@ onUnmounted(() => {
 });
 
 watch(() => props.conversation, updateSlaStatus);
+
+// This expose is to provide context to the parent component, so that it can decided weather
+// a new row has to be added to the conversation card or not
+// SLACardLabel > CardMessagePreviewWithMeta > ConversationCard
+//
+// We need to do this becuase each SLA card has it's own SLA timer
+// and it's just convenient to have this logic in the SLACardLabel component
+// However this is a bit hacky, and we should change this in the future
+//
+// TODO: A better implementation would be to have the timer as a shared composable, just like the provider pattern
+// we use across the next components. Have the calculation be done on the top ConversationCard component
+// and then the value be injected to the SLACardLabel component
+defineExpose({
+  hasSlaThreshold,
+});
 </script>
 
 <template>

app/javascript/dashboard/components-next/Inbox/InboxCard.vue

@@ -0,0 +1,244 @@
+<script setup>
+import { computed, ref, onBeforeMount } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { getInboxIconByType } from 'dashboard/helper/inbox';
+import { dynamicTime, shortTimestamp } from 'shared/helpers/timeHelper';
+import {
+  snoozedReopenTimeToTimestamp,
+  shortenSnoozeTime,
+} from 'dashboard/helper/snoozeHelpers';
+import { NOTIFICATION_TYPES_MAPPING } from 'dashboard/routes/dashboard/inbox/helpers/InboxViewHelpers';
+
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import CardPriorityIcon from 'dashboard/components-next/Conversation/ConversationCard/CardPriorityIcon.vue';
+import SLACardLabel from 'dashboard/components-next/Conversation/ConversationCard/SLACardLabel.vue';
+import InboxContextMenu from 'dashboard/routes/dashboard/inbox/components/InboxContextMenu.vue';
+
+const props = defineProps({
+  inboxItem: { type: Object, default: () => ({}) },
+  stateInbox: { type: Object, default: () => ({}) },
+});
+
+const emit = defineEmits([
+  'click',
+  'contextMenuOpen',
+  'contextMenuClose',
+  'markNotificationAsRead',
+  'markNotificationAsUnRead',
+  'deleteNotification',
+]);
+
+const { t } = useI18n();
+
+const isContextMenuOpen = ref(false);
+const contextMenuPosition = ref({ x: null, y: null });
+const slaCardLabel = ref(null);
+
+const getMessageClasses = {
+  emphasis: 'text-sm font-medium text-n-slate-11',
+  emphasisUnread: 'text-sm font-medium text-n-slate-12',
+  normal: 'text-sm font-normal text-n-slate-11',
+  normalUnread: 'text-sm text-n-slate-12',
+};
+
+const primaryActor = computed(() => props.inboxItem?.primaryActor);
+const meta = computed(() => primaryActor.value?.meta);
+const assigneeMeta = computed(() => meta.value?.sender);
+const isUnread = computed(() => !props.inboxItem?.readAt);
+const inbox = computed(() => props.stateInbox);
+
+const inboxIcon = computed(() => {
+  const { phoneNumber, channelType } = inbox.value;
+  return getInboxIconByType(channelType, phoneNumber);
+});
+
+const hasSlaThreshold = computed(() => {
+  return slaCardLabel.value?.hasSlaThreshold && primaryActor.value?.slaPolicyId;
+});
+
+const lastActivityAt = computed(() => {
+  const timestamp = props.inboxItem?.lastActivityAt;
+  return timestamp ? shortTimestamp(dynamicTime(timestamp)) : '';
+});
+
+const menuItems = computed(() => [
+  { key: 'delete', label: t('INBOX.MENU_ITEM.DELETE') },
+  {
+    key: isUnread.value ? 'mark_as_read' : 'mark_as_unread',
+    label: t(`INBOX.MENU_ITEM.MARK_AS_${isUnread.value ? 'READ' : 'UNREAD'}`),
+  },
+]);
+
+const messageClasses = computed(() => ({
+  emphasis: isUnread.value
+    ? getMessageClasses.emphasisUnread
+    : getMessageClasses.emphasis,
+  normal: isUnread.value
+    ? getMessageClasses.normalUnread
+    : getMessageClasses.normal,
+}));
+
+const formatPushMessage = message => {
+  return message.replace(/^([^:]+):/g, (match, name) => {
+    return `<span class="${messageClasses.value.emphasis}">${name}:</span>`;
+  });
+};
+
+const formattedMessage = computed(() => {
+  const messageContent = `<span class="${messageClasses.value.normal}">${formatPushMessage(props.inboxItem?.pushMessageBody || '')}</span>`;
+
+  return isUnread.value
+    ? `<span class="inline-flex flex-shrink-0 w-2 h-2 mb-px rounded-full bg-n-iris-10 ltr:mr-1 rtl:ml-1"></span> ${messageContent}`
+    : messageContent;
+});
+
+const notificationDetails = computed(() => {
+  const type = props.inboxItem?.notificationType?.toUpperCase() || '';
+  const [icon = '', color = 'text-n-blue-text'] =
+    NOTIFICATION_TYPES_MAPPING[type] || [];
+  return { text: type ? t(`INBOX.TYPES_NEXT.${type}`) : '', icon, color };
+});
+
+const snoozedUntilTime = computed(() => {
+  const { snoozedUntil } = props.inboxItem;
+  if (!snoozedUntil) return null;
+  return shortenSnoozeTime(
+    dynamicTime(snoozedReopenTimeToTimestamp(snoozedUntil))
+  );
+});
+
+const hasLastSnoozed = computed(() => props.inboxItem?.meta?.lastSnoozedAt);
+
+const snoozedText = computed(() => {
+  return !hasLastSnoozed.value
+    ? t('INBOX.TYPES_NEXT.SNOOZED_UNTIL', {
+        time: shortTimestamp(snoozedUntilTime.value),
+      })
+    : t('INBOX.TYPES_NEXT.SNOOZED_ENDS');
+});
+
+const contextMenuActions = {
+  close: () => {
+    isContextMenuOpen.value = false;
+    contextMenuPosition.value = { x: null, y: null };
+    emit('contextMenuClose');
+  },
+  open: e => {
+    e.preventDefault();
+    contextMenuPosition.value = {
+      x: e.pageX || e.clientX,
+      y: e.pageY || e.clientY,
+    };
+    isContextMenuOpen.value = true;
+    emit('contextMenuOpen');
+  },
+  handle: key => {
+    const actions = {
+      mark_as_read: () => emit('markNotificationAsRead', props.inboxItem),
+      mark_as_unread: () => emit('markNotificationAsUnRead', props.inboxItem),
+      delete: () => emit('deleteNotification', props.inboxItem),
+    };
+    actions[key]?.();
+  },
+};
+
+onBeforeMount(contextMenuActions.close);
+</script>
+
+<template>
+  <div
+    role="button"
+    class="flex flex-col w-full gap-2 p-3 transition-all duration-300 ease-in-out cursor-pointer"
+    @contextmenu="contextMenuActions.open($event)"
+    @click="emit('click')"
+  >
+    <div class="flex items-start gap-2">
+      <Avatar
+        :name="assigneeMeta.name"
+        :src="assigneeMeta.thumbnail"
+        :size="20"
+        rounded-full
+        class="mt-1"
+      />
+      <p v-dompurify-html="formattedMessage" class="mb-0 line-clamp-2" />
+    </div>
+    <div class="flex items-center justify-between h-6 gap-2">
+      <div class="flex items-center flex-1 min-w-0 gap-1">
+        <div
+          v-if="snoozedUntilTime || hasLastSnoozed"
+          class="flex items-center w-full min-w-0 gap-2 ltr:pl-1 rtl:pr-1"
+        >
+          <Icon
+            :icon="
+              !hasLastSnoozed
+                ? 'i-lucide-alarm-clock-plus'
+                : 'i-lucide-alarm-clock-off'
+            "
+            class="flex-shrink-0 size-4"
+            :class="!isUnread ? 'text-n-slate-11' : 'text-n-blue-text'"
+          />
+          <span
+            class="text-xs font-medium truncate"
+            :class="!isUnread ? 'text-n-slate-11' : 'text-n-blue-text'"
+          >
+            {{ snoozedText }}
+          </span>
+        </div>
+        <div
+          v-else-if="notificationDetails.text"
+          class="flex items-center w-full min-w-0 gap-2 ltr:pl-1 rtl:pr-1"
+        >
+          <Icon
+            :icon="notificationDetails.icon"
+            :class="isUnread ? notificationDetails.color : 'text-n-slate-11'"
+            class="flex-shrink-0 size-4"
+          />
+          <span
+            class="text-xs font-medium truncate"
+            :class="isUnread ? notificationDetails.color : 'text-n-slate-11'"
+          >
+            {{ notificationDetails.text }}
+          </span>
+        </div>
+      </div>
+      <div class="flex items-center flex-shrink-0 gap-2">
+        <SLACardLabel
+          v-show="hasSlaThreshold"
+          ref="slaCardLabel"
+          :conversation="primaryActor"
+          class="[&>span]:text-xs"
+          :class="
+            !isUnread && '[&>span]:text-n-slate-11 [&>div>svg]:fill-n-slate-11'
+          "
+        />
+        <div v-if="hasSlaThreshold" class="w-px h-3 rounded-sm bg-n-slate-4" />
+        <CardPriorityIcon
+          v-if="primaryActor?.priority"
+          :priority="primaryActor?.priority"
+          class="[&>svg]:size-4"
+        />
+        <div
+          v-if="inboxIcon"
+          v-tooltip.left="inbox?.name"
+          class="flex items-center justify-center flex-shrink-0 rounded-full bg-n-alpha-2 size-4"
+        >
+          <Icon
+            :icon="inboxIcon"
+            class="flex-shrink-0 text-n-slate-11 size-2.5"
+          />
+        </div>
+        <span class="text-sm text-n-slate-10">
+          {{ lastActivityAt }}
+        </span>
+      </div>
+    </div>
+    <InboxContextMenu
+      v-if="isContextMenuOpen"
+      :context-menu-position="contextMenuPosition"
+      :menu-items="menuItems"
+      @close="contextMenuActions.close"
+      @select-action="contextMenuActions.handle"
+    />
+  </div>
+</template>

app/javascript/dashboard/components-next/sidebar/Sidebar.vue

@@ -84,6 +84,7 @@ const menuItems = computed(() => {
       label: t('SIDEBAR.INBOX'),
       icon: 'i-lucide-inbox',
       to: accountScopedRoute('inbox_view'),
+      activeOn: ['inbox_view', 'inbox_view_conversation'],
     },
     {
       name: 'Conversation',