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

package/src/sections/Payment.tsx

@@ -0,0 +1,417 @@
+/**
+ * `<Payment/>` — order review + payment-method selection + T&C, then place the
+ * order. The RN analogue of the web `Payment` section. Buyer details come from
+ * `<BillingInfo/>` (read back off the shared checkout). The method list is built
+ * from the event's gateway + `ttf.cart.preOrderMethods()` + the priced snapshot,
+ * and each selection maps to the right `placeOrder` rail.
+ *
+ * Native adaptations vs web (all behaviour-preserving where the platform allows):
+ *   - No Stripe Payment Element / wallet widget: web folds Apple/Google Pay into
+ *     the Element and lists NO wallet rows, so neither do we. Native wallets are
+ *     confirmer legs (`placeOrder({method:'applePay'|'googlePay'})`) — a native
+ *     wallet button would slot in as an extra row triggering that request.
+ *   - The card slot renders the native `<CardInput/>` (Stripe `<CardField/>`) for
+ *     the Stripe card + payment-plan-new-card paths. Xendit card entry tokenizes
+ *     in a WebView sheet (deferred in `confirmer.ts`), so the Xendit card row
+ *     shows a note instead of a field; `placeOrder({method:'xenditCard'})` returns
+ *     the typed unsupported-gateway error until that WebView port is injected.
+ *   - Redirect rails / Razorpay / PayPal / Xendit e-wallets render their rows and
+ *     call `placeOrder` with the mapped request; the WebView `providerPage` port
+ *     that presents them is likewise a follow-up (see `confirmer.ts` header).
+ *   - Conditions render as plain text (HTML stripped) — no DOM to inject markup.
+ */
+import React, { useEffect, useMemo, useState, type FC } from 'react'
+import { View } from 'react-native'
+
+import {
+  XENDIT_EWALLET_EXTRA_FIELD,
+  errorMessage,
+  missingCheckoutDetails,
+  paymentPlanTerms,
+  planConfirmLabel,
+  planTermsTitle,
+  ttf,
+  type CheckoutPaymentPlanPreview,
+  type EventCondition,
+  type PaymentRequest,
+  type PlaceOrderResult,
+} from 'tf-checkout-shared'
+
+import { CardInput } from '../CardInput'
+import { useCheckoutContext, useCheckoutValidation } from '../ui/CheckoutProvider'
+import { Checkbox } from '../ui/Field'
+import { PaymentMethods, type PaymentMethodOption } from '../ui/PaymentMethods'
+import {
+  BodyText,
+  Button,
+  Card,
+  ErrorText,
+  Loader,
+  MutedText,
+  SectionHeader,
+} from '../ui/primitives'
+import { OrderSummary } from './OrderSummary'
+
+type PreOrderMethods = Awaited<ReturnType<typeof ttf.cart.preOrderMethods>>
+
+/** Server spellings → display labels for Stripe redirect rails. */
+const REDIRECT_LABELS: Record<string, string> = {
+  klarna: 'Klarna',
+  afterpay_clearpay: 'Afterpay / Clearpay',
+  affirm: 'Affirm',
+  ideal: 'iDEAL',
+  bancontact: 'Bancontact',
+  eps: 'EPS',
+  giropay: 'giropay',
+  p24: 'Przelewy24',
+  alipay: 'Alipay',
+  grabpay: 'GrabPay',
+  cashapp: 'Cash App Pay',
+  paypal: 'PayPal',
+}
+const redirectLabel = (t: string) =>
+  REDIRECT_LABELS[t] ?? t.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())
+
+/** Strip HTML from condition copy — native has no DOM to render markup into. */
+const stripHtml = (html: string) =>
+  html
+    .replace(/<[^>]*>/g, '')
+    .replace(/&amp;/g, '&')
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&nbsp;/g, ' ')
+    .replace(/&#39;/g, "'")
+    .replace(/&quot;/g, '"')
+    .trim()
+
+export interface PaymentProps {
+  onComplete?: (order: PlaceOrderResult) => void
+  /** Optional event context (parity with web; native `OrderSummary` reads the
+   *  priced cart, not the event, so it is currently unused here). */
+  eventId?: string
+  /** Must match the policy used by the paired `<BillingInfo/>`. */
+  requireEmailConfirmation?: boolean
+  /** Must match the holder policy used by the paired `<BillingInfo/>`. */
+  collectTicketHolders?: boolean
+  /** Must match the holder-contact policy used by the paired `<BillingInfo/>`. */
+  requireHolderContact?: boolean
+  /** Host-owned acknowledgements such as a brand privacy policy. */
+  additionalConditions?: EventCondition[]
+  /** Require the privacy checkbox managed by BillingInfo before payment. */
+  requirePrivacyPolicy?: boolean
+  /** Called when payment is attempted before required privacy consent. */
+  onPrivacyRequired?: () => void
+  /** Test card copy is useful in examples, but should never appear by default. */
+  showTestCardHint?: boolean
+}
+
+/**
+ * Payment-plan terms — the full hosted disclosure block (schedule, admin fee,
+ * non-refundable clause, brand message, activation note). Composed in the SDK
+ * so this matches web word for word; these are disclosures, not summary copy.
+ */
+const PlanTerms: FC<{ plan: CheckoutPaymentPlanPreview }> = ({ plan }) => {
+  const parts = paymentPlanTerms(plan)
+  if (parts.length === 0) return null
+  return (
+    <View style={{ gap: 4 }}>
+      <BodyText style={{ fontWeight: '700' }}>{planTermsTitle(plan)}</BodyText>
+      {parts.map((part) => (
+        <MutedText key={part.id}>{part.text}</MutedText>
+      ))}
+    </View>
+  )
+}
+
+export const Payment: FC<PaymentProps> = ({
+  onComplete,
+  // `eventId` is accepted for prop-parity with web; the native `OrderSummary`
+  // reads the priced cart (not the event), so it is intentionally unused here.
+  eventId,
+  requireEmailConfirmation = false,
+  collectTicketHolders = false,
+  requireHolderContact = false,
+  additionalConditions = [],
+  requirePrivacyPolicy = false,
+  onPrivacyRequired,
+  showTestCardHint = false,
+}) => {
+  const checkout = useCheckoutContext()
+  const validation = useCheckoutValidation()
+  const [error, setError] = useState('')
+  const [methods, setMethods] = useState<PreOrderMethods | null>(null)
+  const [selected, setSelected] = useState('')
+  const [extras, setExtras] = useState<
+    Record<string, { cashtag?: string; phoneNumber?: string }>
+  >({})
+  const [useSavedCard, setUseSavedCard] = useState(true)
+
+  useEffect(() => {
+    let active = true
+    ttf.cart
+      .preOrderMethods()
+      .then((m) => active && setMethods(m))
+      .catch(() => active && setMethods(null))
+    return () => {
+      active = false
+    }
+  }, [])
+
+  const bd = checkout.breakdown
+  const isFree = bd !== undefined && Number(bd.total) === 0
+  const isXendit = checkout.gateway === 'xendit'
+
+  // Build the selectable method rows from gateway + probe + snapshot.
+  const options = useMemo<PaymentMethodOption[]>(() => {
+    if (isFree || !methods) return []
+    const out: PaymentMethodOption[] = []
+    if (isXendit) {
+      if (methods.xenditCard)
+        out.push({ id: { kind: 'xenditCard' }, value: 'xenditCard', label: 'Card' })
+      for (const w of methods.xenditEWallets)
+        out.push({
+          id: { kind: 'xenditEWallet', walletKey: w.key },
+          value: `ew:${w.key}`,
+          label: w.label,
+          iconUrl: w.icon,
+          extra: (XENDIT_EWALLET_EXTRA_FIELD[w.key] as 'cashtag' | 'phoneNumber') ?? null,
+        })
+    } else if (checkout.gateway === 'razorpay') {
+      out.push({ id: { kind: 'razorpay' }, value: 'razorpay', label: 'Razorpay' })
+    } else {
+      // Stripe (or unknown → fail open to card).
+      out.push({ id: { kind: 'card' }, value: 'card', label: 'Card' })
+      for (const t of checkout.redirectPaymentMethods ?? []) {
+        if (t === 'paypal' && methods.paypal) continue // dedupe vs PayPal Standard
+        out.push({
+          id: { kind: 'redirect', methodType: t },
+          value: `rd:${t}`,
+          label: redirectLabel(t),
+        })
+      }
+      if (checkout.paymentPlan?.available)
+        out.push({
+          id: { kind: 'paymentPlan' },
+          value: 'paymentPlan',
+          label: 'Payment plan',
+        })
+      // OXXO cash voucher — Mexico only, and never listed in redirect methods.
+      if (checkout.breakdown?.currencyCode === 'MXN')
+        out.push({ id: { kind: 'oxxo' }, value: 'oxxo', label: 'OXXO (pay in cash)' })
+    }
+    if (methods.paypal)
+      out.push({ id: { kind: 'paypal' }, value: 'paypal', label: 'PayPal' })
+    return out
+  }, [
+    isFree,
+    methods,
+    isXendit,
+    checkout.gateway,
+    checkout.redirectPaymentMethods,
+    checkout.paymentPlan,
+    checkout.breakdown,
+  ])
+
+  // Default the selection to the first row once options exist.
+  useEffect(() => {
+    if (options.length && !options.some((o) => o.value === selected))
+      setSelected(options[0].value)
+  }, [options, selected])
+
+  const cardValue = isXendit ? 'xenditCard' : 'card'
+  const selectedOption = options.find((o) => o.value === selected)
+  const isCardSelected = selected === cardValue
+  const isPlanSelected = selectedOption?.id.kind === 'paymentPlan'
+  // The native Stripe card field: shown for the Stripe card path and for a
+  // payment-plan NEW card (SetupIntent). Xendit card is a WebView sheet (below).
+  const showStripeCardField =
+    !isXendit && (isCardSelected || (isPlanSelected && !useSavedCard))
+  const showXenditCardNote = isXendit && isCardSelected
+
+  // When there's only ONE way to pay and it's a card, there's nothing to
+  // *choose* — render the field directly, no radio wrapper (matching web).
+  const onlyOption = options.length === 1 ? options[0] : undefined
+  const singleCard =
+    onlyOption?.id.kind === 'card' || onlyOption?.id.kind === 'xenditCard'
+
+  // Gating: buyer + every configured holder/custom field complete, required
+  // conditions accepted, and payment-method extras filled.
+  const b = checkout.billing
+  const missingDetails = missingCheckoutDetails(
+    {
+      billing: b,
+      holders: checkout.holders,
+      selections: checkout.selections,
+      breakdown: checkout.breakdown,
+      holderNamesRequired: checkout.holderNamesRequired,
+      fieldGates: checkout.fieldGates,
+      customFields: checkout.customFields,
+    },
+    { requireEmailConfirmation, collectTicketHolders, requireHolderContact }
+  )
+  const billingReady = missingDetails.length === 0
+  const conditions = [...(checkout.conditions ?? []), ...additionalConditions]
+  const requiredConditions = conditions.filter((c) => c.isRequired)
+  const conditionsOk = requiredConditions.every(
+    (c) => checkout.acceptedConditions?.[c.id]
+  )
+  const extra = selectedOption?.extra
+  const extrasOk =
+    !extra ||
+    (extra === 'cashtag'
+      ? Boolean(extras[selected]?.cashtag?.trim())
+      : Boolean(extras[selected]?.phoneNumber?.trim()))
+  const privacyOk = !requirePrivacyPolicy || checkout.consent.ttfOptIn
+  // The plan CTA carries the brand's terminology ("Confirm Layaway"), and the
+  // terms sentence quotes this same label — they must agree.
+  const payLabel = isFree
+    ? 'Complete Registration'
+    : isPlanSelected
+      ? planConfirmLabel(checkout.paymentPlan?.configuration)
+      : 'Submit Payment'
+  // 'placing' → order in flight; 'succeeded' → placed, host navigating away.
+  // Both keep the CTA busy so it can't be re-clicked during the handoff.
+  const finalizing = checkout.status === 'placing' || checkout.status === 'succeeded'
+
+  const pay = () => {
+    setError('')
+    if (!billingReady || !conditionsOk || !extrasOk || !privacyOk) {
+      if (!privacyOk) onPrivacyRequired?.()
+      validation.requestValidation()
+      return
+    }
+    // Backfill one holder per ticket if billing was set without holders.
+    if (checkout.holders.length === 0 && b) {
+      const n = checkout.selections.reduce((acc, s) => acc + s.quantity, 0) || 1
+      checkout.setHolders(
+        Array.from({ length: n }, () => ({
+          firstName: b.firstName,
+          lastName: b.lastName,
+          email: b.email,
+        }))
+      )
+    }
+    let req: PaymentRequest = { method: 'auto' }
+    const id = selectedOption?.id
+    if (isFree || !id) req = { method: 'auto' }
+    else if (id.kind === 'xenditEWallet')
+      req = { method: 'xenditEWallet', walletKey: id.walletKey, extra: extras[selected] }
+    else if (id.kind === 'redirect')
+      req = { method: 'redirect', methodType: id.methodType }
+    else if (id.kind === 'paymentPlan') req = { method: 'paymentPlan', useSavedCard }
+    else req = { method: id.kind } as PaymentRequest
+    // Called synchronously in the press handler — popup rails (e-wallet,
+    // redirect, razorpay, paypal) want the user gesture on their WebView host.
+    checkout
+      .placeOrder(req)
+      .then((order) => onComplete?.(order))
+      .catch((e) => setError(errorMessage(e)))
+  }
+
+  const savedLast4 = checkout.paymentPlan?.savedCardLast4
+  const checkoutError = checkout.error ?? ''
+
+  // The card/plan field + its note + plan terms. Rendered inside the selected
+  // method row when there's a choice, or directly when there's only a card.
+  const testHint = isXendit
+    ? 'Test card: 4000 0000 0000 0002 · any future date · any CVC'
+    : 'Test card: 4242 4242 4242 4242 · any future date · any CVC'
+  const paymentInput = (
+    <>
+      {showStripeCardField ? <CardInput /> : null}
+      {showXenditCardNote ? (
+        // Xendit card tokenizes in a WebView sheet (deferred — see confirmer.ts).
+        <MutedText>
+          Card details are entered in a secure Xendit window when you pay.
+        </MutedText>
+      ) : null}
+      {showTestCardHint && (showStripeCardField || showXenditCardNote) ? (
+        <MutedText>{testHint}</MutedText>
+      ) : null}
+      {isPlanSelected && checkout.paymentPlan?.configuration ? (
+        <PlanTerms plan={checkout.paymentPlan.configuration} />
+      ) : null}
+      {/* Returning plan buyer with a reusable card on file. Ticked by default,
+          and when it stays ticked the card field never mounts — the plan is
+          created straight off the saved payment method, like the hosted flow. */}
+      {isPlanSelected && savedLast4 ? (
+        <View style={{ gap: 4 }}>
+          <MutedText>
+            Your payment will proceed with the card ending in **** {savedLast4}
+          </MutedText>
+          <Checkbox checked={useSavedCard} onChange={setUseSavedCard} label="Use this card" />
+        </View>
+      ) : null}
+    </>
+  )
+
+  return (
+    <View style={{ gap: 12 }}>
+      <Card>
+        <SectionHeader title="Payment" />
+
+        {/* Payment method */}
+        {!isFree ? (
+          <>
+            {!singleCard ? <MutedText>Payment method</MutedText> : null}
+            {!methods ? (
+              <Loader />
+            ) : singleCard ? (
+              paymentInput
+            ) : (
+              <PaymentMethods
+                options={options}
+                selected={selected}
+                onSelect={setSelected}
+                extraValues={extras}
+                onExtraChange={(v, patch) =>
+                  setExtras((s) => ({ ...s, [v]: { ...s[v], ...patch } }))
+                }
+                showValidation={validation.attempt > 0}
+                inputSlotFor={
+                  isPlanSelected ? (useSavedCard ? undefined : 'paymentPlan') : cardValue
+                }
+              >
+                {paymentInput}
+              </PaymentMethods>
+            )}
+          </>
+        ) : null}
+
+        {/* Conditions */}
+        {conditions.map((c) => {
+          const invalid =
+            validation.attempt > 0 && c.isRequired && !checkout.acceptedConditions?.[c.id]
+          return (
+            <View key={c.id} style={{ gap: 4 }}>
+              <Checkbox
+                checked={Boolean(checkout.acceptedConditions?.[c.id])}
+                invalid={invalid}
+                onChange={(next) => checkout.acceptCondition(c.id, next)}
+                label={`${stripHtml(c.content || c.name)}${c.isRequired ? ' *' : ''}`}
+              />
+              {invalid ? (
+                <ErrorText>You must accept this condition to continue.</ErrorText>
+              ) : null}
+            </View>
+          )
+        })}
+      </Card>
+
+      <OrderSummary />
+
+      <Button
+        onPress={pay}
+        // Stay busy through 'succeeded' too: in redirect mode the checkout
+        // remains mounted while the host navigates away, so the button must not
+        // flip back to a clickable state before the redirect lands.
+        loading={finalizing}
+        disabled={checkout.isBusy || finalizing || (!isFree && !methods)}
+      >
+        {finalizing ? 'Placing…' : payLabel}
+      </Button>
+
+      {error || checkoutError ? <ErrorText>{error || checkoutError}</ErrorText> : null}
+    </View>
+  )
+}