tf-checkout-react-native 1.0.47 → 2.0.0-beta.10

package/src/index.tsx

@@ -1,231 +1,29 @@
-import { IMyOrderDetailsTicket } from './api/types'
-import {
-  ICheckoutBody,
-  IEventResponse,
-  IMyOrderDetailsData,
-  IMyOrdersOrder,
-  IPromoCodeResponse,
-  IPurchaseConfirmationData,
-  IRegisterNewUserBody,
-  MyOrderRequestFromType,
-} from './api/types'
-import {
-  CartTimer,
-  Dropdown,
-  DropdownMaterial,
-  Loading,
-  LoggedIn,
-  Login,
-  PromoCode,
-  WaitingList,
-} from './components'
-import { IDropdownStyles } from './components/dropdown/types'
-import { ILoadingStyles } from './components/loading/types'
-import { ILoginSuccessData } from './components/login/types'
-import {
-  BillingInfo,
-  Checkout,
-  MyOrderDetails,
-  MyOrders,
-  PurchaseConfirmation,
-  ResaleTickets,
-  ResetPassword,
-  Tickets,
-} from './containers'
-import { ICheckoutSuccessData } from './features/checkout-v2/hooks/use-checkout'
-import { IConfig } from './helpers/Config'
-import { IMyOrderDetailsProps } from './containers/myOrderDetails/types'
-import { IMyOrdersProps } from './containers/myOrders/types'
-import { IPurchaseConfirmationProps } from './containers/purchaseConfirmation/types'
-import { IResaleTicketsProps } from './containers/resaleTickets/types'
-import { IPasswordProtectedEventData, ITicketsProps } from './containers/tickets/types'
-import {
-  BillingCore,
-  BillingCoreHandle,
-  CheckoutCore,
-  CheckoutCoreHandle,
-  LoginCore,
-  LoginCoreHandle,
-  MyOrdersCore,
-  MyOrdersCoreHandle,
-  OrderDetailsCore,
-  OrderDetailsCoreHandle,
-  PurchaseConfirmationCore,
-  PurchaseConfirmationCoreHandle,
-  ResetPasswordCore,
-  ResetPasswordCoreHandle,
-  SessionCoreHandleType,
-  SessionHandleType,
-  TicketsCore,
-  TicketsCoreHandle,
-  WaitingListCore,
-  WaitingListCoreHandle,
-} from './core'
-import {
-  IBookTicketsOptions,
-  IGetTicketsPayload,
-  IGroupedTickets,
-} from './core/TicketsCore/TicketsCoreTypes'
-import { useRegisterUser, useUserProfile } from './features/auth/api-hooks'
-import {
-  CheckoutController as CheckoutV2,
-  CheckoutProvider,
-  CheckoutStyles,
-} from './features/checkout-v2'
-import { CheckoutForm, PaymentForm } from './features/checkout-v2/form'
-import {
-  useAddons,
-  useAddToCart,
-  useCart,
-  useCheckout,
-  useEventConditions,
-  useEventInfo,
-  usePaymentData,
-  usePaymentSuccess,
-  useTickets,
-  useUpdateCheckout,
-} from './features/checkout-v2/hooks/api-hooks'
-import { useCheckoutFlow } from './features/checkout-v2/hooks/use-checkout'
-import { CheckoutTexts } from './features/checkout-v2/types'
-import { useCountries, useStates } from './features/geo/api-hooks'
-import { setConfig } from './helpers/Config'
-import { deleteAllData, deleteUserData } from './helpers/LocalStorage'
-import { refreshAccessToken } from './helpers/RefreshAccessToken'
-import {
-  IAccountOrdersPurchasedEvent,
-  IAccountOrdersTicket,
-  IAccountTicketsAttributes,
-  IAccountTicketsData,
-  IAccountTicketsResponse,
-  IAddToCartResponse,
-  IError,
-  IEvent,
-  ISelectedTicket,
-  ITicket,
-  ITicketsResponseData,
-  IUserProfile,
-} from './types'
+/**
+ * tf-checkout-react-native — the native checkout, built on `tf-checkout-shared`.
+ *
+ * One import gives you the whole SDK (ttf, ENDPOINTS, dtos, logic, the engine)
+ * PLUS the native platform layer: a `useCheckout` with stripe-react-native
+ * pre-wired, `<CardInput/>`, `configureCheckout`, the UI kit, and the
+ * batteries-included `<EmbeddedCheckout/>`.
+ *
+ *   import { configureCheckout, EmbeddedCheckout } from 'tf-checkout-react-native'
+ */
 
-import { LogBox, NativeModules } from 'react-native'
-import { storage } from 'tf-checkout-shared'
-import { reactNativeStorageAdapter } from './utils/storageAdapter'
-storage.setAdapter(reactNativeStorageAdapter)
+// The entire shared SDK (the native `useCheckout` below overrides the SDK's).
+export * from 'tf-checkout-shared'
 
-LogBox.ignoreAllLogs()
+// Native platform layer
+export { useCheckout, type UseCheckoutOptions } from './useCheckout'
+export { configureCheckout, mmkvStorageAdapter } from './configure'
+export { createMmkvStorage } from './storage'
+export { CardInput, claimCardField, type CardInputProps } from './CardInput'
 
-export {
-  /**
-   * @deprecated Use hooks like useCart(), useCheckout(), etc. imported directly from 'tf-checkout-react-native'. See core/MIGRATION.md
-   */
-  BillingCore,
-  /**
-   * @deprecated Use hooks like useCart(), useCheckout(), etc. imported directly from 'tf-checkout-react-native'. See core/MIGRATION.md
-   */
-  BillingCoreHandle,
-  BillingInfo,
-  CartTimer,
-  Checkout,
-  /**
-   * @deprecated Use hooks like usePaymentData(), useEventConditions(), etc. imported directly from 'tf-checkout-react-native'. See core/MIGRATION.md
-   */
-  CheckoutCore,
-  CheckoutCoreHandle,
-  /**
-   * @deprecated Use hooks like usePaymentData(), useEventConditions(), etc. imported directly from 'tf-checkout-react-native'. See core/MIGRATION.md
-   */
-  CheckoutForm,
-  CheckoutProvider,
-  CheckoutStyles,
-  CheckoutTexts,
-  CheckoutV2,
-  deleteAllData,
-  deleteUserData,
-  Dropdown,
-  DropdownMaterial,
-  IAccountOrdersPurchasedEvent,
-  IAccountOrdersTicket,
-  IAccountTicketsAttributes,
-  IAccountTicketsData,
-  IAccountTicketsResponse,
-  IAddToCartResponse,
-  IBookTicketsOptions,
-  ICheckoutBody,
-  IDropdownStyles,
-  IError,
-  IEvent,
-  IEventResponse,
-  IGetTicketsPayload,
-  IGroupedTickets,
-  ILoadingStyles,
-  ILoginSuccessData,
-  IMyOrderDetailsData,
-  IMyOrderDetailsProps,
-  IMyOrdersOrder,
-  IMyOrdersProps,
-  IPasswordProtectedEventData,
-  IPromoCodeResponse,
-  IPurchaseConfirmationData,
-  IPurchaseConfirmationProps,
-  IRegisterNewUserBody,
-  IResaleTicketsProps,
-  ISelectedTicket,
-  ITicket,
-  ITicketsProps,
-  ITicketsResponseData,
-  IUserProfile,
-  IConfig,
-  ICheckoutSuccessData,
-  IMyOrderDetailsTicket,
-  Loading,
-  LoggedIn,
-  Login,
-  LoginCore,
-  LoginCoreHandle,
-  MyOrderDetails,
-  MyOrderRequestFromType,
-  MyOrders,
-  MyOrdersCore,
-  MyOrdersCoreHandle,
-  OrderDetailsCore,
-  OrderDetailsCoreHandle,
-  PaymentForm,
-  PromoCode,
-  PurchaseConfirmation,
-  PurchaseConfirmationCore,
-  PurchaseConfirmationCoreHandle,
-  refreshAccessToken,
-  ResaleTickets,
-  ResetPassword,
-  ResetPasswordCore,
-  ResetPasswordCoreHandle,
-  SessionCoreHandleType,
-  SessionHandleType,
-  setConfig,
-  Tickets,
-  TicketsCore,
-  TicketsCoreHandle,
-  useAddons,
-  useAddToCart,
-  // New checkout hooks (replacing BillingCore and CheckoutCore functionality)
-  useCart,
-  useCheckout,
-  useCheckoutFlow,
-  useCountries,
-  useEventConditions,
-  useEventInfo,
-  usePaymentData,
-  usePaymentSuccess,
-  useRegisterUser,
-  useStates,
-  useTickets,
-  useUpdateCheckout,
-  useUserProfile,
-  WaitingList,
-  WaitingListCore,
-  WaitingListCoreHandle,
-}
-export default NativeModules.TFCheckoutRNModule
+// Component library: themeable provider + primitives + sections + auth.
+export * from './ui'
+export * from './sections'
+export * from './auth'
+export { EmbeddedCheckout, type EmbeddedCheckoutProps } from './EmbeddedCheckout'
 
-export * from './apiv2'
-
-export { storage, type StorageAdapter } from 'tf-checkout-shared'
+// Port instances/factories (bring-your-own ports, testing, custom flows).
+export { rnConfirmer, rnPorts } from './instance'
+export { createRnStripeConfirmer, createRnPorts } from './confirmer'

package/src/instance.ts

@@ -0,0 +1,13 @@
+/**
+ * The package-level native platform instances. Created once at module load, so
+ * the hook and the UI components all bind to the SAME confirmer/ports.
+ */
+import type { PaymentConfirmer } from 'tf-checkout-shared'
+
+import { createRnPorts, createRnStripeConfirmer } from './confirmer'
+
+/** The confirmer every `useCheckout`/`<CardInput/>` binds to. */
+export const rnConfirmer: PaymentConfirmer = createRnStripeConfirmer()
+
+/** The native ports the alternative Stripe rails (OXXO / plan) run on. */
+export const rnPorts = createRnPorts()

package/src/sections/Accommodation.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { hooks, htmlToPlainText, accommodationBookingDeadline } from 'tf-checkout-shared'
+import { useCheckoutContext, useTheme } from '../ui/CheckoutProvider'
+import { Field, Input } from '../ui/Field'
+import { QuantitySelect } from '../ui/QuantitySelect'
+import { Button, Card, ErrorText, Loader, MutedText, SectionHeader } from '../ui/primitives'
+
+/** Native controls over the shared stay draft, quote and reservation lifecycle. */
+export const Accommodation = ({ eventId }: { eventId: string }) => {
+  const checkout = useCheckoutContext()
+  const flow = hooks.useAccommodationSelection(eventId, checkout)
+  const theme = useTheme()
+  const text = { color: theme.text, fontFamily: theme.fontFamily }
+  if (flow.query.isLoading) return <Loader />
+  if (!flow.rooms.length && !flow.error) return null
+  return (
+    <Card>
+      <SectionHeader title="Accommodation" subtitle="Add a place to stay with your tickets." />
+      {!!flow.error && <ErrorText>{flow.error}</ErrorText>}
+      {flow.query.isError && <Button variant="ghost" onPress={() => void flow.query.refetch()}>Try again</Button>}
+      {flow.rooms.map((room) => {
+        const id = String(room.room_type_id)
+        const stay = flow.stay(room)
+        const quote = flow.quotes[id]
+        return (
+          <View key={id} style={styles.room}>
+            <Text style={[text, styles.title]}>{room.property_name} · {room.name}</Text>
+            {!!room.description && <MutedText>{htmlToPlainText(room.description)}</MutedText>}
+            {accommodationBookingDeadline(room) && <MutedText>{accommodationBookingDeadline(room)}</MutedText>}
+            <MutedText>{room.sold_out ? 'Sold out' : `${room.currency} ${room.min_price.toFixed(2)} per night${room.max_price > room.min_price ? ' and up' : ''}`}</MutedText>
+            <Field label="Rooms">
+              <QuantitySelect value={stay.rooms} max={room.max_rooms_per_line} disabled={flow.busy || room.sold_out} label={`Rooms for ${room.name}`} onChange={(rooms) => flow.update(room, { rooms })} />
+            </Field>
+            {stay.rooms > 0 && <>
+              <Field label="Check-in (YYYY-MM-DD)"><Input accessibilityLabel={`Check-in for ${room.name}`} value={stay.check_in} maxLength={10} autoCapitalize="none" editable={!flow.busy} onChangeText={(check_in) => flow.update(room, { check_in })} /></Field>
+              <Field label="Check-out (YYYY-MM-DD)"><Input accessibilityLabel={`Check-out for ${room.name}`} value={stay.check_out} maxLength={10} autoCapitalize="none" editable={!flow.busy} onChangeText={(check_out) => flow.update(room, { check_out })} /></Field>
+              <Field label={`Guests per room (up to ${room.max_occupancy})`}><Input accessibilityLabel={`Guests per room for ${room.name}`} value={String(stay.num_guests)} keyboardType="number-pad" editable={!flow.busy} onChangeText={(value) => flow.update(room, { num_guests: Number(value) })} /></Field>
+              <Field label="Guest names (optional, one per line)"><Input multiline accessibilityLabel={`Guest names for ${room.name}`} value={(stay.occupants ?? []).map((person) => person.name).join('\n')} editable={!flow.busy} onChangeText={(value) => flow.update(room, { occupants: value.split('\n').map((name) => ({ name })) })} /></Field>
+              <MutedText>{room.cancellation_policy
+                ? `Free cancellation ${room.cancellation_policy.free_cancel_days} or more days before check-in. ${room.cancellation_policy.partial_refund_pct}% refund ${room.cancellation_policy.partial_refund_days} or more days before check-in; no refund after that.`
+                : 'Fully refundable under the property cancellation policy.'}</MutedText>
+              {!!quote && !flow.dirty && <>
+                <Text style={text}>{quote.total_formatted ?? quote.total_price_formatted}</Text>
+                {quote.charges?.map((charge, index) => <MutedText key={index}>{charge.name}: {charge.line_total_formatted}{charge.included ? ' (included)' : ''}</MutedText>)}
+              </>}
+            </>}
+            {!!flow.rejections[id] && <ErrorText>{flow.rejections[id].message}</ErrorText>}
+          </View>
+        )
+      })}
+      {flow.rooms.length > 0 && <Button loading={checkout.isBusy} disabled={flow.busy} onPress={() => void flow.save()}>{flow.dirty ? 'Save accommodation' : 'Refresh accommodation'}</Button>}
+      {flow.dirty && <Button variant="ghost" disabled={flow.busy} onPress={flow.cancel}>Discard changes</Button>}
+    </Card>
+  )
+}
+const styles = StyleSheet.create({ room: { gap: 12, paddingVertical: 12 }, title: { fontSize: 16, fontWeight: '600' } })

package/src/sections/AccountDeletion.tsx

@@ -0,0 +1,347 @@
+import React, { useMemo } from 'react'
+import {
+  ActivityIndicator,
+  Alert,
+  Linking,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native'
+import { hooks, type AccountDeletionFlow } from 'tf-checkout-shared'
+import { useTheme } from '../ui/CheckoutProvider'
+import { resolveTheme, type CheckoutTheme } from '../ui/theme'
+import { useAccountT } from '../ui/useAccountT'
+
+export interface AccountDeletionProps {
+  showHeader?: boolean
+  showExplanation?: boolean
+  onSignIn?: () => void
+  onDone?: () => void
+  onOpenTeam?: (url: string) => void | Promise<void>
+  locale?: string
+  translate?: (english: string, values?: Record<string, string | number>) => string
+  theme?: CheckoutTheme
+  style?: StyleProp<ViewStyle>
+}
+
+export const AccountDeletion = (props: AccountDeletionProps) => {
+  const deletion = hooks.useAccountDeletion()
+  return <AccountDeletionView {...props} deletion={deletion} />
+}
+
+/** Native presentation only: the common flow owns proof, retries and deletion. */
+export const AccountDeletionView = ({
+  deletion: flow,
+  showHeader = true,
+  showExplanation = true,
+  onSignIn,
+  onDone,
+  onOpenTeam,
+  locale,
+  translate,
+  theme: override,
+  style,
+}: AccountDeletionProps & { deletion: AccountDeletionFlow }) => {
+  const defaultT = useAccountT(locale)
+  const t = translate ?? defaultT
+  const inherited = useTheme()
+  const theme = useMemo(
+    () => (override ? resolveTheme({ ...inherited, ...override }) : inherited),
+    [inherited, override]
+  )
+  const assertOwner = hooks.useSessionAction()
+  const text = { color: theme.text, fontFamily: theme.fontFamily }
+  const muted = { color: theme.muted, fontFamily: theme.fontFamily }
+  const action = (
+    label: string,
+    execute: () => void,
+    danger = false,
+    disabled = flow.busy
+  ) => (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={{ disabled, busy: flow.busy }}
+      disabled={disabled}
+      onPress={() => {
+        try {
+          assertOwner()
+          execute()
+        } catch {
+          /* A retained control belongs to its original account. */
+        }
+      }}
+      style={[
+        s.button,
+        { borderColor: danger ? theme.error : theme.accent },
+        disabled && s.disabled,
+      ]}
+    >
+      <Text style={[text, { color: danger ? theme.error : theme.accent }]}>
+        {t(label)}
+      </Text>
+    </Pressable>
+  )
+  const openTeam = async (url: string) => {
+    try {
+      assertOwner()
+      await (onOpenTeam ? onOpenTeam(url) : Linking.openURL(url))
+    } catch {
+      try {
+        assertOwner()
+        Alert.alert(
+          t('Team settings'),
+          t('Unable to open team settings. Please try again.')
+        )
+      } catch {
+        /* A retired link cannot display feedback for another account. */
+      }
+    }
+  }
+  if (flow.deleted)
+    return (
+      <View style={[s.container, style]}>
+        <Text style={[s.title, text]}>{t('Account deleted')}</Text>
+        <Text accessibilityLiveRegion="polite" style={[s.body, text]}>
+          {t('Your Ticket Fairy account has been closed. You are signed out.')}
+        </Text>
+        <Text style={[s.body, muted]}>
+          {t('Financial and transaction records are retained where required.')}
+        </Text>
+        {onDone && action('Continue browsing', onDone, false, false)}
+      </View>
+    )
+  if (flow.confirmingAccount)
+    return (
+      <ActivityIndicator
+        accessibilityLabel={t('Loading account deletion options…')}
+        color={theme.accent}
+      />
+    )
+  if (!flow.signedIn)
+    return (
+      <View style={[s.container, style]}>
+        {flow.error && (
+          <>
+            <Text accessibilityRole="alert" style={[s.body, { color: theme.error }]}>
+              {t(flow.error)}
+            </Text>
+            {action('Try again', () => void flow.retry())}
+          </>
+        )}
+        <Text style={[s.body, text]}>
+          {t('Sign in to review and delete your Ticket Fairy account.')}
+        </Text>
+        {onSignIn && action('Sign in', onSignIn, false, false)}
+      </View>
+    )
+  if (flow.query.isPending)
+    return (
+      <ActivityIndicator
+        accessibilityLabel={t('Loading account deletion options…')}
+        color={theme.accent}
+      />
+    )
+  if (!flow.status)
+    return (
+      <View style={[s.container, style]}>
+        <Text accessibilityRole="alert" style={[s.body, { color: theme.error }]}>
+          {t(flow.error || 'Account deletion options could not load.')}
+        </Text>
+        {action('Try again', () => void flow.retry(), false, false)}
+      </View>
+    )
+  const status = flow.status
+  const password = status.verification === 'password'
+  const phone = status.verification === 'phone_code'
+  return (
+    <View style={[s.container, style]}>
+      {showHeader && <Text style={[s.title, text]}>{t('Delete account')}</Text>}
+      {showExplanation && (
+        <>
+          <Text style={[s.body, text]}>
+            {t(
+              'This closes your Ticket Fairy account across the app, website and organiser dashboard.'
+            )}
+          </Text>
+          <Text style={[s.heading, text]}>{t('What is removed')}</Text>
+          <Text style={[s.body, muted]}>
+            {t(
+              'Your personal profile, sign-in access, friends, saved preferences and the content you posted are removed or anonymised.'
+            )}
+          </Text>
+          <Text style={[s.heading, text]}>{t('What is kept')}</Text>
+          <Text style={[s.body, muted]}>
+            {t(
+              'Financial and transaction records are retained where required. Deleting your account does not refund or cancel orders, and does not delete other ticket holders’ details.'
+            )}
+          </Text>
+        </>
+      )}
+      {status.appleLinked && (
+        <Text style={[s.body, muted]}>
+          {t(
+            'If Ticket Fairy still appears in your Apple Account after deletion, remove its access there too.'
+          )}
+        </Text>
+      )}
+      {status.blockers.length > 0 && (
+        <View style={[s.panel, { borderColor: theme.border }]}>
+          <Text style={[s.heading, text]}>{t('Before you delete your account')}</Text>
+          {status.blockers.map((blocker) => (
+            <View key={blocker.code} style={s.container}>
+              <Text style={[s.body, text]}>{t(blocker.message)}</Text>
+              {blocker.brands?.map((brand) =>
+                brand.teamUrl ? (
+                  <Pressable
+                    key={brand.id}
+                    accessibilityRole="link"
+                    disabled={flow.busy}
+                    onPress={() => {
+                      if (brand.teamUrl) void openTeam(brand.teamUrl)
+                    }}
+                    style={s.link}
+                  >
+                    <Text style={{ color: theme.accent, fontFamily: theme.fontFamily }}>
+                      {t('Open {{name}} team settings', { name: brand.name })}
+                    </Text>
+                  </Pressable>
+                ) : null
+              )}
+            </View>
+          ))}
+          {action('Check again', () => void flow.retry())}
+        </View>
+      )}
+      {!flow.isOpen && status.canDelete && action('Delete account', flow.open, true)}
+      {flow.isOpen && (
+        <View
+          accessibilityLabel={t('Confirm account deletion')}
+          style={[s.panel, { borderColor: theme.border }]}
+        >
+          <Text style={[s.heading, text]}>{t('Delete your account permanently?')}</Text>
+          <Text style={[s.body, text]}>
+            {t('This cannot be undone. Confirm that you want to close this account.')}
+          </Text>
+          {!password && (
+            <>
+              <Text style={[s.body, muted]}>
+                {phone
+                  ? t('We will text a deletion code to your verified sign-in phone.')
+                  : t('We will email a deletion code to {{email}}.', {
+                      email: status.email,
+                    })}
+              </Text>
+              {action(
+                flow.codeSent
+                  ? 'Send a new code'
+                  : phone
+                    ? 'Text deletion code'
+                    : 'Email deletion code',
+                () => void flow.sendCode(locale),
+                false,
+                flow.busy || flow.retryAfter > 0
+              )}
+              {flow.codeSent && (
+                <Text accessibilityLiveRegion="polite" style={[s.body, muted]}>
+                  {flow.codeSent.channel === 'sms'
+                    ? t(
+                        'A code was sent to {{phone}}. It expires in {{minutes}} minutes.',
+                        {
+                          phone: flow.codeSent.phoneMasked ?? '',
+                          minutes: flow.codeSent.expiresInMinutes,
+                        }
+                      )
+                    : t(
+                        'A code was sent to {{email}}. It expires in {{minutes}} minutes.',
+                        {
+                          email: flow.codeSent.email,
+                          minutes: flow.codeSent.expiresInMinutes,
+                        }
+                      )}
+                </Text>
+              )}
+            </>
+          )}
+          {flow.retryAfter > 0 && (
+            <Text accessibilityLiveRegion="polite" style={[s.body, muted]}>
+              {t('Try again in {{seconds}} seconds.', { seconds: flow.retryAfter })}
+            </Text>
+          )}
+          <Text style={[s.heading, text]}>
+            {t(password ? 'Current password' : 'Deletion code')}
+          </Text>
+          <TextInput
+            accessibilityLabel={t(password ? 'Current password' : 'Deletion code')}
+            value={flow.proof}
+            onChangeText={flow.setProof}
+            secureTextEntry={password}
+            textContentType={password ? 'password' : 'oneTimeCode'}
+            autoComplete={password ? 'current-password' : 'one-time-code'}
+            keyboardType={password ? 'default' : 'number-pad'}
+            maxLength={password ? undefined : 6}
+            autoCapitalize="none"
+            autoCorrect={false}
+            editable={!flow.busy}
+            style={[
+              s.input,
+              text,
+              { borderColor: theme.border, backgroundColor: theme.background },
+            ]}
+          />
+          {flow.error && (
+            <Text accessibilityRole="alert" style={[s.body, { color: theme.error }]}>
+              {t(flow.error)}
+            </Text>
+          )}
+          {flow.busy && (
+            <ActivityIndicator
+              color={theme.accent}
+              accessibilityLabel={t('Please wait…')}
+            />
+          )}
+          {action('Keep account', flow.cancel)}
+          {action(
+            'Permanently delete account',
+            () => void flow.confirm(),
+            true,
+            !flow.canConfirm
+          )}
+        </View>
+      )}
+      {!flow.isOpen && flow.error && (
+        <Text accessibilityRole="alert" style={[s.body, { color: theme.error }]}>
+          {t(flow.error)}
+        </Text>
+      )}
+    </View>
+  )
+}
+
+const s = StyleSheet.create({
+  container: { gap: 12 },
+  title: { fontSize: 22, fontWeight: '600', lineHeight: 28 },
+  heading: { fontSize: 16, fontWeight: '600', lineHeight: 23 },
+  body: { fontSize: 15, lineHeight: 22 },
+  panel: {
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: 16,
+    padding: 16,
+    gap: 12,
+  },
+  button: {
+    minHeight: 48,
+    borderWidth: 1,
+    borderRadius: 12,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  input: { minHeight: 48, borderWidth: 1, borderRadius: 10, padding: 12, fontSize: 16 },
+  link: { minHeight: 44, justifyContent: 'center' },
+  disabled: { opacity: 0.5 },
+})