feat(subscription): implement feature gating for subscription-based access in admin panel

2026-06-15 12:00:36 +03:30
parent 3d33cf09b8
commit fa6656df48
11 changed files with 534 additions and 26 deletions
@@ -0,0 +1,45 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { LockClosedIcon } from '@heroicons/react/24/outline';
+import { useSubscription } from '../../hooks/useSubscription';
+
+interface FeatureGateProps {
+  feature: string;
+  children: React.ReactNode;
+}
+
+export default function FeatureGate({ feature, children }: FeatureGateProps) {
+  const { hasFeature, hasPlan } = useSubscription();
+
+  if (hasFeature(feature)) return <>{children}</>;
+
+  return (
+    <div style={{
+      display: 'flex', flexDirection: 'column',
+      alignItems: 'center', justifyContent: 'center',
+      minHeight: 320, gap: 16, padding: 40, textAlign: 'center',
+    }}>
+      <div style={{
+        width: 64, height: 64, borderRadius: '50%',
+        background: 'oklch(0.97 0.01 256)',
+        display: 'grid', placeItems: 'center',
+        border: '1px solid var(--border)',
+      }}>
+        <LockClosedIcon style={{ width: 28, color: 'var(--text-3)' }} />
+      </div>
+      <div>
+        <div style={{ fontWeight: 700, fontSize: 16, marginBottom: 6 }}>
+          این قابلیت در پنل فعلی شما فعال نیست
+        </div>
+        <div style={{ color: 'var(--text-3)', fontSize: 13.5, maxWidth: 360, lineHeight: 1.6 }}>
+          {hasPlan
+            ? 'برای استفاده از این قابلیت پنل خود را ارتقاء دهید'
+            : 'برای استفاده از این قابلیت یک پنل اشتراکی فعال کنید'}
+        </div>
+      </div>
+      <Link to="/admin/subscription" className="btn primary sm" style={{ textDecoration: 'none' }}>
+        {hasPlan ? 'ارتقاء پنل' : 'مشاهده پنل‌های اشتراکی'}
+      </Link>
+    </div>
+  );
+}