feat: common base attachment component

app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue

@@ -0,0 +1,74 @@
+<!-- AttachmentBubble.vue -->
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import BaseBubble from './Base.vue';
+import Icon from 'next/icon/Icon.vue';
+
+const props = defineProps({
+  icon: { type: [String, Object], required: true },
+  iconBgColor: { type: String, default: 'bg-n-alpha-3' },
+  sender: { type: Object, default: () => ({}) },
+  senderTranslationKey: { type: String, required: true },
+  content: { type: String, required: true },
+  action: {
+    type: Object,
+    required: true,
+    validator: action => {
+      return action.label && (action.href || action.onClick);
+    },
+  },
+});
+
+const { t } = useI18n();
+
+const senderName = computed(() => {
+  return props.sender.name;
+});
+</script>
+
+<template>
+  <BaseBubble class="overflow-hidden grid gap-4 min-w-64 p-0">
+    <slot name="before" />
+    <div class="grid gap-3 px-3 pt-3 z-20">
+      <div
+        class="size-8 rounded-lg grid place-content-center"
+        :class="iconBgColor"
+      >
+        <slot name="icon">
+          <Icon :icon="icon" class="text-white size-4" />
+        </slot>
+      </div>
+      <div class="space-y-1">
+        <div v-if="senderName" class="text-n-slate-12 text-sm truncate">
+          {{
+            t(senderTranslationKey, {
+              sender: senderName,
+            })
+          }}
+        </div>
+        <div class="truncate text-sm text-n-slate-11">
+          {{ content }}
+        </div>
+      </div>
+    </div>
+    <div v-if="action" class="px-3 pb-3">
+      <a
+        v-if="action.href"
+        :href="action.href"
+        rel="noreferrer noopener nofollow"
+        target="_blank"
+        class="w-full block bg-n-solid-3 px-4 py-2 rounded-lg text-sm text-center"
+      >
+        {{ action.label }}
+      </a>
+      <button
+        v-else
+        class="w-full bg-n-solid-3 px-4 py-2 rounded-lg text-sm"
+        @click="action.onClick"
+      >
+        {{ action.label }}
+      </button>
+    </div>
+  </BaseBubble>
+</template>

app/javascript/dashboard/components-next/message/bubbles/Contact.vue

@@ -3,8 +3,7 @@ import { computed } from 'vue';
 import { useAlert } from 'dashboard/composables';
 import { useStore } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
-import BaseBubble from './Base.vue';
-import Icon from 'next/icon/Icon.vue';
+import BaseAttachmentBubble from './BaseAttachment.vue';
 
 import {
   DuplicateContactException,
@@ -52,10 +51,6 @@ const attachment = computed(() => {
   return props.attachments[0];
 });
 
-const senderName = computed(() => {
-  return props.sender.name;
-});
-
 const phoneNumber = computed(() => {
   return attachment.value.fallbackTitle;
 });
@@ -123,32 +118,20 @@ async function addContact() {
     }
   }
 }
+
+const action = computed(() => ({
+  label: t('CONVERSATION.SAVE_CONTACT'),
+  onClick: addContact,
+}));
 </script>
 
 <template>
-  <BaseBubble class="p-3 min-w-64 grid gap-4">
-    <div class="grid gap-3">
-      <div class="size-8 rounded-lg bg-[#D6409F] grid place-content-center">
-        <Icon icon="i-teenyicons-user-circle-solid" class="text-white size-4" />
-      </div>
-      <div class="space-y-1">
-        <div v-if="senderName" class="text-n-slate-12 text-sm truncate">
-          {{
-            t('CONVERSATION.SHARED_ATTACHMENT.CONTACT', {
-              sender: senderName,
-            })
-          }}
-        </div>
-        <div class="truncate text-sm text-n-slate-11">{{ phoneNumber }}</div>
-      </div>
-    </div>
-    <div v-if="formattedPhoneNumber" class="link-wrap">
-      <button
-        class="w-full bg-n-solid-3 px-4 py-2 rounded-lg text-sm"
-        @click.prevent="addContact"
-      >
-        {{ t('CONVERSATION.SAVE_CONTACT') }}
-      </button>
-    </div>
-  </BaseBubble>
+  <BaseAttachmentBubble
+    icon="i-teenyicons-user-circle-solid"
+    icon-bg-color="bg-[#D6409F]"
+    :sender="sender"
+    sender-translation-key="CONVERSATION.SHARED_ATTACHMENT.CONTACT"
+    :content="phoneNumber"
+    :action="formattedPhoneNumber ? action : null"
+  />
 </template>

app/javascript/dashboard/components-next/message/bubbles/File.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import BaseBubble from './Base.vue';
+import BaseAttachmentBubble from './BaseAttachment.vue';
 import FileIcon from 'next/icon/FileIcon.vue';
 
 /**
@@ -41,10 +41,6 @@ const url = computed(() => {
   return props.attachments[0].dataUrl;
 });
 
-const senderName = computed(() => {
-  return props.sender.name;
-});
-
 const fileName = computed(() => {
   if (url.value) {
     const filename = url.value.substring(url.value.lastIndexOf('/') + 1);
@@ -59,34 +55,19 @@ const fileType = computed(() => {
 </script>
 
 <template>
-  <BaseBubble class="p-3 min-w-64 grid gap-4">
-    <div class="grid gap-3">
-      <div
-        class="size-8 rounded-lg grid place-content-center bg-n-alpha-3 dark:bg-n-alpha-white"
-      >
-        <FileIcon :file-type="fileType" class="size-4" />
-      </div>
-      <div class="space-y-1">
-        <div v-if="senderName" class="text-n-slate-12 text-sm truncate">
-          {{
-            t('CONVERSATION.SHARED_ATTACHMENT.FILE', {
-              sender: senderName,
-            })
-          }}
-        </div>
-        <div class="truncate text-sm text-n-slate-11">
-          {{ decodeURI(fileName) }}
-        </div>
-      </div>
-    </div>
-    <a
-      :href="url"
-      rel="noreferrer noopener nofollow"
-      target="_blank"
-      class="w-full bg-n-solid-3 px-4 py-2 rounded-lg text-sm text-center"
-      @click.prevent="addContact"
-    >
-      {{ $t('CONVERSATION.DOWNLOAD') }}
-    </a>
-  </BaseBubble>
+  <BaseAttachmentBubble
+    icon="i-teenyicons-user-circle-solid"
+    icon-bg-color="bg-n-alpha-3 dark:bg-n-alpha-white"
+    :sender="sender"
+    sender-translation-key="CONVERSATION.SHARED_ATTACHMENT.FILE"
+    :content="decodeURI(fileName)"
+    :action="{
+      href: url,
+      label: $t('CONVERSATION.DOWNLOAD'),
+    }"
+  >
+    <template #icon>
+      <FileIcon :file-type="fileType" class="size-4" />
+    </template>
+  </BaseAttachmentBubble>
 </template>

app/javascript/dashboard/components-next/message/bubbles/Location.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, onMounted, nextTick } from 'vue';
-import BaseBubble from './Base.vue';
+import BaseAttachmentBubble from './BaseAttachment.vue';
 import Icon from 'next/icon/Icon.vue';
 import { useI18n } from 'vue-i18n';
 import maplibregl from 'maplibre-gl';
@@ -86,33 +86,21 @@ onMounted(async () => {
 </script>
 
 <template>
-  <BaseBubble class="min-w-64 grid gap-4 overflow-hidden">
-    <div id="map" class="max-w-md min-w-64 w-full h-28 -mb-8 z-10" />
-    <div class="grid gap-3 px-3 z-20">
-      <div class="size-8 rounded-lg bg-[#0D9B8A] grid place-content-center">
-        <Icon icon="i-ph-navigation-arrow-fill" class="text-white size-4" />
-      </div>
-      <div class="truncate text-sm text-n-slate-11">
-        <div v-if="senderName" class="text-n-slate-12 text-sm truncate">
-          {{
-            t('CONVERSATION.SHARED_ATTACHMENT.LOCATION', {
-              sender: senderName,
-            })
-          }}
-        </div>
-        {{ title }}
-      </div>
-    </div>
-    <div class="px-3 pb-3 w-full">
-      <a
-        :href="mapUrl"
-        target="blank"
-        class="w-full block bg-n-solid-3 px-4 py-2 rounded-lg text-sm text-center"
-      >
-        {{ t('COMPONENTS.LOCATION_BUBBLE.SEE_ON_MAP') }}
-      </a>
-    </div>
-  </BaseBubble>
+  <BaseAttachmentBubble
+    icon="i-ph-navigation-arrow-fill"
+    icon-bg-color="bg-[#0D9B8A]"
+    :sender="sender"
+    sender-translation-key="CONVERSATION.SHARED_ATTACHMENT.LOCATION"
+    :content="title"
+    :action="{
+      label: t('COMPONENTS.LOCATION_BUBBLE.SEE_ON_MAP'),
+      href: mapUrl,
+    }"
+  >
+    <template #before>
+      <div id="map" class="max-w-md min-w-64 w-full h-28 -mb-12 z-10" />
+    </template>
+  </BaseAttachmentBubble>
 </template>
 
 <style>