fix check country and district when create organisation

src/pages/Organization/DetailPage_FromUser/OrganizationCard_loadFromUser.js

@@ -2,15 +2,16 @@
 import {
     Grid, Button, Typography,
     Dialog, DialogTitle, DialogContent, DialogActions,
+    FormHelperText
 } from '@mui/material';
-import MainCard from "../../../components/MainCard";
+import MainCard from "components/MainCard";
 import * as React from "react";
 import * as yup from 'yup';
 import { useEffect, useState } from "react";
-import * as HttpUtils from '../../../utils/HttpUtils';
-import * as UrlUtils from "../../../utils/ApiPathConst";
-import * as FieldUtils from "../../../utils/FieldUtils";
-import * as ComboData from "../../../utils/ComboData";
+import * as HttpUtils from 'utils/HttpUtils';
+import * as UrlUtils from "utils/ApiPathConst";
+import * as FieldUtils from "utils/FieldUtils";
+import * as ComboData from "utils/ComboData";
 import { useNavigate } from "react-router-dom";
 import { useFormik } from 'formik';
 const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
@@ -29,6 +30,7 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
     const [onReady, setOnReady] = useState(false);
     const [isFailPopUp, setIsFailPopUp] = useState(false);
     const [failText, setFailText] = useState("");
+    const [errorMsg, setErrorMsg] = useState("");
 
     useEffect(() => {
         //if state data are ready and assign to different field
@@ -57,7 +59,7 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
             faxNumber: yup.string().min(8).nullable(),
             brExpiryDate: yup.string().min(8).required(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertValidityDate'}))),
             brNo: yup.string().max(8).required(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertNumber'})))
-                .test('checkBrNoFormat', displayErrorMsg(displayErrorMsg(`${intl.formatMessage({id: 'pleaseFillInValidBusinessRegCertNumber'})} (e.g. 12341234)`)), function (value) {
+                .test('checkBrNoFormat', displayErrorMsg(`${intl.formatMessage({id: 'pleaseFillInValidBusinessRegCertNumber'})} (e.g. 12341234)`), function (value) {
                 var brNo_pattern = /[0-9]{8}/
                 if (value !== undefined) {
                     if (value.match(brNo_pattern)) {
@@ -69,45 +71,53 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
             }),
         }),
         onSubmit: values => {
-            HttpUtils.post({
-                url: UrlUtils.POST_ORG_SAVE_PATH,
-                params: {
-                    id: null,
-                    primaryUserId: userId,
-                    enCompanyName: values.enCompanyName,
-                    chCompanyName: values.chCompanyName,
-                    brNo: values.brNo,
-                    brExpiryDate: values.brExpiryDate,
-                    enCompanyNameTemp: values.enCompanyNameTemp,
-                    chCompanyNameTemp: values.chCompanyNameTemp,
-                    brExpiryDateTemp: values.brExpiryDateTemp,
-                    contactPerson: values.contactPerson,
-                    contactTel: {
-                        countryCode: values.tel_countryCode,
-                        phoneNumber: values.phoneNumber
-                    },
-                    faxNo: {
-                        countryCode: values.fax_countryCode,
-                        faxNumber: values.faxNumber
-                    },
-                    addressTemp: {
-                        country: values.country.key,
-                        district: values.district.key,
-                        addressLine1: values.addressLine1,
-                        addressLine2: values.addressLine2,
-                        addressLine3: values.addressLine3,
-                    }
-                },
-                onSuccess: function (responseData) {
-                    if(responseData.msg){
-                        setFailText(responseData.msg);
-                        setIsFailPopUp(true);
-                        return;
-                    }
-                    navigate('/org/' + responseData.id);
-                    notifyCreateSuccess()
+            if (values.country==null){
+                setErrorMsg(intl.formatMessage({id: 'pleaseFillInCountry'}))
+            } else {
+                if (values.country.key ==1 && values.district == null){
+                    setErrorMsg(intl.formatMessage({id: 'pleaseFillInDistrict'}))
+                } else {
+                    HttpUtils.post({
+                        url: UrlUtils.POST_ORG_SAVE_PATH,
+                        params: {
+                            id: null,
+                            primaryUserId: userId,
+                            enCompanyName: values.enCompanyName,
+                            chCompanyName: values.chCompanyName,
+                            brNo: values.brNo,
+                            brExpiryDate: values.brExpiryDate,
+                            enCompanyNameTemp: values.enCompanyNameTemp,
+                            chCompanyNameTemp: values.chCompanyNameTemp,
+                            brExpiryDateTemp: values.brExpiryDateTemp,
+                            contactPerson: values.contactPerson,
+                            contactTel: {
+                                countryCode: values.tel_countryCode,
+                                phoneNumber: values.phoneNumber
+                            },
+                            faxNo: {
+                                countryCode: values.fax_countryCode,
+                                faxNumber: values.faxNumber
+                            },
+                            addressTemp: {
+                                country: values.country.key,
+                                district: values.district?.key,
+                                addressLine1: values.addressLine1,
+                                addressLine2: values.addressLine2,
+                                addressLine3: values.addressLine3,
+                            }
+                        },
+                        onSuccess: function (responseData) {
+                            if(responseData.msg){
+                                setFailText(responseData.msg);
+                                setIsFailPopUp(true);
+                                return;
+                            }
+                            navigate('/org/' + responseData.id);
+                            notifyCreateSuccess()
+                        }
+                    });
                 }
-            });
+            }
         }
     });
 
@@ -140,9 +150,7 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
                 <Grid container spacing={1}>
                     {/*top*/}
                     <Grid item s={12} md={12} lg={12} sx={{ mb: 3 }} alignItems={"start"} justifyContent="center">
-
-
-                        <Grid item sx={{ ml: 3, mr: 3 }}>
+                        <Grid item sx={{mr: 3 }}>
                             <Button
                                 size="large"
                                 variant="contained"
@@ -155,10 +163,17 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
                                 Create
                             </Button>
                         </Grid>
-
                     </Grid>
                     {/*top*/}
 
+                    <Grid item xs={12}>
+                        <FormHelperText error id="helper-text-address1-signup">
+                            <Typography variant="errorMessage1">
+                                {errorMsg}
+                            </Typography>
+                        </FormHelperText>
+                    </Grid>
+                    
                     <Grid item lg={4}>
                         {FieldUtils.getTextField({
                             label: "BR No.:",

src/pages/Organization/DetailPage_FromUser/index.js

@@ -1,18 +1,30 @@
 // material-ui
-import {Grid, Typography} from '@mui/material';
+import {Grid, Typography, Stack, Box} from '@mui/material';
 import {useEffect, useState} from "react";
 import * as React from "react";
-import * as HttpUtils from "../../../utils/HttpUtils";
+import * as HttpUtils from "utils/HttpUtils";
 import {useParams} from "react-router-dom";
 import {useNavigate} from "react-router-dom";
-import * as UrlUtils from "../../../utils/ApiPathConst";
-import * as DateUtils from "../../../utils/DateUtils";
+import * as UrlUtils from "utils/ApiPathConst";
+import * as DateUtils from "utils/DateUtils";
+import {getObjectByValue} from "utils/CommonFunction";
+import * as ComboData from "utils/ComboData";
 
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 const InfoCard = Loadable(lazy(() => import('./OrganizationCard_loadFromUser')));
-const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
+const LoadingComponent = Loadable(lazy(() => import('pages/extra-pages/LoadingComponent')));
 
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -34,8 +46,8 @@ const OrganizationDetailPage_FromUser = () => {
             HttpUtils.get({
                 url: UrlUtils.GET_ORG_FROM_USER_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.addressTemp?.country);
+                    response.data["district"] = getObjectByValue(ComboData.district, "key", response.data.addressTemp?.district);
                     response.data["addressLine1"] = response.data.addressTemp?.addressLine1;
                     response.data["addressLine2"] = response.data.addressTemp?.addressLine2;
                     response.data["addressLine3"] = response.data.addressTemp?.addressLine3;
@@ -62,20 +74,32 @@ const OrganizationDetailPage_FromUser = () => {
 
     return (
         isLoading ?
-            <LoadingComponent/>
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+                <Grid item>
+                    <LoadingComponent />
+                </Grid>
+            </Grid>
             :
-            <Grid container rowSpacing={4.5} columnSpacing={2.75}>
-                <Grid item xs={12} sx={{mb: -2.25}}>
-                    <Typography variant="h5">Organisation (Create From User)</Typography>
+            <Grid container direction="column" sx={{minHeight: '87vh',backgroundColor:'#ffffff' }}>
+                <Grid item xs={12}>
+                    <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' }}}>
+                                Organisation (Create From User)
+                            </Typography>
+                        </Stack>
+                    </div>
                 </Grid>
                 {/*col 1*/}
                 <Grid item xs={12} >
                     <Grid container>
                         <Grid item xs={12} md={12} lg={12}>
-                            <InfoCard
-                                userData={formData}
-                                userId={params.id}
-                            />
+                            <Box xs={12} ml={0} mt={-1} mr={0} sx={{ p: 1, borderRadius: '10px' }}>
+                                <InfoCard
+                                    userData={formData}
+                                    userId={params.id}
+                                />
+                            </Box>
                         </Grid>
 
                     </Grid>

src/translations/en.json

@@ -199,6 +199,8 @@
   "requireUsername": "Please enter user name",
   "requirePassword": "Please enter password",
   "regionOrCountry": "Country/Region",
+  "pleaseFillInCountry": "Please enter the Country/Region",
+  "pleaseFillInDistrict": "Please enter the District",
   "hongKong": "Hong Kong",
   "mainland": "Mainland China",
   "macau": "Macau",

src/translations/zh-CN.json

@@ -195,6 +195,8 @@
   "requirePassword": "请输入密码",
   "region": "区域 (只适用于香港)",
   "regionOrCountry": "国家/地区",
+  "pleaseFillInCountry": "请输入国家/地区",
+  "pleaseFillInDistrict": "请输入地区",
   "hongKong": "香港",
   "mainland": "内地",
   "macau": "澳门",

src/translations/zh-HK.json

@@ -200,6 +200,8 @@
   "requirePassword": "請輸入密碼",
   "region": "區域 (只適用於香港)",
   "regionOrCountry": "國家/地區",
+  "pleaseFillInCountry": "請輸入國家/地區",
+  "pleaseFillInDistrict": "請輸入地區",
   "hongKong": "香港",
   "mainland": "內地",
   "macau": "澳門",