Skip to content

Commit

Permalink
feat: improve account choice experience (#1244)
Browse files Browse the repository at this point in the history
  • Loading branch information
IanKrieger authored Jul 1, 2024
1 parent 0f31d8a commit 9ced10e
Show file tree
Hide file tree
Showing 9 changed files with 863 additions and 692 deletions.
19 changes: 12 additions & 7 deletions src/components/AppBar/LandingPageAppBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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>
);
}
Expand Down Expand Up @@ -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 />
Expand Down
139 changes: 139 additions & 0 deletions src/components/Navigation/AccountMenu.tsx
Original file line number Diff line number Diff line change
@@ -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>
</>
);
}
10 changes: 3 additions & 7 deletions src/components/Navigation/Navbar.tsx
Original file line number Diff line number Diff line change
@@ -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();

Expand Down Expand Up @@ -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>
);
Expand Down
Loading

0 comments on commit 9ced10e

Please sign in to comment.