add DemandNoteNo, add payment means for application

src/pages/Payment/Search_GLD/DataGrid.js

@@ -54,7 +54,7 @@ export default function SearchPaymentTable({ searchCriteria, applyGridOnReady, a
 
     const doBIB = () => {
         setIsPopUp(false);
-        console.log(refreshTrigger)
+        // console.log(refreshTrigger)
         HttpUtils.post({
             url: PAYMENT_BIB + "/" + bibId,
             onSuccess: function () {

src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js

@@ -7,9 +7,9 @@ import {
     TextField,
     OutlinedInput,
     Stack,
-    Dialog, DialogTitle, DialogContent, DialogActions, InputAdornment,
+    Dialog, DialogTitle, DialogContent, DialogActions, InputAdornment, Autocomplete
 } from '@mui/material';
-import { isGranted, delBugMode } from "auth/utils";
+import { isGranted, delBugMode, getPaymentMethod} from "auth/utils";
 const MainCard = Loadable(lazy(() => import('components/MainCard')));
 import { useForm } from "react-hook-form";
 import {
@@ -19,11 +19,12 @@ import {
 } from "react";
 
 import Loadable from 'components/Loadable';
+import * as ComboData from "utils/ComboData";
 
 const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
 import * as HttpUtils from "utils/HttpUtils"
 import * as DateUtils from "utils/DateUtils"
-import { CHECK_CREATE_PROOF, UPDATE_GLDREMARKS } from "utils/ApiPathConst"
+import { CHECK_CREATE_PROOF, UPDATE_GLDREMARKS, APPLICATION_UPDATE_PAYMENT_MEANS} from "utils/ApiPathConst"
 import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
 
 import DoneIcon from '@mui/icons-material/Done';
@@ -33,6 +34,7 @@ import DownloadIcon from '@mui/icons-material/Download';
 import ReplayIcon from '@mui/icons-material/Replay';
 import { notifyDownloadSuccess } from 'utils/CommonFunction';
 import { isGrantedAny } from "auth/utils";
+import { useIntl } from "react-intl";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 const ApplicationDetailCard = (
@@ -49,8 +51,13 @@ const ApplicationDetailCard = (
     const [fileDetail, setfileDetail] = useState({});
     const [proofId, setProofId] = useState(null);
     const [onReady, setOnReady] = useState(false);
+    const [showPaymentMeans, setShowPaymentMeans] = useState(false);
+    const [paymentMeans, setPaymentMeans] = useState(ComboData.paymentMeans[0]);
+    const [oldPaymentMeans, setOldPaymentMeans] = useState("");
+    const [isPaymentMeansPopUp, setIsPaymentMeansPopUp] = useState(false);
 
     const { register, handleSubmit } = useForm()
+    const intl = useIntl();
 
     const [isWarningPopUp, setIsWarningPopUp] = useState(false);
     const [warningText, setWarningText] = useState("");
@@ -81,9 +88,32 @@ const ApplicationDetailCard = (
         setVerified(applicationDetailData.userData.verifiedBy ? true : false)
         setfileDetail(applicationDetailData.fileDetail);
         setProofId(applicationDetailData.proofId);
+        if (applicationDetailData.data.status == 'submitted'||applicationDetailData.data.status == 'reviewed'||applicationDetailData.data.status == 'confirmed'){
+            setShowPaymentMeans(true)
+            if (applicationDetailData.data.paymentMethod!=null){
+                setOldPaymentMeans(applicationDetailData.data.paymentMethod)
+            }
+        }
         // setReload(false)
     }
 
+    const doPaymentMeans = () => {
+        setIsPaymentMeansPopUp(false);
+        console.log(oldPaymentMeans)
+        console.log(paymentMeans.type)
+        if(paymentMeans?.type!=oldPaymentMeans){
+            HttpUtils.post({
+                url: APPLICATION_UPDATE_PAYMENT_MEANS + "/" + currentApplicationDetailData.id,
+                params: {
+                    paymentMeans: paymentMeans.type
+                },
+                onSuccess: function () {
+                    location.reload();
+                }
+            });
+        }
+    }
+
     const onDownloadClick = () => () => {
         setOnDownload(true)
         HttpUtils.fileDownload({
@@ -703,6 +733,51 @@ const ApplicationDetailCard = (
                                     </Grid>
                                 </Grid>
                             </Grid>
+                            {showPaymentMeans?
+                                <Grid container direction="row" justifyContent="flex-start"
+                                alignItems="center">
+                                    <Grid item xs={12} md={12} lg={12} mt={1} mb={2}>
+                                        <Grid container alignItems={"center"}>
+                                            <Grid item xs={12} md={12} lg={12}>
+                                                <Grid container direction="row">
+                                                    <Grid item xs={12} md={2} lg={2}
+                                                        sx={{ display: 'flex', alignItems: 'center' }}>
+                                                        <FormLabel><Typography variant="h5" >Payment Means:</Typography></FormLabel>
+                                                    </Grid>
+                                                    <Grid item xs={12} md={8} lg={8} sx={{ display: 'flex', alignItems: 'center' }}>
+                                                        <Grid container direction="row" justifyContent="flex-start">
+                                                            <Grid item xs={10} md={5} lg={5} sx={{ display: 'flex', alignItems: 'center' }}>
+                                                                <FormControl variant="outlined" fullWidth  >
+                                                                    <Typography
+                                                                        // fullWidth
+                                                                        id='paymentMethod'
+                                                                        variant="h5"
+                                                                    >
+                                                                        {currentApplicationDetailData.paymentMethod!=null?intl.formatMessage({ id: getPaymentMethod(currentApplicationDetailData.paymentMethod)}):""}
+                                                                    </Typography>
+                                                                </FormControl>
+                                                            </Grid>
+                                                            <Grid item md={3} lg={3}>
+                                                                <Button
+                                                                    size="small"
+                                                                    variant="contained"
+                                                                    onClick={() =>{setIsPaymentMeansPopUp(true)}}
+                                                                    sx={{
+                                                                        textTransform: 'capitalize',
+                                                                        alignItems: 'end',
+                                                                    }}>
+                                                                    Change
+                                                                </Button>
+                                                            </Grid>
+                                                        </Grid>
+                                                    </Grid>
+                                                </Grid>
+                                            </Grid>
+                                        </Grid>
+                                    </Grid>
+                                </Grid>
+                                :null
+                            }
                             <Grid container direction="row" justifyContent="space-start" alignItems="center">
                                 <Grid item xs={12} md={12} lg={12} sx={{ mb: 1, }}>
                                     <Grid container alignItems={"center"}>
@@ -821,6 +896,53 @@ const ApplicationDetailCard = (
                         </form>
                     </Dialog>
                 </div>
+                <div>
+                    <Dialog
+                        open={isPaymentMeansPopUp}
+                        onClose={() => setIsPaymentMeansPopUp(false)}
+                        PaperProps={{
+                            sx: {
+                                minWidth: '40vw',
+                                maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                                maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                            }
+                        }}
+                    >
+                        <DialogTitle>Payment Means</DialogTitle>
+                        <DialogContent style={{ display: 'flex', }}>
+                            <Grid container direction="row">
+                                <Grid item xs={12} md={12}>
+                                    <Autocomplete
+                                        disablePortal={false}
+                                        size="small"
+                                        id="paymentMeans"
+                                        filterOptions={(options) => options}
+                                        options={ComboData.paymentMeans}
+                                        value={paymentMeans}
+                                        getOptionLabel={(option) => option.label}
+                                        inputValue={paymentMeans?.label ? paymentMeans?.label : ""}
+                                        onChange={(event, newValue) => {
+                                            setPaymentMeans(newValue);
+                                        }}
+                                        renderInput={(params) => (
+                                            <TextField {...params}
+                                                label=""
+                                            />
+                                        )}
+                                        InputLabelProps={{
+                                            shrink: true,
+                                        }}
+                                        disableClearable={true}
+                                    />
+                                </Grid> 
+                            </Grid>
+                        </DialogContent>
+                        <DialogActions>
+                            <Button onClick={() => setIsPaymentMeansPopUp(false)}><Typography variant="h5">Cancel</Typography></Button>
+                            <Button onClick={() => doPaymentMeans()}><Typography variant="h5">Confirm</Typography></Button>
+                        </DialogActions>
+                    </Dialog>
+                </div>
             </MainCard>
     );
 };

src/pages/PublicNotice/Search_Mark_As_Paid_GLD/DataGrid.js

@@ -6,12 +6,13 @@ import {
     Grid,
     Typography,
     Stack,
-    Dialog, DialogTitle, DialogContent, DialogActions,
+    Dialog, DialogTitle, DialogContent, DialogActions,TextField
 } from '@mui/material';
 import { 
     // GET_PUBLIC_NOTICE_LIST, 
     SET_PUBLIC_NOTICE_STATUS_MARK_AS_PAID, 
-    GET_PUBLIC_NOTICE_OFFLINE_PAYMENT_LIST } from "utils/ApiPathConst";
+    GET_PUBLIC_NOTICE_OFFLINE_PAYMENT_LIST,
+    APPLICATION_UPDATE_DEMAND_NOTE_NO } from "utils/ApiPathConst";
 import * as HttpUtils from "utils/HttpUtils";
 import * as DateUtils from "utils/DateUtils";
 import * as FormatUtils from "utils/FormatUtils";
@@ -21,6 +22,9 @@ import { FiDataGrid } from "components/FiDataGrid";
 import { notifyActionSuccess, clickableLink } from 'utils/CommonFunction';
 import { FormattedMessage, useIntl } from "react-intl";
 import * as utils from "auth/utils"
+import EditNoteIcon from '@mui/icons-material/EditNote';
+import { useForm } from "react-hook-form";
+
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnReady, applySearch }) {
@@ -31,6 +35,17 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
     const [selectedRowItems, setSelectedRowItems] = React.useState([]);
     const [isConfirmPopUp, setIsConfirmPopUp] = React.useState(false);
     const [isWarningPopUp, setIsWarningPopUp] = React.useState(false);
+    const [demandNoteNoPopUp, setDemandNoteNoPopUp] = React.useState(false);
+    const [confirmDemandNoteNoPopUp, setConfirmDemandNoteNoPopUp] = React.useState(false);
+    const [demandNoteNo, setDemandNoteNo] = React.useState();
+    const [demandNoteNoId, setDemandNoteNoId] = React.useState();
+    
+    const { register, handleSubmit } = useForm()
+
+    const [refreshTrigger, setRefreshTrigger] = React.useState(0);
+    const forceRefresh = () => {
+        setRefreshTrigger(prev => prev + 1);
+    };
 
     const intl = useIntl();
 
@@ -53,6 +68,52 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
         return groupNo
     }
 
+    function updateDemandNoteNo(id, remark) {
+        setDemandNoteNoId(id)
+        setDemandNoteNo(remark)
+        setConfirmDemandNoteNoPopUp(true)
+    }
+    
+    function editDemandNoteNo(id, remark) {
+        setDemandNoteNoId(id)
+        setDemandNoteNo(remark)
+        setDemandNoteNoPopUp(true)
+    }
+
+    const doDemandNoteNo = () => {
+        setConfirmDemandNoteNoPopUp(false);
+        console.log(refreshTrigger)
+        HttpUtils.post({
+            url: APPLICATION_UPDATE_DEMAND_NOTE_NO + "/" + demandNoteNoId,
+            params:{
+                demandNoteNo:demandNoteNo
+            },
+            onSuccess: function () {
+                forceRefresh()
+            }
+        });
+    }
+
+    const onSubmit = (data) => {
+        // console.log(data)
+        const formDemandNoteNo = data.formDemandNoteNo
+        if (formDemandNoteNo != null) {
+            HttpUtils.post({
+                url: APPLICATION_UPDATE_DEMAND_NOTE_NO + "/"+ demandNoteNoId,
+                params: {
+                    demandNoteNo:formDemandNoteNo
+                },
+                onSuccess: function () {
+                    setDemandNoteNoPopUp(false)
+                    forceRefresh()
+                }
+            });
+        } else {
+            setDemandNoteNoPopUp(false)
+        }
+
+    };
+
     const columns = [
         {
             field: 'actions',
@@ -120,6 +181,58 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
                 return FormatUtils.currencyFormat(params?.value);
             }
         },
+        {
+            id: 'demandNoteNo',
+            field: 'demandNoteNo',
+            headerName: 'Demand Note No.',
+            flex: 2,
+            minWidth: 200,
+            renderCell: (params) => {            
+                const handleBlur = (event) => {
+                    const newValue = event.target.value;
+                    updateDemandNoteNo(params.row.id, newValue);
+                };
+        
+                return (
+                    <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
+                        {
+                            params.row.demandNoteNo?
+                                <Stack direction="row" justifyContent="space-between" alignItems="center" width="100%">
+                                    {params.row.demandNoteNo}
+                                    <Button
+                                        // size="small"
+                                        variant="contained"
+                                        onClick={() => editDemandNoteNo(params.row.id, params.row.demandNoteNo)}
+                                        sx={{
+                                            textTransform: 'capitalize',
+                                            alignItems: 'end',
+
+                                        }}>
+                                        <EditNoteIcon />
+                                        {/* <Typography ml={1} variant="h5"> Edit</Typography> */}
+                                    </Button>
+                                </Stack>
+                            :
+                                <TextField
+                                    size="small"
+                                    variant="outlined"
+                                    defaultValue={params.row.demandNoteNo || ''}
+                                    onBlur={handleBlur}
+                                    placeholder="Enter Demand Note No."
+                                    InputProps={{
+                                        style: { height: '32px', fontSize: '0.875rem' }
+                                    }}
+                                    sx={{
+                                        '& .MuiOutlinedInput-root': { height: '32px' },
+                                        flex: 1,
+                                        minWidth: '60px'
+                                    }}
+                                />
+                        }
+                    </div>
+                );
+            }
+        }
         
     ];
 
@@ -188,7 +301,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
                     callback: function (responseData) {
                         setRows(responseData?.records);
                     }
-                }), [_searchCriteria])}
+                }), [_searchCriteria, refreshTrigger])}
             />
         </div>
         <div>
@@ -247,6 +360,69 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
                 </DialogActions>
             </Dialog>
         </div>
+        <div>
+            <Dialog
+                open={confirmDemandNoteNoPopUp}
+                onClose={() => setConfirmDemandNoteNoPopUp(false)}
+                PaperProps={{
+                    sx: {
+                        minWidth: '40vw',
+                        maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                        maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                    }
+                }}
+            >
+                <DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
+                <DialogContent style={{ display: 'flex', }}>
+                    <Typography variant="h4" style={{ padding: '16px' }}> Confirm Demand Note No. : {demandNoteNo}? </Typography>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setConfirmDemandNoteNoPopUp(false)}><Typography variant="h5">Cancel</Typography></Button>
+                    <Button onClick={() => doDemandNoteNo()}><Typography variant="h5">Confirm</Typography></Button>
+                </DialogActions>
+            </Dialog>
+        </div>
+        <div>
+            <Dialog
+                open={demandNoteNoPopUp}
+                onClose={() => setDemandNoteNoPopUp(false)}
+                PaperProps={{
+                    sx: {
+                        minWidth: '40vw',
+                        maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                        maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                    }
+                }}
+            >
+                <form onSubmit={handleSubmit(onSubmit)}>
+                    <DialogTitle><Typography variant="h3">Demand Note No</Typography></DialogTitle>
+                    <DialogContent style={{ display: 'flex', }}>
+                        <Grid container direction="column">
+                            <Grid item sx={{ padding: '16px' }}>
+                                <TextField
+                                    fullWidth
+                                    {...register("formDemandNoteNo")}
+                                    id='formDemandNoteNo'
+                                    // label="Remarks"
+                                    defaultValue={demandNoteNo}
+                                    InputLabelProps={{
+                                        shrink: true
+                                    }}
+                                />
+                            </Grid>
+                        </Grid>
+
+                    </DialogContent>
+                    <DialogActions>
+                        <Stack direction="row" justifyContent="space-between">
+                            <Button onClick={() => setDemandNoteNoPopUp(false)}><Typography variant="h5">Cancel</Typography></Button>
+                            <Button type="submit"><Typography variant="h5">Save</Typography></Button>
+                            {/* <Button onClick={() => markAsCreditor()}><Typography variant="h5">Confirm</Typography></Button> */}
+                        </Stack>
+                    </DialogActions>
+                </form>
+            </Dialog>
+        </div>
     </>
 
     );

src/utils/ApiPathConst.js

@@ -205,6 +205,8 @@ export const DEMAND_NOTE_EXPORT = apiPath+'/demandNote/export';//POST
 export const GDN_VIEW = apiPath+'/application/list-Demand-Notice';//GET
 export const GDN_EXPORT = apiPath+'/application/export';//GET
 
+export const APPLICATION_UPDATE_PAYMENT_MEANS = apiPath+'/application/application-update-paymentMeans';//POST
+export const APPLICATION_UPDATE_DEMAND_NOTE_NO = apiPath+'/application/application-update-demandNoteNo';//POST
 
 export const GFIMIS_LIST = apiPath+'/gfmis/list';//GET
 

src/utils/ComboData.js

@@ -144,7 +144,11 @@ export const payMethod = [
     { key: 4, labelCht: '轉數快', label:'FPS', type: '04,BCFP,FPS' }, 
 ];
 
-
+export const paymentMeans= [
+    { key: 0, label: 'Online',  type: 'online' },
+    { key: 1, label: 'Demand Note',  type: 'demandNote' }, 
+    { key: 2, label:'NPGO Collection Office',  type: 'office' },
+];
 
 export const denmandNoteStatus = [
     { key: 0, labelCht: '全部', label: 'All',  type: 'all' },