transitfeeds redirect banner (#1509)

Author: Alessandro100

web-app/src/app/components/Header.tsx

@@ -13,6 +13,8 @@ import {
   Select,
   useTheme,
   Link,
+  Alert,
+  AlertTitle,
 } from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
@@ -26,7 +28,7 @@ import {
   gbfsMetricsNavItems,
 } from '../constants/Navigation';
 import type NavigationItem from '../interface/Navigation';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import { selectIsAuthenticated, selectUserEmail } from '../store/selectors';
 import LogoutConfirmModal from './LogoutConfirmModal';
@@ -44,9 +46,15 @@ import ThemeToggle from './ThemeToggle';
 import { useTranslation } from 'react-i18next';
 
 export default function DrawerAppBar(): React.ReactElement {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const hasTransitFeedsRedirectParam =
+    searchParams.get('utm_source') === 'transitfeeds';
   const theme = useTheme();
   const location = useLocation();
   const [mobileOpen, setMobileOpen] = React.useState(false);
+  const [hasTransitFeedsRedirect, setHasTransitFeedsRedirect] = React.useState(
+    hasTransitFeedsRedirectParam,
+  );
   const [openDialog, setOpenDialog] = React.useState(false);
   const [activeTab, setActiveTab] = React.useState('');
   const [navigationItems, setNavigationItems] = React.useState<
@@ -118,7 +126,7 @@ export default function DrawerAppBar(): React.ReactElement {
     <Box
       sx={{
         display: 'flex',
-        height: '64px',
+        height: hasTransitFeedsRedirect ? '115px' : '64px',
         mb: { xs: 2, md: 4 },
       }}
     >
@@ -399,7 +407,32 @@ export default function DrawerAppBar(): React.ReactElement {
             )}
           </Box>
         </Toolbar>
+        {hasTransitFeedsRedirect && (
+          <Alert
+            severity='warning'
+            onClose={() => {
+              setHasTransitFeedsRedirect(false);
+              if (hasTransitFeedsRedirectParam) {
+                searchParams.delete('utm_source');
+                setSearchParams(searchParams);
+              }
+            }}
+            sx={{ '.MuiAlert-message': { pb: { xs: 0, md: 1 } } }}
+          >
+            <AlertTitle>
+              You&apos;ve been redirected from TransitFeeds
+            </AlertTitle>
+            <Box
+              component={'span'}
+              sx={{ display: { xs: 'none', md: 'block' } }}
+            >
+              This page now lives on MobilityDatabase.org, where you&apos;ll
+              find the most up-to-date transit data.
+            </Box>
+          </Alert>
+        )}
       </AppBar>
+
       <nav>
         <Drawer
           container={container}

web-app/src/app/screens/Feeds/Feeds.styles.ts

@@ -13,15 +13,16 @@ export const chipHolderStyles: SxProps<Theme> = (theme) => ({
 export const stickyHeaderStyles = (props: {
   theme: Theme;
   isSticky: boolean;
+  headerBannerVisible: boolean;
 }): SxProps => {
   const styles: SxProps = {
     display: 'flex',
     alignItems: 'center',
     position: 'sticky',
     zIndex: 1,
     top: {
-      xs: '56px',
-      sm: '65px',
+      xs: props.headerBannerVisible ? '113px' : '56px',
+      md: props.headerBannerVisible ? '140px' : '65px',
     },
     background: props.theme.palette.background.default,
     transition: 'box-shadow 0.3s ease-in-out',

web-app/src/app/screens/Feeds/index.tsx

@@ -79,6 +79,9 @@ export default function Feed(): React.ReactElement {
   const feedsData = useSelector(selectFeedsData);
   const feedStatus = useSelector(selectFeedsStatus);
 
+  const hasTransitFeedsRedirectParam =
+    searchParams.get('utm_source') === 'transitfeeds';
+
   // features i/o
   const areNoDataTypesSelected =
     !selectedFeedTypes.gtfs &&
@@ -171,6 +174,9 @@ export default function Feed(): React.ReactElement {
     if (isOfficialFeedSearch) {
       newSearchParams.set('official', 'true');
     }
+    if (searchParams.get('utm_source') === 'transitfeeds') {
+      newSearchParams.set('utm_source', 'transitfeeds');
+    }
     if (searchParams.toString() !== newSearchParams.toString()) {
       setSearchParams(newSearchParams, { replace: false });
     }
@@ -318,7 +324,13 @@ export default function Feed(): React.ReactElement {
             </Typography>
           )}
         </Container>
-        <Box sx={stickyHeaderStyles({ theme, isSticky })}>
+        <Box
+          sx={stickyHeaderStyles({
+            theme,
+            isSticky,
+            headerBannerVisible: hasTransitFeedsRedirectParam,
+          })}
+        >
           <Container
             maxWidth={'xl'}
             component='form'