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.
1355 Комити
5 Гране
30 MiB
 
 
Дрво: b1c5f43aba
Гране Ознаке
${ item.name }
Create branch ${ searchTerm }
from 'b1c5f43aba'
${ noResults }
PNSPS-frontend-MaterialUI/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js

569 lines
24 KiB
Датотека Blame Историја 

  1. // material-ui

  2. import * as React from 'react';

  3. import {

  4.     Stack,

  5.     Typography,

  6.     Button,

  7.     Autocomplete,

  8.     TextField,

  9.     Grid,

  10.     Dialog, DialogTitle, DialogContent, DialogActions, useMediaQuery,

  11. } from '@mui/material';

  12. import { FiDataGrid } from "components/FiDataGrid";

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

  14. import * as utils from "auth/utils"

  15. import {

  16.     PAYMENT_CHECK,

  17.     POST_CHECK_APP_EXPRITY_DATE,

  18.     GET_PUBLIC_NOTICE_LIST_ListByStatus_pendingPayment_careOfCombo

  19. } from "utils/ApiPathConst"

  20. import * as DateUtils from "utils/DateUtils"

  21. import * as FormatUtils from "utils/FormatUtils"

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

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

  24. import {

  25.     isORGLoggedIn,

  26.     isDummyLoggedIn,

  27. } from "utils/Utils";

  28. // import { dateStr } from "utils/DateUtils";

  29. import { ThemeProvider, useTheme } from "@emotion/react";

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

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

  32. // ==============================|| EVENT TABLE ||============================== //

  33. 

  34. export default function SubmittedTab({ setCount, url }) {

  35.     const [rowList, setRowList] = React.useState([]);

  36.     const [selectedRowItems, setSelectedRowItems] = React.useState([]);

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

  38.     const [checkCareOf, setCheckCareOf] = React.useState(false);

  39.     const [careOfComboList, setCareOfComboList] = React.useState([]);

  40.     const [selectedCareOf, setSelectedCareOf] = React.useState(null);

  41.     const [expiryDateErrText, setExpiryDateErrText] = React.useState("");

  42.     const [expiryDateErr, setExpiryDateErr] = React.useState(false);

  43. 

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

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

  46.     const [_searchCriteria, set_searchCriteria] = React.useState({});

  47.     // const [checkPaymentMethod, setCheckPaymentMethod] = React.useState(false);

  48. 

  49.     const theme = useTheme();

  50.     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));

  51.     const intl = useIntl();

  52.     const { locale } = intl;

  53. 

  54.     //const [amount, setAmount] = React.useState(0);

  55.     const navigate = useNavigate()

  56. 

  57.     React.useEffect(() => {

  58.         getCareOfList();

  59.     }, []);

  60. 

  61.     React.useEffect(() => {

  62.         if (selectedCareOf != null) {

  63.             set_searchCriteria({ "careOf": selectedCareOf.label });

  64.         } else {

  65.             set_searchCriteria({});

  66.         }

  67.     }, [selectedCareOf]);

  68.     

  69. 

  70.     const getCareOfList = () => {

  71.         HttpUtils.get({

  72.             url: GET_PUBLIC_NOTICE_LIST_ListByStatus_pendingPayment_careOfCombo,

  73.             params: {},

  74.             onSuccess: function (responData) {

  75.                 setCareOfComboList(responData);

  76.             }

  77.         });

  78.     }

  79. 

  80.     const handleDetailClick = (params) => () => {

  81.         navigate('/publicNotice/' + params.id);

  82.     };

  83. 

  84.     const handlePaymentBtn = () => {

  85.         let appIdList = [];

  86.         let paymentCheckList = [];

  87.         const _datas = rowList;

  88.         const datas = _datas?.filter((row) =>

  89.             selectedRowItems.includes(row.id)

  90.         );

  91.         // console.log(datas)

  92.         for (var i = 0; i < datas?.length; i++) {

  93.             appIdList.push(datas[i].id);

  94.             if ( datas[i].paymentMethod != "online"){

  95.                 paymentCheckList.push(datas[i].paymentMethod)

  96.             }

  97.         }

  98.         // console.log(paymentCheckList)

  99.         if(paymentCheckList.length == 0){

  100.             if (appIdList.length < 1) {

  101.                 setExpiryDateErrText(intl.formatMessage({ id: 'MSG.plzSelectApp' }));

  102.                 setExpiryDateErr(true);

  103.                 return;

  104.             }

  105.             HttpUtils.post({

  106.                 url: POST_CHECK_APP_EXPRITY_DATE,

  107.                 params: {

  108.                     ids: appIdList

  109.                 },

  110.                 onSuccess: (responData) => {

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

  112.                         // setIsPopUp(true);

  113.                         handlePaymentCheck(appIdList)

  114.                         return;

  115.                     }

  116.                     let str = "";

  117.                     responData.msg.forEach((item) => {

  118.                         str += "App: " + item.appNo + ", 到期日: " + DateUtils.datetimeStr_Cht(item.expiryDate) + "\n";

  119.                     });

  120.                     setExpiryDateErrText(str.split('\n').map(str => <>{str}<br /></>));

  121.                     setExpiryDateErr(true);

  122.                 }

  123.             });

  124.         } else {

  125.             setExpiryDateErrText(intl.formatMessage({ id: 'MSG.plzonlinePayment' }));

  126.             setExpiryDateErr(true);

  127.             return;

  128.         }

  129.     };

  130. 

  131.     const handlePaymentCheck = (appIdList) => {

  132.         HttpUtils.post({

  133.             url: PAYMENT_CHECK,

  134.             params: {

  135.                 appIds: appIdList

  136.             },

  137.             onSuccess: (responseData) => {

  138.                 const latestData = {};

  139. 

  140.                 responseData.forEach(item => {

  141.                     // console.log(item)

  142.                 const { appId, timeDiff } = item;

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

  144.                     latestData[appId] = item;

  145.                 }

  146.                 });

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

  148.                 

  149.                 const filteredData = latestDataObjects.filter(item => item.timeDiff > 30 || item.status == "CANC" || item.status == "REJT");

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

  151. 

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

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

  154. 

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

  156.                 if (readyToPayment) {

  157.                     setIsPopUp(true);

  158.                     return;

  159.                 } else {

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

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

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

  163.                     setPaymentHoldedErrText(resultString);

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

  165.                     setPaymentHoldedErr(true);

  166.                 }

  167.             }

  168.         });

  169.     };

  170. 

  171.     const columns = [

  172.         {

  173.             id: 'appNo',

  174.             field: 'appNo',

  175.             headerName: intl.formatMessage({ id: 'applicationId' }),

  176.             width: isMdOrLg ? 'auto' : 160,

  177.             flex: isMdOrLg ? 1 : undefined,

  178.         },

  179.         {

  180.             id: 'created',

  181.             field: 'created',

  182.             headerName: intl.formatMessage({ id: 'submitDate' }),

  183.             width: isMdOrLg ? 'auto' : 160,

  184.             flex: isMdOrLg ? 1 : undefined,

  185.             valueGetter: (params) => {

  186.                 return DateUtils.datetimeStr(params.value);

  187.             }

  188.         },

  189.         {

  190.             id: 'remarks',

  191.             field: 'remarks',

  192.             headerName: isORGLoggedIn() ? intl.formatMessage({ id: 'gazetteCount2_1' }) : intl.formatMessage({ id: 'myRemarks' }),

  193.             width: isMdOrLg ? 'auto' : 400,

  194.             flex: isMdOrLg ? 3 : undefined,

  195.             renderCell: (params) => (

  196.                 isORGLoggedIn() ?

  197.                         isDummyLoggedIn()?

  198.                         <div>

  199.                             <FormattedMessage id="gazetteCount" />: {params.row.issueVolume + "/" + params.row.issueYear

  200.                                 + " No. " + params.row.issueNo}<br />

  201.                             GLD: {params.row.custName} <br />

  202.                             <FormattedMessage id="careOf" />: {params.row.careOf} <br />

  203.                             <FormattedMessage id="myRemarks" />: {params.row.remarks}

  204.                         </div>:

  205.                         <div>

  206.                             <FormattedMessage id="gazetteCount" />: {params.row.issueVolume + "/" + params.row.issueYear

  207.                                 + " No. " + params.row.issueNo}<br />

  208.                             <FormattedMessage id="careOf" />: {params.row.careOf} <br />

  209.                             <FormattedMessage id="myRemarks" />: {params.row.remarks}

  210.                         </div> 

  211.                     :

  212.                     <div>

  213.                         <FormattedMessage id="gazetteCount" />: {params.row.issueVolume + "/" + params.row.issueYear

  214.                             + " No. " + params.row.issueNo}<br />

  215.                         <FormattedMessage id="myRemarks" />:{params.row.remarks}

  216.                     </div>

  217.             )

  218.         },

  219.         {

  220.             id: 'fee',

  221.             field: 'fee',

  222.             headerName: intl.formatMessage({ id: 'price' }),

  223.             width: isMdOrLg ? 'auto' : 160,

  224.             flex: isMdOrLg ? 1 : undefined,

  225.             renderCell: (params) => {

  226.                 return FormatUtils.currencyFormat(params.row.fee)

  227.             },

  228.         },

  229.         {

  230.             id: 'paymentMethodAndDeadLine',

  231.             field: 'paymentMethodAndDeadLine',

  232.             headerName: intl.formatMessage({ id: 'paymentMethodAndDeadLine' }),

  233.             width: isMdOrLg ? 'auto' : 250,

  234.             flex: isMdOrLg ? 2 : undefined,

  235.             renderCell: (params) => (

  236.                 <div>

  237.                     <FormattedMessage id={utils.getPaymentMethod(params.row.paymentMethod)} /><br />

  238.                     <div>

  239.                         {/* {dateStr(params.row.closingDate)} */}

  240.                         {

  241.                             params.row.paymentMethod=="online"?

  242.                                 locale === 'en' ?

  243.                                     `${DateUtils.dateFormatWithFix(params.row.expiryDate, intl.formatMessage({ id: "datetimeFormate" }), 14, 30)?.replace("am", "a.m.")?.replace("pm", "p.m.")}`

  244.                                     :

  245.                                     `${DateUtils.dateFormatWithFix(params.row.expiryDate, intl.formatMessage({ id: "datetimeFormate" }), 14, 30)?.replace("am", "上午")?.replace("pm", "下午").replace("00分", "")}`

  246.                                 :params.row.paymentMethod=="demandNote" ?

  247.                                     locale === 'en' ?

  248.                                         `${DateUtils.dateFormatWithFix(params.row.expiryDate, intl.formatMessage({ id: "datetimeFormate" }), 12, 0)?.replace("am", "a.m.")?.replace("pm", "p.m.")}`

  249.                                         :

  250.                                         `${DateUtils.dateFormatWithFix(params.row.expiryDate, intl.formatMessage({ id: "datetimeFormate" }), 12, 0)?.replace("am", "上午")?.replace("pm", "下午").replace("00分", "")}`

  251.                                     :

  252.                                         locale === 'en' ?

  253.                                                 `${DateUtils.dateFormatWithFix(params.row.expiryDate, intl.formatMessage({ id: "datetimeFormate" }), 12, 30)?.replace("am", "a.m.")?.replace("pm", "p.m.")}`

  254.                                                 :

  255.                                                 `${DateUtils.dateFormatWithFix(params.row.expiryDate, intl.formatMessage({ id: "datetimeFormate" }), 12, 30)?.replace("am", "上午")?.replace("pm", "下午").replace("00分", "")}`

  256.                         }

  257.                         {/* {

  258.                             locale === 'en' ?

  259.                                 `${DateUtils.dateFormatWithFix(params.row.closingDate, intl.formatMessage({ id: "datetimeFormate" }), 14, 30)?.replace("am", "a.m.")?.replace("pm", "p.m.")}`

  260.                                 :

  261.                                 `${DateUtils.dateFormatWithFix(params.row.closingDate, intl.formatMessage({ id: "datetimeFormate" }), 14, 30)?.replace("am", "上午")?.replace("pm", "下午").replace("00分", "")}`

  262.                         }

  263.                         {params.row.paymentMethod=="online" ? " 2:30pm"

  264.                             :params.row.paymentMethod=="demandNote" ? " 12:00pm"

  265.                                 : " 12:30pm"} */}

  266.                     </div>

  267.                 </div>

  268.             )

  269.         },

  270.         // {

  271.         //     id: 'closingDateOff',

  272.         //     field: 'closingDateOff',

  273.         //     headerName: intl.formatMessage({ id: 'paymentMethod' }),

  274.         //     width: isMdOrLg ? 'auto' : 160,

  275.         //     flex: isMdOrLg ? 1 : undefined,

  276.         //     renderCell: (params) => {

  277.         //         // console.log(params)

  278.         //         let closingDateOff = params.row.closingDateOff;

  279.         //         return <div style={{ margin: 4 }}>{dateStr(closingDateOff)}</div>

  280.         //     },

  281.         // },

  282.         {

  283.             id: 'status',

  284.             field: 'status',

  285.             headerName: intl.formatMessage({ id: 'status' }),

  286.             width: isMdOrLg ? 'auto' : 160,

  287.             flex: isMdOrLg ? 1 : undefined,

  288.             renderCell: (params) => {

  289.                 return [StatusUtils.getStatusIntl(params, intl)]

  290.             },

  291.         },

  292.         {

  293.             field: 'actions',

  294.             type: 'actions',

  295.             headerName: '',

  296.             width: 150,

  297.             cellClassName: 'actions',

  298.             renderCell: (params) => {

  299.                 return <Button aria-label={intl.formatMessage({ id: 'viewDetail' })} onClick={handleDetailClick(params)}>

  300.                     <FormattedMessage id="viewDetail" />

  301.                 </Button>;

  302.             },

  303.         }

  304.     ];

  305. 

  306.     const getWindowContent = () => {

  307.         var content = [];

  308.         let totalAmount = 0;

  309.         const _datas = rowList;

  310.         const datas = _datas?.filter((row) =>

  311.             selectedRowItems.includes(row.id)

  312.         );

  313.         for (var i = 0; i < datas?.length; i++) {

  314.             content.push(<>

  315.                 <Stack direction="row" justifyContent="space-between">

  316.                     <Typography variant="h5">

  317.                         <FormattedMessage id="applicationId" />: {datas[i].appNo}

  318.                     </Typography>

  319.                     ({DateUtils.datetimeStr(datas[i].created)})

  320.                 </Stack>

  321.                 <FormattedMessage id="extraMark" />: {datas[i].remarks}

  322.                 <br /><br />

  323.             </>);

  324. 

  325.             totalAmount += datas[i].fee;

  326.         }

  327.         content.push(<Typography variant="h5">

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

  329.             <br /><br />

  330.         </Typography>);

  331.         return content;

  332.     }

  333. 

  334.     function handleRowDoubleClick(params) {

  335.         navigate('/publicNotice/' + params.id);

  336.     }

  337. 

  338.     function doPayment() {

  339.         setIsPopUp(false);

  340.         let totalAmount = 0;

  341.         let appIdList = [];

  342.         const _datas = rowList;

  343.         const datas = _datas?.filter((row) =>

  344.             selectedRowItems.includes(row.id)

  345.         );

  346.         // console.log(datas)

  347.         for (var i = 0; i < datas?.length; i++) {

  348.             totalAmount += datas[i].fee;

  349.             appIdList.push(datas[i].id);

  350.         }

  351.         const firstCareOf = datas[0].careOf;

  352.         const areAllCareOfEqual = datas.every(obj => obj.careOf === firstCareOf);

  353. 

  354. 

  355.         if (appIdList.length > 0 && areAllCareOfEqual) {

  356.             navigate('/paymentPage', { state: { amount: totalAmount, appIdList: appIdList } });

  357.         } else {

  358.             setCheckCareOf(true);

  359.             // console.log("The selected applications should be from the same Care of.")

  360.         }

  361.     }

  362. 

  363.     function afterWarningPayment() {

  364.         let totalAmount = 0;

  365.         let appIdList = [];

  366.         const _datas = rowList;

  367.         const datas = _datas?.filter((row) =>

  368.             selectedRowItems.includes(row.id)

  369.         );

  370.         // console.log(datas)

  371.         for (var i = 0; i < datas?.length; i++) {

  372.             totalAmount += datas[i].fee;

  373.             appIdList.push(datas[i].id);

  374.         }

  375.         navigate('/paymentPage', { state: { amount: totalAmount, appIdList: appIdList } });

  376.     }

  377. 

  378.     return (

  379.         <>

  380.             <div style={{ minHeight: 400, width: '100%', padding: 4 }}>

  381.                 {isORGLoggedIn() ?

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

  383.                         <Grid item xs={3} md={1}>

  384.                             <Typography variant="h5"><FormattedMessage id="careOf" />:</Typography>

  385.                         </Grid>

  386.                         <Grid item xs={8} md={2}>

  387.                             <Autocomplete

  388.                                 disablePortal

  389.                                 id="careOfCombo"

  390.                                 value={selectedCareOf === null ? null : selectedCareOf}

  391.                                 options={careOfComboList}

  392.                                 onChange={(event, newValue) => {

  393.                                     // console.log(newValue)

  394.                                     setSelectedCareOf(newValue);

  395.                                 }}

  396.                                 renderInput={(params) => <TextField {...params} />}

  397.                             />

  398.                         </Grid>

  399.                     </Grid> : null

  400.                 }

  401.                 <FiDataGrid

  402.                     checkboxSelection

  403.                     disableRowSelectionOnClick

  404.                     columns={columns}

  405.                     customPageSize={10}

  406.                     onRowSelectionModelChange={(newSelection) => {

  407.                         setSelectedRowItems(newSelection);

  408.                     }}

  409.                     onRowDoubleClick={handleRowDoubleClick}

  410.                     getRowHeight={() => 'auto'}

  411.                     doLoad={React.useMemo(() => ({

  412.                         url: url,

  413.                         params: _searchCriteria,

  414.                         callback: function (responseData) {

  415.                             setCount(responseData?.count ?? 0);

  416.                             setRowList(responseData?.records);

  417.                         }

  418.                     }),[url, _searchCriteria])}

  419.                 />

  420. 

  421.                 <ThemeProvider theme={PNSPS_BUTTON_THEME}>

  422.                     <Button

  423.                         color="create"

  424.                         variant="contained"

  425.                         aria-label={intl.formatMessage({ id: 'payOnlineBtn' })}

  426.                         onClick={() => { handlePaymentBtn() }}

  427.                         sx={{ mt: 2, ml: 1 }}

  428.                     >

  429.                         <FormattedMessage id="payOnlineBtn" />

  430.                     </Button>

  431.                 </ThemeProvider>

  432.             </div>

  433. 

  434.             <div>

  435.                 <Dialog

  436.                     open={isPopUp}

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

  438.                     PaperProps={{

  439.                         sx: {

  440.                             minWidth: '40vw',

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

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

  443.                         }

  444.                     }}

  445.                 >

  446.                     <DialogTitle>

  447.                         <Typography variant="h3" >

  448.                             <FormattedMessage id="payConfirm" />

  449.                         </Typography>

  450.                     </DialogTitle>

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

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

  453.                             {getWindowContent()}

  454.                         </Stack>

  455.                     </DialogContent>

  456.                     <DialogActions>

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

  458.                             <Typography variant="h5">

  459.                                 <FormattedMessage id="close" />

  460.                             </Typography></Button>

  461. 

  462.                         <Button onClick={() => doPayment()} aria-label={intl.formatMessage({ id: 'confirm' })}>

  463.                             <Typography variant="h5">

  464.                                 <FormattedMessage id="confirm" />

  465.                             </Typography></Button>

  466.                     </DialogActions>

  467.                 </Dialog>

  468.             </div>

  469. 

  470.             <div>

  471.                 <Dialog

  472.                     open={checkCareOf}

  473.                     onClose={() => setCheckCareOf(false)}

  474.                     PaperProps={{

  475.                         sx: {

  476.                             minWidth: '40vw',

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

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

  479.                         }

  480.                     }}

  481.                 >

  482.                     <DialogTitle></DialogTitle>

  483.                     <Typography variant="h2" style={{ padding: '16px' }}>

  484.                         <FormattedMessage id="warning" />

  485.                     </Typography>

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

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

  488.                             <Typography variant="h5" color="error">

  489.                                 <FormattedMessage id="careOfWarning" />

  490.                             </Typography>

  491.                         </Stack>

  492.                     </DialogContent>

  493.                     <DialogActions>

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

  495.                             <Typography variant="h5">

  496.                                 <FormattedMessage id="close" />

  497.                             </Typography></Button>

  498. 

  499.                         <Button onClick={() => afterWarningPayment()} aria-label={intl.formatMessage({ id: 'confirm' })}>

  500.                             <Typography variant="h5">

  501.                                 <FormattedMessage id="confirm" />

  502.                             </Typography></Button>

  503.                     </DialogActions>

  504.                 </Dialog>

  505.             </div>

  506. 

  507.             <div>

  508.                 <Dialog

  509.                     open={expiryDateErr}

  510.                     onClose={() => setExpiryDateErr(false)}

  511.                     PaperProps={{

  512.                         sx: {

  513.                             minWidth: '40vw',

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

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

  516.                         }

  517.                     }}

  518.                 >

  519.                     <DialogTitle></DialogTitle>

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

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

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

  523.                             {

  524.                                 expiryDateErrText

  525.                             }

  526.                         </Stack>

  527.                     </DialogContent>

  528.                     <DialogActions>

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

  530.                             <Typography variant="h5">

  531.                                 <FormattedMessage id="close" />

  532.                             </Typography></Button>

  533.                     </DialogActions>

  534.                 </Dialog>

  535.             </div>

  536.             <div>

  537.                 <Dialog

  538.                     open={paymentHoldedErr}

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

  540.                     PaperProps={{

  541.                         sx: {

  542.                             minWidth: '40vw',

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

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

  545.                         }

  546.                     }}

  547.                 >

  548.                     <DialogTitle></DialogTitle>

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

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

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

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

  553.                         </Stack>

  554.                     </DialogContent>

  555.                     <DialogActions>

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

  557.                             <Typography variant="h5">

  558.                                 <FormattedMessage id="close" />

  559.                             </Typography></Button>

  560.                     </DialogActions>

  561.                 </Dialog>

  562.             </div>

  563.         </>

  564.     );

  565. 

  566. 

  567. 

  568. }