update ui

src/pages/Organization/DetailPage/OrganizationCard.js

@@ -17,7 +17,7 @@ const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingCo
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 import { notifySaveSuccess } from 'utils/CommonFunction';
-import {useIntl} from "react-intl";
+import { useIntl } from "react-intl";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
@@ -48,17 +48,17 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
         enableReinitialize: true,
         initialValues: currentUserData,
         validationSchema: yup.object().shape({
-            enCompanyName: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({id: 'userRequireEnglishName'}))),
-            chCompanyName: yup.string().max(255, displayErrorMsg(intl.formatMessage({id: 'userRequireChineseName'}))).nullable(),
-            addressLine1: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({id: 'validateAddressLine1'}))),
-            addressLine2: yup.string().max(255, displayErrorMsg(intl.formatMessage({id: 'noMoreThen255Words'}))),
-            addressLine3: yup.string().max(255, displayErrorMsg(intl.formatMessage({id: 'noMoreThen255Words'}))),
-            fax_countryCode: yup.string().min(3, displayErrorMsg(intl.formatMessage({id: 'requireDialingCode'}))).nullable(),
-            tel_countryCode: yup.string().min(3, displayErrorMsg(intl.formatMessage({id: 'requireDialingCode'}))),
-            phoneNumber: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'requiredValidNumber'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireContactNumber'}))),
-            faxNumber: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'require8Number'}))).nullable(),
-            brExpiryDate: yup.string().min(8).required(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertValidityDate'}))),
-            brNo: yup.string().required(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertNumber'}))).test('checkBrNoFormat', displayErrorMsg(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInValidBusinessRegCertNumber'}))), function (value) {
+            enCompanyName: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({ id: 'userRequireEnglishName' }))),
+            chCompanyName: yup.string().max(255, displayErrorMsg(intl.formatMessage({ id: 'userRequireChineseName' }))).nullable(),
+            addressLine1: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({ id: 'validateAddressLine1' }))),
+            addressLine2: yup.string().max(255, displayErrorMsg(intl.formatMessage({ id: 'noMoreThen255Words' }))),
+            addressLine3: yup.string().max(255, displayErrorMsg(intl.formatMessage({ id: 'noMoreThen255Words' }))),
+            fax_countryCode: yup.string().min(3, displayErrorMsg(intl.formatMessage({ id: 'requireDialingCode' }))).nullable(),
+            tel_countryCode: yup.string().min(3, displayErrorMsg(intl.formatMessage({ id: 'requireDialingCode' }))),
+            phoneNumber: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'requiredValidNumber' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireContactNumber' }))),
+            faxNumber: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'require8Number' }))).nullable(),
+            brExpiryDate: yup.string().min(8).required(displayErrorMsg(intl.formatMessage({ id: 'pleaseFillInBusinessRegCertValidityDate' }))),
+            brNo: yup.string().required(displayErrorMsg(intl.formatMessage({ id: 'pleaseFillInBusinessRegCertNumber' }))).test('checkBrNoFormat', displayErrorMsg(displayErrorMsg(intl.formatMessage({ id: 'pleaseFillInValidBusinessRegCertNumber' }))), function (value) {
                 var brNo_pattern = /[0-9]{8}/
                 if (value !== undefined) {
                     if (value.match(brNo_pattern)) {
@@ -109,9 +109,9 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
         }
     });
 
-    useEffect(()=>{
+    useEffect(() => {
         setEditModeFun(editMode);
-    },[editMode]);
+    }, [editMode]);
 
     useEffect(() => {
         if (Object.keys(userData).length > 0) {
@@ -230,34 +230,39 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                                         <Typography variant="h5">Edit</Typography>
                                     </Button>
                                 </Grid>
-                                <Grid item sx={{ ml: 3, mr: 3 }}>
-                                    <Button
-                                        size="large"
-                                        variant="contained"
-                                        color="orange"
-                                        onClick={()=>setCreditorConfirmPopUp(true)}
-                                        sx={{
-                                            textTransform: 'capitalize',
-                                            alignItems: 'end'
-                                        }}
-                                    >
-                                        <Typography variant="h5">Mark as Creditor</Typography>
-                                    </Button>
-                                </Grid>
-                                <Grid item sx={{ ml: 3, mr: 3 }}>
-                                    <Button
-                                        size="large"
-                                        variant="contained"
-                                        color="error"
-                                        onClick={()=>setNonCreditorConfirmPopUp(true)}
-                                        sx={{
-                                            textTransform: 'capitalize',
-                                            alignItems: 'end'
-                                        }}
-                                    >
-                                        <Typography variant="h5">Mark as Non-Creditor</Typography>
-                                    </Button>
-                                </Grid>
+
+                                {
+                                    currentUserData.creditor ?
+                                        <Grid item sx={{ ml: 3, mr: 3 }}>
+                                            <Button
+                                                size="large"
+                                                variant="contained"
+                                                color="error"
+                                                onClick={() => setNonCreditorConfirmPopUp(true)}
+                                                sx={{
+                                                    textTransform: 'capitalize',
+                                                    alignItems: 'end'
+                                                }}
+                                            >
+                                                <Typography variant="h5">Mark as Non-Creditor</Typography>
+                                            </Button>
+                                        </Grid>
+                                        :
+                                        <Grid item sx={{ ml: 3, mr: 3 }}>
+                                            <Button
+                                                size="large"
+                                                variant="contained"
+                                                color="orange"
+                                                onClick={() => setCreditorConfirmPopUp(true)}
+                                                sx={{
+                                                    textTransform: 'capitalize',
+                                                    alignItems: 'end'
+                                                }}
+                                            >
+                                                <Typography variant="h5">Mark as Creditor</Typography>
+                                            </Button>
+                                        </Grid>
+                                }
                             </>
                         }
                     </Grid>
@@ -363,7 +368,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                                 valueName: "country",
                                 disabled: (!editMode && !createMode),
                                 dataList: ComboData.country,
-                                getOptionLabel: (option) => option.type? intl.formatMessage({ id: option.type }) : "",
+                                getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "",
                                 form: formik
                             })}
                         </Grid>
@@ -374,7 +379,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                                 valueName: "district",
                                 disabled: (!editMode && !createMode),
                                 dataList: ComboData.district,
-                                getOptionLabel: (option) => option.type? intl.formatMessage({ id: option.type }) : "",
+                                getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "",
                                 form: formik
                             })}
                         </Grid>
@@ -401,7 +406,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                         <Typography variant="h4" style={{ padding: '16px' }}>Are you sure mark as Creditor?</Typography>
                     </DialogContent>
                     <DialogActions>
-                    <Button onClick={() => setCreditorConfirmPopUp(false)}><Typography variant="h5">Cancel</Typography></Button>
+                        <Button onClick={() => setCreditorConfirmPopUp(false)}><Typography variant="h5">Cancel</Typography></Button>
                         <Button onClick={() => markAsCreditor()}><Typography variant="h5">Confirm</Typography></Button>
                     </DialogActions>
                 </Dialog>
@@ -413,7 +418,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                         <Typography variant="h4" style={{ padding: '16px' }}>Are you sure mark as Non-Creditor?</Typography>
                     </DialogContent>
                     <DialogActions>
-                    <Button onClick={() => setNonCreditorConfirmPopUp(false)}><Typography variant="h5">Cancel</Typography></Button>
+                        <Button onClick={() => setNonCreditorConfirmPopUp(false)}><Typography variant="h5">Cancel</Typography></Button>
                         <Button onClick={() => markAsNonCreditor()}><Typography variant="h5">Confirm</Typography></Button>
                     </DialogActions>
                 </Dialog>