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

package/src/sections/Confirmation.tsx

@@ -0,0 +1,143 @@
+/**
+ * `<Confirmation/>` — the order-placed receipt + a referral/share growth block,
+ * read off `checkout.order`; returns null until an order exists. The RN analogue
+ * of the web `Confirmation`.
+ *
+ * Native adaptations vs web:
+ *   - There is no `window.location.href`, so the share URL comes only from the
+ *     `shareUrl` prop (no implicit "current page" fallback).
+ *   - The web version renders three per-network links (Facebook / X / WhatsApp).
+ *     On native those collapse into ONE `Share.share()` call — the OS share sheet
+ *     already offers every installed app, so per-network buttons are redundant.
+ *   - Voucher / "View my tickets" links open via `Linking.openURL` instead of
+ *     anchor tags.
+ */
+import React, { useState, type FC, type ReactNode } from 'react'
+import { Linking, Share, StyleSheet, Text, View } from 'react-native'
+
+// `@react-native-clipboard/clipboard` is a dependency of this package.
+import Clipboard from '@react-native-clipboard/clipboard'
+
+import { BodyText, Button, Card, MutedText, SectionHeader } from '../ui/primitives'
+import { Input } from '../ui/Field'
+import { useCheckoutContext, useTheme } from '../ui/CheckoutProvider'
+
+export interface ConfirmationProps {
+  /** URL friends land on (referral/event page). No implicit current-page
+   *  fallback on native — omit to hide the share block. */
+  shareUrl?: string
+  /** Message prefilled into the native share sheet. */
+  shareMessage?: string
+  /** Link to the buyer's tickets/order — renders a "View my tickets" button. */
+  viewOrderUrl?: string
+  /** Override the body copy (otherwise it varies on the order state). */
+  message?: string
+  /** Extra content (e.g. your own referral-reward ladder from the order payload). */
+  children?: ReactNode
+}
+
+export const Confirmation: FC<ConfirmationProps> = ({
+  shareUrl,
+  shareMessage = 'I just got my tickets — grab yours!',
+  viewOrderUrl,
+  message,
+  children,
+}) => {
+  const checkout = useCheckoutContext()
+  const theme = useTheme()
+  const order = checkout.order
+  const [copied, setCopied] = useState(false)
+
+  if (!order) return null
+  const pending = order.pending
+
+  // No `window.location` on native — the share URL is the prop or nothing.
+  const url = shareUrl ?? ''
+
+  const title = pending
+    ? 'Payment pending'
+    : order.free
+      ? 'Registration complete'
+      : 'Your Tickets are Confirmed!'
+
+  const note = pending
+    ? 'We’ll email your tickets as soon as the payment settles.'
+    : order.alreadyPaid
+      ? 'This order was already paid — nothing was charged again.'
+      : order.free
+        ? 'You’re registered — check your email for your confirmation.'
+        : 'Your tickets are available in the My Tickets section — please bring them with you to the event.'
+
+  const openUrl = (target: string) => {
+    Linking.openURL(target).catch(() => undefined)
+  }
+
+  const copy = () => {
+    if (!url) return
+    Clipboard.setString(url)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 1500)
+  }
+
+  const share = () => {
+    if (!url) return
+    // Facebook / X / WhatsApp collapse into the single native share sheet.
+    Share.share({ message: `${shareMessage} ${url}`, url }).catch(() => undefined)
+  }
+
+  return (
+    <Card>
+      <View style={styles.glyphWrap}>
+        <Text style={[styles.glyph, { color: pending ? theme.muted : theme.success }]}>
+          {pending ? '⏳' : '✓'}
+        </Text>
+      </View>
+
+      <SectionHeader title={title} />
+      <BodyText>{message ?? note}</BodyText>
+
+      {order.orderHash ? <MutedText>Reference: {order.orderHash}</MutedText> : null}
+
+      {pending && order.pendingVoucherUrl ? (
+        <Button
+          variant="ghost"
+          onPress={() => openUrl(order.pendingVoucherUrl as string)}
+        >
+          View payment voucher
+        </Button>
+      ) : null}
+
+      {viewOrderUrl ? (
+        <Button variant="ghost" onPress={() => openUrl(viewOrderUrl)}>
+          View my tickets
+        </Button>
+      ) : null}
+
+      {children}
+
+      {/* Referral / share — invite friends for cheaper (or free) tickets. */}
+      {!pending && url ? (
+        <View style={styles.share}>
+          <BodyText style={styles.shareHeading}>
+            Your tickets can be cheaper — or even FREE!
+          </BodyText>
+          <MutedText>
+            Invite friends with your link. When they buy, you get rewarded.
+          </MutedText>
+          <Input value={url} onChangeText={() => undefined} editable={false} />
+          <Button variant="ghost" onPress={copy}>
+            {copied ? 'Copied!' : 'Copy link'}
+          </Button>
+          <Button onPress={share}>Share</Button>
+        </View>
+      ) : null}
+    </Card>
+  )
+}
+
+const styles = StyleSheet.create({
+  glyphWrap: { alignItems: 'center', paddingVertical: 4 },
+  glyph: { fontSize: 44, fontWeight: '800' },
+  share: { gap: 10 },
+  shareHeading: { fontWeight: '700' },
+})

package/src/sections/IDVerification.tsx

@@ -0,0 +1,77 @@
+/**
+ * `<IDVerification/>` — shown after an order that needs identity verification
+ * (`order.needIdVerification`). Kicks off the engine's verify flow: mint the
+ * provider URL, open it, and poll to completion, reflecting each phase. The
+ * order is already paid — a stall here never means a failed payment. The RN
+ * analogue of the web `IDVerification`.
+ *
+ * If you place your order with `placeOrder(method, { autoRunIdVerification:true })`
+ * the engine runs this for you; this section is the manual, visible counterpart.
+ *
+ * Native adaptation vs web: the provider page opens via `Linking.openURL`
+ * (React Native) rather than `window.open(url, '_blank')`.
+ */
+import React, { useState, type FC } from 'react'
+import { Linking } from 'react-native'
+
+import { errorMessage, type IdVerificationPhase } from 'tf-checkout-shared'
+
+import { BodyText, Button, Card, ErrorText, SectionHeader } from '../ui/primitives'
+import { useCheckoutContext, useTheme } from '../ui/CheckoutProvider'
+
+type UiPhase = IdVerificationPhase | 'starting'
+
+const MESSAGE: Record<UiPhase, string> = {
+  idle: 'To complete the purchase, please verify your identity.',
+  starting: 'Opening the verification page…',
+  polling: 'Waiting for verification to complete in the other tab…',
+  verified: 'Identity verified — your tickets are on their way.',
+  timeout: 'Still not confirmed. Finish in the other tab, then check again.',
+  error: 'We couldn’t reach the verification service. Try again.',
+}
+
+export const IDVerification: FC = () => {
+  const checkout = useCheckoutContext()
+  const theme = useTheme()
+  const order = checkout.order
+  const [phase, setPhase] = useState<UiPhase>('idle')
+  const [error, setError] = useState('')
+
+  if (!order?.needIdVerification) return null
+
+  const done = phase === 'verified'
+  const running = phase === 'starting' || phase === 'polling'
+
+  const run = () => {
+    setError('')
+    setPhase('starting')
+    checkout
+      .runIdVerification(order.orderHash, {
+        // Native: open the provider page with Linking (web uses window.open).
+        openUrl: (url) => {
+          if (url) Linking.openURL(url).catch(() => undefined)
+        },
+        onPhase: (p) => setPhase(p),
+      })
+      .then((status) => setPhase(status?.verified ? 'verified' : 'polling'))
+      .catch((e) => {
+        setPhase('error')
+        setError(errorMessage(e))
+      })
+  }
+
+  return (
+    <Card>
+      <SectionHeader title="Account Verification" />
+      <BodyText style={done ? { color: theme.success } : undefined}>
+        {MESSAGE[phase]}
+      </BodyText>
+      {!done ? (
+        <Button onPress={run} loading={running} disabled={running}>
+          {phase === 'idle' ? 'Verify' : running ? 'Verifying…' : 'Check again'}
+        </Button>
+      ) : null}
+      {error ? <ErrorText>{error}</ErrorText> : null}
+    </Card>
+  )
+}

package/src/sections/OrderSummary.tsx

@@ -0,0 +1,116 @@
+/**
+ * `<OrderSummary/>` — the priced cart lines + total, read off the shared
+ * engine's `breakdown` (authoritative totals) and `priceBreakdown` (server
+ * display-ready strings), with the event name from `useEvent`. The RN analogue
+ * of the web `OrderSummary`. Presentation only; returns null until the cart has
+ * tickets.
+ */
+import React, { type FC } from 'react'
+import { StyleSheet, View } from 'react-native'
+
+import { hooks } from 'tf-checkout-shared'
+
+import { BodyText, Card, Divider, MutedText, SectionHeader } from '../ui/primitives'
+import { useCheckoutContext, useTheme } from '../ui/CheckoutProvider'
+
+/** Fallback money formatter — server-priced strings (`priceBreakdown`) win when
+ *  present; this only formats the raw `breakdown` totals. Mirrors the web
+ *  `currencySymbol || \`${currencyCode} \`` rule. */
+const money = (symbol: string, code: string, amount: number): string =>
+  symbol ? `${symbol}${amount.toFixed(2)}` : `${code} ${amount.toFixed(2)}`
+
+export interface OrderSummaryProps {
+  /** Event whose name to show; omit to skip the event line. */
+  eventId?: string
+}
+
+/** Storefront-compatible order summary shown after the checkout controls. */
+export const OrderSummary: FC<OrderSummaryProps> = ({ eventId }) => {
+  const checkout = useCheckoutContext()
+  const theme = useTheme()
+  const event = hooks.useEvent(eventId)
+  const breakdown = checkout.breakdown
+  const detailed = checkout.priceBreakdown
+
+  if (!breakdown || breakdown.tickets.length === 0) return null
+
+  const total =
+    detailed?.total ??
+    money(breakdown.currencySymbol, breakdown.currencyCode, Number(breakdown.total))
+
+  return (
+    <Card>
+      <SectionHeader title="Order summary" />
+
+      {event.data?.name ? (
+        <View style={styles.group}>
+          <MutedText>Event</MutedText>
+          <BodyText>{event.data.name}</BodyText>
+        </View>
+      ) : null}
+
+      <View style={styles.group}>
+        <MutedText>Your Tickets</MutedText>
+        {breakdown.tickets.map((ticket, index) => {
+          const detail = detailed?.tickets[index]
+          const unit = detail?.unit_price ?? ticket.unit
+          // Show the fee-inclusive line total only when it differs from the unit
+          // price (matches web — a bare unit price would just repeat the line).
+          const withFees =
+            detail?.line_total && detail.line_total !== detail.unit_price
+              ? detail.line_total
+              : null
+          return (
+            <View key={`${ticket.ticketTypeId}-${index}`} style={styles.item}>
+              <BodyText style={styles.tabular}>
+                {ticket.quantity} x {ticket.name} - {unit} each
+              </BodyText>
+              {withFees ? (
+                <MutedText style={styles.tabular}>({withFees} with fees)</MutedText>
+              ) : null}
+            </View>
+          )
+        })}
+      </View>
+
+      {(detailed?.add_ons.length ?? 0) > 0 ? (
+        <View style={styles.group}>
+          <MutedText>{detailed?.add_ons_title || 'Add-ons'}</MutedText>
+          {detailed?.add_ons.map((addOn, index) => (
+            <View key={`${addOn.name}-${index}`} style={styles.item}>
+              <BodyText style={styles.tabular}>
+                {addOn.quantity} x {addOn.name}
+                {addOn.show_price ? ` - ${addOn.unit_price} each` : ''}
+              </BodyText>
+            </View>
+          ))}
+        </View>
+      ) : null}
+
+      <Divider />
+      <View style={styles.totalRow}>
+        <BodyText style={[styles.total, { fontSize: theme.fontSize + 1 }]}>
+          Total
+        </BodyText>
+        <BodyText
+          style={[styles.total, styles.tabular, { fontSize: theme.fontSize + 1 }]}
+        >
+          {total}
+        </BodyText>
+      </View>
+    </Card>
+  )
+}
+
+const styles = StyleSheet.create({
+  group: { gap: 4 },
+  item: { gap: 2 },
+  tabular: { fontVariant: ['tabular-nums'] },
+  totalRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: 12,
+  },
+  total: { fontWeight: '700' },
+})