boxpay-checkout-reactnative-sdk 1.0.4 → 1.0.5

package/lib/module/screens/addressScreen.js

@@ -1,32 +1,40 @@
 "use strict";
 
 import { useEffect, useRef, useState } from 'react';
-import { BackHandler, Image, Pressable, SafeAreaView, ScrollView, StatusBar, Text, View } from 'react-native';
+import { BackHandler, Image, Pressable, ScrollView, Text, View } from 'react-native';
 import { TextInput } from 'react-native-paper';
 import Header from "../components/header.js";
 import { checkoutDetailsHandler } from "../sharedContext/checkoutDetailsHandler.js";
 import { setUserDataHandler, userDataHandler } from "../sharedContext/userdataHandler.js";
 import styles from "../styles/screens/addressScreenStyles..js";
-import { extractNames } from "../utility.js";
+import { extractNames, getPhoneNumberCodeAndCountryName } from "../utility.js";
+import CountryPicker from 'react-native-country-picker-modal';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const AddressScreen = ({
+  route,
   navigation
 }) => {
+  const {
+    isNewAddress
+  } = route.params || {};
+  const isNewAddressBool = Array.isArray(isNewAddress) ? isNewAddress[0] : isNewAddress;
   const {
     userData
   } = userDataHandler;
   const {
     checkoutDetails
   } = checkoutDetailsHandler;
-  const [selectedCountryCode /*setSelectedCountryCode*/] = useState('');
-  const selectedPhoneCodeRef = useRef('');
+  const [selectedCountryCode, setSelectedCountryCode] = useState('IN');
+  const [selectedPhoneCode, setSelectedPhoneCode] = useState('');
+  const [showCountryPicker, setShowContryPicker] = useState(false);
   const isShippingEnabled = checkoutDetails.isShippingAddressEnabled;
   const isFullNameEnabled = checkoutDetails.isFullNameEnabled;
   const isPhoneNumberEnabled = checkoutDetails.isPhoneEnabled;
   const isEmailEnabled = checkoutDetails.isEmailEnabled;
   const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-  const [countryTextFieldFocused] = useState(false);
+  const [countryTextFieldFocused, setCountryTextFieldFocused] = useState(false);
   const [phoneTextFieldFocused, setPhoneTextFieldFocused] = useState(false);
+  const [phoneCodeTextFieldFocused, setPhoneCodeTextFieldFocused] = useState(false);
   const [nameTextFieldFocused, setNameTextFieldFocused] = useState(false);
   const [mainAddressTextFieldFocused, setMainAddressTextFieldFocused] = useState(false);
   const [emailTextFieldFocused, setEmailTextFieldFocused] = useState(false);
@@ -34,9 +42,9 @@ const AddressScreen = ({
   const [stateTextFieldFocused, setStateTextFieldFocused] = useState(false);
   const [pincodeTextFieldFocused, setPincodeTextFieldFocused] = useState(false);
   const [secondaryAddressTextFieldFocused, setSecondaryAddressTextFieldFocused] = useState(false);
-  const [countryTextField /*setCountryTextField*/] = useState('');
+  const [countryTextField, setCountryTextField] = useState('');
   const [fullNameTextField, setFullNameTextField] = useState('');
-  const [phoneNumberTextField /*setPhoneNumberTextField*/] = useState('');
+  const [phoneNumberTextField, setPhoneNumberTextField] = useState('');
   const [emailTextField, setEmailTextField] = useState('');
   const [pinTextField, setPinTextField] = useState('');
   const [cityTextField, setCityTextField] = useState('');
@@ -44,39 +52,85 @@ const AddressScreen = ({
   const [mainAddressTextField, setMainAddressTextField] = useState('');
   const [secondaryAddressTextField, setSecondaryAddressTextField] = useState('');
   const [fullNameErrorText, setFullNameErrorText] = useState('');
-  const [mobileNumberErrorText /*setMobileNumberErrorText*/] = useState('');
+  const [mobileNumberErrorText, setMobileNumberErrorText] = useState('');
   const [emailIdErrorText, setEmailIdErrorText] = useState('');
   const [pinCodeErrorText, setPinCodeErrorText] = useState('');
   const [cityErrorText, setCityErrorText] = useState('');
   const [stateErrorText, setStateErrorText] = useState('');
   const [mainAddressErrorText, setMainAddressErrorText] = useState('');
-  const [isFullNameValid, setIsFullNameValid] = useState(false);
-  const [isPhoneNumberValid /*setIsPhoneNumberValid*/] = useState(false);
-  const [isEmailValid, setIsEmailValid] = useState(false);
-  const [isPinValid, setIsPinValid] = useState(false);
-  const [isCityValid, setIsCityValid] = useState(false);
-  const [isStateValid, setIsStateValid] = useState(false);
-  const [isMainAddressValid, setIsMainAddressValid] = useState(false);
+  const [isFullNameValid, setIsFullNameValid] = useState(null);
+  const [isPhoneNumberValid, setIsPhoneNumberValid] = useState(null);
+  const [isEmailValid, setIsEmailValid] = useState(null);
+  const [isPinValid, setIsPinValid] = useState(null);
+  const [isCityValid, setIsCityValid] = useState(null);
+  const [isStateValid, setIsStateValid] = useState(null);
+  const [isMainAddressValid, setIsMainAddressValid] = useState(null);
+  const phoneNumberLengthList = useRef([10]);
   const onProceedBack = () => {
     navigation.goBack();
     return true;
   };
   useEffect(() => {
-    BackHandler.addEventListener('hardwareBackPress', () => {
-      return onProceedBack(); // Allow back navigation if not loading
-    });
-  });
+    const backAction = () => {
+      return onProceedBack();
+    };
+    const backHandler = BackHandler.addEventListener('hardwareBackPress', backAction);
+    return () => backHandler.remove();
+  }, [navigation]);
+  useEffect(() => {
+    if (!isNewAddress) {
+      setFullNameTextField(`${userData.firstName} ${userData.lastName}`);
+      setEmailTextField(userData.email ?? "");
+      setMainAddressTextField(userData.address1 ?? "");
+      setSecondaryAddressTextField(userData.address2 ?? "");
+      setCityTextField(userData.city ?? "");
+      setStateTextField(userData.state ?? "");
+      setSelectedCountryCode(userData.countryCode ?? 'IN');
+      setCountryTextField(userData.countryName ?? "");
+      setPinTextField(userData.pincode ?? "");
+      const selectedCountry = getPhoneNumberCodeAndCountryName(userData.countryCode ?? "IN");
+      setSelectedPhoneCode(selectedCountry.isdCode ?? "+91");
+      setCountryTextField(selectedCountry.fullName ?? "");
+      if (userData.completePhoneNumber?.startsWith(selectedCountry.isdCode)) {
+        // 2. Remove the ISD code from the beginning
+        const rawNumber = userData.completePhoneNumber.slice(selectedCountry.isdCode.length);
+        setPhoneNumberTextField(rawNumber);
+        phoneNumberLengthList.current = selectedCountry.phoneNumberLength;
+      }
+    }
+  }, [userData]);
   const onChangeFullName = updatedText => {
     setFullNameTextField(updatedText);
     const trimmedText = updatedText.trim();
     if (trimmedText === '') {
       setFullNameErrorText('Required');
-      setIsFullNameValid(true);
+      setIsFullNameValid(false);
     } else {
       setFullNameErrorText('');
-      setIsFullNameValid(false);
+      setIsFullNameValid(true);
     }
   };
+  const onChangePhoneNumber = updatedText => {
+    setPhoneNumberTextField(updatedText);
+    if (updatedText.length == 0) {
+      setMobileNumberErrorText("Required");
+      setIsPhoneNumberValid(false);
+    } else if (!phoneNumberLengthList.current.includes(updatedText.length)) {
+      setMobileNumberErrorText(`Mobile number must be ${phoneNumberLengthList.current} digits long`);
+      setIsPhoneNumberValid(false);
+    } else {
+      setMobileNumberErrorText("");
+      setIsPhoneNumberValid(true);
+    }
+  };
+  const handleCountrySelect = country => {
+    console.log(country);
+    const selectedCountry = getPhoneNumberCodeAndCountryName(country?.cca2 ?? "IN");
+    setSelectedPhoneCode(selectedCountry.isdCode ?? "+91");
+    setCountryTextField(selectedCountry.fullName ?? "");
+    phoneNumberLengthList.current = selectedCountry.phoneNumberLength;
+    setShowContryPicker(false);
+  };
   const onChangeEmailId = updatedText => {
     setEmailTextField(updatedText);
     const trimmedText = updatedText.trim();
@@ -84,13 +138,13 @@ const AddressScreen = ({
 
     if (trimmedText === '') {
       setEmailIdErrorText('Required');
-      setIsEmailValid(true);
+      setIsEmailValid(false);
     } else if (!emailRegexPattern.test(trimmedText)) {
       setEmailIdErrorText('Invalid Email');
-      setIsEmailValid(true);
+      setIsEmailValid(false);
     } else {
       setEmailIdErrorText('');
-      setIsEmailValid(false);
+      setIsEmailValid(true);
     }
   };
   const onChangePostalCode = updatedText => {
@@ -98,13 +152,13 @@ const AddressScreen = ({
     const trimmedText = updatedText.trim();
     if (trimmedText === '') {
       setPinCodeErrorText('Required');
-      setIsPinValid(true);
-    } else if (selectedPhoneCodeRef.current === '+91' && trimmedText.length < 6) {
+      setIsPinValid(false);
+    } else if (selectedPhoneCode === '+91' && trimmedText.length < 6) {
       setPinCodeErrorText('Zip/Postal code must be 6 digits');
-      setIsPinValid(true);
+      setIsPinValid(false);
     } else {
       setPinCodeErrorText('');
-      setIsPinValid(false);
+      setIsPinValid(true);
     }
   };
   const onChangeCity = updatedText => {
@@ -112,10 +166,10 @@ const AddressScreen = ({
     const trimmedText = updatedText.trim();
     if (trimmedText === '') {
       setCityErrorText('Required');
-      setIsCityValid(true);
+      setIsCityValid(false);
     } else {
       setCityErrorText('');
-      setIsCityValid(false);
+      setIsCityValid(true);
     }
   };
   const onChangeState = updatedText => {
@@ -123,10 +177,10 @@ const AddressScreen = ({
     const trimmedText = updatedText.trim();
     if (trimmedText === '') {
       setStateErrorText('Required');
-      setIsStateValid(true);
+      setIsStateValid(false);
     } else {
       setStateErrorText('');
-      setIsStateValid(false);
+      setIsStateValid(true);
     }
   };
   const onChangeMainAddress = updatedText => {
@@ -134,7 +188,7 @@ const AddressScreen = ({
     const trimmedText = updatedText.trim();
     if (trimmedText === '') {
       setMainAddressErrorText('Required');
-      setIsMainAddressValid(true);
+      setIsMainAddressValid(false);
     } else {
       setMainAddressErrorText('');
       setIsMainAddressValid(true);
@@ -162,12 +216,20 @@ const AddressScreen = ({
       isAllValid = false;
     }
 
+    // Phone Number
+    const phoneNumberTrimmed = safeTrim(phoneNumberTextField);
+    const phoneNumberValid = phoneNumberLengthList.current.includes(phoneNumberTrimmed.length) && isPhoneNumberEnabled;
+    if (!phoneNumberValid) {
+      onChangePhoneNumber(phoneNumberTextField);
+      isAllValid = false;
+    }
+
     // Shipping-specific fields
     if (isShippingEnabled) {
       // Postal Code
       const postalTrimmed = safeTrim(pinTextField);
       let postalValid = false;
-      if (selectedPhoneCodeRef.current === '+91') {
+      if (selectedPhoneCode === '+91') {
         postalValid = postalTrimmed !== '' && postalTrimmed.length >= 6;
       } else {
         postalValid = postalTrimmed !== '';
@@ -203,62 +265,67 @@ const AddressScreen = ({
     }
     return isAllValid;
   };
-  return /*#__PURE__*/_jsxs(SafeAreaView, {
+  return /*#__PURE__*/_jsxs(View, {
     style: styles.screenView,
-    children: [/*#__PURE__*/_jsx(StatusBar, {
-      barStyle: "dark-content"
-    }), /*#__PURE__*/_jsx(Header, {
+    children: [/*#__PURE__*/_jsx(Header, {
       onBackPress: onProceedBack,
       showDesc: false,
       showSecure: false,
-      text: isShippingEnabled ? 'Add Address' : 'Add Personal Details'
+      text: isShippingEnabled && isNewAddressBool ? 'Add Address' : isShippingEnabled && !isNewAddressBool ? 'Edit Address' : !isShippingEnabled && isNewAddressBool ? 'Edit Personal Details' : 'Add Personal Details'
     }), /*#__PURE__*/_jsx(View, {
       style: styles.divider
     }), /*#__PURE__*/_jsx(ScrollView, {
       children: /*#__PURE__*/_jsxs(View, {
-        children: [isShippingEnabled && /*#__PURE__*/_jsx(_Fragment, {
-          children: /*#__PURE__*/_jsx(Pressable, {
-            onPress: () => {},
-            children: /*#__PURE__*/_jsx(TextInput, {
-              mode: "outlined",
-              label: /*#__PURE__*/_jsx(Text, {
-                style: [styles.textFieldLable, {
-                  color: countryTextFieldFocused ? '#2D2B32' : '#ADACB0'
-                }],
-                children: "Country*"
-              }),
-              value: countryTextField || '',
-              onChangeText: _ => {},
-              editable: false // disables keyboard input
-              ,
-              theme: {
-                colors: {
-                  primary: '#2D2B32',
-                  outline: '#E6E6E6'
-                }
-              },
-              style: [styles.textInput, {
-                marginTop: 28,
-                marginHorizontal: 16
-              }],
-              outlineStyle: {
-                borderRadius: 8,
-                borderWidth: 1.5
-              },
-              right: /*#__PURE__*/_jsx(TextInput.Icon, {
-                icon: () => /*#__PURE__*/_jsx(Image, {
-                  source: require('../../assets/images/chervon-down.png'),
-                  style: styles.imageStyle
-                })
-              })
+        children: [isShippingEnabled && /*#__PURE__*/_jsx(TextInput, {
+          mode: "outlined",
+          editable: true // allow focus
+          ,
+          showSoftInputOnFocus: false,
+          label: /*#__PURE__*/_jsx(Text, {
+            style: [styles.textFieldLable, {
+              color: countryTextFieldFocused ? '#2D2B32' : '#ADACB0',
+              fontFamily: checkoutDetails.fontFamily.regular
+            }],
+            children: "Country*"
+          }),
+          value: countryTextField || '',
+          onChangeText: _ => {},
+          theme: {
+            colors: {
+              primary: '#2D2B32',
+              outline: '#E6E6E6'
+            }
+          },
+          style: [styles.textInput, {
+            marginTop: 28,
+            marginHorizontal: 16,
+            fontFamily: checkoutDetails.fontFamily.regular
+          }],
+          outlineStyle: {
+            borderRadius: 8,
+            borderWidth: 1.5
+          },
+          right: /*#__PURE__*/_jsx(TextInput.Icon, {
+            icon: () => /*#__PURE__*/_jsx(Image, {
+              source: require('../../assets/images/chervon-down.png'),
+              style: styles.imageStyle
             })
-          })
+          }),
+          onFocus: () => {
+            setShowContryPicker(true);
+            setCountryTextFieldFocused(true);
+          },
+          onBlur: () => {
+            setShowContryPicker(false);
+            setCountryTextFieldFocused(false);
+          }
         }), (isShippingEnabled || isFullNameEnabled) && /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsx(TextInput, {
             mode: "outlined",
             label: /*#__PURE__*/_jsx(Text, {
               style: [styles.textFieldLable, {
-                color: nameTextFieldFocused ? '#2D2B32' : '#ADACB0'
+                color: nameTextFieldFocused && fullNameTextField != "" ? '#2D2B32' : '#ADACB0',
+                fontFamily: checkoutDetails.fontFamily.regular
               }],
               children: "Full Name*"
             }),
@@ -274,9 +341,10 @@ const AddressScreen = ({
             },
             style: [styles.textInput, {
               marginTop: 20,
-              marginHorizontal: 16
+              marginHorizontal: 16,
+              fontFamily: checkoutDetails.fontFamily.regular
             }],
-            error: isFullNameValid,
+            error: isFullNameValid == false,
             outlineStyle: {
               borderRadius: 8,
               // Add this
@@ -288,8 +356,10 @@ const AddressScreen = ({
             onBlur: () => {
               setNameTextFieldFocused(false);
             }
-          }), isFullNameValid && /*#__PURE__*/_jsx(Text, {
-            style: styles.errorText,
+          }), isFullNameValid == false && /*#__PURE__*/_jsx(Text, {
+            style: [styles.errorText, {
+              fontFamily: checkoutDetails.fontFamily.regular
+            }],
             children: fullNameErrorText
           })]
         }), (isShippingEnabled || isPhoneNumberEnabled) && /*#__PURE__*/_jsxs(_Fragment, {
@@ -299,7 +369,17 @@ const AddressScreen = ({
             }],
             children: [/*#__PURE__*/_jsx(TextInput, {
               mode: "outlined",
-              value: selectedPhoneCodeRef.current || '',
+              editable: true // allow focus
+              ,
+              showSoftInputOnFocus: false,
+              label: /*#__PURE__*/_jsx(Text, {
+                style: [styles.textFieldLable, {
+                  color: phoneCodeTextFieldFocused && selectedPhoneCode != "" ? '#2D2B32' : '#ADACB0',
+                  fontFamily: checkoutDetails.fontFamily.regular
+                }],
+                children: "Code*"
+              }),
+              value: selectedPhoneCode || '',
               onChangeText: _ => {},
               theme: {
                 colors: {
@@ -308,9 +388,9 @@ const AddressScreen = ({
                 }
               },
               style: [styles.textInput, {
-                width: 90,
+                width: 100,
                 marginEnd: 8,
-                marginTop: 6
+                fontFamily: checkoutDetails.fontFamily.regular
               }],
               outlineStyle: {
                 borderRadius: 8,
@@ -322,23 +402,27 @@ const AddressScreen = ({
                   style: styles.imageStyle
                 })
               }),
-              keyboardType: "number-pad",
               onFocus: () => {
-                setPhoneTextFieldFocused(true);
+                setShowContryPicker(true);
+                setPhoneCodeTextFieldFocused(true);
               },
               onBlur: () => {
-                setPhoneTextFieldFocused(false);
+                setShowContryPicker(false);
+                setPhoneCodeTextFieldFocused(false);
               }
             }), /*#__PURE__*/_jsx(TextInput, {
               mode: "outlined",
               label: /*#__PURE__*/_jsx(Text, {
                 style: [styles.textFieldLable, {
-                  color: phoneTextFieldFocused ? '#2D2B32' : '#ADACB0'
+                  color: phoneTextFieldFocused && phoneNumberTextField != "" ? '#2D2B32' : '#ADACB0',
+                  fontFamily: checkoutDetails.fontFamily.regular
                 }],
                 children: "Mobile Number*"
               }),
               value: phoneNumberTextField || '',
-              onChangeText: _ => {},
+              onChangeText: it => {
+                onChangePhoneNumber(it);
+              },
               theme: {
                 colors: {
                   primary: '#2D2B32',
@@ -346,9 +430,10 @@ const AddressScreen = ({
                 }
               },
               style: [styles.textInput, {
-                flex: 1
+                flex: 1,
+                fontFamily: checkoutDetails.fontFamily.regular
               }],
-              error: isPhoneNumberValid,
+              error: isPhoneNumberValid == false,
               outlineStyle: {
                 borderRadius: 8,
                 borderWidth: 1.5
@@ -359,8 +444,10 @@ const AddressScreen = ({
                 setPhoneTextFieldFocused(false);
               }
             })]
-          }), isPhoneNumberValid && /*#__PURE__*/_jsx(Text, {
-            style: styles.errorText,
+          }), isPhoneNumberValid == false && /*#__PURE__*/_jsx(Text, {
+            style: [styles.errorText, {
+              fontFamily: checkoutDetails.fontFamily.regular
+            }],
             children: mobileNumberErrorText
           })]
         }), (isShippingEnabled || isEmailEnabled) && /*#__PURE__*/_jsxs(_Fragment, {
@@ -368,7 +455,8 @@ const AddressScreen = ({
             mode: "outlined",
             label: /*#__PURE__*/_jsx(Text, {
               style: [styles.textFieldLable, {
-                color: emailTextFieldFocused ? '#2D2B32' : '#ADACB0'
+                color: emailTextFieldFocused && emailTextField != "" ? '#2D2B32' : '#ADACB0',
+                fontFamily: checkoutDetails.fontFamily.regular
               }],
               children: "Email ID*"
             }),
@@ -384,9 +472,10 @@ const AddressScreen = ({
             },
             style: [styles.textInput, {
               marginTop: 20,
-              marginHorizontal: 16
+              marginHorizontal: 16,
+              fontFamily: checkoutDetails.fontFamily.regular
             }],
-            error: isEmailValid,
+            error: isEmailValid == false,
             outlineStyle: {
               borderRadius: 8,
               // Add this
@@ -398,8 +487,10 @@ const AddressScreen = ({
             onBlur: () => {
               setEmailTextFieldFocused(false);
             }
-          }), isEmailValid && /*#__PURE__*/_jsx(Text, {
-            style: styles.errorText,
+          }), isEmailValid == false && /*#__PURE__*/_jsx(Text, {
+            style: [styles.errorText, {
+              fontFamily: checkoutDetails.fontFamily.regular
+            }],
             children: emailIdErrorText
           })]
         }), isShippingEnabled && /*#__PURE__*/_jsxs(_Fragment, {
@@ -415,7 +506,8 @@ const AddressScreen = ({
                 mode: "outlined",
                 label: /*#__PURE__*/_jsx(Text, {
                   style: [styles.textFieldLable, {
-                    color: pincodeTextFieldFocused ? '#2D2B32' : '#ADACB0'
+                    color: pincodeTextFieldFocused && pinTextField != "" ? '#2D2B32' : '#ADACB0',
+                    fontFamily: checkoutDetails.fontFamily.regular
                   }],
                   children: "ZIP/Postal code*"
                 }),
@@ -429,8 +521,10 @@ const AddressScreen = ({
                     outline: '#E6E6E6'
                   }
                 },
-                style: [styles.textInput],
-                error: isPinValid,
+                style: [styles.textInput, {
+                  fontFamily: checkoutDetails.fontFamily.regular
+                }],
+                error: isPinValid == false,
                 outlineStyle: {
                   borderRadius: 8,
                   // Add this
@@ -443,8 +537,10 @@ const AddressScreen = ({
                 onBlur: () => {
                   setPincodeTextFieldFocused(false);
                 }
-              }), isPinValid && /*#__PURE__*/_jsx(Text, {
-                style: styles.errorText,
+              }), isPinValid == false && /*#__PURE__*/_jsx(Text, {
+                style: [styles.errorText, {
+                  fontFamily: checkoutDetails.fontFamily.regular
+                }],
                 children: pinCodeErrorText
               })]
             }), /*#__PURE__*/_jsxs(View, {
@@ -455,7 +551,8 @@ const AddressScreen = ({
                 mode: "outlined",
                 label: /*#__PURE__*/_jsx(Text, {
                   style: [styles.textFieldLable, {
-                    color: cityTextFieldFocused ? '#2D2B32' : '#ADACB0'
+                    color: cityTextFieldFocused ? '#2D2B32' : '#ADACB0',
+                    fontFamily: checkoutDetails.fontFamily.regular
                   }],
                   children: "City*"
                 }),
@@ -470,9 +567,10 @@ const AddressScreen = ({
                   }
                 },
                 style: [styles.textInput, {
-                  marginStart: 8
+                  marginStart: 8,
+                  fontFamily: checkoutDetails.fontFamily.regular
                 }],
-                error: isCityValid,
+                error: isCityValid == false,
                 outlineStyle: {
                   borderRadius: 8,
                   // Add this
@@ -484,8 +582,10 @@ const AddressScreen = ({
                 onBlur: () => {
                   setCityTextFieldFocused(false);
                 }
-              }), isCityValid && /*#__PURE__*/_jsx(Text, {
-                style: styles.errorText,
+              }), isCityValid == false && /*#__PURE__*/_jsx(Text, {
+                style: [styles.errorText, {
+                  fontFamily: checkoutDetails.fontFamily.regular
+                }],
                 children: cityErrorText
               })]
             })]
@@ -493,7 +593,8 @@ const AddressScreen = ({
             mode: "outlined",
             label: /*#__PURE__*/_jsx(Text, {
               style: [styles.textFieldLable, {
-                color: stateTextFieldFocused ? '#2D2B32' : '#ADACB0'
+                color: stateTextFieldFocused ? '#2D2B32' : '#ADACB0',
+                fontFamily: checkoutDetails.fontFamily.regular
               }],
               children: "State*"
             }),
@@ -509,9 +610,10 @@ const AddressScreen = ({
             },
             style: [styles.textInput, {
               marginTop: 20,
-              marginHorizontal: 16
+              marginHorizontal: 16,
+              fontFamily: checkoutDetails.fontFamily.regular
             }],
-            error: isStateValid,
+            error: isStateValid == false,
             outlineStyle: {
               borderRadius: 8,
               // Add this
@@ -523,14 +625,17 @@ const AddressScreen = ({
             onBlur: () => {
               setStateTextFieldFocused(false);
             }
-          }), isStateValid && /*#__PURE__*/_jsx(Text, {
-            style: styles.errorText,
+          }), isStateValid == false && /*#__PURE__*/_jsx(Text, {
+            style: [styles.errorText, {
+              fontFamily: checkoutDetails.fontFamily.regular
+            }],
             children: stateErrorText
           }), /*#__PURE__*/_jsx(TextInput, {
             mode: "outlined",
             label: /*#__PURE__*/_jsx(Text, {
               style: [styles.textFieldLable, {
-                color: mainAddressTextFieldFocused ? '#2D2B32' : '#ADACB0'
+                color: mainAddressTextFieldFocused ? '#2D2B32' : '#ADACB0',
+                fontFamily: checkoutDetails.fontFamily.regular
               }],
               children: "House number, Apartment*"
             }),
@@ -546,9 +651,10 @@ const AddressScreen = ({
             },
             style: [styles.textInput, {
               marginTop: 20,
-              marginHorizontal: 16
+              marginHorizontal: 16,
+              fontFamily: checkoutDetails.fontFamily.regular
             }],
-            error: isMainAddressValid,
+            error: isMainAddressValid == false,
             outlineStyle: {
               borderRadius: 8,
               // Add this
@@ -560,14 +666,17 @@ const AddressScreen = ({
             onBlur: () => {
               setMainAddressTextFieldFocused(false);
             }
-          }), isMainAddressValid && /*#__PURE__*/_jsx(Text, {
-            style: styles.errorText,
+          }), isMainAddressValid == false && /*#__PURE__*/_jsx(Text, {
+            style: [styles.errorText, {
+              fontFamily: checkoutDetails.fontFamily.regular
+            }],
             children: mainAddressErrorText
           }), /*#__PURE__*/_jsx(TextInput, {
             mode: "outlined",
             label: /*#__PURE__*/_jsx(Text, {
               style: [styles.textFieldLable, {
-                color: secondaryAddressTextFieldFocused ? '#2D2B32' : '#ADACB0'
+                color: secondaryAddressTextFieldFocused ? '#2D2B32' : '#ADACB0',
+                fontFamily: checkoutDetails.fontFamily.regular
               }],
               children: "Area,Colony,Street, Sector"
             }),
@@ -583,7 +692,8 @@ const AddressScreen = ({
             },
             style: [styles.textInput, {
               marginTop: 20,
-              marginHorizontal: 16
+              marginHorizontal: 16,
+              fontFamily: checkoutDetails.fontFamily.regular
             }],
             outlineStyle: {
               borderRadius: 8,
@@ -599,11 +709,21 @@ const AddressScreen = ({
           })]
         })]
       })
+    }), /*#__PURE__*/_jsx(CountryPicker, {
+      visible: showCountryPicker,
+      withFilter: true,
+      withCallingCode: true,
+      withAlphaFilter: true,
+      withFlag: true,
+      withEmoji: true,
+      countryCode: selectedCountryCode,
+      onSelect: handleCountrySelect
     }), /*#__PURE__*/_jsx(View, {
       style: styles.bottomContainer,
       children: /*#__PURE__*/_jsx(Pressable, {
         style: [styles.buttonContainer, {
-          backgroundColor: checkoutDetails.brandColor
+          backgroundColor: checkoutDetails.buttonColor,
+          borderRadius: checkoutDetails.ctaBorderRadius
         }],
         onPress: () => {
           // Todo add functon call
@@ -617,7 +737,8 @@ const AddressScreen = ({
                 email: emailTextField,
                 firstName: firstName,
                 lastName: lastName,
-                phone: `${selectedPhoneCodeRef.current}${phoneNumberTextField}`,
+                completePhoneNumber: `${selectedPhoneCode}${phoneNumberTextField}`,
+                phoneCode: selectedPhoneCode,
                 uniqueId: userData.uniqueId,
                 dob: userData.dob,
                 pan: userData.pan,
@@ -626,7 +747,8 @@ const AddressScreen = ({
                 city: cityTextField,
                 state: stateTextField,
                 pincode: pinTextField,
-                country: selectedCountryCode,
+                countryCode: selectedCountryCode,
+                countryName: countryTextField,
                 labelType: userData.labelType,
                 labelName: userData.labelName
               }
@@ -635,7 +757,10 @@ const AddressScreen = ({
           }
         },
         children: /*#__PURE__*/_jsx(Text, {
-          style: styles.buttonText,
+          style: [styles.buttonText, {
+            color: checkoutDetails.buttonTextColor,
+            fontFamily: checkoutDetails.fontFamily.semiBold
+          }],
           children: isShippingEnabled ? 'Save Address' : 'Save Personal Details'
         })
       })