Add mode-aware pricing redirect for podcast demo flow

frontend/src/components/Pricing/PricingPage.tsx

@@ -52,27 +52,6 @@ export interface SubscriptionPlan {
 }
 
 const PricingPage: React.FC = () => {
-  const pricingMode = (process.env.REACT_APP_PRICING_MODE || 'alpha').toLowerCase();
-  const isAlphaMode = pricingMode === 'alpha';
-  const tierPolicyByMode: Record<string, { visible: string[]; selectable: string[]; unavailableLabels: Record<string, string> }> = {
-    alpha: {
-      visible: ['free', 'basic', 'pro', 'enterprise'],
-      selectable: ['free', 'basic'],
-      unavailableLabels: { pro: 'Coming Soon', enterprise: 'Contact Sales' },
-    },
-    demo: {
-      visible: ['free', 'basic', 'pro', 'enterprise'],
-      selectable: ['free', 'basic', 'pro'],
-      unavailableLabels: { enterprise: 'Contact Sales' },
-    },
-    production: {
-      visible: ['free', 'basic', 'pro', 'enterprise'],
-      selectable: ['free', 'basic', 'pro'],
-      unavailableLabels: { enterprise: 'Contact Sales' },
-    },
-  };
-  const activeTierPolicy = tierPolicyByMode[pricingMode] || tierPolicyByMode.alpha;
-
   const navigate = useNavigate();
   const [plans, setPlans] = useState<SubscriptionPlan[]>([]);
   const [loading, setLoading] = useState(true);
@@ -93,15 +72,46 @@ const PricingPage: React.FC = () => {
     fetchPlans();
   }, []);
 
+  const isPodcastOnlyDemoMode = () => {
+    const appMode = (localStorage.getItem('app_mode') || '').toLowerCase();
+    const demoMode = (localStorage.getItem('demo_mode') || '').toLowerCase();
+    const podcastOnlyDemoMode = (localStorage.getItem('podcast_only_demo_mode') || '').toLowerCase();
+    const envAppMode = (process.env.REACT_APP_APP_MODE || '').toLowerCase();
+    const envDemoMode = (process.env.REACT_APP_DEMO_MODE || '').toLowerCase();
+
+    return (
+      podcastOnlyDemoMode === 'true' ||
+      appMode === 'podcast-only' ||
+      demoMode === 'podcast-only' ||
+      envAppMode === 'podcast-only' ||
+      envDemoMode === 'podcast-only'
+    );
+  };
+
+  const redirectAfterSubscription = () => {
+    // In podcast-only demo mode, always force users into podcast flow.
+    // Never send demo users to onboarding.
+    if (isPodcastOnlyDemoMode()) {
+      navigate('/podcast-maker');
+      return;
+    }
+
+    // Full mode keeps existing onboarding redirect behavior.
+    const onboardingComplete = localStorage.getItem('onboarding_complete') === 'true';
+    if (onboardingComplete) {
+      navigate('/dashboard');
+    } else {
+      navigate('/onboarding');
+    }
+  };
+
   const fetchPlans = async () => {
     try {
       setLoading(true);
       const response = await apiClient.get('/api/subscription/plans');
-      // Filter out legacy alpha-named plans and enforce tier visibility policy.
+      // Filter out any alpha plans and ensure we only show the 4 main tiers
       const filteredPlans = response.data.data.plans.filter(
-        (plan: SubscriptionPlan) =>
-          !plan.name.toLowerCase().includes('alpha') &&
-          activeTierPolicy.visible.includes(plan.tier)
+        (plan: SubscriptionPlan) => !plan.name.toLowerCase().includes('alpha')
       );
       setPlans(filteredPlans);
     } catch (err) {
@@ -134,13 +144,10 @@ const PricingPage: React.FC = () => {
       return;
     }
 
-    if (!activeTierPolicy.selectable.includes(plan.tier)) {
+    // For alpha testing, only allow Free and Basic plans (Pro features not ready)
+    if (plan.tier !== 'free' && plan.tier !== 'basic') {
       console.error('[PricingPage] Plan tier not available:', plan.tier);
-      setError(
-        isAlphaMode
-          ? 'This plan is not available during alpha testing'
-          : 'This plan is currently not available for self-serve checkout'
-      );
+      setError('This plan is not available for alpha testing');
       return;
     }
 
@@ -159,14 +166,7 @@ const PricingPage: React.FC = () => {
         // Refresh subscription status
         window.dispatchEvent(new CustomEvent('subscription-updated'));
 
-        // After subscription, check if onboarding is complete
-        // If not complete, redirect to onboarding; otherwise to dashboard
-        const onboardingComplete = localStorage.getItem('onboarding_complete') === 'true';
-        if (onboardingComplete) {
-          navigate('/dashboard');
-        } else {
-          navigate('/onboarding');
-        }
+        redirectAfterSubscription();
       } catch (err) {
         console.error('Error subscribing:', err);
         setError('Failed to process subscription');
@@ -266,10 +266,13 @@ const PricingPage: React.FC = () => {
       setTimeout(() => {
         clearInterval(countdownInterval);
         
-        // After subscription, check if onboarding is complete
-        // If not complete, redirect to onboarding; otherwise to dashboard
-        const onboardingComplete = localStorage.getItem('onboarding_complete') === 'true';
-        if (onboardingComplete) {
+        // In podcast-only demo mode, always route users to podcast flow.
+        if (isPodcastOnlyDemoMode()) {
+          navigate('/podcast-maker');
+        } else {
+          const onboardingComplete = localStorage.getItem('onboarding_complete') === 'true';
+
+          if (onboardingComplete) {
           // Restore navigation state (path, phase, tool) if available
           const navState = restoreNavigationState();
           
@@ -292,7 +295,8 @@ const PricingPage: React.FC = () => {
             }
           }
         } else {
-          navigate('/onboarding');
+            navigate('/onboarding');
+          }
         }
       }, 3000);
     } catch (err) {
@@ -377,8 +381,6 @@ const PricingPage: React.FC = () => {
               yearlyBilling={yearlyBilling}
               selectedPlanId={selectedPlan}
               subscribing={subscribing}
-              canSelectPlan={activeTierPolicy.selectable.includes(plan.tier)}
-              unavailableLabel={activeTierPolicy.unavailableLabels[plan.tier]}
               onSelectPlan={setSelectedPlan}
               onSubscribe={handleSubscribe}
               openKnowMoreModal={openKnowMoreModal}
@@ -420,48 +422,42 @@ const PricingPage: React.FC = () => {
           }}>
             <Typography variant="h6" component="h2" gutterBottom sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
               <Warning sx={{ color: 'warning.main' }} />
-              {isAlphaMode ? 'Alpha Testing Subscription' : 'Confirm Subscription'}
+              Alpha Testing Subscription
             </Typography>
-
-            {isAlphaMode ? (
-              <>
-                <Alert severity="warning" sx={{ mb: 2 }}>
-                  <Typography variant="body2" sx={{ fontWeight: 600, mb: 0.5 }}>
-                    ⚠️ Alpha Testing Mode - No Payment Required
-                  </Typography>
-                  <Typography variant="caption" sx={{ display: 'block' }}>
-                    Payment integration is coming soon. For now, subscriptions are activated without charge.
-                  </Typography>
-                </Alert>
-
-                <Typography variant="body1" sx={{ mb: 2 }}>
-                  Thank you for participating in our alpha testing! We&apos;re crediting this plan to your account.
-                </Typography>
-
-                <Box sx={{
-                  p: 2,
-                  mb: 3,
-                  bgcolor: 'info.lighter',
-                  borderRadius: 1,
-                  border: '1px solid',
-                  borderColor: 'info.light'
-                }}>
-                  <Typography variant="body2" color="info.dark">
-                    <strong>Coming in Production:</strong>
-                  </Typography>
-                  <Typography variant="caption" color="info.dark" sx={{ display: 'block', mt: 0.5 }}>
-                    • Secure Stripe/PayPal payment processing<br />
-                    • Automatic renewal management<br />
-                    • Payment verification & receipts<br />
-                    • Upgrade/downgrade options
-                  </Typography>
-                </Box>
-              </>
-            ) : (
-              <Typography variant="body1" sx={{ mb: 3 }}>
-                Please confirm to continue with your selected subscription plan.
+            
+            {/* Alpha Testing Notice */}
+            <Alert severity="warning" sx={{ mb: 2 }}>
+              <Typography variant="body2" sx={{ fontWeight: 600, mb: 0.5 }}>
+                ⚠️ Alpha Testing Mode - No Payment Required
               </Typography>
-            )}
+              <Typography variant="caption" sx={{ display: 'block' }}>
+                Payment integration is coming soon. For now, subscriptions are activated without charge.
+              </Typography>
+            </Alert>
+            
+            <Typography variant="body1" sx={{ mb: 2 }}>
+              Thank you for participating in our alpha testing! We're crediting the Basic plan ($29 value) to your account.
+            </Typography>
+            
+            {/* TODO: Payment Integration Notice */}
+            <Box sx={{ 
+              p: 2, 
+              mb: 3, 
+              bgcolor: 'info.lighter', 
+              borderRadius: 1, 
+              border: '1px solid',
+              borderColor: 'info.light'
+            }}>
+              <Typography variant="body2" color="info.dark">
+                <strong>Coming in Production:</strong>
+              </Typography>
+              <Typography variant="caption" color="info.dark" sx={{ display: 'block', mt: 0.5 }}>
+                • Secure Stripe/PayPal payment processing<br />
+                • Automatic renewal management<br />
+                • Payment verification & receipts<br />
+                • Upgrade/downgrade options
+              </Typography>
+            </Box>
             
             {/* Note: Current behavior allows renewal without payment verification */}
             {/* This is intentional for alpha testing but will be secured in production */}

frontend/src/components/Pricing/PricingPage/PlanCard.tsx

@@ -69,8 +69,6 @@ interface PlanCardProps {
   yearlyBilling: boolean;
   selectedPlanId: number | null;
   subscribing: boolean;
-  canSelectPlan: boolean;
-  unavailableLabel?: string;
   onSelectPlan: (planId: number) => void;
   onSubscribe: (planId: number) => void;
   openKnowMoreModal: (title: string, content: React.ReactNode) => void;
@@ -81,8 +79,6 @@ const PlanCard: React.FC<PlanCardProps> = ({
   yearlyBilling,
   selectedPlanId,
   subscribing,
-  canSelectPlan,
-  unavailableLabel,
   onSelectPlan,
   onSubscribe,
   openKnowMoreModal,
@@ -913,9 +909,13 @@ const PlanCard: React.FC<PlanCardProps> = ({
       </CardContent>
 
       <CardActions sx={{ justifyContent: 'center', pb: 3, flexDirection: 'column', gap: 1 }}>
-        {!canSelectPlan ? (
+        {plan.tier === 'pro' ? (
           <Button variant="outlined" size="large" fullWidth disabled sx={{ mb: 1 }}>
-            {unavailableLabel || 'Unavailable'}
+            Coming Soon
+          </Button>
+        ) : plan.tier === 'enterprise' ? (
+          <Button variant="outlined" size="large" fullWidth disabled sx={{ mb: 1 }}>
+            Contact Sales
           </Button>
         ) : (
           <>
@@ -951,3 +951,4 @@ const PlanCard: React.FC<PlanCardProps> = ({
 };
 
 export default PlanCard;
+