alex
/
PNSPS-frontend-MaterialUI
2
0
Derivar 0
Código Questões 0 Pedidos de integração 0 Lançamentos 0 Wiki Trabalho
Não pode escolher mais do que 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
1580 Cometimentos
4 Ramos
57 MiB
 
 
Árvore: 843ba3f9c1
Ramos Etiquetas
${ item.name }
Criar ramo ${ searchTerm }
de '843ba3f9c1'
${ noResults }
PNSPS-frontend-MaterialUI/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js

711 linhas
42 KiB
Em bruto Responsabilidade Histórico 

  1. // material-ui

  2. import React from 'react';

  3. import {

  4.     Grid,

  5.     Typography,

  6.     Button,

  7.     RadioGroup,

  8.     Checkbox,

  9.     Dialog, DialogTitle, DialogContent, DialogActions,

  10.     Stack, Box,

  11.     CircularProgress

  12. } from '@mui/material';

  13. import { useFormik } from 'formik';

  14. import * as yup from 'yup';

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

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

  17. import * as FieldUtils from "utils/FieldUtils";

  18. import * as DateUtils from "utils/DateUtils";

  19. import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'

  20. import ForwardIcon from '@mui/icons-material/Forward';

  21. import {

  22.     isORGLoggedIn,

  23.     isDummyLoggedIn,

  24.     isCreditorLoggedIn,

  25.     // checkIsOnlyOnlinePaymentByIssueDate,

  26.     checkIsOnlyOnlinePayment,

  27. } from "utils/Utils";

  28. 

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

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

  31. import { PNSPS_LONG_BUTTON_THEME } from "../../../themes/buttonConst";

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

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

  34. import { useState, useEffect, useRef } from 'react';

  35. import { checkPaymentSuspension } from "utils/Utils";

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

  37. 

  38. // ==============================|| DASHBOARD - DEFAULT ||============================== //

  39. 

  40. const PublicNoticeApplyForm = ({ loadedData, _selections, gazetteIssueList }) => {

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

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

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

  44.     const [attachment, setAttachment] = useState({});

  45.     const [selections, setsSelections] = useState(<></>);

  46.     const intl = useIntl();

  47.     const { locale } = intl;

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

  49. 

  50.     const [val, setVal] = useState({});

  51.     const [reloadPage, setReloadPage] = useState(false);

  52.     const [isSubmitting, setSubmitting] = useState(false);

  53.     const submittingRef = useRef(false);

  54.     const [tickAccept, setTickAccept] = useState(false);

  55. 

  56.     const [issueId, setIssueId] = useState(loadedData.issueId);

  57.     const [closeDate, setCloseDate] = useState(null);

  58.     const [paymentCloseDate, setPaymentCloseDate] = useState(null);

  59.     const [closingDateOff, setClosingDateOff] = useState(null);

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

  61.     const navigate = useNavigate();

  62. 

  63.     const hasOptions = React.Children.count(selections) > 0;

  64. 

  65.     const BackgroundHead = {

  66.         backgroundImage: `url(${titleBackgroundImg})`,

  67.         width: 'auto',

  68.         height: 'auto',

  69.         backgroundSize: 'contain',

  70.         backgroundRepeat: 'no-repeat',

  71.         backgroundColor: '#0C489E',

  72.         backgroundPosition: 'right'

  73.     }

  74. 

  75.     const tabelStyle = {

  76.         border: "2px solid gray",

  77.         borderCollapse: "collapse",

  78.         padding: "right"

  79.     }

  80. 

  81.     function getMaxErrStr(num, fieldname) {

  82.         return intl.formatMessage({ id: 'noMoreThenNWords' }, { num: num, fieldname: fieldname ? intl.formatMessage({ id: fieldname }) + ": " : "" });

  83.     }

  84. 

  85.     useEffect(() => {

  86.         setsSelections(_selections)

  87.     }, [_selections]);

  88. 

  89.     useEffect(() => {

  90.         for (var i = 0; i < gazetteIssueList?.length; i++) {

  91.             let data = gazetteIssueList[i];

  92.             if (data.id == issueId) {

  93.                 setCloseDate(data.closingDate)

  94.                 setPaymentCloseDate(data.paymentCloseDate)

  95.                 setClosingDateOff(data.closingDateOff)

  96.                 setOnlyOnlinePayment(checkIsOnlyOnlinePayment())

  97.                 

  98.                 break;

  99.             }

  100.         }

  101. 

  102.     }, [issueId]);

  103. 

  104.     // function displayErrorMsg(errorMsg) {

  105.     //     return <Typography variant="errorMessage1">{errorMsg}</Typography>

  106.     // }

  107. 

  108.     const formik = useFormik({

  109.         enableReinitialize: true,

  110.         initialValues: loadedData,

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

  112.             contactPerson: yup.string().max(40, intl.formatMessage({ id: 'noMoreThen40Words' })).required(intl.formatMessage({ id: 'requireContactPerson' })).nullable(),

  113.             tel_countryCode: yup.string().min(3, intl.formatMessage({ id: 'require3Number' })).required(intl.formatMessage({ id: 'requireDialingCode' })),

  114.             fax_countryCode: yup.string().min(3, intl.formatMessage({ id: 'require3Number' })),

  115.             phoneNumber: yup.string().min(8, intl.formatMessage({ id: 'require8Number' })).required(intl.formatMessage({ id: 'requireContactNumber' })),

  116.             faxNumber: yup.string().min(8, intl.formatMessage({ id: 'require8Number' })),

  117.             remarks: yup.string().max(100, getMaxErrStr(100)).nullable(),

  118.             careOf: yup.string().max(60, getMaxErrStr(60)).nullable(),

  119.             emailAddress: yup.string().email(intl.formatMessage({ id: 'validEmailFormat' })).max(255).test('checkEmailFormat', intl.formatMessage({ id: 'requireEmail' }), function (value) {

  120.                 if (isDummyLoggedIn()) {

  121.                     if (value !== undefined) {

  122.                         return true

  123.                     } else {

  124.                         return false

  125.                     }

  126.                 } else {

  127.                     return true

  128.                 }

  129.             }),

  130.             custName: yup.string().max(150, getMaxErrStr(150)).test('checkCustNameFormat', intl.formatMessage({ id: 'requireCustName' }), function (value) {

  131.                 if (isDummyLoggedIn()) {

  132.                     if (value !== undefined) {

  133.                         return true

  134.                     } else {

  135.                         return false

  136.                     }

  137.                 } else {

  138.                     return true

  139.                 }

  140.             }),

  141.         }),

  142.         onSubmit: values => {

  143.             if (submittingRef.current) return;

  144.             submittingRef.current = true;

  145. 

  146.             if (!values.issueId) {

  147.                 submittingRef.current = false;

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

  149.                 setWarningText(intl.formatMessage({ id: 'requireTargetVol' }));

  150.                 setIsWarningPopUp(true);

  151.                 return;

  152.             }

  153.             if (!attachment) {

  154.                 submittingRef.current = false;

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

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

  157.                 setIsWarningPopUp(true);

  158.                 return;

  159.             } else if (!attachment.size || attachment.size <= 0) {

  160.                 submittingRef.current = false;

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

  162.                 setWarningText(intl.formatMessage({ id: 'requireValidFile' }));

  163.                 setIsWarningPopUp(true);

  164.                 return;

  165.             } else if (attachment.size >= (10 * 1024 * 1034)) {

  166.                 submittingRef.current = false;

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

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

  169.                 setIsWarningPopUp(true);

  170.                 return;

  171.             }

  172.             if (isORGLoggedIn()) {

  173.                 HttpUtils.get({

  174.                     url: UrlUtils.CHECK_OVERDUE,

  175.                     onSuccess: (responData) => {

  176.                         if (responData.haveOverdue) {

  177.                             submittingRef.current = false;

  178.                             setVal(values);

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

  180.                             setWarningText(intl.formatMessage({ id: 'dnOverdueWarning' }));

  181.                             setIsWarningPopUp(true);

  182.                         } else {

  183.                             apply(values);

  184.                         }

  185.                     },

  186.                     onFail: () => {

  187.                         submittingRef.current = false;

  188.                         setSubmitting(false);

  189.                     },

  190.                     onError: () => {

  191.                         submittingRef.current = false;

  192.                         setSubmitting(false);

  193.                     }

  194.                 });

  195.             } else {

  196.                 apply(values);

  197.             }

  198. 

  199.         }

  200.     });

  201. 

  202.     const apply = (values) => {

  203.         setSubmitting(true)

  204.         let careOf = values.careOf ?? "";

  205.         let remarks = values.remarks ?? "";

  206.         let custName = values.custName ?? "";

  207.         if (isDummyLoggedIn()) {

  208.             custName = values.custName

  209.         }

  210.         if (isDummyLoggedIn()) {

  211.             remarks = values.emailAddress

  212.         }

  213.         HttpUtils.postWithFiles({

  214.             url: UrlUtils.POST_PUBLIC_NOTICE_APPLY,

  215.             params: {

  216.                 id: 0,

  217.                 contactPerson: values.contactPerson,

  218.                 contactTelNo: {

  219.                     countryCode: values.tel_countryCode,

  220.                     phoneNumber: values.phoneNumber

  221.                 },

  222.                 contactFaxNo: {

  223.                     countryCode: values.fax_countryCode,

  224.                     faxNumber: values.faxNumber

  225.                 },

  226.                 issueId: issueId,

  227.                 careOf: careOf,

  228.                 custName: custName,

  229.                 remarks: remarks,

  230.             },

  231.             files: [attachment],

  232.             onSuccess: function (responData) {

  233.                 if (responData.msg) {

  234.                     submittingRef.current = false;

  235.                     setSubmitting(false);

  236.                     setVal({});

  237.                     setReloadPage(true);

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

  239.                     setWarningText(intl.formatMessage({ id: responData.msg }));

  240.                     setIsWarningPopUp(true);

  241.                     return;

  242.                 }

  243.                 submittingRef.current = false;

  244.                 setSubmitting(false);

  245.                 notifyActionSuccess(intl.formatMessage({ id: 'submissionSuccess' }) + '!')

  246.                 navigate("/publicNotice");

  247.                 // location.reload(); 

  248.             },

  249.             onFail: () => {

  250.                 submittingRef.current = false;

  251.                 setSubmitting(false);

  252.             },

  253.             onError: () => {

  254.                 submittingRef.current = false;

  255.                 setSubmitting(false);

  256.             }

  257.         });

  258.     }

  259. 

  260.     const readFile = (event) => {

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

  262.         if (file) {

  263.             if (file.name.toLowerCase().substr(file.name.length - 4).includes(".doc")

  264.                 || file.name.toLowerCase().substr(file.name.length - 5).includes(".docx")

  265.                 || file.name.toLowerCase().substr(file.name.length - 4).includes(".xls")

  266.                 || file.name.toLowerCase().substr(file.name.length - 5).includes(".xlsx")

  267.             ) {

  268.                 setAttachment(event.target.files[0]);

  269.             } else {

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

  271.                 setWarningText(intl.formatMessage({ id: 'requireValidFileWithFormat' }));

  272.                 setIsWarningPopUp(true);

  273.                 setAttachment({});

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

  275.                 return;

  276.             }

  277.         }

  278.     }

  279. 

  280. 

  281.     return (

  282.         <Grid container sx={{ minHeight: '87vh', backgroundColor: '#ffffff', mb: 3 }} direction="column" alignItems="center">

  283.             <Grid item xs={12} md={12} width="100%" >

  284.                 <div style={BackgroundHead}>

  285.                     <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">

  286.                         <Typography component="h1" ml={15} color='#FFF' variant="h4" sx={{ display: { xs: 'none', sm: 'none', md: 'block' } }}>

  287.                             <FormattedMessage id="applyPublicNotice" />

  288.                         </Typography>

  289.                     </Stack>

  290.                 </div>

  291.             </Grid>

  292.             <Grid item xs={12} width={{ xs: "90%", sm: "90%", md: "60%", lg: "60%" }}>

  293.                 <Button

  294.                     aria-label={intl.formatMessage({ id: 'back' })}

  295.                     title={intl.formatMessage({ id: 'back' })}

  296.                     sx={{ ml: 0, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate(-1) }}

  297.                 >

  298.                     <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />

  299.                 </Button>

  300.             </Grid>

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

  302.                     <Typography variant="pnspsFormParagraphBold">申請公共啟事</Typography>

  303.                 </Grid> */}

  304.             <Grid item xs={12} md={12} width={{ md: "60%", xs: "90%" }}>

  305.                 <Box xs={12} mt={1} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px' }}>

  306. 

  307.                     {hasOptions ? (

  308. 

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

  310.                                 <Grid container spacing={1} sx={{ minHeight: '80vh' }} direction="row" justifyContent="flex-start" alignItems="center">

  311.                                     {

  312.                                         isDummyLoggedIn()?

  313.                                         <Grid item xs={12} md={12} lg={12} sx={{ mb: 1 }}>

  314.                                             {FieldUtils.getTextField({

  315.                                                 label: intl.formatMessage({ id: 'applyPerson' }) + ":",

  316.                                                 valueName: "custName",

  317.                                                 form: formik,

  318.                                                 disabled: false,

  319.                                                 autoFocus: true

  320.                                             })}

  321.                                         </Grid>:

  322.                                         <Grid item xs={12} md={12} lg={12} sx={{ mb: 1 }}>

  323.                                             {FieldUtils.getTextField({

  324.                                                 label: intl.formatMessage({ id: 'applyPerson' }) + ":",

  325.                                                 valueName: "applyPerson",

  326.                                                 form: formik,

  327.                                                 disabled: true,

  328.                                                 autoFocus: false

  329.                                             })}

  330.                                         </Grid>

  331.                                     }

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

  333.                                         {FieldUtils.getTextField({

  334.                                             label: intl.formatMessage({ id: 'contactPerson' }) + ":",

  335.                                             valueName: "contactPerson",

  336.                                             form: formik,

  337.                                             disabled: !isDummyLoggedIn(),

  338.                                             autoFocus: isDummyLoggedIn()

  339.                                         })}

  340.                                     </Grid>

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

  342.                                         {FieldUtils.getPhoneField({

  343.                                             label: intl.formatMessage({ id: 'userContactNumber' }) + ":",

  344.                                             disabled: !isDummyLoggedIn(),

  345.                                             valueName: {

  346.                                                 code: "tel_countryCode",

  347.                                                 num: "phoneNumber",

  348.                                             },

  349.                                             form: formik

  350.                                         })}

  351.                                     </Grid>

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

  353.                                         {FieldUtils.getPhoneField({

  354.                                             label: intl.formatMessage({ id: 'contactFaxNumber' }) + ":",

  355.                                             disabled: !isDummyLoggedIn(),

  356.                                             valueName: {

  357.                                                 code: "fax_countryCode",

  358.                                                 num: "faxNumber",

  359.                                             },

  360.                                             form: formik

  361.                                         })}

  362.                                     </Grid>

  363.                                     <Grid item xs={12} lg={12}>

  364.                                         <Grid container alignItems={"center"}>

  365.                                             <Grid item xs={12} md={3} lg={3}

  366.                                                 sx={{ display: 'flex', alignItems: 'center' }}>

  367.                                                 <Typography variant="pnspsFormParagraphBold">

  368.                                                     <FormattedMessage id="targetVol" />:

  369.                                                 </Typography>

  370.                                             </Grid>

  371.                                             <Grid item xs={12} md={9} lg={6}>

  372.                                                 <RadioGroup

  373.                                                     aria-labelledby="radio-buttons-group-label"

  374.                                                     id="issueId"

  375.                                                     name="issueId"

  376.                                                     defaultValue={issueId}

  377.                                                     onChange={(event) => {

  378.                                                         setIssueId(event.target.value);

  379.                                                     }}

  380.                                                 >

  381.                                                     {

  382.                                                         selections

  383.                                                     }

  384.                                                 </RadioGroup>

  385.                                             </Grid>

  386.                                         </Grid>

  387.                                     </Grid>

  388.                                     {isCreditorLoggedIn() ? 

  389.                                         null

  390.                                     :

  391.                                         <Grid item xs={12} alignItems={"center"} sx={{ p: 2 }}>

  392.                                             <table style={tabelStyle}>

  393.                                                 <tbody>

  394.                                                     <tr style={tabelStyle}>

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

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

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

  398.                                                     </tr>

  399.                                                     <tr>

  400.                                                         <td style={{ ...tabelStyle, verticalAlign: 'top'}}>

  401.                                                             <FormattedMessage id="payOnline" />

  402.                                                             {checkPaymentSuspension() && (

  403.                                                                 <Typography

  404.                                                                     variant="body2"

  405.                                                                     sx={{

  406.                                                                         color: 'error.main',

  407.                                                                         fontWeight: 600,

  408.                                                                         mt: 0.5,

  409.                                                                         ml:2

  410.                                                                     }}

  411.                                                                 >

  412.                                                                     <span

  413.                                                                         dangerouslySetInnerHTML={{

  414.                                                                             __html: intl.formatMessage({

  415.                                                                                 id: "suspensionMessageText",

  416.                                                                                 defaultMessage: ""

  417.                                                                             })

  418.                                                                         }}

  419.                                                                     />

  420.                                                                 </Typography>

  421.                                                             )}

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

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

  424.                                                                 setWarningText(

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

  426.                                                                         <ul>

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

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

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

  430.                                                                         </ul>

  431.                                                                     </>

  432.                                                                 );

  433.                                                                 setIsWarningPopUp(true);

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

  435.                                                         </td>

  436.                                                         <td style={{ ...tabelStyle, verticalAlign: 'top'}}>{DateUtils.dateFormat(closeDate, dft)} {locale==='en'?"2:00 p.m.":"下午2時"}</td>

  437.                                                         <td style={{ ...tabelStyle, verticalAlign: 'top'}}>

  438.                                                             {DateUtils.dateFormat(paymentCloseDate, dft)}{" "}

  439.                                                             {DateUtils.timeFormat(paymentCloseDate, locale)}

  440.                                                         </td>

  441.                                                     </tr>

  442.                                                     {!isOnlyOnlinePayment?

  443.                                                         <>

  444.                                                             <tr>

  445.                                                                 <td style={tabelStyle}><FormattedMessage id="payDn" />

  446.                                                                     <br /><a href="#payDnDetails" onClick={() => {

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

  448.                                                                         setWarningText(

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

  450.                                                                                 <ul>

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

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

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

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

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

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

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

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

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

  460.                                                                                 </ul>

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

  462.                                                                                     <div style={{ padding: 12 }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "proofNote" }) }} />

  463.                                                                                 </Typography>

  464.                                                                             </>

  465.                                                                         );

  466.                                                                         setIsWarningPopUp(true);

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

  468.                                                                 </td>

  469.                                                                 <td style={tabelStyle}>{DateUtils.dateFormat(closingDateOff, dft)} {locale==='en'?"5:00 p.m.":"下午5時"}</td>

  470.                                                                 <td style={tabelStyle}>

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

  472.                                                                         date: DateUtils.dateFormat(closeDate, dft)

  473.                                                                     }} />

  474.                                                                 </td>

  475.                                                             </tr>

  476.                                                             <tr>

  477.                                                                 <td style={tabelStyle}><FormattedMessage id="payNPGO" />

  478.                                                                     <br /><a href="#payNPGODetails" onClick={() => {

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

  480.                                                                         setWarningText(

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

  482.                                                                                 <ul>

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

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

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

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

  487.                                                                                 </ul>

  488.                                                                             </>

  489.                                                                         );

  490.                                                                         setIsWarningPopUp(true);

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

  492.                                                                 </td>

  493.                                                                 <td style={tabelStyle}>{DateUtils.dateFormat(closeDate, dft)} {locale==='en'?"12:00 p.m.":"下午12時"}</td>

  494.                                                                 <td style={tabelStyle}>

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

  496.                                                                         date: DateUtils.dateFormat(closeDate, dft)

  497.                                                                     }} />

  498.                                                                 </td>

  499.                                                             </tr>

  500.                                                         </>:null

  501.                                                     }

  502.                                                 </tbody>

  503.                                             </table>

  504.                                         </Grid>

  505.                                     }

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

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

  508.                                             <Grid item xs={12} md={3} lg={3}

  509.                                                 sx={{ display: 'flex', alignItems: 'center' }}>

  510.                                                 <Typography variant="pnspsFormParagraphBold">

  511.                                                     <FormattedMessage id="draftFile" /> ({intl.formatMessage({ id: 'fileSizeWarning' })}):

  512.                                                 </Typography>

  513.                                             </Grid>

  514.                                             <Grid item xs={12} md={6} lg={6} sx={{ wordBreak: 'break-word' }}>

  515.                                                 <input

  516.                                                     id="uploadFileBtn"

  517.                                                     name="file"

  518.                                                     type="file"

  519.                                                     accept=".doc,.docx,.xls,.xlsx"

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

  521.                                                     onChange={(event) => {

  522.                                                         readFile(event)

  523.                                                     }}

  524.                                                 />

  525.                                                 {attachment.name}

  526.                                             </Grid>

  527.                                             {/* <Grid item xs={12} md={3} lg={3}>

  528.                                                 <label htmlFor="uploadFileBtn">

  529.                                                     <Button

  530.                                                         aria-label={intl.formatMessage({id: 'uploadFileBtn'})}

  531.                                                         component="span"

  532.                                                         variant="outlined"

  533.                                                         size="large"

  534.                                                     >{attachment ? intl.formatMessage({id: 'uploadFileBtn'}) : intl.formatMessage({id: 'reUpload'})}</Button>

  535.                                                 </label>

  536.                                             </Grid> */}

  537.                                         </Grid>

  538.                                     </Grid>

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

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

  541.                                             <Grid item xs={12} md={3} lg={3}

  542.                                                 sx={{ display: 'flex', alignItems: 'center' }}>

  543.                                             </Grid>

  544.                                             <Grid item xs={12} md={6} lg={6} >

  545.                                                 <label htmlFor="uploadFileBtn">

  546.                                                     <Button

  547.                                                         aria-label={intl.formatMessage({ id: 'uploadFileBtn' })}

  548.                                                         component="span"

  549.                                                         variant="contained"

  550.                                                         size="large"

  551.                                                         sx={PRIMARY_CONTAINED_BUTTON_SX}

  552.                                                     >{attachment ? intl.formatMessage({ id: 'uploadFileBtn' }) : intl.formatMessage({ id: 'reUpload' })}</Button>

  553.                                                 </label>

  554.                                             </Grid>

  555.                                             <Grid item xs={12} md={3} lg={3}>

  556.                                             </Grid>

  557.                                         </Grid>

  558.                                     </Grid>

  559.                                     <Grid item xs={12} md={12} lg={12} sx={{ mb: 3 }}>

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

  561.                                             <FormattedMessage id="uploadApplicationFileRemark" />

  562.                                         </Typography>

  563.                                     </Grid>

  564.                                     {isORGLoggedIn() ?

  565.                                         <>

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

  567.                                                 {FieldUtils.getCarOfField({

  568.                                                     label: intl.formatMessage({ id: 'careOf' }) + ":",

  569.                                                     valueName: "careOf",

  570.                                                     form: formik,

  571.                                                     inputProps: { "aria-label": intl.formatMessage({ id: 'careOf' }) }

  572.                                                     // disabled: true

  573.                                                 })}

  574.                                             </Grid>

  575.                                             <Grid item xs={12} md={12} lg={12} sx={{ mb: 3 }}>

  576.                                                 <Typography display="inline" variant="subtitle1" sx={{ color: 'primary.primary' }}>

  577.                                                     <FormattedMessage id="noteOnClientRemark" />

  578.                                                 </Typography>

  579.                                             </Grid>

  580.                                         </>

  581.                                         :

  582.                                         null

  583.                                     }

  584.                                     {

  585.                                         isDummyLoggedIn() ?

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

  587.                                                 {FieldUtils.getTextField({

  588.                                                     label: intl.formatMessage({ id: 'userContactEmail' }),

  589.                                                     valueName: "emailAddress",

  590.                                                     form: formik

  591.                                                 })}

  592.                                             </Grid>

  593.                                             :

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

  595.                                                 {FieldUtils.getTextArea({

  596.                                                     label: intl.formatMessage({ id: 'extraMark' }) + ":",

  597.                                                     valueName: "remarks",

  598.                                                     form: formik,

  599.                                                     inputProps: { maxLength: 255, "aria-label": intl.formatMessage({ id: 'extraMark' }) }

  600.                                                 })}

  601.                                             </Grid>

  602.                                     }

  603. 

  604.                                     <Grid item xs={12} mr={1} mb={2}>

  605.                                         <Typography variant="pnspsFormParagraphBold">

  606.                                             <span style={{ textAlign: 'justify', }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "applyTickUnderStr0" }) }} />

  607.                                         </Typography>

  608.                                         <Typography display="inline" variant="subtitle1" sx={{ color: 'primary.primary' }} >

  609.                                             <ol style={{ textAlign: 'justify', }}>

  610.                                                 <li dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "applyTickUnderStr1" }) }} />

  611.                                                 <li dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "applyTickUnderStr2" }) }} />

  612.                                                 <li dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "applyTickUnderStr3" }) }} />

  613.                                                 <li dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "tradeMarkFootnote" }) }} />

  614.                                             </ol>

  615.                                         </Typography>

  616.                                     </Grid>

  617. 

  618.                                     <Grid item xs={12}>

  619.                                         <Stack direction="row">

  620.                                             <Checkbox

  621.                                                 checked={tickAccept}

  622.                                                 onChange={(event) => {

  623.                                                     setTickAccept(event.target.checked)

  624.                                                 }}

  625.                                                 name="tickAccept"

  626.                                                 color="primary"

  627.                                                 size="small"

  628.                                                 inputProps={{

  629.                                                     "aria-label": intl.formatMessage({ id: "applyTickStr" })

  630.                                                 }}

  631.                                             />

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

  633.                                                 <div style={{ padding: 12, textAlign: 'justify' }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "applyTickStr" }) }} />

  634.                                             </Typography>

  635.                                         </Stack>

  636.                                     </Grid>

  637. 

  638.                                     <Grid item xs={12}>

  639.                                         <center>

  640.                                             <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>

  641.                                                 <Button

  642.                                                     aria-label={intl.formatMessage({ id: 'applyPublicNotice' })}

  643.                                                     variant="contained"

  644.                                                     type="submit"

  645.                                                     disabled={!tickAccept || isSubmitting}

  646.                                                     startIcon={isSubmitting ? <CircularProgress size={20} color="inherit" /> : null}

  647.                                                 >

  648.                                                     <FormattedMessage id="applyPublicNotice" />

  649.                                                 </Button>

  650.                                             </ThemeProvider>

  651.                                         </center>

  652.                                     </Grid>

  653. 

  654.                                     <Grid item xs={12}>

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

  656.                                             <div style={{ padding: 12 }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "applyPublicNoticeText" }) }} />

  657.                                         </Typography>

  658.                                     </Grid>

  659. 

  660.                                 </Grid>

  661.                             </form>

  662.                             ) : null}

  663.                 </Box>

  664.             </Grid>

  665.             <div>

  666.                 <Dialog

  667.                     open={isWarningPopUp}

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

  669.                     PaperProps={{

  670.                         sx: {

  671.                             minWidth: '40vw',

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

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

  674.                         }

  675.                     }}

  676.                 >

  677.                     <DialogTitle>

  678.                         {warningTitle}

  679.                     </DialogTitle>

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

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

  682.                             {warningText}

  683.                         </Typography>

  684.                     </DialogContent>

  685.                     <DialogActions>

  686.                         <Button

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

  688.                             onClick={() => {

  689.                                 if (val.contactPerson) {

  690.                                     apply(val);

  691.                                     setIsWarningPopUp(false);

  692.                                 } else {

  693.                                     setIsWarningPopUp(false);

  694.                                     if (reloadPage) {

  695.                                         location.reload();

  696.                                     }

  697.                                 }

  698.                             }}

  699.                         >

  700.                             <FormattedMessage id="close" />

  701.                         </Button>

  702.                     </DialogActions>

  703.                 </Dialog>

  704.             </div>

  705.         </Grid>

  706.     );

  707. };

  708. 

  709. 

  710. export default PublicNoticeApplyForm;