@os1-platform/dispatch-mobile 2.1.24 → 2.1.25

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

@@ -37,6 +37,9 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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 */
 const styles = _PaymentStyles.PaymentStyles;
 let storage = _storage.default.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 = (0, _react.useContext)(_paymentContext.PaymentContext);
@@ -46,6 +49,7 @@ const ProcessPayment = props => {
   const [backDisable, setBackDisable] = (0, _react.useState)(true);
   const timerRef = (0, _react.useRef)();
   const paymentRefId = (_props$route$params$R = props.route.params[_RouteParams.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] = (0, _react.useState)(timerDuration);
     const [hasTimerEnded, setHasTimerEnded] = (0, _react.useState)(false);
@@ -66,14 +70,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 {
@@ -326,16 +330,93 @@ const ProcessPayment = props => {
   }, props))));
 };
 var _default = exports.default = ProcessPayment;
+const useQRExpiryTimer = (initialTimerValue, onTimerEnd) => {
+  const [timer, setTimer] = (0, _react.useState)(initialTimerValue);
+  const timerRef = (0, _react.useRef)(null);
+  const appState = (0, _react.useRef)(_reactNative.AppState.currentState);
+  const initialTimeRef = (0, _react.useRef)(Date.now());
+  const resetTimer = (0, _react.useCallback)(() => {
+    initialTimeRef.current = Date.now();
+    setTimer(initialTimerValue);
+  }, [initialTimerValue]);
+  const updateTimer = (0, _react.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]);
+  (0, _react.useEffect)(() => {
+    resetTimer();
+  }, [initialTimerValue, resetTimer]);
+  (0, _react.useEffect)(() => {
+    // Update the timer immediately on mount
+    updateTimer();
+    const intervalId = setInterval(updateTimer, 1000);
+    return () => clearInterval(intervalId);
+  }, [updateTimer]);
+  (0, _react.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 = _reactNative.AppState.addEventListener('change', handleAppStateChange);
+    return () => {
+      subscription.remove();
+    };
+  }, [updateTimer, initialTimerValue]);
+  return {
+    formattedTime: (0, _PaymentUtils.formatExpiryTime)(timer),
+    timerValue: timer,
+    resetTimer
+  };
+};
 const RenderQR = props => {
   var _paymentConfigContext11;
+  const [initialTimer, setInitialTimer] = (0, _react.useState)(0); //initial timer to start qr expiry hook
+  const [isQRExpired, setIsQRExpired] = (0, _react.useState)(false);
+  const {
+    timerValue,
+    formattedTime,
+    resetTimer
+  } = useQRExpiryTimer(initialTimer, () => {
+    setIsQRExpired(true);
+  });
   const paymentConfigContext = (0, _react.useContext)(_paymentContext.PaymentContext);
   const [qrData, setQrData] = (0, _react.useState)(null);
   const [showStatusModal, setStatusModal] = (0, _react.useState)(false);
   const [showRetryModal, setRetryModal] = (0, _react.useState)(false);
   const [disableStatusBtn, setDisableStatusBtn] = (0, _react.useState)(true);
   const [fetchQR, setFetchQR] = (0, _react.useState)(true);
-  const timerRef = (0, _react.useRef)();
-  const statusTimerRef = (0, _react.useRef)();
+  const [snackBar, setSnackBar] = (0, _react.useState)({
+    show: false,
+    type: _SnackBarCustom.SnackBarType.SUCCESS,
+    message: ''
+  });
+  const onDismissSnackBar = () => {
+    setSnackBar({
+      show: false,
+      message: '',
+      type: _SnackBarCustom.SnackBarType.SUCCESS
+    });
+  };
+  const statusTimerRef = (0, _react.useRef)(null);
   const paymentConfig = props.route.params[_RouteParams.RouteParams.ROOT_META_DATA].paymentConfig;
   const paymentRefId = paymentConfig === null || paymentConfig === void 0 ? void 0 : paymentConfig.paymentRefId;
   (0, _react.useEffect)(() => {
@@ -354,6 +435,7 @@ const RenderQR = props => {
   const fetchQrCode = async () => {
     var _paymentConfigContext6;
     sendClickEvent('QR_CODE');
+    setQrData(null);
     setFetchQR(true);
     let qrParams = {
       refId: paymentRefId,
@@ -380,10 +462,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 (0, _PaymentUtils.setSharedPrefPaymentData)(paymentRefId,
         // props.mergedObjectiveId,
@@ -419,11 +506,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);
     }
   };
   (0, _react.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
+  (0, _react.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);
@@ -470,6 +584,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: _SnackBarCustom.SnackBarType.PAYMENT_WARNING
+      });
     } catch (err) {
       var _err$response3, _err$response4;
       _Logger.default.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), _Logger.LOG_TYPE.SDK_ERROR);
@@ -477,19 +596,19 @@ const RenderQR = props => {
       setStatusModal(false);
     }
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ProgressDialog.default, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showStatusModal ? /*#__PURE__*/_react.default.createElement(_ProgressDialog.default, {
     customModalContentStyle: {
       paddingVertical: 40
     },
     visible: showStatusModal,
-    label: "Please wait while we are checking the status",
+    label: "",
     labelStyle: {
       fontWeight: '400',
       marginTop: 16,
       fontFamily: _reactNative.Platform.OS === 'android' ? _CommonStyles.Fonts.IBMPlexSans_400Regular : 'IBMPlexSans-Regular',
       color: '#525B7A'
     }
-  }), fetchQR ? /*#__PURE__*/_react.default.createElement(_ProgressDialog.default, {
+  }) : fetchQR ? /*#__PURE__*/_react.default.createElement(_ProgressDialog.default, {
     visible: qrData ? false : true,
     customModalContentStyle: {
       paddingVertical: 40
@@ -539,6 +658,12 @@ const RenderQR = props => {
       alignItems: 'center',
       paddingTop: 25
     }
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: {
+      flexDirection: 'column',
+      marginBottom: 24,
+      alignItems: 'center'
+    }
   }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     style: [_CommonStyles.CommonStyles.titleText, {
       fontSize: 18
@@ -550,23 +675,44 @@ const RenderQR = props => {
     }]
   }, "Total payable amount"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     style: [_CommonStyles.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.default.createElement(_reactNative.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.default.createElement(_reactNative.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.default.createElement(_reactNative.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.default.createElement(_reactNative.View, {
+    resizeMode: "cover" // Ensures the image fills the container
+  }, isQRExpired && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.overlay
+  }, /*#__PURE__*/_react.default.createElement(_reactNativePaper.Button, {
+    style: [_CommonStyles.CommonStyles.nextButton, {
+      marginEnd: 5,
+      marginTop: 5,
+      paddingBottom: 3
+    }],
+    labelStyle: {
+      ..._CommonStyles.CommonStyles.nextButtonLabel,
+      fontSize: 14,
+      textTransform: 'none'
+    },
+    mode: 'outlined',
+    onPress: fetchQrCode
+  }, "Refresh QR Code"))), !isQRExpired && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: {
       marginTop: 24
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactNativePaper.ActivityIndicator, {
+  }, !(props !== null && props !== void 0 && props.showGoBackModal || showStatusModal) && /*#__PURE__*/_react.default.createElement(_reactNativePaper.ActivityIndicator, {
     size: "small",
     color: "rgba(107, 142, 255, 1)",
     style: {
@@ -575,27 +721,33 @@ const RenderQR = props => {
   }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     style: _CommonStyles.CommonStyles.subText
   }, "Waiting for the payment confirmation"))))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.snackBarContainer
+  }, /*#__PURE__*/_react.default.createElement(_SnackBarCustom.default, {
+    type: snackBar.type,
+    message: `${snackBar.message}`,
+    visible: snackBar.show,
+    onDismiss: onDismissSnackBar
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: {
-      padding: 10,
+      padding: 16,
       borderWidth: 1,
       borderColor: '#E0E3EB'
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: _CommonStyles.CommonStyles.subText
-  }, "Customer payment successful?"), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: {
       flexDirection: 'row',
       marginStart: 10,
       marginEnd: 10
     }
   }, /*#__PURE__*/_react.default.createElement(_reactNativePaper.Button, {
-    style: [_CommonStyles.CommonStyles.nextButton, {
+    style: [_CommonStyles.CommonStyles.cancelButton, {
       marginEnd: 5,
       flex: 1
     }, disableStatusBtn ? {
-      backgroundColor: '#E0E3EB'
+      backgroundColor: '#E0E3EB',
+      borderColor: '#E0E3EB'
     } : {}],
-    labelStyle: [_CommonStyles.CommonStyles.nextButtonLabel, {
+    labelStyle: [_CommonStyles.CommonStyles.cancelButtonLabel, {
       textTransform: 'capitalize'
     }, disableStatusBtn ? {
       color: '#A3AAC2'
@@ -603,12 +755,7 @@ const RenderQR = props => {
     mode: 'outlined',
     onPress: checkStatus,
     disabled: disableStatusBtn
-  }, disableStatusBtn ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, 'Check Status (', /*#__PURE__*/_react.default.createElement(_Timer.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;
@@ -753,7 +900,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: _reactNative.Platform.OS === 'android' ? _CommonStyles.Fonts.IBMPlexSans_400Regular : 'IBMPlexSans-Regular',
@@ -850,7 +997,7 @@ const PaymentLink = props => {
     singleValue: true,
     timer: 5,
     onTimerEnd: () => setDisableStatusBtn(false)
-  }), ' sec)') : 'Check Status')))));
+  }), ' sec)') : 'Check Payment Status')))));
 };
 const modalStyles = _reactNative.StyleSheet.create({
   modalContent: {