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

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

@@ -1,241 +0,0 @@
-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

@@ -1,133 +0,0 @@
-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

@@ -1,231 +0,0 @@
-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
-}