tf-checkout-react-native 1.0.37 → 1.0.40

package/src/features/checkout-v2/form/styles.ts

@@ -0,0 +1,241 @@
+import { CardFormView } from '@stripe/stripe-react-native'
+import { StyleProp, StyleSheet, TextStyle, ViewStyle } from 'react-native'
+
+import type { FormikFieldComponentStyles } from '../../form'
+
+const baseStyles = StyleSheet.create({
+  form: {
+    width: '100%',
+    marginBottom: 50,
+  },
+  sectionTitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    marginTop: 20,
+    marginBottom: 16,
+  },
+  sectionContainer: {
+    marginVertical: 8,
+    width: '100%',
+  },
+  paymentContainer: {
+    padding: 10,
+    backgroundColor: '#f9f9f9',
+    borderRadius: 8,
+    marginVertical: 10,
+    minHeight: 180,
+  },
+  cardContainer: {
+    height: 200,
+    width: '100%',
+  },
+  orderReviewContainer: {
+    marginVertical: 16,
+  },
+  // Add-ons styles
+  addonSection: {
+    marginVertical: 16,
+    width: '100%',
+    borderWidth: 1,
+    borderColor: '#e0e0e0',
+    borderRadius: 8,
+    padding: 16,
+  },
+  addonRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    marginVertical: 12,
+    paddingBottom: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#f0f0f0',
+  },
+  addonItem: {
+    flexDirection: 'column',
+    gap: 16,
+  },
+  addonInfo: {
+    flex: 1,
+    marginRight: 16,
+  },
+  addonName: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    marginBottom: 4,
+  },
+  addonPrice: {
+    fontSize: 15,
+    color: '#333',
+    marginBottom: 4,
+  },
+  addonPriceWithFees: {
+    fontSize: 12,
+    color: '#666',
+  },
+  addonDescription: {
+    fontSize: 14,
+    color: '#666',
+    marginTop: 4,
+  },
+  addonSelectContainer: {
+    width: 80,
+  },
+  addonMainTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+  addonSubtitle: {
+    fontSize: 14,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 16,
+  },
+  button: {
+    backgroundColor: '#007bff',
+    padding: 15,
+    borderRadius: 5,
+    alignItems: 'center',
+    marginTop: 20,
+    elevation: 3, // Android shadow
+    shadowColor: '#000', // iOS shadow
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 3,
+  },
+  buttonDisabled: {
+    opacity: 0.6,
+  },
+  buttonText: {
+    color: '#ffffff',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  errorContainer: {
+    marginTop: 8,
+    padding: 10,
+    backgroundColor: '#ffebee',
+    borderRadius: 5,
+  },
+  errorText: {
+    color: '#d32f2f',
+    marginBottom: 10,
+  },
+  ticketHolderTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    marginBottom: 16,
+  },
+})
+
+export interface CheckoutFormStyles {
+  form?: StyleProp<ViewStyle>
+  sectionTitle?: StyleProp<TextStyle>
+  sectionContainer?: StyleProp<ViewStyle>
+  paymentContainer?: StyleProp<ViewStyle>
+  cardContainer?: StyleProp<ViewStyle>
+  orderReviewContainer?: StyleProp<ViewStyle>
+  orderReviewItem?: {
+    container?: StyleProp<ViewStyle>
+    title?: StyleProp<TextStyle>
+    subtitle?: StyleProp<TextStyle>
+    value?: StyleProp<TextStyle>
+  }
+  addonRow?: StyleProp<ViewStyle>
+  addonSection?: StyleProp<ViewStyle>
+  addonItem?: StyleProp<ViewStyle>
+  addonInfo?: StyleProp<ViewStyle>
+  addonName?: StyleProp<TextStyle>
+  addonPrice?: StyleProp<TextStyle>
+  addonPriceWithFees?: StyleProp<TextStyle>
+  addonDescription?: StyleProp<TextStyle>
+  addonSelectContainer?: StyleProp<ViewStyle>
+  addonMainTitle?: StyleProp<TextStyle>
+  addonSubtitle?: StyleProp<TextStyle>
+  button?: StyleProp<ViewStyle>
+  buttonDisabled?: StyleProp<ViewStyle>
+  buttonText?: StyleProp<TextStyle>
+  errorContainer?: StyleProp<ViewStyle>
+  errorText?: StyleProp<TextStyle>
+  paymentContainerInner?: StyleProp<ViewStyle>
+  cardStyle?: Partial<CardFormView.Styles>
+  ticketHolderTitle?: StyleProp<TextStyle>
+  fields?: FormikFieldComponentStyles
+}
+
+export type CheckoutFormComputedStyles = ReturnType<typeof mergeCheckoutFormStyles>
+
+export const cardStyle: CardFormView.Styles = {
+  backgroundColor: '#FFFFFF',
+  textColor: '#000000',
+  placeholderColor: '#999999',
+  borderWidth: 1,
+  borderColor: '#E0E0E0',
+  borderRadius: 8,
+}
+
+export const mergeCheckoutFormStyles = (overrides?: CheckoutFormStyles) => ({
+  form: StyleSheet.flatten([baseStyles.form, overrides?.form]),
+  sectionTitle: StyleSheet.flatten([baseStyles.sectionTitle, overrides?.sectionTitle]),
+  sectionContainer: StyleSheet.flatten([
+    baseStyles.sectionContainer,
+    overrides?.sectionContainer,
+  ]),
+  paymentContainer: StyleSheet.flatten([
+    baseStyles.paymentContainer,
+    overrides?.paymentContainer,
+  ]),
+  cardContainer: StyleSheet.flatten([baseStyles.cardContainer, overrides?.cardContainer]),
+  orderReviewContainer: StyleSheet.flatten([
+    baseStyles.orderReviewContainer,
+    overrides?.orderReviewContainer,
+  ]),
+  orderReviewItem: overrides?.orderReviewItem,
+  addonSection: StyleSheet.flatten([baseStyles.addonSection, overrides?.addonSection]),
+  addonRow: StyleSheet.flatten([baseStyles.addonRow, overrides?.addonRow]),
+  addonItem: StyleSheet.flatten([baseStyles.addonItem, overrides?.addonItem]),
+  addonInfo: StyleSheet.flatten([baseStyles.addonInfo, overrides?.addonInfo]),
+  addonName: StyleSheet.flatten([baseStyles.addonName, overrides?.addonName]),
+  addonPrice: StyleSheet.flatten([baseStyles.addonPrice, overrides?.addonPrice]),
+  addonPriceWithFees: StyleSheet.flatten([
+    baseStyles.addonPriceWithFees,
+    overrides?.addonPriceWithFees,
+  ]),
+  addonDescription: StyleSheet.flatten([
+    baseStyles.addonDescription,
+    overrides?.addonDescription,
+  ]),
+  addonSelectContainer: StyleSheet.flatten([
+    baseStyles.addonSelectContainer,
+    overrides?.addonSelectContainer,
+  ]),
+  addonMainTitle: StyleSheet.flatten([
+    baseStyles.addonMainTitle,
+    overrides?.addonMainTitle,
+  ]),
+  addonSubtitle: StyleSheet.flatten([baseStyles.addonSubtitle, overrides?.addonSubtitle]),
+  button: StyleSheet.flatten([baseStyles.button, overrides?.button]),
+  buttonDisabled: StyleSheet.flatten([
+    baseStyles.buttonDisabled,
+    overrides?.buttonDisabled,
+  ]),
+  buttonText: StyleSheet.flatten([baseStyles.buttonText, overrides?.buttonText]),
+  errorContainer: StyleSheet.flatten([
+    baseStyles.errorContainer,
+    overrides?.errorContainer,
+  ]),
+  errorText: StyleSheet.flatten([baseStyles.errorText, overrides?.errorText]),
+  paymentContainerInner: StyleSheet.flatten([overrides?.paymentContainerInner]),
+  cardStyle: {
+    ...cardStyle,
+    ...(overrides?.cardStyle || {}),
+  },
+  ticketHolderTitle: StyleSheet.flatten([
+    baseStyles.ticketHolderTitle,
+    overrides?.ticketHolderTitle,
+  ]),
+  fields: overrides?.fields,
+})
+
+export default baseStyles

package/src/features/checkout-v2/form/texts.ts

@@ -0,0 +1,133 @@
+import { CheckoutFormTexts } from './types'
+
+export const defaultCheckoutFormTexts: Required<CheckoutFormTexts> = {
+  form: {
+    sectionTitle: 'Personal Information',
+    firstName: 'First Name',
+    firstNamePlaceholder: 'Enter your first name',
+    lastName: 'Last Name',
+    lastNamePlaceholder: 'Enter your last name',
+    email: 'Email',
+    emailPlaceholder: 'Enter your email',
+    emailConfirmation: 'Confirm Email',
+    emailConfirmationPlaceholder: 'Confirm your email',
+    password: 'Password',
+    passwordPlaceholder: 'Enter a password',
+    passwordConfirmation: 'Confirm Password',
+    passwordConfirmationPlaceholder: 'Confirm your password',
+    phone: 'Phone Number',
+    phonePlaceholder: 'Enter your phone number',
+    dateOfBirth: 'Date of Birth',
+    dateOfBirthPlaceholder: 'Date of Birth',
+    street: 'Street Address',
+    streetPlaceholder: 'Enter your street address',
+    city: 'City',
+    cityPlaceholder: 'Enter your city',
+    country: 'Country',
+    countryPlaceholder: 'Select your country',
+    state: 'State',
+    statePlaceholder: 'Select your state',
+    postalCode: 'Postal Code',
+    postalCodePlaceholder: 'Enter your postal code',
+    customFields: {},
+  },
+  ticketHolders: {
+    title: 'Ticket Holders',
+    itemTitle: 'Ticket {index}',
+    firstName: 'First Name *',
+    firstNamePlaceholder: 'Enter first name',
+    lastName: 'Last Name *',
+    lastNamePlaceholder: 'Enter last name',
+    email: 'Email',
+    emailPlaceholder: 'Enter email address',
+    phone: 'Phone Number',
+    phonePlaceholder: 'Enter phone number',
+    customFields: {},
+  },
+  marketingOptIns: {
+    ticketFairyOptIn: 'Subscribe to The Ticket Fairy newsletters',
+    organizerOptIn: 'Subscribe to event organizer newsletters',
+  },
+  addons: {
+    title: 'Available Add-ons',
+    quantityLabel: 'Qty',
+    priceWithFeesSuffix: ' (with fees)',
+  },
+  orderSummary: {
+    sectionTitle: 'Order Summary',
+  },
+  payment: {
+    sectionTitle: 'Payment Details',
+    errorRequired: 'Please fill your payment information',
+  },
+  buttons: {
+    singlePageSubmit: 'Complete Checkout',
+    goToPayment: 'Proceed to Payment',
+    paymentSubmit: 'Complete Payment',
+  },
+  conditions: {
+    title: 'Event Conditions',
+    acceptLabel: 'I have read and accept these conditions',
+    viewButton: 'View',
+    hideButton: 'Hide',
+  },
+}
+
+const mergeCustomFieldMap = (
+  base: Record<string, { label?: string; placeholder?: string }>,
+  override?: Record<string, { label?: string; placeholder?: string }>
+): Record<string, { label?: string; placeholder?: string }> => ({
+  ...base,
+  ...(override ?? {}),
+})
+
+export const mergeCheckoutFormTexts = (
+  overrides?: CheckoutFormTexts
+): Required<CheckoutFormTexts> => {
+  if (!overrides) {
+    return defaultCheckoutFormTexts
+  }
+
+  return {
+    form: {
+      ...defaultCheckoutFormTexts.form,
+      ...overrides.form,
+      customFields: mergeCustomFieldMap(
+        defaultCheckoutFormTexts.form.customFields || {},
+        overrides.form?.customFields
+      ),
+    },
+    ticketHolders: {
+      ...defaultCheckoutFormTexts.ticketHolders,
+      ...overrides.ticketHolders,
+      customFields: mergeCustomFieldMap(
+        defaultCheckoutFormTexts.ticketHolders.customFields || {},
+        overrides.ticketHolders?.customFields
+      ),
+    },
+    marketingOptIns: {
+      ...defaultCheckoutFormTexts.marketingOptIns,
+      ...overrides.marketingOptIns,
+    },
+    addons: {
+      ...defaultCheckoutFormTexts.addons,
+      ...overrides.addons,
+    },
+    orderSummary: {
+      ...defaultCheckoutFormTexts.orderSummary,
+      ...overrides.orderSummary,
+    },
+    payment: {
+      ...defaultCheckoutFormTexts.payment,
+      ...overrides.payment,
+    },
+    buttons: {
+      ...defaultCheckoutFormTexts.buttons,
+      ...overrides.buttons,
+    },
+    conditions: {
+      ...defaultCheckoutFormTexts.conditions,
+      ...overrides.conditions,
+    },
+  }
+}

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

@@ -0,0 +1,231 @@
+import React, { JSX } from 'react'
+import type {
+  ScrollViewScrollToOptions,
+  ScrollView as ScrollViewType,
+} from 'react-native' // 👈 grab the instance type
+
+import { CustomField } from '../../event/types'
+import { IOrderItem } from '../components/OrderReview'
+import { AddonItem, UpdateCheckoutResponse } from '../types'
+import { CheckoutFormStyles } from './styles'
+
+export interface TicketHolderFormValues {
+  firstName: string
+  lastName: string
+  email: string
+  phone: string
+  customFields?: Record<string, string | string[]>
+}
+
+export interface CheckoutFormValues {
+  // Personal information
+  firstName: string
+  lastName: string
+  email: string
+  emailConfirmation: string
+  phone: string
+  dateOfBirth?: string
+
+  // Address information
+  street: string
+  city: string
+  postalCode: string
+  country: string
+  state: string
+
+  // Authentication
+  password: string
+  passwordConfirmation: string
+
+  // Marketing preferences
+  isSubToTicketFairy: boolean
+  isSubToBrand: boolean
+
+  // Payment form state (internal to form)
+  isCardFormComplete: boolean
+
+  // Add-ons
+  addons: {
+    [addonId: string]: {
+      quantity: number
+      customFields: Record<string, string>
+    }
+  }
+  acceptedConditions: Record<string, boolean>
+
+  // Custom fields
+  customFields: Record<string, string | string[]>
+
+  // Ticket holders information
+  ticketHolders: TicketHolderFormValues[]
+}
+
+export interface CheckoutFormProps {
+  // Form values & state
+  initialValues: CheckoutFormValues
+  eventCurrency?: string
+  isSubmitting: boolean
+  isSinglePageCheckout?: boolean // Whether to show payment form
+  // User state
+  isLoggedIn: boolean
+  isInitialLoading: boolean
+  // Validation props
+  isAgeRequired?: boolean
+  minimumAge?: number
+  isTicketFree?: boolean
+  isPhoneRequired?: boolean
+  isPhoneHidden?: boolean
+
+  // Country & State data
+  countries: Array<{ id: string; name: string }>
+  states: Array<{ label: string; value: string }>
+  onCountryChange: (countryId: string) => void
+
+  // Order data
+  orderItems: IOrderItem[]
+  orderCustomFields?: CustomField[]
+
+  // Ticket data
+  ticketCustomFields?: CustomField[]
+
+  // Add-ons data
+  availableAddons?: AddonItem[]
+  addonCustomFields?: CustomField[]
+  onAddonChange?: (addonId: string, quantity: number) => void
+
+  // Conditions
+  conditions?: Array<{
+    id: string
+    name: string
+    content: string
+    is_required: boolean
+  }>
+
+  // Form handlers
+  onSubmit: (values: CheckoutFormValues) => void | Promise<void>
+
+  scrollRef: React.RefObject<{
+    scrollTo: (options: ScrollViewScrollToOptions) => void
+  } | null>
+  styles?: CheckoutFormStyles
+  texts?: CheckoutFormTexts
+}
+
+export interface CheckoutFormTexts {
+  form?: CheckoutFormFormTexts
+  ticketHolders?: CheckoutFormTicketHolderTexts
+  marketingOptIns?: CheckoutFormMarketingTexts
+  addons?: CheckoutFormAddonTexts
+  orderSummary?: CheckoutFormOrderSummaryTexts
+  payment?: CheckoutFormPaymentTexts
+  buttons?: CheckoutFormButtonTexts
+  conditions?: CheckoutFormConditionsTexts
+}
+
+export interface CheckoutFormFormTexts {
+  sectionTitle?: string
+  firstName?: string
+  firstNamePlaceholder?: string
+  lastName?: string
+  lastNamePlaceholder?: string
+  email?: string
+  emailPlaceholder?: string
+  emailConfirmation?: string
+  emailConfirmationPlaceholder?: string
+  password?: string
+  passwordPlaceholder?: string
+  passwordConfirmation?: string
+  passwordConfirmationPlaceholder?: string
+  phone?: string
+  phonePlaceholder?: string
+  dateOfBirth?: string
+  dateOfBirthPlaceholder?: string
+  street?: string
+  streetPlaceholder?: string
+  city?: string
+  cityPlaceholder?: string
+  country?: string
+  countryPlaceholder?: string
+  state?: string
+  statePlaceholder?: string
+  postalCode?: string
+  postalCodePlaceholder?: string
+  customFields?: Record<string, { label?: string; placeholder?: string }>
+}
+
+export interface CheckoutFormTicketHolderTexts {
+  title?: string
+  itemTitle?: string
+  firstName?: string
+  firstNamePlaceholder?: string
+  lastName?: string
+  lastNamePlaceholder?: string
+  email?: string
+  emailPlaceholder?: string
+  phone?: string
+  phonePlaceholder?: string
+  customFields?: Record<string, { label?: string; placeholder?: string }>
+}
+
+export interface CheckoutFormMarketingTexts {
+  ticketFairyOptIn?: string
+  organizerOptIn?: string
+}
+
+export interface CheckoutFormAddonTexts {
+  title?: string
+  quantityLabel?: string
+  priceWithFeesSuffix?: string
+}
+
+export interface CheckoutFormOrderSummaryTexts {
+  sectionTitle?: string
+}
+
+export interface CheckoutFormPaymentTexts {
+  sectionTitle?: string
+  errorRequired?: string
+}
+
+export interface CheckoutFormButtonTexts {
+  singlePageSubmit?: string
+  goToPayment?: string
+  paymentSubmit?: string
+}
+
+export interface CheckoutFormConditionsTexts {
+  title?: string
+  acceptLabel?: string
+  viewButton?: string
+  hideButton?: string
+}
+
+export interface PaymentFormProps {
+  // Order data
+  orderItems: IOrderItem[]
+  // Form handlers
+  onSubmit: () => void | Promise<void>
+  scrollRef: React.RefObject<{
+    scrollTo: (options: ScrollViewScrollToOptions) => void
+  } | null>
+  styles?: CheckoutFormStyles
+  texts?: CheckoutFormTexts
+
+  // Stripe required data
+  paymentInformation?: UpdateCheckoutResponse['attributes']['additional_payment_information']
+}
+
+export interface CreateFormFieldsOptions {
+  isLoggedIn: CheckoutFormProps['isLoggedIn']
+  isAgeRequired: CheckoutFormProps['isAgeRequired']
+  isPhoneHidden: CheckoutFormProps['isPhoneHidden']
+  isPhoneRequired: CheckoutFormProps['isPhoneRequired']
+  countries: CheckoutFormProps['countries']
+  states: CheckoutFormProps['states']
+  onCountryChange: CheckoutFormProps['onCountryChange']
+  orderCustomFields: CheckoutFormProps['orderCustomFields']
+  availableAddons: CheckoutFormProps['availableAddons']
+  eventCurrency: CheckoutFormProps['eventCurrency']
+  onAddonChange: CheckoutFormProps['onAddonChange']
+  ticketHoldersCount: number
+}