feat(admin): subscription purchase flow under settings shell

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>
2026-07-13 12:45:57 +03:30
parent 272da4ad9d
commit 174ecfa8fb
9 changed files with 800 additions and 370 deletions
@@ -0,0 +1,61 @@
+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>
+  );
+}