update ui layout

src/pages/Organization/DetailPage/OrganizationCard.js

@@ -517,27 +517,6 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                             })}
                         </Grid>
 
-                        <Grid item xs={12} lg={4} >
-                            {FieldUtils.getComboField({
-                                label: FieldUtils.notNullFieldLabel("Country:"),
-                                valueName: "country",
-                                disabled: true,
-                                dataList: ComboData.country,
-                                getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "",
-                                form: formik
-                            })}
-                        </Grid>
-
-                        <Grid item xs={12} lg={4} >
-                            {FieldUtils.getComboField({
-                                label: FieldUtils.notNullFieldLabel("District:"),
-                                valueName: "district",
-                                disabled: (!editMode && !createMode),
-                                dataList: ComboData.district,
-                                getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "",
-                                form: formik
-                            })}
-                        </Grid>
                         {
                             currentUserData.creditor ?
                                 <Grid item xs={12} lg={4} >
@@ -562,6 +541,28 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                             })}
                         </Grid>
 
+                        <Grid item xs={12} lg={12} >
+                            {FieldUtils.getProfileComboField({
+                                label: "",
+                                valueName: "district",
+                                disabled: (!editMode && !createMode),
+                                dataList: ComboData.district,
+                                getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "",
+                                form: formik
+                            })}
+                        </Grid>
+
+                        <Grid item xs={12} lg={12} >
+                            {FieldUtils.getProfileComboField({
+                                label: "",
+                                valueName: "country",
+                                disabled: true,
+                                dataList: ComboData.country,
+                                getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "",
+                                form: formik
+                            })}
+                        </Grid>
+
                         <Grid item lg={12} ></Grid>
 
                     </Grid>

src/pages/Organization/DetailPage/OrganizationPubCard.js

@@ -289,20 +289,19 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                             })}
                         </Grid>
 
-                        <Grid item xs={12} lg={4} >
-                            {FieldUtils.getComboField({
-                                label: FieldUtils.notNullFieldLabel(intl.formatMessage({ id: 'country' }) + ":"),
-                                valueName: "country",
-                                disabled: true,
-                                dataList: ComboData.country,
-                                getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "",
+                        <Grid item xs={12} lg={12} >
+                            {FieldUtils.getAddressField({
+                                label: FieldUtils.notNullFieldLabel(intl.formatMessage({ id: 'formAddress' }) + ":"),
+                                valueName: ["addressLine1", "addressLine2", "addressLine3"],
+                                disabled: (!editMode && !createMode),
                                 form: formik
                             })}
                         </Grid>
 
-                        <Grid item xs={12} lg={4} >
-                            {FieldUtils.getComboField({
-                                label: FieldUtils.notNullFieldLabel(intl.formatMessage({ id: 'district' }) + ":"),
+                        <Grid item xs={12} lg={12} >
+                            {FieldUtils.getProfileComboField({
+                                // label: FieldUtils.notNullFieldLabel(""),
+                                label: "",
                                 valueName: "district",
                                 disabled: (!editMode && !createMode),
                                 dataList: ComboData.district,
@@ -310,13 +309,15 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                                 form: formik
                             })}
                         </Grid>
-
-
+                        
                         <Grid item xs={12} lg={12} >
-                            {FieldUtils.getAddressField({
-                                label: FieldUtils.notNullFieldLabel(intl.formatMessage({ id: 'formAddress' }) + ":"),
-                                valueName: ["addressLine1", "addressLine2", "addressLine3"],
-                                disabled: (!editMode && !createMode),
+                            {FieldUtils.getProfileComboField({
+                                // label: FieldUtils.notNullFieldLabel(""),
+                                label: "",
+                                valueName: "country",
+                                disabled: true,
+                                dataList: ComboData.country,
+                                getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "",
                                 form: formik
                             })}
                         </Grid>

src/pages/Organization/DetailPage_FromUser/OrganizationCard_loadFromUser.js

@@ -310,20 +310,17 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
                                 })}
                             </Grid>
 
-                            <Grid item xs={12} lg={4}>
-                                {FieldUtils.getComboField({
-                                    label: FieldUtils.notNullFieldLabel("Country:"),
-                                    valueName: "country",
-                                    disabled: true,
-                                    dataList: ComboData.country,
-                                    getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "",
+                            <Grid item xs={12}>
+                                {FieldUtils.getAddressField({
+                                    label: FieldUtils.notNullFieldLabel("Address:"),
+                                    valueName: ["addressLine1", "addressLine2", "addressLine3"],
                                     form: formik
                                 })}
                             </Grid>
 
-                            <Grid item xs={12} lg={4}>
+                            <Grid item xs={12} lg={12}>
                                 {FieldUtils.getComboField({
-                                    label: FieldUtils.notNullFieldLabel("District:"),
+                                    label: "",
                                     valueName: "district",
                                     dataList: ComboData.district,
                                     getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "",
@@ -331,13 +328,17 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
                                 })}
                             </Grid>
 
-                            <Grid item xs={12}>
-                                {FieldUtils.getAddressField({
-                                    label: FieldUtils.notNullFieldLabel("Address:"),
-                                    valueName: ["addressLine1", "addressLine2", "addressLine3"],
+                            <Grid item xs={12} lg={12}>
+                                {FieldUtils.getComboField({
+                                    label: "",
+                                    valueName: "country",
+                                    disabled: true,
+                                    dataList: ComboData.country,
+                                    getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "",
                                     form: formik
                                 })}
                             </Grid>
+
                         </Grid>
                     }
                 </form>

src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js

@@ -587,6 +587,12 @@ const PublicNoticeApplyForm = ({ loadedData, _selections, gazetteIssueList }) =>
                                         </center>
                                     </Grid>
 
+                                    <Grid item xs={12}>
+                                        <Typography variant="h6" height="100%" >
+                                            <div style={{ padding: 12 }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "applyPublicNoticeText" }) }} />
+                                        </Typography>
+                                    </Grid>
+
 
 
 

src/pages/PublicNotice/Details_GLD/GazetteDetailCard.js

@@ -33,6 +33,8 @@ const GazetteDetailCard = (
     const [groupTitle, setGroupTitle] = useState("");
     const [verified, setVerified] = useState(null);
     const [currentStatus, setCurrentStatus] = useState({});
+    const [sysType, setSysType] = useState(null);
+    const [careOf, setCareOf] = useState("");
 
     const [isWarningPopUp, setIsWarningPopUp] = useState(false);
     const [warningText, setWarningText] = useState("");
@@ -49,7 +51,9 @@ const GazetteDetailCard = (
                 + " No. " + applicationDetailData.gazetteIssueDetail.issueNo);
             setIssueDate(DateUtils.dateFormat(applicationDetailData.gazetteIssueDetail.issueDate, "D MMM YYYY (ddd)"));
             setGazetteCode(applicationDetailData.data.groupNo)
-            console.log(gazetteCode)
+            console.log(applicationDetailData)
+            setSysType(applicationDetailData.userData.sysType)
+            setCareOf(applicationDetailData.data.careOf)
             setGroupTitle(applicationDetailData.data.groupTitle)
         }
     }, [applicationDetailData]);
@@ -178,7 +182,7 @@ const GazetteDetailCard = (
                                 </Grid>
                             </Grid>
                             <Grid container direction="row" justifyContent="space-between"
-                                alignItems="center" sx={{ mb: { lg: -3 } }}>
+                                alignItems="center" >
                                 <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={4} lg={4}
@@ -238,6 +242,43 @@ const GazetteDetailCard = (
                                     </Grid>
                                 </Grid>
                             </Grid>
+                            {
+                                sysType != null && sysType == "dummy"?
+                                    <Grid container direction="row" justifyContent="space-between" alignItems="center" sx={{ mb: { lg: -3 } }}>
+                                        <Grid item xs={12} md={12} lg={12} sx={{ mb: 1 }}>
+                                            <Grid container alignItems={"center"}>
+                                                <Grid item xs={12} md={2} lg={2}
+                                                    sx={{ display: 'flex', alignItems: 'center' }}>
+                                                    <FormLabel>
+                                                        <Typography variant="h5">Customer&apos;s Client/ Case No:</Typography>
+                                                    </FormLabel>
+                                                </Grid>
+        
+                                                <Grid item xs={12} md={10} lg={10}>
+                                                    <FormControl variant="outlined" fullWidth disabled >
+                                                        <OutlinedInput
+                                                            fullWidth
+                                                            size="small"
+                                                            {...register("careOf",
+                                                                {
+                                                                    value: careOf,
+                                                                })}
+                                                            value={careOf}
+                                                            id='careOf'
+                                                            sx={{
+                                                                "& .MuiInputBase-input.Mui-disabled": {
+                                                                    WebkitTextFillColor: "#000000",
+                                                                    background: "#f8f8f8",
+                                                                },
+                                                            }}
+                                                        />
+                                                    </FormControl>
+                                                </Grid>
+                                            </Grid>
+                                        </Grid>
+                                    </Grid>
+                                : null
+                            }
                         </Grid>
                     </Grid>
                 </form>

src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js

@@ -575,11 +575,11 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
 
                             <Grid item xs={12} sm={12} md={12} lg={4}>
                                 {FieldUtils.getComboField({
-                                    label: "Country:",
-                                    valueName: "country",
-                                    getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "",
-                                    dataList: ComboData.country,
-                                    disabled: true,
+                                    label: intl.formatMessage({ id: 'language' }) + ":",
+                                    valueName: "preferLocale",
+                                    dataList: ComboData.Locale,
+                                    getOptionLabel: (option) => option.label ? option.label : "",
+                                    disabled: (!editMode),
                                     form: formik
                                 })}
                             </Grid>
@@ -649,36 +649,37 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                 </Grid>
                             </Grid>
 
-                            <Grid item xs={12} sm={12} md={12} lg={4}>
-                                {FieldUtils.getComboField({
-                                    label: "District:",
-                                    valueName: "district",
-                                    dataList: ComboData.district,
-                                    getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "",
+                            <Grid item xs={12} sm={12} md={12} lg={12}>
+                                {FieldUtils.getAddressField({
+                                    label: "Address:",
+                                    valueName: ["addressLine1", "addressLine2", "addressLine3"],
                                     disabled: (!editMode),
                                     form: formik
                                 })}
                             </Grid>
 
-                            <Grid item xs={12} sm={12} md={12} lg={4}>
-                                {FieldUtils.getComboField({
-                                    label: intl.formatMessage({ id: 'language' }) + ":",
-                                    valueName: "preferLocale",
-                                    dataList: ComboData.Locale,
-                                    getOptionLabel: (option) => option.label ? option.label : "",
+                            <Grid item xs={12} sm={12} md={12} lg={12}>
+                                {FieldUtils.getProfileComboField({
+                                    label: "",
+                                    valueName: "district",
+                                    dataList: ComboData.district,
+                                    getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "",
                                     disabled: (!editMode),
                                     form: formik
                                 })}
                             </Grid>
 
                             <Grid item xs={12} sm={12} md={12} lg={12}>
-                                {FieldUtils.getAddressField({
-                                    label: "Address:",
-                                    valueName: ["addressLine1", "addressLine2", "addressLine3"],
-                                    disabled: (!editMode),
+                                {FieldUtils.getProfileComboField({
+                                    label: "",
+                                    valueName: "country",
+                                    getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "",
+                                    dataList: ComboData.country,
+                                    disabled: true,
                                     form: formik
                                 })}
                             </Grid>
+
                         </Grid>
                     </Grid>
                 </form>

src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js

@@ -330,11 +330,11 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => {
 
                             <Grid item xs={12} sm={12} md={12} lg={4}>
                                 {FieldUtils.getComboField({
-                                    label: intl.formatMessage({id: 'country'}) + ":",
-                                    valueName: "country",
-                                    getOptionLabel: (option) => option.type? intl.formatMessage({ id: option.type }) : "",
-                                    dataList: ComboData.country,
-                                    disabled: true,
+                                    label: intl.formatMessage({id: 'language'}) + ":",
+                                    valueName: "preferLocale",
+                                    dataList: ComboData.Locale,
+                                    getOptionLabel: (option) => option.label? option.label: "",
+                                    disabled: (!editMode),
                                     form: formik
                                 })}
                             </Grid>
@@ -359,33 +359,34 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => {
                                     form: formik
                                 })}
                             </Grid>
-                            <Grid item xs={12} sm={12} md={12} lg={4}>
-                                {FieldUtils.getComboField({
-                                    label: intl.formatMessage({id: 'district'}) + ":",
-                                    valueName: "district",
-                                    dataList: ComboData.district,
-                                    getOptionLabel: (option) => option.type? intl.formatMessage({ id: option.type }) : "",
+
+                            <Grid item xs={12} sm={12} md={12} lg={12}>
+                                {FieldUtils.getAddressField({
+                                    label: intl.formatMessage({id: 'userAddress'}) + ":",
+                                    valueName: ["addressLine1", "addressLine2", "addressLine3"],
                                     disabled: (!editMode),
                                     form: formik
                                 })}
                             </Grid>
 
-                            <Grid item xs={12} sm={12} md={12} lg={4}>
-                                {FieldUtils.getComboField({
-                                    label: intl.formatMessage({id: 'language'}) + ":",
-                                    valueName: "preferLocale",
-                                    dataList: ComboData.Locale,
-                                    getOptionLabel: (option) => option.label? option.label: "",
+                            <Grid item xs={12} sm={12} md={12} lg={12}>
+                                {FieldUtils.getProfileComboField({
+                                    label: "",
+                                    valueName: "district",
+                                    dataList: ComboData.district,
+                                    getOptionLabel: (option) => option.type? intl.formatMessage({ id: option.type }) : "",
                                     disabled: (!editMode),
                                     form: formik
                                 })}
                             </Grid>
 
                             <Grid item xs={12} sm={12} md={12} lg={12}>
-                                {FieldUtils.getAddressField({
-                                    label: intl.formatMessage({id: 'userAddress'}) + ":",
-                                    valueName: ["addressLine1", "addressLine2", "addressLine3"],
-                                    disabled: (!editMode),
+                                {FieldUtils.getProfileComboField({
+                                    label: "",
+                                    valueName: "country",
+                                    getOptionLabel: (option) => option.type? intl.formatMessage({ id: option.type }) : "",
+                                    dataList: ComboData.country,
+                                    disabled: true,
                                     form: formik
                                 })}
                             </Grid>

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

@@ -1602,18 +1602,18 @@ const BusCustomFormWizard = (props) => {
                                                 : null}
                                             {selectedAddress5.type === "hongKong" ?
                                                 <Stack direction="column">
-                                                    <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address4-signup">
+                                                    {/* <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address4-signup">
                                                         <FormattedMessage id="region"/>:
-                                                    </Typography>
+                                                    </Typography> */}
                                                     <Typography variant="pnspsFormHeader">
                                                         {!selectedAddress4? "" : intl.formatMessage({id: selectedAddress4.type})}
                                                     </Typography>
                                                 </Stack>
                                                 : null}
                                             <Stack direction="column">
-                                                <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address5-signup">
+                                                {/* <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address5-signup">
                                                     <FormattedMessage id="regionOrCountry"/>:
-                                                </Typography>
+                                                </Typography> */}
                                                 <Typography variant="pnspsFormHeader">
                                                     {intl.formatMessage({id: selectedAddress5.type})}
                                                 </Typography>

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

@@ -1830,18 +1830,18 @@ const CustomFormWizard = (props) => {
                                                 : null}
                                             {selectedAddress5.type === "hongKong" ?
                                                 <Stack direction="column">
-                                                    <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address4-signup">
+                                                    {/* <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address4-signup">
                                                         <FormattedMessage id="region" />:
-                                                    </Typography>
+                                                    </Typography> */}
                                                     <Typography variant="pnspsFormHeader">
                                                         {!selectedAddress4 ? "" : intl.formatMessage({ id: selectedAddress4.type })}
                                                     </Typography>
                                                 </Stack>
                                                 : null}
                                             <Stack direction="column">
-                                                <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address5-signup">
+                                                {/* <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address5-signup">
                                                     <FormattedMessage id="regionOrCountry" />:
-                                                </Typography>
+                                                </Typography> */}
                                                 <Typography variant="pnspsFormHeader">
                                                     {intl.formatMessage({ id: selectedAddress5.type })}
                                                 </Typography>

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

@@ -1075,18 +1075,18 @@ const CustomFormWizard = (props) => {
                                                 : null}
                                             {selectedAddress5.type === "hongKong" ?
                                                 <Stack direction="column">
-                                                    <Typography variant="h5" color={theme.palette.grey[600]} id="preview-address4-signup">
+                                                    {/* <Typography variant="h5" color={theme.palette.grey[600]} id="preview-address4-signup">
                                                         <FormattedMessage id="region" />:
-                                                    </Typography>
+                                                    </Typography> */}
                                                     <Typography variant="h5">
                                                         {!selectedAddress4 ? "" : intl.formatMessage({ id: selectedAddress4.type })}
                                                     </Typography>
                                                 </Stack>
                                                 : null}
                                             <Stack direction="column">
-                                                <Typography variant="h5" color={theme.palette.grey[600]} id="preview-address5-signup">
+                                                {/* <Typography variant="h5" color={theme.palette.grey[600]} id="preview-address5-signup">
                                                     <FormattedMessage id="regionOrCountry" />:
-                                                </Typography>
+                                                </Typography> */}
                                                 <Typography variant="h5">
                                                     {intl.formatMessage({ id: selectedAddress5.type })}
                                                 </Typography>

src/translations/en.json

@@ -338,6 +338,7 @@
 
 
   "applyPublicNotice": "Apply for Public Notice",
+  "applyPublicNoticeText": "<div style=\"color:red;\">After successful submission, the application will appear under “Processing” on “My Public Notices” page.  A notification email with the Application Number will reach your mailbox.</div>",
   "attention": "Attention",
   "to": "To",
   "all": "All",

src/translations/zh-CN.json

@@ -370,6 +370,7 @@
   "pwStrong": "强",
 
   "applyPublicNotice": "申请公共启事",
+  "applyPublicNoticeText": "<div style=\"color:red;\">成功提交申请后，申请将列在「我的公共启事」页面下的「处理中」。你将收到附有申请号码的通知电邮。</div>",
   "attention": "注意",
   "to": "到",
   "all": "全部",
@@ -528,7 +529,7 @@
   "idType": "身份证类型",
   "idNo": "身份证号码",
   "country": "国家",
-  "district": "区域",
+  "district": "地区",
   "noRecordFound": "找不到记录",
   "rowsPerPage": "每页项数",
   "date" : "日期",

src/translations/zh-HK.json

@@ -371,6 +371,7 @@
   "pwStrong": "強",
 
   "applyPublicNotice": "申請公共啟事",
+  "applyPublicNoticeText": "<div style=\"color:red;\">成功提交申請後，申請將列在「我的公共啟事」頁面下的「處理中」。你將收到附有申請號碼的通知電郵。</div>",
   "attention": "注意",
   "to": "到",
   "all": "全部",
@@ -529,7 +530,7 @@
   "idType": "身分證類型",
   "idNo": "身分證號碼",
   "country": "國家",
-  "district": "區域",
+  "district": "地區",
   "noRecordFound": "找不到記錄",
   "rowsPerPage": "每頁項數",
   "date" : "日期",

src/utils/FieldUtils.js

@@ -204,6 +204,34 @@ export const getComboField = ({ label, dataList, valueName, form, disabled, getO
     </Grid>;
 }
 
+export const getProfileComboField = ({ label, dataList, valueName, form, disabled, getOptionLabel, onInputChange, onChange, filterOptions, ...props }) => {
+    let err = Boolean(form.errors[valueName]);
+    return <Grid container spacing={1} alignItems={"top"}>
+        <Grid item xs={12} md={3} lg={1} mt={1} sx={{ display: 'flex', alignItems: 'top' }}>
+            <Grid item lg={12} sx={{ alignItems: 'center' }}>
+                <Typography variant="pnspsFormParagraphBold">{label}</Typography>
+            </Grid>
+        </Grid>
+        <Grid item xs={12} md={6} lg={6}>
+            <Grid item lg={12} sx={{mb:2}}>
+                <Combo
+                    valueName={valueName}
+                    disabled={disabled}
+                    dataList={dataList}
+                    form={form}
+                    error={err}
+                    helperText={form.errors[valueName] ? form.errors[valueName] : ''}
+                    filterOptions={filterOptions}
+                    getOptionLabel={getOptionLabel}
+                    onInputChange={onInputChange}
+                    onChange={onChange}
+                    {...props}
+                />
+            </Grid>
+        </Grid>
+    </Grid>;
+}
+
 export const initField = ({ type, valueName, form, disabled, autoFocus, multiline, handleChange, placeholder, inputProps, InputProps, width, ...props }) => {
     let err = Boolean(form.errors[valueName]);
 

src/utils/statusUtils/ProofStatus.js

@@ -42,7 +42,7 @@ function getStatus(params) {
     
     if(isCancelled) return cancel;
     
-    console.log(replyDate)
+    // console.log(replyDate)
     if(replyDate){
         return action?confirm:unable;
     }else{