alex
/
PNSPS-frontend-MaterialUI
1
0
Derivar 0
Código Questões 0 Pedidos de integração 0 Lançamentos 0 Wiki Trabalho
Não pode escolher mais do que 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
425 Cometimentos
5 Ramos
19 MiB
 
 
Árvore: 2aec6ec0a5
Ramos Etiquetas
${ item.name }
Criar ramo ${ searchTerm }
de '2aec6ec0a5'
${ noResults }
PNSPS-frontend-MaterialUI/src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js

563 linhas
34 KiB
Em bruto Responsabilidade Histórico 

  1. // material-ui

  2. import {

  3.     FormControl,

  4.     Button,

  5.     Grid,

  6.     // InputAdornment, 

  7.     Typography, FormLabel,

  8.     OutlinedInput,

  9.     Stack,

  10.     Dialog, DialogTitle, DialogContent, DialogActions

  11. } from '@mui/material';

  12. // import MainCard from "../../components/MainCard";

  13. const MainCard = Loadable(lazy(() => import('components/MainCard')));

  14. import { useForm } from "react-hook-form";

  15. import { useNavigate } from "react-router-dom";

  16. import {

  17.     useEffect,

  18.     useState

  19. } from "react";

  20. // import Checkbox from "@mui/material/Checkbox";

  21. import Loadable from 'components/Loadable';

  22. 

  23. import { lazy } from 'react';

  24. const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));

  25. // import {useParams} from "react-router-dom";

  26. import * as HttpUtils from "utils/HttpUtils"

  27. import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";

  28. import * as DateUtils from "utils/DateUtils";

  29. import * as FormatUtils from "utils/FormatUtils";

  30. 

  31. // import BorderColorOutlinedIcon from '@mui/icons-material/BorderColorOutlined';

  32. // import DoneIcon from '@mui/icons-material/Done';

  33. import CloseIcon from '@mui/icons-material/Close';

  34. import EditNoteIcon from '@mui/icons-material/EditNote';

  35. import DownloadIcon from '@mui/icons-material/Download';

  36. // ==============================|| DASHBOARD - DEFAULT ||============================== //

  37. const ApplicationDetailCard = (

  38.     { applicationDetailData,

  39.         setStatus,

  40.         // updateUserObject,

  41.         // isNewRecord

  42.     }

  43. ) => {

  44.     const [isPopUp, setIsPopUp] = useState(false);

  45.     // const params = useParams();

  46.     const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({});

  47.     const [fee, setFee] = useState(0);

  48.     const [companyName, setCompanyName] = useState({});

  49.     const [fileDetail, setfileDetail] = useState({});

  50.     const [onReady, setOnReady] = useState(false);

  51.     const [issueNum, setIssueNum] = useState("");

  52.     const [issueDate, setIssueDate] = useState("");

  53.     const { register,

  54.         // getValues

  55.     } = useForm();

  56.     const navigate = useNavigate();

  57. 

  58.     useEffect(() => {

  59.         //if user data from parent are not null

  60.         // console.log(applicationDetailData)

  61.         if (Object.keys(applicationDetailData).length > 0 && applicationDetailData.data !== null) {

  62.             setCurrentApplicationDetailData(applicationDetailData.data);

  63.             setCompanyName(applicationDetailData.companyName);

  64.             setfileDetail(applicationDetailData.fileDetail);

  65.             setIssueNum(applicationDetailData.gazetteIssueDetail.volume + "/" + applicationDetailData.gazetteIssueDetail.year

  66.                 + " No. " + applicationDetailData.gazetteIssueDetail.issueNo);

  67.             setIssueDate(DateUtils.dateFormat(applicationDetailData.gazetteIssueDetail.issueDate, "D MMM YYYY (ddd)"));

  68. 

  69.             for (let i = 0; i < applicationDetailData.proofList.length; i++) {

  70.                 if (applicationDetailData.proofList[i].action == true) {

  71.                     setFee(applicationDetailData.proofList[i].fee);

  72.                 }

  73.             }

  74.         }

  75.     }, [applicationDetailData]);

  76. 

  77.     useEffect(() => {

  78.         //if state data are ready and assign to different field

  79.         // console.log(currentApplicationDetailData)

  80.         if (Object.keys(currentApplicationDetailData).length > 0) {

  81.             setOnReady(true);

  82.         }

  83.     }, [currentApplicationDetailData]);

  84. 

  85.     const onDownloadClick = () => () => {

  86.         HttpUtils.fileDownload({

  87.             fileId: fileDetail.id,

  88.             skey: fileDetail.skey,

  89.             filename: fileDetail.filename,

  90.         });

  91.     };

  92. 

  93.     const cancelledClick = () => () => {

  94.         setStatus("cancel")

  95.     };

  96. 

  97.     function doPayment() {

  98.         setIsPopUp(false);

  99.         navigate('/paymentPage', { state: { amount: fee, appIdList: [currentApplicationDetailData.id] } });

  100.     }

  101. 

  102.     return (

  103.         !onReady ?

  104.             <LoadingComponent />

  105.             :

  106.             <MainCard elevation={0}

  107.                 border={false}

  108.                 content={false}

  109.             >

  110.                 <Grid container spacing={1} direction="row">

  111.                     <Grid item xs={12}>

  112.                         <Stack

  113.                             direction="row"

  114.                             justifyContent="space-between"

  115.                             alignItems="center"

  116.                             spacing={2}

  117.                             mb={2}

  118.                         >

  119.                             {

  120.                                 currentApplicationDetailData.status == "confirmed" ?

  121.                                     <Button

  122.                                         // size="large"

  123.                                         variant="contained"

  124.                                         onClick={() => { setIsPopUp(true) }}

  125.                                         disabled={currentApplicationDetailData.status == "rejected" || currentApplicationDetailData.status == "cancelled" || currentApplicationDetailData.status == "paid"}

  126.                                         sx={{

  127.                                             textTransform: 'capitalize',

  128.                                             alignItems: 'end'

  129.                                         }}>

  130.                                         <EditNoteIcon />

  131.                                         <Typography ml={1} variant="h5"> 支付</Typography>

  132.                                     </Button>

  133.                                     : null

  134.                             }

  135.                             <Button

  136.                                 // size="large"

  137.                                 variant="contained"

  138.                                 onClick={cancelledClick()}

  139.                                 disabled={currentApplicationDetailData.status !== "submitted"}

  140.                                 title={"取消"}

  141.                                 sx={{

  142.                                     textTransform: 'capitalize',

  143.                                     alignItems: 'end',

  144.                                     backgroundColor: '#ffa733'

  145.                                 }}>

  146.                                 <CloseIcon sx={{mb:0.5}}/>

  147.                                 <Typography ml={1} variant="h5"> 取消</Typography>

  148.                             </Button>

  149.                         </Stack>

  150.                     </Grid>

  151.                 </Grid>

  152.                 <Typography variant="h4" sx={{ mb: 2, borderBottom: "1px solid black" }}>

  153.                     公共啟事申請資料

  154.                 </Typography>

  155.                 <form>

  156.                     <Grid container direction="column">

  157.                         <Grid item xs={12} md={12}>

  158.                             <Grid container direction="row" justifyContent="space-between"

  159.                                 alignItems="center">

  160.                                 <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>

  161.                                     <Grid container alignItems={"center"}>

  162.                                         <Grid item xs={12} md={3} lg={3}

  163.                                             sx={{ display: 'flex', alignItems: 'center' }}>

  164.                                             <FormLabel><Typography variant="h5">申請編號:</Typography></FormLabel>

  165.                                         </Grid>

  166. 

  167.                                         <Grid item xs={12} md={9} lg={9}>

  168.                                             <FormControl variant="outlined" fullWidth disabled>

  169.                                                 <OutlinedInput

  170.                                                     fullWidth

  171.                                                     size="small"

  172.                                                     {...register("appNo",

  173.                                                         {

  174.                                                             value: currentApplicationDetailData.appNo,

  175.                                                         })}

  176.                                                     id='appNo'

  177.                                                     sx={{

  178.                                                         "& .MuiInputBase-input.Mui-disabled": {

  179.                                                             WebkitTextFillColor: "#000000",

  180.                                                             background: "#f8f8f8",

  181.                                                         },

  182.                                                     }}

  183.                                                 />

  184.                                             </FormControl>

  185.                                         </Grid>

  186.                                     </Grid>

  187.                                 </Grid>

  188.                                 <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>

  189.                                     <Grid container alignItems={"center"}>

  190.                                         <Grid item xs={12} md={3} lg={3}

  191.                                             sx={{ display: 'flex', alignItems: 'center' }}>

  192.                                             <FormLabel><Typography variant="h5">申請狀態:</Typography></FormLabel>

  193.                                         </Grid>

  194. 

  195.                                         <Grid item xs={12} md={4} lg={4}>

  196.                                             <FormControl variant="outlined">

  197.                                                 {StatusUtils.getStatusByText(currentApplicationDetailData.status)}

  198.                                             </FormControl>

  199.                                         </Grid>

  200.                                         {

  201.                                             currentApplicationDetailData.reason ?

  202.                                                 <Grid item xs={12} md={5} lg={5}>

  203.                                                     <Grid container alignItems={"center"}>

  204.                                                         <Stack direction="row" justifyContent="flex-start" alignItems="center">

  205.                                                             <Grid item xs={12} md={7} lg={7}>

  206.                                                                 <FormLabel><Typography variant="h5">原因:</Typography></FormLabel>

  207.                                                             </Grid>

  208.                                                             <Grid item xs={12} md={5} lg={5}>

  209.                                                                 <FormControl variant="outlined" fullWidth disabled>

  210.                                                                     <Typography id='reason' variant="h5">

  211.                                                                         {currentApplicationDetailData.reason}

  212.                                                                     </Typography>

  213.                                                                 </FormControl>

  214.                                                             </Grid>

  215.                                                         </Stack>

  216.                                                     </Grid>

  217.                                                 </Grid>

  218.                                                 : ""

  219.                                         }

  220.                                     </Grid>

  221.                                 </Grid>

  222.                             </Grid>

  223.                             <Grid container direction="row" justifyContent="space-between"

  224.                                 alignItems="center">

  225.                                 <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>

  226.                                     <Grid container alignItems={"center"}>

  227.                                         <Grid item xs={12} md={3} lg={3}

  228.                                             sx={{ display: 'flex', alignItems: 'center' }}>

  229.                                             <FormLabel><Typography variant="h5">申請人:</Typography></FormLabel>

  230.                                         </Grid>

  231. 

  232.                                         <Grid item xs={12} md={9} lg={9}>

  233.                                             <FormControl variant="outlined" fullWidth disabled >

  234.                                                 {currentApplicationDetailData.orgId === null ?

  235.                                                     <OutlinedInput

  236.                                                         fullWidth

  237.                                                         size="small"

  238.                                                         {...register("contactPerson",

  239.                                                             {

  240.                                                                 value: currentApplicationDetailData.contactPerson,

  241.                                                             })}

  242.                                                         id='contactPerson'

  243.                                                         sx={{

  244.                                                             "& .MuiInputBase-input.Mui-disabled": {

  245.                                                                 WebkitTextFillColor: "#000000",

  246.                                                                 background: "#f8f8f8",

  247.                                                             },

  248.                                                         }}

  249.                                                     /> :

  250.                                                     <OutlinedInput

  251.                                                         fullWidth

  252.                                                         size="small"

  253.                                                         {...register("companyName",

  254.                                                             {

  255.                                                                 value: companyName.enCompanyName,

  256.                                                             })}

  257.                                                         id='companyName'

  258.                                                         sx={{

  259.                                                             "& .MuiInputBase-input.Mui-disabled": {

  260.                                                                 WebkitTextFillColor: "#000000",

  261.                                                                 background: "#f8f8f8",

  262.                                                             },

  263.                                                         }}

  264.                                                     />

  265.                                                 }

  266.                                             </FormControl>

  267.                                         </Grid>

  268.                                     </Grid>

  269.                                 </Grid>

  270.                                 <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>

  271.                                     <Grid container alignItems={"center"}>

  272.                                         <Grid item xs={12} md={3} lg={3}

  273.                                             sx={{ display: 'flex', alignItems: 'center' }}>

  274.                                             <FormLabel><Typography variant="h5">憲報期數:</Typography></FormLabel>

  275.                                         </Grid>

  276. 

  277.                                         <Grid item xs={12} md={9} lg={9}>

  278.                                             <Stack direction="row">

  279.                                                 <FormControl variant="outlined" fullWidth disabled>

  280.                                                     <OutlinedInput

  281.                                                         size="small"

  282.                                                         {...register("issueNum",

  283.                                                             {

  284.                                                                 value: issueNum,

  285.                                                             })}

  286.                                                         id='issueNum'

  287.                                                         sx={{

  288.                                                             "& .MuiInputBase-input.Mui-disabled": {

  289.                                                                 WebkitTextFillColor: "#000000",

  290.                                                                 background: "#f8f8f8",

  291.                                                             },

  292.                                                         }}

  293.                                                     />

  294.                                                 </FormControl>

  295.                                             </Stack>

  296.                                         </Grid>

  297.                                     </Grid>

  298.                                 </Grid>

  299.                             </Grid>

  300.                             <Grid container direction="row" justifyContent="space-between"

  301.                                 alignItems="center">

  302.                                 <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>

  303.                                     <Grid container alignItems={"center"}>

  304.                                         <Grid item xs={12} md={3} lg={3}

  305.                                             sx={{ display: 'flex', alignItems: 'center' }}>

  306.                                             <FormLabel><Typography variant="h5">聯絡人:</Typography></FormLabel>

  307.                                         </Grid>

  308. 

  309.                                         <Grid item xs={12} md={9} lg={9}>

  310.                                             <FormControl variant="outlined" fullWidth disabled>

  311.                                                 <OutlinedInput

  312.                                                     fullWidth

  313.                                                     size="small"

  314.                                                     {...register("contactPerson",

  315.                                                         {

  316.                                                             value: currentApplicationDetailData.contactPerson,

  317.                                                         })}

  318.                                                     id='contactPerson'

  319.                                                     sx={{

  320.                                                         "& .MuiInputBase-input.Mui-disabled": {

  321.                                                             WebkitTextFillColor: "#000000",

  322.                                                             background: "#f8f8f8",

  323.                                                         },

  324.                                                     }}

  325.                                                 />

  326.                                             </FormControl>

  327.                                         </Grid>

  328.                                     </Grid>

  329.                                 </Grid>

  330.                                 <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>

  331.                                     <Grid container alignItems={"center"}>

  332.                                         <Grid item xs={12} md={3} lg={3}

  333.                                             sx={{ display: 'flex', alignItems: 'center' }}>

  334.                                             <FormLabel><Typography variant="h5">發布日期:</Typography></FormLabel>

  335.                                         </Grid>

  336. 

  337.                                         <Grid item xs={12} md={9} lg={9}>

  338.                                             <Stack direction="row">

  339.                                                 <FormControl variant="outlined" fullWidth disabled>

  340.                                                     <OutlinedInput

  341.                                                         size="small"

  342.                                                         {...register("issueDate",

  343.                                                             {

  344.                                                                 value: issueDate,

  345.                                                             })}

  346.                                                         id='issueDate'

  347.                                                         sx={{

  348.                                                             "& .MuiInputBase-input.Mui-disabled": {

  349.                                                                 WebkitTextFillColor: "#000000",

  350.                                                                 background: "#f8f8f8",

  351.                                                             },

  352.                                                         }}

  353.                                                     />

  354.                                                 </FormControl>

  355.                                             </Stack>

  356.                                         </Grid>

  357.                                     </Grid>

  358.                                 </Grid>

  359.                             </Grid>

  360. 

  361.                             <Grid container direction="row" justifyContent="space-between"

  362.                                 alignItems="center">

  363.                                 <Grid item xs={12} md={6} lg={6} sx={{ mb: 1, }}>

  364.                                     <Grid container alignItems={"center"}>

  365.                                         <Grid item xs={12} md={3} lg={3}

  366.                                             sx={{ display: 'flex', alignItems: 'center' }}>

  367.                                             <FormLabel><Typography variant="h5">聯絡電話:</Typography></FormLabel>

  368.                                         </Grid>

  369. 

  370.                                         <Grid item xs={12} md={9} lg={9}>

  371.                                             <Stack direction="row">

  372.                                                 <FormControl variant="outlined" sx={{ width: '25%' }} disabled>

  373.                                                     <OutlinedInput

  374.                                                         size="small"

  375.                                                         {...register("countryCode",

  376.                                                             {

  377.                                                                 value: currentApplicationDetailData.contactTelNo.countryCode,

  378.                                                             })}

  379.                                                         id='countryCode'

  380.                                                         sx={{

  381.                                                             "& .MuiInputBase-input.Mui-disabled": {

  382.                                                                 WebkitTextFillColor: "#000000",

  383.                                                                 background: "#f8f8f8",

  384.                                                             },

  385.                                                         }}

  386.                                                     />

  387.                                                 </FormControl>

  388.                                                 <FormControl variant="outlined" sx={{ width: '100%' }} disabled>

  389.                                                     <OutlinedInput

  390.                                                         size="small"

  391.                                                         {...register("phoneNumber",

  392.                                                             {

  393.                                                                 value: currentApplicationDetailData.contactTelNo.phoneNumber,

  394.                                                             })}

  395.                                                         id='phoneNumber'

  396.                                                         sx={{

  397.                                                             "& .MuiInputBase-input.Mui-disabled": {

  398.                                                                 WebkitTextFillColor: "#000000",

  399.                                                                 background: "#f8f8f8",

  400.                                                             },

  401.                                                         }}

  402.                                                     />

  403.                                                 </FormControl>

  404.                                             </Stack>

  405.                                         </Grid>

  406.                                     </Grid>

  407.                                 </Grid>

  408.                                 {

  409.                                     fee > 0 ?

  410.                                         <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>

  411.                                             <Grid container alignItems={"center"}>

  412.                                                 <Grid item xs={12} md={3} lg={3}

  413.                                                     sx={{ display: 'flex', alignItems: 'center' }}>

  414.                                                     <FormLabel><Typography variant="h5">價錢:</Typography></FormLabel>

  415.                                                 </Grid>

  416. 

  417.                                                 <Grid item xs={12} md={9} lg={9}>

  418.                                                     <FormLabel><Typography variant="h5">{FormatUtils.currencyFormat(fee)}</Typography></FormLabel>

  419.                                                 </Grid>

  420.                                             </Grid>

  421.                                         </Grid>

  422.                                         :

  423.                                         <></>

  424.                                 }

  425. 

  426.                             </Grid>

  427.                             <Grid item xs={12} md={6} lg={6} sx={{ mb: 1, }}>

  428.                                 <Grid container alignItems={"center"}>

  429.                                     <Grid item xs={12} md={3} lg={3}

  430.                                         sx={{ display: 'flex', alignItems: 'center' }}>

  431.                                         <FormLabel><Typography variant="h5">傳真號碼:</Typography></FormLabel>

  432.                                     </Grid>

  433. 

  434.                                     <Grid item xs={12} md={9} lg={9}>

  435.                                         <Stack direction="row">

  436.                                             <FormControl variant="outlined" sx={{ width: '25%' }} disabled>

  437.                                                 <OutlinedInput

  438.                                                     size="small"

  439.                                                     {...register("countryCode",

  440.                                                         {

  441.                                                             value: currentApplicationDetailData.contactFaxNo.countryCode,

  442.                                                         })}

  443.                                                     id='countryCode'

  444.                                                     sx={{

  445.                                                         "& .MuiInputBase-input.Mui-disabled": {

  446.                                                             WebkitTextFillColor: "#000000",

  447.                                                             background: "#f8f8f8",

  448.                                                         },

  449.                                                     }}

  450.                                                 />

  451.                                             </FormControl>

  452.                                             <FormControl variant="outlined" sx={{ width: '100%' }} disabled>

  453.                                                 <OutlinedInput

  454.                                                     size="small"

  455.                                                     {...register("faxNumber",

  456.                                                         {

  457.                                                             value: currentApplicationDetailData.contactFaxNo.faxNumber,

  458.                                                         })}

  459.                                                     id='faxNumber'

  460.                                                     sx={{

  461.                                                         "& .MuiInputBase-input.Mui-disabled": {

  462.                                                             WebkitTextFillColor: "#000000",

  463.                                                             background: "#f8f8f8",

  464.                                                         },

  465.                                                     }}

  466.                                                 />

  467.                                             </FormControl>

  468.                                         </Stack>

  469.                                     </Grid>

  470.                                 </Grid>

  471.                             </Grid>

  472.                             <Grid container direction="row" justifyContent="space-between"

  473.                                 alignItems="center">

  474.                                 <Grid item xs={12} md={12} lg={12} mt={1}>

  475.                                     <Grid container alignItems={"center"}>

  476.                                         <Grid item xs={12} md={6} lg={6}>

  477.                                             <Grid container direction="row">

  478.                                                 <Grid item xs={12} md={3} lg={3}

  479.                                                     sx={{ display: 'flex', alignItems: 'center' }}>

  480.                                                     <FormLabel><Typography variant="h5">稿件檔案:</Typography></FormLabel>

  481.                                                 </Grid>

  482.                                                 <Grid item xs={12} md={9} lg={9} sx={{ display: 'flex', alignItems: 'center' }}>

  483.                                                     <Grid container direction="row" justifyContent="flex-start">

  484.                                                         <Grid item xs={12} md={8} lg={8} sx={{ display: 'flex', alignItems: 'center' }}>

  485.                                                             <FormControl variant="outlined" fullWidth  >

  486.                                                                 <Typography

  487.                                                                     fullWidth

  488.                                                                     id='fileName'

  489.                                                                     variant="h5"

  490.                                                                 >

  491.                                                                     {fileDetail.filename}

  492.                                                                 </Typography>

  493.                                                             </FormControl>

  494.                                                         </Grid>

  495.                                                         <Grid item md={4} lg={4}>

  496.                                                             <Button

  497.                                                                 variant="contained"

  498.                                                                 onClick={onDownloadClick()}

  499.                                                                 title="下載"

  500.                                                                 style={{display:"flex-right"}}

  501.                                                                 sx={{

  502.                                                                     textTransform: 'capitalize',

  503.                                                                     alignItems: 'end',

  504.                                                                 }}>

  505.                                                                 <DownloadIcon sx={{mb: 0.5}}/>

  506.                                                                 <Typography sx={{ml: 1}} variant="h5">下載</Typography>

  507.                                                             </Button>

  508.                                                         </Grid>

  509.                                                     </Grid>

  510.                                                 </Grid>

  511.                                             </Grid>

  512.                                         </Grid>

  513.                                     </Grid>

  514.                                 </Grid>

  515.                             </Grid>

  516.                             {currentApplicationDetailData.orgId === null ? null:

  517.                                 <Grid item xs={12} md={6} lg={6} sx={{ mb: 1, paddingTop: 2 }}>

  518.                                     <Grid container alignItems={"center"}>

  519.                                         <Grid item xs={12} md={3} lg={3}

  520.                                             sx={{ display: 'flex', alignItems: 'center' }}>

  521.                                             <FormLabel><Typography variant="h5">Care Of:</Typography></FormLabel>

  522.                                         </Grid>

  523.                                         <Grid item xs={12} md={9} lg={9}>

  524.                                             <Typography variant="h5">{currentApplicationDetailData.careOf}</Typography>

  525.                                         </Grid>

  526.                                     </Grid>

  527.                                 </Grid>

  528.                             }

  529.                             <Grid item xs={12} md={6} lg={6} sx={{ mb: 1, paddingTop: 2 }}>

  530.                                 <Grid container alignItems={"center"}>

  531.                                     <Grid item xs={12} md={3} lg={3}

  532.                                         sx={{ display: 'flex', alignItems: 'center' }}>

  533.                                         <FormLabel><Typography variant="h5">備註:</Typography></FormLabel>

  534.                                     </Grid>

  535.                                     <Grid item xs={12} md={9} lg={9}>

  536.                                         <Typography variant="h5">{currentApplicationDetailData.remarks}</Typography>

  537.                                     </Grid>

  538.                                 </Grid>

  539.                             </Grid>

  540.                         </Grid>

  541.                     </Grid>

  542.                     <div>

  543.                         <Dialog open={isPopUp} onClose={() => setIsPopUp(false)}  >

  544.                             <DialogTitle></DialogTitle>

  545.                             <Typography variant="h3" style={{ padding: '16px' }}>確認付款</Typography>

  546.                             <DialogContent style={{ display: 'flex', }}>

  547.                                 <Stack direction="column" justifyContent="space-between">

  548.                                     <Typography variant="h4">總計金額: {FormatUtils.currencyFormat(fee)}</Typography>

  549.                                 </Stack>

  550.                             </DialogContent>

  551.                             <DialogActions>

  552.                                 <Button onClick={() => setIsPopUp(false)}><Typography variant="h5">Close</Typography></Button>

  553.                                 <Button onClick={() => doPayment()}><Typography variant="h5">確認</Typography></Button>

  554.                             </DialogActions>

  555.                         </Dialog>

  556.                     </div>

  557.                 </form>

  558.             </MainCard >

  559.     );

  560. };

  561. 

  562. export default ApplicationDetailCard;