feat: redesign SubscriptionPage with improved UI/UX
- Active subscription card: colored gradient bg, icon, progress bar, expiry warning badge - Trial banner: shown when no subscription and trial not used yet - Plan cards: icon header, feature checklist (✓/✗), per-period buy buttons inline - Free plan card shows "شما اکنون در این پنل هستید" when current - Payment modal: order summary card + gateway selector with styled radio buttons - Loading skeleton for plan cards - Footer with trust signals Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
hamed
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
ab9d078bf0
commit
5be63a23b6
@@ -1,31 +1,53 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { CheckIcon, SparklesIcon } from '@heroicons/react/24/outline';
|
||||
import {
|
||||
CheckIcon, XMarkIcon, SparklesIcon, RocketLaunchIcon,
|
||||
ShieldCheckIcon, CreditCardIcon, ClockIcon, ArrowPathIcon,
|
||||
} 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 { formatDate, formatRial, formatNumber } from '../lib/utils';
|
||||
import Modal from '../components/ui/Modal';
|
||||
import PageHeader from '../components/ui/PageHeader';
|
||||
|
||||
// ── Constants ─────────────────────────────────────────────────────────────
|
||||
|
||||
const PLAN_FEATURE_LABELS: Record<string, string> = {
|
||||
patient_records: 'پرونده بیمار',
|
||||
services: 'مدیریت سرویسها',
|
||||
sms_panel: 'پنل پیامک',
|
||||
services: 'مدیریت سرویسها',
|
||||
sms_panel: 'پنل پیامک',
|
||||
};
|
||||
|
||||
const PLAN_DISPLAY: Record<string, { label: string; color: string }> = {
|
||||
free: { label: 'رایگان', color: '#64748b' },
|
||||
basic: { label: 'پایه', color: '#3b82f6' },
|
||||
professional: { label: 'حرفهای', color: '#8b5cf6' },
|
||||
const PLAN_META: Record<string, {
|
||||
label: string; desc: string;
|
||||
color: string; bg: string; border: string;
|
||||
icon: React.ElementType;
|
||||
}> = {
|
||||
free: {
|
||||
label: 'رایگان', desc: 'برای شروع کار با سیستم',
|
||||
color: '#64748b', bg: '#f1f5f9', border: '#cbd5e1',
|
||||
icon: ShieldCheckIcon,
|
||||
},
|
||||
basic: {
|
||||
label: 'پایه', desc: 'برای مطبهای کوچک و متوسط',
|
||||
color: '#2563eb', bg: '#eff6ff', border: '#93c5fd',
|
||||
icon: RocketLaunchIcon,
|
||||
},
|
||||
professional: {
|
||||
label: 'حرفهای', desc: 'برای کلینیکهای بزرگ',
|
||||
color: '#7c3aed', bg: '#f5f3ff', border: '#c4b5fd',
|
||||
icon: SparklesIcon,
|
||||
},
|
||||
};
|
||||
|
||||
const GATEWAY_LABELS: Record<string, string> = { mellat: 'ملت', sep: 'سپ' };
|
||||
const GATEWAY_LABELS: Record<string, string> = { mellat: 'بانک ملت', sep: 'سپ (صادرات)' };
|
||||
|
||||
// ── Main Page ─────────────────────────────────────────────────────────────
|
||||
|
||||
export default function SubscriptionPage() {
|
||||
const qc = useQueryClient();
|
||||
const [purchaseTarget, setPurchaseTarget] = useState<SubscriptionPeriod | null>(null);
|
||||
const [purchaseTarget, setPurchaseTarget] = useState<{ period: SubscriptionPeriod; planName: string } | null>(null);
|
||||
const [selectedGateway, setSelectedGateway] = useState<'mellat' | 'sep'>('mellat');
|
||||
|
||||
const { data: plansData, isLoading: plansLoading } = useQuery<ApiResponse<SubscriptionPlan[]>>({
|
||||
@@ -33,15 +55,15 @@ export default function SubscriptionPage() {
|
||||
queryFn: () => api.get('/api/v1/subscription/plans'),
|
||||
});
|
||||
|
||||
const { data: myData } = useQuery<ApiResponse<MySubscriptionData>>({
|
||||
const { data: myData, isLoading: myLoading } = useQuery<ApiResponse<MySubscriptionData>>({
|
||||
queryKey: ['subscription-my'],
|
||||
queryFn: () => api.get('/api/v1/subscription/my'),
|
||||
});
|
||||
|
||||
const plans = plansData?.data ?? [];
|
||||
const myRaw = myData?.data;
|
||||
const my = myRaw?.subscription ?? null;
|
||||
const usedTrial = myRaw?.used_trial ?? false;
|
||||
const plans = plansData?.data ?? [];
|
||||
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', {}),
|
||||
@@ -63,164 +85,436 @@ export default function SubscriptionPage() {
|
||||
onError: (err: any) => toast.error(err.message),
|
||||
});
|
||||
|
||||
const daysTotal = my?.expires_at && my?.starts_at
|
||||
? Math.round((my.expires_at - my.starts_at) / 86400)
|
||||
: null;
|
||||
const daysProgress = daysTotal && my?.days_remaining != null
|
||||
? Math.max(0, Math.min(100, ((daysTotal - my.days_remaining) / daysTotal) * 100))
|
||||
: null;
|
||||
const daysTotal = my?.expires_at && my?.starts_at ? Math.round((my.expires_at - my.starts_at) / 86400) : null;
|
||||
const daysLeft = my?.days_remaining ?? 0;
|
||||
const daysProgress = daysTotal ? Math.max(0, Math.min(100, ((daysTotal - daysLeft) / daysTotal) * 100)) : null;
|
||||
const planMeta = my ? (PLAN_META[my.plan.name] ?? PLAN_META.free) : null;
|
||||
const isExpiringSoon = daysLeft > 0 && daysLeft <= 7;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader title="پنل اشتراکی" description="مدیریت اشتراک و ارتقای پنل" />
|
||||
<div className="fade-in" style={{ maxWidth: 980, margin: '0 auto' }}>
|
||||
|
||||
{/* وضعیت اشتراک فعلی */}
|
||||
{my && (
|
||||
<div className="card" style={{ marginBottom: 20 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
|
||||
<SparklesIcon style={{ width: 22, color: PLAN_DISPLAY[my.plan.name]?.color ?? '#64748b' }} />
|
||||
<div>
|
||||
<div style={{ fontWeight: 700, fontSize: 16 }}>
|
||||
پنل {PLAN_DISPLAY[my.plan.name]?.label ?? my.plan.name}
|
||||
{my.is_trial && <span className="badge amber" style={{ marginRight: 8, fontSize: 11 }}>تریال</span>}
|
||||
</div>
|
||||
{my.expires_at
|
||||
? <div style={{ fontSize: 13, color: 'var(--text-3)' }}>
|
||||
انقضا: {formatDate(my.expires_at)} — {formatNumber(my.days_remaining ?? 0)} روز باقیمانده
|
||||
</div>
|
||||
: <div style={{ fontSize: 13, color: 'var(--text-3)' }}>بدون تاریخ انقضا</div>
|
||||
}
|
||||
{/* ── Header ── */}
|
||||
<div style={{ marginBottom: 28 }}>
|
||||
<h1 className="section-title" style={{ marginBottom: 4 }}>پنل اشتراکی</h1>
|
||||
<p style={{ color: 'var(--text-3)', fontSize: 14, margin: 0 }}>
|
||||
پنل خود را انتخاب کنید و از امکانات بیشتر بهرهمند شوید
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* ── وضعیت فعلی ── */}
|
||||
{!myLoading && my && (
|
||||
<div style={{
|
||||
background: `linear-gradient(135deg, ${planMeta!.bg} 0%, var(--surface) 100%)`,
|
||||
border: `1.5px solid ${planMeta!.border}`,
|
||||
borderRadius: 'var(--r-lg)',
|
||||
padding: '22px 24px',
|
||||
marginBottom: 28,
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
{/* decorative circle */}
|
||||
<div style={{
|
||||
position: 'absolute', left: -40, top: -40,
|
||||
width: 180, height: 180, borderRadius: '50%',
|
||||
background: planMeta!.color, opacity: 0.06, pointerEvents: 'none',
|
||||
}} />
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'flex-start', gap: 16, flexWrap: 'wrap' }}>
|
||||
{/* icon */}
|
||||
<div style={{
|
||||
width: 52, height: 52, borderRadius: 14, flexShrink: 0,
|
||||
background: planMeta!.color, color: '#fff',
|
||||
display: 'grid', placeItems: 'center',
|
||||
boxShadow: `0 6px 18px ${planMeta!.color}44`,
|
||||
}}>
|
||||
{planMeta && <planMeta.icon style={{ width: 26, height: 26 }} />}
|
||||
</div>
|
||||
|
||||
{/* info */}
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', marginBottom: 4 }}>
|
||||
<span style={{ fontWeight: 800, fontSize: 18, color: 'var(--text)' }}>
|
||||
پنل {planMeta!.label}
|
||||
</span>
|
||||
{my.is_trial && (
|
||||
<span className="badge amber" style={{ fontSize: 11 }}>
|
||||
<span className="bdot" />تریال
|
||||
</span>
|
||||
)}
|
||||
{isExpiringSoon && (
|
||||
<span className="badge red" style={{ fontSize: 11 }}>
|
||||
<span className="bdot" />در حال انقضا
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{my.expires_at ? (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, color: 'var(--text-2)' }}>
|
||||
<ClockIcon style={{ width: 14, flexShrink: 0 }} />
|
||||
انقضا {formatDate(my.expires_at)}
|
||||
<span style={{
|
||||
marginRight: 4, fontWeight: 700,
|
||||
color: isExpiringSoon ? 'var(--danger)' : planMeta!.color,
|
||||
}}>
|
||||
({formatNumber(daysLeft)} روز مانده)
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ fontSize: 13, color: 'var(--text-3)' }}>بدون تاریخ انقضا</div>
|
||||
)}
|
||||
|
||||
{/* progress bar */}
|
||||
{daysProgress !== null && (
|
||||
<div style={{ marginTop: 12, display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||
<div style={{ flex: 1, height: 7, background: 'var(--border)', borderRadius: 99, overflow: 'hidden' }}>
|
||||
<div style={{
|
||||
width: `${daysProgress}%`, height: '100%', borderRadius: 99,
|
||||
background: isExpiringSoon
|
||||
? 'var(--danger)'
|
||||
: `linear-gradient(90deg, ${planMeta!.color}, ${planMeta!.color}cc)`,
|
||||
transition: 'width .6s cubic-bezier(.22,.61,.36,1)',
|
||||
}} />
|
||||
</div>
|
||||
<span style={{ fontSize: 11.5, color: 'var(--text-3)', flexShrink: 0 }}>
|
||||
{Math.round(daysProgress)}% گذشته
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* trial CTA */}
|
||||
{!usedTrial && (
|
||||
<button
|
||||
className="btn primary sm"
|
||||
style={{ marginRight: 'auto' }}
|
||||
style={{ flexShrink: 0, alignSelf: 'flex-start', marginTop: 4 }}
|
||||
onClick={() => trialMutation.mutate()}
|
||||
disabled={trialMutation.isPending}
|
||||
>
|
||||
{trialMutation.isPending ? 'در حال فعالسازی...' : 'فعالسازی تریال رایگان'}
|
||||
{trialMutation.isPending
|
||||
? <><ArrowPathIcon style={{ width: 14, animation: 'spin 1s linear infinite' }} /> در حال فعالسازی...</>
|
||||
: '🎁 فعالسازی تریال رایگان'
|
||||
}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{daysProgress !== null && (
|
||||
<div style={{ background: 'var(--surface-2)', borderRadius: 6, height: 6, overflow: 'hidden' }}>
|
||||
<div style={{ width: `${daysProgress}%`, height: '100%', background: PLAN_DISPLAY[my.plan.name]?.color ?? '#3b82f6', transition: 'width .3s' }} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* کارتهای پلن */}
|
||||
{/* ── بنر تریال (اگر هنوز استفاده نشده و اشتراکی ندارد) ── */}
|
||||
{!myLoading && !my && !usedTrial && (
|
||||
<div style={{
|
||||
background: 'linear-gradient(135deg, #eff6ff, #f5f3ff)',
|
||||
border: '1.5px dashed #93c5fd',
|
||||
borderRadius: 'var(--r-lg)',
|
||||
padding: '18px 22px',
|
||||
marginBottom: 24,
|
||||
display: 'flex', alignItems: 'center', gap: 14,
|
||||
}}>
|
||||
<SparklesIcon style={{ width: 28, color: '#2563eb', flexShrink: 0 }} />
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontWeight: 700, fontSize: 15, color: 'var(--text)', marginBottom: 2 }}>
|
||||
یک ماه تریال رایگان دارید!
|
||||
</div>
|
||||
<div style={{ fontSize: 13, color: 'var(--text-3)' }}>
|
||||
پنل پایه را به مدت یک ماه رایگان امتحان کنید
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
className="btn primary sm"
|
||||
onClick={() => trialMutation.mutate()}
|
||||
disabled={trialMutation.isPending}
|
||||
>
|
||||
فعالسازی تریال
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── کارتهای پلن ── */}
|
||||
{plansLoading ? (
|
||||
<div style={{ padding: 40, textAlign: 'center', color: 'var(--text-3)' }}>در حال بارگذاری...</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16 }}>
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="card" style={{ height: 320 }}>
|
||||
<div className="skeleton" style={{ height: '100%', borderRadius: 'var(--r)' }} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 16 }}>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16 }}>
|
||||
{plans.map((plan) => (
|
||||
<PlanCard
|
||||
key={plan.uuid}
|
||||
plan={plan}
|
||||
currentPlanLevel={my?.plan.level ?? 0}
|
||||
currentPlanName={my?.plan.name ?? 'free'}
|
||||
usedTrial={usedTrial}
|
||||
onPurchase={(period) => setPurchaseTarget(period)}
|
||||
onPurchase={(period) => setPurchaseTarget({ period, planName: plan.name })}
|
||||
onTrial={() => trialMutation.mutate()}
|
||||
trialPending={trialMutation.isPending}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Modal پرداخت */}
|
||||
{/* ── فوتر راهنما ── */}
|
||||
<div style={{
|
||||
marginTop: 32, padding: '16px 20px',
|
||||
background: 'var(--surface-2)', borderRadius: 'var(--r)',
|
||||
border: '1px solid var(--border)',
|
||||
display: 'flex', gap: 24, flexWrap: 'wrap',
|
||||
fontSize: 12.5, color: 'var(--text-3)',
|
||||
}}>
|
||||
<span>🔒 پرداخت امن از طریق درگاههای معتبر</span>
|
||||
<span>🔄 تمدید از تاریخ انقضای قبلی محاسبه میشود</span>
|
||||
<span>📦 دادهها پس از انقضا حفظ میشوند</span>
|
||||
</div>
|
||||
|
||||
{/* ── Modal پرداخت ── */}
|
||||
<Modal
|
||||
open={!!purchaseTarget}
|
||||
onClose={() => setPurchaseTarget(null)}
|
||||
title={`خرید ${purchaseTarget?.label ?? ''}`}
|
||||
onClose={() => { setPurchaseTarget(null); setSelectedGateway('mellat'); }}
|
||||
title="پرداخت اشتراک"
|
||||
size="sm"
|
||||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
{(['mellat', 'sep'] as const).map((gw) => (
|
||||
{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 }}>
|
||||
{PLAN_META[purchaseTarget.planName]?.label ?? purchaseTarget.planName} — {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>
|
||||
|
||||
{/* انتخاب درگاه */}
|
||||
<div>
|
||||
<div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--text-2)', marginBottom: 10 }}>
|
||||
انتخاب درگاه پرداخت
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
|
||||
{(['mellat', 'sep'] as const).map((gw) => (
|
||||
<button
|
||||
key={gw}
|
||||
onClick={() => setSelectedGateway(gw)}
|
||||
style={{
|
||||
padding: '12px 16px', borderRadius: 'var(--r-sm)', cursor: 'pointer',
|
||||
border: `2px solid ${selectedGateway === gw ? 'var(--primary)' : 'var(--border)'}`,
|
||||
background: selectedGateway === gw ? 'var(--primary-soft)' : 'var(--surface)',
|
||||
color: selectedGateway === gw ? 'var(--primary-700)' : 'var(--text-2)',
|
||||
fontWeight: selectedGateway === gw ? 700 : 500,
|
||||
fontSize: 13, transition: '.14s', fontFamily: 'inherit',
|
||||
display: 'flex', alignItems: 'center', gap: 8,
|
||||
}}
|
||||
>
|
||||
<CreditCardIcon style={{ width: 17, flexShrink: 0 }} />
|
||||
{GATEWAY_LABELS[gw]}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* دکمهها */}
|
||||
<div style={{ display: 'flex', gap: 10, marginTop: 4 }}>
|
||||
<button
|
||||
key={gw}
|
||||
className={`btn ${selectedGateway === gw ? 'primary' : ''}`}
|
||||
onClick={() => setSelectedGateway(gw)}
|
||||
className="btn primary"
|
||||
style={{ flex: 1, height: 44 }}
|
||||
disabled={purchaseMutation.isPending}
|
||||
onClick={() =>
|
||||
purchaseMutation.mutate({ period_uuid: purchaseTarget.period.uuid, gateway: selectedGateway })
|
||||
}
|
||||
>
|
||||
{GATEWAY_LABELS[gw]}
|
||||
{purchaseMutation.isPending
|
||||
? 'در حال انتقال...'
|
||||
: `پرداخت ${formatRial(purchaseTarget.period.price_rials)}`
|
||||
}
|
||||
</button>
|
||||
))}
|
||||
<button className="btn ghost" style={{ height: 44 }} onClick={() => setPurchaseTarget(null)}>
|
||||
انصراف
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p style={{ margin: 0, color: 'var(--text-3)', fontSize: 14 }}>
|
||||
مبلغ: <b style={{ color: 'var(--text-1)' }}>{purchaseTarget ? formatRial(purchaseTarget.price_rials) : ''}</b>
|
||||
</p>
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<button
|
||||
className="btn primary"
|
||||
disabled={purchaseMutation.isPending}
|
||||
onClick={() =>
|
||||
purchaseTarget &&
|
||||
purchaseMutation.mutate({ period_uuid: purchaseTarget.uuid, gateway: selectedGateway })
|
||||
}
|
||||
>
|
||||
{purchaseMutation.isPending ? 'در حال انتقال...' : 'پرداخت'}
|
||||
</button>
|
||||
<button className="btn" onClick={() => setPurchaseTarget(null)}>انصراف</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── PlanCard ──────────────────────────────────────────────────────────────
|
||||
|
||||
function PlanCard({
|
||||
plan,
|
||||
currentPlanLevel,
|
||||
currentPlanName,
|
||||
usedTrial,
|
||||
onPurchase,
|
||||
onTrial,
|
||||
trialPending,
|
||||
}: {
|
||||
plan: SubscriptionPlan;
|
||||
currentPlanLevel: number;
|
||||
currentPlanName: string;
|
||||
usedTrial: boolean;
|
||||
onPurchase: (period: SubscriptionPeriod) => void;
|
||||
onTrial: () => void;
|
||||
trialPending: boolean;
|
||||
}) {
|
||||
const display = PLAN_DISPLAY[plan.name] ?? { label: plan.name, color: '#64748b' };
|
||||
const isCurrent = plan.level === currentPlanLevel;
|
||||
const meta = PLAN_META[plan.name] ?? PLAN_META.free;
|
||||
const isCurrent = plan.name === currentPlanName;
|
||||
const isUpgrade = (plan.level ?? 0) > ((PLAN_META[currentPlanName] ? plan.level : 0));
|
||||
const paidPeriods = plan.periods.filter((p) => !p.is_trial);
|
||||
const trialPeriod = plan.periods.find((p) => p.is_trial);
|
||||
const Icon = meta.icon;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="card"
|
||||
style={{ border: isCurrent ? `2px solid ${display.color}` : undefined, position: 'relative' }}
|
||||
<div style={{
|
||||
background: 'var(--surface)',
|
||||
border: `${isCurrent ? '2px' : '1.5px'} solid ${isCurrent ? meta.color : 'var(--border)'}`,
|
||||
borderRadius: 'var(--r-lg)',
|
||||
display: 'flex', flexDirection: 'column',
|
||||
position: 'relative', overflow: 'hidden',
|
||||
transition: 'box-shadow .2s, transform .2s',
|
||||
}}
|
||||
onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.boxShadow = 'var(--shadow)'; (e.currentTarget as HTMLElement).style.transform = 'translateY(-3px)'; }}
|
||||
onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.boxShadow = ''; (e.currentTarget as HTMLElement).style.transform = ''; }}
|
||||
>
|
||||
{isCurrent && (
|
||||
<span className="badge green" style={{ position: 'absolute', top: 12, left: 12, fontSize: 11 }}>
|
||||
پنل فعلی
|
||||
</span>
|
||||
)}
|
||||
<div style={{ fontWeight: 700, fontSize: 18, color: display.color, marginBottom: 8 }}>
|
||||
{display.label}
|
||||
</div>
|
||||
<div style={{ fontSize: 13, color: 'var(--text-3)', marginBottom: 12 }}>
|
||||
حداکثر {plan.max_secretaries} منشی
|
||||
{/* توپ تزئینی */}
|
||||
<div style={{
|
||||
position: 'absolute', right: -30, top: -30,
|
||||
width: 120, height: 120, borderRadius: '50%',
|
||||
background: meta.color, opacity: 0.07, pointerEvents: 'none',
|
||||
}} />
|
||||
|
||||
{/* سربرگ کارت */}
|
||||
<div style={{
|
||||
padding: '20px 20px 16px',
|
||||
borderBottom: '1px solid var(--border)',
|
||||
position: 'relative',
|
||||
}}>
|
||||
{isCurrent && (
|
||||
<span style={{
|
||||
position: 'absolute', top: 14, left: 14,
|
||||
background: meta.color, color: '#fff',
|
||||
fontSize: 10.5, fontWeight: 700, padding: '3px 9px',
|
||||
borderRadius: 999,
|
||||
}}>
|
||||
پنل فعلی
|
||||
</span>
|
||||
)}
|
||||
|
||||
<div style={{
|
||||
width: 42, height: 42, borderRadius: 12, marginBottom: 12,
|
||||
background: meta.bg, color: meta.color,
|
||||
display: 'grid', placeItems: 'center',
|
||||
border: `1.5px solid ${meta.border}`,
|
||||
}}>
|
||||
<Icon style={{ width: 22, height: 22 }} />
|
||||
</div>
|
||||
|
||||
<div style={{ fontWeight: 800, fontSize: 19, color: meta.color, marginBottom: 3 }}>
|
||||
{meta.label}
|
||||
</div>
|
||||
<div style={{ fontSize: 12.5, color: 'var(--text-3)', marginBottom: 10 }}>
|
||||
{meta.desc}
|
||||
</div>
|
||||
<div style={{
|
||||
display: 'inline-flex', alignItems: 'center', gap: 5,
|
||||
background: 'var(--surface-2)', border: '1px solid var(--border)',
|
||||
borderRadius: 99, padding: '3px 10px', fontSize: 12,
|
||||
}}>
|
||||
<span style={{ fontWeight: 700, color: 'var(--text)' }}>{plan.max_secretaries}</span>
|
||||
<span style={{ color: 'var(--text-3)' }}>منشی</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul style={{ listStyle: 'none', padding: 0, margin: '0 0 16px', display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
{Object.entries(plan.features).map(([key, enabled]) => (
|
||||
<li key={key} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13 }}>
|
||||
<CheckIcon style={{ width: 14, color: enabled ? '#22c55e' : '#94a3b8' }} />
|
||||
<span style={{ color: enabled ? 'var(--text-1)' : 'var(--text-3)' }}>
|
||||
{PLAN_FEATURE_LABELS[key] ?? key}
|
||||
{/* قابلیتها */}
|
||||
<div style={{ padding: '16px 20px', borderBottom: paidPeriods.length > 0 ? '1px solid var(--border)' : 'none', flex: 1 }}>
|
||||
<div style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-3)', marginBottom: 10, textTransform: 'uppercase', letterSpacing: '.5px' }}>
|
||||
امکانات
|
||||
</div>
|
||||
<ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 9 }}>
|
||||
{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 ? '#dcfce7' : 'var(--surface-3)',
|
||||
}}>
|
||||
{enabled
|
||||
? <CheckIcon style={{ width: 12, color: '#16a34a' }} />
|
||||
: <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 && (
|
||||
<div style={{
|
||||
marginTop: 14, padding: '10px 12px', borderRadius: 'var(--r-sm)',
|
||||
background: 'linear-gradient(135deg, #eff6ff, #f5f3ff)',
|
||||
border: '1px dashed #93c5fd', fontSize: 12.5,
|
||||
display: 'flex', alignItems: 'center', gap: 8,
|
||||
}}>
|
||||
<span>🎁</span>
|
||||
<span style={{ color: 'var(--text-2)' }}>
|
||||
تریال <b>{trialPeriod.duration_months} ماهه</b> رایگان
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<button
|
||||
className="btn primary sm"
|
||||
style={{ marginRight: 'auto', fontSize: 11.5, height: 28, padding: '0 10px' }}
|
||||
onClick={onTrial}
|
||||
disabled={trialPending}
|
||||
>
|
||||
{trialPending ? '...' : 'فعالسازی'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* دورههای پرداختی */}
|
||||
{paidPeriods.length > 0 && (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
<div style={{ padding: '14px 20px', display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
{paidPeriods.map((period) => (
|
||||
<div key={period.uuid} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
|
||||
<span style={{ fontSize: 13 }}>{period.label}</span>
|
||||
<div key={period.uuid} style={{
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||||
gap: 8, padding: '8px 10px', borderRadius: 'var(--r-sm)',
|
||||
border: '1px solid var(--border)', background: 'var(--surface-2)',
|
||||
}}>
|
||||
<div>
|
||||
<div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text)' }}>{period.label}</div>
|
||||
<div style={{ fontSize: 11.5, color: 'var(--text-3)' }}>{period.duration_months} ماه</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<span style={{ fontWeight: 600, fontSize: 13 }}>{formatRial(period.price_rials)}</span>
|
||||
<span style={{ fontWeight: 700, fontSize: 13.5, color: meta.color }}>
|
||||
{formatRial(period.price_rials)}
|
||||
</span>
|
||||
<button
|
||||
className="btn primary sm"
|
||||
onClick={() => onPurchase(period)}
|
||||
style={{
|
||||
padding: '6px 14px', borderRadius: 'var(--r-sm)', cursor: 'pointer',
|
||||
background: isCurrent ? 'var(--surface)' : meta.color,
|
||||
color: isCurrent ? meta.color : '#fff',
|
||||
border: `1.5px solid ${meta.color}`,
|
||||
fontSize: 12.5, fontWeight: 700, transition: '.14s',
|
||||
fontFamily: 'inherit',
|
||||
}}
|
||||
onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.opacity = '.85'; }}
|
||||
onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.opacity = '1'; }}
|
||||
>
|
||||
{isCurrent ? 'تمدید' : 'خرید'}
|
||||
</button>
|
||||
@@ -230,9 +524,15 @@ function PlanCard({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{trialPeriod && !usedTrial && plan.level > 0 && (
|
||||
<div style={{ marginTop: 12, fontSize: 12, color: 'var(--text-3)', borderTop: '1px solid var(--border)', paddingTop: 10 }}>
|
||||
تریال {trialPeriod.duration_months} ماهه رایگان — از دکمه بالای صفحه فعال کنید
|
||||
{/* پنل رایگان — بدون دوره */}
|
||||
{paidPeriods.length === 0 && plan.level === 0 && (
|
||||
<div style={{
|
||||
padding: '14px 20px',
|
||||
textAlign: 'center', fontSize: 13,
|
||||
color: isCurrent ? 'var(--success)' : 'var(--text-3)',
|
||||
fontWeight: isCurrent ? 700 : 400,
|
||||
}}>
|
||||
{isCurrent ? '✓ شما اکنون در این پنل هستید' : 'رایگان — بدون هزینه'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user