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

package/src/screens/netBankingScreen.tsx

@@ -4,12 +4,10 @@ import {
   BackHandler,
   Image,
   ScrollView,
-  Dimensions,
-  StatusBar,
-  SafeAreaView,
+  Dimensions
 } from 'react-native';
 import { useEffect, useRef, useState } from 'react';
-import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
+import { checkoutDetailsHandler, setCheckOutDetailsHandlerToDefault } from '../sharedContext/checkoutDetailsHandler';
 import LottieView from 'lottie-react-native';
 import Header from '../components/header';
 import { TextInput } from 'react-native-paper';
@@ -27,6 +25,7 @@ import { fetchPaymentMethodHandler, handleFetchStatusResponseHandler, handlePaym
 import styles from '../styles/screens/netBankingScreenStyles';
 import type { CheckoutStackParamList } from '../navigation';
 import type { NavigationProp } from '@react-navigation/native';
+import { setUserDataHandlerToDefault } from '../sharedContext/userdataHandler';
 
 type NetBankingScreenNavigationProp = NavigationProp<CheckoutStackParamList, 'NetBankingScreen'>;
 
@@ -93,23 +92,27 @@ const NetBankingScreen = ({ navigation }: Props) => {
   };
 
   useEffect(() => {
-    BackHandler.addEventListener(
-      'hardwareBackPress',
-      () => {
-        if (showWebView) {
-          setShowWebView(false);
-          paymentFailedMessage.current = checkoutDetails.errorMessage;
-          setStatus('Failed');
-          setFailedModalState(true);
-          setLoading(false);
-          return true;
-        } else if (loading) {
-          return true; // Prevent default back action
-        }
-        return onProceedBack(); // Allow back navigation if not loading
+
+    const backAction = () => {
+      if (showWebView) {
+        setShowWebView(false);
+        paymentFailedMessage.current = checkoutDetails.errorMessage;
+        setStatus('Failed');
+        setFailedModalState(true);
+        setLoading(false);
+        return true;
+      } else if (loading) {
+        return true; // Prevent default back action
       }
+      return onProceedBack();
+    }
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      backAction,
     );
-  });
+
+    return () => backHandler.remove();
+  }, [navigation]);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -225,10 +228,14 @@ const NetBankingScreen = ({ navigation }: Props) => {
   };
 
   const onExitCheckout = () => {
+    setSuccessModalState(false)
+    setSessionExppireModalState(false)
     const mockPaymentResult: PaymentResultObject = {
       status: status || '',
       transactionId: transactionId || '',
     };
+    setUserDataHandlerToDefault()
+    setCheckOutDetailsHandlerToDefault()
     paymentHandler.onPaymentResult(mockPaymentResult);
   };
 
@@ -252,8 +259,7 @@ const NetBankingScreen = ({ navigation }: Props) => {
   }, [searchText]);
 
   return (
-    <SafeAreaView style={styles.screenView}>
-      <StatusBar barStyle="dark-content" />
+    <View style={styles.screenView}>
       {loading ? (
         <View
           style={styles.loadingContainer}
@@ -291,6 +297,7 @@ const NetBankingScreen = ({ navigation }: Props) => {
                         : searchText != '' && searchText != null
                           ? '#2D2B32'
                           : '#ADACB0',
+                          fontFamily: checkoutDetails.fontFamily.regular,
                     }]}
                   >
                     Search for bank
@@ -306,7 +313,7 @@ const NetBankingScreen = ({ navigation }: Props) => {
                     outline: '#E6E6E6',
                   },
                 }}
-                style={styles.searchTextInput}
+                style={[styles.searchTextInput, {fontFamily: checkoutDetails.fontFamily.regular,}]}
                 left={
                   <TextInput.Icon
                     icon={() => (
@@ -341,7 +348,7 @@ const NetBankingScreen = ({ navigation }: Props) => {
             {popularNetBankingList.length > 0 && searchText.length === 0 && (
               <>
                 <Text
-                  style={styles.headingText}
+                  style={[styles.headingText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}
                 >
                   Popular Banks
                 </Text>
@@ -361,7 +368,7 @@ const NetBankingScreen = ({ navigation }: Props) => {
             )}
 
             <Text
-              style={styles.headingText}
+              style={[styles.headingText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}
             >
               All Banks
             </Text>
@@ -387,12 +394,12 @@ const NetBankingScreen = ({ navigation }: Props) => {
                   style={styles.emptyIcon}
                 />
                 <Text
-                  style={styles.emptyListHeadingText}
+                  style={[styles.emptyListHeadingText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}
                 >
                   Oops!! No result found
                 </Text>
                 <Text
-                  style={styles.emptyListDescText}
+                  style={[styles.emptyListDescText, {fontFamily: checkoutDetails.fontFamily.regular,}]}
                 >
                   Please try another search
                 </Text>
@@ -403,7 +410,7 @@ const NetBankingScreen = ({ navigation }: Props) => {
             style={styles.footerContainer}
           >
             <Text
-              style={styles.footerTextStyle}
+              style={[styles.footerTextStyle, {fontFamily: checkoutDetails.fontFamily.medium,}]}
             >
               Secured by
             </Text>
@@ -446,7 +453,7 @@ const NetBankingScreen = ({ navigation }: Props) => {
           />
         </View>
       )}
-    </SafeAreaView>
+    </View>
   );
 };
 

package/src/screens/savedAddressScreen.tsx

@@ -1,7 +1,5 @@
 import {
     View,
-    SafeAreaView,
-    StatusBar,
     Text,
     BackHandler,
     ScrollView,
@@ -23,7 +21,7 @@ import SavedAddressComponent from '../components/savedAddressCard';
 import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
 import SavedAddressBottomSheet from '../components/savedAddressBottomSheet';
 import { setUserDataHandler, userDataHandler } from '../sharedContext/userdataHandler';
-import { extractNames, formatAddress } from '../utility';
+import { extractNames, formatAddress, getPhoneNumberCodeAndCountryName } from '../utility';
 import DeleteAddressModal from '../components/deleteAddressModal';
 
 type AddressScreenNavigationProp = NavigationProp<CheckoutStackParamList, 'AddressScreen'>;
@@ -110,25 +108,33 @@ const SavedAddressScreen = ({ navigation }: Props) => {
 
 
     useEffect(() => {
-        BackHandler.addEventListener(
-          'hardwareBackPress',
-          () => {
+
+        const backAction = () => {
             if (loading) {
-              return true; 
+                return true; 
             }
-            return onProceedBack(); // Allow back navigation if not loading
-          }
+            return onProceedBack();
+        }
+        const backHandler = BackHandler.addEventListener(
+          'hardwareBackPress',
+          backAction,
         );
-      });
+    
+        return () => backHandler.remove();
+    }, [navigation]);
+
     useEffect(() => {
         if(updateAddress || isEditClicked) {
+            setIsEditClicked(false)
             const { firstName, lastName } = extractNames(selectedAddress?.name ?? "");
+            const selectedCountry = getPhoneNumberCodeAndCountryName(selectedAddress?.countryCode ?? "")
             setUserDataHandler({
                 userData: {
                   email: selectedAddress?.email ?? "",
                   firstName: firstName,
                   lastName: lastName,
-                  phone: selectedAddress?.phoneNumber ?? "",
+                  completePhoneNumber: selectedAddress?.phoneNumber ?? "",
+                  phoneCode : selectedCountry.isdCode ?? "",
                   uniqueId: userDataHandler.userData.uniqueId,
                   dob: userDataHandler.userData.dob,
                   pan: userDataHandler.userData.pan,
@@ -137,13 +143,14 @@ const SavedAddressScreen = ({ navigation }: Props) => {
                   city: selectedAddress?.city ?? "",
                   state: selectedAddress?.state ?? "",
                   pincode: selectedAddress?.postalCode ?? "",
-                  country: selectedAddress?.countryCode ?? "",
+                  countryCode: selectedAddress?.countryCode ?? "",
+                  countryName : selectedCountry.fullName ?? "",
                   labelType: selectedAddress?.labelType ?? "",
                   labelName: selectedAddress?.labelName ?? "",
                 },
             });
             if(isEditClicked) {
-                navigation.navigate("AddressScreen",{})
+                navigation.navigate("AddressScreen",{isNewAddress : false})
             } else {
                 navigation.goBack()
             }
@@ -151,8 +158,7 @@ const SavedAddressScreen = ({ navigation }: Props) => {
     }, [updateAddress, isEditClicked]);
 
     return (
-        <SafeAreaView style = {styles.screenView}>
-            <StatusBar barStyle="dark-content" />
+        <View style = {styles.screenView}>
             {isFirstLoad ? (
                 <ShimmerView/>
             ) : loading ? (
@@ -183,25 +189,41 @@ const SavedAddressScreen = ({ navigation }: Props) => {
                     style={styles.pressableContainer}
                     onPress={() => {
                       if (checkoutDetails.isShippingAddressEditable) {
-                        navigation.navigate("AddressScreen",{})
+                        navigation.navigate("AddressScreen",{isNewAddress : true})
                       }
                     }}
                   >
                     <Image
                       source={require('../../assets/images/add_icon.png')}
-                      style={[styles.imageStyle, {tintColor:checkoutDetails.brandColor}]}
+                      style={[styles.imageStyle, {tintColor:checkoutDetails.buttonColor}]}
                     />
                     <Text
                       numberOfLines={1}
                       ellipsizeMode="tail"
-                      style={[styles.insideContainerClickableText, {color:checkoutDetails.brandColor}]}
+                      style={[styles.insideContainerClickableText, {color:checkoutDetails.buttonColor, paddingTop:4, fontFamily: checkoutDetails.fontFamily.semiBold,}]}
                     >
                       Add new address
                     </Text>
+                    <Image
+                      source={require('../../assets/images/chervon-down.png')}
+                      style={{
+                        alignSelf: 'center',
+                        height: 6,
+                        width: 14,
+                        marginTop : 6,
+                        marginRight :10,
+                        marginLeft: 'auto',
+                        transform: [
+                          {
+                            rotate: '270deg',
+                          },
+                        ],
+                      }}
+                    />
                   </Pressable>
                   {savedAddressList.length !== 0 && (
     <>
-        <Text style={styles.mainHeadingText}>
+        <Text style={[styles.mainHeadingText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>
             Saved Addresses
         </Text>
         <ScrollView
@@ -265,7 +287,7 @@ const SavedAddressScreen = ({ navigation }: Props) => {
             labelType : selectedAddress?.labelType ?? ""
           })}
       />
-        </SafeAreaView>
+        </View>
     )
 }
 

package/src/screens/selectTenureScreen.tsx

@@ -1,4 +1,4 @@
-import { View, Text, Image, SafeAreaView } from 'react-native';
+import { View, Text, Image } from 'react-native';
 import { useState } from 'react';
 import type { Emi } from '../interface';
 import Header from '../components/header';
@@ -38,7 +38,7 @@ const SelectTenureScreen = ({
   const [selectedEmi, setSelectedEmi] = useState('');
   const [selectedDuration, setSelectedDuration] = useState(0);
   return (
-    <SafeAreaView style={styles.screenView}>
+    <View style={styles.screenView}>
       <Header
         onBackPress={onbackPress}
         showDesc={true}
@@ -80,7 +80,7 @@ const SelectTenureScreen = ({
             )}
           </View>
           <Text
-            style={styles.text}
+            style={[styles.text, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}
           >
             {bankName} | {cardType} EMI
           </Text>
@@ -114,7 +114,7 @@ const SelectTenureScreen = ({
                 selectedEmi === item.amount &&
                 selectedDuration === item.duration
               }
-              brandColor={checkoutDetails.brandColor}
+              brandColor={checkoutDetails.buttonColor}
               onRadioClick={(duration, amount) => {
                 setSelectedDuration(duration);
                 setSelectedEmi(amount);
@@ -130,7 +130,7 @@ const SelectTenureScreen = ({
           </View>
         ))}
       </View>
-    </SafeAreaView>
+    </View>
   );
 };