Merge branch 'master' of https://git.2fi-solutions.com/alex/PNSPS-frontend-MaterialUI

src/pages/Payment/Details_GLD/DataGrid.js

@@ -2,10 +2,14 @@
 import {
     Typography,
 } from '@mui/material';
-
+import {
+    isORGLoggedIn,
+  } from "utils/Utils";
 import * as React from 'react';
 import * as FormatUtils from "utils/FormatUtils"
 import { FiDataGrid } from "components/FiDataGrid";
+import * as DateUtils from "utils/DateUtils"
+
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchPublicNoticeTable({ recordList }) {
@@ -23,14 +27,28 @@ export default function SearchPublicNoticeTable({ recordList }) {
     }, [recordList]);
 
     const columns = [
+        {
+            field: "id",
+            headerName: "No.",
+            filterable: false,
+            renderCell: (params) => {
+                return (params.row.index_number);
+
+            }
+        },
         {
             id: 'appNo',
             field: 'appNo',
-            headerName: 'App No.',
+            headerName:'Particulars',
             flex: 1,
             renderCell: (params) => {
-                let appNo = params?.row?.appNo??"";
-                return <div style={{ margin: 4 }}>{appNo}<br/>{params?.row?.remarks??""}</div>
+                let appNo = params.row.appNo;
+                // console.log(params)
+                return <div style={{ margin: 4, textAlign:"left"}}>Gazette Supplement No. 6 <br/>
+                    {isORGLoggedIn()?<>Care Of: {params.row.careOf}<br /></>:null}
+                    App No: {appNo}<br/>
+                    Issue Date: {DateUtils.dateStr(params.row.issueDate)}<br/>
+                    Length: {params.row.length+ " cm"}</div>
             },
         },
         {
@@ -48,7 +66,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
         <div style={{ minHeight: 400, width: '100%' }}>
 
             <FiDataGrid
-                rowHeight={80}
+                rowHeight={150}
                 rows={rows}
                 columns={columns}
                 initialState={{

src/pages/Payment/Details_GLD/PaymentDetails.js

@@ -3,6 +3,7 @@ import {
     Grid,
     Typography,
     FormLabel,
+    Button
 } from '@mui/material';
 
 import * as React from "react";
@@ -11,8 +12,9 @@ import * as PaymentStatus from "utils/statusUtils/PaymentStatus";
 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';
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
-const PaymentDetails = ({ formData, }) => {
+const PaymentDetails = ({ formData,doPrint }) => {
 
     const [data, setData] = React.useState({});
     const [onReady, setOnReady] = React.useState(false);
@@ -51,13 +53,13 @@ const PaymentDetails = ({ formData, }) => {
                 <form>
                     <Grid container>
                         <Grid item xs={12} md={12} >
-                            <Grid container >
-                                <Grid item xs={3} md={3} sx={{ display: 'flex', alignItems: 'center', color: "#000000" }}>
+                            <Grid container alignItems="center">
+                                <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right", alignItems: 'center', color: "#000000" }}>
                                     <FormLabel sx={{ color: "#000000" }}>
                                         Status:
                                     </FormLabel>
                                 </Grid>
-                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
+                                <Grid item xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
                                     <FormLabel sx={{ display: 'flex', alignItems: 'center', color: "#000000" }}>
                                         {PaymentStatus.getStatus_Eng(data.status)}
                                     </FormLabel>
@@ -66,12 +68,12 @@ const PaymentDetails = ({ formData, }) => {
                         </Grid>
                         <Grid item xs={12} md={12}>
                             <Grid container >
-                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
+                                <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                     <FormLabel sx={{ color: "#000000" }}>
                                         Trans No.:
                                     </FormLabel>
                                 </Grid>
-                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
+                                <Grid item xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
                                     <FormLabel sx={{ color: "#000000" }}>
                                         {data.payload?.transactionid}
                                     </FormLabel>
@@ -80,12 +82,12 @@ const PaymentDetails = ({ formData, }) => {
                         </Grid>
                         <Grid item xs={12} md={12}>
                             <Grid container >
-                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
+                                <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                     <FormLabel sx={{ color: "#000000" }}>
                                         Trans Date:
                                     </FormLabel>
                                 </Grid>
-                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
+                                <Grid item xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
                                     <FormLabel sx={{ color: "#000000" }}>
                                         {data.transDateStr + " (DD/MM/YYYY)"}
                                     </FormLabel>
@@ -94,12 +96,12 @@ const PaymentDetails = ({ formData, }) => {
                         </Grid>
                         <Grid item xs={12} md={12}>
                             <Grid container >
-                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
+                                <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                     <FormLabel sx={{ color: "#000000" }}>
                                         Trans Time:
                                     </FormLabel>
                                 </Grid>
-                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
+                                <Grid item xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
                                     <FormLabel sx={{ color: "#000000" }}>
                                         {data.transTimeStr + " (HH:MI:SS)"}
                                     </FormLabel>
@@ -108,12 +110,12 @@ const PaymentDetails = ({ formData, }) => {
                         </Grid>
                         <Grid item xs={12} md={12}>
                             <Grid container >
-                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
+                                <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                     <FormLabel sx={{ color: "#000000" }}>
                                         EGIS Ref No.:
                                     </FormLabel>
                                 </Grid>
-                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
+                                <Grid item xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
                                     <FormLabel sx={{ color: "#000000" }}>
                                         {data.egisRefNo}
                                     </FormLabel>
@@ -122,12 +124,12 @@ const PaymentDetails = ({ formData, }) => {
                         </Grid>
                         <Grid item xs={12} md={12}>
                             <Grid container >
-                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
+                                <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                     <FormLabel sx={{ color: "#000000" }}>
                                         Payment Amount:
                                     </FormLabel>
                                 </Grid>
-                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
+                                <Grid item xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
                                     <FormLabel sx={{ color: "#000000" }}>
                                         {"HK$ " + FormatUtils.currencyFormat(data.payload?.amount)}
                                     </FormLabel>
@@ -136,19 +138,33 @@ const PaymentDetails = ({ formData, }) => {
                         </Grid>
                         <Grid item xs={12} md={12}>
                             <Grid container >
-                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
+                                <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                     <FormLabel sx={{ color: "#000000" }}>
                                         Payment Method:
                                     </FormLabel>
                                 </Grid>
-                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
+                                <Grid item xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
                                     <FormLabel sx={{ color: "#000000" }}>
                                         {getPaymentMethod()}
                                     </FormLabel>
                                 </Grid>
                             </Grid>
                         </Grid>
-
+                        <Grid item xs={12} md={12}>
+                            <Grid container alignItems="center">
+                                <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
+                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
+                                        Payment Receipt:
+                                    </FormLabel>
+                                </Grid>
+                                <Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
+                                        <Button className="printHidden" variant="contained" sx={{ mt:2 }} onClick={doPrint}>
+                                            <DownloadIcon/>
+                                            <Typography sx={{fontSize: "16px"}}>Download</Typography>
+                                        </Button>
+                                </Grid>
+                            </Grid>
+                        </Grid>
                     </Grid>
                 </form>
             </MainCard>

src/pages/Payment/Details_GLD/index.js

@@ -4,7 +4,7 @@ import {
     Typography,
     Stack,
     Box,
-    Button
+    // Button
 } from '@mui/material';
 import * as UrlUtils from "utils/ApiPathConst";
 import * as React from "react";
@@ -37,20 +37,20 @@ const Index = () => {
     const [record, setRecord] = React.useState();
     const [itemList, setItemList] = React.useState([]);
     const [onReady, setOnReady] = React.useState(false);
-    const [detailsOrder, setDetailsOrder] = React.useState(2);
+    // const [detailsOrder, setDetailsOrder] = React.useState(2);
 
     React.useEffect(() => {
         loadForm();
-        window.addEventListener('resize', handleResize);
+        // window.addEventListener('resize', handleResize);
     }, []);
 
     React.useEffect(() => {
         setOnReady(true);
     }, [record]);
 
-    const handleResize = () => {
-        setDetailsOrder(window.innerWidth > 1023 ? 2 : -1);
-    }
+    // const handleResize = () => {
+    //     setDetailsOrder(window.innerWidth > 1023 ? 2 : -1);
+    // }
 
     const doPrint = () => {
         // window.print();
@@ -96,21 +96,12 @@ const Index = () => {
                         </Grid>
                         {/*row 1*/}
                         <Grid item xs={12} md={12} sx={{textAlign: "center" }}>
-                        <Button className="printHidden" variant="outlined" sx={{mt:2}} onClick={doPrint}>
-                                <Typography variant="h5">Print</Typography>
-                            </Button>
-                            <Grid container justifyContent="center" spacing={2} sx={{ p: 2 }} alignitems="stretch" >
-                                <Grid item xs={12} md={5} sx={{ pt: 1, pb: 2 }} style={{  height: '100%', order: 1 }}>
-                                    <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
-                                        <DataGrid
-                                            recordList={itemList}
-                                        />
-                                    </Box>
-                                </Grid>
-                                <Grid className="printOrder" item xs={12} md={5} sx={{ pt: 2 }} style={{ height: '100%', order: detailsOrder }}>
+                            <Grid container justifyContent="center" direction="column" spacing={2} sx={{ p: 2 }} alignitems="stretch" >
+                                <Grid className="printOrder" item xs={12} md={5} sx={{ pt: 2 }} style={{ height: '100%', order: 1 }}>
                                     <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
                                         <PaymentDetails
                                             formData={record}
+                                            doPrint={doPrint}
                                             style={{
                                                 display: "flex",
                                                 height: "100%",
@@ -119,6 +110,13 @@ const Index = () => {
                                         />
                                     </Box>
                                 </Grid>
+                                <Grid item xs={12} md={5} sx={{ pt: 1, pb: 2 }} style={{  height: '100%', order: 2 }}>
+                                    <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
+                                        <DataGrid
+                                            recordList={itemList}
+                                        />
+                                    </Box>
+                                </Grid>
                             </Grid>
                         </Grid>
                         {/*row 2*/}

src/pages/Payment/Details_Public/DataGrid.js

@@ -40,7 +40,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
         {
             id: 'appNo',
             field: 'appNo',
-            headerName:'詳細',
+            headerName:'項目',
             flex: 1,
             renderCell: (params) => {
                 let appNo = params.row.appNo;
@@ -55,7 +55,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
         {
             id: 'fee',
             field: 'fee',
-            headerName: '金額 ($)',
+            headerName: '金額 (HK$)',
             width: 150,
             valueGetter: (params) => {
                 return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";
@@ -77,7 +77,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
                 }}
             />
 
-            <Typography align="right" variant= "h3">付款總額: <span style={{ color: "blue", fontWeight: "bold", }}> HK$ {FormatUtils.currencyFormat(total)}</span></Typography>
+            <Typography align="right" variant= "h3">付款總額: <span style={{ color: "blue", fontWeight: "bold", }}> (HK$) {FormatUtils.currencyFormat(total)}</span></Typography>
         </div>
     );
 }

src/pages/Payment/Details_Public/PaymentDetails.js

@@ -3,6 +3,7 @@ import {
     Grid,
     Typography,
     FormLabel,
+    Button
 } from '@mui/material';
 
 import * as React from "react";
@@ -11,8 +12,9 @@ import * as PaymentStatus from "utils/statusUtils/PaymentStatus";
 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';
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
-const PaymentDetails = ({ formData, }) => {
+const PaymentDetails = ({ formData,doPrint }) => {
 
     const [data, setData] = React.useState({});
     const [onReady, setOnReady] = React.useState(false);
@@ -45,106 +47,125 @@ const PaymentDetails = ({ formData, }) => {
                 border={false}
                 content={false}
             >
-                <Typography variant="h5" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
+                <Typography variant="h5" sx={{ textAlign: "center", mb: 2, borderBottom: "1px solid black" }}>
                     付款詳情
                 </Typography>
                 <form>
-                    <Grid container>
-                        <Grid item xs={12} md={12} >
+                    <Grid container >
+                        <Grid item>
                             <Grid container >
-                                <Grid item xs={3} md={3} sx={{ display: 'flex', alignItems: 'center', color: "#000000" }}>
-                                    <FormLabel sx={{ color: "#000000" }}>
-                                        狀態:
-                                    </FormLabel>
+                                <Grid item xs={12} md={12} >
+                                    <Grid container alignItems="center">
+                                        <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right", alignItems: 'center', color: "#000000" }}>
+                                            <FormLabel sx={{ color: "#000000" }}>
+                                                狀態:
+                                            </FormLabel>
+                                        </Grid>
+                                        <Grid item xs={6} md={5} sx={{ ml:5,textAlign: "left" }}>
+                                            <FormLabel sx={{ display: 'flex', alignItems: 'center', color: "#000000" }}>
+                                                {PaymentStatus.getStatus_Cht(data.status)}
+                                            </FormLabel>
+                                        </Grid>
+                                    </Grid>
                                 </Grid>
-                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
-                                    <FormLabel sx={{ display: 'flex', alignItems: 'center', color: "#000000" }}>
-                                        {PaymentStatus.getStatus_Cht(data.status)}
-                                    </FormLabel>
+                                <Grid item xs={12} md={12}>
+                                    <Grid container >
+                                        <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
+                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
+                                                交易號碼:
+                                            </FormLabel>
+                                        </Grid>
+                                        <Grid item  xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
+                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
+                                                {data.payload?.transactionid}
+                                            </FormLabel>
+                                        </Grid>
+                                    </Grid>
                                 </Grid>
-                            </Grid>
-                        </Grid>
-                        <Grid item xs={12} md={12}>
-                            <Grid container >
-                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
-                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
-                                        交易號碼:
-                                    </FormLabel>
-                                </Grid>
-                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
-                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
-                                        {data.payload?.transactionid}
-                                    </FormLabel>
-                                </Grid>
-                            </Grid>
-                        </Grid>
-                        <Grid item xs={12} md={12}>
-                            <Grid container >
-                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
-                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
-                                        交易日期:
-                                    </FormLabel>
-                                </Grid>
-                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
-                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
-                                        {data.transDateStr + " (DD/MM/YYYY)"}
-                                    </FormLabel>
-                                </Grid>
-                            </Grid>
-                        </Grid>
-                        <Grid item xs={12} md={12}>
-                            <Grid container >
-                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
-                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
-                                        交易時間:
-                                    </FormLabel>
-                                </Grid>
-                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
-                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
-                                        {data.transTimeStr + " (HH:MI:SS)"}
-                                    </FormLabel>
-                                </Grid>
-                            </Grid>
-                        </Grid>
-                        <Grid item xs={12} md={12}>
-                            <Grid container >
-                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
-                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
-                                        付款參考號碼:
-                                    </FormLabel>
+                                <Grid item xs={12} md={12}>
+                                    <Grid container >
+                                        <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
+                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
+                                                交易日期:
+                                            </FormLabel>
+                                        </Grid>
+                                        <Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
+                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
+                                                {data.transDateStr + " (DD/MM/YYYY)"}
+                                            </FormLabel>
+                                        </Grid>
+                                    </Grid>
                                 </Grid>
-                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
-                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
-                                        {data.egisRefNo}
-                                    </FormLabel>
+                                <Grid item xs={12} md={12}>
+                                    <Grid container >
+                                        <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
+                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
+                                                交易時間:
+                                            </FormLabel>
+                                        </Grid>
+                                        <Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
+                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
+                                                {data.transTimeStr + " (HH:MI:SS)"}
+                                            </FormLabel>
+                                        </Grid>
+                                    </Grid>
                                 </Grid>
-                            </Grid>
-                        </Grid>
-                        <Grid item xs={12} md={12}>
-                            <Grid container >
-                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
-                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
-                                        付款總額:
-                                    </FormLabel>
+                                <Grid item xs={12} md={12}>
+                                    <Grid container >
+                                        <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
+                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
+                                                付款參考號碼:
+                                            </FormLabel>
+                                        </Grid>
+                                        <Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
+                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
+                                                {data.egisRefNo}
+                                            </FormLabel>
+                                        </Grid>
+                                    </Grid>
                                 </Grid>
-                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
-                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
-                                        {"HK$ " + FormatUtils.currencyFormat(data.payload?.amount)}
-                                    </FormLabel>
+                                <Grid item xs={12} md={12}>
+                                    <Grid container >
+                                        <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
+                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
+                                                付款總額:
+                                            </FormLabel>
+                                        </Grid>
+                                        <Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
+                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
+                                                {"HK$ " + FormatUtils.currencyFormat(data.payload?.amount)}
+                                            </FormLabel>
+                                        </Grid>
+                                    </Grid>
                                 </Grid>
-                            </Grid>
-                        </Grid>
-                        <Grid item xs={12} md={12}>
-                            <Grid container >
-                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
-                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
-                                        付款方式:
-                                    </FormLabel>
+                                <Grid item xs={12} md={12}>
+                                    <Grid container >
+                                        <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
+                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
+                                                付款方式:
+                                            </FormLabel>
+                                        </Grid>
+                                        <Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
+                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
+                                                {getPaymentMethod()}
+                                            </FormLabel>
+                                        </Grid>
+                                    </Grid>
                                 </Grid>
-                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
-                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
-                                        {getPaymentMethod()}
-                                    </FormLabel>
+                                <Grid item xs={12} md={12}>
+                                    <Grid container alignItems="center">
+                                        <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
+                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
+                                                付款收據:
+                                            </FormLabel>
+                                        </Grid>
+                                        <Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
+                                                <Button className="printHidden" variant="contained" sx={{ mt:2 }} onClick={doPrint}>
+                                                    <DownloadIcon/>
+                                                    <Typography sx={{fontSize: "16px"}}>下載</Typography>
+                                                </Button>
+                                        </Grid>
+                                    </Grid>
                                 </Grid>
                             </Grid>
                         </Grid>

src/pages/Payment/Details_Public/index.js

@@ -4,7 +4,7 @@ import {
     Typography,
     Stack,
     Box,
-    Button
+    // Button
 } from '@mui/material';
 import * as UrlUtils from "utils/ApiPathConst";
 import * as React from "react";
@@ -37,21 +37,21 @@ const Index = () => {
     const [record, setRecord] = React.useState();
     const [itemList, setItemList] = React.useState([]);
     const [onReady, setOnReady] = React.useState(false);
-    const [detailsOrder, setDetailsOrder] = React.useState(2);
+    // const [detailsOrder, setDetailsOrder] = React.useState(2);
 
     React.useEffect(() => {
         loadForm();
 
-        window.addEventListener('resize', handleResize)
+        // window.addEventListener('resize', handleResize)
     }, []);
 
     React.useEffect(() => {
         setOnReady(true);
     }, [record]);
 
-    const handleResize = () => {
-        setDetailsOrder(window.innerWidth > 1023 ? 2 : -1);
-    }
+    // const handleResize = () => {
+    //     setDetailsOrder(window.innerWidth > 1023 ? 2 : -1);
+    // }
 
     const doPrint = () => {
         // window.print();
@@ -89,7 +89,6 @@ const Index = () => {
                         {`@media print {.printHidden{display: none;} .printOrder{order:-1 !important;}`}
                     </style>
                     <Grid container className="printheight" sx={{ minHeight: '80%', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
-
                         <Grid className="printHidden" item xs={12} width="100%">
                             <div style={BackgroundHead} width="100%">
                                 <Stack direction="row" height='70px'>
@@ -99,21 +98,12 @@ const Index = () => {
                         </Grid>
                         {/*row 1*/}
                         <Grid item xs={12} md={12} spacing={2} sx={{ textAlign: "center" }}>
-                            <Button className="printHidden" variant="outlined" sx={{ mt:2 }} onClick={doPrint}>
-                                <Typography variant="h5">Print</Typography>
-                            </Button>
-                            <Grid container justifyContent="center" spacing={2} sx={{ p: 2 }} alignitems="stretch" >
-                                <Grid item xs={12} md={5} sx={{ pt: 1, pb: 2 }} style={{ height: '100%', order: 1 }}>
-                                    <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
-                                        <DataGrid
-                                            recordList={itemList}
-                                        />
-                                    </Box>
-                                </Grid>
-                                <Grid item className="printOrder" xs={12} md={5} sx={{ pt: 2 }} style={{ height: '100%', order: detailsOrder }}>
+                            <Grid container justifyContent="center" direction="column" spacing={2} sx={{ p: 2 }} alignitems="stretch" >
+                                <Grid item className="printOrder" xs={12} md={12} sx={{ pt: 2 }} style={{ height: '100%', order: 1 }}>
                                     <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
                                         <PaymentDetails
                                             formData={record}
+                                            doPrint={doPrint}
                                             style={{
                                                 display: "flex",
                                                 height: "100%",
@@ -122,6 +112,13 @@ const Index = () => {
                                         />
                                     </Box>
                                 </Grid>
+                                <Grid item xs={12} md={12} sx={{ pt: 1, pb: 2 }} style={{ height: '100%', order: 2 }}>
+                                    <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
+                                        <DataGrid
+                                            recordList={itemList}
+                                        />
+                                    </Box>
+                                </Grid>
                             </Grid>
                         </Grid>
                         {/*row 2*/}

src/pages/Payment/FPS/AckPage.js

@@ -43,6 +43,7 @@ const AckPage = () => {
     const [paymentData, setPaymentData] = React.useState({});
     const [responeData, setResponeDataData] = React.useState({});
     const [itemList, setItemList] = React.useState([]);
+    const [paymentId, setPaymentId] = React.useState("");
     
     const [transactionData, setTransactionData] = React.useState({});
     // const [transactionDate, setTransactionDate] = React.useState("");
@@ -88,6 +89,7 @@ const AckPage = () => {
             },
             onSuccess: function(responseData){
                 setResponeDataData(responseData)
+                setPaymentId(responseData.paymentdetail.paymentid)
                 if (responseData.paymentdetail?.result?.paymentstatuscode === "APPR") {
                     localStorage.removeItem("webtoken");
                     localStorage.removeItem("transactionid");
@@ -136,143 +138,153 @@ const AckPage = () => {
         // )
     }
 
+    const doPrint = () => {
+        // window.print();
+        HttpUtils.fileDownload({
+            url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+paymentId,
+        });
+    };
+
     return (
         !onReady ?
             <LoadingComponent />
             :
             transactionData.paymentdetail?.result?.paymentstatuscode === "APPR" ?
                 (
-                    <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
-                        <Grid item xs={12} width="100%">
-                            <div style={BackgroundHead} width="100%">
-                                <Stack direction="row" height='70px'>
-                                    <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事：付款成功</Typography>
-                                </Stack>
-                            </div>
-                        </Grid>
-                        {/*row 1*/}
-                        <Grid item xs={12} md={12} >
-                            <Grid container justifyContent="flex-start" alignItems="center" >
-                                <center>
-                                    <Grid item xs={12} md={12} >
-
-                                        <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
-                                            您的申請和付款已收到
-                                        </Typography>
-
-                                        <Grid container>
-                                            <Grid item xs={12} md={12} sx={{ textAlign: "center" }}>
-                                                <Grid container justifyContent="center" spacing={2} sx={{ p: 2 }} alignitems="stretch" >
-                                                    <Grid item xs={12} md={5} sx={{ pt: 1, pb: 2 }} style={{ height: '100%' }}>
-                                                        <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
-                                                            <DataGrid
-                                                                recordList={itemList}
-                                                            />
-                                                        </Box>
-                                                    </Grid>
-                                                    <Grid item xs={12} md={5} sx={{ pt: 2 }} style={{ height: '100%' }}>
-                                                        <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
-                                                            <PaymentDetails
-                                                                formData={paymentData}
-                                                                style={{
-                                                                    display: "flex",
-                                                                    height: "100%",
-                                                                    flex: 1
-                                                                }}
-                                                            />
-                                                        </Box>
-                                                    </Grid>
-                                                </Grid>
-                                            </Grid>
-                                         
-                                        </Grid>
+                    <div>
+                        <style>
+                            {`@media print {.printHidden{display: none;} .printOrder{order:-1 !important;}`}
+                        </style>
+                        <Grid container className="printheight" sx={{ minHeight: '80%', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center">
+                            <Grid className="printHidden" item xs={12} width="100%">
+                                <div style={BackgroundHead} width="100%">
+                                    <Stack direction="row" height='70px'>
+                                        <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事：付款成功</Typography>
+                                    </Stack>
+                                </div>
+                            </Grid>
+                            {/*row 1*/}
+                            <Grid item xs={12} md={12} spacing={2} sx={{ textAlign: "center" }}>
+                                <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
+                                    您的申請和付款已收到
+                                </Typography>
+                                <Grid container justifyContent="center" direction="column" spacing={2} sx={{ p: 2 }} alignitems="stretch" >
+                                    <Grid item className="printOrder" xs={12} md={12} sx={{ pt: 2 }} style={{ height: '100%', order: 1 }}>
+                                        <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
+                                            <PaymentDetails
+                                                formData={paymentData}
+                                                doPrint={doPrint}
+                                                style={{
+                                                    display: "flex",
+                                                    height: "100%",
+                                                    flex: 1
+                                                }}
+                                            />
+                                        </Box>
+                                    </Grid>
+                                    <Grid item xs={12} md={12} sx={{ pt: 1, pb: 2 }} style={{ height: '100%', order: 2 }}>
+                                        <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
+                                            <DataGrid
+                                                recordList={itemList}
+                                            />
+                                        </Box>
                                     </Grid>
-                                </center>
+                                </Grid>
                             </Grid>
-                        </Grid>
-                        {/*row 2*/}
-                    </Grid >
+                            {/*row 2*/}
+                        </Grid >
+                    </div>
                 ) :
                 (transactionData.paymentdetail?.result?.paymentstatuscode === "CANC" ?
-                    <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
-                        <Grid item xs={12} width="100%">
-                            <div style={BackgroundHead} width="100%">
-                                <Stack direction="row" height='70px'>
-                                    <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事：付款取消</Typography>
-                                </Stack>
-                            </div>
-                        </Grid>
-                        {/*row 1*/}
-                        <Grid item xs={12} md={12} >
-                            <Grid container justifyContent="flex-start" alignItems="center" >
-                                <center>
-                                    <Grid item xs={12} md={8} >
-                                        <Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
-                                            付款取消訊息：
-                                            <br /><br />
-                                            您的付款已被取消。我們收到了您的付款請求，但由於某些原因，付款無法完成。請注意以下事項：
-                                            <br /><br />
-                                            如果您主動取消了支付，請確認並確保取消是您的意願。
-                                            <br />
-                                            如果付款被取消是由於系統問題或其他原因，請您嘗試以下解決方法：
-                                            <br /><br />
-                                            檢查您的支付帳戶是否有任何異常或限制。
-                                            <br />
-                                            確保您的付款資訊準確無誤。
-                                            <br />
-                                            檢查您的網路連線是否正常。
-                                            <br /><br />
-                                            如果您需要進一步的協助或有任何疑問，請隨時與我們聯繫，我們將盡快解決您的付款問題。謝謝！
-                                        </Typography>
-                                    </Grid>
-                                </center>
+                    <div>
+                        <style>
+                            {`@media print {.printHidden{display: none;} .printOrder{order:-1 !important;}`}
+                        </style>
+                        <Grid container className="printheight" sx={{ minHeight: '80%', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
+                            <Grid className="printHidden" item xs={12} width="100%">
+                                <div style={BackgroundHead} width="100%">
+                                    <Stack direction="row" height='70px'>
+                                        <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事：付款取消</Typography>
+                                    </Stack>
+                                </div>
+                            </Grid>
+                            {/*row 1*/}
+                            <Grid item xs={12} md={12} >
+                                <Grid container justifyContent="flex-start" alignItems="center" >
+                                    <center>
+                                        <Grid item xs={12} md={8} >
+                                            <Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
+                                                付款取消訊息：
+                                                <br /><br />
+                                                您的付款已被取消。我們收到了您的付款請求，但由於某些原因，付款無法完成。請注意以下事項：
+                                                <br /><br />
+                                                如果您主動取消了支付，請確認並確保取消是您的意願。
+                                                <br />
+                                                如果付款被取消是由於系統問題或其他原因，請您嘗試以下解決方法：
+                                                <br /><br />
+                                                檢查您的支付帳戶是否有任何異常或限制。
+                                                <br />
+                                                確保您的付款資訊準確無誤。
+                                                <br />
+                                                檢查您的網路連線是否正常。
+                                                <br /><br />
+                                                如果您需要進一步的協助或有任何疑問，請隨時與我們聯繫，我們將盡快解決您的付款問題。謝謝！
+                                            </Typography>
+                                        </Grid>
+                                    </center>
+                                </Grid>
                             </Grid>
-                        </Grid>
-                        {/*row 2*/}
-                    </Grid >
+                            {/*row 2*/}
+                        </Grid >
+                    </div>
                     :
-                    <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
-                        <Grid item xs={12} width="100%">
-                            <div style={BackgroundHead} width="100%">
-                                <Stack direction="row" height='70px'>
-                                    <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事：付款失敗</Typography>
-                                </Stack>
-                            </div>
-                        </Grid>
-                        {/*row 1*/}
-                        <Grid item xs={12} md={12} >
-                            <Grid container justifyContent="flex-start" alignItems="center" >
-                                <center>
-                                    <Grid item xs={12} md={8} >
+                    <div>
+                        <style>
+                            {`@media print {.printHidden{display: none;} .printOrder{order:-1 !important;}`}
+                        </style>
+                        <Grid container className="printheight" sx={{ minHeight: '80%', backgroundColor: '#fff' }}direction="column" justifyContent="flex-start" alignItems="center" >
+                            <Grid className="printHidden" item xs={12} width="100%">
+                                <div style={BackgroundHead} width="100%">
+                                    <Stack direction="row" height='70px'>
+                                        <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事：付款失敗</Typography>
+                                    </Stack>
+                                </div>
+                            </Grid>
+                            {/*row 1*/}
+                            <Grid item xs={12} md={12} >
+                                <Grid container justifyContent="flex-start" alignItems="center" >
+                                    <center>
+                                        <Grid item xs={12} md={8} >
 
-                                        <Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
-                                            付款失敗訊息：
-                                            <br /><br />
-                                            親愛的用戶，很遺憾地告訴您，您的付款操作未成功。我們在處理您的付款時遇到了問題。請您仔細檢查以下事項：
-                                            <br /><br />
-                                            您的支付帳戶餘額是否足夠。
-                                            <br />
-                                            您提供的付款資訊是否準確無誤。
-                                            <br />
-                                            請檢查您的網路連線是否正常。
-                                            <br /><br />
-                                            如果您已確認以上問題無誤，但付款失敗，請您嘗試以下解決方法：
-                                            <br /><br />
-                                            嘗試使用其他付款方式進行付款。
-                                            <br />
-                                            檢查您的支付帳戶是否有異常或限制。
-                                            <br />
-                                            聯絡我們的客服人員尋求協助。
-                                            <br /><br />
-                                            如果您需要進一步的協助或有任何疑問，請隨時與我們聯繫。非常抱歉給您帶來不便，我們將盡快解決您的付款問題。謝謝！
-                                        </Typography>
+                                            <Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
+                                                付款失敗訊息：
+                                                <br /><br />
+                                                親愛的用戶，很遺憾地告訴您，您的付款操作未成功。我們在處理您的付款時遇到了問題。請您仔細檢查以下事項：
+                                                <br /><br />
+                                                您的支付帳戶餘額是否足夠。
+                                                <br />
+                                                您提供的付款資訊是否準確無誤。
+                                                <br />
+                                                請檢查您的網路連線是否正常。
+                                                <br /><br />
+                                                如果您已確認以上問題無誤，但付款失敗，請您嘗試以下解決方法：
+                                                <br /><br />
+                                                嘗試使用其他付款方式進行付款。
+                                                <br />
+                                                檢查您的支付帳戶是否有異常或限制。
+                                                <br />
+                                                聯絡我們的客服人員尋求協助。
+                                                <br /><br />
+                                                如果您需要進一步的協助或有任何疑問，請隨時與我們聯繫。非常抱歉給您帶來不便，我們將盡快解決您的付款問題。謝謝！
+                                            </Typography>
 
-                                    </Grid>
-                                </center>
+                                        </Grid>
+                                    </center>
+                                </Grid>
                             </Grid>
-                        </Grid>
-                        {/*row 2*/}
-                    </Grid >
+                            {/*row 2*/}
+                        </Grid >
+                    </div>
                 )
     );
 };

src/pages/Payment/FPS/FPS.js

@@ -305,7 +305,7 @@ const Index = () => {
                                             <br />
                                             請在規定時間內完成付款流程
                                             <br />
-                                            {"剩餘時間: "+timeDownCount}
+                                            {"剩餘時間: "+timeDownCount+ "秒"}
                                         </Typography>
                                     }
                                     <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>

src/pages/Payment/FPS/fpscallback.js

@@ -43,6 +43,7 @@ const Fpscallback = () => {
     const [paymentData, setPaymentData] = React.useState({});
     const [responeData, setResponeDataData] = React.useState({});
     const [itemList, setItemList] = React.useState([]);
+    // const [paymentId, setPaymentId] = React.useState("");
     
     const [transactionData, setTransactionData] = React.useState({});
     // const [transactionDate, setTransactionDate] = React.useState("");
@@ -135,7 +136,6 @@ const Fpscallback = () => {
         //     }
         // )
     }
-
     return (
         !onReady ?
             <LoadingComponent />

src/pages/Payment/MultiPaymentWindow.js

@@ -136,7 +136,7 @@ const MultiPaymentWindow = (props) => {
             <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="center">
               <Grid item>
                   <Typography variant="h5" sx={{ textAlign: "left" }}>
-                      請選擇付款方式:
+                      請選擇付款方法:
                   </Typography>
               </Grid>
               <Grid item>

src/pages/Payment/PaymentCallback.js

@@ -38,6 +38,7 @@ const Index = () => {
 
     const [paymentData, setPaymentData] = React.useState({});
     const [itemList, setItemList] = React.useState([]);
+    const [paymentId, setPaymentId] = React.useState("");
 
     const [transactionData, setTransactionData] = React.useState({});
     // const [transactionDate, setTransactionDate] = React.useState("");
@@ -111,6 +112,7 @@ const Index = () => {
                     },
                     onSuccess: function (responseData) {
                         setResponeDataData(responseData)
+                        setPaymentId(responseData.paymentdetail.paymentid)
                         if (responseData.paymentdetail?.result?.paymentstatuscode === "APPR") {
                             localStorage.removeItem("webtoken");
                             localStorage.removeItem("transactionid");
@@ -137,150 +139,156 @@ const Index = () => {
                 });
             }
         });
-
-
     }
 
+    const doPrint = () => {
+        // window.print();
+        HttpUtils.fileDownload({
+            url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+paymentId,
+        });
+    };
+
     return (
         !onReady ?
             <LoadingComponent />
             :
             transactionData.paymentdetail?.result?.paymentstatuscode === "APPR" ?
                 (
-                    <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
-                        <Grid item xs={12} width="100%">
-                            <div style={BackgroundHead} width="100%">
-                                <Stack direction="row" height='70px'>
-                                    <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事：付款成功</Typography>
-                                </Stack>
-                            </div>
-                        </Grid>
-                        {/*row 1*/}
-                        <Grid item xs={12} md={12} >
-                            <Grid container justifyContent="flex-start" alignItems="center" >
-                                <center>
-                                    <Grid item xs={12} md={12} >
-
-                                        <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
-                                            您的申請和付款已收到
-                                        </Typography>
-
-                                        <Grid container>
-                                            <Grid item xs={12} md={12} sx={{ textAlign: "center" }}>
-                                                <Grid container justifyContent="center" spacing={2} sx={{ p: 2 }} alignitems="stretch" >
-                                                    <Grid item xs={12} md={5} sx={{ pt: 1, pb: 2 }} style={{ height: '100%' }}>
-                                                        <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
-                                                            <DataGrid
-                                                                recordList={itemList}
-                                                            />
-                                                        </Box>
-                                                    </Grid>
-                                                    <Grid item xs={12} md={5} sx={{ pt: 2 }} style={{ height: '100%' }}>
-                                                        <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
-                                                            <PaymentDetails
-                                                                formData={paymentData}
-                                                                style={{
-                                                                    display: "flex",
-                                                                    height: "100%",
-                                                                    flex: 1
-                                                                }}
-                                                            />
-                                                        </Box>
-                                                    </Grid>
-                                                </Grid>
-                                            </Grid>
-                                           
-                                        </Grid>
+                    <div>
+                        <style>
+                            {`@media print {.printHidden{display: none;} .printOrder{order:-1 !important;}`}
+                        </style>
+                        <Grid container className="printheight" sx={{ minHeight: '80%', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center">
+                            <Grid className="printHidden" item xs={12} width="100%">
+                                <div style={BackgroundHead} width="100%">
+                                    <Stack direction="row" height='70px'>
+                                        <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事：付款成功</Typography>
+                                    </Stack>
+                                </div>
+                            </Grid>
+                            {/*row 1*/}
+                            <Grid item xs={12} md={12} spacing={2} sx={{ textAlign: "center" }}>
+                                <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
+                                    您的申請和付款已收到
+                                </Typography>
+                                <Grid container justifyContent="center" direction="column" spacing={2} sx={{ p: 2 }} alignitems="stretch" >
+                                    <Grid item className="printOrder" xs={12} md={12} sx={{ pt: 2 }} style={{ height: '100%', order: 1 }}>
+                                        <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
+                                            <PaymentDetails
+                                                formData={paymentData}
+                                                doPrint={doPrint}
+                                                style={{
+                                                    display: "flex",
+                                                    height: "100%",
+                                                    flex: 1
+                                                }}
+                                            />
+                                        </Box>
+                                    </Grid>
+                                    <Grid item xs={12} md={12} sx={{ pt: 1, pb: 2 }} style={{ height: '100%', order: 2 }}>
+                                        <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
+                                            <DataGrid
+                                                recordList={itemList}
+                                            />
+                                        </Box>
                                     </Grid>
-                                </center>
+                                </Grid>
                             </Grid>
-                        </Grid>
-                        {/*row 2*/}
-                    </Grid >
+                            {/*row 2*/}
+                        </Grid >
+                    </div>
                 ) :
                 (transactionData.paymentdetail?.result?.paymentstatuscode === "CANC" ?
-
-                    <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
-                        <Grid item xs={12} width="100%">
-                            <div style={BackgroundHead} width="100%">
-                                <Stack direction="row" height='70px'>
-                                    <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事：付款取消</Typography>
-                                </Stack>
-                            </div>
-                        </Grid>
-                        {/*row 1*/}
-                        <Grid item xs={12} md={12} >
-                            <Grid container justifyContent="flex-start" alignItems="center" >
-                                <center>
-                                    <Grid item xs={12} md={8} >
-                                        <Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
-                                            付款取消訊息：
-                                            <br /><br />
-                                            您的付款已被取消。我們收到了您的付款請求，但由於某些原因，付款無法完成。請注意以下事項：
-                                            <br /><br />
-                                            如果您主動取消了支付，請確認並確保取消是您的意願。
-                                            <br />
-                                            如果付款被取消是由於系統問題或其他原因，請您嘗試以下解決方法：
-                                            <br /><br />
-                                            檢查您的支付帳戶是否有任何異常或限制。
-                                            <br />
-                                            確保您的付款資訊準確無誤。
-                                            <br />
-                                            檢查您的網路連線是否正常。
-                                            <br /><br />
-                                            如果您需要進一步的協助或有任何疑問，請隨時與我們聯繫，我們將盡快解決您的付款問題。謝謝！
-                                        </Typography>
-                                    </Grid>
-                                </center>
+                    <div>
+                        <style>
+                            {`@media print {.printHidden{display: none;} .printOrder{order:-1 !important;}`}
+                        </style>
+                        <Grid container className="printheight" sx={{ minHeight: '80%', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
+                            <Grid className="printHidden" item xs={12} width="100%">
+                                <div style={BackgroundHead} width="100%">
+                                    <Stack direction="row" height='70px'>
+                                        <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事：付款取消</Typography>
+                                    </Stack>
+                                </div>
+                            </Grid>
+                            {/*row 1*/}
+                            <Grid item xs={12} md={12} >
+                                <Grid container justifyContent="flex-start" alignItems="center" >
+                                    <center>
+                                        <Grid item xs={12} md={8} >
+                                            <Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
+                                                付款取消訊息：
+                                                <br /><br />
+                                                您的付款已被取消。我們收到了您的付款請求，但由於某些原因，付款無法完成。請注意以下事項：
+                                                <br /><br />
+                                                如果您主動取消了支付，請確認並確保取消是您的意願。
+                                                <br />
+                                                如果付款被取消是由於系統問題或其他原因，請您嘗試以下解決方法：
+                                                <br /><br />
+                                                檢查您的支付帳戶是否有任何異常或限制。
+                                                <br />
+                                                確保您的付款資訊準確無誤。
+                                                <br />
+                                                檢查您的網路連線是否正常。
+                                                <br /><br />
+                                                如果您需要進一步的協助或有任何疑問，請隨時與我們聯繫，我們將盡快解決您的付款問題。謝謝！
+                                            </Typography>
+                                        </Grid>
+                                    </center>
+                                </Grid>
                             </Grid>
-                        </Grid>
-                        {/*row 2*/}
-                    </Grid >
+                            {/*row 2*/}
+                        </Grid >
+                    </div>
                     :
-                    <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
-                        <Grid item xs={12} width="100%">
-                            <div style={BackgroundHead} width="100%">
-                                <Stack direction="row" height='70px'>
-                                    <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事：付款失敗</Typography>
-                                </Stack>
-                            </div>
-                        </Grid>
-                        {/*row 1*/}
-                        <Grid item xs={12} md={12} >
-                            <Grid container justifyContent="flex-start" alignItems="center" >
-                                <center>
-                                    <Grid item xs={12} md={8} >
+                    <div>
+                        <style>
+                            {`@media print {.printHidden{display: none;} .printOrder{order:-1 !important;}`}
+                        </style>
+                        <Grid container className="printheight" sx={{ minHeight: '80%', backgroundColor: '#fff' }}direction="column" justifyContent="flex-start" alignItems="center" >
+                            <Grid className="printHidden" item xs={12} width="100%">
+                                <div style={BackgroundHead} width="100%">
+                                    <Stack direction="row" height='70px'>
+                                        <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事：付款失敗</Typography>
+                                    </Stack>
+                                </div>
+                            </Grid>
+                            {/*row 1*/}
+                            <Grid item xs={12} md={12} >
+                                <Grid container justifyContent="flex-start" alignItems="center" >
+                                    <center>
+                                        <Grid item xs={12} md={8} >
 
-                                        <Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
-                                            付款失敗訊息：
-                                            <br /><br />
-                                            親愛的用戶，很遺憾地告訴您，您的付款操作未成功。我們在處理您的付款時遇到了問題。請您仔細檢查以下事項：
-                                            <br /><br />
-                                            您的支付帳戶餘額是否足夠。
-                                            <br />
-                                            您提供的付款資訊是否準確無誤。
-                                            <br />
-                                            請檢查您的網路連線是否正常。
-                                            <br /><br />
-                                            如果您已確認以上問題無誤，但付款失敗，請您嘗試以下解決方法：
-                                            <br /><br />
-                                            嘗試使用其他付款方式進行付款。
-                                            <br />
-                                            檢查您的支付帳戶是否有異常或限制。
-                                            <br />
-                                            聯絡我們的客服人員尋求協助。
-                                            <br /><br />
-                                            如果您需要進一步的協助或有任何疑問，請隨時與我們聯繫。非常抱歉給您帶來不便，我們將盡快解決您的付款問題。謝謝！
-                                        </Typography>
+                                            <Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
+                                                付款失敗訊息：
+                                                <br /><br />
+                                                親愛的用戶，很遺憾地告訴您，您的付款操作未成功。我們在處理您的付款時遇到了問題。請您仔細檢查以下事項：
+                                                <br /><br />
+                                                您的支付帳戶餘額是否足夠。
+                                                <br />
+                                                您提供的付款資訊是否準確無誤。
+                                                <br />
+                                                請檢查您的網路連線是否正常。
+                                                <br /><br />
+                                                如果您已確認以上問題無誤，但付款失敗，請您嘗試以下解決方法：
+                                                <br /><br />
+                                                嘗試使用其他付款方式進行付款。
+                                                <br />
+                                                檢查您的支付帳戶是否有異常或限制。
+                                                <br />
+                                                聯絡我們的客服人員尋求協助。
+                                                <br /><br />
+                                                如果您需要進一步的協助或有任何疑問，請隨時與我們聯繫。非常抱歉給您帶來不便，我們將盡快解決您的付款問題。謝謝！
+                                            </Typography>
 
-                                    </Grid>
-                                </center>
+                                        </Grid>
+                                    </center>
+                                </Grid>
                             </Grid>
-                        </Grid>
-                        {/*row 2*/}
-                    </Grid >
+                            {/*row 2*/}
+                        </Grid >
+                    </div>
                 )
-
     );
 };
 

src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js

@@ -100,19 +100,23 @@ const ApplicationDetailCard = (
         setStatus("withdraw")
     };
 
+    const doPublish =()=>()=>{
+        setStatus("publish")
+    }
+
     const onProofClick = () => {
         if (applicationDetailData.data.groupNo) {
             HttpUtils.get({
-                url: UrlUtils.CHECK_CREATE_PROOF+"/"+currentApplicationDetailData.id,
-                onSuccess:function(responeData){
-                    if(responeData.success == true){
+                url: UrlUtils.CHECK_CREATE_PROOF + "/" + currentApplicationDetailData.id,
+                onSuccess: function (responeData) {
+                    if (responeData.success == true) {
                         window.open("/proof/create/" + currentApplicationDetailData.id, "_blank", "noreferrer");
                         window.addEventListener("focus", onFocus)
-                    }else{
+                    } else {
                         let msg = responeData.msg;
-                        if(msg === "haveActiveProof"){
+                        if (msg === "haveActiveProof") {
                             msg = "Action Failed: There is already a pending payment and proofreading record for client review."
-                        }else if(msg === "haveProofed"){
+                        } else if (msg === "haveProofed") {
                             msg = "Action Failed: Already proofed."
                         }
                         setWarningText(msg);
@@ -120,8 +124,8 @@ const ApplicationDetailCard = (
                     }
                 }
             });
-            
-        }else {
+
+        } else {
             setWarningText("Please generate Gazette Code before Create Proof.");
             setIsWarningPopUp(true);
         }
@@ -199,33 +203,49 @@ const ApplicationDetailCard = (
                                             <Typography ml={1} variant="h5">Not accept</Typography>
                                         </Button>
                                     </> :
-                                    currentApplicationDetailData.status == "paid" ?
+                                    (currentApplicationDetailData.status == "confirmed" && currentApplicationDetailData.creditor == 1) ?
                                         <>
                                             <Button
                                                 // size="large"
                                                 variant="contained"
-                                                onClick={complatedClick()}
+                                                onClick={doPublish()}
                                                 sx={{
                                                     textTransform: 'capitalize',
                                                     alignItems: 'end',
                                                     backgroundColor: '#52b202'
                                                 }}>
                                                 <DoneIcon />
-                                                <Typography ml={1} variant="h5">Complete</Typography>
+                                                <Typography ml={1} variant="h5">Publish</Typography>
                                             </Button>
-                                            <Button
-                                                // size="large"
-                                                variant="contained"
-                                                onClick={withdrawnClick()}
-                                                sx={{
-                                                    textTransform: 'capitalize',
-                                                    alignItems: 'end',
-                                                    backgroundColor: '#ffa733'
-                                                }}>
-                                                <CloseIcon />
-                                                <Typography ml={1} variant="h5">Withdraw</Typography>
-                                            </Button>
-                                        </> : null
+                                        </>
+                                        :
+                                        (currentApplicationDetailData.status == "paid" && currentApplicationDetailData.creditor == 0) ?
+                                            <>
+                                                <Button
+                                                    // size="large"
+                                                    variant="contained"
+                                                    onClick={complatedClick()}
+                                                    sx={{
+                                                        textTransform: 'capitalize',
+                                                        alignItems: 'end',
+                                                        backgroundColor: '#52b202'
+                                                    }}>
+                                                    <DoneIcon />
+                                                    <Typography ml={1} variant="h5">Complete</Typography>
+                                                </Button>
+                                                <Button
+                                                    // size="large"
+                                                    variant="contained"
+                                                    onClick={withdrawnClick()}
+                                                    sx={{
+                                                        textTransform: 'capitalize',
+                                                        alignItems: 'end',
+                                                        backgroundColor: '#ffa733'
+                                                    }}>
+                                                    <CloseIcon />
+                                                    <Typography ml={1} variant="h5">Withdraw</Typography>
+                                                </Button>
+                                            </> : null
                                 }
                             </Stack>
                         </Grid>
@@ -267,7 +287,7 @@ const ApplicationDetailCard = (
                                         </Grid>
                                     </Grid>
                                 </Grid>
-                                <Grid item xs={12} sm={12} md={5.5} lg={5.5} sx={{ mb: 1, ml: {md:1, lg:3} }}>
+                                <Grid item xs={12} sm={12} md={5.5} lg={5.5} sx={{ mb: 1, ml: { md: 1, lg: 3 } }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={4} lg={4}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
@@ -329,7 +349,7 @@ const ApplicationDetailCard = (
                                         </Grid>
                                     </Grid>
                                 </Grid>
-                                <Grid item xs={12} md={5.5} lg={5.5} sx={{ mb: 1, ml: {md:1, lg:3} }}>
+                                <Grid item xs={12} md={5.5} lg={5.5} sx={{ mb: 1, ml: { md: 1, lg: 3 } }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={4} lg={4}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
@@ -351,7 +371,7 @@ const ApplicationDetailCard = (
                                                                 WebkitTextFillColor: "#000000",
                                                                 background: "#f8f8f8",
                                                             },
-                                                            mr:1
+                                                            mr: 1
                                                         }}
                                                         inputProps={{
                                                             maxLength: 3,
@@ -414,7 +434,7 @@ const ApplicationDetailCard = (
                                         </Grid>
                                     </Grid>
                                 </Grid>
-                                <Grid item xs={12} md={5.5} lg={5.5} sx={{ mb: 1, ml: {md:1, lg:3} }}>
+                                <Grid item xs={12} md={5.5} lg={5.5} sx={{ mb: 1, ml: { md: 1, lg: 3 } }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={4} lg={4}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
@@ -436,7 +456,7 @@ const ApplicationDetailCard = (
                                                                 WebkitTextFillColor: "#000000",
                                                                 background: "#f8f8f8",
                                                             },
-                                                            mr:1,
+                                                            mr: 1,
                                                         }}
                                                         inputProps={{
                                                             maxLength: 3,

src/pages/PublicNotice/Details_GLD/index.js

@@ -32,7 +32,8 @@ import {
   SET_PUBLIC_NOTICE_STATUS_COMPLATED,
   SET_PUBLIC_NOTICE_STATUS_WITHDRAW,
   SET_PUBLIC_NOTICE_STATUS_RESUBMIT,
-  SET_PUBLIC_NOTICE_STATUS_REVIEWED
+  SET_PUBLIC_NOTICE_STATUS_REVIEWED,
+  SET_PUBLIC_NOTICE_STATUS_PUBLISH
 } from "utils/ApiPathConst";
 const StatusChangeDialog = Loadable(lazy(() => import('./StatusChangeDialog')));
 import * as DateUtils from "utils/DateUtils";
@@ -182,6 +183,8 @@ const PublicNoticeDetail_GLD = () => {
         onNotAcceptClick(getReason);
       } else if (getStatus == "resubmit") {
         onReSubmitClick();
+      } else if (getStatus == "publish") {
+        onPublishClick();
       }
     }
   }, [statusWindowAccepted]);
@@ -225,6 +228,19 @@ const PublicNoticeDetail_GLD = () => {
     });
   }
 
+  const onPublishClick = () => {
+    if (params.id <= 0) return;
+    HttpUtils.get({
+      url: `${SET_PUBLIC_NOTICE_STATUS_PUBLISH}/${params.id}`,
+      onSuccess: function () {
+        setOpen(false);
+        handleClose();
+        loadApplicationDetail()
+        notifySaveSuccess()
+      }
+    });
+  }
+
   const onComplatedClick = () => {
     if (params.id > 0) {
       axios.get(`${SET_PUBLIC_NOTICE_STATUS_COMPLATED}/${params.id}`)
@@ -301,7 +317,7 @@ const PublicNoticeDetail_GLD = () => {
   }, [getUploadStatus]);
 
   return (
-    <Grid container sx={{ width:"100%", backgroundColor: 'backgroundColor.default' }} direction="column">
+    <Grid container sx={{ width: "100%", backgroundColor: 'backgroundColor.default' }} direction="column">
       <StatusChangeDialog open={open}
         handleClose={handleClose}
         setReason={setReason}
@@ -324,12 +340,12 @@ const PublicNoticeDetail_GLD = () => {
         </div>
       </Grid>
       <Grid item xs={12} sm={12} md={12} lg={12}>
-          <Stack direction="row">
-          <Button title="Back" sx={{ml:3.5, mt:2.5}} style={{ border: '2px solid' }} variant="outlined" onClick={()=>{navigate("/application/search")}}>
-            <ForwardIcon style={{height: 30, width: 50, transform : "rotate(180deg)"}}/>
+        <Stack direction="row">
+          <Button title="Back" sx={{ ml: 3.5, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/application/search") }}>
+            <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />
           </Button>
           <Typography ml={4} mt={3} variant="h4">{title}</Typography>
-          </Stack>
+        </Stack>
       </Grid>
       {/* <Grid item xs={12} >
         <Stack direction="row" height='20px' justifyContent="flex-start" alignItems="center">
@@ -341,7 +357,7 @@ const PublicNoticeDetail_GLD = () => {
           <Grid item xs={12} md={12} lg={9} xl={9}>
             <Grid container direction="column">
               <Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
-                <Box xs={12}  sx={{ ml:2 , mt:3, mr:{xs:2, sm:2}, borderRadius: '10px', backgroundColor: '#ffffff' }}>
+                <Box xs={12} sx={{ ml: 2, mt: 3, mr: { xs: 2, sm: 2 }, borderRadius: '10px', backgroundColor: '#ffffff' }}>
                   {isLoading && editMode ?
                     <LoadingComponent /> :
                     <ApplicationDetailCard
@@ -358,7 +374,7 @@ const PublicNoticeDetail_GLD = () => {
                 </Box>
               </Grid>
               <Grid item xs={12} md={12} lg={12} xl={12}>
-                <Box xs={12} sx={{ml:2, mt:3, mr:{xs:2, sm:2}, borderRadius: '10px', backgroundColor: '#ffffff' }}>
+                <Box xs={12} sx={{ ml: 2, mt: 3, mr: { xs: 2, sm: 2 }, borderRadius: '10px', backgroundColor: '#ffffff' }}>
                   <GazetteDetailCard
                     // updateUserObject={updateUserObject}
                     applicationDetailData={applicationDetailData}
@@ -369,21 +385,21 @@ const PublicNoticeDetail_GLD = () => {
                 </Box>
               </Grid>
               <Grid item xs={12} md={12} lg={12} xl={12}>
-                <Box xs={12} sx={{ml:2, mt:3, mr:{sm:2}, borderRadius: '10px',width: {xs:'92vw', sm:'96.5vw', md:"auto"}, backgroundColor: '#ffffff' }}>
+                <Box xs={12} sx={{ ml: 2, mt: 3, mr: { sm: 2 }, borderRadius: '10px', width: { xs: '92vw', sm: '96.5vw', md: "auto" }, backgroundColor: '#ffffff' }}>
                   <TabTableDetail
                     applicationDetailData={applicationDetailData}
                     proofList={proofList}
                     paymentList={paymentList}
                   />
                 </Box>
-                <br/>
+                <br />
               </Grid>
             </Grid>
           </Grid>
-          <Grid item xs={12} md={12} lg={3} xl={3} sx={{mt:{xs: -3, sm:-3}}}>
+          <Grid item xs={12} md={12} lg={3} xl={3} sx={{ mt: { xs: -3, sm: -3 } }}>
             <Grid container>
               <Grid item xs={12} md={12}>
-                <Box xs={12} md={12} height='800px' sx={{ ml:2, mt:3, mb:3, mr:{xs:2, sm:2}, borderRadius: '10px', backgroundColor: '#ffffff' }}>
+                <Box xs={12} md={12} height='800px' sx={{ ml: 2, mt: 3, mb: 3, mr: { xs: 2, sm: 2 }, borderRadius: '10px', backgroundColor: '#ffffff' }}>
                   <ClientDetailCard
                     // updateUserObject={updateUserObject}
                     applicationDetailData={applicationDetailData}

src/utils/ApiPathConst.js

@@ -77,6 +77,7 @@ export const SET_PUBLIC_NOTICE_STATUS_COMPLATED = apiPath+'/application/applicat
 export const SET_PUBLIC_NOTICE_STATUS_WITHDRAW = apiPath+'/application/application-detail-status-withdrawn';
 export const SET_PUBLIC_NOTICE_STATUS_RESUBMIT = apiPath+'/application/application-detail-status-resubmit';
 export const SET_PUBLIC_NOTICE_STATUS_REVIEWED = apiPath+'/application/application-detail-status-reviewed';
+export const SET_PUBLIC_NOTICE_STATUS_PUBLISH = apiPath+'/application/application-detail-status-publish';
 export const UPDATE_PUBLIC_NOTICE_APPLY_DETAIL = apiPath+'/application/save';
 
 export const GET_ISSUE_COMBO = apiPath+'/gazette-issue/combo';