Nicolo-Salvafiorita
54ae86a88a
- Added subscriptionPlan and subscriptionExpiresAt fields to UserProfile model. - Enhanced profile routes to handle subscription state updates and expiration logic. - Introduced email and password validation during user registration. - Implemented link stripping for processed articles in the articles route. - Added save article functionality with appropriate UI feedback in the frontend. - Updated AccountSettings and FeedContent components to reflect subscription state and saved articles. - Improved error handling and local storage management for user preferences.
78 lines
2.7 KiB
TypeScript
78 lines
2.7 KiB
TypeScript
type SubscriptionState = 'free' | 'pro'
|
|
|
|
type AccountSettingsProps = {
|
|
username: string
|
|
email: string
|
|
subscriptionState: SubscriptionState
|
|
subscriptionExpiresAt?: string | null
|
|
onUpgrade: () => void
|
|
onCancelSubscription: () => void
|
|
}
|
|
|
|
// Sezione account: mostra profilo e gestisce in modo condizionale il piano attivo.
|
|
function AccountSettings({username, email, subscriptionState, subscriptionExpiresAt, onUpgrade, onCancelSubscription}: AccountSettingsProps) {
|
|
const isProPlan = subscriptionState === 'pro'
|
|
const expires = subscriptionExpiresAt ? new Date(subscriptionExpiresAt) : null
|
|
|
|
return (
|
|
<section className="settings-stack" aria-label="Profilo">
|
|
<section className="settings-card" aria-label="Informazioni profilo">
|
|
<header className="settings-section-header">
|
|
<div>
|
|
<h2>Informazioni profilo</h2>
|
|
<p>Controlla i dati di base associati al tuo account.</p>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="profile-info-grid">
|
|
<div>
|
|
<span className="profile-info-label">Email</span>
|
|
<p className="profile-info-value">{email}</p>
|
|
</div>
|
|
<div>
|
|
<span className="profile-info-label">Nome utente</span>
|
|
<p className="profile-info-value">{username}</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="settings-card" aria-label="Gestione abbonamento">
|
|
<header className="settings-section-header">
|
|
<div>
|
|
<h2>Gestione abbonamento</h2>
|
|
<p>Gestisci il piano attualmente associato al tuo profilo.</p>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="subscription-box">
|
|
<div className="subscription-copy">
|
|
<span className={`plan-badge ${isProPlan ? 'pro' : 'free'}`}>
|
|
{isProPlan ? 'Piano Pro' : 'Piano Gratuito'}
|
|
</span>
|
|
{isProPlan ? (
|
|
<p>{expires ? `Scade il ${expires.toLocaleDateString()}` : 'Piano Pro attivo'}</p>
|
|
) : (
|
|
<p>Passa al Pro per sbloccare monitoraggio e analisi avanzate.</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="subscription-actions">
|
|
{isProPlan ? (
|
|
<button type="button" className="subscription-link-button" onClick={onCancelSubscription}>
|
|
Annulla abbonamento
|
|
</button>
|
|
) : (
|
|
<button type="button" className="subscription-upgrade-button" onClick={onUpgrade}>
|
|
Passa a Pro
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export type { SubscriptionState }
|
|
export default AccountSettings
|