WS-1687 - Personalised Topic Rail for Adaptive Experience (Data Fetching via NextJS)

src/app/components/PersonalisedContent/index.test.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { render, screen } from '../react-testing-library-with-providers';
+import PersonalisedContent from '.';
+
+const mockPersonalisedContent = [
+  {
+    title: 'Personalised Title',
+    summaries: [
+      {
+        type: 'promo',
+        title: 'Promo Title',
+        description: 'Promo Description',
+        link: '/promo-link',
+        imageUrl: 'promo-image.jpg',
+        imageAlt: 'Promo Image',
+        isLive: false,
+      },
+    ],
+    id: 'personalised-content',
+    link: '/personalised-link',
+    isFirstCuration: true,
+    topicId: 'topic-1',
+  },
+];
+
+const basePageData = {
+  secondaryColumn: {
+    PersonalisedContent: mockPersonalisedContent,
+    topStories: [],
+    features: [],
+  },
+};
+
+describe('PersonalisedContent', () => {
+  it('renders nothing if there is no personalised content data', () => {
+    render(
+      <PersonalisedContent
+        // @ts-expect-error: Test fixture data does not need to match Article type exactly
+        pageData={{ secondaryColumn: { topStories: [], features: [] } }}
+        personalisedTopicCurationExperimentVariant="personalised"
+      />,
+    );
+    expect(screen.queryByRole('region')).not.toBeInTheDocument();
+  });
+
+  it('renders personalised content when variant is "personalised"', () => {
+    render(
+      <PersonalisedContent
+        // @ts-expect-error: Test fixture data does not need to match Article type exactly
+        pageData={basePageData}
+        personalisedTopicCurationExperimentVariant="personalised"
+      />,
+    );
+    expect(screen.getByRole('region')).toHaveAttribute(
+      'aria-labelledby',
+      'personalised-content',
+    );
+    expect(screen.getByText('Personalised Title')).toBeInTheDocument();
+    expect(screen.getByText('Promo Title')).toBeInTheDocument();
+  });
+
+  it('renders the subheading as a link if link is provided', () => {
+    render(
+      <PersonalisedContent
+        // @ts-expect-error: Test fixture data does not need to match Article type exactly
+        pageData={basePageData}
+        personalisedTopicCurationExperimentVariant="personalised"
+      />,
+    );
+    const subheadingLink = screen.getByRole('link', {
+      name: 'Personalised Title',
+    });
+    expect(subheadingLink).toHaveAttribute('href', '/personalised-link');
+  });
+});

src/app/components/PersonalisedContent/index.tsx

@@ -0,0 +1,101 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+
+import { Article } from '#app/models/types/optimo';
+import CurationGrid from '#app/components/Curation/CurationGrid';
+import Subheading from '#app/components/Curation/Subhead';
+import { Summary } from '#app/models/types/curationData';
+import { EventTrackingData } from '#app/lib/analyticsUtils/types';
+import useViewTracker from '#app/hooks/useViewTracker';
+import useClickTrackerHandler from '#app/hooks/useClickTrackerHandler';
+import styles from '#app/components/RelatedContentSection/index.styles';
+
+const PersonalisedContent = ({
+  pageData,
+  personalisedTopicCurationExperimentVariant,
+}: {
+  pageData: Article;
+  personalisedTopicCurationExperimentVariant: string;
+}) => {
+  type PersonalisedContentType = {
+    title?: string;
+    summaries?: Summary[];
+    curationLength?: number;
+    id?: string;
+    link?: string;
+    renderVisuallyHiddenH2Title?: boolean;
+    curationSubheading?: string;
+    isFirstCuration?: boolean;
+    topicId?: string;
+  };
+
+  const personalisedContentArray = pageData.secondaryColumn
+    ?.PersonalisedContent as PersonalisedContentType[] | undefined;
+
+  const getPersonalisedContentData = () => {
+    if (personalisedTopicCurationExperimentVariant !== 'personalised') {
+      return undefined;
+    }
+    if (
+      !Array.isArray(personalisedContentArray) ||
+      personalisedContentArray.length === 0
+    ) {
+      return undefined;
+    }
+    // Country-specific data is always first
+    return personalisedContentArray[0];
+  };
+
+  const personalisedContentData = getPersonalisedContentData();
+  const {
+    title,
+    summaries = [],
+    id = 'personalised-content',
+    link = '',
+    isFirstCuration = false,
+    topicId = '',
+  } = personalisedContentData || {};
+
+  const eventTrackingData: EventTrackingData = {
+    componentName: 'personalised-topic-curation',
+    sendOptimizelyEvents: true,
+    experimentName: 'newswb_ws_location_based_topics',
+    experimentVariant: personalisedTopicCurationExperimentVariant,
+    groupTracker: {
+      name: title,
+      type: 'personalised-topic-curation',
+      ...(link && { link }),
+      ...(topicId && { resourceId: topicId }),
+      ...(summaries?.length > 0 && { itemCount: summaries.length }),
+    },
+  };
+  const viewTracker = useViewTracker(eventTrackingData);
+  const subheadingClickTracker = useClickTrackerHandler(eventTrackingData);
+
+  if (!personalisedContentData) {
+    return null;
+  }
+
+  return (
+    <section
+      aria-labelledby={id}
+      role="region"
+      {...viewTracker}
+      css={styles.relatedContentSection} // use the same style as related content for padding unless we want to make it look different
+    >
+      {title && (
+        <Subheading id={id} link={link} {...subheadingClickTracker}>
+          {title}
+        </Subheading>
+      )}
+      <CurationGrid
+        summaries={summaries}
+        headingLevel={3}
+        isFirstCuration={isFirstCuration}
+        eventTrackingData={eventTrackingData}
+      />
+    </section>
+  );
+};
+
+export default PersonalisedContent;

src/app/models/types/optimo.ts

@@ -135,6 +135,7 @@ export type SecondaryColumn = {
   mediaCuration?: Curation;
   topStories: TopStoryItem[];
   features: object[];
+  PersonalisedContent?: object[];
   latestMedia?: LatestMedia[];
 };
 

src/app/pages/ArticlePage/ArticlePage.tsx

@@ -49,6 +49,7 @@ import { Recommendation } from '#app/models/types/onwardJourney';
 import ScrollablePromo from '#components/ScrollablePromo';
 import Recommendations from '#app/components/Recommendations';
 import { ReadTimeArticleExperiment as ReadTime } from '#app/components/ReadTime';
+import PersonalisedContent from '../../components/PersonalisedContent';
 import ElectionBanner from './ElectionBanner';
 import ImageWithCaption from '../../components/ImageWithCaption';
 import AdContainer from '../../components/Ad';
@@ -246,6 +247,27 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
     experimentType: ExperimentType.CLIENT_SIDE,
   });
 
+  // EXPERIMENT: Personalised Content Rail
+  const personalisedContentExperimentName = 'newswb_ws_location_based_topics';
+  let personalisedContentExperimentVariant = useOptimizelyVariation({
+    experimentName: personalisedContentExperimentName,
+    experimentType: ExperimentType.CLIENT_SIDE,
+  });
+
+  // temp overrides for testing
+  const personalisedContentOverride = true;
+  personalisedContentExperimentVariant = 'personalised';
+
+  const showPersonalisedContent = personalisedContentOverride
+    ? true
+    : Boolean(
+        !isAmp &&
+          !isLite &&
+          !isApp &&
+          personalisedContentExperimentVariant &&
+          personalisedContentExperimentVariant === 'personalised',
+      );
+
   const allowAdvertising = pageData?.metadata?.allowAdvertising ?? false;
   const adcampaign = pageData?.metadata?.adCampaignKeyword;
 
@@ -470,6 +492,15 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
               },
             })}
           />
+          {/* EXPERIMENT: Personalised Content */}
+          {showPersonalisedContent && (
+            <PersonalisedContent
+              pageData={pageData}
+              personalisedTopicCurationExperimentVariant={
+                personalisedContentExperimentVariant ?? ''
+              }
+            />
+          )}
         </div>
         {!isApp && !isPGL && (
           <SecondaryColumn

src/app/pages/ArticlePage/index.test.tsx

@@ -31,11 +31,11 @@ import {
 import { ARTICLE_PAGE } from '#app/routes/utils/pageTypes';
 import { suppressPropWarnings } from '#app/legacy/psammead/psammead-test-helpers/src';
 import { Services } from '#app/models/types/global';
-
 import { Article } from '#app/models/types/optimo';
 import * as clickTracking from '#app/hooks/useClickTrackerHandler';
 import * as viewTracking from '#app/hooks/useViewTracker';
 import useOptimizelyVariation from '#app/hooks/useOptimizelyVariation';
+import PersonalisedContent from '../../components/PersonalisedContent';
 import {
   render,
   screen,
@@ -1208,4 +1208,72 @@ describe('Article Page', () => {
       },
     );
   });
+
+  describe('Personalised topic curation', () => {
+    it('renders nothing if personalisedContentData is undefined', () => {
+      const pageData = {
+        ...articleDataNews,
+        secondaryColumn: {
+          topStories: [],
+          features: [],
+        },
+      };
+      const { container } = render(
+        <PersonalisedContent
+          pageData={pageData}
+          personalisedTopicCurationExperimentVariant="variantA"
+        />,
+      );
+      expect(container).toBeEmptyDOMElement();
+    });
+    it('renders section and subheading when personalisedContentData is present', () => {
+      const personalisedContent = [
+        {
+          title: 'Recommended for you',
+          summaries: [
+            {
+              type: 'promo',
+              title: 'Article 1',
+              description: 'Description 1',
+              link: '/article-1',
+              imageUrl: 'image-1.jpg',
+              imageAlt: 'Image 1',
+              isLive: false,
+              id: 'article-1',
+            },
+            {
+              type: 'promo',
+              title: 'Article 2',
+              description: 'Description 2',
+              link: '/article-2',
+              imageUrl: 'image-2.jpg',
+              imageAlt: 'Image 2',
+              isLive: false,
+              id: 'article-2',
+            },
+          ],
+          id: 'personalised-content',
+          topicId: 'topic-1',
+        },
+      ];
+      const pageData = {
+        ...articleDataNews,
+        secondaryColumn: {
+          topStories: [],
+          features: [],
+          PersonalisedContent: personalisedContent,
+        },
+      };
+      render(
+        <PersonalisedContent
+          pageData={pageData}
+          personalisedTopicCurationExperimentVariant="personalised"
+        />,
+      );
+      expect(screen.getByRole('region')).toBeInTheDocument();
+      expect(screen.getByText('Recommended for you')).toBeInTheDocument();
+      expect(screen.getByText('Article 1')).toBeInTheDocument();
+      expect(screen.getByText('Article 2')).toBeInTheDocument();
+    });
+  });
 });