tf-checkout-react-native 1.0.37 → 1.0.40

package/src/features/checkout-v2/types.ts

@@ -0,0 +1,475 @@
+/**
+ * Type definitions for checkout API interactions
+ */
+import type { ICartTimerTexts } from '../../components/cartTimer/types'
+import type { ILoginViewTexts } from '../../components/login/types'
+import type { CheckoutFormTexts } from './form/types'
+
+/**
+ * Event-related types
+ */
+export interface EventAttributes {
+  name: string
+  description: string | null
+  shortDescription: string | null
+  slug: string
+  country: string
+  date: string
+  startDate: string
+  endDate: string
+  ticketsSold: number
+  timezone: string
+  currency: {
+    currency: string
+    decimal_places: number
+    symbol: string
+  }
+  formattedDate: string
+  venueCountry: string
+  venueCity: string
+  venueState: string
+  hideVenueUntil: string | null
+  hideVenue: boolean
+  venueName: string
+  venueGooglePlaceId: string
+  venueLatitude: string
+  venueLongitude: string
+  venuePostalCode: string | null
+  venueStreet: string | null
+  venueStreetNumber: string | null
+  eventType: {
+    festival: boolean
+  }
+  productImage: string
+  imageUrl: string
+  imageUrlHd: string
+  backgroundImage: string
+  salesStart: string | null
+  salesEnd: string
+  salesStarted: boolean
+  salesEnded: boolean
+  feeMode: string
+  feesIncluded: boolean | null
+  minimumAge: number | null
+  passwordProtected: boolean
+  passwordAuthenticated: boolean
+}
+
+export interface EventResponse {
+  attributes: EventAttributes
+  relationships: any[]
+  type: string
+}
+
+/**
+ * Ticket-related types
+ */
+export interface TicketInfo {
+  id: string
+  displayName: string
+  optionName: string
+  optionValue: string
+  isTable: boolean
+  feeIncluded: boolean
+  price: number
+  basePrice: number
+  chosen: boolean
+  priceCurrency: string
+  priceSymbol: string
+  taxesIncluded: boolean
+  taxName: string
+  minQuantity: number
+  maxQuantity: number
+  multiplier: number
+  tags: string[]
+  allowMultiplePurchases: boolean
+  priceReplacementText: string
+  waitingListEnabled: number
+  waitingListMaxQuantity: number
+  soldOut: number
+  soldOutMessage: number
+  totalStock: number
+  hasEnded: boolean
+  sortOrder: number
+  displayTicket: boolean
+  salesEnded: boolean
+  salesStarted: boolean
+}
+
+export interface TicketsResponse {
+  data: {
+    attributes: {
+      tickets: {
+        [ticketId: string]: TicketInfo
+      }
+      showWaitingList: boolean
+      is_access_code: boolean
+      isPromotionsEnabled: boolean
+      showTablePricePerGuest: boolean
+      ValidPromoCode: boolean
+      PromoCodeValidationMessage: string
+    }
+    relationships: any[]
+    type: string
+  }
+}
+
+/**
+ * Cart and Add to Cart related types
+ */
+export interface IAddToCartParams {
+  attributes: {
+    alternative_view_id?: string | number | null
+    product_cart_quantity: number
+    product_options: {
+      [key: string]: number | string
+    }
+    product_id: number
+    ticket_types: {
+      [key: string]: {
+        product_options: {
+          [key: string]: number | string
+          ticket_price: number
+        }
+        quantity: number
+      }
+    }
+  }
+}
+
+export interface CartData {
+  eventId: string
+  cart: Array<{
+    id: string
+    price: number
+    quantity: number
+  }>
+  ttf_opt_in: number
+  optedIn: number
+  ttfOptIn: number
+  hide_ttf_opt_in: boolean
+  expiresAt: number
+  is_table: boolean
+}
+
+export interface CartResponse {
+  attributes: CartData
+  relationships: any[]
+  type: string
+}
+
+export interface AddToCartResponse {
+  success: boolean
+  status: number
+  message: string
+}
+
+/**
+ * Checkout related types
+ */
+export interface CheckoutResponse {
+  attributes: {
+    debt: string
+    guest_count: null
+    hash: string
+    id: string
+    pay_now: string
+    status: string
+    total: string
+  }
+}
+
+export interface TicketPriceBreakdown {
+  price: number
+  name: string
+  quantity: number
+}
+
+// Define the add-on price breakdown structure
+export interface AddonPriceBreakdown {
+  add_on_name: string
+  quantity: number
+  price_per_add_on: string
+  cost_per_add_on: string
+  total_price: number
+  show_price: boolean
+}
+
+export interface CartPriceBreakdown {
+  total: number
+  total_add_ons: number
+  currency: {
+    code: string
+    symbol: string
+  }
+  event_name: string
+  goods_tax?: number
+  goods_tax_name?: string
+  tickets_price_breakdown: TicketPriceBreakdown[]
+  add_ons_price_breakdown?: AddonPriceBreakdown[]
+}
+
+export interface UpdateCheckoutResponse {
+  attributes: {
+    cart_price_breakdown?: {
+      total: number
+      debt: number
+      guest_count: number
+      guest_revenue: number
+      currency: {
+        currency: string
+        decimal_places: number
+        symbol: string
+      }
+      insurance_amount: number
+      goods_tax: number
+      goods_tax_name: string
+      total_add_ons: number
+      payment_option_additional_fees: number
+      tickets_price_breakdown: [
+        {
+          fees_breakdown: Array<{
+            name: string
+            amount: number
+          }>
+          is_table: boolean
+          ticket_type_name: string
+          ticket_type_id: string
+          quantity: number
+          fees_per_ticket: number
+          discount: number
+          description: string
+          refund_on_checkin: boolean
+          price_per_ticket: string
+          cost_per_ticket: string
+          total_price: number
+        },
+      ]
+      add_ons_price_breakdown: []
+      insurance_items_breakdown: []
+      event_name: string
+    }
+    additional_payment_information?: {
+      basic_config: {
+        apiKey: string
+        accountId: string
+      }
+      elements_config: {
+        amount: number
+        currency: string
+        mode: 'payment' | 'setup'
+        paymentMethodTypes: string[]
+        setupFutureUsage: null | string | boolean
+      }
+      additional_config: {
+        decimalMultiplier: number
+        canChangeCaptureMode: boolean
+      }
+      stripe_wallets: {
+        applePay?: 'auto' | 'never'
+        googlePay?: 'auto' | 'never'
+      }
+      payment_plan_available: boolean
+    }
+  }
+}
+export interface UpdateCheckoutParams {
+  attributes: {
+    event_id: number | string
+    add_ons: {
+      [key: string]: number
+    }
+    is_from_resale: boolean
+  }
+}
+
+/**
+ * Payment related types
+ */
+export interface TicketDetails {
+  name: string
+  quantity: number
+  price: number
+  cost: number
+}
+
+export interface OrderDetails {
+  id: string
+  total: number
+  subtotal: number
+  fees: number
+  pay_now: number
+  tickets: TicketDetails[]
+  add_ons: any[]
+  currency: string
+  guest_count?: number
+  debt?: number | null
+}
+
+export interface PaymentMethodDetails {
+  stripe_client_secret?: string
+  stripe_publishable_key?: string
+  stripe_connected_account?: string
+}
+
+export interface PaymentDataResponse {
+  attributes: {
+    order_details: OrderDetails
+    cart: Array<{
+      product_name: string
+    }>
+    payment_method: PaymentMethodDetails
+  }
+}
+
+export interface PaymentSuccessResponse {
+  success: boolean
+}
+
+export interface UserRegistrationData {
+  email: string
+  first_name: string
+  last_name: string
+  password: string
+  password_confirmation: string
+  phone?: string
+  city?: string
+  street_address?: string
+  zip?: string
+  country?: number
+  state?: number
+}
+
+/**
+ * Add-ons related types
+ */
+export interface AddonItem {
+  // id: string
+  // name: string
+  // description: string
+  // price: number
+  // image: string | null
+  // quantity: number
+  // max_quantity: number
+  id: string
+  type: 'add_on'
+  attributes: {
+    id: string
+    name: string
+    description: string | null
+    image: string | null
+    currency: string
+    price: number
+    faceValue: number
+    feeIncluded: boolean
+    cost: number
+    groupName: string | null
+    groupSortOrder: string | null
+    level: string
+    stock: number
+    flagLimitToTicketQuantity: boolean
+    limitPerTicket: string
+    active: boolean
+    type: string | null
+    prerequisiteTicketTypeIds: string | null
+    equivalentTicketTypeId: string | null
+    withholdFromResale: boolean
+    sortOrder: string
+    maxQuantity: string
+    addOnGroupId: string | null
+    imageUrl: string | null
+    hasSales: boolean
+    currencies: []
+  }
+}
+
+export interface AddonsResponse {
+  attributes: {
+    add_ons: AddonItem[]
+  }
+  relationships: any[]
+  type: string
+}
+
+/**
+ * API helper types
+ */
+export interface DropdownItem {
+  value: string
+  label: string
+  code?: string
+}
+
+/**
+ * Status types for checkout flow
+ */
+export type CheckoutStatus =
+  | 'idle'
+  | 'validating'
+  | 'creating'
+  | 'fetching'
+  | 'confirming'
+  | 'success'
+  | 'failed'
+
+/**
+ * Response data types
+ */
+export interface OrderResult {
+  orderHash: string
+  total: number
+  currency?: string
+  email?: string
+  paymentIntentId?: string
+}
+
+export interface ICheckoutTicketHolder {
+  email: string
+  first_name: string
+  last_name: string
+  phone: string
+}
+
+export interface ICheckoutBody {
+  attributes: {
+    brand_opt_in: boolean
+    city?: string
+    confirm_email: string
+    country?: number
+    email: string
+    first_name: string
+    last_name: string
+    password: string
+    phone?: string
+    state?: number
+    street_address?: string
+    ttf_opt_in: boolean
+    zip?: string
+    ticket_holders: ICheckoutTicketHolder[]
+    dob_day?: number
+    dob_month?: number
+    dob_year?: number
+    add_ons?: Record<string, number>
+    data_capture?: Record<string, string | string[]>
+    add_on_data_capture?: Record<string, Record<string, string>>
+  }
+}
+
+export interface IOrderItem {
+  id: string
+  title: string
+  subtitle?: string
+  value: string
+  styles?: {
+    title?: any
+    value?: any
+    container?: any
+    subtitle?: any
+  }
+}
+
+export interface CheckoutTexts {
+  form?: CheckoutFormTexts
+  login?: ILoginViewTexts
+  cartTimer?: ICartTimerTexts
+}

package/src/features/checkout-v2/utils.ts

@@ -0,0 +1,156 @@
+/**
+ * Utility functions for checkout flow
+ */
+
+import { Config } from '../../helpers/Config'
+import { CustomField } from '../event/types'
+import { FieldType } from '../form/types'
+import { CheckoutFormValues } from './form/types'
+import { ICheckoutBody } from './types'
+
+// Import and re-export from shared
+export { priceWithCurrency } from 'tf-checkout-shared'
+
+export const createRegistrationData = (
+  values: CheckoutFormValues,
+  isAgeRequired?: boolean
+): FormData => {
+  const registerUserData = new FormData()
+
+  // Basic user info
+  registerUserData.append('email', values.email)
+  registerUserData.append('first_name', values.firstName)
+  registerUserData.append('last_name', values.lastName)
+  registerUserData.append('password', values.password)
+  registerUserData.append('password_confirmation', values.passwordConfirmation)
+
+  // Required credentials
+  registerUserData.append('client_id', Config.CLIENT_ID)
+  registerUserData.append('client_secret', Config.CLIENT_SECRET)
+  registerUserData.append('check_cart_expiration', 'true')
+
+  // Optional fields
+  if (values.phone) registerUserData.append('phone', values.phone)
+  if (values.city) registerUserData.append('city', values.city)
+  if (values.street) registerUserData.append('street_address', values.street)
+  if (values.postalCode) registerUserData.append('zip', values.postalCode)
+
+  // Address fields
+  if (values.country && values.country !== '-1') {
+    registerUserData.append('country', values.country)
+  }
+  if (values.state && values.state !== '-1') {
+    registerUserData.append('state', values.state)
+  }
+
+  // Age verification
+  if (isAgeRequired && values.dateOfBirth) {
+    addDateOfBirthToFormData(registerUserData, values.dateOfBirth)
+  }
+
+  return registerUserData
+}
+
+// Helper to add date of birth fields to form data
+const addDateOfBirthToFormData = (formData: FormData, dateOfBirth: string): void => {
+  const dob = new Date(dateOfBirth)
+  formData.append('dob_day', dob.getDate().toString())
+  formData.append('dob_month', (dob.getMonth() + 1).toString())
+  formData.append('dob_year', dob.getFullYear().toString())
+}
+
+// Helper to create checkout request body
+export const createCheckoutBody = (
+  values: CheckoutFormValues,
+  isAgeRequired?: boolean
+): ICheckoutBody => {
+  // Use the ticket holders from the form values - no fallbacks
+  const ticketHolders = values.ticketHolders.map((holder) => ({
+    email: holder.email,
+    first_name: holder.firstName,
+    last_name: holder.lastName,
+    phone: holder.phone,
+  }))
+
+  const body: ICheckoutBody = {
+    attributes: {
+      city: values.city,
+      confirm_email: values.emailConfirmation,
+      country:
+        values.country && values.country !== '-1'
+          ? parseInt(values.country, 10)
+          : undefined,
+      email: values.email,
+      first_name: values.firstName,
+      last_name: values.lastName,
+      password: values.password || '',
+      phone: values.phone || '',
+      state:
+        values.state && values.state !== '-1' ? parseInt(values.state, 10) : undefined,
+      street_address: values.street,
+      zip: values.postalCode,
+      ticket_holders: ticketHolders,
+      ttf_opt_in: values.isSubToTicketFairy,
+      brand_opt_in: values.isSubToBrand,
+    },
+  }
+
+  if (values.addons && Object.keys(values.addons).length > 0) {
+    body.attributes.add_ons = {}
+    body.attributes.add_on_data_capture = {}
+
+    Object.entries(values.addons).forEach(([addonId, addonData]) => {
+      if (addonData.quantity > 0) {
+        body.attributes.add_ons[addonId] = addonData.quantity
+
+        if (addonData.customFields && Object.keys(addonData.customFields).length > 0) {
+          body.attributes.add_on_data_capture[addonId] = {}
+
+          Object.entries(addonData.customFields).forEach(([key, value]) => {
+            if (value !== undefined && value !== '') {
+              body.attributes.add_on_data_capture[addonId][key] = value
+            }
+          })
+        }
+      }
+    })
+  }
+
+  // Add date of birth if required
+  if (isAgeRequired && values.dateOfBirth) {
+    const dob = new Date(values.dateOfBirth)
+    body.attributes.dob_day = dob.getDate()
+    body.attributes.dob_month = dob.getMonth() + 1
+    body.attributes.dob_year = dob.getFullYear()
+  }
+
+  // Add custom fields if present
+  if (values.customFields && Object.keys(values.customFields).length > 0) {
+    body.attributes.data_capture = {}
+    // Format custom fields for API
+    Object.entries(values.customFields).forEach(([key, value]) => {
+      if (value !== undefined && value !== '') {
+        body.attributes.data_capture![key] = value
+      }
+    })
+  }
+
+  return body
+}
+
+export const getFieldType = (type: CustomField['type']): FieldType => {
+  switch (type) {
+    case 'text':
+      return FieldType.INPUT
+    case 'textarea':
+      return FieldType.TEXTAREA
+    case 'phone':
+      return FieldType.PHONE
+    case 'radio':
+      return FieldType.RADIO
+    case 'select':
+      return FieldType.SELECT
+    case 'select_multi':
+      return FieldType.SELECT_MULTI
+  }
+}

package/src/features/event/api-hooks.ts

@@ -0,0 +1,28 @@
+import { useQuery } from '@tanstack/react-query'
+import { AxiosError } from 'axios'
+
+import { ApiResponse } from '../../api/api.types'
+import { Client } from '../../api/ApiClient'
+import { QueryOpts } from '../../common/query.types'
+import { IEventCustomFields } from './types'
+
+/**
+ * Hook to fetch user profile
+ */
+export const useEventCustomFields = (
+  eventId?: string,
+  options?: QueryOpts<ApiResponse<IEventCustomFields>, AxiosError>
+) => {
+  const query = useQuery<ApiResponse<IEventCustomFields>, AxiosError>({
+    queryKey: ['eventCustomFields', eventId],
+    queryFn: () =>
+      Client.get<ApiResponse<IEventCustomFields>>(
+        `v1/event/${eventId}/custom_fields/`
+      ).then((response) => response.data),
+    retry: false,
+    enabled: !!eventId,
+    ...options,
+  })
+
+  return { ...query }
+}

package/src/features/event/types.ts

@@ -0,0 +1,69 @@
+export interface IEventCustomFields {
+  attributes: Array<OrderAttribute | TicketAttribute | AddOnAttribute>
+}
+
+// ----------------- Base Structures -----------------
+
+export interface Group {
+  id: string
+  label: string | null
+  image: string
+  type: 'order' | 'ticket' | 'add-on'
+  order: string
+  fields: CustomField[]
+}
+
+export interface CustomField {
+  id: string
+  image: string
+  type: FieldType
+  name: string
+  order: string
+  label: string
+  defaultValue: string | string[]
+  required: boolean
+  description: string | null
+  settings: FieldSettings
+  options?: FieldOption[]
+}
+
+export type FieldType =
+  | 'text'
+  | 'textarea'
+  | 'phone'
+  | 'radio'
+  | 'select'
+  | 'select_multi'
+
+export interface FieldSettings {
+  showOnMyTickets: boolean
+  showOnPdf: boolean
+  showOnScan: boolean
+  allowUpdate: boolean
+}
+
+export interface FieldOption {
+  id: string
+  name: string
+  value: string
+}
+
+// ----------------- Attribute Wrappers -----------------
+
+export interface OrderAttribute {
+  order: {
+    group: Group & { type: 'order' }
+  }
+}
+
+export interface TicketAttribute {
+  ticket: {
+    group: Group & { type: 'ticket' }
+  }
+}
+
+export interface AddOnAttribute {
+  'add-on': {
+    group: Group & { type: 'add-on' }
+  }
+}