@ozdao/martyrs 0.2.604 → 0.2.605

package/src/modules/orders/components/sections/CustomerDetails.vue

@@ -1,77 +1,131 @@
 <template>
-  <div class="gap-small cols-1">
-    <Block title="Customer Information">
-      <div class="gap-small">
-        <div class="flex">
-          <strong class="mn-r-auto">Name:</strong>
-          <span>{{ customer.profile?.name || 'Not specified' }}</span>
-        </div>
-        <div class="flex">
-          <strong class="mn-r-auto">Email:</strong>
-          <span>{{ customer.email || 'Not specified' }}</span>
-        </div>
-        <div class="flex">
-          <strong class="mn-r-auto">Phone:</strong>
-          <span>{{ customer.phone || 'Not specified' }}</span>
+  <div class="w-100">
+    <p class="mn-b-small opacity-50">
+      Customer information and activity details.
+    </p>
+
+    <!-- Name & Status -->
+    <div class="mn-b-small">
+      <div class="flex-nowrap flex gap-thin">
+        <div class="w-100 bg-light radius-small pd-small">
+          <p class="mn-b-micro opacity-50 t-small">Name</p>
+          <p class="fw-medium">{{ customer.profile?.name || 'Not specified' }}</p>
         </div>
-        <div class="flex">
-          <strong class="mn-r-auto">Status:</strong>
+        <div class="w-100 bg-light radius-small pd-small">
+          <p class="mn-b-thin opacity-50 t-small">Status</p>
           <StatusBadge :value="customer.status" />
         </div>
-        <div class="flex">
-          <strong class="mn-r-auto">Source:</strong>
-          <span>{{ customer.source || 'Unknown' }}</span>
+      </div>
+    </div>
+
+    <!-- Contact -->
+    <div class="mn-b-small">
+      <p class="mn-b-thin fw-medium">Contact</p>
+      <div class="flex-nowrap flex-column flex gap-thin">
+        <div class="w-100 bg-light radius-small pd-small">
+          <p class="mn-b-micro opacity-50 t-small">Email</p>
+          <a v-if="customer.email" :href="`mailto:${customer.email}`" class="t-second">{{ customer.email }}</a>
+          <p v-else>—</p>
         </div>
-        <div class="flex">
-          <strong class="mn-r-auto">Type:</strong>
-          <span>{{ customer.identity?.type || 'Visitor' }}</span>
+        <div class="w-100 bg-light radius-small pd-small">
+          <p class="mn-b-micro opacity-50 t-small">Phone</p>
+          <a v-if="customer.phone" :href="`tel:${customer.phone}`" class="t-second">{{ formatPhone(customer.phone) }}</a>
+          <p v-else>—</p>
         </div>
       </div>
-    </Block>
+    </div>
 
-    <Block title="Additional Information">
-      <div class="gap-small">
-        <div v-if="customer.referral?.code" class="flex">
-          <strong class="mn-r-auto">Referral Code:</strong>
-          <span>{{ customer.referral.code }}</span>
-        </div>
-        <div class="flex">
-          <strong class="mn-r-auto">Created:</strong>
-          <span>{{ formatDate(customer.createdAt) }}</span>
+    <!-- Socials -->
+    <div v-if="hasSocials" class="mn-b-small">
+      <p class="mn-b-thin fw-medium">Social</p>
+      <div class="flex flex-wrap gap-thin">
+        <a
+          v-for="(value, key) in customer.socials"
+          :key="key"
+          v-show="value"
+          :href="socialUrl(key, value)"
+          target="_blank"
+          class="bg-light radius-small pd-thin pd-l-small pd-r-small t-second fw-medium t-small"
+        >
+          {{ key }}
+        </a>
+      </div>
+    </div>
+
+    <!-- Source & Type -->
+    <div class="mn-b-small">
+      <p class="mn-b-thin fw-medium">Details</p>
+      <div class="flex-nowrap flex gap-thin">
+        <div class="w-100 bg-light radius-small pd-small">
+          <p class="mn-b-micro opacity-50 t-small">Source</p>
+          <p>{{ customer.source || 'Unknown' }}</p>
         </div>
-        <div class="flex">
-          <strong class="mn-r-auto">Last Activity:</strong>
-          <span>{{ formatDate(customer.lastActivity || customer.updatedAt) }}</span>
+        <div class="w-100 bg-light radius-small pd-small">
+          <p class="mn-b-micro opacity-50 t-small">Type</p>
+          <p>{{ customer.identity?.type || 'Visitor' }}</p>
         </div>
-        <div v-if="customer.tags && customer.tags.length > 0">
-          <strong>Tags:</strong>
-          <div class="flex flex-wrap gap-nano mn-t-thin">
-            <span 
-              v-for="tag in customer.tags" 
-              :key="tag"
-              class="bg-light pd-nano radius-small t-small"
-            >
-              {{ tag }}
-            </span>
-          </div>
+      </div>
+    </div>
+
+    <!-- Dates -->
+    <div class="mn-b-small">
+      <p class="mn-b-thin fw-medium">Activity</p>
+      <div class="flex-nowrap flex gap-thin">
+        <div class="w-100 bg-light radius-small pd-small">
+          <p class="mn-b-micro opacity-50 t-small">Created</p>
+          <p>{{ formatDate(customer.createdAt) }}</p>
         </div>
-        <div v-if="customer.notes">
-          <strong>Notes:</strong>
-          <p class="mn-t-thin">{{ customer.notes }}</p>
+        <div class="w-100 bg-light radius-small pd-small">
+          <p class="mn-b-micro opacity-50 t-small">Last Activity</p>
+          <p>{{ formatDate(customer.lastActivity || customer.updatedAt) }}</p>
         </div>
       </div>
-    </Block>
+    </div>
 
-    <div class="gap-thin flex mn-t-small">
-      <Button 
+    <!-- Referral -->
+    <div v-if="customer.referral?.code" class="mn-b-small">
+      <p class="mn-b-thin fw-medium">Referral</p>
+      <div class="bg-light radius-small pd-small">
+        <p class="mn-b-micro opacity-50 t-small">Code</p>
+        <p class="fw-medium">{{ customer.referral.code }}</p>
+      </div>
+    </div>
+
+    <!-- Tags -->
+    <div v-if="customer.tags && customer.tags.length > 0" class="mn-b-small">
+      <p class="mn-b-thin fw-medium">Tags</p>
+      <div class="flex flex-wrap gap-micro">
+        <span
+          v-for="tag in customer.tags"
+          :key="tag"
+          class="bg-light pd-micro pd-l-thin pd-r-thin radius-extra t-small"
+        >
+          {{ tag }}
+        </span>
+      </div>
+    </div>
+
+    <!-- Notes -->
+    <div v-if="customer.notes" class="mn-b-small">
+      <p class="mn-b-thin fw-medium">Notes</p>
+      <div class="bg-light radius-small pd-small t-small">{{ customer.notes }}</div>
+    </div>
+
+    <!-- Actions -->
+    <div class="flex-nowrap flex gap-small">
+      <Button
         @click="$emit('edit')"
-        class="w-100 pd-small radius-big bg-main t-black uppercase fw-medium"
+        :showLoader="false"
+        :showSucces="false"
+        class="pd-small radius-small flex-center flex w-100 cursor-pointer bg-main t-black"
       >
         Edit
       </Button>
-      <Button 
+      <Button
         @click="$emit('delete')"
-        class="w-100 pd-small radius-big bg-danger t-white uppercase fw-medium"
+        :showLoader="false"
+        :showSucces="false"
+        class="pd-small radius-small flex-center flex w-100 cursor-pointer bg-red t-white"
       >
         Delete
       </Button>
@@ -80,25 +134,37 @@
 </template>
 
 <script setup>
-import Block from '@martyrs/src/components/Block/Block.vue';
 import StatusBadge from '@martyrs/src/components/Table/StatusBadge.vue';
 import Button from '@martyrs/src/components/Button/Button.vue';
 import { useGlobalMixins } from '@martyrs/src/modules/core/views/mixins/mixins.js';
 
-const { formatDate } = useGlobalMixins();
+const { formatDate, formatPhone } = useGlobalMixins();
+
+import { computed } from 'vue';
 
-defineProps({
+const socialUrls = {
+  whatsapp: (v) => `https://wa.me/${v.replace(/[^0-9]/g, '')}`,
+  telegram: (v) => `https://t.me/${v.replace('@', '')}`,
+  line: (v) => `https://line.me/ti/p/${v}`,
+  instagram: (v) => `https://instagram.com/${v.replace('@', '')}`,
+  facebook: (v) => `https://facebook.com/${v}`,
+}
+
+function socialUrl(key, value) {
+  if (!value) return ''
+  return socialUrls[key] ? socialUrls[key](value) : value
+}
+
+const props = defineProps({
   customer: {
     type: Object,
     required: true
   }
 });
 
+const hasSocials = computed(() => {
+  return props.customer.socials && Object.values(props.customer.socials).some(v => v)
+})
+
 defineEmits(['edit', 'delete']);
 </script>
-
-<style scoped>
-.bg-danger {
-  background-color: #ef4444;
-}
-</style>