boxpay-checkout-reactnative-sdk 1.0.0-beta03 → 1.0.0-beta05

package/src/index.tsx

@@ -1,36 +1,9 @@
-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';
-import upiPostRequest from './postRequest/upiPostRequest';
-import { decode as atob } from 'base-64';
-import { Linking } from 'react-native';
-import LottieView from 'lottie-react-native';
-import PaymentSuccess from './components/paymentSuccess';
-import SessionExpire from './components/sessionExpire';
-import PaymentFailed from './components/paymentFailed';
-import fetchStatus from './postRequest/fetchStatus';
-import UpiScreen from './screens/upiScreen';
-import { useNavigation, type NavigationProp } from "@react-navigation/native";
-import type { CheckoutStackParamList } from './navigation';
-import { paymentHandler, setPaymentHandler } from "./sharedContext/paymentStatusHandler";
-import { loadCustomFonts, loadInterCustomFonts } from './components/fontFamily';
-import { setUserDataHandler, userDataHandler } from './sharedContext/userdataHandler';
-import { type PaymentResultObject, type PaymentClass, type InstrumentDetails, type PaymentMethod, type OrderItem, type BoxpayCheckoutProps, APIStatus, AnalyticsEvents } from './interface';
-import { checkoutDetailsHandler, setCheckoutDetailsHandler } from './sharedContext/checkoutDetailsHandler';
-import WebViewScreen from './screens/webViewScreen';
+import { useEffect } from 'react';
+import { setPaymentHandler } from "./sharedContext/paymentStatusHandler";
+import type { BoxpayCheckoutProps} from './interface';
+import { checkoutDetailsHandler } from './sharedContext/checkoutDetailsHandler';
 import styles from './styles/indexStyles';
-import getSymbolFromCurrency from 'currency-symbol-map';
-import type { ItemsProp } from './components/orderDetails';
-import OrderDetails from './components/orderDetails';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import PaymentSelectorView from './components/paymentSelector';
-import SavedCardComponentView from './components/savedCardComponent';
-import ShimmerView from './components/shimmerView';
-import AddressComponent from './components/addressCard';
-import fetchSessionDetails from './postRequest/fetchSessionDetails';
-import MorePaymentMethods from './components/morePaymentMethods';
-import { fetchSavedInstrumentsHandler, handleFetchStatusResponseHandler, handlePaymentResponse } from './sharedContext/handlePaymentResponseHandler';
-import callUIAnalytics from './postRequest/callUIAnalytics';
 import CheckoutContainer from './navigation';
 
 const BoxpayCheckout = ({
@@ -39,720 +12,18 @@ const BoxpayCheckout = ({
   onPaymentResult,
   shopperToken = null,
 }: BoxpayCheckoutProps) => {
-  const [status, setStatus] = useState('NOACTION');
-  const [transactionId, setTransactionId] = useState('');
-  const env = configurationOptions?.ENABLE_SANDBOX_ENV ? 'test' : 'prod';
-  const appStateListenerRef = useRef<any>(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<string>('');
-  const paymentFailedMessage = useRef<string>(
-    '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 navigation = useNavigation<NavigationProp<CheckoutStackParamList>>(); // Use correct type
-  const timerRef = useRef<NodeJS.Timeout | null>(null);
-  const [showWebView, setShowWebView] = useState(false);
-  const [paymentUrl, setPaymentUrl] = useState<string | null>(null);
-  const [paymentHtml, setPaymentHtml] = useState<string | null>(null);
-  const isUpiOpeningRef = useRef(false);
-  const shippingAmountRef = useRef('');
-  const taxAmountRef = useRef('');
-  const subTotalAmountRef = useRef('');
-  const orderItemsArrayRef = useRef<ItemsProp[]>([]);
-  const [recommendedInstrumentsArray, setRecommendedInstruments] = useState<PaymentClass[]>([]);
-  const [savedCardArray, setSavedCardArray] = useState<PaymentClass[]>([]);
-  const [savedUpiArray, setSavedUpiArray] = useState<PaymentClass[]>([]);
-
-  let isFirstTimeLoadRef = true;
-
-  const handlePaymentIntent = async (selectedIntent: string) => {
-    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:string)=> navigation.navigate("UpiTimerScreen", {upiId : id}),
-      onOpenUpiIntent : (url) => {
-        urlToBase64(url);
-      },
-      setLoading: setLoadingState
-    });
-  };
-
-  const handleUpiCollectPayment = async (
-    upiId: string,
-    instrumentRef: string,
-    type: string
-  ) => {
-    const requestPayload: InstrumentDetails =
-      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:string)=> navigation.navigate("UpiTimerScreen", {upiId : id}),
-      onOpenUpiIntent : (url) => {
-        urlToBase64(url);
-      },
-      setLoading: setLoadingState
-    });
-  };
 
   useEffect(() => {
-    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: string) => {
-    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
+    checkoutDetailsHandler.checkoutDetails.token = token
+    checkoutDetailsHandler.checkoutDetails.shopperToken = shopperToken
+    checkoutDetailsHandler.checkoutDetails.isSuccessScreenVisible = configurationOptions?.SHOW_BOXPAY_SUCCESS_SCREEN ? true : false
+    setPaymentHandler({
+      onPaymentResult: onPaymentResult,
     });
-    setIsFirstLoading(false)
-  };
-
-  useEffect(() => {
-    if (paymentUrl || paymentHtml) {
-      setShowWebView(true);
-    }
-  }, [paymentUrl, paymentHtml]);
-
-  const openUPIIntent = async (url: string) => {
-    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: PaymentResultObject = {
-        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(); // 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()
-        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: PaymentMethod) => {
-                  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: string | undefined =
-                  paymentDetails?.money?.currencyCode;
-                const symbol = currencyCode
-                  ? (getSymbolFromCurrency(currencyCode) ?? '₹')
-                  : '₹';
-                if (
-                  paymentDetails.order != null &&
-                  paymentDetails.order.items != null
-                ) {
-                  const total = paymentDetails.order.items.reduce(
-                    (sum: number, item: OrderItem) => 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: ItemsProp[] =
-                    paymentDetails.order.items.map((item: OrderItem) => ({
-                      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: string) =>  {
-                  return enabledFields.some(
-                    (field: { field: string }) => field.field === fieldName
-                  );
-                };
-        
-                const isFieldEditable = (fieldName: string) => {
-                  const field = enabledFields.find(
-                    (field: { field: string; editable: boolean }) =>
-                      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,
-                });
-                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()
-
-    if(shopperToken != null && shopperToken != "") {
-      checkoutDetailsHandler.checkoutDetails.shopperToken = shopperToken
-      getRecommendedInstruments()
-    }
-
-  }, [token]);
-
-  const handleRecommendedSectionClick = (instrumentValue: string) => {
-    const updatedList = recommendedInstrumentsArray.map((item) => ({
-      ...item,
-      isSelected: item.id === instrumentValue,
-    }));
-    setRecommendedInstruments(updatedList);
-    setDefaultSavedUpiList();
-    setDefaultSavedCardsList();
-  };
-
-  const handleSavedUpiSectionClick = (instrumentValue: string) => {
-    const updatedList = savedUpiArray.map((item) => ({
-      ...item,
-      isSelected: item.id === instrumentValue,
-    }));
-    setSavedUpiArray(updatedList);
-    setDefaultRecommendedList();
-    setDefaultSavedCardsList();
-  };
-
-  const handleSavedCardSectionClick = (instrumentValue: string) => {
-    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: string) {
-    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 (
     <SafeAreaView style={styles.screenView}>
-      <StatusBar barStyle="dark-content" />
-      {isFirstLoading ? (
-        <ShimmerView />
-      ) : loadingState ? (
-        <View
-          style={styles.loadingContainer}
-        >
-          <LottieView
-            source={require('../assets/animations/boxpayLogo.json')}
-            autoPlay
-            loop
-            style={styles.lottieStyle}
-          />
-          <Text>Loading...</Text>
-        </View>
-      ) : (
-        <View style={styles.screenView}>
-          <ScrollView 
-            contentContainerStyle={{ flexGrow: 1 }} 
-            keyboardShouldPersistTaps="handled" 
-          >
-            <View style={{ flex: 1 }}>
-              <Header
-                onBackPress={onExitCheckout}
-                showDesc={true}
-                showSecure={true}
-                text="Payment Details"
-              />
-              <AddressComponent address={address} navigateToAddressScreen= {() => navigation.navigate("AddressScreen", {})}/>
-
-              {recommendedInstrumentsArray.length > 0 && (
-                <>
-                  <View
-                    style={styles.container}
-                  >
-                    <Text
-                      style={styles.headingText}
-                    >
-                      Recommended
-                    </Text>
-                  </View>
-                  <View
-                    style={styles.paymentContainer}
-                  >
-                    <PaymentSelectorView
-                      providerList={recommendedInstrumentsArray}
-                      onProceedForward={(displayValue, instrumentValue, type) =>
-                        handleUpiCollectPayment(
-                          displayValue,
-                          instrumentValue,
-                          type
-                        )
-                      }
-                      errorImage={require('../assets/images/ic_upi.png')}
-                      isLastUsed={true}
-                      onClickRadio={(selectedInstrumentRef) => {
-                        handleRecommendedSectionClick(selectedInstrumentRef);
-                      }}
-                    />
-                  </View>
-                </>
-              )}
-
-              <UpiScreen
-                handleUpiPayment={(selectedIntent) =>
-                  handlePaymentIntent(selectedIntent)
-                }
-                handleCollectPayment={(displayValue, instrumentValue, type) =>
-                  handleUpiCollectPayment(displayValue, instrumentValue, type)
-                }
-                savedUpiArray={savedUpiArray}
-                onClickRadio={handleSavedUpiSectionClick}
-              />
-
-              {savedCardArray.length != 0 && (
-                <View>
-                  <Text
-                    style={styles.headingText}
-                  >
-                    Credit & Debit Cards
-                  </Text>
-                  <View
-                    style={styles.paymentContainer}
-                  >
-                    <SavedCardComponentView
-                      savedCards={savedCardArray}
-                      onProceedForward={(instrumentValue) => {
-                        handleUpiCollectPayment('', instrumentValue, 'Card');
-                      }}
-                      errorImage={require('../assets/images/ic_card.png')}
-                      onClickAddCard={() => navigation.navigate("CardScreen", {})}
-                      onClickRadio={(selectedInstrumentRef) =>
-                        handleSavedCardSectionClick(selectedInstrumentRef)
-                      }
-                    />
-                  </View>
-                </View>
-              )}
-              <MorePaymentMethods savedCards={savedCardArray}/>
-              <View>
-                <Text
-                  style={styles.headingText}
-                >
-                  Order Summary
-                </Text>
-
-                <OrderDetails
-                  subTotalAmount={subTotalAmountRef.current}
-                  shippingAmount={shippingAmountRef.current}
-                  totalAmount={amount}
-                  itemsArray={orderItemsArrayRef.current}
-                  taxAmount={taxAmountRef.current}
-                />
-              </View>
-
-              {/* Secured by BoxPay - Fixed at Bottom */}
-              <View
-                style={styles.footerContainer}
-              >
-                <Text
-                  style={styles.footerText}
-                >
-                  Secured by
-                </Text>
-                <Image
-                  source={require('../assets/images/splash-icon.png')}
-                  style={styles.footerImage}
-                />
-              </View>
-            </View>
-          </ScrollView>
-        </View>
-      )}
-
-      {/* Modals for Different Payment Statuses */}
-      {failedModalOpen && (
-        <PaymentFailed
-          onClick={() => setFailedModalState(false)}
-          errorMessage={paymentFailedMessage.current}
-        />
-      )}
-
-      {successModalOpen && (
-        <PaymentSuccess
-          onClick={onExitCheckout}
-          transactionId={transactionId}
-          method="UPI"
-          localDateTime={successfulTimeStamp}
-        />
-      )}
-
-      {sessionExpireModalOpen && <SessionExpire onClick={onExitCheckout} />}
-
-      {showWebView && (
-        <View
-          style={styles.webViewScreenStyle}
-        >
-          <WebViewScreen
-            url={paymentUrl}
-            html={paymentHtml}
-            onBackPress={() => {
-              callFetchStatusApi();
-              setShowWebView(false);
-            }}
-          />
-        </View>
-      )}
       <CheckoutContainer/>
     </SafeAreaView>
   );