@molecule/app-plan-updated-page-react

Auto-generated, AI-first package reference for the molecule.dev ecosystem. It is written to be read by coding agents as much as by people, and is generated from this package's source — edit src/index.ts JSDoc, not this file.

<PlanUpdated /> — post-purchase confirmation page.

Renders a thank-you headline + Return Home button after the user completes a plan upgrade. Reads auth state to show a spinner while the session is still hydrating, so the page is safe to navigate to directly from a webhook redirect or fresh page load.

It also completes the purchase. A hosted checkout returns the buyer here with the payment id in the query (/plan-updated?provider=stripe&sessionId=…), and this page confirms it with POST /users/:id/verify-payment/:provider — a same-origin call, so the session cookie applies. Route it at the path your API's PAYMENTS_PLAN_UPDATED_PATH points to (default /plan-updated) and the upgrade completes on the redirect instead of waiting on a webhook.

Replaces the byte-identical pages/PlanUpdated.tsx shipped by 76 of the 115 flagship apps that have a paid-plan flow. Translation keys come from @molecule/app-locales-common plus one key from the companion bond @molecule/app-locales-plan-updated-page (see remarks).

Quick Start

import { Route } from 'react-router'
import { PlanUpdated } from '@molecule/app-plan-updated-page-react'

;<Route path="/plan-updated" element={<PlanUpdated />} />

Type

feature

Installation

npm install @molecule/app-plan-updated-page-react @molecule/app-react @molecule/app-ui @molecule/app-ui-react react react-router
npm install -D @types/react

API

Interfaces

PlanUpdatedProps

Props for {@link PlanUpdated}. All optional — defaults reproduce the original hardcoded copy, so existing <PlanUpdated /> usages are unchanged.

interface PlanUpdatedProps {
  /** i18n key for the confirmation message. */
  messageKey?: string
  /** Default confirmation message when the key is missing. */
  messageDefault?: string
  /** i18n key for the thank-you line. */
  thankYouKey?: string
  /** Default thank-you line when the key is missing. */
  thankYouDefault?: string
  /** i18n key for the return-home action label. */
  actionKey?: string
  /** Default action label when the key is missing. */
  actionDefault?: string
  /** Href the return-home action navigates to. Defaults to `/`. */
  actionHref?: string
  /**
   * Provider name to verify the purchase with when the return URL carries no
   * `provider` parameter (older checkout sessions). Verification is skipped
   * when neither names one.
   */
  provider?: string
  /**
   * Set `false` to render the confirmation without verifying the purchase —
   * only for apps that grant the plan some other way (a provider webhook you
   * know is configured, or a manual back-office flow).
   */
  verify?: boolean
}

Functions

PlanUpdated(props)

Post-purchase confirmation page rendered after a plan upgrade.

Reads auth state via useAuth; while it's still initializing, shows a centered spinner. Once ready, renders a celebratory layout: a large success glyph in a soft circular halo, a two-line thank-you (planUpdated.message, planUpdated.thankYou), and a Return Home button styled with the app's primary color tokens.

Those three translation keys are part of the universal common-locale bond (@molecule/app-locales-common); the always-rendered "View receipt" link uses planUpdated.viewReceipt from the companion bond @molecule/app-locales-plan-updated-page and navigates to the hardcoded /billing route. Visual layout uses only ClassMap tokens so it inherits the app's theme (radius, color tokens, spacing) with no per-app override.

function PlanUpdated({
  messageKey = 'planUpdated.message',
  messageDefault = 'Your plan has been updated.',
  thankYouKey = 'planUpdated.thankYou',
  thankYouDefault = 'Thank you!',
  actionKey = 'planUpdated.returnHome',
  actionDefault = 'Return home',
  actionHref = '/',
  provider,
  verify = true,
}?: PlanUpdatedProps): JSX.Element

• props — Component props (see {@link PlanUpdatedProps}).

Returns: The plan-updated confirmation page element.

Injection Notes

Requirements

Peer dependencies:

• @molecule/app-react ^1.1.0
• @molecule/app-ui ^1.0.1
• @molecule/app-ui-react ^1.0.1
• react ^18.0.0 || ^19.0.0
• react-router ^7.0.0 || ^8.0.0

Runtime Dependencies

• @molecule/app-react
• @molecule/app-ui
• @molecule/app-ui-react
• react
• react-router

Requires react-router-dom (renders <Link>, so it must sit inside your Router) and the @molecule/app-react auth provider (useAuth drives the hydration spinner, useVerifyPaymentReturn the confirmation call). Never point a provider's success_url straight at the API's /api/users/:id/verify-payment/:provider: that top-level redirect crosses to a host the session cookie is not set for, so it answers 401 and the paid plan is never granted — send the buyer to THIS page instead. While the confirmation is in flight the page shows the spinner; if it fails it shows a retry (data-mol-id="plan-updated-retry") rather than a false thank-you. Pass verify={false} only if some other path grants the plan. Keys planUpdated.message / planUpdated.thankYou / planUpdated.returnHome come from @molecule/app-locales-common; the "View receipt" link uses planUpdated.viewReceipt from the companion bond @molecule/app-locales-plan-updated-page and always navigates to /billing — ensure that route exists. For the pricing-page-integrated variant see PlanUpdatedPage in @molecule/app-pricing-page-react (a same-named PlanUpdatedPage is also exported by @molecule/app-legal-pages-react) — import the one whose kit you are using.

Translations

Translation strings are provided by @molecule/app-locales-plan-updated-page.