boxpay-checkout-reactnative-sdk 1.0.4 → 1.0.6-beta1

package/src/screens/bnplScreen.tsx

@@ -3,12 +3,10 @@ import {
   Text,
   BackHandler,
   Image,
-  ScrollView,
-  StatusBar,
-  SafeAreaView,
+  ScrollView
 } from 'react-native';
 import { useEffect, useRef, useState } from 'react';
-import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
+import { checkoutDetailsHandler, setCheckOutDetailsHandlerToDefault } from '../sharedContext/checkoutDetailsHandler';
 import LottieView from 'lottie-react-native';
 import Header from '../components/header';
 import type { PaymentClass, PaymentResultObject } from '../interface';
@@ -25,6 +23,7 @@ import styles from '../styles/screens/bnplScreenStyles';
 import { fetchPaymentMethodHandler, handleFetchStatusResponseHandler, handlePaymentResponse } from '../sharedContext/handlePaymentResponseHandler';
 import type { CheckoutStackParamList } from '../navigation';
 import type { NavigationProp } from '@react-navigation/native';
+import { setUserDataHandlerToDefault } from '../sharedContext/userdataHandler';
 
 type BNPLScreenNavigationProp = NavigationProp<CheckoutStackParamList, 'BNPLScreen'>;
 
@@ -65,23 +64,27 @@ const BNPLScreen = ({ navigation }: Props) => {
   };
 
   useEffect(() => {
-    BackHandler.addEventListener(
-      'hardwareBackPress',
-      () => {
-        if (showWebView) {
-          setShowWebView(false);
-          paymentFailedMessage.current = checkoutDetails.errorMessage;
-          setStatus('Failed');
-          setFailedModalState(true);
-          setLoading(false);
-          return true;
-        } else if (loading) {
-          return true; // Prevent default back action
-        }
-        return onProceedBack(); // Allow back navigation if not loading
+
+    const backAction = () => {
+      if (showWebView) {
+        setShowWebView(false);
+        paymentFailedMessage.current = checkoutDetails.errorMessage;
+        setStatus('Failed');
+        setFailedModalState(true);
+        setLoading(false);
+        return true;
+      } else if (loading) {
+        return true; // Prevent default back action
       }
+      return onProceedBack();
+    }
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      backAction,
     );
-  });
+
+    return () => backHandler.remove();
+  }, [navigation]);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -170,10 +173,14 @@ const BNPLScreen = ({ navigation }: Props) => {
   };
 
   const onExitCheckout = () => {
+    setSuccessModalState(false)
+    setSessionExppireModalState(false)
     const mockPaymentResult: PaymentResultObject = {
       status: status || '',
       transactionId: transactionId || '',
     };
+    setCheckOutDetailsHandlerToDefault()
+    setUserDataHandlerToDefault()
     paymentHandler.onPaymentResult(mockPaymentResult);
   };
 
@@ -184,8 +191,7 @@ const BNPLScreen = ({ navigation }: Props) => {
   }, [bnplList]);
 
   return (
-    <SafeAreaView style={styles.screenView}>
-      <StatusBar barStyle="dark-content" />
+    <View style={styles.screenView}>
       {loading ? (
         <View
           style={styles.loaderView}
@@ -237,12 +243,12 @@ const BNPLScreen = ({ navigation }: Props) => {
                   style={styles.imageStyle}
                 />
                 <Text
-                  style={styles.headingText}
+                  style={[styles.headingText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}
                 >
                   Oops!! No result found
                 </Text>
                 <Text
-                  style={styles.subHeadingText}
+                  style={[styles.subHeadingText, {fontFamily: checkoutDetails.fontFamily.regular,}]}
                 >
                   Please try another search
                 </Text>
@@ -253,7 +259,7 @@ const BNPLScreen = ({ navigation }: Props) => {
             style={styles.bottomContainer}
           >
             <Text
-              style={styles.bottomText}
+              style={[styles.bottomText, {fontFamily: checkoutDetails.fontFamily.regular,}]}
             >
               Secured by
             </Text>
@@ -296,7 +302,7 @@ const BNPLScreen = ({ navigation }: Props) => {
           />
         </View>
       )}
-    </SafeAreaView>
+    </View>
   );
 };
 

package/src/screens/cardScreen.tsx

@@ -4,15 +4,15 @@ import {
   Image,
   BackHandler,
   Pressable,
-  StatusBar,
+  TouchableOpacity
 } from 'react-native';
 import { useEffect, useRef, useState } from 'react';
 import Header from '../components/header';
 import type { RouteProp, NavigationProp } from '@react-navigation/native';
-import { Checkbox, TextInput } from 'react-native-paper';
+import { TextInput } from 'react-native-paper';
 import LottieView from 'lottie-react-native';
 import fetchCardDetails from '../postRequest/fetchCardDetails';
-import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
+import { checkoutDetailsHandler, setCheckOutDetailsHandlerToDefault } from '../sharedContext/checkoutDetailsHandler';
 import cardPostRequest from '../postRequest/cardPostRequest';
 import PaymentFailed from '../components/paymentFailed';
 import PaymentSuccess from '../components/paymentSuccess';
@@ -25,12 +25,13 @@ import fetchStatus from '../postRequest/fetchStatus';
 import { SvgUri } from 'react-native-svg';
 import ShimmerPlaceHolder from 'react-native-shimmer-placeholder';
 import emiPostRequest from '../postRequest/emiPostRequest';
-import { SafeAreaView } from 'react-native-safe-area-context';
 import KnowMoreBottomSheet from '../components/knowMoreBottomSheet';
 import styles from '../styles/screens/cardScreenStyles';
 import Toast from 'react-native-toast-message'
 import { handleFetchStatusResponseHandler, handlePaymentResponse } from '../sharedContext/handlePaymentResponseHandler';
 import type { CheckoutStackParamList } from '../navigation';
+import { setUserDataHandlerToDefault } from '../sharedContext/userdataHandler';
+import CheckBoxContainer from '../components/checkboxContainer';
 
 type CardScreenRouteProp = RouteProp<CheckoutStackParamList, 'CardScreen'>;
 
@@ -108,6 +109,8 @@ const CardScreen = ({ route, navigation }: Props) => {
   const [showKnowMoreDialog, setKnowMoreDialog] = useState(false);
   const [isSavedCardCheckBoxClicked, setIsSavedCardCheckBoxClicked] =
     useState(false);
+  
+  const [isSICheckBoxClicked, setIsSICheckBoxClicked] = useState(false)
   const [paymentUrl, setPaymentUrl] = useState<string | null>(null);
   const [paymentHtml, setPaymentHtml] = useState<string | null>(null);
   const [showWebView, setShowWebView] = useState(false);
@@ -153,8 +156,8 @@ const CardScreen = ({ route, navigation }: Props) => {
             setCardNumberValid(true);
           }
         }
-        if(cleaned.length == 9) {
-          await fetchCardDetails(cleaned).then((response) => {
+        if(cleaned.length >= 9) {
+          await fetchCardDetails(cleaned.slice(0,9)).then((response) => {
             switch (response.apiStatus) {
               case APIStatus.Success : {
                 const data = response.data
@@ -179,7 +182,7 @@ const CardScreen = ({ route, navigation }: Props) => {
                   } else if (data.paymentMethod.brand == 'AmericanExpress') {
                     setCardSelectedIcon(require('../../assets/images/ic_amex.png'));
                     setMaxCvvLength(4);
-                    setMaxCardNumberLength(18);
+                    setMaxCardNumberLength(checkoutDetails.env === 'test' ? 19 : 18);
                   } else if (data.paymentMethod.brand == 'Maestro') {
                     setCardSelectedIcon(require('../../assets/images/ic_maestro.png'));
                     setMaxCvvLength(3);
@@ -250,27 +253,31 @@ const CardScreen = ({ route, navigation }: Props) => {
     setCardNumberErrorText(
       cleaned.length < 1
         ? 'Required'
-        : cleaned.length < cleanedLength && methodEnabled
-          ? 'This card number is invalid'
-          : !methodEnabled
-            ? 'This card is not supported for the payment'
-            : !cardNumberValid
-              ? 'This card number is invalid'
-              : !emiIssuerExist
-                ? "We couldn't find any EMI plans for this card. Please try using a different card number"
-                : emiIssuer != issuerBrand
-                  ? `The card is ${emiIssuer} ${cardType}. Please enter a card number that belongs to ${issuerBrand} ${cardType}`
-                  : ''
+        : checkoutDetails.env === 'test'
+          ? ''
+          : cleaned.length < cleanedLength
+            ? 'This card number is invalid'
+            : !methodEnabled
+              ? 'This card is not supported for the payment'
+              : !cardNumberValid
+                ? 'This card number is invalid'
+                : !emiIssuerExist
+                  ? "We couldn't find any EMI plans for this card. Please try using a different card number"
+                  : emiIssuer != issuerBrand
+                    ? `The card is ${emiIssuer} ${cardType}. Please enter a card number that belongs to ${issuerBrand} ${cardType}`
+                    : ''
     );
     setCardNumberError(
       cleaned.length < cleanedLength ||
+      (checkoutDetails.env !== 'test' && (
         !methodEnabled ||
         !cardNumberValid ||
         !emiIssuerExist ||
         (emiIssuer != issuerBrand &&
           durationNumber != undefined &&
           durationNumber != '')
-    );
+      ))
+    )
     setCardNumberFocused(false);
   };
 
@@ -440,8 +447,7 @@ const CardScreen = ({ route, navigation }: Props) => {
         cardNumberText?.length != maxCardNumberLength ||
         cardExpiryText?.length != 5 ||
         cardCvvText?.length != maxCvvLength ||
-        (cardHolderNameText?.length ?? 0) < 1 ||
-        !cardNumberValid
+        (cardHolderNameText?.length ?? 0) < 1 
       ) {
         setCardValid(false);
       } else {
@@ -501,7 +507,8 @@ const CardScreen = ({ route, navigation }: Props) => {
         cardCvvText || '',
         cardHolderNameText || '',
         cardNickNameText || '',
-        isSavedCardCheckBoxClicked
+        isSavedCardCheckBoxClicked,
+        isSICheckBoxClicked
       );
     }
     handlePaymentResponse({
@@ -523,33 +530,41 @@ const CardScreen = ({ route, navigation }: Props) => {
   };
 
   useEffect(() => {
-    BackHandler.addEventListener(
-      'hardwareBackPress',
-      () => {
-        if (showWebView) {
-          setShowWebView(false);
-          paymentFailedMessage.current = checkoutDetails.errorMessage;
-          setStatus('Failed');
-          setFailedModalState(true);
-          setLoading(false);
-          return true;
-        } else if (loading) {
-          return true; // Prevent default back action
-        }
-        return onProceedBack(); // Allow back navigation if not loading
+
+    const backAction = () => {
+      if (showWebView) {
+        setShowWebView(false);
+        paymentFailedMessage.current = checkoutDetails.errorMessage;
+        setStatus('Failed');
+        setFailedModalState(true);
+        setLoading(false);
+        return true;
+      } else if (loading) {
+        return true; // Prevent default back action
       }
+      return onProceedBack();
+    }
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      backAction,
     );
-  });
+
+    return () => backHandler.remove();
+  }, [navigation]);
 
   useEffect(() => {
     checkCardValid();
   }, [cardNumberText, cardExpiryText, cardCvvText, cardHolderNameText]);
 
   const onExitCheckout = () => {
+    setSuccessModalState(false)
+    setSessionExppireModalState(false)
     const mockPaymentResult: PaymentResultObject = {
       status: status || '',
       transactionId: transactionId || '',
     };
+    setCheckOutDetailsHandlerToDefault()
+    setUserDataHandlerToDefault()
     paymentHandler.onPaymentResult(mockPaymentResult);
   };
 
@@ -560,8 +575,7 @@ const CardScreen = ({ route, navigation }: Props) => {
   }, [paymentHtml]);
 
   return (
-    <SafeAreaView style={styles.screenView}>
-      <StatusBar barStyle="dark-content" />
+    <View style={styles.screenView}>
       {loading ? (
         <View
           style={styles.loadingContainer}
@@ -619,7 +633,7 @@ const CardScreen = ({ route, navigation }: Props) => {
                   )}
                 </View>
                 <Text
-                  style={styles.nameText}
+                  style={[styles.nameText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}
                 >
                   {bankNameStr}
                 </Text>
@@ -628,7 +642,7 @@ const CardScreen = ({ route, navigation }: Props) => {
                 style={styles.thickBorder}
               >
                 <Text
-                  style={styles.durationText}
+                  style={[styles.durationText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}
                 >
                   {duration} months x
                   <Text
@@ -640,7 +654,7 @@ const CardScreen = ({ route, navigation }: Props) => {
                   {amountStr}
                 </Text>
                 <Text
-                  style={styles.percentText}
+                  style={[styles.percentText, {fontFamily: checkoutDetails.fontFamily.regular,}]}
                 >
                   @{percentNumber}% p.a.
                 </Text>
@@ -657,6 +671,7 @@ const CardScreen = ({ route, navigation }: Props) => {
                     : cardNumberText != '' && cardNumberText != null
                       ? '#2D2B32'
                       : '#ADACB0',
+                      fontFamily: checkoutDetails.fontFamily.regular,
                 }]}
               >
                 Card Number
@@ -672,7 +687,7 @@ const CardScreen = ({ route, navigation }: Props) => {
                 outline: '#E6E6E6',
               },
             }}
-            style={[styles.textInput, { marginTop: 28, marginHorizontal: 16 }]}
+            style={[styles.textInput, { marginTop: 28, marginHorizontal: 16, fontFamily: checkoutDetails.fontFamily.regular, }]}
             error={cardNumberError}
             right={
               cardNumberError ? (
@@ -709,7 +724,7 @@ const CardScreen = ({ route, navigation }: Props) => {
           />
           {cardNumberError && (
             <Text
-              style={styles.errorText}
+              style={[styles.errorText, { fontFamily: checkoutDetails.fontFamily.regular,}]}
             >
               {cardNumberErrorText}
             </Text>
@@ -728,6 +743,7 @@ const CardScreen = ({ route, navigation }: Props) => {
                         : cardExpiryText != '' && cardExpiryText != null
                           ? '#2D2B32'
                           : '#ADACB0',
+                          fontFamily: checkoutDetails.fontFamily.regular,
                     }]}
                   >
                     Expiry (MM/YY)
@@ -743,7 +759,7 @@ const CardScreen = ({ route, navigation }: Props) => {
                     outline: '#E6E6E6',
                   },
                 }}
-                style={styles.textInput}
+                style={[styles.textInput, {fontFamily: checkoutDetails.fontFamily.regular,}]}
                 error={cardExpiryError}
                 right={
                   cardExpiryError ? (
@@ -771,7 +787,7 @@ const CardScreen = ({ route, navigation }: Props) => {
               />
               {cardExpiryError && (
                 <Text
-                  style={styles.errorText}
+                  style={[styles.errorText, { fontFamily: checkoutDetails.fontFamily.regular,}]}
                 >
                   {cardExpiryErrorText}
                 </Text>
@@ -788,6 +804,7 @@ const CardScreen = ({ route, navigation }: Props) => {
                         : cardCvvText != '' && cardCvvText != null
                           ? '#2D2B32'
                           : '#ADACB0',
+                          fontFamily: checkoutDetails.fontFamily.regular,
                     }]}
                   >
                     CVV
@@ -803,7 +820,7 @@ const CardScreen = ({ route, navigation }: Props) => {
                     outline: '#E6E6E6',
                   },
                 }}
-                style={styles.textInput}
+                style={[styles.textInput, {fontFamily: checkoutDetails.fontFamily.regular,}]}
                 error={cardCvvError}
                 right={
                   cardCvvError ? (
@@ -844,7 +861,7 @@ const CardScreen = ({ route, navigation }: Props) => {
               />
               {cardCvvError && (
                 <Text
-                  style={styles.errorText}
+                  style={[styles.errorText, { fontFamily: checkoutDetails.fontFamily.regular,}]}
                 >
                   {cardCvvErrorText}
                 </Text>
@@ -861,6 +878,7 @@ const CardScreen = ({ route, navigation }: Props) => {
                     : cardHolderNameText != '' && cardHolderNameText != null
                       ? '#2D2B32'
                       : '#ADACB0',
+                      fontFamily: checkoutDetails.fontFamily.regular,
                 }]}
               >
                 Name on the Card
@@ -876,7 +894,7 @@ const CardScreen = ({ route, navigation }: Props) => {
                 outline: '#E6E6E6',
               },
             }}
-            style={[styles.textInput, { marginHorizontal: 16, marginTop: 16 }]}
+            style={[styles.textInput, { marginHorizontal: 16, marginTop: 16, fontFamily: checkoutDetails.fontFamily.regular, }]}
             error={cardHolderNameError}
             right={
               cardHolderNameError ? (
@@ -902,12 +920,13 @@ const CardScreen = ({ route, navigation }: Props) => {
           />
           {cardHolderNameError && (
             <Text
-              style={styles.errorText}
+              style={[styles.errorText, { fontFamily: checkoutDetails.fontFamily.regular,}]}
             >
               {cardHolderNameErrorText}
             </Text>
           )}
           {shopperToken != null && shopperToken != '' && (
+            <>
             <TextInput
               mode="outlined"
               label={
@@ -918,6 +937,7 @@ const CardScreen = ({ route, navigation }: Props) => {
                       : cardNickNameText != '' && cardNickNameText != null
                         ? '#2D2B32'
                         : '#ADACB0',
+                        fontFamily: checkoutDetails.fontFamily.regular,
                   }]}
                 >
                   Card NickName (for easy identification)
@@ -935,7 +955,7 @@ const CardScreen = ({ route, navigation }: Props) => {
               }}
               style={[
                 styles.textInput,
-                { marginHorizontal: 16, marginTop: 16 },
+                { marginHorizontal: 16, marginTop: 16 , fontFamily: checkoutDetails.fontFamily.regular,},
               ]}
               outlineStyle={{
                 borderRadius: 8, // Add this
@@ -948,8 +968,6 @@ const CardScreen = ({ route, navigation }: Props) => {
                 setCardNickNameFocused(true);
               }}
             />
-          )}
-          {
             <View
               style={styles.infoContainer}
             >
@@ -958,25 +976,30 @@ const CardScreen = ({ route, navigation }: Props) => {
                 style={styles.infoIcon}
               />
               <Text
-                style={styles.infoText}
+                style={[styles.infoText, {fontFamily: checkoutDetails.fontFamily.regular,}]}
               >
                 CVV will not be stored
               </Text>
-            </View>
-          }
-          {shopperToken != null && shopperToken != '' && (
-            <View
+              </View>
+
+              <View
               style={styles.checkBoxContainer}
             >
-              <Checkbox
-                status={isSavedCardCheckBoxClicked ? 'checked' : 'unchecked'}
-                onPress={() => {
-                  setIsSavedCardCheckBoxClicked(!isSavedCardCheckBoxClicked);
-                }}
-                color={checkoutDetails.brandColor}
-              />
+              <TouchableOpacity
+                onPress={() => setIsSavedCardCheckBoxClicked(!isSavedCardCheckBoxClicked)}
+              >
+                <View style={[
+                  styles.checkboxBox,
+                  { borderColor: checkoutDetails.buttonColor },
+                  isSavedCardCheckBoxClicked && { backgroundColor: checkoutDetails.buttonColor }
+                ]}>
+                  {isSavedCardCheckBoxClicked && (
+                    <Text style={styles.checkmark}>✓</Text>
+                  )}
+                </View>
+              </TouchableOpacity>
               <Text
-                style={styles.checkBoxText}
+                style={[styles.checkBoxText, {fontFamily: checkoutDetails.fontFamily.regular,}]}
               >
                 Save this card as per RBI guidelines.
               </Text>
@@ -988,13 +1011,25 @@ const CardScreen = ({ route, navigation }: Props) => {
               >
                 <Text
                   style={[styles.clickableText,{
-                    color: checkoutDetails.brandColor,
+                    color: checkoutDetails.buttonColor,
+                    fontFamily: checkoutDetails.fontFamily.semiBold,
                   }]}
                 >
                   Know more
                 </Text>
               </Pressable>
-            </View>
+              </View>
+            </>
+          )}
+
+          {checkoutDetails.isSICheckboxVisible && (
+             <CheckBoxContainer
+             text = {"Set up Standing Instructions (SI) for this payment."}
+             isCheckBoxSelected = {isSICheckBoxClicked}
+             onCheckBoxClicked = {() => {
+              setIsSICheckBoxClicked(!isSICheckBoxClicked)
+             }}
+             />
           )}
           <View
             style={styles.pressableContainer}
@@ -1003,19 +1038,19 @@ const CardScreen = ({ route, navigation }: Props) => {
               <Pressable
                 style={[
                   styles.buttonContainer,
-                  { backgroundColor: checkoutDetails.brandColor },
+                  { backgroundColor: checkoutDetails.buttonColor,borderRadius: checkoutDetails.ctaBorderRadius, },
                 ]}
                 onPress={() => {
                   onProceedForward();
                 }}
               >
-                <Text style={styles.buttonText}>Make Payment</Text>
+                <Text style={[styles.buttonText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>Make Payment</Text>
               </Pressable>
             ) : (
               <Pressable
-                style={[styles.buttonContainer, { backgroundColor: '#E6E6E6' }]}
+                style={[styles.buttonContainer, { backgroundColor: '#E6E6E6' , borderRadius: checkoutDetails.ctaBorderRadius,}]}
               >
-                <Text style={[styles.buttonText, { color: '#ADACB0' }]}>
+                <Text style={[styles.buttonText, { color: checkoutDetails.buttonTextColor, fontFamily: checkoutDetails.fontFamily.semiBold, }]}>
                   Make Payment
                 </Text>
               </Pressable>
@@ -1072,7 +1107,7 @@ const CardScreen = ({ route, navigation }: Props) => {
           />
         </View>
       )}
-    </SafeAreaView>
+    </View>
   );
 };