boxpay-checkout-reactnative-sdk 1.0.11-beta3 → 1.0.11-beta5

package/src/components/checkboxContainer.tsx

@@ -38,12 +38,13 @@ const styles = StyleSheet.create({
     checkBoxContainer : {
       flexDirection: 'row',
       marginTop: 10,
-      alignItems: 'center'
+      alignItems: 'center',
+      marginHorizontal: 16
   },
   checkBoxText : {
       color: '#2D2B32',
       fontSize: 14,
-      marginLeft: 6,
+      marginLeft: 6
   },
   checkboxBox: {
     width: 20,
@@ -51,8 +52,7 @@ const styles = StyleSheet.create({
     borderWidth: 2,
     borderRadius: 3,
     justifyContent: 'center',
-    alignItems: 'center',
-    marginLeft: 16,
+    alignItems: 'center'
   },
   checkmark: {
     color: '#fff',

package/src/interface.ts

@@ -457,6 +457,7 @@ export interface HandleFetchStatusOptions {
 }
 
 export enum TransactionStatus {
+  NoAction = "NOACTION",
   RequiresAction = 'REQUIRESACTION',
   Failed = 'FAILED',
   Rejected = 'REJECTED',

package/src/screens/bnplScreen.tsx

@@ -9,7 +9,7 @@ import { useEffect, useRef, useState } from 'react';
 import { checkoutDetailsHandler, setCheckOutDetailsHandlerToDefault } from '../sharedContext/checkoutDetailsHandler';
 import LottieView from 'lottie-react-native';
 import Header from '../components/header';
-import type { PaymentClass, PaymentResultObject, BNPLScreenParams } from '../interface';
+import { type PaymentClass, type PaymentResultObject, type BNPLScreenParams, TransactionStatus } from '../interface';
 import ShimmerView from '../components/shimmerView';
 import PaymentSuccess from '../components/paymentSuccess';
 import SessionExpire from '../components/sessionExpire';
@@ -54,7 +54,7 @@ const BNPLScreen = ({ navigation, route }: Props) => {
   const [sessionExpireModalOpen, setSessionExppireModalState] = useState(false);
   const [successfulTimeStamp, setSuccessfulTimeStamp] = useState('');
 
-  const [status, setStatus] = useState<string>("NOACTION");
+  const [status, setStatus] = useState<string>(TransactionStatus.NoAction);
   const [transactionId, setTransactionId] = useState<string | null>(null);
 
   const backgroundApiInterval = useRef<NodeJS.Timeout | null>(null);
@@ -76,7 +76,7 @@ const BNPLScreen = ({ navigation, route }: Props) => {
       if (showWebView) {
         setShowWebView(false);
         paymentFailedMessage.current = checkoutDetails.errorMessage;
-        setStatus('Failed');
+        setStatus(TransactionStatus.Failed);
         setFailedModalState(true);
         setLoading(false);
         return true;

package/src/screens/cardScreen.tsx

@@ -24,7 +24,7 @@ import KnowMoreBottomSheet from '../components/knowMoreBottomSheet';
 import PaymentFailed from '../components/paymentFailed';
 import PaymentSuccess from '../components/paymentSuccess';
 import SessionExpire from '../components/sessionExpire';
-import { APIStatus, type CardScreenParams, type PaymentResultObject } from '../interface';
+import { APIStatus, TransactionStatus, type CardScreenParams, type PaymentResultObject } from '../interface';
 import type { CheckoutStackParamList } from '../navigation';
 import cardPostRequest from '../postRequest/cardPostRequest';
 import emiPostRequest from '../postRequest/emiPostRequest';
@@ -130,7 +130,7 @@ const CardScreen = ({ route, navigation }: Props) => {
   const [sessionExpireModalOpen, setSessionExppireModalState] = useState(false);
   const [successfulTimeStamp, setSuccessfulTimeStamp] = useState('');
 
-  const [status, setStatus] = useState<string>("NOACTION");
+  const [status, setStatus] = useState<string>(TransactionStatus.NoAction);
   const [transactionId, setTransactionId] = useState<string | null>(null);
 
   const backgroundApiInterval = useRef<NodeJS.Timeout | null>(null);
@@ -557,7 +557,7 @@ const CardScreen = ({ route, navigation }: Props) => {
       if (showWebView) {
         setShowWebView(false);
         paymentFailedMessage.current = checkoutDetails.errorMessage;
-        setStatus('Failed');
+        setStatus(TransactionStatus.Failed);
         setFailedModalState(true);
         setLoading(false);
         return true;

package/src/screens/emiScreen.tsx

@@ -14,7 +14,8 @@ import {
   type PaymentResultObject,
   type PaymentMethod,
   APIStatus,
-  type EmiScreenParams
+  type EmiScreenParams,
+  TransactionStatus
 } from '../interface';
 import { checkoutDetailsHandler, setCheckOutDetailsHandlerToDefault } from '../sharedContext/checkoutDetailsHandler';
 import fetchPaymentMethods from '../postRequest/fetchPaymentMethods';
@@ -83,7 +84,7 @@ const EmiScreen = ({ navigation, route }: Props) => {
   const [sessionExpireModalOpen, setSessionExppireModalOpen] = useState(false);
   const [successfulTimeStamp, setSuccessfulTimeStamp] = useState('');
 
-  const [status, setStatus] = useState<string>("NOACTION");
+  const [status, setStatus] = useState<string>(TransactionStatus.NoAction);
   const [transactionId, setTransactionId] = useState<string | null>(null);
 
   const [paymentHtml, setPaymentHtml] = useState('');
@@ -392,7 +393,7 @@ const EmiScreen = ({ navigation, route }: Props) => {
       if (showWebView) {
         setShowWebView(false);
         paymentFailedMessage.current = checkoutDetails.errorMessage;
-        setStatus('Failed');
+        setStatus(TransactionStatus.Failed);
         setFailedModalOpen(true);
         setLoading(false);
         return true;

package/src/screens/mainScreen.tsx

@@ -55,7 +55,8 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
     shopperToken = null,
     uiConfiguration = null
   } = route.params as BoxpayCheckoutProps || {}; 
-  const [status, setStatus] = useState('NOACTION');
+  const [status, setStatus] = useState<string>(TransactionStatus.NoAction);
+  const statusRef = useRef(TransactionStatus.NoAction);
   const [transactionId, setTransactionId] = useState('');
   const isScreenFocused = useIsFocused()
   const appStateListenerRef = useRef<any>(null);
@@ -309,7 +310,7 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
         setShowWebView(false);
         paymentFailedMessage.current =
           checkoutDetailsHandler.checkoutDetails.errorMessage;
-        setStatus('Failed');
+        setStatus(TransactionStatus.Failed);
         setFailedModalState(true);
         setLoadingState(false);
         return true;
@@ -486,9 +487,11 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
                 if (['APPROVED', 'SUCCESS', 'PAID'].includes(response.data.status)) {
                   setSuccessfulTimeStamp(response.data.lastPaidAtTimestampLocale);
                   setTransactionId(response.data.lastTransactionId);
+                  statusRef.current = TransactionStatus.Success;
                   setStatus(TransactionStatus.Success);
                   setSuccessModalState(true);
                 } else if (['EXPIRED'].includes(response.data.status)) {
+                  statusRef.current = TransactionStatus.Expired;
                   setStatus(TransactionStatus.Expired);
                   setSessionExppireModalState(true);
                 }
@@ -638,7 +641,7 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
     let validity: string | null = null;
     if (!isEmpty(data!.expiryDateLocale)) {
       const date = formatDate(data!.expiryDateLocale!.split(' ')[0] ?? "");
-      validity = `Till ${date}`;
+      validity = `${date}`;
     } else if (!isEmpty(data!.recurringExpiryDateLocale)) {
       const date = formatDate(data!.recurringExpiryDateLocale!.split(' ')[0] ?? "");
       validity = `${date}`;
@@ -749,6 +752,7 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
 
   const checkAutoNavigation = () => {
     const targetScreen = handleAutoNavigation(
+      statusRef.current,
       savedCardArray
     )
     if (!targetScreen) {
@@ -836,7 +840,7 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
         if (timerRef.current) {
           clearInterval(timerRef.current);
         }
-        setStatus('EXPIRED');
+        setStatus(TransactionStatus.Expired);
         setSessionExppireModalState(true);
       }
       // const hours = Math.floor((timeDiff / (1000 * 60 * 60)) % 24);

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 { NetBankingScreenParams, PaymentClass, PaymentResultObject } from '../interface';
+import { TransactionStatus, type NetBankingScreenParams, type PaymentClass, type PaymentResultObject } from '../interface';
 import ShimmerView from '../components/shimmerView';
 import PaymentSuccess from '../components/paymentSuccess';
 import SessionExpire from '../components/sessionExpire';
@@ -77,7 +77,7 @@ const NetBankingScreen = ({ navigation, route }: Props) => {
   const [sessionExpireModalOpen, setSessionExppireModalState] = useState(false);
   const [successfulTimeStamp, setSuccessfulTimeStamp] = useState('');
 
-  const [status, setStatus] = useState<string>("NOACTION");
+  const [status, setStatus] = useState<string>(TransactionStatus.NoAction);
   const [transactionId, setTransactionId] = useState<string | null>(null);
 
   const backgroundApiInterval = useRef<NodeJS.Timeout | null>(null);
@@ -105,7 +105,7 @@ const NetBankingScreen = ({ navigation, route }: Props) => {
       if (showWebView) {
         setShowWebView(false);
         paymentFailedMessage.current = checkoutDetails.errorMessage;
-        setStatus('Failed');
+        setStatus(TransactionStatus.Failed);
         setFailedModalState(true);
         setLoading(false);
         return true;

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, WalletScreenParams } from '../interface';
+import { TransactionStatus, type PaymentClass, type PaymentResultObject, type WalletScreenParams } from '../interface';
 import PaymentSelectorView from '../components/paymentSelector';
 import PaymentSuccess from '../components/paymentSuccess';
 import SessionExpire from '../components/sessionExpire';
@@ -61,7 +61,7 @@ const WalletScreen = ({ navigation, route }: Props) => {
   const [sessionExpireModalOpen, setSessionExppireModalState] = useState(false);
   const [successfulTimeStamp, setSuccessfulTimeStamp] = useState('');
 
-  const [status, setStatus] = useState<string>("NOACTION");
+  const [status, setStatus] = useState<string>(TransactionStatus.NoAction);
   const [transactionId, setTransactionId] = useState<string | null>(null);
 
   const backgroundApiInterval = useRef<NodeJS.Timeout | null>(null);
@@ -92,7 +92,7 @@ const WalletScreen = ({ navigation, route }: Props) => {
       if (showWebView) {
         setShowWebView(false);
         paymentFailedMessage.current = checkoutDetails.errorMessage;
-        setStatus('Failed');
+        setStatus(TransactionStatus.Failed);
         setFailedModalState(true);
         setLoading(false);
         return true;

package/src/sdk-version.json

@@ -1 +1 @@
-{ "version": "1.0.11-beta3" }
+{ "version": "1.0.11-beta5" }

package/src/sharedContext/handleAutoNavigation.ts

@@ -1,9 +1,10 @@
-import { ScreenRouteMap, type AutoNavigationScreen, type PaymentClass } from '../interface';
+import { ScreenRouteMap, TransactionStatus, type AutoNavigationScreen, type PaymentClass } from '../interface';
 import { checkoutDetailsHandler } from './checkoutDetailsHandler';
 import { userDataHandler } from './userdataHandler';
 
 
 export const handleAutoNavigation = (
+    status : String,
     savedCardArray : PaymentClass[]
 ) : AutoNavigationScreen | null => {
     const {checkoutDetails} = checkoutDetailsHandler
@@ -13,6 +14,8 @@ export const handleAutoNavigation = (
 
     if (savedCardArray.length > 0) return null;
 
+    if(status !== TransactionStatus.NoAction) return null
+
     const isPersonalDataMissing = 
     (checkoutDetails.isFullNameEnabled && (!userData.firstName || userData.firstName.trim() === "")) ||
     (checkoutDetails.isEmailEnabled && (!userData.email || userData.email.trim() === "")) ||