alex
/
PNSPS-frontend-MaterialUI
1
0
Креирај огранак 0
Код Дискусије 0 Захтеви за спајање 0 Издања 0 Вики 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.
944 Комити
5 Гране
19 MiB
 
 
Дрво: b8243c4615
Гране Ознаке
${ item.name }
Create branch ${ searchTerm }
from 'b8243c4615'
${ noResults }
PNSPS-frontend-MaterialUI/src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js

778 lines
46 KiB
Датотека Blame Историја 

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

  20. } from "react";

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

  22. import Loadable from 'components/Loadable';

  23. 

  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 { FormattedMessage, useIntl } from "react-intl";

  43. // ==============================|| DASHBOARD - DEFAULT ||============================== //

  44. const ApplicationDetailCard = (

  45.     { applicationDetailData,

  46.         setStatus,

  47.         fee

  48.     }

  49. ) => {

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

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

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

  53.     const [paymentHoldedErrText, setPaymentHoldedErrText] = useState("");

  54.     const [paymentHoldedErr, setPaymentHoldedErr] = useState(false);

  55.     // const params = useParams();

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

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

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

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

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

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

  62.     const { register,

  63.         // getValues

  64.     } = useForm();

  65.     const navigate = useNavigate();

  66.     const intl = useIntl();

  67. 

  68.     useEffect(() => {

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

  70.         // console.log(applicationDetailData)

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

  72.             setCurrentApplicationDetailData(applicationDetailData.data);

  73.             setCompanyName(applicationDetailData.companyName);

  74.             setfileDetail(applicationDetailData.fileDetail);

  75.             setIssueNum(applicationDetailData.gazetteIssueDetail.volume + "/" + applicationDetailData.gazetteIssueDetail.issueYear

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

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

  78.         }

  79.     }, [applicationDetailData]);

  80. 

  81.     useEffect(() => {

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

  83.         // console.log(currentApplicationDetailData)

  84.         if (Object.keys(currentApplicationDetailData)?.length > 0) {

  85.             setOnReady(true);

  86.         }

  87.     }, [currentApplicationDetailData]);

  88. 

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

  90.         HttpUtils.fileDownload({

  91.             fileId: fileDetail?.id,

  92.             skey: fileDetail?.skey,

  93.             filename: fileDetail?.filename,

  94.         });

  95.     };

  96. 

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

  98.         setStatus("cancel")

  99.     };

  100. 

  101.     const checkExprityDate = () => {

  102.         HttpUtils.post({

  103.             url: UrlUtils.POST_CHECK_APP_EXPRITY_DATE,

  104.             params: {

  105.                 ids: [currentApplicationDetailData.id]

  106.             },

  107.             onSuccess: (responData) => {

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

  109.                     let appIdList = [currentApplicationDetailData.id]

  110.                     handlePaymentCheck(appIdList)

  111.                     return;

  112.                 }

  113.                 setErrorText(intl.formatMessage({ id: "MSG.expiredApp" }));

  114.                 setErrorPopUp(true);

  115.             }

  116.         });

  117.     };

  118. 

  119. 

  120.     function doPayment() {

  121.         setIsPopUp(false);

  122.         let appIdList = [currentApplicationDetailData.id]

  123.         navigate('/paymentPage', { state: { amount: fee, appIdList: appIdList } });

  124.     }

  125. 

  126.     const handlePaymentCheck = (appIdList) => {

  127.         HttpUtils.post({

  128.             url: UrlUtils.PAYMENT_CHECK,

  129.             params: {

  130.                 appIds: appIdList

  131.             },

  132.             onSuccess: (responseData) => {

  133.                 const latestData = {};

  134. 

  135.                 responseData.forEach(item => {

  136.                     const { appId, timeDiff } = item;

  137.                     if (latestData[appId] === undefined || timeDiff < latestData[appId].timeDiff) {

  138.                         latestData[appId] = item;

  139.                     }

  140.                 });

  141.                 const latestDataObjects = Object.values(latestData);

  142. 

  143.                 const filteredData = latestDataObjects.filter(item => item.timeDiff > 20 || item.status !== "APPR");

  144.                 const filteredAppIds = filteredData.map(item => item.appId);

  145. 

  146.                 const appIdsNotInData = appIdList.filter(appId => !latestDataObjects.some(item => item.appId === appId));

  147.                 const combinedAppIdsArray = [...appIdsNotInData, ...filteredAppIds];

  148. 

  149.                 const readyToPayment = appIdList.every(appId => combinedAppIdsArray.includes(appId));

  150.                 if (readyToPayment) {

  151.                     setIsPopUp(true);

  152.                     return;

  153.                 } else {

  154.                     const appIdsInData = appIdList.filter(appId => !combinedAppIdsArray.some(item => item === appId));

  155.                     const HoldingApplication = latestDataObjects.filter(item => appIdsInData.includes(item.appId));

  156.                     const resultString = HoldingApplication.map(item => item.appNo).join(' , ');

  157.                     setPaymentHoldedErrText(resultString);

  158.                     // setPaymentHoldedErrText(intl.formatMessage({ id: 'MSG.paymentHolded' }, { appNo: record.appNo }));

  159.                     setPaymentHoldedErr(true);

  160.                 }

  161.             }

  162.         });

  163.     };

  164. 

  165.     return (

  166.         !onReady ?

  167.             <LoadingComponent />

  168.             :

  169.             <MainCard elevation={0}

  170.                 border={false}

  171.                 content={false}

  172.             >

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

  174.                     <Grid item xs={12}>

  175.                         <Stack

  176.                             direction="row"

  177.                             justifyContent="space-between"

  178.                             alignItems="center"

  179.                             spacing={2}

  180.                             mb={2}

  181.                         >

  182.                             <ThemeProvider theme={PNSPS_BUTTON_THEME}>

  183.                                 {

  184.                                     currentApplicationDetailData.status == "confirmed" ?

  185.                                         <Button

  186.                                             variant="contained"

  187.                                             color="create"

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

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

  190.                                                 || currentApplicationDetailData.status == "cancelled"

  191.                                                 || currentApplicationDetailData.status == "paid"

  192.                                                 || currentApplicationDetailData.creditor}

  193.                                             startIcon={<EditNoteIcon />}

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

  195.                                         >

  196.                                             <FormattedMessage id="payFor" />

  197.                                         </Button>

  198.                                         : null

  199.                                 }

  200.                                 <Button

  201.                                     variant="contained"

  202.                                     onClick={cancelledClick()}

  203.                                     color="edit"

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

  205.                                         || currentApplicationDetailData.status == "cancelled"

  206.                                         || currentApplicationDetailData.status == "withdrawn"

  207.                                         || currentApplicationDetailData.status == "completed"

  208.                                         || currentApplicationDetailData.status == "notAccepted"

  209.                                         || currentApplicationDetailData.status == "resubmit"

  210.                                         || (!currentApplicationDetailData.creditor

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

  212.                                         || (currentApplicationDetailData.creditor

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

  214.                                         || (currentApplicationDetailData.creditor

  215.                                             && currentApplicationDetailData.status == "published")

  216.                                     }

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

  218.                                     startIcon={<CloseIcon />}

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

  220.                                 >

  221.                                     <FormattedMessage id="cancel" />

  222.                                 </Button>

  223.                             </ThemeProvider>

  224.                         </Stack>

  225.                     </Grid>

  226.                 </Grid>

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

  228.                     <FormattedMessage id="publicNoticeDetailTitle" />

  229.                 </Typography>

  230.                 <form>

  231.                     <Grid container direction="column">

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

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

  234.                                 alignItems="center">

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

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

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

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

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

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

  241.                                             </Typography></FormLabel>

  242.                                         </Grid>

  243. 

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

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

  246.                                                 <OutlinedInput

  247.                                                     fullWidth

  248.                                                     size="small"

  249.                                                     {...register("appNo",

  250.                                                         {

  251.                                                             value: currentApplicationDetailData.appNo,

  252.                                                         })}

  253.                                                     id='appNo'

  254.                                                     sx={{

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

  256.                                                             WebkitTextFillColor: "#000000",

  257.                                                             background: "#f8f8f8",

  258.                                                         },

  259.                                                     }}

  260.                                                 />

  261.                                             </FormControl>

  262.                                         </Grid>

  263.                                     </Grid>

  264.                                 </Grid>

  265.                                 <Grid item xs={12} sm={12} md={9} lg={5} 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="applyStatus" />:

  271.                                             </Typography></FormLabel>

  272.                                         </Grid>

  273. 

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

  275.                                             <FormControl variant="outlined">

  276.                                                 {currentApplicationDetailData.status ? StatusUtils.getStatusByTextIntl(currentApplicationDetailData.status, currentApplicationDetailData.creditor, intl) : ""}

  277.                                             </FormControl>

  278.                                         </Grid>

  279. 

  280.                                     </Grid>

  281.                                     {

  282.                                         currentApplicationDetailData.reason ?

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

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

  285. 

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

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

  288.                                                     </Grid>

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

  290.                                                         <FormLabel>

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

  292.                                                                 {currentApplicationDetailData.reason}

  293.                                                             </Typography>

  294.                                                         </FormLabel>

  295.                                                     </Grid>

  296. 

  297.                                                 </Grid>

  298.                                             </Grid>

  299.                                             : ""

  300.                                     }

  301.                                 </Grid>

  302.                             </Grid>

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

  304.                                 alignItems="center">

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

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

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

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

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

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

  311.                                             </Typography></FormLabel>

  312.                                         </Grid>

  313. 

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

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

  316.                                                 {currentApplicationDetailData.orgId === null ?

  317.                                                     <OutlinedInput

  318.                                                         fullWidth

  319.                                                         size="small"

  320.                                                         {...register("contactPerson",

  321.                                                             {

  322.                                                                 value: currentApplicationDetailData.contactPerson,

  323.                                                             })}

  324.                                                         id='contactPerson'

  325.                                                         sx={{

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

  327.                                                                 WebkitTextFillColor: "#000000",

  328.                                                                 background: "#f8f8f8",

  329.                                                             },

  330.                                                         }}

  331.                                                     /> :

  332.                                                     <OutlinedInput

  333.                                                         fullWidth

  334.                                                         size="small"

  335.                                                         {...register("companyName",

  336.                                                             {

  337.                                                                 value: companyName.enCompanyName,

  338.                                                             })}

  339.                                                         id='companyName'

  340.                                                         sx={{

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

  342.                                                                 WebkitTextFillColor: "#000000",

  343.                                                                 background: "#f8f8f8",

  344.                                                             },

  345.                                                         }}

  346.                                                     />

  347.                                                 }

  348.                                             </FormControl>

  349.                                         </Grid>

  350.                                     </Grid>

  351.                                 </Grid>

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

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

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

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

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

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

  358.                                             </Typography></FormLabel>

  359.                                         </Grid>

  360. 

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

  362.                                             <Stack direction="row">

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

  364.                                                     <OutlinedInput

  365.                                                         size="small"

  366.                                                         {...register("issueNum",

  367.                                                             {

  368.                                                                 value: issueNum,

  369.                                                             })}

  370.                                                         id='issueNum'

  371.                                                         sx={{

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

  373.                                                                 WebkitTextFillColor: "#000000",

  374.                                                                 background: "#f8f8f8",

  375.                                                             },

  376.                                                         }}

  377.                                                     />

  378.                                                 </FormControl>

  379.                                             </Stack>

  380.                                         </Grid>

  381.                                     </Grid>

  382.                                 </Grid>

  383.                             </Grid>

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

  385.                                 alignItems="center">

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

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

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

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

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

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

  392.                                             </Typography></FormLabel>

  393.                                         </Grid>

  394. 

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

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

  397.                                                 <OutlinedInput

  398.                                                     fullWidth

  399.                                                     size="small"

  400.                                                     {...register("contactPerson",

  401.                                                         {

  402.                                                             value: currentApplicationDetailData.contactPerson,

  403.                                                         })}

  404.                                                     id='contactPerson'

  405.                                                     sx={{

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

  407.                                                             WebkitTextFillColor: "#000000",

  408.                                                             background: "#f8f8f8",

  409.                                                         },

  410.                                                     }}

  411.                                                 />

  412.                                             </FormControl>

  413.                                         </Grid>

  414.                                     </Grid>

  415.                                 </Grid>

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

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

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

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

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

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

  422.                                             </Typography></FormLabel>

  423.                                         </Grid>

  424. 

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

  426.                                             <Stack direction="row">

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

  428.                                                     <OutlinedInput

  429.                                                         size="small"

  430.                                                         {...register("issueDate",

  431.                                                             {

  432.                                                                 value: issueDate,

  433.                                                             })}

  434.                                                         id='issueDate'

  435.                                                         sx={{

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

  437.                                                                 WebkitTextFillColor: "#000000",

  438.                                                                 background: "#f8f8f8",

  439.                                                             },

  440.                                                         }}

  441.                                                     />

  442.                                                 </FormControl>

  443.                                             </Stack>

  444.                                         </Grid>

  445.                                     </Grid>

  446.                                 </Grid>

  447.                             </Grid>

  448. 

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

  450.                                 alignItems="center">

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

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

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

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

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

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

  457.                                             </Typography></FormLabel>

  458.                                         </Grid>

  459. 

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

  461.                                             <Stack direction="row">

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

  463.                                                     <OutlinedInput

  464.                                                         size="small"

  465.                                                         {...register("countryCode",

  466.                                                             {

  467.                                                                 value: currentApplicationDetailData.contactTelNo.countryCode,

  468.                                                             })}

  469.                                                         id='countryCode'

  470.                                                         sx={{

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

  472.                                                                 WebkitTextFillColor: "#000000",

  473.                                                                 background: "#f8f8f8",

  474.                                                             },

  475.                                                         }}

  476.                                                     />

  477.                                                 </FormControl>

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

  479.                                                     <OutlinedInput

  480.                                                         size="small"

  481.                                                         {...register("phoneNumber",

  482.                                                             {

  483.                                                                 value: currentApplicationDetailData.contactTelNo.phoneNumber,

  484.                                                             })}

  485.                                                         id='phoneNumber'

  486.                                                         sx={{

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

  488.                                                                 WebkitTextFillColor: "#000000",

  489.                                                                 background: "#f8f8f8",

  490.                                                             },

  491.                                                         }}

  492.                                                     />

  493.                                                 </FormControl>

  494.                                             </Stack>

  495.                                         </Grid>

  496.                                     </Grid>

  497.                                 </Grid>

  498.                                 {

  499.                                     fee > 0 ?

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

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

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

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

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

  505.                                                         <FormattedMessage id="currencyAmount" />(HK$):

  506.                                                     </Typography></FormLabel>

  507.                                                 </Grid>

  508. 

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

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

  511.                                                         <OutlinedInput

  512.                                                             size="small"

  513.                                                             value={FormatUtils.currencyFormat(fee)}

  514.                                                             sx={{

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

  516.                                                                     WebkitTextFillColor: "#000000",

  517.                                                                     background: "#f8f8f8",

  518.                                                                 },

  519.                                                             }}

  520.                                                         />

  521.                                                     </FormControl>

  522.                                                 </Grid>

  523.                                             </Grid>

  524.                                         </Grid>

  525.                                         :

  526.                                         <></>

  527.                                 }

  528. 

  529.                             </Grid>

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

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

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

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

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

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

  536.                                         </Typography></FormLabel>

  537.                                     </Grid>

  538. 

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

  540.                                         <Stack direction="row">

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

  542.                                                 <OutlinedInput

  543.                                                     size="small"

  544.                                                     {...register("countryCode",

  545.                                                         {

  546.                                                             value: currentApplicationDetailData.contactFaxNo.countryCode,

  547.                                                         })}

  548.                                                     id='countryCode'

  549.                                                     sx={{

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

  551.                                                             WebkitTextFillColor: "#000000",

  552.                                                             background: "#f8f8f8",

  553.                                                         },

  554.                                                     }}

  555.                                                 />

  556.                                             </FormControl>

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

  558.                                                 <OutlinedInput

  559.                                                     size="small"

  560.                                                     {...register("faxNumber",

  561.                                                         {

  562.                                                             value: currentApplicationDetailData.contactFaxNo.faxNumber,

  563.                                                         })}

  564.                                                     id='faxNumber'

  565.                                                     sx={{

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

  567.                                                             WebkitTextFillColor: "#000000",

  568.                                                             background: "#f8f8f8",

  569.                                                         },

  570.                                                     }}

  571.                                                 />

  572.                                             </FormControl>

  573.                                         </Stack>

  574.                                     </Grid>

  575.                                 </Grid>

  576.                             </Grid>

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

  578.                                 alignItems="center">

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

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

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

  582.                                             <Grid container direction="row">

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

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

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

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

  587.                                                     </Typography></FormLabel>

  588.                                                 </Grid>

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

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

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

  592.                                                             <Typography

  593.                                                                 fullWidth

  594.                                                                 id='fileName'

  595.                                                                 variant="pnspsFormParagraph"

  596.                                                             >

  597.                                                                 {fileDetail?.filename}

  598.                                                             </Typography>

  599.                                                             <ThemeProvider theme={PNSPS_BUTTON_THEME}>

  600.                                                                 <Button

  601.                                                                     sx={{ ml: 3 }}

  602.                                                                     variant="contained"

  603.                                                                     onClick={onDownloadClick()}

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

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

  606.                                                                     color="save"

  607.                                                                     disabled={!fileDetail?.filename}

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

  609.                                                                 >

  610.                                                                     <FormattedMessage id="download" />

  611.                                                                 </Button>

  612.                                                             </ThemeProvider>

  613.                                                         </Grid>

  614.                                                     </Grid>

  615.                                                 </Grid>

  616.                                             </Grid>

  617.                                         </Grid>

  618.                                     </Grid>

  619.                                 </Grid>

  620.                             </Grid>

  621.                             {isORGLoggedIn() ?

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

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

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

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

  626.                                             <FormLabel><Typography variant="pnspsFormParagraph"><FormattedMessage id="careOf" />:</Typography></FormLabel>

  627.                                         </Grid>

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

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

  630.                                                 <OutlinedInput

  631.                                                     size="small"

  632.                                                     value={currentApplicationDetailData.careOf}

  633.                                                     sx={{

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

  635.                                                             WebkitTextFillColor: "#000000",

  636.                                                             background: "#f8f8f8",

  637.                                                         },

  638.                                                     }}

  639.                                                 />

  640.                                             </FormControl>

  641.                                         </Grid>

  642.                                     </Grid>

  643.                                 </Grid> : null

  644.                             }

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

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

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

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

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

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

  651.                                         </Typography></FormLabel>

  652.                                     </Grid>

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

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

  655.                                             <OutlinedInput

  656.                                                 size="small"

  657.                                                 value={currentApplicationDetailData.remarks}

  658.                                                 sx={{

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

  660.                                                         WebkitTextFillColor: "#000000",

  661.                                                         background: "#f8f8f8",

  662.                                                     },

  663.                                                 }}

  664.                                             />

  665.                                         </FormControl>

  666.                                     </Grid>

  667.                                 </Grid>

  668.                             </Grid>

  669.                         </Grid>

  670.                     </Grid>

  671.                     <div>

  672.                         <Dialog

  673.                             open={isPopUp}

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

  675.                             PaperProps={{

  676.                                 sx: {

  677.                                     minWidth: '40vw',

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

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

  680.                                 }

  681.                             }}

  682.                         >

  683.                             <DialogTitle>

  684.                                 <Typography variant="h3" >

  685.                                     <FormattedMessage id="payConfirm" />

  686.                                 </Typography>

  687.                             </DialogTitle>

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

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

  690.                                     <Typography variant="h4">

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

  692.                                     </Typography>

  693.                                 </Stack>

  694.                             </DialogContent>

  695.                             <DialogActions>

  696.                                 <Button

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

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

  699.                                 >

  700.                                     <Typography variant="pnspsFormParagraph">

  701.                                         <FormattedMessage id="close" />

  702.                                     </Typography></Button>

  703.                                 <Button

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

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

  706.                                 >

  707.                                     <Typography variant="pnspsFormParagraph">

  708.                                         <FormattedMessage id="confirm" />

  709.                                     </Typography></Button>

  710.                             </DialogActions>

  711.                         </Dialog>

  712.                     </div>

  713.                     <div>

  714.                         <Dialog

  715.                             open={errorPopUp}

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

  717.                             PaperProps={{

  718.                                 sx: {

  719.                                     minWidth: '40vw',

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

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

  722.                                 }

  723.                             }}

  724.                         >

  725.                             <DialogTitle></DialogTitle>

  726.                             <Typography variant="h2" style={{ padding: '16px' }}><FormattedMessage id="MSG.actionFail" /></Typography>

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

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

  729.                                     {

  730.                                         errorText

  731.                                     }

  732.                                 </Stack>

  733.                             </DialogContent>

  734.                             <DialogActions>

  735.                                 <Button

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

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

  738.                                 >

  739.                                     <Typography variant="pnspsFormParagraph">

  740.                                         <FormattedMessage id="close" />

  741.                                     </Typography></Button>

  742.                             </DialogActions>

  743.                         </Dialog>

  744.                     </div>

  745.                     <div>

  746.                         <Dialog

  747.                             open={paymentHoldedErr}

  748.                             onClose={() => setPaymentHoldedErr(false)}

  749.                             PaperProps={{

  750.                                 sx: {

  751.                                     minWidth: '40vw',

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

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

  754.                                 }

  755.                             }}

  756.                         >

  757.                             <DialogTitle></DialogTitle>

  758.                             <Typography variant="h4" style={{ paddingLeft: '24px' }}><FormattedMessage id="MSG.actionFail" /></Typography>

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

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

  761.                                     <div dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: 'MSG.paymentHolded' }, { appNo: paymentHoldedErrText }) }} />

  762.                                 </Stack>

  763.                             </DialogContent>

  764.                             <DialogActions>

  765.                                 <Button onClick={() => setPaymentHoldedErr(false)} aria-label={intl.formatMessage({ id: 'close' })}>

  766.                                     <Typography variant="h5">

  767.                                         <FormattedMessage id="close" />

  768.                                     </Typography></Button>

  769.                             </DialogActions>

  770.                         </Dialog>

  771.                     </div>

  772.                 </form>

  773.             </MainCard >

  774.     );

  775. };

  776. 

  777. export default ApplicationDetailCard;