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

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

package/src/sections/AccountPaymentPlan.tsx

@@ -0,0 +1,105 @@
+import React from 'react'
+import { View } from 'react-native'
+import { accountPlanDate, hooks, type AccountPaymentPlan } from 'tf-checkout-shared'
+import {
+  BodyText,
+  Button,
+  Card,
+  ErrorText,
+  MutedText,
+  SectionHeader,
+} from '../ui/primitives'
+import { useAccountT } from '../ui/useAccountT'
+export interface AccountPaymentPlanSectionProps {
+  plan: AccountPaymentPlan
+  orderHash: string
+  locale?: string
+  onOpen: (url: string) => void | Promise<unknown>
+  onReturn?: () => void | Promise<unknown>
+}
+export const AccountPaymentPlanSection = ({
+  plan,
+  orderHash,
+  locale,
+  onOpen,
+  onReturn,
+}: AccountPaymentPlanSectionProps) => {
+  const t = useAccountT(locale)
+  const flow = hooks.useAccountPlanManagement(plan, orderHash, onOpen, onReturn)
+  return (
+    <Card>
+      <SectionHeader title={plan.terminology || t('Payment plan')} />
+      <BodyText>
+        {t(
+          plan.requiresCompletion
+            ? 'Payment plan needs attention'
+            : plan.status === 'pending'
+              ? 'Payments in progress'
+              : plan.status === 'finished'
+                ? 'All payments complete'
+                : plan.status === 'cancelled'
+                  ? 'Payment plan cancelled'
+                  : 'Payment plan setup incomplete'
+        )}
+      </BodyText>
+      <BodyText>
+        {t('Plan total')}: {plan.currency} {plan.totalAmount}
+      </BodyText>
+      {plan.remainingAmount !== null ? (
+        <BodyText>
+          {t('Remaining balance')}: {plan.currency} {plan.remainingAmount}
+        </BodyText>
+      ) : null}
+      {plan.installments.map((row, index) => (
+        <View key={index} style={{ gap: 4, marginVertical: 8 }}>
+          <BodyText>
+            {row.currency} {row.amount} ·{' '}
+            {t(
+              row.status === 'paid'
+                ? 'Paid'
+                : row.status === 'unpaid'
+                  ? 'Scheduled'
+                  : row.status === 'void' || row.status === 'uncollectible'
+                    ? 'Payment unsuccessful'
+                    : row.status
+            )}
+          </BodyText>
+          <MutedText>
+            {accountPlanDate(
+              row.status === 'paid'
+                ? (row.chargeDate ?? row.updatedAt)
+                : row.scheduledDate,
+              locale,
+              row.status === 'paid'
+            ) || t('Date not scheduled')}
+          </MutedText>
+        </View>
+      ))}
+      {plan.status === 'pending' ? (
+        <MutedText>
+          {t('Your QR code becomes available when your payment plan is complete.')}
+        </MutedText>
+      ) : null}
+      <MutedText>
+        {t('Manage this plan on the Ticket Fairy website. Sign in there if asked.')}
+      </MutedText>
+      {flow.error ? <ErrorText>{t(flow.error)}</ErrorText> : null}
+      <Button
+        disabled={flow.busy}
+        onPress={() => {
+          void flow.open(
+            plan.completeUrl ? 'complete' : plan.updateCardUrl ? 'update' : 'manage'
+          )
+        }}
+      >
+        {t(
+          plan.completeUrl
+            ? 'Complete payment plan'
+            : plan.updateCardUrl
+              ? 'Update card details'
+              : 'View payment plan on website'
+        )}
+      </Button>
+    </Card>
+  )
+}

package/src/sections/AccountRewards.tsx

@@ -0,0 +1,108 @@
+import React, { type FC } from 'react'
+import { Alert, Image, Share, View } from 'react-native'
+import {
+  createTranslator,
+  hooks,
+  resolveLocale,
+  type AccountRewardsSectionProps,
+} from 'tf-checkout-shared'
+import {
+  BodyText,
+  Button,
+  Card,
+  ErrorText,
+  Loader,
+  SectionHeader,
+} from '../ui/primitives'
+
+/** The account aggregate has no order identity and offers no reward mutations. */
+export const AccountRewardsSection: FC<AccountRewardsSectionProps> = ({
+  locale,
+  onBrowseEvents,
+  onViewTickets,
+}) => {
+  const t = createTranslator({ locale: resolveLocale(locale) })
+  const { session, query, view } = hooks.useAccountRewardsSummary(t)
+  const assertOwner = hooks.useSessionAction()
+  const share = async (imageUrl: string) => {
+    try {
+      assertOwner()
+      await Share.share({ url: imageUrl, message: imageUrl })
+    } catch {
+      try {
+        assertOwner()
+        Alert.alert(t('rewards.account.shareError'))
+      } catch {
+        // A retired buyer must not display an alert in the next buyer's account.
+      }
+    }
+  }
+  return (
+    <View style={{ gap: 16 }}>
+      <SectionHeader
+        title={t('rewards.account.title')}
+        subtitle={t('rewards.account.intro')}
+      />
+      {!session.isAuthenticated ? (
+        <BodyText>{t('rewards.account.signIn')}</BodyText>
+      ) : (
+        <>
+          {query.isLoading && <Loader />}
+          {query.error && <ErrorText>{t('rewards.account.error')}</ErrorText>}
+          <Button
+            variant="ghost"
+            loading={query.isFetching}
+            onPress={() => void query.refetch()}
+          >
+            {t('rewards.account.refresh')}
+          </Button>
+          {view?.empty && <BodyText>{t('rewards.account.empty')}</BodyText>}
+          {view &&
+            (['ambassador', 'packs', 'prizes'] as const).map((kind) =>
+              view[kind].length ? (
+                <View key={kind} style={{ gap: 12 }}>
+                  <SectionHeader title={t(`rewards.account.${kind}`)} />
+                  {view[kind].map((row) => (
+                    <Card key={row.key}>
+                      <SectionHeader title={row.title} />
+                      {row.lines.map((line, index) => (
+                        <BodyText key={index}>{line}</BodyText>
+                      ))}
+                    </Card>
+                  ))}
+                </View>
+              ) : null
+            )}
+          {!!view?.shareCards.length && (
+            <View style={{ gap: 12 }}>
+              <SectionHeader title={t('rewards.account.shareCards')} />
+              {view.shareCards.map((card) => (
+                <Card key={card.key}>
+                  <Image
+                    source={{ uri: card.imageUrl }}
+                    accessibilityLabel={t('rewards.account.shareCard')}
+                    resizeMode="contain"
+                    style={{ width: '100%', aspectRatio: 1.91 }}
+                  />
+                  <Button variant="ghost" onPress={() => void share(card.imageUrl)}>
+                    {t('rewards.account.share')}
+                  </Button>
+                </Card>
+              ))}
+            </View>
+          )}
+          {onViewTickets && (
+            <Button variant="ghost" onPress={onViewTickets}>
+              {t('rewards.account.viewTickets')}
+            </Button>
+          )}
+          {onBrowseEvents && (
+            <Button variant="ghost" onPress={onBrowseEvents}>
+              {t('rewards.account.browse')}
+            </Button>
+          )}
+        </>
+      )}
+    </View>
+  )
+}