boxpay-checkout-reactnative-sdk 1.0.11-beta2 → 1.0.11-beta4

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, TransactionStatus } from '../interface';
+import { type PaymentResultObject, type PaymentClass, type InstrumentDetails, type PaymentMethod, type OrderItem, APIStatus, AnalyticsEvents, type DeliveryAddress, type BoxpayCheckoutProps, type GetInstantOffersResponse, UIConfigurationOptions, TransactionStatus, type SubscriptionDetails } from '../interface';
 import { checkoutDetailsHandler, setCheckoutDetailsHandler, setCheckOutDetailsHandlerToDefault } from '../sharedContext/checkoutDetailsHandler';
 import WebViewScreen from '../screens/webViewScreen';
 import styles from '../styles/indexStyles';
@@ -30,7 +30,7 @@ import fetchSessionDetails from '../postRequest/fetchSessionDetails';
 import MorePaymentMethods from '../components/morePaymentMethods';
 import { fetchSavedInstrumentsHandler, handleFetchStatusResponseHandler, handlePaymentResponse } from '../sharedContext/handlePaymentResponseHandler';
 import callUIAnalytics from '../postRequest/callUIAnalytics';
-import { formatAddress, getPhoneNumberCodeAndCountryName, useCountdown } from '../utility';
+import { formatAddress, formatDate, getPhoneNumberCodeAndCountryName, isEmpty, useCountdown } from '../utility';
 import fetchSurCharge from '../postRequest/fetchSurcharge';
 import fetchInstantOffer from '../postRequest/fetchInstantOffer';
 import ApplyCouponCard from '../components/applyCouponCard';
@@ -55,7 +55,7 @@ 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 [transactionId, setTransactionId] = useState('');
   const isScreenFocused = useIsFocused()
   const appStateListenerRef = useRef<any>(null);
@@ -309,7 +309,7 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
         setShowWebView(false);
         paymentFailedMessage.current =
           checkoutDetailsHandler.checkoutDetails.errorMessage;
-        setStatus('Failed');
+        setStatus(TransactionStatus.Failed);
         setFailedModalState(true);
         setLoadingState(false);
         return true;
@@ -552,6 +552,8 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
                     },
                     ctaBorderRadius : uiConfiguration?.[UIConfigurationOptions.CTABorderRadius] ? uiConfiguration[UIConfigurationOptions.CTABorderRadius] : 12, 
                     buttonColor: response.data.merchantDetails.checkoutTheme.primaryButtonColor,
+                    textInputFieldFocusedOutlineColor: uiConfiguration?.[UIConfigurationOptions.TextInputFields]?.focusedBorderColor ? uiConfiguration[UIConfigurationOptions.TextInputFields].focusedBorderColor : '#2D2B32',
+                    textInputFieldUnFocusedOutlineColor : uiConfiguration?.[UIConfigurationOptions.TextInputFields]?.borderColor ? uiConfiguration[UIConfigurationOptions.TextInputFields].borderColor : '#E6E6E6',
                     buttonTextColor : response.data.merchantDetails.checkoutTheme.buttonTextColor,
                     headerColor : response.data.merchantDetails.checkoutTheme.headerColor,
                     headerTextColor : response.data.merchantDetails.checkoutTheme.headerTextColor,
@@ -586,7 +588,8 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
                     isUPIOtmQRMethodEnabled : methodFlags.isUPIOtmQRVisible,
                     isOrderItemDetailsVisible : isFieldEnabled('ORDER_ITEM_DETAILS'),
                     isSICheckboxVisible : configurationOptions?.SHOW_SI_CHECKBOX ? true : false,
-                    isSubscriptionCheckout : paymentDetails.subscriptionDetails != null ? true : false
+                    isSubscriptionCheckout : paymentDetails.subscriptionDetails != null ? true : false,
+                    subscriptionDetails : getSubscriptionDetails(paymentDetails.subscriptionDetails, paymentDetails.money.amountLocaleFull, symbol)
                   },
                 });
                 setPaymentHandler({
@@ -614,6 +617,54 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
     loadSession()
   }, []);
 
+  const getSubscriptionDetails = (data: SubscriptionDetails | null, amount : string, currencySymbol : string) => {
+    if (isEmpty(data)) return null;
+
+    const { billingCycle } = data!;
+  
+    // Frequency
+    let frequency: string | null = null;
+    if (!isEmpty(billingCycle)) {
+      const { billingCycleValue, count, billingTimeUnit } = billingCycle!;
+  
+      if (count === 1) {
+        frequency = billingTimeUnit;
+      } else {
+        frequency = `Every ${count} ${billingCycleValue}`;
+      }
+    }
+  
+    // Validity
+    let validity: string | null = null;
+    if (!isEmpty(data!.expiryDateLocale)) {
+      const date = formatDate(data!.expiryDateLocale!.split(' ')[0] ?? "");
+      validity = `${date}`;
+    } else if (!isEmpty(data!.recurringExpiryDateLocale)) {
+      const date = formatDate(data!.recurringExpiryDateLocale!.split(' ')[0] ?? "");
+      validity = `${date}`;
+    }
+  
+    const rows = [
+      {
+        label: 'To be paid now',
+        value: !isEmpty(amount) ? `${currencySymbol}${amount}` : null,
+      },
+      {
+        label: 'Recurring Amount',
+        value: !isEmpty(data!.maxAmountLocaleFull) ? `Up to ${currencySymbol}${data!.maxAmountLocaleFull}` : null,
+      },
+      {
+        label: 'Frequency',
+        value: frequency,
+      },
+      {
+        label: 'Expiry Date',
+        value: validity,
+      },
+    ];
+    return rows.filter(row => !isEmpty(row.value));
+};
+
   const handleSurchargeDetails = async() => {
     const response = await fetchSurCharge()
     switch (response.apiStatus) {
@@ -698,6 +749,7 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
 
   const checkAutoNavigation = () => {
     const targetScreen = handleAutoNavigation(
+      status,
       savedCardArray
     )
     if (!targetScreen) {
@@ -785,7 +837,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';
@@ -26,6 +26,7 @@ import styles from '../styles/screens/netBankingScreenStyles';
 import type { CheckoutStackParamList } from '../navigation';
 import type { NavigationProp, RouteProp } from '@react-navigation/native';
 import { setUserDataHandlerToDefault } from '../sharedContext/userdataHandler';
+import { getTextInputTheme } from '../sharedContext/getTextInputTheme';
 
 type NetBankingScreenRouteProp = RouteProp<CheckoutStackParamList, 'NetBankingScreen'>;
 
@@ -76,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);
@@ -104,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;
@@ -314,12 +315,7 @@ const NetBankingScreen = ({ navigation, route }: Props) => {
                 onChangeText={(it) => {
                   handleSearchTextChange(it);
                 }}
-                theme={{
-                  colors: {
-                    primary: '#2D2B32',
-                    outline: '#E6E6E6',
-                  },
-                }}
+                theme={getTextInputTheme()}
                 style={[styles.searchTextInput, {fontFamily: checkoutDetails.fontFamily.regular,}]}
                 left={
                   <TextInput.Icon

package/src/screens/upiScreen.tsx

@@ -18,6 +18,7 @@ import { formatTime, height, width } from '../utility';
 import upiPostRequest from '../postRequest/upiPostRequest';
 import { handlePaymentResponse } from '../sharedContext/handlePaymentResponseHandler';
 import callUIAnalytics from '../postRequest/callUIAnalytics';
+import { getTextInputTheme } from '../sharedContext/getTextInputTheme';
 
 interface UpiScreenProps {
   handleUpiPayment: (selectedIntent: string) => void;
@@ -447,12 +448,7 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
               onChangeText={(it) => {
                 handleTextChange(it);
               }}
-              theme={{
-                colors: {
-                  primary: '#2D2B32',
-                  outline: '#E6E6E6',
-                },
-              }}
+              theme={getTextInputTheme()}
               style={[styles.textInput, {fontFamily: checkoutDetails.fontFamily.regular,}]}
               error={upiCollectError}
               right={

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';
@@ -26,6 +26,7 @@ import styles from '../styles/screens/walletScreenStyles';
 import type { CheckoutStackParamList } from '../navigation';
 import type { NavigationProp, RouteProp } from '@react-navigation/native';
 import { setUserDataHandlerToDefault } from '../sharedContext/userdataHandler';
+import { getTextInputTheme } from '../sharedContext/getTextInputTheme';
 
 type WalletScreenRouteProp = RouteProp<CheckoutStackParamList, 'WalletScreen'>;
 type WalletScreenNavigationProp = NavigationProp<CheckoutStackParamList, 'WalletScreen'>;
@@ -60,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);
@@ -91,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;
@@ -276,12 +277,7 @@ const WalletScreen = ({ navigation, route }: Props) => {
                 onChangeText={(it) => {
                   handleSearchTextChange(it);
                 }}
-                theme={{
-                  colors: {
-                    primary: '#2D2B32',
-                    outline: '#E6E6E6',
-                  },
-                }}
+                theme={getTextInputTheme()}
                 style={[styles.textFieldStyle, {fontFamily: checkoutDetails.fontFamily.regular,}]}
                 left={
                   <TextInput.Icon

package/src/sdk-version.json

@@ -1 +1 @@
-{ "version": "1.0.11-beta2" }
+{ "version": "1.0.11-beta4" }

package/src/sharedContext/checkoutDetailsHandler.ts

@@ -13,6 +13,8 @@ export let checkoutDetailsHandler: CheckoutDetailsHandler = {
     fontFamily : {},
     ctaBorderRadius:0,
     buttonColor: '#1CA672',
+    textInputFieldFocusedOutlineColor : "#2D2B32",
+    textInputFieldUnFocusedOutlineColor: "#ADACB0",
     buttonTextColor:'white',
     headerColor : 'white',
     headerTextColor:'#363840',
@@ -46,7 +48,8 @@ export let checkoutDetailsHandler: CheckoutDetailsHandler = {
     isUPIOtmQRMethodEnabled : false,
     isOrderItemDetailsVisible : true,
     isSICheckboxVisible : false,
-    isSubscriptionCheckout : false
+    isSubscriptionCheckout : false,
+    subscriptionDetails : null
   },
 };
 
@@ -64,6 +67,8 @@ export const setCheckOutDetailsHandlerToDefault = () => {
       fontFamily : {},
       ctaBorderRadius:0,
       buttonColor: '',
+      textInputFieldFocusedOutlineColor : "",
+      textInputFieldUnFocusedOutlineColor: "",
       buttonTextColor:'',
       headerColor : '',
       headerTextColor:'',
@@ -97,7 +102,8 @@ export const setCheckOutDetailsHandlerToDefault = () => {
       isUPIOtmQRMethodEnabled: false,
       isOrderItemDetailsVisible : true,
       isSICheckboxVisible : false,
-      isSubscriptionCheckout : false
+      isSubscriptionCheckout : false,
+      subscriptionDetails : null
     },
   };
 };

package/src/sharedContext/getTextInputTheme.ts

@@ -0,0 +1,12 @@
+import { checkoutDetailsHandler } from "./checkoutDetailsHandler";
+
+
+export const getTextInputTheme = () => {
+    const { checkoutDetails } = checkoutDetailsHandler;
+    return {
+      colors: {
+        primary: checkoutDetails.textInputFieldFocusedOutlineColor,
+        outline: checkoutDetails.textInputFieldUnFocusedOutlineColor,
+      },
+    };
+};

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() === "")) ||

package/src/styles/indexStyles.ts

@@ -44,7 +44,7 @@ const styles = StyleSheet.create({
     footerText : {
         fontSize: 12,
         color: '#888888',
-        marginBottom: 13,
+        paddingBottom:16,
     },
     footerImage : { height: 50, width: 50 },
     webViewScreenStyle : {

package/src/styles/screens/bnplScreenStyles.ts

@@ -53,12 +53,11 @@ const styles = StyleSheet.create({
     },
     bottomText : {
         fontSize: 12,
-        color: '#888888',
-        marginBottom: 13,
+        color: '#888888'
     },
     bottomContainer : {
         justifyContent: 'center',
-        alignItems: 'flex-end',
+        alignItems: 'center',
         backgroundColor: '#F5F6FB',
         flexDirection: 'row',
     },

package/src/styles/screens/cardScreenStyles.ts

@@ -15,6 +15,7 @@ const styles = StyleSheet.create({
         paddingTop: 14,
         paddingBottom: 12,
     },
+    subscriptionContainer : {backgroundColor:'#EFF3FA', marginHorizontal : 16, marginTop : 10, borderRadius : 6, paddingBottom : 4},
     buttonText: {
         color: 'white',
         fontSize: 16,
@@ -77,7 +78,6 @@ const styles = StyleSheet.create({
     errorText : {
         color: '#B3261E',
         fontSize: 12,
-        marginHorizontal: 16,
         marginTop: 4,
     },
     expiryCvvContainer : {
@@ -143,13 +143,12 @@ const styles = StyleSheet.create({
       },
       footerContainer : {
         justifyContent: 'center',
-        alignItems: 'flex-end',
+        alignItems: 'center',
         flexDirection: 'row',
     },
     footerText : {
         fontSize: 12,
-        color: '#888888',
-        marginBottom: 13,
+        color: '#888888'
     },
     footerImage : { height: 50, width: 50 },
 })

package/src/styles/screens/netBankingScreenStyles.ts

@@ -61,14 +61,13 @@ const styles = StyleSheet.create({
     },
     footerContainer : {
         justifyContent: 'center',
-        alignItems: 'flex-end',
+        alignItems: 'center',
         backgroundColor: '#F5F6FB',
         flexDirection: 'row',
     },
     footerTextStyle : {
         fontSize: 12,
-        color: '#888888',
-        marginBottom: 13,
+        color: '#888888'
     },
     footerIcon : { height: 50, width: 50 },
     webViewContainer : {

package/src/styles/screens/walletScreenStyles.ts

@@ -48,14 +48,13 @@ const styles = StyleSheet.create({
     },
     bottomContainer : {
         justifyContent: 'center',
-        alignItems: 'flex-end',
+        alignItems: 'center',
         backgroundColor: '#F5F6FB',
         flexDirection: 'row',
     },
     bottomText : {
         fontSize: 12,
-        color: '#888888',
-        marginBottom: 13,
+        color: '#888888'
     },
     bottomImage : {
         height: 50, width: 50

package/src/utility.ts

@@ -198,4 +198,27 @@ export const getPhoneNumberCodeAndCountryName = (countryCodeRef : string) : Coun
   const countryDataJson = countryData as Record<string, CountryDetails>;
   return countryDataJson[countryCodeRef];
 
-}
+}
+
+export const formatDate = (dateStr: string) => {
+  const [datePart] = dateStr.split(' '); // "28/08/2027"
+  if (!datePart) return '';
+  const [day, month, year] = datePart.split('/');
+
+  const months = [
+    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
+  ];
+
+  return `${day}-${months[Number(month) - 1]}-${year}`;
+};
+
+export const isEmpty = (value: unknown): boolean => {
+  if (value === null || value === undefined) return true;
+  if (typeof value === 'string') return value.trim() === '';
+  if (typeof value === 'number') return isNaN(value);
+  if (typeof value === 'boolean') return false;
+  if (Array.isArray(value)) return value.length === 0;
+  if (typeof value === 'object') return Object.keys(value).length === 0;
+  return false;
+};