tf-checkout-react-native 1.0.37 → 1.0.39

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

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

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

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

@@ -0,0 +1,194 @@
+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',
+]