boxpay-checkout-reactnative-sdk
Version:
Boxpay Payment Gateway
677 lines (674 loc) • 28.9 kB
JavaScript
"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 { useIsFocused } from "@react-navigation/native";
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, useCountdown } from "../utility.js";
// Define the screen's navigation properties
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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 isScreenFocused = useIsFocused();
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([]);
const {
timeRemaining: qrTimerValue,
start: startQRTimer,
stop: stopQRTimer
} = useCountdown(300);
let isFirstTimeLoadRef = useRef(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.current) {
isFirstTimeLoadRef.current = 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();
}, [isScreenFocused]);
useEffect(() => {
const isQRTimerRunning = qrTimerValue < 300;
if (isQRTimerRunning && qrTimerValue > 0 && qrTimerValue % 4 === 0) {
callFetchStatusApi();
}
}, [qrTimerValue]);
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(() => {
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();
});
});
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,
isUPIQRVisible: 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.brand === 'UpiQr') {
methodFlags.isUPIQRVisible = 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,
isUpiQRMethodEnabled: methodFlags.isUPIQRVisible,
isCardMethodEnabled: methodFlags.isCardsVisible,
isWalletMethodEnabled: methodFlags.isWalletVisible,
isNetBankingMethodEnabled: methodFlags.isNetbankingVisible,
isEmiMethodEnabled: methodFlags.isEMIVisible,
isBnplMethodEnabled: methodFlags.isBNPLVisible
}
});
setPaymentHandler({
onPaymentResult: onPaymentResult
});
if (shopperToken != null && 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, {}) : /*#__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,
qrIsExpired: qrTimerValue === 0,
timeRemaining: qrTimerValue,
stopTimer: stopQRTimer,
setLoading: setLoadingState,
setStatus: setStatus,
setTransaction: setTransactionId,
onStartQRTimer: startQRTimer,
setFailedModal: setFailedModalState,
setFailedModalMessage: msg => paymentFailedMessage.current = msg
}), 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 => {
stopQRTimer();
handleSavedCardSectionClick(selectedInstrumentRef);
}
})
})]
}), /*#__PURE__*/_jsx(MorePaymentMethods, {
savedCards: savedCardArray,
stopTimer: stopQRTimer
}), /*#__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
})]
})]
})
})
}), 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..."
})]
}), 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