boxpay-checkout-reactnative-sdk 1.0.4-beta1 → 1.0.5

package/src/screens/addressScreen.tsx

@@ -3,9 +3,7 @@ import {
   BackHandler,
   Image,
   Pressable,
-  SafeAreaView,
   ScrollView,
-  StatusBar,
   Text,
   View,
 } from 'react-native';
@@ -18,20 +16,31 @@ import {
 } from '../sharedContext/userdataHandler';
 import styles from '../styles/screens/addressScreenStyles.';
 import type { CheckoutStackParamList } from '../navigation';
-import type { NavigationProp } from '@react-navigation/native';
-import { extractNames } from '../utility';
+import type { NavigationProp, RouteProp } from '@react-navigation/native';
+import { extractNames, getPhoneNumberCodeAndCountryName } from '../utility';
+import type { AddressScreenParams } from '../interface';
+import CountryPicker, {type Country, type CountryCode} from 'react-native-country-picker-modal'
 
+type AddressScreenRouteProp = RouteProp<CheckoutStackParamList, 'AddressScreen'>;
 type AddressScreenNavigationProp = NavigationProp<CheckoutStackParamList, 'AddressScreen'>;
 
 interface Props {
+  route : AddressScreenRouteProp,
   navigation: AddressScreenNavigationProp;
 }
 
-const AddressScreen = ({ navigation }: Props) => {
+const AddressScreen = ({ route, navigation }: Props) => {
+  const {
+    isNewAddress
+  } = route.params as AddressScreenParams || {}; 
+
+  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<CountryCode>('IN');
+  const [selectedPhoneCode, setSelectedPhoneCode] = useState('');
+
+  const [showCountryPicker, setShowContryPicker] = useState(false);
 
   const isShippingEnabled = checkoutDetails.isShippingAddressEnabled;
   const isFullNameEnabled = checkoutDetails.isFullNameEnabled;
@@ -39,8 +48,9 @@ const AddressScreen = ({ navigation }: Props) => {
   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);
@@ -53,9 +63,9 @@ const AddressScreen = ({ navigation }: Props) => {
     setSecondaryAddressTextFieldFocused,
   ] = useState(false);
 
-  const [countryTextField, /*setCountryTextField*/] = useState<string>('');
+  const [countryTextField, setCountryTextField] = useState<string>('');
   const [fullNameTextField, setFullNameTextField] = useState<string>('');
-  const [phoneNumberTextField, /*setPhoneNumberTextField*/] = useState<string>('');
+  const [phoneNumberTextField, setPhoneNumberTextField] = useState<string>('');
   const [emailTextField, setEmailTextField] = useState<string>('');
   const [pinTextField, setPinTextField] = useState<string>('');
   const [cityTextField, setCityTextField] = useState<string>('');
@@ -65,20 +75,22 @@ const AddressScreen = ({ navigation }: Props) => {
     useState<string>('');
 
   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<boolean | null>(null);
+  const [isPhoneNumberValid, setIsPhoneNumberValid] = useState<boolean | null>(null);
+  const [isEmailValid, setIsEmailValid] = useState<boolean | null>(null);
+  const [isPinValid, setIsPinValid] = useState<boolean | null>(null);
+  const [isCityValid, setIsCityValid] = useState<boolean | null>(null);
+  const [isStateValid, setIsStateValid] = useState<boolean | null>(null);
+  const [isMainAddressValid, setIsMainAddressValid] = useState<boolean | null>(null);
+
+  const phoneNumberLengthList = useRef<number[]>([10])
 
   const onProceedBack = () => {
     navigation.goBack()
@@ -86,13 +98,45 @@ const AddressScreen = ({ navigation }: Props) => {
   };
 
   useEffect(() => {
-   BackHandler.addEventListener(
+
+    const backAction = () => {
+      return onProceedBack();
+    }
+    const backHandler = BackHandler.addEventListener(
       'hardwareBackPress',
-      () => {
-        return onProceedBack(); // Allow back navigation if not loading
-      }
+      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') as CountryCode
+      );
+      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: string) => {
     setFullNameTextField(updatedText);
@@ -100,11 +144,34 @@ const AddressScreen = ({ navigation }: Props) => {
 
     if (trimmedText === '') {
       setFullNameErrorText('Required');
-      setIsFullNameValid(true);
+      setIsFullNameValid(false);
     } else {
       setFullNameErrorText('');
-      setIsFullNameValid(false);
+      setIsFullNameValid(true);
+    }
+  };
+
+  const onChangePhoneNumber = (updatedText : string) => {
+    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 : 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: string) => {
@@ -114,13 +181,13 @@ const AddressScreen = ({ navigation }: Props) => {
 
     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);
     }
   };
 
@@ -130,16 +197,16 @@ const AddressScreen = ({ navigation }: Props) => {
 
     if (trimmedText === '') {
       setPinCodeErrorText('Required');
-      setIsPinValid(true);
+      setIsPinValid(false);
     } else if (
-      selectedPhoneCodeRef.current === '+91' &&
+      selectedPhoneCode === '+91' &&
       trimmedText.length < 6
     ) {
       setPinCodeErrorText('Zip/Postal code must be 6 digits');
-      setIsPinValid(true);
+      setIsPinValid(false);
     } else {
       setPinCodeErrorText('');
-      setIsPinValid(false);
+      setIsPinValid(true);
     }
   };
 
@@ -149,10 +216,10 @@ const AddressScreen = ({ navigation }: Props) => {
 
     if (trimmedText === '') {
       setCityErrorText('Required');
-      setIsCityValid(true);
+      setIsCityValid(false);
     } else {
       setCityErrorText('');
-      setIsCityValid(false);
+      setIsCityValid(true);
     }
   };
 
@@ -162,10 +229,10 @@ const AddressScreen = ({ navigation }: Props) => {
 
     if (trimmedText === '') {
       setStateErrorText('Required');
-      setIsStateValid(true);
+      setIsStateValid(false);
     } else {
       setStateErrorText('');
-      setIsStateValid(false);
+      setIsStateValid(true);
     }
   };
 
@@ -175,7 +242,7 @@ const AddressScreen = ({ navigation }: Props) => {
 
     if (trimmedText === '') {
       setMainAddressErrorText('Required');
-      setIsMainAddressValid(true);
+      setIsMainAddressValid(false);
     } else {
       setMainAddressErrorText('');
       setIsMainAddressValid(true);
@@ -206,12 +273,20 @@ const AddressScreen = ({ navigation }: Props) => {
       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 !== '';
@@ -250,13 +325,12 @@ const AddressScreen = ({ navigation }: Props) => {
   };
 
   return (
-    <SafeAreaView style={styles.screenView}>
-      <StatusBar barStyle="dark-content" />
+    <View style={styles.screenView}>
       <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'}
       />
       <View
         style={styles.divider}
@@ -264,51 +338,55 @@ const AddressScreen = ({ navigation }: Props) => {
       <ScrollView>
         <View>
           {isShippingEnabled && (
-            <>
-              <Pressable
-                onPress={() => {}}
+            <TextInput
+            mode="outlined"
+            editable={true}                // allow focus
+            showSoftInputOnFocus={false}
+            label={
+              <Text
+                style={[styles.textFieldLable,{
+                  color: countryTextFieldFocused ? '#2D2B32' : '#ADACB0',
+                  fontFamily: checkoutDetails.fontFamily.regular,
+                }]}
               >
-                <TextInput
-                  mode="outlined"
-                  label={
-                    <Text
-                      style={[styles.textFieldLable,{
-                        color: countryTextFieldFocused ? '#2D2B32' : '#ADACB0',
-                      }]}
-                    >
-                      Country*
-                    </Text>
-                  }
-                  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={
-                    <TextInput.Icon
-                      icon={() => (
-                        <Image
-                          source={require('../../assets/images/chervon-down.png')}
-                          style={styles.imageStyle}
-                        />
-                      )}
-                    />
-                  }
-                />
-              </Pressable>
-            </>
+                Country*
+              </Text>
+            }
+            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={
+              <TextInput.Icon
+                icon={() => (
+                  <Image
+                    source={require('../../assets/images/chervon-down.png')}
+                    style={styles.imageStyle}
+                  />
+                )}
+              />
+            }
+            onFocus={() => {
+              setShowContryPicker(true)
+              setCountryTextFieldFocused(true);
+            }}
+            onBlur={() => {
+              setShowContryPicker(false)
+              setCountryTextFieldFocused(false);
+            }}
+          />
           )}
 
           {(isShippingEnabled || isFullNameEnabled) && (
@@ -318,7 +396,8 @@ const AddressScreen = ({ navigation }: Props) => {
                 label={
                   <Text
                     style={[styles.textFieldLable,{
-                      color: nameTextFieldFocused ? '#2D2B32' : '#ADACB0',
+                      color: (nameTextFieldFocused && fullNameTextField != "") ? '#2D2B32' : '#ADACB0',
+                      fontFamily: checkoutDetails.fontFamily.regular,
                     }]}
                   >
                     Full Name*
@@ -336,9 +415,9 @@ const AddressScreen = ({ navigation }: Props) => {
                 }}
                 style={[
                   styles.textInput,
-                  { marginTop: 20, marginHorizontal: 16 },
+                  { marginTop: 20, marginHorizontal: 16, fontFamily: checkoutDetails.fontFamily.regular, },
                 ]}
-                error={isFullNameValid}
+                error={isFullNameValid == false}
                 outlineStyle={{
                   borderRadius: 8, // Add this
                   borderWidth: 1.5,
@@ -350,9 +429,9 @@ const AddressScreen = ({ navigation }: Props) => {
                   setNameTextFieldFocused(false);
                 }}
               />
-              {isFullNameValid && (
+              {(isFullNameValid == false) && (
                 <Text
-                  style={styles.errorText}
+                  style={[styles.errorText, {fontFamily: checkoutDetails.fontFamily.regular,}]}
                 >
                   {fullNameErrorText}
                 </Text>
@@ -368,7 +447,19 @@ const AddressScreen = ({ navigation }: Props) => {
               >
                 <TextInput
                   mode="outlined"
-                  value={selectedPhoneCodeRef.current || ''}
+                  editable={true}                // allow focus
+                  showSoftInputOnFocus={false}
+                  label={
+                    <Text
+                      style={[styles.textFieldLable,{
+                        color: (phoneCodeTextFieldFocused && selectedPhoneCode != "") ? '#2D2B32' : '#ADACB0',
+                        fontFamily: checkoutDetails.fontFamily.regular,
+                      }]}
+                    >
+                      Code*
+                    </Text>
+                  }
+                  value={selectedPhoneCode || ''}
                   onChangeText={(_) => {}}
                   theme={{
                     colors: {
@@ -378,7 +469,7 @@ const AddressScreen = ({ navigation }: Props) => {
                   }}
                   style={[
                     styles.textInput,
-                    { width: 90, marginEnd: 8, marginTop: 6 },
+                    { width: 100, marginEnd: 8, fontFamily: checkoutDetails.fontFamily.regular,},
                   ]}
                   outlineStyle={{
                     borderRadius: 8,
@@ -394,12 +485,13 @@ const AddressScreen = ({ navigation }: Props) => {
                       )}
                     />
                   }
-                  keyboardType="number-pad"
                   onFocus={() => {
-                    setPhoneTextFieldFocused(true);
+                    setShowContryPicker(true)
+                    setPhoneCodeTextFieldFocused(true);
                   }}
                   onBlur={() => {
-                    setPhoneTextFieldFocused(false);
+                    setShowContryPicker(false)
+                    setPhoneCodeTextFieldFocused(false);
                   }}
                 />
                 <TextInput
@@ -407,22 +499,25 @@ const AddressScreen = ({ navigation }: Props) => {
                   label={
                     <Text
                       style={[styles.textFieldLable,{
-                        color: phoneTextFieldFocused ? '#2D2B32' : '#ADACB0',
+                        color: (phoneTextFieldFocused && phoneNumberTextField != "") ? '#2D2B32' : '#ADACB0',
+                        fontFamily: checkoutDetails.fontFamily.regular, 
                       }]}
                     >
                       Mobile Number*
                     </Text>
                   }
                   value={phoneNumberTextField || ''}
-                  onChangeText={(_) => {}}
+                  onChangeText={(it) => {
+                    onChangePhoneNumber(it)
+                  }}
                   theme={{
                     colors: {
                       primary: '#2D2B32',
                       outline: '#E6E6E6',
                     },
                   }}
-                  style={[styles.textInput, { flex: 1 }]}
-                  error={isPhoneNumberValid}
+                  style={[styles.textInput, { flex: 1 , fontFamily: checkoutDetails.fontFamily.regular,}]}
+                  error={isPhoneNumberValid == false}
                   outlineStyle={{
                     borderRadius: 8,
                     borderWidth: 1.5,
@@ -434,9 +529,9 @@ const AddressScreen = ({ navigation }: Props) => {
                   }}
                 />
               </View>
-              {isPhoneNumberValid && (
+              {(isPhoneNumberValid == false) && (
                 <Text
-                  style={styles.errorText}
+                  style={[styles.errorText, {fontFamily: checkoutDetails.fontFamily.regular,}]}
                 >
                   {mobileNumberErrorText}
                 </Text>
@@ -450,7 +545,8 @@ const AddressScreen = ({ navigation }: Props) => {
                 label={
                   <Text
                     style={[styles.textFieldLable,{
-                      color: emailTextFieldFocused ? '#2D2B32' : '#ADACB0',
+                      color: (emailTextFieldFocused && emailTextField != "") ? '#2D2B32' : '#ADACB0',
+                      fontFamily: checkoutDetails.fontFamily.regular,
                     }]}
                   >
                     Email ID*
@@ -468,9 +564,9 @@ const AddressScreen = ({ navigation }: Props) => {
                 }}
                 style={[
                   styles.textInput,
-                  { marginTop: 20, marginHorizontal: 16 },
+                  { marginTop: 20, marginHorizontal: 16, fontFamily: checkoutDetails.fontFamily.regular, },
                 ]}
-                error={isEmailValid}
+                error={isEmailValid == false}
                 outlineStyle={{
                   borderRadius: 8, // Add this
                   borderWidth: 1.5,
@@ -482,9 +578,9 @@ const AddressScreen = ({ navigation }: Props) => {
                   setEmailTextFieldFocused(false);
                 }}
               />
-              {isEmailValid && (
+              {(isEmailValid == false) && (
                 <Text
-                  style={styles.errorText}
+                  style={[styles.errorText, {fontFamily: checkoutDetails.fontFamily.regular,}]}
                 >
                   {emailIdErrorText}
                 </Text>
@@ -504,9 +600,10 @@ const AddressScreen = ({ navigation }: Props) => {
                     label={
                       <Text
                         style={[styles.textFieldLable,{
-                          color: pincodeTextFieldFocused
+                          color: (pincodeTextFieldFocused && pinTextField != "")
                             ? '#2D2B32'
                             : '#ADACB0',
+                            fontFamily: checkoutDetails.fontFamily.regular,
                         }]}
                       >
                         ZIP/Postal code*
@@ -522,8 +619,8 @@ const AddressScreen = ({ navigation }: Props) => {
                         outline: '#E6E6E6',
                       },
                     }}
-                    style={[styles.textInput]}
-                    error={isPinValid}
+                    style={[styles.textInput, {fontFamily: checkoutDetails.fontFamily.regular,}]}
+                    error={isPinValid == false}
                     outlineStyle={{
                       borderRadius: 8, // Add this
                       borderWidth: 1.5,
@@ -536,9 +633,9 @@ const AddressScreen = ({ navigation }: Props) => {
                       setPincodeTextFieldFocused(false);
                     }}
                   />
-                  {isPinValid && (
+                  {(isPinValid == false) && (
                     <Text
-                      style={styles.errorText}
+                      style={[styles.errorText, {fontFamily: checkoutDetails.fontFamily.regular,}]}
                     >
                       {pinCodeErrorText}
                     </Text>
@@ -551,6 +648,7 @@ const AddressScreen = ({ navigation }: Props) => {
                       <Text
                         style={[styles.textFieldLable,{
                           color: cityTextFieldFocused ? '#2D2B32' : '#ADACB0',
+                          fontFamily: checkoutDetails.fontFamily.regular,
                         }]}
                       >
                         City*
@@ -566,8 +664,8 @@ const AddressScreen = ({ navigation }: Props) => {
                         outline: '#E6E6E6',
                       },
                     }}
-                    style={[styles.textInput, { marginStart: 8 }]}
-                    error={isCityValid}
+                    style={[styles.textInput, { marginStart: 8, fontFamily: checkoutDetails.fontFamily.regular, }]}
+                    error={isCityValid == false}
                     outlineStyle={{
                       borderRadius: 8, // Add this
                       borderWidth: 1.5,
@@ -579,9 +677,9 @@ const AddressScreen = ({ navigation }: Props) => {
                       setCityTextFieldFocused(false);
                     }}
                   />
-                  {isCityValid && (
+                  {(isCityValid == false) && (
                     <Text
-                      style={styles.errorText}
+                      style={[styles.errorText, {fontFamily: checkoutDetails.fontFamily.regular,}]}
                     >
                       {cityErrorText}
                     </Text>
@@ -594,6 +692,7 @@ const AddressScreen = ({ navigation }: Props) => {
                   <Text
                     style={[styles.textFieldLable,{
                       color: stateTextFieldFocused ? '#2D2B32' : '#ADACB0',
+                      fontFamily: checkoutDetails.fontFamily.regular,
                     }]}
                   >
                     State*
@@ -611,9 +710,9 @@ const AddressScreen = ({ navigation }: Props) => {
                 }}
                 style={[
                   styles.textInput,
-                  { marginTop: 20, marginHorizontal: 16 },
+                  { marginTop: 20, marginHorizontal: 16, fontFamily: checkoutDetails.fontFamily.regular, },
                 ]}
-                error={isStateValid}
+                error={isStateValid == false}
                 outlineStyle={{
                   borderRadius: 8, // Add this
                   borderWidth: 1.5,
@@ -625,9 +724,9 @@ const AddressScreen = ({ navigation }: Props) => {
                   setStateTextFieldFocused(false);
                 }}
               />
-              {isStateValid && (
+              {(isStateValid == false) && (
                 <Text
-                  style={styles.errorText}
+                  style={[styles.errorText, {fontFamily: checkoutDetails.fontFamily.regular,}]}
                 >
                   {stateErrorText}
                 </Text>
@@ -640,6 +739,7 @@ const AddressScreen = ({ navigation }: Props) => {
                       color: mainAddressTextFieldFocused
                         ? '#2D2B32'
                         : '#ADACB0',
+                        fontFamily: checkoutDetails.fontFamily.regular,
                     }]}
                   >
                     House number, Apartment*
@@ -657,9 +757,9 @@ const AddressScreen = ({ navigation }: Props) => {
                 }}
                 style={[
                   styles.textInput,
-                  { marginTop: 20, marginHorizontal: 16 },
+                  { marginTop: 20, marginHorizontal: 16, fontFamily: checkoutDetails.fontFamily.regular, },
                 ]}
-                error={isMainAddressValid}
+                error={isMainAddressValid == false}
                 outlineStyle={{
                   borderRadius: 8, // Add this
                   borderWidth: 1.5,
@@ -671,9 +771,9 @@ const AddressScreen = ({ navigation }: Props) => {
                   setMainAddressTextFieldFocused(false);
                 }}
               />
-              {isMainAddressValid && (
+              {(isMainAddressValid == false) && (
                 <Text
-                  style={styles.errorText}
+                  style={[styles.errorText, {fontFamily: checkoutDetails.fontFamily.regular,}]}
                 >
                   {mainAddressErrorText}
                 </Text>
@@ -686,6 +786,7 @@ const AddressScreen = ({ navigation }: Props) => {
                       color: secondaryAddressTextFieldFocused
                         ? '#2D2B32'
                         : '#ADACB0',
+                        fontFamily: checkoutDetails.fontFamily.regular,
                     }]}
                   >
                     Area,Colony,Street, Sector
@@ -703,7 +804,7 @@ const AddressScreen = ({ navigation }: Props) => {
                 }}
                 style={[
                   styles.textInput,
-                  { marginTop: 20, marginHorizontal: 16 },
+                  { marginTop: 20, marginHorizontal: 16, fontFamily: checkoutDetails.fontFamily.regular, },
                 ]}
                 outlineStyle={{
                   borderRadius: 8, // Add this
@@ -720,13 +821,25 @@ const AddressScreen = ({ navigation }: Props) => {
           )}
         </View>
       </ScrollView>
+      <CountryPicker
+      visible = {showCountryPicker}
+      withFilter = {true}
+      withCallingCode = {true}
+      withAlphaFilter = {true}
+      withFlag = {true}
+      withEmoji = {true}
+      countryCode={selectedCountryCode}
+      onSelect={handleCountrySelect}
+      />
       <View
         style={styles.bottomContainer}
       >
         <Pressable
           style={[
             styles.buttonContainer,
-            { backgroundColor: checkoutDetails.brandColor },
+            { backgroundColor: checkoutDetails.buttonColor,
+              borderRadius: checkoutDetails.ctaBorderRadius,
+             },
           ]}
           onPress={() => {
             // Todo add functon call
@@ -737,7 +850,8 @@ const AddressScreen = ({ navigation }: Props) => {
                   email: emailTextField,
                   firstName: firstName,
                   lastName: lastName,
-                  phone: `${selectedPhoneCodeRef.current}${phoneNumberTextField}`,
+                  completePhoneNumber: `${selectedPhoneCode}${phoneNumberTextField}`,
+                  phoneCode : selectedPhoneCode,
                   uniqueId: userData.uniqueId,
                   dob: userData.dob,
                   pan: userData.pan,
@@ -746,7 +860,8 @@ const AddressScreen = ({ navigation }: Props) => {
                   city: cityTextField,
                   state: stateTextField,
                   pincode: pinTextField,
-                  country: selectedCountryCode,
+                  countryCode: selectedCountryCode,
+                  countryName : countryTextField,
                   labelType: userData.labelType,
                   labelName: userData.labelName,
                 },
@@ -755,12 +870,17 @@ const AddressScreen = ({ navigation }: Props) => {
             }
           }}
         >
-          <Text style={styles.buttonText}>
+          <Text
+            style={[
+              styles.buttonText,
+              { color: checkoutDetails.buttonTextColor, fontFamily: checkoutDetails.fontFamily.semiBold, }
+            ]}
+          >
             {isShippingEnabled ? 'Save Address' : 'Save Personal Details'}
           </Text>
         </Pressable>
       </View>
-    </SafeAreaView>
+    </View>
   );
 };