Montify stores integration: multi-store connections, customer/order/transaction sync, webhooks

2026-10-10 15:59:12 +03:30
parent fa3fe0d364
commit e82bd2b2df
18 changed files with 3712 additions and 0 deletions
@@ -0,0 +1,245 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import type { MontifyOrderDto, MontifyPersonStoreDto } from '@mento/shared';
+import { api } from '@/lib/api';
+import { formatJalaliNumeric, toFaDigits } from '@/lib/jalali';
+import { useAuthStore } from '@/stores/auth';
+
+const props = defineProps<{ personId: string }>();
+
+const auth = useAuthStore();
+const enabled = computed(() => {
+  const mods = auth.user?.enabledModules;
+  return !mods || mods.includes('montify');
+});
+
+const stores = ref<MontifyPersonStoreDto[]>([]);
+const openOrder = ref<string | null>(null);
+
+async function load() {
+  stores.value = [];
+  if (!enabled.value || !props.personId) return;
+  try {
+    const { data } = await api.get<MontifyPersonStoreDto[]>(
+      `/integrations/montify/people/${props.personId}`,
+    );
+    stores.value = data;
+  } catch {
+    stores.value = [];
+  }
+}
+
+function amount(v: number | null | undefined): string {
+  return v === null || v === undefined ? '—' : toFaDigits(v.toLocaleString('en-US'));
+}
+
+function date(iso: string | null): string {
+  return iso ? formatJalaliNumeric(new Date(iso)) : '—';
+}
+
+function orderTotal(o: MontifyOrderDto): number | null {
+  return o.discountTotalPrice ?? o.totalPrice;
+}
+
+watch(() => props.personId, load, { immediate: true });
+</script>
+
+<template>
+  <section v-if="stores.length" class="stores">
+    <h3>حساب در فروشگاه‌ها</h3>
+    <article v-for="s in stores" :key="s.connectionId + s.externalCustomerId" class="store">
+      <header>
+        <strong>{{ s.connectionLabel }}</strong>
+        <span class="muted">
+          شناسه مشتری {{ toFaDigits(s.externalCustomerId) }}
+          <template v-if="s.username"> · {{ s.username }}</template>
+          <template v-if="s.customerType"> · {{ s.customerType }}</template>
+        </span>
+      </header>
+
+      <dl>
+        <div>
+          <dt>موجودی کیف پول (ریال)</dt>
+          <dd>{{ amount(s.walletBalance) }}</dd>
+        </div>
+        <div>
+          <dt>موجودی طلا (گرم)</dt>
+          <dd>{{ amount(s.goldWalletBalance) }}</dd>
+        </div>
+        <div>
+          <dt>تعداد سفارش</dt>
+          <dd>{{ amount(s.totalOrders) }}</dd>
+        </div>
+        <div>
+          <dt>جمع خرید (ریال)</dt>
+          <dd>{{ amount(s.totalSpent) }}</dd>
+        </div>
+        <div v-if="s.engagement">
+          <dt>ذخیره / پسند / نظر</dt>
+          <dd>
+            {{ toFaDigits(s.engagement.saved) }} / {{ toFaDigits(s.engagement.likes) }} /
+            {{ toFaDigits(s.engagement.comments) }}
+          </dd>
+        </div>
+      </dl>
+
+      <div v-if="s.orders.length" class="block">
+        <h4>سفارش‌ها</h4>
+        <div class="table-wrap">
+          <table>
+            <thead>
+              <tr>
+                <th>کد سفارش</th>
+                <th>وضعیت</th>
+                <th>پرداخت</th>
+                <th>مبلغ (ریال)</th>
+                <th>تاریخ</th>
+              </tr>
+            </thead>
+            <tbody>
+              <template v-for="o in s.orders" :key="o.id">
+                <tr class="clickable" @click="openOrder = openOrder === o.id ? null : o.id">
+                  <td>{{ o.orderReference || `#${o.externalId}` }}</td>
+                  <td>{{ o.orderStatus || '—' }}</td>
+                  <td>{{ o.paymentStatus || '—' }}</td>
+                  <td>{{ amount(orderTotal(o)) }}</td>
+                  <td>{{ date(o.createdAt) }}</td>
+                </tr>
+                <tr v-if="openOrder === o.id" class="detail">
+                  <td colspan="5">
+                    <ul v-if="o.items.length">
+                      <li v-for="(it, idx) in o.items" :key="idx">
+                        {{ it.productName || 'قلم' }}
+                        — {{ amount(it.qty) }} عدد
+                        <template v-if="it.weight"> — {{ amount(it.weight) }} گرم</template>
+                        — {{ amount(it.totalPrice ?? it.price) }}
+                      </li>
+                    </ul>
+                    <p v-if="o.paymentType" class="muted">نوع پرداخت: {{ o.paymentType }}</p>
+                    <p v-if="o.totalDiscounts" class="muted">تخفیف: {{ amount(o.totalDiscounts) }}</p>
+                    <p v-if="o.note" class="muted">یادداشت: {{ o.note }}</p>
+                    <p v-if="o.cancelReason" class="muted">دلیل لغو: {{ o.cancelReason }}</p>
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div v-if="s.transactions.length" class="block">
+        <h4>تراکنش‌ها</h4>
+        <div class="table-wrap">
+          <table>
+            <thead>
+              <tr>
+                <th>نوع</th>
+                <th>مقدار</th>
+                <th>واحد</th>
+                <th>وضعیت</th>
+                <th>کد پیگیری</th>
+                <th>تاریخ</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="t in s.transactions" :key="t.id">
+                <td>{{ t.type || '—' }}</td>
+                <td>{{ amount(t.amount) }}</td>
+                <td>{{ t.currency || '—' }}</td>
+                <td>{{ t.status || '—' }}</td>
+                <td dir="ltr">{{ t.referenceCode || '—' }}</td>
+                <td>{{ date(t.createdAt) }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <p class="muted small">آخرین همگام‌سازی {{ date(s.syncedAt) }}</p>
+    </article>
+  </section>
+</template>
+
+<style scoped>
+.stores {
+  display: grid;
+  gap: 0.6rem;
+  margin-bottom: 1rem;
+}
+h3 {
+  margin: 0;
+  font-size: 0.95rem;
+}
+h4 {
+  margin: 0 0 0.35rem;
+  font-size: 0.85rem;
+  color: #334155;
+}
+.store {
+  border: 1px solid #eef2f7;
+  border-radius: var(--radius);
+  padding: 0.75rem;
+  display: grid;
+  gap: 0.6rem;
+}
+.store header {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+dl {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 0.5rem;
+  margin: 0;
+}
+dt {
+  color: #64748b;
+  font-size: 0.78rem;
+}
+dd {
+  margin: 0.15rem 0 0;
+  font-weight: 600;
+}
+.table-wrap {
+  overflow: auto;
+}
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.85rem;
+}
+th,
+td {
+  text-align: right;
+  padding: 0.4rem;
+  border-bottom: 1px solid #f1f5f9;
+}
+th {
+  color: #64748b;
+  font-size: 0.76rem;
+}
+.clickable {
+  cursor: pointer;
+}
+.clickable:hover {
+  background: #f8fafc;
+}
+.detail td {
+  background: #f8fafc;
+}
+.detail ul {
+  margin: 0;
+  padding-inline-start: 1.1rem;
+}
+.muted {
+  color: #64748b;
+  font-size: 0.82rem;
+  margin: 0.2rem 0 0;
+}
+.small {
+  font-size: 0.78rem;
+  margin: 0;
+}
+</style>