Stripe and license payment integration (#4935)

selfhosted stripe payment and license integration --------- Co-authored-by: Anthony Stirling <[email protected]> Co-authored-by: Connor Yoh <[email protected]>
2026-07-16 19:33:11 +02:00 · 2025-11-20 12:07:37 +00:00
parent f4725b98b0
commit 8d9e70c796
25 changed files with 3553 additions and 28 deletions
@@ -10,6 +10,7 @@ import AdminDatabaseSection from '@app/components/shared/config/configSections/A
 import AdminAdvancedSection from '@app/components/shared/config/configSections/AdminAdvancedSection';
 import AdminLegalSection from '@app/components/shared/config/configSections/AdminLegalSection';
 import AdminPremiumSection from '@app/components/shared/config/configSections/AdminPremiumSection';
+import AdminPlanSection from '@app/components/shared/config/configSections/AdminPlanSection';
 import AdminFeaturesSection from '@app/components/shared/config/configSections/AdminFeaturesSection';
 import AdminEndpointsSection from '@app/components/shared/config/configSections/AdminEndpointsSection';
 import AdminAuditSection from '@app/components/shared/config/configSections/AdminAuditSection';
@@ -136,6 +137,14 @@ export const createConfigNavSections = (
          disabled: requiresLogin,
          disabledTooltip: requiresLogin ? 'Enable login mode first' : undefined
        },
+        {
+          key: 'adminPlan',
+          label: 'Plan',
+          icon: 'star-rounded',
+          component: <AdminPlanSection />,
+          disabled: requiresLogin,
+          disabledTooltip: requiresLogin ? 'Enable login mode first' : undefined
+        },
        {
          key: 'adminAudit',
          label: 'Audit',
@@ -0,0 +1,240 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { Divider, Loader, Alert, Select, Group, Text, Collapse, Button, TextInput, Stack, Paper } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { usePlans } from '@app/hooks/usePlans';
+import licenseService, { PlanTierGroup } from '@app/services/licenseService';
+import { useCheckout } from '@app/contexts/CheckoutContext';
+import { useLicense } from '@app/contexts/LicenseContext';
+import AvailablePlansSection from '@app/components/shared/config/configSections/plan/AvailablePlansSection';
+import StaticPlanSection from '@app/components/shared/config/configSections/plan/StaticPlanSection';
+import { alert } from '@app/components/toast';
+import LocalIcon from '@app/components/shared/LocalIcon';
+import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
+import { ManageBillingButton } from '@app/components/shared/ManageBillingButton';
+import { isSupabaseConfigured } from '@app/services/supabaseClient';
+
+const AdminPlanSection: React.FC = () => {
+  const { t } = useTranslation();
+  const { openCheckout } = useCheckout();
+  const { licenseInfo, refetchLicense } = useLicense();
+  const [currency, setCurrency] = useState<string>('gbp');
+  const [useStaticVersion, setUseStaticVersion] = useState(false);
+  const [showLicenseKey, setShowLicenseKey] = useState(false);
+  const [licenseKeyInput, setLicenseKeyInput] = useState<string>('');
+  const [savingLicense, setSavingLicense] = useState(false);
+  const { plans, loading, error, refetch } = usePlans(currency);
+
+  // Check if we should use static version
+  useEffect(() => {
+    // Check if Stripe and Supabase are configured
+    const stripeKey = import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY;
+    if (!stripeKey || !isSupabaseConfigured || error) {
+      setUseStaticVersion(true);
+    }
+  }, [error]);
+
+  const handleSaveLicense = async () => {
+    try {
+      setSavingLicense(true);
+      // Allow empty string to clear/remove license
+      const response = await licenseService.saveLicenseKey(licenseKeyInput.trim());
+
+      if (response.success) {
+        // Refresh license context to update all components
+        await refetchLicense();
+
+        alert({
+          alertType: 'success',
+          title: t('admin.settings.premium.key.success', 'License Key Saved'),
+          body: t('admin.settings.premium.key.successMessage', 'Your license key has been activated successfully. No restart required.'),
+        });
+
+        // Clear input
+        setLicenseKeyInput('');
+      } else {
+        alert({
+          alertType: 'error',
+          title: t('admin.error', 'Error'),
+          body: response.error || t('admin.settings.saveError', 'Failed to save license key'),
+        });
+      }
+    } catch (error) {
+      console.error('Failed to save license key:', error);
+      alert({
+        alertType: 'error',
+        title: t('admin.error', 'Error'),
+        body: t('admin.settings.saveError', 'Failed to save license key'),
+      });
+    } finally {
+      setSavingLicense(false);
+    }
+  };
+
+  const currencyOptions = [
+    { value: 'gbp', label: 'British pound (GBP, £)' },
+    { value: 'usd', label: 'US dollar (USD, $)' },
+    { value: 'eur', label: 'Euro (EUR, €)' },
+    { value: 'cny', label: 'Chinese yuan (CNY, ¥)' },
+    { value: 'inr', label: 'Indian rupee (INR, ₹)' },
+    { value: 'brl', label: 'Brazilian real (BRL, R$)' },
+    { value: 'idr', label: 'Indonesian rupiah (IDR, Rp)' },
+  ];
+
+  const handleUpgradeClick = useCallback(
+    (planGroup: PlanTierGroup) => {
+      // Only allow upgrades for server and enterprise tiers
+      if (planGroup.tier === 'free') {
+        return;
+      }
+
+      // Use checkout context to open checkout modal
+      openCheckout(planGroup.tier, {
+        currency,
+        onSuccess: () => {
+          // Refetch plans after successful payment
+          // License context will auto-update
+          refetch();
+        },
+      });
+    },
+    [openCheckout, currency, refetch]
+  );
+
+  // Show static version if Stripe is not configured or there's an error
+  if (useStaticVersion) {
+    return <StaticPlanSection currentLicenseInfo={licenseInfo ?? undefined} />;
+  }
+
+  // Early returns after all hooks are called
+  if (loading) {
+    return (
+      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '2rem 0' }}>
+        <Loader size="lg" />
+      </div>
+    );
+  }
+
+  if (error) {
+    // Fallback to static version on error
+    return <StaticPlanSection currentLicenseInfo={licenseInfo ?? undefined} />;
+  }
+
+  if (!plans || plans.length === 0) {
+    return (
+      <Alert color="yellow" title="No data available">
+        Plans data is not available at the moment.
+      </Alert>
+    );
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+      {/* Currency Selection & Manage Subscription */}
+      <Paper withBorder p="md" radius="md">
+        <Stack gap="md">
+          <Group justify="space-between" align="center">
+            <Text size="lg" fw={600}>
+              {t('plan.currency', 'Currency')}
+            </Text>
+            <Select
+              value={currency}
+              onChange={(value) => setCurrency(value || 'gbp')}
+              data={currencyOptions}
+              searchable
+              clearable={false}
+              w={300}
+              comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
+            />
+          </Group>
+
+          {/* Manage Subscription Button - Only show if user has active license and Supabase is configured */}
+          {licenseInfo?.licenseKey && isSupabaseConfigured && (
+            <Group justify="space-between" align="center">
+              <Text size="sm" c="dimmed">
+                {t('plan.manageSubscription.description', 'Manage your subscription, billing, and payment methods')}
+              </Text>
+              <ManageBillingButton />
+            </Group>
+          )}
+        </Stack>
+      </Paper>
+
+      <AvailablePlansSection
+        plans={plans}
+        currentLicenseInfo={licenseInfo}
+        onUpgradeClick={handleUpgradeClick}
+      />
+
+      <Divider />
+
+      {/* License Key Section */}
+      <div>
+        <Button
+          variant="subtle"
+          leftSection={<LocalIcon icon={showLicenseKey ? "expand-less-rounded" : "expand-more-rounded"} width="1.25rem" height="1.25rem" />}
+          onClick={() => setShowLicenseKey(!showLicenseKey)}
+        >
+          {t('admin.settings.premium.licenseKey.toggle', 'Got a license key or certificate file?')}
+        </Button>
+
+        <Collapse in={showLicenseKey} mt="md">
+          <Stack gap="md">
+            <Alert
+              variant="light"
+              color="blue"
+              icon={<LocalIcon icon="info-rounded" width="1rem" height="1rem" />}
+            >
+              <Text size="sm">
+                {t('admin.settings.premium.licenseKey.info', 'If you have a license key or certificate file from a direct purchase, you can enter it here to activate premium or enterprise features.')}
+              </Text>
+            </Alert>
+
+            {/* Severe warning if license already exists */}
+            {licenseInfo?.licenseKey && (
+              <Alert
+                variant="light"
+                color="red"
+                icon={<LocalIcon icon="warning-rounded" width="1rem" height="1rem" />}
+                title={t('admin.settings.premium.key.overwriteWarning.title', '⚠️ Warning: Existing License Detected')}
+              >
+                <Stack gap="xs">
+                  <Text size="sm" fw={600}>
+                    {t('admin.settings.premium.key.overwriteWarning.line1', 'Overwriting your current license key cannot be undone.')}
+                  </Text>
+                  <Text size="sm">
+                    {t('admin.settings.premium.key.overwriteWarning.line2', 'Your previous license will be permanently lost unless you have backed it up elsewhere.')}
+                  </Text>
+                  <Text size="sm" fw={500}>
+                    {t('admin.settings.premium.key.overwriteWarning.line3', 'Important: Keep license keys private and secure. Never share them publicly.')}
+                  </Text>
+                </Stack>
+              </Alert>
+            )}
+
+            <Paper withBorder p="md" radius="md">
+              <Stack gap="md">
+                <TextInput
+                  label={t('admin.settings.premium.key.label', 'License Key')}
+                  description={t('admin.settings.premium.key.description', 'Enter your premium or enterprise license key. Premium features will be automatically enabled when a key is provided.')}
+                  value={licenseKeyInput}
+                  onChange={(e) => setLicenseKeyInput(e.target.value)}
+                  placeholder={licenseInfo?.licenseKey || '00000000-0000-0000-0000-000000000000'}
+                  type="password"
+                  disabled={savingLicense}
+                />
+
+                <Group justify="flex-end">
+                  <Button onClick={handleSaveLicense} loading={savingLicense} size="sm">
+                    {t('admin.settings.save', 'Save Changes')}
+                  </Button>
+                </Group>
+              </Stack>
+            </Paper>
+          </Stack>
+        </Collapse>
+      </div>
+    </div>
+  );
+};
+
+export default AdminPlanSection;
@@ -0,0 +1,109 @@
+import React, { useState, useMemo } from 'react';
+import { Button, Collapse } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import licenseService, { PlanTier, PlanTierGroup, LicenseInfo, mapLicenseToTier } from '@app/services/licenseService';
+import PlanCard from '@app/components/shared/config/configSections/plan/PlanCard';
+import FeatureComparisonTable from '@app/components/shared/config/configSections/plan/FeatureComparisonTable';
+
+interface AvailablePlansSectionProps {
+  plans: PlanTier[];
+  currentPlanId?: string;
+  currentLicenseInfo?: LicenseInfo | null;
+  onUpgradeClick: (planGroup: PlanTierGroup) => void;
+}
+
+const AvailablePlansSection: React.FC<AvailablePlansSectionProps> = ({
+  plans,
+  currentLicenseInfo,
+  onUpgradeClick,
+}) => {
+  const { t } = useTranslation();
+  const [showComparison, setShowComparison] = useState(false);
+
+  // Group plans by tier (Free, Server, Enterprise)
+  const groupedPlans = useMemo(() => {
+    return licenseService.groupPlansByTier(plans);
+  }, [plans]);
+
+  // Calculate current tier from license info
+  const currentTier = useMemo(() => {
+    return mapLicenseToTier(currentLicenseInfo || null);
+  }, [currentLicenseInfo]);
+
+  // Determine if the current tier matches (checks both Stripe subscription and license)
+  const isCurrentTier = (tierGroup: PlanTierGroup): boolean => {
+    // Check license tier match
+    if (currentTier && tierGroup.tier === currentTier) {
+      return true;
+    }
+    return false;
+  };
+
+  // Determine if selecting this plan would be a downgrade
+  const isDowngrade = (tierGroup: PlanTierGroup): boolean => {
+    if (!currentTier) return false;
+
+    // Define tier hierarchy: enterprise > server > free
+    const tierHierarchy: Record<string, number> = {
+      'enterprise': 3,
+      'server': 2,
+      'free': 1
+    };
+
+    const currentLevel = tierHierarchy[currentTier] || 0;
+    const targetLevel = tierHierarchy[tierGroup.tier] || 0;
+
+    return currentLevel > targetLevel;
+  };
+
+  return (
+    <div>
+      <h3 style={{ margin: 0, color: 'var(--mantine-color-text)', fontSize: '1rem' }}>
+        {t('plan.availablePlans.title', 'Available Plans')}
+      </h3>
+      <p
+        style={{
+          margin: '0.25rem 0 1rem 0',
+          color: 'var(--mantine-color-dimmed)',
+          fontSize: '0.875rem',
+        }}
+      >
+        {t('plan.availablePlans.subtitle', 'Choose the plan that fits your needs')}
+      </p>
+
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(3, 1fr)',
+          gap: '1rem',
+          marginBottom: '1rem',
+        }}
+      >
+        {groupedPlans.map((group) => (
+          <PlanCard
+            key={group.tier}
+            planGroup={group}
+            isCurrentTier={isCurrentTier(group)}
+            isDowngrade={isDowngrade(group)}
+            currentLicenseInfo={currentLicenseInfo}
+            onUpgradeClick={onUpgradeClick}
+          />
+        ))}
+      </div>
+
+      <div style={{ textAlign: 'center' }}>
+        <Button variant="subtle" onClick={() => setShowComparison(!showComparison)}>
+          {showComparison
+            ? t('plan.hideComparison', 'Hide Feature Comparison')
+            : t('plan.showComparison', 'Compare All Features')}
+        </Button>
+      </div>
+
+      <Collapse in={showComparison}>
+        <FeatureComparisonTable plans={groupedPlans} />
+      </Collapse>
+    </div>
+  );
+};
+
+export default AvailablePlansSection;
@@ -0,0 +1,93 @@
+import React from 'react';
+import { Card, Badge, Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { PlanFeature } from '@app/services/licenseService';
+
+interface PlanWithFeatures {
+  name: string;
+  features: PlanFeature[];
+  popular?: boolean;
+  tier?: string;
+}
+
+interface FeatureComparisonTableProps {
+  plans: PlanWithFeatures[];
+}
+
+const FeatureComparisonTable: React.FC<FeatureComparisonTableProps> = ({ plans }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Card padding="lg" radius="md" withBorder style={{ marginTop: '1rem' }}>
+      <Text size="lg" fw={600} mb="md">
+        {t('plan.featureComparison', 'Feature Comparison')}
+      </Text>
+
+      <div style={{ overflowX: 'auto' }}>
+        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+          <thead>
+            <tr style={{ borderBottom: '2px solid var(--mantine-color-gray-3)' }}>
+              <th style={{ textAlign: 'left', padding: '0.75rem' }}>
+                {t('plan.feature.title', 'Feature')}
+              </th>
+              {plans.map((plan, index) => (
+                <th
+                  key={plan.tier || plan.name || index}
+                  style={{
+                    textAlign: 'center',
+                    padding: '0.75rem',
+                    minWidth: '8rem',
+                    position: 'relative'
+                  }}
+                >
+                  {plan.name}
+                  {plan.popular && (
+                    <Badge
+                      color="blue"
+                      variant="filled"
+                      size="xs"
+                      style={{
+                        position: 'absolute',
+                        top: '0.5rem',
+                        right: '0.5rem',
+                      }}
+                    >
+                      {t('plan.popular', 'Popular')}
+                    </Badge>
+                  )}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {plans[0]?.features.map((_, featureIndex) => (
+              <tr
+                key={featureIndex}
+                style={{ borderBottom: '1px solid var(--mantine-color-gray-3)' }}
+              >
+                <td style={{ padding: '0.75rem' }}>
+                  {plans[0].features[featureIndex].name}
+                </td>
+                {plans.map((plan, planIndex) => (
+                  <td key={planIndex} style={{ textAlign: 'center', padding: '0.75rem' }}>
+                    {plan.features[featureIndex]?.included ? (
+                      <Text c="green" fw={600} size="lg">
+                        ✓
+                      </Text>
+                    ) : (
+                      <Text c="gray" size="sm">
+                        −
+                      </Text>
+                    )}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </Card>
+  );
+};
+
+export default FeatureComparisonTable;
@@ -0,0 +1,202 @@
+import React from 'react';
+import { Button, Card, Badge, Text, Stack, Divider } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { PlanTierGroup, LicenseInfo } from '@app/services/licenseService';
+
+interface PlanCardProps {
+  planGroup: PlanTierGroup;
+  isCurrentTier: boolean;
+  isDowngrade: boolean;
+  currentLicenseInfo?: LicenseInfo | null;
+  onUpgradeClick: (planGroup: PlanTierGroup) => void;
+}
+
+const PlanCard: React.FC<PlanCardProps> = ({ planGroup, isCurrentTier, isDowngrade, currentLicenseInfo, onUpgradeClick }) => {
+  const { t } = useTranslation();
+
+  // Render Free plan
+  if (planGroup.tier === 'free') {
+    return (
+      <Card
+        padding="lg"
+        radius="md"
+        withBorder
+        style={{
+          position: 'relative',
+          display: 'flex',
+          flexDirection: 'column',
+          minHeight: '400px',
+          borderColor: isCurrentTier ? 'var(--mantine-color-green-6)' : undefined,
+          borderWidth: isCurrentTier ? '2px' : undefined,
+        }}
+      >
+        {isCurrentTier && (
+          <Badge
+            color="green"
+            variant="filled"
+            size="sm"
+            style={{ position: 'absolute', top: '1rem', right: '1rem' }}
+          >
+            {t('plan.current', 'Current Plan')}
+          </Badge>
+        )}
+        <Stack gap="md" style={{ height: '100%' }}>
+          <div>
+            <Text size="xl" fw={700} mb="xs">
+              {planGroup.name}
+            </Text>
+            <Text size="xs" c="dimmed" mb="xs" style={{ opacity: 0 }}>
+              {t('plan.from', 'From')}
+            </Text>
+            <Text size="2.5rem" fw={700} style={{ lineHeight: 1 }}>
+              £0
+            </Text>
+            <Text size="sm" c="dimmed" mt="xs">
+              {t('plan.free.forever', 'Forever free')}
+            </Text>
+          </div>
+
+          <Divider />
+
+          <Stack gap="xs">
+            {planGroup.highlights.map((highlight, index) => (
+              <Text key={index} size="sm" c="dimmed">
+                • {highlight}
+              </Text>
+            ))}
+          </Stack>
+
+          <div style={{ flexGrow: 1 }} />
+
+          <Button variant="filled" disabled fullWidth>
+            {isCurrentTier
+              ? t('plan.current', 'Current Plan')
+              : t('plan.free.included', 'Included')}
+          </Button>
+        </Stack>
+      </Card>
+    );
+  }
+
+  // Render Server or Enterprise plans
+  const { monthly, yearly } = planGroup;
+  const isEnterprise = planGroup.tier === 'enterprise';
+
+  // Calculate "From" pricing - show yearly price divided by 12 for lowest monthly equivalent
+  let displayPrice = monthly?.price || 0;
+  let displaySeatPrice = monthly?.seatPrice;
+  let displayCurrency = monthly?.currency || '£';
+
+  if (yearly) {
+    displayPrice = Math.round(yearly.price / 12);
+    displaySeatPrice = yearly.seatPrice ? Math.round(yearly.seatPrice / 12) : undefined;
+    displayCurrency = yearly.currency;
+  }
+
+  return (
+    <Card
+      padding="lg"
+      radius="md"
+      withBorder
+      style={{
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        minHeight: '400px',
+        borderColor: isCurrentTier ? 'var(--mantine-color-green-6)' : undefined,
+        borderWidth: isCurrentTier ? '2px' : undefined,
+      }}
+    >
+      {isCurrentTier ? (
+        <Badge
+          color="green"
+          variant="filled"
+          size="sm"
+          style={{ position: 'absolute', top: '1rem', right: '1rem' }}
+        >
+          {t('plan.current', 'Current Plan')}
+        </Badge>
+      ) : planGroup.popular ? (
+        <Badge
+          variant="filled"
+          size="sm"
+          style={{ position: 'absolute', top: '1rem', right: '1rem' }}
+        >
+          {t('plan.popular', 'Popular')}
+        </Badge>
+      ) : null}
+
+      <Stack gap="md" style={{ height: '100%' }}>
+        {/* Tier Name */}
+        <div>
+          <Text size="xl" fw={700} mb="xs">
+            {planGroup.name}
+          </Text>
+
+          <Text size="xs" c="dimmed" mb="xs">
+            {t('plan.from', 'From')}
+          </Text>
+
+          {/* Price */}
+          {isEnterprise && displaySeatPrice !== undefined ? (
+            <>
+              <Text size="2.5rem" fw={700} style={{ lineHeight: 1 }}>
+                {displayCurrency}{displayPrice}
+              </Text>
+              <Text size="sm" c="dimmed" mt="xs">
+                + {displayCurrency}{displaySeatPrice}/seat {t('plan.perMonth', '/month')}
+              </Text>
+            </>
+          ) : (
+            <>
+              <Text size="2.5rem" fw={700} style={{ lineHeight: 1 }}>
+                {displayCurrency}{displayPrice}
+              </Text>
+              <Text size="sm" c="dimmed" mt="xs">
+                {t('plan.perMonth', '/month')}
+              </Text>
+            </>
+          )}
+
+          {/* Show seat count for enterprise plans when current */}
+          {isEnterprise && isCurrentTier && currentLicenseInfo && currentLicenseInfo.maxUsers > 0 && (
+            <Text size="sm" c="green" fw={500} mt="xs">
+              {t('plan.licensedSeats', 'Licensed: {{count}} seats', { count: currentLicenseInfo.maxUsers })}
+            </Text>
+          )}
+        </div>
+
+        <Divider />
+
+        {/* Highlights */}
+        <Stack gap="xs">
+          {planGroup.highlights.map((highlight, index) => (
+            <Text key={index} size="sm" c="dimmed">
+              • {highlight}
+            </Text>
+          ))}
+        </Stack>
+
+        <div style={{ flexGrow: 1 }} />
+
+        {/* Single Upgrade Button */}
+        <Button
+          variant={isCurrentTier || isDowngrade ? 'light' : 'filled'}
+          fullWidth
+          onClick={() => onUpgradeClick(planGroup)}
+          disabled={isCurrentTier || isDowngrade}
+        >
+          {isCurrentTier
+            ? t('plan.current', 'Current Plan')
+            : isDowngrade
+              ? t('plan.includedInCurrent', 'Included in Your Plan')
+              : isEnterprise
+                ? t('plan.selectPlan', 'Select Plan')
+                : t('plan.upgrade', 'Upgrade')}
+        </Button>
+      </Stack>
+    </Card>
+  );
+};
+
+export default PlanCard;
@@ -0,0 +1,338 @@
+import React, { useState, useEffect } from 'react';
+import { Card, Text, Group, Stack, Badge, Button, Collapse, Alert, TextInput, Paper, Loader, Divider } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import LocalIcon from '@app/components/shared/LocalIcon';
+import RestartConfirmationModal from '@app/components/shared/config/RestartConfirmationModal';
+import { useRestartServer } from '@app/components/shared/config/useRestartServer';
+import { useAdminSettings } from '@app/hooks/useAdminSettings';
+import PendingBadge from '@app/components/shared/config/PendingBadge';
+import { alert } from '@app/components/toast';
+import { LicenseInfo, mapLicenseToTier } from '@app/services/licenseService';
+import { PLAN_FEATURES, PLAN_HIGHLIGHTS } from '@app/constants/planConstants';
+import FeatureComparisonTable from '@app/components/shared/config/configSections/plan/FeatureComparisonTable';
+
+interface PremiumSettingsData {
+  key?: string;
+  enabled?: boolean;
+}
+
+interface StaticPlanSectionProps {
+  currentLicenseInfo?: LicenseInfo;
+}
+
+const StaticPlanSection: React.FC<StaticPlanSectionProps> = ({ currentLicenseInfo }) => {
+  const { t } = useTranslation();
+  const [showLicenseKey, setShowLicenseKey] = useState(false);
+  const [showComparison, setShowComparison] = useState(false);
+
+  // Premium/License key management
+  const { restartModalOpened, showRestartModal, closeRestartModal, restartServer } = useRestartServer();
+  const {
+    settings: premiumSettings,
+    setSettings: setPremiumSettings,
+    loading: premiumLoading,
+    saving: premiumSaving,
+    fetchSettings: fetchPremiumSettings,
+    saveSettings: savePremiumSettings,
+    isFieldPending,
+  } = useAdminSettings<PremiumSettingsData>({
+    sectionName: 'premium',
+  });
+
+  useEffect(() => {
+    fetchPremiumSettings();
+  }, []);
+
+  const handleSaveLicense = async () => {
+    try {
+      await savePremiumSettings();
+      showRestartModal();
+    } catch (_error) {
+      alert({
+        alertType: 'error',
+        title: t('admin.error', 'Error'),
+        body: t('admin.settings.saveError', 'Failed to save settings'),
+      });
+    }
+  };
+
+  const staticPlans = [
+    {
+      id: 'free',
+      name: t('plan.free.name', 'Free'),
+      price: 0,
+      currency: '£',
+      period: '',
+      highlights: PLAN_HIGHLIGHTS.FREE,
+      features: PLAN_FEATURES.FREE,
+      maxUsers: 5,
+    },
+    {
+      id: 'server',
+      name: 'Server',
+      price: 0,
+      currency: '',
+      period: '',
+      popular: false,
+      highlights: PLAN_HIGHLIGHTS.SERVER_MONTHLY,
+      features: PLAN_FEATURES.SERVER,
+      maxUsers: 'Unlimited users',
+    },
+    {
+      id: 'enterprise',
+      name: t('plan.enterprise.name', 'Enterprise'),
+      price: 0,
+      currency: '',
+      period: '',
+      highlights: PLAN_HIGHLIGHTS.ENTERPRISE_MONTHLY,
+      features: PLAN_FEATURES.ENTERPRISE,
+      maxUsers: 'Custom',
+    },
+  ];
+
+  const getCurrentPlan = () => {
+    const tier = mapLicenseToTier(currentLicenseInfo || null);
+    if (tier === 'enterprise') return staticPlans[2];
+    if (tier === 'server') return staticPlans[1];
+    return staticPlans[0]; // free
+  };
+
+  const currentPlan = getCurrentPlan();
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+      {/* Current Plan Section */}
+      <div>
+        <h3 style={{ margin: 0, color: 'var(--mantine-color-text)', fontSize: '1rem' }}>
+          {t('plan.activePlan.title', 'Active Plan')}
+        </h3>
+        <p
+          style={{
+            margin: '0.25rem 0 1rem 0',
+            color: 'var(--mantine-color-dimmed)',
+            fontSize: '0.875rem',
+          }}
+        >
+          {t('plan.activePlan.subtitle', 'Your current subscription details')}
+        </p>
+
+        <Card padding="lg" radius="md" withBorder>
+          <Group justify="space-between" align="center">
+            <Stack gap="xs">
+              <Group gap="sm">
+                <Text size="lg" fw={600}>
+                  {currentPlan.name}
+                </Text>
+                <Badge color="green" variant="light">
+                  {t('subscription.status.active', 'Active')}
+                </Badge>
+              </Group>
+              {currentLicenseInfo && (
+                <Text size="sm" c="dimmed">
+                  {t('plan.static.maxUsers', 'Max Users')}: {currentLicenseInfo.maxUsers}
+                </Text>
+              )}
+            </Stack>
+            <div style={{ textAlign: 'right' }}>
+              <Text size="xl" fw={700}>
+                {currentPlan.price === 0 ? t('plan.free.name', 'Free') : `${currentPlan.currency}${currentPlan.price}${currentPlan.period}`}
+              </Text>
+            </div>
+          </Group>
+        </Card>
+      </div>
+
+      {/* Available Plans */}
+      <div>
+        <h3 style={{ margin: 0, color: 'var(--mantine-color-text)', fontSize: '1rem' }}>
+          {t('plan.availablePlans.title', 'Available Plans')}
+        </h3>
+        <p
+          style={{
+            margin: '0.25rem 0 1rem 0',
+            color: 'var(--mantine-color-dimmed)',
+            fontSize: '0.875rem',
+          }}
+        >
+          {t('plan.static.contactToUpgrade', 'Contact us to upgrade or customize your plan')}
+        </p>
+
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(3, 1fr)',
+            gap: '1rem',
+            paddingBottom: '1rem',
+          }}
+        >
+          {staticPlans.map((plan) => (
+            <Card
+              key={plan.id}
+              padding="lg"
+              radius="md"
+              withBorder
+              style={{
+                position: 'relative',
+                display: 'flex',
+                flexDirection: 'column',
+                borderColor: plan.id === currentPlan.id ? 'var(--mantine-color-green-6)' : undefined,
+                borderWidth: plan.id === currentPlan.id ? '2px' : undefined,
+              }}
+            >
+              {plan.id === currentPlan.id && (
+                <Badge
+                  color="green"
+                  variant="filled"
+                  size="sm"
+                  style={{ position: 'absolute', top: '1rem', right: '1rem' }}
+                >
+                  {t('plan.current', 'Current Plan')}
+                </Badge>
+              )}
+              {plan.popular && plan.id !== currentPlan.id && (
+                <Badge
+                  variant="filled"
+                  size="xs"
+                  style={{ position: 'absolute', top: '0.5rem', right: '0.5rem' }}
+                >
+                  {t('plan.popular', 'Popular')}
+                </Badge>
+              )}
+
+              <Stack gap="md" style={{ height: '100%' }}>
+                <div>
+                  <Text size="lg" fw={600}>
+                    {plan.name}
+                  </Text>
+                  <Group gap="xs" style={{ alignItems: 'baseline' }}>
+                    <Text size="xl" fw={700} style={{ fontSize: '2rem' }}>
+                      {plan.price === 0 && plan.id !== 'free'
+                        ? t('plan.customPricing', 'Custom')
+                        : plan.price === 0
+                          ? t('plan.free.name', 'Free')
+                          : `${plan.currency}${plan.price}`}
+                    </Text>
+                    {plan.period && (
+                      <Text size="sm" c="dimmed">
+                        {plan.period}
+                      </Text>
+                    )}
+                  </Group>
+                  <Text size="xs" c="dimmed" mt="xs">
+                    {typeof plan.maxUsers === 'string'
+                      ? plan.maxUsers
+                      : `${t('plan.static.upTo', 'Up to')} ${plan.maxUsers} ${t('workspace.people.license.users', 'users')}`}
+                  </Text>
+                </div>
+
+                <Stack gap="xs">
+                  {plan.highlights.map((highlight, index) => (
+                    <Text key={index} size="sm" c="dimmed">
+                      • {highlight}
+                    </Text>
+                  ))}
+                </Stack>
+
+                <div style={{ flexGrow: 1 }} />
+
+                <Button
+                  variant={plan.id === currentPlan.id ? 'light' : 'filled'}
+                  disabled={plan.id === currentPlan.id}
+                  fullWidth
+                  onClick={() =>
+                    window.open('https://www.stirling.com/contact', '_blank')
+                  }
+                >
+                  {plan.id === currentPlan.id
+                    ? t('plan.current', 'Current Plan')
+                    : t('plan.contact', 'Contact Us')}
+                </Button>
+              </Stack>
+            </Card>
+          ))}
+        </div>
+
+        {/* Feature Comparison Toggle */}
+        <div style={{ textAlign: 'center', marginTop: '1rem' }}>
+          <Button variant="subtle" onClick={() => setShowComparison(!showComparison)}>
+            {showComparison
+              ? t('plan.hideComparison', 'Hide Feature Comparison')
+              : t('plan.showComparison', 'Compare All Features')}
+          </Button>
+        </div>
+
+        {/* Feature Comparison Table */}
+        <Collapse in={showComparison}>
+          <FeatureComparisonTable plans={staticPlans} />
+        </Collapse>
+      </div>
+
+      <Divider />
+
+      {/* License Key Section */}
+      <div>
+        <Button
+          variant="subtle"
+          leftSection={<LocalIcon icon={showLicenseKey ? "expand-less-rounded" : "expand-more-rounded"} width="1.25rem" height="1.25rem" />}
+          onClick={() => setShowLicenseKey(!showLicenseKey)}
+        >
+          {t('admin.settings.premium.licenseKey.toggle', 'Got a license key or certificate file?')}
+        </Button>
+
+        <Collapse in={showLicenseKey} mt="md">
+          <Stack gap="md">
+            <Alert
+              variant="light"
+              color="blue"
+              icon={<LocalIcon icon="info-rounded" width="1rem" height="1rem" />}
+            >
+              <Text size="sm">
+                {t('admin.settings.premium.licenseKey.info', 'If you have a license key or certificate file from a direct purchase, you can enter it here to activate premium or enterprise features.')}
+              </Text>
+            </Alert>
+
+            {premiumLoading ? (
+              <Stack align="center" justify="center" h={100}>
+                <Loader size="md" />
+              </Stack>
+            ) : (
+              <Paper withBorder p="md" radius="md">
+                <Stack gap="md">
+                  <div>
+                    <TextInput
+                      label={
+                        <Group gap="xs">
+                          <span>{t('admin.settings.premium.key.label', 'License Key')}</span>
+                          <PendingBadge show={isFieldPending('key')} />
+                        </Group>
+                      }
+                      description={t('admin.settings.premium.key.description', 'Enter your premium or enterprise license key. Premium features will be automatically enabled when a key is provided.')}
+                      value={premiumSettings.key || ''}
+                      onChange={(e) => setPremiumSettings({ ...premiumSettings, key: e.target.value })}
+                      placeholder="00000000-0000-0000-0000-000000000000"
+                    />
+                  </div>
+
+                  <Group justify="flex-end">
+                    <Button onClick={handleSaveLicense} loading={premiumSaving} size="sm">
+                      {t('admin.settings.save', 'Save Changes')}
+                    </Button>
+                  </Group>
+                </Stack>
+              </Paper>
+            )}
+          </Stack>
+        </Collapse>
+      </div>
+
+      {/* Restart Confirmation Modal */}
+      <RestartConfirmationModal
+        opened={restartModalOpened}
+        onClose={closeRestartModal}
+        onRestart={restartServer}
+      />
+    </div>
+  );
+};
+
+export default StaticPlanSection;