add check payment holded after selected payment method

src/pages/Payment/MultiPaymentWindow.js

@@ -32,6 +32,8 @@ import UnionPayIcon from "assets/images/icons/unionpay.svg";
 import PpsIcon from "assets/images/icons/ppshk.svg";
 import FpsIcon from "assets/images/icons/fps.svg";
 import {FormattedMessage, useIntl} from "react-intl";
+import * as HttpUtils from "utils/HttpUtils"
+import * as UrlUtils from "utils/ApiPathConst"
 
 const MultiPaymentWindow = (props) => {
   const intl = useIntl();
@@ -52,7 +54,10 @@ const MultiPaymentWindow = (props) => {
   const [pPSClass, setPPSlass] = useState("");
   const [filteredPaymentMethod, setFilteredPaymentMethod] = useState([]);
   const [onReady, setOnReady] = useState(false);
-
+  
+  const [paymentHoldedErrText, setPaymentHoldedErrText] = React.useState("");
+  const [paymentHoldedErr, setPaymentHoldedErr] = React.useState(false);
+  
   useEffect(() => {
     // console.log(props.transactionData)
     if(Object.keys(props.transactionData).length > 0){
@@ -185,7 +190,49 @@ const MultiPaymentWindow = (props) => {
   };
 
   const confirmPaymentHandle = () => () =>{
-      props.setConfirmPayment(true);
+      handlePaymentCheck()
+  };
+
+  const handlePaymentCheck = () => {
+    let appIdList = props.appIds
+    // console.log(props.appIds)
+    // console.log(appIdList)
+    HttpUtils.post({
+        url: UrlUtils.PAYMENT_CHECK,
+        params: {
+            appIds: appIdList
+        },
+        onSuccess: (responseData) => {
+            const latestData = {};
+
+            responseData.forEach(item => {
+            const { appId, timeDiff } = item;
+            if (latestData[appId] === undefined || timeDiff < latestData[appId].timeDiff) {
+                latestData[appId] = item;
+            }
+            });
+            const latestDataObjects = Object.values(latestData);
+            
+            const filteredData = latestDataObjects.filter(item => item.timeDiff > 20 && item.status !== "APPR");
+            const filteredAppIds = filteredData.map(item => item.appId);
+            
+            const appIdsNotInData = appIdList.filter(appId => !latestDataObjects.some(item => item.appId === appId));
+            const combinedAppIdsArray = [...appIdsNotInData, ...filteredAppIds];
+            
+            const readyToPayment = appIdList.every(appId => combinedAppIdsArray.includes(appId));
+            if (readyToPayment){
+                // props.setConfirmPayment(true);
+                return;
+            }else{
+                const appIdsInData = appIdList.filter(appId => !combinedAppIdsArray.some(item => item === appId));
+                const HoldingApplication = latestDataObjects.filter(item => appIdsInData.includes(item.appId));
+                const resultString = HoldingApplication.map(item => item.appNo).join(' , ');
+                setPaymentHoldedErrText(resultString);
+                // setPaymentHoldedErrText(intl.formatMessage({ id: 'MSG.paymentHolded' }, { appNo: record.appNo }));
+                setPaymentHoldedErr(true);
+            }
+        }
+    });
   };
 
   const closeHandle = () => () =>{
@@ -391,6 +438,33 @@ const MultiPaymentWindow = (props) => {
           </Button>
         </DialogActions>
       </Stack>
+      <div>
+          <Dialog
+              open={paymentHoldedErr}
+              onClose={() => setPaymentHoldedErr(false)}
+              PaperProps={{
+                  sx: {
+                      minWidth: '40vw',
+                      maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                      maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                  }
+              }}
+          >
+              <DialogTitle></DialogTitle>
+              <Typography variant="h4" style={{ paddingLeft: '24px' }}><FormattedMessage id="MSG.actionFail" /></Typography>
+              <DialogContent style={{ display: 'flex', }}>
+                  <Stack direction="column" justifyContent="space-between">
+                      <div dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: 'MSG.paymentHolded' }, { appNo: paymentHoldedErrText }) }} />
+                  </Stack>
+              </DialogContent>
+              <DialogActions>
+                  <Button onClick={() => setPaymentHoldedErr(false)} aria-label={intl.formatMessage({ id: 'close' })}>
+                      <Typography variant="h5">
+                          <FormattedMessage id="close" />
+                      </Typography></Button>
+              </DialogActions>
+          </Dialog>
+      </div>
     </Dialog>
   );
 };

src/pages/Payment/index.js

@@ -540,6 +540,8 @@ const Index = () => {
                 onReady = {onReady}
                 locale = {locale}
                 isFullScreen={isFullScreen}
+                appIds={appIds}
+                // appNo={itemList.appNo}
             />
         </Grid >
     );

src/pages/Proof/Payment/Pay.js

@@ -45,6 +45,8 @@ const Index = () => {
     const [record, setRecord] = React.useState({});
     const [onReady, setOnReady] = React.useState(false);
     const [isPopUp, setIsPopUp] = useState(false);
+    const [paymentHoldedErrText, setPaymentHoldedErrText] = React.useState("");
+    const [paymentHoldedErr, setPaymentHoldedErr] = React.useState(false);
 
     const intl = useIntl();
 
@@ -77,9 +79,48 @@ const Index = () => {
 
     function doPayment() {
         setIsPopUp(false);
-        navigate('/paymentPage', { state: { amount: fee, appIdList: [record?.appId] } });
+        let appIdList = [record?.appId]
+        handlePaymentCheck(appIdList)
     }
 
+    const handlePaymentCheck = (appIdList) => {
+        HttpUtils.post({
+            url: UrlUtils.PAYMENT_CHECK,
+            params: {
+                appIds: appIdList
+            },
+            onSuccess: (responseData) => {
+                const latestData = {};
+
+                responseData.forEach(item => {
+                const { appId, timeDiff } = item;
+                if (latestData[appId] === undefined || timeDiff < latestData[appId].timeDiff) {
+                    latestData[appId] = item;
+                }
+                });
+                const latestDataObjects = Object.values(latestData);
+                
+                const filteredData = latestDataObjects.filter(item => item.timeDiff > 20 && item.status !== "APPR");
+                const filteredAppIds = filteredData.map(item => item.appId);
+                
+                const appIdsNotInData = appIdList.filter(appId => !latestDataObjects.some(item => item.appId === appId));
+                const combinedAppIdsArray = [...appIdsNotInData, ...filteredAppIds];
+                
+                const readyToPayment = appIdList.every(appId => combinedAppIdsArray.includes(appId));
+                if (readyToPayment){
+                    navigate('/paymentPage', { state: { amount: fee, appIdList: appIdList } });
+                }else{
+                    const appIdsInData = appIdList.filter(appId => !combinedAppIdsArray.some(item => item === appId));
+                    const HoldingApplication = latestDataObjects.filter(item => appIdsInData.includes(item.appId));
+                    const resultString = HoldingApplication.map(item => item.appNo).join(' , ');
+                    setPaymentHoldedErrText(resultString);
+                    // setPaymentHoldedErrText(intl.formatMessage({ id: 'MSG.paymentHolded' }, { appNo: record.appNo }));
+                    setPaymentHoldedErr(true);
+                }
+            }
+        });
+    };
+
     return (
         !onReady ?
             <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
@@ -200,6 +241,33 @@ const Index = () => {
                         </Dialog>
                     </div>
                     {/*row 2*/}
+                    <div>
+                        <Dialog
+                            open={paymentHoldedErr}
+                            onClose={() => setPaymentHoldedErr(false)}
+                            PaperProps={{
+                                sx: {
+                                    minWidth: '40vw',
+                                    maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                                    maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                                }
+                            }}
+                        >
+                            <DialogTitle></DialogTitle>
+                            <Typography variant="h4" style={{ paddingLeft: '24px' }}><FormattedMessage id="MSG.actionFail" /></Typography>
+                            <DialogContent style={{ display: 'flex', }}>
+                                <Stack direction="column" justifyContent="space-between">
+                                    <div dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: 'MSG.paymentHolded' }, { appNo: paymentHoldedErrText }) }} />
+                                </Stack>
+                            </DialogContent>
+                            <DialogActions>
+                                <Button onClick={() => setPaymentHoldedErr(false)} aria-label={intl.formatMessage({ id: 'close' })}>
+                                    <Typography variant="h5">
+                                        <FormattedMessage id="close" />
+                                    </Typography></Button>
+                            </DialogActions>
+                        </Dialog>
+                    </div>
                 </Grid >
 
 

src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js

@@ -52,6 +52,8 @@ const ApplicationDetailCard = (
     const [isPopUp, setIsPopUp] = useState(false);
     const [errorText, setErrorText] = useState("");
     const [errorPopUp, setErrorPopUp] = useState(false);
+    const [paymentHoldedErrText, setPaymentHoldedErrText] = React.useState("");
+    const [paymentHoldedErr, setPaymentHoldedErr] = React.useState(false);
     // const params = useParams();
     const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({});
     const [fee, setFee] = useState(0);
@@ -113,7 +115,8 @@ const ApplicationDetailCard = (
             },
             onSuccess: (responData) => {
                 if (responData.success == true) {
-                    setIsPopUp(true);
+                    let appIdList = [currentApplicationDetailData.id]
+                    handlePaymentCheck(appIdList)
                     return;
                 }
                 setErrorText("公共啟事申請已過期");
@@ -125,9 +128,49 @@ const ApplicationDetailCard = (
 
     function doPayment() {
         setIsPopUp(false);
-        navigate('/paymentPage', { state: { amount: fee, appIdList: [currentApplicationDetailData.id] } });
+        let appIdList = [currentApplicationDetailData.id]
+        navigate('/paymentPage', { state: { amount: fee, appIdList: appIdList } });
     }
 
+    const handlePaymentCheck = (appIdList) => {
+        HttpUtils.post({
+            url: UrlUtils.PAYMENT_CHECK,
+            params: {
+                appIds: appIdList
+            },
+            onSuccess: (responseData) => {
+                const latestData = {};
+
+                responseData.forEach(item => {
+                const { appId, timeDiff } = item;
+                if (latestData[appId] === undefined || timeDiff < latestData[appId].timeDiff) {
+                    latestData[appId] = item;
+                }
+                });
+                const latestDataObjects = Object.values(latestData);
+                
+                const filteredData = latestDataObjects.filter(item => item.timeDiff > 20 && item.status !== "APPR");
+                const filteredAppIds = filteredData.map(item => item.appId);
+                
+                const appIdsNotInData = appIdList.filter(appId => !latestDataObjects.some(item => item.appId === appId));
+                const combinedAppIdsArray = [...appIdsNotInData, ...filteredAppIds];
+                
+                const readyToPayment = appIdList.every(appId => combinedAppIdsArray.includes(appId));
+                if (readyToPayment){
+                    setIsPopUp(true);
+                    return;
+                }else{
+                    const appIdsInData = appIdList.filter(appId => !combinedAppIdsArray.some(item => item === appId));
+                    const HoldingApplication = latestDataObjects.filter(item => appIdsInData.includes(item.appId));
+                    const resultString = HoldingApplication.map(item => item.appNo).join(' , ');
+                    setPaymentHoldedErrText(resultString);
+                    // setPaymentHoldedErrText(intl.formatMessage({ id: 'MSG.paymentHolded' }, { appNo: record.appNo }));
+                    setPaymentHoldedErr(true);
+                }
+            }
+        });
+    };
+
     return (
         !onReady ?
             <LoadingComponent />
@@ -669,6 +712,33 @@ const ApplicationDetailCard = (
                             </DialogActions>
                         </Dialog>
                     </div>
+                    <div>
+                        <Dialog
+                            open={paymentHoldedErr}
+                            onClose={() => setPaymentHoldedErr(false)}
+                            PaperProps={{
+                                sx: {
+                                    minWidth: '40vw',
+                                    maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                                    maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                                }
+                            }}
+                        >
+                            <DialogTitle></DialogTitle>
+                            <Typography variant="h4" style={{ paddingLeft: '24px' }}><FormattedMessage id="MSG.actionFail" /></Typography>
+                            <DialogContent style={{ display: 'flex', }}>
+                                <Stack direction="column" justifyContent="space-between">
+                                    <div dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: 'MSG.paymentHolded' }, { appNo: paymentHoldedErrText }) }} />
+                                </Stack>
+                            </DialogContent>
+                            <DialogActions>
+                                <Button onClick={() => setPaymentHoldedErr(false)} aria-label={intl.formatMessage({ id: 'close' })}>
+                                    <Typography variant="h5">
+                                        <FormattedMessage id="close" />
+                                    </Typography></Button>
+                            </DialogActions>
+                        </Dialog>
+                    </div>
                 </form>
             </MainCard >
     );

src/pages/PublicNotice/ListPanel/PendingPaymentTab.js

@@ -34,8 +34,10 @@ export default function SubmittedTab({ rows }) {
     const [selectedCareOf, setSelectedCareOf] = React.useState(null);
     const [expiryDateErrText, setExpiryDateErrText] = React.useState("");
     const [expiryDateErr, setExpiryDateErr] = React.useState(false);
+    
     const [paymentHoldedErrText, setPaymentHoldedErrText] = React.useState("");
     const [paymentHoldedErr, setPaymentHoldedErr] = React.useState(false);
+    
     const theme = useTheme();
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
     const intl = useIntl();