noteOnClientRemark & tradeMarkFootnote

src/components/I18nProvider.js

@@ -1,11 +1,11 @@
-import React, {useState, useEffect, createContext} from 'react';
+import { useState, useEffect, createContext } from 'react';
 import { IntlProvider } from 'react-intl';
 import enMessages from '../translations/en.json';
 import cnMessages from '../translations/zh-CN.json';
 import hkMessages from '../translations/zh-HK.json';
 
-import { GET_COMBO, POST_TERMS_N_CONDITIONS  } from "utils/ApiPathConst";
-import * as HttpUtils from "utils/HttpUtils";
+import { GET_COMBO, GET_CONTENT } from "utils/ApiPathConst";
+import { get } from "utils/HttpUtils";
 
 const LocaleContext = createContext();
 
@@ -16,46 +16,50 @@ export const I18nProvider = ({ children }) => {
         "zh-HK": hkMessages,
         "zh-CN": cnMessages
     };
-    
+
 
     const [locale, setLocale] = useState('en'); // Default locale, you can change this as per your requirement
     const [messages, setMessages] = useState(systemMessages[locale]);
 
     const loadTermsAndConditions = () => {
-        HttpUtils.get({
-            url: POST_TERMS_N_CONDITIONS,
+        get({
+            url: GET_CONTENT,
             onSuccess: (responseData) => {
-                enMessages["termsAndCon"]= responseData.en;
-                cnMessages["termsAndCon"]= responseData.cn;
-                hkMessages["termsAndCon"]= responseData.zh;
+                for (const key in responseData) {
+                    const value = responseData[key];
+                    enMessages[key] = value.en??"";
+                    cnMessages[key] = value.cn??"";
+                    hkMessages[key] = value.zh??"";
+                } 
             }
         });
 
-        HttpUtils.get({
+
+        get({
             url: GET_COMBO,
             onSuccess: (responseData) => {
-                for(let i =0; i<responseData.length; i++){
+                for (let i = 0; i < responseData.length; i++) {
                     let item = responseData[i];
-                    enMessages[item.key]= item.en;
-                    cnMessages[item.key]= item.cn;
-                    hkMessages[item.key]= item.zh;
+                    enMessages[item.key] = item.en;
+                    cnMessages[item.key] = item.cn;
+                    hkMessages[item.key] = item.zh;
                 }
-                
+
             }
         });
     }
 
     useEffect(() => {
         loadTermsAndConditions();
-        if(localStorage.getItem('locale') === null){
+        if (localStorage.getItem('locale') === null) {
             //no locale case
-            localStorage.setItem('locale','en');
+            localStorage.setItem('locale', 'en');
         }
-        else{
+        else {
             setLocale(localStorage.getItem('locale'));
         }
     }, []);
-    
+
     useEffect(() => {
         // Load the messages for the selected locale
         const fetchMessages = async () => {
@@ -66,7 +70,7 @@ export const I18nProvider = ({ children }) => {
     }, [locale]);
 
     return (
-        <LocaleContext.Provider  value={{ locale, setLocale }} >
+        <LocaleContext.Provider value={{ locale, setLocale }} >
             <IntlProvider locale={locale} messages={messages}>
                 {children}
             </IntlProvider>

src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js

@@ -17,13 +17,13 @@ import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 import ForwardIcon from '@mui/icons-material/Forward';
 import {
     isORGLoggedIn,
-  } from "utils/Utils";
+} from "utils/Utils";
 
 import { useNavigate } from "react-router-dom";
 import { notifyActionSuccess } from 'utils/CommonFunction';
-import {PNSPS_LONG_BUTTON_THEME} from "../../../themes/buttonConst";
-import {ThemeProvider} from "@emotion/react";
-import {FormattedMessage, useIntl} from "react-intl";
+import { PNSPS_LONG_BUTTON_THEME } from "../../../themes/buttonConst";
+import { ThemeProvider } from "@emotion/react";
+import { FormattedMessage, useIntl } from "react-intl";
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
@@ -58,8 +58,8 @@ const PublicNoticeApplyForm = ({ loadedData, _selections }) => {
     //     loadedData.careOf = loadedData.contactPerson
     // },[]);
 
-    function getMaxErrStr(num, fieldname){
-        return intl.formatMessage({ id: 'noMoreThenNWords' },{num:num, fieldname:fieldname?intl.formatMessage({ id: fieldname})+": ":""});
+    function getMaxErrStr(num, fieldname) {
+        return intl.formatMessage({ id: 'noMoreThenNWords' }, { num: num, fieldname: fieldname ? intl.formatMessage({ id: fieldname }) + ": " : "" });
     }
 
     React.useEffect(() => {
@@ -70,54 +70,54 @@ const PublicNoticeApplyForm = ({ loadedData, _selections }) => {
         enableReinitialize: true,
         initialValues: loadedData,
         validationSchema: yup.object().shape({
-            contactPerson: yup.string().max(40, intl.formatMessage({id: 'noMoreThen40Words'})).required(intl.formatMessage({id: 'requireContactPerson'})),
-            tel_countryCode: yup.string().min(3, intl.formatMessage({id: 'require3Number'})).required(intl.formatMessage({id: 'requireDialingCode'})),
-            fax_countryCode: yup.string().min(3, intl.formatMessage({id: 'require3Number'})),
-            phoneNumber: yup.string().min(8, intl.formatMessage({id: 'require8Number'})).required(intl.formatMessage({id: 'requireContactNumber'})),
-            faxNumber: yup.string().min(8, intl.formatMessage({id: 'require8Number'})),
-            remarks: yup.string().max(100,getMaxErrStr(100)).nullable(),
-            careOf: yup.string().max(60,getMaxErrStr(60)).nullable(),
+            contactPerson: yup.string().max(40, intl.formatMessage({ id: 'noMoreThen40Words' })).required(intl.formatMessage({ id: 'requireContactPerson' })),
+            tel_countryCode: yup.string().min(3, intl.formatMessage({ id: 'require3Number' })).required(intl.formatMessage({ id: 'requireDialingCode' })),
+            fax_countryCode: yup.string().min(3, intl.formatMessage({ id: 'require3Number' })),
+            phoneNumber: yup.string().min(8, intl.formatMessage({ id: 'require8Number' })).required(intl.formatMessage({ id: 'requireContactNumber' })),
+            faxNumber: yup.string().min(8, intl.formatMessage({ id: 'require8Number' })),
+            remarks: yup.string().max(100, getMaxErrStr(100)).nullable(),
+            careOf: yup.string().max(60, getMaxErrStr(60)).nullable(),
         }),
         onSubmit: values => {
             if (!values.issueId) {
-                setWarningText(intl.formatMessage({id: 'requireTargetVol'}));
+                setWarningText(intl.formatMessage({ id: 'requireTargetVol' }));
                 setIsWarningPopUp(true);
                 return;
             }
             if (!attachment) {
-                setWarningText(intl.formatMessage({id: 'requireFile'}));
+                setWarningText(intl.formatMessage({ id: 'requireFile' }));
                 setIsWarningPopUp(true);
                 return;
             } else if (!attachment.size || attachment.size <= 0) {
-                setWarningText(intl.formatMessage({id: 'requireValidFile'}));
+                setWarningText(intl.formatMessage({ id: 'requireValidFile' }));
                 setIsWarningPopUp(true);
                 return;
             } else if (attachment.size >= (10 * 1024 * 1034)) {
-                setWarningText(intl.formatMessage({id: 'fileSizeWarning'}));
+                setWarningText(intl.formatMessage({ id: 'fileSizeWarning' }));
                 setIsWarningPopUp(true);
                 return;
             }
-            if(isORGLoggedIn()){
+            if (isORGLoggedIn()) {
                 HttpUtils.get({
                     url: UrlUtils.CHECK_OVERDUE,
-                    onSuccess: (responData)=>{
-                        if(responData.haveOverdue){
+                    onSuccess: (responData) => {
+                        if (responData.haveOverdue) {
                             setVal(values);
-                            setWarningText(intl.formatMessage({id: 'dnOverdueWarning'}));
+                            setWarningText(intl.formatMessage({ id: 'dnOverdueWarning' }));
                             setIsWarningPopUp(true);
-                        }else{
+                        } else {
                             apply(values);
                         }
                     }
                 });
-            }else{
+            } else {
                 apply(values);
             }
-           
+
         }
     });
 
-    const apply = (values)=>{
+    const apply = (values) => {
         setSubmitting(true)
         HttpUtils.postWithFiles({
             url: UrlUtils.POST_PUBLIC_NOTICE_APPLY,
@@ -133,20 +133,20 @@ const PublicNoticeApplyForm = ({ loadedData, _selections }) => {
                     faxNumber: values.faxNumber
                 },
                 issueId: issueId,
-                careOf: values.careOf ? values.careOf: "",
+                careOf: values.careOf ? values.careOf : "",
                 remarks: values.remarks ? values.remarks : "",
             },
             files: [attachment],
             onSuccess: function (responData) {
-                if(responData.msg){
+                if (responData.msg) {
                     setVal({});
                     setReloadPage(true);
-                    setWarningText(intl.formatMessage({id: responData.msg}));
+                    setWarningText(intl.formatMessage({ id: responData.msg }));
                     setIsWarningPopUp(true);
                     return;
                 }
                 setSubmitting(false)
-                notifyActionSuccess(intl.formatMessage({id: 'submissionSuccess'}) + '!')
+                notifyActionSuccess(intl.formatMessage({ id: 'submissionSuccess' }) + '!')
                 navigate("/publicNotice");
                 // location.reload(); 
             }
@@ -163,7 +163,7 @@ const PublicNoticeApplyForm = ({ loadedData, _selections }) => {
             ) {
                 setAttachment(event.target.files[0]);
             } else {
-                setWarningText(intl.formatMessage({id: 'requireValidFileWithFormat'}));
+                setWarningText(intl.formatMessage({ id: 'requireValidFileWithFormat' }));
                 setIsWarningPopUp(true);
                 setAttachment({});
                 document.getElementById("uploadFileBtn").value = "";
@@ -178,16 +178,16 @@ const PublicNoticeApplyForm = ({ loadedData, _selections }) => {
             <Grid item xs={12} md={12} width="100%" >
                 <div style={BackgroundHead}>
                     <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                        <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
-                            <FormattedMessage id="applyPublicNotice"/>
+                        <Typography ml={15} color='#FFF' variant="h4" sx={{ display: { xs: 'none', sm: 'none', md: 'block' } }}>
+                            <FormattedMessage id="applyPublicNotice" />
                         </Typography>
                     </Stack>
                 </div>
             </Grid>
-            <Grid item xs={12} width={{xs:"90%", sm:"90%", md:"60%", lg:"60%"}}>
+            <Grid item xs={12} width={{ xs: "90%", sm: "90%", md: "60%", lg: "60%" }}>
                 <Button
-                    aria-label={intl.formatMessage({id: 'back'})}
-                    title={intl.formatMessage({id: 'back'})}
+                    aria-label={intl.formatMessage({ id: 'back' })}
+                    title={intl.formatMessage({ id: 'back' })}
                     sx={{ ml: 0, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate(-1) }}
                 >
                     <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />
@@ -201,14 +201,14 @@ const PublicNoticeApplyForm = ({ loadedData, _selections }) => {
                     <Grid item xs={12} md={12} width={{ md: "60%", xs: "90%" }}>
                         <LoadingComponent />
                     </Grid>
-                :
+                    :
                     <Grid item xs={12} md={12} width={{ md: "60%", xs: "90%" }}>
                         <Box xs={12} mt={1} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px' }}>
                             <form onSubmit={formik.handleSubmit}>
                                 <Grid container spacing={1} sx={{ minHeight: '80vh' }} direction="row" justifyContent="flex-start" alignItems="center">
                                     <Grid item xs={12} md={12} lg={12} sx={{ mb: 1 }}>
                                         {FieldUtils.getTextField({
-                                            label: intl.formatMessage({id: 'contactPerson'}) + ":",
+                                            label: intl.formatMessage({ id: 'contactPerson' }) + ":",
                                             valueName: "contactPerson",
                                             form: formik,
                                             disabled: true
@@ -216,7 +216,7 @@ const PublicNoticeApplyForm = ({ loadedData, _selections }) => {
                                     </Grid>
                                     <Grid item xs={12} md={12}>
                                         {FieldUtils.getPhoneField({
-                                            label: intl.formatMessage({id: 'userContactNumber'}) + ":",
+                                            label: intl.formatMessage({ id: 'userContactNumber' }) + ":",
                                             disabled: true,
                                             valueName: {
                                                 code: "tel_countryCode",
@@ -227,7 +227,7 @@ const PublicNoticeApplyForm = ({ loadedData, _selections }) => {
                                     </Grid>
                                     <Grid item xs={12} md={12}>
                                         {FieldUtils.getPhoneField({
-                                            label: intl.formatMessage({id: 'contactFaxNumber'}) + ":",
+                                            label: intl.formatMessage({ id: 'contactFaxNumber' }) + ":",
                                             disabled: true,
                                             valueName: {
                                                 code: "fax_countryCode",
@@ -266,7 +266,7 @@ const PublicNoticeApplyForm = ({ loadedData, _selections }) => {
                                             <Grid item xs={12} md={3} lg={3}
                                                 sx={{ display: 'flex', alignItems: 'center' }}>
                                                 <Typography variant="pnspsFormParagraphBold">
-                                                    <FormattedMessage id="draftFile"/> ({intl.formatMessage({id: 'fileSizeWarning'})}):
+                                                    <FormattedMessage id="draftFile" /> ({intl.formatMessage({ id: 'fileSizeWarning' })}):
                                                 </Typography>
                                             </Grid>
                                             <Grid item xs={12} md={6} lg={6} sx={{ wordBreak: 'break-word' }}>
@@ -302,22 +302,22 @@ const PublicNoticeApplyForm = ({ loadedData, _selections }) => {
                                             <Grid item xs={12} md={6} lg={6} >
                                                 <label htmlFor="uploadFileBtn">
                                                     <Button
-                                                        aria-label={intl.formatMessage({id: 'uploadFileBtn'})}
+                                                        aria-label={intl.formatMessage({ id: 'uploadFileBtn' })}
                                                         component="span"
                                                         variant="outlined"
                                                         size="large"
-                                                    >{attachment ? intl.formatMessage({id: 'uploadFileBtn'}) : intl.formatMessage({id: 'reUpload'})}</Button>
+                                                    >{attachment ? intl.formatMessage({ id: 'uploadFileBtn' }) : intl.formatMessage({ id: 'reUpload' })}</Button>
                                                 </label>
                                             </Grid>
                                             <Grid item xs={12} md={3} lg={3}>
                                             </Grid>
                                         </Grid>
                                     </Grid>
-                                    {isORGLoggedIn()?
+                                    {isORGLoggedIn() ?
                                         <>
                                             <Grid item xs={12} md={12} lg={12}>
                                                 {FieldUtils.getCarOfField({
-                                                    label: intl.formatMessage({id: 'careOf'}) + ":",
+                                                    label: intl.formatMessage({ id: 'careOf' }) + ":",
                                                     valueName: "careOf",
                                                     form: formik,
                                                     // disabled: true
@@ -325,35 +325,47 @@ const PublicNoticeApplyForm = ({ loadedData, _selections }) => {
                                             </Grid>
                                             <Grid item xs={12} md={12} lg={12} sx={{ mb: 3 }}>
                                                 <Typography display="inline" variant="subtitle1" sx={{ color: 'primary.primary' }}>
-                                                    <FormattedMessage id="careOfRemark" />
+                                                    <FormattedMessage id="noteOnClientRemark" />
                                                 </Typography>
                                             </Grid>
                                         </>
-                                    :
+                                        :
                                         null
-                                        
+
                                     }
                                     <Grid item xs={12} md={12} lg={12}>
                                         {FieldUtils.getTextArea({
-                                            label: intl.formatMessage({id: 'extraMark'}) + ":",
+                                            label: intl.formatMessage({ id: 'extraMark' }) + ":",
                                             valueName: "remarks",
                                             form: formik,
                                             inputProps: { maxLength: 255 }
                                         })}
                                     </Grid>
+
+                                    <Grid item xs={12}>
+                                        <Typography variant="h6" height="100%" >
+                                            <div style={{ padding: 12 }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "tradeMarkFootnote" }) }} />
+                                        </Typography>
+                                    </Grid>
+
+
                                     <Grid item xs={12}>
                                         <center>
                                             <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
-                                            <Button
-                                                aria-label={intl.formatMessage({id: 'applyPublicNotice'})}
-                                                variant="contained"
-                                                type="submit"
-                                            >
-                                                <FormattedMessage id="applyPublicNotice"/>
-                                            </Button>
+                                                <Button
+                                                    aria-label={intl.formatMessage({ id: 'applyPublicNotice' })}
+                                                    variant="contained"
+                                                    type="submit"
+                                                >
+                                                    <FormattedMessage id="applyPublicNotice" />
+                                                </Button>
                                             </ThemeProvider>
                                         </center>
                                     </Grid>
+
+
+                                    
+
                                 </Grid>
                             </form>
                         </Box>
@@ -372,21 +384,21 @@ const PublicNoticeApplyForm = ({ loadedData, _selections }) => {
                     }}
                 >
                     <DialogTitle>
-                        <FormattedMessage id="attention"/>
+                        <FormattedMessage id="attention" />
                     </DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h3" style={{ padding: '16px' }}>{warningText}</Typography>
                     </DialogContent>
                     <DialogActions>
                         <Button
-                            aria-label={intl.formatMessage({id: 'ok'})}
+                            aria-label={intl.formatMessage({ id: 'ok' })}
                             onClick={() => {
-                                if(val.contactPerson){
+                                if (val.contactPerson) {
                                     apply(val);
                                     setIsWarningPopUp(false);
-                                }else{
+                                } else {
                                     setIsWarningPopUp(false);
-                                    if(reloadPage){
+                                    if (reloadPage) {
                                         location.reload();
                                     }
                                 }

src/utils/ApiPathConst.js

@@ -72,12 +72,11 @@ export const DR_IMPORT = apiPath+'/settings/dr/import';
 export const AUDIT_LOG_EXPORT = apiPath+'/settings/auditLog-export';
 
 
-
 // POST request
 //Login
 export const POST_LOGIN = '/login';
 export const POST_CAPTCHA = apiPath+'/captcha';
-export const POST_TERMS_N_CONDITIONS = apiPath+'/termsAndConditions';
+export const GET_CONTENT = apiPath+'/getContent';
 export const POST_VERIFY_CAPTCHA = apiPath+'/verifyCaptcha';
 export const GET_COMBO = apiPath+'/combo-data';