CR-022 Item 5

src/pages/Payment/Details_GLD/PaymentDetails.js

@@ -3,24 +3,33 @@ import {
     Grid,
     Typography,
     FormLabel,
-    Button
+    Button,
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    Box
 } from '@mui/material';
 
 import * as React from "react";
 import * as FormatUtils from "utils/FormatUtils";
 import * as PaymentStatus from "utils/statusUtils/PaymentStatus";
 import * as DateUtils from "utils/DateUtils";
+import * as HttpUtils from "utils/HttpUtils";
+import { PAYMENT_MARK_AS_PAID } from "utils/ApiPathConst";
 import Loadable from 'components/Loadable';
 const MainCard = Loadable(React.lazy(() => import('components/MainCard')));
 const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
 import DownloadIcon from '@mui/icons-material/Download';
 import {useIntl} from "react-intl";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
-const PaymentDetails = ({ formData,doPrint,onDownload }) => {
+const PaymentDetails = ({ formData, doPrint, onDownload, onRefresh }) => {
 
     const intl = useIntl();
     const [data, setData] = React.useState({});
     const [onReady, setOnReady] = React.useState(false);
+    const [confirmOpen, setConfirmOpen] = React.useState(false);
+    const [markingPaid, setMarkingPaid] = React.useState(false);
     // const { locale } = intl;
 
     React.useEffect(() => {
@@ -40,9 +49,29 @@ const PaymentDetails = ({ formData,doPrint,onDownload }) => {
         if("01" == paymentmethod) return "PPS";
         if("02" == paymentmethod || "03" == paymentmethod) return "Credit Card";
         if("04" == paymentmethod) return "FPS";
+        if (data.payMethod === "04,BCFP,FPS") return "FPS";
         return paymentmethod;
     }
 
+    const showMarkAsPaid = data.status === "REJT" && getPaymentMethod() === "FPS";
+
+    const handleMarkAsPaid = () => {
+        setMarkingPaid(true);
+        HttpUtils.post({
+            url: PAYMENT_MARK_AS_PAID + "/" + data.id,
+            onSuccess: () => {
+                setConfirmOpen(false);
+                setMarkingPaid(false);
+                if (onRefresh) {
+                    onRefresh();
+                }
+            },
+            onError: () => {
+                setMarkingPaid(false);
+            }
+        });
+    };
+
     return (
         !onReady ?
             <LoadingComponent />
@@ -51,9 +80,21 @@ const PaymentDetails = ({ formData,doPrint,onDownload }) => {
                 border={false}
                 content={false}
             >
-                <Typography variant="h5" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
-                    Payment Details
-                </Typography>
+                <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, borderBottom: "1px solid black" }}>
+                    <Typography variant="h5" sx={{ textAlign: "left" }}>
+                        Payment Details
+                    </Typography>
+                    {showMarkAsPaid && (
+                        <Button
+                            className="printHidden"
+                            variant="contained"
+                            color="primary"
+                            onClick={() => setConfirmOpen(true)}
+                        >
+                            Mark as Paid
+                        </Button>
+                    )}
+                </Box>
                 <form>
                     <Grid container>
                         <Grid item xs={12} md={12} >
@@ -176,6 +217,25 @@ const PaymentDetails = ({ formData,doPrint,onDownload }) => {
                         }
                     </Grid>
                 </form>
+                <Dialog
+                    open={confirmOpen}
+                    onClose={() => !markingPaid && setConfirmOpen(false)}
+                >
+                    <DialogTitle>Confirm</DialogTitle>
+                    <DialogContent>
+                        <Typography variant="h5" sx={{ padding: '16px' }}>
+                            {`Are you sure to mark as paid for Payment No. ${data.transNo || data.payload?.transactionid} ?`}
+                        </Typography>
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={() => setConfirmOpen(false)} disabled={markingPaid}>
+                            <Typography variant="h5">Cancel</Typography>
+                        </Button>
+                        <Button onClick={handleMarkAsPaid} disabled={markingPaid}>
+                            <Typography variant="h5">Confirm</Typography>
+                        </Button>
+                    </DialogActions>
+                </Dialog>
             </MainCard>
     );
 };

src/pages/Payment/Details_GLD/index.js

@@ -125,6 +125,7 @@ const Index = () => {
                                             formData={record}
                                             doPrint={doPrint}
                                             onDownload={onDownload}
+                                            onRefresh={loadForm}
                                             style={{
                                                 display: "flex",
                                                 height: "100%",

src/utils/ApiPathConst.js

@@ -180,6 +180,7 @@ export const PAYMENT_LOAD = apiPath+'/payment/load';//GET
 export const PAYMENT_APP_LIST = apiPath+'/payment/applist';//POST
 export const PAYMENT_CHECK = apiPath+'/payment/check-payment';//GET
 export const PAYMENT_BIB = apiPath+'/payment/set-bib';//POST
+export const PAYMENT_MARK_AS_PAID = apiPath+'/payment/mark-as-paid';//POST
 export const PAYMENT_GFMIS_LIST = apiPath+'/payment/listGFMIS';//GET
 
 export const PAYMENT_LIMIT_SETTING_LIST = apiPath+'/settings/payment';//GET