not edit yid type

src/pages/Payment/MultiPaymentWindow.js

@@ -291,7 +291,7 @@ const MultiPaymentWindow = (props) => {
         <form>
           <DialogContent>
             <DialogContentText>
-              <FormLabel sx={{ fontSize: "20px", color: "#000000", textAlign: "left", ml:1}}>
+              <FormLabel sx={{ fontSize: "20px", color: "#000000", textAlign: "left", width: "100%", whiteSpace: "pre-line", paddingLeft: 0 }}>
                 <FormattedMessage id="paymentProcessLimited"/>
               </FormLabel>
               <Grid item xs={12} md={12} sx={{ pt: 2 }} style={{ height: '100%' }} width="100%">

src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js

@@ -14,6 +14,7 @@ import * as FieldUtils from "utils/FieldUtils";
 import * as HttpUtils from 'utils/HttpUtils';
 import * as UrlUtils from "utils/ApiPathConst";
 import * as ComboData from "utils/ComboData";
+import en from "translations/en.json";
 const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
 import Loadable from 'components/Loadable';
 import { notifyActiveSuccess, notifyLockSuccess, notifySaveSuccess, notifyVerifySuccess } from 'utils/CommonFunction';
@@ -44,11 +45,20 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
         event.preventDefault();
     };
 
+    const getIdDocTypeLabel = (option) => {
+        if (!option) return "";
+        if (typeof option === "string") {
+            const item = ComboData.idDocType.find((o) => o.type === option);
+            return item?.label ? (en[item.label] ?? option) : option;
+        }
+        return option.label ? (en[option.label] ?? "") : "";
+    };
+
     useEffect(() => {
         //if state data are ready and assign to different field
         // console.log(currentApplicationDetailData)
         if (Object.keys(currentUserData).length > 0) {
-            setSelectedIdDocInputType(currentUserData.idDocType)
+            setSelectedIdDocInputType(currentUserData.idDocType);
             setOnReady(true);
         }
     }, [currentUserData]);
@@ -392,31 +402,17 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
 
                             <Grid item xs={12} sm={12} md={12} lg={4}>
                                 {FieldUtils.getComboField({
-                                    label: "ID Type:",
+                                    label: `${en.idDocType}:`,
                                     valueName: "idDocType",
-                                    disabled: (!editMode),
+                                    disabled: true,
                                     dataList: ComboData.idDocType,
                                     filterOptions: (options) => options,
-                                    getOptionLabel: (item) => item ? typeof item === 'string' ? item : (item["type"] ? item["type"] + "-" + item["label"] : "") : "",
-                                    onInputChange: (event, newValue, setInputValue) => {
-                                        if (newValue == null) {
-                                            setInputValue("");
-                                        }
-                                        let _val = newValue.split("-");
-                                        if (_val[0]) {
-                                            setInputValue(_val[0]);
-                                        }
-                                    },
-                                    onChange: (event, newValue) => {
-                                        if (newValue == null) {
-                                            formik.setFieldValue("idDocType", "");
-                                            return;
-                                        }
-                                        formik.setFieldValue("idDocType", newValue.type);
-                                        setSelectedIdDocInputType(newValue.type);
-                                        if (newValue.type !== "HKID") {
-                                            formik.setFieldValue("checkDigit", "")
+                                    getOptionLabel: getIdDocTypeLabel,
+                                    isOptionEqualToValue: (option, value) => {
+                                        if (typeof value === "string") {
+                                            return option?.type === value;
                                         }
+                                        return option?.type === value?.type;
                                     },
                                     form: formik
                                 })}

src/translations/en.json

@@ -537,7 +537,7 @@
   "paymentNo": "Payment No.",
   "paymentDate": "Payment Date",
   "paymentTime": "Payment Time",
-  "paymentRefCode": "Payment Reference Number",
+  "paymentRefCode": "Payment Reference No.",
 
   "paymentInfoRecord": "Payment Notice Record",
   "paymentRecordId": "Payment Record No.",