boxpay-checkout-reactnative-sdk 1.0.16 → 1.0.17-beta1

package/src/screens/emiScreen.tsx

@@ -1,868 +0,0 @@
-import {
-  View,
-  Text,
-  BackHandler,
-  Dimensions,
-  ScrollView,
-  Image
-} from 'react-native';
-import { useEffect, useRef, useState } from 'react';
-import {
-  type Bank,
-  type ChooseEmiModel,
-  type Emi,
-  type PaymentResultObject,
-  type PaymentMethod,
-  APIStatus,
-  type EmiScreenParams,
-  TransactionStatus
-} from '../interface';
-import { checkoutDetailsHandler, setCheckOutDetailsHandlerToDefault } from '../sharedContext/checkoutDetailsHandler';
-import fetchPaymentMethods from '../postRequest/fetchPaymentMethods';
-import ShimmerView from '../components/shimmerView';
-import Header from '../components/header';
-import { TextInput } from 'react-native-paper';
-import BankCard from '../components/bankCard';
-import SelectTenureScreen from './selectTenureScreen';
-import emiPostRequest from '../postRequest/emiPostRequest';
-import LottieView from 'lottie-react-native';
-import PaymentFailed from '../components/paymentFailed';
-import PaymentSuccess from '../components/paymentSuccess';
-import SessionExpire from '../components/sessionExpire';
-import { paymentHandler } from '../sharedContext/paymentStatusHandler';
-import WebViewScreen from './webViewScreen';
-import fetchStatus from '../postRequest/fetchStatus';
-import PaymentSelectorView from '../components/paymentSelector';
-import Toast from 'react-native-toast-message'
-import styles from '../styles/screens/emiScreenStyles';
-import { handleFetchStatusResponseHandler, handlePaymentResponse } from '../sharedContext/handlePaymentResponseHandler';
-import type { CheckoutStackParamList } from '../navigation';
-import type { NavigationProp, RouteProp } from '@react-navigation/native';
-import { setUserDataHandlerToDefault } from '../sharedContext/userdataHandler';
-import { getTextInputTheme } from '../sharedContext/getTextInputTheme';
-
-type EmiScreenRouteProp = RouteProp<CheckoutStackParamList, 'EmiScreen'>;
-
-type EmiScreenNavigationProp = NavigationProp<CheckoutStackParamList, 'EmiScreen'>;
-
-interface Props {
-  navigation: EmiScreenNavigationProp;
-  route: EmiScreenRouteProp;
-}
-
-const EmiScreen = ({ navigation, route }: Props) => {
-  const { isAutoNavigationEnabled } = route.params as EmiScreenParams || {};
-  const [emiBankList, setEmiBankList] = useState<ChooseEmiModel>({ cards: [] });
-  const [defaultEmiBankList, setDefaultEmiBankList] = useState<ChooseEmiModel>({
-    cards: [],
-  });
-  const [selectedOthersOption, setSelectedOthersOption] = useState('');
-  const [searchText, setSearchText] = useState<string>('');
-  const [filterList, setFilterList] = useState<[string, boolean][]>([]);
-  const [isFilterExisted, setIsFilterExisted] = useState<boolean>(false);
-  const { checkoutDetails } = checkoutDetailsHandler;
-  const order: Record<string, number> = {
-    'Credit Card': 0,
-    'Debit Card': 1,
-    'Others': 2,
-  };
-  const screenHeight = Dimensions.get('window').height;
-  const [isSearchVisible, setIsSearchVisible] = useState(true);
-  const [checkedOnce, setCheckedOnce] = useState(false);
-  const [isFirstLoad, setIsFirstLoad] = useState(true);
-  const [searchTextFocused, setSearchTextFocused] = useState(false);
-
-  const [selectTenureScreen, setSelectTenureScreen] = useState(false);
-
-  const [selectedCard, setSelectedCard] = useState<string>('');
-  const [selectedBank, setSelectedBank] = useState<Bank>();
-  const [selectedEmi, setSelectedEmi] = useState<Emi[]>([]);
-
-  const [loading, setLoading] = useState(false);
-  const [failedModalOpen, setFailedModalOpen] = useState(false);
-  const [successModalOpen, setSuccessModalOpen] = useState(false);
-  const [sessionExpireModalOpen, setSessionExppireModalOpen] = useState(false);
-  const [successfulTimeStamp, setSuccessfulTimeStamp] = useState('');
-
-  const [status, setStatus] = useState<string>(TransactionStatus.NoAction);
-  const [transactionId, setTransactionId] = useState<string | null>(null);
-  const [redirectionResult, setRedirectionResult] = useState<string | null>(null)
-
-  const [paymentHtml, setPaymentHtml] = useState('');
-  const [paymentUrl, setPaymentUrl] = useState('');
-
-  const [showWebView, setShowWebView] = useState(false);
-  const backgroundApiInterval = useRef<NodeJS.Timeout | null>(null);
-
-  const paymentFailedMessage = useRef<string>(
-    'You may have cancelled the payment or there was a delay in response. Please retry.'
-  );
-
-  useEffect(() => {
-    const fetchData = async () => {
-      const response = await fetchPaymentMethods()
-      switch(response.apiStatus) {
-        case APIStatus.Success : {
-          const data = response.data
-          data.forEach((paymentMethod: PaymentMethod) => {
-            if (paymentMethod.type === 'Emi') {
-              const title = paymentMethod.title;
-              const emiCardName = title?.includes('Credit')
-                ? 'Credit Card'
-                : title?.includes('Debit')
-                  ? 'Debit Card'
-                  : 'Others';
-
-              let emiBankImage = paymentMethod.logoUrl;
-              if (emiBankImage?.startsWith('/assets')) {
-                emiBankImage = `https://checkout.boxpay.in${emiBankImage}`;
-              }
-
-              const emiMethod = paymentMethod.emiMethod;
-              if(emiMethod) {
-                const bankName =
-                emiCardName === 'Others'
-                  ? emiMethod.cardlessEmiProviderTitle
-                  : emiMethod.issuerTitle;
-              const effectiveInterestRate =
-                emiMethod.effectiveInterestRate || 0.0;
-              const bankInterestRate =
-                emiCardName === 'Others' ? 0.0 : effectiveInterestRate;
-
-              let noApplicableOffer = false;
-              let lowApplicableOffer = false;
-              if (emiMethod.applicableOffer) {
-                const discount = emiMethod.applicableOffer.discount;
-                noApplicableOffer = discount.type === 'NoCostEmi';
-                lowApplicableOffer = discount.type === 'LowCostEmi';
-              }
-
-              const bank: Bank = {
-                iconUrl: emiBankImage ?? '',
-                name: bankName ?? '',
-                percent: noApplicableOffer
-                  ? (emiMethod.merchantBorneInterestRate ?? 0)
-                  : bankInterestRate,
-                noCostApplied: noApplicableOffer,
-                lowCostApplied: lowApplicableOffer,
-                emiList: [],
-                cardLessEmiValue: emiMethod.cardlessEmiProviderValue ?? '',
-                issuerBrand:
-                  emiCardName === 'Others' ? '' : (emiMethod.issuer ?? ''),
-              };
-
-              const emi: Emi = {
-                duration: emiMethod.duration ?? 0,
-                percent: noApplicableOffer
-                  ? (emiMethod.merchantBorneInterestRate ?? 0)
-                  : bankInterestRate,
-                amount: emiMethod.emiAmountLocaleFull ?? '',
-                totalAmount: emiMethod.totalAmountLocaleFull ?? '',
-                discount: emiMethod.merchantBorneInterestAmountLocaleFull ?? '',
-                interestCharged: lowApplicableOffer
-                  ? (emiMethod.interestChargedAmountLocaleFull ?? '')
-                  : (emiMethod.bankChargedInterestAmountLocaleFull ?? ''),
-                noCostApplied: noApplicableOffer,
-                processingFee: emiMethod.processingFee?.amountLocaleFull || '0',
-                lowCostApplied: lowApplicableOffer,
-                code: emiMethod.applicableOffer?.code || '',
-                netAmount: emiMethod.netAmountLocaleFull ?? '',
-              };
-
-              addBankDetails(emiCardName, bank, emi);
-              }
-            }
-          });
-          break
-        }
-        case APIStatus.Failed : {
-          Toast.show({
-            type: 'error',
-            text1: 'Oops!',
-            text2: 'Something went wrong. Please try again.'
-          });
-          break
-        }
-      }
-    }
-
-    fetchData()
-  }, []);
-
-  useEffect(() => {
-    if (defaultEmiBankList.cards.length > 0) {
-      setEmiBankList(defaultEmiBankList);
-    }
-  }, [defaultEmiBankList]);
-
-  const startBackgroundApiTask = () => {
-    backgroundApiInterval.current = setInterval(() => {
-      callFetchStatusApi();
-    }, 4000);
-  };
-
-  const stopBackgroundApiTask = () => {
-    if (backgroundApiInterval.current) {
-      clearInterval(backgroundApiInterval.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: () => {
-        setFailedModalOpen(true)
-      },
-      onShowSuccessModal: (ts) => {
-        setSuccessfulTimeStamp(ts);
-        setSuccessModalOpen(true);
-      },
-      onShowSessionExpiredModal: () => {
-        setSessionExppireModalOpen(true)
-      },
-      setLoading: setLoading,
-      stopBackgroundApiTask: stopBackgroundApiTask,
-      isFromUPIIntentFlow : false
-    });
-  };
-
-  useEffect(() => {
-    if (emiBankList.cards.length > 0) {
-      setIsFirstLoad(false);
-    }
-  }, [emiBankList]);
-
-  useEffect(() => {
-    if (paymentUrl) {
-      setShowWebView(true);
-    }
-  }, [paymentUrl]);
-
-  useEffect(() => {
-    if (paymentHtml) {
-      setShowWebView(true);
-    }
-  }, [paymentHtml]);
-
-  const onProceedForward = async (instrumentValue: string) => {
-    let response;
-    setLoading(true);
-    response = await emiPostRequest({duration:instrumentValue});
-    handlePaymentResponse({
-      response: response,
-      checkoutDetailsErrorMessage: checkoutDetails.errorMessage,
-      onSetStatus: setStatus,
-      onSetTransactionId: setTransactionId,
-      onSetPaymentHtml: setPaymentHtml,
-      onSetPaymentUrl: setPaymentUrl,
-      onSetFailedMessage: (msg) => (paymentFailedMessage.current = msg),
-      onShowFailedModal: () => setFailedModalOpen(true),
-      onShowSuccessModal: (ts) => {
-        setSuccessfulTimeStamp(ts);
-        setSuccessModalOpen(true);
-      },
-      onShowSessionExpiredModal: () => setSessionExppireModalOpen(true),
-      setLoading: setLoading
-    });
-  };
-
-  const addBankDetails = (cardType: string, bank: Bank, emi: Emi) => {
-    try {
-      setDefaultEmiBankList((prev) => {
-        const existingCardType = prev.cards.find(
-          (card) => card.cardType.toLowerCase() === cardType.toLowerCase()
-        );
-
-        if (bank.noCostApplied) {
-          setIsFilterExisted(true);
-          if (!filterList.some(([filter]) => filter === 'No Cost EMI')) {
-            setFilterList([...filterList, ['No Cost EMI', false]]);
-          }
-        }
-
-        let updatedCards;
-        if (existingCardType) {
-          let updatedBanks = [...existingCardType.banks];
-          const existingBankIndex = updatedBanks.findIndex(
-            (b) => b.name === bank.name && b.iconUrl === bank.iconUrl
-          );
-
-          if (existingBankIndex !== -1) {
-            const existingBank = { ...updatedBanks[existingBankIndex] };
-            const emiExists = existingBank.emiList?.some(
-              (e) => e.duration === emi.duration && e.amount === emi.amount
-            );
-
-            if (!emiExists) {
-              existingBank.emiList = existingBank.emiList
-                ? [...existingBank.emiList, emi]
-                : [emi];
-              existingBank.noCostApplied ||= emi.noCostApplied;
-              existingBank.lowCostApplied ||= emi.lowCostApplied;
-              existingBank.percent = Math.min(
-                existingBank.percent ?? bank.percent,
-                bank.percent
-              );
-
-              updatedBanks[existingBankIndex] = existingBank as Bank;
-            }
-          } else {
-            updatedBanks = [...updatedBanks, { ...bank, emiList: [emi] }];
-          }
-
-          // 🔽 Sort updated banks inside card
-          updatedBanks.sort((a, b) => {
-            if (b.noCostApplied !== a.noCostApplied)
-              return b.noCostApplied ? 1 : -1;
-            if (b.lowCostApplied !== a.lowCostApplied)
-              return b.lowCostApplied ? 1 : -1;
-            return a.name.localeCompare(b.name);
-          });
-
-          updatedCards = prev.cards.map((card) =>
-            card.cardType.toLowerCase() === cardType.toLowerCase()
-              ? { ...card, banks: updatedBanks }
-              : card
-          );
-        } else {
-          updatedCards = [
-            ...prev.cards,
-            {
-              cardType,
-              banks: [{ ...bank, emiList: [emi] }],
-            },
-          ];
-        }
-
-        // 🔽 Sort cards based on predefined order
-        updatedCards.sort(
-          (a, b) =>
-            (order[a.cardType as keyof typeof order] ?? 3) -
-            (order[b.cardType as keyof typeof order] ?? 3)
-        );
-
-        const newEmiBankList = { ...prev, cards: updatedCards };
-
-        // 🔽 Set default selected card
-        if (
-          newEmiBankList.cards.some(
-            (card) => card.cardType.toLowerCase() === 'credit card'
-          )
-        ) {
-          setSelectedCard('Credit Card');
-        } else if (
-          newEmiBankList.cards.some(
-            (card) => card.cardType.toLowerCase() === 'debit card'
-          )
-        ) {
-          setSelectedCard('Debit Card');
-        } else if (
-          newEmiBankList.cards.some(
-            (card) => card.cardType.toLowerCase() === 'others'
-          )
-        ) {
-          setSelectedCard('Others');
-        } else {
-          setSelectedCard(cardType);
-        }
-
-        return newEmiBankList;
-      });
-    } catch (error) {}
-  };
-
-  const onProceedBack = () => {
-    if (isAutoNavigationEnabled) {
-      onExitCheckout();
-      return true;
-    } else {
-      navigation.goBack()
-      return true;
-    }
-  };
-
-  useEffect(() => {
-
-    const backAction = () => {
-      if (showWebView) {
-        setShowWebView(false);
-        paymentFailedMessage.current = checkoutDetails.errorMessage;
-        setStatus(TransactionStatus.Failed);
-        setFailedModalOpen(true);
-        setLoading(false);
-        return true;
-      } else if (loading) {
-        return true; // Prevent default back action
-      } else if (selectTenureScreen) {
-        setSelectTenureScreen(false);
-        return true;
-      }
-      return onProceedBack(); 
-    }
-    const backHandler = BackHandler.addEventListener(
-      'hardwareBackPress',
-      backAction,
-    );
-
-    return () => backHandler.remove();
-  }, [navigation]);
-
-  const navigateToCardScreen = (
-    duration: number,
-    bankName: string,
-    bankUrl: string,
-    offerCode: string,
-    amount: string,
-    percent: number
-  ) => {
-    navigation.navigate("CardScreen", {
-      duration: duration,
-      bankName: bankName,
-      bankUrl: bankUrl,
-      offerCode: offerCode,
-      amount: amount,
-      percent: percent,
-      cardType: selectedCard,
-      issuerBrand: selectedBank?.issuerBrand,
-    })
-  };
-
-  useEffect(() => {
-    if (searchText.trim() === '') {
-      // Reset to original bank list if search query is empty
-      setEmiBankList(defaultEmiBankList);
-    } else {
-      // Filter banks whose name starts with the search query (case-insensitive)
-      const filteredList: ChooseEmiModel = {
-        ...defaultEmiBankList,
-        cards: defaultEmiBankList.cards.map((card) => ({
-          ...card,
-          banks: card.banks.filter((bank) =>
-            bank.name.toLowerCase().startsWith(searchText.toLowerCase())
-          ),
-        })),
-      };
-      setEmiBankList(filteredList);
-    }
-  }, [searchText]);
-
-  const getBanksByFilter = (cardType: string, filterApplied: string) => {
-    setFilterList((prevFilters) => {
-      // Toggle the filter: if already active, deactivate it, else activate it and deactivate others
-      const newFilters: [string, boolean][] = prevFilters.map(
-        ([filter, isActive]) =>
-          filter === filterApplied ? [filter, !isActive] : [filter, false]
-      );
-
-      // Check if any filter is active
-      const isAnyFilterActive = newFilters.some(([, isActive]) => isActive);
-
-      setEmiBankList(() => {
-        if (!isAnyFilterActive) {
-          return defaultEmiBankList; // Reset if no filter is active
-        }
-
-        return {
-          cards: defaultEmiBankList.cards.map((card) => {
-            if (card.cardType.toLowerCase() === cardType.toLowerCase()) {
-              let filteredBanks = card.banks;
-
-              // Apply filters based on the active filter
-              if (
-                newFilters.some(
-                  ([filter, isActive]) => isActive && filter.includes('No Cost')
-                )
-              ) {
-                filteredBanks = card.banks.filter((bank) => bank.noCostApplied);
-              } else if (
-                newFilters.some(
-                  ([filter, isActive]) =>
-                    isActive && filter.includes('Low Cost')
-                )
-              ) {
-                filteredBanks = card.banks.filter(
-                  (bank) => bank.lowCostApplied
-                );
-              }
-
-              return { ...card, banks: filteredBanks };
-            }
-            return card;
-          }),
-        };
-      });
-
-      return newFilters;
-    });
-  };
-
-  const handleCardClick = (cardType: string) => {
-    setSelectedCard(cardType);
-    setSearchText('');
-    setFilterList((prevFilters) =>
-      prevFilters.map(([filter]) => [filter, false])
-    );
-  };
-
-  const handleSelectedBank = (selectedBank: Bank) => {
-    try {
-      setSelectedBank(selectedBank);
-      setFilterList((prevFilters) =>
-        prevFilters.map(([filter]) => [filter, false])
-      );
-      setSelectedEmi(sortEmiList(selectedBank));
-      setSelectTenureScreen(true);
-    } catch (error) {}
-  };
-
-  const sortEmiList = (bank: Bank): Emi[] => {
-    return [...bank.emiList].sort((a, b) => {
-      // Sort by `noCostApplied` first (true comes before false)
-      if (a.noCostApplied !== b.noCostApplied) {
-        return a.noCostApplied ? -1 : 1;
-      }
-      // Then by `lowCostApplied` (true comes before false)
-      if (a.lowCostApplied !== b.lowCostApplied) {
-        return a.lowCostApplied ? -1 : 1;
-      }
-      // Finally, sort by `duration` in ascending order
-      return a.duration - b.duration;
-    });
-  };
-
-  const onExitCheckout = () => {
-    setSuccessModalOpen(false)
-    setSessionExppireModalOpen(false)
-    setFailedModalOpen(false)
-    const mockPaymentResult: PaymentResultObject = {
-      status: status || '',
-      transactionId: transactionId || '',
-      inquiryToken : redirectionResult || ''
-    };
-    setCheckOutDetailsHandlerToDefault()
-    setUserDataHandlerToDefault()
-    paymentHandler.onPaymentResult(mockPaymentResult);
-  };
-
-  return (
-    <View style={styles.screenView}>
-      {isFirstLoad ? (
-        <ShimmerView/>
-      ) : loading ? (
-        <View
-          style={styles.loadingContainer}
-        >
-          <LottieView
-            source={require('../../assets/animations/boxpayLogo.json')}
-            autoPlay
-            loop
-            style={styles.lottieStyle}
-          />
-          <Text>Loading...</Text>
-        </View>
-      ) : (
-        <View style={styles.availableScreenView}>
-          {!selectTenureScreen && (
-            <>
-              <Header
-                onBackPress={onProceedBack}
-                showDesc={true}
-                showSecure={false}
-                text="Choose EMI Option"
-              />
-              <View
-                style={styles.container}
-              >
-                <View
-                  style={styles.insideContainer}
-                >
-                  {emiBankList.cards.map((item, index) => (
-                    <View
-                      key={index}
-                      style={styles.cardsContainer}
-                    >
-                      <Text
-                        style={[styles.cardsText,{
-                          color:
-                            selectedCard === item.cardType
-                              ? checkoutDetails.buttonColor
-                              : '#01010273',
-                              fontFamily: checkoutDetails.fontFamily.semiBold,
-                        }]}
-                        onPress={() => handleCardClick(item.cardType)}
-                      >
-                        {item.cardType}
-                      </Text>
-                      <View
-                        style={[styles.highlightedDivider,{
-                          backgroundColor:
-                            selectedCard === item.cardType
-                              ? checkoutDetails.buttonColor
-                              : '',
-                        }]}
-                      />
-                    </View>
-                  ))}
-                </View>
-                <View
-                  style={styles.divider}
-                />
-                {isSearchVisible && (
-                  <View style={{ backgroundColor: 'white' }}>
-                    <TextInput
-                      mode="outlined"
-                      label={
-                        <Text
-                          style={[styles.searchTextLable,{
-                            color: searchTextFocused
-                              ? '#2D2B32'
-                              : searchText != '' && searchText != null
-                                ? '#2D2B32'
-                                : '#ADACB0',
-                                fontFamily: checkoutDetails.fontFamily.regular,
-                          }]}
-                        >
-                          {selectedCard === 'Others'
-                            ? 'Search for other EMI options'
-                            : 'Search for bank'}
-                        </Text>
-                      }
-                      value={searchText}
-                      onChangeText={(it) => {
-                        setSearchText(it);
-                      }}
-                      theme={getTextInputTheme()}
-                      style={[styles.textInputStyle, {fontFamily: checkoutDetails.fontFamily.regular,}]}
-                      left={
-                        <TextInput.Icon
-                          icon={() => (
-                            <Image
-                              source={require('../../assets/images/ic_search.png')}
-                              style={{ width: 20, height: 20 }}
-                            />
-                          )}
-                        />
-                      }
-                      outlineStyle={{
-                        borderRadius: 6,
-                        borderWidth: 1,
-                      }}
-                      onFocus={() => setSearchTextFocused(true)}
-                      onBlur={() => setSearchTextFocused(false)}
-                    />
-                  </View>
-                )}
-                {isFilterExisted &&
-                  selectedCard != 'Others' &&
-                  filterList.map(([item, isSelected], index) => (
-                    <View
-                      key={index}
-                      style={styles.filterContainer}
-                    >
-                      <View
-                        style={[styles.filterBox,{
-                          borderColor: isSelected ? '#1CA672' : '#E6E6E6',
-                          backgroundColor: isSelected ? '#E8F6F1' : 'white',
-                        }]}
-                      >
-                        <Text
-                          style={[styles.filterText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}
-                          onPress={() => {
-                            getBanksByFilter(selectedCard, item);
-                          }}
-                        >
-                          {item}
-                        </Text>
-                        <Image
-                          source={
-                            isSelected
-                              ? require('../../assets/images/ic_cross.png')
-                              : require('../../assets/images/add_icon.png')
-                          }
-                          style={[styles.filterImage,{
-                            tintColor: isSelected ? '#2D2B32' : '#7F7D83',
-                          }]}
-                        />
-                      </View>
-                    </View>
-                  ))}
-              </View>
-              <ScrollView
-                contentContainerStyle={{ flexGrow: 1 }}
-                keyboardShouldPersistTaps="handled"
-                onContentSizeChange={(_, contentHeight) => {
-                  if (!checkedOnce) {
-                    if (contentHeight > screenHeight) {
-                      setIsSearchVisible(true);
-                    }
-                    setCheckedOnce(true);
-                  }
-                }}
-              >
-                <Text
-                  style={[styles.headingText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}
-                >
-                  {selectedCard === 'Others' ? 'Others' : 'All Banks'}
-                </Text>
-                <View
-                  style={styles.listContainer}
-                >
-                  {(() => {
-                    const selectedCardData = emiBankList.cards.find(
-                      (card) => card.cardType === selectedCard
-                    );
-
-                    if (
-                      !selectedCardData ||
-                      selectedCardData.banks?.length === 0
-                    ) {
-                      return (
-                        <View
-                          style={styles.emptyListContainer}
-                        >
-                          <Image
-                            source={require('../../assets/images/no_results_found.png')}
-                            style={styles.emptyListImage}
-                          />
-                          <Text
-                            style={[styles.emptyListHeadingText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}
-                          >
-                            Oops!! No result found
-                          </Text>
-                          <Text
-                            style={[styles.emptyListDescText, {fontFamily: checkoutDetails.fontFamily.regular,}]}
-                          >
-                            Please try another search
-                          </Text>
-                        </View>
-                      );
-                    }
-
-                    if (selectedCard === 'Others') {
-                      return (
-                        <PaymentSelectorView
-                          providerList={selectedCardData.banks.map((bank) => ({
-                            type: 'EMI',
-                            id: bank.cardLessEmiValue,
-                            displayName: '',
-                            displayValue: bank.name,
-                            iconUrl: bank.iconUrl,
-                            instrumentTypeValue: bank.cardLessEmiValue,
-                            isSelected:
-                              selectedOthersOption === bank.cardLessEmiValue,
-                          }))}
-                          onProceedForward={(_, instrumentValue) =>
-                            onProceedForward(instrumentValue)
-                          }
-                          errorImage={require('../../assets/images/ic_bnpl_semi_bold.png')}
-                          onClickRadio={(selectedInstumentValue) => {
-                            setSelectedOthersOption(selectedInstumentValue);
-                          }}
-                        />
-                      );
-                    }
-
-                    // For Credit or Debit
-                    return selectedCardData.banks.map(
-                      (bank, index, bankArray) => (
-                        <View key={index} style={{ flexDirection: 'column' }}>
-                          <BankCard
-                            name={bank.name}
-                            iconUrl={bank.iconUrl}
-                            hasNoCostEmi={bank.noCostApplied}
-                            hasLowCostEmi={bank.lowCostApplied}
-                            onPress={() => handleSelectedBank(bank)}
-                          />
-                          {index !== bankArray.length - 1 && (
-                            <View
-                              style={styles.divider}
-                            />
-                          )}
-                        </View>
-                      )
-                    );
-                  })()}
-                </View>
-              </ScrollView>
-            </>
-          )}
-
-          {selectTenureScreen && (
-            <View style={styles.availableScreenView}>
-              <SelectTenureScreen
-                bankName={selectedBank?.name || ''}
-                bankUrl={selectedBank?.iconUrl || ''}
-                onbackPress={() => {
-                  setSelectTenureScreen(false);
-                }}
-                cardType={selectedCard}
-                emiModel={selectedEmi ? selectedEmi : []}
-                onProceedForward={(
-                  duration: number,
-                  bankName: string,
-                  bankUrl: string,
-                  offerCode: string,
-                  amount: string,
-                  percent: number
-                ) => {
-                  navigateToCardScreen(
-                    duration,
-                    bankName,
-                    bankUrl,
-                    offerCode,
-                    amount,
-                    percent
-                  );
-                }}
-              />
-            </View>
-          )}
-        </View>
-      )}
-      {failedModalOpen && (
-        <PaymentFailed
-          onClick={() => setFailedModalOpen(false)}
-          onExit={onExitCheckout} 
-          errorMessage={paymentFailedMessage.current}
-        />
-      )}
-
-      {successModalOpen && (
-        <PaymentSuccess
-          onClick={onExitCheckout}
-          transactionId={transactionId || ''}
-          method="Card"
-          localDateTime={successfulTimeStamp}
-        />
-      )}
-
-      {sessionExpireModalOpen && <SessionExpire onClick={onExitCheckout} />}
-
-      {showWebView && (
-        <View
-          style={styles.webViewScreenStyle}
-        >
-          <WebViewScreen
-            url={paymentUrl}
-            html={paymentHtml}
-            onBackPress={(redirectionResult: string | null) => {
-              setRedirectionResult(redirectionResult)
-              startBackgroundApiTask();
-              setLoading(true);
-              setShowWebView(false);
-            }}
-          />
-        </View>
-      )}
-    </View>
-  );
-};
-
-export default EmiScreen;