alex
/
PNSPS-frontend-MaterialUI
2
0
Çatalla 0
Kod Konular 0 Değişiklik İstekleri 0 Sürümler 0 Wiki Aktivite
25'ten fazla konu seçemezsiniz Konular bir harf veya rakamla başlamalı, kısa çizgiler ('-') içerebilir ve en fazla 35 karakter uzunluğunda olabilir.
1641 İşleme
3 Dallar
16 MiB
 
 
Ağaç: f35c51b281
Dallar Biçim İmleri
${ item.name }
${ searchTerm } dalı oluştur
'f35c51b281'den
${ noResults }
PNSPS-frontend-MaterialUI/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js

601 satır
27 KiB
Ham Suçlama Geçmiş 

  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 SafeHtml from 'components/SafeHtml';

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

  33. import { PRIMARY_TEXT_BUTTON_SX, PRIMARY_CONTAINED_BUTTON_SX } from "themes/colorConst";

  34. // ==============================|| EVENT TABLE ||============================== //

  35. 

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

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

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

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

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

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

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

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

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

  45. 

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

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

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

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

  50. 

  51.     const theme = useTheme();

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

  53.     const intl = useIntl();

  54.     const { locale } = intl;

  55. 

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

  57.     const navigate = useNavigate()

  58. 

  59.     React.useEffect(() => {

  60.         getCareOfList();

  61.     }, []);

  62. 

  63.     React.useEffect(() => {

  64.         if (selectedCareOf != null) {

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

  66.         } else {

  67.             set_searchCriteria({});

  68.         }

  69.     }, [selectedCareOf]);

  70.     

  71. 

  72.     const getCareOfList = () => {

  73.         HttpUtils.get({

  74.             url: GET_PUBLIC_NOTICE_LIST_ListByStatus_pendingPayment_careOfCombo,

  75.             params: {},

  76.             onSuccess: function (responData) {

  77.                 setCareOfComboList(responData);

  78.             }

  79.         });

  80.     }

  81. 

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

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

  84.     };

  85. 

  86.     const renderHeaderWithAria = (params) => (

  87.         <span aria-label={params.colDef.headerName}>{params.colDef.headerName}</span>

  88.     );

  89. 

  90.     const handlePaymentBtn = () => {

  91.         let appIdList = [];

  92.         let paymentCheckList = [];

  93.         const _datas = rowList;

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

  95.             selectedRowItems.includes(row.id)

  96.         );

  97.         // console.log(datas)

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

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

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

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

  102.             }

  103.         }

  104.         // console.log(paymentCheckList)

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

  106.             if (appIdList.length < 1) {

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

  108.                 setExpiryDateErr(true);

  109.                 return;

  110.             }

  111.             HttpUtils.post({

  112.                 url: POST_CHECK_APP_EXPRITY_DATE,

  113.                 params: {

  114.                     ids: appIdList

  115.                 },

  116.                 onSuccess: (responData) => {

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

  118.                         // setIsPopUp(true);

  119.                         handlePaymentCheck(appIdList)

  120.                         return;

  121.                     }

  122.                     let str = "";

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

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

  125.                     });

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

  127.                     setExpiryDateErr(true);

  128.                 }

  129.             });

  130.         } else {

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

  132.             setExpiryDateErr(true);

  133.             return;

  134.         }

  135.     };

  136. 

  137.     const handlePaymentCheck = (appIdList) => {

  138.         HttpUtils.post({

  139.             url: PAYMENT_CHECK,

  140.             params: {

  141.                 appIds: appIdList

  142.             },

  143.             onSuccess: (responseData) => {

  144.                 const latestData = {};

  145. 

  146.                 responseData.forEach(item => {

  147.                     // console.log(item)

  148.                 const { appId, timeDiff } = item;

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

  150.                     latestData[appId] = item;

  151.                 }

  152.                 });

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

  154.                 

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

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

  157. 

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

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

  160. 

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

  162.                 if (readyToPayment) {

  163.                     setIsPopUp(true);

  164.                     return;

  165.                 } else {

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

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

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

  169.                     setPaymentHoldedErrText(resultString);

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

  171.                     setPaymentHoldedErr(true);

  172.                 }

  173.             }

  174.         });

  175.     };

  176. 

  177.     const columns = [

  178.         {

  179.             id: 'appNo',

  180.             field: 'appNo',

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

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

  183.             flex: isMdOrLg ? 1 : undefined,

  184.             renderHeader: renderHeaderWithAria,

  185.         },

  186.         {

  187.             id: 'created',

  188.             field: 'created',

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

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

  191.             flex: isMdOrLg ? 1 : undefined,

  192.             renderHeader: renderHeaderWithAria,

  193.             valueGetter: (params) => {

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

  195.             }

  196.         },

  197.         {

  198.             id: 'remarks',

  199.             field: 'remarks',

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

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

  202.             flex: isMdOrLg ? 3 : undefined,

  203.             renderHeader: renderHeaderWithAria,

  204.             renderCell: (params) => (

  205.                 isORGLoggedIn() ?

  206.                         isDummyLoggedIn()?

  207.                         <div>

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

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

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

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

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

  213.                         </div>:

  214.                         <div>

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

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

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

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

  219.                         </div> 

  220.                     :

  221.                     <div>

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

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

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

  225.                     </div>

  226.             )

  227.         },

  228.         {

  229.             id: 'fee',

  230.             field: 'fee',

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

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

  233.             flex: isMdOrLg ? 1 : undefined,

  234.             renderHeader: renderHeaderWithAria,

  235.             renderCell: (params) => {

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

  237.             },

  238.         },

  239.         {

  240.             id: 'paymentMethodAndDeadLine',

  241.             field: 'paymentMethodAndDeadLine',

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

  243.             renderHeader: renderHeaderWithAria,

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

  245.             flex: isMdOrLg ? 2 : undefined,

  246.             renderCell: (params) => (

  247.                 <div>

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

  249.                     <div>

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

  251.                         {

  252.                             DateUtils.is18_00(params.row.expiryDate) ?

  253.                             DateUtils.formatDateForLocale(params.row.expiryDate, intl, locale):

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

  255.                                     locale === 'en' ?

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

  257.                                         :

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

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

  260.                                         locale === 'en' ?

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

  262.                                             :

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

  264.                                         :

  265.                                             locale === 'en' ?

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

  267.                                                     :

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

  269.                         }

  270.                         {/* {

  271.                             locale === 'en' ?

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

  273.                                 :

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

  275.                         }

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

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

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

  279.                     </div>

  280.                 </div>

  281.             )

  282.         },

  283.         // {

  284.         //     id: 'closingDateOff',

  285.         //     field: 'closingDateOff',

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

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

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

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

  290.         //         // console.log(params)

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

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

  293.         //     },

  294.         // },

  295.         {

  296.             id: 'status',

  297.             field: 'status',

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

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

  300.             flex: isMdOrLg ? 1 : undefined,

  301.             renderHeader: renderHeaderWithAria,

  302.             renderCell: (params) => {

  303.                 return StatusUtils.getStatusIntl(params, intl);

  304.             },

  305.         },

  306.         {

  307.             field: 'actions',

  308.             type: 'actions',

  309.             headerName: '',

  310.             width: 150,

  311.             renderHeader: renderHeaderWithAria,

  312.             cellClassName: 'actions',

  313.             renderCell: (params) => {

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

  315.                     <FormattedMessage id="viewDetail" />

  316.                 </Button>;

  317.             },

  318.         }

  319.     ];

  320. 

  321.     const getWindowContent = () => {

  322.         var content = [];

  323.         let totalAmount = 0;

  324.         const _datas = rowList;

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

  326.             selectedRowItems.includes(row.id)

  327.         );

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

  329.             content.push(

  330.                 <React.Fragment key={datas[i].id}>

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

  332.                         <Typography variant="h5">

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

  334.                         </Typography>

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

  336.                     </Stack>

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

  338.                     <br /><br />

  339.                 </React.Fragment>

  340.             );

  341. 

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

  343.         }

  344.         content.push(

  345.             <Typography key="payment-total" variant="h5">

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

  347.                 <br /><br />

  348.             </Typography>

  349.         );

  350.         return content;

  351.     }

  352. 

  353.     function handleRowDoubleClick(params) {

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

  355.     }

  356. 

  357.     function doPayment() {

  358.         setIsPopUp(false);

  359.         let totalAmount = 0;

  360.         let appIdList = [];

  361.         const _datas = rowList;

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

  363.             selectedRowItems.includes(row.id)

  364.         );

  365.         // console.log(datas)

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

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

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

  369.         }

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

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

  372. 

  373. 

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

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

  376.         } else {

  377.             setCheckCareOf(true);

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

  379.         }

  380.     }

  381. 

  382.     function afterWarningPayment() {

  383.         let totalAmount = 0;

  384.         let appIdList = [];

  385.         const _datas = rowList;

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

  387.             selectedRowItems.includes(row.id)

  388.         );

  389.         // console.log(datas)

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

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

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

  393.         }

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

  395.     }

  396. 

  397.     return (

  398.         <>

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

  400.                 {isORGLoggedIn() ?

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

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

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

  404.                         </Grid>

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

  406.                             <Autocomplete

  407.                                 disablePortal

  408.                                 id="careOfCombo"

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

  410.                                 options={careOfComboList}

  411.                                 getOptionLabel={(option) => {

  412.                                     if (option == null) return "";

  413.                                     if (typeof option === "string") return option;

  414.                                     return option.label != null ? String(option.label) : "";

  415.                                 }}

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

  417.                                     // console.log(newValue)

  418.                                     setSelectedCareOf(newValue);

  419.                                 }}

  420.                                 sx={{

  421.                                     '& .MuiInputBase-root': { alignItems: 'center' },

  422.                                     '& .MuiAutocomplete-endAdornment': { top: '50%', transform: 'translateY(-50%)' },

  423.                                     '& .MuiOutlinedInput-root': { height: 40 }

  424.                                 }}

  425.                                 renderInput={(params) => <TextField {...params} inputProps={{ ...params.inputProps, 'aria-label': intl.formatMessage({ id: 'careOf' }) }} />}

  426.                                 clearText={intl.formatMessage({ id: "muiClear" })}

  427.                                 closeText={intl.formatMessage({ id: "muiClose" })}

  428.                                 openText={intl.formatMessage({ id: "muiOpen" })}

  429.                                 noOptionsText={intl.formatMessage({ id: "muiNoOptions" })}

  430.                             />

  431.                         </Grid>

  432.                     </Grid> : null

  433.                 }

  434.                 <FiDataGrid

  435.                     checkboxSelection

  436.                     disableRowSelectionOnClick

  437.                     columns={columns}

  438.                     customPageSize={10}

  439.                     onRowSelectionModelChange={(newSelection) => {

  440.                         setSelectedRowItems(newSelection);

  441.                     }}

  442.                     onRowDoubleClick={handleRowDoubleClick}

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

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

  445.                         url: url,

  446.                         params: _searchCriteria,

  447.                         callback: function (responseData) {

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

  449.                             setRowList(responseData?.records);

  450.                         }

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

  452.                 />

  453. 

  454.                 <ThemeProvider theme={PNSPS_BUTTON_THEME}>

  455.                     <Button

  456.                         variant="contained"

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

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

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

  460.                     >

  461.                         <FormattedMessage id="payOnlineBtn" />

  462.                     </Button>

  463.                 </ThemeProvider>

  464.             </div>

  465. 

  466.             <div>

  467.                 <Dialog

  468.                     open={isPopUp}

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

  470.                     PaperProps={{

  471.                         sx: {

  472.                             minWidth: '40vw',

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

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

  475.                         }

  476.                     }}

  477.                 >

  478.                     <DialogTitle>

  479.                         <Typography variant="h3" >

  480.                             <FormattedMessage id="payConfirm" />

  481.                         </Typography>

  482.                     </DialogTitle>

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

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

  485.                             {getWindowContent()}

  486.                         </Stack>

  487.                     </DialogContent>

  488.                     <DialogActions>

  489.                         <Button variant="contained" onClick={() => setIsPopUp(false)} aria-label={intl.formatMessage({ id: 'close' })} sx={PRIMARY_CONTAINED_BUTTON_SX}>

  490.                             <Typography variant="h5" sx={{ color: 'inherit' }}>

  491.                                 <FormattedMessage id="close" />

  492.                             </Typography></Button>

  493. 

  494.                         <Button variant="contained" onClick={() => doPayment()} aria-label={intl.formatMessage({ id: 'confirm' })} sx={PRIMARY_CONTAINED_BUTTON_SX}>

  495.                             <Typography variant="h5" sx={{ color: 'inherit' }}>

  496.                                 <FormattedMessage id="confirm" />

  497.                             </Typography></Button>

  498.                     </DialogActions>

  499.                 </Dialog>

  500.             </div>

  501. 

  502.             <div>

  503.                 <Dialog

  504.                     open={checkCareOf}

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

  506.                     PaperProps={{

  507.                         sx: {

  508.                             minWidth: '40vw',

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

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

  511.                         }

  512.                     }}

  513.                 >

  514.                     <DialogTitle></DialogTitle>

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

  516.                         <FormattedMessage id="warning" />

  517.                     </Typography>

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

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

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

  521.                                 <FormattedMessage id="careOfWarning" />

  522.                             </Typography>

  523.                         </Stack>

  524.                     </DialogContent>

  525.                     <DialogActions>

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

  527.                             <Typography variant="h5">

  528.                                 <FormattedMessage id="close" />

  529.                             </Typography></Button>

  530. 

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

  532.                             <Typography variant="h5">

  533.                                 <FormattedMessage id="confirm" />

  534.                             </Typography></Button>

  535.                     </DialogActions>

  536.                 </Dialog>

  537.             </div>

  538. 

  539.             <div>

  540.                 <Dialog

  541.                     open={expiryDateErr}

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

  543.                     PaperProps={{

  544.                         sx: {

  545.                             minWidth: '40vw',

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

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

  548.                         }

  549.                     }}

  550.                 >

  551.                     <DialogTitle></DialogTitle>

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

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

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

  555.                             {

  556.                                 expiryDateErrText

  557.                             }

  558.                         </Stack>

  559.                     </DialogContent>

  560.                     <DialogActions>

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

  562.                             <Typography variant="h5">

  563.                                 <FormattedMessage id="close" />

  564.                             </Typography></Button>

  565.                     </DialogActions>

  566.                 </Dialog>

  567.             </div>

  568.             <div>

  569.                 <Dialog

  570.                     open={paymentHoldedErr}

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

  572.                     PaperProps={{

  573.                         sx: {

  574.                             minWidth: '40vw',

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

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

  577.                         }

  578.                     }}

  579.                 >

  580.                     <DialogTitle></DialogTitle>

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

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

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

  584.                             <SafeHtml html={intl.formatMessage({ id: 'MSG.paymentHolded' }, { appNo: paymentHoldedErrText })} />

  585.                         </Stack>

  586.                     </DialogContent>

  587.                     <DialogActions>

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

  589.                             <Typography variant="h5">

  590.                                 <FormattedMessage id="close" />

  591.                             </Typography></Button>

  592.                     </DialogActions>

  593.                 </Dialog>

  594.             </div>

  595.         </>

  596.     );

  597. 

  598. 

  599. 

  600. }