From 84b574664e6b09dc8cc886dcd6594f9d3ffc50ca Mon Sep 17 00:00:00 2001
From: anna <anna.ho@2fi-solutions.com.hk>
Date: Fri, 22 Sep 2023 15:38:08 +0800
Subject: [PATCH] shoow remark and hidden Pay btn when status != confirmed

---
 .../ApplicationDetailCard.js                  | 266 +++++++++++-------
 1 file changed, 172 insertions(+), 94 deletions(-)

diff --git a/src/pages/PublicNoticeDetail/ApplicationDetailCard.js b/src/pages/PublicNoticeDetail/ApplicationDetailCard.js
index 1a4a892..6657754 100644
--- a/src/pages/PublicNoticeDetail/ApplicationDetailCard.js
+++ b/src/pages/PublicNoticeDetail/ApplicationDetailCard.js
@@ -1,8 +1,8 @@
 // material-ui
 import {
-    FormControl, 
+    FormControl,
     Button,
-    Grid, 
+    Grid,
     // InputAdornment, 
     Typography, FormLabel,
     OutlinedInput,
@@ -10,11 +10,11 @@ import {
 } from '@mui/material';
 // import MainCard from "../../components/MainCard";
 const MainCard = Loadable(lazy(() => import('components/MainCard')));
-import {useForm} from "react-hook-form";
+import { useForm } from "react-hook-form";
 import {
     useEffect,
     useState
-    } from "react";
+} from "react";
 // import Checkbox from "@mui/material/Checkbox";
 import Loadable from 'components/Loadable';
 
@@ -32,34 +32,34 @@ import EditNoteIcon from '@mui/icons-material/EditNote';
 import DownloadIcon from '@mui/icons-material/Download';
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 const ApplicationDetailCard = (
-    {   applicationDetailData,
+    { applicationDetailData,
         setStatus,
         // updateUserObject,
         // isNewRecord
     }
-    ) => {
+) => {
     // const params = useParams();
     const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({});
     const [companyName, setCompanyName] = useState({});
     const [fileDetail, setfileDetail] = useState({});
-    const [onReady,setOnReady] = useState(false);
-    const [issueNum,setIssueNum] = useState("");
-    const [issueDate,setIssueDate] = useState("");
-    const {register, 
+    const [onReady, setOnReady] = useState(false);
+    const [issueNum, setIssueNum] = useState("");
+    const [issueDate, setIssueDate] = useState("");
+    const { register,
         // getValues
     } = useForm()
 
     useEffect(() => {
         //if user data from parent are not null
         // console.log(applicationDetailData)
-        if (Object.keys(applicationDetailData).length > 0 &&applicationDetailData.data!==null) {
+        if (Object.keys(applicationDetailData).length > 0 && applicationDetailData.data !== null) {
             setCurrentApplicationDetailData(applicationDetailData.data);
             setCompanyName(applicationDetailData.companyName);
             setfileDetail(applicationDetailData.fileDetail);
-            setIssueNum(applicationDetailData.gazetteIssueDetail.volume+"/"+applicationDetailData.gazetteIssueDetail.year
-            +" No. "+applicationDetailData.gazetteIssueDetail.issueNo);
+            setIssueNum(applicationDetailData.gazetteIssueDetail.volume + "/" + applicationDetailData.gazetteIssueDetail.year
+                + " No. " + applicationDetailData.gazetteIssueDetail.issueNo);
             setIssueDate(DateUtils.dateFormat(applicationDetailData.gazetteIssueDetail.issueDate, "D MMM YYYY (ddd)"));
-            
+
         }
     }, [applicationDetailData]);
 
@@ -73,78 +73,85 @@ const ApplicationDetailCard = (
 
     const onDownloadClick = () => () => {
         HttpUtils.fileDownload({
-            fileId:fileDetail.id,
-            skey:fileDetail.skey,
-            filename:fileDetail.filename,
+            fileId: fileDetail.id,
+            skey: fileDetail.skey,
+            filename: fileDetail.filename,
         });
     };
 
-    const cancelledClick = () => () =>{
+    const cancelledClick = () => () => {
         setStatus("cancel")
     };
 
     return (
         !onReady ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
             <MainCard elevation={0}
-                      border={false}
-                      content={false}
+                border={false}
+                content={false}
             >
                 <Grid container spacing={1} direction="row">
                     <Grid item xs={12}>
-                        <Stack 
+                        <Stack
                             direction="row"
                             justifyContent="space-between"
                             alignItems="center"
                             spacing={2}
                             mb={2}
                         >
+                        {
+                            currentApplicationDetailData.status == "confirmed"?
                             <Button
                                 // size="large"
                                 variant="contained"
                                 // onClick={handleNewUserClick}
-                                disabled= {currentApplicationDetailData.status =="rejected"||currentApplicationDetailData.status =="cancelled"||currentApplicationDetailData.status =="paid"}
+                                disabled={currentApplicationDetailData.status == "rejected" || currentApplicationDetailData.status == "cancelled" || currentApplicationDetailData.status == "paid"}
                                 sx={{
                                     textTransform: 'capitalize',
                                     alignItems: 'end'
                                 }}>
-                                <EditNoteIcon/>
+                                <EditNoteIcon />
                                 <Typography ml={1}> 支付</Typography>
                             </Button>
+                            :<div></div>
+                        }
+                            
+
+
                             <Button
-                                    // size="large"
-                                    variant="contained"
-                                    onClick={cancelledClick()}
-                                    disabled= {currentApplicationDetailData.status !=="submitted"}
-                                    sx={{
-                                        textTransform: 'capitalize',
-                                        alignItems: 'end',
-                                        backgroundColor:'#ffa733'
-                                    }}>
-                                    <CloseIcon/>
-                                    <Typography ml={1}> 取消</Typography>
-                                </Button>
+                                // size="large"
+                                variant="contained"
+                                onClick={cancelledClick()}
+                                disabled={currentApplicationDetailData.status !== "submitted"}
+                                sx={{
+                                    textTransform: 'capitalize',
+                                    alignItems: 'end',
+                                    backgroundColor: '#ffa733'
+                                }}>
+                                <CloseIcon />
+                                <Typography ml={1}> 取消</Typography>
+                            </Button>
                         </Stack>
                     </Grid>
                 </Grid>
-                <Typography variant="h5" sx={{mb: 2, borderBottom: "1px solid black"}}>
-                        公共啟事申請資料
+                <Typography variant="h5" sx={{ mb: 2, borderBottom: "1px solid black" }}>
+                    公共啟事申請資料
                 </Typography>
                 <form>
                     <Grid container direction="column">
                         <Grid item xs={12} md={12}>
                             <Grid container direction="row" justifyContent="space-between"
                                 alignItems="center">
-                                <Grid item xs={12} md={6} lg={6} sx={{mb: 1}}>
+                                <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
-                                            sx={{display: 'flex', alignItems: 'center'}}>
+                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel>申請編號:</FormLabel>
                                         </Grid>
 
                                         <Grid item xs={12} md={9} lg={9}>
-                                            <FormControl variant="outlined" fullWidth  disabled>
+                                            <FormControl variant="outlined" fullWidth disabled>
                                                 <OutlinedInput
                                                     fullWidth
                                                     size="small"
@@ -153,15 +160,21 @@ const ApplicationDetailCard = (
                                                             value: currentApplicationDetailData.appNo,
                                                         })}
                                                     id='appNo'
+                                                    sx={{
+                                                        "& .MuiInputBase-input.Mui-disabled": {
+                                                            WebkitTextFillColor: "#000000",
+                                                            background: "#f8f8f8",
+                                                        },
+                                                    }}
                                                 />
                                             </FormControl>
                                         </Grid>
                                     </Grid>
                                 </Grid>
-                                <Grid item xs={12} md={5} lg={5} sx={{mb: 1, ml:1}}>
+                                <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
-                                            sx={{display: 'flex', alignItems: 'center'}}>
+                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel>申請狀態:</FormLabel>
                                         </Grid>
 
@@ -175,43 +188,55 @@ const ApplicationDetailCard = (
                             </Grid>
                             <Grid container direction="row" justifyContent="space-between"
                                 alignItems="center">
-                                <Grid item xs={12} md={6} lg={6} sx={{mb: 1}}>
+                                <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
-                                            sx={{display: 'flex', alignItems: 'center'}}>
+                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel>申請人:</FormLabel>
                                         </Grid>
 
                                         <Grid item xs={12} md={9} lg={9}>
                                             <FormControl variant="outlined" fullWidth disabled >
-                                                { currentApplicationDetailData.orgId===null?
-                                                <OutlinedInput
-                                                    fullWidth
-                                                    size="small"
-                                                    {...register("contactPerson",
-                                                        {
-                                                            value: currentApplicationDetailData.contactPerson,
-                                                        })}
-                                                    id='contactPerson'
-                                                />:
-                                                <OutlinedInput
-                                                    fullWidth
-                                                    size="small"
-                                                    {...register("companyName",
-                                                        {
-                                                            value: companyName.enCompanyName,
-                                                        })}
-                                                    id='companyName'
-                                                />
+                                                {currentApplicationDetailData.orgId === null ?
+                                                    <OutlinedInput
+                                                        fullWidth
+                                                        size="small"
+                                                        {...register("contactPerson",
+                                                            {
+                                                                value: currentApplicationDetailData.contactPerson,
+                                                            })}
+                                                        id='contactPerson'
+                                                        sx={{
+                                                            "& .MuiInputBase-input.Mui-disabled": {
+                                                                WebkitTextFillColor: "#000000",
+                                                                background: "#f8f8f8",
+                                                            },
+                                                        }}
+                                                    /> :
+                                                    <OutlinedInput
+                                                        fullWidth
+                                                        size="small"
+                                                        {...register("companyName",
+                                                            {
+                                                                value: companyName.enCompanyName,
+                                                            })}
+                                                        id='companyName'
+                                                        sx={{
+                                                            "& .MuiInputBase-input.Mui-disabled": {
+                                                                WebkitTextFillColor: "#000000",
+                                                                background: "#f8f8f8",
+                                                            },
+                                                        }}
+                                                    />
                                                 }
                                             </FormControl>
                                         </Grid>
                                     </Grid>
                                 </Grid>
-                                <Grid item xs={12} md={5} lg={5} sx={{mb: 1, ml:1}}>
+                                <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
-                                            sx={{display: 'flex', alignItems: 'center'}}>
+                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel>憲報期數:</FormLabel>
                                         </Grid>
 
@@ -225,24 +250,30 @@ const ApplicationDetailCard = (
                                                                 value: issueNum,
                                                             })}
                                                         id='issueNum'
+                                                        sx={{
+                                                            "& .MuiInputBase-input.Mui-disabled": {
+                                                                WebkitTextFillColor: "#000000",
+                                                                background: "#f8f8f8",
+                                                            },
+                                                        }}
                                                     />
                                                 </FormControl>
                                             </Stack>
                                         </Grid>
                                     </Grid>
                                 </Grid>
-                            </Grid> 
+                            </Grid>
                             <Grid container direction="row" justifyContent="space-between"
                                 alignItems="center">
-                                <Grid item xs={12} md={6} lg={6} sx={{mb: 1}}>
+                                <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
-                                            sx={{display: 'flex', alignItems: 'center'}}>
+                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel>聯絡人:</FormLabel>
                                         </Grid>
 
                                         <Grid item xs={12} md={9} lg={9}>
-                                            <FormControl variant="outlined" fullWidth  disabled>
+                                            <FormControl variant="outlined" fullWidth disabled>
                                                 <OutlinedInput
                                                     fullWidth
                                                     size="small"
@@ -251,15 +282,21 @@ const ApplicationDetailCard = (
                                                             value: currentApplicationDetailData.contactPerson,
                                                         })}
                                                     id='contactPerson'
+                                                    sx={{
+                                                        "& .MuiInputBase-input.Mui-disabled": {
+                                                            WebkitTextFillColor: "#000000",
+                                                            background: "#f8f8f8",
+                                                        },
+                                                    }}
                                                 />
                                             </FormControl>
                                         </Grid>
                                     </Grid>
                                 </Grid>
-                                <Grid item xs={12} md={5} lg={5} sx={{mb: 1, ml:1}}>
+                                <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
-                                            sx={{display: 'flex', alignItems: 'center'}}>
+                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel>發布日期:</FormLabel>
                                         </Grid>
 
@@ -273,6 +310,12 @@ const ApplicationDetailCard = (
                                                                 value: issueDate,
                                                             })}
                                                         id='issueDate'
+                                                        sx={{
+                                                            "& .MuiInputBase-input.Mui-disabled": {
+                                                                WebkitTextFillColor: "#000000",
+                                                                background: "#f8f8f8",
+                                                            },
+                                                        }}
                                                     />
                                                 </FormControl>
                                             </Stack>
@@ -280,16 +323,16 @@ const ApplicationDetailCard = (
                                     </Grid>
                                 </Grid>
                             </Grid>
-                            <Grid item xs={12} md={6} lg={6} sx={{mb: 1,}}>
+                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1, }}>
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
-                                        sx={{display: 'flex', alignItems: 'center'}}>
+                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                         <FormLabel>聯絡電話:</FormLabel>
                                     </Grid>
 
                                     <Grid item xs={12} md={9} lg={9}>
                                         <Stack direction="row">
-                                            <FormControl variant="outlined" sx={{width:'25%'}} disabled>
+                                            <FormControl variant="outlined" sx={{ width: '25%' }} disabled>
                                                 <OutlinedInput
                                                     size="small"
                                                     {...register("countryCode",
@@ -297,9 +340,15 @@ const ApplicationDetailCard = (
                                                             value: currentApplicationDetailData.contactTelNo.countryCode,
                                                         })}
                                                     id='countryCode'
+                                                    sx={{
+                                                        "& .MuiInputBase-input.Mui-disabled": {
+                                                            WebkitTextFillColor: "#000000",
+                                                            background: "#f8f8f8",
+                                                        },
+                                                    }}
                                                 />
                                             </FormControl>
-                                            <FormControl variant="outlined" sx={{width:'100%'}} disabled>
+                                            <FormControl variant="outlined" sx={{ width: '100%' }} disabled>
                                                 <OutlinedInput
                                                     size="small"
                                                     {...register("phoneNumber",
@@ -307,22 +356,28 @@ const ApplicationDetailCard = (
                                                             value: currentApplicationDetailData.contactTelNo.phoneNumber,
                                                         })}
                                                     id='phoneNumber'
+                                                    sx={{
+                                                        "& .MuiInputBase-input.Mui-disabled": {
+                                                            WebkitTextFillColor: "#000000",
+                                                            background: "#f8f8f8",
+                                                        },
+                                                    }}
                                                 />
                                             </FormControl>
                                         </Stack>
                                     </Grid>
                                 </Grid>
                             </Grid>
-                            <Grid item xs={12} md={6} lg={6} sx={{mb: 1,}}>
+                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1, }}>
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
-                                        sx={{display: 'flex', alignItems: 'center'}}>
+                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                         <FormLabel>傳真號碼:</FormLabel>
                                     </Grid>
 
                                     <Grid item xs={12} md={9} lg={9}>
                                         <Stack direction="row">
-                                            <FormControl variant="outlined" sx={{width:'25%'}} disabled>
+                                            <FormControl variant="outlined" sx={{ width: '25%' }} disabled>
                                                 <OutlinedInput
                                                     size="small"
                                                     {...register("countryCode",
@@ -330,9 +385,15 @@ const ApplicationDetailCard = (
                                                             value: currentApplicationDetailData.contactFaxNo.countryCode,
                                                         })}
                                                     id='countryCode'
+                                                    sx={{
+                                                        "& .MuiInputBase-input.Mui-disabled": {
+                                                            WebkitTextFillColor: "#000000",
+                                                            background: "#f8f8f8",
+                                                        },
+                                                    }}
                                                 />
                                             </FormControl>
-                                            <FormControl variant="outlined" sx={{width:'100%'}} disabled>
+                                            <FormControl variant="outlined" sx={{ width: '100%' }} disabled>
                                                 <OutlinedInput
                                                     size="small"
                                                     {...register("faxNumber",
@@ -340,6 +401,12 @@ const ApplicationDetailCard = (
                                                             value: currentApplicationDetailData.contactFaxNo.faxNumber,
                                                         })}
                                                     id='faxNumber'
+                                                    sx={{
+                                                        "& .MuiInputBase-input.Mui-disabled": {
+                                                            WebkitTextFillColor: "#000000",
+                                                            background: "#f8f8f8",
+                                                        },
+                                                    }}
                                                 />
                                             </FormControl>
                                         </Stack>
@@ -353,31 +420,31 @@ const ApplicationDetailCard = (
                                         <Grid item xs={12} md={6} lg={6}>
                                             <Grid container direction="row">
                                                 <Grid item xs={12} md={3} lg={3}
-                                                    sx={{display: 'flex', alignItems: 'center'}}>
+                                                    sx={{ display: 'flex', alignItems: 'center' }}>
                                                     <FormLabel>犒件檔案:</FormLabel>
                                                 </Grid>
-                                                <Grid item xs={12} md={9} lg={9} sx={{display: 'flex', alignItems: 'center'}}>
+                                                <Grid item xs={12} md={9} lg={9} sx={{ display: 'flex', alignItems: 'center' }}>
                                                     <Grid container direction="row" justifyContent="flex-start">
-                                                        <Grid item xs={12} md={5} lg={5} sx={{display: 'flex', alignItems: 'center'}}>
+                                                        <Grid item xs={12} md={5} lg={5} sx={{ display: 'flex', alignItems: 'center' }}>
                                                             <FormControl variant="outlined" fullWidth  >
                                                                 <Typography
                                                                     fullWidth
                                                                     id='fileName'
                                                                 >
-                                                                {fileDetail.filename}
+                                                                    {fileDetail.filename}
                                                                 </Typography>
                                                             </FormControl>
                                                         </Grid>
-                                                        <Grid item  md={2} lg={2}>
+                                                        <Grid item md={2} lg={2}>
                                                             <Button
-                                                                    size="small"
-                                                                    variant="contained"
-                                                                    onClick={onDownloadClick()}
-                                                                    sx={{
-                                                                        textTransform: 'capitalize',
-                                                                        alignItems: 'end',
-                                                                    }}>
-                                                                    <DownloadIcon/>
+                                                                size="small"
+                                                                variant="contained"
+                                                                onClick={onDownloadClick()}
+                                                                sx={{
+                                                                    textTransform: 'capitalize',
+                                                                    alignItems: 'end',
+                                                                }}>
+                                                                <DownloadIcon />
                                                             </Button>
                                                         </Grid>
                                                     </Grid>
@@ -386,7 +453,18 @@ const ApplicationDetailCard = (
                                         </Grid>
                                     </Grid>
                                 </Grid>
-                            </Grid> 
+                            </Grid>
+                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1, paddingTop: 2}}>
+                                <Grid container alignItems={"center"}>
+                                    <Grid item xs={12} md={3} lg={3}
+                                        sx={{ display: 'flex', alignItems: 'center' }}>
+                                        <FormLabel>備註:</FormLabel>
+                                    </Grid>
+                                    <Grid item xs={12} md={9} lg={9}>
+                                        <FormLabel>{currentApplicationDetailData.remarks}</FormLabel>
+                                    </Grid>
+                                </Grid>
+                            </Grid>
                         </Grid>
                     </Grid>
                 </form>