|
|
|
|
@@ -52,10 +52,6 @@ export interface SubscriptionPlan {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const PricingPage: React.FC = () => {
|
|
|
|
|
const requireStripeCheckout = ['1', 'true', 'yes', 'on'].includes(
|
|
|
|
|
(process.env.REACT_APP_REQUIRE_STRIPE_CHECKOUT || '').toLowerCase()
|
|
|
|
|
);
|
|
|
|
|
const stripePublishableKey = process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY;
|
|
|
|
|
const navigate = useNavigate();
|
|
|
|
|
const [plans, setPlans] = useState<SubscriptionPlan[]>([]);
|
|
|
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
|
@@ -76,6 +72,39 @@ 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);
|
|
|
|
|
@@ -137,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');
|
|
|
|
|
@@ -177,7 +199,7 @@ const PricingPage: React.FC = () => {
|
|
|
|
|
const userId = localStorage.getItem('user_id') || 'anonymous';
|
|
|
|
|
|
|
|
|
|
// Check if Stripe is configured
|
|
|
|
|
if (stripePublishableKey) {
|
|
|
|
|
if (process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY) {
|
|
|
|
|
console.log('[PricingPage] Initiating Stripe Checkout');
|
|
|
|
|
|
|
|
|
|
const response = await apiClient.post('/api/subscription/create-checkout-session', {
|
|
|
|
|
@@ -191,14 +213,6 @@ const PricingPage: React.FC = () => {
|
|
|
|
|
window.location.href = response.data.url;
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (requireStripeCheckout) {
|
|
|
|
|
throw new Error('Stripe checkout is required but checkout URL was not returned.');
|
|
|
|
|
}
|
|
|
|
|
} else if (requireStripeCheckout) {
|
|
|
|
|
throw new Error(
|
|
|
|
|
'Stripe checkout is required but REACT_APP_STRIPE_PUBLISHABLE_KEY is not configured.'
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
console.log('[PricingPage] Making legacy subscription API call:', {
|
|
|
|
|
@@ -252,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();
|
|
|
|
|
|
|
|
|
|
@@ -278,13 +295,13 @@ const PricingPage: React.FC = () => {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
navigate('/onboarding');
|
|
|
|
|
navigate('/onboarding');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}, 3000);
|
|
|
|
|
} catch (err) {
|
|
|
|
|
console.error('Error subscribing:', err);
|
|
|
|
|
const errorMessage = err instanceof Error ? err.message : 'Failed to process subscription';
|
|
|
|
|
setError(errorMessage);
|
|
|
|
|
setError('Failed to process subscription');
|
|
|
|
|
setSuccessSnackbar({ open: false, message: '', countdown: 0 });
|
|
|
|
|
} finally {
|
|
|
|
|
setSubscribing(false);
|
|
|
|
|
|