alex
/
PNSPS-frontend-MaterialUI
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1125 Commits
5 Branches
19 MiB
 
 
Tree: a91c53694e
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'a91c53694e'
${ noResults }
PNSPS-frontend-MaterialUI/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js

618 lines
34 KiB
Raw Blame History 

  1. // material-ui

  2. import {

  3.     Grid,

  4.     Typography,

  5.     Button,

  6.     RadioGroup,

  7.     Checkbox,

  8.     Dialog, DialogTitle, DialogContent, DialogActions,

  9.     Stack, Box

  10. } from '@mui/material';

  11. import { useFormik } from 'formik';

  12. import * as yup from 'yup';

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

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

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

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

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

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

  19. import {

  20.     isORGLoggedIn,

  21.     isDummyLoggedIn

  22. } from "utils/Utils";

  23. 

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

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

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

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

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

  29. import Loadable from 'components/Loadable';

  30. import { useState, useEffect, lazy } from 'react';

  31. const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));

  32. 

  33. // ==============================|| DASHBOARD - DEFAULT ||============================== //

  34. 

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

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

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

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

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

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

  41.     const intl = useIntl();

  42.     const { locale } = intl;

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

  44. 

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

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

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

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

  49. 

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

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

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

  53.     const navigate = useNavigate();

  54. 

  55.     const BackgroundHead = {

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

  57.         width: 'auto',

  58.         height: 'auto',

  59.         backgroundSize: 'contain',

  60.         backgroundRepeat: 'no-repeat',

  61.         backgroundColor: '#0C489E',

  62.         backgroundPosition: 'right'

  63.     }

  64. 

  65.     const tabelStyle = {

  66.         border: "2px solid gray",

  67.         borderCollapse: "collapse",

  68.         padding: "right"

  69.     }

  70. 

  71.     function getMaxErrStr(num, fieldname) {

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

  73.     }

  74. 

  75.     useEffect(() => {

  76.         setsSelections(_selections)

  77.     }, [_selections]);

  78. 

  79.     useEffect(() => {

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

  81.             let data = gazetteIssueList[i];

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

  83.                 setCloseDate(data.closingDate)

  84.                 setClosingDateOff(data.closingDateOff)

  85.                 break;

  86.             }

  87.         }

  88. 

  89.     }, [issueId]);

  90. 

  91.     // function displayErrorMsg(errorMsg) {

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

  93.     // }

  94. 

  95.     const formik = useFormik({

  96.         enableReinitialize: true,

  97.         initialValues: loadedData,

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

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

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

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

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

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

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

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

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

  107.                 if (isDummyLoggedIn()) {

  108.                     if (value !== undefined) {

  109.                         return true

  110.                     } else {

  111.                         return false

  112.                     }

  113.                 } else {

  114.                     return true

  115.                 }

  116.             }),

  117.             careOfDum: yup.string().max(60, getMaxErrStr(60)).test('checkCareOfDumFormat', intl.formatMessage({ id: 'requireCareOf' }), function (value) {

  118.                 if (isDummyLoggedIn()) {

  119.                     if (value !== undefined) {

  120.                         return true

  121.                     } else {

  122.                         return false

  123.                     }

  124.                 } else {

  125.                     return true

  126.                 }

  127.             }),

  128.         }),

  129.         onSubmit: values => {

  130.             if (!values.issueId) {

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

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

  133.                 setIsWarningPopUp(true);

  134.                 return;

  135.             }

  136.             if (!attachment) {

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

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

  139.                 setIsWarningPopUp(true);

  140.                 return;

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

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

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

  144.                 setIsWarningPopUp(true);

  145.                 return;

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

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

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

  149.                 setIsWarningPopUp(true);

  150.                 return;

  151.             }

  152.             if (isORGLoggedIn()) {

  153.                 HttpUtils.get({

  154.                     url: UrlUtils.CHECK_OVERDUE,

  155.                     onSuccess: (responData) => {

  156.                         if (responData.haveOverdue) {

  157.                             setVal(values);

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

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

  160.                             setIsWarningPopUp(true);

  161.                         } else {

  162.                             apply(values);

  163.                         }

  164.                     }

  165.                 });

  166.             } else {

  167.                 apply(values);

  168.             }

  169. 

  170.         }

  171.     });

  172. 

  173.     const apply = (values) => {

  174.         setSubmitting(true)

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

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

  177.         if (isDummyLoggedIn()) {

  178.             careOf = values.careOfDum

  179.         }

  180.         if (isDummyLoggedIn()) {

  181.             remarks = values.emailAddress

  182.         }

  183.         HttpUtils.postWithFiles({

  184.             url: UrlUtils.POST_PUBLIC_NOTICE_APPLY,

  185.             params: {

  186.                 id: 0,

  187.                 contactPerson: values.contactPerson,

  188.                 contactTelNo: {

  189.                     countryCode: values.tel_countryCode,

  190.                     phoneNumber: values.phoneNumber

  191.                 },

  192.                 contactFaxNo: {

  193.                     countryCode: values.fax_countryCode,

  194.                     faxNumber: values.faxNumber

  195.                 },

  196.                 issueId: issueId,

  197.                 careOf: careOf,

  198.                 remarks: remarks,

  199.             },

  200.             files: [attachment],

  201.             onSuccess: function (responData) {

  202.                 if (responData.msg) {

  203.                     setVal({});

  204.                     setReloadPage(true);

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

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

  207.                     setIsWarningPopUp(true);

  208.                     return;

  209.                 }

  210.                 setSubmitting(false)

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

  212.                 navigate("/publicNotice");

  213.                 // location.reload(); 

  214.             }

  215.         });

  216.     }

  217. 

  218.     const readFile = (event) => {

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

  220.         if (file) {

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

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

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

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

  225.             ) {

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

  227.             } else {

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

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

  230.                 setIsWarningPopUp(true);

  231.                 setAttachment({});

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

  233.                 return;

  234.             }

  235.         }

  236.     }

  237. 

  238. 

  239.     return (

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

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

  242.                 <div style={BackgroundHead}>

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

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

  245.                             <FormattedMessage id="applyPublicNotice" />

  246.                         </Typography>

  247.                     </Stack>

  248.                 </div>

  249.             </Grid>

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

  251.                 <Button

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

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

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

  255.                 >

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

  257.                 </Button>

  258.             </Grid>

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

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

  261.                 </Grid> */}

  262.             {

  263.                 isSubmitting ?

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

  265.                         <LoadingComponent />

  266.                     </Grid>

  267.                     :

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

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

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

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

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

  273.                                         {FieldUtils.getTextField({

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

  275.                                             valueName: "contactPerson",

  276.                                             form: formik,

  277.                                             disabled: !isDummyLoggedIn(),

  278.                                             autoFocus: isDummyLoggedIn()

  279.                                         })}

  280.                                     </Grid>

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

  282.                                         {FieldUtils.getPhoneField({

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

  284.                                             disabled: !isDummyLoggedIn(),

  285.                                             valueName: {

  286.                                                 code: "tel_countryCode",

  287.                                                 num: "phoneNumber",

  288.                                             },

  289.                                             form: formik

  290.                                         })}

  291.                                     </Grid>

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

  293.                                         {FieldUtils.getPhoneField({

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

  295.                                             disabled: !isDummyLoggedIn(),

  296.                                             valueName: {

  297.                                                 code: "fax_countryCode",

  298.                                                 num: "faxNumber",

  299.                                             },

  300.                                             form: formik

  301.                                         })}

  302.                                     </Grid>

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

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

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

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

  307.                                                 <Typography variant="pnspsFormParagraphBold">

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

  309.                                                 </Typography>

  310.                                             </Grid>

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

  312.                                                 <RadioGroup

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

  314.                                                     id="issueId"

  315.                                                     name="issueId"

  316.                                                     defaultValue={issueId}

  317.                                                     onChange={(event) => {

  318.                                                         setIssueId(event.target.value);

  319.                                                     }}

  320.                                                 >

  321.                                                     {

  322.                                                         selections

  323.                                                     }

  324.                                                 </RadioGroup>

  325.                                             </Grid>

  326.                                         </Grid>

  327.                                     </Grid>

  328. 

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

  330.                                         <table style={tabelStyle}>

  331.                                             <tbody>

  332.                                                 <tr style={tabelStyle}>

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

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

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

  336.                                                 </tr>

  337.                                                 <tr>

  338.                                                     <td style={tabelStyle}>

  339.                                                         <FormattedMessage id="payOnline" />

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

  341.                                                             setWarningTitle(intl.formatMessage({ id: "payOnline" }))

  342.                                                             setWarningText(

  343.                                                                 <><FormattedMessage id="paymentMethodMeans" />

  344.                                                                     <ul>

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

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

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

  348.                                                                     </ul>

  349.                                                                 </>

  350.                                                             );

  351.                                                             setIsWarningPopUp(true);

  352.                                                         }}><FormattedMessage id="viewDetail" /></a>

  353.                                                     </td>

  354.                                                     <td style={tabelStyle}>{DateUtils.dateFormat(closeDate, dft)} 2:00 p.m.</td>

  355.                                                     <td style={tabelStyle}>

  356.                                                         <FormattedMessage id="payOnlineRemark" values={{

  357.                                                             date: DateUtils.dateFormat(closeDate, dft) + ' 2:30 p.m.'

  358.                                                         }} />

  359.                                                     </td>

  360.                                                 </tr>

  361.                                                 <tr>

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

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

  364.                                                             setWarningTitle(intl.formatMessage({ id: "payDn" }))

  365.                                                             setWarningText(

  366.                                                                 <><FormattedMessage id="paymentMethodMeans" />

  367.                                                                     <ul>

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

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

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

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

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

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

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

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

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

  377.                                                                     </ul>

  378.                                                                     <Typography variant="h6">

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

  380.                                                                     </Typography>  

  381.                                                                 </>

  382.                                                             );

  383.                                                             setIsWarningPopUp(true);

  384.                                                         }}><FormattedMessage id="viewDetail" /></a>

  385.                                                     </td>

  386.                                                     <td style={tabelStyle}>{DateUtils.dateFormat(closingDateOff, dft)} 5:00 p.m.</td>

  387.                                                     <td style={tabelStyle}>

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

  389.                                                             date: DateUtils.dateFormat(closeDate, dft) + " 12:30 p.m."

  390.                                                         }} />

  391.                                                     </td>

  392.                                                 </tr>

  393.                                                 <tr>

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

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

  396.                                                             setWarningTitle(intl.formatMessage({ id: "payNPGO" }))

  397.                                                             setWarningText(

  398.                                                                 <><FormattedMessage id="paymentMethodMeans" />

  399.                                                                     <ul>

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

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

  402.                                                                     </ul>

  403.                                                                 </>

  404.                                                             );

  405.                                                             setIsWarningPopUp(true);

  406.                                                         }}><FormattedMessage id="viewDetail" /></a>

  407.                                                     </td>

  408.                                                     <td style={tabelStyle}>{DateUtils.dateFormat(closeDate, dft)} 12:00 p.m.</td>

  409.                                                     <td style={tabelStyle}>

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

  411.                                                             date: DateUtils.dateFormat(closeDate, dft) + " 12:30 p.m."

  412.                                                         }} />

  413.                                                     </td>

  414.                                                 </tr>

  415.                                             </tbody>

  416.                                         </table>

  417. 

  418.                                     </Grid>

  419. 

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

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

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

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

  424.                                                 <Typography variant="pnspsFormParagraphBold">

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

  426.                                                 </Typography>

  427.                                             </Grid>

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

  429.                                                 <input

  430.                                                     id="uploadFileBtn"

  431.                                                     name="file"

  432.                                                     type="file"

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

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

  435.                                                     onChange={(event) => {

  436.                                                         readFile(event)

  437.                                                     }}

  438.                                                 />

  439.                                                 {attachment.name}

  440.                                             </Grid>

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

  442.                                                 <label htmlFor="uploadFileBtn">

  443.                                                     <Button

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

  445.                                                         component="span"

  446.                                                         variant="outlined"

  447.                                                         size="large"

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

  449.                                                 </label>

  450.                                             </Grid> */}

  451.                                         </Grid>

  452.                                     </Grid>

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

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

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

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

  457.                                             </Grid>

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

  459.                                                 <label htmlFor="uploadFileBtn">

  460.                                                     <Button

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

  462.                                                         component="span"

  463.                                                         variant="outlined"

  464.                                                         size="large"

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

  466.                                                 </label>

  467.                                             </Grid>

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

  469.                                             </Grid>

  470.                                         </Grid>

  471.                                     </Grid>

  472.                                     {isORGLoggedIn() ?

  473.                                         <>

  474.                                             {isDummyLoggedIn() ?

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

  476.                                                     {FieldUtils.getCarOfField({

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

  478.                                                         valueName: "careOfDum",

  479.                                                         form: formik,

  480.                                                         // disabled: true

  481.                                                     })}

  482.                                                 </Grid>

  483.                                                 :

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

  485.                                                     {FieldUtils.getCarOfField({

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

  487.                                                         valueName: "careOf",

  488.                                                         form: formik,

  489.                                                         // disabled: true

  490.                                                     })}

  491.                                                 </Grid>

  492. 

  493.                                             }

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

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

  496.                                                     <FormattedMessage id="noteOnClientRemark" />

  497.                                                 </Typography>

  498.                                             </Grid>

  499.                                         </>

  500.                                         :

  501.                                         null

  502. 

  503.                                     }

  504. 

  505.                                     {

  506.                                         isDummyLoggedIn() ?

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

  508.                                                 {FieldUtils.getTextField({

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

  510.                                                     valueName: "emailAddress",

  511.                                                     form: formik

  512.                                                 })}

  513.                                             </Grid>

  514.                                             :

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

  516.                                                 {FieldUtils.getTextArea({

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

  518.                                                     valueName: "remarks",

  519.                                                     form: formik,

  520.                                                     inputProps: { maxLength: 255 }

  521.                                                 })}

  522.                                             </Grid>

  523.                                     }

  524. 

  525.                                     <Grid item xs={12}>

  526.                                         <Typography variant="h6" height="100%" >

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

  528.                                         </Typography>

  529.                                     </Grid>

  530. 

  531. 

  532.                                     <Grid item xs={12}>

  533.                                         <Stack direction="row">

  534.                                             <Checkbox

  535.                                                 checked={tickAccept}

  536.                                                 onChange={(event) => {

  537.                                                     setTickAccept(event.target.checked)

  538.                                                 }}

  539.                                                 name="tickAccept"

  540.                                                 color="primary"

  541.                                                 size="small"

  542.                                             />

  543.                                             <Typography variant="h6" height="100%" >

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

  545.                                             </Typography>

  546.                                         </Stack>

  547.                                     </Grid>

  548. 

  549.                                     <Grid item xs={12}>

  550.                                         <center>

  551.                                             <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>

  552.                                                 <Button

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

  554.                                                     variant="contained"

  555.                                                     type="submit"

  556.                                                     disabled={!tickAccept}

  557.                                                 >

  558.                                                     <FormattedMessage id="applyPublicNotice" />

  559.                                                 </Button>

  560.                                             </ThemeProvider>

  561.                                         </center>

  562.                                     </Grid>

  563. 

  564. 

  565. 

  566. 

  567.                                 </Grid>

  568.                             </form>

  569.                         </Box>

  570.                     </Grid>

  571.             }

  572.             <div>

  573.                 <Dialog

  574.                     open={isWarningPopUp}

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

  576.                     PaperProps={{

  577.                         sx: {

  578.                             minWidth: '40vw',

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

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

  581.                         }

  582.                     }}

  583.                 >

  584.                     <DialogTitle>

  585.                         {warningTitle}

  586.                     </DialogTitle>

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

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

  589.                             {warningText}

  590.                         </Typography>

  591.                     </DialogContent>

  592.                     <DialogActions>

  593.                         <Button

  594.                             aria-label={intl.formatMessage({ id: 'ok' })}

  595.                             onClick={() => {

  596.                                 if (val.contactPerson) {

  597.                                     apply(val);

  598.                                     setIsWarningPopUp(false);

  599.                                 } else {

  600.                                     setIsWarningPopUp(false);

  601.                                     if (reloadPage) {

  602.                                         location.reload();

  603.                                     }

  604.                                 }

  605.                             }}

  606.                         >

  607.                             <FormattedMessage id="ok" />

  608.                         </Button>

  609.                     </DialogActions>

  610.                 </Dialog>

  611.             </div>

  612.         </Grid>

  613.     );

  614. };

  615. 

  616. 

  617. export default PublicNoticeApplyForm;