boxpay-checkout-reactnative-sdk 1.0.0-beta2

package/lib/module/index.js

@@ -0,0 +1,627 @@
+"use strict";
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { View, Text, BackHandler, AppState, Image, ScrollView, StatusBar, Alert } from 'react-native'; // Added ScrollView
+import Header from "./components/header.js";
+import upiPostRequest from "./postRequest/upiPostRequest.js";
+import { decode as atob } from 'base-64';
+import { Linking } from 'react-native';
+import LottieView from 'lottie-react-native';
+import PaymentSuccess from "./components/paymentSuccess.js";
+import SessionExpire from "./components/sessionExpire.js";
+import PaymentFailed from "./components/paymentFailed.js";
+import fetchStatus from "./postRequest/fetchStatus.js";
+import UpiScreen from "./screens/upiScreen.js";
+import { router, useFocusEffect } from 'expo-router';
+import { paymentHandler, setPaymentHandler } from "./sharedContext/paymentStatusHandler.js";
+import { loadCustomFonts, loadInterCustomFonts } from "./components/fontFamily.js";
+import { setUserDataHandler, userDataHandler } from "./sharedContext/userdataHandler.js";
+import { APIStatus } from "./interface.js";
+import { checkoutDetailsHandler, setCheckoutDetailsHandler } from "./sharedContext/checkoutDetailsHandler.js";
+import WebViewScreen from "./screens/webViewScreen.js";
+import styles from "./styles/indexStyles.js";
+import getSymbolFromCurrency from 'currency-symbol-map';
+import OrderDetails from "./components/orderDetails.js";
+import { SafeAreaView } from 'react-native-safe-area-context';
+import PaymentSelectorView from "./components/paymentSelector.js";
+import SavedCardComponentView from "./components/savedCardComponent.js";
+import ShimmerView from "./components/shimmerView.js";
+import AddressComponent from "./components/addressCard.js";
+import { navigateToAddressScreen, navigateToCardScreen, navigateToUpiTimerModal } from "./navigation.js";
+import fetchSessionDetails from "./postRequest/fetchSessionDetails.js";
+import MorePaymentMethods from "./components/morePaymentMethods.js";
+import { fetchSavedInstrumentsHandler, handleFetchStatusResponseHandler, handlePaymentResponse } from "./sharedContext/handlePaymentResponseHandler.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const BoxpayCheckout = ({
+  token,
+  configurationOptions = {},
+  onPaymentResult,
+  shopperToken = null
+}) => {
+  const [status, setStatus] = useState('NOACTION');
+  const [transactionId, setTransactionId] = useState('');
+  const env = configurationOptions?.ENABLE_SANDBOX_ENV ? 'test' : 'prod';
+  const appStateListenerRef = useRef(null);
+  const [loadingState, setLoadingState] = useState(false);
+  const [isFirstLoading, setIsFirstLoading] = useState(true);
+  const [amount, setAmount] = useState('');
+  const totalItemsRef = useRef(0);
+  const [address, setAddress] = useState('');
+  const [failedModalOpen, setFailedModalState] = useState(false);
+  const [successModalOpen, setSuccessModalState] = useState(false);
+  const lastOpenendUrl = useRef('');
+  const paymentFailedMessage = useRef('You may have cancelled the payment or there was a delay in response. Please retry.');
+  const [sessionExpireModalOpen, setSessionExppireModalState] = useState(false);
+  const [successfulTimeStamp, setSuccessfulTimeStamp] = useState('');
+  const timerRef = useRef(null);
+  const [showWebView, setShowWebView] = useState(false);
+  const [paymentUrl, setPaymentUrl] = useState(null);
+  const [paymentHtml, setPaymentHtml] = useState(null);
+  const isUpiOpeningRef = useRef(false);
+  const shippingAmountRef = useRef('');
+  const taxAmountRef = useRef('');
+  const subTotalAmountRef = useRef('');
+  const orderItemsArrayRef = useRef([]);
+  const [recommendedInstrumentsArray, setRecommendedInstruments] = useState([]);
+  const [savedCardArray, setSavedCardArray] = useState([]);
+  const [savedUpiArray, setSavedUpiArray] = useState([]);
+  let isFirstTimeLoadRef = true;
+  const handlePaymentIntent = async selectedIntent => {
+    setLoadingState(true);
+    const response = await upiPostRequest({
+      type: 'upi/intent',
+      ...(selectedIntent && {
+        upiAppDetails: {
+          upiApp: selectedIntent
+        }
+      }) // Conditionally add upiAppDetails only if upiIntent is present
+    });
+    handlePaymentResponse({
+      response: response,
+      checkoutDetailsErrorMessage: checkoutDetailsHandler.checkoutDetails.errorMessage,
+      onSetStatus: setStatus,
+      onSetTransactionId: setTransactionId,
+      onSetPaymentHtml: setPaymentHtml,
+      onSetPaymentUrl: setPaymentUrl,
+      onSetFailedMessage: msg => paymentFailedMessage.current = msg,
+      onShowFailedModal: () => setFailedModalState(true),
+      onShowSuccessModal: ts => {
+        setSuccessfulTimeStamp(ts);
+        setSuccessModalState(true);
+      },
+      onShowSessionExpiredModal: () => setSessionExppireModalState(true),
+      onNavigateToTimer: navigateToUpiTimerModal,
+      onOpenUpiIntent: url => {
+        urlToBase64(url);
+      },
+      setLoading: setLoadingState
+    });
+  };
+  const handleUpiCollectPayment = async (upiId, instrumentRef, type) => {
+    const requestPayload = type === 'Card' ? {
+      type: 'card/token',
+      savedCard: {
+        instrumentRef: instrumentRef
+      }
+    } : {
+      type: 'upi/collect',
+      upi: instrumentRef ? {
+        instrumentRef: instrumentRef
+      } : {
+        shopperVpa: upiId
+      }
+    };
+    setLoadingState(true);
+    const response = await upiPostRequest(requestPayload);
+    handlePaymentResponse({
+      response: response,
+      upiId: upiId,
+      checkoutDetailsErrorMessage: checkoutDetailsHandler.checkoutDetails.errorMessage,
+      onSetStatus: setStatus,
+      onSetTransactionId: setTransactionId,
+      onSetPaymentHtml: setPaymentHtml,
+      onSetPaymentUrl: setPaymentUrl,
+      onSetFailedMessage: msg => paymentFailedMessage.current = msg,
+      onShowFailedModal: () => setFailedModalState(true),
+      onShowSuccessModal: ts => {
+        setSuccessfulTimeStamp(ts);
+        setSuccessModalState(true);
+      },
+      onShowSessionExpiredModal: () => setSessionExppireModalState(true),
+      onNavigateToTimer: navigateToUpiTimerModal,
+      onOpenUpiIntent: url => {
+        urlToBase64(url);
+      },
+      setLoading: setLoadingState
+    });
+  };
+  useFocusEffect(useCallback(() => {
+    if (isFirstTimeLoadRef) {
+      isFirstTimeLoadRef = false;
+      return;
+    }
+    const refreshData = () => {
+      const address1Ref = userDataHandler.userData.address1;
+      const address2Ref = userDataHandler.userData.address2;
+      const cityRef = userDataHandler.userData.city;
+      const stateRef = userDataHandler.userData.state;
+      const postalCodeRef = userDataHandler.userData.pincode;
+      if (address2Ref == null || address2Ref == '') {
+        setAddress(`${address1Ref}, ${cityRef}, ${stateRef}, ${postalCodeRef}`);
+      } else {
+        setAddress(`${address1Ref}, ${address2Ref}, ${cityRef}, ${stateRef}, ${postalCodeRef}`);
+      }
+    };
+    refreshData();
+  }, []));
+  const urlToBase64 = base64String => {
+    try {
+      const decodedString = atob(base64String);
+      lastOpenendUrl.current = decodedString;
+      openUPIIntent(decodedString);
+    } catch (error) {
+      setFailedModalState(true);
+      setLoadingState(false);
+    }
+  };
+  const getRecommendedInstruments = async () => {
+    fetchSavedInstrumentsHandler({
+      setRecommendedList: setRecommendedInstruments,
+      setUpiInstrumentList: setSavedUpiArray,
+      setCardInstrumentList: setSavedCardArray
+    });
+    setIsFirstLoading(false);
+  };
+  useEffect(() => {
+    if (paymentUrl || paymentHtml) {
+      setShowWebView(true);
+    }
+  }, [paymentUrl, paymentHtml]);
+  const openUPIIntent = async url => {
+    try {
+      await Linking.openURL(url); // Open the UPI app
+      appStateListenerRef.current = AppState.addEventListener('change', handleAppStateChange);
+      isUpiOpeningRef.current = true;
+    } catch (error) {
+      isUpiOpeningRef.current = false;
+      setFailedModalState(true);
+      setLoadingState(false);
+    }
+  };
+  const handleAppStateChange = () => {
+    if (AppState.currentState === 'active' && isUpiOpeningRef.current) {
+      callFetchStatusApi();
+    }
+  };
+  const stopExpireTimerCountDown = () => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+    }
+  };
+  const callFetchStatusApi = async () => {
+    const response = await fetchStatus();
+    handleFetchStatusResponseHandler({
+      response: response,
+      checkoutDetailsErrorMessage: checkoutDetailsHandler.checkoutDetails.errorMessage,
+      onSetStatus: setStatus,
+      onSetTransactionId: setTransactionId,
+      onSetFailedMessage: msg => paymentFailedMessage.current = msg,
+      onShowFailedModal: () => setFailedModalState(true),
+      onShowSuccessModal: ts => {
+        setSuccessfulTimeStamp(ts);
+        setSuccessModalState(true);
+      },
+      onShowSessionExpiredModal: () => setSessionExppireModalState(true),
+      setLoading: setLoadingState
+    });
+    appStateListenerRef.current?.remove();
+    isUpiOpeningRef.current = false;
+  };
+  const onExitCheckout = () => {
+    if (!loadingState) {
+      stopExpireTimerCountDown();
+      const mockPaymentResult = {
+        status: status,
+        transactionId: transactionId
+      };
+      paymentHandler.onPaymentResult(mockPaymentResult);
+      router.dismissAll();
+      return true;
+    }
+    return false;
+  };
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
+      if (showWebView) {
+        setShowWebView(false);
+        paymentFailedMessage.current = checkoutDetailsHandler.checkoutDetails.errorMessage;
+        setStatus('Failed');
+        setFailedModalState(true);
+        setLoadingState(false);
+        return true;
+      } else if (loadingState) {
+        return true;
+      }
+      return onExitCheckout(); // Allow back navigation if not loading
+    });
+    return () => backHandler.remove();
+  });
+  useEffect(() => {
+    async function loadFonts() {
+      await loadCustomFonts();
+      await loadInterCustomFonts();
+    }
+    loadFonts();
+    async function loadSession() {
+      if (token != "") {
+        checkoutDetailsHandler.checkoutDetails.env = env;
+        checkoutDetailsHandler.checkoutDetails.token = token;
+        const response = await fetchSessionDetails();
+        switch (response.apiStatus) {
+          case APIStatus.Success:
+            {
+              const paymentMethods = response.data.configs.paymentMethods;
+              const enabledFields = response.data.configs.enabledFields;
+              const paymentDetails = response.data.paymentDetails;
+              const methodFlags = {
+                isUPIIntentVisible: false,
+                isUPICollectVisible: false,
+                isCardsVisible: false,
+                isWalletVisible: false,
+                isNetbankingVisible: false,
+                isEMIVisible: false,
+                isBNPLVisible: false
+              };
+              paymentMethods.forEach(method => {
+                if (method.type === 'Upi') {
+                  if (method.brand === 'UpiIntent') {
+                    methodFlags.isUPIIntentVisible = true;
+                  } else if (method.brand === 'UpiCollect') {
+                    methodFlags.isUPICollectVisible = true;
+                  }
+                } else if (method.type === 'Card') {
+                  methodFlags.isCardsVisible = true;
+                } else if (method.type === 'Wallet') {
+                  methodFlags.isWalletVisible = true;
+                } else if (method.type === 'NetBanking') {
+                  methodFlags.isNetbankingVisible = true;
+                } else if (method.type === 'Emi') {
+                  methodFlags.isEMIVisible = true;
+                } else if (method.type === 'BuyNowPayLater') {
+                  methodFlags.isBNPLVisible = true;
+                }
+              });
+              setAmount(paymentDetails.money.amountLocaleFull);
+              const currencyCode = paymentDetails?.money?.currencyCode;
+              const symbol = currencyCode ? getSymbolFromCurrency(currencyCode) ?? '₹' : '₹';
+              if (paymentDetails.order != null && paymentDetails.order.items != null) {
+                const total = paymentDetails.order.items.reduce((sum, item) => sum + (item.quantity || 1), 0);
+                totalItemsRef.current = total;
+                shippingAmountRef.current = paymentDetails.order.shippingAmountLocaleFull != null ? paymentDetails.order.shippingAmountLocaleFull : '';
+                taxAmountRef.current = paymentDetails.order.taxAmountLocaleFull != null ? paymentDetails.order.taxAmountLocaleFull : '';
+                subTotalAmountRef.current = paymentDetails.order.originalAmountLocaleFull != null ? paymentDetails.order.originalAmountLocaleFull : '';
+                const formattedItemsArray = paymentDetails.order.items.map(item => ({
+                  imageUrl: item.imageUrl,
+                  imageTitle: item.itemName,
+                  imageOty: item.quantity,
+                  imageAmount: item.amountWithoutTaxLocaleFull
+                }));
+                orderItemsArrayRef.current = formattedItemsArray;
+              }
+              const emailRef = paymentDetails.shopper.email;
+              const firstNameRef = paymentDetails.shopper.firstName;
+              const lastNameRef = paymentDetails.shopper.lastName;
+              const phoneRef = paymentDetails.shopper.phoneNumber;
+              const uniqueIdRef = paymentDetails.shopper.uniqueReference;
+              const dobRef = paymentDetails.shopper.dateOfBirth;
+              const panRef = paymentDetails.shopper.panNumber;
+              startCountdown(response.data.sessionExpiryTimestamp);
+              let labelTypeRef = null;
+              let address1Ref = null;
+              let labelNameRef = null;
+              let address2Ref = null;
+              let cityRef = null;
+              let stateRef = null;
+              let postalCodeRef = null;
+              let countryCodeRef = null;
+              if (paymentDetails.shopper.deliveryAddress != null) {
+                const deliveryObject = paymentDetails.shopper.deliveryAddress;
+                labelTypeRef = deliveryObject.labelType;
+                labelNameRef = deliveryObject.labelName;
+                address1Ref = deliveryObject.address1;
+                address2Ref = deliveryObject.address2;
+                cityRef = deliveryObject.city;
+                stateRef = deliveryObject.state;
+                postalCodeRef = deliveryObject.postalCode;
+                countryCodeRef = deliveryObject.countryCode;
+                if (address2Ref == null || address2Ref == '') {
+                  setAddress(`${address1Ref}, ${cityRef}, ${stateRef}, ${postalCodeRef}`);
+                } else {
+                  setAddress(`${address1Ref}, ${address2Ref}, ${cityRef}, ${stateRef}, ${postalCodeRef}`);
+                }
+              }
+              if (['APPROVED', 'SUCCESS', 'PAID'].includes(response.data.status)) {
+                setSuccessfulTimeStamp(response.data.lastPaidAtTimestamp);
+                setTransactionId(response.data.lastTransactionId);
+                setStatus(response.data.status);
+                setSuccessModalState(true);
+              } else if (['EXPIRED'].includes(response.data.status)) {
+                setSessionExppireModalState(true);
+              }
+              setUserDataHandler({
+                userData: {
+                  email: emailRef,
+                  firstName: firstNameRef,
+                  lastName: lastNameRef,
+                  phone: phoneRef,
+                  uniqueId: uniqueIdRef,
+                  dob: dobRef,
+                  pan: panRef,
+                  address1: address1Ref,
+                  address2: address2Ref,
+                  city: cityRef,
+                  state: stateRef,
+                  pincode: postalCodeRef,
+                  country: countryCodeRef,
+                  labelType: labelTypeRef,
+                  labelName: labelNameRef
+                }
+              });
+              const isFieldEnabled = fieldName => {
+                return enabledFields.some(field => field.field === fieldName);
+              };
+              const isFieldEditable = fieldName => {
+                const field = enabledFields.find(field => field.field === fieldName);
+                return field?.editable === true;
+              };
+              setCheckoutDetailsHandler({
+                checkoutDetails: {
+                  currencySymbol: symbol,
+                  amount: paymentDetails.money.amountLocaleFull,
+                  token: token,
+                  brandColor: response.data.merchantDetails.checkoutTheme.primaryButtonColor,
+                  env: env,
+                  itemsLength: totalItemsRef.current,
+                  errorMessage: 'You may have cancelled the payment or there was a delay in response. Please retry.',
+                  shopperToken: shopperToken,
+                  isSuccessScreenVisible: configurationOptions?.SHOW_BOXPAY_SUCCESS_SCREEN ? true : false,
+                  isShippingAddressEnabled: isFieldEnabled('SHIPPING_ADDRESS'),
+                  isShippingAddressEditable: isFieldEditable('SHIPPING_ADDRESS'),
+                  isFullNameEnabled: isFieldEnabled('SHOPPER_NAME'),
+                  isFullNameEditable: isFieldEditable('SHOPPER_NAME'),
+                  isEmailEnabled: isFieldEnabled('SHOPPER_EMAIL'),
+                  isEmailEditable: isFieldEditable('SHOPPER_EMAIL'),
+                  isPhoneEnabled: isFieldEnabled('SHOPPER_PHONE'),
+                  isPhoneEditable: isFieldEditable('SHOPPER_PHONE'),
+                  isPanEnabled: isFieldEnabled('SHOPPER_PAN'),
+                  isPanEditable: isFieldEditable('SHOPPER_PAN'),
+                  isDOBEnabled: isFieldEnabled('SHOPPER_DOB'),
+                  isDOBEditable: isFieldEditable('SHOPPER_DOB'),
+                  isUpiIntentMethodEnabled: methodFlags.isUPIIntentVisible,
+                  isUpiCollectMethodEnabled: methodFlags.isUPICollectVisible,
+                  isCardMethodEnabled: methodFlags.isCardsVisible,
+                  isWalletMethodEnabled: methodFlags.isWalletVisible,
+                  isNetBankingMethodEnabled: methodFlags.isNetbankingVisible,
+                  isEmiMethodEnabled: methodFlags.isEMIVisible,
+                  isBnplMethodEnabled: methodFlags.isBNPLVisible
+                }
+              });
+              setPaymentHandler({
+                onPaymentResult: onPaymentResult
+              });
+              break;
+            }
+          case APIStatus.Failed:
+            {
+              Alert.alert('Error', response.data.status.reason);
+              break;
+            }
+          default:
+            {
+              break;
+            }
+        }
+      } else {
+        Alert.alert('Error', `Token is empty`);
+      }
+    }
+    loadSession();
+    if (shopperToken != null && shopperToken != "") {
+      checkoutDetailsHandler.checkoutDetails.shopperToken = shopperToken;
+      getRecommendedInstruments();
+    }
+  }, [token]);
+  const handleRecommendedSectionClick = instrumentValue => {
+    const updatedList = recommendedInstrumentsArray.map(item => ({
+      ...item,
+      isSelected: item.id === instrumentValue
+    }));
+    setRecommendedInstruments(updatedList);
+    setDefaultSavedUpiList();
+    setDefaultSavedCardsList();
+  };
+  const handleSavedUpiSectionClick = instrumentValue => {
+    const updatedList = savedUpiArray.map(item => ({
+      ...item,
+      isSelected: item.id === instrumentValue
+    }));
+    setSavedUpiArray(updatedList);
+    setDefaultRecommendedList();
+    setDefaultSavedCardsList();
+  };
+  const handleSavedCardSectionClick = instrumentValue => {
+    const updatedList = savedCardArray.map(item => ({
+      ...item,
+      isSelected: item.id === instrumentValue
+    }));
+    setSavedCardArray(updatedList);
+    setDefaultRecommendedList();
+    setDefaultSavedUpiList();
+  };
+  const setDefaultRecommendedList = () => {
+    const updatedList = recommendedInstrumentsArray.map(item => ({
+      ...item,
+      isSelected: false
+    }));
+    setRecommendedInstruments(updatedList);
+  };
+  const setDefaultSavedCardsList = () => {
+    const updatedList = savedCardArray.map(item => ({
+      ...item,
+      isSelected: false
+    }));
+    setSavedCardArray(updatedList);
+  };
+  const setDefaultSavedUpiList = () => {
+    const updatedList = savedUpiArray.map(item => ({
+      ...item,
+      isSelected: false
+    }));
+    setSavedUpiArray(updatedList);
+  };
+  function startCountdown(sessionExpiryTimestamp) {
+    if (sessionExpiryTimestamp === '') {
+      return;
+    }
+    const expiryTime = new Date(sessionExpiryTimestamp);
+    const expiryTimeIST = new Date(expiryTime.getTime() + 5.5 * 60 * 60 * 1000);
+    timerRef.current = setInterval(() => {
+      const currentTimeIST = new Date(new Date().getTime() + 5.5 * 60 * 60 * 1000);
+      const timeDiff = expiryTimeIST.getTime() - currentTimeIST.getTime();
+      if (timeDiff <= 0) {
+        if (timerRef.current) {
+          clearInterval(timerRef.current);
+        }
+        setStatus('EXPIRED');
+        setSessionExppireModalState(true);
+      }
+      // const hours = Math.floor((timeDiff / (1000 * 60 * 60)) % 24);
+      // const minutes = Math.floor((timeDiff / (1000 * 60)) % 60);
+      // const seconds = Math.floor((timeDiff / 1000) % 60);
+
+      // console.log(`${hours}hr ${minutes}min ${seconds}sec`)
+    }, 1000);
+  }
+  return /*#__PURE__*/_jsxs(SafeAreaView, {
+    style: styles.screenView,
+    children: [/*#__PURE__*/_jsx(StatusBar, {
+      barStyle: "dark-content"
+    }), isFirstLoading ? /*#__PURE__*/_jsx(ShimmerView, {}) : loadingState ? /*#__PURE__*/_jsxs(View, {
+      style: styles.loadingContainer,
+      children: [/*#__PURE__*/_jsx(LottieView, {
+        source: require('../assets/animations/boxpayLogo.json'),
+        autoPlay: true,
+        loop: true,
+        style: styles.lottieStyle
+      }), /*#__PURE__*/_jsx(Text, {
+        children: "Loading..."
+      })]
+    }) : /*#__PURE__*/_jsx(View, {
+      style: styles.screenView,
+      children: /*#__PURE__*/_jsx(ScrollView, {
+        contentContainerStyle: {
+          flexGrow: 1
+        },
+        keyboardShouldPersistTaps: "handled",
+        children: /*#__PURE__*/_jsxs(View, {
+          style: {
+            flex: 1
+          },
+          children: [/*#__PURE__*/_jsx(Header, {
+            onBackPress: onExitCheckout,
+            showDesc: true,
+            showSecure: true,
+            text: "Payment Details"
+          }), /*#__PURE__*/_jsx(AddressComponent, {
+            address: address,
+            navigateToAddressScreen: () => navigateToAddressScreen()
+          }), recommendedInstrumentsArray.length > 0 && /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(View, {
+              style: styles.container,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.headingText,
+                children: "Recommended"
+              })
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.paymentContainer,
+              children: /*#__PURE__*/_jsx(PaymentSelectorView, {
+                providerList: recommendedInstrumentsArray,
+                onProceedForward: (displayValue, instrumentValue, type) => handleUpiCollectPayment(displayValue, instrumentValue, type),
+                errorImage: require('../assets/images/ic_upi.png'),
+                isLastUsed: true,
+                onClickRadio: selectedInstrumentRef => {
+                  handleRecommendedSectionClick(selectedInstrumentRef);
+                }
+              })
+            })]
+          }), /*#__PURE__*/_jsx(UpiScreen, {
+            handleUpiPayment: selectedIntent => handlePaymentIntent(selectedIntent),
+            handleCollectPayment: (displayValue, instrumentValue, type) => handleUpiCollectPayment(displayValue, instrumentValue, type),
+            savedUpiArray: savedUpiArray,
+            onClickRadio: handleSavedUpiSectionClick
+          }), savedCardArray.length != 0 && /*#__PURE__*/_jsxs(View, {
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.headingText,
+              children: "Credit & Debit Cards"
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.paymentContainer,
+              children: /*#__PURE__*/_jsx(SavedCardComponentView, {
+                savedCards: savedCardArray,
+                onProceedForward: instrumentValue => {
+                  handleUpiCollectPayment('', instrumentValue, 'Card');
+                },
+                errorImage: require('../assets/images/ic_card.png'),
+                onClickAddCard: navigateToCardScreen,
+                onClickRadio: selectedInstrumentRef => handleSavedCardSectionClick(selectedInstrumentRef)
+              })
+            })]
+          }), /*#__PURE__*/_jsx(MorePaymentMethods, {
+            savedCards: savedCardArray
+          }), /*#__PURE__*/_jsxs(View, {
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.headingText,
+              children: "Order Summary"
+            }), /*#__PURE__*/_jsx(OrderDetails, {
+              subTotalAmount: subTotalAmountRef.current,
+              shippingAmount: shippingAmountRef.current,
+              totalAmount: amount,
+              itemsArray: orderItemsArrayRef.current,
+              taxAmount: taxAmountRef.current
+            })]
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.footerContainer,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.footerText,
+              children: "Secured by"
+            }), /*#__PURE__*/_jsx(Image, {
+              source: require('../assets/images/splash-icon.png'),
+              style: styles.footerImage
+            })]
+          })]
+        })
+      })
+    }), failedModalOpen && /*#__PURE__*/_jsx(PaymentFailed, {
+      onClick: () => setFailedModalState(false),
+      errorMessage: paymentFailedMessage.current
+    }), successModalOpen && /*#__PURE__*/_jsx(PaymentSuccess, {
+      onClick: onExitCheckout,
+      transactionId: transactionId,
+      method: "UPI",
+      localDateTime: successfulTimeStamp
+    }), sessionExpireModalOpen && /*#__PURE__*/_jsx(SessionExpire, {
+      onClick: onExitCheckout
+    }), showWebView && /*#__PURE__*/_jsx(View, {
+      style: styles.webViewScreenStyle,
+      children: /*#__PURE__*/_jsx(WebViewScreen, {
+        url: paymentUrl,
+        html: paymentHtml,
+        onBackPress: () => {
+          callFetchStatusApi();
+          setShowWebView(false);
+        }
+      })
+    })]
+  });
+};
+export default BoxpayCheckout;
+//# sourceMappingURL=index.js.map