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

package/src/sections/Payment.tsx

@@ -1,3 +1,4 @@
+import { Accommodation } from './Accommodation'
 /**
  * `<Payment/>` — order review + payment-method selection + T&C, then place the
  * order. The RN analogue of the web `Payment` section. Buyer details come from
@@ -7,9 +8,8 @@
  *
  * 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 Element. Native offers Apple/Google Pay as explicit rows only when
+ *     the backend enables the wallet and Stripe confirms device support.
  *   - 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
@@ -21,23 +21,39 @@
  *   - 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 { Platform, View } from 'react-native'
+import { isPlatformPaySupported } from '@stripe/stripe-react-native'
 
 import {
+  ConfirmerBusyError,
+  CardClaimError,
+  cardClaimStep,
+  CartChangedError,
   XENDIT_EWALLET_EXTRA_FIELD,
+  cartTicketCount,
+  getConfig,
   errorMessage,
+  htmlToPlainText,
   missingCheckoutDetails,
+  paymentAcknowledgementsMet,
   paymentPlanTerms,
   planConfirmLabel,
   planTermsTitle,
-  ttf,
+  stripeOffersOxxo,
+  planUsesSavedCard,
   type CheckoutPaymentPlanPreview,
   type EventCondition,
+  type LocaleCode,
+  type Messages,
+  type Translate,
   type PaymentRequest,
   type PlaceOrderResult,
+  hooks,
+  createTranslator,
 } from 'tf-checkout-shared'
 
-import { CardInput } from '../CardInput'
+import { CardInput, claimCardField } from '../CardInput'
+import { rnConfirmer } from '../instance'
 import { useCheckoutContext, useCheckoutValidation } from '../ui/CheckoutProvider'
 import { Checkbox } from '../ui/Field'
 import { PaymentMethods, type PaymentMethodOption } from '../ui/PaymentMethods'
@@ -50,9 +66,9 @@ import {
   MutedText,
   SectionHeader,
 } from '../ui/primitives'
+import { FrozenFields } from '../ui/Frozen'
 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> = {
@@ -72,17 +88,9 @@ const REDIRECT_LABELS: Record<string, string> = {
 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()
+/** Condition copy as one line of plain text: native has no DOM to render
+ *  markup into, and the copy is a checkbox label. */
+const conditionText = (html: string) => htmlToPlainText(html).replace(/\s*\n\s*/g, ' ')
 
 export interface PaymentProps {
   onComplete?: (order: PlaceOrderResult) => void
@@ -103,6 +111,10 @@ export interface PaymentProps {
   onPrivacyRequired?: () => void
   /** Test card copy is useful in examples, but should never appear by default. */
   showTestCardHint?: boolean
+  /** The language of the section's messages (en by default). */
+  locale?: LocaleCode
+  messages?: Partial<Messages>
+  translate?: Translate
 }
 
 /**
@@ -135,31 +147,50 @@ export const Payment: FC<PaymentProps> = ({
   requirePrivacyPolicy = false,
   onPrivacyRequired,
   showTestCardHint = false,
+  locale,
+  messages,
+  translate,
 }) => {
+  const t = translate ?? createTranslator({ locale, messages })
   const checkout = useCheckoutContext()
+  // This checkout's own card field: another checkout on the page has its own.
+  const cardOwner = hooks.useTicketCardOwner()
+  // A bundle purchase holds the payment SDK: Pay would do nothing now.
+  // Why a bundle holds the payment SDK (paying, or setting up a card form).
+  const bundleWait = hooks.useTicketGatewayWait(checkout.store)
+  const bundleStarting = bundleWait !== null
   const validation = useCheckoutValidation()
   const [error, setError] = useState('')
-  const [methods, setMethods] = useState<PreOrderMethods | null>(null)
+  const paymentMethods = hooks.useCheckoutPaymentMethods(checkout.store)
+  const methods = paymentMethods.data ?? null
   const [selected, setSelected] = useState('')
   const [extras, setExtras] = useState<
     Record<string, { cashtag?: string; phoneNumber?: string }>
   >({})
   const [useSavedCard, setUseSavedCard] = useState(true)
+  const [nativeWalletSupported, setNativeWalletSupported] = useState(false)
 
   useEffect(() => {
-    let active = true
-    ttf.cart
-      .preOrderMethods()
-      .then((m) => active && setMethods(m))
-      .catch(() => active && setMethods(null))
+    let mounted = true
+    const env = getConfig().env
+    isPlatformPaySupported({ googlePay: { testEnv: env === 'STAG' || env === 'DEV' } })
+      .then((supported) => {
+        if (mounted) setNativeWalletSupported(supported)
+      })
+      .catch(() => {
+        if (mounted) setNativeWalletSupported(false)
+      })
     return () => {
-      active = false
+      mounted = false
     }
   }, [])
 
+
+
   const bd = checkout.breakdown
   const isFree = bd !== undefined && Number(bd.total) === 0
   const isXendit = checkout.gateway === 'xendit'
+  const offersOxxo = stripeOffersOxxo(checkout.stripeElementsConfig)
 
   // Build the selectable method rows from gateway + probe + snapshot.
   const options = useMemo<PaymentMethodOption[]>(() => {
@@ -178,9 +209,25 @@ export const Payment: FC<PaymentProps> = ({
         })
     } else if (checkout.gateway === 'razorpay') {
       out.push({ id: { kind: 'razorpay' }, value: 'razorpay', label: 'Razorpay' })
+    } else if (checkout.gateway === 'adyen') {
+      out.push({ id: { kind: 'adyen' }, value: 'adyen', label: 'Adyen' })
     } else {
       // Stripe (or unknown → fail open to card).
-      out.push({ id: { kind: 'card' }, value: 'card', label: 'Card' })
+      out.push({ id: { kind: 'card' }, value: 'card', label: 'Credit or debit card' })
+      // A device wallet is offered only when Stripe's server configuration AND
+      // the current device allow it. Never infer availability from the OS alone.
+      if (
+        nativeWalletSupported &&
+        checkout.walletAvailability?.applePay &&
+        Platform.OS === 'ios'
+      )
+        out.push({ id: { kind: 'applePay' }, value: 'applePay', label: 'Apple Pay' })
+      if (
+        nativeWalletSupported &&
+        checkout.walletAvailability?.googlePay &&
+        Platform.OS === 'android'
+      )
+        out.push({ id: { kind: 'googlePay' }, value: 'googlePay', label: 'Google Pay' })
       for (const t of checkout.redirectPaymentMethods ?? []) {
         if (t === 'paypal' && methods.paypal) continue // dedupe vs PayPal Standard
         out.push({
@@ -195,8 +242,8 @@ export const Payment: FC<PaymentProps> = ({
           value: 'paymentPlan',
           label: 'Payment plan',
         })
-      // OXXO cash voucher — Mexico only, and never listed in redirect methods.
-      if (checkout.breakdown?.currencyCode === 'MXN')
+      // The server applies merchant, event, date and capture restrictions.
+      if (offersOxxo)
         out.push({ id: { kind: 'oxxo' }, value: 'oxxo', label: 'OXXO (pay in cash)' })
     }
     if (methods.paypal)
@@ -210,6 +257,9 @@ export const Payment: FC<PaymentProps> = ({
     checkout.redirectPaymentMethods,
     checkout.paymentPlan,
     checkout.breakdown,
+    checkout.walletAvailability,
+    nativeWalletSupported,
+    offersOxxo,
   ])
 
   // Default the selection to the first row once options exist.
@@ -222,11 +272,21 @@ export const Payment: FC<PaymentProps> = ({
   const selectedOption = options.find((o) => o.value === selected)
   const isCardSelected = selected === cardValue
   const isPlanSelected = selectedOption?.id.kind === 'paymentPlan'
+  const savedLast4 = methods?.savedPlanCardLast4
+  const reuseSavedCard = planUsesSavedCard(savedLast4, useSavedCard)
   // 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))
+    !isXendit && (isCardSelected || (isPlanSelected && !reuseSavedCard))
   const showXenditCardNote = isXendit && isCardSelected
+  // One card form at a time owns the shared payment SDK (bundles and tickets
+  // alike): while another one does, this form offers "Continue paying here".
+  const ticketCard = hooks.useTicketCardForm({
+    confirmer: rnConfirmer,
+    store: checkout.store,
+    owner: cardOwner,
+    showsStripeField: showStripeCardField && !isFree,
+  })
 
   // 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).
@@ -251,17 +311,19 @@ export const Payment: FC<PaymentProps> = ({
   )
   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 { conditionsOk, privacyOk } = paymentAcknowledgementsMet({
+    eventConditions: checkout.conditions,
+    additionalConditions,
+    acceptedConditions: checkout.acceptedConditions,
+    requirePrivacyPolicy,
+    privacyAccepted: checkout.consent.ttfOptIn,
+  })
   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
@@ -280,15 +342,22 @@ export const Payment: FC<PaymentProps> = ({
       validation.requestValidation()
       return
     }
+    // This checkout's own card field is claimed inside the confirmer gateway,
+    // together with the order, so a bundle holding the payment SDK never
+    // loses its field to a click that cannot proceed.
+    const usesOwnCardField = showStripeCardField && !isFree
     // 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
+      const n = cartTicketCount(checkout)
+      // Marked as filled in, not entered: a guardian's signature may count
+      // under the buyer's name only on these (`holderBackfilledFrom`).
       checkout.setHolders(
         Array.from({ length: n }, () => ({
           firstName: b.firstName,
           lastName: b.lastName,
           email: b.email,
-        }))
+        })),
+        { backfilled: true }
       )
     }
     let req: PaymentRequest = { method: 'auto' }
@@ -298,18 +367,40 @@ export const Payment: FC<PaymentProps> = ({
       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 if (id.kind === 'paymentPlan') req = { method: 'paymentPlan', useSavedCard: reuseSavedCard }
     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.
+    // `placeOrder` runs in the confirmer gateway, so a bundle or another
+    // checkout cannot point the one payment SDK elsewhere mid-order. It still
+    // starts inside this press.
+    // The card field is claimed inside the order, after the payment SDK holds
+    // the ticket order's keys and right before the card is confirmed. Whether
+    // a key change empties the field is decided in shared (`cardClaimStep`).
     checkout
-      .placeOrder(req)
+      .placeOrder(
+        req,
+        usesOwnCardField
+          ? {
+              claimCard: cardClaimStep('nativeCard', () => claimCardField(cardOwner)),
+            }
+          : undefined
+      )
       .then((order) => onComplete?.(order))
-      .catch((e) => setError(errorMessage(e)))
+      // Cart ownership and native field ownership each fail before a charge.
+      .catch((e) =>
+        setError(
+          e instanceof CartChangedError
+            ? t('checkout.error.cartChanged')
+            : e instanceof CardClaimError || e instanceof ConfirmerBusyError
+              ? createTranslator()(e.message)
+              : errorMessage(e)
+        )
+      )
   }
 
-  const savedLast4 = checkout.paymentPlan?.savedCardLast4
-  const checkoutError = checkout.error ?? ''
+  // A card claim stores its translation key; a server message passes through.
+  const checkoutError = checkout.error ? createTranslator()(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.
@@ -318,7 +409,16 @@ export const Payment: FC<PaymentProps> = ({
     : 'Test card: 4242 4242 4242 4242 · any future date · any CVC'
   const paymentInput = (
     <>
-      {showStripeCardField ? <CardInput /> : null}
+      {showStripeCardField && ticketCard.cardElsewhere ? (
+        <>
+          <MutedText>{createTranslator()('bundles.payingElsewhere')}</MutedText>
+          <Button variant="ghost" onPress={ticketCard.payHere}>
+            {createTranslator()('bundles.payHere')}
+          </Button>
+        </>
+      ) : showStripeCardField ? (
+        <CardInput owner={cardOwner} />
+      ) : null}
       {showXenditCardNote ? (
         // Xendit card tokenizes in a WebView sheet (deferred — see confirmer.ts).
         <MutedText>
@@ -339,7 +439,11 @@ export const Payment: FC<PaymentProps> = ({
           <MutedText>
             Your payment will proceed with the card ending in **** {savedLast4}
           </MutedText>
-          <Checkbox checked={useSavedCard} onChange={setUseSavedCard} label="Use this card" />
+          <Checkbox
+            checked={useSavedCard}
+            onChange={setUseSavedCard}
+            label="Use this card"
+          />
         </View>
       ) : null}
     </>
@@ -347,6 +451,7 @@ export const Payment: FC<PaymentProps> = ({
 
   return (
     <View style={{ gap: 12 }}>
+      {checkout.eventId && <Accommodation eventId={checkout.eventId} />}
       <Card>
         <SectionHeader title="Payment" />
 
@@ -369,7 +474,7 @@ export const Payment: FC<PaymentProps> = ({
                 }
                 showValidation={validation.attempt > 0}
                 inputSlotFor={
-                  isPlanSelected ? (useSavedCard ? undefined : 'paymentPlan') : cardValue
+                  isPlanSelected ? (reuseSavedCard ? undefined : 'paymentPlan') : cardValue
                 }
               >
                 {paymentInput}
@@ -384,12 +489,14 @@ export const Payment: FC<PaymentProps> = ({
             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 ? ' *' : ''}`}
-              />
+              <FrozenFields frozen={checkout.orderFixed}>
+                <Checkbox
+                  checked={Boolean(checkout.acceptedConditions?.[c.id])}
+                  invalid={invalid}
+                  onChange={(next) => checkout.acceptCondition(c.id, next)}
+                  label={`${conditionText(c.content || c.name)}${c.isRequired ? ' *' : ''}`}
+                />
+              </FrozenFields>
               {invalid ? (
                 <ErrorText>You must accept this condition to continue.</ErrorText>
               ) : null}
@@ -398,18 +505,28 @@ export const Payment: FC<PaymentProps> = ({
         })}
       </Card>
 
-      <OrderSummary />
+      {!isFree && paymentMethods.error ? <Card><ErrorText>{paymentMethods.error.message}</ErrorText><Button onPress={()=>void paymentMethods.refetch()}>Try again</Button></Card> : null}
+      <OrderSummary translate={t} />
 
       <Button
-        onPress={pay}
+        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)}
+        disabled={
+          checkout.isBusy ||
+          finalizing ||
+          bundleStarting ||
+          ticketCard.cardElsewhere ||
+          (!isFree && !methods)
+        }
       >
         {finalizing ? 'Placing…' : payLabel}
       </Button>
+      {bundleStarting ? (
+        <MutedText>{createTranslator()(bundleWait ?? 'tickets.waitBundle')}</MutedText>
+      ) : null}
 
       {error || checkoutError ? <ErrorText>{error || checkoutError}</ErrorText> : null}
     </View>