feat: updated Official Feed badge to allow for community feeds

messages/en.json

@@ -246,6 +246,9 @@
     "officialFeed": "Official Feed",
     "officialFeedTooltip": "The transit provider has confirmed this feed should be shared with riders. This has been confirmed either by the transit provider providing the feed on their website or from personalized confirmation with the Mobility Database team.",
     "officialFeedTooltipShort": "Verified feed: Confirmed by the transit provider or the Mobility Database team for rider use.",
+    "communityFeed": "Community Feed",
+    "communityFeedTooltip": "This feed is not created on behalf on the transit authority. It may have been created by a community member or third party.",
+    "communityFeedTooltipShort": "Community feed: Not officially confirmed by the transit provider.",
     "seeDetailPageProviders": "See detail page to view {providersCount} others",
     "openFullQualityReport": "Open Full Quality Report",
     "subscribe": "Subscribe to get feed update notifications",

messages/fr.json

@@ -246,6 +246,9 @@
     "officialFeed": "Official Feed",
     "officialFeedTooltip": "The transit provider has confirmed this feed should be shared with riders. This has been confirmed either by the transit provider providing the feed on their website or from personalized confirmation with the Mobility Database team.",
     "officialFeedTooltipShort": "Verified feed: Confirmed by the transit provider or the Mobility Database team for rider use.",
+    "communityFeed": "Community Feed",
+    "communityFeedTooltip": "This feed has not been officially confirmed by the transit provider. It may have been created by the community or a third party.",
+    "communityFeedTooltipShort": "Community feed: Not officially confirmed by the transit provider.",
     "seeDetailPageProviders": "See detail page to view {providersCount} others",
     "openFullQualityReport": "Open Full Quality Report",
     "subscribe": "S'abonner",

src/app/components/FeedVerificationChip.tsx

@@ -0,0 +1,76 @@
+import { Chip, Tooltip } from '@mui/material';
+import { useTranslations } from 'next-intl';
+import VerifiedIcon from '@mui/icons-material/Verified';
+import GroupsIcon from '@mui/icons-material/Groups';
+
+interface FeedVerificationChipProps {
+  isLongDisplay?: boolean;
+  status?: boolean;
+}
+
+const officialBadgeStyle = {
+  background: 'linear-gradient(25deg, var(--mui-palette-primary-light), var(--mui-palette-primary-dark))',
+  color: 'white',
+};
+
+export default function FeedVerificationChip({
+  isLongDisplay = true,
+  status,
+}: FeedVerificationChipProps): React.ReactElement | null {
+  const t = useTranslations('feeds');
+
+  if (status == undefined) {
+    return null;
+  }
+
+  if (status === false) {
+    return isLongDisplay ? (
+      <Tooltip title={t('communityFeedTooltip')} placement='top'>
+        <Chip
+          sx={{ opacity: 0.8 }}
+          icon={<GroupsIcon></GroupsIcon>}
+          label={t('communityFeed')}
+          variant='filled'
+        ></Chip>
+      </Tooltip>
+    ) : (
+      <Tooltip title={t('communityFeedTooltipShort')} placement='top'>
+        <GroupsIcon
+          sx={{
+            display: 'block',
+            ml: 0,
+            mr: 2,
+            opacity: 0.6,
+            backgroundColor: 'var(--mui-palette-grey-400)',
+            color: 'var(--mui-palette-text-primary)',
+            borderRadius: '50%',
+            padding: '0.2rem',
+          }}
+        ></GroupsIcon>
+      </Tooltip>
+    );
+  }
+
+  return isLongDisplay ? (
+    <Tooltip title={t('officialFeedTooltip')} placement='top'>
+      <Chip
+        sx={officialBadgeStyle}
+        icon={<VerifiedIcon sx={{ fill: 'white' }}></VerifiedIcon>}
+        label={t('officialFeed')}
+      ></Chip>
+    </Tooltip>
+  ) : (
+    <Tooltip title={t('officialFeedTooltipShort')} placement='top'>
+      <VerifiedIcon
+        sx={{
+          display: 'block',
+          borderRadius: '50%',
+          padding: '0.1rem',
+          ml: 0,
+          mr: 2,
+          ...officialBadgeStyle,
+        }}
+      ></VerifiedIcon>
+    </Tooltip>
+  );
+}

src/app/screens/Feed/FeedView.tsx

@@ -7,7 +7,7 @@
 
 // Components
 import FeedTitle from './components/FeedTitle';
-import OfficialChip from '../../components/OfficialChip';
+import FeedVerificationChip from '../../components/FeedVerificationChip';
 import DataQualitySummary from './components/DataQualitySummary';
 import FeedSummary from './components/FeedSummary';
 import FeedNavigationControls from './components/FeedNavigationControls';
@@ -194,14 +194,14 @@
             {feed?.data_type === 'gtfs' && (
               <DataQualitySummary
                 feedStatus={feed?.status}
-                isOfficialFeed={feed.official === true}
+                isOfficialFeed={feed.official}
                 latestDataset={latestDataset}
               />
             )}
 
             {feed?.data_type === 'gtfs_rt' && feed.official === true && (
               <Box sx={{ my: 1 }}>
-                <OfficialChip></OfficialChip>
+                <FeedVerificationChip status={feed.official}></FeedVerificationChip>
               </Box>
             )}
 

src/app/screens/Feed/components/DataQualitySummary.tsx

@@ -5,13 +5,13 @@ import { type components } from '../../../services/feeds/types';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import { WarningContentBox } from '../../../components/WarningContentBox';
 import { FeedStatusChip } from '../../../components/FeedStatus';
-import OfficialChip from '../../../components/OfficialChip';
+import FeedVerificationChip from '../../../components/FeedVerificationChip';
 import { getTranslations } from 'next-intl/server';
 import { getUserRemoteConfigValues } from '../../../../lib/remote-config.server';
 
 export interface DataQualitySummaryProps {
   feedStatus: components['schemas']['Feed']['status'];
-  isOfficialFeed: boolean;
+  isOfficialFeed: boolean | undefined;
   latestDataset: components['schemas']['GtfsDataset'] | undefined;
 }
 
@@ -36,7 +36,7 @@ export default async function DataQualitySummary({
         {config.enableFeedStatusBadge && (
           <FeedStatusChip status={feedStatus ?? ''}></FeedStatusChip>
         )}
-        {isOfficialFeed && <OfficialChip></OfficialChip>}
+        <FeedVerificationChip status={isOfficialFeed}></FeedVerificationChip>
         {latestDataset?.validation_report !== undefined &&
           latestDataset.validation_report !== null && (
             <>

src/app/screens/Feeds/AdvancedSearchTable.tsx

@@ -23,7 +23,7 @@
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import GtfsRtEntities from './GtfsRtEntities';
 import { getEmojiFlag, type TCountryCode } from 'countries-list';
-import OfficialChip from '../../components/OfficialChip';
+import FeedVerificationChip from '../../components/FeedVerificationChip';
 import { getFeatureComponentDecorators } from '../../utils/consts';
 import PopoverList from './PopoverList';
 import ProviderTitle from './ProviderTitle';
@@ -337,9 +337,7 @@
                     ></ProviderTitle>
                   </Typography>
 
-                  {feed.official === true && (
-                    <OfficialChip isLongDisplay={false}></OfficialChip>
-                  )}
+                  <FeedVerificationChip isLongDisplay={false} status={feed.official}></FeedVerificationChip>
                   {feed.data_type !== 'gbfs' && (
                     <FeedStatusIndicator
                       status={feed.status}

src/app/screens/Feeds/SearchTable.tsx

@@ -24,7 +24,7 @@
 import NextLinkComposed from 'next/link';
 import { useRouter } from '../../../i18n/navigation';
 import { getEmojiFlag, type TCountryCode } from 'countries-list';
-import OfficialChip from '../../components/OfficialChip';
+import FeedVerificationChip from '../../components/FeedVerificationChip';
 import ProviderTitle from './ProviderTitle';
 
 export interface SearchTableProps {
@@ -216,9 +216,7 @@
                       setAnchorEl(el);
                     }}
                   ></ProviderTitle>
-                  {feed.official === true && (
-                    <OfficialChip isLongDisplay={false}></OfficialChip>
-                  )}
+                  <FeedVerificationChip isLongDisplay={false} status={feed.official}></FeedVerificationChip>
                 </Box>
               </TableCell>
               <TableCell className='feed-column' component={Box}>