boxpay-checkout-reactnative-sdk 1.0.9 → 1.0.11-beta

package/src/screens/cardScreen.tsx

@@ -4,7 +4,8 @@ import {
   Image,
   BackHandler,
   Pressable,
-  TouchableOpacity
+  TouchableOpacity,
+  ScrollView
 } from 'react-native';
 import { useEffect, useRef, useState } from 'react';
 import Header from '../components/header';
@@ -53,6 +54,7 @@ const CardScreen = ({ route, navigation }: Props) => {
     percent,
     cardType,
     issuerBrand,
+    isAutoNavigationEnabled
   } = route.params as CardScreenParams || {}; 
   const durationNumber = Array.isArray(duration) ? duration[0] : duration;
   const bankNameStr = Array.isArray(bankName) ? bankName[0] : bankName;
@@ -123,7 +125,7 @@ const CardScreen = ({ route, navigation }: Props) => {
   const [sessionExpireModalOpen, setSessionExppireModalState] = useState(false);
   const [successfulTimeStamp, setSuccessfulTimeStamp] = useState('');
 
-  const [status, setStatus] = useState<string | null>(null);
+  const [status, setStatus] = useState<string>("NOACTION");
   const [transactionId, setTransactionId] = useState<string | null>(null);
 
   const backgroundApiInterval = useRef<NodeJS.Timeout | null>(null);
@@ -457,8 +459,13 @@ const CardScreen = ({ route, navigation }: Props) => {
   };
 
   const onProceedBack = () => {
-    navigation.goBack()
-    return true;
+    if (isAutoNavigationEnabled) {
+      onExitCheckout();
+      return true;
+    } else {
+      navigation.goBack()
+      return true;
+    }
   };
 
   const callFetchStatusApi = async () => {
@@ -589,7 +596,11 @@ const CardScreen = ({ route, navigation }: Props) => {
           <Text>Loading...</Text>
         </View>
       ) : (
-        <View style={styles.screenView}>
+          <View style= {{flex:1}}>
+            <ScrollView 
+            contentContainerStyle={styles.screenView}
+            keyboardShouldPersistTaps="handled" 
+          >
           <Header
             onBackPress={onProceedBack}
             showDesc={true}
@@ -1031,9 +1042,8 @@ const CardScreen = ({ route, navigation }: Props) => {
              }}
              />
           )}
-          <View
-            style={styles.pressableContainer}
-          >
+          </ScrollView>
+          <View>
             {cardValid ? (
               <Pressable
                 style={[
@@ -1056,7 +1066,7 @@ const CardScreen = ({ route, navigation }: Props) => {
               </Pressable>
             )}
           </View>
-        </View>
+          </View>
       )}
       {failedModalOpen && (
         <PaymentFailed

package/src/screens/emiScreen.tsx

@@ -13,7 +13,8 @@ import {
   type Emi,
   type PaymentResultObject,
   type PaymentMethod,
-  APIStatus
+  APIStatus,
+  type EmiScreenParams
 } from '../interface';
 import { checkoutDetailsHandler, setCheckOutDetailsHandlerToDefault } from '../sharedContext/checkoutDetailsHandler';
 import fetchPaymentMethods from '../postRequest/fetchPaymentMethods';
@@ -35,16 +36,20 @@ import Toast from 'react-native-toast-message'
 import styles from '../styles/screens/emiScreenStyles';
 import { handleFetchStatusResponseHandler, handlePaymentResponse } from '../sharedContext/handlePaymentResponseHandler';
 import type { CheckoutStackParamList } from '../navigation';
-import type { NavigationProp } from '@react-navigation/native';
+import type { NavigationProp, RouteProp } from '@react-navigation/native';
 import { setUserDataHandlerToDefault } from '../sharedContext/userdataHandler';
 
+type EmiScreenRouteProp = RouteProp<CheckoutStackParamList, 'EmiScreen'>;
+
 type EmiScreenNavigationProp = NavigationProp<CheckoutStackParamList, 'EmiScreen'>;
 
 interface Props {
   navigation: EmiScreenNavigationProp;
+  route: EmiScreenRouteProp;
 }
 
-const EmiScreen = ({ navigation }: Props) => {
+const EmiScreen = ({ navigation, route }: Props) => {
+  const { isAutoNavigationEnabled } = route.params as EmiScreenParams || {};
   const [emiBankList, setEmiBankList] = useState<ChooseEmiModel>({ cards: [] });
   const [defaultEmiBankList, setDefaultEmiBankList] = useState<ChooseEmiModel>({
     cards: [],
@@ -77,8 +82,8 @@ const EmiScreen = ({ navigation }: Props) => {
   const [sessionExpireModalOpen, setSessionExppireModalOpen] = useState(false);
   const [successfulTimeStamp, setSuccessfulTimeStamp] = useState('');
 
-  const [status, setStatus] = useState('');
-  const [transactionId, setTransactionId] = useState('');
+  const [status, setStatus] = useState<string>("NOACTION");
+  const [transactionId, setTransactionId] = useState<string | null>(null);
 
   const [paymentHtml, setPaymentHtml] = useState('');
   const [paymentUrl, setPaymentUrl] = useState('');
@@ -371,8 +376,13 @@ const EmiScreen = ({ navigation }: Props) => {
   };
 
   const onProceedBack = () => {
-    navigation.goBack()
-    return true;
+    if (isAutoNavigationEnabled) {
+      onExitCheckout();
+      return true;
+    } else {
+      navigation.goBack()
+      return true;
+    }
   };
 
   useEffect(() => {

package/src/screens/mainScreen.tsx

@@ -15,7 +15,7 @@ import type { CheckoutStackParamList } from '../navigation';
 import { paymentHandler, setPaymentHandler } from "../sharedContext/paymentStatusHandler";
 import { loadBoxpayFonts } from '../components/fontFamily';
 import { setUserDataHandler, setUserDataHandlerToDefault, userDataHandler } from '../sharedContext/userdataHandler';
-import { type PaymentResultObject, type PaymentClass, type InstrumentDetails, type PaymentMethod, type OrderItem, APIStatus, AnalyticsEvents, type DeliveryAddress, type BoxpayCheckoutProps, type GetInstantOffersResponse, UIConfigurationOptions } from '../interface';
+import { type PaymentResultObject, type PaymentClass, type InstrumentDetails, type PaymentMethod, type OrderItem, APIStatus, AnalyticsEvents, type DeliveryAddress, type BoxpayCheckoutProps, type GetInstantOffersResponse, UIConfigurationOptions, TransactionStatus } from '../interface';
 import { checkoutDetailsHandler, setCheckoutDetailsHandler, setCheckOutDetailsHandlerToDefault } from '../sharedContext/checkoutDetailsHandler';
 import WebViewScreen from '../screens/webViewScreen';
 import styles from '../styles/indexStyles';
@@ -34,6 +34,7 @@ import { formatAddress, getPhoneNumberCodeAndCountryName, useCountdown } from '.
 import fetchSurCharge from '../postRequest/fetchSurcharge';
 import fetchInstantOffer from '../postRequest/fetchInstantOffer';
 import ApplyCouponCard from '../components/applyCouponCard';
+import { handleAutoNavigation } from '../sharedContext/handleAutoNavigation';
 
 type MainScreenRouteProp = RouteProp<CheckoutStackParamList, 'MainScreen'>;
 
@@ -218,7 +219,6 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
       setUpiInstrumentList : setSavedUpiArray,
       setCardInstrumentList : setSavedCardArray
     });
-    setIsFirstLoading(false)
   };
 
   useEffect(() => {
@@ -486,9 +486,10 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
                 if (['APPROVED', 'SUCCESS', 'PAID'].includes(response.data.status)) {
                   setSuccessfulTimeStamp(response.data.lastPaidAtTimestampLocale);
                   setTransactionId(response.data.lastTransactionId);
-                  setStatus(response.data.status);
+                  setStatus(TransactionStatus.Success);
                   setSuccessModalState(true);
                 } else if (['EXPIRED'].includes(response.data.status)) {
+                  setStatus(TransactionStatus.Expired);
                   setSessionExppireModalState(true);
                 }
 
@@ -581,7 +582,7 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
                     isEmiMethodEnabled : methodFlags.isEMIVisible,
                     isBnplMethodEnabled : methodFlags.isBNPLVisible,
                     isUPIOtmCollectMethodEnabled : methodFlags.isUPIOtmCollectVisible,
-                    isUPIOtmIntentMethodEnabled : methodFlags.isUPIIntentVisible,
+                    isUPIOtmIntentMethodEnabled : methodFlags.isUPIOtmIntentVisible,
                     isUPIOtmQRMethodEnabled : methodFlags.isUPIOtmQRVisible,
                     isOrderItemDetailsVisible : isFieldEnabled('ORDER_ITEM_DETAILS'),
                     isSICheckboxVisible : configurationOptions?.SHOW_SI_CHECKBOX ? true : false,
@@ -688,9 +689,21 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
 
   const callRecommendedOrStopLoding =async() => {
     if(shopperToken != null && shopperToken != "") {
-      getRecommendedInstruments()
+      await getRecommendedInstruments()
+      checkAutoNavigation()
     } else {
+      checkAutoNavigation()
+    }
+  }
+
+  const checkAutoNavigation = () => {
+    const targetScreen = handleAutoNavigation(
+      savedCardArray
+    )
+    if (!targetScreen) {
       setIsFirstLoading(false)
+    } else {
+      navigation.navigate(targetScreen, {isAutoNavigationEnabled : true})
     }
   }
 

package/src/screens/netBankingScreen.tsx

@@ -11,7 +11,7 @@ import { checkoutDetailsHandler, setCheckOutDetailsHandlerToDefault } from '../s
 import LottieView from 'lottie-react-native';
 import Header from '../components/header';
 import { TextInput } from 'react-native-paper';
-import type { PaymentClass, PaymentResultObject } from '../interface';
+import type { NetBankingScreenParams, PaymentClass, PaymentResultObject } from '../interface';
 import ShimmerView from '../components/shimmerView';
 import PaymentSuccess from '../components/paymentSuccess';
 import SessionExpire from '../components/sessionExpire';
@@ -24,16 +24,20 @@ 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';
+import type { NavigationProp, RouteProp } from '@react-navigation/native';
 import { setUserDataHandlerToDefault } from '../sharedContext/userdataHandler';
 
+type NetBankingScreenRouteProp = RouteProp<CheckoutStackParamList, 'NetBankingScreen'>;
+
 type NetBankingScreenNavigationProp = NavigationProp<CheckoutStackParamList, 'NetBankingScreen'>;
 
 interface Props {
   navigation: NetBankingScreenNavigationProp;
+  route: NetBankingScreenRouteProp;
 }
 
-const NetBankingScreen = ({ navigation }: Props) => {
+const NetBankingScreen = ({ navigation, route }: Props) => {
+  const { isAutoNavigationEnabled } = route.params as NetBankingScreenParams || {};
   const [netBankingList, setNetBankingList] = useState<PaymentClass[]>([]);
   const [defaultNetBankingList, setDefaultNetBankingList] = useState<
     PaymentClass[]
@@ -72,7 +76,7 @@ const NetBankingScreen = ({ navigation }: Props) => {
   const [sessionExpireModalOpen, setSessionExppireModalState] = useState(false);
   const [successfulTimeStamp, setSuccessfulTimeStamp] = useState('');
 
-  const [status, setStatus] = useState<string | null>(null);
+  const [status, setStatus] = useState<string>("NOACTION");
   const [transactionId, setTransactionId] = useState<string | null>(null);
 
   const backgroundApiInterval = useRef<NodeJS.Timeout | null>(null);
@@ -80,9 +84,12 @@ const NetBankingScreen = ({ navigation }: Props) => {
   const [searchTextFocused, setSearchTextFocused] = useState(false);
 
   const onProceedBack = () => {
-    if (!loading) {
+    if (!loading && !isAutoNavigationEnabled) {
       navigation.goBack()
       return true;
+    } else if (!loading && isAutoNavigationEnabled) {
+      onExitCheckout();
+      return true;
     }
     return false;
   };

package/src/screens/walletScreen.tsx

@@ -11,7 +11,7 @@ import { checkoutDetailsHandler, setCheckOutDetailsHandlerToDefault } from '../s
 import LottieView from 'lottie-react-native';
 import Header from '../components/header';
 import { TextInput } from 'react-native-paper';
-import type { PaymentClass, PaymentResultObject } from '../interface';
+import type { PaymentClass, PaymentResultObject, WalletScreenParams } from '../interface';
 import PaymentSelectorView from '../components/paymentSelector';
 import PaymentSuccess from '../components/paymentSuccess';
 import SessionExpire from '../components/sessionExpire';
@@ -24,16 +24,19 @@ import { fetchPaymentMethodHandler, handleFetchStatusResponseHandler, handlePaym
 import ShimmerView from '../components/shimmerView';
 import styles from '../styles/screens/walletScreenStyles';
 import type { CheckoutStackParamList } from '../navigation';
-import type { NavigationProp } from '@react-navigation/native';
+import type { NavigationProp, RouteProp } from '@react-navigation/native';
 import { setUserDataHandlerToDefault } from '../sharedContext/userdataHandler';
 
+type WalletScreenRouteProp = RouteProp<CheckoutStackParamList, 'WalletScreen'>;
 type WalletScreenNavigationProp = NavigationProp<CheckoutStackParamList, 'WalletScreen'>;
 
 interface Props {
   navigation: WalletScreenNavigationProp;
+  route: WalletScreenRouteProp;
 }
 
-const WalletScreen = ({ navigation }: Props) => {
+const WalletScreen = ({ navigation, route }: Props) => {
+  const { isAutoNavigationEnabled } = route.params as WalletScreenParams || {};
   const [walletList, setWalletList] = useState<PaymentClass[]>([]);
   const screenHeight = Dimensions.get('window').height;
   const [defaultWalletList, setDefaultWalletList] = useState<PaymentClass[]>(
@@ -57,7 +60,7 @@ const WalletScreen = ({ navigation }: Props) => {
   const [sessionExpireModalOpen, setSessionExppireModalState] = useState(false);
   const [successfulTimeStamp, setSuccessfulTimeStamp] = useState('');
 
-  const [status, setStatus] = useState<string | null>(null);
+  const [status, setStatus] = useState<string>("NOACTION");
   const [transactionId, setTransactionId] = useState<string | null>(null);
 
   const backgroundApiInterval = useRef<NodeJS.Timeout | null>(null);
@@ -68,9 +71,12 @@ const WalletScreen = ({ navigation }: Props) => {
   const [checkedOnce, setCheckedOnce] = useState(false);
 
   const onProceedBack = () => {
-    if (!loading) {
+    if (!loading && !isAutoNavigationEnabled) {
       navigation.goBack()
       return true;
+    } else if (!loading && isAutoNavigationEnabled) {
+      onExitCheckout();
+      return true;
     }
     return false;
   };

package/src/sdk-version.json

@@ -1 +1 @@
-{ "version": "1.0.9" }
+{ "version": "1.0.11-beta" }

package/src/sharedContext/handleAutoNavigation.ts

@@ -0,0 +1,50 @@
+import { ScreenRouteMap, type AutoNavigationScreen, type PaymentClass } from '../interface';
+import { checkoutDetailsHandler } from './checkoutDetailsHandler';
+import { userDataHandler } from './userdataHandler';
+
+
+export const handleAutoNavigation = (
+    savedCardArray : PaymentClass[]
+) : AutoNavigationScreen | null => {
+    const {checkoutDetails} = checkoutDetailsHandler
+    const {userData} = userDataHandler 
+
+    if (checkoutDetails.isOrderItemDetailsVisible) return null;
+
+    if (savedCardArray.length > 0) return null;
+
+    const isPersonalDataMissing = 
+    (checkoutDetails.isFullNameEnabled && (!userData.firstName || userData.firstName.trim() === "")) ||
+    (checkoutDetails.isEmailEnabled && (!userData.email || userData.email.trim() === "")) ||
+    (checkoutDetails.isPhoneEnabled && (!userData.completePhoneNumber || userData.completePhoneNumber.trim() === ""));
+
+    if (isPersonalDataMissing) return null;
+
+    const isShippingDataMissing = checkoutDetails.isShippingAddressEnabled && (!userData.address1 || !userData.city || !userData.pincode);
+
+    if (isShippingDataMissing) return null;
+
+    const isUPIEnabled = checkoutDetails.isUpiCollectMethodEnabled || 
+                        checkoutDetails.isUPIOtmCollectMethodEnabled || 
+                        checkoutDetails.isUPIOtmIntentMethodEnabled || 
+                        checkoutDetails.isUpiIntentMethodEnabled || 
+                        checkoutDetails.isUpiQRMethodEnabled || 
+                        checkoutDetails.isUPIOtmQRMethodEnabled
+
+    const enabledMethods: (keyof typeof ScreenRouteMap & (
+    'CARD' | 'WALLET' | 'NETBANKING' | 'EMI' | 'BNPL'
+    ))[] = [];
+    if (checkoutDetails.isCardMethodEnabled) enabledMethods.push('CARD');
+    if (checkoutDetails.isWalletMethodEnabled) enabledMethods.push('WALLET');
+    if (checkoutDetails.isNetBankingMethodEnabled) enabledMethods.push('NETBANKING');
+    if (checkoutDetails.isEmiMethodEnabled) enabledMethods.push('EMI');
+    if (checkoutDetails.isBnplMethodEnabled) enabledMethods.push('BNPL');
+
+    if (enabledMethods.length === 1 && !isUPIEnabled) {
+        const method = enabledMethods[0];
+        if (!method) return null
+        return ScreenRouteMap[method];
+    }
+    
+    return null;
+}

package/src/sharedContext/handlePaymentResponseHandler.ts

@@ -28,11 +28,11 @@ export function handlePaymentResponse({
             const actionsArray = apidata.actions || [];
             const txnStatus = status.toUpperCase() as TransactionStatus;
   
-            onSetStatus(status);
             onSetTransactionId(apidata.transactionId);
         
             switch (txnStatus) {
                 case TransactionStatus.RequiresAction: {
+                    onSetStatus(TransactionStatus.RequiresAction);
                     if (actionsArray.length > 0) {
                         const action = actionsArray[0];
             
@@ -75,6 +75,7 @@ export function handlePaymentResponse({
                 }
                 case TransactionStatus.Failed:
                 case TransactionStatus.Rejected: {
+                    onSetStatus(TransactionStatus.Failed);
                     const fallback = checkoutDetailsErrorMessage;
                     const errorMessage =
                         reasonCode?.startsWith('UF')
@@ -84,11 +85,8 @@ export function handlePaymentResponse({
                         : fallback;
             
                         if(onSetFailedMessage && onShowFailedModal) {
-                    onSetFailedMessage(errorMessage);
-                    onSetFailedMessage(errorMessage);
-                    onSetStatus(TransactionStatus.Failed);
                             onSetFailedMessage(errorMessage);
-                    onSetStatus(TransactionStatus.Failed);
+                            onSetStatus(TransactionStatus.Failed);
                             onShowFailedModal();
                         }
                         setLoading(false);
@@ -98,6 +96,7 @@ export function handlePaymentResponse({
                 case TransactionStatus.Approved:
                 case TransactionStatus.Success:
                 case TransactionStatus.Paid: {
+                    onSetStatus(TransactionStatus.Success);
                     if(onShowSuccessModal) {
                         onShowSuccessModal(apidata.transactionTimestampLocale ?? '');
                     }
@@ -106,6 +105,7 @@ export function handlePaymentResponse({
                 }
         
                 case TransactionStatus.Expired:{
+                    onSetStatus(TransactionStatus.Expired);
                     if(onShowSessionExpiredModal) {
                         onShowSessionExpiredModal();
                     }
@@ -115,7 +115,8 @@ export function handlePaymentResponse({
         
                 default:
                    { 
-                    break;}
+                    break;
+                }
             }
         }
         break;
@@ -151,12 +152,12 @@ export function handleFetchStatusResponseHandler({
             const reason = apidata.reason
             const txnStatus = status.toUpperCase() as TransactionStatus;
   
-            onSetStatus(status);
             onSetTransactionId(apidata.transactionId);
         
             switch (txnStatus) {
                 case TransactionStatus.Failed:
                 case TransactionStatus.Rejected:
+                    onSetStatus(TransactionStatus.Failed);
                     {const fallback = checkoutDetailsErrorMessage;
                     const errorMessage =
                         reasonCode?.startsWith('UF')
@@ -175,6 +176,7 @@ export function handleFetchStatusResponseHandler({
                 case TransactionStatus.Approved:
                 case TransactionStatus.Success:
                 case TransactionStatus.Paid:
+                    onSetStatus(TransactionStatus.Success);
                     {onSetStatus(TransactionStatus.Success);
                     onShowSuccessModal(apidata.transactionTimestampLocale ?? '');
                     stopBackgroundApiTask?.();
@@ -182,6 +184,7 @@ export function handleFetchStatusResponseHandler({
                     break;}
         
                 case TransactionStatus.Expired:
+                    onSetStatus(TransactionStatus.Expired);
                     {onSetStatus(TransactionStatus.Expired);
                     onShowSessionExpiredModal();
                     stopBackgroundApiTask?.();

package/src/styles/screens/cardScreenStyles.ts

@@ -118,13 +118,6 @@ const styles = StyleSheet.create({
         fontSize: 12,
         textDecorationLine: 'underline',
     },
-    pressableContainer : {
-        position: 'absolute',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        paddingBottom: 16,
-    },
     webViewContainer : {
         position: 'absolute',
         top: 0,
@@ -148,6 +141,17 @@ const styles = StyleSheet.create({
         fontWeight: 'bold',
         lineHeight: 16,
       },
+      footerContainer : {
+        justifyContent: 'center',
+        alignItems: 'flex-end',
+        flexDirection: 'row',
+    },
+    footerText : {
+        fontSize: 12,
+        color: '#888888',
+        marginBottom: 13,
+    },
+    footerImage : { height: 50, width: 50 },
 })
 
 export default styles