Production Release 2024-07-02

.node-version

@@ -1 +1 @@
-20.14.0
+20.15.0

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@apollo/client": "3.10.5",
+    "@apollo/client": "3.10.6",
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
     "@fontsource/inter": "5.0.18",
@@ -20,12 +20,12 @@
     "@mui/icons-material": "5.15.20",
     "@mui/lab": "5.0.0-alpha.170",
     "@mui/material": "5.15.20",
-    "@mui/x-data-grid": "7.7.0",
-    "@mui/x-date-pickers": "7.7.0",
+    "@mui/x-data-grid": "7.7.1",
+    "@mui/x-date-pickers": "7.7.1",
     "bignumber.js": "9.1.2",
     "dayjs": "1.11.11",
     "formik": "2.4.6",
-    "graphql": "16.8.2",
+    "graphql": "16.9.0",
     "highcharts": "11.4.3",
     "highcharts-react-official": "3.2.1",
     "immer": "10.1.1",
@@ -78,15 +78,15 @@
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-lingui": "0.3.0",
-    "eslint-plugin-react": "7.34.2",
+    "eslint-plugin-react": "7.34.3",
     "eslint-plugin-react-hooks": "4.6.2",
     "husky": "9.0.11",
-    "knip": "5.19.0",
+    "knip": "5.22.2",
     "lint-staged": "15.2.7",
     "npm-run-all2": "6.2.0",
     "prettier": "3.3.2",
-    "typescript": "5.4.5",
-    "typescript-eslint": "7.13.0",
+    "typescript": "5.5.2",
+    "typescript-eslint": "7.13.1",
     "vite": "5.3.1",
     "vite-plugin-checker": "0.6.4",
     "vite-tsconfig-paths": "4.3.2",

renovate.json

@@ -7,7 +7,6 @@
     "npm:unpublishSafe",
     "helpers:pinGitHubActionDigests",
     "group:allNonMajor",
-    "group:allApollographql",
     "schedule:weekends"
   ],
   "labels": ["dependencies"],

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>
   );