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

package/src/features/checkout-v2/components/Conditions.tsx

@@ -1,144 +0,0 @@
-import React, { useState } from 'react'
-import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
-
-import { Checkbox } from '../../../components'
-import { logger } from '../../../utils/Logger'
-
-export interface Condition {
-  id: string
-  name: string
-  content: string
-  is_required: boolean
-}
-
-interface ConditionsProps {
-  conditions: Condition[]
-  acceptedConditions: Record<string, boolean>
-  onAcceptCondition: (conditionId: string, isAccepted: boolean) => void
-  styles?: {
-    container?: object
-    title?: object
-    conditionButton?: object
-    conditionButtonText?: object
-    checkbox?: object
-    conditionContent?: object
-    expandedContent?: object
-  }
-  texts?: {
-    title?: string
-    viewButton?: string
-    hideButton?: string
-    acceptCheckbox?: string
-  }
-}
-
-const Conditions: React.FC<ConditionsProps> = ({
-  conditions,
-  acceptedConditions,
-  onAcceptCondition,
-  styles: customStyles,
-  texts,
-}) => {
-  // Track which conditions are expanded
-  const [expandedConditions, setExpandedConditions] = useState<Record<string, boolean>>(
-    {}
-  )
-
-  if (!conditions || conditions.length === 0) {
-    return null
-  }
-
-  const toggleCondition = (conditionId: string) => {
-    setExpandedConditions((prev) => ({
-      ...prev,
-      [conditionId]: !prev[conditionId],
-    }))
-    logger.debug('[Conditions] Condition toggled', {
-      conditionId,
-      expanded: !expandedConditions[conditionId],
-    })
-  }
-
-  return (
-    <View style={[styles.container, customStyles?.container]}>
-      <Text style={[styles.title, customStyles?.title]}>
-        {texts?.title || 'Event Conditions'}
-      </Text>
-
-      {conditions.map((condition) => (
-        <View key={condition.id} style={styles.conditionRow}>
-          <TouchableOpacity
-            style={[styles.conditionButton, customStyles?.conditionButton]}
-            onPress={() => toggleCondition(condition.id)}
-          >
-            <Text style={[styles.conditionButtonText, customStyles?.conditionButtonText]}>
-              {condition.name} {condition.is_required ? '*' : ''} (
-              {expandedConditions[condition.id]
-                ? texts?.hideButton || 'Hide'
-                : texts?.viewButton || 'View'}
-              )
-            </Text>
-          </TouchableOpacity>
-
-          {expandedConditions[condition.id] && (
-            <ScrollView
-              style={[styles.expandedContent, customStyles?.expandedContent]}
-              nestedScrollEnabled={true}
-            >
-              <Text style={[styles.conditionContent, customStyles?.conditionContent]}>
-                {condition.content}
-              </Text>
-            </ScrollView>
-          )}
-
-          {condition.is_required && (
-            <Checkbox
-              isActive={!!acceptedConditions[condition.id]}
-              onPress={() =>
-                onAcceptCondition(condition.id, !acceptedConditions[condition.id])
-              }
-              styles={customStyles?.checkbox}
-              text={texts?.acceptCheckbox || 'I have read and accept these conditions'}
-            />
-          )}
-        </View>
-      ))}
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    marginBottom: 20,
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    marginBottom: 10,
-  },
-  conditionRow: {
-    marginBottom: 15,
-  },
-  conditionButton: {
-    padding: 8,
-    backgroundColor: '#f5f5f5',
-    borderRadius: 4,
-    marginBottom: 5,
-  },
-  conditionButtonText: {
-    color: '#007bff',
-  },
-  expandedContent: {
-    backgroundColor: '#f9f9f9',
-    padding: 15,
-    borderRadius: 4,
-    marginBottom: 10,
-    maxHeight: 150,
-  },
-  conditionContent: {
-    fontSize: 14,
-    lineHeight: 20,
-  },
-})
-
-export default Conditions

package/src/features/checkout-v2/components/OrderReview.tsx

@@ -1,96 +0,0 @@
-import _map from 'lodash/map'
-import React from 'react'
-import { StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-native'
-import { logger } from '../../../utils/Logger'
-
-export interface IOrderItem {
-  id: string
-  title: string
-  subtitle?: string
-  value: string
-  styles?: OrderReviewItemStyles
-}
-
-export interface OrderReviewItemStyles {
-  container?: StyleProp<ViewStyle>
-  title?: StyleProp<TextStyle>
-  subtitle?: StyleProp<TextStyle>
-  value?: StyleProp<TextStyle>
-}
-
-export interface OrderReviewStyles {
-  item?: OrderReviewItemStyles
-  rootContainer?: StyleProp<ViewStyle>
-}
-
-export interface IOrderReviewProps {
-  orderItems: IOrderItem[]
-  styles?: OrderReviewStyles
-}
-
-const styles = StyleSheet.create({
-  rootContainer: {
-    flex: 1,
-    flexWrap: 'wrap',
-  },
-  orderItemContainer: {
-    paddingVertical: 4,
-    width: '100%',
-  },
-  orderItemTitle: {
-    fontWeight: '800',
-    fontSize: 16,
-  },
-  orderItemValue: {
-    lineHeight: 20,
-  },
-  orderItemSubtitle: {
-    fontSize: 12,
-    color: '#666',
-    marginBottom: 4,
-  },
-})
-
-const OrderItem = ({ title, subtitle, value, styles: itemStyles }: IOrderItem) => (
-  <View
-    style={[styles.orderItemContainer, itemStyles?.container]}
-    key={`orderReview.${title}`}
-  >
-    <Text style={[styles.orderItemTitle, itemStyles?.title]}>{title}</Text>
-    {subtitle && (
-      <Text
-        style={[styles.orderItemSubtitle, itemStyles?.subtitle]}
-        allowFontScaling={true}
-      >
-        {subtitle}
-      </Text>
-    )}
-    <Text style={[styles.orderItemValue, itemStyles?.value]} allowFontScaling={true}>
-      {value}
-    </Text>
-  </View>
-)
-
-const OrderReview = ({ orderItems, styles: customStyles }: IOrderReviewProps) => {
-  return (
-    <View style={[styles.rootContainer, customStyles?.rootContainer]}>
-      {_map(orderItems, (item) => (
-        <OrderItem
-          key={`orderReview.${item.id}`}
-          id={item.id}
-          title={item.title}
-          subtitle={item.subtitle}
-          value={item.value}
-          styles={{
-            container: customStyles?.item?.container ?? item.styles?.container,
-            title: customStyles?.item?.title ?? item.styles?.title,
-            subtitle: customStyles?.item?.subtitle ?? item.styles?.subtitle,
-            value: customStyles?.item?.value ?? item.styles?.value,
-          }}
-        />
-      ))}
-    </View>
-  )
-}
-
-export default OrderReview

package/src/features/checkout-v2/components/TicketHoldersSection.tsx

@@ -1,131 +0,0 @@
-import { FormikErrors } from 'formik'
-import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-
-import { FormField, PhoneInput } from '../../../components'
-import { logger } from '../../../utils/Logger'
-import { TicketHolderFormValues } from '../form/types'
-
-interface TicketHoldersSectionProps {
-  ticketHolders: TicketHolderFormValues[]
-  onChange: (index: number, field: keyof TicketHolderFormValues, value: string) => void
-  errors?: FormikErrors<TicketHolderFormValues>[]
-  touched?: Array<Partial<Record<keyof TicketHolderFormValues, boolean>>>
-  onFieldBlur?: (index: number, field: keyof TicketHolderFormValues) => void
-  isPhoneHidden?: boolean
-}
-
-export const TicketHoldersSection: React.FC<TicketHoldersSectionProps> = ({
-  ticketHolders,
-  onChange,
-  errors,
-  touched,
-  onFieldBlur,
-  isPhoneHidden = false,
-}) => {
-  return (
-    <View style={styles.container}>
-      <FormField fieldType="title" title="Ticket Holders Information" />
-      <FormField fieldType="text" title="Please provide details for each ticket holder" />
-
-      {ticketHolders.map((holder, index) => {
-        const errorFields = errors ? errors[index] : {}
-        const touchedFields = touched ? touched[index] : {}
-
-        return (
-          <View key={`ticket-holder-${index + 1}`} style={styles.ticketHolderContainer}>
-            <Text style={styles.ticketHolderTitle}>Ticket {index + 1}</Text>
-
-            <View style={styles.formGroup}>
-              <FormField
-                fieldType="input"
-                id={`firstName-${index}`}
-                error={touchedFields?.firstName ? errorFields?.firstName : undefined}
-                inputProps={{
-                  label: 'First Name *',
-                  value: holder.firstName,
-                  onTextChanged: (key, value) => onChange(index, 'firstName', value),
-                  onBlur: () => onFieldBlur?.(index, 'firstName'),
-                  placeholder: 'Enter first name',
-                }}
-              />
-            </View>
-
-            <View style={styles.formGroup}>
-              <FormField
-                fieldType="input"
-                id={`lastName-${index}`}
-                error={touchedFields?.lastName ? errorFields?.lastName : undefined}
-                inputProps={{
-                  label: 'Last Name *',
-                  value: holder.lastName,
-                  onTextChanged: (key, value) => onChange(index, 'lastName', value),
-                  onBlur: () => onFieldBlur?.(index, 'lastName'),
-                  placeholder: 'Enter last name',
-                }}
-              />
-            </View>
-
-            <View style={styles.formGroup}>
-              <FormField
-                fieldType="input"
-                id={`email-${index}`}
-                error={touchedFields?.email ? errorFields?.email : undefined}
-                inputProps={{
-                  label: 'Email',
-                  value: holder.email,
-                  onTextChanged: (key, value) => onChange(index, 'email', value),
-                  onBlur: () => onFieldBlur?.(index, 'email'),
-                  placeholder: 'Enter email address',
-                  keyboardType: 'email-address',
-                }}
-              />
-            </View>
-
-            {!isPhoneHidden && (
-              <View style={styles.formGroup}>
-                <PhoneInput
-                  phoneNumber={holder.phone}
-                  onChangePhoneNumber={(payload) => {
-                    onChange(index, 'phone', payload.input)
-                  }}
-                  error={touchedFields?.phone ? errorFields?.phone : undefined}
-                  texts={{
-                    label: 'Phone Number',
-                  }}
-                />
-              </View>
-            )}
-
-            <View style={styles.divider} />
-          </View>
-        )
-      })}
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    marginVertical: 16,
-  },
-  ticketHolderContainer: {
-    marginTop: 16,
-    marginBottom: 8,
-  },
-  formGroup: {
-    marginBottom: 8,
-  },
-  ticketHolderTitle: {
-    fontSize: 16,
-    fontWeight: '600',
-    marginBottom: 16,
-  },
-  divider: {
-    height: 1,
-    backgroundColor: '#E1E1E1',
-    marginTop: 16,
-  },
-})
-
-export default TicketHoldersSection

package/src/features/checkout-v2/form/config.tsx

@@ -1,194 +0,0 @@
-import * as Yup from 'yup'
-
-import { CustomField } from '../../event/types'
-
-export const createCheckoutFormConfig = ({
-  minimumAge,
-  isAgeRequired,
-  requirePassword,
-  isTicketFree = false,
-  requiredConditions = [],
-  isPhoneRequired = false,
-  orderCustomFields = [],
-  ticketCustomFields = [],
-}: {
-  minimumAge?: number
-  isAgeRequired: boolean
-  requirePassword: boolean
-  isTicketFree?: boolean
-  isSinglePageCheckout?: boolean
-  requiredConditions?: Array<{ id: string }>
-  isPhoneRequired?: boolean
-  orderCustomFields?: CustomField[]
-  ticketCustomFields?: CustomField[]
-}) =>
-  Yup.object().shape({
-    firstName: Yup.string().required('First name is required'),
-    lastName: Yup.string().required('Last name is required'),
-    email: Yup.string().email('Invalid email format').required('Email is required'),
-    emailConfirmation: Yup.string()
-      .oneOf([Yup.ref('email')], 'Emails must match')
-      .required('Email confirmation is required'),
-    dateOfBirth: isAgeRequired
-      ? Yup.date()
-          .required('Date of birth is required')
-          .test(
-            'is-old-enough',
-            `You must be at least ${minimumAge} years old`,
-            (value) => {
-              if (!value) return false
-
-              const today = new Date()
-              const birthDate = new Date(value)
-
-              let age = today.getFullYear() - birthDate.getFullYear()
-              const monthDiff = today.getMonth() - birthDate.getMonth()
-
-              // Adjust age if birthday hasn't occurred this year yet
-              if (
-                monthDiff < 0 ||
-                (monthDiff === 0 && today.getDate() < birthDate.getDate())
-              ) {
-                age--
-              }
-
-              return age >= (minimumAge || 0)
-            }
-          )
-      : Yup.date().optional(),
-    street: isTicketFree
-      ? Yup.string()
-      : Yup.string().required('Street address is required'),
-    city: isTicketFree ? Yup.string() : Yup.string().required('City is required'),
-    postalCode: isTicketFree
-      ? Yup.string()
-      : Yup.string().required('Postal code is required'),
-    password: requirePassword
-      ? Yup.string().required('Password is required')
-      : Yup.string(),
-    passwordConfirmation: requirePassword
-      ? Yup.string()
-          .oneOf([Yup.ref('password')], 'Passwords must match')
-          .required('Password confirmation is required')
-      : Yup.string().oneOf([Yup.ref('password')], 'Passwords must match'),
-    phone: isPhoneRequired
-      ? Yup.string().required('Phone number is required')
-      : Yup.string().optional(),
-    isSubToTicketFairy: Yup.boolean(),
-    isSubToBrand: Yup.boolean(),
-    country: isTicketFree
-      ? Yup.string()
-      : Yup.string().test(
-          'is-not-default',
-          'Country is required',
-          (value) => value !== '-1' && !!value
-        ),
-    state: Yup.string(),
-    acceptedConditions: Yup.object().test(
-      'required-conditions-accepted',
-      'You must accept all required conditions to proceed',
-      (value) => {
-        // If no required conditions, skip validation
-        if (!requiredConditions || requiredConditions.length === 0) {
-          return true
-        }
-
-        // Check that all required conditions are accepted
-        return requiredConditions.every(
-          (condition) => value && value[condition.id as keyof typeof value] === true
-        )
-      }
-    ),
-
-    // Ticket holders validation
-    ticketHolders: Yup.array().of(
-      Yup.object().shape({
-        firstName: Yup.string().required('First name is required'),
-        lastName: Yup.string().required('Last name is required'),
-        email: Yup.string().email('Invalid email format'), // Email not required
-        phone: Yup.string().optional(),
-        customFields: Yup.object().test(
-          'validate-ticket-custom-fields',
-          'Please fill out all required ticket fields',
-          (value: Record<string, string | string[]> | undefined) => {
-            // If no ticket custom fields, validation passes
-            if (!ticketCustomFields || ticketCustomFields.length === 0) {
-              return true
-            }
-
-            // Find required fields
-            const requiredFields = ticketCustomFields.filter((field) => field.required)
-
-            // If no required fields, validation passes
-            if (requiredFields.length === 0) {
-              return true
-            }
-
-            // Check that all required fields have values
-            return requiredFields.every((field) => {
-              const fieldValue = value?.[field.name]
-
-              // For arrays (multi-select), check that there's at least one item
-              if (Array.isArray(fieldValue)) {
-                return fieldValue.length > 0
-              }
-
-              // For strings, check that it's not empty
-              return fieldValue !== undefined && fieldValue !== ''
-            })
-          }
-        ),
-      })
-    ),
-
-    // Custom fields validation
-    customFields: Yup.object().test(
-      'validate-custom-fields',
-      'Please fill out all required custom fields',
-      (value: Record<string, string | string[]> | undefined) => {
-        // If no custom fields, validation passes
-        if (!orderCustomFields || orderCustomFields.length === 0) {
-          return true
-        }
-
-        // Find required fields
-        const requiredFields = orderCustomFields.filter((field) => field.required)
-
-        // If no required fields, validation passes
-        if (requiredFields.length === 0) {
-          return true
-        }
-
-        // Check that all required fields have values
-        return requiredFields.every((field) => {
-          const fieldValue = value?.[field.name]
-
-          // For arrays (multi-select), check that there's at least one item
-          if (Array.isArray(fieldValue)) {
-            return fieldValue.length > 0
-          }
-
-          // For strings, check that it's not empty
-          return fieldValue !== undefined && fieldValue !== ''
-        })
-      }
-    ),
-  })
-
-export const formFieldsOrder = [
-  'firstName',
-  'lastName',
-  'email',
-  'emailConfirmation',
-  'password',
-  'passwordConfirmation',
-  'phone',
-  'dateOfBirth',
-  'street',
-  'city',
-  'country',
-  'postalCode',
-  'state',
-  'ticketHolders',
-  'isCardFormComplete',
-]