boxpay-checkout-reactnative-sdk 1.1.7-beta2 → 2.0.1

package/src/screens/upiTimerScreen.tsx

@@ -1,263 +0,0 @@
-import {
-  View,
-  Text,
-  Image,
-  BackHandler,
-  StatusBar,
-} from 'react-native'; // Import Modal
-import { useEffect, useRef, useState } from 'react';
-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 { PaymentResultObject, UPITimerScreenParams } from '../interface';
-import styles from '../styles/screens/upiTimerScreenStyle';
-import { checkoutDetailsHandler, setCheckOutDetailsHandlerToDefault } from '../sharedContext/checkoutDetailsHandler';
-import { handleFetchStatusResponseHandler } from '../sharedContext/handlePaymentResponseHandler';
-import type { CheckoutStackParamList } from '../navigation';
-import type {RouteProp, NavigationProp} from '@react-navigation/native'
-import { useCountdown , formatTime} from '../utility';
-import { setUserDataHandlerToDefault } from '../sharedContext/userdataHandler';
-
-type UpiTimerScreenRouteProp = RouteProp<CheckoutStackParamList, 'UpiTimerScreen'>;
-
-// Define the screen's navigation properties
-type UpiTimercreenNavigationProp = NavigationProp<CheckoutStackParamList, 'UpiTimerScreen'>;
-
-interface Props {
-  route: UpiTimerScreenRouteProp;
-  navigation: UpiTimercreenNavigationProp;
-}
-
-const UpiTimerScreen = ({ route, navigation }: Props) => {
-  const {
-    upiId
-  } = route.params as UPITimerScreenParams || {}; 
-  const { checkoutDetails } = checkoutDetailsHandler;
-
-  const upiIdStr = Array.isArray(upiId) ? upiId[0] : upiId;
-
-  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 { 
-    timeRemaining: upiCollectTimerValue, 
-    start: startCollectTimer, 
-    stop: stopCollectTimer 
-  } = useCountdown(300)
-
-  useEffect(() => {
-    const isUPICollectTimerRunning = upiCollectTimerValue < 300
-    if(isUPICollectTimerRunning && upiCollectTimerValue > 0 && upiCollectTimerValue %4 === 0) {
-      callFetchStatusApi();
-    }
-  },[upiCollectTimerValue]);
-
-  useEffect(() => {
-    if (failedModalOpen || successModalOpen || sessionExpireModalOpen) {
-      stopCollectTimer()
-    } else {
-      startCollectTimer()
-    }
-  }, [failedModalOpen, successModalOpen, sessionExpireModalOpen]);
-
-  const onExitCheckout = () => {
-    setSuccessModalState(false)
-    setSessionExppireModalState(false)
-    const mockPaymentResult: PaymentResultObject = {
-      status: status,
-      transactionId: transactionId,
-    };
-    setUserDataHandlerToDefault()
-    setCheckOutDetailsHandlerToDefault()
-    paymentHandler.onPaymentResult(mockPaymentResult);
-  };
-
-  const onProceedBack = () => {
-    if (cancelClicked) {
-      stopCollectTimer()
-      navigation.goBack()
-    } else {
-      setCancelClicked(true);
-    }
-    return true;
-  };
-
-  const onPaymentFailed = () => {
-    setFailedModalState(true);
-    stopCollectTimer()
-    navigation.goBack()
-  };
-  
-  useEffect(() => {
-
-    const backAction = () => {
-      return onProceedBack();
-    }
-    const backHandler = BackHandler.addEventListener(
-      'hardwareBackPress',
-      backAction,
-    );
-
-    return () => backHandler.remove();
-  }, [navigation]);
-
-  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)
-      },
-      isFromUPIIntentFlow : false
-    });
-  };
-
-  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, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}
-        >
-          Complete your payment
-        </Text>
-        <Text
-          style={[styles.descText, {fontFamily: checkoutDetails.fontFamily.regular,}]}
-        >
-          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, {fontFamily: checkoutDetails.fontFamily.regular,}]}
-          >
-            UPI Id : {upiIdStr}
-          </Text>
-        </View>
-        <Text
-          style={[styles.expireInTextStyle, {fontFamily: checkoutDetails.fontFamily.medium,}]}
-        >
-          Expires in
-        </Text>
-        <View style={styles.progressBarContainer}>
-          <CircularProgressBar
-            size={150}
-            strokeWidth={10}
-            progressColor={
-              upiCollectTimerValue <= 30 ? '#FAA4A4' : checkoutDetails.buttonColor
-            }
-            progress={upiCollectTimerValue}
-            formatTime={formatTime(upiCollectTimerValue)}
-            textColor={
-              upiCollectTimerValue <= 30 ? '#F53535' : checkoutDetails.buttonColor
-            }
-          />
-        </View>
-        <View
-          style={styles.infoContainer}
-        >
-          <Image
-            source={require('../../assets/images/ic_info.png')}
-            style={[styles.infoImageStyle, {tintColor : checkoutDetails.buttonColor}]}
-          />
-          <Text
-            style={[styles.infoText, {fontFamily: checkoutDetails.fontFamily.regular,}]}
-          >
-            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.buttonColor,
-            fontFamily: checkoutDetails.fontFamily.semiBold,
-          }]}
-          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/walletScreen.tsx

@@ -1,401 +0,0 @@
-import {
-  View,
-  Text,
-  BackHandler,
-  Image,
-  ScrollView,
-  Dimensions
-} from 'react-native';
-import { useEffect, useRef, useState } from 'react';
-import { checkoutDetailsHandler, setCheckOutDetailsHandlerToDefault } from '../sharedContext/checkoutDetailsHandler';
-import LottieView from 'lottie-react-native';
-import Header from '../components/header';
-import { TextInput } from 'react-native-paper';
-import type { PaymentClass, PaymentResultObject } 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';
-import type { CheckoutStackParamList } from '../navigation';
-import type { NavigationProp } from '@react-navigation/native';
-import { setUserDataHandlerToDefault } from '../sharedContext/userdataHandler';
-
-type WalletScreenNavigationProp = NavigationProp<CheckoutStackParamList, 'WalletScreen'>;
-
-interface Props {
-  navigation: WalletScreenNavigationProp;
-}
-
-const WalletScreen = ({ navigation }: Props) => {
-  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) {
-      navigation.goBack()
-      return true;
-    }
-    return false;
-  };
-
-  const handleSearchTextChange = (text: string) => {
-    setSearchText(text);
-  };
-
-  useEffect(() => {
-
-    const backAction = () => {
-      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();
-    }
-    const backHandler = BackHandler.addEventListener(
-      'hardwareBackPress',
-      backAction,
-    );
-
-    return () => backHandler.remove();
-  }, [navigation]);
-
-
-  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,
-      isFromUPIIntentFlow : false
-    });
-  };
-
-  const startBackgroundApiTask = () => {
-    backgroundApiInterval.current = setInterval(() => {
-      callFetchStatusApi();
-    }, 4000);
-  };
-
-  const stopBackgroundApiTask = () => {
-    if (backgroundApiInterval.current) {
-      clearInterval(backgroundApiInterval.current);
-    }
-  };
-
-  useEffect(() => {
-    if (paymentUrl || paymentHtml) {
-      setShowWebView(true);
-    }
-  }, [paymentUrl, paymentHtml]);
-
-  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 = () => {
-    setSuccessModalState(false)
-    setSessionExppireModalState(false)
-    const mockPaymentResult: PaymentResultObject = {
-      status: status || '',
-      transactionId: transactionId || '',
-    };
-    setUserDataHandlerToDefault()
-    setCheckOutDetailsHandlerToDefault()
-    paymentHandler.onPaymentResult(mockPaymentResult);
-  };
-
-  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 (
-    <View style={styles.screenView}>
-      {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',
-                          fontFamily: checkoutDetails.fontFamily.regular
-                    }]}
-                  >
-                    Search for wallet
-                  </Text>
-                }
-                value={searchText}
-                onChangeText={(it) => {
-                  handleSearchTextChange(it);
-                }}
-                theme={{
-                  colors: {
-                    primary: '#2D2B32',
-                    outline: '#E6E6E6',
-                  },
-                }}
-                style={[styles.textFieldStyle, {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>
-          )}
-          <Text
-            style={[styles.mainHeadingText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}
-          >
-            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, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}
-                >
-                  Oops!! No result found
-                </Text>
-                <Text
-                  style={[styles.subHeadingText, {fontFamily: checkoutDetails.fontFamily.regular,}]}
-                >
-                  Please try another search
-                </Text>
-              </View>
-            )}
-          </ScrollView>
-          <View
-            style={styles.bottomContainer}
-          >
-            <Text
-              style={[styles.bottomText, { fontFamily: checkoutDetails.fontFamily.medium,  }]}
-            >
-              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>
-      )}
-    </View>
-  );
-};
-
-export default WalletScreen;