tf-checkout-react-native 1.0.16 → 1.0.19

package/lib/containers/billingInfo/Billing.js

@@ -4,67 +4,59 @@ import _forEach from 'lodash/forEach';
 import _map from 'lodash/map';
 import React, { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { ActivityIndicator, Alert, Image, Linking, Text, View, } from 'react-native';
+import DeviceCountry, { TYPE_ANY } from 'react-native-device-country';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
-import { checkoutOrder, fetchCart, fetchCountries, fetchStates, fetchUserProfile, registerNewUser, } from '../../api/ApiClient';
 import Constants from '../../api/Constants';
-import { Button, Checkbox, DatePicker, Dropdown, Input, Loading, Login, } from '../../components';
+import { Button, Checkbox, DatePicker, DropdownMaterial, Input, Loading, Login, PhoneInput, } from '../../components';
+import { BillingCore } from '../../core';
 import { Config } from '../../helpers/Config';
+import { getCountryDialCode } from '../../helpers/CountryCodes';
 import { useDebounced } from '../../helpers/Debounced';
 import { getData, LocalStorageKeys } from '../../helpers/LocalStorage';
-import { validateAge, validateEmail, validateEmpty, validatePasswords, } from '../../helpers/Validators';
+import { validateAge, validateEmail, validateEmpty, validatePasswords, validatePhoneNumber, } from '../../helpers/Validators';
 import R from '../../res';
 import s from './styles';
-const Billing = ({ styles, texts, cartProps: { isAgeRequired, isNameRequired, isPhoneRequired, minimumAge, isBillingRequired, }, loginBrandImages, skipBillingConfig, areAlertsEnabled = true, areLoadingIndicatorsEnabled = true, onLoadingChange, onLoginError, onLoginSuccess, onRegisterError, onRegisterSuccess, onCheckoutSuccess, onCheckoutError, onFetchUserProfileSuccess, onFetchUserProfileError, onFetchCartError, onFetchCartSuccess, onFetchCountriesError, onFetchCountriesSuccess, onFetchStatesError, onFetchStatesSuccess, onFetchAccessTokenError, onFetchAccessTokenSuccess, onSkippingStatusChange, }) => {
+const Billing = ({ styles, texts, cartProps: { isAgeRequired, isNameRequired, isPhoneRequired, minimumAge, isBillingRequired, }, loginBrandImages, skipBillingConfig, areAlertsEnabled = true, areLoadingIndicatorsEnabled = true, onLoadingChange, onLoginError, onLoginSuccess, onRegisterError, onRegisterSuccess, onCheckoutSuccess, onCheckoutError, onFetchUserProfileSuccess, onFetchUserProfileError, onFetchCartError, onFetchCartSuccess, onFetchCountriesError, onFetchCountriesSuccess, onFetchStatesError, onFetchStatesSuccess, onSkippingStatusChange, onLogoutSuccess, onLogoutError, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
     //#region Labels
-    const countryLabel = ((_a = texts === null || texts === void 0 ? void 0 : texts.form) === null || _a === void 0 ? void 0 : _a.country) || 'Country';
-    const stateLabel = ((_b = texts === null || texts === void 0 ? void 0 : texts.form) === null || _b === void 0 ? void 0 : _b.country) || 'State/County';
-    const defaultCountry = { value: '-1', label: countryLabel };
-    const defaultState = { value: '-1', label: stateLabel };
-    const optionalText = ((_c = texts === null || texts === void 0 ? void 0 : texts.form) === null || _c === void 0 ? void 0 : _c.optional) || ' (optional)';
-    const brandCheckBoxText = useMemo(() => {
-        var _a, _b;
-        return ((_a = texts === null || texts === void 0 ? void 0 : texts.form) === null || _a === void 0 ? void 0 : _a.isSubToBrand)
-            ? (_b = texts.form) === null || _b === void 0 ? void 0 : _b.isSubToBrand
-            : 'I would like to be updated on news, events and offers.';
-    }, [(_d = texts === null || texts === void 0 ? void 0 : texts.form) === null || _d === void 0 ? void 0 : _d.isSubToBrand]);
+    const holderLabels = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const optional = isNameRequired ? '' : ((_a = texts === null || texts === void 0 ? void 0 : texts.form) === null || _a === void 0 ? void 0 : _a.optional) || '(optional)';
+        return {
+            firstName: ((_b = texts === null || texts === void 0 ? void 0 : texts.form) === null || _b === void 0 ? void 0 : _b.holderFirstName)
+                ? `${texts.form.holderFirstName} ${optional}`
+                : `First Name ${optional}`,
+            lastName: ((_c = texts === null || texts === void 0 ? void 0 : texts.form) === null || _c === void 0 ? void 0 : _c.holderLastName)
+                ? `${texts.form.holderLastName} ${optional}`
+                : `Last Name ${optional}`,
+            email: ((_d = texts === null || texts === void 0 ? void 0 : texts.form) === null || _d === void 0 ? void 0 : _d.holderEmail)
+                ? `${texts.form.holderEmail} ${((_e = texts === null || texts === void 0 ? void 0 : texts.form) === null || _e === void 0 ? void 0 : _e.optional) || '(optional)'}`
+                : `Email ${optional}`,
+            phone: ((_f = texts === null || texts === void 0 ? void 0 : texts.form) === null || _f === void 0 ? void 0 : _f.holderPhone)
+                ? `${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]);
+    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(() => {
-        var _a, _b;
-        const optionalPhone = isPhoneRequired ? '' : optionalText;
-        return ((_a = texts === null || texts === void 0 ? void 0 : texts.form) === null || _a === void 0 ? void 0 : _a.phone)
-            ? `${(_b = texts === null || texts === void 0 ? void 0 : texts.form) === null || _b === void 0 ? void 0 : _b.phone} ${optionalPhone}`
+        var _a, _b, _c;
+        const optionalPhone = isPhoneRequired
+            ? ''
+            : ((_a = texts === null || texts === void 0 ? void 0 : texts.form) === null || _a === void 0 ? void 0 : _a.optional) || ' (optional)';
+        return ((_b = texts === null || texts === void 0 ? void 0 : texts.form) === null || _b === void 0 ? void 0 : _b.phone)
+            ? `${(_c = texts === null || texts === void 0 ? void 0 : texts.form) === null || _c === void 0 ? void 0 : _c.phone} ${optionalPhone}`
             : `Phone ${optionalPhone}`;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isPhoneRequired, texts]);
     const addressLabel = useMemo(() => {
-        var _a;
+        var _a, _b;
         const optionalAddress = Config.IS_BILLING_STREET_NAME_REQUIRED
             ? ''
-            : optionalText;
-        return ((_a = texts === null || texts === void 0 ? void 0 : texts.form) === null || _a === void 0 ? void 0 : _a.street)
+            : ((_a = texts === null || texts === void 0 ? void 0 : texts.form) === null || _a === void 0 ? void 0 : _a.optional) || ' (optional)';
+        return ((_b = texts === null || texts === void 0 ? void 0 : texts.form) === null || _b === void 0 ? void 0 : _b.street)
             ? `${texts.form.street} ${optionalAddress}`
             : `Street ${optionalAddress}`;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [texts]);
-    const holderLabels = useMemo(() => {
-        var _a, _b, _c, _d;
-        const optional = isNameRequired ? '' : optionalText;
-        return {
-            firstName: ((_a = texts === null || texts === void 0 ? void 0 : texts.form) === null || _a === void 0 ? void 0 : _a.holderFirstName)
-                ? `${texts.form.holderFirstName} ${optional}`
-                : `First Name ${optional}`,
-            lastName: ((_b = texts === null || texts === void 0 ? void 0 : texts.form) === null || _b === void 0 ? void 0 : _b.holderLastName)
-                ? `${texts.form.holderLastName} ${optional}`
-                : `Last Name ${optional}`,
-            email: ((_c = texts === null || texts === void 0 ? void 0 : texts.form) === null || _c === void 0 ? void 0 : _c.holderEmail)
-                ? `${texts.form.holderEmail} ${optionalText}`
-                : `Email ${optionalText}`,
-            phone: ((_d = texts === null || texts === void 0 ? void 0 : texts.form) === null || _d === void 0 ? void 0 : _d.holderPhone)
-                ? `${texts.form.holderPhone} ${optionalText}`
-                : `Phone ${optionalText}`,
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isNameRequired, texts]);
     //#endregion
     //#region State
     const [isLoading, setIsLoading] = useState(false);
@@ -90,8 +82,8 @@ const Billing = ({ styles, texts, cartProps: { isAgeRequired, isNameRequired, is
     const [selectedState, setSelectedState] = useState(undefined);
     const [ticketHoldersData, setTicketHoldersData] = useState([]);
     const [numberOfTicketHolders, setNumberOfTicketHolders] = useState();
-    const [countries, setCountries] = useState([defaultCountry]);
-    const [states, setStates] = useState([defaultState]);
+    const [states, setStates] = useState([]);
+    const [countries, setCountries] = useState([]);
     const [isLoginDialogVisible, setIsLoginDialogVisible] = useState(false);
     const [skipping, setSkippingStatus] = useState(undefined);
     const [isTtfCheckboxHidden, setIsTtfCheckboxHidden] = useState(false);
@@ -102,7 +94,7 @@ const Billing = ({ styles, texts, cartProps: { isAgeRequired, isNameRequired, is
     const confirmEmailError = useDebounced(emailConfirmation, () => validateEmail(emailConfirmation, email));
     const passwordError = useDebounced(password, () => validatePasswords(password, passwordConfirmation));
     const confirmPasswordError = useDebounced(passwordConfirmation, () => validatePasswords(passwordConfirmation, password));
-    const phoneError = useDebounced(phone, validateEmpty);
+    const [phoneError, setPhoneError] = useState('');
     const streetError = useDebounced(street, validateEmpty);
     const cityError = useDebounced(city, validateEmpty);
     const postalCodeError = useDebounced(postalCode, validateEmpty);
@@ -110,7 +102,7 @@ const Billing = ({ styles, texts, cartProps: { isAgeRequired, isNameRequired, is
     // End of errors state
     //#endregion
     const getSkippingStatus = (numOfTickets) => {
-        if (isBillingRequired) {
+        if (isBillingRequired || skipping === 'fail') {
             return 'false';
         }
         if (numOfTickets > 1 || isAgeRequired) {
@@ -123,8 +115,24 @@ const Billing = ({ styles, texts, cartProps: { isAgeRequired, isNameRequired, is
     //#region Refs
     const storedToken = useRef('');
     const storedProfileData = useRef({});
+    const phoneErrorCounter = useRef(0);
+    const billingCoreRef = useRef(null);
     //#endregion
     //#region Handlers
+    const handleSetPhoneError = useCallback((error) => {
+        if (isPhoneRequired && phone.length > 0) {
+            setPhoneError(error);
+        }
+    }, [isPhoneRequired, phone.length]);
+    const handleOnChangePhoneNumber = (payload) => {
+        var _a, _b;
+        setPhone(payload.input);
+        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');
+        }
+        phoneErrorCounter.current = phoneErrorCounter.current + 1;
+        setPhoneError('');
+    };
     const handleOnLoadingChange = useCallback((loading) => {
         if (onLoadingChange) {
             onLoadingChange(loading);
@@ -178,28 +186,44 @@ const Billing = ({ styles, texts, cartProps: { isAgeRequired, isNameRequired, is
             storedToken.current = accessToken;
         }
     };
-    const handleOnLoginSuccess = async (userProfile, accessToken) => {
-        if (onLoginSuccess) {
-            onLoginSuccess({
-                accessToken: accessToken,
-                userData: userProfile,
-            });
+    const handleOnLoginSuccess = async (userProfile) => {
+        var _a, _b;
+        let phoneCountry = 'US';
+        const accessToken = await getData(LocalStorageKeys.ACCESS_TOKEN);
+        const usrProfile = { ...userProfile };
+        onLoginSuccess === null || onLoginSuccess === void 0 ? void 0 : onLoginSuccess(usrProfile);
+        try {
+            const deviceCountry = await DeviceCountry.getCountryCode(TYPE_ANY);
+            phoneCountry = deviceCountry.code.toUpperCase();
+        }
+        catch (err) {
+            phoneCountry = 'US';
+        }
+        if (!usrProfile.phone.includes('+')) {
+            usrProfile.phone = `${getCountryDialCode(phoneCountry)}${usrProfile.phone}`;
         }
         if (!isBillingRequired && skipping === 'fail') {
             setSkippingStatus('skipping');
+            const phoneValidError = validatePhoneNumber({
+                phoneNumber: userProfile.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,
+            });
+            if (phoneValidError) {
+                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) || 'Please enter a valid phone number');
+            }
             await performCheckout(getCheckoutBodyWhenSkipping({
-                userProfile: userProfile,
+                userProfile: usrProfile,
                 ticketsQuantity: numberOfTicketHolders || 1,
-            }), accessToken);
+            }));
         }
-        handleSetFormDataFromUserProfile(userProfile, accessToken);
+        handleSetFormDataFromUserProfile(usrProfile, accessToken);
     };
-    const handleOnLoginFail = (error) => {
-        if (onLoginError) {
-            onLoginError(error);
-        }
+    const handleOnLoginError = (error) => {
+        onLoginError === null || onLoginError === void 0 ? void 0 : onLoginError(error);
     };
     const handleOnLogoutSuccess = () => {
+        var _a, _b;
         setFirstName('');
         setLastName('');
         setEmail('');
@@ -212,8 +236,16 @@ const Billing = ({ styles, texts, cartProps: { isAgeRequired, isNameRequired, is
         setPasswordConfirmation('');
         setCountryId('');
         setStateId('');
-        setSelectedCountry(defaultCountry);
-        setStates([defaultState]);
+        setSelectedCountry({
+            value: '-1',
+            label: ((_a = texts === null || texts === void 0 ? void 0 : texts.form) === null || _a === void 0 ? void 0 : _a.country) || 'Country',
+        });
+        setStates([
+            {
+                value: '-1',
+                label: ((_b = texts === null || texts === void 0 ? void 0 : texts.form) === null || _b === void 0 ? void 0 : _b.state) || 'State/County',
+            },
+        ]);
         setIsSubToTicketFairy(false);
         setIsSubToBrand(false);
         storedToken.current = '';
@@ -226,6 +258,7 @@ const Billing = ({ styles, texts, cartProps: { isAgeRequired, isNameRequired, is
             th.phone = '';
         });
         setTicketHoldersData(thData);
+        onLogoutSuccess === null || onLogoutSuccess === void 0 ? void 0 : onLogoutSuccess();
     };
     const handleOnSelectDate = (newDate) => {
         const ageError = validateAge(newDate, minimumAge);
@@ -234,7 +267,15 @@ const Billing = ({ styles, texts, cartProps: { isAgeRequired, isNameRequired, is
     };
     //#endregion
     //#region Form validation
+    const checkIsStoredPhoneNumberFormat = (storedPhoneNumber) => {
+        if (!storedPhoneNumber.includes('+')) {
+            handleSetPhoneError((texts === null || texts === void 0 ? void 0 : texts.invalidPhoneNumberError) || 'Please enter a valid phone number');
+            return false;
+        }
+        return true;
+    };
     const checkBasicDataValid = () => {
+        var _a, _b;
         if (!firstName ||
             !lastName ||
             !email ||
@@ -245,7 +286,11 @@ const Billing = ({ styles, texts, cartProps: { isAgeRequired, isNameRequired, is
             (selectedCountry === null || selectedCountry === void 0 ? void 0 : selectedCountry.value) === '-1') {
             return false;
         }
-        if (isPhoneRequired && !phone) {
+        if (isPhoneRequired &&
+            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,
+            })) {
             return false;
         }
         if (Config.IS_BILLING_STREET_NAME_REQUIRED && !street) {
@@ -253,7 +298,7 @@ const Billing = ({ styles, texts, cartProps: { isAgeRequired, isNameRequired, is
         }
         return true;
     };
-    const fillAllRequiredFieldsAlert = ((_e = texts === null || texts === void 0 ? void 0 : texts.form) === null || _e === void 0 ? void 0 : _e.fillAllRequiredFieldsAlert) ||
+    const fillAllRequiredFieldsAlert = ((_b = texts === null || texts === void 0 ? void 0 : texts.form) === null || _b === void 0 ? void 0 : _b.fillAllRequiredFieldsAlert) ||
         'You must fill all Ticket Holder required fields';
     const checkExtraDataValid = () => {
         if (isAgeRequired) {
@@ -273,38 +318,27 @@ const Billing = ({ styles, texts, cartProps: { isAgeRequired, isNameRequired, is
     //#endregion
     //#region Submit form
     const handleOnRegisterFail = (rawError) => {
-        if (onRegisterError) {
-            onRegisterError(rawError);
-        }
+        onRegisterError === null || onRegisterError === void 0 ? void 0 : onRegisterError(rawError);
     };
-    const performCheckout = async (checkoutBody, pToken) => {
-        try {
-            setIsSubmittingData(true);
-            const { error: checkoutError, data: checkoutData } = await checkoutOrder(checkoutBody, pToken);
-            setIsSubmittingData(false);
-            if (checkoutError) {
-                onCheckoutError === null || onCheckoutError === void 0 ? void 0 : onCheckoutError(checkoutError);
-                setSkippingStatus('false');
-                return showAlert(checkoutError.message);
-            }
-            const checkoutResponseData = {
-                id: checkoutData.data.data.attributes.id,
-                hash: checkoutData.data.data.attributes.hash,
-                total: checkoutData.data.data.attributes.total,
-                status: checkoutData.data.data.attributes.status,
-            };
-            setSkippingStatus('success');
-            onCheckoutSuccess(checkoutResponseData);
+    const performCheckout = async (checkoutBody) => {
+        if (!billingCoreRef.current) {
+            return onCheckoutError === null || onCheckoutError === void 0 ? void 0 : onCheckoutError({ message: 'BillingCore is not ready' });
         }
-        catch (err) {
-            setIsSubmittingData(false);
+        setIsSubmittingData(true);
+        const { error: checkoutError, data: checkoutData } = await billingCoreRef.current.checkoutOrder(checkoutBody);
+        setIsSubmittingData(false);
+        if (checkoutError) {
+            onCheckoutError === null || onCheckoutError === void 0 ? void 0 : onCheckoutError(checkoutError);
             setSkippingStatus('false');
-            if (onCheckoutError) {
-                onCheckoutError({
-                    message: 'Error while performing checkout',
-                });
-            }
+            return showAlert(checkoutError.message);
         }
+        if (!checkoutData) {
+            onCheckoutError === null || onCheckoutError === void 0 ? void 0 : onCheckoutError({ message: 'Checkout returned not data' });
+            setSkippingStatus('false');
+            return showAlert('Checkout returned not data');
+        }
+        setSkippingStatus('success');
+        onCheckoutSuccess(checkoutData);
     };
     const getRegisterFormData = (checkoutBody) => {
         const bodyFormData = new FormData();
@@ -317,9 +351,13 @@ const Billing = ({ styles, texts, cartProps: { isAgeRequired, isNameRequired, is
         return bodyFormData;
     };
     const performNewUserRegister = async (checkoutBody) => {
-        const registerForm = getRegisterFormData(checkoutBody);
+        if (!billingCoreRef.current) {
+            showAlert('BillingCore is not ready');
+            return onRegisterError === null || onRegisterError === void 0 ? void 0 : onRegisterError({ message: 'BillingCore is not initialized' });
+        }
         setIsSubmittingData(true);
-        const { data: registerResponseData, error: registerResponseError } = await registerNewUser(registerForm);
+        const registerForm = getRegisterFormData(checkoutBody);
+        const { data: registerResponseData, error: registerResponseError } = await billingCoreRef.current.registerNewUser(registerForm);
         if (registerResponseError) {
             setIsSubmittingData(false);
             if (registerResponseError.isAlreadyRegistered) {
@@ -335,15 +373,15 @@ const Billing = ({ styles, texts, cartProps: { isAgeRequired, isNameRequired, is
             handleOnRegisterFail('Register returned no data');
             return showAlert('Register returned no data');
         }
+        const accessToken = await getData(LocalStorageKeys.ACCESS_TOKEN);
+        const refreshToken = await getData(LocalStorageKeys.REFRESH_TOKEN);
         const tokens = {
-            accessToken: registerResponseData.access_token,
-            refreshToken: registerResponseData.refresh_token,
+            accessToken: accessToken,
+            refreshToken: refreshToken,
         };
         storedToken.current = tokens.accessToken;
-        if (onRegisterSuccess) {
-            onRegisterSuccess(tokens);
-        }
-        await performCheckout(checkoutBody, tokens.accessToken);
+        onRegisterSuccess === null || onRegisterSuccess === void 0 ? void 0 : onRegisterSuccess();
+        await performCheckout(checkoutBody);
     };
     const getCheckoutBody = () => {
         let parsedTicketHolders = [];
@@ -430,7 +468,7 @@ const Billing = ({ styles, texts, cartProps: { isAgeRequired, isNameRequired, is
         }
         const checkoutBody = getCheckoutBody();
         if (loggedUserFirstName && storedToken.current) {
-            await performCheckout(checkoutBody, storedToken.current);
+            await performCheckout(checkoutBody);
         }
         else {
             await performNewUserRegister(checkoutBody);
@@ -438,57 +476,76 @@ const Billing = ({ styles, texts, cartProps: { isAgeRequired, isNameRequired, is
     };
     //#endregion
     const fetchData = async () => {
+        var _a, _b;
+        if (!billingCoreRef.current) {
+            onFetchCartError === null || onFetchCartError === void 0 ? void 0 : onFetchCartError({ message: 'BillingCoreRef not initialized' });
+            return showAlert('BillingCoreRef not initialized');
+        }
         setIsLoading(true);
+        let phoneCountry = 'US';
+        let phoneCountryDialCode = '+1';
         let usrPrfl;
+        try {
+            const deviceCountry = await DeviceCountry.getCountryCode(TYPE_ANY);
+            phoneCountry = deviceCountry.code.toUpperCase();
+            phoneCountryDialCode = getCountryDialCode(phoneCountry);
+        }
+        catch (err) {
+            phoneCountry = 'US';
+        }
         const usrTkn = await getData(LocalStorageKeys.ACCESS_TOKEN);
-        const { data: countriesData, error: countriesError } = await fetchCountries();
+        let skippingStatus;
+        const { countriesData, countriesError } = await billingCoreRef.current.getCountries();
         if (countriesError) {
+            setSkippingStatus('fail');
             setIsLoading(false);
-            if (onFetchCountriesError) {
-                onFetchCountriesError(countriesError);
-            }
+            onFetchCountriesError === null || onFetchCountriesError === void 0 ? void 0 : onFetchCountriesError(countriesError);
             return showAlert(countriesError.message || 'Error fetching countries');
         }
-        if (onFetchCountriesSuccess) {
-            onFetchCountriesSuccess();
-        }
+        onFetchCountriesSuccess === null || onFetchCountriesSuccess === void 0 ? void 0 : onFetchCountriesSuccess();
         const parsedCountries = _map(countriesData, (item, index) => {
             return { label: item, value: index };
         });
         if (usrTkn) {
             storedToken.current = usrTkn;
-            const { error: userProfileError, userProfile: userProfileResponse } = await fetchUserProfile(usrTkn);
-            if (userProfileError || !userProfileResponse) {
+            const { userProfileError, userProfileData } = await billingCoreRef.current.getUserProfile();
+            if (userProfileError || !userProfileData) {
+                setSkippingStatus('fail');
                 setIsLoading(false);
-                if (onFetchUserProfileError) {
-                    onFetchUserProfileError(userProfileError);
-                }
+                onFetchUserProfileError === null || onFetchUserProfileError === void 0 ? void 0 : onFetchUserProfileError(userProfileError);
                 return showAlert((userProfileError === null || userProfileError === void 0 ? void 0 : userProfileError.message) || 'Error fetching user profile');
             }
-            if (onFetchUserProfileSuccess) {
-                onFetchUserProfileSuccess({
-                    firstName: userProfileResponse.firstName,
-                    lastName: userProfileResponse.lastName,
-                });
-            }
-            usrPrfl = userProfileResponse;
+            onFetchUserProfileSuccess === null || onFetchUserProfileSuccess === void 0 ? void 0 : onFetchUserProfileSuccess({
+                firstName: userProfileData.firstName,
+                lastName: userProfileData.lastName,
+            });
+            usrPrfl = userProfileData;
         }
         else {
-            parsedCountries.unshift(defaultCountry);
-            setSelectedCountry(defaultCountry);
+            skippingStatus = 'fail';
+            parsedCountries.unshift({
+                value: '-1',
+                label: ((_a = texts === null || texts === void 0 ? void 0 : texts.form) === null || _a === void 0 ? void 0 : _a.country) || 'Country',
+            });
+            setSelectedCountry({
+                value: '-1',
+                label: ((_b = texts === null || texts === void 0 ? void 0 : texts.form) === null || _b === void 0 ? void 0 : _b.country) || 'Country',
+            });
         }
-        const { cartData, cartError } = await fetchCart();
-        if (cartError) {
+        const { cartData, cartError } = await billingCoreRef.current.getCart();
+        if (cartError || !cartData) {
+            setSkippingStatus('fail');
             setIsLoading(false);
-            if (onFetchCartError) {
-                onFetchCartError(cartError);
-            }
-            return showAlert(cartError.message);
+            onFetchCartError === null || onFetchCartError === void 0 ? void 0 : onFetchCartError(cartError || { message: 'Error fetching cart' });
+            return showAlert((cartError === null || cartError === void 0 ? void 0 : cartError.message) || 'Error fetching cart');
         }
-        if (onFetchCartSuccess) {
-            onFetchCartSuccess();
+        onFetchCartSuccess === null || onFetchCartSuccess === void 0 ? void 0 : onFetchCartSuccess();
+        if (skippingStatus === 'fail') {
+            setSkippingStatus('fail');
+        }
+        else {
+            setSkippingStatus(getSkippingStatus(cartData.quantity));
         }
-        setSkippingStatus(getSkippingStatus(cartData.quantity));
         setNumberOfTicketHolders(cartData.quantity);
         setIsSubToBrand(cartData.isMarketingOptedIn);
         setIsSubToTicketFairy(cartData.isTfOptIn);
@@ -502,20 +559,36 @@ const Billing = ({ styles, texts, cartProps: { isAgeRequired, isNameRequired, is
                 phone: i === 0 && usrPrfl ? usrPrfl.phone : '',
             });
         }
-        if (!isBillingRequired && usrTkn && usrPrfl && cartData) {
-            const checkoutBody = getCheckoutBodyWhenSkipping({
-                userProfile: usrPrfl,
-                ticketsQuantity: cartData.quantity,
-            });
-            await performCheckout(checkoutBody, usrTkn);
-        }
-        else {
-            if (skipping === 'skipping') {
+        if (usrPrfl) {
+            if (!checkIsStoredPhoneNumberFormat(usrPrfl.phone)) {
+                showAlert((texts === null || texts === void 0 ? void 0 : texts.invalidPhoneNumberError) || 'Please enter a valid phone number');
+                skippingStatus = 'fail';
                 setSkippingStatus('fail');
+                setIsLoading(false);
             }
+            else {
+                // We can perfom Checkout process since phone is valid
+                if (!isBillingRequired && usrTkn && cartData) {
+                    const checkoutBody = getCheckoutBodyWhenSkipping({
+                        userProfile: usrPrfl,
+                        ticketsQuantity: cartData.quantity,
+                    });
+                    return await performCheckout(checkoutBody);
+                }
+                else {
+                    if (skipping === 'skipping') {
+                        setSkippingStatus('fail');
+                    }
+                }
+            }
+            handleSetFormDataFromUserProfile({
+                ...usrPrfl,
+                phone: `${phoneCountryDialCode}${usrPrfl.phone}`,
+            });
         }
-        if (usrPrfl) {
-            handleSetFormDataFromUserProfile(usrPrfl);
+        else {
+            // There is no user profile data
+            setPhone(phoneCountryDialCode);
         }
         setCountries(parsedCountries);
         setTicketHoldersData(tHolders);
@@ -536,19 +609,22 @@ const Billing = ({ styles, texts, cartProps: { isAgeRequired, isNameRequired, is
     }, [countries, countryId]);
     useEffect(() => {
         const getStates = async () => {
-            const { data: statesData, error: statesError } = await fetchStates(selectedCountry.value);
+            if (!selectedCountry) {
+                return;
+            }
+            if (!billingCoreRef.current) {
+                onFetchCartError === null || onFetchCartError === void 0 ? void 0 : onFetchCartError({ message: 'BillingCoreRef not initialized' });
+                return showAlert('BillingCoreRef not initialized');
+            }
+            const { statesData, statesError } = await billingCoreRef.current.getStates(selectedCountry.value.toString());
             if (statesError) {
-                if (onFetchStatesError) {
-                    onFetchStatesError(statesError);
-                }
+                onFetchStatesError === null || onFetchStatesError === void 0 ? void 0 : onFetchStatesError(statesError);
                 return showAlert((statesError === null || statesError === void 0 ? void 0 : statesError.message) || 'Error fetching states');
             }
             const parsedStates = _map(statesData, (item, index) => {
                 return { label: item, value: index };
             });
-            if (onFetchStatesSuccess) {
-                onFetchStatesSuccess();
-            }
+            onFetchStatesSuccess === null || onFetchStatesSuccess === void 0 ? void 0 : onFetchStatesSuccess();
             setStates(parsedStates);
         };
         if (selectedCountry && selectedCountry.value !== '-1') {
@@ -557,15 +633,22 @@ const Billing = ({ styles, texts, cartProps: { isAgeRequired, isNameRequired, is
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [selectedCountry]);
     useEffect(() => {
+        var _a, _b;
         if (states.length > 1 && stateId) {
             const selectedStateItem = _find(states, (item) => item.value === stateId);
             if (!selectedStateItem) {
-                return setSelectedState(defaultState);
+                return setSelectedState({
+                    value: '-1',
+                    label: ((_a = texts === null || texts === void 0 ? void 0 : texts.form) === null || _a === void 0 ? void 0 : _a.state) || 'State/County',
+                });
             }
             setSelectedState(selectedStateItem);
         }
         else {
-            setSelectedState(defaultState);
+            setSelectedState({
+                value: '-1',
+                label: ((_b = texts === null || texts === void 0 ? void 0 : texts.form) === null || _b === void 0 ? void 0 : _b.state) || 'State/County',
+            });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [stateId, states]);
@@ -582,6 +665,19 @@ const Billing = ({ styles, texts, cartProps: { isAgeRequired, isNameRequired, is
     }, [ticketHoldersData]);
     initTicketHoldersErrors();
     useEffect(() => {
+        var _a, _b;
+        setCountries([
+            {
+                value: '-1',
+                label: ((_a = texts === null || texts === void 0 ? void 0 : texts.form) === null || _a === void 0 ? void 0 : _a.country) || 'Country',
+            },
+        ]);
+        setStates([
+            {
+                value: '-1',
+                label: ((_b = texts === null || texts === void 0 ? void 0 : texts.form) === null || _b === void 0 ? void 0 : _b.state) || 'State/County',
+            },
+        ]);
         fetchData();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
@@ -633,51 +729,59 @@ const Billing = ({ styles, texts, cartProps: { isAgeRequired, isNameRequired, is
                 !!(skipBillingConfig === null || skipBillingConfig === void 0 ? void 0 : skipBillingConfig.isActivityIndicatorVisible) && (React.createElement(ActivityIndicator, { color: ((_a = skippingStyles === null || skippingStyles === void 0 ? void 0 : skippingStyles.activityIndicator) === null || _a === void 0 ? void 0 : _a.color) || R.colors.black, size: ((_b = skippingStyles === null || skippingStyles === void 0 ? void 0 : skippingStyles.activityIndicator) === null || _b === void 0 ? void 0 : _b.size) || 'large' })))));
     };
     const isDataValid = checkBasicDataValid();
-    return skipping === 'skipping' && areLoadingIndicatorsEnabled ? (renderCheckingOut()) : (React.createElement(KeyboardAwareScrollView, { extraScrollHeight: 32 },
-        React.createElement(View, { style: styles === null || styles === void 0 ? void 0 : styles.rootContainer },
-            React.createElement(Login, { onLoginSuccessful: handleOnLoginSuccess, onLogoutSuccess: handleOnLogoutSuccess, isLoginDialogVisible: isLoginDialogVisible, showLoginDialog: showLoginDialog, hideLoginDialog: hideLoginDialog, userFirstName: loggedUserFirstName, onLoginError: handleOnLoginFail, texts: texts === null || texts === void 0 ? void 0 : texts.loginTexts, styles: styles === null || styles === void 0 ? void 0 : styles.loginStyles, brandImages: loginBrandImages, onFetchAccessTokenError: onFetchAccessTokenError, onFetchAccessTokenSuccess: onFetchAccessTokenSuccess, onFetchUserProfileError: onFetchUserProfileError, onFetchUserProfileSuccess: onFetchUserProfileSuccess }),
-            React.createElement(Text, { style: styles === null || styles === void 0 ? void 0 : styles.screenTitle }, ((_f = texts === null || texts === void 0 ? void 0 : texts.form) === null || _f === void 0 ? void 0 : _f.getYourTicketsTitle) || 'Get Your Tickets'),
-            React.createElement(Input, { label: ((_g = texts === null || texts === void 0 ? void 0 : texts.form) === null || _g === void 0 ? void 0 : _g.firstName) || 'First name', value: firstName, onChangeText: setFirstName, error: firstNameError, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles }),
-            React.createElement(Input, { label: ((_h = texts === null || texts === void 0 ? void 0 : texts.form) === null || _h === void 0 ? void 0 : _h.lastName) || 'Last name', value: lastName, onChangeText: setLastName, error: lastNameError, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles }),
-            React.createElement(Text, { style: styles === null || styles === void 0 ? void 0 : styles.texts }, ((_j = texts === null || texts === void 0 ? void 0 : texts.form) === null || _j === void 0 ? void 0 : _j.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: ((_k = texts === null || texts === void 0 ? void 0 : texts.form) === null || _k === void 0 ? void 0 : _k.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: ((_l = texts === null || texts === void 0 ? void 0 : texts.form) === null || _l === void 0 ? void 0 : _l.confirmEmail) || 'Confirm email', value: emailConfirmation, onChangeText: setEmailConfirmation, keyboardType: 'email-address', error: confirmEmailError, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles, autoCapitalize: 'none' }),
-            isAgeRequired && (React.createElement(DatePicker, { text: ((_m = texts === null || texts === void 0 ? void 0 : texts.form) === null || _m === void 0 ? void 0 : _m.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 }, ((_o = texts === null || texts === void 0 ? void 0 : texts.form) === null || _o === void 0 ? void 0 : _o.choosePassword) ||
-                    'Choose a password for your new TICKETFAIRY account'),
-                React.createElement(Input, { label: ((_p = texts === null || texts === void 0 ? void 0 : texts.form) === null || _p === void 0 ? void 0 : _p.password) || 'Password', isSecure: true, onChangeText: setPassword, error: passwordError, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles, autoCapitalize: 'none', secureTextEntry: true }),
-                React.createElement(Input, { label: ((_q = texts === null || texts === void 0 ? void 0 : texts.form) === null || _q === void 0 ? void 0 : _q.confirmPassword) || 'Confirm password', isSecure: true, onChangeText: setPasswordConfirmation, error: confirmPasswordError, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles, autoCapitalize: 'none', secureTextEntry: true }))),
-            React.createElement(Input, { label: phoneLabel, value: phone, onChangeText: setPhone, keyboardType: 'phone-pad', error: phoneError, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles }),
-            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: ((_r = texts === null || texts === void 0 ? void 0 : texts.form) === null || _r === void 0 ? void 0 : _r.city) || 'City', value: city, onChangeText: setCity, error: cityError, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles }),
-            React.createElement(Dropdown, { items: countries, onSelectItem: setSelectedCountry, selectedOption: selectedCountry, styles: styles === null || styles === void 0 ? void 0 : styles.dropdownStyles }),
-            React.createElement(Input, { label: ((_s = texts === null || texts === void 0 ? void 0 : texts.form) === null || _s === void 0 ? void 0 : _s.zipCode) || 'Postal Code / Zip Code', value: postalCode, onChangeText: setPostalCode, error: postalCodeError, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles }),
-            React.createElement(Dropdown, { items: states, onSelectItem: setSelectedState, selectedOption: selectedState, styles: styles === null || styles === void 0 ? void 0 : styles.dropdownStyles }),
-            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: (_t = styles === null || styles === void 0 ? void 0 : styles.customCheckbox) === null || _t === void 0 ? void 0 : _t.text },
-                    ((_u = texts === null || texts === void 0 ? void 0 : texts.form) === null || _u === void 0 ? void 0 : _u.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 }, ((_v = texts === null || texts === void 0 ? void 0 : texts.form) === null || _v === void 0 ? void 0 : _v.privacyPolicy) || 'Privacy Policy'),
-                    "."), styles: styles === null || styles === void 0 ? void 0 : styles.checkboxStyles })),
-            ticketHoldersData.length > 0 && (React.createElement(React.Fragment, null,
-                React.createElement(Text, { style: styles === null || styles === void 0 ? void 0 : styles.ticketHoldersTitle }, ((_w = texts === null || texts === void 0 ? void 0 : texts.form) === null || _w === void 0 ? void 0 : _w.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
-                    ? {
-                        button: s.submitButtonDisabled,
-                        ...styles === null || styles === void 0 ? void 0 : styles.checkoutButtonDisabled,
-                    }
-                    : {
-                        container: [
-                            s.submitButton,
-                            (_x = styles === null || styles === void 0 ? void 0 : styles.checkoutButton) === null || _x === void 0 ? void 0 : _x.container,
-                        ],
-                        text: (_y = styles === null || styles === void 0 ? void 0 : styles.checkoutButton) === null || _y === void 0 ? void 0 : _y.text,
-                        button: (_z = styles === null || styles === void 0 ? void 0 : styles.checkoutButton) === null || _z === void 0 ? void 0 : _z.button,
-                    } })),
-        areLoadingIndicatorsEnabled && isLoading && React.createElement(Loading, null)));
+    return skipping === 'skipping' && areLoadingIndicatorsEnabled ? (renderCheckingOut()) : (React.createElement(BillingCore, { ref: billingCoreRef },
+        React.createElement(KeyboardAwareScrollView, { extraScrollHeight: 32 },
+            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 }, ((_c = texts === null || texts === void 0 ? void 0 : texts.form) === null || _c === void 0 ? void 0 : _c.getYourTicketsTitle) || 'Get Your Tickets'),
+                React.createElement(Input, { label: ((_d = texts === null || texts === void 0 ? void 0 : texts.form) === null || _d === void 0 ? void 0 : _d.firstName) || 'First name', value: firstName, onChangeText: setFirstName, error: firstNameError, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles }),
+                React.createElement(Input, { label: ((_e = texts === null || texts === void 0 ? void 0 : texts.form) === null || _e === void 0 ? void 0 : _e.lastName) || 'Last name', value: lastName, onChangeText: setLastName, error: lastNameError, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles }),
+                React.createElement(Text, { style: styles === null || styles === void 0 ? void 0 : styles.texts }, ((_f = texts === null || texts === void 0 ? void 0 : texts.form) === null || _f === void 0 ? void 0 : _f.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: ((_g = texts === null || texts === void 0 ? void 0 : texts.form) === null || _g === void 0 ? void 0 : _g.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: ((_h = texts === null || texts === void 0 ? void 0 : texts.form) === null || _h === void 0 ? void 0 : _h.confirmEmail) || 'Confirm email', value: emailConfirmation, onChangeText: setEmailConfirmation, keyboardType: 'email-address', error: confirmEmailError, styles: styles === null || styles === void 0 ? void 0 : styles.inputStyles, autoCapitalize: 'none' }),
+                isAgeRequired && (React.createElement(DatePicker, { text: ((_j = texts === null || texts === void 0 ? void 0 : texts.form) === null || _j === void 0 ? void 0 : _j.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 }, ((_k = texts === null || texts === void 0 ? void 0 : texts.form) === null || _k === void 0 ? void 0 : _k.choosePassword) ||
+                        'Choose a password for your new TICKETFAIRY account'),
+                    React.createElement(Input, { label: ((_l = texts === null || texts === void 0 ? void 0 : texts.form) === null || _l === void 0 ? void 0 : _l.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: ((_m = texts === null || texts === void 0 ? void 0 : texts.form) === null || _m === void 0 ? void 0 : _m.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(PhoneInput, { phoneNumber: phone, onChangePhoneNumber: handleOnChangePhoneNumber, styles: styles === null || styles === void 0 ? void 0 : styles.phoneInput, error: phoneError, texts: {
+                        label: phoneLabel,
+                        ...(_o = texts === null || texts === void 0 ? void 0 : texts.form) === null || _o === void 0 ? void 0 : _o.phoneInput,
+                    } }),
+                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: ((_p = texts === null || texts === void 0 ? void 0 : texts.form) === null || _p === void 0 ? void 0 : _p.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: {
+                        label: ((_q = texts === null || texts === void 0 ? void 0 : texts.form) === null || _q === void 0 ? void 0 : _q.country) || 'Country',
+                    } }),
+                React.createElement(Input, { label: ((_r = texts === null || texts === void 0 ? void 0 : texts.form) === null || _r === void 0 ? void 0 : _r.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: {
+                        label: ((_s = texts === null || texts === void 0 ? void 0 : texts.form) === null || _s === void 0 ? void 0 : _s.state) || 'State',
+                    } }),
+                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: (_t = styles === null || styles === void 0 ? void 0 : styles.customCheckbox) === null || _t === void 0 ? void 0 : _t.text },
+                        ((_u = texts === null || texts === void 0 ? void 0 : texts.form) === null || _u === void 0 ? void 0 : _u.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 }, ((_v = texts === null || texts === void 0 ? void 0 : texts.form) === null || _v === void 0 ? void 0 : _v.privacyPolicy) || 'Privacy Policy'),
+                        "."), styles: styles === null || styles === void 0 ? void 0 : styles.checkboxStyles })),
+                ticketHoldersData.length > 0 && (React.createElement(React.Fragment, null,
+                    React.createElement(Text, { style: styles === null || styles === void 0 ? void 0 : styles.ticketHoldersTitle }, ((_w = texts === null || texts === void 0 ? void 0 : texts.form) === null || _w === void 0 ? void 0 : _w.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
+                        ? {
+                            button: s.submitButtonDisabled,
+                            ...styles === null || styles === void 0 ? void 0 : styles.checkoutButtonDisabled,
+                        }
+                        : {
+                            container: [
+                                s.submitButton,
+                                (_x = styles === null || styles === void 0 ? void 0 : styles.checkoutButton) === null || _x === void 0 ? void 0 : _x.container,
+                            ],
+                            text: (_y = styles === null || styles === void 0 ? void 0 : styles.checkoutButton) === null || _y === void 0 ? void 0 : _y.text,
+                            button: (_z = styles === null || styles === void 0 ? void 0 : styles.checkoutButton) === null || _z === void 0 ? void 0 : _z.button,
+                        } })),
+            areLoadingIndicatorsEnabled && isLoading && React.createElement(Loading, null))));
     //#endregion
 };
 export default Billing;