Feature/v2/stripeorsupabaseNotEnabled (#5006)

Removed current plan section from static plan to match connected version

stripe publishable key not required to show plans or checkout in hosted
version

lazy load plans when needed not on load

frontend/src/proprietary/components/shared/config/configSections/AdminPlanSection.tsx

@@ -31,9 +31,9 @@ const AdminPlanSection: React.FC = () => {
 
   // Check if we should use static version
   useEffect(() => {
-    // Check if Stripe is configured
-    const stripeKey = import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY;
-    if (!stripeKey || !isSupabaseConfigured || error) {
+    // Only use static version if Supabase is not configured or there's an error
+    // Stripe key is not required - hosted checkout works without it
+    if (!isSupabaseConfigured || error) {
       setUseStaticVersion(true);
     }
   }, [error]);

frontend/src/proprietary/components/shared/config/configSections/plan/StaticPlanSection.tsx

@@ -101,46 +101,6 @@ const StaticPlanSection: React.FC<StaticPlanSectionProps> = ({ currentLicenseInf
 
   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>

frontend/src/proprietary/components/shared/stripeCheckout/StripeCheckout.tsx

@@ -1,8 +1,7 @@
 import React, { useEffect } from 'react';
-import { Modal, Text, Alert, Stack, Button, Group, ActionIcon } from '@mantine/core';
+import { Modal, Text, Group, ActionIcon } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import LocalIcon from '@app/components/shared/LocalIcon';
-import { loadStripe } from '@stripe/stripe-js';
 import licenseService from '@app/services/licenseService';
 import { useIsMobile } from '@app/hooks/useIsMobile';
 import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
@@ -37,8 +36,6 @@ if (STRIPE_KEY && !STRIPE_KEY.startsWith('pk_')) {
   );
 }
 
-const stripePromise = STRIPE_KEY ? loadStripe(STRIPE_KEY) : null;
-
 const StripeCheckout: React.FC<StripeCheckoutProps> = ({
   opened,
   onClose,
@@ -192,25 +189,8 @@ const StripeCheckout: React.FC<StripeCheckoutProps> = ({
 
   // Render stage content
   const renderContent = () => {
-    // Check if Stripe is configured
-    if (!stripePromise) {
-      return (
-        <Alert color="red" title={t('payment.stripeNotConfigured', 'Stripe Not Configured')}>
-          <Stack gap="md">
-            <Text size="sm">
-              {t(
-                'payment.stripeNotConfiguredMessage',
-                'Stripe payment integration is not configured. Please contact your administrator.'
-              )}
-            </Text>
-            <Button variant="outline" onClick={handleClose}>
-              {t('common.close', 'Close')}
-            </Button>
-          </Stack>
-        </Alert>
-      );
-    }
-
+    // Don't block checkout - hosted mode works without publishable key
+    // The checkout will automatically redirect to Stripe hosted page if key is missing
     switch (checkoutState.state.currentStage) {
       case 'email':
         return (

frontend/src/proprietary/components/shared/stripeCheckout/stages/PaymentStage.tsx

@@ -35,10 +35,15 @@ export const PaymentStage: React.FC<PaymentStageProps> = ({
   }
 
   if (!stripePromise) {
+    // This should only happen if embedded mode was attempted without key
+    // Hosted checkout should have redirected before reaching this component
     return (
-      <Text size="sm" c="red">
-        Stripe is not configured properly.
-      </Text>
+      <Stack align="center" gap="md" style={{ padding: '2rem 0' }}>
+        <Loader size="lg" />
+        <Text size="sm" c="dimmed" mt="md">
+          {t('payment.redirecting', 'Redirecting to secure checkout...')}
+        </Text>
+      </Stack>
     );
   }