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