feat: improve account choice experience (#1244)

Resolves #1243

---



https://github.com/brave/ads-ui/assets/48930920/42aaa98c-2b10-42eb-b7f7-ba994b48e89e

src/components/AppBar/LandingPageAppBar.tsx

@@ -14,14 +14,14 @@ import brave from "@/assets/images/full-brave-brand.svg";
 import braveDark from "@/assets/images/full-brave-brand-black.svg";
 import { Link as RouterLink, useRouteMatch } from "react-router-dom";
 import { useIsAuthenticated } from "@/auth/hooks/queries/useIsAuthenticated";
-import { useSignOut } from "@/auth/hooks/mutations/useSignOut";
 import { useIsMobile } from "@/hooks/useIsMobile";
 import { msg, Trans } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
 import { SupportMenu } from "@/components/Drawer/SupportMenu";
 import MenuIcon from "@mui/icons-material/Menu";
 import { useState } from "react";
 import { PageLink } from "@/components/AppBar/PageLink";
+import { AccountMenu } from "@/components/Navigation/AccountMenu";
 
 export function LandingPageAppBar() {
   const match = useRouteMatch();
@@ -128,17 +128,18 @@ export function LandingPageAppBar() {
 }
 
 function AuthedButton(props: { isAuthenticated?: boolean }) {
-  const { signOut } = useSignOut();
+  if (props.isAuthenticated) {
+    return <AccountMenu />;
+  }
 
   return (
     <Button
       variant="contained"
       size="large"
       component={RouterLink}
-      to={!props.isAuthenticated ? "/auth/link" : "/"}
-      onClick={props.isAuthenticated ? () => signOut() : undefined}
+      to="/auth/link"
     >
-      {props.isAuthenticated ? <Trans>Sign out</Trans> : <Trans>Log in</Trans>}
+      <Trans>Log in</Trans>
     </Button>
   );
 }
@@ -187,10 +188,14 @@ function MobileMenu(props: {
       >
         <MenuItem
           component={RouterLink}
-          to={!props.isAuthenticated ? "/auth/link" : "/"}
+          to={!props.isAuthenticated ? "/auth/link" : "/user/main"}
         >
           <Typography variant={"body2"} color="text.primary">
-            <Trans>Log in</Trans>
+            {props.isAuthenticated ? (
+              <Trans>Dashboard</Trans>
+            ) : (
+              <Trans>Log in</Trans>
+            )}
           </Typography>
         </MenuItem>
         <Divider />

src/components/Navigation/AccountMenu.tsx

@@ -0,0 +1,139 @@
+import Box from "@mui/material/Box";
+import Avatar from "@mui/material/Avatar";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import Divider from "@mui/material/Divider";
+import IconButton from "@mui/material/IconButton";
+import Settings from "@mui/icons-material/Settings";
+import { useState } from "react";
+import { useUser } from "@/auth/hooks/queries/useUser";
+import { Button, Tooltip, Typography } from "@mui/material";
+import { useAdvertiser } from "@/auth/hooks/queries/useAdvertiser";
+import { Link as RouterLink } from "react-router-dom";
+import { setActiveAdvertiser } from "@/auth/util/index";
+import Logout from "@mui/icons-material/Logout";
+import { useSignOut } from "@/auth/hooks/mutations/useSignOut";
+import { useAuthContext } from "@/auth/context/auth.hook";
+import { Trans } from "@lingui/macro";
+
+const colors = ["red", "green", "orange", "blue"];
+const colorByIndex = (index: number) => colors[index % colors.length];
+
+export function AccountMenu() {
+  const { signOut } = useSignOut();
+  const user = useUser();
+  const { advertiser, advertisers } = useAdvertiser();
+  const { setSessionUser } = useAuthContext();
+
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const nonCurrentAdvertisers = advertisers.filter(
+    (a) => a.id !== advertiser.id,
+  );
+  return (
+    <>
+      <Tooltip title={<Trans>Account</Trans>} placement="bottom-start">
+        <IconButton onClick={(e) => setAnchorEl(e.currentTarget)} size="small">
+          <Avatar sx={{ width: 43, height: 43, bgcolor: "#fe5907" }}>
+            {advertiser.name.substring(0, 1)}
+          </Avatar>
+        </IconButton>
+      </Tooltip>
+      <Menu
+        anchorEl={anchorEl}
+        id="account-menu"
+        open={open}
+        onClose={() => setAnchorEl(null)}
+        onClick={() => setAnchorEl(null)}
+        transformOrigin={{ horizontal: "right", vertical: "top" }}
+        anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
+        slotProps={{
+          paper: {
+            elevation: 0,
+            sx: {
+              minWidth: 275,
+              p: 2,
+              borderRadius: "16px",
+              overflow: "visible",
+              // eslint-disable-next-line lingui/no-unlocalized-strings
+              filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
+              mt: 1,
+              "& .MuiAvatar-root": {
+                width: 24,
+                height: 24,
+                ml: -0.5,
+                fontSize: 14,
+              },
+            },
+          },
+        }}
+      >
+        <Box display="flex" flexDirection="column" mb={1.5}>
+          <Typography variant="subtitle2" textAlign="center">
+            {user.email}
+          </Typography>
+          <Typography
+            textAlign="center"
+            fontSize="1.375rem"
+            fontWeight={400}
+            mt={2}
+          >
+            <Trans>Hi</Trans>, {user.fullName?.split(" ")[0]}!
+          </Typography>
+          <Button
+            variant="outlined"
+            color="primary"
+            sx={{ mt: 1, maxWidth: 150, alignSelf: "center" }}
+            size={"small"}
+            component={RouterLink}
+            to="/user/main/profile"
+          >
+            <Trans>View profile</Trans>
+          </Button>
+          <Typography variant="body2" mt={2}>
+            <Trans>Account</Trans>:
+          </Typography>
+          <Typography variant="body1" fontWeight={410}>
+            {advertiser?.name}
+          </Typography>
+        </Box>
+        <Divider />
+        {nonCurrentAdvertisers.length > 0 && (
+          <Box mt={1} display="flex" justifyContent="space-between">
+            <Trans>Other accounts</Trans>
+            <IconButton
+              size="small"
+              sx={{ ml: 1 }}
+              component={RouterLink}
+              to="/user/main/settings"
+            >
+              <Settings fontSize="small" />
+            </IconButton>
+          </Box>
+        )}
+        {nonCurrentAdvertisers.map((a, idx) => (
+          <MenuItem
+            onClick={() => {
+              setActiveAdvertiser(a.id);
+              setSessionUser({ ...user, id: user.userId, advertisers } as any);
+            }}
+          >
+            <ListItemIcon>
+              <Avatar sx={{ bgcolor: colorByIndex(idx) }}>
+                {a.name.substring(0, 1)}
+              </Avatar>
+            </ListItemIcon>
+            {a.name}
+          </MenuItem>
+        ))}
+        <MenuItem onClick={() => signOut()}>
+          <ListItemIcon>
+            <Logout fontSize="small" />
+          </ListItemIcon>
+          <Trans>Logout</Trans>
+        </MenuItem>
+      </Menu>
+    </>
+  );
+}

src/components/Navigation/Navbar.tsx

@@ -1,17 +1,15 @@
-import { AppBar, Button, Divider, Stack, Toolbar } from "@mui/material";
+import { AppBar, Divider, Stack, Toolbar } from "@mui/material";
 
 import { DraftMenu } from "@/components/Navigation/DraftMenu";
 import ads from "@/assets/images/logo.svg";
 import { useAdvertiser } from "@/auth/hooks/queries/useAdvertiser";
-import { useSignOut } from "@/auth/hooks/mutations/useSignOut";
 import { NewCampaignButton } from "@/components/Navigation/NewCampaignButton";
 import { UploadImage } from "@/components/Assets/UploadImage";
 import { useHistory } from "react-router-dom";
 import { NewCreativeButton } from "@/components/Navigation/NewCreativeButton";
-import { Trans } from "@lingui/macro";
+import { AccountMenu } from "@/components/Navigation/AccountMenu";
 
 export function Navbar() {
-  const { signOut } = useSignOut();
   const { advertiser } = useAdvertiser();
   const history = useHistory();
 
@@ -49,9 +47,7 @@ export function Navbar() {
         </Stack>
         <div style={{ flexGrow: 1 }} />
         {buttons.find((b) => history.location.pathname === b.route)?.component}
-        <Button variant="outlined" size="medium" onClick={() => signOut()}>
-          <Trans>Sign out</Trans>
-        </Button>
+        <AccountMenu />
       </Toolbar>
     </AppBar>
   );