update combo

src/pages/Organization/DetailPage/OrganizationCard.js

@@ -363,6 +363,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                                 valueName: "country",
                                 disabled: (!editMode && !createMode),
                                 dataList: ComboData.country,
+                                getOptionLabel: (option) => intl.formatMessage({ id: option.type? option.type : "hongKong" }),
                                 form: formik
                             })}
                         </Grid>
@@ -372,7 +373,8 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                                 label: FieldUtils.notNullFieldLabel("District:"),
                                 valueName: "district",
                                 disabled: (!editMode && !createMode),
-                                dataList: ComboData.district(intl),
+                                dataList: ComboData.district,
+                                getOptionLabel: (option) => intl.formatMessage({ id: option.type? option.type : "hongKong" }),
                                 form: formik
                             })}
                         </Grid>

src/pages/Organization/DetailPage/index.js

@@ -13,6 +13,8 @@ const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/Loa
 import ForwardIcon from '@mui/icons-material/Forward';
 import { useNavigate, useParams } from 'react-router-dom';
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+import {getObjectByValue} from "../../../utils/CommonFunction";
+import * as ComboData from "../../../utils/ComboData";
 
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
@@ -46,8 +48,8 @@ const OrganizationDetailPage = () => {
             HttpUtils.get({
                 url: UrlUtils.GET_ORG_PATH + "/" + params.id,
                 onSuccess: function (response) {
-                    response.data["country"] = response.data.addressTemp?.country;
-                    response.data["district"] = response.data.addressTemp?.district;
+                    response.data["country"] = getObjectByValue(ComboData.country, "key", response.data.address?.country);
+                    response.data["district"] = getObjectByValue(ComboData.district, "key", response.data.address?.district);
                     response.data["addressLine1"] = response.data.addressTemp?.addressLine1;
                     response.data["addressLine2"] = response.data.addressTemp?.addressLine2;
                     response.data["addressLine3"] = response.data.addressTemp?.addressLine3;

src/pages/Organization/DetailPage_FromUser/OrganizationCard_loadFromUser.js

@@ -236,7 +236,7 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
                         {FieldUtils.getComboField({
                             label: FieldUtils.notNullFieldLabel("District:"),
                             valueName: "district",
-                            dataList: ComboData.district(intl),
+                            dataList: ComboData.district,
                             form: formik
                         })}
                     </Grid>

src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js

@@ -160,7 +160,7 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                             </Grid>
                             <Grid item xs={12} md={12}>
                                 {FieldUtils.getPhoneField({
-                                    label: "聯繫電話:",
+                                    label: intl.formatMessage({id: 'userContactNumber'}) + ":",
                                     disabled: true,
                                     valueName: {
                                         code: "tel_countryCode",
@@ -171,7 +171,7 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                             </Grid>
                             <Grid item xs={12} md={12}>
                                 {FieldUtils.getPhoneField({
-                                    label: "聯繫傳真:",
+                                    label: intl.formatMessage({id: 'contactFaxNumber'}) + ":",
                                     disabled: true,
                                     valueName: {
                                         code: "fax_countryCode",

src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js

@@ -75,8 +75,8 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                     },
                     emailAddress: values.emailAddress,
                     address: {
-                        country: values.country,
-                        district: values.district,
+                        country: values.country.key,
+                        district: values.district.key,
                         addressLine1: values.addressLine1,
                         addressLine2: values.addressLine2,
                         addressLine3: values.addressLine3,
@@ -411,6 +411,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                 {FieldUtils.getComboField({
                                     label: "Country:",
                                     valueName: "country",
+                                    getOptionLabel: (option) => intl.formatMessage({ id: option.type? option.type : "hongKong" }),
                                     dataList: ComboData.country,
                                     disabled: (!editMode),
                                     form: formik
@@ -498,7 +499,8 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                 {FieldUtils.getComboField({
                                     label: "District:",
                                     valueName: "district",
-                                    dataList: ComboData.district(intl),
+                                    dataList: ComboData.district,
+                                    getOptionLabel: (option) => intl.formatMessage({ id: option.type? option.type : "islandCombo" }),
                                     disabled: (!editMode),
                                     form: formik
                                 })}

src/pages/User/DetailsPage_Individual/index.js

@@ -22,6 +22,8 @@ const BackgroundHead = {
 }
 import Loadable from 'components/Loadable';
 import { useNavigate } from "react-router-dom";
+import {getObjectByValue} from "../../../utils/CommonFunction";
+import * as ComboData from "../../../utils/ComboData";
 const LoadingComponent = Loadable(React.lazy(() => import('../../extra-pages/LoadingComponent')));
 const UserInformationCard = Loadable(React.lazy(() => import('./UserInformationCard_Individual')));
 
@@ -54,8 +56,8 @@ const UserMaintainPage_Individual = () => {
                 response.data["modifieDate"] = modifiedBy;
                 response.data["verifiedStatus"] = response.data.verifiedBy ? DateUtils.datetimeStr(response.data.verifiedDate) + ", " + response.data.verifiedByName : "Not verified";
 
-                response.data["country"] = response.data.address?.country;
-                response.data["district"] = response.data.address?.district;
+                response.data["country"] = getObjectByValue(ComboData.country, "key", response.data.address?.country);
+                response.data["district"] = getObjectByValue(ComboData.district, "key", response.data.address?.district);
                 response.data["addressLine1"] = response.data.address?.addressLine1;
                 response.data["addressLine2"] = response.data.address?.addressLine2;
                 response.data["addressLine3"] = response.data.address?.addressLine3;

src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js

@@ -525,6 +525,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                                     label: "Country:",
                                     valueName: "country",
                                     dataList: ComboData.country,
+                                    getOptionLabel: (option) => intl.formatMessage({ id: option.type? option.type : "hongKong" }),
                                     disabled: true,
                                     form: formik
                                 })}
@@ -564,7 +565,8 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                                 {FieldUtils.getComboField({
                                     label: "District:",
                                     valueName: "district",
-                                    dataList: ComboData.district(intl),
+                                    dataList: ComboData.district,
+                                    getOptionLabel: (option) => intl.formatMessage({ id: option.type? option.type : "islandCombo" }),
                                     disabled: true,
                                     form: formik
                                 })}

src/pages/authentication/auth-forms/BusCustomFormWizard.js

@@ -89,7 +89,7 @@ const BusCustomFormWizard = (props) => {
     };
 
     const [selectedAddress4, setSelectedAddress4] = useState(null);
-    const [selectedAddress5, setSelectedAddress5] = useState(ComboData.country(intl)[0]);
+    const [selectedAddress5, setSelectedAddress5] = useState(ComboData.country[0]);
     const [termsAndConAccept, setTermsAndConAccept] = useState(false);
     const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false);
     const [isValid, setisValid] = useState(false);
@@ -101,8 +101,8 @@ const BusCustomFormWizard = (props) => {
     const [checkEmail, setCheckEmail] = useState(false)
     const [checkEmailBlur, setCheckEmailBlur] = useState(false)
 
-    const address4ComboList = ComboData.district(intl);
-    const address5ComboList = ComboData.country(intl);
+    const address4ComboList = ComboData.district;
+    const address5ComboList = ComboData.country;
     const termsAndCon = "此網址由香港特別行政區政府物流服務署製作及管理。本署會盡力確保網址上的資料無誤，\n"
         + "但有絕對酌情權隨時刪除、暫停登載或編輯各項資料而無須給予任何理由。\n由於任何與網址"
         + "內資料有關的理由或原因，而導致出現申索、損失或損害，本署概不負責。\n使用者須自行評"
@@ -546,7 +546,7 @@ const BusCustomFormWizard = (props) => {
     const handleReset = (resetForm) => {
         resetForm();
         setSelectedAddress4("")
-        setSelectedAddress5(ComboData.country(intl)[0])
+        setSelectedAddress5(ComboData.country[0])
         setCheckCountry(false)
         setFileList([])
         setFileListData([])
@@ -972,6 +972,7 @@ const BusCustomFormWizard = (props) => {
                                             value={selectedAddress4}
                                             options={address4ComboList}
                                             disabled={checkCountry}
+                                            getOptionLabel={(option) => option.type? intl.formatMessage({ id: option.type }) : ""}
                                             onChange={(event, newValue) => {
                                                 setSelectedAddress4(newValue);
                                             }}
@@ -986,10 +987,11 @@ const BusCustomFormWizard = (props) => {
                                             id="address5-combo"
                                             value={selectedAddress5}
                                             options={address5ComboList}
+                                            getOptionLabel={(option) => option.type? intl.formatMessage({ id: option.type }) : ""}
                                             onChange={(event, newValue) => {
                                                 if (newValue !== null) {
                                                     setSelectedAddress5(newValue);
-                                                    if (newValue === intl.formatMessage({id: 'hongKong'})) {
+                                                    if (newValue.type === 'hongKong') {
                                                         setCheckCountry(false)
                                                     } else {
                                                         setSelectedAddress4("");
@@ -1534,7 +1536,7 @@ const BusCustomFormWizard = (props) => {
                                                     {formik.values.address3}
                                                 </Typography>
                                                 : null}
-                                            {selectedAddress5 === "香港" ?
+                                            {selectedAddress5.label === "hongKong" ?
                                                 <Stack direction="row">
                                                     <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address4-signup">
                                                         <FormattedMessage id="region"/>:
@@ -1549,7 +1551,7 @@ const BusCustomFormWizard = (props) => {
                                                     <FormattedMessage id="regionOrCountry"/>:
                                                 </Typography>
                                                 <Typography variant="pnspsFormHeader">
-                                                    {selectedAddress5}
+                                                    {intl.formatMessage({id: selectedAddress5.label})}
                                                 </Typography>
                                             </Stack>
                                         </Stack>

src/pages/authentication/auth-forms/CustomFormWizard.js

@@ -89,7 +89,8 @@ const CustomFormWizard = (props) => {
     const [selectedIdDocInputType, setSelectedIdDocInputType] = useState("");
     // const [selectedIdDocLabel, setSelectedIdDocLabel] = useState(null);
     const [selectedAddress4, setSelectedAddress4] = useState(null);
-    const [selectedAddress5, setSelectedAddress5] = useState(ComboData.country(intl)[0]);
+    console.log(ComboData.country[0]);
+    const [selectedAddress5, setSelectedAddress5] = useState(ComboData.country[0]);
     const [termsAndConAccept, setTermsAndConAccept] = useState(false);
     const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false);
     const [isValid, setisValid] = useState(false);
@@ -102,8 +103,6 @@ const CustomFormWizard = (props) => {
     const [checkEmailBlur, setCheckEmailBlur] = useState(false)
 
     const idDocTypeComboList = ComboData.idDocType;
-    const address4ComboList = ComboData.district(intl);
-    const address5ComboList = ComboData.country(intl);
     const termsAndCon = "此網址由香港特別行政區政府物流服務署製作及管理。本署會盡力確保網址上的資料無誤，\n"
         + "但有絕對酌情權隨時刪除、暫停登載或編輯各項資料而無須給予任何理由。\n由於任何與網址"
         + "內資料有關的理由或原因，而導致出現申索、損失或損害，本署概不負責。\n使用者須自行評"
@@ -315,8 +314,8 @@ const CustomFormWizard = (props) => {
     const _onSubmit = () => {
         setLoding(true);
         values.idDocType = selectedIdDocType.type
-        values.address4 = selectedAddress4
-        values.address5 = selectedAddress5
+        values.address4 = selectedAddress4.key
+        values.address5 = selectedAddress5.key
         const userAddress = {
             "addressLine1": "",
             "addressLine2": "",
@@ -638,7 +637,7 @@ const CustomFormWizard = (props) => {
     const handleReset = (resetForm) => {
         resetForm();
         setSelectedAddress4("")
-        setSelectedAddress5(ComboData.country(intl)[0])
+        setSelectedAddress5(ComboData.country[0])
         setCheckCountry(false)
         setSelectedIdDocType({})
         setSelectedIdDocInputType("");
@@ -1176,8 +1175,9 @@ const CustomFormWizard = (props) => {
                                             disablePortal
                                             id="address4-combo"
                                             value={selectedAddress4}
-                                            options={address4ComboList}
+                                            options={ComboData.district}
                                             disabled={checkCountry}
+                                            getOptionLabel={(option) => option.type? intl.formatMessage({ id: option.type }) : ""}
                                             onChange={(event, newValue) => {
                                                 setSelectedAddress4(newValue);
                                             }}
@@ -1191,11 +1191,12 @@ const CustomFormWizard = (props) => {
                                             disablePortal
                                             id="address5-combo"
                                             value={selectedAddress5}
-                                            options={address5ComboList}
+                                            options={ComboData.country}
+                                            getOptionLabel={(option) => option.type? intl.formatMessage({ id: option.type }) : ""}
                                             onChange={(event, newValue) => {
                                                 if (newValue !== null) {
                                                     setSelectedAddress5(newValue);
-                                                    if (newValue === intl.formatMessage({id: 'hongKong'})) {
+                                                    if (newValue.type === 'hongKong') {
                                                         setCheckCountry(false)
                                                     } else {
                                                         setSelectedAddress4("");
@@ -1707,7 +1708,7 @@ const CustomFormWizard = (props) => {
                                                     {formik.values.address3}
                                                 </Typography>
                                                 : null}
-                                            {selectedAddress5 == ("香港") ?
+                                            {selectedAddress5.label === "hongKong" ?
                                                 <Stack direction="row">
                                                     <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address4-signup">
                                                         <FormattedMessage id="region"/>:
@@ -1719,7 +1720,9 @@ const CustomFormWizard = (props) => {
                                                 <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address5-signup">
                                                     <FormattedMessage id="regionOrCountry"/>:
                                                 </Typography>
-                                                <Typography variant="pnspsFormHeader">{selectedAddress5}</Typography>
+                                                <Typography variant="pnspsFormHeader">
+                                                    {intl.formatMessage({id: selectedAddress5.label})}
+                                                </Typography>
                                             </Stack>
                                         </Stack>
                                     </Stack>

src/pages/authentication/auth-forms/IAmSmartFormWizard.js

@@ -64,7 +64,7 @@ const CustomFormWizard = (props) => {
     const [checkEmail, setCheckEmail] = useState(false)
     const [checkEmailBlur, setCheckEmailBlur] = useState(false)
 
-    const address4ComboList = ComboData.district(intl);
+    const address4ComboList = ComboData.district;
     const address5ComboList = ComboData.country;
     const termsAndCon = "此網址由香港特別行政區政府物流服務署製作及管理。本署會盡力確保網址上的資料無誤，\n"
         + "但有絕對酌情權隨時刪除、暫停登載或編輯各項資料而無須給予任何理由。\n由於任何與網址"
@@ -522,7 +522,7 @@ const CustomFormWizard = (props) => {
                                             onChange={(event, newValue) => {
                                                 if (newValue !== null) {
                                                     setSelectedAddress5(newValue);
-                                                    if (newValue === intl.formatMessage({id: 'hongKong'})) {
+                                                    if (newValue.type === 'hongKong') {
                                                         setCheckCountry(false)
                                                     } else {
                                                         setSelectedAddress4("");

src/translations/en.json

@@ -75,6 +75,7 @@
   "emailUsed": "This email has been registered, please use another email",
   "emailSent": "A verification email will be sent to your email address. Please follow the instructions to complete the verification and log in to the system.",
   "userContactNumber": "Contact Number",
+  "contactFaxNumber": "Contact Fax",
   "requiredValidNumber": "Please enter a valid contact number",
   "requireContactNumber": "Please enter your contact number",
   "require3Number": "Please enter an 3-digit number",

src/translations/zh-CN.json

@@ -75,6 +75,7 @@
   "emailUsed": "此电邮已被注册，请使用其他电邮",
   "emailSent": "验证电邮将发送到你的电邮地址，请依指示完成验证及登入系统。",
   "userContactNumber": "联络电话",
+  "contactFaxNumber": "联络传真",
   "requiredValidNumber": "请输入有效联络电话",
   "requireContactNumber": "请输入联络电话",
   "require3Number": "请输入3位数字",

src/translations/zh-HK.json

@@ -75,6 +75,7 @@
   "emailUsed": "此電郵已被注冊，請使用其他電郵",
   "emailSent": "驗證電郵將發送到你的電郵地址，請依指示完成驗證及登入系統。",
   "userContactNumber": "聯絡電話",
+  "contactFaxNumber": "聯絡傳真",
   "requiredValidNumber": "請輸入有效聯絡電話",
   "requireContactNumber": "請輸入聯絡電話",
   "require3Number": "請輸入3位數字",

src/utils/ComboData.js

@@ -1,25 +1,39 @@
 export const idDocType = [
-    { key: 1, label: 'passport',  type: 'passport' },
-    { key: 2, label: 'HKIDcard',  type: 'HKID' },
-    { key: 3, label: 'mainlandIDCard',  type: 'CNID' },
-    { key: 4, label: 'proCert',  type: 'otherCert' }
+    { id:1, key: 1, label: 'passport',  type: 'passport' },
+    { id:2, key: 2, label: 'HKIDcard',  type: 'HKID' },
+    { id:3, key: 3, label: 'mainlandIDCard',  type: 'CNID' },
+    { id:4, key: 4, label: 'proCert',  type: 'otherCert' }
 ];
                 
-export const district = (intl) =>{
-    return [
-        'islandCombo', 'kwaiTsingCombo', 'northCombo', 'saiKungCombo',
-        'shaTinCombo', 'taiPoCombo', 'tsuenWanCombo', 'tuenMunCombo',
-        'yuenLongCombo', 'kowloonCityCombo', 'kwunTongCombo', 'shamShuiPoCombo',
-        'wongTaiSinCombo', 'yauTsimMongCombo', 'centralAndWesternCombo', 'easternCombo',
-        'southernCombo', 'wanChaiCombo', 'lantauIslandCombo', 'lammaIslandCombo',
-        'pengChauCombo'
-    ].map((district) => intl.formatMessage({id: district}));
-};
-
-export const country = (intl) => {
-    return ["hongKong", "mainland", "macau"]
-        .map((country) => intl.formatMessage({ id: country }));
-};
+export const district = [
+    { id: 1, key: 1, label: '離島區',  type: 'islandCombo' },
+    { id: 2, key: 2, label: '葵青區',  type: 'kwaiTsingCombo' },
+    { id: 3, key: 3, label: '北區',  type: 'northCombo' },
+    { id: 4, key: 4, label: '西貢區',  type: 'saiKungCombo' },
+    { id: 5, key: 5, label: '沙田區',  type: 'shaTinCombo' },
+    { id: 6, key: 6, label: '大埔區',  type: 'taiPoCombo' },
+    { id: 7, key: 7, label: '荃灣區',  type: 'tsuenWanCombo' },
+    { id: 8, key: 8, label: '屯門區',  type: 'tuenMunCombo' },
+    { id: 9, key: 9, label: '元朗區',  type: 'yuenLongCombo' },
+    { id: 10, key: 10, label: '九龍城區',  type: 'kowloonCityCombo' },
+    { id: 11, key: 11, label: '觀塘區',  type: 'kwunTongCombo' },
+    { id: 12, key: 12, label: '深水埗區',  type: 'shamShuiPoCombo' },
+    { id: 13, key: 13, label: '黃大仙區',  type: 'wongTaiSinCombo' },
+    { id: 14, key: 14, label: '油尖旺區',  type: 'yauTsimMongCombo' },
+    { id: 15, key: 15, label: '中西區',  type: 'centralAndWesternCombo' },
+    { id: 16, key: 16, label: '東區',  type: 'easternCombo' },
+    { id: 17, key: 17, label: '南區',  type: 'southernCombo' },
+    { id: 18, key: 18, label: '灣仔區',  type: 'wanChaiCombo' },
+    { id: 19, key: 19, label: '大嶼山區',  type: 'lantauIslandCombo' },
+    { id: 20, key: 20, label: '南丫島區',  type: 'lammaIslandCombo' },
+    { id: 21, key: 21, label: '坪洲區',  type: 'pengChauCombo' }
+];
+
+export const country = [
+    { id:1, key: 1, label: '香港',  type: 'hongKong' },
+    { id:2, key: 2, label: '內地',  type: 'mainland' },
+    { id:3, key: 3, label: '澳門',  type: 'macau' }
+];
 
 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' }]; 
 

src/utils/CommonFunction.js

@@ -26,6 +26,15 @@ export function getObjectById(list, id) {
     return obj === undefined || Object.keys(obj).length <= 0 ? null : obj
 }
 
+export function getObjectByValue(list, valueName, value) {
+    const obj = list.find((element) => {
+        return element[valueName] === parseInt(value);
+    });
+    console.log(obj);
+    return obj === undefined || Object.keys(obj).length <= 0 ? null : obj
+}
+
+
 export function removeObjectWithId(arr, id) {
     const arrCopy = Array.from(arr);
     const objWithIdIndex = arrCopy.findIndex((obj) => obj.id === id);
@@ -33,6 +42,15 @@ export function removeObjectWithId(arr, id) {
     return arrCopy;
 }
 
+export function getComboValueByLabel(comboList, input) {
+    for (let i = 0; i < comboList.length; i++) {
+        if (comboList[i].label === input) {
+            return comboList[i];
+        }
+    }
+    return input === undefined ? null : input;
+}
+
 export function getDateString(queryDateArray) {
     return (
         queryDateArray[0]