tf-checkout-react-native 1.0.28 → 1.0.30

package/lib/containers/billingInfo/Billing.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-unreachable */
 import _every from 'lodash/every';
 import _find from 'lodash/find';
 import _forEach from 'lodash/forEach';
@@ -15,7 +14,7 @@ import { getCountryDialCode } from '../../helpers/CountryCodes';
 import { useDebounced } from '../../helpers/Debounced';
 import { getData, LocalStorageKeys } from '../../helpers/LocalStorage';
 import { emptyPhone } from '../../helpers/StringsHelper';
-import { validateAge, validateEmail, validateEmpty, validatePasswords, validatePhoneNumber, } from '../../helpers/Validators';
+import { validateAge, validateDropDownEmpty, validateEmail, validateEmpty, validatePasswords, validatePhoneNumber, } from '../../helpers/Validators';
 import R from '../../res';
 import s from './styles';
 /*
@@ -26,11 +25,48 @@ import s from './styles';
   - Post Code/Zip
   - Country
 */
-const Billing = forwardRef(({ styles, texts, cartProps: { isAgeRequired, isNameRequired, isPhoneRequired, minimumAge, isBillingRequired, isTicketFree, isPhoneHidden, }, loginBrandImages, skipBillingConfig, areAlertsEnabled = true, areLoadingIndicatorsEnabled = true, onLoadingChange, onLoginError, onLoginSuccess, onRegisterError, onRegisterSuccess, onCheckoutSuccess, onCheckoutError, onFetchUserProfileSuccess, onFetchUserProfileError, onFetchCartError, onFetchCartSuccess, onFetchCountriesError, onFetchCountriesSuccess, onFetchStatesError, onFetchStatesSuccess, onSkippingStatusChange, onLogoutSuccess, onLogoutError, onCartExpired, shouldCartTimerNotMinimizeOnTap, }, ref) => {
+const Billing = forwardRef(({ styles, texts, cartProps: { isAgeRequired, isNameRequired, isPhoneRequired, minimumAge, isBillingRequired, isTicketFree, isPhoneHidden, }, loginBrandImages, skipBillingConfig, areAlertsEnabled = true, areLoadingIndicatorsEnabled = true, onLoadingChange, onLoginError, onLoginSuccess, onRegisterError, onRegisterSuccess, onCheckoutSuccess, onCheckoutError, onFetchUserProfileSuccess, onFetchUserProfileError, onFetchCartError, onFetchCartSuccess, onFetchCountriesError, onFetchCountriesSuccess, onFetchStatesError, onFetchStatesSuccess, onSkippingStatusChange, onLogoutSuccess, onLogoutError, onCartExpired, shouldCartTimerNotMinimizeOnTap, config = {
+    isCheckoutAlwaysButtonEnabled: false,
+    shouldHideTicketHolderSectionOnSingleTicket: false,
+}, }, ref) => {
     var _a, _b;
+    //#region State
+    const [isLoading, setIsLoading] = useState(false);
+    const [isSubmittingData, setIsSubmittingData] = useState(false);
+    const [loggedUserFirstName, setLoggedUserFirstName] = useState('');
+    const [loginMessage, setLoginMessage] = useState('');
+    const [firstName, setFirstName] = useState('');
+    const [lastName, setLastName] = useState('');
+    const [email, setEmail] = useState('');
+    const [emailConfirmation, setEmailConfirmation] = useState('');
+    const [password, setPassword] = useState('');
+    const [passwordConfirmation, setPasswordConfirmation] = useState('');
+    const [isSubToTicketFairy, setIsSubToTicketFairy] = useState(false);
+    const [isSubToBrand, setIsSubToBrand] = useState(false);
+    const [phone, setPhone] = useState('');
+    const [street, setStreet] = useState('');
+    const [city, setCity] = useState('');
+    const [countryId, setCountryId] = useState('');
+    const [stateId, setStateId] = useState('');
+    const [postalCode, setPostalCode] = useState('');
+    const [dateOfBirth, setDateOfBirth] = useState(undefined);
+    const [selectedCountry, setSelectedCountry] = useState(undefined);
+    const [selectedState, setSelectedState] = useState(undefined);
+    const [ticketHoldersData, setTicketHoldersData] = useState([]);
+    const [numberOfTicketHolders, setNumberOfTicketHolders] = useState(0);
+    const [states, setStates] = useState([]);
+    const [countries, setCountries] = useState([]);
+    const [isLoginDialogVisible, setIsLoginDialogVisible] = useState(false);
+    const [skippingStatus, setSkippingStatus] = useState(undefined);
+    const [isTtfCheckboxHidden, setIsTtfCheckboxHidden] = useState(false);
+    //#endregion State
     //#region Labels
     const holderLabels = useMemo(() => {
         var _a, _b, _c, _d, _e, _f, _g;
+        if (numberOfTicketHolders === 1 &&
+            config.shouldHideTicketHolderSectionOnSingleTicket) {
+            return null;
+        }
         const optional = isNameRequired
             ? ''
             : ((_a = texts === null || texts === void 0 ? void 0 : texts.form) === null || _a === void 0 ? void 0 : _a.optional) || '(optional)';
@@ -48,7 +84,8 @@ const Billing = forwardRef(({ styles, texts, cartProps: { isAgeRequired, isNameR
                 ? `${texts.form.holderPhone} ${((_g = texts === null || texts === void 0 ? void 0 : texts.form) === null || _g === void 0 ? void 0 : _g.optional) || '(optional)'}`
                 : `Phone ${optional}`,
         };
-    }, [isNameRequired, texts]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isNameRequired, texts, numberOfTicketHolders]);
     const brandCheckBoxText = ((_a = texts === null || texts === void 0 ? void 0 : texts.form) === null || _a === void 0 ? void 0 : _a.isSubToBrand) ||
         'I would like to be updated on news, events and offers.';
     const phoneLabel = useMemo(() => {
@@ -69,39 +106,10 @@ const Billing = forwardRef(({ styles, texts, cartProps: { isAgeRequired, isNameR
             ? `${texts.form.street} ${optionalAddress}`
             : `Street ${optionalAddress}`;
     }, [texts]);
-    //#endregion
-    //#region State
-    const [isLoading, setIsLoading] = useState(false);
-    const [isSubmittingData, setIsSubmittingData] = useState(false);
-    const [loggedUserFirstName, setLoggedUserFirstName] = useState('');
-    const [loginMessage, setLoginMessage] = useState('');
-    const [firstName, setFirstName] = useState('');
-    const [lastName, setLastName] = useState('');
-    const [email, setEmail] = useState('');
-    const [emailConfirmation, setEmailConfirmation] = useState('');
-    const [password, setPassword] = useState('');
-    const [passwordConfirmation, setPasswordConfirmation] = useState('');
-    const [isSubToTicketFairy, setIsSubToTicketFairy] = useState(false);
-    const [isSubToBrand, setIsSubToBrand] = useState(false);
-    const [phone, setPhone] = useState('');
-    const [street, setStreet] = useState('');
-    const [city, setCity] = useState('');
-    const [countryId, setCountryId] = useState('');
-    const [stateId, setStateId] = useState('');
-    const [postalCode, setPostalCode] = useState('');
-    const [dateOfBirth, setDateOfBirth] = useState(new Date());
-    const [selectedCountry, setSelectedCountry] = useState(undefined);
-    const [selectedState, setSelectedState] = useState(undefined);
-    const [ticketHoldersData, setTicketHoldersData] = useState([]);
-    const [numberOfTicketHolders, setNumberOfTicketHolders] = useState();
-    const [states, setStates] = useState([]);
-    const [countries, setCountries] = useState([]);
-    const [isLoginDialogVisible, setIsLoginDialogVisible] = useState(false);
-    const [skippingStatus, setSkippingStatus] = useState(undefined);
-    const [isTtfCheckboxHidden, setIsTtfCheckboxHidden] = useState(false);
+    //#endregion Labels
     // Cart expiration timer
     const [secondsLeft, setSecondsLeft] = React.useState(420);
-    // Errors state
+    //#region Errors state
     const firstNameError = useDebounced(firstName, validateEmpty);
     const lastNameError = useDebounced(lastName, validateEmpty);
     const emailError = useDebounced(email, () => validateEmail(email, emailConfirmation));
@@ -112,15 +120,31 @@ const Billing = forwardRef(({ styles, texts, cartProps: { isAgeRequired, isNameR
     const streetError = useDebounced(street, validateEmpty);
     const cityError = useDebounced(city, validateEmpty);
     const postalCodeError = useDebounced(postalCode, validateEmpty);
-    const [dateOfBirthError, setDateOfBirthError] = useState('');
     const [ttfPrivacyPolicyError, setTtfPrivacyPolicyError] = useState('');
-    // End of errors state
+    const [firstNameErrorState, setFirstNameErrorState] = useState('');
+    const [lastNameErrorState, setLastNameErrorState] = useState('');
+    const [streetErrorState, setStreetErrorState] = useState('');
+    const [dateOfBirthError, setDateOfBirthError] = useState('');
+    const [emailErrorState, setEmailErrorState] = useState('');
+    const [emailConfirmationErrorState, setEmailConfirmationErrorState] = useState('');
+    const [cityErrorState, setCityErrorState] = useState('');
+    const [postalCodeErrorState, setPostalCodeErrorState] = useState('');
+    const [countryErrorState, setCountryErrorState] = useState('');
+    const [stateErrorState, setStateErrorState] = useState('');
+    const [passwordErrorState, setPasswordErrorState] = useState('');
+    const [confirmPasswordErrorState, setConfirmPasswordErrorState] = useState('');
+    //#endregion Errors state
     //#endregion
     const getSkippingStatus = (numOfTickets) => {
+        // DO NOT SKIP IF
+        // * User is not logged in.
+        // * Event Collect_names is turned on and tickets are more than one.
+        // * Event validate_age is turned on.
+        // * phone_required is turned on and customer does not have a phone number.
         if (isBillingRequired || skippingStatus === 'fail') {
             return 'false';
         }
-        if (numOfTickets > 1 || isAgeRequired) {
+        if ((isNameRequired && numOfTickets > 1) || isAgeRequired) {
             return 'false';
         }
         else {
@@ -133,6 +157,23 @@ const Billing = forwardRef(({ styles, texts, cartProps: { isAgeRequired, isNameR
     const phoneErrorCounter = useRef(0);
     const billingCoreRef = useRef(null);
     const sessionHandleRef = useRef(null);
+    const phoneCountryCode = useRef('');
+    const errorsRef = useRef({
+        firstName: '',
+        lastName: '',
+        email: '',
+        confirmEmail: '',
+        password: '',
+        confirmPassword: '',
+        dateOfBirth: '',
+        phone: '',
+        street: '',
+        city: '',
+        country: '',
+        zipCode: '',
+        state: '',
+        privacy: '',
+    });
     //#endregion
     //#region Imperative Handler
     useImperativeHandle(ref, () => ({
@@ -165,13 +206,19 @@ const Billing = forwardRef(({ styles, texts, cartProps: { isAgeRequired, isNameR
         }
     }, [isPhoneRequired, phone.length]);
     const handleOnChangePhoneNumber = (payload) => {
-        var _a, _b;
+        var _a, _b, _c, _d;
         setPhone(payload.input);
+        if (payload.isValid) {
+            errorsRef.current.phone = '';
+            setPhoneError('');
+            return;
+        }
         if (!payload.isValid && phoneErrorCounter.current > 0) {
-            return handleSetPhoneError(((_b = (_a = texts === null || texts === void 0 ? void 0 : texts.form) === null || _a === void 0 ? void 0 : _a.phoneInput) === null || _b === void 0 ? void 0 : _b.customError) || 'Invalid phone number');
+            errorsRef.current.phone =
+                ((_b = (_a = texts === null || texts === void 0 ? void 0 : texts.form) === null || _a === void 0 ? void 0 : _a.phoneInput) === null || _b === void 0 ? void 0 : _b.customError) || 'Invalid phone number';
+            return handleSetPhoneError(((_d = (_c = texts === null || texts === void 0 ? void 0 : texts.form) === null || _c === void 0 ? void 0 : _c.phoneInput) === null || _d === void 0 ? void 0 : _d.customError) || 'Invalid phone number');
         }
         phoneErrorCounter.current = phoneErrorCounter.current + 1;
-        setPhoneError('');
     };
     const handleOnLoadingChange = useCallback((loading) => {
         if (onLoadingChange) {
@@ -192,7 +239,16 @@ const Billing = forwardRef(({ styles, texts, cartProps: { isAgeRequired, isNameR
         setIsSubToBrand(!isSubToBrand);
     };
     const handleIsSubToTicketFairyToggle = () => {
-        setIsSubToTicketFairy(!isSubToTicketFairy);
+        const newValue = !isSubToTicketFairy;
+        if (newValue) {
+            errorsRef.current.privacy = '';
+            setTtfPrivacyPolicyError('');
+        }
+        else {
+            errorsRef.current.privacy = 'Required';
+            setTtfPrivacyPolicyError('Required');
+        }
+        setIsSubToTicketFairy(newValue);
     };
     const handleOpenPrivacyLink = async () => {
         const canOpenLink = await Linking.canOpenURL(Constants.PRIVACY_POLICY_LINK);
@@ -213,6 +269,12 @@ const Billing = forwardRef(({ styles, texts, cartProps: { isAgeRequired, isNameR
         setCountryId(userProfile.countryId);
         setStateId(userProfile.stateId);
         setLoggedUserFirstName(userProfile.firstName);
+        let dob;
+        if (userProfile.dateOfBirth) {
+            const dobSplitted = userProfile.dateOfBirth.split('-');
+            dob = new Date(parseInt(dobSplitted[0], 10), parseInt(dobSplitted[1], 10) - 1, parseInt(dobSplitted[2], 10));
+            handleOnSelectDate(dob);
+        }
         const thData = [...ticketHoldersData];
         thData.forEach((th, index) => {
             th.firstName = index === 0 ? userProfile.firstName : '';
@@ -224,10 +286,66 @@ const Billing = forwardRef(({ styles, texts, cartProps: { isAgeRequired, isNameR
         if (accessToken) {
             storedToken.current = accessToken;
         }
+        showErrorMessages({
+            firstName: userProfile.firstName,
+            lastName: userProfile.lastName,
+            email: userProfile.email,
+            confirmEmail: userProfile.email,
+            street: userProfile.streetAddress,
+            city: userProfile.city,
+            selectedCountry: userProfile.countryId
+                ? {
+                    label: '',
+                    value: userProfile.countryId,
+                }
+                : undefined,
+            selectedState: userProfile.stateId
+                ? {
+                    label: '',
+                    value: userProfile.stateId,
+                }
+                : undefined,
+            postalCode: userProfile.zipCode,
+            dateOfBirth: dob,
+            phoneNumber: userProfile.phone,
+            isRegistering: !loggedUserFirstName && !storedToken.current,
+            ticketHolderData: ticketHoldersData,
+        });
+    };
+    const clearFormErrors = () => {
+        setFirstNameErrorState('');
+        setLastNameErrorState('');
+        setEmailErrorState('');
+        setEmailConfirmationErrorState('');
+        setDateOfBirthError('');
+        setPhoneError('');
+        setStreetErrorState('');
+        setCityErrorState('');
+        setCountryErrorState('');
+        setPostalCodeErrorState('');
+        setStateErrorState('');
+        setTtfPrivacyPolicyError('');
+        errorsRef.current = {
+            firstName: '',
+            lastName: '',
+            email: '',
+            confirmEmail: '',
+            password: '',
+            confirmPassword: '',
+            dateOfBirth: '',
+            phone: '',
+            street: '',
+            city: '',
+            country: '',
+            zipCode: '',
+            state: '',
+            privacy: '',
+        };
     };
     const handleOnLoginSuccess = async ({ userProfile, accessTokenData, }) => {
         var _a, _b, _c;
-        let phoneCountry = 'US';
+        clearFormErrors();
+        let countryCode = 'US';
         const accessToken = await getData(LocalStorageKeys.ACCESS_TOKEN);
         const usrProfile = { ...userProfile };
         onLoginSuccess === null || onLoginSuccess === void 0 ? void 0 : onLoginSuccess({
@@ -236,13 +354,18 @@ const Billing = forwardRef(({ styles, texts, cartProps: { isAgeRequired, isNameR
         });
         try {
             const deviceCountry = await DeviceCountry.getCountryCode(TYPE_ANY);
-            phoneCountry = deviceCountry.code.toUpperCase();
+            countryCode = deviceCountry.code.toUpperCase();
         }
         catch (err) {
-            phoneCountry = 'US';
+            countryCode = 'US';
         }
-        if (!((_a = usrProfile.phone) === null || _a === void 0 ? void 0 : _a.includes('+'))) {
-            usrProfile.phone = `${getCountryDialCode(phoneCountry)}${usrProfile.phone}`;
+        if (!userProfile.phone) {
+            usrProfile.phone = '';
+        }
+        else {
+            if (!((_a = usrProfile.phone) === null || _a === void 0 ? void 0 : _a.includes('+'))) {
+                usrProfile.phone = `${getCountryDialCode(countryCode)}${usrProfile.phone}`;
+            }
         }
         if (!isBillingRequired && skippingStatus === 'fail') {
             setSkippingStatus('skipping');
@@ -250,11 +373,9 @@ const Billing = forwardRef(({ styles, texts, cartProps: { isAgeRequired, isNameR
                 phoneNumber: userProfile.phone,
                 customError: (_c = (_b = texts === null || texts === void 0 ? void 0 : texts.form) === null || _b === void 0 ? void 0 : _b.phoneInput) === null || _c === void 0 ? void 0 : _c.customError,
             });
-            if (phoneValidError) {
+            if (phoneValidError && isPhoneRequired) {
                 setIsLoading(false);
-                showAlert((texts === null || texts === void 0 ? void 0 : texts.invalidPhoneNumberError) ||
-                    'Please enter a valid phone number');
-                return handleSetPhoneError((texts === null || texts === void 0 ? void 0 : texts.invalidPhoneNumberError) ||
+                handleSetPhoneError((texts === null || texts === void 0 ? void 0 : texts.invalidPhoneNumberError) ||
                     'Please enter a valid phone number');
             }
             await performCheckout(getCheckoutBodyWhenSkipping({
@@ -281,7 +402,7 @@ const Billing = forwardRef(({ styles, texts, cartProps: { isAgeRequired, isNameR
         setPasswordConfirmation('');
         setCountryId('');
         setStateId('');
-        const eventCountry = await getData(LocalStorageKeys.EVENT_COUNTRY);
+        handleOnSelectDate(undefined);
         setSelectedCountry({
             value: '-1',
             label: ((_a = texts === null || texts === void 0 ? void 0 : texts.form) === null || _a === void 0 ? void 0 : _a.country) || 'Country',
@@ -303,57 +424,266 @@ const Billing = forwardRef(({ styles, texts, cartProps: { isAgeRequired, isNameR
             th.lastName = '';
             th.email = '';
             th.phone = '';
+            th.firstNameError = '';
+            th.lastNameError = '';
         });
         setTicketHoldersData(thData);
         onLogoutSuccess === null || onLogoutSuccess === void 0 ? void 0 : onLogoutSuccess();
     };
+    //#region Handlers input changed
     const handleOnSelectDate = (newDate) => {
-        const ageError = validateAge(newDate, minimumAge);
         setDateOfBirth(newDate);
-        setDateOfBirthError(ageError);
+        if (dateOfBirthError.length > 0 && newDate) {
+            setDateOfBirthError('');
+        }
+        if (minimumAge) {
+            const ageError = validateAge(newDate, minimumAge);
+            setDateOfBirthError(ageError);
+        }
+        else {
+            if (!newDate) {
+                setDateOfBirthError('Required');
+            }
+        }
+    };
+    const handleOnStreetChanged = (text) => {
+        if (streetErrorState.length > 0 && text.length > 0) {
+            setStreetErrorState('');
+        }
+        setStreet(text);
+    };
+    const handleOnCityChanged = (text) => {
+        if (cityErrorState.length > 0 && text.length > 0) {
+            setCityErrorState('');
+        }
+        setCity(text);
+    };
+    const handleOnFirstNameChanged = (text) => {
+        if (firstNameErrorState.length > 0 && text.length > 0) {
+            setFirstNameErrorState('');
+        }
+        setFirstName(text);
+    };
+    const handleOnLastNameChanged = (text) => {
+        if (lastNameErrorState.length > 0 && text.length > 0) {
+            setLastNameErrorState('');
+        }
+        setLastName(text);
+    };
+    const handleOnEmailChanged = (text) => {
+        if (emailErrorState.length > 0 && text.length > 0) {
+            setEmailErrorState('');
+        }
+        setEmail(text);
     };
+    const handleOnEmailConfirmationChanged = (text) => {
+        if (emailConfirmationErrorState.length > 0 && text.length > 0) {
+            setEmailConfirmationErrorState('');
+        }
+        setEmailConfirmation(text);
+    };
+    const handleOnPostalCodeChanged = (text) => {
+        if (postalCodeErrorState.length > 0 && text.length > 0) {
+            setPostalCodeErrorState('');
+        }
+        setPostalCode(text);
+    };
+    const handleOnStateChanged = (itm) => {
+        if (stateErrorState.length > 0 && itm.value !== '-1') {
+            setStateErrorState('');
+        }
+        else if (itm.value === '-1') {
+            setStateErrorState('Required');
+        }
+        setSelectedState(itm);
+    };
+    const handleOnCountryChanged = (itm) => {
+        if (countryErrorState.length > 0 && itm.value !== '-1') {
+            setCountryErrorState('');
+        }
+        else if (itm.value === '-1') {
+            setCountryErrorState('Required');
+        }
+        setSelectedCountry(itm);
+    };
+    const handleOnPasswordChanged = (text) => {
+        if (passwordErrorState.length > 0 && text.length > 0) {
+            setPasswordErrorState('');
+        }
+        setPassword(text);
+    };
+    const handleOnConfirmPasswordChanged = (text) => {
+        if (confirmPasswordErrorState.length > 0 && text.length > 0) {
+            setConfirmPasswordErrorState('');
+        }
+        setPasswordConfirmation(text);
+    };
+    //#endregion Handlers input changed
     //#endregion
     //#region Form validation
     const checkIsStoredPhoneNumberFormat = (storedPhoneNumber) => {
+        if (!storedPhoneNumber) {
+            handleSetPhoneError((texts === null || texts === void 0 ? void 0 : texts.invalidPhoneNumberError) || 'Please enter a valid phone number');
+            return false;
+        }
         if (!storedPhoneNumber.includes('+')) {
             handleSetPhoneError((texts === null || texts === void 0 ? void 0 : texts.invalidPhoneNumberError) || 'Please enter a valid phone number');
             return false;
         }
         return true;
     };
+    const showErrorMessages = (data) => {
+        var _a, _b, _c, _d, _e, _f;
+        if (secondsLeft === 0) {
+            return false;
+        }
+        const validateFirstName = validateEmpty(data.firstName);
+        const validateLastName = validateEmpty(data.lastName);
+        const validateEmails = validateEmail(data.email, data.confirmEmail);
+        const validateEmailsConfirmation = validateEmail(data.confirmEmail, data.email);
+        if (isTicketFree) {
+            setFirstNameErrorState(validateFirstName);
+            setLastNameErrorState(validateLastName);
+            errorsRef.current.firstName = validateFirstName;
+            errorsRef.current.lastName = validateLastName;
+            setEmailErrorState(validateEmails);
+            setEmailConfirmationErrorState(validateEmailsConfirmation);
+            errorsRef.current.email = validateEmails;
+            errorsRef.current.confirmEmail = validateEmailsConfirmation;
+            if (data.isRegistering) {
+                const validatePassword = validatePasswords(data.password, data.confirmPassword);
+                const validatePasswordConfirmation = validatePasswords(data.confirmPassword, data.password);
+                setPasswordErrorState(validatePassword);
+                setConfirmPasswordErrorState(validatePasswordConfirmation);
+                errorsRef.current.password = validatePassword;
+                errorsRef.current.confirmPassword = validatePasswordConfirmation;
+            }
+            if (isAgeRequired) {
+                if (minimumAge) {
+                    const birthdayValidation = validateAge(data.dateOfBirth, minimumAge);
+                    setDateOfBirthError(birthdayValidation);
+                    errorsRef.current.dateOfBirth = birthdayValidation;
+                }
+                else {
+                    setDateOfBirthError(data.dateOfBirth ? '' : 'Required');
+                    errorsRef.current.dateOfBirth = data.dateOfBirth ? '' : 'Required';
+                }
+            }
+            if (isPhoneRequired && !isPhoneHidden) {
+                const validatePhone = validatePhoneNumber({
+                    phoneNumber: data.phoneNumber,
+                    customError: (_b = (_a = texts === null || texts === void 0 ? void 0 : texts.form) === null || _a === void 0 ? void 0 : _a.phoneInput) === null || _b === void 0 ? void 0 : _b.customError,
+                    countryCode: phoneCountryCode.current,
+                });
+                setPhoneError(validatePhone);
+                errorsRef.current.phone = validatePhone;
+            }
+            errorsRef.current.privacy = isSubToTicketFairy ? '' : 'Required';
+            if (isNameRequired) {
+                const ticketHoldersDataCopy = [...data.ticketHolderData];
+                _map(data.ticketHolderData, (th, index) => {
+                    if (isNameRequired) {
+                        ticketHoldersDataCopy[index].firstNameError = validateEmpty(th.firstName);
+                        ticketHoldersDataCopy[index].lastNameError = validateEmpty(th.lastName);
+                    }
+                });
+                setTicketHoldersData(ticketHoldersDataCopy);
+            }
+            return;
+        } // end of Ticket Free
+        const validateStreet = validateEmpty(data.street);
+        const validateCity = validateEmpty(data.city);
+        const validatePostalCode = validateEmpty(data.postalCode);
+        setStreetErrorState(validateStreet);
+        setCityErrorState(validateCity);
+        setPostalCodeErrorState(validatePostalCode);
+        setFirstNameErrorState(validateFirstName);
+        setLastNameErrorState(validateLastName);
+        setEmailErrorState(validateEmails);
+        setEmailConfirmationErrorState(validateEmailsConfirmation);
+        errorsRef.current.street = validateStreet;
+        errorsRef.current.city = validateCity;
+        errorsRef.current.zipCode = validatePostalCode;
+        errorsRef.current.firstName = validateFirstName;
+        errorsRef.current.lastName = validateLastName;
+        errorsRef.current.email = validateEmails;
+        errorsRef.current.confirmEmail = validateEmailsConfirmation;
+        if (data.isRegistering) {
+            const validatePassword = validatePasswords(data.password, data.confirmPassword);
+            const validatePasswordConfirmation = validatePasswords(data.confirmPassword, data.password);
+            setPasswordErrorState(validatePassword);
+            setConfirmPasswordErrorState(validatePasswordConfirmation);
+            errorsRef.current.password = validatePassword;
+            errorsRef.current.confirmPassword = validatePasswordConfirmation;
+        }
+        const countryValidation = validateDropDownEmpty((_c = data.selectedCountry) === null || _c === void 0 ? void 0 : _c.value);
+        setCountryErrorState(countryValidation);
+        errorsRef.current.country = countryValidation;
+        if (isAgeRequired) {
+            if (minimumAge) {
+                const birthdayValidation = validateAge(data.dateOfBirth, minimumAge);
+                setDateOfBirthError(birthdayValidation);
+                errorsRef.current.dateOfBirth = birthdayValidation;
+            }
+            else {
+                setDateOfBirthError(data.dateOfBirth ? '' : 'Required');
+                errorsRef.current.dateOfBirth = data.dateOfBirth ? '' : 'Required';
+            }
+        }
+        const validateState = validateDropDownEmpty((_d = data.selectedState) === null || _d === void 0 ? void 0 : _d.value);
+        setStateErrorState(validateState);
+        errorsRef.current.state = validateState;
+        if (isPhoneRequired && !isPhoneHidden) {
+            const validatePhone = validatePhoneNumber({
+                phoneNumber: data.phoneNumber,
+                customError: (_f = (_e = texts === null || texts === void 0 ? void 0 : texts.form) === null || _e === void 0 ? void 0 : _e.phoneInput) === null || _f === void 0 ? void 0 : _f.customError,
+                countryCode: phoneCountryCode.current,
+            });
+            setPhoneError(validatePhone);
+            errorsRef.current.phone = validatePhone;
+        }
+        //setTtfPrivacyPolicyError(isSubToTicketFairy ? '' : 'Required')
+        errorsRef.current.privacy = isSubToTicketFairy ? '' : 'Required';
+        if (isNameRequired) {
+            const ticketHoldersDataCopy = [...data.ticketHolderData];
+            _map(data.ticketHolderData, (th, index) => {
+                if (isNameRequired) {
+                    ticketHoldersDataCopy[index].firstNameError = validateEmpty(th.firstName);
+                    ticketHoldersDataCopy[index].lastNameError = validateEmpty(th.lastName);
+                }
+            });
+            setTicketHoldersData(ticketHoldersDataCopy);
+        }
+    };
     const checkBasicDataValid = () => {
-        var _a, _b;
         if (secondsLeft === 0) {
             return false;
         }
         if (isTicketFree) {
-            if (!firstName || !lastName || !email || !emailConfirmation) {
+            if (errorsRef.current.firstName ||
+                errorsRef.current.lastName ||
+                errorsRef.current.email ||
+                errorsRef.current.confirmEmail) {
                 return false;
             }
         }
         else {
-            if (!firstName ||
-                !lastName ||
-                !email ||
-                !emailConfirmation ||
-                !city ||
-                !postalCode ||
-                (selectedState === null || selectedState === void 0 ? void 0 : selectedState.value) === '-1' ||
-                (selectedCountry === null || selectedCountry === void 0 ? void 0 : selectedCountry.value) === '-1') {
+            if (errorsRef.current.firstName ||
+                errorsRef.current.lastName ||
+                errorsRef.current.email ||
+                errorsRef.current.confirmEmail ||
+                errorsRef.current.city ||
+                errorsRef.current.zipCode ||
+                errorsRef.current.state ||
+                errorsRef.current.country ||
+                errorsRef.current.street) {
                 return false;
             }
-            if (Config.IS_BILLING_STREET_NAME_REQUIRED && !street) {
+        }
+        if (isPhoneRequired && !isPhoneHidden && errorsRef.current.phone) {
+            if (isLoading) {
                 setIsLoading(false);
-                return false;
             }
-        }
-        if (isPhoneRequired &&
-            !isPhoneHidden &&
-            validatePhoneNumber({
-                phoneNumber: phone,
-                customError: (_b = (_a = texts === null || texts === void 0 ? void 0 : texts.form) === null || _a === void 0 ? void 0 : _a.phoneInput) === null || _b === void 0 ? void 0 : _b.customError,
-            })) {
-            setIsLoading(false);
             return false;
         }
         return true;
@@ -364,18 +694,28 @@ const Billing = forwardRef(({ styles, texts, cartProps: { isAgeRequired, isNameR
         var _a;
         if (!isTtfCheckboxHidden && !isSubToTicketFairy) {
             setTtfPrivacyPolicyError(((_a = texts === null || texts === void 0 ? void 0 : texts.form) === null || _a === void 0 ? void 0 : _a.ttfPrivacyPolicyRequiredError) || 'Required');
-            return 'Please accept our Privacy Policy';
+            return 'Please review the errors';
         }
         if (isAgeRequired) {
-            const ageValidationMessage = validateAge(dateOfBirth, minimumAge);
-            if (ageValidationMessage) {
-                setDateOfBirthError(ageValidationMessage);
-                return ageValidationMessage;
+            if (!dateOfBirth) {
+                setDateOfBirthError('Required');
+                return 'Please enter your date of birth';
+            }
+            if (minimumAge) {
+                const ageValidationMessage = validateAge(dateOfBirth, minimumAge);
+                if (ageValidationMessage) {
+                    setDateOfBirthError(ageValidationMessage);
+                    return ageValidationMessage;
+                }
             }
         }
         if (!isNameRequired) {
             return '';
         }
+        if (ticketHoldersData.length === 1 &&
+            config.shouldHideTicketHolderSectionOnSingleTicket) {
+            return '';
+        }
         return _every(_map(ticketHoldersData, (th) => validateEmpty(th.firstName) || validateEmpty(th.lastName)), (itm) => itm === '')
             ? ''
             : fillAllRequiredFieldsAlert;
@@ -434,8 +774,8 @@ const Billing = forwardRef(({ styles, texts, cartProps: { isAgeRequired, isNameR
         }
         if (!registerNewUserResponseData) {
             setIsSubmittingData(false);
-            handleOnRegisterFail('Register returned no data');
-            return showAlert('Register returned no data');
+            handleOnRegisterFail('Register user returned no data');
+            return showAlert('Register user returned no data');
         }
         storedToken.current =
             registerNewUserResponseData.accessTokenData.accessToken;
@@ -479,18 +819,34 @@ const Billing = forwardRef(({ styles, texts, cartProps: { isAgeRequired, isNameR
         if (body.attributes.phone === undefined) {
             delete body.attributes.phone;
         }
+        if (isAgeRequired && dateOfBirth) {
+            body.attributes.dob_day = dateOfBirth.getDate();
+            body.attributes.dob_month = dateOfBirth.getMonth() + 1;
+            body.attributes.dob_year = dateOfBirth.getFullYear();
+        }
         return body;
     };
     const getCheckoutBody = () => {
         let parsedTicketHolders = [];
-        for (let i = 0; i <= numberOfTicketHolders - 1; i++) {
-            const individualHolder = {
-                first_name: ticketHoldersData[i].firstName || '',
-                last_name: ticketHoldersData[i].lastName || '',
-                phone: ticketHoldersData[i].phone || '',
-                email: ticketHoldersData[i].email || '',
-            };
-            parsedTicketHolders.push(individualHolder);
+        if (config.shouldHideTicketHolderSectionOnSingleTicket &&
+            numberOfTicketHolders) {
+            parsedTicketHolders.push({
+                first_name: firstName,
+                last_name: lastName,
+                phone: phone,
+                email: email,
+            });
+        }
+        else {
+            for (let i = 0; i <= numberOfTicketHolders - 1; i++) {
+                const individualHolder = {
+                    first_name: ticketHoldersData[i].firstName || '',
+                    last_name: ticketHoldersData[i].lastName || '',
+                    phone: ticketHoldersData[i].phone || '',
+                    email: ticketHoldersData[i].email || '',
+                };
+                parsedTicketHolders.push(individualHolder);
+            }
         }
         const formattedPhone = isPhoneRequired ? phone : emptyPhone(phone);
         const checkoutBody = isTicketFree
@@ -525,7 +881,7 @@ const Billing = forwardRef(({ styles, texts, cartProps: { isAgeRequired, isNameR
                     brand_opt_in: isSubToBrand,
                 },
             };
-        if (isAgeRequired) {
+        if (isAgeRequired && dateOfBirth) {
             checkoutBody.attributes.dob_day = dateOfBirth.getDate();
             checkoutBody.attributes.dob_month = dateOfBirth.getMonth() + 1;
             checkoutBody.attributes.dob_year = dateOfBirth.getFullYear();
@@ -595,9 +951,27 @@ const Billing = forwardRef(({ styles, texts, cartProps: { isAgeRequired, isNameR
         return checkoutBody;
     };
     const onSubmit = async () => {
-        const isExtraDataValid = checkExtraDataValid();
-        if (isExtraDataValid) {
-            return showAlert(isExtraDataValid);
+        showErrorMessages({
+            firstName: firstName,
+            lastName: lastName,
+            email: email,
+            confirmEmail: emailConfirmation,
+            password: password,
+            confirmPassword: passwordConfirmation,
+            street: street,
+            city: city,
+            selectedCountry: selectedCountry,
+            selectedState: selectedState,
+            postalCode: postalCode,
+            dateOfBirth: dateOfBirth,
+            phoneNumber: phone,
+            isRegistering: !loggedUserFirstName && !storedToken.current,
+            ticketHolderData: ticketHoldersData,
+        });
+        const isBasicDataValid = checkBasicDataValid();
+        const isExtraDataValidErrors = checkExtraDataValid();
+        if (isExtraDataValidErrors || !isBasicDataValid) {
+            return;
         }
         if (loggedUserFirstName && storedToken.current) {
             await performCheckout();
@@ -698,6 +1072,8 @@ const Billing = forwardRef(({ styles, texts, cartProps: { isAgeRequired, isNameR
                 lastName: i === 0 && usrPrfl ? usrPrfl.lastName : '',
                 email: i === 0 && usrPrfl ? usrPrfl.email : '',
                 phone: i === 0 && usrPrfl ? usrPrfl.phone : '',
+                firstNameError: '',
+                lastNameError: '',
             });
         }
         let phoneCountry = 'US';
@@ -720,7 +1096,7 @@ const Billing = forwardRef(({ styles, texts, cartProps: { isAgeRequired, isNameR
         if (usrPrfl) {
             if (!isPhoneHidden && isPhoneRequired) {
                 if (!checkIsStoredPhoneNumberFormat(usrPrfl.phone)) {
-                    showAlert((texts === null || texts === void 0 ? void 0 : texts.invalidPhoneNumberError) ||
+                    setPhoneError((texts === null || texts === void 0 ? void 0 : texts.invalidPhoneNumberError) ||
                         'Please enter a valid phone number');
                     skippingStatusInner = 'fail';
                     setSkippingStatus('fail');
@@ -757,14 +1133,18 @@ const Billing = forwardRef(({ styles, texts, cartProps: { isAgeRequired, isNameR
                     }
                 }
             }
-            const userPhone = usrPrfl.phone === null ? '' : usrPrfl.phone;
+            const userPhone = usrPrfl.phone === null ? phoneCountryDialCode : usrPrfl.phone;
+            if (userPhone.length <= 5) {
+                phoneCountryCode.current = userPhone;
+            }
             handleSetFormDataFromUserProfile({
                 ...usrPrfl,
-                phone: `${phoneCountryDialCode}${userPhone}`,
+                phone: userPhone,
             });
         }
         else {
             // There is no user profile data
+            phoneCountryCode.current = phoneCountryDialCode;
             setPhone(phoneCountryDialCode);
         }
         setCountries(parsedCountries);
@@ -789,6 +1169,7 @@ const Billing = forwardRef(({ styles, texts, cartProps: { isAgeRequired, isNameR
         else {
             setCountryByEvent();
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [countries, countryId]);
     useEffect(() => {
         const getStates = async () => {
@@ -835,18 +1216,6 @@ const Billing = forwardRef(({ styles, texts, cartProps: { isAgeRequired, isNameR
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [stateId, states]);
-    const initTicketHoldersErrors = useCallback(() => {
-        if (ticketHoldersData.length > 1) {
-            const tHolders = [];
-            for (let i = 0; i < ticketHoldersData.length; i++) {
-                tHolders.push({
-                    firstNameError: '',
-                    lastNameError: '',
-                });
-            }
-        }
-    }, [ticketHoldersData]);
-    initTicketHoldersErrors();
     useEffect(() => {
         var _a, _b;
         setCountries([
@@ -865,10 +1234,16 @@ const Billing = forwardRef(({ styles, texts, cartProps: { isAgeRequired, isNameR
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     //#endregion
+    const isDataValid = checkBasicDataValid();
+    const isButtonDisabled = config.isCheckoutAlwaysButtonEnabled
+        ? false
+        : !isDataValid;
     //#region RENDER
     const renderTicketHolders = () => {
-        var _a;
-        if (!numberOfTicketHolders) {
+        var _a, _b;
+        if (!numberOfTicketHolders ||
+            !holderLabels ||
+            ticketHoldersData.length === 0) {
             return null;
         }
         let tHolders = [];
@@ -882,13 +1257,15 @@ const Billing = forwardRef(({ styles, texts, cartProps: { isAgeRequired, isNameR
                 React.createElement(Input, { label: holderLabels.firstName, value: ticketHoldersData[i].firstName, onChangeText: (text) => {
                         const copyTicketHolders = [...ticketHoldersData];
                         copyTicketHolders[i].firstName = text;
+                        copyTicketHolders[i].firstNameError = validateEmpty(text);
                         setTicketHoldersData(copyTicketHolders);
-                    }, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles }),
+                    }, error: ticketHoldersData[i].firstNameError, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles }),
                 React.createElement(Input, { label: holderLabels.lastName, value: ticketHoldersData[i].lastName, onChangeText: (text) => {
                         const copyTicketHolders = [...ticketHoldersData];
                         copyTicketHolders[i].lastName = text;
+                        copyTicketHolders[i].lastNameError = validateEmpty(text);
                         setTicketHoldersData(copyTicketHolders);
-                    }, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles }),
+                    }, error: ticketHoldersData[i].lastNameError, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles }),
                 React.createElement(Input, { label: holderLabels.email, value: ticketHoldersData[i].email, onChangeText: (text) => {
                         const copyTicketHolders = [...ticketHoldersData];
                         copyTicketHolders[i].email = text;
@@ -900,7 +1277,9 @@ const Billing = forwardRef(({ styles, texts, cartProps: { isAgeRequired, isNameR
                         setTicketHoldersData(copyTicketHolders);
                     }, keyboardType: 'phone-pad', styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles })));
         }
-        return tHolders;
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Text, { style: styles === null || styles === void 0 ? void 0 : styles.ticketHoldersTitle }, ((_b = texts === null || texts === void 0 ? void 0 : texts.form) === null || _b === void 0 ? void 0 : _b.ticketHoldersTitle) || 'Ticket Holders'),
+            tHolders));
     };
     const renderCheckingOut = () => {
         var _a, _b;
@@ -918,42 +1297,47 @@ const Billing = forwardRef(({ styles, texts, cartProps: { isAgeRequired, isNameR
                 React.createElement(View, { style: styles === null || styles === void 0 ? void 0 : styles.rootContainer },
                     React.createElement(Login, { onLoginSuccessful: handleOnLoginSuccess, onLoginError: handleOnLoginError, onLogoutSuccess: handleOnLogoutSuccess, onLogoutError: onLogoutError, isLoginDialogVisible: isLoginDialogVisible, showLoginDialog: showLoginDialog, hideLoginDialog: hideLoginDialog, userFirstName: loggedUserFirstName, texts: { ...texts === null || texts === void 0 ? void 0 : texts.loginTexts, message: loginMessage }, styles: styles === null || styles === void 0 ? void 0 : styles.loginStyles, brandImages: loginBrandImages }),
                     React.createElement(Text, { style: styles === null || styles === void 0 ? void 0 : styles.screenTitle }, ((_a = texts === null || texts === void 0 ? void 0 : texts.form) === null || _a === void 0 ? void 0 : _a.getYourTicketsTitle) || 'Get Your Tickets'),
-                    React.createElement(Input, { label: ((_b = texts === null || texts === void 0 ? void 0 : texts.form) === null || _b === void 0 ? void 0 : _b.firstName) || 'First name', value: firstName, onChangeText: setFirstName, error: firstNameError, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles }),
-                    React.createElement(Input, { label: ((_c = texts === null || texts === void 0 ? void 0 : texts.form) === null || _c === void 0 ? void 0 : _c.lastName) || 'Last name', value: lastName, onChangeText: setLastName, error: lastNameError, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles }),
+                    React.createElement(Input, { label: ((_b = texts === null || texts === void 0 ? void 0 : texts.form) === null || _b === void 0 ? void 0 : _b.firstName) || 'First name', value: firstName, onChangeText: handleOnFirstNameChanged, error: firstNameError || firstNameErrorState, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles }),
+                    React.createElement(Input, { label: ((_c = texts === null || texts === void 0 ? void 0 : texts.form) === null || _c === void 0 ? void 0 : _c.lastName) || 'Last name', value: lastName, onChangeText: handleOnLastNameChanged, error: lastNameError || lastNameErrorState, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles }),
                     React.createElement(Text, { style: styles === null || styles === void 0 ? void 0 : styles.texts }, ((_d = texts === null || texts === void 0 ? void 0 : texts.form) === null || _d === void 0 ? void 0 : _d.emailsAdvice) ||
                         `IMPORTANT: Please double check that your email address is correct.\nIt's where we send your confirmation and e-tickets to!`),
-                    React.createElement(Input, { label: ((_e = texts === null || texts === void 0 ? void 0 : texts.form) === null || _e === void 0 ? void 0 : _e.email) || 'Email', value: email, onChangeText: setEmail, keyboardType: 'email-address', error: emailError, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles, autoCapitalize: 'none' }),
-                    React.createElement(Input, { label: ((_f = texts === null || texts === void 0 ? void 0 : texts.form) === null || _f === void 0 ? void 0 : _f.confirmEmail) || 'Confirm email', value: emailConfirmation, onChangeText: setEmailConfirmation, keyboardType: 'email-address', error: confirmEmailError, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles, autoCapitalize: 'none' }),
+                    React.createElement(Input, { label: ((_e = texts === null || texts === void 0 ? void 0 : texts.form) === null || _e === void 0 ? void 0 : _e.email) || 'Email', value: email, onChangeText: handleOnEmailChanged, keyboardType: 'email-address', error: emailError || emailErrorState, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles, autoCapitalize: 'none' }),
+                    React.createElement(Input, { label: ((_f = texts === null || texts === void 0 ? void 0 : texts.form) === null || _f === void 0 ? void 0 : _f.confirmEmail) || 'Confirm email', value: emailConfirmation, onChangeText: handleOnEmailConfirmationChanged, keyboardType: 'email-address', error: confirmEmailError || emailConfirmationErrorState, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles, autoCapitalize: 'none' }),
                     isAgeRequired && (React.createElement(DatePicker, { text: ((_g = texts === null || texts === void 0 ? void 0 : texts.form) === null || _g === void 0 ? void 0 : _g.dateOfBirth) || 'Date of Birth', onSelectDate: handleOnSelectDate, selectedDate: dateOfBirth, styles: styles === null || styles === void 0 ? void 0 : styles.datePicker, error: dateOfBirthError })),
                     !loggedUserFirstName && (React.createElement(React.Fragment, null,
                         React.createElement(Text, { style: styles === null || styles === void 0 ? void 0 : styles.passwordTitle }, ((_h = texts === null || texts === void 0 ? void 0 : texts.form) === null || _h === void 0 ? void 0 : _h.choosePassword) ||
                             'Choose a password for your new TICKETFAIRY account'),
-                        React.createElement(Input, { label: ((_j = texts === null || texts === void 0 ? void 0 : texts.form) === null || _j === void 0 ? void 0 : _j.password) || 'Password', isSecure: true, onChangeText: setPassword, error: passwordError, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles, autoCapitalize: 'none', secureTextEntry: true, textContentType: 'oneTimeCode' }),
-                        React.createElement(Input, { label: ((_k = texts === null || texts === void 0 ? void 0 : texts.form) === null || _k === void 0 ? void 0 : _k.confirmPassword) || 'Confirm password', isSecure: true, onChangeText: setPasswordConfirmation, error: confirmPasswordError, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles, autoCapitalize: 'none', secureTextEntry: true, textContentType: 'oneTimeCode' }))),
+                        React.createElement(Input, { label: ((_j = texts === null || texts === void 0 ? void 0 : texts.form) === null || _j === void 0 ? void 0 : _j.password) || 'Password', isSecure: true, onChangeText: handleOnPasswordChanged, error: passwordError || passwordErrorState, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles, autoCapitalize: 'none', secureTextEntry: true, textContentType: 'oneTimeCode' }),
+                        React.createElement(Input, { label: ((_k = texts === null || texts === void 0 ? void 0 : texts.form) === null || _k === void 0 ? void 0 : _k.confirmPassword) || 'Confirm password', isSecure: true, onChangeText: handleOnConfirmPasswordChanged, error: confirmPasswordError || confirmPasswordErrorState, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles, autoCapitalize: 'none', secureTextEntry: true, textContentType: 'oneTimeCode' }))),
                     !isPhoneHidden && (React.createElement(PhoneInput, { phoneNumber: phone, onChangePhoneNumber: handleOnChangePhoneNumber, styles: styles === null || styles === void 0 ? void 0 : styles.phoneInput, error: phoneError, texts: {
                             label: phoneLabel,
                             ...(_l = texts === null || texts === void 0 ? void 0 : texts.form) === null || _l === void 0 ? void 0 : _l.phoneInput,
                         } })),
                     !isTicketFree && (React.createElement(React.Fragment, null,
-                        React.createElement(Input, { label: addressLabel, value: street, onChangeText: setStreet, error: streetError, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles }),
-                        React.createElement(Input, { label: ((_m = texts === null || texts === void 0 ? void 0 : texts.form) === null || _m === void 0 ? void 0 : _m.city) || 'City', value: city, onChangeText: setCity, error: cityError, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles }),
-                        React.createElement(DropdownMaterial, { items: countries, onSelectItem: setSelectedCountry, selectedOption: selectedCountry, styles: styles === null || styles === void 0 ? void 0 : styles.dropdownMaterialStyles, materialInputProps: {
+                        React.createElement(Input, { label: addressLabel, value: street, onChangeText: handleOnStreetChanged, error: streetError || streetErrorState, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles }),
+                        React.createElement(Input, { label: ((_m = texts === null || texts === void 0 ? void 0 : texts.form) === null || _m === void 0 ? void 0 : _m.city) || 'City', value: city, onChangeText: handleOnCityChanged, error: cityError || cityErrorState, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles }),
+                        React.createElement(DropdownMaterial, { items: countries, onSelectItem: handleOnCountryChanged, selectedOption: selectedCountry, styles: styles === null || styles === void 0 ? void 0 : styles.dropdownMaterialStyles, materialInputProps: {
                                 label: ((_o = texts === null || texts === void 0 ? void 0 : texts.form) === null || _o === void 0 ? void 0 : _o.country) || 'Country',
+                                error: countryErrorState,
                             } }),
-                        React.createElement(Input, { label: ((_p = texts === null || texts === void 0 ? void 0 : texts.form) === null || _p === void 0 ? void 0 : _p.zipCode) || 'Postal Code / Zip Code', value: postalCode, onChangeText: setPostalCode, error: postalCodeError, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles }),
-                        React.createElement(DropdownMaterial, { items: states, onSelectItem: setSelectedState, selectedOption: selectedState, styles: styles === null || styles === void 0 ? void 0 : styles.dropdownMaterialStyles, materialInputProps: {
+                        React.createElement(Input, { label: ((_p = texts === null || texts === void 0 ? void 0 : texts.form) === null || _p === void 0 ? void 0 : _p.zipCode) || 'Postal Code / Zip Code', value: postalCode, onChangeText: handleOnPostalCodeChanged, error: postalCodeError || postalCodeErrorState, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles }),
+                        React.createElement(DropdownMaterial, { items: states, onSelectItem: handleOnStateChanged, selectedOption: selectedState, styles: styles === null || styles === void 0 ? void 0 : styles.dropdownMaterialStyles, materialInputProps: {
                                 label: ((_q = texts === null || texts === void 0 ? void 0 : texts.form) === null || _q === void 0 ? void 0 : _q.state) || 'State',
+                                error: stateErrorState,
                             } }))),
                     React.createElement(Checkbox, { onPress: handleIsSubToBrandToggle, text: brandCheckBoxText, isActive: isSubToBrand, styles: styles === null || styles === void 0 ? void 0 : styles.checkboxStyles }),
-                    !isTtfCheckboxHidden && (React.createElement(Checkbox, { onPress: handleIsSubToTicketFairyToggle, isActive: isSubToTicketFairy, customTextComp: React.createElement(Text, { style: (_r = styles === null || styles === void 0 ? void 0 : styles.customCheckbox) === null || _r === void 0 ? void 0 : _r.text },
-                            ((_s = texts === null || texts === void 0 ? void 0 : texts.form) === null || _s === void 0 ? void 0 : _s.isSubToTicketFairy) ||
+                    !isTtfCheckboxHidden && (React.createElement(Checkbox, { onPress: handleIsSubToTicketFairyToggle, isActive: isSubToTicketFairy, customTextComp: React.createElement(Text, { style: [
+                                (_r = styles === null || styles === void 0 ? void 0 : styles.customCheckbox) === null || _r === void 0 ? void 0 : _r.text,
+                                !!ttfPrivacyPolicyError && {
+                                    color: (_s = styles === null || styles === void 0 ? void 0 : styles.customCheckbox) === null || _s === void 0 ? void 0 : _s.errorColor,
+                                },
+                            ] },
+                            ((_t = texts === null || texts === void 0 ? void 0 : texts.form) === null || _t === void 0 ? void 0 : _t.isSubToTicketFairy) ||
                                 `I agree that The Ticket Fairy may use the personal data that have provided for marketing purposes, such as recommending events that I might be interested in, in accordance with its `,
-                            React.createElement(Text, { style: styles === null || styles === void 0 ? void 0 : styles.privacyPolicyLinkStyle, onPress: handleOpenPrivacyLink }, ((_t = texts === null || texts === void 0 ? void 0 : texts.form) === null || _t === void 0 ? void 0 : _t.privacyPolicy) || 'Privacy Policy'),
+                            React.createElement(Text, { style: styles === null || styles === void 0 ? void 0 : styles.privacyPolicyLinkStyle, onPress: handleOpenPrivacyLink }, ((_u = texts === null || texts === void 0 ? void 0 : texts.form) === null || _u === void 0 ? void 0 : _u.privacyPolicy) || 'Privacy Policy'),
                             "."), styles: { error: s.ttfPolicyError, ...styles === null || styles === void 0 ? void 0 : styles.checkboxStyles }, error: ttfPrivacyPolicyError })),
-                    ticketHoldersData.length > 0 && (React.createElement(React.Fragment, null,
-                        React.createElement(Text, { style: styles === null || styles === void 0 ? void 0 : styles.ticketHoldersTitle }, ((_u = texts === null || texts === void 0 ? void 0 : texts.form) === null || _u === void 0 ? void 0 : _u.ticketHoldersTitle) || 'Ticket Holders'),
-                        renderTicketHolders())),
-                    React.createElement(Button, { onPress: onSubmit, text: (texts === null || texts === void 0 ? void 0 : texts.checkoutButton) || 'CHECKOUT', isDisabled: !isDataValid, isLoading: isSubmittingData, styles: !isDataValid
+                    renderTicketHolders(),
+                    React.createElement(Button, { onPress: onSubmit, text: (texts === null || texts === void 0 ? void 0 : texts.checkoutButton) || 'CHECKOUT', isDisabled: isButtonDisabled, isLoading: isSubmittingData, styles: isButtonDisabled
                             ? {
                                 button: s.submitButtonDisabled,
                                 ...styles === null || styles === void 0 ? void 0 : styles.checkoutButtonDisabled,
@@ -969,7 +1353,6 @@ const Billing = forwardRef(({ styles, texts, cartProps: { isAgeRequired, isNameR
                 areLoadingIndicatorsEnabled && isLoading && React.createElement(Loading, null)),
             React.createElement(CartTimer, { secondsLeft: secondsLeft, styles: styles === null || styles === void 0 ? void 0 : styles.cartTimer, texts: texts === null || texts === void 0 ? void 0 : texts.cartTimer, shouldNotMinimize: shouldCartTimerNotMinimizeOnTap })));
     };
-    const isDataValid = checkBasicDataValid();
     return (React.createElement(BillingCore, { ref: billingCoreRef, onSecondsLeftChange: setSecondsLeft, onCartExpired: onCartExpired },
         React.createElement(SessionHandle, { ref: sessionHandleRef }, skippingStatus === 'skipping' && areLoadingIndicatorsEnabled
             ? renderCheckingOut()