Prima versione della web app BriefAI

2026-05-05 10:24:46 +02:00
commit 2955588c13
73 changed files with 28223 additions and 0 deletions
@@ -0,0 +1,75 @@
+type SubscriptionState = 'free' | 'pro'
+
+type AccountSettingsProps = {
+  username: string
+  email: string
+  subscriptionState: SubscriptionState
+  onUpgrade: () => void
+  onCancelSubscription: () => void
+}
+
+// Sezione account: mostra profilo e gestisce in modo condizionale il piano attivo.
+function AccountSettings({username, email, subscriptionState, onUpgrade, onCancelSubscription}: AccountSettingsProps) {
+  const isProPlan = subscriptionState === 'pro'
+
+  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>Scade il 12/12/2026</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