boxpay-checkout-reactnative-sdk 1.0.0-beta2 → 1.0.0-beta23

package/lib/module/screens/mainScreen.js

@@ -0,0 +1,653 @@
+"use strict";
+
+import { 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 { paymentHandler, setPaymentHandler } from "../sharedContext/paymentStatusHandler.js";
+import { loadCustomFonts, loadInterCustomFonts } from "../components/fontFamily.js";
+import { setUserDataHandler, userDataHandler } from "../sharedContext/userdataHandler.js";
+import { APIStatus, AnalyticsEvents } 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 fetchSessionDetails from "../postRequest/fetchSessionDetails.js";
+import MorePaymentMethods from "../components/morePaymentMethods.js";
+import { fetchSavedInstrumentsHandler, handleFetchStatusResponseHandler, handlePaymentResponse } from "../sharedContext/handlePaymentResponseHandler.js";
+import callUIAnalytics from "../postRequest/callUIAnalytics.js";
+import { formatAddress } from "../utils/stringUtils.js";
+
+// Define the screen's navigation properties
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const MainScreen = ({
+  route,
+  navigation
+}) => {
+  const {
+    token,
+    configurationOptions = null,
+    onPaymentResult,
+    shopperToken = null
+  } = route.params || {};
+  const [status, setStatus] = useState('NOACTION');
+  const [transactionId, setTransactionId] = useState('');
+  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: id => navigation.navigate("UpiTimerScreen", {
+        upiId: id
+      }),
+      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: id => navigation.navigate("UpiTimerScreen", {
+        upiId: id
+      }),
+      onOpenUpiIntent: url => {
+        urlToBase64(url);
+      },
+      setLoading: setLoadingState
+    });
+  };
+  useEffect(() => {
+    if (isFirstTimeLoadRef) {
+      isFirstTimeLoadRef = false;
+      return;
+    }
+    const refreshData = () => {
+      const deliveryAddress = {
+        address1: userDataHandler.userData.address1,
+        address2: userDataHandler.userData.address2,
+        city: userDataHandler.userData.city,
+        state: userDataHandler.userData.state,
+        postalCode: userDataHandler.userData.pincode,
+        countryCode: userDataHandler.userData.country,
+        labelName: userDataHandler.userData.labelName,
+        labelType: userDataHandler.userData.labelType
+      };
+      setAddress(formatAddress(deliveryAddress));
+    };
+    refreshData();
+  }, []);
+  const urlToBase64 = base64String => {
+    try {
+      const decodedString = atob(base64String);
+      lastOpenendUrl.current = decodedString;
+      openUPIIntent(decodedString);
+    } catch (error) {
+      setFailedModalState(true);
+      callUIAnalytics(AnalyticsEvents.FAILED_TO_LAUNCH_UPI_INTENT, "Index Screen UrlToBase64 failed", `${error}`);
+      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;
+      callUIAnalytics(AnalyticsEvents.FAILED_TO_LAUNCH_UPI_INTENT, "Index Screen open UPI Intent failed", `${error}`);
+      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);
+      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();
+    });
+    return () => {
+      if (backHandler) {
+        backHandler.remove();
+      }
+    };
+  });
+  useEffect(() => {
+    async function loadFonts() {
+      await loadCustomFonts();
+      await loadInterCustomFonts();
+    }
+    loadFonts();
+    async function loadSession() {
+      if (token != "") {
+        checkoutDetailsHandler.checkoutDetails.token = token;
+        checkoutDetailsHandler.checkoutDetails.env = configurationOptions?.ENABLE_SANDBOX_ENV ? 'test' : 'prod';
+        const response = await fetchSessionDetails();
+        try {
+          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: checkoutDetailsHandler.checkoutDetails.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
+                });
+                if (shopperToken != null && shopperToken != "") {
+                  checkoutDetailsHandler.checkoutDetails.shopperToken = shopperToken;
+                  getRecommendedInstruments();
+                }
+                callUIAnalytics(AnalyticsEvents.CHECKOUT_LOADED, "Index Screen Session Loaded", "");
+                break;
+              }
+            case APIStatus.Failed:
+              {
+                Alert.alert('Error', response.data.status.reason);
+                break;
+              }
+            default:
+              {
+                break;
+              }
+          }
+        } catch (error) {
+          Alert.alert('Error', `${error}`);
+        }
+      } else {
+        Alert.alert('Error', `Token is empty`);
+      }
+    }
+    loadSession();
+  }, []);
+  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: () => {
+              if (checkoutDetailsHandler.checkoutDetails.shopperToken != null && checkoutDetailsHandler.checkoutDetails.shopperToken != "") {
+                navigation.navigate("SavedAddressScreen", {});
+              } else {
+                navigation.navigate("AddressScreen", {});
+              }
+            }
+          }), 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: () => navigation.navigate("CardScreen", {}),
+                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 MainScreen;
+//# sourceMappingURL=mainScreen.js.map