alex
/
PNSPS-frontend-MaterialUI
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
787 Commits
5 Branches
19 MiB
 
 
Tree: ebbd7f79da
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'ebbd7f79da'
${ noResults }
PNSPS-frontend-MaterialUI/src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js

678 lines
40 KiB
Raw Blame History 

  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.issueYear

  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 == "rejected"

  171.                                     || currentApplicationDetailData.status == "cancelled"

  172.                                     || (!currentApplicationDetailData.creditor 

  173.                                         && currentApplicationDetailData.status == "paid")

  174.                                     || (currentApplicationDetailData.creditor 

  175.                                         && currentApplicationDetailData.status == "confirmed")

  176.                                     }

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

  178.                                     startIcon={<CloseIcon />}

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

  180.                                 >

  181.                                     <FormattedMessage id="cancel" />

  182.                                 </Button>

  183.                             </ThemeProvider>

  184.                         </Stack>

  185.                     </Grid>

  186.                 </Grid>

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

  188.                     <FormattedMessage id="publicNoticeDetailTitle" />

  189.                 </Typography>

  190.                 <form>

  191.                     <Grid container direction="column">

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

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

  194.                                 alignItems="center">

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

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

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

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

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

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

  201.                                             </Typography></FormLabel>

  202.                                         </Grid>

  203. 

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

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

  206.                                                 <OutlinedInput

  207.                                                     fullWidth

  208.                                                     size="small"

  209.                                                     {...register("appNo",

  210.                                                         {

  211.                                                             value: currentApplicationDetailData.appNo,

  212.                                                         })}

  213.                                                     id='appNo'

  214.                                                     sx={{

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

  216.                                                             WebkitTextFillColor: "#000000",

  217.                                                             background: "#f8f8f8",

  218.                                                         },

  219.                                                     }}

  220.                                                 />

  221.                                             </FormControl>

  222.                                         </Grid>

  223.                                     </Grid>

  224.                                 </Grid>

  225.                                 <Grid item xs={12} sm={12} md={9} lg={5} sx={{ mb: 1, ml: 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="pnspsFormParagraph">

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

  231.                                             </Typography></FormLabel>

  232.                                         </Grid>

  233. 

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

  235.                                             <FormControl variant="outlined">

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

  237.                                             </FormControl>

  238.                                         </Grid>

  239. 

  240.                                     </Grid>

  241.                                     {

  242.                                         currentApplicationDetailData.reason ?

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

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

  245. 

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

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

  248.                                                     </Grid>

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

  250.                                                         <FormLabel>

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

  252.                                                                 {currentApplicationDetailData.reason}

  253.                                                             </Typography>

  254.                                                         </FormLabel>

  255.                                                     </Grid>

  256. 

  257.                                                 </Grid>

  258.                                             </Grid>

  259.                                             : ""

  260.                                     }

  261.                                 </Grid>

  262.                             </Grid>

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

  264.                                 alignItems="center">

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

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

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

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

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

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

  271.                                             </Typography></FormLabel>

  272.                                         </Grid>

  273. 

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

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

  276.                                                 {currentApplicationDetailData.orgId === null ?

  277.                                                     <OutlinedInput

  278.                                                         fullWidth

  279.                                                         size="small"

  280.                                                         {...register("contactPerson",

  281.                                                             {

  282.                                                                 value: currentApplicationDetailData.contactPerson,

  283.                                                             })}

  284.                                                         id='contactPerson'

  285.                                                         sx={{

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

  287.                                                                 WebkitTextFillColor: "#000000",

  288.                                                                 background: "#f8f8f8",

  289.                                                             },

  290.                                                         }}

  291.                                                     /> :

  292.                                                     <OutlinedInput

  293.                                                         fullWidth

  294.                                                         size="small"

  295.                                                         {...register("companyName",

  296.                                                             {

  297.                                                                 value: companyName.enCompanyName,

  298.                                                             })}

  299.                                                         id='companyName'

  300.                                                         sx={{

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

  302.                                                                 WebkitTextFillColor: "#000000",

  303.                                                                 background: "#f8f8f8",

  304.                                                             },

  305.                                                         }}

  306.                                                     />

  307.                                                 }

  308.                                             </FormControl>

  309.                                         </Grid>

  310.                                     </Grid>

  311.                                 </Grid>

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

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

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

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

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

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

  318.                                             </Typography></FormLabel>

  319.                                         </Grid>

  320. 

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

  322.                                             <Stack direction="row">

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

  324.                                                     <OutlinedInput

  325.                                                         size="small"

  326.                                                         {...register("issueNum",

  327.                                                             {

  328.                                                                 value: issueNum,

  329.                                                             })}

  330.                                                         id='issueNum'

  331.                                                         sx={{

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

  333.                                                                 WebkitTextFillColor: "#000000",

  334.                                                                 background: "#f8f8f8",

  335.                                                             },

  336.                                                         }}

  337.                                                     />

  338.                                                 </FormControl>

  339.                                             </Stack>

  340.                                         </Grid>

  341.                                     </Grid>

  342.                                 </Grid>

  343.                             </Grid>

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

  345.                                 alignItems="center">

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

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

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

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

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

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

  352.                                             </Typography></FormLabel>

  353.                                         </Grid>

  354. 

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

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

  357.                                                 <OutlinedInput

  358.                                                     fullWidth

  359.                                                     size="small"

  360.                                                     {...register("contactPerson",

  361.                                                         {

  362.                                                             value: currentApplicationDetailData.contactPerson,

  363.                                                         })}

  364.                                                     id='contactPerson'

  365.                                                     sx={{

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

  367.                                                             WebkitTextFillColor: "#000000",

  368.                                                             background: "#f8f8f8",

  369.                                                         },

  370.                                                     }}

  371.                                                 />

  372.                                             </FormControl>

  373.                                         </Grid>

  374.                                     </Grid>

  375.                                 </Grid>

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

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

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

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

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

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

  382.                                             </Typography></FormLabel>

  383.                                         </Grid>

  384. 

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

  386.                                             <Stack direction="row">

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

  388.                                                     <OutlinedInput

  389.                                                         size="small"

  390.                                                         {...register("issueDate",

  391.                                                             {

  392.                                                                 value: issueDate,

  393.                                                             })}

  394.                                                         id='issueDate'

  395.                                                         sx={{

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

  397.                                                                 WebkitTextFillColor: "#000000",

  398.                                                                 background: "#f8f8f8",

  399.                                                             },

  400.                                                         }}

  401.                                                     />

  402.                                                 </FormControl>

  403.                                             </Stack>

  404.                                         </Grid>

  405.                                     </Grid>

  406.                                 </Grid>

  407.                             </Grid>

  408. 

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

  410.                                 alignItems="center">

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

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

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

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

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

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

  417.                                             </Typography></FormLabel>

  418.                                         </Grid>

  419. 

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

  421.                                             <Stack direction="row">

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

  423.                                                     <OutlinedInput

  424.                                                         size="small"

  425.                                                         {...register("countryCode",

  426.                                                             {

  427.                                                                 value: currentApplicationDetailData.contactTelNo.countryCode,

  428.                                                             })}

  429.                                                         id='countryCode'

  430.                                                         sx={{

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

  432.                                                                 WebkitTextFillColor: "#000000",

  433.                                                                 background: "#f8f8f8",

  434.                                                             },

  435.                                                         }}

  436.                                                     />

  437.                                                 </FormControl>

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

  439.                                                     <OutlinedInput

  440.                                                         size="small"

  441.                                                         {...register("phoneNumber",

  442.                                                             {

  443.                                                                 value: currentApplicationDetailData.contactTelNo.phoneNumber,

  444.                                                             })}

  445.                                                         id='phoneNumber'

  446.                                                         sx={{

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

  448.                                                                 WebkitTextFillColor: "#000000",

  449.                                                                 background: "#f8f8f8",

  450.                                                             },

  451.                                                         }}

  452.                                                     />

  453.                                                 </FormControl>

  454.                                             </Stack>

  455.                                         </Grid>

  456.                                     </Grid>

  457.                                 </Grid>

  458.                                 {

  459.                                     fee > 0 ?

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

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

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

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

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

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

  466.                                                     </Typography></FormLabel>

  467.                                                 </Grid>

  468. 

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

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

  471.                                                 </Grid>

  472.                                             </Grid>

  473.                                         </Grid>

  474.                                         :

  475.                                         <></>

  476.                                 }

  477. 

  478.                             </Grid>

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

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

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

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

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

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

  485.                                         </Typography></FormLabel>

  486.                                     </Grid>

  487. 

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

  489.                                         <Stack direction="row">

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

  491.                                                 <OutlinedInput

  492.                                                     size="small"

  493.                                                     {...register("countryCode",

  494.                                                         {

  495.                                                             value: currentApplicationDetailData.contactFaxNo.countryCode,

  496.                                                         })}

  497.                                                     id='countryCode'

  498.                                                     sx={{

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

  500.                                                             WebkitTextFillColor: "#000000",

  501.                                                             background: "#f8f8f8",

  502.                                                         },

  503.                                                     }}

  504.                                                 />

  505.                                             </FormControl>

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

  507.                                                 <OutlinedInput

  508.                                                     size="small"

  509.                                                     {...register("faxNumber",

  510.                                                         {

  511.                                                             value: currentApplicationDetailData.contactFaxNo.faxNumber,

  512.                                                         })}

  513.                                                     id='faxNumber'

  514.                                                     sx={{

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

  516.                                                             WebkitTextFillColor: "#000000",

  517.                                                             background: "#f8f8f8",

  518.                                                         },

  519.                                                     }}

  520.                                                 />

  521.                                             </FormControl>

  522.                                         </Stack>

  523.                                     </Grid>

  524.                                 </Grid>

  525.                             </Grid>

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

  527.                                 alignItems="center">

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

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

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

  531.                                             <Grid container direction="row">

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

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

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

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

  536.                                                     </Typography></FormLabel>

  537.                                                 </Grid>

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

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

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

  541.                                                             <Typography

  542.                                                                 fullWidth

  543.                                                                 id='fileName'

  544.                                                                 variant="pnspsFormParagraph"

  545.                                                             >

  546.                                                                 {fileDetail?.filename}

  547.                                                             </Typography>

  548.                                                             <ThemeProvider theme={PNSPS_BUTTON_THEME}>

  549.                                                                 <Button

  550.                                                                     sx={{ ml: 3 }}

  551.                                                                     variant="contained"

  552.                                                                     onClick={onDownloadClick()}

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

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

  555.                                                                     color="save"

  556.                                                                     disabled={!fileDetail?.filename}

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

  558.                                                                 >

  559.                                                                     <FormattedMessage id="download" />

  560.                                                                 </Button>

  561.                                                             </ThemeProvider>

  562.                                                         </Grid>

  563.                                                     </Grid>

  564.                                                 </Grid>

  565.                                             </Grid>

  566.                                         </Grid>

  567.                                     </Grid>

  568.                                 </Grid>

  569.                             </Grid>

  570.                             {isORGLoggedIn() ?

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

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

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

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

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

  576.                                         </Grid>

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

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

  579.                                         </Grid>

  580.                                     </Grid>

  581.                                 </Grid> : null

  582.                             }

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

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

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

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

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

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

  589.                                         </Typography></FormLabel>

  590.                                     </Grid>

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

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

  593.                                     </Grid>

  594.                                 </Grid>

  595.                             </Grid>

  596.                         </Grid>

  597.                     </Grid>

  598.                     <div>

  599.                         <Dialog

  600.                             open={isPopUp}

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

  602.                             PaperProps={{

  603.                                 sx: {

  604.                                     minWidth: '40vw',

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

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

  607.                                 }

  608.                             }}

  609.                         >

  610.                             <DialogTitle>

  611.                                 <Typography variant="h3" >

  612.                                     <FormattedMessage id="payConfirm" />

  613.                                 </Typography>

  614.                             </DialogTitle>

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

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

  617.                                     <Typography variant="h4">

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

  619.                                     </Typography>

  620.                                 </Stack>

  621.                             </DialogContent>

  622.                             <DialogActions>

  623.                                 <Button

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

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

  626.                                 >

  627.                                     <Typography variant="pnspsFormParagraph">

  628.                                         <FormattedMessage id="close" />

  629.                                     </Typography></Button>

  630.                                 <Button

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

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

  633.                                 >

  634.                                     <Typography variant="pnspsFormParagraph">

  635.                                         <FormattedMessage id="confirm" />

  636.                                     </Typography></Button>

  637.                             </DialogActions>

  638.                         </Dialog>

  639.                     </div>

  640.                     <div>

  641.                         <Dialog

  642.                             open={errorPopUp}

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

  644.                             PaperProps={{

  645.                                 sx: {

  646.                                     minWidth: '40vw',

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

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

  649.                                 }

  650.                             }}

  651.                         >

  652.                             <DialogTitle></DialogTitle>

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

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

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

  656.                                     {

  657.                                         errorText

  658.                                     }

  659.                                 </Stack>

  660.                             </DialogContent>

  661.                             <DialogActions>

  662.                                 <Button

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

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

  665.                                 >

  666.                                     <Typography variant="pnspsFormParagraph">

  667.                                         <FormattedMessage id="close" />

  668.                                     </Typography></Button>

  669.                             </DialogActions>

  670.                         </Dialog>

  671.                     </div>

  672.                 </form>

  673.             </MainCard >

  674.     );

  675. };

  676. 

  677. export default ApplicationDetailCard;