From cf664ca2a093c2406d428ef3503612ae170fe7ab Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Mon, 29 Jan 2024 14:52:55 +0530
Subject: [PATCH] feat: Inbox item card component (#8801)

---
 .../routes/dashboard/inbox/InboxCard.vue      | 70 ++++++++++++++++
 .../inbox/components/InboxNameAndId.vue       | 34 ++++++++
 .../inbox/components/PriorityIcon.vue         | 75 +++++++++++++++++
 .../dashboard/inbox/components/StatusIcon.vue | 80 +++++++++++++++++++
 4 files changed, 259 insertions(+)
 create mode 100644 app/javascript/dashboard/routes/dashboard/inbox/InboxCard.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/inbox/components/InboxNameAndId.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/inbox/components/PriorityIcon.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/inbox/components/StatusIcon.vue

diff --git a/app/javascript/dashboard/routes/dashboard/inbox/InboxCard.vue b/app/javascript/dashboard/routes/dashboard/inbox/InboxCard.vue
new file mode 100644
index 000000000..ed24e392f
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxCard.vue
@@ -0,0 +1,70 @@
+<script setup>
+// import { defineProps } from 'vue';
+
+import PriorityIcon from './components/PriorityIcon.vue';
+import StatusIcon from './components/StatusIcon.vue';
+import InboxNameAndId from './components/InboxNameAndId.vue';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+
+// const props = defineProps({
+//   notificationItem: {
+//     type: Object,
+//     default: () => {},
+//   },
+// });
+
+const assigneeMeta = {
+  thumbnail: '',
+  name: 'Michael Johnson',
+};
+const { thumbnail, name } = assigneeMeta || {};
+const status = 'open';
+const priority = 'high';
+const inboxTypeMessage = 'Mentioned by Michael';
+const inboxMessage = 'What is the best way to get started?';
+const inbox = {
+  inbox_id: 16787,
+  inbox_name: 'Chatwoot Support',
+};
+</script>
+
+<template>
+  <div
+    class="flex max-w-[360px] flex-col pl-5 pr-3 gap-2.5 py-3 w-full bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-500 hover:bg-slate-25 dark:hover:bg-slate-800 cursor-pointer"
+  >
+    <div class="flex relative items-center justify-between w-full">
+      <div
+        class="absolute -left-3.5 flex w-2 h-2 rounded bg-woot-500 dark:bg-woot-500"
+      />
+      <InboxNameAndId :inbox="inbox" />
+      <div class="flex gap-2">
+        <PriorityIcon :priority="priority" />
+        <StatusIcon :status="status" />
+      </div>
+    </div>
+
+    <div class="flex flex-row justify-between items-center w-full">
+      <div class="flex gap-1.5 items-center max-w-[80%]">
+        <Thumbnail
+          v-if="assigneeMeta"
+          :src="thumbnail"
+          :username="name"
+          size="20px"
+        />
+        <div class="flex min-w-0">
+          <span
+            class="font-medium text-slate-800 dark:text-slate-100 text-xs overflow-hidden text-ellipsis whitespace-nowrap"
+          >
+            {{ inboxTypeMessage }}<span v-if="inboxTypeMessage">:</span>
+            <span class="font-normal">{{ inboxMessage }}</span>
+          </span>
+        </div>
+      </div>
+      <span
+        class="font-medium text-slate-600 dark:text-slate-300 text-xs whitespace-nowrap"
+      >
+        10h ago
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxNameAndId.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxNameAndId.vue
new file mode 100644
index 000000000..3edefd31b
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxNameAndId.vue
@@ -0,0 +1,34 @@
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  inbox: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const { inbox } = props;
+const { inbox_id: inboxId, inbox_name: inboxName } = inbox;
+</script>
+<template>
+  <div
+    class="inline-flex items-center rounded-[4px] border border-slate-100 dark:border-slate-600 divide-x divide-slate-100 dark:divide-slate-600 bg-none"
+  >
+    <div class="flex items-center gap-0.5 py-0.5 px-1.5">
+      <fluent-icon
+        class="text-slate-600 dark:text-slate-300"
+        icon="globe-desktop"
+        size="14"
+      />
+      <span class="font-medium text-slate-600 dark:text-slate-300 text-xs">
+        {{ inboxName }}
+      </span>
+    </div>
+    <div class="flex items-center py-0.5 px-1.5">
+      <span class="font-medium text-slate-600 dark:text-slate-300 text-xs">
+        {{ inboxId }}
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/PriorityIcon.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/PriorityIcon.vue
new file mode 100644
index 000000000..0a14979ed
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/PriorityIcon.vue
@@ -0,0 +1,75 @@
+<script setup>
+import { CONVERSATION_PRIORITY } from 'shared/constants/messages';
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  priority: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <div class="inline-flex items-center justify-center rounded-md">
+    <!-- High Priority -->
+    <svg
+      v-if="props.priority === CONVERSATION_PRIORITY.HIGH"
+      class="h-4 w-4"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="4" y="12" width="4" height="8" rx="1" fill="#FFC291" />
+      <rect x="10" y="8" width="4" height="12" rx="1" fill="#FFC291" />
+      <rect x="16" y="4" width="4" height="16" rx="1" fill="#FFC291" />
+    </svg>
+
+    <!-- Low Priority -->
+    <svg
+      v-if="props.priority === CONVERSATION_PRIORITY.LOW"
+      class="h-4 w-4"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="4" y="12" width="4" height="8" rx="1" fill="#FFC291" />
+      <rect x="10" y="8" width="4" height="12" rx="1" fill="#DDDDDD" />
+      <rect x="16" y="4" width="4" height="16" rx="1" fill="#DDDDDD" />
+    </svg>
+
+    <!-- Medium Priority  -->
+    <svg
+      v-if="props.priority === CONVERSATION_PRIORITY.MEDIUM"
+      class="h-4 w-4"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="4" y="12" width="4" height="8" rx="1" fill="#FFC291" />
+      <rect x="10" y="8" width="4" height="12" rx="1" fill="#FFC291" />
+      <rect x="16" y="4" width="4" height="16" rx="1" fill="#DDDDDD" />
+    </svg>
+
+    <!-- Urgent Priority -->
+    <svg
+      v-if="props.priority === CONVERSATION_PRIORITY.URGENT"
+      class="h-4 w-4"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="4" y="12" width="4" height="8" rx="1" fill="#E5484D" />
+      <rect x="10" y="8" width="4" height="12" rx="1" fill="#E5484D" />
+      <rect x="16" y="4" width="4" height="16" rx="1" fill="#E5484D" />
+    </svg>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/StatusIcon.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/StatusIcon.vue
new file mode 100644
index 000000000..9662d5fb2
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/StatusIcon.vue
@@ -0,0 +1,80 @@
+<script setup>
+import { CONVERSATION_STATUS } from 'shared/constants/messages';
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  status: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <div class="inline-flex items-center justify-center rounded-md">
+    <!-- Pending -->
+    <svg
+      v-if="props.status === CONVERSATION_STATUS.PENDING"
+      class="h-3.5 w-3.5"
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.1 0.0449978V1.8558C4.5486 2.2986 1.8 5.328 1.8 9C1.8 12.9762 5.0238 16.2 9 16.2C10.6641 16.2 12.195 15.6357 13.4154 14.688L14.6961 15.9687C13.1445 17.2377 11.16 18 9 18C4.0293 18 0 13.9707 0 9C0 4.3335 3.5523 0.495898 8.1 0.0449978ZM17.955 9.9C17.775 11.7099 17.0604 13.3623 15.9687 14.6952L14.688 13.4154C15.462 12.4191 15.9804 11.2149 16.1442 9.9H17.9559H17.955ZM9.9018 0.0449978C14.1534 0.467098 17.5338 3.8484 17.9568 8.1H16.1451C15.7392 4.8438 13.158 2.2626 9.9018 1.8558V0.0440979V0.0449978Z"
+        class="fill-[#B9BBC6]"
+      />
+    </svg>
+    <!-- Open -->
+    <svg
+      v-if="props.status === CONVERSATION_STATUS.OPEN"
+      class="h-3.5 w-3.5"
+      width="19"
+      height="19"
+      viewBox="0 0 19 19"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.375 18.875C4.19733 18.875 0 14.6776 0 9.5C0 4.32233 4.19733 0.125 9.375 0.125C14.5526 0.125 18.75 4.32233 18.75 9.5C18.75 14.6776 14.5526 18.875 9.375 18.875ZM9.375 17C13.5172 17 16.875 13.6422 16.875 9.5C16.875 5.35786 13.5172 2 9.375 2C5.23286 2 1.875 5.35786 1.875 9.5C1.875 13.6422 5.23286 17 9.375 17Z"
+        class="fill-[#ED8A5C]"
+      />
+    </svg>
+
+    <!-- Snoozed -->
+    <svg
+      v-if="props.status === CONVERSATION_STATUS.SNOOZED"
+      class="h-3.5 w-3.5"
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9 18C4.0293 18 0 13.9707 0 9C0 4.0293 4.0293 0 9 0C13.9707 0 18 4.0293 18 9C18 13.9707 13.9707 18 9 18ZM2.9961 12.9825C3.58766 13.8676 4.36812 14.6105 5.28129 15.1577C6.19446 15.7049 7.21761 16.0428 8.27707 16.147C9.33652 16.2513 10.4059 16.1193 11.4082 15.7606C12.4105 15.4019 13.3208 14.8254 14.0736 14.0726C14.8263 13.3198 15.4027 12.4094 15.7613 11.4071C16.12 10.4047 16.2518 9.33532 16.1475 8.27588C16.0431 7.21644 15.7052 6.19332 15.1579 5.2802C14.6106 4.36707 13.8676 3.58668 12.9825 2.9952C13.3706 4.3796 13.383 5.84237 13.0186 7.23318C12.6542 8.62399 11.926 9.89269 10.9089 10.9089C9.89277 11.9258 8.62423 12.6539 7.23359 13.0183C5.84296 13.3828 4.38037 13.3704 2.9961 12.9825Z"
+        class="fill-[#0B68CB]"
+      />
+    </svg>
+
+    <!-- Resolved -->
+    <svg
+      v-if="props.status === CONVERSATION_STATUS.RESOLVED"
+      class="h-3.5 w-3.5"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="3 3 17.92 17.92"
+    >
+      <path
+        d="M11.96 20.92C7.01152 20.92 3 16.9084 3 11.96C3 7.01152 7.01152 3 11.96 3C16.9084 3 20.92 7.01152 20.92 11.96C20.92 16.9084 16.9084 20.92 11.96 20.92ZM11.96 19.128C15.9188 19.128 19.128 15.9188 19.128 11.96C19.128 8.00122 15.9188 4.792 11.96 4.792C8.00122 4.792 4.792 8.00122 4.792 11.96C4.792 15.9188 8.00122 19.128 11.96 19.128Z"
+        class="fill-[#5BB98C]"
+      />
+      <path
+        d="M11.9599 17.9333C15.2589 17.9333 17.9332 15.2589 17.9332 11.96C17.9332 8.66098 15.2589 5.98663 11.9599 5.98663C8.66092 5.98663 5.98657 8.66098 5.98657 11.96C5.98657 15.2589 8.66092 17.9333 11.9599 17.9333Z"
+        class="fill-[#5BB98C]"
+      />
+    </svg>
+  </div>
+</template>