dev1/src/components/Paywall.js
2025-06-30 13:20:18 +00:00

62 lines
1.8 KiB
JavaScript

import React from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { Button } from './ui/button.js';
const Paywall = () => {
const navigate = useNavigate();
const { state } = useLocation();
const { selectedCareer } = state || {};
const handleSubscribe = async () => {
const token = localStorage.getItem('token');
if (!token) return navigate('/signin');
try {
const res = await fetch('/api/activate-premium', {
method: 'POST',
headers: { 'Content-Type': 'application/json',
'Authorization': `Bearer ${token}` }
});
if (res.status === 401) return navigate('/signin-landing');
if (res.ok) {
// 1) grab the fresh token / profile if the API returns it
const { token: newToken, user } = await res.json().catch(() => ({}));
if (newToken) localStorage.setItem('token', newToken);
if (user) window.dispatchEvent(new Event('user-updated')); // or your context setter
// 2) give the auth context time to update, then push
navigate('/premium-onboarding', { replace: true, state: { selectedCareer } });
} else {
console.error('activate-premium failed:', await res.text());
}
} catch (err) {
console.error('Error activating premium:', err);
}
};
return (
<div className="paywall">
<h2>Unlock AptivaAI Premium</h2>
<ul>
<li> Personalized Career Milestone Planning</li>
<li> Comprehensive Financial Projections</li>
<li> Resume & Interview Assistance</li>
</ul>
<Button
onClick={handleSubscribe}
className="bg-green-600 hover:bg-green-700"
>
Subscribe Now
</Button>
<Button onClick={() => navigate(-1)}>Cancel / Go Back</Button>
</div>
);
};
export default Paywall;