@os1-platform/dispatch-mobile 2.1.24 → 2.1.26

package/lib/module/components/executiontasks/collectPayment/components/ProcessPayment.js

@@ -1,14 +1,16 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable react-native/no-inline-styles */
-import { BackHandler, Image, KeyboardAvoidingView, Platform, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { AppState, BackHandler, ImageBackground, KeyboardAvoidingView, Platform, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import React, { useState, useLayoutEffect, useEffect, useContext, useCallback, useRef } from 'react';
 import { getBaseETResponse, onClickEvent } from '../../../../utils/ExecTaskUtils';
 import { getEventCodeByET } from '../../../../manager/dispatchCodes/EventCodeContainer';
 import { EntityCode, ExecutionTaskID } from '../../../../models/execTasks/ETConfig';
 import { PaymentStyles } from '../PaymentStyles';
 import { CommonStyles, Fonts } from '../../../../styles/executionTasks/CommonStyles';
-import { getPaymentDataMO, getPaymentLink, getPaymentType, removeSharedPrefPaymentData, setSharedPrefPaymentData, setSharedPrefPaymentSelection } from '../PaymentUtils';
+import { formatExpiryTime, getPaymentDataMO, getPaymentLink, getPaymentType, removeSharedPrefPaymentData, setSharedPrefPaymentData, setSharedPrefPaymentSelection
+// useQRExpiryTimer,
+} from '../PaymentUtils';
 import { ActivityIndicator, Button, Modal, Portal, Provider } from 'react-native-paper';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import { PAYMENT_NOTIFICATION } from '../../../../constants/constants';
@@ -30,6 +32,9 @@ import { ScreenNameSdkConstants, SentryEventNameSdkConstants, SeverityLevelValue
 import Logger, { LOG_TYPE } from '../../../../utils/Logger';
 const styles = PaymentStyles;
 let storage = Storage.getInstance();
+const DEFAULT_STATUS_BTN_DEFAULT_TIMER = 5; // Default timer value in seconds
+const DEFAULT_MIN_SEC_TO_SHOW_TIMER = 600; // Default timer value in seconds to show expire time (current is 10min )
+
 const ProcessPayment = props => {
   var _props$route$params$R, _paymentConfigContext;
   const paymentConfigContext = useContext(PaymentContext);
@@ -39,6 +44,7 @@ const ProcessPayment = props => {
   const [backDisable, setBackDisable] = useState(true);
   const timerRef = useRef();
   const paymentRefId = (_props$route$params$R = props.route.params[RouteParams.ROOT_META_DATA].paymentConfig) === null || _props$route$params$R === void 0 ? void 0 : _props$route$params$R.paymentRefId;
+  // For back button timer
   const useTimer = (timerDuration, onTimerEnd) => {
     const [counter, setCounter] = useState(timerDuration);
     const [hasTimerEnded, setHasTimerEnded] = useState(false);
@@ -59,14 +65,14 @@ const ProcessPayment = props => {
     }, [counter, hasTimerEnded]);
 
     // Function to reset the timer
-    const resetTimer = () => {
+    const resetModalTimer = () => {
       setCounter(timerDuration);
       setHasTimerEnded(false);
       setBackDisable(true);
     };
     return {
       counter,
-      resetTimer
+      resetModalTimer
     };
   };
   const {
@@ -319,16 +325,93 @@ const ProcessPayment = props => {
   }, props))));
 };
 export default ProcessPayment;
+const useQRExpiryTimer = (initialTimerValue, onTimerEnd) => {
+  const [timer, setTimer] = useState(initialTimerValue);
+  const timerRef = useRef(null);
+  const appState = useRef(AppState.currentState);
+  const initialTimeRef = useRef(Date.now());
+  const resetTimer = useCallback(() => {
+    initialTimeRef.current = Date.now();
+    setTimer(initialTimerValue);
+  }, [initialTimerValue]);
+  const updateTimer = useCallback(() => {
+    const currentTime = Date.now();
+    const elapsedTimeInSeconds = Math.floor((currentTime - initialTimeRef.current) / 1000);
+    const remainingTime = Math.max(0, initialTimerValue - elapsedTimeInSeconds);
+    if (remainingTime !== timer) {
+      setTimer(remainingTime);
+    }
+    if (remainingTime === 0 && onTimerEnd) {
+      onTimerEnd();
+    }
+  }, [initialTimerValue, onTimerEnd, timer]);
+  useEffect(() => {
+    resetTimer();
+  }, [initialTimerValue, resetTimer]);
+  useEffect(() => {
+    // Update the timer immediately on mount
+    updateTimer();
+    const intervalId = setInterval(updateTimer, 1000);
+    return () => clearInterval(intervalId);
+  }, [updateTimer]);
+  useEffect(() => {
+    const handleAppStateChange = nextAppState => {
+      if (appState.current.match(/inactive|background/) && nextAppState === 'active') {
+        // Calculate elapsed time and adjust the initial time reference
+        const currentTime = Date.now();
+        const elapsedTimeInSeconds = Math.floor((currentTime - initialTimeRef.current) / 1000);
+        const newRemainingTime = Math.max(0, initialTimerValue - elapsedTimeInSeconds);
+
+        // Update initial time ref based on new remaining time
+        initialTimeRef.current = currentTime - (initialTimerValue - newRemainingTime) * 1000;
+
+        // Update the timer
+        setTimer(newRemainingTime);
+        updateTimer();
+      }
+      appState.current = nextAppState;
+    };
+    const subscription = AppState.addEventListener('change', handleAppStateChange);
+    return () => {
+      subscription.remove();
+    };
+  }, [updateTimer, initialTimerValue]);
+  return {
+    formattedTime: formatExpiryTime(timer),
+    timerValue: timer,
+    resetTimer
+  };
+};
 const RenderQR = props => {
   var _paymentConfigContext11;
+  const [initialTimer, setInitialTimer] = useState(0); //initial timer to start qr expiry hook
+  const [isQRExpired, setIsQRExpired] = useState(false);
+  const {
+    timerValue,
+    formattedTime,
+    resetTimer
+  } = useQRExpiryTimer(initialTimer, () => {
+    setIsQRExpired(true);
+  });
   const paymentConfigContext = useContext(PaymentContext);
   const [qrData, setQrData] = useState(null);
   const [showStatusModal, setStatusModal] = useState(false);
   const [showRetryModal, setRetryModal] = useState(false);
   const [disableStatusBtn, setDisableStatusBtn] = useState(true);
   const [fetchQR, setFetchQR] = useState(true);
-  const timerRef = useRef();
-  const statusTimerRef = useRef();
+  const [snackBar, setSnackBar] = useState({
+    show: false,
+    type: SnackBarType.SUCCESS,
+    message: ''
+  });
+  const onDismissSnackBar = () => {
+    setSnackBar({
+      show: false,
+      message: '',
+      type: SnackBarType.SUCCESS
+    });
+  };
+  const statusTimerRef = useRef(null);
   const paymentConfig = props.route.params[RouteParams.ROOT_META_DATA].paymentConfig;
   const paymentRefId = paymentConfig === null || paymentConfig === void 0 ? void 0 : paymentConfig.paymentRefId;
   useEffect(() => {
@@ -347,6 +430,7 @@ const RenderQR = props => {
   const fetchQrCode = async () => {
     var _paymentConfigContext6;
     sendClickEvent('QR_CODE');
+    setQrData(null);
     setFetchQR(true);
     let qrParams = {
       refId: paymentRefId,
@@ -373,10 +457,15 @@ const RenderQR = props => {
       // };
       setFetchQR(false);
       const _qrData = paymentResp === null || paymentResp === void 0 ? void 0 : paymentResp.data;
-      console.log('_qrData: ', _qrData);
+      console.log('_qrData ', _qrData);
       if (_qrData.data.qrCode) {
-        var _paymentConfigContext7;
+        var _qrData$data, _paymentConfigContext7;
         setQrData(_qrData);
+        if (_qrData !== null && _qrData !== void 0 && (_qrData$data = _qrData.data) !== null && _qrData$data !== void 0 && _qrData$data.expiresIn) {
+          var _qrData$data2;
+          setInitialTimer(_qrData === null || _qrData === void 0 || (_qrData$data2 = _qrData.data) === null || _qrData$data2 === void 0 ? void 0 : _qrData$data2.expiresIn);
+          resetTimer();
+        }
         setRetryModal(false);
         await setSharedPrefPaymentData(paymentRefId,
         // props.mergedObjectiveId,
@@ -412,11 +501,38 @@ const RenderQR = props => {
       console.error('QR Gen: ', JSON.stringify((err === null || err === void 0 || (_err$response2 = err.response) === null || _err$response2 === void 0 ? void 0 : _err$response2.data) || err));
       setFetchQR(false);
       setRetryModal(true);
+    } finally {
+      setIsQRExpired(false);
     }
   };
   useEffect(() => {
     fetchQrCode();
   }, []);
+
+  // re-enabling check status button once its completed checking status after 3 seconds
+  // using this useEffect because now 'Timer' hook in check status button has been removed
+  useEffect(() => {
+    // Clear any existing timeout before setting a new one
+    if (statusTimerRef.current) {
+      clearTimeout(statusTimerRef.current);
+    }
+
+    // Only set a new timeout if `disableStatusBtn` is true
+    if (disableStatusBtn) {
+      statusTimerRef.current = setTimeout(() => {
+        onDismissSnackBar();
+        setDisableStatusBtn(false);
+        statusTimerRef.current = null; // Reset the ref after timeout
+      }, DEFAULT_STATUS_BTN_DEFAULT_TIMER * 1000);
+    }
+
+    // Clean up the timeout on component unmount
+    return () => {
+      if (statusTimerRef.current) {
+        clearTimeout(statusTimerRef.current);
+      }
+    };
+  }, [disableStatusBtn]);
   const checkStatus = async () => {
     sendClickEvent('CHECK_STATUS');
     setStatusModal(true);
@@ -463,6 +579,11 @@ const RenderQR = props => {
       }
       setStatusModal(false);
       setDisableStatusBtn(true);
+      setSnackBar({
+        show: true,
+        message: `Payment not confirmed. Check again in ${DEFAULT_STATUS_BTN_DEFAULT_TIMER} sec.`,
+        type: SnackBarType.PAYMENT_WARNING
+      });
     } catch (err) {
       var _err$response3, _err$response4;
       Logger.getInstance().logEvent('~ checkStatus triggered ', JSON.stringify((err === null || err === void 0 || (_err$response3 = err.response) === null || _err$response3 === void 0 ? void 0 : _err$response3.data) || err), LOG_TYPE.SDK_ERROR);
@@ -470,19 +591,19 @@ const RenderQR = props => {
       setStatusModal(false);
     }
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ProgressDialog, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, showStatusModal ? /*#__PURE__*/React.createElement(ProgressDialog, {
     customModalContentStyle: {
       paddingVertical: 40
     },
     visible: showStatusModal,
-    label: "Please wait while we are checking the status",
+    label: "",
     labelStyle: {
       fontWeight: '400',
       marginTop: 16,
       fontFamily: Platform.OS === 'android' ? Fonts.IBMPlexSans_400Regular : 'IBMPlexSans-Regular',
       color: '#525B7A'
     }
-  }), fetchQR ? /*#__PURE__*/React.createElement(ProgressDialog, {
+  }) : fetchQR ? /*#__PURE__*/React.createElement(ProgressDialog, {
     visible: qrData ? false : true,
     customModalContentStyle: {
       paddingVertical: 40
@@ -532,6 +653,12 @@ const RenderQR = props => {
       alignItems: 'center',
       paddingTop: 25
     }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: 'column',
+      marginBottom: 24,
+      alignItems: 'center'
+    }
   }, /*#__PURE__*/React.createElement(Text, {
     style: [CommonStyles.titleText, {
       fontSize: 18
@@ -543,23 +670,44 @@ const RenderQR = props => {
     }]
   }, "Total payable amount"), /*#__PURE__*/React.createElement(Text, {
     style: [CommonStyles.titleText, {
-      paddingBottom: 20,
-      fontWeight: 'bold'
+      fontWeight: 'bold',
+      marginTop: 0
     }]
-  }, (paymentConfigContext === null || paymentConfigContext === void 0 || (_paymentConfigContext11 = paymentConfigContext.sdkConfig) === null || _paymentConfigContext11 === void 0 || (_paymentConfigContext11 = _paymentConfigContext11.etConfig) === null || _paymentConfigContext11 === void 0 ? void 0 : _paymentConfigContext11.currencyCode) + ' ' + props.expectedAmount), /*#__PURE__*/React.createElement(Image, {
-    style: {
-      width: 300,
-      height: 300,
-      backgroundColor: 'transparent'
+  }, (paymentConfigContext === null || paymentConfigContext === void 0 || (_paymentConfigContext11 = paymentConfigContext.sdkConfig) === null || _paymentConfigContext11 === void 0 || (_paymentConfigContext11 = _paymentConfigContext11.etConfig) === null || _paymentConfigContext11 === void 0 ? void 0 : _paymentConfigContext11.currencyCode) + ' ' + props.expectedAmount), /*#__PURE__*/React.createElement(Text, {
+    style: [styles.textStyle1, {
+      color: isQRExpired ? '#DC2626' : '#D97706',
+      // Red color for expired, yellow for active
+      marginTop: 12,
+      textAlign: 'center',
+      fontSize: 16,
+      lineHeight: 24
+    }]
+  }, isQRExpired ? 'QR code expired. Tap to refresh.' : timerValue <= DEFAULT_MIN_SEC_TO_SHOW_TIMER ? `QR code expires in ${formattedTime}` : null)), /*#__PURE__*/React.createElement(ImageBackground, {
+    style: styles.qrImage,
+    source: isQRExpired ? require('../../../../icons/blurQRCode.png') : {
+      uri: qrData === null || qrData === void 0 ? void 0 : qrData.data.qrCode // The actual QR code image
     },
-    source: {
-      uri: qrData === null || qrData === void 0 ? void 0 : qrData.data.qrCode
-    }
-  }), /*#__PURE__*/React.createElement(View, {
+    resizeMode: "cover" // Ensures the image fills the container
+  }, isQRExpired && /*#__PURE__*/React.createElement(View, {
+    style: styles.overlay
+  }, /*#__PURE__*/React.createElement(Button, {
+    style: [CommonStyles.nextButton, {
+      marginEnd: 5,
+      marginTop: 5,
+      paddingBottom: 3
+    }],
+    labelStyle: {
+      ...CommonStyles.nextButtonLabel,
+      fontSize: 14,
+      textTransform: 'none'
+    },
+    mode: 'outlined',
+    onPress: fetchQrCode
+  }, "Refresh QR Code"))), !isQRExpired && /*#__PURE__*/React.createElement(View, {
     style: {
       marginTop: 24
     }
-  }, /*#__PURE__*/React.createElement(ActivityIndicator, {
+  }, !(props !== null && props !== void 0 && props.showGoBackModal || showStatusModal) && /*#__PURE__*/React.createElement(ActivityIndicator, {
     size: "small",
     color: "rgba(107, 142, 255, 1)",
     style: {
@@ -568,27 +716,33 @@ const RenderQR = props => {
   }), /*#__PURE__*/React.createElement(Text, {
     style: CommonStyles.subText
   }, "Waiting for the payment confirmation"))))), /*#__PURE__*/React.createElement(View, {
+    style: styles.snackBarContainer
+  }, /*#__PURE__*/React.createElement(SnackBarCustom, {
+    type: snackBar.type,
+    message: `${snackBar.message}`,
+    visible: snackBar.show,
+    onDismiss: onDismissSnackBar
+  })), /*#__PURE__*/React.createElement(View, {
     style: {
-      padding: 10,
+      padding: 16,
       borderWidth: 1,
       borderColor: '#E0E3EB'
     }
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: CommonStyles.subText
-  }, "Customer payment successful?"), /*#__PURE__*/React.createElement(View, {
+  }, /*#__PURE__*/React.createElement(View, {
     style: {
       flexDirection: 'row',
       marginStart: 10,
       marginEnd: 10
     }
   }, /*#__PURE__*/React.createElement(Button, {
-    style: [CommonStyles.nextButton, {
+    style: [CommonStyles.cancelButton, {
       marginEnd: 5,
       flex: 1
     }, disableStatusBtn ? {
-      backgroundColor: '#E0E3EB'
+      backgroundColor: '#E0E3EB',
+      borderColor: '#E0E3EB'
     } : {}],
-    labelStyle: [CommonStyles.nextButtonLabel, {
+    labelStyle: [CommonStyles.cancelButtonLabel, {
       textTransform: 'capitalize'
     }, disableStatusBtn ? {
       color: '#A3AAC2'
@@ -596,12 +750,7 @@ const RenderQR = props => {
     mode: 'outlined',
     onPress: checkStatus,
     disabled: disableStatusBtn
-  }, disableStatusBtn ? /*#__PURE__*/React.createElement(React.Fragment, null, 'Check Status (', /*#__PURE__*/React.createElement(Timer, {
-    ref: statusTimerRef,
-    singleValue: true,
-    timer: 5,
-    onTimerEnd: () => setDisableStatusBtn(false)
-  }), ' sec)') : 'Check Status')))));
+  }, "Check Payment Status")))));
 };
 const PaymentLink = props => {
   var _props$route$params$R2, _paymentConfigContext16;
@@ -746,7 +895,7 @@ const PaymentLink = props => {
       paddingVertical: 40
     },
     visible: showStatusModal,
-    label: "Please wait while we are checking the payment status",
+    label: "Please wait while we are checking the status",
     labelStyle: {
       fontWeight: '400',
       fontFamily: Platform.OS === 'android' ? Fonts.IBMPlexSans_400Regular : 'IBMPlexSans-Regular',
@@ -843,7 +992,7 @@ const PaymentLink = props => {
     singleValue: true,
     timer: 5,
     onTimerEnd: () => setDisableStatusBtn(false)
-  }), ' sec)') : 'Check Status')))));
+  }), ' sec)') : 'Check Payment Status')))));
 };
 const modalStyles = StyleSheet.create({
   modalContent: {