boxpay-checkout-reactnative-sdk 1.0.0-beta2 → 1.0.0-beta23

package/src/screens/netBankingScreen.tsx

@@ -9,12 +9,11 @@ import {
   SafeAreaView,
 } from 'react-native';
 import { useEffect, useRef, useState } from 'react';
-import { router } from 'expo-router';
 import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
 import LottieView from 'lottie-react-native';
 import Header from '../components/header';
 import { TextInput } from 'react-native-paper';
-import type { PaymentClass, PaymentResult } from '../interface';
+import type { PaymentClass, PaymentResultObject } from '../interface';
 import ShimmerView from '../components/shimmerView';
 import PaymentSuccess from '../components/paymentSuccess';
 import SessionExpire from '../components/sessionExpire';
@@ -26,8 +25,16 @@ import WebViewScreen from './webViewScreen';
 import PaymentSelectorView from '../components/paymentSelector';
 import { fetchPaymentMethodHandler, handleFetchStatusResponseHandler, handlePaymentResponse } from '../sharedContext/handlePaymentResponseHandler';
 import styles from '../styles/screens/netBankingScreenStyles';
+import type { CheckoutStackParamList } from '../navigation';
+import type { NavigationProp } from '@react-navigation/native';
 
-const NetBankingScreen = () => {
+type NetBankingScreenNavigationProp = NavigationProp<CheckoutStackParamList, 'NetBankingScreen'>;
+
+interface Props {
+  navigation: NetBankingScreenNavigationProp;
+}
+
+const NetBankingScreen = ({ navigation }: Props) => {
   const [netBankingList, setNetBankingList] = useState<PaymentClass[]>([]);
   const [defaultNetBankingList, setDefaultNetBankingList] = useState<
     PaymentClass[]
@@ -75,7 +82,7 @@ const NetBankingScreen = () => {
 
   const onProceedBack = () => {
     if (!loading) {
-      router.back();
+      navigation.goBack()
       return true;
     }
     return false;
@@ -219,12 +226,11 @@ const NetBankingScreen = () => {
   };
 
   const onExitCheckout = () => {
-    const mockPaymentResult: PaymentResult = {
+    const mockPaymentResult: PaymentResultObject = {
       status: status || '',
       transactionId: transactionId || '',
     };
     paymentHandler.onPaymentResult(mockPaymentResult);
-    router.dismissAll();
   };
 
   useEffect(() => {

package/src/screens/savedAddressScreen.tsx

@@ -3,29 +3,55 @@ import {
     SafeAreaView,
     StatusBar,
     Text,
-    BackHandler
+    BackHandler,
+    ScrollView,
+    Image,
+    Pressable
 } from 'react-native';
-import styles from '../styles/savedAddressScreenStyles';
+import styles from '../styles/screens/savedAddressScreenStyles';
 import { useEffect, useState } from 'react';
 import ShimmerView from '../components/shimmerView';
 import LottieView from 'lottie-react-native';
 import Header from '../components/header';
-import { router } from 'expo-router';
-import { APIStatus, /*type FetchSavedAddress */} from '../interface';
+import { APIStatus, type FetchSavedAddress} from '../interface';
 import fetchSavedAddress from '../postRequest/fetchSavedAddress';
 import Toast from 'react-native-toast-message'
-// import deleteSavedAddress from '../postRequest/deleteSavedAddress';
+import deleteSavedAddress from '../postRequest/deleteSavedAddress';
+import type { CheckoutStackParamList } from '../navigation';
+import type { NavigationProp } from '@react-navigation/native';
+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 '../utils/stringUtils';
+import DeleteAddressModal from '../components/deleteAddressModal';
 
+type AddressScreenNavigationProp = NavigationProp<CheckoutStackParamList, 'AddressScreen'>;
 
+interface Props {
+  navigation: AddressScreenNavigationProp;
+}
 
-const SavedAddressScreen = () => {
+const SavedAddressScreen = ({ navigation }: Props) => {
     const [isFirstLoad, setIsFirstLoad] = useState(true)
-    const [loading, /*setLoading*/] = useState(false)
-    // const [savedAddressList, setSavedAddresList] = useState<FetchSavedAddress[]>([]);
+    const [loading, setLoading] = useState(false)
+    const [isEditClicked, setIsEditClicked] = useState(false)
+    const [savedAddressList, setSavedAddresList] = useState<FetchSavedAddress[]>([]);
+    const {checkoutDetails} = checkoutDetailsHandler
+    const [isOptionsClicked, setIsOptionsClicked] = useState<boolean>(false)
+    const [isDeleteConfirmationVisible, setIsDeleteConfirmationVisible] = useState<boolean>(false)
+    const [selectedAddress,setSelectedAddress] = useState<FetchSavedAddress>()
+    const [updateAddress, setUpdateAddress] = useState<boolean>(false)
+
+    const icons = {
+        home: require('../../assets/images/ic_home.png'),
+        work: require('../../assets/images/ic_work.png'),
+        other: require('../../assets/images/ic_other.png'),
+    };
 
     const onProceedBack = () => {
         if (!loading) {
-          router.back();
+            navigation.goBack()
           return true;
         }
         return false;
@@ -36,7 +62,8 @@ const SavedAddressScreen = () => {
             const apiResponse = await fetchSavedAddress()
             switch(apiResponse.apiStatus) {
                 case APIStatus.Success : {
-                    // setSavedAddresList(apiResponse.data)
+                    setSavedAddresList(apiResponse.data)
+                    console.log(apiResponse.data)
                     setIsFirstLoad(false)
                     break
                 }
@@ -57,30 +84,30 @@ const SavedAddressScreen = () => {
         fetchAddress()
     }, []);
 
-    // const onClickDeleteAddress = async (selectedAddressRef : string) => {
-    //     const response = await deleteSavedAddress(selectedAddressRef)
-    //     switch(response.apiStatus) {
-    //         case APIStatus.Success : {
-    //             setSavedAddresList(prevList =>
-    //                 prevList.filter(address => address.addressRef !== selectedAddressRef)
-    //             );
-    //             setLoading(false)
-    //             break
-    //         }
-    //         case APIStatus.Failed : {
-    //             Toast.show({
-    //                 type: 'error',
-    //                 text1: 'Oops!',
-    //                 text2: 'Something went wrong. Please try again.',
-    //             });
-    //             setLoading(false)
-    //             break
-    //         }
-    //         default : {
-    //             break
-    //         }
-    //     }
-    // }
+    const onClickDeleteAddress = async (selectedAddressRef : string) => {
+        const response = await deleteSavedAddress(selectedAddressRef)
+        switch(response.apiStatus) {
+            case APIStatus.Success : {
+                setSavedAddresList(prevList =>
+                    prevList.filter(address => address.addressRef !== selectedAddressRef)
+                );
+                setLoading(false)
+                break
+            }
+            case APIStatus.Failed : {
+                Toast.show({
+                    type: 'error',
+                    text1: 'Oops!',
+                    text2: 'Something went wrong. Please try again.',
+                });
+                setLoading(false)
+                break
+            }
+            default : {
+                break
+            }
+        }
+    }
 
 
     useEffect(() => {
@@ -92,6 +119,35 @@ const SavedAddressScreen = () => {
             backHandler.remove();
         };
     }, []);
+    useEffect(() => {
+        if(updateAddress || isEditClicked) {
+            const { firstName, lastName } = extractNames(selectedAddress?.name ?? "");
+            setUserDataHandler({
+                userData: {
+                  email: selectedAddress?.email ?? "",
+                  firstName: firstName,
+                  lastName: lastName,
+                  phone: selectedAddress?.phoneNumber ?? "",
+                  uniqueId: userDataHandler.userData.uniqueId,
+                  dob: userDataHandler.userData.dob,
+                  pan: userDataHandler.userData.pan,
+                  address1: selectedAddress?.address1 ?? "",
+                  address2: selectedAddress?.address2 ?? "",
+                  city: selectedAddress?.city ?? "",
+                  state: selectedAddress?.state ?? "",
+                  pincode: selectedAddress?.postalCode ?? "",
+                  country: selectedAddress?.countryCode ?? "",
+                  labelType: selectedAddress?.labelType ?? "",
+                  labelName: selectedAddress?.labelName ?? "",
+                },
+            });
+            if(isEditClicked) {
+                navigation.navigate("AddressScreen",{})
+            } else {
+                navigation.goBack()
+            }
+        }
+    }, [updateAddress, isEditClicked]);
 
     return (
         <SafeAreaView style = {styles.screenView}>
@@ -121,8 +177,92 @@ const SavedAddressScreen = () => {
                     <View
                         style={styles.divider}
                     />
+
+                    <Pressable  
+                    style={styles.pressableContainer}
+                    onPress={() => {
+                      if (checkoutDetails.isShippingAddressEditable) {
+                        navigation.navigate("AddressScreen",{})
+                      }
+                    }}
+                  >
+                    <Image
+                      source={require('../../assets/images/add_icon.png')}
+                      style={styles.imageStyle}
+                    />
+                    <Text
+                      numberOfLines={1}
+                      ellipsizeMode="tail"
+                      style={styles.insideContainerClickableText}
+                    >
+                      Add new address
+                    </Text>
+                  </Pressable>
+                  {savedAddressList.length !== 0 && (
+    <>
+        <Text style={styles.mainHeadingText}>
+            Saved Addresses
+        </Text>
+        <ScrollView
+            contentContainerStyle={{ flexGrow: 1 }}
+            keyboardShouldPersistTaps="handled"
+        >
+            <SavedAddressComponent
+                savedAddressList={savedAddressList}
+                onClickAddress={(address : FetchSavedAddress) => {
+                    setSelectedAddress(address)
+                    setUpdateAddress(true)
+                    console.log(address);
+                }}
+                onClickOtherOptions={(address : FetchSavedAddress) => {
+                    setSelectedAddress(address)
+                    setIsOptionsClicked(true)
+                }}
+            />
+        </ScrollView>
+    </>
+)}
                 </View>
             )}
+            <SavedAddressBottomSheet
+        visible={isOptionsClicked}
+        onClose={() => setIsOptionsClicked(false)}
+        onEdit={() => setIsEditClicked(true)}
+        onSetDefault={() => console.log("Set as Default clicked")}
+        onDelete={() => setIsDeleteConfirmationVisible(true)}
+        label= {selectedAddress?.labelName ? selectedAddress?.labelName ?? "" : selectedAddress?.labelType ?? ""}
+        address={formatAddress({
+            address1 : selectedAddress?.address1 ?? "",
+            address2: selectedAddress?.address2 ?? "",
+            city : selectedAddress?.city ?? "",
+            state : selectedAddress?.state ?? "",
+            postalCode : selectedAddress?.postalCode ?? "",
+            countryCode : selectedAddress?.countryCode ?? "",
+            labelName : selectedAddress?.labelName ?? "",
+            labelType : selectedAddress?.labelType ?? ""
+          })}
+        icon={icons[selectedAddress?.labelType.toLowerCase() as keyof typeof icons] || icons.other}
+      />
+
+<DeleteAddressModal
+        visible={isDeleteConfirmationVisible}
+        onCancel={() => setIsDeleteConfirmationVisible(false)}
+        onDelete={() => {
+            setIsDeleteConfirmationVisible(false);
+            console.log("Address deleted");
+            onClickDeleteAddress(selectedAddress?.addressRef ?? "")
+        }}
+        address={formatAddress({
+            address1 : selectedAddress?.address1 ?? "",
+            address2: selectedAddress?.address2 ?? "",
+            city : selectedAddress?.city ?? "",
+            state : selectedAddress?.state ?? "",
+            postalCode : selectedAddress?.postalCode ?? "",
+            countryCode : selectedAddress?.countryCode ?? "",
+            labelName : selectedAddress?.labelName ?? "",
+            labelType : selectedAddress?.labelType ?? ""
+          })}
+      />
         </SafeAreaView>
     )
 }

package/src/screens/upiScreen.tsx

@@ -11,7 +11,7 @@ import { TextInput } from 'react-native-paper';
 import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
 import type { PaymentClass } from '../interface';
 import PaymentSelectorView from '../components/paymentSelector';
-import { getInstalledUpiApps } from '../../cross_platform_sdk_react_native_plugin';
+import { getInstalledUpiApps } from '../components/getInstalledUPI';
 import styles from '../styles/screens/upiScreenStyles';
 
 interface UpiScreenProps {
@@ -42,10 +42,14 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
 
   useEffect(() => {
     const checkUpiApps = async () => {
-      const installedApplications = await getInstalledUpiApps();
-      setIsPhonePeInstalled(installedApplications.includes('phonepe'));
-      setIsGpayInstalled(installedApplications.includes('gpay'));
-      setIsPaytmInstalled(installedApplications.includes('paytm'));
+      try {
+        const installedApplications = await getInstalledUpiApps();
+        setIsPhonePeInstalled(installedApplications.includes('phonepe'));
+        setIsGpayInstalled(installedApplications.includes('gpay'));
+        setIsPaytmInstalled(installedApplications.includes('paytm'));
+      } catch(error) {
+        console.log(error)
+      }
     };
 
     checkUpiApps();

package/src/screens/upiTimerScreen.tsx

@@ -6,7 +6,6 @@ import {
   StatusBar,
 } from 'react-native'; // Import Modal
 import { useEffect, useRef, useState } from 'react';
-import { router, useLocalSearchParams } from 'expo-router';
 import Header from '../components/header';
 import fetchStatus from '../postRequest/fetchStatus';
 import PaymentFailed from '../components/paymentFailed';
@@ -15,13 +14,27 @@ import SessionExpire from '../components/sessionExpire';
 import CancelPaymentModal from '../components/cancelPaymentModal';
 import { paymentHandler } from '../sharedContext/paymentStatusHandler';
 import CircularProgressBar from '../components/circularProgress';
-import type { PaymentResult } from '../interface';
+import type { PaymentResultObject, UPITimerScreenParams } from '../interface';
 import styles from '../styles/screens/upiTimerScreenStyle';
 import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
 import { handleFetchStatusResponseHandler } from '../sharedContext/handlePaymentResponseHandler';
+import type { CheckoutStackParamList } from '../navigation';
+import type {RouteProp, NavigationProp} from '@react-navigation/native'
 
-const UpiTimerScreen = () => {
-  const { upiId } = useLocalSearchParams();
+type UpiTimerScreenRouteProp = RouteProp<CheckoutStackParamList, 'UpiTimerScreen'>;
+
+// Define the screen's navigation properties
+type UpiTimercreenNavigationProp = NavigationProp<CheckoutStackParamList, 'UpiTimerScreen'>;
+
+interface Props {
+  route: UpiTimerScreenRouteProp;
+  navigation: UpiTimercreenNavigationProp;
+}
+
+const UpiTimerScreen = ({ route, navigation }: Props) => {
+  const {
+    upiId
+  } = route.params as UPITimerScreenParams || {}; 
   const { checkoutDetails } = checkoutDetailsHandler;
 
   const upiIdStr = Array.isArray(upiId) ? upiId[0] : upiId;
@@ -71,12 +84,11 @@ const UpiTimerScreen = () => {
   }, [failedModalOpen, successModalOpen, sessionExpireModalOpen]);
 
   const onExitCheckout = () => {
-    const mockPaymentResult: PaymentResult = {
+    const mockPaymentResult: PaymentResultObject = {
       status: status,
       transactionId: transactionId,
     };
     paymentHandler.onPaymentResult(mockPaymentResult);
-    router.dismissAll();
   };
 
   const onProceedBack = () => {
@@ -85,7 +97,7 @@ const UpiTimerScreen = () => {
         clearInterval(timerInterval.current);
       }
       stopBackgroundApiTask();
-      router.back();
+      navigation.goBack()
     } else {
       setCancelClicked(true);
     }
@@ -98,7 +110,7 @@ const UpiTimerScreen = () => {
     if (timerInterval.current) {
       clearInterval(timerInterval.current);
     }
-    router.back();
+    navigation.goBack()
   };
 
   useEffect(() => {

package/src/screens/{walletsScreen.tsx → walletScreen.tsx}

@@ -9,12 +9,11 @@ import {
   SafeAreaView,
 } from 'react-native';
 import { useEffect, useRef, useState } from 'react';
-import { router } from 'expo-router';
 import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
 import LottieView from 'lottie-react-native';
 import Header from '../components/header';
 import { TextInput } from 'react-native-paper';
-import type { PaymentClass, PaymentResult } from '../interface';
+import type { PaymentClass, PaymentResultObject } from '../interface';
 import PaymentSelectorView from '../components/paymentSelector';
 import PaymentSuccess from '../components/paymentSuccess';
 import SessionExpire from '../components/sessionExpire';
@@ -26,8 +25,16 @@ import WebViewScreen from './webViewScreen';
 import { fetchPaymentMethodHandler, handleFetchStatusResponseHandler, handlePaymentResponse } from '../sharedContext/handlePaymentResponseHandler';
 import ShimmerView from '../components/shimmerView';
 import styles from '../styles/screens/walletScreenStyles';
+import type { CheckoutStackParamList } from '../navigation';
+import type { NavigationProp } from '@react-navigation/native';
 
-const WalletScreen = () => {
+type WalletScreenNavigationProp = NavigationProp<CheckoutStackParamList, 'WalletScreen'>;
+
+interface Props {
+  navigation: WalletScreenNavigationProp;
+}
+
+const WalletScreen = ({ navigation }: Props) => {
   const [walletList, setWalletList] = useState<PaymentClass[]>([]);
   const screenHeight = Dimensions.get('window').height;
   const [defaultWalletList, setDefaultWalletList] = useState<PaymentClass[]>(
@@ -63,7 +70,7 @@ const WalletScreen = () => {
 
   const onProceedBack = () => {
     if (!loading) {
-      router.back();
+      navigation.goBack()
       return true;
     }
     return false;
@@ -181,12 +188,11 @@ const WalletScreen = () => {
   };
 
   const onExitCheckout = () => {
-    const mockPaymentResult: PaymentResult = {
+    const mockPaymentResult: PaymentResultObject = {
       status: status || '',
       transactionId: transactionId || '',
     };
     paymentHandler.onPaymentResult(mockPaymentResult);
-    router.dismissAll();
   };
 
   useEffect(() => {

package/src/serviceRequest.ts

@@ -5,24 +5,28 @@ import { checkoutDetailsHandler } from './sharedContext/checkoutDetailsHandler';
 // Create an Axios instance if needed
 
 const { checkoutDetails } = checkoutDetailsHandler;
-const version = process.env.SDK_VERSION
+// const version = process.env.SDK_VERSION
 
-const api = axios.create({
-    baseURL: `${getEndpoint(checkoutDetails.env)}${checkoutDetails.token}`,
-});
+const api = axios.create({});
 
 // Add request interceptor
 api.interceptors.request.use(
   (config) => {
+    config.baseURL = `${getEndpoint(checkoutDetails.env)}${checkoutDetails.token}`
     config.headers['X-Request-Id'] = generateRandomAlphanumericString(10);
     config.headers['X-Client-Connector-Name'] = 'React Native SDK';
-    config.headers['X-Client-Connector-Version'] = version;
+    config.headers['X-Client-Connector-Version'] = "1.0.0";
 
     if (checkoutDetails.shopperToken) {
       config.headers['Authorization'] = `Session ${checkoutDetails.shopperToken}`;
     }
 
+    console.log(config)
+    console.log(process.env.SDK_VERSION)
+
     return config;
   },
   (error) => Promise.reject(error)
 );
+
+export default api

package/src/sharedContext/paymentStatusHandler.ts

@@ -1,6 +1,6 @@
-import type { PaymentResult } from '../interface';
+import type { PaymentResultObject } from '../interface';
 export type PaymentHandler = {
-  onPaymentResult: (result: PaymentResult) => void;
+  onPaymentResult: (result: PaymentResultObject) => void;
 };
 
 export let paymentHandler: PaymentHandler = {

package/src/styles/components/savedAddressCardStyles.ts

@@ -0,0 +1,63 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+    card: {
+      backgroundColor: "#fff",
+      borderRadius: 12,
+      padding: 14,
+      marginVertical: 8,
+      marginHorizontal: 4,
+      borderWidth: 1,
+      borderColor: "#E0E0E0",
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.1,
+      shadowRadius: 4,
+      elevation: 3,
+    },
+    cardSelected: {
+      borderColor: "#FF2E92",
+      shadowOpacity: 0.2,
+    },
+    headerRow: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+    },
+    labelContainer: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 6,
+    },
+    labelName: {
+      fontSize: 14,
+      fontFamily: 'Poppins-SemiBold',
+      color: "#2D2B32",
+    },
+    selectedTag: {
+      backgroundColor: "#FFF0F6",
+      paddingHorizontal: 8,
+      paddingVertical: 2,
+      borderRadius: 6,
+      marginLeft: 8,
+      borderColor:"#FFADD2"
+    },
+    selectedTagText: {
+      fontSize: 10,
+      fontFamily: 'Poppins-Medium',
+      color: "#EB2F96",
+    },
+    addressText: {
+      marginTop: 10,
+      fontSize: 12,
+      fontFamily: 'Poppins-Regular',
+      color: "#7F7D83",
+      lineHeight: 20,
+    },
+    imageStyle : {
+      width : 20,
+      height : 20
+    }
+});
+
+export default styles

package/src/styles/screens/savedAddressScreenStyles.ts

@@ -0,0 +1,58 @@
+import { StyleSheet } from "react-native";
+import { checkoutDetailsHandler } from "../../sharedContext/checkoutDetailsHandler";
+
+const {brandColor} = checkoutDetailsHandler.checkoutDetails
+
+const styles = StyleSheet.create({
+    screenView : {
+        flex: 1, backgroundColor: 'white' 
+    },
+    loaderView : {
+        flex: 1, 
+        alignItems: 'center', 
+        justifyContent: 'center'
+    },
+    lottieStyle : {
+        width: 80, height: 80
+    },
+    divider : {
+        flexDirection: 'row',
+        height: 1,
+        backgroundColor: '#ECECED',
+    },
+    mainHeadingText  :{
+        marginTop: 16,
+        marginBottom: 8,
+        marginHorizontal: 16,
+        color: '#020815B5',
+        fontFamily: 'Poppins-SemiBold',
+        fontSize: 14,
+    },
+    pressableContainer : {
+        borderColor: '#F1F1F1',
+        borderWidth: 1,
+        marginHorizontal: 16,
+        marginTop: 8,
+        paddingBottom: 16,
+        backgroundColor: 'white',
+        flexDirection: 'row',
+        borderRadius: 12,
+        alignItems:'center'
+      },
+      imageStyle : {
+        height: 20,
+        width: 20,
+        marginStart: 12,
+        marginTop: 20,
+        tintColor: brandColor
+      },
+      insideContainerClickableText : {
+        fontSize: 14,
+        color: brandColor,
+        fontFamily: 'Poppins-SemiBold',
+        flexShrink: 1,
+        marginTop: -4,
+      }
+})
+
+export default styles