boxpay-checkout-reactnative-sdk 1.0.0-beta2

package/src/screens/upiTimerScreen.tsx

@@ -0,0 +1,281 @@
+import {
+  View,
+  Text,
+  Image,
+  BackHandler,
+  StatusBar,
+} from 'react-native'; // Import Modal
+import { useEffect, useRef, useState } from 'react';
+import { router, useLocalSearchParams } from 'expo-router';
+import Header from '../components/header';
+import fetchStatus from '../postRequest/fetchStatus';
+import PaymentFailed from '../components/paymentFailed';
+import PaymentSuccess from '../components/paymentSuccess';
+import SessionExpire from '../components/sessionExpire';
+import CancelPaymentModal from '../components/cancelPaymentModal';
+import { paymentHandler } from '../sharedContext/paymentStatusHandler';
+import CircularProgressBar from '../components/circularProgress';
+import type { PaymentResult } from '../interface';
+import styles from '../styles/screens/upiTimerScreenStyle';
+import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
+import { handleFetchStatusResponseHandler } from '../sharedContext/handlePaymentResponseHandler';
+
+const UpiTimerScreen = () => {
+  const { upiId } = useLocalSearchParams();
+  const { checkoutDetails } = checkoutDetailsHandler;
+
+  const upiIdStr = Array.isArray(upiId) ? upiId[0] : upiId;
+
+  const [timerValue, setTimerValue] = useState(5 * 60);
+  const [cancelClicked, setCancelClicked] = useState(false);
+  const [failedModalOpen, setFailedModalState] = useState(false);
+  const [successModalOpen, setSuccessModalState] = useState(false);
+  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 [status, setStatus] = useState('');
+  const [transactionId, setTransactionId] = useState('');
+  const [isTimerRunning, setIsTimerRunning] = useState(true);
+  const backgroundApiInterval = useRef<NodeJS.Timeout | null>(null);
+  const timerInterval = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    if (isTimerRunning) {
+      timerInterval.current = setInterval(() => {
+        setTimerValue((prevTime) => {
+          if (prevTime <= 1) {
+            clearInterval(timerInterval.current!);
+            stopBackgroundApiTask();
+            setFailedModalState(true);
+            return 0;
+          }
+          return prevTime - 1;
+        });
+      }, 1000);
+    }
+    return () => {
+      if (timerInterval.current) {
+        clearInterval(timerInterval.current);
+      }
+    };
+  }, [isTimerRunning]);
+
+  useEffect(() => {
+    if (failedModalOpen || successModalOpen || sessionExpireModalOpen) {
+      setIsTimerRunning(false);
+    } else {
+      setIsTimerRunning(true);
+    }
+  }, [failedModalOpen, successModalOpen, sessionExpireModalOpen]);
+
+  const onExitCheckout = () => {
+    const mockPaymentResult: PaymentResult = {
+      status: status,
+      transactionId: transactionId,
+    };
+    paymentHandler.onPaymentResult(mockPaymentResult);
+    router.dismissAll();
+  };
+
+  const onProceedBack = () => {
+    if (cancelClicked) {
+      if (timerInterval.current) {
+        clearInterval(timerInterval.current);
+      }
+      stopBackgroundApiTask();
+      router.back();
+    } else {
+      setCancelClicked(true);
+    }
+    return true;
+  };
+
+  const onPaymentFailed = () => {
+    setFailedModalState(true);
+    stopBackgroundApiTask();
+    if (timerInterval.current) {
+      clearInterval(timerInterval.current);
+    }
+    router.back();
+  };
+
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      onProceedBack
+    );
+    return () => {
+      backHandler.remove();
+    };
+  }, []);
+
+  const formatTime = () => {
+    const minutes = Math.floor(timerValue / 60);
+    const seconds = timerValue % 60;
+    return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+  };
+
+  useEffect(() => {
+    const startBackgroundApiTask = () => {
+      backgroundApiInterval.current = setInterval(() => {
+        callFetchStatusApi();
+      }, 4000);
+    };
+    startBackgroundApiTask();
+  }, []);
+
+  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: () => {
+        setFailedModalState(true)
+      },
+      onShowSuccessModal: (ts) => {
+        setSuccessfulTimeStamp(ts);
+        setSuccessModalState(true);
+      },
+      onShowSessionExpiredModal: () => {
+        setSessionExppireModalState(true)
+      },
+      stopBackgroundApiTask: stopBackgroundApiTask
+    });
+  };
+
+  return (
+    <View style={styles.screenView}>
+      <StatusBar barStyle="dark-content" />
+      <Header
+        onBackPress={onProceedBack}
+        showDesc={true}
+        showSecure={true}
+        text="Payment Details"
+      />
+
+      <View
+        style={styles.mainContainer}
+      >
+        <Text
+          style={styles.headingText}
+        >
+          Complete your payment
+        </Text>
+        <Text
+          style={styles.descText}
+        >
+          Open your UPI application and confirm the payment before the time
+          expires
+        </Text>
+        <View
+          style={styles.container}
+        >
+          <Image
+            source={require('../../assets/images/upi-timer-sheet-upi-icon.png')}
+            style={styles.imageStyle}
+          />
+          <Text
+            style={styles.text}
+          >
+            UPI Id : {upiIdStr}
+          </Text>
+        </View>
+        <Text
+          style={styles.expireInTextStyle}
+        >
+          Expires in
+        </Text>
+        <View style={styles.progressBarContainer}>
+          <CircularProgressBar
+            size={150}
+            strokeWidth={10}
+            progressColor={
+              timerValue <= 30 ? '#FAA4A4' : checkoutDetails.brandColor
+            }
+            progress={timerValue}
+            formatTime={formatTime()}
+            textColor={
+              timerValue <= 30 ? '#F53535' : checkoutDetails.brandColor
+            }
+          />
+        </View>
+        <View
+          style={styles.infoContainer}
+        >
+          <Image
+            source={require('../../assets/images/ic_info.png')}
+            style={styles.infoImageStyle}
+          />
+          <Text
+            style={styles.infoText}
+          >
+            Kindly avoid using the back button until the transaction process is
+            complete
+          </Text>
+        </View>
+      </View>
+
+      <View
+        style={styles.thickDivider}
+      />
+      <View style={styles.cancelPaymentContainer}>
+        <Text
+          style={[styles.cancelTextStyle,{
+            color: checkoutDetails.brandColor
+          }]}
+          onPress={() => {
+            setCancelClicked(true);
+          }}
+        >
+          Cancel Payment
+        </Text>
+      </View>
+      {failedModalOpen && (
+        <PaymentFailed
+          onClick={() => {
+            onPaymentFailed();
+          }}
+          errorMessage={paymentFailedMessage.current}
+        />
+      )}
+
+      {successModalOpen && (
+        <PaymentSuccess
+          onClick={onExitCheckout}
+          transactionId={transactionId}
+          method="UPI"
+          localDateTime={successfulTimeStamp}
+        />
+      )}
+
+      {sessionExpireModalOpen && <SessionExpire onClick={onExitCheckout} />}
+
+      {cancelClicked && (
+        <CancelPaymentModal
+          onNoClick={() => {
+            setCancelClicked(false);
+          }}
+          onYesClick={() => {
+            setCancelClicked(false);
+            onProceedBack();
+          }}
+        />
+      )}
+    </View>
+  );
+};
+
+export default UpiTimerScreen;

package/src/screens/walletsScreen.tsx

@@ -0,0 +1,388 @@
+import {
+  View,
+  Text,
+  BackHandler,
+  Image,
+  ScrollView,
+  Dimensions,
+  StatusBar,
+  SafeAreaView,
+} from 'react-native';
+import { useEffect, useRef, useState } from 'react';
+import { router } from 'expo-router';
+import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
+import LottieView from 'lottie-react-native';
+import Header from '../components/header';
+import { TextInput } from 'react-native-paper';
+import type { PaymentClass, PaymentResult } from '../interface';
+import PaymentSelectorView from '../components/paymentSelector';
+import PaymentSuccess from '../components/paymentSuccess';
+import SessionExpire from '../components/sessionExpire';
+import PaymentFailed from '../components/paymentFailed';
+import { paymentHandler } from '../sharedContext/paymentStatusHandler';
+import methodsPostRequest from '../postRequest/methodsPostRequest';
+import fetchStatus from '../postRequest/fetchStatus';
+import WebViewScreen from './webViewScreen';
+import { fetchPaymentMethodHandler, handleFetchStatusResponseHandler, handlePaymentResponse } from '../sharedContext/handlePaymentResponseHandler';
+import ShimmerView from '../components/shimmerView';
+import styles from '../styles/screens/walletScreenStyles';
+
+const WalletScreen = () => {
+  const [walletList, setWalletList] = useState<PaymentClass[]>([]);
+  const screenHeight = Dimensions.get('window').height;
+  const [defaultWalletList, setDefaultWalletList] = useState<PaymentClass[]>(
+    []
+  );
+  const [searchText, setSearchText] = useState<string>('');
+  const { checkoutDetails } = checkoutDetailsHandler;
+  const [loading, setLoading] = useState(false);
+
+  const [isFirstLoad, setIsFirstLoad] = useState(true);
+
+  const [paymentUrl, setPaymentUrl] = useState<string | null>(null);
+  const [paymentHtml, setPaymentHtml] = useState<string | null>(null);
+  const [showWebView, setShowWebView] = useState(false);
+
+  const [failedModalOpen, setFailedModalState] = useState(false);
+  const [successModalOpen, setSuccessModalState] = useState(false);
+  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 [status, setStatus] = useState<string | null>(null);
+  const [transactionId, setTransactionId] = useState<string | null>(null);
+
+  const backgroundApiInterval = useRef<NodeJS.Timeout | null>(null);
+
+  const [searchTextFocused, setSearchTextFocused] = useState(false);
+
+  const [isSearchVisible, setIsSearchVisible] = useState(false);
+  const [checkedOnce, setCheckedOnce] = useState(false);
+
+  const onProceedBack = () => {
+    if (!loading) {
+      router.back();
+      return true;
+    }
+    return false;
+  };
+
+  const handleSearchTextChange = (text: string) => {
+    setSearchText(text);
+  };
+
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      () => {
+        if (showWebView) {
+          setShowWebView(false);
+          paymentFailedMessage.current = checkoutDetails.errorMessage;
+          setStatus('Failed');
+          setFailedModalState(true);
+          setLoading(false);
+          return true;
+        } else if (loading) {
+          return true; // Prevent default back action
+        }
+        return onProceedBack(); // Allow back navigation if not loading
+      }
+    );
+
+    return () => backHandler.remove();
+  });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      fetchPaymentMethodHandler({
+        paymentType: "Wallet",
+        setList: (list) => {
+          setWalletList(list)
+          setDefaultWalletList(list);
+        }
+      });
+    };
+  
+    fetchData();
+  }, []);
+
+  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: setLoading,
+      stopBackgroundApiTask: stopBackgroundApiTask
+    });
+  };
+
+  const startBackgroundApiTask = () => {
+    backgroundApiInterval.current = setInterval(() => {
+      callFetchStatusApi();
+    }, 4000);
+  };
+
+  const stopBackgroundApiTask = () => {
+    if (backgroundApiInterval.current) {
+      clearInterval(backgroundApiInterval.current);
+    }
+  };
+
+  useEffect(() => {
+    if (paymentUrl) {
+      setShowWebView(true);
+    }
+  }, [paymentUrl]);
+
+  const onProceedForward = async (_: string, instrumentType: string) => {
+    setLoading(true);
+    const response = await methodsPostRequest(instrumentType, 'wallet');
+    handlePaymentResponse({
+      response: response,
+      checkoutDetailsErrorMessage: 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),
+      setLoading: setLoading
+    });
+  };
+
+  const onClickRadioButton = (id: string) => {
+    const updatedWalletList = walletList.map((walletItem) => ({
+      ...walletItem,
+      isSelected: walletItem.id === id,
+    }));
+    setWalletList(updatedWalletList);
+  };
+
+  const onExitCheckout = () => {
+    const mockPaymentResult: PaymentResult = {
+      status: status || '',
+      transactionId: transactionId || '',
+    };
+    paymentHandler.onPaymentResult(mockPaymentResult);
+    router.dismissAll();
+  };
+
+  useEffect(() => {
+    if (walletList.length > 0) {
+      setIsFirstLoad(false);
+    }
+  }, [walletList]);
+
+  useEffect(() => {
+    if (searchText.length > 0) {
+      const filteredWalletList = defaultWalletList.filter((item) => {
+        const words = item.displayValue.toLowerCase().split(/\s+/); // Split title into words
+        return words.some((word) => word.startsWith(searchText.toLowerCase())); // Check if any word starts with searchText
+      });
+
+      setWalletList(filteredWalletList);
+    } else {
+      setWalletList(defaultWalletList);
+    }
+  }, [searchText]);
+
+  return (
+    <SafeAreaView style={styles.screenView}>
+      <StatusBar barStyle="dark-content" />
+      {loading ? (
+        <View
+          style={styles.loaderView}
+        >
+          <LottieView
+            source={require('../../assets/animations/boxpayLogo.json')}
+            autoPlay
+            loop
+            style={styles.lottieStyle}
+          />
+          <Text>Loading...</Text>
+        </View>
+      ) : isFirstLoad ? (
+        <ShimmerView/>
+      ) : (
+        <View style={{ flex: 1, backgroundColor: '#F5F6FB' }}>
+          <Header
+            onBackPress={onProceedBack}
+            showDesc={true}
+            showSecure={false}
+            text="Choose Wallet"
+          />
+          <View
+            style={styles.searchContainer}
+          />
+          {isSearchVisible && (
+            <View style={{ backgroundColor: 'white', paddingBottom: 20 }}>
+              <TextInput
+                mode="outlined"
+                label={
+                  <Text
+                    style={[styles.textFieldLabel,{
+                      color: searchTextFocused
+                        ? '#2D2B32'
+                        : searchText != '' && searchText != null
+                          ? '#2D2B32'
+                          : '#ADACB0',
+                    }]}
+                  >
+                    Search for wallet
+                  </Text>
+                }
+                value={searchText}
+                onChangeText={(it) => {
+                  handleSearchTextChange(it);
+                }}
+                theme={{
+                  colors: {
+                    primary: '#2D2B32',
+                    outline: '#E6E6E6',
+                  },
+                }}
+                style={styles.textFieldStyle}
+                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>
+          )}
+          <Text
+            style={styles.mainHeadingText}
+          >
+            All Wallets
+          </Text>
+          <ScrollView
+            contentContainerStyle={{ flexGrow: 1 }}
+            keyboardShouldPersistTaps="handled"
+            onContentSizeChange={(_, contentHeight) => {
+              if (!checkedOnce) {
+                if (contentHeight > screenHeight) {
+                  setIsSearchVisible(true);
+                }
+                setCheckedOnce(true);
+              }
+            }}
+          >
+            {walletList.length > 0 ? (
+              <View
+                style={styles.listContainer}
+              >
+                <PaymentSelectorView
+                  providerList={walletList}
+                  onProceedForward={onProceedForward}
+                  errorImage={require('../../assets/images/ic_wallet_semi_bold.png')}
+                  onClickRadio={(selectedInstrumentValue) =>
+                    onClickRadioButton(selectedInstrumentValue)
+                  }
+                />
+              </View>
+            ) : (
+              <View
+                style={styles.emptyListContainer}
+              >
+                <Image
+                  source={require('../../assets/images/no_results_found.png')}
+                  style={styles.imageStyle}
+                />
+                <Text
+                  style={styles.headingText}
+                >
+                  Oops!! No result found
+                </Text>
+                <Text
+                  style={styles.subHeadingText}
+                >
+                  Please try another search
+                </Text>
+              </View>
+            )}
+          </ScrollView>
+          <View
+            style={styles.bottomContainer}
+          >
+            <Text
+              style={styles.bottomText}
+            >
+              Secured by
+            </Text>
+            <Image
+              source={require('../../assets/images/splash-icon.png')}
+              style={styles.bottomImage}
+            />
+          </View>
+        </View>
+      )}
+      {failedModalOpen && (
+        <PaymentFailed
+          onClick={() => setFailedModalState(false)}
+          errorMessage={paymentFailedMessage.current}
+        />
+      )}
+
+      {successModalOpen && (
+        <PaymentSuccess
+          onClick={onExitCheckout}
+          transactionId={transactionId || ''}
+          method="Card"
+          localDateTime={successfulTimeStamp}
+        />
+      )}
+
+      {sessionExpireModalOpen && <SessionExpire onClick={onExitCheckout} />}
+
+      {showWebView && (
+        <View
+          style={styles.webViewContainer}
+        >
+          <WebViewScreen
+            url={paymentUrl}
+            html={paymentHtml}
+            onBackPress={() => {
+              startBackgroundApiTask();
+              setShowWebView(false);
+            }}
+          />
+        </View>
+      )}
+    </SafeAreaView>
+  );
+};
+
+export default WalletScreen;

package/src/screens/webViewScreen.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { WebView } from 'react-native-webview';
+
+interface WebViewScreenProps {
+  url: string | null;
+  html: string | null;
+  onBackPress: () => void;
+}
+
+const WebViewScreen: React.FC<WebViewScreenProps> = ({
+  url,
+  html,
+  onBackPress,
+  ...props
+}) => {
+  const source = html
+    ? { html: html }
+    : url
+      ? { uri: url }
+      : { html: '<h1>No content provided</h1>' };
+
+  return (
+    <WebView
+      source={source}
+      {...props}
+      style={{ flex: 1 }}
+      javaScriptEnabled={true}
+      onNavigationStateChange={(event) => {
+        if (event.url.includes('boxpay')) {
+          onBackPress();
+        }
+      }}
+    />
+  );
+};
+
+export default WebViewScreen;