Most Read Badge on Homepages

src/app/components/Curation/CurationGrid/index.tsx

@@ -21,6 +21,7 @@ const CurationGrid = ({
   headingLevel,
   eventTrackingData,
   readTimeVariant,
+  mostReadItemId,
 }: CurationGridProps) => {
   const { isLite } = use(RequestContext);
 
@@ -79,6 +80,7 @@ const CurationGrid = ({
           {...commonProps}
           headingLevel={headingLevel}
           readTimeVariant={readTimeVariant}
+          mostReadItemId={mostReadItemId}
         />
       );
     }

src/app/components/Curation/CurationPromo/index.tsx

@@ -10,12 +10,11 @@
 import useClickTrackerHandler from '#app/hooks/useClickTrackerHandler';
 import isMediaType from '#app/lib/utilities/isMedia';
 import { ReadTime } from '#app/components/ReadTime';
+import { extractId } from '#app/pages/HomePage/HomePage';
 import VisuallyHiddenText from '../../VisuallyHiddenText';
 import { ServiceContext } from '../../../contexts/ServiceContext';
 import { RequestContext } from '../../../contexts/RequestContext';
-
 import LiveLabel from '../../LiveLabel';
-
 import styles from './index.styles';
 
 const CurationPromo = ({
@@ -33,6 +32,7 @@
   readTime,
   eventTrackingData,
   readTimeVariant,
+  mostReadItemId,
   position,
 }: Summary) => {
   const { isAmp, isLite } = use(RequestContext);
@@ -43,6 +43,7 @@
   const photoGalleryTranslation = path(['media', 'photogallery'], translations);
   const durationTranslation = path(['media', 'duration'], translations);
   const duration = moment.duration(mediaDuration, 'seconds');
+  const mostReadBadgeTranslation = translations.mostReadBadgeText || 'Hello';
 
   const separator = ',';
 
@@ -63,6 +64,9 @@
     experimentVariant: readTimeVariant,
   });
 
+  const getPromoItemId = extractId(id) ?? null;
+  const isMostReadStory = mostReadItemId && getPromoItemId === mostReadItemId;
+
   return (
     <Promo css={styles.promo} className="">
       {imageUrl && (
@@ -95,6 +99,9 @@
           </Promo.A>
         ) : (
           <Promo.A href={link} {...clickTrackerHandler}>
+            {isMostReadStory ? (
+              <div css={styles.mostReadBadge}>{mostReadBadgeTranslation}</div>
+            ) : null}
             {isLive ? <LiveLabel>{title}</LiveLabel> : title}
           </Promo.A>
         )}

src/app/components/Curation/HierarchicalGrid/index.styles.tsx

@@ -107,6 +107,32 @@
         },
       }),
     }),
+  mostReadBadgeLarge: ({ fontSizes, fontVariants, palette, spacings }: Theme) =>
+    css({
+      position: 'relative',
+      display: 'inline',
+      verticalAlign: '0.25rem',
+      backgroundColor: palette.POSTBOX,
+      color: palette.WHITE,
+      borderRadius: `${spacings.HALF}rem`,
+      ...fontSizes.pica,
+      ...fontVariants.sansBold,
+      padding: `${spacings.HALF}rem`,
+      marginInlineEnd: `${spacings.HALF}rem`,
+      height: '100%',
+    }),
+  mostReadBadgeSmall: ({ fontSizes, fontVariants, palette, spacings }: Theme) =>
+    css({
+      position: 'relative',
+      display: 'inline-flex',
+      backgroundColor: palette.POSTBOX,
+      color: palette.WHITE,
+      borderRadius: pixelsToRem(4),
+      ...fontSizes.minion,
+      ...fontVariants.sansBold,
+      padding: pixelsToRem(4),
+      marginInlineEnd: pixelsToRem(4),
+    }),
 };
 
 const DesktopBigPromo = css({

src/app/components/Curation/HierarchicalGrid/index.tsx

@@ -7,6 +7,7 @@ import moment from 'moment';
 import path from 'ramda/src/path';
 import isMediaType from '#app/lib/utilities/isMedia';
 import { ReadTime } from '#app/components/ReadTime';
+import { extractId } from '#app/pages/HomePage/HomePage';
 import useClickTrackerHandler from '#app/hooks/useClickTrackerHandler';
 import VisuallyHiddenText from '../../VisuallyHiddenText';
 import formatDuration from '../../../lib/utilities/formatDuration';
@@ -42,6 +43,7 @@ const HiearchicalGrid = ({
   isFirstCuration,
   eventTrackingData,
   readTimeVariant,
+  mostReadItemId,
 }: CurationGridProps) => {
   const { isAmp } = use(RequestContext);
   const { translations } = use(ServiceContext);
@@ -50,6 +52,9 @@ const HiearchicalGrid = ({
   const videoTranslation = path(['media', 'video'], translations);
   const photoGalleryTranslation = path(['media', 'photogallery'], translations);
   const durationTranslation = path(['media', 'duration'], translations);
+  const mostReadBadgeTranslation = (
+    translations.mostReadBadgeText || 'Most Read'
+  ).toUpperCase();
 
   if (!summaries || summaries.length < 3) return null;
 
@@ -119,6 +124,10 @@ const HiearchicalGrid = ({
             experimentVariant: readTimeVariant,
           });
 
+          const getPromoItemid = extractId(promo.id) ?? null;
+          const isMostReadStory =
+            mostReadItemId && getPromoItemid === mostReadItemId;
+
           return (
             <li
               key={promo.id}
@@ -169,6 +178,17 @@ const HiearchicalGrid = ({
                     </Promo.A>
                   ) : (
                     <Promo.A href={promo.link} {...clickTrackerHandler}>
+                      {isMostReadStory ? (
+                        <div
+                          css={
+                            isFirstPromo
+                              ? styles.mostReadBadgeLarge
+                              : styles.mostReadBadgeSmall
+                          }
+                        >
+                          {mostReadBadgeTranslation}
+                        </div>
+                      ) : null}
                       {isLive ? (
                         <LiveLabel
                           {...(isFirstPromo

src/app/components/Curation/index.tsx

@@ -70,6 +70,7 @@ export default ({
   renderVisuallyHiddenH2Title = false,
   curationId,
   readTimeVariant,
+  mostReadItemId,
   mediaCollection,
 }: Curation) => {
   const componentName = getComponentName({
@@ -245,6 +246,7 @@ export default ({
                 headingLevel={3}
                 isFirstCuration={isFirstCuration}
                 eventTrackingData={eventTrackingData}
+                mostReadItemId={mostReadItemId}
                 readTimeVariant={readTimeVariant}
               />
             </div>
@@ -256,6 +258,7 @@ export default ({
               headingLevel={2} // if there is only one curation, all promos should be h2, and no subheading
               isFirstCuration={isFirstCuration}
               eventTrackingData={eventTrackingData}
+              mostReadItemId={mostReadItemId}
               readTimeVariant={readTimeVariant}
             />
           </div>

src/app/components/Curation/types.ts

@@ -6,5 +6,6 @@ export interface CurationGridProps {
   headingLevel?: number;
   isFirstCuration?: boolean;
   eventTrackingData: EventTrackingData;
+  mostReadItemId?: string | null;
   readTimeVariant?: string | null;
 }

src/app/lib/config/services/afaanoromoo.ts

@@ -293,6 +293,7 @@ export const service: DefaultServiceConfig = {
         linkText: 'Guutuu qabiyyee ilaaluuf fuula cufa ilaali',
       },
       topStoriesTitle: 'Isin hin darbiin',
+      mostReadBadgeText: `Baay'ee kan jaalatame`,
       featuresAnalysisTitle: `Maaltu haasa'ama?`,
       latestMediaTitle: 'Haaraa',
     },

src/app/lib/config/services/mundo.ts

@@ -307,6 +307,7 @@ export const service: DefaultServiceConfig = {
           'Ver la versión completa de la página para visualizar todo el contenido.',
       },
       topStoriesTitle: 'Principales noticias',
+      mostReadBadgeText: 'Lecturas más populares',
       featuresAnalysisTitle: 'No te lo pierdas',
       latestMediaTitle: 'Más videos',
       ugc: {

src/app/lib/config/services/pidgin.ts

@@ -259,6 +259,7 @@ export const service: DefaultServiceConfig = {
         linkText: 'View the full version of the page to see all the content.',
       },
       topStoriesTitle: 'Top Tori',
+      mostReadBadgeText: 'Di one wey dem dey read well well',
       featuresAnalysisTitle: 'Informate me',
       latestMediaTitle: 'New things',
     },

src/app/models/types/curationData.ts

@@ -30,6 +30,7 @@ export interface Summary extends BaseSummary {
   readTime?: number;
   eventTrackingData?: EventTrackingData;
   visualProminence?: VisualProminence | string;
+  mostReadItemId?: string | null;
   readTimeVariant?: string | null;
 }
 
@@ -90,5 +91,7 @@ export interface Curation extends BaseCuration {
   curationLength?: number;
   nthCurationByStyleAndProminence?: number;
   renderVisuallyHiddenH2Title?: boolean;
+  mostReadItemId?: string | null;
+  mostReadBadgeText?: string;
   readTimeVariant?: string | null;
 }

src/app/models/types/translations.ts

@@ -209,6 +209,7 @@ export interface Translations {
     linkText: string;
   };
   topStoriesTitle?: string;
+  mostReadBadgeText?: string;
   featuresAnalysisTitle?: string;
   latestMediaTitle?: string;
   infoBannerLabel?: string;

src/app/pages/HomePage/HomePage.tsx

@@ -39,6 +39,8 @@ export interface HomePageProps {
   };
 }
 
+export const extractId = (id?: string | null) => (id ?? '').split(':').pop();
+
 const HomePage = ({ pageData }: HomePageProps) => {
   const {
     translations,
@@ -48,7 +50,7 @@ const HomePage = ({ pageData }: HomePageProps) => {
     lang,
     brandName,
   } = use(ServiceContext);
-  const { topStoriesTitle, home } = translations;
+  const { topStoriesTitle, mostReadBadgeText, home } = translations;
   const {
     title,
     description,
@@ -65,6 +67,13 @@ const HomePage = ({ pageData }: HomePageProps) => {
 
   const itemList = getItemList({ curations, name: brandName });
 
+  const findMostReadCuration = curations.find(
+    curation => !!curation.mostRead?.items?.length,
+  );
+
+  const mostReadItemId =
+    extractId(findMostReadCuration?.mostRead?.items?.[0].id ?? null) ?? null;
+
   return (
     <>
       <ChartbeatAnalytics title={title} />
@@ -131,6 +140,8 @@ const HomePage = ({ pageData }: HomePageProps) => {
                       }
                       renderVisuallyHiddenH2Title={position === 0}
                       curationId={curationId}
+                      mostReadItemId={mostReadItemId}
+                      mostReadBadgeText={mostReadBadgeText}
                       readTimeVariant={readTimeVariant}
                       {...curationProps}
                     />