# Registration Flow Overhaul Design

**Issue:** #482
**Branch:** `482-registration-flow-overhaul`
**Date:** 2026-01-14

## Overview

Overhaul the onboarding flow to improve usability for non-technical dealers and add Empowerkit migration support.

## Changes

### 1. Step Reordering

**Current flow:**

1. Choose Your Domain
2. Business Profile
3. Review & Continue

**New flow:**

1. Business Profile
2. Choose Your Domain
3. Review & Continue

**Rationale:** Collecting dealer number and email first enables the MigrationDealer check before subdomain selection, allowing pre-fill from migration data.

### 2. Subdomain Input Improvements

#### A. Visual Example

Add example below the input row, above status messages:

```
Example: jsmith → jsmith.shopamsoil.com
```

- `jsmith` portions styled with underline + sky-blue (#38bdf8) accent color
- Remaining text in muted white
- Clarifies which part the user needs to enter

#### B. Alignment Fixes

- Change `.onboarding-subdomain-input-group` from `items-center` to `items-end`
- Remove `marginBottom: '15px'` inline style from `#domainPrefix` select

#### C. Info Text Styling

- Change helper text div from `text-xs` to `text-sm` (0.75rem → 0.875rem)
- Remove `margin-bottom: 16px` from `.accordion-content input` selector in CSS
- Brings info text closer to its associated field

### 3. MigrationDealer Check (Feature-Flagged)

#### Environment Variable

```
ENABLE_MIGRATION_CHECK=true|false
```

#### Function Modification

Update `findPotentialMigrationDealerMatches()` in `lib/migration-dealer-lookup.ts`:

- Add optional parameter `includeSubdomains?: boolean` (default `false`)
- When `true`, skip the `isCustomDomain()` filter to return all matches

#### Flow

After Business Profile (Step 1), when user clicks "Continue":

1. If `ENABLE_MIGRATION_CHECK` enabled, call `findPotentialMigrationDealerMatches(dealerNumber, email, true)`
2. If match found → show Modal 1
3. If no match or feature disabled → proceed to Domain step

#### Modal 1: "Coming from Empowerkit?"

- Message: "If you previously had a site with Empowerkit, we may be able to migrate your basic information and domain information automatically."
- Buttons: "Yes, migrate my info" / "No, start fresh"

#### Modal 2: "Does this information look correct?"

Show editable fields:

- Contact Email: `{MigrationDealer.contactEmail}`
- Dealer Number: `{MigrationDealer.dealerNumber}`
- Domain: `{MigrationDealer.customDomain}`

Buttons: "Confirm & Continue" / "Back"

#### After Confirmation

Use `isCustomDomain()` to determine field placement:

- If custom domain → pre-fill `customDomain` field
- If AMSOIL subdomain → extract subdomain portion, pre-fill `subdomain` field

Proceed to Domain Selection step (Step 2) with fields pre-populated.

## File Changes

### Modified Files

| File                                               | Changes                                                                      |
| -------------------------------------------------- | ---------------------------------------------------------------------------- |
| `app/registration/onboarding/OnboardingForm.tsx`   | Reorder steps, add subdomain example, alignment fixes, migration check logic |
| `app/registration/onboarding/accordion-styles.css` | Remove `margin-bottom: 16px` from input selector                             |
| `lib/migration-dealer-lookup.ts`                   | Add `includeSubdomains` parameter                                            |

### New Files

| File                                                  | Purpose                                       |
| ----------------------------------------------------- | --------------------------------------------- |
| `app/registration/onboarding/MigrationCheckModal.tsx` | Modal component for Empowerkit migration flow |

### Environment

Add to `.env.example`:

```
ENABLE_MIGRATION_CHECK=false
```