# Implementation Prompt: Adaptive Sign-In Page

## Instructions for AI Coding Agent

### 1. Load the Current Branch

```bash
git checkout feature/registration-improvements
```

Ensure you're on the `feature/registration-improvements` branch before beginning work.

### 2. Review the Design Document

Read and understand the complete design specification:

```bash
cat docs/plans/2025-11-11-adaptive-signin-design.md
```

This document contains the full design for adapting `/auth/signin` to serve both new dealer subscriptions and returning dealer logins.

### 3. Implementation Overview

You will be modifying the existing `/app/auth/signin/page.tsx` to conditionally render different content based on whether the `plan` URL parameter is present.

**Key Requirements:**

- When `plan` parameter exists → Show subscription flow (existing behavior)
- When `plan` parameter is absent → Show login flow (new behavior)
- Maintain all existing styling, components, and OAuth functionality
- No new routes or files needed

### 4. Specific Changes Required

#### File: `app/auth/signin/page.tsx`

**Add conditional logic:**

1. Detect if `plan` parameter exists: `const isSubscriptionFlow = !!planName;`
2. Conditionally set heading text based on flow type
3. Conditionally set subtitle text based on flow type
4. Conditionally set right panel heading ("What Happens Next?" vs "What's New")
5. Conditionally render right panel content (existing checklist vs new updates list)
6. Conditionally set callback URL (`callbackUrl` for subscription, `/dashboard` for login)

**New content for login flow:**

- Heading: "Access Your Dashboard"
- Subtitle: "Sign in to continue"
- Right panel heading: "What's New"
- Right panel content: Placeholder system updates (4 items with checkmark icons, matching existing checklist style)

**Placeholder update items:**

- "New dealer information editor features"
- "Enhanced performance dashboard now available"
- "AMSOIL corporate content library updated"
- "Mobile experience improvements"

### 5. Testing Requirements

After implementation, test both flows:

**Subscription flow:**

```
http://localhost:3000/auth/signin?plan=starter
http://localhost:3000/auth/signin?plan=growth
http://localhost:3000/auth/signin?plan=enhanced
http://localhost:3000/auth/signin?plan=professional
```

Should show: "Subscribe to the {Plan} Plan" with "What Happens Next?" checklist

**Login flow:**

```
http://localhost:3000/auth/signin
```

Should show: "Access Your Dashboard" with "What's New" updates

### 6. Implementation Approach

Follow these steps:

1. Read the current `app/auth/signin/page.tsx` file
2. Identify the hardcoded heading, subtitle, and right panel content
3. Create conditional variables for these elements based on `isSubscriptionFlow`
4. Update JSX to use conditional variables
5. Add new "What's New" content array for login flow
6. Test both URL patterns locally
7. Commit changes with descriptive message

### 7. Success Criteria

- [ ] Subscription flow unchanged (all existing functionality works)
- [ ] Login flow shows new content and redirects to dashboard
- [ ] No TypeScript errors
- [ ] Responsive layout works on mobile and desktop
- [ ] Both flows use identical styling and branding
- [ ] OAuth buttons work in both flows

### 8. Commit Message Format

Use a clear, professional commit message:

```
feat: add adaptive signin flow for returning dealers

Modify /auth/signin to conditionally render subscription or login content
based on presence of plan URL parameter. Subscription flow unchanged.
Login flow shows "Access Your Dashboard" with system updates panel.

Refs: docs/plans/2025-11-11-adaptive-signin-design.md
```

---

## Questions or Issues?

If you encounter any ambiguity or technical issues during implementation, refer back to the design document or ask for clarification before proceeding.