hamed/clinicpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: port purchase-subscription page from tauri to admin dashboard

Browse Source 
Rebuild /admin/subscription to pixel-match clinic-pro-tauri's
setting/purchase-subscription while keeping the real subscription/payment API:

- New PurchaseSubscriptionSidebar (orange-accent settings sidebar, routes preserved)
- New subscriptionIcons (SVGs copied verbatim from tauri source)
- Rewrite SubscriptionPage: 522px plan cards (gradient blur, popular badge,
  secretaries pill, period toggle, dashed trial box), 365x104 current-plan card;
  wired to /subscription/plans, /subscription/my, /subscription/trial and the
  existing payment-gateway modal (no backend change)
- Expand tests: healthy/expiring/expired/no-sub, empty-plans, period toggle, buy modal

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
hamed
2026-07-14 14:32:38 +03:30
co-authored by Claude Opus 4.8
parent ac8033574c
commit d67be26e8a
4 changed files with 545 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/admin/pages/SubscriptionPage.test.tsx
+42 -14
View File
@@ -27,13 +27,15 @@ const PLANS = [
features: { patient_records: true, services: true, sms_panel: true }, active: true, periods: [] },
];
function mockApi(overrides: Partial<Record<string, any>> = {}) {
const DEFAULT_MY = {
subscription: { plan: { name: 'basic', level: 1, max_secretaries: 3, features: {} }, is_trial: false, days_remaining: 25 },
used_trial: true, effective_plan: null,
};
function mockApi({ my = DEFAULT_MY, plans = PLANS }: { my?: any; plans?: any[] } = {}) {
get.mockImplementation((url: string) => {
if (url.includes('/subscription/plans')) return Promise.resolve({ success: true, data: PLANS });
if (url.includes('/subscription/my')) return Promise.resolve({ success: true, data: overrides.my ?? {
subscription: { plan: { name: 'basic', level: 1, max_secretaries: 3, features: {} }, is_trial: false, days_remaining: 25 },
used_trial: true, effective_plan: null,
} });
if (url.includes('/subscription/plans')) return Promise.resolve({ success: true, data: plans });
if (url.includes('/subscription/my')) return Promise.resolve({ success: true, data: my });
if (url.includes('/payment/config')) return Promise.resolve({ success: true, data: { test_mode: true, appointment_fee_rials: 0, gateways: [] } });
return Promise.resolve({ success: true, data: null });
});
@@ -50,16 +52,35 @@ describe('SubscriptionPage', () => {
expect(screen.getByText('محبوب‌ترین')).toBeInTheDocument();
});
it('shows the current-plan banner with days remaining', async () => {
it('shows the current-plan card without an expiry warning when the plan is healthy', async () => {
renderWithProviders(<SubscriptionPage />, { route: '/admin/subscription' });
expect(await screen.findByText(/پلن فعلی شما/)).toBeInTheDocument();
expect(screen.getByText(/روز تا پایان اشتراک/)).toBeInTheDocument();
expect(await screen.findByText('پلن فعلی شما:')).toBeInTheDocument();
// 25 days remaining → no expiry warning (source shows it only when < 3 days)
expect(screen.queryByText(/روز تا پایان اشتراک/)).not.toBeInTheDocument();
});
it('warns when the subscription is expiring within 3 days', async () => {
mockApi({ my: { ...DEFAULT_MY, subscription: { ...DEFAULT_MY.subscription, days_remaining: 2 } } });
renderWithProviders(<SubscriptionPage />, { route: '/admin/subscription' });
expect(await screen.findByText(/روز تا پایان اشتراک/)).toBeInTheDocument();
});
it('shows the expired message when no days remain', async () => {
mockApi({ my: { ...DEFAULT_MY, subscription: { ...DEFAULT_MY.subscription, days_remaining: 0 } } });
renderWithProviders(<SubscriptionPage />, { route: '/admin/subscription' });
expect(await screen.findByText('اشتراک شما به پایان رسیده است')).toBeInTheDocument();
});
it('shows "no subscription" when the user has none', async () => {
mockApi({ my: { subscription: null, used_trial: false, effective_plan: null } });
renderWithProviders(<SubscriptionPage />, { route: '/admin/subscription' });
expect(await screen.findByText('اشتراک ندارید')).toBeInTheDocument();
});
it('the period toggle switches the displayed price', async () => {
renderWithProviders(<SubscriptionPage />, { route: '/admin/subscription' });
const basicCard = (await screen.findByText('پلن پایه')).closest('div')!.parentElement!.parentElement!;
const card = within(basicCard);
await screen.findByText('پلن پایه');
const card = within(screen.getByTestId('plan-card-basic'));
// default = longest period (یک ساله)
expect(card.getByText(formatRial(9000000))).toBeInTheDocument();
// switch to monthly
@@ -67,11 +88,18 @@ describe('SubscriptionPage', () => {
expect(card.getByText(formatRial(1000000))).toBeInTheDocument();
});
it('clicking the buy button opens the payment modal with the selected amount', async () => {
it('clicking the renew button opens the payment modal with the selected amount', async () => {
renderWithProviders(<SubscriptionPage />, { route: '/admin/subscription' });
// basic is the current plan → button reads "تمدید اشتراک"
fireEvent.click(await screen.findByText('تمدید اشتراک'));
// basic is the current plan → its card button reads "تمدید اشتراک"
const card = within(await screen.findByTestId('plan-card-basic'));
fireEvent.click(card.getByText('تمدید اشتراک'));
expect(await screen.findByText('پرداخت اشتراک')).toBeInTheDocument();
expect(screen.getByText('درگاه آزمایشی فعال است')).toBeInTheDocument();
});
it('renders an empty state when there are no plans', async () => {
mockApi({ plans: [] });
renderWithProviders(<SubscriptionPage />, { route: '/admin/subscription' });
expect(await screen.findByText('در حال حاضر پلنی برای نمایش وجود ندارد.')).toBeInTheDocument();
});
});