Merge branch 'master' of https://git.2fi-solutions.com/alex/PNSPS-frontend-MaterialUI

src/assets/style/navbarStyles.css

@@ -19,7 +19,7 @@
 }
 #navbar div li{
     list-style: none;   
-    padding: 0 20px;
+    padding: 0 1vw;
     position: relative;
 }
 #navbar div li a{
@@ -30,6 +30,15 @@
     color: black;
     transition: 0.3s ease-in-out;
 }
+
+#navbar div li a span{
+    font-size: 1vw !important;
+}
+
+#navbar div li a svg{
+    font-size: 1vw !important;
+}
+
 #navbar div li a:hover{
     color: #0C489E;
 }

src/layout/MainLayout/Header/index.js

@@ -97,7 +97,7 @@ function Header(props) {
           <Link className="proof" to='/proof/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Proof</Typography></Link>
         </li>
         <li>
-          <Link className="paymentTop" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Payment</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1.0rem' }} /></Link>
+          <Link className="paymentTop" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Payment</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1vw' }} /></Link>
           <ul className='dropdown'>
             <li>
               <Link className="payment" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Online Payment Record</Typography></Link>
@@ -117,7 +117,7 @@ function Header(props) {
           </ul>
         </li>
         <li>
-          <Link className="client" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Client</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1.0rem' }} /></Link>
+          <Link className="client" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Client</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1vw' }} /></Link>
           <ul className='dropdown'>
             <li>
               <Link className="userSearchview" to='/userSearchview'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Users (GLD)</Typography></Link>
@@ -138,7 +138,7 @@ function Header(props) {
           </ul>
         </li>
         <li>
-          <Link className="setting" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Settings</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1.0rem' }} /></Link>
+          <Link className="setting" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Settings</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1vw' }} /></Link>
           <ul className='dropdown'>
             <li>
               <Link className="userProfileGld" to='/user/profile'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>My Profile</Typography></Link>

src/pages/Proof/Reply_Public/ApplicationDetails.js

@@ -89,7 +89,7 @@ const ApplicationDetailCard = ({ formData, }) => {
                                     </Grid>
                                 </Grid>
                             </Grid>
-                            <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
+                            <Grid item xs={12} md={5} lg={5} sx={{ mb: 1}}>
                                 <Grid container alignItems={"left"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>

src/pages/PublicNotice/Details_GLD/ClientDetailCard.js

@@ -36,7 +36,6 @@ const ClientDetailCard = (
 ) => {
     // const params = useParams();
     const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({});
-    const [orgDetailData, setOrgDetailData] = useState({});
     const [brExpiryDate,setBrExpiryDate] = useState("");
     const [brNo,setBrNo] = useState("");
     const [onReady, setOnReady] = useState(false);
@@ -50,40 +49,48 @@ const ClientDetailCard = (
         //if user data from parent are not null
         if (Object.keys(applicationDetailData).length > 0 && applicationDetailData !== undefined) {
             setCurrentApplicationDetailData(applicationDetailData.userData);
-            if (!applicationDetailData.orgDetail == null){
-                setOrgDetailData(applicationDetailData.orgDetail.data);
-            }
-            if (!applicationDetailData.companyName1 == null) {
-                setCompanyName(applicationDetailData.companyName);
-            } else {
+            if (applicationDetailData.orgDetail != null){
+                var orgDetail = applicationDetailData.orgDetail?.data;
+                setBrExpiryDate(DateUtils.dateValue(orgDetail?.brExpiryDate));
+                setBrNo(orgDetail?.brNo);
                 const companyNameData = {
-                    enCompanyName: applicationDetailData.userData.enCompanyName,
-                    chCompanyName: applicationDetailData.userData.chCompanyName
+                    enCompanyName: orgDetail?.enCompanyName,
+                    chCompanyName: orgDetail?.chCompanyName
+                }
+                setCompanyName(companyNameData)
+            }else{
+                var userData = applicationDetailData.userData;
+                setBrExpiryDate(DateUtils.dateValue(userData?.brExpiryDate));
+                setBrNo(userData?.brNo);
+                const companyNameData = {
+                    enCompanyName: userData?.enCompanyName,
+                    chCompanyName: userData?.chCompanyName
                 }
                 setCompanyName(companyNameData)
             }
+            setOnReady(true);
         }
     }, [applicationDetailData]);
 
-    useEffect(() => {
-        //if state data are ready and assign to different field
-        // console.log(currentApplicationDetailData)
-        if (Object.keys(currentApplicationDetailData).length > 0) {
-            if( currentApplicationDetailData.orgId!=null){
-                if (Object.keys(orgDetailData).length > 0) {
-                    setBrExpiryDate(DateUtils.dateValue(orgDetailData.brExpiryDate));
-                    setBrNo(orgDetailData.brNo);
-                    setOnReady(true);
-                }else{
-                    setBrExpiryDate(DateUtils.dateValue(currentApplicationDetailData.brExpiryDate));
-                    setBrNo(currentApplicationDetailData.brNo);
-                    setOnReady(true);
-                }
-            }else{
-                setOnReady(true);
-            }
-        }
-    }, [currentApplicationDetailData]);
+    // useEffect(() => {
+    //     //if state data are ready and assign to different field
+    //     // console.log(currentApplicationDetailData)
+    //     if (Object.keys(currentApplicationDetailData).length > 0) {
+    //         if( currentApplicationDetailData.orgId!=null){
+    //             if (Object.keys(orgDetailData).length > 0) {
+    //                 setBrExpiryDate(DateUtils.dateValue(orgDetailData.brExpiryDate));
+    //                 setBrNo(orgDetailData.brNo);
+    //                 setOnReady(true);
+    //             }else{
+    //                 setBrExpiryDate(DateUtils.dateValue(currentApplicationDetailData.brExpiryDate));
+    //                 setBrNo(currentApplicationDetailData.brNo);
+    //                 setOnReady(true);
+    //             }
+    //         }else{
+    //             setOnReady(true);
+    //         }
+    //     }
+    // }, [currentApplicationDetailData, orgDetailData]);
     
     useEffect(() => {
         if (brNo != undefined && brNo.length > 0) {

src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js

@@ -142,24 +142,24 @@ const ApplicationDetailCard = (
                 const latestData = {};
 
                 responseData.forEach(item => {
-                const { appId, timeDiff } = item;
-                if (latestData[appId] === undefined || timeDiff < latestData[appId].timeDiff) {
-                    latestData[appId] = item;
-                }
+                    const { appId, timeDiff } = item;
+                    if (latestData[appId] === undefined || timeDiff < latestData[appId].timeDiff) {
+                        latestData[appId] = item;
+                    }
                 });
                 const latestDataObjects = Object.values(latestData);
-                
+
                 const filteredData = latestDataObjects.filter(item => item.timeDiff > 20 || item.status !== "APPR");
                 const filteredAppIds = filteredData.map(item => item.appId);
-                
+
                 const appIdsNotInData = appIdList.filter(appId => !latestDataObjects.some(item => item.appId === appId));
                 const combinedAppIdsArray = [...appIdsNotInData, ...filteredAppIds];
-                
+
                 const readyToPayment = appIdList.every(appId => combinedAppIdsArray.includes(appId));
-                if (readyToPayment){
+                if (readyToPayment) {
                     setIsPopUp(true);
                     return;
-                }else{
+                } else {
                     const appIdsInData = appIdList.filter(appId => !combinedAppIdsArray.some(item => item === appId));
                     const HoldingApplication = latestDataObjects.filter(item => appIdsInData.includes(item.appId));
                     const resultString = HoldingApplication.map(item => item.appNo).join(' , ');
@@ -211,11 +211,11 @@ const ApplicationDetailCard = (
                                     onClick={cancelledClick()}
                                     color="edit"
                                     disabled={currentApplicationDetailData.status == "rejected"
-                                    || currentApplicationDetailData.status == "cancelled"
-                                    || (!currentApplicationDetailData.creditor 
-                                        && currentApplicationDetailData.status == "paid")
-                                    || (currentApplicationDetailData.creditor 
-                                        && currentApplicationDetailData.status == "confirmed")
+                                        || currentApplicationDetailData.status == "cancelled"
+                                        || (!currentApplicationDetailData.creditor
+                                            && currentApplicationDetailData.status == "paid")
+                                        || (currentApplicationDetailData.creditor
+                                            && currentApplicationDetailData.status == "confirmed")
                                     }
                                     title={intl.formatMessage({ id: 'cancel' })}
                                     startIcon={<CloseIcon />}
@@ -265,7 +265,7 @@ const ApplicationDetailCard = (
                                         </Grid>
                                     </Grid>
                                 </Grid>
-                                <Grid item xs={12} sm={12} md={9} lg={5} sx={{ mb: 1, ml: 1 }}>
+                                <Grid item xs={12} sm={12} md={9} lg={5} sx={{ mb: 1}}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
@@ -274,7 +274,7 @@ const ApplicationDetailCard = (
                                             </Typography></FormLabel>
                                         </Grid>
 
-                                        <Grid item xs={12} md={4} lg={4}>
+                                        <Grid item xs={12} md={9} lg={9}>
                                             <FormControl variant="outlined">
                                                 {currentApplicationDetailData.status ? StatusUtils.getStatusByTextIntl(currentApplicationDetailData.status, false, intl) : ""}
                                             </FormControl>
@@ -505,12 +505,23 @@ const ApplicationDetailCard = (
                                                 <Grid item xs={12} md={3} lg={3}
                                                     sx={{ display: 'flex', alignItems: 'center' }}>
                                                     <FormLabel><Typography variant="pnspsFormParagraph">
-                                                        <FormattedMessage id="currencyPrice" />(HK$):
+                                                        <FormattedMessage id="currencyAmount" />(HK$):
                                                     </Typography></FormLabel>
                                                 </Grid>
 
                                                 <Grid item xs={12} md={9} lg={9}>
-                                                    <FormLabel><Typography variant="pnspsFormParagraph">{FormatUtils.currencyFormat(fee)}</Typography></FormLabel>
+                                                    <FormControl variant="outlined" fullWidth disabled>
+                                                        <OutlinedInput
+                                                            size="small"
+                                                            value={FormatUtils.currencyFormat(fee)}
+                                                            sx={{
+                                                                "& .MuiInputBase-input.Mui-disabled": {
+                                                                    WebkitTextFillColor: "#000000",
+                                                                    background: "#f8f8f8",
+                                                                },
+                                                            }}
+                                                        />
+                                                    </FormControl>
                                                 </Grid>
                                             </Grid>
                                         </Grid>
@@ -618,7 +629,18 @@ const ApplicationDetailCard = (
                                             <FormLabel><Typography variant="pnspsFormParagraph"><FormattedMessage id="careOf" />:</Typography></FormLabel>
                                         </Grid>
                                         <Grid item xs={12} md={9} lg={9}>
-                                            <Typography variant="pnspsFormParagraph">{currentApplicationDetailData.careOf}</Typography>
+                                            <FormControl variant="outlined" sx={{ width: '100%' }} disabled>
+                                                <OutlinedInput
+                                                    size="small"
+                                                    value={currentApplicationDetailData.careOf}
+                                                    sx={{
+                                                        "& .MuiInputBase-input.Mui-disabled": {
+                                                            WebkitTextFillColor: "#000000",
+                                                            background: "#f8f8f8",
+                                                        },
+                                                    }}
+                                                />
+                                            </FormControl>
                                         </Grid>
                                     </Grid>
                                 </Grid> : null
@@ -632,7 +654,18 @@ const ApplicationDetailCard = (
                                         </Typography></FormLabel>
                                     </Grid>
                                     <Grid item xs={12} md={9} lg={9}>
-                                        <Typography variant="pnspsFormParagraph">{currentApplicationDetailData.remarks}</Typography>
+                                        <FormControl variant="outlined" sx={{ width: '100%' }} disabled>
+                                            <OutlinedInput
+                                                size="small"
+                                                value={currentApplicationDetailData.remarks}
+                                                sx={{
+                                                    "& .MuiInputBase-input.Mui-disabled": {
+                                                        WebkitTextFillColor: "#000000",
+                                                        background: "#f8f8f8",
+                                                    },
+                                                }}
+                                            />
+                                        </FormControl>
                                     </Grid>
                                 </Grid>
                             </Grid>

src/pages/iAmSmart/AuthCallback/index.js

@@ -45,27 +45,27 @@ const Index = () => {
                           role: responseData.role,
                           abilities: responseData.abilities,
                           creditor: responseData.creditor,
-                          locale: responseData.preferLocale,
+                          //locale: responseData.preferLocale,
                           //avatar: require('src/assets/images/users/avatar-3.png').default,
                         }
-                        const data = { ...userData, accessToken: responseData.accessToken, refreshToken: responseData.refreshToken }
-                        if(responseData.type === "GLD"){
-                            // setLocale("en");
-                            localStorage.setItem('locale','en');
-                        }else{
-                            if (responseData.preferLocale ==="zh_HK"){
-                                // setLocale("zh-HK");
-                                localStorage.setItem('locale','zh-HK');
-                            }
-                            if (responseData.preferLocale ==="zh-CN"){
-                                // setLocale("zh-CN");
-                                localStorage.setItem('locale','zh-CN');
-                            }
-                            if (response.data.preferLocale ==="en"){
-                                // setLocale("zh-CN");
-                                localStorage.setItem('locale','en');
-                            }
-                        }
+                         const data = { ...userData, accessToken: responseData.accessToken, refreshToken: responseData.refreshToken }
+                        // if(responseData.type === "GLD"){
+                        //     // setLocale("en");
+                        //     localStorage.setItem('locale','en');
+                        // }else{
+                        //     if (responseData.preferLocale ==="zh_HK"){
+                        //         // setLocale("zh-HK");
+                        //         localStorage.setItem('locale','zh-HK');
+                        //     }
+                        //     if (responseData.preferLocale ==="zh-CN"){
+                        //         // setLocale("zh-CN");
+                        //         localStorage.setItem('locale','zh-CN');
+                        //     }
+                        //     if (response.data.preferLocale ==="en"){
+                        //         // setLocale("zh-CN");
+                        //         localStorage.setItem('locale','en');
+                        //     }
+                        // }
                         dispatch(handleLogin(data))
                         navigate('/dashboard');
                 },