alex
/
PNSPS-frontend-MaterialUI
1
0
Rozštěpit 0
Zdrojový kód Úkoly 0 Požadavky na natažení 0 Vydání 0 Wiki Aktivita
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
725 Revize
5 Větve
19 MiB
 
 
Strom: 959bd2a16b
Větve Značky
${ item.name }
Vytvořit větev ${ searchTerm }
z „959bd2a16b“
${ noResults }
PNSPS-frontend-MaterialUI/src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js

671 řádky
40 KiB
Surový Blame Historie 

  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 UrlUtils from "utils/ApiPathConst"

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

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

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

  31. import {

  32.     isORGLoggedIn,

  33. } from "utils/Utils";

  34. 

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

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

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

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

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

  40. import { PNSPS_BUTTON_THEME } from "../../../themes/buttonConst";

  41. import { ThemeProvider } from "@emotion/react";

  42. import * as React from "react";

  43. import { FormattedMessage, useIntl } from "react-intl";

  44. // ==============================|| DASHBOARD - DEFAULT ||============================== //

  45. const ApplicationDetailCard = (

  46.     { applicationDetailData,

  47.         setStatus,

  48.         // updateUserObject,

  49.         // isNewRecord

  50.     }

  51. ) => {

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

  53.     const [errorText, setErrorText] = useState("");

  54.     const [errorPopUp, setErrorPopUp] = useState(false);

  55.     // const params = useParams();

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

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

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

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

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

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

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

  63.     const { register,

  64.         // getValues

  65.     } = useForm();

  66.     const navigate = useNavigate();

  67.     const intl = useIntl();

  68. 

  69.     useEffect(() => {

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

  71.         // console.log(applicationDetailData)

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

  73.             setCurrentApplicationDetailData(applicationDetailData.data);

  74.             setCompanyName(applicationDetailData.companyName);

  75.             setfileDetail(applicationDetailData.fileDetail);

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

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

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

  79. 

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

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

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

  83.                 }

  84.             }

  85.         }

  86.     }, [applicationDetailData]);

  87. 

  88.     useEffect(() => {

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

  90.         // console.log(currentApplicationDetailData)

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

  92.             setOnReady(true);

  93.         }

  94.     }, [currentApplicationDetailData]);

  95. 

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

  97.         HttpUtils.fileDownload({

  98.             fileId: fileDetail.id,

  99.             skey: fileDetail.skey,

  100.             filename: fileDetail.filename,

  101.         });

  102.     };

  103. 

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

  105.         setStatus("cancel")

  106.     };

  107. 

  108.     const checkExprityDate = () => {

  109.         HttpUtils.post({

  110.             url: UrlUtils.POST_CHECK_APP_EXPRITY_DATE,

  111.             params: {

  112.                 ids: [currentApplicationDetailData.id]

  113.             },

  114.             onSuccess: (responData) => {

  115.                 if (responData.success == true) {

  116.                     setIsPopUp(true);

  117.                     return;

  118.                 }

  119.                 setErrorText("公共啟事申請已過期");

  120.                 setErrorPopUp(true);

  121.             }

  122.         });

  123.     };

  124. 

  125. 

  126.     function doPayment() {

  127.         setIsPopUp(false);

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

  129.     }

  130. 

  131.     return (

  132.         !onReady ?

  133.             <LoadingComponent />

  134.             :

  135.             <MainCard elevation={0}

  136.                 border={false}

  137.                 content={false}

  138.             >

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

  140.                     <Grid item xs={12}>

  141.                         <Stack

  142.                             direction="row"

  143.                             justifyContent="space-between"

  144.                             alignItems="center"

  145.                             spacing={2}

  146.                             mb={2}

  147.                         >

  148.                             <ThemeProvider theme={PNSPS_BUTTON_THEME}>

  149.                                 {

  150.                                     currentApplicationDetailData.status == "confirmed" ?

  151.                                         <Button

  152.                                             variant="contained"

  153.                                             color="create"

  154.                                             onClick={() => { checkExprityDate(true) }}

  155.                                             disabled={currentApplicationDetailData.status == "rejected"

  156.                                                 || currentApplicationDetailData.status == "cancelled"

  157.                                                 || currentApplicationDetailData.status == "paid"

  158.                                                 || currentApplicationDetailData.creditor}

  159.                                             startIcon={<EditNoteIcon />}

  160.                                             aria-label={intl.formatMessage({ id: 'payFor' })}

  161.                                         >

  162.                                             <FormattedMessage id="payFor" />

  163.                                         </Button>

  164.                                         : null

  165.                                 }

  166.                                 <Button

  167.                                     variant="contained"

  168.                                     onClick={cancelledClick()}

  169.                                     color="edit"

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

  171.                                     title={intl.formatMessage({ id: 'cancel' })}

  172.                                     startIcon={<CloseIcon />}

  173.                                     aria-label={intl.formatMessage({ id: 'cancel' })}

  174.                                 >

  175.                                     <FormattedMessage id="cancel" />

  176.                                 </Button>

  177.                             </ThemeProvider>

  178.                         </Stack>

  179.                     </Grid>

  180.                 </Grid>

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

  182.                     <FormattedMessage id="publicNoticeDetailTitle" />

  183.                 </Typography>

  184.                 <form>

  185.                     <Grid container direction="column">

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

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

  188.                                 alignItems="center">

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

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

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

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

  193.                                             <FormLabel><Typography variant="pnspsFormParagraph">

  194.                                                 <FormattedMessage id="applicationId" />:

  195.                                             </Typography></FormLabel>

  196.                                         </Grid>

  197. 

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

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

  200.                                                 <OutlinedInput

  201.                                                     fullWidth

  202.                                                     size="small"

  203.                                                     {...register("appNo",

  204.                                                         {

  205.                                                             value: currentApplicationDetailData.appNo,

  206.                                                         })}

  207.                                                     id='appNo'

  208.                                                     sx={{

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

  210.                                                             WebkitTextFillColor: "#000000",

  211.                                                             background: "#f8f8f8",

  212.                                                         },

  213.                                                     }}

  214.                                                 />

  215.                                             </FormControl>

  216.                                         </Grid>

  217.                                     </Grid>

  218.                                 </Grid>

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

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

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

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

  223.                                             <FormLabel><Typography variant="pnspsFormParagraph">

  224.                                                 <FormattedMessage id="applyStatus" />:

  225.                                             </Typography></FormLabel>

  226.                                         </Grid>

  227. 

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

  229.                                             <FormControl variant="outlined">

  230.                                                 {currentApplicationDetailData.status ? StatusUtils.getStatusByTextIntl(currentApplicationDetailData.status, false, intl) : ""}

  231.                                             </FormControl>

  232.                                         </Grid>

  233. 

  234.                                     </Grid>

  235.                                     {

  236.                                         currentApplicationDetailData.reason ?

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

  238.                                                 <Grid container alignItems={"center"} direction="row" >

  239. 

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

  241.                                                         <FormLabel><Typography variant="pnspsFormParagraph"><FormattedMessage id="reason" />:</Typography></FormLabel>

  242.                                                     </Grid>

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

  244.                                                         <FormLabel>

  245.                                                             <Typography id='reason' variant="pnspsFormParagraph">

  246.                                                                 {currentApplicationDetailData.reason}

  247.                                                             </Typography>

  248.                                                         </FormLabel>

  249.                                                     </Grid>

  250. 

  251.                                                 </Grid>

  252.                                             </Grid>

  253.                                             : ""

  254.                                     }

  255.                                 </Grid>

  256.                             </Grid>

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

  258.                                 alignItems="center">

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

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

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

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

  263.                                             <FormLabel><Typography variant="pnspsFormParagraph">

  264.                                                 <FormattedMessage id="applyPerson" />:

  265.                                             </Typography></FormLabel>

  266.                                         </Grid>

  267. 

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

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

  270.                                                 {currentApplicationDetailData.orgId === null ?

  271.                                                     <OutlinedInput

  272.                                                         fullWidth

  273.                                                         size="small"

  274.                                                         {...register("contactPerson",

  275.                                                             {

  276.                                                                 value: currentApplicationDetailData.contactPerson,

  277.                                                             })}

  278.                                                         id='contactPerson'

  279.                                                         sx={{

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

  281.                                                                 WebkitTextFillColor: "#000000",

  282.                                                                 background: "#f8f8f8",

  283.                                                             },

  284.                                                         }}

  285.                                                     /> :

  286.                                                     <OutlinedInput

  287.                                                         fullWidth

  288.                                                         size="small"

  289.                                                         {...register("companyName",

  290.                                                             {

  291.                                                                 value: companyName.enCompanyName,

  292.                                                             })}

  293.                                                         id='companyName'

  294.                                                         sx={{

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

  296.                                                                 WebkitTextFillColor: "#000000",

  297.                                                                 background: "#f8f8f8",

  298.                                                             },

  299.                                                         }}

  300.                                                     />

  301.                                                 }

  302.                                             </FormControl>

  303.                                         </Grid>

  304.                                     </Grid>

  305.                                 </Grid>

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

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

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

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

  310.                                             <FormLabel><Typography variant="pnspsFormParagraph">

  311.                                                 <FormattedMessage id="gazetteCount" />:

  312.                                             </Typography></FormLabel>

  313.                                         </Grid>

  314. 

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

  316.                                             <Stack direction="row">

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

  318.                                                     <OutlinedInput

  319.                                                         size="small"

  320.                                                         {...register("issueNum",

  321.                                                             {

  322.                                                                 value: issueNum,

  323.                                                             })}

  324.                                                         id='issueNum'

  325.                                                         sx={{

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

  327.                                                                 WebkitTextFillColor: "#000000",

  328.                                                                 background: "#f8f8f8",

  329.                                                             },

  330.                                                         }}

  331.                                                     />

  332.                                                 </FormControl>

  333.                                             </Stack>

  334.                                         </Grid>

  335.                                     </Grid>

  336.                                 </Grid>

  337.                             </Grid>

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

  339.                                 alignItems="center">

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

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

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

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

  344.                                             <FormLabel><Typography variant="pnspsFormParagraph">

  345.                                                 <FormattedMessage id="contactPerson" />:

  346.                                             </Typography></FormLabel>

  347.                                         </Grid>

  348. 

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

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

  351.                                                 <OutlinedInput

  352.                                                     fullWidth

  353.                                                     size="small"

  354.                                                     {...register("contactPerson",

  355.                                                         {

  356.                                                             value: currentApplicationDetailData.contactPerson,

  357.                                                         })}

  358.                                                     id='contactPerson'

  359.                                                     sx={{

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

  361.                                                             WebkitTextFillColor: "#000000",

  362.                                                             background: "#f8f8f8",

  363.                                                         },

  364.                                                     }}

  365.                                                 />

  366.                                             </FormControl>

  367.                                         </Grid>

  368.                                     </Grid>

  369.                                 </Grid>

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

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

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

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

  374.                                             <FormLabel><Typography variant="pnspsFormParagraph">

  375.                                                 <FormattedMessage id="publishDate" />:

  376.                                             </Typography></FormLabel>

  377.                                         </Grid>

  378. 

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

  380.                                             <Stack direction="row">

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

  382.                                                     <OutlinedInput

  383.                                                         size="small"

  384.                                                         {...register("issueDate",

  385.                                                             {

  386.                                                                 value: issueDate,

  387.                                                             })}

  388.                                                         id='issueDate'

  389.                                                         sx={{

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

  391.                                                                 WebkitTextFillColor: "#000000",

  392.                                                                 background: "#f8f8f8",

  393.                                                             },

  394.                                                         }}

  395.                                                     />

  396.                                                 </FormControl>

  397.                                             </Stack>

  398.                                         </Grid>

  399.                                     </Grid>

  400.                                 </Grid>

  401.                             </Grid>

  402. 

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

  404.                                 alignItems="center">

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

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

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

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

  409.                                             <FormLabel><Typography variant="pnspsFormParagraph">

  410.                                                 <FormattedMessage id="userContactNumber" />:

  411.                                             </Typography></FormLabel>

  412.                                         </Grid>

  413. 

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

  415.                                             <Stack direction="row">

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

  417.                                                     <OutlinedInput

  418.                                                         size="small"

  419.                                                         {...register("countryCode",

  420.                                                             {

  421.                                                                 value: currentApplicationDetailData.contactTelNo.countryCode,

  422.                                                             })}

  423.                                                         id='countryCode'

  424.                                                         sx={{

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

  426.                                                                 WebkitTextFillColor: "#000000",

  427.                                                                 background: "#f8f8f8",

  428.                                                             },

  429.                                                         }}

  430.                                                     />

  431.                                                 </FormControl>

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

  433.                                                     <OutlinedInput

  434.                                                         size="small"

  435.                                                         {...register("phoneNumber",

  436.                                                             {

  437.                                                                 value: currentApplicationDetailData.contactTelNo.phoneNumber,

  438.                                                             })}

  439.                                                         id='phoneNumber'

  440.                                                         sx={{

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

  442.                                                                 WebkitTextFillColor: "#000000",

  443.                                                                 background: "#f8f8f8",

  444.                                                             },

  445.                                                         }}

  446.                                                     />

  447.                                                 </FormControl>

  448.                                             </Stack>

  449.                                         </Grid>

  450.                                     </Grid>

  451.                                 </Grid>

  452.                                 {

  453.                                     fee > 0 ?

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

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

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

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

  458.                                                     <FormLabel><Typography variant="pnspsFormParagraph">

  459.                                                         <FormattedMessage id="currencyPrice" />(HK$):

  460.                                                     </Typography></FormLabel>

  461.                                                 </Grid>

  462. 

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

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

  465.                                                 </Grid>

  466.                                             </Grid>

  467.                                         </Grid>

  468.                                         :

  469.                                         <></>

  470.                                 }

  471. 

  472.                             </Grid>

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

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

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

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

  477.                                         <FormLabel><Typography variant="pnspsFormParagraph">

  478.                                             <FormattedMessage id="userFaxNumber" />:

  479.                                         </Typography></FormLabel>

  480.                                     </Grid>

  481. 

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

  483.                                         <Stack direction="row">

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

  485.                                                 <OutlinedInput

  486.                                                     size="small"

  487.                                                     {...register("countryCode",

  488.                                                         {

  489.                                                             value: currentApplicationDetailData.contactFaxNo.countryCode,

  490.                                                         })}

  491.                                                     id='countryCode'

  492.                                                     sx={{

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

  494.                                                             WebkitTextFillColor: "#000000",

  495.                                                             background: "#f8f8f8",

  496.                                                         },

  497.                                                     }}

  498.                                                 />

  499.                                             </FormControl>

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

  501.                                                 <OutlinedInput

  502.                                                     size="small"

  503.                                                     {...register("faxNumber",

  504.                                                         {

  505.                                                             value: currentApplicationDetailData.contactFaxNo.faxNumber,

  506.                                                         })}

  507.                                                     id='faxNumber'

  508.                                                     sx={{

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

  510.                                                             WebkitTextFillColor: "#000000",

  511.                                                             background: "#f8f8f8",

  512.                                                         },

  513.                                                     }}

  514.                                                 />

  515.                                             </FormControl>

  516.                                         </Stack>

  517.                                     </Grid>

  518.                                 </Grid>

  519.                             </Grid>

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

  521.                                 alignItems="center">

  522.                                 <Grid item xs={12} sm={12} md={11} lg={11} mt={1}>

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

  524.                                         <Grid item xs={12} sm={12} md={12} lg={12}>

  525.                                             <Grid container direction="row">

  526.                                                 <Grid item xs={12} sm={12} md={2.5} lg={1.6}

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

  528.                                                     <FormLabel><Typography variant="pnspsFormParagraph">

  529.                                                         <FormattedMessage id="draftFile" />:

  530.                                                     </Typography></FormLabel>

  531.                                                 </Grid>

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

  533.                                                     <Grid container direction="row" alignItems="center" justifyContent="flex-start">

  534.                                                         <Grid item xs={12} sm={12} md={12} lg={12} sx={{ wordBreak: 'break-word', }}>

  535.                                                             <Typography

  536.                                                                 fullWidth

  537.                                                                 id='fileName'

  538.                                                                 variant="pnspsFormParagraph"

  539.                                                             >

  540.                                                                 {fileDetail.filename}

  541.                                                             </Typography>

  542.                                                             <ThemeProvider theme={PNSPS_BUTTON_THEME}>

  543.                                                                 <Button

  544.                                                                     sx={{ ml: 3 }}

  545.                                                                     variant="contained"

  546.                                                                     onClick={onDownloadClick()}

  547.                                                                     aria-label={intl.formatMessage({ id: 'download' })}

  548.                                                                     title={intl.formatMessage({ id: 'download' })}

  549.                                                                     color="save"

  550.                                                                     startIcon={<DownloadIcon sx={{ alignItems: "center" }} />}

  551.                                                                 >

  552.                                                                     <FormattedMessage id="download" />

  553.                                                                 </Button>

  554.                                                             </ThemeProvider>

  555.                                                         </Grid>

  556.                                                     </Grid>

  557.                                                 </Grid>

  558.                                             </Grid>

  559.                                         </Grid>

  560.                                     </Grid>

  561.                                 </Grid>

  562.                             </Grid>

  563.                             {isORGLoggedIn() ?

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

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

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

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

  568.                                             <FormLabel><Typography variant="pnspsFormParagraph">Care Of:</Typography></FormLabel>

  569.                                         </Grid>

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

  571.                                             <Typography variant="pnspsFormParagraph">{currentApplicationDetailData.careOf}</Typography>

  572.                                         </Grid>

  573.                                     </Grid>

  574.                                 </Grid> : null

  575.                             }

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

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

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

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

  580.                                         <FormLabel><Typography variant="pnspsFormParagraph">

  581.                                             <FormattedMessage id="extraMark" />:

  582.                                         </Typography></FormLabel>

  583.                                     </Grid>

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

  585.                                         <Typography variant="pnspsFormParagraph">{currentApplicationDetailData.remarks}</Typography>

  586.                                     </Grid>

  587.                                 </Grid>

  588.                             </Grid>

  589.                         </Grid>

  590.                     </Grid>

  591.                     <div>

  592.                         <Dialog

  593.                             open={isPopUp}

  594.                             onClose={() => setIsPopUp(false)}

  595.                             PaperProps={{

  596.                                 sx: {

  597.                                     minWidth: '40vw',

  598.                                     maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '30vw' },

  599.                                     maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '50vh' }

  600.                                 }

  601.                             }}

  602.                         >

  603.                             <DialogTitle>

  604.                                 <Typography variant="h3" >

  605.                                     <FormattedMessage id="payConfirm" />

  606.                                 </Typography>

  607.                             </DialogTitle>

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

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

  610.                                     <Typography variant="h4">

  611.                                         <FormattedMessage id="totalAmount" /> (HK$): {FormatUtils.currencyFormat(fee)}

  612.                                     </Typography>

  613.                                 </Stack>

  614.                             </DialogContent>

  615.                             <DialogActions>

  616.                                 <Button

  617.                                     onClick={() => setIsPopUp(false)}

  618.                                     aria-label={intl.formatMessage({ id: 'close' })}

  619.                                 >

  620.                                     <Typography variant="pnspsFormParagraph">

  621.                                         <FormattedMessage id="close" />

  622.                                     </Typography></Button>

  623.                                 <Button

  624.                                     onClick={() => doPayment()}

  625.                                     aria-label={intl.formatMessage({ id: 'confirm' })}

  626.                                 >

  627.                                     <Typography variant="pnspsFormParagraph">

  628.                                         <FormattedMessage id="confirm" />

  629.                                     </Typography></Button>

  630.                             </DialogActions>

  631.                         </Dialog>

  632.                     </div>

  633.                     <div>

  634.                         <Dialog

  635.                             open={errorPopUp}

  636.                             onClose={() => setErrorPopUp(false)}

  637.                             PaperProps={{

  638.                                 sx: {

  639.                                     minWidth: '40vw',

  640.                                     maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },

  641.                                     maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }

  642.                                 }

  643.                             }}

  644.                         >

  645.                             <DialogTitle></DialogTitle>

  646.                             <Typography variant="h2" style={{ padding: '16px' }}>行動失敗</Typography>

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

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

  649.                                     {

  650.                                         errorText

  651.                                     }

  652.                                 </Stack>

  653.                             </DialogContent>

  654.                             <DialogActions>

  655.                                 <Button

  656.                                     onClick={() => setErrorPopUp(false)}

  657.                                     aria-label={intl.formatMessage({ id: 'close' })}

  658.                                 >

  659.                                     <Typography variant="pnspsFormParagraph">

  660.                                         <FormattedMessage id="close" />

  661.                                     </Typography></Button>

  662.                             </DialogActions>

  663.                         </Dialog>

  664.                     </div>

  665.                 </form>

  666.             </MainCard >

  667.     );

  668. };

  669. 

  670. export default ApplicationDetailCard;