tf-checkout-react-native 2.0.0-beta.0 → 2.0.0-beta.11

package/src/index.tsx

@@ -16,7 +16,7 @@ export * from 'tf-checkout-shared'
 export { useCheckout, type UseCheckoutOptions } from './useCheckout'
 export { configureCheckout, mmkvStorageAdapter } from './configure'
 export { createMmkvStorage } from './storage'
-export { CardInput, type CardInputProps } from './CardInput'
+export { CardInput, claimCardField, type CardInputProps } from './CardInput'
 
 // Component library: themeable provider + primitives + sections + auth.
 export * from './ui'

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 },
+})

package/src/sections/AccountEmailEnrichment.tsx

@@ -0,0 +1,122 @@
+import React from 'react'
+import { View, type StyleProp, type ViewStyle } from 'react-native'
+import { hooks, type AccountEmailEnrichmentFlow } from 'tf-checkout-shared'
+import { Button, ErrorText, MutedText, SectionHeader } from '../ui/primitives'
+import { Field, Input } from '../ui/Field'
+import { useAccountT } from '../ui/useAccountT'
+
+export interface AccountEmailEnrichmentProps {
+  flow: AccountEmailEnrichmentFlow
+  locale?: string
+  showHeader?: boolean
+  onDone?: () => void
+  style?: StyleProp<ViewStyle>
+}
+/** The common owner retains the challenge, same-buyer proof and actual verified profile. */
+export function AccountEmailEnrichment({
+  flow,
+  locale,
+  showHeader = true,
+  onDone,
+  style,
+}: AccountEmailEnrichmentProps) {
+  const t = useAccountT(locale)
+  const assertOwner = hooks.useSessionAction()
+  const state = flow.state
+  return (
+    <View style={[{ gap: 16 }, style]}>
+      {showHeader ? <SectionHeader title={t('Add an email address')} /> : null}
+      {state.error ? <ErrorText>{t(state.error)}</ErrorText> : null}
+      {state.phase === 'verified' ? (
+        <>
+          <MutedText>{t('Your email has been verified.')}</MutedText>
+          <MutedText>{state.email}</MutedText>
+          {onDone ? (
+            <Button
+              onPress={() => {
+                try {
+                  assertOwner()
+                  onDone()
+                } catch {
+                  /* A retained receipt cannot navigate another buyer. */
+                }
+              }}
+            >
+              {t('Done')}
+            </Button>
+          ) : null}
+        </>
+      ) : (
+        <>
+          <MutedText>
+            {t(
+              'Email is optional. Add one you control for receipts and account recovery.'
+            )}
+          </MutedText>
+          <Field label={t('Email address')} required>
+            <Input
+              value={state.email}
+              accessibilityLabel={t('Email address')}
+              onChangeText={flow.setEmail}
+              keyboardType="email-address"
+              textContentType="emailAddress"
+              autoComplete="email"
+              autoCapitalize="none"
+              editable={!state.busy && state.phase === 'email'}
+              onSubmitEditing={() => {
+                if (state.phase === 'email') void flow.requestCode()
+              }}
+            />
+          </Field>
+          {state.phase === 'code' ? (
+            <>
+              <MutedText>
+                {t('Enter the code sent to {{email}}.', { email: state.email })}
+              </MutedText>
+              <Field label={t('Verification code')} required>
+                <Input
+                  value={state.code}
+                  accessibilityLabel={t('Verification code')}
+                  onChangeText={flow.setCode}
+                  keyboardType="number-pad"
+                  textContentType="oneTimeCode"
+                  autoComplete="one-time-code"
+                  maxLength={6}
+                  editable={!state.busy}
+                  onSubmitEditing={() => void flow.verifyCode()}
+                />
+              </Field>
+              <Button
+                disabled={state.busy || !/^\d{6}$/.test(state.code)}
+                loading={state.busy}
+                onPress={() => void flow.verifyCode()}
+              >
+                {t('Verify email')}
+              </Button>
+              <Button
+                variant="ghost"
+                disabled={state.busy || state.retryAfter > 0}
+                onPress={() => void flow.requestCode()}
+              >
+                {state.retryAfter > 0
+                  ? t('Resend in {{seconds}}s', { seconds: state.retryAfter })
+                  : t('Resend code')}
+              </Button>
+              <Button variant="ghost" disabled={state.busy} onPress={flow.reset}>
+                {t('Change email')}
+              </Button>
+            </>
+          ) : (
+            <Button
+              disabled={state.busy || !state.email.trim() || state.retryAfter > 0}
+              loading={state.busy}
+              onPress={() => void flow.requestCode()}
+            >
+              {t('Send email code')}
+            </Button>
+          )}
+        </>
+      )}
+    </View>
+  )
+}

package/src/sections/AccountInformation.tsx

@@ -0,0 +1,139 @@
+import React from 'react'
+import { Image, View } from 'react-native'
+import {
+  accountAnswerText,
+  accountInformationImageUrl,
+  getConfig,
+  hooks,
+  type AccountInformationTarget,
+} from 'tf-checkout-shared'
+import { CustomFieldInput } from '../ui/CustomFields'
+import { FrozenFields } from '../ui/Frozen'
+import {
+  BodyText,
+  Button,
+  Card,
+  ErrorText,
+  Loader,
+  MutedText,
+  SectionHeader,
+} from '../ui/primitives'
+import { useAccountT } from '../ui/useAccountT'
+
+export interface AccountInformationSectionProps {
+  orderId: string
+  title?: string
+  target?: AccountInformationTarget
+  locale?: string
+  active?: boolean
+  onSaved?: () => void
+}
+/** The common receipt flow owns validation, retirement and save confirmation. */
+export const AccountInformationSection = ({
+  orderId,
+  title,
+  target,
+  locale,
+  active = true,
+  onSaved,
+}: AccountInformationSectionProps) => {
+  const flow = hooks.useAccountInformation(orderId, target, active)
+  const assertOwner = hooks.useSessionAction()
+  const t = useAccountT(locale)
+  if (!active || (!flow.loading && !flow.error && flow.block && !flow.fields.length))
+    return null
+  return (
+    <Card>
+      <SectionHeader title={title ?? t('Your information')} />
+      {flow.loading ? <Loader /> : null}
+      {flow.error ? <ErrorText>{t(flow.error)}</ErrorText> : null}
+      {!flow.loading && !flow.block ? (
+        <MutedText>{t('Your information is not available for this ticket.')}</MutedText>
+      ) : null}
+      <FrozenFields frozen={flow.busy}>
+        <View style={{ gap: 16 }}>
+          {flow.fields.map((field) => {
+            if (flow.editing && field.editable)
+              return (
+                <CustomFieldInput
+                  key={field.id}
+                  field={field}
+                  value={flow.values[field.name]}
+                  onChange={(value) => flow.change(field.name, value)}
+                />
+              )
+            const image =
+              field.type === 'image'
+                ? accountInformationImageUrl(field.defaultValue, getConfig().host)
+                : null
+            return (
+              <View key={field.id} style={{ gap: 4 }}>
+                <BodyText>{field.label}</BodyText>
+                {image ? (
+                  <Image
+                    source={{ uri: image }}
+                    accessibilityLabel={field.label}
+                    style={{ width: 160, height: 120, resizeMode: 'contain' }}
+                  />
+                ) : (
+                  <MutedText>
+                    {field.type === 'image' && field.defaultValue
+                      ? t('Image already provided.')
+                      : accountAnswerText(
+                          { ...field, value: field.defaultValue },
+                          { yes: t('Yes'), no: t('No') }
+                        ) || t('Not provided')}
+                  </MutedText>
+                )}
+              </View>
+            )
+          })}
+          {flow.editing ? (
+            <>
+              <Button
+                loading={flow.busy}
+                onPress={() => {
+                  void flow.save().then((saved) => {
+                    if (saved) {
+                      try {
+                        assertOwner()
+                        onSaved?.()
+                      } catch {
+                        /* Retired receipt. */
+                      }
+                    }
+                  })
+                }}
+              >
+                {t('Save changes')}
+              </Button>
+              <Button variant="ghost" onPress={flow.cancel}>
+                {t('Cancel')}
+              </Button>
+              {flow.error ? (
+                <Button
+                  variant="ghost"
+                  onPress={() => {
+                    flow.cancel()
+                    void flow.reload()
+                  }}
+                >
+                  {t('Discard edits and reload')}
+                </Button>
+              ) : null}
+            </>
+          ) : flow.fields.some((field) => field.editable) ? (
+            <Button variant="ghost" onPress={flow.start}>
+              {t('Edit your information')}
+            </Button>
+          ) : null}
+        </View>
+      </FrozenFields>
+      {!flow.editing ? (
+        <Button variant="ghost" onPress={() => void flow.reload()}>
+          {t('Refresh information')}
+        </Button>
+      ) : null}
+    </Card>
+  )
+}