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

package/src/index.tsx

@@ -1,231 +1,29 @@
-import { IMyOrderDetailsTicket } from './api/types'
-import {
-  ICheckoutBody,
-  IEventResponse,
-  IMyOrderDetailsData,
-  IMyOrdersOrder,
-  IPromoCodeResponse,
-  IPurchaseConfirmationData,
-  IRegisterNewUserBody,
-  MyOrderRequestFromType,
-} from './api/types'
-import {
-  CartTimer,
-  Dropdown,
-  DropdownMaterial,
-  Loading,
-  LoggedIn,
-  Login,
-  PromoCode,
-  WaitingList,
-} from './components'
-import { IDropdownStyles } from './components/dropdown/types'
-import { ILoadingStyles } from './components/loading/types'
-import { ILoginSuccessData } from './components/login/types'
-import {
-  BillingInfo,
-  Checkout,
-  MyOrderDetails,
-  MyOrders,
-  PurchaseConfirmation,
-  ResaleTickets,
-  ResetPassword,
-  Tickets,
-} from './containers'
-import { ICheckoutSuccessData } from './features/checkout-v2/hooks/use-checkout'
-import { IConfig } from './helpers/Config'
-import { IMyOrderDetailsProps } from './containers/myOrderDetails/types'
-import { IMyOrdersProps } from './containers/myOrders/types'
-import { IPurchaseConfirmationProps } from './containers/purchaseConfirmation/types'
-import { IResaleTicketsProps } from './containers/resaleTickets/types'
-import { IPasswordProtectedEventData, ITicketsProps } from './containers/tickets/types'
-import {
-  BillingCore,
-  BillingCoreHandle,
-  CheckoutCore,
-  CheckoutCoreHandle,
-  LoginCore,
-  LoginCoreHandle,
-  MyOrdersCore,
-  MyOrdersCoreHandle,
-  OrderDetailsCore,
-  OrderDetailsCoreHandle,
-  PurchaseConfirmationCore,
-  PurchaseConfirmationCoreHandle,
-  ResetPasswordCore,
-  ResetPasswordCoreHandle,
-  SessionCoreHandleType,
-  SessionHandleType,
-  TicketsCore,
-  TicketsCoreHandle,
-  WaitingListCore,
-  WaitingListCoreHandle,
-} from './core'
-import {
-  IBookTicketsOptions,
-  IGetTicketsPayload,
-  IGroupedTickets,
-} from './core/TicketsCore/TicketsCoreTypes'
-import { useRegisterUser, useUserProfile } from './features/auth/api-hooks'
-import {
-  CheckoutController as CheckoutV2,
-  CheckoutProvider,
-  CheckoutStyles,
-} from './features/checkout-v2'
-import { CheckoutForm, PaymentForm } from './features/checkout-v2/form'
-import {
-  useAddons,
-  useAddToCart,
-  useCart,
-  useCheckout,
-  useEventConditions,
-  useEventInfo,
-  usePaymentData,
-  usePaymentSuccess,
-  useTickets,
-  useUpdateCheckout,
-} from './features/checkout-v2/hooks/api-hooks'
-import { useCheckoutFlow } from './features/checkout-v2/hooks/use-checkout'
-import { CheckoutTexts } from './features/checkout-v2/types'
-import { useCountries, useStates } from './features/geo/api-hooks'
-import { setConfig } from './helpers/Config'
-import { deleteAllData, deleteUserData } from './helpers/LocalStorage'
-import { refreshAccessToken } from './helpers/RefreshAccessToken'
-import {
-  IAccountOrdersPurchasedEvent,
-  IAccountOrdersTicket,
-  IAccountTicketsAttributes,
-  IAccountTicketsData,
-  IAccountTicketsResponse,
-  IAddToCartResponse,
-  IError,
-  IEvent,
-  ISelectedTicket,
-  ITicket,
-  ITicketsResponseData,
-  IUserProfile,
-} from './types'
+/**
+ * tf-checkout-react-native — the native checkout, built on `tf-checkout-shared`.
+ *
+ * One import gives you the whole SDK (ttf, ENDPOINTS, dtos, logic, the engine)
+ * PLUS the native platform layer: a `useCheckout` with stripe-react-native
+ * pre-wired, `<CardInput/>`, `configureCheckout`, the UI kit, and the
+ * batteries-included `<EmbeddedCheckout/>`.
+ *
+ *   import { configureCheckout, EmbeddedCheckout } from 'tf-checkout-react-native'
+ */
 
-import { LogBox, NativeModules } from 'react-native'
-import { storage } from 'tf-checkout-shared'
-import { reactNativeStorageAdapter } from './utils/storageAdapter'
-storage.setAdapter(reactNativeStorageAdapter)
+// The entire shared SDK (the native `useCheckout` below overrides the SDK's).
+export * from 'tf-checkout-shared'
 
-LogBox.ignoreAllLogs()
+// Native platform layer
+export { useCheckout, type UseCheckoutOptions } from './useCheckout'
+export { configureCheckout, mmkvStorageAdapter } from './configure'
+export { createMmkvStorage } from './storage'
+export { CardInput, claimCardField, type CardInputProps } from './CardInput'
 
-export {
-  /**
-   * @deprecated Use hooks like useCart(), useCheckout(), etc. imported directly from 'tf-checkout-react-native'. See core/MIGRATION.md
-   */
-  BillingCore,
-  /**
-   * @deprecated Use hooks like useCart(), useCheckout(), etc. imported directly from 'tf-checkout-react-native'. See core/MIGRATION.md
-   */
-  BillingCoreHandle,
-  BillingInfo,
-  CartTimer,
-  Checkout,
-  /**
-   * @deprecated Use hooks like usePaymentData(), useEventConditions(), etc. imported directly from 'tf-checkout-react-native'. See core/MIGRATION.md
-   */
-  CheckoutCore,
-  CheckoutCoreHandle,
-  /**
-   * @deprecated Use hooks like usePaymentData(), useEventConditions(), etc. imported directly from 'tf-checkout-react-native'. See core/MIGRATION.md
-   */
-  CheckoutForm,
-  CheckoutProvider,
-  CheckoutStyles,
-  CheckoutTexts,
-  CheckoutV2,
-  deleteAllData,
-  deleteUserData,
-  Dropdown,
-  DropdownMaterial,
-  IAccountOrdersPurchasedEvent,
-  IAccountOrdersTicket,
-  IAccountTicketsAttributes,
-  IAccountTicketsData,
-  IAccountTicketsResponse,
-  IAddToCartResponse,
-  IBookTicketsOptions,
-  ICheckoutBody,
-  IDropdownStyles,
-  IError,
-  IEvent,
-  IEventResponse,
-  IGetTicketsPayload,
-  IGroupedTickets,
-  ILoadingStyles,
-  ILoginSuccessData,
-  IMyOrderDetailsData,
-  IMyOrderDetailsProps,
-  IMyOrdersOrder,
-  IMyOrdersProps,
-  IPasswordProtectedEventData,
-  IPromoCodeResponse,
-  IPurchaseConfirmationData,
-  IPurchaseConfirmationProps,
-  IRegisterNewUserBody,
-  IResaleTicketsProps,
-  ISelectedTicket,
-  ITicket,
-  ITicketsProps,
-  ITicketsResponseData,
-  IUserProfile,
-  IConfig,
-  ICheckoutSuccessData,
-  IMyOrderDetailsTicket,
-  Loading,
-  LoggedIn,
-  Login,
-  LoginCore,
-  LoginCoreHandle,
-  MyOrderDetails,
-  MyOrderRequestFromType,
-  MyOrders,
-  MyOrdersCore,
-  MyOrdersCoreHandle,
-  OrderDetailsCore,
-  OrderDetailsCoreHandle,
-  PaymentForm,
-  PromoCode,
-  PurchaseConfirmation,
-  PurchaseConfirmationCore,
-  PurchaseConfirmationCoreHandle,
-  refreshAccessToken,
-  ResaleTickets,
-  ResetPassword,
-  ResetPasswordCore,
-  ResetPasswordCoreHandle,
-  SessionCoreHandleType,
-  SessionHandleType,
-  setConfig,
-  Tickets,
-  TicketsCore,
-  TicketsCoreHandle,
-  useAddons,
-  useAddToCart,
-  // New checkout hooks (replacing BillingCore and CheckoutCore functionality)
-  useCart,
-  useCheckout,
-  useCheckoutFlow,
-  useCountries,
-  useEventConditions,
-  useEventInfo,
-  usePaymentData,
-  usePaymentSuccess,
-  useRegisterUser,
-  useStates,
-  useTickets,
-  useUpdateCheckout,
-  useUserProfile,
-  WaitingList,
-  WaitingListCore,
-  WaitingListCoreHandle,
-}
-export default NativeModules.TFCheckoutRNModule
+// Component library: themeable provider + primitives + sections + auth.
+export * from './ui'
+export * from './sections'
+export * from './auth'
+export { EmbeddedCheckout, type EmbeddedCheckoutProps } from './EmbeddedCheckout'
 
-export * from './apiv2'
-
-export { storage, type StorageAdapter } from 'tf-checkout-shared'
+// Port instances/factories (bring-your-own ports, testing, custom flows).
+export { rnConfirmer, rnPorts } from './instance'
+export { createRnStripeConfirmer, createRnPorts } from './confirmer'

package/src/instance.ts

@@ -0,0 +1,13 @@
+/**
+ * The package-level native platform instances. Created once at module load, so
+ * the hook and the UI components all bind to the SAME confirmer/ports.
+ */
+import type { PaymentConfirmer } from 'tf-checkout-shared'
+
+import { createRnPorts, createRnStripeConfirmer } from './confirmer'
+
+/** The confirmer every `useCheckout`/`<CardInput/>` binds to. */
+export const rnConfirmer: PaymentConfirmer = createRnStripeConfirmer()
+
+/** The native ports the alternative Stripe rails (OXXO / plan) run on. */
+export const rnPorts = createRnPorts()

package/src/sections/Accommodation.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { hooks, htmlToPlainText, accommodationBookingDeadline } from 'tf-checkout-shared'
+import { useCheckoutContext, useTheme } from '../ui/CheckoutProvider'
+import { Field, Input } from '../ui/Field'
+import { QuantitySelect } from '../ui/QuantitySelect'
+import { Button, Card, ErrorText, Loader, MutedText, SectionHeader } from '../ui/primitives'
+
+/** Native controls over the shared stay draft, quote and reservation lifecycle. */
+export const Accommodation = ({ eventId }: { eventId: string }) => {
+  const checkout = useCheckoutContext()
+  const flow = hooks.useAccommodationSelection(eventId, checkout)
+  const theme = useTheme()
+  const text = { color: theme.text, fontFamily: theme.fontFamily }
+  if (flow.query.isLoading) return <Loader />
+  if (!flow.rooms.length && !flow.error) return null
+  return (
+    <Card>
+      <SectionHeader title="Accommodation" subtitle="Add a place to stay with your tickets." />
+      {!!flow.error && <ErrorText>{flow.error}</ErrorText>}
+      {flow.query.isError && <Button variant="ghost" onPress={() => void flow.query.refetch()}>Try again</Button>}
+      {flow.rooms.map((room) => {
+        const id = String(room.room_type_id)
+        const stay = flow.stay(room)
+        const quote = flow.quotes[id]
+        return (
+          <View key={id} style={styles.room}>
+            <Text style={[text, styles.title]}>{room.property_name} · {room.name}</Text>
+            {!!room.description && <MutedText>{htmlToPlainText(room.description)}</MutedText>}
+            {accommodationBookingDeadline(room) && <MutedText>{accommodationBookingDeadline(room)}</MutedText>}
+            <MutedText>{room.sold_out ? 'Sold out' : `${room.currency} ${room.min_price.toFixed(2)} per night${room.max_price > room.min_price ? ' and up' : ''}`}</MutedText>
+            <Field label="Rooms">
+              <QuantitySelect value={stay.rooms} max={room.max_rooms_per_line} disabled={flow.busy || room.sold_out} label={`Rooms for ${room.name}`} onChange={(rooms) => flow.update(room, { rooms })} />
+            </Field>
+            {stay.rooms > 0 && <>
+              <Field label="Check-in (YYYY-MM-DD)"><Input accessibilityLabel={`Check-in for ${room.name}`} value={stay.check_in} maxLength={10} autoCapitalize="none" editable={!flow.busy} onChangeText={(check_in) => flow.update(room, { check_in })} /></Field>
+              <Field label="Check-out (YYYY-MM-DD)"><Input accessibilityLabel={`Check-out for ${room.name}`} value={stay.check_out} maxLength={10} autoCapitalize="none" editable={!flow.busy} onChangeText={(check_out) => flow.update(room, { check_out })} /></Field>
+              <Field label={`Guests per room (up to ${room.max_occupancy})`}><Input accessibilityLabel={`Guests per room for ${room.name}`} value={String(stay.num_guests)} keyboardType="number-pad" editable={!flow.busy} onChangeText={(value) => flow.update(room, { num_guests: Number(value) })} /></Field>
+              <Field label="Guest names (optional, one per line)"><Input multiline accessibilityLabel={`Guest names for ${room.name}`} value={(stay.occupants ?? []).map((person) => person.name).join('\n')} editable={!flow.busy} onChangeText={(value) => flow.update(room, { occupants: value.split('\n').map((name) => ({ name })) })} /></Field>
+              <MutedText>{room.cancellation_policy
+                ? `Free cancellation ${room.cancellation_policy.free_cancel_days} or more days before check-in. ${room.cancellation_policy.partial_refund_pct}% refund ${room.cancellation_policy.partial_refund_days} or more days before check-in; no refund after that.`
+                : 'Fully refundable under the property cancellation policy.'}</MutedText>
+              {!!quote && !flow.dirty && <>
+                <Text style={text}>{quote.total_formatted ?? quote.total_price_formatted}</Text>
+                {quote.charges?.map((charge, index) => <MutedText key={index}>{charge.name}: {charge.line_total_formatted}{charge.included ? ' (included)' : ''}</MutedText>)}
+              </>}
+            </>}
+            {!!flow.rejections[id] && <ErrorText>{flow.rejections[id].message}</ErrorText>}
+          </View>
+        )
+      })}
+      {flow.rooms.length > 0 && <Button loading={checkout.isBusy} disabled={flow.busy} onPress={() => void flow.save()}>{flow.dirty ? 'Save accommodation' : 'Refresh accommodation'}</Button>}
+      {flow.dirty && <Button variant="ghost" disabled={flow.busy} onPress={flow.cancel}>Discard changes</Button>}
+    </Card>
+  )
+}
+const styles = StyleSheet.create({ room: { gap: 12, paddingVertical: 12 }, title: { fontSize: 16, fontWeight: '600' } })

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