hamedandClaude Opus 4.8
174ecfa8fb
Add a doctor/clinic settings sub-navigation shell (SettingsLayout) with "خرید اشتراک" as its first section, plus a mobile settings-list page. Rebuild the plan-selection page with a per-plan billing-period toggle, single price, most-popular badge and a current-plan status banner. Add a payment-success page that reads the gateway return params (?payment_uuid&status), shows the transaction receipt and the newly active plan, and redirects to the plans page with a toast on any non-success status. Frontend only — reuses the existing /api/v1/subscription/* and /api/v1/subscription-payment endpoints; no backend or API-doc changes. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
455 lines
21 KiB
TypeScript
455 lines
21 KiB
TypeScript
import React, { useState, useEffect, useMemo } from 'react';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { Link } from 'react-router-dom';
|
|
import {
|
|
CheckIcon, XMarkIcon, SparklesIcon, UserIcon,
|
|
CreditCardIcon, ClockIcon, ArrowPathIcon, GiftIcon,
|
|
} from '@heroicons/react/24/outline';
|
|
import { toast } from 'sonner';
|
|
import { api } from '../lib/api';
|
|
import type { ApiResponse } from '../lib/api';
|
|
import type { SubscriptionPlan, MySubscriptionData, SubscriptionPeriod } from '../types';
|
|
import { usePaymentConfig } from '../hooks/usePaymentConfig';
|
|
import { formatRial, formatNumber } from '../lib/utils';
|
|
import Modal from '../components/ui/Modal';
|
|
import SettingsLayout from '../components/layout/SettingsLayout';
|
|
|
|
// ── Constants ─────────────────────────────────────────────────────────────
|
|
|
|
export const PLAN_FEATURE_LABELS: Record<string, string> = {
|
|
patient_records: 'پرونده بیمار',
|
|
services: 'مدیریت سرویسها',
|
|
sms_panel: 'پنل پیامک',
|
|
};
|
|
|
|
/** The plan highlighted as "most popular" in the UI (no backend flag exists). */
|
|
const POPULAR_PLAN_NAME = 'basic';
|
|
|
|
const PLAN_META: Record<string, { label: string; desc: string; tint: string }> = {
|
|
free: { label: 'رایگان', desc: 'مناسب برای شروع کار', tint: 'var(--surface-2)' },
|
|
basic: { label: 'پایه', desc: 'مناسب برای مطبهای کوچک و متوسط', tint: 'var(--primary-soft)' },
|
|
professional: { label: 'حرفهای', desc: 'مناسب برای کلینیکهای بزرگ', tint: 'var(--violet-bg)' },
|
|
};
|
|
|
|
export const planMetaOf = (name: string) => PLAN_META[name] ?? PLAN_META.free;
|
|
|
|
// ── Main Page ─────────────────────────────────────────────────────────────
|
|
|
|
export default function SubscriptionPage() {
|
|
const qc = useQueryClient();
|
|
const [purchaseTarget, setPurchaseTarget] = useState<{ period: SubscriptionPeriod; planName: string } | null>(null);
|
|
const [selectedGateway, setSelectedGateway] = useState<string>('');
|
|
|
|
const { data: plansData, isLoading: plansLoading } = useQuery<ApiResponse<SubscriptionPlan[]>>({
|
|
queryKey: ['subscription-plans'],
|
|
queryFn: () => api.get('/api/v1/subscription/plans'),
|
|
});
|
|
|
|
const { data: myData, isLoading: myLoading } = useQuery<ApiResponse<MySubscriptionData>>({
|
|
queryKey: ['subscription-my'],
|
|
queryFn: () => api.get('/api/v1/subscription/my'),
|
|
});
|
|
|
|
const { isTestMode, gateways } = usePaymentConfig();
|
|
|
|
useEffect(() => {
|
|
if (gateways.length > 0 && !gateways.some((g) => g.name === selectedGateway)) {
|
|
setSelectedGateway(gateways[0].name);
|
|
}
|
|
}, [gateways, selectedGateway]);
|
|
|
|
// Highest plan first so, under RTL, the top-tier plan sits on the right (Figma order).
|
|
const plans = [...(plansData?.data ?? [])].sort((a, b) => b.level - a.level);
|
|
const myRaw = myData?.data;
|
|
const my = myRaw?.subscription ?? null;
|
|
const usedTrial = myRaw?.used_trial ?? false;
|
|
|
|
const trialMutation = useMutation({
|
|
mutationFn: () => api.post('/api/v1/subscription/trial', {}),
|
|
onSuccess: () => {
|
|
qc.invalidateQueries({ queryKey: ['subscription-my'] });
|
|
toast.success('تریال رایگان با موفقیت فعال شد');
|
|
},
|
|
onError: (err: any) => toast.error(err.message),
|
|
});
|
|
|
|
const purchaseMutation = useMutation({
|
|
mutationFn: ({ period_uuid, gateway, amount_rials }: { period_uuid: string; gateway: string; amount_rials: number }) =>
|
|
api.post<{ data: { pay_url?: string; redirect_url?: string; payment_url?: string } }>('/api/v1/subscription-payment', {
|
|
period_uuid, gateway, amount_rials,
|
|
// Gateway returns here (with ?payment_uuid&status); the success page reads them.
|
|
frontend_address: `${window.location.origin}/admin/subscription/success`,
|
|
}),
|
|
onSuccess: (res: any) => {
|
|
const url = res?.data?.pay_url ?? res?.data?.redirect_url ?? res?.data?.payment_url;
|
|
if (url) window.location.href = url;
|
|
else toast.error('خطا در دریافت لینک پرداخت');
|
|
},
|
|
onError: (err: any) => toast.error(err.message),
|
|
});
|
|
|
|
return (
|
|
<SettingsLayout active="subscription">
|
|
{/* ── Header ── */}
|
|
<div style={{ marginBottom: 20 }}>
|
|
<h1 className="section-title" style={{ marginBottom: 4 }}>انتخاب پلن اشتراک</h1>
|
|
<p style={{ color: 'var(--text-3)', fontSize: 14, margin: 0 }}>
|
|
پلن اشتراک مناسب خود را انتخاب نمایید:
|
|
</p>
|
|
</div>
|
|
|
|
{/* ── وضعیت پلن فعلی ── */}
|
|
{!myLoading && <CurrentPlanBanner my={my} />}
|
|
|
|
{/* ── کارتهای پلن ── */}
|
|
{plansLoading ? (
|
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 16 }}>
|
|
{[1, 2, 3].map((i) => (
|
|
<div key={i} className="card" style={{ height: 420 }}>
|
|
<div className="skeleton" style={{ height: '100%', borderRadius: 'var(--r)' }} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 16 }}>
|
|
{plans.map((plan) => (
|
|
<PlanCard
|
|
key={plan.uuid}
|
|
plan={plan}
|
|
currentPlanName={my?.plan.name ?? 'free'}
|
|
currentPlanLevel={my?.plan.level ?? 0}
|
|
currentPlanActive={!!my && (my.days_remaining ?? 0) > 0}
|
|
usedTrial={usedTrial}
|
|
onPurchase={(period) => setPurchaseTarget({ period, planName: plan.name })}
|
|
onTrial={() => trialMutation.mutate()}
|
|
trialPending={trialMutation.isPending}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* ── Modal پرداخت (انتخاب درگاه) ── */}
|
|
<Modal
|
|
open={!!purchaseTarget}
|
|
onClose={() => { setPurchaseTarget(null); setSelectedGateway(gateways[0]?.name ?? ''); }}
|
|
title="پرداخت اشتراک"
|
|
size="sm"
|
|
>
|
|
{purchaseTarget && (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
|
|
<div style={{
|
|
background: 'var(--surface-2)', borderRadius: 'var(--r-sm)',
|
|
padding: '14px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
|
|
}}>
|
|
<div>
|
|
<div style={{ fontSize: 13, color: 'var(--text-3)', marginBottom: 2 }}>دوره انتخابی</div>
|
|
<div style={{ fontWeight: 700, fontSize: 15 }}>
|
|
{planMetaOf(purchaseTarget.planName).label} — {purchaseTarget.period.label}
|
|
</div>
|
|
<div style={{ fontSize: 12, color: 'var(--text-3)', marginTop: 1 }}>
|
|
{purchaseTarget.period.duration_months} ماه
|
|
</div>
|
|
</div>
|
|
<div style={{ textAlign: 'left' }}>
|
|
<div style={{ fontSize: 12, color: 'var(--text-3)', marginBottom: 2 }}>مبلغ قابل پرداخت</div>
|
|
<div style={{ fontWeight: 800, fontSize: 20, color: 'var(--primary)' }}>
|
|
{formatRial(purchaseTarget.period.price_rials)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{isTestMode ? (
|
|
<div style={{
|
|
background: 'var(--warning-bg)', border: '1px solid var(--warning)',
|
|
borderRadius: 10, padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 10,
|
|
}}>
|
|
<span style={{ fontSize: 20 }}>⚠️</span>
|
|
<div>
|
|
<div style={{ fontWeight: 700, fontSize: 13.5, color: 'var(--warning)' }}>درگاه آزمایشی فعال است</div>
|
|
<div style={{ fontSize: 12, color: 'var(--warning)', marginTop: 2, opacity: 0.8 }}>پول واقعی کسر نخواهد شد — این تراکنش آزمایشی است</div>
|
|
</div>
|
|
</div>
|
|
) : gateways.length === 0 ? (
|
|
<div style={{
|
|
background: 'var(--danger-bg)', border: '1px solid var(--danger)',
|
|
borderRadius: 10, padding: '12px 16px', fontSize: 13, color: 'var(--danger)',
|
|
}}>
|
|
در حال حاضر هیچ درگاه پرداخت فعالی وجود ندارد. لطفاً با پشتیبانی تماس بگیرید.
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--text-2)', marginBottom: 10 }}>
|
|
انتخاب درگاه پرداخت
|
|
</div>
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
|
|
{gateways.map((gw) => (
|
|
<button
|
|
key={gw.name}
|
|
onClick={() => setSelectedGateway(gw.name)}
|
|
style={{
|
|
padding: '12px 16px', borderRadius: 'var(--r-sm)', cursor: 'pointer',
|
|
border: `2px solid ${selectedGateway === gw.name ? 'var(--primary)' : 'var(--border)'}`,
|
|
background: selectedGateway === gw.name ? 'var(--primary-soft)' : 'var(--surface)',
|
|
color: selectedGateway === gw.name ? 'var(--primary-700)' : 'var(--text-2)',
|
|
fontWeight: selectedGateway === gw.name ? 700 : 500,
|
|
fontSize: 13, transition: '.14s', fontFamily: 'inherit',
|
|
display: 'flex', alignItems: 'center', gap: 8,
|
|
}}
|
|
>
|
|
<CreditCardIcon style={{ width: 17, flexShrink: 0 }} />
|
|
{gw.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div style={{ display: 'flex', gap: 10, marginTop: 4 }}>
|
|
<button
|
|
className="btn primary"
|
|
style={{ flex: 1, height: 44 }}
|
|
disabled={purchaseMutation.isPending || (!isTestMode && (gateways.length === 0 || selectedGateway === ''))}
|
|
onClick={() =>
|
|
purchaseMutation.mutate({ period_uuid: purchaseTarget.period.uuid, gateway: selectedGateway, amount_rials: purchaseTarget.period.price_rials })
|
|
}
|
|
>
|
|
{purchaseMutation.isPending
|
|
? 'در حال انتقال...'
|
|
: `پرداخت ${formatRial(purchaseTarget.period.price_rials)}`}
|
|
</button>
|
|
<button className="btn ghost" style={{ height: 44 }} onClick={() => setPurchaseTarget(null)}>
|
|
انصراف
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Modal>
|
|
</SettingsLayout>
|
|
);
|
|
}
|
|
|
|
// ── Current plan banner ─────────────────────────────────────────────────────
|
|
|
|
function CurrentPlanBanner({ my }: { my: MySubscriptionData['subscription'] }) {
|
|
if (!my) return null;
|
|
const meta = planMetaOf(my.plan.name);
|
|
const daysLeft = my.days_remaining ?? 0;
|
|
const expiring = daysLeft > 0 && daysLeft <= 7;
|
|
|
|
return (
|
|
<div style={{
|
|
display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap',
|
|
background: 'var(--surface)', border: '1px solid var(--border)',
|
|
borderRadius: 'var(--r-lg)', padding: '14px 18px', marginBottom: 20,
|
|
}}>
|
|
<div style={{ flex: 1, minWidth: 180 }}>
|
|
<div style={{ fontSize: 13, color: 'var(--text-3)', marginBottom: 2 }}>
|
|
پلن فعلی شما: <b style={{ color: 'var(--text)' }}>{meta.label}</b>
|
|
{my.is_trial && <span className="badge amber" style={{ marginRight: 8, fontSize: 11 }}><span className="bdot" />تریال</span>}
|
|
</div>
|
|
{daysLeft > 0 ? (
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, color: expiring ? 'var(--danger)' : 'var(--success)', fontWeight: 600 }}>
|
|
<ClockIcon style={{ width: 14, flexShrink: 0 }} />
|
|
{formatNumber(daysLeft)} روز تا پایان اشتراک
|
|
</div>
|
|
) : (
|
|
<div style={{ fontSize: 13, color: 'var(--text-3)' }}>اشتراک فعالی ندارید</div>
|
|
)}
|
|
</div>
|
|
<Link to="/admin/my-financial" className="btn ghost sm" style={{ flexShrink: 0 }}>
|
|
مشاهده فاکتور
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── PlanCard ──────────────────────────────────────────────────────────────
|
|
|
|
function PlanCard({
|
|
plan, currentPlanName, currentPlanLevel, currentPlanActive,
|
|
usedTrial, onPurchase, onTrial, trialPending,
|
|
}: {
|
|
plan: SubscriptionPlan;
|
|
currentPlanName: string;
|
|
currentPlanLevel: number;
|
|
currentPlanActive: boolean;
|
|
usedTrial: boolean;
|
|
onPurchase: (period: SubscriptionPeriod) => void;
|
|
onTrial: () => void;
|
|
trialPending: boolean;
|
|
}) {
|
|
const meta = planMetaOf(plan.name);
|
|
const isCurrent = plan.name === currentPlanName;
|
|
const isPopular = plan.name === POPULAR_PLAN_NAME;
|
|
const isDowngrade = currentPlanActive && (plan.level ?? 0) < currentPlanLevel;
|
|
const paidPeriods = useMemo(
|
|
() => [...plan.periods].filter((p) => !p.is_trial).sort((a, b) => a.duration_months - b.duration_months),
|
|
[plan.periods],
|
|
);
|
|
const trialPeriod = plan.periods.find((p) => p.is_trial);
|
|
|
|
// Default to the longest (best-value) period, matching the Figma default.
|
|
const [selectedUuid, setSelectedUuid] = useState<string>('');
|
|
useEffect(() => {
|
|
if (paidPeriods.length > 0 && !paidPeriods.some((p) => p.uuid === selectedUuid)) {
|
|
setSelectedUuid(paidPeriods[paidPeriods.length - 1].uuid);
|
|
}
|
|
}, [paidPeriods, selectedUuid]);
|
|
const selectedPeriod = paidPeriods.find((p) => p.uuid === selectedUuid) ?? paidPeriods[0];
|
|
|
|
const accent = isPopular ? 'var(--primary)' : 'var(--border-2)';
|
|
|
|
return (
|
|
<div style={{
|
|
background: 'var(--surface)',
|
|
border: `${isPopular || isCurrent ? '2px' : '1.5px'} solid ${isPopular ? 'var(--primary)' : isCurrent ? 'var(--primary)' : 'var(--border)'}`,
|
|
borderRadius: 'var(--r-lg)',
|
|
display: 'flex', flexDirection: 'column',
|
|
position: 'relative', overflow: 'hidden',
|
|
}}>
|
|
{/* بج محبوبترین */}
|
|
{isPopular && (
|
|
<span style={{
|
|
position: 'absolute', top: 14, left: 14, zIndex: 1,
|
|
background: 'var(--primary)', color: '#fff',
|
|
fontSize: 11, fontWeight: 700, padding: '4px 10px',
|
|
borderRadius: 999, display: 'inline-flex', alignItems: 'center', gap: 5,
|
|
}}>
|
|
<SparklesIcon style={{ width: 13, height: 13 }} />
|
|
محبوبترین
|
|
</span>
|
|
)}
|
|
|
|
{/* سربرگ */}
|
|
<div style={{ padding: '20px 20px 16px', background: meta.tint }}>
|
|
<div style={{ fontWeight: 800, fontSize: 20, color: 'var(--text)', marginBottom: 4 }}>
|
|
پلن {meta.label}
|
|
</div>
|
|
<div style={{ fontSize: 13, color: 'var(--text-2)', marginBottom: 12 }}>{meta.desc}</div>
|
|
<div style={{
|
|
display: 'inline-flex', alignItems: 'center', gap: 5,
|
|
background: 'var(--surface)', border: '1px solid var(--border)',
|
|
borderRadius: 999, padding: '4px 12px', fontSize: 12.5,
|
|
}}>
|
|
<UserIcon style={{ width: 14, color: 'var(--text-3)' }} />
|
|
<span style={{ fontWeight: 700, color: 'var(--text)' }}>{formatNumber(plan.max_secretaries)}</span>
|
|
<span style={{ color: 'var(--text-3)' }}>منشی</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ padding: '16px 20px', display: 'flex', flexDirection: 'column', gap: 14, flex: 1 }}>
|
|
{/* توگل دوره */}
|
|
{paidPeriods.length > 1 && (
|
|
<div role="tablist" aria-label="دوره اشتراک" style={{
|
|
display: 'grid', gridTemplateColumns: `repeat(${paidPeriods.length}, 1fr)`, gap: 4,
|
|
background: 'var(--surface-2)', border: '1px solid var(--border)',
|
|
borderRadius: 'var(--r-sm)', padding: 4,
|
|
}}>
|
|
{paidPeriods.map((p) => {
|
|
const on = p.uuid === selectedPeriod?.uuid;
|
|
return (
|
|
<button
|
|
key={p.uuid} role="tab" aria-selected={on}
|
|
onClick={() => setSelectedUuid(p.uuid)}
|
|
style={{
|
|
padding: '7px 6px', borderRadius: 'var(--r-xs)', border: 'none', cursor: 'pointer',
|
|
fontFamily: 'inherit', fontSize: 12.5, fontWeight: on ? 700 : 500, transition: '.14s',
|
|
background: on ? 'var(--primary)' : 'transparent',
|
|
color: on ? '#fff' : 'var(--text-2)',
|
|
}}
|
|
>
|
|
{p.label}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
|
|
{/* قیمت */}
|
|
<div>
|
|
{selectedPeriod ? (
|
|
<div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
|
|
<span style={{ fontSize: 13, color: 'var(--text-3)' }}>قیمت:</span>
|
|
<span style={{ fontWeight: 800, fontSize: 20, color: 'var(--text)' }}>
|
|
{formatRial(selectedPeriod.price_rials)}
|
|
</span>
|
|
</div>
|
|
) : (
|
|
<div style={{ fontWeight: 800, fontSize: 18, color: 'var(--success)' }}>رایگان</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* امکانات */}
|
|
<ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
|
|
{Object.entries(plan.features).map(([key, enabled]) => (
|
|
<li key={key} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13.5 }}>
|
|
<span style={{
|
|
width: 20, height: 20, borderRadius: '50%', flexShrink: 0,
|
|
display: 'grid', placeItems: 'center',
|
|
background: enabled ? 'var(--success-bg)' : 'var(--surface-3)',
|
|
}}>
|
|
{enabled
|
|
? <CheckIcon style={{ width: 12, color: 'var(--success)' }} />
|
|
: <XMarkIcon style={{ width: 11, color: 'var(--text-3)' }} />}
|
|
</span>
|
|
<span style={{ color: enabled ? 'var(--text)' : 'var(--text-3)' }}>
|
|
{PLAN_FEATURE_LABELS[key] ?? key}
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
{/* تریال */}
|
|
{trialPeriod && !usedTrial && plan.level > 0 && !isDowngrade && (
|
|
<div style={{
|
|
padding: '10px 12px', borderRadius: 'var(--r-sm)',
|
|
background: 'var(--accent-bg)',
|
|
border: '1px dashed color-mix(in oklch, var(--accent) 45%, transparent)',
|
|
fontSize: 12.5, display: 'flex', alignItems: 'center', gap: 8,
|
|
}}>
|
|
<GiftIcon style={{ width: 16, color: 'var(--accent)', flexShrink: 0 }} />
|
|
<span style={{ color: 'var(--text-2)' }}>
|
|
تریال <b>{formatNumber(trialPeriod.duration_months)} ماهه</b> رایگان
|
|
</span>
|
|
<button
|
|
onClick={onTrial} disabled={trialPending}
|
|
style={{
|
|
marginRight: 'auto', background: 'none', border: 'none', cursor: 'pointer',
|
|
color: 'var(--accent)', fontWeight: 700, fontSize: 12.5, fontFamily: 'inherit',
|
|
}}
|
|
>
|
|
{trialPending
|
|
? <ArrowPathIcon style={{ width: 14, animation: 'spin 1s linear infinite' }} />
|
|
: 'فعال سازی'}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* دکمه خرید */}
|
|
<div style={{ padding: '0 20px 20px' }}>
|
|
{isDowngrade ? (
|
|
<button className="btn" style={{ width: '100%', height: 44, opacity: 0.6, cursor: 'not-allowed' }} disabled>
|
|
تا پایان اشتراک فعلی قابل انتخاب نیست
|
|
</button>
|
|
) : selectedPeriod ? (
|
|
<button
|
|
className={isPopular ? 'btn primary' : 'btn'}
|
|
style={{
|
|
width: '100%', height: 44, fontWeight: 700,
|
|
...(isPopular ? {} : { border: '1.5px solid var(--primary)', color: 'var(--primary)', background: 'var(--surface)' }),
|
|
}}
|
|
onClick={() => onPurchase(selectedPeriod)}
|
|
>
|
|
{isCurrent ? 'تمدید اشتراک' : 'خرید اشتراک'}
|
|
</button>
|
|
) : (
|
|
<button className="btn" style={{ width: '100%', height: 44, cursor: 'default' }} disabled>
|
|
{isCurrent ? 'پلن فعلی شما' : 'رایگان'}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|