# Onboarding EULA/Terms Agreement Page

**Date:** 2025-12-10
**Status:** Approved for implementation

## Overview

Add a legal terms agreement page to the registration flow. Users must agree to terms after signing in but before being sent to Stripe for payment.

## Flow Changes

### Current Flow

```
Landing (Subscribe) → /api/checkout/create-session?plan=X
  → (not auth) Sign-in with callback to checkout
  → Stripe → Welcome → Onboarding
```

### New Flow

```
Landing (Subscribe) → /api/checkout/create-session?plan=X
  → (not auth) Sign-in with callback to /registration/terms?plan=X
  → /registration/terms?plan=X (user agrees)
  → /api/checkout/create-session?plan=X
  → Stripe → Welcome → Onboarding
```

## Page Specification

**Route:** `/registration/terms`

**Query Parameters:**

- `plan` (required): `starter`, `growth`, `enhanced`, or `professional`

### Protection Logic

- If user is not authenticated → redirect to `/landing`
- If `plan` parameter is missing or invalid → redirect to `/landing`

### UI Structure

```
┌─────────────────────────────────────────┐
│            AMSOIL Logo                  │
├─────────────────────────────────────────┤
│                                         │
│   Terms and Conditions                  │
│   ─────────────────────────             │
│   ┌───────────────────────────────────┐ │
│   │                                   │ │
│   │  [Scrollable terms content]       │ │
│   │                                   │ │
│   │  Uses flex-grow to fill           │ │
│   │  available viewport height        │ │
│   │                                   │ │
│   │  Page does NOT scroll             │ │
│   │  Only this container scrolls      │ │
│   │                                   │ │
│   └───────────────────────────────────┘ │
│                                         │
│   ☐ I have read and agree to the        │
│     terms and conditions                │
│                                         │
│   [ Continue to Payment → ]             │
│       (disabled until checked)          │
│                                         │
└─────────────────────────────────────────┘
```

### Styling

- Reuse existing registration card styling (from welcome/onboarding pages)
- Page: `h-screen overflow-hidden` (no page scroll)
- Terms container: flexbox with `flex-1` to maximize vertical space
- Terms content: `overflow-y-auto` for scrolling

### Consent Mechanism

- Checkbox + "Continue to Payment" button
- Button is disabled (grayed out) until checkbox is checked
- On click: navigates to `/api/checkout/create-session?plan=X`

### Content

- Lorem ipsum placeholder text for MVP
- Real legal text to be provided by legal team

## Files to Create

1. **`app/registration/terms/page.tsx`** - Server component
   - Auth check via `getServerSession()`
   - Plan validation
   - Redirect logic for invalid states
   - Renders TermsContent client component

2. **`app/registration/terms/TermsContent.tsx`** - Client component
   - Checkbox state management
   - Button disabled/enabled logic
   - Navigation to checkout on submit

## Files to Modify

1. **`app/api/checkout/create-session/route.ts`**
   - Change unauthenticated redirect callback from itself to `/registration/terms?plan=X`

## Audit Trail

Not required for MVP. The page acts as a gate only - if payment completes, we assume agreement. Legal has approved this approach.

## Valid Plans

Same as existing checkout validation:

- `starter`
- `growth`
- `enhanced`
- `professional`