alex
/
PNSPS-frontend-MaterialUI
1
0
Fork 0
Code Issues 0 Pull-Requests 0 Releases 0 Wiki Aktivität
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
1246 Commits
5 Branches
19 MiB
 
 
Struktur: 5548862d84
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „5548862d84“
${ noResults }
PNSPS-frontend-MaterialUI/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js

559 Zeilen
24 KiB
Originalformat Blame Verlauf 

  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. } from "utils/Utils";

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

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

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

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

  31. // ==============================|| EVENT TABLE ||============================== //

  32. 

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

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

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

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

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

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

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

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

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

  42. 

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

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

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

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

  47. 

  48.     const theme = useTheme();

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

  50.     const intl = useIntl();

  51.     const { locale } = intl;

  52. 

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

  54.     const navigate = useNavigate()

  55. 

  56.     React.useEffect(() => {

  57.         getCareOfList();

  58.     }, []);

  59. 

  60.     React.useEffect(() => {

  61.         if (selectedCareOf != null) {

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

  63.         } else {

  64.             set_searchCriteria({});

  65.         }

  66.     }, [selectedCareOf]);

  67.     

  68. 

  69.     const getCareOfList = () => {

  70.         HttpUtils.get({

  71.             url: GET_PUBLIC_NOTICE_LIST_ListByStatus_pendingPayment_careOfCombo,

  72.             params: {},

  73.             onSuccess: function (responData) {

  74.                 setCareOfComboList(responData);

  75.             }

  76.         });

  77.     }

  78. 

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

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

  81.     };

  82. 

  83.     const handlePaymentBtn = () => {

  84.         let appIdList = [];

  85.         let paymentCheckList = [];

  86.         const _datas = rowList;

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

  88.             selectedRowItems.includes(row.id)

  89.         );

  90.         // console.log(datas)

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

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

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

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

  95.             }

  96.         }

  97.         // console.log(paymentCheckList)

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

  99.             if (appIdList.length < 1) {

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

  101.                 setExpiryDateErr(true);

  102.                 return;

  103.             }

  104.             HttpUtils.post({

  105.                 url: POST_CHECK_APP_EXPRITY_DATE,

  106.                 params: {

  107.                     ids: appIdList

  108.                 },

  109.                 onSuccess: (responData) => {

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

  111.                         // setIsPopUp(true);

  112.                         handlePaymentCheck(appIdList)

  113.                         return;

  114.                     }

  115.                     let str = "";

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

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

  118.                     });

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

  120.                     setExpiryDateErr(true);

  121.                 }

  122.             });

  123.         } else {

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

  125.             setExpiryDateErr(true);

  126.             return;

  127.         }

  128.     };

  129. 

  130.     const handlePaymentCheck = (appIdList) => {

  131.         HttpUtils.post({

  132.             url: PAYMENT_CHECK,

  133.             params: {

  134.                 appIds: appIdList

  135.             },

  136.             onSuccess: (responseData) => {

  137.                 const latestData = {};

  138. 

  139.                 responseData.forEach(item => {

  140.                     // console.log(item)

  141.                 const { appId, timeDiff } = item;

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

  143.                     latestData[appId] = item;

  144.                 }

  145.                 });

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

  147.                 

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

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

  150. 

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

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

  153. 

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

  155.                 if (readyToPayment) {

  156.                     setIsPopUp(true);

  157.                     return;

  158.                 } else {

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

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

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

  162.                     setPaymentHoldedErrText(resultString);

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

  164.                     setPaymentHoldedErr(true);

  165.                 }

  166.             }

  167.         });

  168.     };

  169. 

  170.     const columns = [

  171.         {

  172.             id: 'appNo',

  173.             field: 'appNo',

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

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

  176.             flex: isMdOrLg ? 1 : undefined,

  177.         },

  178.         {

  179.             id: 'created',

  180.             field: 'created',

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

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

  183.             flex: isMdOrLg ? 1 : undefined,

  184.             valueGetter: (params) => {

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

  186.             }

  187.         },

  188.         {

  189.             id: 'remarks',

  190.             field: 'remarks',

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

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

  193.             flex: isMdOrLg ? 3 : undefined,

  194.             renderCell: (params) => (

  195.                 isORGLoggedIn() ?

  196.                     <div>

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

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

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

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

  201.                     </div> :

  202.                     <div>

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

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

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

  206.                     </div>

  207.             )

  208.         },

  209.         {

  210.             id: 'fee',

  211.             field: 'fee',

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

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

  214.             flex: isMdOrLg ? 1 : undefined,

  215.             renderCell: (params) => {

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

  217.             },

  218.         },

  219.         {

  220.             id: 'paymentMethodAndDeadLine',

  221.             field: 'paymentMethodAndDeadLine',

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

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

  224.             flex: isMdOrLg ? 2 : undefined,

  225.             renderCell: (params) => (

  226.                 <div>

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

  228.                     <div>

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

  230.                         {

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

  232.                                 locale === 'en' ?

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

  234.                                     :

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

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

  237.                                     locale === 'en' ?

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

  239.                                         :

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

  241.                                     :

  242.                                         locale === 'en' ?

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

  244.                                                 :

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

  246.                         }

  247.                         {/* {

  248.                             locale === 'en' ?

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

  250.                                 :

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

  252.                         }

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

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

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

  256.                     </div>

  257.                 </div>

  258.             )

  259.         },

  260.         // {

  261.         //     id: 'closingDateOff',

  262.         //     field: 'closingDateOff',

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

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

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

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

  267.         //         // console.log(params)

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

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

  270.         //     },

  271.         // },

  272.         {

  273.             id: 'status',

  274.             field: 'status',

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

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

  277.             flex: isMdOrLg ? 1 : undefined,

  278.             renderCell: (params) => {

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

  280.             },

  281.         },

  282.         {

  283.             field: 'actions',

  284.             type: 'actions',

  285.             headerName: '',

  286.             width: 150,

  287.             cellClassName: 'actions',

  288.             renderCell: (params) => {

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

  290.                     <FormattedMessage id="viewDetail" />

  291.                 </Button>;

  292.             },

  293.         }

  294.     ];

  295. 

  296.     const getWindowContent = () => {

  297.         var content = [];

  298.         let totalAmount = 0;

  299.         const _datas = rowList;

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

  301.             selectedRowItems.includes(row.id)

  302.         );

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

  304.             content.push(<>

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

  306.                     <Typography variant="h5">

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

  308.                     </Typography>

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

  310.                 </Stack>

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

  312.                 <br /><br />

  313.             </>);

  314. 

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

  316.         }

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

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

  319.             <br /><br />

  320.         </Typography>);

  321.         return content;

  322.     }

  323. 

  324.     function handleRowDoubleClick(params) {

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

  326.     }

  327. 

  328.     function doPayment() {

  329.         setIsPopUp(false);

  330.         let totalAmount = 0;

  331.         let appIdList = [];

  332.         const _datas = rowList;

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

  334.             selectedRowItems.includes(row.id)

  335.         );

  336.         // console.log(datas)

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

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

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

  340.         }

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

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

  343. 

  344. 

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

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

  347.         } else {

  348.             setCheckCareOf(true);

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

  350.         }

  351.     }

  352. 

  353.     function afterWarningPayment() {

  354.         let totalAmount = 0;

  355.         let appIdList = [];

  356.         const _datas = rowList;

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

  358.             selectedRowItems.includes(row.id)

  359.         );

  360.         // console.log(datas)

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

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

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

  364.         }

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

  366.     }

  367. 

  368.     return (

  369.         <>

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

  371.                 {isORGLoggedIn() ?

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

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

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

  375.                         </Grid>

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

  377.                             <Autocomplete

  378.                                 disablePortal

  379.                                 id="careOfCombo"

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

  381.                                 options={careOfComboList}

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

  383.                                     // console.log(newValue)

  384.                                     setSelectedCareOf(newValue);

  385.                                 }}

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

  387.                             />

  388.                         </Grid>

  389.                     </Grid> : null

  390.                 }

  391.                 <FiDataGrid

  392.                     checkboxSelection

  393.                     disableRowSelectionOnClick

  394.                     columns={columns}

  395.                     customPageSize={10}

  396.                     onRowSelectionModelChange={(newSelection) => {

  397.                         setSelectedRowItems(newSelection);

  398.                     }}

  399.                     onRowDoubleClick={handleRowDoubleClick}

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

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

  402.                         url: url,

  403.                         params: _searchCriteria,

  404.                         callback: function (responseData) {

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

  406.                             setRowList(responseData?.records);

  407.                         }

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

  409.                 />

  410. 

  411.                 <ThemeProvider theme={PNSPS_BUTTON_THEME}>

  412.                     <Button

  413.                         color="create"

  414.                         variant="contained"

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

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

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

  418.                     >

  419.                         <FormattedMessage id="payOnlineBtn" />

  420.                     </Button>

  421.                 </ThemeProvider>

  422.             </div>

  423. 

  424.             <div>

  425.                 <Dialog

  426.                     open={isPopUp}

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

  428.                     PaperProps={{

  429.                         sx: {

  430.                             minWidth: '40vw',

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

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

  433.                         }

  434.                     }}

  435.                 >

  436.                     <DialogTitle>

  437.                         <Typography variant="h3" >

  438.                             <FormattedMessage id="payConfirm" />

  439.                         </Typography>

  440.                     </DialogTitle>

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

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

  443.                             {getWindowContent()}

  444.                         </Stack>

  445.                     </DialogContent>

  446.                     <DialogActions>

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

  448.                             <Typography variant="h5">

  449.                                 <FormattedMessage id="close" />

  450.                             </Typography></Button>

  451. 

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

  453.                             <Typography variant="h5">

  454.                                 <FormattedMessage id="confirm" />

  455.                             </Typography></Button>

  456.                     </DialogActions>

  457.                 </Dialog>

  458.             </div>

  459. 

  460.             <div>

  461.                 <Dialog

  462.                     open={checkCareOf}

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

  464.                     PaperProps={{

  465.                         sx: {

  466.                             minWidth: '40vw',

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

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

  469.                         }

  470.                     }}

  471.                 >

  472.                     <DialogTitle></DialogTitle>

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

  474.                         <FormattedMessage id="warning" />

  475.                     </Typography>

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

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

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

  479.                                 <FormattedMessage id="careOfWarning" />

  480.                             </Typography>

  481.                         </Stack>

  482.                     </DialogContent>

  483.                     <DialogActions>

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

  485.                             <Typography variant="h5">

  486.                                 <FormattedMessage id="close" />

  487.                             </Typography></Button>

  488. 

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

  490.                             <Typography variant="h5">

  491.                                 <FormattedMessage id="confirm" />

  492.                             </Typography></Button>

  493.                     </DialogActions>

  494.                 </Dialog>

  495.             </div>

  496. 

  497.             <div>

  498.                 <Dialog

  499.                     open={expiryDateErr}

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

  501.                     PaperProps={{

  502.                         sx: {

  503.                             minWidth: '40vw',

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

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

  506.                         }

  507.                     }}

  508.                 >

  509.                     <DialogTitle></DialogTitle>

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

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

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

  513.                             {

  514.                                 expiryDateErrText

  515.                             }

  516.                         </Stack>

  517.                     </DialogContent>

  518.                     <DialogActions>

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

  520.                             <Typography variant="h5">

  521.                                 <FormattedMessage id="close" />

  522.                             </Typography></Button>

  523.                     </DialogActions>

  524.                 </Dialog>

  525.             </div>

  526.             <div>

  527.                 <Dialog

  528.                     open={paymentHoldedErr}

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

  530.                     PaperProps={{

  531.                         sx: {

  532.                             minWidth: '40vw',

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

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

  535.                         }

  536.                     }}

  537.                 >

  538.                     <DialogTitle></DialogTitle>

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

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

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

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

  543.                         </Stack>

  544.                     </DialogContent>

  545.                     <DialogActions>

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

  547.                             <Typography variant="h5">

  548.                                 <FormattedMessage id="close" />

  549.                             </Typography></Button>

  550.                     </DialogActions>

  551.                 </Dialog>

  552.             </div>

  553.         </>

  554.     );

  555. 

  556. 

  557. 

  558. }