From e638d5fd0c55196a58cb75403e97c53a1c8a21c5 Mon Sep 17 00:00:00 2001
From: anna <anna.ho@2fi-solutions.com.hk>
Date: Thu, 11 Jan 2024 17:29:15 +0800
Subject: [PATCH] update header

---
 src/layout/MainLayout/Header/index.js | 101 ++++++++++++++------------
 src/utils/Utils.js                    |   5 ++
 2 files changed, 61 insertions(+), 45 deletions(-)

diff --git a/src/layout/MainLayout/Header/index.js b/src/layout/MainLayout/Header/index.js
index 10c8499..fa31438 100644
--- a/src/layout/MainLayout/Header/index.js
+++ b/src/layout/MainLayout/Header/index.js
@@ -41,7 +41,7 @@ import AdminLogo from 'components/AdminLogo';
 import MobileLogo from 'components/MobileLogo';
 import Profile from './HeaderContent/Profile';
 import "assets/style/navbarStyles.css";
-import { isUserLoggedIn, isGLDLoggedIn, isPrimaryLoggedIn } from "utils/Utils";
+import { isUserLoggedIn, isGLDLoggedIn, isPrimaryLoggedIn, isCreditorLoggedIn } from "utils/Utils";
 import { handleLogoutFunction } from 'auth/index';
 
 // assets
@@ -49,7 +49,7 @@ import { handleLogoutFunction } from 'auth/index';
 // import { AppBar } from '../../../../node_modules/@mui/material/index';
 import { Link } from "react-router-dom";
 import LocaleSelector from "./HeaderContent/LocaleSelector";
-import {FormattedMessage} from "react-intl";
+import { FormattedMessage } from "react-intl";
 
 const drawerWidth = 240;
 
@@ -83,13 +83,13 @@ function Header(props) {
           </Link>
         </li>
         <li>
-          <Link className="application" to='/application/search'><Typography style={{ opacity: 0.9 }}variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Application</Typography></Link>
+          <Link className="application" to='/application/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Application</Typography></Link>
         </li>
         <li>
           <Link className="proof" to='/proof/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>Proof</Typography></Link>
         </li>
         <li>
-          <Link className="client" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>Payment</Typography><KeyboardArrowDownIcon sx={{fontSize: '1.0rem'}} /></Link>
+          <Link className="client" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>Payment</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1.0rem' }} /></Link>
           <ul className='dropdown'>
             <li>
               <Link className="payment" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>Payment Record</Typography></Link>
@@ -106,22 +106,22 @@ function Header(props) {
           </ul>
         </li>
         <li>
-          <Link className="client" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>Client</Typography><KeyboardArrowDownIcon sx={{fontSize: '1.0rem'}}/></Link>
+          <Link className="client" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>Client</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1.0rem' }} /></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>
+              <Link className="userSearchview" to='/userSearchview'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Users (GLD)</Typography></Link>
             </li>
             <li>
-              <Link className="indUser" to='/indUser'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2,mt: 1, mb: 1}}>Users (Individual)</Typography></Link>
+              <Link className="indUser" to='/indUser'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Users (Individual)</Typography></Link>
             </li>
             <li>
-              <Link className="orgUser" to='/orgUser'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2,mt: 1, mb: 1 }}>Users (Organisation)</Typography></Link>
+              <Link className="orgUser" to='/orgUser'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Users (Organisation)</Typography></Link>
             </li>
             <li>
-              <Link className="org" to='/org'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2,mt: 1, mb: 1 }}>Organisation</Typography></Link>
+              <Link className="org" to='/org'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Organisation</Typography></Link>
             </li>
             <li>
-              <Link className="usergroupSearchview" to='/usergroupSearchview'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2,mt: 1, mb: 1}}>User Group</Typography></Link>
+              <Link className="usergroupSearchview" to='/usergroupSearchview'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>User Group</Typography></Link>
             </li>
 
           </ul>
@@ -137,27 +137,30 @@ function Header(props) {
       <div id="individualUserContent">
         <li>
           <Link className="dashboard" to='/dashboard'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
-            <FormattedMessage id="mainPage"/>
+            <FormattedMessage id="mainPage" />
           </Typography></Link>
         </li>
         <li>
           <Link className="myDocumet" to='/publicNotice'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
-            <FormattedMessage id="myPublicNotice"/>
+            <FormattedMessage id="myPublicNotice" />
           </Typography></Link>
         </li>
         <li>
           <Link className="documentRecord" to='/proof/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
-            <FormattedMessage id="proofRecord"/>
+            <FormattedMessage id="proofRecord" />
           </Typography></Link>
         </li>
         <li>
-          {isPrimaryLoggedIn() ?
+          {isCreditorLoggedIn() ?
             <>
-              <Link className="paymentRecord"><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>付款記錄</Typography></Link>
+              <Link className="paymentRecord">
+                <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>付款記錄</Typography>
+                <KeyboardArrowDownIcon sx={{ fontSize: '1.0rem' }} />
+              </Link>
               <ul className='dropdown'>
                 <li>
                   <Link className="manageOrgUser" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
-                    <FormattedMessage id="onlinePaymentHistory"/>
+                    <FormattedMessage id="onlinePaymentHistory" />
                   </Typography></Link>
                 </li>
                 <li>
@@ -167,30 +170,38 @@ function Header(props) {
             </>
             :
             <Link className="manageOrgUser" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
-              <FormattedMessage id="onlinePaymentHistory"/>
+              <FormattedMessage id="onlinePaymentHistory" />
             </Typography></Link>
           }
         </li>
         <li>
-          <Link className="userSetting" >
-            <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }} onClick={(event) => console.log(event)}>
-              <FormattedMessage id="setting"/>
-            </Typography>
-            <KeyboardArrowDownIcon sx={{fontSize: '1.0rem'}}/>
-          </Link>
-          {!isPrimaryLoggedIn() ?
-            <ul className='dropdown'>
 
-              <li>
-                <Link className="manageOrgUser" to='setting/manageUser'>
-                  <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
-                    <FormattedMessage id="companyOrUserRecord"/>
-                  </Typography>
-                </Link>
-              </li>
-            </ul>
+          {isPrimaryLoggedIn() ?
+            <>
+              <Link className="userSetting" >
+                <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }} onClick={(event) => console.log(event)}>
+                  <FormattedMessage id="setting" />
+                </Typography>
+                <KeyboardArrowDownIcon sx={{ fontSize: '1.0rem' }} />
+              </Link>
+              <ul className='dropdown'>
+                <li>
+                  <Link className="manageOrgUser" to='setting/manageUser'>
+                    <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
+                      <FormattedMessage id="companyOrUserRecord" />
+                    </Typography>
+                  </Link>
+                </li>
+              </ul>
+            </>
             :
-            <></>
+            <>
+              <Link className="userSetting" >
+                <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }} onClick={(event) => console.log(event)}>
+                  <FormattedMessage id="setting" />
+                </Typography>
+              </Link>
+            </>
           }
         </li>
         {/* <li>
@@ -204,14 +215,14 @@ function Header(props) {
       <li>
         <Link className="login" to='/login'>
           <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
-            <FormattedMessage id="login"/>
+            <FormattedMessage id="login" />
           </Typography>
         </Link>
       </li>
       <li>
         <Link className="register" to='/register'>
           <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
-            <FormattedMessage id="register"/>
+            <FormattedMessage id="register" />
           </Typography>
         </Link>
       </li>
@@ -307,7 +318,7 @@ function Header(props) {
                   <Stack direction="row" justifyContent="flex-start" alignItems="center">
                     <MobileLogo />
                     <span id="mobileTitle" >
-                      <FormattedMessage id="PNSPS"/>
+                      <FormattedMessage id="PNSPS" />
                     </span>
                   </Stack>
                 </Box>
@@ -328,10 +339,10 @@ function Header(props) {
                 <Grid item>
                   <Grid container direction="row" >
                     {
-                      isGLDLoggedIn()?
-                      <Grid item/>
-                          :
-                      <LocaleSelector />
+                      isGLDLoggedIn() ?
+                        <Grid item />
+                        :
+                        <LocaleSelector />
                     }
                     <Profile />
                   </Grid>
@@ -350,7 +361,7 @@ function Header(props) {
               keepMounted: true, // Better open performance on mobile.
             }}
             sx={{
-              display: {sm: 'block', md: 'none' },
+              display: { sm: 'block', md: 'none' },
               '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
             }}
           >
@@ -372,7 +383,7 @@ function Header(props) {
                   <Logo />
                   <Stack justifyContent="flex-start" alignItems="center">
                     <span id="systemTitle">
-                      <FormattedMessage id="PNSPS"/>
+                      <FormattedMessage id="PNSPS" />
                     </span>
                   </Stack>
                 </Stack>
@@ -392,7 +403,7 @@ function Header(props) {
                   <MobileLogo />
                   <Stack justifyContent="flex-start" alignItems="center">
                     <span id="mobileTitle">
-                      <FormattedMessage id="PNSPS"/>
+                      <FormattedMessage id="PNSPS" />
                     </span>
                   </Stack>
 
@@ -412,7 +423,7 @@ function Header(props) {
                 <ul id="navbar" width="100%" >
                   {logoutContent}
                 </ul>
-                <LocaleSelector/>
+                <LocaleSelector />
 
                 {/* <Profile /> */}
               </Stack>
diff --git a/src/utils/Utils.js b/src/utils/Utils.js
index bb33e6f..7dfe0eb 100644
--- a/src/utils/Utils.js
+++ b/src/utils/Utils.js
@@ -83,6 +83,11 @@ export const isPrimaryLoggedIn = () =>{
         return JSON.parse(localStorage.getItem('userData')).role === 'primary'
     }
 } 
+export const isCreditorLoggedIn = () =>{
+    if (localStorage.getItem('userData') != null){
+        return JSON.parse(localStorage.getItem('userData')).creditor
+    }
+} 
 /**
  ** This function is used for demo purpose route navigation
  ** In real app you won't need this function because your app will navigate to same route for each users regardless of ability