@os1-platform/dispatch-mobile 2.1.24 → 2.1.26

package/src/components/executiontasks/collectPayment/components/ProcessPayment.tsx

@@ -1,8 +1,11 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable react-native/no-inline-styles */
 import {
+  AppState,
+  AppStateStatus,
   BackHandler,
   Image,
+  ImageBackground,
   KeyboardAvoidingView,
   Platform,
   ScrollView,
@@ -36,12 +39,14 @@ import {
   Fonts,
 } from '../../../../styles/executionTasks/CommonStyles';
 import {
+  formatExpiryTime,
   getPaymentDataMO,
   getPaymentLink,
   getPaymentType,
   removeSharedPrefPaymentData,
   setSharedPrefPaymentData,
   setSharedPrefPaymentSelection,
+  // useQRExpiryTimer,
 } from '../PaymentUtils';
 import {
   ActivityIndicator,
@@ -90,6 +95,8 @@ 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: CollectPaymentInput & ProcessPaymentInput) => {
   const paymentConfigContext = useContext(PaymentContext);
@@ -101,7 +108,7 @@ const ProcessPayment = (props: CollectPaymentInput & ProcessPaymentInput) => {
   const timerRef: any = useRef();
   const paymentRefId =
     props.route.params[RouteParams.ROOT_META_DATA].paymentConfig?.paymentRefId;
-
+  // For back button timer
   const useTimer = (timerDuration: any, onTimerEnd?: () => void) => {
     const [counter, setCounter] = useState(timerDuration);
     const [hasTimerEnded, setHasTimerEnded] = useState(false);
@@ -124,13 +131,13 @@ const ProcessPayment = (props: CollectPaymentInput & ProcessPaymentInput) => {
     }, [counter, hasTimerEnded]);
 
     // Function to reset the timer
-    const resetTimer = () => {
+    const resetModalTimer = () => {
       setCounter(timerDuration);
       setHasTimerEnded(false);
       setBackDisable(true);
     };
 
-    return { counter, resetTimer };
+    return { counter, resetModalTimer };
   };
 
   const { counter } = useTimer(
@@ -518,6 +525,77 @@ const ProcessPayment = (props: CollectPaymentInput & ProcessPaymentInput) => {
 };
 export default ProcessPayment;
 
+const useQRExpiryTimer = (
+  initialTimerValue: number,
+  onTimerEnd?: () => void
+) => {
+  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: AppStateStatus) => {
+      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: CollectPaymentInput &
     ProcessPaymentInput & {
@@ -526,14 +604,35 @@ const RenderQR = (
       setIsRetryEnabled: (showRetryModal: boolean) => void;
     }
 ) => {
+  const [initialTimer, setInitialTimer] = useState<number>(0); //initial timer to start qr expiry hook
+  const [isQRExpired, setIsQRExpired] = useState<boolean>(false);
+  const { timerValue, formattedTime, resetTimer } = useQRExpiryTimer(
+    initialTimer,
+    () => {
+      setIsQRExpired(true);
+    }
+  );
   const paymentConfigContext = useContext(PaymentContext);
   const [qrData, setQrData] = useState<QrResponse | null>(null);
   const [showStatusModal, setStatusModal] = useState(false);
   const [showRetryModal, setRetryModal] = useState(false);
   const [disableStatusBtn, setDisableStatusBtn] = useState(true);
   const [fetchQR, setFetchQR] = useState(true);
-  const timerRef: any = useRef();
-  const statusTimerRef: any = useRef();
+  const [snackBar, setSnackBar] = useState({
+    show: false,
+    type: SnackBarType.SUCCESS,
+    message: '',
+  });
+
+  const onDismissSnackBar = () => {
+    setSnackBar({
+      show: false,
+      message: '',
+      type: SnackBarType.SUCCESS,
+    });
+  };
+  const statusTimerRef = useRef<NodeJS.Timeout | null>(null);
+
   const paymentConfig =
     props.route.params[RouteParams.ROOT_META_DATA].paymentConfig;
   const paymentRefId = paymentConfig?.paymentRefId;
@@ -560,6 +659,7 @@ const RenderQR = (
 
   const fetchQrCode = async () => {
     sendClickEvent('QR_CODE');
+    setQrData(null);
     setFetchQR(true);
     let qrParams: QR_REQUEST_BODY = {
       refId: paymentRefId,
@@ -590,11 +690,15 @@ const RenderQR = (
       //   },
       // };
       setFetchQR(false);
-      const _qrData: QrResponse = paymentResp?.data;
-      console.log('_qrData: ', _qrData);
 
+      const _qrData: QrResponse = paymentResp?.data;
+      console.log('_qrData ', _qrData);
       if (_qrData.data.qrCode) {
         setQrData(_qrData);
+        if (_qrData?.data?.expiresIn) {
+          setInitialTimer(_qrData?.data?.expiresIn);
+          resetTimer();
+        }
         setRetryModal(false);
         await setSharedPrefPaymentData(
           paymentRefId,
@@ -648,6 +752,8 @@ const RenderQR = (
       console.error('QR Gen: ', JSON.stringify(err?.response?.data || err));
       setFetchQR(false);
       setRetryModal(true);
+    } finally {
+      setIsQRExpired(false);
     }
   };
 
@@ -655,9 +761,35 @@ const RenderQR = (
     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);
+
     try {
       const paymentResp =
         await paymentConfigContext?.networkInstance.requestGet(
@@ -747,6 +879,11 @@ const RenderQR = (
       }
       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: any) {
       Logger.getInstance().logEvent(
         '~ checkStatus triggered ',
@@ -760,22 +897,22 @@ const RenderQR = (
 
   return (
     <>
-      <ProgressDialog
-        customModalContentStyle={{ paddingVertical: 40 }}
-        visible={showStatusModal}
-        label="Please wait while we are checking the status"
-        labelStyle={{
-          fontWeight: '400',
-          marginTop: 16,
-          fontFamily:
-            Platform.OS === 'android'
-              ? Fonts.IBMPlexSans_400Regular
-              : 'IBMPlexSans-Regular',
-          color: '#525B7A',
-        }}
-      />
-      {/* {!props.showGoBackModal ? ( */}
-      {fetchQR ? (
+      {showStatusModal ? (
+        <ProgressDialog
+          customModalContentStyle={{ paddingVertical: 40 }}
+          visible={showStatusModal}
+          label=""
+          labelStyle={{
+            fontWeight: '400',
+            marginTop: 16,
+            fontFamily:
+              Platform.OS === 'android'
+                ? Fonts.IBMPlexSans_400Regular
+                : 'IBMPlexSans-Regular',
+            color: '#525B7A',
+          }}
+        />
+      ) : fetchQR ? (
         <ProgressDialog
           visible={qrData ? false : true}
           customModalContentStyle={{ paddingVertical: 40 }}
@@ -836,65 +973,118 @@ const RenderQR = (
           <ScrollView style={CommonStyles.mainContainer}>
             <View style={CommonStyles.mainContainer}>
               <View style={{ alignItems: 'center', paddingTop: 25 }}>
-                <Text style={[CommonStyles.titleText, { fontSize: 18 }]}>
-                  Scan to pay
-                </Text>
-                <Text
-                  style={[
-                    styles.textStyle1,
-                    { color: '#3D445C', marginTop: 12 },
-                  ]}
-                >
-                  Total payable amount
-                </Text>
-                <Text
-                  style={[
-                    CommonStyles.titleText,
-                    {
-                      paddingBottom: 20,
-                      fontWeight: 'bold',
-                    },
-                  ]}
-                >
-                  {paymentConfigContext?.sdkConfig?.etConfig?.currencyCode +
-                    ' ' +
-                    props.expectedAmount}
-                </Text>
-                <Image
+                <View
                   style={{
-                    width: 300,
-                    height: 300,
-                    backgroundColor: 'transparent',
-                  }}
-                  source={{
-                    uri: qrData?.data.qrCode,
+                    flexDirection: 'column',
+                    marginBottom: 24,
+                    alignItems: 'center',
                   }}
-                />
+                >
+                  <Text style={[CommonStyles.titleText, { fontSize: 18 }]}>
+                    Scan to pay
+                  </Text>
+                  <Text
+                    style={[
+                      styles.textStyle1,
+                      { color: '#3D445C', marginTop: 12 },
+                    ]}
+                  >
+                    Total payable amount
+                  </Text>
+                  <Text
+                    style={[
+                      CommonStyles.titleText,
+                      {
+                        fontWeight: 'bold',
+                        marginTop: 0,
+                      },
+                    ]}
+                  >
+                    {paymentConfigContext?.sdkConfig?.etConfig?.currencyCode +
+                      ' ' +
+                      props.expectedAmount}
+                  </Text>
+                  <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}
+                  </Text>
+                </View>
+
+                <ImageBackground
+                  style={styles.qrImage}
+                  source={
+                    isQRExpired
+                      ? require('../../../../icons/blurQRCode.png')
+                      : {
+                          uri: qrData?.data.qrCode, // The actual QR code image
+                        }
+                  }
+                  resizeMode="cover" // Ensures the image fills the container
+                >
+                  {isQRExpired && (
+                    <View style={styles.overlay}>
+                      <Button
+                        style={[
+                          CommonStyles.nextButton,
+                          {
+                            marginEnd: 5,
+                            marginTop: 5,
+                            paddingBottom: 3,
+                          },
+                        ]}
+                        labelStyle={{
+                          ...CommonStyles.nextButtonLabel,
+                          fontSize: 14,
+                          textTransform: 'none',
+                        }}
+                        mode={'outlined'}
+                        onPress={fetchQrCode}
+                      >
+                        Refresh QR Code
+                      </Button>
+                    </View>
+                  )}
+                </ImageBackground>
+                {!isQRExpired && (
                 <View style={{ marginTop: 24 }}>
-                  <ActivityIndicator
-                    size="small"
-                    color="rgba(107, 142, 255, 1)"
-                    style={{ marginBottom: 10 }}
-                  />
-                  {/* <Timer
-                    onTimerEnd={() => props.setBackDisable(false)}
-                    ref={timerRef}
-                    timer={
-                      paymentConfigContext?.sdkConfig?.etConfig
-                        ?.goBackDisableTimer
-                    }
-                  /> */}
+                  {!(props?.showGoBackModal || showStatusModal) && (
+                    <ActivityIndicator
+                      size="small"
+                      color="rgba(107, 142, 255, 1)"
+                      style={{ marginBottom: 10 }}
+                    />
+                  )}
                   <Text style={CommonStyles.subText}>
                     Waiting for the payment confirmation
                   </Text>
                 </View>
+                )}
               </View>
             </View>
           </ScrollView>
-          <View style={{ padding: 10, borderWidth: 1, borderColor: '#E0E3EB' }}>
-            <Text style={CommonStyles.subText}>
-              Customer payment successful?
-            </Text>
+          <View style={styles.snackBarContainer}>
+            <SnackBarCustom
+              type={snackBar.type}
+              message={`${snackBar.message}`}
+              visible={snackBar.show}
+              onDismiss={onDismissSnackBar}
+            />
+          </View>
+          <View style={{ padding: 16, borderWidth: 1, borderColor: '#E0E3EB' }}>
             <View
               style={{
                 flexDirection: 'row',
@@ -904,7 +1094,7 @@ const RenderQR = (
             >
               <Button
                 style={[
-                  CommonStyles.nextButton,
+                  CommonStyles.cancelButton,
                   {
                     marginEnd: 5,
                     flex: 1,
@@ -912,11 +1102,12 @@ const RenderQR = (
                   disableStatusBtn
                     ? {
                         backgroundColor: '#E0E3EB',
+                        borderColor: '#E0E3EB',
                       }
                     : {},
                 ]}
                 labelStyle={[
-                  CommonStyles.nextButtonLabel,
+                  CommonStyles.cancelButtonLabel,
                   { textTransform: 'capitalize' },
                   disableStatusBtn ? { color: '#A3AAC2' } : {},
                 ]}
@@ -924,26 +1115,12 @@ const RenderQR = (
                 onPress={checkStatus}
                 disabled={disableStatusBtn}
               >
-                {disableStatusBtn ? (
-                  <>
-                    {'Check Status ('}
-                    <Timer
-                      ref={statusTimerRef}
-                      singleValue={true}
-                      timer={5}
-                      onTimerEnd={() => setDisableStatusBtn(false)}
-                    />
-                    {' sec)'}
-                  </>
-                ) : (
-                  'Check Status'
-                )}
+                Check Payment Status
               </Button>
             </View>
           </View>
         </>
       )}
-      {/* ) : null} */}
     </>
   );
 };
@@ -1169,7 +1346,7 @@ const PaymentLink = (
       <ProgressDialog
         customModalContentStyle={{ 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:
@@ -1294,7 +1471,7 @@ const PaymentLink = (
                     {' sec)'}
                   </>
                 ) : (
-                  'Check Status'
+                  'Check Payment Status'
                 )}
               </Button>
             </View>

package/src/components/widgets/ProgressDialog.tsx

@@ -27,11 +27,13 @@ const ProgressDialog = (props: ProgressDialogProps) => {
           ]}
         >
           <ActivityIndicator size="large" color="rgba(107, 142, 255, 1)" />
+          {props.label !== "" && (
           <Text
             style={[styles.label, props.labelStyle ? props.labelStyle : {}]}
           >
             {props.label}
           </Text>
+          )}
         </View>
       </View>
     </Modal>