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

package/src/screens/cardScreen.tsx

@@ -1,38 +1,43 @@
+import type { NavigationProp, RouteProp } from '@react-navigation/native';
+import LottieView from 'lottie-react-native';
+import { useEffect, useRef, useState } from 'react';
 import {
-  View,
-  Text,
-  Image,
   BackHandler,
+  Image,
+  InputAccessoryView,
+  Keyboard,
+  Platform,
   Pressable,
+  ScrollView,
+  Text,
   TouchableOpacity,
-  ScrollView
+  View
 } from 'react-native';
-import { useEffect, useRef, useState } from 'react';
-import Header from '../components/header';
-import type { RouteProp, NavigationProp } from '@react-navigation/native';
 import { TextInput } from 'react-native-paper';
-import LottieView from 'lottie-react-native';
-import fetchCardDetails from '../postRequest/fetchCardDetails';
-import { checkoutDetailsHandler, setCheckOutDetailsHandlerToDefault } from '../sharedContext/checkoutDetailsHandler';
-import cardPostRequest from '../postRequest/cardPostRequest';
+import ShimmerPlaceHolder from 'react-native-shimmer-placeholder';
+import { SvgUri } from 'react-native-svg';
+import Toast from 'react-native-toast-message';
+import CheckBoxContainer from '../components/checkboxContainer';
+import CvvInfoBottomSheet from '../components/cvvInfoBottomSheet';
+import Header from '../components/header';
+import KnowMoreBottomSheet from '../components/knowMoreBottomSheet';
 import PaymentFailed from '../components/paymentFailed';
 import PaymentSuccess from '../components/paymentSuccess';
 import SessionExpire from '../components/sessionExpire';
-import { APIStatus, type PaymentResultObject , type CardScreenParams} from '../interface';
-import { paymentHandler } from '../sharedContext/paymentStatusHandler';
-import CvvInfoBottomSheet from '../components/cvvInfoBottomSheet';
-import WebViewScreen from './webViewScreen';
-import fetchStatus from '../postRequest/fetchStatus';
-import { SvgUri } from 'react-native-svg';
-import ShimmerPlaceHolder from 'react-native-shimmer-placeholder';
+import { APIStatus, TransactionStatus, type CardScreenParams, type PaymentResultObject } from '../interface';
+import type { CheckoutStackParamList } from '../navigation';
+import cardPostRequest from '../postRequest/cardPostRequest';
 import emiPostRequest from '../postRequest/emiPostRequest';
-import KnowMoreBottomSheet from '../components/knowMoreBottomSheet';
-import styles from '../styles/screens/cardScreenStyles';
-import Toast from 'react-native-toast-message'
+import fetchCardDetails from '../postRequest/fetchCardDetails';
+import fetchStatus from '../postRequest/fetchStatus';
+import { checkoutDetailsHandler, setCheckOutDetailsHandlerToDefault } from '../sharedContext/checkoutDetailsHandler';
 import { handleFetchStatusResponseHandler, handlePaymentResponse } from '../sharedContext/handlePaymentResponseHandler';
-import type { CheckoutStackParamList } from '../navigation';
+import { paymentHandler } from '../sharedContext/paymentStatusHandler';
 import { setUserDataHandlerToDefault } from '../sharedContext/userdataHandler';
-import CheckBoxContainer from '../components/checkboxContainer';
+import styles from '../styles/screens/cardScreenStyles';
+import WebViewScreen from './webViewScreen';
+import SubscriptionRow from '../components/subscriptionRow';
+import { getTextInputTheme } from '../sharedContext/getTextInputTheme';
 
 type CardScreenRouteProp = RouteProp<CheckoutStackParamList, 'CardScreen'>;
 
@@ -75,7 +80,7 @@ const CardScreen = ({ route, navigation }: Props) => {
   const [cardNickNameText, setCardNickNameText] = useState<string | null>(null);
 
   const [cardSelectedIcon, setCardSelectedIcon] = useState(
-    require('../../assets/images/ic_default_card.png')
+    require('../../assets/images/ic_card.png')
   );
   const [maxCvvLength, setMaxCvvLength] = useState(4);
   const [maxCardNumberLength, setMaxCardNumberLength] = useState(19);
@@ -125,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);
@@ -137,6 +142,12 @@ const CardScreen = ({ route, navigation }: Props) => {
   const [emiIssuer, setEmiIssuer] = useState('');
   const [shopperToken, setShopperToken] = useState<string | null>(null);
 
+  const cardNumberAccessoryID = "cardNumberAccessoryID";
+  const cardExpiryAccessoryID = "cardExpiryAccessoryID";
+  const cardCvvAccessoryID = "cardCvvAccessoryID";
+  const cardHolderNameAccessoryID = "cardHolderNameAccessoryID";
+  const cardNickNameAccessoryID = "cardNickNameAccessoryID";
+
   const handleCardNumberTextChange = async (text: string) => {
     if (text == '') {
       setCardNumberText(text);
@@ -191,7 +202,7 @@ const CardScreen = ({ route, navigation }: Props) => {
                     setMaxCardNumberLength(19);
                   } else {
                     setCardSelectedIcon(
-                      require('../../assets/images/ic_default_card.png')
+                      require('../../assets/images/ic_card.png')
                     );
                     setMaxCvvLength(3);
                     setMaxCardNumberLength(19);
@@ -214,13 +225,17 @@ const CardScreen = ({ route, navigation }: Props) => {
           });
         }
       } else {
-        setCardSelectedIcon(require('../../assets/images/ic_default_card.png'));
+        setCardSelectedIcon(require('../../assets/images/ic_card.png'));
         setMaxCvvLength(3);
         setMaxCardNumberLength(19);
       }
     }
   };
 
+  const isSubscriptionDetailsVisible =
+  checkoutDetails.isSubscriptionCheckout &&
+  (isSICheckBoxClicked || !checkoutDetails.isSICheckboxVisible);
+
   const isValidCardNumberByLuhn = (stringInputCardNumber: string): boolean => {
     const minCardLength = 13;
 
@@ -254,7 +269,7 @@ const CardScreen = ({ route, navigation }: Props) => {
     const cleanedLength = maxCardNumberLength == 19 ? 16 : 15;
     setCardNumberErrorText(
       cleaned.length < 1
-        ? 'Required'
+        ? 'Card Number is required'
         : checkoutDetails.env === 'test'
           ? ''
           : cleaned.length < cleanedLength
@@ -377,7 +392,7 @@ const CardScreen = ({ route, navigation }: Props) => {
     const cleaned = cardExpiryText?.replace(/ /g, '') || '';
     setCardExpiryErrorText(
       cleaned.length < 1
-        ? 'Required'
+        ? 'Expiry is required'
         : cleaned.length < 5 || !cardExpiryValid
           ? 'Expiry is invalid'
           : ''
@@ -390,7 +405,7 @@ const CardScreen = ({ route, navigation }: Props) => {
     const cleaned = cardCvvText?.replace(/ /g, '') || '';
     setCardCvvErrorText(
       cleaned.length < 1
-        ? 'Required'
+        ? 'CVV is required'
         : cleaned.length < maxCvvLength
           ? 'CVV is invalid'
           : ''
@@ -401,7 +416,7 @@ const CardScreen = ({ route, navigation }: Props) => {
 
   const handleCardHolderNameBlur = () => {
     const cleaned = cardHolderNameText?.replace(/ /g, '') || '';
-    setCardHolderNameErrorText(cleaned.length < 1 ? 'Required' : '');
+    setCardHolderNameErrorText(cleaned.length < 1 ? 'Name is required' : '');
     setCardHolderNameFocused(false);
     setCardHolderNameError(cleaned.length < 1);
   };
@@ -409,7 +424,7 @@ const CardScreen = ({ route, navigation }: Props) => {
   const handleCardCvvTextChange = (text: string) => {
     setCardCvvText(text);
     if (text == '') {
-      setCardCvvErrorText('Required');
+      setCardCvvErrorText('CVV is required');
       setCardCvvError(true);
     } else {
       setCardCvvError(false);
@@ -542,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;
@@ -582,7 +597,8 @@ const CardScreen = ({ route, navigation }: Props) => {
   }, [paymentHtml]);
 
   return (
-    <View style={styles.screenView}>
+    <>
+      <View style={styles.screenView}>
       {loading ? (
         <View
           style={styles.loadingContainer}
@@ -685,21 +701,18 @@ const CardScreen = ({ route, navigation }: Props) => {
                       fontFamily: checkoutDetails.fontFamily.regular,
                 }]}
               >
-                Card Number
+                Card Number*
               </Text>
             }
             value={cardNumberText || ''}
             onChangeText={(it) => {
               handleCardNumberTextChange(it);
             }}
-            theme={{
-              colors: {
-                primary: '#2D2B32',
-                outline: '#E6E6E6',
-              },
-            }}
+            theme={getTextInputTheme()}
+            inputAccessoryViewID={Platform.OS === 'ios' ? cardNumberAccessoryID : undefined}
             style={[styles.textInput, { marginTop: 28, marginHorizontal: 16, fontFamily: checkoutDetails.fontFamily.regular, }]}
             error={cardNumberError}
+            returnKeyType="done"
             right={
               cardNumberError ? (
                 <TextInput.Icon
@@ -715,7 +728,10 @@ const CardScreen = ({ route, navigation }: Props) => {
                   icon={() => (
                     <Image
                       source={cardSelectedIcon}
-                      style={{ width: 35, height: 20 }}
+                      style={{ width: 32, height: 20,tintColor:
+                        cardSelectedIcon === require('../../assets/images/ic_card.png')
+                          ? '#6B7280' // Cool Grey 500
+                          : undefined, }}
                     />
                   )}
                 />
@@ -735,11 +751,65 @@ const CardScreen = ({ route, navigation }: Props) => {
           />
           {cardNumberError && (
             <Text
-              style={[styles.errorText, { fontFamily: checkoutDetails.fontFamily.regular,}]}
+              style={[styles.errorText, { fontFamily: checkoutDetails.fontFamily.regular,marginHorizontal : 16}]}
             >
               {cardNumberErrorText}
             </Text>
           )}
+          <TextInput
+            mode="outlined"
+            label={
+              <Text
+                style={[styles.textFieldLabel,{
+                  color: cardHolderNameFocused
+                    ? '#2D2B32'
+                    : cardHolderNameText != '' && cardHolderNameText != null
+                      ? '#2D2B32'
+                      : '#ADACB0',
+                      fontFamily: checkoutDetails.fontFamily.regular,
+                }]}
+              >
+                Cardholder Name*
+              </Text>
+            }
+            value={cardHolderNameText || ''}
+            onChangeText={(it) => {
+              handleCardHolderNameTextChange(it);
+            }}
+            theme={getTextInputTheme()}
+            style={[styles.textInput, { marginHorizontal: 16, marginTop: 16, fontFamily: checkoutDetails.fontFamily.regular, }]}
+            error={cardHolderNameError}
+            inputAccessoryViewID={Platform.OS === 'ios' ? cardHolderNameAccessoryID : undefined}
+            returnKeyType="done"
+            right={
+              cardHolderNameError ? (
+                <TextInput.Icon
+                  icon={() => (
+                    <Image
+                      source={require('../../assets/images/ic_upi_error.png')}
+                      style={{ width: 24, height: 24 }}
+                    />
+                  )}
+                />
+              ) : null
+            }
+            outlineStyle={{
+              borderRadius: 8, // Add this
+              borderWidth: 1.5,
+            }}
+            onBlur={handleCardHolderNameBlur}
+            onFocus={() => {
+              setCardHolderNameFocused(true);
+              setCardHolderNameError(false);
+            }}
+          />
+          {cardHolderNameError && (
+            <Text
+              style={[styles.errorText, { fontFamily: checkoutDetails.fontFamily.regular,marginHorizontal : 16}]}
+            >
+              {cardHolderNameErrorText}
+            </Text>
+          )}
           <View
             style={styles.expiryCvvContainer}
           >
@@ -757,21 +827,18 @@ const CardScreen = ({ route, navigation }: Props) => {
                           fontFamily: checkoutDetails.fontFamily.regular,
                     }]}
                   >
-                    Expiry (MM/YY)
+                    Expiry (MM/YY)*
                   </Text>
                 }
                 value={cardExpiryText || ''}
                 onChangeText={(it) => {
                   handleCardExpiryTextChange(it);
                 }}
-                theme={{
-                  colors: {
-                    primary: '#2D2B32',
-                    outline: '#E6E6E6',
-                  },
-                }}
+                theme={getTextInputTheme()}
+                inputAccessoryViewID={Platform.OS === 'ios' ? cardExpiryAccessoryID : undefined}
                 style={[styles.textInput, {fontFamily: checkoutDetails.fontFamily.regular,}]}
                 error={cardExpiryError}
+                returnKeyType="done"
                 right={
                   cardExpiryError ? (
                     <TextInput.Icon
@@ -818,21 +885,18 @@ const CardScreen = ({ route, navigation }: Props) => {
                           fontFamily: checkoutDetails.fontFamily.regular,
                     }]}
                   >
-                    CVV
+                    CVV*
                   </Text>
                 }
                 value={cardCvvText || ''}
                 onChangeText={(it) => {
                   handleCardCvvTextChange(it);
                 }}
-                theme={{
-                  colors: {
-                    primary: '#2D2B32',
-                    outline: '#E6E6E6',
-                  },
-                }}
+                theme={getTextInputTheme()}
+                inputAccessoryViewID={Platform.OS === 'ios' ? cardCvvAccessoryID : undefined}
                 style={[styles.textInput, {fontFamily: checkoutDetails.fontFamily.regular,}]}
                 error={cardCvvError}
+                returnKeyType="done"
                 right={
                   cardCvvError ? (
                     <TextInput.Icon
@@ -847,8 +911,8 @@ const CardScreen = ({ route, navigation }: Props) => {
                     <TextInput.Icon
                       icon={() => (
                         <Image
-                          source={require('../../assets/images/ic_cvv_info.png')}
-                          style={{ width: 24, height: 24 }}
+                          source={require('../../assets/images/ic_info.png')}
+                          style={{ width: 24, height: 24, tintColor : checkoutDetails.buttonColor }}
                         />
                       )}
                       onPress={() => {
@@ -879,63 +943,6 @@ const CardScreen = ({ route, navigation }: Props) => {
               )}
             </View>
           </View>
-          <TextInput
-            mode="outlined"
-            label={
-              <Text
-                style={[styles.textFieldLabel,{
-                  color: cardHolderNameFocused
-                    ? '#2D2B32'
-                    : cardHolderNameText != '' && cardHolderNameText != null
-                      ? '#2D2B32'
-                      : '#ADACB0',
-                      fontFamily: checkoutDetails.fontFamily.regular,
-                }]}
-              >
-                Name on the Card
-              </Text>
-            }
-            value={cardHolderNameText || ''}
-            onChangeText={(it) => {
-              handleCardHolderNameTextChange(it);
-            }}
-            theme={{
-              colors: {
-                primary: '#2D2B32',
-                outline: '#E6E6E6',
-              },
-            }}
-            style={[styles.textInput, { marginHorizontal: 16, marginTop: 16, fontFamily: checkoutDetails.fontFamily.regular, }]}
-            error={cardHolderNameError}
-            right={
-              cardHolderNameError ? (
-                <TextInput.Icon
-                  icon={() => (
-                    <Image
-                      source={require('../../assets/images/ic_upi_error.png')}
-                      style={{ width: 24, height: 24 }}
-                    />
-                  )}
-                />
-              ) : null
-            }
-            outlineStyle={{
-              borderRadius: 8, // Add this
-              borderWidth: 1.5,
-            }}
-            onBlur={handleCardHolderNameBlur}
-            onFocus={() => {
-              setCardHolderNameFocused(true);
-              setCardHolderNameError(false);
-            }}
-          />
-          {cardHolderNameError && (
-            <Text
-              style={[styles.errorText, { fontFamily: checkoutDetails.fontFamily.regular,}]}
-            >
-              {cardHolderNameErrorText}
-            </Text>
-          )}
           {shopperToken != null && shopperToken != '' && (
             <>
             <TextInput
@@ -958,16 +965,13 @@ const CardScreen = ({ route, navigation }: Props) => {
               onChangeText={(it) => {
                 setCardNickNameText(it);
               }}
-              theme={{
-                colors: {
-                  primary: '#2D2B32',
-                  outline: '#E6E6E6',
-                },
-              }}
+              inputAccessoryViewID={Platform.OS === 'ios' ? cardNickNameAccessoryID : undefined}
+              theme={getTextInputTheme()}
               style={[
                 styles.textInput,
                 { marginHorizontal: 16, marginTop: 16 , fontFamily: checkoutDetails.fontFamily.regular,},
               ]}
+              returnKeyType="done"
               outlineStyle={{
                 borderRadius: 8, // Add this
                 borderWidth: 1.5,
@@ -1042,6 +1046,20 @@ const CardScreen = ({ route, navigation }: Props) => {
              }}
              />
           )}
+
+          {isSubscriptionDetailsVisible && (
+            <View style = {styles.subscriptionContainer}>
+              {checkoutDetails.subscriptionDetails && checkoutDetails.subscriptionDetails.map((item) => item.value && (
+                <SubscriptionRow
+                key={item.label}
+                checkoutDetails={checkoutDetails}
+                heading={item.label}
+                value={item.value}
+              />
+              ))}
+            </View>
+          )}
+
           </ScrollView>
           <View>
             {cardValid ? (
@@ -1054,14 +1072,38 @@ const CardScreen = ({ route, navigation }: Props) => {
                   onProceedForward();
                 }}
               >
-                <Text style={[styles.buttonText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>Make Payment</Text>
-              </Pressable>
+                  <Text style={[styles.buttonText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>
+              Pay{' '}
+              <Text
+                style={{
+                  fontFamily: 'Inter-SemiBold',
+                  fontSize: 16,
+                  color: 'white',
+                }}
+              >
+                {' '}
+                {checkoutDetails.currencySymbol}
+              </Text>
+              {checkoutDetails.amount}
+                  </Text>              
+                </Pressable>
             ) : (
               <Pressable
                 style={[styles.buttonContainer, { backgroundColor: '#E6E6E6' , borderRadius: checkoutDetails.ctaBorderRadius,}]}
               >
-                <Text style={[styles.buttonText, { color: checkoutDetails.buttonTextColor, fontFamily: checkoutDetails.fontFamily.semiBold, }]}>
-                  Make Payment
+                <Text style={[styles.buttonText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>
+            Pay{' '}
+            <Text
+              style={{
+                fontFamily: 'Inter-SemiBold',
+                fontSize: 16,
+                color: 'white',
+              }}
+            >
+              {' '}
+              {checkoutDetails.currencySymbol}
+            </Text>
+            {checkoutDetails.amount}
                 </Text>
               </Pressable>
             )}
@@ -1118,6 +1160,28 @@ const CardScreen = ({ route, navigation }: Props) => {
         </View>
       )}
     </View>
+    {Platform.OS === 'ios' && (
+  <>
+    {[
+      cardNumberAccessoryID,
+      cardExpiryAccessoryID,
+      cardCvvAccessoryID,
+      cardHolderNameAccessoryID,
+      cardNickNameAccessoryID,
+    ].map((id) => (
+      <InputAccessoryView key={id} nativeID={id}>
+        <View style={{ backgroundColor: '#f1f1f1', padding: 10, alignItems: 'flex-end' }}>
+          <TouchableOpacity onPress={() => Keyboard.dismiss()}>
+            <Text style={{ fontSize: 16, fontFamily: checkoutDetails.fontFamily.semiBold }}>
+              Done
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </InputAccessoryView>
+    ))}
+  </>
+)}
+    </>
   );
 };
 

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';
@@ -38,6 +39,7 @@ import { handleFetchStatusResponseHandler, handlePaymentResponse } from '../shar
 import type { CheckoutStackParamList } from '../navigation';
 import type { NavigationProp, RouteProp } from '@react-navigation/native';
 import { setUserDataHandlerToDefault } from '../sharedContext/userdataHandler';
+import { getTextInputTheme } from '../sharedContext/getTextInputTheme';
 
 type EmiScreenRouteProp = RouteProp<CheckoutStackParamList, 'EmiScreen'>;
 
@@ -82,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('');
@@ -391,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;
@@ -633,12 +635,7 @@ const EmiScreen = ({ navigation, route }: Props) => {
                       onChangeText={(it) => {
                         setSearchText(it);
                       }}
-                      theme={{
-                        colors: {
-                          primary: '#2D2B32',
-                          outline: '#E6E6E6',
-                        },
-                      }}
+                      theme={getTextInputTheme()}
                       style={[styles.textInputStyle, {fontFamily: checkoutDetails.fontFamily.regular,}]}
                       left={
                         <TextInput.Icon

package/src/screens/instantOfferList.tsx

@@ -14,6 +14,7 @@ import type { RouteProp, NavigationProp } from '@react-navigation/native';
 import Header from '../components/header';
 import styles from '../styles/screens/instantOfferScreenStyles';
 import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
+import { getTextInputTheme } from '../sharedContext/getTextInputTheme';
 
 export interface InstantOfferProps {
   couponList: GetInstantOffersResponse[];
@@ -98,12 +99,7 @@ const InstantOfferScreen = ({ route, navigation } : Props) => {
                 onChangeText={(it) => {
                   handleSearchTextChange(it);
                 }}
-                theme={{
-                  colors: {
-                    primary: '#2D2B32',
-                    outline: '#E6E6E6',
-                  },
-                }}
+                theme={getTextInputTheme()}
                 style={[styles.searchTextInput, {fontFamily: checkoutDetails.fontFamily.regular,}]}
                 left={
                   <TextInput.Icon