added team model, loading user with team

src/user/UserMenu.tsx

@@ -1,9 +1,10 @@
-import { Avatar, Button, PaletteColor, Theme, Typography, useTheme } from "@mui/material";
+import { Avatar, Box, Button, PaletteColor, Theme, Typography, useTheme } from "@mui/material";
 import { useGlobalState } from "../providers/StateContainer";
 import { getSecondaryColour, getSignatureAccentColour } from "../services/whiteLabel";
 import { makeStyles } from "@mui/styles";
 import { Person } from "@mui/icons-material";
 import { useEffect } from "react";
+import UserTeamName from "./UserTeamName";
 
 const useStyles = makeStyles((theme: Theme) => ({
   userAvatar: {
@@ -38,7 +39,7 @@ interface Props {
 export default function UserMenu(props: Props) {
 
     const { toggleTheme } = props;
-    const [{ user }] = useGlobalState();
+    const [{ user, team }] = useGlobalState();
     const classes = useStyles();
     const theme = useTheme();
 
@@ -47,6 +48,7 @@ export default function UserMenu(props: Props) {
     const hasAdmin = user.hasFeature ? user.hasFeature("admin") : false;
     const allowedToCopyToken = user.allowedTo("copy-token");
     const hasTeams = user.hasFeature ? user.hasFeature("teams") : false;
+    console.log(hasTeams)
     // const hasBilling = user.settings.useTeam
     //   ? userTeamPermissions.includes(pond.Permission.PERMISSION_BILLING)
     //   : true;
@@ -62,17 +64,10 @@ export default function UserMenu(props: Props) {
           aria-haspopup="true"
           // onClick={openUserMenu}
           className={classes.profileButton}>
-          <div style={{ display: "flex", flexDirection: "column" }}>
-            <Typography className={classes.profileName} variant="button">
-              {name}
-            </Typography>
-            {/* {team.settings.name && hasTeams && (
-              <Typography className={classes.profileName} variant="button">
-                ({team.settings.name})
-              </Typography>
-            )} */}
-          </div>
-          <div style={{ marginLeft: theme.spacing(1) }}>
+          <Box style={{ display: "flex", flexDirection: "column" }}>
+            <UserTeamName user={user} team={team} />
+          </Box>
+          <Box style={{ marginLeft: theme.spacing(1) }}>
             {/* {picture && hasTeams ? (
               <div>
                 <UserAvatar
@@ -95,10 +90,10 @@ export default function UserMenu(props: Props) {
               </Avatar>
             ) : ( */}
               <Avatar alt={name} src={picture} className={classes.userAvatar}>
-                {/* <Person /> */}
+                <Person />
               </Avatar>
             {/* )} */}
-          </div>
+          </Box>
         </Button>
     )
 }