fix: polish SMS header chip and add deposit info in adm panel
Tighten the wallet chip layout and let super-admins set charge deposit details shown in the header charge modal.
This commit is contained in:
@@ -10,6 +10,7 @@ const summary = ref<SmsWalletSummaryDto | null>(null);
|
||||
const loading = ref(false);
|
||||
const chargeOpen = ref(false);
|
||||
const warnOpen = ref(false);
|
||||
const copyHint = ref('');
|
||||
const NEGATIVE_KEY = 'mento_sms_negative_warning_shown';
|
||||
|
||||
const visible = computed(() => Boolean(summary.value?.billingEnabled));
|
||||
@@ -27,6 +28,42 @@ const toneClass = computed(() => {
|
||||
return 'ok';
|
||||
});
|
||||
|
||||
const chargeInfo = computed(() => summary.value?.chargeInfo ?? null);
|
||||
|
||||
function normalizeCopyText(value: string) {
|
||||
const persianDigits = '۰۱۲۳۴۵۶۷۸۹';
|
||||
const arabicDigits = '٠١٢٣٤٥٦٧٨٩';
|
||||
return value
|
||||
.replace(/[\u06F0-\u06F9]/g, (digit) => String(persianDigits.indexOf(digit)))
|
||||
.replace(/[\u0660-\u0669]/g, (digit) => String(arabicDigits.indexOf(digit)))
|
||||
.replace(/\s+/g, '');
|
||||
}
|
||||
|
||||
function formatCardDisplay(value: string) {
|
||||
const digits = normalizeCopyText(value);
|
||||
if (!digits) return '—';
|
||||
return digits.replace(/(\d{4})(?=\d)/g, '$1 ').trim();
|
||||
}
|
||||
|
||||
async function copyValue(label: string, value: string) {
|
||||
const text = normalizeCopyText(value);
|
||||
if (!text) {
|
||||
copyHint.value = `${label} ثبت نشده است`;
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
copyHint.value = `${label} کپی شد`;
|
||||
} catch {
|
||||
copyHint.value = 'کپی انجام نشد';
|
||||
}
|
||||
}
|
||||
|
||||
function closeCharge() {
|
||||
chargeOpen.value = false;
|
||||
copyHint.value = '';
|
||||
}
|
||||
|
||||
async function load() {
|
||||
if (!auth.isAuthenticated || !auth.user?.organizationId) {
|
||||
summary.value = null;
|
||||
@@ -79,39 +116,58 @@ defineExpose({ refresh: load });
|
||||
|
||||
<template>
|
||||
<div v-if="visible" class="sms-wallet">
|
||||
<div class="chip" :class="toneClass" :title="loading ? '…' : undefined">
|
||||
<span>اعتبار پیامک: {{ balanceLabel }} ریال</span>
|
||||
<div
|
||||
class="chip"
|
||||
:class="toneClass"
|
||||
:title="loading ? '…' : `اعتبار پیامک: ${balanceLabel} ریال`"
|
||||
>
|
||||
<span class="label">پیامک</span>
|
||||
<span class="amount">{{ balanceLabel }}</span>
|
||||
<button type="button" class="charge" @click="chargeOpen = true">شارژ</button>
|
||||
</div>
|
||||
|
||||
<div v-if="chargeOpen" class="layer">
|
||||
<div class="backdrop" @click="chargeOpen = false" />
|
||||
<div class="modal" role="dialog" aria-label="شارژ پیامک">
|
||||
<div class="backdrop" @click="closeCharge" />
|
||||
<div class="modal charge-modal" role="dialog" aria-label="شارژ پیامک">
|
||||
<header>
|
||||
<strong>شارژ اعتبار پیامک</strong>
|
||||
<button type="button" class="x" @click="chargeOpen = false">×</button>
|
||||
<button type="button" class="x" @click="closeCharge">×</button>
|
||||
</header>
|
||||
<p class="muted">
|
||||
برای شارژ با پشتیبانی هماهنگ کنید یا فیش واریز را ارسال کنید.
|
||||
</p>
|
||||
<template v-if="summary?.chargeInfo">
|
||||
<dl>
|
||||
<div v-if="summary.chargeInfo.card">
|
||||
<dt>کارت</dt>
|
||||
<dd dir="ltr">{{ summary.chargeInfo.card }}</dd>
|
||||
|
||||
<div v-if="chargeInfo" class="charge-body">
|
||||
<div class="instruction-box">
|
||||
<p>{{ chargeInfo.instruction }}</p>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<div class="info-head">
|
||||
<span>شماره کارت</span>
|
||||
<button type="button" class="copy violet" @click="copyValue('شماره کارت', chargeInfo.card)">
|
||||
کپی
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="summary.chargeInfo.iban">
|
||||
<dt>شبا</dt>
|
||||
<dd dir="ltr">{{ summary.chargeInfo.iban }}</dd>
|
||||
<p class="mono" dir="ltr">{{ formatCardDisplay(chargeInfo.card) }}</p>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<div class="info-head">
|
||||
<span>شماره شبا</span>
|
||||
<button type="button" class="copy emerald" @click="copyValue('شماره شبا', chargeInfo.iban)">
|
||||
کپی
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="summary.chargeInfo.accountHolder">
|
||||
<dt>صاحب حساب</dt>
|
||||
<dd>{{ summary.chargeInfo.accountHolder }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<p class="instruction">{{ summary.chargeInfo.instruction }}</p>
|
||||
</template>
|
||||
<button type="button" class="ok" @click="chargeOpen = false">متوجه شدم</button>
|
||||
<p class="mono" dir="ltr">{{ chargeInfo.iban || '—' }}</p>
|
||||
</div>
|
||||
|
||||
<div class="info-card muted-card">
|
||||
<span class="small">به نام</span>
|
||||
<p class="holder">{{ chargeInfo.accountHolder || '—' }}</p>
|
||||
</div>
|
||||
|
||||
<p v-if="copyHint" class="copy-hint">{{ copyHint }}</p>
|
||||
</div>
|
||||
|
||||
<p v-else class="muted">اطلاعات واریز در دسترس نیست.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -134,45 +190,88 @@ defineExpose({ refresh: load });
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.chip {
|
||||
display: flex;
|
||||
.sms-wallet {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
white-space: nowrap;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #a7f3d0;
|
||||
background: rgba(236, 253, 245, 0.7);
|
||||
padding: 0.35rem 0.65rem;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
color: #065f46;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* چیپ جمع‌وجور؛ دکمه شارژ سمت چپ، برچسب سمت راست */
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
height: 31px;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0 4px 0 2px;
|
||||
border: 1px solid #a7f3d0;
|
||||
border-radius: 10px;
|
||||
background: color-mix(in srgb, #ecfdf5 70%, #fff);
|
||||
color: #065f46;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.chip.warning {
|
||||
border-color: #fde68a;
|
||||
background: rgba(255, 251, 235, 0.85);
|
||||
background: color-mix(in srgb, #fffbeb 75%, #fff);
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.chip.critical,
|
||||
.chip.negative {
|
||||
border-color: #fecaca;
|
||||
background: rgba(254, 242, 242, 0.9);
|
||||
background: color-mix(in srgb, #fef2f2 75%, #fff);
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-weight: 600;
|
||||
font-size: 0.7rem;
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.charge {
|
||||
border: 0;
|
||||
background: #059669;
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 0.2rem 0.55rem;
|
||||
appearance: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 23px;
|
||||
margin: 0;
|
||||
padding: 0 6px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 7px;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
font: inherit;
|
||||
font-size: 0.78rem;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background 0.15s ease,
|
||||
border-color 0.15s ease,
|
||||
color 0.15s ease;
|
||||
}
|
||||
.chip.critical .charge,
|
||||
.chip.negative .charge,
|
||||
.chip.warning .charge {
|
||||
background: #b45309;
|
||||
|
||||
.charge:hover {
|
||||
background: #f8fafc;
|
||||
border-color: #cbd5e1;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.charge:active {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.layer {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
@@ -180,26 +279,34 @@ defineExpose({ refresh: load });
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(15, 23, 42, 0.35);
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: relative;
|
||||
width: min(420px, calc(100vw - 2rem));
|
||||
max-height: min(90vh, 640px);
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 1rem 1.1rem;
|
||||
padding: 1rem 1.1rem 1.15rem;
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
|
||||
}
|
||||
|
||||
.modal header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 0.35rem;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.x {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
@@ -207,33 +314,120 @@ defineExpose({ refresh: load });
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
}
|
||||
.muted,
|
||||
.instruction {
|
||||
|
||||
.muted {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
dl {
|
||||
margin: 0;
|
||||
|
||||
.charge-body {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
dl > div {
|
||||
|
||||
.instruction-box {
|
||||
border: 1px solid #e0f2fe;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(145deg, #f0f9ff, #fff);
|
||||
padding: 0.85rem 0.95rem;
|
||||
}
|
||||
|
||||
.instruction-box p {
|
||||
margin: 0;
|
||||
color: #475569;
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
border: 1px solid #f3f4f6;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
padding: 0.75rem 0.85rem;
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.info-card.muted-card {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.info-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
dt {
|
||||
color: var(--muted);
|
||||
|
||||
.info-head > span,
|
||||
.small {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.mono {
|
||||
margin: 0;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
font-size: 1rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.04em;
|
||||
color: #0f172a;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.holder {
|
||||
margin: 0.15rem 0 0;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.copy {
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
padding: 0.25rem 0.55rem;
|
||||
font: inherit;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.copy.violet {
|
||||
background: #f5f3ff;
|
||||
color: #6d28d9;
|
||||
}
|
||||
|
||||
.copy.violet:hover {
|
||||
background: #ede9fe;
|
||||
}
|
||||
|
||||
.copy.emerald {
|
||||
background: #ecfdf5;
|
||||
color: #047857;
|
||||
}
|
||||
|
||||
.copy.emerald:hover {
|
||||
background: #d1fae5;
|
||||
}
|
||||
|
||||
.copy-hint {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
font-size: 0.8rem;
|
||||
color: #0f766e;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ok {
|
||||
border: 0;
|
||||
background: #0f766e;
|
||||
color: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 0.55rem 0.9rem;
|
||||
padding: 0.45rem 0.9rem;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -807,7 +807,6 @@ onUnmounted(() => {
|
||||
</form>
|
||||
|
||||
<div class="topbar-actions">
|
||||
<SmsHeaderWallet />
|
||||
<RouterLink class="round-btn accent" :to="{ name: 'notes' }" title="هوش مصنوعی">
|
||||
<UiIcon name="sparkle" :size="18" />
|
||||
</RouterLink>
|
||||
@@ -821,6 +820,7 @@ onUnmounted(() => {
|
||||
<RouterLink class="round-btn" :to="{ name: 'tickets' }" title="پیام‌ها">
|
||||
<UiIcon name="mail" :size="18" />
|
||||
</RouterLink>
|
||||
<SmsHeaderWallet />
|
||||
<div
|
||||
v-if="subscription"
|
||||
class="sub-chip"
|
||||
|
||||
@@ -25,6 +25,10 @@ const ownUser = ref('');
|
||||
const ownPass = ref('');
|
||||
const ownFrom = ref('');
|
||||
const ownType = ref('0098');
|
||||
const depositCard = ref('');
|
||||
const depositIban = ref('');
|
||||
const depositHolder = ref('');
|
||||
const depositInstruction = ref('');
|
||||
|
||||
function formatRials(n: number) {
|
||||
return toFaDigits(new Intl.NumberFormat('fa-IR').format(n)) + ' ریال';
|
||||
@@ -51,6 +55,10 @@ async function loadOverview(orgId: string) {
|
||||
ownPass.value = '';
|
||||
ownFrom.value = data.account.ownPanelFrom || '';
|
||||
ownType.value = data.account.ownPanelType || '0098';
|
||||
depositCard.value = data.chargeInfo.card || '';
|
||||
depositIban.value = data.chargeInfo.iban || '';
|
||||
depositHolder.value = data.chargeInfo.accountHolder || '';
|
||||
depositInstruction.value = data.chargeInfo.instruction || '';
|
||||
}
|
||||
|
||||
async function load() {
|
||||
@@ -155,6 +163,18 @@ function saveOwnPanel() {
|
||||
});
|
||||
}
|
||||
|
||||
function saveDepositInfo() {
|
||||
if (!selectedId.value) return;
|
||||
void runSave(async () => {
|
||||
await platformApi.patch(`/platform/sms/organizations/${selectedId.value}`, {
|
||||
chargeCard: depositCard.value.trim() || null,
|
||||
chargeIban: depositIban.value.trim() || null,
|
||||
chargeHolder: depositHolder.value.trim() || null,
|
||||
chargeInstruction: depositInstruction.value.trim() || null,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => route.query.org,
|
||||
() => {
|
||||
@@ -307,6 +327,34 @@ onMounted(() => {
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="panel deposit-panel">
|
||||
<h3>اطلاعات واریز شارژ</h3>
|
||||
<p class="hint">نمایش در مودال «شارژ» هدر برای همه مدیران این محیط</p>
|
||||
<label class="field">
|
||||
<span>شماره کارت</span>
|
||||
<input v-model="depositCard" type="text" dir="ltr" placeholder="مثلاً 6219…" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>شماره شبا</span>
|
||||
<input v-model="depositIban" type="text" dir="ltr" placeholder="IR…" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>به نام</span>
|
||||
<input v-model="depositHolder" type="text" placeholder="صاحب حساب" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>متن راهنما</span>
|
||||
<textarea
|
||||
v-model="depositInstruction"
|
||||
rows="3"
|
||||
placeholder="متن راهنمای واریز برای مدیران"
|
||||
/>
|
||||
</label>
|
||||
<button type="button" class="btn btn-primary" :disabled="saving" @click="saveDepositInfo">
|
||||
ذخیره
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tables">
|
||||
@@ -393,13 +441,32 @@ onMounted(() => {
|
||||
}
|
||||
.list-head input,
|
||||
.panel input,
|
||||
.panel select {
|
||||
.panel select,
|
||||
.panel textarea {
|
||||
width: 100%;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
padding: 0.55rem 0.7rem;
|
||||
font: inherit;
|
||||
}
|
||||
.panel textarea {
|
||||
resize: vertical;
|
||||
min-height: 4.5rem;
|
||||
}
|
||||
.deposit-panel {
|
||||
grid-column: 1 / -1;
|
||||
background: color-mix(in srgb, #ede9fe 35%, #fff);
|
||||
border-color: #ddd6fe;
|
||||
}
|
||||
.field {
|
||||
display: grid;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
.field > span {
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
}
|
||||
.tenant {
|
||||
width: 100%;
|
||||
text-align: start;
|
||||
|
||||
Reference in New Issue
Block a user