rfc-app/frontend/src/pages/Cookies.jsx

// Cookies.jsx — v0.13.0 / roadmap item #11 / SPEC §14.6.
//
// Lists the framework's cookies, by category, with each cookie's
// purpose. Deployments override via `VITE_COOKIES_POLICY_URL` (linked
// below the framework's stub list, same shape as the privacy page).
//
// Keeping the list in source makes the framework self-documenting:
// when a future framework release adds or removes a cookie, this page
// is the change-record. Item #13's analytics SDK will add its own row
// to the analytics-category list in v0.15.0.

import { useNavigate, Link } from 'react-router-dom'

const COOKIES = [
  {
    name: 'rfc_session',
    category: 'Essential',
    purpose: "Signed session cookie that remembers who you're signed in as. itsdangerous-signed; HttpOnly; SameSite=Lax.",
    lifetime: 'Session (cleared on sign-out).',
  },
  {
    name: 'rfc-app.cookie-consent.v1',
    category: 'Essential',
    purpose: 'localStorage entry (not a cookie strictly, but tracked here for symmetry) that remembers your consent choice on this device. Cleared on browser data reset.',
    lifetime: 'Until cleared.',
  },
]

export default function Cookies() {
  const navigate = useNavigate()
  const deploymentUrl = (import.meta.env.VITE_COOKIES_POLICY_URL || '').trim()
  const appName = import.meta.env.VITE_APP_NAME || 'this deployment'

  return (
    <div className="policy-page">
      <header className="policy-header">
        <button
          className="policy-back"
          onClick={() => (history.length > 1 ? navigate(-1) : navigate('/'))}
        >
          ← Back
        </button>
        <span className="policy-title">Cookies policy</span>
      </header>
      <article className="policy-body">
        <h1>Cookies policy</h1>
        <p className="policy-subtitle">
          What {appName} stores in your browser, by category.
        </p>

        <h2>Categories</h2>
        <ul>
          <li>
            <strong>Essential</strong> — required for the app to keep
            you signed in, protect submissions, and remember your
            consent choice. Cannot be switched off (without these the
            app cannot function).
          </li>
          <li>
            <strong>Analytics</strong> — optional anonymous usage
            telemetry. Off by default; opt-in via the consent banner.
            As of v0.13.0 no analytics SDK ships; roadmap item #13
            (v0.15.0) adds one behind this gate.
          </li>
          <li>
            <strong>Other</strong> — third-party embeds, social
            widgets, or anything else the deployment chooses to enable.
            Off by default; opt-in via the consent banner. The
            framework ships no such cookies by default.
          </li>
        </ul>

        <h2>Current cookies set by the framework</h2>
        <table className="policy-table">
          <thead>
            <tr>
              <th>Name</th>
              <th>Category</th>
              <th>Purpose</th>
              <th>Lifetime</th>
            </tr>
          </thead>
          <tbody>
            {COOKIES.map(c => (
              <tr key={c.name}>
                <td><code>{c.name}</code></td>
                <td>{c.category}</td>
                <td>{c.purpose}</td>
                <td>{c.lifetime}</td>
              </tr>
            ))}
          </tbody>
        </table>

        <h2>Manage your choice</h2>
        <p>
          Change your consent any time from{' '}
          <Link to="/settings/notifications">
            Settings &rarr; Privacy &amp; cookies
          </Link>. The "Change" affordance re-opens the consent banner
          with your current selection pre-loaded.
        </p>

        {deploymentUrl ? (
          <>
            <h2>Deployment-specific cookies</h2>
            <p>
              This deployment may add additional cookies on top of the
              framework's. See the full deployment policy at:
            </p>
            <p>
              <a href={deploymentUrl} target="_blank" rel="noopener noreferrer">
                {deploymentUrl}
              </a>
            </p>
          </>
        ) : null}

        <p className="policy-footnote">
          See also the <Link to="/privacy">privacy policy</Link>.
        </p>
      </article>
    </div>
  )
}