Platform Banner extended to show terms and privacy

src/core/i18n/en/translation.en.json

@@ -33,8 +33,8 @@
     ]
   },
   "releaseNotes": {
-    "title": "<big>🎉 Platform update!</big> <small>We have some exciting news for you… Click here to read all about it!</small>",
-    "url": "/forum/releases/latest"
+    "title": "<small><icon/>Our <terms>Terms of Service</terms> and <privacy>Privacy Policy</privacy> have been updated. Click on the titles to review them, or dismiss this notification.</small>",
+    "url": "termsUpdateOct.24?NOT_CLICKABLE"
   },
   "cookie": {
     "consent": "By clicking \"Accept All Cookies\", you agree to the storing of cookies on your device to enhance site navigation and analyze site usage.",

src/core/ui/content/DashboardBanner.tsx

@@ -1,24 +1,25 @@
-import PageContentBlock from './PageContentBlock';
 import React from 'react';
+import PageContentBlock from './PageContentBlock';
 import Gutters from '../grid/Gutters';
 import RouterLink, { RouterLinkProps } from '../link/RouterLink';
-import { BoxProps, IconButton } from '@mui/material';
+import { Box, BoxProps, IconButton } from '@mui/material';
 import { CloseOutlined } from '@mui/icons-material';
 import { gutters } from '../grid/utils';
 
 interface DashboardBannerProps extends RouterLinkProps {
   onClose?: () => void;
+  isLink?: boolean;
   containerProps?: BoxProps;
 }
 
-const DashboardBanner = ({ children, onClose, containerProps, ...props }: DashboardBannerProps) => {
+const DashboardBanner = ({ children, onClose, containerProps, isLink = true, ...props }: DashboardBannerProps) => {
   return (
     <PageContentBlock row accent disablePadding sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
-      <RouterLink {...props} sx={{ flexGrow: 1 }}>
+      <Box {...props} sx={{ flexGrow: 1 }} component={isLink ? RouterLink : Box}>
         <Gutters row flexWrap="wrap" {...containerProps}>
           {children}
         </Gutters>
-      </RouterLink>
+      </Box>
       {onClose && (
         <IconButton color="primary" onClick={onClose} sx={{ marginX: gutters(0.5) }}>
           <CloseOutlined />

src/main/topLevelPages/myDashboard/releaseNotesBanner/ReleaseNotesBanner.md

@@ -0,0 +1,15 @@
+### ReleaseNotesBanner
+
+##### The banner visibility logic depends on:
+
+1. platform.latestReleaseDiscussion from LatestReleaseDiscussion query;
+2. the `releaseNotes.url` value from the translations (it's added to the local storage once closed, so make sure it's unique);
+   1. note that you can control the banner wrapper to be static (not clickable) by passing an optional parameter 'NOT_CLICKABLE' in the url value e.g. `termsUpdateOct.24?NOT_CLICKABLE`; The default behaviour is clickable navigating to the URL value;
+
+##### Regarding formatting you can use the following tags:
+
+- `<small></small>`
+- `<big></big>`
+- `<terms></terms>`
+- `<privacy></privacy>`
+- `<icon />` - currently displaying CampaignOutlinedIcon

src/main/topLevelPages/myDashboard/releaseNotesBanner/ReleaseNotesBanner.tsx

@@ -1,27 +1,38 @@
 import { Trans, useTranslation } from 'react-i18next';
+import CampaignOutlinedIcon from '@mui/icons-material/CampaignOutlined';
 import { BlockTitle, Caption } from '../../../../core/ui/typography';
 import React from 'react';
 import DashboardBanner from '../../../../core/ui/content/DashboardBanner';
 import useReleaseNotes from '../../../../domain/platform/metadata/useReleaseNotes';
+import RouterLink from '../../../../core/ui/link/RouterLink';
+import { useConfig } from '../../../../domain/platform/config/useConfig';
+
+const URL_NOT_CLICKABLE_MARKER = 'NOT_CLICKABLE';
 
 const ReleaseNotesBanner = () => {
   const { t } = useTranslation();
+  const { locations } = useConfig();
 
   const releaseNotesUrl = t('releaseNotes.url');
 
   const { open, onClose } = useReleaseNotes(releaseNotesUrl);
 
+  const notClickable = releaseNotesUrl.includes(URL_NOT_CLICKABLE_MARKER);
+
   if (!open) {
     return null;
   }
 
   return (
-    <DashboardBanner to={releaseNotesUrl} onClose={onClose}>
+    <DashboardBanner to={releaseNotesUrl} isLink={!notClickable} onClose={onClose}>
       <Trans
         i18nKey="releaseNotes.title"
         components={{
+          icon: <CampaignOutlinedIcon fontSize="small" sx={{ marginRight: '8px', verticalAlign: 'bottom' }} />,
           big: <BlockTitle />,
           small: <Caption />,
+          terms: <RouterLink to={locations?.terms ?? ''} underline="always" />,
+          privacy: <RouterLink to={locations?.privacy ?? ''} underline="always" />,
         }}
       />
     </DashboardBanner>