## Cancel Flow (S—237)

An honest cancellation flow: ask why, offer one relevant alternative for that reason, then confirm with the end date.

- URL: https://sundaeui.dev/components/cancel-flow
- Category: Checkout & payments · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/cancel-flow.json`
- Tags: subscription, cancel, survey, churn, retention, billing

Step one asks for a reason. Step two shows a single matching offer (too expensive → discount, not using it → pause, missing feature → roadmap) with a clear “No thanks, cancel”.
The final step states exactly when access ends. No dark patterns: cancel is always one tap away.

### Usage

```tsx
import { CancelFlow } from '@/components/sundae/cancel-flow'

<CancelFlow />
```

### Props

- `endDate` (`string`, required): Access end date.
- `onCancel` (`(reason: string, note?: string) => void`): Confirmed.
- `onAccept` (`(offer: string) => void`): Offer taken.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Subscription settings, account deletion.

### When not to use

- Free accounts: just confirm.

### Accessibility

- Each step has a heading and focus moves to it.
- Reasons are a radiogroup; the note field is optional and labelled.
- Reduced motion removes the movement and keeps every state change.