alex
/
PNSPS-frontend-MaterialUI
2
0
Fork 0
Código Incidencias 0 Pull Requests 0 Lanzamientos 0 Wiki Actividad
No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.
1556 Commits
4 Ramas
33 MiB
 
 
Árbol: c1d73566e4
Ramas Etiquetas
${ item.name }
Crear rama ${ searchTerm }
desde 'c1d73566e4'
${ noResults }
PNSPS-frontend-MaterialUI/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js

600 líneas
27 KiB
Original Blame Histórico 

  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. import { PRIMARY_TEXT_BUTTON_SX, PRIMARY_CONTAINED_BUTTON_SX } from "themes/colorConst";

  33. // ==============================|| EVENT TABLE ||============================== //

  34. 

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

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

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

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

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

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

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

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

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

  44. 

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

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

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

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

  49. 

  50.     const theme = useTheme();

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

  52.     const intl = useIntl();

  53.     const { locale } = intl;

  54. 

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

  56.     const navigate = useNavigate()

  57. 

  58.     React.useEffect(() => {

  59.         getCareOfList();

  60.     }, []);

  61. 

  62.     React.useEffect(() => {

  63.         if (selectedCareOf != null) {

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

  65.         } else {

  66.             set_searchCriteria({});

  67.         }

  68.     }, [selectedCareOf]);

  69.     

  70. 

  71.     const getCareOfList = () => {

  72.         HttpUtils.get({

  73.             url: GET_PUBLIC_NOTICE_LIST_ListByStatus_pendingPayment_careOfCombo,

  74.             params: {},

  75.             onSuccess: function (responData) {

  76.                 setCareOfComboList(responData);

  77.             }

  78.         });

  79.     }

  80. 

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

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

  83.     };

  84. 

  85.     const renderHeaderWithAria = (params) => (

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

  87.     );

  88. 

  89.     const handlePaymentBtn = () => {

  90.         let appIdList = [];

  91.         let paymentCheckList = [];

  92.         const _datas = rowList;

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

  94.             selectedRowItems.includes(row.id)

  95.         );

  96.         // console.log(datas)

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

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

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

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

  101.             }

  102.         }

  103.         // console.log(paymentCheckList)

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

  105.             if (appIdList.length < 1) {

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

  107.                 setExpiryDateErr(true);

  108.                 return;

  109.             }

  110.             HttpUtils.post({

  111.                 url: POST_CHECK_APP_EXPRITY_DATE,

  112.                 params: {

  113.                     ids: appIdList

  114.                 },

  115.                 onSuccess: (responData) => {

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

  117.                         // setIsPopUp(true);

  118.                         handlePaymentCheck(appIdList)

  119.                         return;

  120.                     }

  121.                     let str = "";

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

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

  124.                     });

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

  126.                     setExpiryDateErr(true);

  127.                 }

  128.             });

  129.         } else {

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

  131.             setExpiryDateErr(true);

  132.             return;

  133.         }

  134.     };

  135. 

  136.     const handlePaymentCheck = (appIdList) => {

  137.         HttpUtils.post({

  138.             url: PAYMENT_CHECK,

  139.             params: {

  140.                 appIds: appIdList

  141.             },

  142.             onSuccess: (responseData) => {

  143.                 const latestData = {};

  144. 

  145.                 responseData.forEach(item => {

  146.                     // console.log(item)

  147.                 const { appId, timeDiff } = item;

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

  149.                     latestData[appId] = item;

  150.                 }

  151.                 });

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

  153.                 

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

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

  156. 

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

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

  159. 

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

  161.                 if (readyToPayment) {

  162.                     setIsPopUp(true);

  163.                     return;

  164.                 } else {

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

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

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

  168.                     setPaymentHoldedErrText(resultString);

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

  170.                     setPaymentHoldedErr(true);

  171.                 }

  172.             }

  173.         });

  174.     };

  175. 

  176.     const columns = [

  177.         {

  178.             id: 'appNo',

  179.             field: 'appNo',

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

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

  182.             flex: isMdOrLg ? 1 : undefined,

  183.             renderHeader: renderHeaderWithAria,

  184.         },

  185.         {

  186.             id: 'created',

  187.             field: 'created',

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

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

  190.             flex: isMdOrLg ? 1 : undefined,

  191.             renderHeader: renderHeaderWithAria,

  192.             valueGetter: (params) => {

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

  194.             }

  195.         },

  196.         {

  197.             id: 'remarks',

  198.             field: 'remarks',

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

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

  201.             flex: isMdOrLg ? 3 : undefined,

  202.             renderHeader: renderHeaderWithAria,

  203.             renderCell: (params) => (

  204.                 isORGLoggedIn() ?

  205.                         isDummyLoggedIn()?

  206.                         <div>

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

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

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

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

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

  212.                         </div>:

  213.                         <div>

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

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

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

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

  218.                         </div> 

  219.                     :

  220.                     <div>

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

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

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

  224.                     </div>

  225.             )

  226.         },

  227.         {

  228.             id: 'fee',

  229.             field: 'fee',

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

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

  232.             flex: isMdOrLg ? 1 : undefined,

  233.             renderHeader: renderHeaderWithAria,

  234.             renderCell: (params) => {

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

  236.             },

  237.         },

  238.         {

  239.             id: 'paymentMethodAndDeadLine',

  240.             field: 'paymentMethodAndDeadLine',

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

  242.             renderHeader: renderHeaderWithAria,

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

  244.             flex: isMdOrLg ? 2 : undefined,

  245.             renderCell: (params) => (

  246.                 <div>

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

  248.                     <div>

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

  250.                         {

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

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

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

  254.                                     locale === 'en' ?

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

  256.                                         :

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

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

  259.                                         locale === 'en' ?

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

  261.                                             :

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

  263.                                         :

  264.                                             locale === 'en' ?

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

  266.                                                     :

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

  268.                         }

  269.                         {/* {

  270.                             locale === 'en' ?

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

  272.                                 :

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

  274.                         }

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

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

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

  278.                     </div>

  279.                 </div>

  280.             )

  281.         },

  282.         // {

  283.         //     id: 'closingDateOff',

  284.         //     field: 'closingDateOff',

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

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

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

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

  289.         //         // console.log(params)

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

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

  292.         //     },

  293.         // },

  294.         {

  295.             id: 'status',

  296.             field: 'status',

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

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

  299.             flex: isMdOrLg ? 1 : undefined,

  300.             renderHeader: renderHeaderWithAria,

  301.             renderCell: (params) => {

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

  303.             },

  304.         },

  305.         {

  306.             field: 'actions',

  307.             type: 'actions',

  308.             headerName: '',

  309.             width: 150,

  310.             renderHeader: renderHeaderWithAria,

  311.             cellClassName: 'actions',

  312.             renderCell: (params) => {

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

  314.                     <FormattedMessage id="viewDetail" />

  315.                 </Button>;

  316.             },

  317.         }

  318.     ];

  319. 

  320.     const getWindowContent = () => {

  321.         var content = [];

  322.         let totalAmount = 0;

  323.         const _datas = rowList;

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

  325.             selectedRowItems.includes(row.id)

  326.         );

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

  328.             content.push(

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

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

  331.                         <Typography variant="h5">

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

  333.                         </Typography>

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

  335.                     </Stack>

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

  337.                     <br /><br />

  338.                 </React.Fragment>

  339.             );

  340. 

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

  342.         }

  343.         content.push(

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

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

  346.                 <br /><br />

  347.             </Typography>

  348.         );

  349.         return content;

  350.     }

  351. 

  352.     function handleRowDoubleClick(params) {

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

  354.     }

  355. 

  356.     function doPayment() {

  357.         setIsPopUp(false);

  358.         let totalAmount = 0;

  359.         let appIdList = [];

  360.         const _datas = rowList;

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

  362.             selectedRowItems.includes(row.id)

  363.         );

  364.         // console.log(datas)

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

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

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

  368.         }

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

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

  371. 

  372. 

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

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

  375.         } else {

  376.             setCheckCareOf(true);

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

  378.         }

  379.     }

  380. 

  381.     function afterWarningPayment() {

  382.         let totalAmount = 0;

  383.         let appIdList = [];

  384.         const _datas = rowList;

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

  386.             selectedRowItems.includes(row.id)

  387.         );

  388.         // console.log(datas)

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

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

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

  392.         }

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

  394.     }

  395. 

  396.     return (

  397.         <>

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

  399.                 {isORGLoggedIn() ?

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

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

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

  403.                         </Grid>

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

  405.                             <Autocomplete

  406.                                 disablePortal

  407.                                 id="careOfCombo"

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

  409.                                 options={careOfComboList}

  410.                                 getOptionLabel={(option) => {

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

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

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

  414.                                 }}

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

  416.                                     // console.log(newValue)

  417.                                     setSelectedCareOf(newValue);

  418.                                 }}

  419.                                 sx={{

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

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

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

  423.                                 }}

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

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

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

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

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

  429.                             />

  430.                         </Grid>

  431.                     </Grid> : null

  432.                 }

  433.                 <FiDataGrid

  434.                     checkboxSelection

  435.                     disableRowSelectionOnClick

  436.                     columns={columns}

  437.                     customPageSize={10}

  438.                     onRowSelectionModelChange={(newSelection) => {

  439.                         setSelectedRowItems(newSelection);

  440.                     }}

  441.                     onRowDoubleClick={handleRowDoubleClick}

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

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

  444.                         url: url,

  445.                         params: _searchCriteria,

  446.                         callback: function (responseData) {

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

  448.                             setRowList(responseData?.records);

  449.                         }

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

  451.                 />

  452. 

  453.                 <ThemeProvider theme={PNSPS_BUTTON_THEME}>

  454.                     <Button

  455.                         variant="contained"

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

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

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

  459.                     >

  460.                         <FormattedMessage id="payOnlineBtn" />

  461.                     </Button>

  462.                 </ThemeProvider>

  463.             </div>

  464. 

  465.             <div>

  466.                 <Dialog

  467.                     open={isPopUp}

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

  469.                     PaperProps={{

  470.                         sx: {

  471.                             minWidth: '40vw',

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

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

  474.                         }

  475.                     }}

  476.                 >

  477.                     <DialogTitle>

  478.                         <Typography variant="h3" >

  479.                             <FormattedMessage id="payConfirm" />

  480.                         </Typography>

  481.                     </DialogTitle>

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

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

  484.                             {getWindowContent()}

  485.                         </Stack>

  486.                     </DialogContent>

  487.                     <DialogActions>

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

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

  490.                                 <FormattedMessage id="close" />

  491.                             </Typography></Button>

  492. 

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

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

  495.                                 <FormattedMessage id="confirm" />

  496.                             </Typography></Button>

  497.                     </DialogActions>

  498.                 </Dialog>

  499.             </div>

  500. 

  501.             <div>

  502.                 <Dialog

  503.                     open={checkCareOf}

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

  505.                     PaperProps={{

  506.                         sx: {

  507.                             minWidth: '40vw',

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

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

  510.                         }

  511.                     }}

  512.                 >

  513.                     <DialogTitle></DialogTitle>

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

  515.                         <FormattedMessage id="warning" />

  516.                     </Typography>

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

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

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

  520.                                 <FormattedMessage id="careOfWarning" />

  521.                             </Typography>

  522.                         </Stack>

  523.                     </DialogContent>

  524.                     <DialogActions>

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

  526.                             <Typography variant="h5">

  527.                                 <FormattedMessage id="close" />

  528.                             </Typography></Button>

  529. 

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

  531.                             <Typography variant="h5">

  532.                                 <FormattedMessage id="confirm" />

  533.                             </Typography></Button>

  534.                     </DialogActions>

  535.                 </Dialog>

  536.             </div>

  537. 

  538.             <div>

  539.                 <Dialog

  540.                     open={expiryDateErr}

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

  542.                     PaperProps={{

  543.                         sx: {

  544.                             minWidth: '40vw',

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

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

  547.                         }

  548.                     }}

  549.                 >

  550.                     <DialogTitle></DialogTitle>

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

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

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

  554.                             {

  555.                                 expiryDateErrText

  556.                             }

  557.                         </Stack>

  558.                     </DialogContent>

  559.                     <DialogActions>

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

  561.                             <Typography variant="h5">

  562.                                 <FormattedMessage id="close" />

  563.                             </Typography></Button>

  564.                     </DialogActions>

  565.                 </Dialog>

  566.             </div>

  567.             <div>

  568.                 <Dialog

  569.                     open={paymentHoldedErr}

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

  571.                     PaperProps={{

  572.                         sx: {

  573.                             minWidth: '40vw',

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

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

  576.                         }

  577.                     }}

  578.                 >

  579.                     <DialogTitle></DialogTitle>

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

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

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

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

  584.                         </Stack>

  585.                     </DialogContent>

  586.                     <DialogActions>

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

  588.                             <Typography variant="h5">

  589.                                 <FormattedMessage id="close" />

  590.                             </Typography></Button>

  591.                     </DialogActions>

  592.                 </Dialog>

  593.             </div>

  594.         </>

  595.     );

  596. 

  597. 

  598. 

  599. }