boxpay-checkout-reactnative-sdk 1.0.0-beta25 → 1.0.0-beta26

package/lib/typescript/src/screens/upiTimerScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"upiTimerScreen.d.ts","sourceRoot":"","sources":["../../../../src/screens/upiTimerScreen.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,KAAK,EAAC,SAAS,EAAE,cAAc,EAAC,MAAM,0BAA0B,CAAA;AAEvE,KAAK,uBAAuB,GAAG,SAAS,CAAC,sBAAsB,EAAE,gBAAgB,CAAC,CAAC;AAGnF,KAAK,2BAA2B,GAAG,cAAc,CAAC,sBAAsB,EAAE,gBAAgB,CAAC,CAAC;AAE5F,UAAU,KAAK;IACb,KAAK,EAAE,uBAAuB,CAAC;IAC/B,UAAU,EAAE,2BAA2B,CAAC;CACzC;AAED,QAAA,MAAM,cAAc,GAAI,uBAAuB,KAAK,4CAmQnD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"upiTimerScreen.d.ts","sourceRoot":"","sources":["../../../../src/screens/upiTimerScreen.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,KAAK,EAAC,SAAS,EAAE,cAAc,EAAC,MAAM,0BAA0B,CAAA;AAEvE,KAAK,uBAAuB,GAAG,SAAS,CAAC,sBAAsB,EAAE,gBAAgB,CAAC,CAAC;AAGnF,KAAK,2BAA2B,GAAG,cAAc,CAAC,sBAAsB,EAAE,gBAAgB,CAAC,CAAC;AAE5F,UAAU,KAAK;IACb,KAAK,EAAE,uBAAuB,CAAC;IAC/B,UAAU,EAAE,2BAA2B,CAAC;CACzC;AAED,QAAA,MAAM,cAAc,GAAI,uBAAuB,KAAK,4CA8PnD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/typescript/src/styles/components/savedAddressCardStyles.d.ts

@@ -34,6 +34,7 @@ declare const styles: {
         fontSize: number;
         fontFamily: string;
         color: string;
+        marginBottom: number;
     };
     selectedTag: {
         backgroundColor: string;
@@ -42,6 +43,7 @@ declare const styles: {
         borderRadius: number;
         marginLeft: number;
         borderColor: string;
+        borderWidth: number;
     };
     selectedTagText: {
         fontSize: number;
@@ -49,11 +51,9 @@ declare const styles: {
         color: string;
     };
     addressText: {
-        marginTop: number;
         fontSize: number;
         fontFamily: string;
         color: string;
-        lineHeight: number;
     };
     imageStyle: {
         width: number;

package/lib/typescript/src/styles/screens/savedAddressScreenStyles.d.ts

@@ -19,7 +19,6 @@ declare const styles: {
     };
     mainHeadingText: {
         marginTop: number;
-        marginBottom: number;
         marginHorizontal: number;
         color: string;
         fontFamily: string;
@@ -34,21 +33,18 @@ declare const styles: {
         backgroundColor: string;
         flexDirection: "row";
         borderRadius: number;
-        alignItems: "center";
+        justifyContent: "center";
     };
     imageStyle: {
         height: number;
         width: number;
         marginStart: number;
-        marginTop: number;
         tintColor: string;
     };
     insideContainerClickableText: {
         fontSize: number;
         color: string;
         fontFamily: string;
-        flexShrink: number;
-        marginTop: number;
     };
 };
 export default styles;

package/lib/typescript/src/styles/screens/savedAddressScreenStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"savedAddressScreenStyles.d.ts","sourceRoot":"","sources":["../../../../../src/styles/screens/savedAddressScreenStyles.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDV,CAAA;AAEF,eAAe,MAAM,CAAA"}
+{"version":3,"file":"savedAddressScreenStyles.d.ts","sourceRoot":"","sources":["../../../../../src/styles/screens/savedAddressScreenStyles.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CV,CAAA;AAEF,eAAe,MAAM,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "boxpay-checkout-reactnative-sdk",
-  "version": "1.0.0-beta25",
+  "version": "1.0.0-beta26",
   "description": "Boxpay Payment Gateway",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -76,7 +76,6 @@
   "peerDependencies": {
     "react": "19.0.0",
     "react-native": "0.79.6",
-    "react-native-modal": ">=13.0.0",
     "react-native-paper": ">=5.0.0",
     "react-native-shimmer-placeholder": ">=2.0.0",
     "react-native-toast-message": ">=2.0.0",

package/src/components/cancelPaymentModal.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { View, Text, Image, Pressable } from 'react-native';
-import Modal from 'react-native-modal';
+import { View, Text, Image, Pressable, Modal } from 'react-native';
 import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
 import styles from '../styles/components/cancelPaymentModalStyles';
 
@@ -17,7 +16,7 @@ const CancelPaymentModal: React.FC<CancelPaymentModalProps> = ({
 
   return (
     <View style={styles.modalContainer}>
-      <Modal isVisible={true} style={styles.modal}>
+      <Modal visible={true} style={styles.modal}>
         <View style={styles.modalContent}>
           <View style={styles.iconContainer}>
             <Image

package/src/components/cvvInfoBottomSheet.tsx

@@ -1,6 +1,5 @@
-import { View, Text, Pressable, Image } from 'react-native';
+import { View, Text, Pressable, Image, Modal } from 'react-native';
 import React from 'react';
-import Modal from 'react-native-modal';
 import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
 import styles from '../styles/components/cvvInfoBottomSheetStyles';
 
@@ -11,7 +10,7 @@ const CvvInfoBottomSheet: React.FC<CvvInfoBottomSheetProps> = ({ onClick }) => {
   const { checkoutDetails } = checkoutDetailsHandler;
   return (
     <View>
-      <Modal isVisible={true} style={styles.modal} onBackdropPress={onClick}>
+      <Modal visible={true} style={styles.modal} onRequestClose={onClick}>
         <View style={styles.sheet}>
           <Text
             style={styles.headingText}

package/src/components/deleteAddressModal.tsx

@@ -1,5 +1,5 @@
-import { View, Text, TouchableOpacity, StyleSheet, Image } from "react-native";
-import Modal from "react-native-modal";
+import { View, Text, TouchableOpacity, StyleSheet, Image, Modal } from "react-native";
+import { checkoutDetailsHandler } from "../sharedContext/checkoutDetailsHandler";
 
 interface DeletePros {
     visible : boolean,
@@ -11,12 +11,8 @@ interface DeletePros {
 const DeleteAddressModal = ({ visible, onCancel, onDelete, address } : DeletePros) => {
   return (
     <Modal
-      isVisible={visible}
-      animationIn="zoomIn"
-      animationOut="zoomOut"
-      backdropOpacity={0.5}
-      onBackdropPress={onCancel}
-      useNativeDriver
+      visible={visible}
+      onRequestClose={onCancel}
     >
       <View style={styles.modalContainer}>
         {/* Delete Icon */}
@@ -45,36 +41,31 @@ const DeleteAddressModal = ({ visible, onCancel, onDelete, address } : DeletePro
     </Modal>
   );
 };
-
+const {brandColor} = checkoutDetailsHandler.checkoutDetails
 const styles = StyleSheet.create({
   modalContainer: {
     backgroundColor: "#fff",
     borderRadius: 16,
     padding: 20,
-    alignItems: "center",
-    justifyContent: "center",
     width: "90%",
     alignSelf: "center",
   },
   deleteIcon: {
-    width: 40,
-    height: 40,
-    marginBottom: 10,
-    tintColor: "#FF3B30",
+    width: 28,
+    height: 28,
+    marginBottom: 10
   },
   title: {
-    fontSize: 18,
-    fontWeight: "700",
-    color: "#000",
-    textAlign: "center",
-    marginBottom: 10,
+    fontSize: 16,
+    fontFamily:"Poppins-SemiBold",
+    color: "#2D2B32",
+    marginBottom: 4,
   },
   address: {
-    fontSize: 14,
-    color: "#666",
-    textAlign: "center",
+    fontSize: 12,
+    color: "#4F4D55",
     marginBottom: 20,
-    lineHeight: 20,
+    fontFamily:"Poppins-Regular"
   },
   buttonRow: {
     flexDirection: "row",
@@ -95,19 +86,19 @@ const styles = StyleSheet.create({
   deleteButton: {
     flex: 1,
     paddingVertical: 12,
-    backgroundColor: "#0A8754",
+    backgroundColor: brandColor,
     borderRadius: 8,
     alignItems: "center",
   },
   cancelText: {
     fontSize: 16,
-    color: "#0A8754",
-    fontWeight: "600",
+    color: brandColor,
+    fontFamily:"Poppins-Regular"
   },
   deleteText: {
     fontSize: 16,
     color: "#fff",
-    fontWeight: "600",
+    fontFamily:"Poppins-SemiBold"
   },
 });
 

package/src/components/knowMoreBottomSheet.tsx

@@ -1,5 +1,4 @@
-import { View, Text, StyleSheet, Pressable, Image } from 'react-native';
-import Modal from 'react-native-modal';
+import { View, Text, StyleSheet, Pressable, Image, Modal } from 'react-native';
 import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
 
 interface KnowMoreBottomSheetProps {
@@ -10,7 +9,7 @@ const KnowMoreBottomSheet = ({ onClick }: KnowMoreBottomSheetProps) => {
   const { checkoutDetails } = checkoutDetailsHandler;
   return (
     <View>
-      <Modal isVisible={true} style={styles.modal} onBackdropPress={onClick}>
+      <Modal visible={true} style={styles.modal} onRequestClose={onClick}>
         <View style={styles.sheet}>
           <Text
             style={styles.headingText}

package/src/components/paymentFailed.tsx

@@ -1,6 +1,5 @@
-import { View, Text, StyleSheet, Pressable } from 'react-native';
+import { View, Text, StyleSheet, Pressable, Modal } from 'react-native';
 import React from 'react';
-import Modal from 'react-native-modal';
 import LottieView from 'lottie-react-native';
 import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
 import callUIAnalytics from '../postRequest/callUIAnalytics';
@@ -17,7 +16,7 @@ const PaymentFailed: React.FC<PaymentFailedProps> = ({
   const { checkoutDetails } = checkoutDetailsHandler;
   return (
     <View>
-      <Modal isVisible={true} style={styles.modal}>
+      <Modal visible={true} style={styles.modal}>
         <View style={styles.sheet}>
           <LottieView
             source={require('../../assets/animations/payment_failed.json')}

package/src/components/paymentSuccess.tsx

@@ -1,6 +1,5 @@
-import { View, Text, StyleSheet, Pressable } from 'react-native';
+import { View, Text, StyleSheet, Pressable, Modal } from 'react-native';
 import React, { useEffect, useState } from 'react';
-import Modal from 'react-native-modal';
 import LottieView from 'lottie-react-native';
 import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
 import callUIAnalytics from '../postRequest/callUIAnalytics';
@@ -72,7 +71,7 @@ const PaymentSuccess: React.FC<PaymentSuccessProps> = ({
   });
   return (
     <View>
-      <Modal isVisible={true} style={styles.modal}>
+      <Modal visible={true} style={styles.modal}>
         <View style={styles.sheet}>
           <LottieView
             source={require('../../assets/animations/payment_successful.json')}

package/src/components/savedAddressBottomSheet.tsx

@@ -4,8 +4,8 @@ import {
   TouchableOpacity,
   StyleSheet,
   Image,
+  Modal
 } from "react-native";
-import Modal from "react-native-modal";
 
 interface Props {
   visible: boolean;
@@ -30,26 +30,22 @@ const SavedAddressBottomSheet = ({
 }: Props) => {
   return (
     <Modal
-      isVisible={visible}
-      onBackdropPress={onClose}
+      visible={visible}
+      onRequestClose={onClose}
       style={styles.modal}
-      backdropOpacity={0.4}
     >
       <View style={styles.container}>
         {/* Address Info */}
-        <View style={styles.headerContainer}>
-          <Image source={icon} style={styles.icon} />
-          <View style={styles.textContainer}>
+        <View>
+          <View style={styles.headerContainer}>
+            <Image source={icon} style={styles.icon} />
             <Text style={styles.label}>{label}</Text>
-            <Text style={styles.address} numberOfLines={1} ellipsizeMode="tail">
+          </View>
+          <Text style={styles.address} numberOfLines={1} ellipsizeMode="tail">
               {address}
             </Text>
-          </View>
         </View>
 
-        {/* Divider */}
-        <View style={styles.divider} />
-
         {/* Options */}
         <TouchableOpacity style={styles.option} onPress={onEdit}>
           <Text style={styles.optionText}>Edit</Text>
@@ -74,7 +70,7 @@ const styles = StyleSheet.create({
     margin: 0,
   },
   container: {
-    backgroundColor: "#fff",
+    backgroundColor: "#F5F6FB",
     borderTopLeftRadius: 16,
     borderTopRightRadius: 16,
     padding: 16,
@@ -83,6 +79,7 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     marginBottom: 12,
+    justifyContent:'center'
   },
   icon: {
     width: 20,
@@ -101,14 +98,9 @@ const styles = StyleSheet.create({
   address: {
     fontSize: 14,
     color: "#4F4D55",
-    marginTop: 4,
+    marginTop: 2,
     fontFamily:"Poppins-Regular"
   },
-  divider: {
-    height: 1,
-    backgroundColor: "#ECECED",
-    marginVertical: 12,
-  },
   option: {
     paddingVertical: 14,
     alignItems: "center",
@@ -120,7 +112,8 @@ const styles = StyleSheet.create({
   },
   optionText: {
     fontSize: 16,
-    color: "#000",
+    color: "#2D2B32",
+    fontFamily:"Poppins-Regular"
   },
   deleteOption: {
     paddingVertical: 14,
@@ -128,8 +121,8 @@ const styles = StyleSheet.create({
   },
   deleteText: {
     fontSize: 16,
-    color: "red",
-    fontWeight: "600",
+    color: "#FF4D4F",
+    fontFamily:"Poppins-Regular"
   },
 });
 

package/src/components/sessionExpire.tsx

@@ -1,6 +1,5 @@
-import { View, Text, StyleSheet, Pressable } from 'react-native';
+import { View, Text, StyleSheet, Pressable, Modal } from 'react-native';
 import React from 'react';
-import Modal from 'react-native-modal';
 import LottieView from 'lottie-react-native';
 import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
 import callUIAnalytics from '../postRequest/callUIAnalytics';
@@ -14,7 +13,7 @@ const SessionExpire: React.FC<SessionExpireProps> = ({ onClick }) => {
   const { checkoutDetails } = checkoutDetailsHandler;
   return (
     <View>
-      <Modal isVisible={true} style={styles.modal}>
+      <Modal visible={true} style={styles.modal}>
         <View style={styles.sheet}>
           <LottieView
             source={require('../../assets/animations/payment_status_pending.json')}

package/src/screens/addressScreen.tsx

@@ -86,18 +86,12 @@ const AddressScreen = ({ navigation }: Props) => {
   };
 
   useEffect(() => {
-    const backHandler = BackHandler.addEventListener(
+   BackHandler.addEventListener(
       'hardwareBackPress',
       () => {
         return onProceedBack(); // Allow back navigation if not loading
       }
     );
-
-    return () => {
-      if (backHandler) {
-        backHandler.remove();
-      }
-  };
   });
 
   const onChangeFullName = (updatedText: string) => {

package/src/screens/bnplScreen.tsx

@@ -65,7 +65,7 @@ const BNPLScreen = ({ navigation }: Props) => {
   };
 
   useEffect(() => {
-    const backHandler = BackHandler.addEventListener(
+    BackHandler.addEventListener(
       'hardwareBackPress',
       () => {
         if (showWebView) {
@@ -81,12 +81,6 @@ const BNPLScreen = ({ navigation }: Props) => {
         return onProceedBack(); // Allow back navigation if not loading
       }
     );
-
-    return () => {
-      if (backHandler) {
-        backHandler.remove();
-      }
-  };
   });
 
   useEffect(() => {

package/src/screens/cardScreen.tsx

@@ -522,7 +522,7 @@ const CardScreen = ({ route, navigation }: Props) => {
   };
 
   useEffect(() => {
-    const backHandler = BackHandler.addEventListener(
+    BackHandler.addEventListener(
       'hardwareBackPress',
       () => {
         if (showWebView) {
@@ -538,12 +538,6 @@ const CardScreen = ({ route, navigation }: Props) => {
         return onProceedBack(); // Allow back navigation if not loading
       }
     );
-
-    return () => {
-      if (backHandler) {
-        backHandler.remove();
-      }
-  };
   });
 
   useEffect(() => {

package/src/screens/emiScreen.tsx

@@ -375,7 +375,7 @@ const EmiScreen = ({ navigation }: Props) => {
     return true;
   };
   useEffect(() => {
-    const backHandler = BackHandler.addEventListener(
+    BackHandler.addEventListener(
       'hardwareBackPress',
       () => {
         if (showWebView) {
@@ -394,12 +394,6 @@ const EmiScreen = ({ navigation }: Props) => {
         return onProceedBack(); // Allow back navigation if not loading
       }
     );
-
-    return () => {
-      if (backHandler) {
-        backHandler.remove();
-      }
-  };
   });
 
   const navigateToCardScreen = (

package/src/screens/mainScreen.tsx

@@ -263,7 +263,7 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
   };
 
   useEffect(() => {
-    const backHandler = BackHandler.addEventListener(
+    BackHandler.addEventListener(
       'hardwareBackPress',
       () => {
         if (showWebView) {
@@ -280,12 +280,6 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
         return onExitCheckout();
       }
     );
-
-    return () => {
-      if (backHandler) {
-        backHandler.remove();
-      }
-    };
   });
 
   useEffect(() => {

package/src/screens/netBankingScreen.tsx

@@ -93,7 +93,7 @@ const NetBankingScreen = ({ navigation }: Props) => {
   };
 
   useEffect(() => {
-    const backHandler = BackHandler.addEventListener(
+    BackHandler.addEventListener(
       'hardwareBackPress',
       () => {
         if (showWebView) {
@@ -109,12 +109,6 @@ const NetBankingScreen = ({ navigation }: Props) => {
         return onProceedBack(); // Allow back navigation if not loading
       }
     );
-
-    return () => {
-      if (backHandler) {
-        backHandler.remove();
-      }
-    };
   });
 
   useEffect(() => {

package/src/screens/savedAddressScreen.tsx

@@ -111,7 +111,7 @@ const SavedAddressScreen = ({ navigation }: Props) => {
 
 
     useEffect(() => {
-        const backHandler = BackHandler.addEventListener(
+        BackHandler.addEventListener(
           'hardwareBackPress',
           () => {
             if (loading) {
@@ -120,12 +120,6 @@ const SavedAddressScreen = ({ navigation }: Props) => {
             return onProceedBack(); // Allow back navigation if not loading
           }
         );
-    
-        return () => {
-            if (backHandler) {
-              backHandler.remove();
-            }
-        };
       });
     useEffect(() => {
         if(updateAddress || isEditClicked) {
@@ -220,7 +214,6 @@ const SavedAddressScreen = ({ navigation }: Props) => {
                 onClickAddress={(address : FetchSavedAddress) => {
                     setSelectedAddress(address)
                     setUpdateAddress(true)
-                    console.log(address);
                 }}
                 onClickOtherOptions={(address : FetchSavedAddress) => {
                     setSelectedAddress(address)
@@ -236,7 +229,7 @@ const SavedAddressScreen = ({ navigation }: Props) => {
         visible={isOptionsClicked}
         onClose={() => setIsOptionsClicked(false)}
         onEdit={() => setIsEditClicked(true)}
-        onSetDefault={() => console.log("Set as Default clicked")}
+        onSetDefault={() => setUpdateAddress(true)}
         onDelete={() => setIsDeleteConfirmationVisible(true)}
         label= {selectedAddress?.labelName ? selectedAddress?.labelName ?? "" : selectedAddress?.labelType ?? ""}
         address={formatAddress({

package/src/screens/upiTimerScreen.tsx

@@ -114,15 +114,10 @@ const UpiTimerScreen = ({ route, navigation }: Props) => {
   };
 
   useEffect(() => {
-    const backHandler = BackHandler.addEventListener(
+    BackHandler.addEventListener(
       'hardwareBackPress',
       onProceedBack
     );
-    return () => {
-      if (backHandler) {
-        backHandler.remove();
-      }
-    };
   }, []);
 
   const formatTime = () => {

package/src/styles/components/savedAddressCardStyles.ts

@@ -33,6 +33,7 @@ const styles = StyleSheet.create({
       fontSize: 14,
       fontFamily: 'Poppins-SemiBold',
       color: "#2D2B32",
+      marginBottom:10
     },
     selectedTag: {
       backgroundColor: "#FFF0F6",
@@ -40,7 +41,8 @@ const styles = StyleSheet.create({
       paddingVertical: 2,
       borderRadius: 6,
       marginLeft: 8,
-      borderColor:"#FFADD2"
+      borderColor:"#FFADD2",
+      borderWidth:1
     },
     selectedTagText: {
       fontSize: 10,
@@ -48,11 +50,9 @@ const styles = StyleSheet.create({
       color: "#EB2F96",
     },
     addressText: {
-      marginTop: 10,
       fontSize: 12,
       fontFamily: 'Poppins-Regular',
       color: "#7F7D83",
-      lineHeight: 20,
     },
     imageStyle : {
       width : 20,

package/src/styles/screens/savedAddressScreenStyles.ts

@@ -22,7 +22,6 @@ const styles = StyleSheet.create({
     },
     mainHeadingText  :{
         marginTop: 16,
-        marginBottom: 8,
         marginHorizontal: 16,
         color: '#020815B5',
         fontFamily: 'Poppins-SemiBold',
@@ -37,21 +36,18 @@ const styles = StyleSheet.create({
         backgroundColor: 'white',
         flexDirection: 'row',
         borderRadius: 12,
-        alignItems:'center'
+        justifyContent:'center'
       },
       imageStyle : {
         height: 20,
         width: 20,
         marginStart: 12,
-        marginTop: 20,
         tintColor: brandColor
       },
       insideContainerClickableText : {
         fontSize: 14,
         color: brandColor,
         fontFamily: 'Poppins-SemiBold',
-        flexShrink: 1,
-        marginTop: -4,
       }
 })