update public notice

src/layout/MainLayout/Header/index.js

@@ -300,8 +300,11 @@ function Header(props) {
                   <Stack direction="row" justifyContent="flex-start" alignItems="center">
                     <Logo />
                     <Stack justifyContent="flex-start" alignItems="center">
-                      <span id="systemTitle">公共啟事提交</span>
-                      <span id="systemTitle">及繳費系統</span>
+                      {/*<span id="systemTitle">公共啟事提交</span>*/}
+                      {/*<span id="systemTitle">及繳費系統</span>*/}
+                      <span id="systemTitle">
+                        <FormattedMessage id="PNSPS" />
+                      </span>
                     </Stack>
                   </Stack>
                 </Box>

src/pages/Proof/Reply_Public/ProofForm.js

@@ -24,7 +24,7 @@ import Loadable from 'components/Loadable';
 import { notifyActionSuccess } from 'utils/CommonFunction';
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
-import {useIntl} from "react-intl";
+import {FormattedMessage, useIntl} from "react-intl";
 const UploadFileTable = Loadable(React.lazy(() => import('./UploadFileTable')));
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
@@ -299,7 +299,9 @@ const FormPanel = ({ formData }) => {
             </form>
             <div>
                 <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)}  >
-                    <DialogTitle>注意</DialogTitle>
+                    <DialogTitle>
+                        <FormattedMessage id="attention"/>
+                    </DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h3" style={{ padding: '16px' }}>{warningText}</Typography>
                     </DialogContent>

src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js

@@ -23,7 +23,7 @@ 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 {useIntl} from "react-intl";
+import {FormattedMessage, useIntl} from "react-intl";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
@@ -132,7 +132,9 @@ 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">申請公共啟事</Typography>
+                        <Typography ml={15} color='#FFF' variant="h4">
+                            <FormattedMessage id="applyPublicNotice"/>
+                        </Typography>
                     </Stack>
                 </div>
             </Grid>
@@ -256,7 +258,9 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                                     <Button
                                         variant="contained"
                                         type="submit"
-                                    >申請公共啟事</Button>
+                                    >
+                                        <FormattedMessage id="applyPublicNotice"/>
+                                    </Button>
                                     </ThemeProvider>
                                 </center>
                             </Grid>
@@ -266,7 +270,9 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
             </Grid>
             <div>
                 <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)}  >
-                    <DialogTitle>注意</DialogTitle>
+                    <DialogTitle>
+                        <FormattedMessage id="attention"/>
+                    </DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h3" style={{ padding: '16px' }}>{warningText}</Typography>
                     </DialogContent>

src/pages/PublicNotice/ListPanel/BaseGrid.js

@@ -6,18 +6,20 @@ import {
     Typography, useMediaQuery
 } from '@mui/material';
 import * as DateUtils from "utils/DateUtils"
-import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
 import {useNavigate} from "react-router-dom";
 import {
     isORGLoggedIn,
   } from "utils/Utils";
 import {useTheme} from "@emotion/react";
+import {getStatusIntl} from "utils/statusUtils/PublicNoteStatusUtils";
+import {useIntl} from "react-intl";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function BaseGrid({rows}) {
     const navigate = useNavigate()
     const theme = useTheme();
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
+    const intl = useIntl();
 
     const handleDetailClick = (params) => () => {
         navigate('/publicNotice/'+ params.id);
@@ -93,7 +95,7 @@ export default function BaseGrid({rows}) {
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             renderCell: (params) => {
-                return [StatusUtils.getStatus(params)]
+                return [getStatusIntl(params,intl)]
             },
         },
         {

src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js

@@ -15,14 +15,14 @@ import {
   } from "utils/Utils";
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
-import {FormattedMessage} from "react-intl";
+import {FormattedMessage, useIntl} from "react-intl";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
 const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
-
+    const intl = useIntl();
     const [type, setType] = React.useState([]);
-    const [status, setStatus] = React.useState([{ key: 0, label: 'All', labelCht: "全部", type: 'all' }]);
+    const [status, setStatus] = React.useState([{ key: 0, label: 'all', type: 'all' }]);
 
     const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
     const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
@@ -160,7 +160,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             }
                             value={status}
                             // inputValue={status?.labelCht}
-                            getOptionLabel={(option) => option.labelCht}
+                            getOptionLabel={(option) => intl.formatMessage({id: option.label})}
                             onChange={(event, newValue) => {
                                 console.log(newValue)
                                 const findAllIndex = newValue.findIndex((ele) => {

src/pages/PublicNotice/ListPanel/index.js

@@ -25,7 +25,7 @@ const SearchTab = Loadable(lazy(() => import('./SearchPublicNoticeTab')));
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 import {PNSPS_LONG_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
-import {FormattedMessage} from "react-intl";
+import {FormattedMessage, useIntl} from "react-intl";
 
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
@@ -37,6 +37,7 @@ const PublicNotice = () => {
     const [isLoading, setLoding] = useState(true);
     const [selectedTab, setSelectedTab] = useState("1");
     const navigate = useNavigate();
+    const intl = useIntl();
 
     const _sx = {
         padding: "4 2 4 2",
@@ -118,7 +119,7 @@ const PublicNotice = () => {
                         <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
                         <Box sx={{ mr: { md: "47px" } }}>
                             <Button variant="contained" onClick={() => { onBtnClick() }}>
-                                申請公共啟事
+                                <FormattedMessage id="applyPublicNotice"/>
                             </Button>
                         </Box>
                         </ThemeProvider>
@@ -132,10 +133,10 @@ const PublicNotice = () => {
                             <TabContext value={selectedTab}>
                                 <Box sx={{ borderBottom: 1, borderColor: 'divider', overflowX: 'auto', }}>
                                     <TabList onChange={handleChange} aria-label="lab API tabs example" sx={{ display: 'flex', flexDirection: 'row' }}>
-                                        <Tab label={"處理中 (" + submittedList?.length + ")"} value="1" />
-                                        <Tab label={"待發布 (" + pendingPublishList?.length + ")"} value="3" />
-                                        <Tab label={"待付款 (" + pendingPaymentList?.length + ")"} value="4" />
-                                        <Tab label="搜尋申請記錄" value="5" />
+                                        <Tab label={intl.formatMessage({id: 'processing'}) + " (" + submittedList?.length + ")"} value="1" />
+                                        <Tab label={intl.formatMessage({id: 'pendingPublish'}) + " (" + pendingPublishList?.length + ")"} value="3" />
+                                        <Tab label={intl.formatMessage({id: 'pendingPayment'}) + " (" + pendingPaymentList?.length + ")"} value="4" />
+                                        <Tab label={intl.formatMessage({id: 'searchApplyRecord'})} value="5" />
                                     </TabList>
                                 </Box>
                                 <TabPanel value="1">
@@ -169,10 +170,10 @@ const PublicNotice = () => {
                             <TabContext value={selectedTab}>
                                 <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                                     <TabList onChange={handleChange} aria-label="lab API tabs example">
-                                        <Tab label={"處理中 (" + submittedList.length + ")"} value="1" />
-                                        <Tab label={"待付款 (" + pendingPaymentList.length + ")"} value="3" />
-                                        <Tab label={"待發布 (" + pendingPublishList.length + ")"} value="4" />
-                                        <Tab label="搜尋申請記錄" value="5" />
+                                        <Tab label={intl.formatMessage({id: 'processing'}) + " (" + submittedList.length + ")"} value="1" />
+                                        <Tab label={intl.formatMessage({id: 'pendingPayment'}) + " (" + pendingPaymentList.length + ")"} value="3" />
+                                        <Tab label={intl.formatMessage({id: 'pendingPublish'}) + " (" + pendingPublishList.length + ")"} value="4" />
+                                        <Tab label={intl.formatMessage({id: 'searchApplyRecord'})} value="5" />
                                     </TabList>
                                 </Box>
                                 <TabPanel value="1">

src/pages/dashboard/Public/index.js

@@ -10,6 +10,7 @@ import {
   isORGLoggedIn,
 } from "utils/Utils";
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+import {FormattedMessage} from "react-intl";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const DashboardDefault = () => {
@@ -30,7 +31,9 @@ const DashboardDefault = () => {
         <div style={BackgroundHead}>
           <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
             {/* <Typography variant="h5">我的公共啟事</Typography> */}
-            <Typography ml={10} color='#FFF' variant="h4">{isORGLoggedIn() ?userData.fullenName:userData.fullchName}, 午安! 請選擇所需服務。</Typography>
+            <Typography ml={10} color='#FFF' variant="h4">
+              {isORGLoggedIn() ?userData.fullenName:userData.fullchName}, <FormattedMessage id="welcomeMsg"/>
+            </Typography>
           </Stack>
         </div>
       </Grid>

src/translations/en.json

@@ -24,6 +24,7 @@
   "onlinePaymentHistory": "Online Payment History",
   "setting": "Setting",
   "companyOrUserRecord": "Company/Institutional User Records",
+  "welcomeMsg": "Good afternoon! Please select the required service.",
 
   "login": "Login",
   "iAmSmartLogin": "iAM Smart Login",
@@ -86,7 +87,7 @@
   "businessChName": "Chinese name of Organization/Company",
   "preview": "Preview",
   "finishSubmission": "Finish Submission",
-  "reset": "reset",
+  "reset": "Reset",
   "requireString": "Items marked with * must be filled in",
   "confirmPassword": "Confirm password",
   "pleaseConfirmPassword": "Please confirm password",
@@ -181,6 +182,24 @@
   "lammaIslandCombo": "Lamma Island District",
   "pengChauCombo": "Peng Chau District",
 
+  "applyPublicNotice": "Apply for public notice",
+  "attention": "attention",
+  "all": "All",
+  "processing": "Processing",
+  "pendingPayment": "Pending payment",
+  "pendingPublish": "To be Published",
+  "completed": "Completed",
+  "notAccepted": "Not accepted",
+  "resubmit": "Re-submit Required",
+  "cancelled": "Cancelled",
+  "withdrawn": "Withdrawn",
+  "searchApplyRecord": "Search application record",
+  "applicationId": "Application number",
+  "submitDate": "submit date",
+  "myRemarks": "My notes",
+  "status": "status",
+  "viewDetail": "View details",
+
   "Dashboard": "Dashboard",
   "event": "Event"
 }

src/translations/zh-CN.json

@@ -24,6 +24,7 @@
   "onlinePaymentHistory": "网上付款记录",
   "setting": "设置",
   "companyOrUserRecord": "公司/机构用户记录",
+  "welcomeMsg": "午安! 请选择所需服务。",
 
   "login": "登录",
   "iAmSmartLogin": "智方便登录",
@@ -181,6 +182,24 @@
   "lammaIslandCombo": "南丫岛区",
   "pengChauCombo": "坪洲区",
 
+  "applyPublicNotice": "申請公共啟事",
+  "attention": "注意",
+  "all": "全部",
+  "processing": "處理中",
+  "pendingPayment": "待付款",
+  "pendingPublish": "待發佈",
+  "completed": "已完成",
+  "notAccepted": "不接受",
+  "resubmit": "需重新提交",
+  "cancelled": "已取消",
+  "withdrawn": "已撤銷",
+  "searchApplyRecord": "搜尋申請記錄",
+  "applicationId": "申請編號",
+  "submitDate": "提交日期",
+  "myRemarks": "我的備註",
+  "status": "狀態",
+  "viewDetail": "查看詳細",
+
   "Dashboard": "仪表板",
   "event": "活动"
 }

src/translations/zh-HK.json

@@ -24,6 +24,7 @@
   "onlinePaymentHistory": "網上付款記錄",
   "setting": "設定",
   "companyOrUserRecord": "公司/機構用戶記錄",
+  "welcomeMsg": "午安! 請選擇所需服務。",
 
   "login": "登入",
   "iAmSmartLogin": "智方便登入",
@@ -181,6 +182,24 @@
   "lammaIslandCombo": "南丫島區",
   "pengChauCombo": "坪洲區",
 
+  "applyPublicNotice": "申請公共啟事",
+  "attention": "注意",
+  "all": "全部",
+  "processing": "處理中",
+  "pendingPayment": "待付款",
+  "pendingPublish": "待發佈",
+  "completed": "已完成",
+  "notAccepted": "不接受",
+  "resubmit": "需重新提交",
+  "cancelled": "已取消",
+  "withdrawn": "已撤銷",
+  "searchApplyRecord": "搜尋申請記錄",
+  "applicationId": "申請編號",
+  "submitDate": "提交日期",
+  "myRemarks": "我的備註",
+  "status": "狀態",
+  "viewDetail": "查看詳細",
+
   "Dashboard": "儀表板",
   "event": "活動"
 }

src/utils/ComboData.js

@@ -24,27 +24,27 @@ export const country = (intl) => {
 export const accountFilter = [{ id: 1, key: 1, label: 'Active',  type: 'active' }, { id: 2, key: 2, label: 'Locked',  type: 'locked' }, { id: 3, key: 3, label: 'Not verified',  type: 'notVerified' }]; 
 
 export const publicNoticeStatic = [
-    { key: 0, labelCht: '全部', label: 'All',  type: 'all' }, 
-    { key: 1, labelCht: '處理中', label: 'Processing',  type: 'processing' }, // submitted and reviewed
-    { key: 2, labelCht: '待付款', label: 'Pending Payment',  type: 'confirmed' }, 
-    { key: 3, labelCht: '待發布', label: 'To be published',  type: 'paid' }, 
-    { key: 4, labelCht: '已完成', label: 'Completed', type: 'completed' },
-    { key: 5, labelCht: '不接受', label: 'Not accepted', type: 'notAccepted' },
-    { key: 6, labelCht: '需重新提交', label: 'Re-submit Required', type: 'resubmit' },
-    { key: 7, labelCht: '已取消', label: 'Cancelled', type: 'cancelled' },
-    { key: 8, labelCht: '已撤銷', label: 'Withdrawn', type: 'withdrawn' },
+    { key: 0, label: 'all',  type: 'all' },
+    { key: 1, label: 'processing',  type: 'processing' }, // submitted and reviewed
+    { key: 2, label: 'pendingPayment',  type: 'confirmed' },
+    { key: 3, label: 'pendingPublish',  type: 'paid' },
+    { key: 4, label: 'completed', type: 'completed' },
+    { key: 5, label: 'notAccepted', type: 'notAccepted' },
+    { key: 6, label: 'resubmit', type: 'resubmit' },
+    { key: 7, label: 'cancelled', type: 'cancelled' },
+    { key: 8, label: 'withdrawn', type: 'withdrawn' },
 ];
 
 export const publicNoticeStatic_Creditor = [
-    { key: 0, labelCht: '全部', label: 'All', type: 'all' }, 
-    { key: 1, labelCht: '處理中', label: 'Processing', type: 'processing' }, // submitted and reviewed
-    { key: 2, labelCht: '待發布', label: 'To be published', type: 'confirmed' }, 
-    { key: 3, labelCht: '待付款', label: 'Pending Payment', type: 'published' }, 
-    { key: 4, labelCht: '已完成', label: 'Completed',  type: 'completed' },
-    { key: 5, labelCht: '不接受', label: 'Not accepted', type: 'notAccepted' },
-    { key: 6, labelCht: '需重新提交', label: 'Re-submit Required', type: 'resubmit' },
-    { key: 7, labelCht: '已取消', label: 'Cancelled',  type: 'cancelled' },
-    { key: 8, labelCht: '已撤銷', label: 'Withdrawn',  type: 'withdrawn' },
+    { key: 0, label: 'all', type: 'all' },
+    { key: 1, label: 'processing', type: 'processing' }, // submitted and reviewed
+    { key: 2, label: 'pendingPublish', type: 'confirmed' },
+    { key: 3, label: 'pendingPayment', type: 'published' },
+    { key: 4, label: 'completed',  type: 'completed' },
+    { key: 5, label: 'notAccepted', type: 'notAccepted' },
+    { key: 6, label: 'resubmit', type: 'resubmit' },
+    { key: 7, label: 'cancelled',  type: 'cancelled' },
+    { key: 8, label: 'withdrawn',  type: 'withdrawn' },
 ];
 
 

src/utils/statusUtils/Base.js

@@ -2,6 +2,10 @@ import { Typography } from "@mui/material"
 
 export function getStatusTag({ color = "#000", textColor = "#FFF", text = "" }) {
     return (
-        <div style={{ borderRadius: "25px", "background": color, "color": textColor, "padding": "5px 10px 5px 10px", margin: "6px 4px 6px 4px" }}><Typography variant="h6">{text}</Typography></div>
+        <div style={{ borderRadius: "25px", "background": color, "color": textColor, "padding": "5px 10px 5px 10px", margin: "6px 4px 6px 4px" }}>
+            <Typography variant="h6">
+                {text}
+            </Typography>
+        </div>
     )
 }

src/utils/statusUtils/PublicNoteStatusUtils.js

@@ -14,13 +14,13 @@ export function getStatusByText(status, creditor) {
             return getStatusTag({ color: "#f5a83d", text: "處理中" })
         case "confirmed":
             if (creditor)
-                return getStatusTag({ color: "#22a13f", text: "待發布" })
+                return getStatusTag({ color: "#22a13f", text: "待發佈" })
             else
                 return getStatusTag({ color: "#22a13f", text: "待付款" })
         case "published":
             return getStatusTag({ color: "#22a13f", text: "待付款" })
         case "paid":
-            return getStatusTag({ color: "#22a13f", text: "待發布" })
+            return getStatusTag({ color: "#22a13f", text: "待發佈" })
         case "complated":
             return getStatusTag({ color: "#8a8784", text: "已完成" })
         case "notAccepted":
@@ -68,3 +68,37 @@ export function getStatusByTextEng(status, creditor) {
             return getStatusTag({ text: status })
     }
 }
+
+export function getStatusIntl(params, intl) {
+    return getStatusByTextIntl(params.row.status,  params.row.creditor, intl);
+}
+
+export function getStatusByTextIntl(status, creditor, intl) {
+    switch (status) {
+        case "submitted":
+            return getStatusTag({ color: "#f5a83d", text: intl.formatMessage({id: 'processing'}) })
+        case "reviewed":
+            return getStatusTag({ color: "#f5a83d", text: intl.formatMessage({id: 'processing'}) })
+        case "confirmed":
+            if (creditor)
+                return getStatusTag({ color: "#22a13f", text: intl.formatMessage({id: 'pendingPublish'}) })
+            else
+                return getStatusTag({ color: "#22a13f", text: intl.formatMessage({id: 'pendingPayment'}) })
+        case "published":
+            return getStatusTag({ color: "#22a13f", text: intl.formatMessage({id: 'pendingPayment'}) })
+        case "paid":
+            return getStatusTag({ color: "#22a13f", text: intl.formatMessage({id: 'pendingPublish'}) })
+        case "complated":
+            return getStatusTag({ color: "#8a8784", text: intl.formatMessage({id: 'completed'}) })
+        case "notAccepted":
+            return getStatusTag({ color: "#d9372b", text: intl.formatMessage({id: 'notAccepted'}) })
+        case "resubmit":
+            return getStatusTag({ color: "#757373", text: intl.formatMessage({id: 'resubmit'}) })
+        case "cancelled":
+            return getStatusTag({ color: "#909497", text: intl.formatMessage({id: 'cancelled'}) })
+        case "withdrawn":
+            return getStatusTag({ color: "#909497", text: intl.formatMessage({id: 'withdrawn'}) })
+        default:
+            return getStatusTag({ text: status })
+    }
+}