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>
62 lines
2.6 KiB
TypeScript
62 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { ChevronLeftIcon } from '@heroicons/react/24/outline';
|
|
import { SETTINGS_MENU } from '../components/layout/SettingsLayout';
|
|
|
|
/**
|
|
* SettingsMenuPage — the settings landing list for doctor/clinic users.
|
|
* A full-width tappable list of settings sections (mobile-first, matches the
|
|
* Figma mobile design). Implemented sections link to their route; the rest
|
|
* render as disabled rows labelled "بهزودی". On desktop the same list is shown;
|
|
* each section itself renders the desktop shell via SettingsLayout.
|
|
*/
|
|
export default function SettingsMenuPage() {
|
|
return (
|
|
<div className="fade-in" style={{ maxWidth: 720, margin: '0 auto' }}>
|
|
<h1 className="section-title" style={{ marginBottom: 16 }}>تنظیمات</h1>
|
|
|
|
<div style={{
|
|
background: 'var(--surface)', border: '1px solid var(--border)',
|
|
borderRadius: 'var(--r-lg)', overflow: 'hidden',
|
|
}}>
|
|
{SETTINGS_MENU.map((item, idx) => {
|
|
const Icon = item.icon;
|
|
const disabled = !item.to;
|
|
const rowStyle: React.CSSProperties = {
|
|
display: 'flex', alignItems: 'center', gap: 12,
|
|
padding: '16px 18px', fontSize: 15, fontFamily: 'inherit',
|
|
borderTop: idx === 0 ? 'none' : '1px solid var(--border)',
|
|
color: disabled ? 'var(--text-3)' : 'var(--text)',
|
|
cursor: disabled ? 'not-allowed' : 'pointer',
|
|
background: 'transparent', width: '100%', textAlign: 'right',
|
|
};
|
|
const inner = (
|
|
<>
|
|
<Icon style={{ width: 20, height: 20, flexShrink: 0, color: disabled ? 'var(--text-3)' : 'var(--primary)' }} />
|
|
<span style={{ flex: 1, fontWeight: 600 }}>{item.label}</span>
|
|
{disabled
|
|
? <span style={{ fontSize: 11, color: 'var(--text-3)' }}>بهزودی</span>
|
|
: <ChevronLeftIcon style={{ width: 18, color: 'var(--text-3)', flexShrink: 0 }} />}
|
|
</>
|
|
);
|
|
return disabled ? (
|
|
<button key={item.key} type="button" disabled style={{ ...rowStyle, border: 'none', borderTop: rowStyle.borderTop }}>
|
|
{inner}
|
|
</button>
|
|
) : (
|
|
<Link
|
|
key={item.key}
|
|
to={item.to!}
|
|
style={rowStyle}
|
|
onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.background = 'var(--surface-2)'; }}
|
|
onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.background = 'transparent'; }}
|
|
>
|
|
{inner}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|