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.
1647 Commits
3 Ramas
16 MiB
 
 
Árbol: 42ff4d0b65
Ramas Etiquetas
${ item.name }
Crear rama ${ searchTerm }
desde '42ff4d0b65'
${ noResults }
PNSPS-frontend-MaterialUI/src/pages/Proof/Reply_Public/ProofForm.js

793 líneas
56 KiB
Original Blame Histórico 

  1. // material-ui

  2. import {

  3.     Dialog, DialogTitle, DialogContent, DialogActions,

  4.     Typography,

  5.     Grid,

  6.     Stack,

  7.     TextField,

  8.     FormLabel,

  9.     Button,

  10.     Checkbox,

  11.     RadioGroup, Radio,

  12.     FormControlLabel

  13. } from '@mui/material';

  14. import * as UrlUtils from "utils/ApiPathConst";

  15. import * as HttpUtils from "utils/HttpUtils";

  16. import FileList from "components/FileList"

  17. import MainCard from "components/MainCard";

  18. import * as React from "react";

  19. import * as yup from 'yup';

  20. import { useParams } from "react-router-dom";

  21. import { useFormik } from 'formik';

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

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

  24. import Loadable from 'components/Loadable';

  25. import { notifyActionSuccess } from 'utils/CommonFunction';

  26. import SafeHtml from 'components/SafeHtml';

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

  28. import { PRIMARY_CONTAINED_BUTTON_SX } from "themes/colorConst";

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

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

  31. import { 

  32.     isDummyLoggedIn,

  33.     checkIsOnlyOnlinePayment,

  34.     checkPaymentSuspension,

  35.     checkIsNoPaymentByCreateDate,

  36.  } from "utils/Utils"

  37. 

  38. const UploadFileTable = Loadable(React.lazy(() => import('./UploadFileTable')));

  39. //import * as ProofStatus from "utils/statusUtils/ProofStatus";

  40. 

  41. // ==============================|| DASHBOARD - DEFAULT ||============================== //

  42. 

  43. 

  44. const FormPanel = ({ formData }) => {

  45.     const intl = useIntl();

  46.     const { locale } = intl;

  47.     const [data, setData] = React.useState({});

  48.     const [paymentMethod, set_paymentMethod] = React.useState("");

  49.     const [attachments, setAttachments] = React.useState([]);

  50. 

  51.     const [actionValue, setActionValue] = React.useState(true);

  52. 

  53.     const [warningTitle, setWarningTitle] = React.useState("");

  54.     const [isWarningPopUp, setIsWarningPopUp] = React.useState(false);

  55.     const [warningText, setWarningText] = React.useState("");

  56.     const [isSubmitting, setIsSubmitting] = React.useState(false);

  57.     const [isOnlyOnlinePayment, setOnlyOnlinePayment] = React.useState();

  58.     const [isNoPayment, setNoPayment] = React.useState();

  59.     const fileInputRef = React.useRef(null);

  60.     

  61.     const navigate = useNavigate()

  62.     const params = useParams();

  63.     // const dft = locale === 'en' ? "DD MMMM YYYY" : "YYYY年MM月DD日";

  64. 

  65.     const tabelStyle = {

  66.         border: "2px solid gray",

  67.         borderCollapse: "collapse",

  68.         padding: "right"

  69.     }

  70. 

  71.     React.useEffect(() => {

  72.         if (formData) {

  73.             // console.log("formData", formData)

  74.             setData(formData);

  75.             setOnlyOnlinePayment(checkIsOnlyOnlinePayment())

  76.             setNoPayment(checkIsNoPaymentByCreateDate(formData.created))

  77.             if (isDummyLoggedIn()) {

  78.                 set_paymentMethod("demandNote")

  79.             } else if (checkIsOnlyOnlinePayment()){

  80.                 set_paymentMethod("online")

  81.             } else if (checkIsNoPaymentByCreateDate(formData.created)){

  82.                 set_paymentMethod("demandNote")

  83.             }

  84.         }

  85.     }, [formData]);

  86. 

  87.     const formik = useFormik({

  88.         enableReinitialize: true,

  89.         initialValues: data,

  90.         validationSchema: yup.object().shape({

  91.             vaild: yup.string().max(255, intl.formatMessage({ id: 'requireLoginPassword' })).required(intl.formatMessage({ id: 'requireLoginPassword' })),

  92.         }),

  93.         onSubmit: values => {

  94.             if (isSubmitting) return;

  95.             if (isOverTime() && !isDummyLoggedIn()) {

  96.                 setWarningTitle(intl.formatMessage({ id: "attention" }))

  97.                 setWarningText(intl.formatMessage({ id: 'MSG.proofOutOfTime' }));

  98.                 setIsWarningPopUp(true);

  99.                 return;

  100.             }

  101.             let pm = paymentMethod;

  102.             if (!isDummyLoggedIn()) {

  103.                 if (actionValue == true && pm == "demandNote") {

  104.                     pm = isOverDnReviseDeadline() ? "" : pm;

  105.                 } else if (actionValue == true && pm == "office") {

  106.                     pm = isOverNpgoReviseDeadline() ? "" : pm;

  107.                 }

  108.             }

  109. 

  110.             if (actionValue == false && isOverReviseDeadline() && !isDummyLoggedIn()) {

  111.                 setWarningTitle(intl.formatMessage({ id: "attention" }))

  112.                 setWarningText(intl.formatMessage({ id: 'MSG.overReviseDeadline' }));

  113.                 setIsWarningPopUp(true);

  114.                 return;

  115.             }

  116.             else if (actionValue == true && formData.creditor == false && pm == "") {

  117.                 setWarningTitle(intl.formatMessage({ id: "attention" }))

  118.                 setWarningText(intl.formatMessage({ id: 'MSG.plzSelectPaymentMethod' }));

  119.                 setIsWarningPopUp(true);

  120.                 return;

  121.             }

  122. 

  123.             if (!actionValue) {

  124.                 if (!attachments || attachments.length <= 0) {

  125.                     setWarningTitle(intl.formatMessage({ id: "attention" }))

  126.                     setWarningText(intl.formatMessage({ id: 'requireFile' }));

  127.                     setIsWarningPopUp(true);

  128.                     return;

  129.                 }

  130.             }

  131.             // console.log(values);

  132.             setIsSubmitting(true);

  133.             HttpUtils.postWithFiles({

  134.                 url: UrlUtils.REPLY_PROOF,

  135.                 params: {

  136.                     id: data.id,

  137.                     action: actionValue,

  138.                     vaild: values.vaild,

  139.                     paymentMethod: pm

  140.                 },

  141.                 files: attachments ? attachments : [],

  142.                 onSuccess: function (responseData) {

  143.                     setIsSubmitting(false);

  144.                     // console.log(responseData)

  145.                     if (responseData.success === false) {

  146.                         if (responseData.msg) {

  147.                             setWarningTitle(intl.formatMessage({ id: "attention" }))

  148.                             setWarningText(intl.formatMessage({ id: responseData.msg }));

  149.                             setIsWarningPopUp(true);

  150.                             return;

  151.                         }

  152.                         navigate("/publicNotice/" + responseData.id);

  153.                     } else {

  154.                         if (responseData.msg) {

  155.                             setWarningTitle(intl.formatMessage({ id: "attention" }))

  156.                             setWarningText(intl.formatMessage({ id: responseData.msg }));

  157.                             setIsWarningPopUp(true);

  158.                             return;

  159.                         }

  160.                         if (actionValue == true && responseData.id == params.id) {

  161.                             notifyActionSuccess(intl.formatMessage({ id: "submitted" }))

  162.                             navigate("/proof/pay/" + params.id);

  163.                         } else {

  164.                             navigate("/proof/search");

  165.                         }

  166.                     }

  167.                 },

  168.                 onFail: function (response) {

  169.                     setIsSubmitting(false);

  170.                     setWarningTitle(intl.formatMessage({ id: "attention" }))

  171.                     const msg = response?.data?.msg ? intl.formatMessage({ id: response.data.msg }) : intl.formatMessage({ id: 'actionFail' });

  172.                     setWarningText(msg);

  173.                     setIsWarningPopUp(true);

  174.                     console.log(response);

  175.                 },

  176.                 onError: function (error) {

  177.                     setIsSubmitting(false);

  178.                     setWarningTitle(intl.formatMessage({ id: "attention" }))

  179.                     const msg = error?.response?.data?.msg ? intl.formatMessage({ id: error.response.data.msg }) : intl.formatMessage({ id: 'actionFail' });

  180.                     setWarningText(msg);

  181.                     setIsWarningPopUp(true);

  182.                     console.log(error);

  183.                 }

  184.             });

  185.         }

  186.     });

  187. 

  188.     const getFileExtension = (fileName) => {

  189.         const name = (fileName || "").toLowerCase();

  190.         const dot = name.lastIndexOf(".");

  191.         if (dot <= 0 || dot === name.length - 1) {

  192.             return "";

  193.         }

  194.         return name.substring(dot + 1);

  195.     }

  196. 

  197.     const isAcceptedProofReplyFile = (fileName) => {

  198.         return ["pdf", "jpg", "jpeg", "png"].includes(getFileExtension(fileName));

  199.     }

  200. 

  201.     const readFile = (event) => {

  202.         let file = event.target.files[0];

  203.         if (file) {

  204.             if (!isAcceptedProofReplyFile(file.name)) {

  205.                 setWarningTitle(intl.formatMessage({ id: "attention" }))

  206.                 setWarningText(intl.formatMessage({ id: 'requireValidFileWithProofReplyFormat' }));

  207.                 setIsWarningPopUp(true);

  208.                 document.getElementById("uploadFileBtn").value = "";

  209.                 return;

  210.             }

  211.             if (file.size >= (10 * 1024 * 1034)) {

  212.                 setWarningTitle(intl.formatMessage({ id: "attention" }))

  213.                 setWarningText(intl.formatMessage({ id: 'fileSizeWarning' }));

  214.                 setIsWarningPopUp(true);

  215.                 return;

  216.             }

  217. 

  218.             file['id'] = attachments.length;

  219.             setAttachments([

  220.                 ...attachments,

  221.                 file

  222.             ]);

  223.             document.getElementById("uploadFileBtn").value = "";

  224.         }

  225.     }

  226. 

  227.     const isOverTime = () => {

  228.         let proofPaymentDeadline = DateUtils.convertToDate(formData?.proofPaymentDeadline);

  229.         if (!proofPaymentDeadline) return true;

  230.         let current = new Date();

  231.         return current.getTime() > proofPaymentDeadline;

  232.     }

  233. 

  234.     const isOverReviseDeadline = () => {

  235.         // if (paymentMethod == "demandNote") return isOverDnReviseDeadline();

  236.         // if (paymentMethod == "office") return isOverNpgoReviseDeadline();

  237.         //online payment

  238.         let reviseDeadline = DateUtils.convertToDate(formData?.reviseDeadline);

  239.         // reviseDeadline?.setTime(reviseDeadline?.getTime() + (14 * 60 * 60 * 1000));// 14:00

  240.         if (!reviseDeadline) return true;

  241.         let current = new Date();

  242.         return current.getTime() > reviseDeadline;

  243.     }

  244. 

  245.     const isOverDnReviseDeadline = () => {

  246.         let reviseDeadline = DateUtils.convertToDate(formData?.closingDateOff);

  247.         reviseDeadline?.setTime(reviseDeadline?.getTime() + (17 * 60 * 60 * 1000));// 17:00

  248.         if (!reviseDeadline) return true;

  249.         let current = new Date();

  250.         return current.getTime() > reviseDeadline;

  251.     }

  252. 

  253.     const isOverNpgoReviseDeadline = () => {

  254.         let reviseDeadline = DateUtils.convertToDate(formData?.closingDate);

  255.         reviseDeadline?.setTime(reviseDeadline?.getTime() + (12 * 60 * 60 * 1000));// 12:00

  256.         if (!reviseDeadline) return true;

  257.         let current = new Date();

  258.         return current.getTime() > reviseDeadline;

  259.     }

  260. 

  261. 

  262. 

  263. 

  264.     return (

  265.         <MainCard xs={12} sm={12} md={12} lg={12}

  266.             border={false}

  267.             content={false}>

  268. 

  269.             <Typography variant="h4" component="h2" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>

  270.                 <FormattedMessage id="publicNoticePaymentProofComment" />

  271.             </Typography>

  272. 

  273.             <form onSubmit={formik.handleSubmit}>

  274. 

  275.                 {

  276.                     formik.values.replyDate ?

  277.                         <Grid container direction="column" sx={{ paddingLeft: 0, paddingRight: 0 }}>

  278.                             <Grid item xs={12} sm={12} md={12} lg={8} textAlign="left">

  279.                                 <Typography variant="h5" component="span">

  280.                                     <FormattedMessage id="proofReplyDate" /> :&nbsp;

  281.                                     {

  282.                                         locale === 'en' ?

  283.                                             DateUtils.datetimeStr(formik.values.replyDate)

  284.                                             :

  285.                                             DateUtils.datetimeStr_Cht(formik.values.replyDate)

  286.                                     }

  287.                                 </Typography>

  288.                             </Grid>

  289.                             <Grid item xs={12} md={12} textAlign="left">

  290.                                 <Typography variant="h5" component="span">

  291.                                     <FormattedMessage id="proofReply" /> : {formik.values.action ?

  292.                                         (<span style={{ color: 'green' }}>

  293.                                             <FormattedMessage id="proofErrorFree" />

  294.                                         </span>)

  295.                                         :

  296.                                         (<span style={{ color: 'red' }}>

  297.                                             <FormattedMessage id="proofWithError" />

  298.                                         </span>)}

  299.                                 </Typography>

  300.                             </Grid>

  301.                             {/* <Grid item xs={12} md={12} textAlign="left">

  302.                                 <Typography variant="h5" component="span">

  303.                                     <FormattedMessage id="proofReply" /> :&nbsp;

  304.                                     <span style={{ color: 'green' }}>

  305.                                         {

  306.                                         locale === 'en' ? 

  307.                                             ProofStatus.getStatusText_Eng(formik.values).text

  308.                                             : 

  309.                                             ProofStatus.getStatusText_Cht(formik.values).text

  310.                                         }

  311.                                     </span>

  312.                                 </Typography>

  313.                             </Grid> */}

  314.                             {

  315.                                 formik.values.action ?

  316.                                     null

  317.                                     :

  318.                                     <Grid item xs={12} md={12} textAlign="left" sx={{ width: '95%', maxWidth: { xs: '70vw', sm: '72vw', md: '75vw', lg: '80vw' } }}>

  319.                                         <FileList

  320.                                             lang="ch"

  321.                                             refId={params.id}

  322.                                             refType={"proofReply"}

  323.                                             dateHideable={true}

  324.                                             disablePagination

  325.                                             disableSelectionOnClick

  326.                                             disableColumnMenu

  327.                                             disableColumnSelector

  328.                                             hideFooter

  329.                                         />

  330.                                     </Grid>

  331.                             }

  332. 

  333.                         </Grid>

  334.                         :

  335.                         (

  336.                             isOverTime() ?

  337.                                 <Grid container direction="column" sx={{ paddingLeft: 0, paddingRight: 0 }} spacing={1}>

  338.                                     <Grid item xs={12} md={12} textAlign="left">

  339.                                         <Typography variant="h5" component="span"><FormattedMessage id="MSG.proofOutOfTime" /></Typography>

  340.                                     </Grid>

  341.                                 </Grid>

  342.                                 :

  343.                                 <Grid container direction="column" sx={{ paddingLeft: 0, paddingRight: 0 }} spacing={1}>

  344. 

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

  346.                                         <RadioGroup

  347.                                             aria-labelledby="demo-radio-buttons-group-label"

  348.                                             id="action"

  349.                                             name="action"

  350.                                             defaultValue={true}

  351.                                             onChange={(event) => {

  352.                                                 setActionValue(event.target.value === "true" ? true : false);

  353.                                             }}

  354.                                         >

  355.                                             <FormControlLabel value={true} control={<Radio />} label={intl.formatMessage({ id: 'proofErrorFree' })} />

  356.                                             <FormControlLabel value={false} control={<Radio />} label={intl.formatMessage({ id: 'proofWithError' })} />

  357.                                         </RadioGroup>

  358.                                     </Grid>

  359.                                     {

  360.                                         actionValue && formData.creditor == false ?

  361.                                             isDummyLoggedIn() ?

  362.                                                 <Grid item xs={12} sx={{ mb: 1, }}>

  363.                                                     <table style={tabelStyle}>

  364.                                                         <tbody>

  365.                                                             <tr style={tabelStyle}>

  366.                                                                 <th style={tabelStyle} width="50" align="left"></th>

  367.                                                                 <th style={tabelStyle} width="300" align="left"><FormattedMessage id="paymentMeans" /></th>

  368.                                                                 <th style={tabelStyle} width="300" align="left"><FormattedMessage id="commentDeadline" /></th>

  369.                                                                 <th style={tabelStyle} width="300" align="left"><FormattedMessage id="confirmingDealine" /></th>

  370.                                                                 <th style={tabelStyle} width="400" align="left"><FormattedMessage id="PaymentCoonpletDealine" /></th>

  371.                                                             </tr>

  372.                                                             <tr>

  373.                                                                 <td style={tabelStyle}>

  374.                                                                     <Checkbox

  375.                                                                         checked={paymentMethod == "demandNote"}

  376.                                                                         onChange={() => {

  377.                                                                             set_paymentMethod("demandNote")

  378.                                                                         }}

  379.                                                                     />

  380.                                                                 </td>

  381.                                                                 <td style={tabelStyle}>

  382.                                                                     <FormattedMessage id="paymentMeans" />: <FormattedMessage id="payDn" />

  383.                                                                     <br /><a href="#payOnlineDetails" color='#fff' onClick={() => {

  384.                                                                         setWarningTitle(intl.formatMessage({ id: "paymentMeans" }) + ": " + intl.formatMessage({ id: "payDn" }))

  385.                                                                         setWarningText(

  386.                                                                             <><FormattedMessage id="paymentMethodMeans" />:

  387.                                                                                 <ul>

  388.                                                                                     <li><FormattedMessage id="atm" /></li>

  389.                                                                                     <li><FormattedMessage id="pps" /></li>

  390.                                                                                     <li><FormattedMessage id="eBank" /></li>

  391.                                                                                     <li><FormattedMessage id="phoneBank" /></li>

  392.                                                                                     <li><FormattedMessage id="eCheque" /></li>

  393.                                                                                     <li><FormattedMessage id="fps" /></li>

  394.                                                                                     <li><FormattedMessage id="hkpo" /></li>

  395.                                                                                     <li><FormattedMessage id="store" /></li>

  396.                                                                                     <li><FormattedMessage id="post" /></li>

  397.                                                                                 </ul>

  398.                                                                                 <Typography variant="h6" component="span">

  399.                                                                                     <SafeHtml html={intl.formatMessage({ id: "proofNote" })} style={{ padding: 12 }} />

  400.                                                                                 </Typography>

  401.                                                                             </>

  402.                                                                         );

  403.                                                                         setIsWarningPopUp(true);

  404.                                                                     }}><u><FormattedMessage id="viewDetail" /></u></a>

  405.                                                                 </td>

  406.                                                                 <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDateOff, intl.formatMessage({ id: "dateStrFormat" }))} 5:00 p.m.</td>

  407.                                                                 <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDateOff, intl.formatMessage({ id: "dateStrFormat" }))} 5:00 p.m.</td>

  408.                                                                 <td style={tabelStyle}>

  409.                                                                     <FormattedMessage id="payDnRemark" values={{

  410.                                                                         date: DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))

  411.                                                                     }} />

  412.                                                                 </td>

  413.                                                             </tr>

  414.                                                             <tr>

  415.                                                                 <td style={tabelStyle}>

  416.                                                                     <Checkbox

  417.                                                                         checked={paymentMethod == "office"}

  418.                                                                         onChange={() => {

  419.                                                                             set_paymentMethod("office")

  420.                                                                         }}

  421.                                                                     />

  422.                                                                 </td>

  423.                                                                 <td style={tabelStyle}>

  424.                                                                     <FormattedMessage id="payNPGO" />

  425.                                                                     <br /><a href="#payOnlineDetails" color='#fff' onClick={() => {

  426.                                                                         setWarningTitle(intl.formatMessage({ id: "paymentMeans" }) + ": " + intl.formatMessage({ id: "payNPGOPopUpTitle" }))

  427.                                                                         setWarningText(

  428.                                                                             <><FormattedMessage id="paymentMethodMeans" />:

  429.                                                                                 <ul>

  430.                                                                                     <li><FormattedMessage id="cheque" /></li>

  431.                                                                                     <li><FormattedMessage id="drafts" /></li>

  432.                                                                                     <li><FormattedMessage id="cashierOrders" /></li>

  433.                                                                                     <li><FormattedMessage id="cash" /></li>

  434.                                                                                 </ul>

  435.                                                                             </>

  436.                                                                         );

  437.                                                                         setIsWarningPopUp(true);

  438.                                                                     }}><u><FormattedMessage id="viewDetail" /></u></a>

  439.                                                                 </td>

  440.                                                                 <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))} 11:30 a.m.</td>

  441.                                                                 <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))} 12:00 p.m.</td>

  442.                                                                 <td style={tabelStyle}>

  443.                                                                     <FormattedMessage id="payNPGORemark" values={{

  444.                                                                         date: DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))

  445.                                                                     }} />

  446.                                                                 </td>

  447.                                                             </tr>

  448.                                                         </tbody>

  449.                                                     </table>

  450.                                                 </Grid> :

  451.                                                 <>

  452.                                                     {isNoPayment ? 

  453.                                                         null 

  454.                                                     :

  455.                                                         <Grid item xs={12} sx={{ mb: 1, }}>

  456.                                                             <table style={tabelStyle}>

  457.                                                                 <tbody>

  458.                                                                     <tr style={tabelStyle}>

  459.                                                                         {!isOnlyOnlinePayment?

  460.                                                                             <th style={tabelStyle} width="50" align="left"></th>

  461.                                                                         :

  462.                                                                             null

  463.                                                                         }

  464.                                                                         <th style={tabelStyle} width="300" align="left"><FormattedMessage id="paymentMeans" /></th>

  465.                                                                         <th style={tabelStyle} width="300" align="left"><FormattedMessage id="commentDeadline" /></th>

  466.                                                                         <th style={tabelStyle} width="300" align="left"><FormattedMessage id="confirmingDealine" /></th>

  467.                                                                         <th style={tabelStyle} width="400" align="left"><FormattedMessage id="PaymentCoonpletDealine" /></th>

  468.                                                                     </tr>

  469.                                                                     <tr>

  470.                                                                         {!isOnlyOnlinePayment?

  471.                                                                             <td style={tabelStyle}>

  472.                                                                                 <Checkbox

  473.                                                                                     checked={paymentMethod == "online"}

  474.                                                                                     onChange={() => {

  475.                                                                                         set_paymentMethod("online")

  476.                                                                                     }}

  477.                                                                                 />

  478.                                                                             </td>

  479.                                                                             :null

  480.                                                                         }

  481.                                                                         <td style={tabelStyle}>

  482.                                                                             <FormattedMessage id="payOnline" />

  483.                                                                             {checkPaymentSuspension()?

  484.                                                                                 <Typography style={{ padding: '16px', color: "red" }}>

  485.                                                                                     <SafeHtml html={intl.formatMessage({ id: "suspensionMessageText" })} />

  486.                                                                                 </Typography>:null

  487.                                                                             }

  488.                                                                             <br /><a href="#payOnlineDetails" color='#fff' onClick={() => {

  489.                                                                                 setWarningTitle(intl.formatMessage({ id: "paymentMeans" }) + ": " + intl.formatMessage({ id: "payOnline" }))

  490.                                                                                 setWarningText(

  491.                                                                                     <><FormattedMessage id="paymentMethodMeans" />:

  492.                                                                                         <ul>

  493.                                                                                             <li><FormattedMessage id="fps" /></li>

  494.                                                                                             <li><FormattedMessage id="card" /></li>

  495.                                                                                             <li><FormattedMessage id="pps" /></li>

  496.                                                                                         </ul>

  497.                                                                                     </>

  498.                                                                                 );

  499.                                                                                 setIsWarningPopUp(true);

  500.                                                                             }}><u><FormattedMessage id="viewDetail" /></u></a>

  501.                                                                         </td>

  502.                                                                         <td style={tabelStyle}>{

  503.                                                                             locale === 'en' ?

  504.                                                                                 `${DateUtils.dateFormat(formData.reviseDeadline, intl.formatMessage({ id: "datetimeFormate" }))?.replace("am", "a.m.")?.replace("pm", "p.m.")}`

  505.                                                                                 :

  506.                                                                                 `${DateUtils.dateFormat(formData.reviseDeadline, intl.formatMessage({ id: "datetimeFormate" }))?.replace("am", "上午")?.replace("pm", "下午").replace("00分", "")}`

  507.                                                                         }</td>

  508.                                                                         <td style={tabelStyle}>{

  509.                                                                             locale === 'en' ?

  510.                                                                                 `${DateUtils.dateFormat(formData.proofPaymentDeadline, intl.formatMessage({ id: "datetimeFormate" }))?.replace("am", "a.m.")?.replace("pm", "p.m.")}`

  511.                                                                                 :

  512.                                                                                 `${DateUtils.dateFormat(formData.proofPaymentDeadline, intl.formatMessage({ id: "datetimeFormate" }))?.replace("am", "上午")?.replace("pm", "下午").replace("00分", "")}`

  513.                                                                         }</td>

  514.                                                                         <td style={tabelStyle}>{

  515.                                                                             locale === 'en' ?

  516.                                                                                 `${DateUtils.dateFormat(formData.expiryDate, intl.formatMessage({ id: "datetimeFormate" }))?.replace("am", "a.m.")?.replace("pm", "p.m.")}`

  517.                                                                                 :

  518.                                                                                 `${DateUtils.dateFormat(formData.expiryDate, intl.formatMessage({ id: "datetimeFormate" }))?.replace("am", "上午")?.replace("pm", "下午").replace("00分", "")}`

  519.                                                                         }</td>

  520.                                                                     </tr>

  521.                                                                     {!isOnlyOnlinePayment?

  522.                                                                         <>

  523.                                                                             <tr>

  524.                                                                                 <td style={tabelStyle}>

  525.                                                                                     {isOverDnReviseDeadline() ?

  526.                                                                                         <></> :

  527.                                                                                         <Checkbox

  528.                                                                                             checked={paymentMethod == "demandNote"}

  529.                                                                                             onChange={() => {

  530.                                                                                                 set_paymentMethod("demandNote")

  531.                                                                                             }}

  532.                                                                                         />

  533.                                                                                     }

  534.                                                                                 </td>

  535.                                                                                 <td style={tabelStyle}>

  536.                                                                                     <FormattedMessage id="payDn" />

  537.                                                                                     <br /><a href="#payOnlineDetails" color='#fff' onClick={() => {

  538.                                                                                         setWarningTitle(intl.formatMessage({ id: "paymentMeans" }) + ": " + intl.formatMessage({ id: "payDn" }))

  539.                                                                                         setWarningText(

  540.                                                                                             <><FormattedMessage id="paymentMethodMeans" />:

  541.                                                                                                 <ul>

  542.                                                                                                     <li><FormattedMessage id="atm" /></li>

  543.                                                                                                     <li><FormattedMessage id="pps" /></li>

  544.                                                                                                     <li><FormattedMessage id="eBank" /></li>

  545.                                                                                                     <li><FormattedMessage id="phoneBank" /></li>

  546.                                                                                                     <li><FormattedMessage id="eCheque" /></li>

  547.                                                                                                     <li><FormattedMessage id="fps" /></li>

  548.                                                                                                     <li><FormattedMessage id="hkpo" /></li>

  549.                                                                                                     <li><FormattedMessage id="store" /></li>

  550.                                                                                                     <li><FormattedMessage id="post" /></li>

  551.                                                                                                 </ul>

  552.                                                                                                 <Typography variant="h6" component="span">

  553.                                                                                                     <SafeHtml html={intl.formatMessage({ id: "proofNote" })} style={{ padding: 12 }} />

  554.                                                                                                 </Typography>

  555.                                                                                             </>

  556.                                                                                         );

  557.                                                                                         setIsWarningPopUp(true);

  558.                                                                                     }}><u><FormattedMessage id="viewDetail" /></u></a>

  559.                                                                                 </td>

  560.                                                                                 <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDateOff, intl.formatMessage({ id: "dateStrFormat" }))} {locale ==='en'?"5:00 p.m.":"下午5時"}</td>

  561.                                                                                 <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDateOff, intl.formatMessage({ id: "dateStrFormat" }))} {locale ==='en'?"5:00 p.m.":"下午5時"}</td>

  562.                                                                                 <td style={tabelStyle}>

  563.                                                                                     <FormattedMessage id="payDnRemark" values={{

  564.                                                                                         date: DateUtils.dateFormat(formData.proofPaymentDeadline, intl.formatMessage({ id: "dateStrFormat" }))

  565.                                                                                     }} />

  566.                                                                                 </td>

  567.                                                                             </tr>

  568. 

  569.                                                                             <tr>

  570.                                                                                 <td style={tabelStyle}>

  571.                                                                                     {

  572.                                                                                         isOverNpgoReviseDeadline() ?

  573.                                                                                             <></> :

  574.                                                                                             <Checkbox

  575.                                                                                                 checked={paymentMethod == "office"}

  576.                                                                                                 onChange={() => {

  577.                                                                                                     set_paymentMethod("office")

  578.                                                                                                 }}

  579.                                                                                             />

  580.                                                                                     }

  581.                                                                                 </td>

  582.                                                                                 <td style={tabelStyle}>

  583.                                                                                     <FormattedMessage id="payNPGO" />

  584.                                                                                     <br /><a href="#payOnlineDetails" color='#fff' onClick={() => {

  585.                                                                                         setWarningTitle(intl.formatMessage({ id: "paymentMeans" }) + ": " + intl.formatMessage({ id: "payNPGOPopUpTitle" }))

  586.                                                                                         setWarningText(

  587.                                                                                             <><FormattedMessage id="paymentMethodMeans" />:

  588.                                                                                                 <ul>

  589.                                                                                                     <li><FormattedMessage id="cheque" /></li>

  590.                                                                                                     <li><FormattedMessage id="drafts" /></li>

  591.                                                                                                     <li><FormattedMessage id="cashierOrders" /></li>

  592.                                                                                                     <li><FormattedMessage id="cash" /></li>

  593.                                                                                                 </ul>

  594.                                                                                             </>

  595.                                                                                         );

  596.                                                                                         setIsWarningPopUp(true);

  597.                                                                                     }}><u><FormattedMessage id="viewDetail" /></u></a>

  598.                                                                                 </td>

  599.                                                                                 <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))} {locale ==='en'?"11:30 a.m.":"上午11時30分"}</td>

  600.                                                                                 <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))} {locale ==='en'?"12:00 p.m.":"下午12時"}</td>

  601.                                                                                 <td style={tabelStyle}>

  602.                                                                                     <FormattedMessage id="payNPGORemark" values={{

  603.                                                                                         date: DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))

  604.                                                                                     }} />

  605.                                                                                 </td>

  606.                                                                             </tr>

  607.                                                                         </>:null

  608.                                                                     }

  609.                                                                 </tbody>

  610. 

  611.                                                             </table>

  612.                                                         </Grid>

  613.                                                     } 

  614.                                                     {/* <Grid item xs={12}>

  615.                                                         <Typography variant="h6" component="span" height="100%" >

  616.                                                             <SafeHtml html={intl.formatMessage({ id: "proofNote" })} style={{ padding: 12 }} />

  617.                                                         </Typography>

  618.                                                     </Grid> */}

  619.                                                     {!isOnlyOnlinePayment?

  620.                                                         <Grid item xs={12}>

  621.                                                             <Typography variant="h6" component="span" height="100%" >

  622.                                                                 <SafeHtml html={intl.formatMessage({ id: "proofImportant" })} style={{ padding: 12 }} />

  623.                                                             </Typography>

  624.                                                         </Grid>:null

  625.                                                     }

  626.                                                 </>

  627.                                             :

  628.                                             actionValue ?

  629.                                                 <></>

  630.                                                 :

  631.                                                 <>

  632.                                                     {

  633.                                                         isOverReviseDeadline() ?

  634.                                                             <Grid item xs={12} md={12} textAlign="left">

  635.                                                                 <Typography variant="h5" component="span" style={{ color: "red" }}>

  636.                                                                     <FormattedMessage id="MSG.overReviseDeadline" />

  637.                                                                 </Typography>

  638.                                                             </Grid>

  639.                                                             :

  640.                                                             <>

  641.                                                                 <Grid item xs={12} md={12} textAlign="left">

  642.                                                                     <Typography variant="h5" component="span">

  643.                                                                         <FormattedMessage id="requiredUploadFix" />：

  644.                                                                     </Typography>

  645.                                                                 </Grid>

  646.                                                                 <Grid item xs={12} md={12} textAlign="left">

  647.                                                                     <Typography variant="subtitle1" component="span" sx={{ color: 'primary.primary' }}>

  648.                                                                         <FormattedMessage id="acceptProofReplyFileFormats" />

  649.                                                                     </Typography>

  650.                                                                 </Grid>

  651. 

  652.                                                                 <Grid item xs={12} md={12} textAlign="left">

  653.                                                                     <ThemeProvider theme={PNSPS_BUTTON_THEME}>

  654.                                                                         <Button

  655.                                                                             variant="contained"

  656.                                                                             type="button"

  657.                                                                             aria-label={intl.formatMessage({ id: 'upload' })}

  658.                                                                             sx={PRIMARY_CONTAINED_BUTTON_SX}

  659.                                                                             disabled={attachments.length >= (formik.values.groupType === "Private Bill" ? 2 : 1)}

  660.                                                                             onClick={() => {

  661.                                                                                 if (fileInputRef.current) {

  662.                                                                                     fileInputRef.current.click();

  663.                                                                                 }

  664.                                                                             }}

  665.                                                                             onKeyDown={(event) => {

  666.                                                                                 if (event.key === 'Enter' || event.key === ' ') {

  667.                                                                                     event.preventDefault();

  668.                                                                                     if (fileInputRef.current) {

  669.                                                                                         fileInputRef.current.click();

  670.                                                                                     }

  671.                                                                                 }

  672.                                                                             }}

  673.                                                                         >

  674.                                                                             <FormattedMessage id="upload" />

  675.                                                                         </Button>

  676.                                                                     </ThemeProvider>

  677.                                                                     <input

  678.                                                                         id="uploadFileBtn"

  679.                                                                         name="file"

  680.                                                                         type="file"

  681.                                                                         accept=".pdf,.jpg,.jpeg,.png,application/pdf,image/jpeg,image/png"

  682.                                                                         style={{ display: 'none' }}

  683.                                                                         disabled={attachments.length >= (formik.values.groupType === "Private Bill" ? 2 : 1)}

  684.                                                                         onChange={(event) => {

  685.                                                                             readFile(event)

  686.                                                                         }}

  687.                                                                         ref={fileInputRef}

  688.                                                                     />

  689.                                                                 </Grid>

  690. 

  691. 

  692.                                                                 <Grid item xs={12} sm={12} md={12} lg={12} textAlign="left" sx={{ width: '95%', maxWidth: { xs: '70vw', sm: '72vw', md: '75vw', lg: '80vw' } }} >

  693.                                                                     <UploadFileTable key="uploadTable" recordList={attachments} setRecordList={setAttachments} />

  694.                                                                 </Grid>

  695.                                                             </>

  696.                                                     }

  697.                                                 </>

  698.                                     }

  699.                                     {

  700.                                         actionValue == false && isOverReviseDeadline() ?

  701.                                             <></>

  702.                                             :

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

  704.                                                 <Stack direction="row" alignItems="center">

  705.                                                     <FormLabel sx={{ paddingRight: 2, paddingBottom: 3, textAlign: "center" }}>

  706.                                                         <Typography variant="h5" component="span">

  707.                                                             <FormattedMessage id="sign" />：

  708.                                                         </Typography>

  709.                                                     </FormLabel>

  710.                                                     <TextField

  711.                                                         fullWidth

  712.                                                         type="password"

  713.                                                         onChange={formik.handleChange}

  714.                                                         name="vaild"

  715.                                                         variant="outlined"

  716.                                                         error={Boolean(formik.errors["vaild"])}

  717.                                                         helperText={formik.errors["vaild"] ? formik.errors["vaild"] : ' '}

  718.                                                         placeholder={intl.formatMessage({ id: 'requireLoginPassword' })}

  719.                                                         sx={

  720.                                                             {

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

  722.                                                                     WebkitTextFillColor: "#000000",

  723.                                                                     background: "#f8f8f8",

  724.                                                                 },

  725.                                                                 width: '70%'

  726.                                                             }

  727.                                                         }

  728.                                                     />

  729. 

  730.                                                 </Stack>

  731.                                             </Grid>

  732.                                     }

  733.                                     <Grid item xs={12} md={12} textAlign="left">

  734.                                         <ThemeProvider theme={PNSPS_BUTTON_THEME}>

  735.                                             <Button

  736.                                                 variant="contained"

  737.                                                 type="submit"

  738.                                                 disabled={(actionValue == false && isOverReviseDeadline()) || isSubmitting}

  739.                                                 aria-label={intl.formatMessage({ id: 'submitReply' })}

  740.                                                 sx={{

  741.                                                     backgroundColor: '#0c489e',

  742.                                                     color: '#FFFFFF',

  743.                                                     '&:hover': { backgroundColor: '#1565c0' },

  744.                                                 }}

  745.                                             >

  746.                                                 {isSubmitting ? <FormattedMessage id="loading" /> : <FormattedMessage id="submitReply" />}

  747.                                             </Button>

  748.                                         </ThemeProvider>

  749.                                     </Grid>

  750.                                 </Grid>

  751. 

  752.                         )

  753. 

  754. 

  755.                 }

  756. 

  757. 

  758. 

  759.             </form>

  760.             <div>

  761.                 <Dialog

  762.                     open={isWarningPopUp}

  763.                     onClose={() => setIsWarningPopUp(false)}

  764.                     PaperProps={{

  765.                         sx: {

  766.                             minWidth: '40vw',

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

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

  769.                         }

  770.                     }}

  771.                 >

  772.                     <DialogTitle>

  773.                         {warningTitle}

  774.                     </DialogTitle>

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

  776.                         <Typography variant="h5" component="span" style={{ padding: '16px' }}>{warningText}</Typography>

  777.                     </DialogContent>

  778.                     <DialogActions>

  779.                         <Button

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

  781.                             onClick={() => setIsWarningPopUp(false)}

  782.                         >

  783.                             <FormattedMessage id="close" />

  784.                         </Button>

  785.                     </DialogActions>

  786.                 </Dialog>

  787.             </div>

  788.         </MainCard>

  789.     );

  790. };

  791. 

  792. export default FormPanel;