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

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

@@ -1,830 +0,0 @@
-import { CardForm, CardFormView } from '@stripe/stripe-react-native'
-import { FormikProvider, useFormik } from 'formik'
-import React, { ComponentRef, useCallback, useMemo, useRef, useState } from 'react'
-import {
-  ActivityIndicator,
-  findNodeHandle,
-  Text,
-  TouchableOpacity,
-  View,
-  ViewProps,
-} from 'react-native'
-
-import { Loading } from '../../../components'
-import { logger } from '../../../utils/Logger'
-import { readableError } from '../../../utils/handlers'
-import { FormikField } from '../../form'
-import { FieldType } from '../../form/types'
-import AddonsContainer from '../components/AddonsContainer'
-import Conditions from '../components/Conditions'
-import OrderReview, { IOrderItem } from '../components/OrderReview'
-import { createCheckoutFormConfig, formFieldsOrder } from './config'
-import { CheckoutFormComputedStyles, mergeCheckoutFormStyles } from './styles'
-import { mergeCheckoutFormTexts } from './texts'
-import {
-  CheckoutFormOrderSummaryTexts,
-  CheckoutFormPaymentTexts,
-  CheckoutFormProps,
-  CheckoutFormTexts,
-  PaymentFormProps,
-} from './types'
-import { getFieldType } from '../utils'
-
-const MemoizedAddonsContainer = React.memo(AddonsContainer)
-const MemoizedConditions = React.memo(Conditions)
-const MemoizedOrderReview = React.memo(OrderReview)
-
-export const CheckoutForm: React.FC<CheckoutFormProps> = ({
-  initialValues,
-  isSubmitting,
-  isLoggedIn,
-  isAgeRequired = false,
-  minimumAge,
-  isTicketFree = false,
-  isPhoneRequired = false,
-  isPhoneHidden = false,
-  countries,
-  states,
-  onCountryChange,
-  orderItems,
-  availableAddons = [],
-  onAddonChange,
-  onSubmit: onSubmitCallback,
-  scrollRef,
-  isInitialLoading,
-  eventCurrency,
-  conditions,
-  isSinglePageCheckout = true,
-  orderCustomFields = [],
-  ticketCustomFields = [],
-  addonCustomFields = [],
-  styles: stylesProp,
-  texts: textsProp,
-}) => {
-  // Handle card form state for payment
-  const [isCardFormComplete, setIsCardFormComplete] = useState(false)
-  const [cardFormError, setCardFormError] = useState<string>()
-
-  const styles = useMemo<CheckoutFormComputedStyles>(
-    () => mergeCheckoutFormStyles(stylesProp),
-    [stylesProp]
-  )
-
-  const texts = useMemo<Required<CheckoutFormTexts>>(
-    () => mergeCheckoutFormTexts(textsProp),
-    [textsProp]
-  )
-
-  const fieldComponentStyles = styles.fields
-
-  const addonsStyles = useMemo(
-    () => ({
-      container: styles.addonSection,
-      title: styles.sectionTitle,
-      addonItem: styles.addonItem,
-      addonInfo: styles.addonInfo,
-      addonName: styles.addonName,
-      addonRow: styles.addonRow,
-      addonPrice: styles.addonPrice,
-      addonPriceWithFees: styles.addonPriceWithFees,
-      addonDescription: styles.addonDescription,
-      addonSelectContainer: styles.addonSelectContainer,
-      fieldComponentStyles,
-    }),
-    [fieldComponentStyles, styles]
-  )
-
-  // Initial values already include default custom field values from the hook
-  const modifiedInitialValues = {
-    ...initialValues,
-    isCardFormComplete: isTicketFree ? true : initialValues.isCardFormComplete,
-  }
-  const requiredConditions = useMemo(
-    () => conditions?.filter((c) => c.is_required) || [],
-    [conditions]
-  )
-
-  const formik = useFormik({
-    initialValues: modifiedInitialValues,
-    onSubmit: onSubmitCallback,
-    validationSchema: createCheckoutFormConfig({
-      minimumAge,
-      isAgeRequired,
-      requirePassword: !isLoggedIn,
-      isTicketFree,
-      isSinglePageCheckout,
-      requiredConditions,
-      isPhoneRequired,
-      orderCustomFields,
-      ticketCustomFields,
-    }),
-    validateOnChange: true,
-    enableReinitialize: true,
-  })
-  const fieldTopRef = useRef<Record<string, number>>({})
-
-  // Helper: scroll to a field by key using onLayout-captured positions
-  const scrollToField = (key: string, attempt: number = 0) => {
-    if (key === 'isCardFormComplete' || !scrollRef.current) return
-
-    let y = fieldTopRef.current[key]
-
-    // Fallback for nested ticket holder fields
-    if (
-      !(typeof y === 'number' && Number.isFinite(y)) &&
-      key.startsWith('ticketHolders[')
-    ) {
-      const holderMatch = key.match(/^ticketHolders\[(\d+)\]/)
-      const index = holderMatch ? holderMatch[1] : undefined
-      if (index != null) {
-        const holderKey = `ticketHolders[${index}]`
-        y = fieldTopRef.current[holderKey]
-        if (!(typeof y === 'number' && Number.isFinite(y))) {
-          y = fieldTopRef.current.ticketHolders
-        }
-      }
-    }
-
-    if (typeof y === 'number' && Number.isFinite(y)) {
-      try {
-        scrollRef.current.scrollTo({ y: Math.max(0, y - 16), animated: true })
-        logger.debug('[CheckoutForm] Scrolled to field', { key, position: y })
-      } catch (e) {
-        logger.debug('[CheckoutForm] scrollTo failed', {
-          key,
-          error: e instanceof Error ? e.message : String(e),
-        })
-      }
-    } else if (attempt < 3) {
-      setTimeout(() => scrollToField(key, attempt + 1), 50)
-    } else {
-      logger.warn('[CheckoutForm] Could not scroll to field - position not found', {
-        key,
-      })
-    }
-  }
-
-  const onPressSubmit = async () => {
-    logger.debug('[CheckoutForm] Form submission initiated')
-    const allFields = Object.keys(initialValues)
-
-    // Create touched fields with special handling for nested ticket holders
-    const touchedFields = allFields.reduce(
-      (acc, field) => {
-        // Handle ticketHolders specially as a nested structure
-        if (field === 'ticketHolders') {
-          // Create a properly structured touched fields object for ticket holders
-          acc[field] = formik.values.ticketHolders.map(() => ({
-            firstName: true,
-            lastName: true,
-            email: true,
-            phone: true,
-          }))
-        } else {
-          // Mark all other fields as touched
-          acc[field] = true
-        }
-        return acc
-      },
-      {} as Record<string, boolean | Record<string, boolean>[]>
-    )
-
-    const result = await formik.setTouched(touchedFields, true)
-    const formErrors = typeof result === 'object' ? result : {}
-    const paymentValid = isCardFormComplete || isTicketFree || !isSinglePageCheckout
-    logger.debug('[CheckoutForm] submitting', {
-      paymentValid,
-      isCardFormComplete,
-      isTicketFree,
-      isSinglePageCheckout,
-    })
-
-    if (!paymentValid) {
-      setCardFormError(texts.payment.errorRequired)
-    }
-
-    if (Object.keys(formErrors).length === 0 && paymentValid) {
-      logger.debug('[CheckoutForm] Form validation passed, submitting', {
-        email: formik.values.email,
-      })
-      formik.handleSubmit()
-      return
-    }
-    logger.warn('[CheckoutForm] Form validation failed', {
-      errors: Object.keys(formErrors),
-      paymentValid,
-    })
-
-    const firstErroredKey = formFieldsOrder.find(
-      (k) => (formErrors as any)[k as keyof typeof formErrors] != null
-    )
-
-    if (firstErroredKey === 'ticketHolders') {
-      const thErrors = (formErrors as any).ticketHolders as Array<any>
-      if (Array.isArray(thErrors)) {
-        const erroredIndex = thErrors.findIndex((e) => e && Object.keys(e).length > 0)
-        if (erroredIndex >= 0) {
-          scrollToField(`ticketHolders[${erroredIndex}]`)
-          logger.debug('[CheckoutForm] Scrolling to errored ticket holder', {
-            index: erroredIndex,
-          })
-          return
-        }
-      }
-      scrollToField('ticketHolders')
-    } else if (firstErroredKey) {
-      scrollToField(firstErroredKey)
-    } else if (!paymentValid) {
-      scrollToField('isCardFormComplete')
-    }
-  }
-
-  const handleAddonChange = useCallback(
-    (addonId: string, quantity: number) => {
-      formik.setFieldValue(`addons.${addonId}.quantity`, quantity)
-      if (quantity > 0) {
-        // reapply defaults if coming from 0
-        addonCustomFields.forEach((field) => {
-          if (field.defaultValue != null) {
-            formik.setFieldValue(
-              `addons.${addonId}.customFields.${field.name}`,
-              Array.isArray(field.defaultValue)
-                ? field.defaultValue.join(',')
-                : field.defaultValue
-            )
-          }
-        })
-      }
-      onAddonChange?.(addonId, quantity)
-    },
-    [formik, onAddonChange]
-  )
-  return (
-    <FormikProvider value={formik}>
-      {isInitialLoading && <Loading />}
-      <View style={styles.form} collapsable={false}>
-        <View onLayout={(e) => (fieldTopRef.current.firstName = e.nativeEvent.layout.y)}>
-          <FormikField
-            field={{
-              name: 'firstName',
-              type: FieldType.INPUT,
-              label: texts.form.firstName,
-              placeholder: texts.form.firstNamePlaceholder,
-            }}
-            styles={fieldComponentStyles}
-          />
-        </View>
-        <View onLayout={(e) => (fieldTopRef.current.lastName = e.nativeEvent.layout.y)}>
-          <FormikField
-            field={{
-              name: 'lastName',
-              type: FieldType.INPUT,
-              label: texts.form.lastName,
-              placeholder: texts.form.lastNamePlaceholder,
-            }}
-            styles={fieldComponentStyles}
-          />
-        </View>
-        <View onLayout={(e) => (fieldTopRef.current.email = e.nativeEvent.layout.y)}>
-          <FormikField
-            field={{
-              name: 'email',
-              type: FieldType.INPUT,
-              label: texts.form.email,
-              placeholder: texts.form.emailPlaceholder,
-            }}
-            styles={fieldComponentStyles}
-          />
-        </View>
-        <View
-          onLayout={(e) =>
-            (fieldTopRef.current.emailConfirmation = e.nativeEvent.layout.y)
-          }
-        >
-          <FormikField
-            field={{
-              name: 'emailConfirmation',
-              type: FieldType.INPUT,
-              label: texts.form.emailConfirmation,
-              placeholder: texts.form.emailConfirmationPlaceholder,
-            }}
-            styles={fieldComponentStyles}
-          />
-        </View>
-        <View onLayout={(e) => (fieldTopRef.current.password = e.nativeEvent.layout.y)}>
-          <FormikField
-            field={{
-              name: 'password',
-              type: FieldType.INPUT,
-              label: texts.form.password,
-              placeholder: texts.form.passwordPlaceholder,
-              hide: isLoggedIn,
-            }}
-            styles={fieldComponentStyles}
-          />
-        </View>
-        <View
-          onLayout={(e) =>
-            (fieldTopRef.current.passwordConfirmation = e.nativeEvent.layout.y)
-          }
-        >
-          <FormikField
-            field={{
-              name: 'passwordConfirmation',
-              type: FieldType.INPUT,
-              label: texts.form.passwordConfirmation,
-              placeholder: texts.form.passwordConfirmationPlaceholder,
-              hide: isLoggedIn,
-            }}
-            styles={fieldComponentStyles}
-          />
-        </View>
-        <View onLayout={(e) => (fieldTopRef.current.phone = e.nativeEvent.layout.y)}>
-          <FormikField
-            field={{
-              name: 'phone',
-              type: FieldType.PHONE,
-              label: texts.form.phone,
-              placeholder: texts.form.phonePlaceholder,
-            }}
-            styles={fieldComponentStyles}
-          />
-        </View>
-        <View onLayout={(e) => (fieldTopRef.current.phone = e.nativeEvent.layout.y)}>
-          <FormikField
-            field={{
-              name: 'dateOfBirth',
-              type: FieldType.DATE_PICKER,
-              label: texts.form.dateOfBirth,
-              placeholder: texts.form.dateOfBirthPlaceholder,
-              hide: !isAgeRequired,
-            }}
-            styles={fieldComponentStyles}
-          />
-        </View>
-        <View
-          onLayout={(e) => (fieldTopRef.current.dateOfBirth = e.nativeEvent.layout.y)}
-        >
-          <FormikField
-            field={{
-              name: 'street',
-              type: FieldType.INPUT,
-              label: texts.form.street,
-              placeholder: texts.form.streetPlaceholder,
-            }}
-            styles={fieldComponentStyles}
-          />
-        </View>
-        <View onLayout={(e) => (fieldTopRef.current.street = e.nativeEvent.layout.y)}>
-          <FormikField
-            field={{
-              name: 'city',
-              type: FieldType.INPUT,
-              label: texts.form.city,
-              placeholder: texts.form.cityPlaceholder,
-            }}
-            styles={fieldComponentStyles}
-          />
-        </View>
-        <View onLayout={(e) => (fieldTopRef.current.country = e.nativeEvent.layout.y)}>
-          <FormikField
-            field={{
-              name: 'country',
-              type: FieldType.SELECT,
-              label: texts.form.country,
-              options: countries.map((c) => ({
-                value: String(c.id),
-                label: c.name,
-              })),
-              onChange: (val) => {
-                onCountryChange(val)
-              },
-            }}
-            styles={fieldComponentStyles}
-          />
-        </View>
-        <View onLayout={(e) => (fieldTopRef.current.country = e.nativeEvent.layout.y)}>
-          <FormikField
-            field={{
-              name: 'state',
-              type: FieldType.SELECT,
-              label: texts.form.state,
-              options: states,
-            }}
-            styles={fieldComponentStyles}
-          />
-        </View>
-        <View onLayout={(e) => (fieldTopRef.current.postalCode = e.nativeEvent.layout.y)}>
-          <FormikField
-            field={{
-              name: 'postalCode',
-              type: FieldType.INPUT,
-              label: texts.form.postalCode,
-              placeholder: texts.form.postalCodePlaceholder,
-            }}
-            styles={fieldComponentStyles}
-          />
-        </View>
-        {orderCustomFields.map((field) => (
-          <View
-            key={field.name}
-            onLayout={(e) => (fieldTopRef.current[field.name] = e.nativeEvent.layout.y)}
-          >
-            <FormikField
-              field={{
-                name: `customFields.${field.name}`,
-                type: getFieldType(field.type),
-                label: texts.form.customFields?.[field.name]?.label ?? field.label,
-                placeholder:
-                  texts.form.customFields?.[field.name]?.placeholder ??
-                  (field.description || `Enter ${field.label}`),
-                options: field.options?.map((option) => ({
-                  value: option.value,
-                  label: option.name,
-                })),
-              }}
-              styles={fieldComponentStyles}
-            />
-          </View>
-        ))}
-        <View>
-          <FormikField
-            field={{
-              name: 'isSubToTicketFairy',
-              type: FieldType.CHECKBOX,
-              label: texts.marketingOptIns.ticketFairyOptIn,
-            }}
-            styles={fieldComponentStyles}
-          />
-          <FormikField
-            field={{
-              name: 'isSubToBrand',
-              type: FieldType.CHECKBOX,
-              label: texts.marketingOptIns.organizerOptIn,
-            }}
-            styles={fieldComponentStyles}
-          />
-        </View>
-        <View
-          collapsable={false}
-          onLayout={(e) => {
-            fieldTopRef.current.ticketHolders = e.nativeEvent.layout.y
-          }}
-        >
-          <Text style={styles.sectionTitle}>{texts.ticketHolders.title}</Text>
-
-          {formik.values.ticketHolders.map((_, index) => {
-            const ticketLabel = (
-              texts.ticketHolders.itemTitle || 'Ticket {index}'
-            ).replace('{index}', String(index + 1))
-
-            return (
-              <View
-                key={index}
-                collapsable={false}
-                onLayout={(e) => {
-                  const sectionY = fieldTopRef.current.ticketHolders ?? 0
-                  const holderY = sectionY + e.nativeEvent.layout.y
-                  fieldTopRef.current[`ticketHolders[${index}]`] = holderY
-                }}
-              >
-                <Text style={styles.ticketHolderTitle}>{ticketLabel}</Text>
-
-                <View
-                  collapsable={false}
-                  onLayout={(e) => {
-                    const baseY =
-                      fieldTopRef.current[`ticketHolders[${index}]`] ??
-                      fieldTopRef.current.ticketHolders ??
-                      0
-                    fieldTopRef.current[`ticketHolders[${index}].firstName`] =
-                      baseY + e.nativeEvent.layout.y
-                  }}
-                >
-                  <FormikField
-                    field={{
-                      name: `ticketHolders[${index}].firstName`,
-                      type: FieldType.INPUT,
-                      label: texts.ticketHolders.firstName,
-                      placeholder: texts.ticketHolders.firstNamePlaceholder,
-                    }}
-                    styles={fieldComponentStyles}
-                  />
-                </View>
-
-                <View
-                  collapsable={false}
-                  onLayout={(e) => {
-                    const baseY =
-                      fieldTopRef.current[`ticketHolders[${index}]`] ??
-                      fieldTopRef.current.ticketHolders ??
-                      0
-                    fieldTopRef.current[`ticketHolders[${index}].lastName`] =
-                      baseY + e.nativeEvent.layout.y
-                  }}
-                >
-                  <FormikField
-                    field={{
-                      name: `ticketHolders[${index}].lastName`,
-                      type: FieldType.INPUT,
-                      label: texts.ticketHolders.lastName,
-                      placeholder: texts.ticketHolders.lastNamePlaceholder,
-                    }}
-                    styles={fieldComponentStyles}
-                  />
-                </View>
-
-                <View
-                  collapsable={false}
-                  onLayout={(e) => {
-                    const baseY =
-                      fieldTopRef.current[`ticketHolders[${index}]`] ??
-                      fieldTopRef.current.ticketHolders ??
-                      0
-                    fieldTopRef.current[`ticketHolders[${index}].email`] =
-                      baseY + e.nativeEvent.layout.y
-                  }}
-                >
-                  <FormikField
-                    field={{
-                      name: `ticketHolders[${index}].email`,
-                      type: FieldType.INPUT,
-                      label: texts.ticketHolders.email,
-                      placeholder: texts.ticketHolders.emailPlaceholder,
-                    }}
-                    styles={fieldComponentStyles}
-                  />
-                </View>
-
-                <View
-                  collapsable={false}
-                  onLayout={(e) => {
-                    const baseY =
-                      fieldTopRef.current[`ticketHolders[${index}]`] ??
-                      fieldTopRef.current.ticketHolders ??
-                      0
-                    fieldTopRef.current[`ticketHolders[${index}].phone`] =
-                      baseY + e.nativeEvent.layout.y
-                  }}
-                >
-                  <FormikField
-                    field={{
-                      name: `ticketHolders[${index}].phone`,
-                      type: FieldType.PHONE,
-                      label: texts.ticketHolders.phone,
-                      placeholder: texts.ticketHolders.phonePlaceholder,
-                      hide: isPhoneHidden,
-                    }}
-                    styles={fieldComponentStyles}
-                  />
-
-                  {/* Ticket custom fields */}
-                  {ticketCustomFields.map((field) => (
-                    <FormikField
-                      key={`${index}-${field.name}`}
-                      field={{
-                        name: `ticketHolders[${index}].customFields.${field.name}`,
-                        type: getFieldType(field.type),
-                        label:
-                          texts.ticketHolders.customFields?.[field.name]?.label ??
-                          field.label,
-                        required: field.required,
-                        placeholder:
-                          texts.ticketHolders.customFields?.[field.name]?.placeholder ??
-                          (field.description || `Enter ${field.label}`),
-                        options: field.options?.map((option) => ({
-                          value: option.value,
-                          label: option.name,
-                        })),
-                      }}
-                      styles={fieldComponentStyles}
-                    />
-                  ))}
-                </View>
-              </View>
-            )
-          })}
-        </View>
-        <View style={styles.sectionContainer}>
-          <MemoizedAddonsContainer
-            addonCustomFields={addonCustomFields}
-            addons={formik.values.addons}
-            availableAddons={availableAddons || []}
-            onAddonChange={handleAddonChange}
-            currency={eventCurrency}
-            styles={addonsStyles}
-            texts={{
-              title: texts.addons.title,
-              quantityLabel: texts.addons.quantityLabel,
-              priceWithFeesSuffix: texts.addons.priceWithFeesSuffix,
-            }}
-          />
-        </View>
-        {/* Event Conditions */}
-        {conditions && conditions.length > 0 && (
-          <View style={styles.sectionContainer}>
-            <MemoizedConditions
-              conditions={conditions}
-              acceptedConditions={formik.values.acceptedConditions}
-              onAcceptCondition={(conditionId, isAccepted) => {
-                formik.setFieldValue('acceptedConditions', {
-                  ...formik.values.acceptedConditions,
-                  [conditionId]: isAccepted,
-                })
-              }}
-              texts={{
-                title: texts.conditions.title,
-                viewButton: texts.conditions.viewButton,
-                hideButton: texts.conditions.hideButton,
-                acceptCheckbox: texts.conditions.acceptLabel,
-              }}
-            />
-          </View>
-        )}
-
-        {/* Payment - only show in single-page mode and if ticket is not free */}
-        {!isTicketFree && isSinglePageCheckout && (
-          <View
-            style={styles.sectionContainer}
-            onLayout={(e) =>
-              (fieldTopRef.current.isCardFormComplete = e.nativeEvent.layout.y)
-            }
-          >
-            <Payment
-              orderItems={orderItems}
-              onFormComplete={(details) => {
-                logger.debug('[CheckoutForm] Payment form complete', { ...details })
-                if (details.complete) {
-                  setCardFormError(undefined)
-                }
-                setIsCardFormComplete(details.complete)
-              }}
-              error={cardFormError}
-              styles={styles}
-              texts={{
-                orderSummary: texts.orderSummary,
-                payment: texts.payment,
-              }}
-            />
-          </View>
-        )}
-
-        {/* Submit Button */}
-        <TouchableOpacity
-          style={[styles.button, isSubmitting ? styles.buttonDisabled : {}]}
-          onPress={onPressSubmit}
-          disabled={isSubmitting}
-        >
-          {isSubmitting ? (
-            <ActivityIndicator size="small" color="#ffffff" />
-          ) : (
-            <Text style={styles.buttonText}>
-              {isSinglePageCheckout
-                ? texts.buttons.singlePageSubmit
-                : texts.buttons.goToPayment}
-            </Text>
-          )}
-        </TouchableOpacity>
-      </View>
-    </FormikProvider>
-  )
-}
-
-interface PaymentProps {
-  onFormComplete: (details: CardFormView.Details) => void
-  error?: string
-  orderItems: IOrderItem[]
-  paymentViewProps?: ViewProps
-  styles: CheckoutFormComputedStyles
-  texts: {
-    orderSummary: CheckoutFormOrderSummaryTexts
-    payment: CheckoutFormPaymentTexts
-  }
-}
-
-export const Payment = ({
-  onFormComplete,
-  error,
-  orderItems,
-  paymentViewProps,
-  styles,
-  texts,
-}: PaymentProps) => {
-  return (
-    <View>
-      <View style={styles.sectionContainer}>
-        <Text style={styles.sectionTitle}>{texts.orderSummary.sectionTitle}</Text>
-        <MemoizedOrderReview
-          orderItems={orderItems}
-          styles={{
-            rootContainer: styles.orderReviewContainer,
-            item: styles.orderReviewItem,
-          }}
-        />
-      </View>
-
-      <View style={styles.sectionContainer} {...paymentViewProps}>
-        <Text style={styles.sectionTitle}>{texts.payment.sectionTitle}</Text>
-        <View style={styles.paymentContainer}>
-          <CardForm
-            onFormComplete={(details) => {
-              logger.warn('[PaymentForm] CardForm onFormComplete triggered', {
-                complete: details.complete,
-                details: JSON.stringify(details),
-              })
-
-              onFormComplete(details)
-            }}
-            style={styles.cardContainer}
-            cardStyle={styles.cardStyle}
-            autofocus={false}
-          />
-
-          {error ? <Text style={styles.errorText}>{error}</Text> : null}
-        </View>
-      </View>
-    </View>
-  )
-}
-
-export const PaymentForm = ({
-  orderItems,
-  onSubmit,
-  styles: stylesProp,
-  texts: textsProp,
-}: PaymentFormProps) => {
-  const [error, setError] = useState<string>()
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [isCardFormComplete, setIsCardFormComplete] = useState(false)
-
-  const styles = useMemo<CheckoutFormComputedStyles>(
-    () => mergeCheckoutFormStyles(stylesProp),
-    [stylesProp]
-  )
-
-  const texts = useMemo<Required<CheckoutFormTexts>>(
-    () => mergeCheckoutFormTexts(textsProp),
-    [textsProp]
-  )
-
-  const onFormComplete = (details: CardFormView.Details) => {
-    logger.warn('[PaymentForm] CardForm onFormComplete triggered', {
-      complete: details.complete,
-      details: JSON.stringify(details),
-    })
-    setIsCardFormComplete(details.complete)
-
-    if (details.complete) {
-      setError(undefined)
-      logger.debug('[PaymentForm] Card form marked as complete')
-    } else {
-      logger.debug('[PaymentForm] Card form incomplete')
-    }
-  }
-
-  const onPressSubmit = async () => {
-    try {
-      setIsSubmitting(true)
-
-      // Don't validate isCardFormComplete here - onFormComplete doesn't trigger on Android v40+
-      // Let Stripe's confirmPayment handle validation instead
-      logger.debug('[PaymentForm] Submitting payment', { isCardFormComplete })
-
-      await onSubmit()
-    } catch (e) {
-      const errorMsg = readableError(e)
-      logger.error('[PaymentForm] Payment submission failed', { error: errorMsg })
-      setError(errorMsg)
-    } finally {
-      setIsSubmitting(false)
-    }
-  }
-
-  return (
-    <View>
-      <Payment
-        orderItems={orderItems}
-        onFormComplete={onFormComplete}
-        error={error}
-        paymentViewProps={{}}
-        styles={styles}
-        texts={{
-          orderSummary: texts.orderSummary,
-          payment: texts.payment,
-        }}
-      />
-      {/* Submit Button */}
-      <TouchableOpacity
-        style={[styles.button, isSubmitting ? styles.buttonDisabled : {}]}
-        onPress={onPressSubmit}
-        disabled={isSubmitting}
-      >
-        {isSubmitting ? (
-          <ActivityIndicator size="small" color="#ffffff" />
-        ) : (
-          <Text style={styles.buttonText}>{texts.buttons.paymentSubmit}</Text>
-        )}
-      </TouchableOpacity>
-    </View>
-  )
-}