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

package/src/sections/Payment.tsx

@@ -0,0 +1,534 @@
+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
+ * `<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. 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
+ *     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 { 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,
+  stripeOffersOxxo,
+  planUsesSavedCard,
+  type CheckoutPaymentPlanPreview,
+  type EventCondition,
+  type LocaleCode,
+  type Messages,
+  type Translate,
+  type PaymentRequest,
+  type PlaceOrderResult,
+  hooks,
+  createTranslator,
+} from 'tf-checkout-shared'
+
+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'
+import {
+  BodyText,
+  Button,
+  Card,
+  ErrorText,
+  Loader,
+  MutedText,
+  SectionHeader,
+} from '../ui/primitives'
+import { FrozenFields } from '../ui/Frozen'
+import { OrderSummary } from './OrderSummary'
+
+
+/** 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())
+
+/** 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
+  /** 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
+  /** The language of the section's messages (en by default). */
+  locale?: LocaleCode
+  messages?: Partial<Messages>
+  translate?: Translate
+}
+
+/**
+ * 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,
+  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 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 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 () => {
+      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[]>(() => {
+    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 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: '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({
+          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',
+        })
+      // 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)
+      out.push({ id: { kind: 'paypal' }, value: 'paypal', label: 'PayPal' })
+    return out
+  }, [
+    isFree,
+    methods,
+    isXendit,
+    checkout.gateway,
+    checkout.redirectPaymentMethods,
+    checkout.paymentPlan,
+    checkout.breakdown,
+    checkout.walletAvailability,
+    nativeWalletSupported,
+    offersOxxo,
+  ])
+
+  // 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'
+  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 && !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).
+  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 { 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()))
+  // 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
+    }
+    // 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 = 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' }
+    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: 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,
+        usesOwnCardField
+          ? {
+              claimCard: cardClaimStep('nativeCard', () => claimCardField(cardOwner)),
+            }
+          : undefined
+      )
+      .then((order) => onComplete?.(order))
+      // 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)
+        )
+      )
+  }
+
+  // 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.
+  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 && 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>
+          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 }}>
+      {checkout.eventId && <Accommodation eventId={checkout.eventId} />}
+      <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 ? (reuseSavedCard ? 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 }}>
+              <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}
+            </View>
+          )
+        })}
+      </Card>
+
+      {!isFree && paymentMethods.error ? <Card><ErrorText>{paymentMethods.error.message}</ErrorText><Button onPress={()=>void paymentMethods.refetch()}>Try again</Button></Card> : null}
+      <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 ||
+          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>
+  )
+}

package/src/sections/PostReaction.tsx

@@ -0,0 +1,122 @@
+import React, { type ReactNode } from 'react'
+import { Pressable, StyleSheet, Text, View } from 'react-native'
+import { hooks, type WordPostReactionFlow } from 'tf-checkout-shared'
+import { useAccountT } from '../ui/useAccountT'
+
+export interface PostReactionControlsProps {
+  flow: WordPostReactionFlow
+  onSignIn?: () => void
+  renderIcon?: (choice: 'up' | 'down') => ReactNode
+  translate?: (english: string) => string
+  showFeedback?: boolean
+}
+
+/** Native hosts may supply their own icon assets without introducing a native dependency. */
+export const PostReactionControls = ({
+  flow,
+  onSignIn,
+  renderIcon,
+  translate,
+  showFeedback = true,
+}: PostReactionControlsProps) => {
+  const accountT = useAccountT()
+  const t = translate ?? accountT
+  const unavailable = flow.signedIn && !flow.query.data
+  return (
+    <View style={styles.root}>
+      <View style={styles.buttons} accessibilityLabel={t('Article reaction')}>
+        {(['up', 'down'] as const).map((choice) => (
+          <Pressable
+            key={choice}
+            accessibilityRole="button"
+            accessibilityLabel={t(choice === 'up' ? 'Like article' : 'Dislike article')}
+            accessibilityState={{
+              selected: flow.reaction === choice,
+              disabled: flow.busy || unavailable,
+            }}
+            disabled={flow.busy || unavailable}
+            style={[
+              styles.button,
+              flow.reaction === choice && styles.selected,
+              (flow.busy || unavailable) && styles.disabled,
+            ]}
+            onPress={() =>
+              flow.signedIn ? void flow.toggleReaction(choice) : onSignIn?.()
+            }
+          >
+            {renderIcon ? (
+              renderIcon(choice)
+            ) : (
+              <Text style={styles.icon}>{choice === 'up' ? '👍' : '👎'}</Text>
+            )}
+          </Pressable>
+        ))}
+      </View>
+      {showFeedback && <PostReactionFeedback flow={flow} translate={translate} />}
+    </View>
+  )
+}
+
+export const PostReactionFeedback = ({
+  flow,
+  translate,
+}: Pick<PostReactionControlsProps, 'flow' | 'translate'>) => {
+  const accountT = useAccountT()
+  const t = translate ?? accountT
+  return (
+    <>
+      {flow.busy && (
+        <Text style={styles.message} accessibilityLiveRegion="polite">
+          {t('Saving reaction…')}
+        </Text>
+      )}
+      {(flow.error || flow.query.error) && (
+        <View style={styles.error}>
+          <Text style={styles.message} accessibilityRole="alert">
+            {t(
+              flow.error ||
+                flow.query.error?.message ||
+                'Your reaction could not be saved. Please try again.'
+            )}
+          </Text>
+          <Pressable
+            accessibilityRole="button"
+            disabled={flow.busy}
+            onPress={() => void flow.retry()}
+          >
+            <Text style={styles.retry}>{t('Try again')}</Text>
+          </Pressable>
+        </View>
+      )}
+    </>
+  )
+}
+
+export const PostReaction = ({
+  postId,
+  ...props
+}: Omit<PostReactionControlsProps, 'flow'> & { postId: string | number }) => {
+  const flow = hooks.useWordPostReaction(postId)
+  return <PostReactionControls {...props} flow={flow} />
+}
+
+const styles = StyleSheet.create({
+  root: { gap: 8 },
+  buttons: { flexDirection: 'row', gap: 8 },
+  button: {
+    width: 42,
+    height: 42,
+    borderRadius: 999,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(11,10,21,.6)',
+    borderWidth: 1,
+    borderColor: 'rgba(196,181,255,.12)',
+  },
+  selected: { backgroundColor: '#6040B8', borderColor: '#C4B5FF' },
+  disabled: { opacity: 0.5 },
+  icon: { fontSize: 18 },
+  message: { color: '#BBBFF4', fontSize: 13 },
+  error: { gap: 6, maxWidth: 260 },
+  retry: { color: '#C4B5FF', textDecorationLine: 'underline' },
+})