feat(migrations): add national_code_verified flag to users and normalize bank_account representation
- Added a new column `national_code_verified` to the `users` table. - Normalized the `bank_account` field in the `representations` table from a single object to an array of IBANs with a default `verified` status of false. feat(ApiIrService): implement identity verification client for api.ir - Created `ApiIrService` to handle identity verification via api.ir. - Implemented methods for matching national code with mobile and IBAN with national code and birth date. - Added error handling and logging for external API requests.
This commit is contained in:
hamed
@@ -0,0 +1,180 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { toast } from 'sonner';
|
||||
import { CheckBadgeIcon, TrashIcon, PlusIcon } from '@heroicons/react/24/outline';
|
||||
import { api } from '../lib/api';
|
||||
import type { ApiResponse } from '../lib/api';
|
||||
|
||||
interface IbanItem {
|
||||
id: string;
|
||||
iban: string;
|
||||
bank_name: string | null;
|
||||
owner_name: string | null;
|
||||
verified: boolean;
|
||||
}
|
||||
|
||||
interface RepProfile {
|
||||
full_name: string;
|
||||
mobile_number: string | null;
|
||||
national_code: string | null;
|
||||
national_code_verified: boolean;
|
||||
bank_account: IbanItem[] | null;
|
||||
}
|
||||
|
||||
// پاسخ تکمنبعی ممکن است double-nested باشد
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const unwrap = (d: any): RepProfile | undefined => d?.data?.data ?? d?.data;
|
||||
|
||||
export default function RepresentationProfilePage() {
|
||||
const qc = useQueryClient();
|
||||
const [nationalCode, setNationalCode] = useState('');
|
||||
const [iban, setIban] = useState('');
|
||||
const [birthDate, setBirthDate] = useState('');
|
||||
|
||||
const meQ = useQuery({
|
||||
queryKey: ['representation-me'],
|
||||
queryFn: () => api.get<ApiResponse<RepProfile>>('/api/v1/representation/me'),
|
||||
staleTime: 30_000,
|
||||
});
|
||||
const profile = unwrap(meQ.data);
|
||||
const verified = profile?.national_code_verified ?? false;
|
||||
const ibans = profile?.bank_account ?? [];
|
||||
|
||||
const verifyMut = useMutation({
|
||||
mutationFn: (code: string) =>
|
||||
api.post<ApiResponse<RepProfile>>('/api/v1/representation/verify-national-code', { national_code: code }),
|
||||
onSuccess: () => {
|
||||
toast.success('کد ملی با موفقیت تأیید شد');
|
||||
setNationalCode('');
|
||||
qc.invalidateQueries({ queryKey: ['representation-me'] });
|
||||
},
|
||||
onError: (e: Error) => toast.error(e.message),
|
||||
});
|
||||
|
||||
const addIbanMut = useMutation({
|
||||
mutationFn: (v: string) =>
|
||||
api.post<ApiResponse<RepProfile>>('/api/v1/representation/iban', { iban: v }),
|
||||
onSuccess: () => {
|
||||
toast.success('شماره شبا تأیید و اضافه شد');
|
||||
setIban('');
|
||||
qc.invalidateQueries({ queryKey: ['representation-me'] });
|
||||
},
|
||||
onError: (e: Error) => toast.error(e.message),
|
||||
});
|
||||
|
||||
const removeIbanMut = useMutation({
|
||||
mutationFn: (id: string) =>
|
||||
api.delete<ApiResponse<RepProfile>>(`/api/v1/representation/iban/${id}`),
|
||||
onSuccess: () => {
|
||||
toast.success('شماره شبا حذف شد');
|
||||
qc.invalidateQueries({ queryKey: ['representation-me'] });
|
||||
},
|
||||
onError: (e: Error) => toast.error(e.message),
|
||||
});
|
||||
|
||||
const submitNationalCode = () => {
|
||||
const code = nationalCode.replace(/\D/g, '');
|
||||
if (code.length !== 10) { toast.error('کد ملی باید ۱۰ رقم باشد'); return; }
|
||||
verifyMut.mutate(code);
|
||||
};
|
||||
|
||||
const submitIban = () => {
|
||||
if (!iban.trim()) { toast.error('شماره شبا را وارد کنید'); return; }
|
||||
addIbanMut.mutate(iban.trim());
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fade-in">
|
||||
<div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
|
||||
<div>
|
||||
<h1 className="section-title">پروفایل نماینده</h1>
|
||||
<div className="muted" style={{ fontSize: 13, marginTop: 2 }}>تأیید هویت و مدیریت شمارههای شبا</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* تأیید کد ملی */}
|
||||
<div className="card card-pad">
|
||||
<div className="card-title-row" style={{ marginBottom: 12 }}>
|
||||
<h3 style={{ fontSize: 16 }}>تأیید هویت</h3>
|
||||
{verified && (
|
||||
<span className="badge green" style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
|
||||
<CheckBadgeIcon style={{ width: 15, height: 15 }} /> کد ملی تأیید شده
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{verified ? (
|
||||
<div className="muted" style={{ fontSize: 13.5 }}>
|
||||
کد ملی: <span dir="ltr" style={{ fontWeight: 600 }}>{profile?.national_code}</span>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
|
||||
<input
|
||||
type="text" inputMode="numeric" dir="ltr" maxLength={10} value={nationalCode}
|
||||
placeholder="کد ملی ۱۰ رقمی"
|
||||
onChange={(e) => setNationalCode(e.target.value.replace(/\D/g, ''))}
|
||||
style={{ width: 220, height: 38, padding: '0 12px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)', fontSize: 13.5, boxSizing: 'border-box', textAlign: 'center' }}
|
||||
/>
|
||||
<button className="btn primary" onClick={submitNationalCode} disabled={verifyMut.isPending}>
|
||||
{verifyMut.isPending ? 'در حال تأیید...' : 'تأیید کد ملی'}
|
||||
</button>
|
||||
<span className="muted" style={{ fontSize: 12 }}>با استعلام شاهکار بررسی میشود</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* شمارههای شبا */}
|
||||
<div className="card card-pad" style={{ marginTop: 'var(--gap)' }}>
|
||||
<div className="card-title-row" style={{ marginBottom: 12 }}>
|
||||
<h3 style={{ fontSize: 16 }}>شمارههای شبا</h3>
|
||||
<span className="muted" style={{ fontSize: 12 }}>{ibans.length} از ۲</span>
|
||||
</div>
|
||||
|
||||
<div style={{ overflowX: 'auto' }}>
|
||||
<table className="tbl" style={{ width: '100%' }}>
|
||||
<thead><tr><th>شماره شبا</th><th>بانک</th><th>صاحب حساب</th><th>وضعیت</th><th></th></tr></thead>
|
||||
<tbody>
|
||||
{ibans.length === 0 && (
|
||||
<tr><td colSpan={5} className="muted" style={{ textAlign: 'center', padding: 16 }}>هنوز شبایی ثبت نشده است</td></tr>
|
||||
)}
|
||||
{ibans.map((b) => (
|
||||
<tr key={b.id}>
|
||||
<td dir="ltr" style={{ textAlign: 'left', fontFamily: 'monospace' }}>{b.iban}</td>
|
||||
<td>{b.bank_name ?? '—'}</td>
|
||||
<td>{b.owner_name ?? '—'}</td>
|
||||
<td><span className={`badge ${b.verified ? 'green' : 'gray'}`}>{b.verified ? 'تأیید شده' : 'تأیید نشده'}</span></td>
|
||||
<td style={{ textAlign: 'center' }}>
|
||||
<button className="btn icon danger" title="حذف" onClick={() => removeIbanMut.mutate(b.id)} disabled={removeIbanMut.isPending}>
|
||||
<TrashIcon style={{ width: 16, height: 16 }} />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{!verified && (
|
||||
<div className="muted" style={{ fontSize: 12.5, marginTop: 12 }}>
|
||||
برای افزودن شبا ابتدا باید کد ملی خود را تأیید کنید.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{verified && ibans.length < 2 && (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', marginTop: 14 }}>
|
||||
<input
|
||||
type="text" dir="ltr" value={iban} placeholder="IR000000000000000000000000"
|
||||
onChange={(e) => setIban(e.target.value)}
|
||||
style={{ width: 320, height: 38, padding: '0 12px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)', fontSize: 13, boxSizing: 'border-box', fontFamily: 'monospace' }}
|
||||
/>
|
||||
<button className="btn primary" onClick={submitIban} disabled={addIbanMut.isPending} style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
|
||||
<PlusIcon style={{ width: 16, height: 16 }} />
|
||||
{addIbanMut.isPending ? 'در حال بررسی...' : 'افزودن شبا'}
|
||||
</button>
|
||||
<span className="muted" style={{ fontSize: 12 }}>مالکیت با استعلام بررسی میشود</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user