pay button protection

src/pages/Payment/MultiPaymentWindow.js

@@ -58,6 +58,8 @@ const MultiPaymentWindow = (props) => {
   
   const [paymentHoldedErrText, setPaymentHoldedErrText] = React.useState("");
   const [paymentHoldedErr, setPaymentHoldedErr] = React.useState(false);
+  const [isPaying, setIsPaying] = React.useState(false);
+  const payingRef = React.useRef(false);
   
   const mobileBrowser = "Mobile";
 
@@ -144,7 +146,13 @@ const MultiPaymentWindow = (props) => {
 
   }, [paymentMethod]);
   
+  const releasePayLock = () => {
+    payingRef.current = false;
+    setIsPaying(false);
+  };
+
   const selectedPaymentMethodHandle = (method) => () =>{
+    if (payingRef.current) return;
     if (method != paymentMethod){
       resetForm()
       let totalAmount = props.totalAmount;
@@ -198,6 +206,10 @@ const MultiPaymentWindow = (props) => {
   };
 
   const handlePaymentCheck = () => {
+    if (payingRef.current) return;
+    payingRef.current = true;
+    setIsPaying(true);
+
     let appIdList = props.appIds
     // console.log(props.appIds)
     // console.log(appIdList)
@@ -207,6 +219,8 @@ const MultiPaymentWindow = (props) => {
             appIds: appIdList
         },
         onSuccess: (responseData) => {
+            if (!payingRef.current) return;
+
             const latestData = {};
 
             responseData.forEach(item => {
@@ -235,13 +249,21 @@ const MultiPaymentWindow = (props) => {
                 const resultString = HoldingApplication.map(item => item.appNo).join(' , ');
                 setPaymentHoldedErrText(resultString);
                 // setPaymentHoldedErrText(intl.formatMessage({ id: 'MSG.paymentHolded' }, { appNo: record.appNo }));
+                releasePayLock();
                 setPaymentHoldedErr(true);
             }
+        },
+        onFail: () => {
+            releasePayLock();
+        },
+        onError: () => {
+            releasePayLock();
         }
     });
   };
 
   const closeHandle = () => () =>{
+    releasePayLock();
     resetForm()
     props.setOpen(false)
   };
@@ -261,6 +283,12 @@ const MultiPaymentWindow = (props) => {
     }
   }, [availableMethodData]);
 
+  useEffect(() => {
+    if (!props.confirmPayment) {
+      releasePayLock();
+    }
+  }, [props.confirmPayment]);
+
   const formik = useFormik({
     initialValues: ({
       username: '',
@@ -272,7 +300,7 @@ const MultiPaymentWindow = (props) => {
   return (
     <Dialog
       open={props.open}
-      onClose={() => props.setOpen(false)}
+      onClose={closeHandle()}
       fullWidth={true}
       maxWidth={'xl'}
       fullScreen={props.isFullScreen}
@@ -318,27 +346,27 @@ const MultiPaymentWindow = (props) => {
                                           </Grid>
                                           <Grid item sx={{display: { sm: 'block', md: 'none' }}}></Grid>
                                           <Grid item>
-                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("FPS")} disabled={props.fpsStatus.active === "N"}>
+                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("FPS")} disabled={props.fpsStatus.active === "N" || isPaying}>
                                                   <img className={fpsClass} src={FpsIcon} width="80" height="80" alt="FPS"></img>
                                               </Button>
                                           </Grid>
                                           <Grid item>
-                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Visa")} disabled={props.creditCardStatus.active === "N"}>
+                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Visa")} disabled={props.creditCardStatus.active === "N" || isPaying}>
                                                   <img className={visaClass} src={VisaIcon} width="80" height="80" alt="Visa"></img>
                                               </Button>
                                           </Grid>
                                           <Grid item>
-                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("MasterCard")} disabled={props.creditCardStatus.active === "N"}>
+                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("MasterCard")} disabled={props.creditCardStatus.active === "N" || isPaying}>
                                                   <img className={mastercardClass} src={MasterIcon} width="80" height="80" alt="MasterCard"></img>
                                               </Button>
                                           </Grid>
                                           <Grid item>
-                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("UnionPay")} disabled={props.unionPayStatus.active === "N"}>
+                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("UnionPay")} disabled={props.unionPayStatus.active === "N" || isPaying}>
                                                   <img className={unionPayClass} src={UnionPayIcon} width="80" height="80" alt="UnionPay"></img>
                                               </Button>
                                           </Grid>
                                           <Grid item>
-                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("JCB")} disabled={props.unionPayStatus.active === "N"}>
+                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("JCB")} disabled={props.unionPayStatus.active === "N" || isPaying}>
                                                   <img className={jCBClass} src={JcbIcon} width="80" height="80" alt="JCB"></img>
                                               </Button>
                                           </Grid>
@@ -346,7 +374,7 @@ const MultiPaymentWindow = (props) => {
                                             {props.browserType==mobileBrowser?
                                               null
                                             :
-                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("PPS")} disabled={props.ppsStatus.active === "N"}>
+                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("PPS")} disabled={props.ppsStatus.active === "N" || isPaying}>
                                                   <img className={pPSClass} src={PpsIcon} width="80" height="80" alt="PPS"></img>
                                               </Button>
                                             }
@@ -447,10 +475,10 @@ const MultiPaymentWindow = (props) => {
         </DialogActions>
         <DialogActions>
           {
-            props.onPayment? 
+            props.onPayment || isPaying? 
               <LoadingComponent disableText={true} alignItems="flex-start"/> 
             :
-            <Button variant="contained" onClick={confirmPaymentHandle()} disabled={paymentMethod === "" || isLimit || isPPSLimit} sx={PAY_CONTAINED_BUTTON_SX}>
+            <Button variant="contained" onClick={confirmPaymentHandle()} disabled={paymentMethod === "" || isLimit || isPPSLimit || isPaying} sx={PAY_CONTAINED_BUTTON_SX}>
               <FormattedMessage id="pay"/>
             </Button>
           }

src/pages/Payment/index.js

@@ -435,6 +435,7 @@ const Index = () => {
     // const confirmPaymentHandle = () => () => {
     useEffect(() => {
         if (confirmPayment){
+            setOnPayment(true);
             HttpUtils.post({
                 url: UrlUtils.POST_CHECK_APP_EXPRITY_DATE,
                 params: {
@@ -445,12 +446,22 @@ const Index = () => {
                         setAfterConfirmPayment(true);
                         return;
                     }
+                    setOnPayment(false);
+                    setConfirmPayment(false);
                     let str = "";
                     responData.msg.forEach((item) => {
                         str += "App: " + item.appNo + ", 到期日: " + DateUtils.datetimeStr_Cht(item.expiryDate) + "\n";
                     });
                     setExpiryDateErrText(str.split('\n').map(str => <>{str}<br/></>));
                     setExpiryDateErr(true);
+                },
+                onFail: () => {
+                    setOnPayment(false);
+                    setConfirmPayment(false);
+                },
+                onError: () => {
+                    setOnPayment(false);
+                    setConfirmPayment(false);
                 }
             });
         }
@@ -551,6 +562,7 @@ const Index = () => {
                 setSelectedPaymentMethod={setSelectedPaymentMethod}
                 selectedPaymentMethod={selectedPaymentMethod}
                 setConfirmPayment={setConfirmPayment}
+                confirmPayment={confirmPayment}
                 getMethodImgClass = {getMethodImgClass}
                 onReady = {onReady}
                 locale = {locale}