feat: add custom additional drawer link (#1586)

packages/web/src/components/Layout/index.tsx

@@ -7,8 +7,10 @@ import AppsIcon from '@mui/icons-material/Apps';
 import SwapCallsIcon from '@mui/icons-material/SwapCalls';
 import HistoryIcon from '@mui/icons-material/History';
 import NotificationsIcon from '@mui/icons-material/Notifications';
+import ArrowBackIosNew from '@mui/icons-material/ArrowBackIosNew';
 
 import * as URLS from 'config/urls';
+import useFormatMessage from 'hooks/useFormatMessage';
 import useVersion from 'hooks/useVersion';
 import AppBar from 'components/AppBar';
 import Drawer from 'components/Drawer';
@@ -41,46 +43,93 @@ const drawerLinks = [
 
 type GenerateDrawerBottomLinksOptions = {
   disableNotificationsPage: boolean;
-  loading: boolean;
   notificationBadgeContent: number;
+  additionalDrawerLink?: string;
+  additionalDrawerLinkText?: string;
+  additionalDrawerLinkIcon?: string;
+  formatMessage: ReturnType<typeof useFormatMessage>;
 };
 
-const generateDrawerBottomLinks = ({
+const generateDrawerBottomLinks = async ({
   disableNotificationsPage,
-  loading,
   notificationBadgeContent = 0,
+  additionalDrawerLink,
+  additionalDrawerLinkText,
+  formatMessage,
 }: GenerateDrawerBottomLinksOptions) => {
-  if (loading || disableNotificationsPage) {
-    return [];
+  const notificationsPageLinkObject = {
+    Icon: NotificationsIcon,
+    primary: formatMessage('settingsDrawer.notifications'),
+    to: URLS.UPDATES,
+    badgeContent: notificationBadgeContent,
+  };
+
+  const hasAdditionalDrawerLink =
+    additionalDrawerLink && additionalDrawerLinkText;
+
+  const additionalDrawerLinkObject = {
+    Icon: ArrowBackIosNew,
+    primary: additionalDrawerLinkText || '',
+    to: additionalDrawerLink || '',
+    target: '_blank' as const,
+  };
+
+  const links = [];
+
+  if (!disableNotificationsPage) {
+    links.push(notificationsPageLinkObject);
   }
 
-  return [
-    {
-      Icon: NotificationsIcon,
-      primary: 'settingsDrawer.notifications',
-      to: URLS.UPDATES,
-      badgeContent: notificationBadgeContent,
-    },
-  ];
+  if (hasAdditionalDrawerLink) {
+    links.push(additionalDrawerLinkObject);
+  }
+
+  return links;
+};
+
+type Link = {
+  Icon: React.ElementType;
+  primary: string;
+  target?: '_blank';
+  to: string;
+  badgeContent?: React.ReactNode;
 };
 
 export default function PublicLayout({
   children,
 }: PublicLayoutProps): React.ReactElement {
   const version = useVersion();
-  const { config, loading } = useConfig(['disableNotificationsPage']);
+  const { config, loading } = useConfig([
+    'disableNotificationsPage',
+    'additionalDrawerLink',
+    'additionalDrawerLinkText',
+  ]);
   const theme = useTheme();
+  const formatMessage = useFormatMessage();
+  const [bottomLinks, setBottomLinks] = React.useState<Link[]>([]);
   const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'));
   const [isDrawerOpen, setDrawerOpen] = React.useState(!matchSmallScreens);
 
   const openDrawer = () => setDrawerOpen(true);
   const closeDrawer = () => setDrawerOpen(false);
 
-  const drawerBottomLinks = generateDrawerBottomLinks({
-    notificationBadgeContent: version.newVersionCount,
-    loading,
-    disableNotificationsPage: config?.disableNotificationsPage as boolean,
-  });
+  React.useEffect(() => {
+    async function perform() {
+      const newBottomLinks = await generateDrawerBottomLinks({
+        notificationBadgeContent: version.newVersionCount,
+        disableNotificationsPage: config?.disableNotificationsPage as boolean,
+        additionalDrawerLink: config?.additionalDrawerLink as string,
+        additionalDrawerLinkText: config?.additionalDrawerLinkText as string,
+        formatMessage,
+      });
+
+      setBottomLinks(newBottomLinks);
+    }
+
+    if (loading) return;
+
+    perform();
+  }, [config, loading, version.newVersionCount]);
 
   return (
     <>
@@ -93,7 +142,7 @@ export default function PublicLayout({
       <Box sx={{ display: 'flex' }}>
         <Drawer
           links={drawerLinks}
-          bottomLinks={drawerBottomLinks}
+          bottomLinks={bottomLinks}
           open={isDrawerOpen}
           onOpen={openDrawer}
           onClose={closeDrawer}