# `upsell_offer`

## Use when / do not use when

Use for a post-purchase or upgrade offer. Do not use for the primary plan-selection paywall or a non-purchasable value screen.

## Exact metadata contract

<!-- funnelsgrove:generated:start contract-v3/step/upsell_offer -->
### Generated contract facts — do not edit

- Step contract version: `3`
- Contract hash: `d761e91d5ac6ff9e72c6d49c5bcd014270912473a66f99c49d726c65998085cf`
- Type: `upsell_offer`
- Family: `commerce`
- Description: A post-purchase or upgrade offer.
- Action owner: `step`
- Analytics role: _none_
- Terminal: `false`
- Required kind: `upsell`
- Allowed kinds: `upsell`
- Allowed semantic events: `checkout_started`, `add_payment_info`, `checkout_completed`
- Forbidden capabilities: `choice-write`, `email-capture`, `subscription-management`, `subscription-handoff`, `hardcoded-navigation`, `provider-direct-analytics`, `browser-registration-completed`

#### Choice contract

_Not a choice type._

#### Automatic lifecycle events

`first_step_clicked`, `first_step_viewed`, `funnel_started`, `step_completed`, `step_exited`, `step_started`

#### Approved capability owners

- `checkout` must be owned by `named-payment-helpers`.

#### Reserved identities

_No reserved identity for this type._

#### Golden fixture source

```ts
import type { FunnelManifestStep, FunnelStepMeta } from '@funnelsgrove/runtime';

const manifestStep = {
  id: 'premium-upgrade',
  name: 'premium-upgrade',
  path: '/premium-upgrade',
  filePath: 'src/steps/step-premium-upgrade.tsx',
  componentKey: 'stepPremiumUpgrade',
  type: 'upsell_offer',
  kind: 'upsell',
  title: 'Add premium support',
} as const satisfies FunnelManifestStep;

const componentMeta = {
  id: 'premium-upgrade',
  name: 'premium-upgrade',
  type: 'upsell_offer',
  kind: 'upsell',
  figmaNodeId: 'golden:upsell-offer',
  title: 'Add premium support',
  description: 'Offer an optional post-purchase upgrade.',
} as const satisfies FunnelStepMeta;

export const goldenFixture = {
  stepType: 'upsell_offer',
  manifestStep,
  componentMeta,
  semanticHelpers: ['trackCheckoutStarted', 'trackPaymentInfoSubmitted', 'trackCheckoutCompleted'],
} as const;
```
<!-- funnelsgrove:generated:end contract-v3/step/upsell_offer -->

## Interaction and persisted answer shape

Resolve the upgrade through shared payment configuration. Accept and decline both flow through controller-owned routes.

## Automatic lifecycle events

The controller owns lifecycle completion/exit; the payment boundary owns semantic checkout events.

## Required semantic conversions

For embedded checkout, pass `checkoutAnalytics` to the shared dialog/surface and let the payments package own the three checkout semantic events. For an authorized post-purchase charge, use `completeStripeOneClickPayment` so required Stripe confirmation is not reimplemented locally.

## Approved shared helpers

Use `completeStripeOneClickPayment` or the shared Checkout Session components, plus manifest routing.

## MUST rules

- Keep offer identity and pricing configuration outside the component.
- Make decline behavior explicit in the manifest.

## NEVER rules

- Never emit a completed checkout before provider success.
- Never call provider analytics directly.
- Never call the one-click HTTP endpoint or `loadStripe` directly from the offer component.

## Golden template or fixture

See the [embedded canonical fixture](#golden-fixture-source) generated from `upsell_offer.fixture.ts`.

## Validation command

Run `fgrove validate`.

## Manual QA and completion criteria

Test accept, decline, provider failure, retry, event deduplication, and both manifest routes.