@times-components/ts-components 1.104.1-alpha.14 → 1.104.1-alpha.34

package/src/components/article-header/ArticleHeader.stories.tsx

@@ -1,11 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { select, text } from '@storybook/addon-knobs';
-import {
-  // format,
-  addMinutes
-} from 'date-fns';
-// import { utcToZonedTime } from 'date-fns-tz';
+import addMinutes from 'date-fns/addMinutes';
 
 import { ArticleHarness } from '../../fixtures/article-harness/ArticleHarness';
 import ArticleHeader from './ArticleHeader';

package/src/components/article-header/ArticleHeader.tsx

@@ -1,10 +1,9 @@
 import React, { useState, useEffect } from 'react';
-import {
-  differenceInSeconds,
-  differenceInCalendarDays,
-  formatDistanceStrict
-} from 'date-fns';
-import { format, utcToZonedTime } from 'date-fns-tz';
+import differenceInSeconds from 'date-fns/differenceInSeconds';
+import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
+import formatDistanceStrict from 'date-fns/formatDistanceStrict';
+import utcToZonedTime from 'date-fns-tz/utcToZonedTime';
+import format from 'date-fns-tz/format';
 
 import { BreakingArticleFlag } from '../article-flag/LiveArticleFlag';
 import safeDecodeURIComponent from '../../utils/safeDecodeURIComponent';

package/src/components/article-sidebar/ArticleSidebar.stories.tsx

@@ -1,30 +1,32 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { ArticleSidebar } from './ArticleSidebar';
+import { TrackingContextProvider } from '../../helpers/tracking/TrackingContextProvider';
+import analyticsStream from '../../fixtures/analytics-actions/analytics-actions';
 
 const getAttributes = () => {
   const sectionTitle = 'Puzzles';
   const data = [
     {
       title: 'Crossword',
-      url: 'https://www.thetimes.co.uk/puzzles/crossword',
+      url: 'https://www.thetimes.com/puzzles/crossword',
       imgUrl:
-        'https://www.thetimes.co.uk/d/img/puzzles/new-illustrations/crossword-c7ae8934ef.png'
+        'https://www.thetimes.com/d/img/puzzles/new-illustrations/crossword-c7ae8934ef.png'
     },
     {
       title: 'Polygon',
-      url: 'https://www.thetimes.co.uk/puzzles/word-puzzles',
+      url: 'https://www.thetimes.com/puzzles/word-puzzles',
       imgUrl:
-        'https://www.thetimes.co.uk/d/img/puzzles/new-illustrations/polygon-875ea55487.png'
+        'https://www.thetimes.com/d/img/puzzles/new-illustrations/polygon-875ea55487.png'
     },
     {
       title: 'Sudoku',
-      url: 'https://www.thetimes.co.uk/puzzles/sudoku',
+      url: 'https://www.thetimes.com/puzzles/sudoku',
       imgUrl:
-        'https://www.thetimes.co.uk/d/img/puzzles/new-illustrations/sudoku-ee2aea0209.png'
+        'https://www.thetimes.com/d/img/puzzles/new-illustrations/sudoku-ee2aea0209.png'
     }
   ];
-  const pageLink = 'https://www.thetimes.co.uk/puzzles';
+  const pageLink = 'https://www.thetimes.com/puzzles';
 
   return { sectionTitle, data, pageLink };
 };
@@ -35,9 +37,21 @@ storiesOf('Typescript Component/Article Sidebar', module).add(
     const props = getAttributes();
 
     return (
-      <div style={{ maxWidth: '204px' }}>
-        <ArticleSidebar {...props} />
-      </div>
+      <TrackingContextProvider
+        context={{
+          component: 'ArticleSkeleton',
+          object: 'ArticleSidebar',
+          attrs: {
+            article_name: 'articleHeadline',
+            section_details: 'section'
+          }
+        }}
+        analyticsStream={analyticsStream}
+      >
+        <div style={{ maxWidth: '204px' }}>
+          <ArticleSidebar {...props} />
+        </div>
+      </TrackingContextProvider>
     );
   }
 );

package/src/components/article-sidebar/ArticleSidebar.tsx

@@ -13,6 +13,8 @@ import {
   Title,
   TitleIconContainer
 } from './styles';
+import { useTrackingContext } from '../../helpers/tracking/TrackingContextProvider';
+import { handleClick } from './tracking-helpers';
 
 export interface ArticleSideBarProps {
   sectionTitle: string;
@@ -25,9 +27,17 @@ export const ArticleSidebar: FC<ArticleSideBarProps> = ({
   data,
   pageLink
 }) => {
+  const { fireAnalyticsEvent } = useTrackingContext();
+
   return (
     <Container>
-      <Link href={pageLink}>
+      <Link
+        href={pageLink}
+        onClick={() =>
+          handleClick(fireAnalyticsEvent, 'puzzle sidebar: header selected')
+        }
+        className="trigger"
+      >
         <TitleIconContainer>
           <Title>{sectionTitle}</Title>
           <ChevronButton>
@@ -41,7 +51,17 @@ export const ArticleSidebar: FC<ArticleSideBarProps> = ({
 
       {data.map(({ title, url, imgUrl }) => (
         <React.Fragment key={title}>
-          <PuzzleContainer href={url}>
+          <PuzzleContainer
+            href={url}
+            onClick={() =>
+              handleClick(
+                fireAnalyticsEvent,
+                'puzzle sidebar: puzzle selected',
+                `${title}`
+              )
+            }
+            className="trigger-card-link"
+          >
             <PuzzleImage src={imgUrl} alt="Puzzle thumbnail" />
             <ItemTitle>{title}</ItemTitle>
           </PuzzleContainer>

package/src/components/article-sidebar/__tests__/__snapshots__/index.test.tsx.snap

@@ -6,8 +6,8 @@ exports[`ArticleSidebar should render ArticleSidebar component 1`] = `
     class="sc-bwzfXH kzdaiS"
   >
     <a
-      class="sc-ifAKCX kcwwi"
-      href="https://www.thetimes.co.uk/puzzles"
+      class="trigger sc-ifAKCX kcwwi"
+      href="https://www.thetimes.com/puzzles"
     >
       <div
         class="sc-EHOje bmFGSY"
@@ -48,13 +48,13 @@ exports[`ArticleSidebar should render ArticleSidebar component 1`] = `
       class="sc-bxivhb euCQXs"
     />
     <a
-      class="sc-dnqmqq gzKzfS"
-      href="https://www.thetimes.co.uk/puzzles/crossword"
+      class="trigger-card-link sc-dnqmqq gzKzfS"
+      href="https://www.thetimes.com/puzzles/crossword"
     >
       <img
         alt="Puzzle thumbnail"
         class="sc-iwsKbI elYeaz"
-        src="https://www.thetimes.co.uk/imageserver/image/%2Fpuzzles%2Ficons%2F33b27655-dcc9-421f-906f-b2b10dd26865.png?crop=1250%2C833%2C0%2C0&resize=500"
+        src="https://www.thetimes.com/imageserver/image/%2Fpuzzles%2Ficons%2F33b27655-dcc9-421f-906f-b2b10dd26865.png?crop=1250%2C833%2C0%2C0&resize=500"
       />
       <p
         class="sc-htoDjs bXFtLv"
@@ -66,13 +66,13 @@ exports[`ArticleSidebar should render ArticleSidebar component 1`] = `
       class="sc-bxivhb euCQXs"
     />
     <a
-      class="sc-dnqmqq gzKzfS"
-      href="https://www.thetimes.co.uk/puzzles/sudoku"
+      class="trigger-card-link sc-dnqmqq gzKzfS"
+      href="https://www.thetimes.com/puzzles/sudoku"
     >
       <img
         alt="Puzzle thumbnail"
         class="sc-iwsKbI elYeaz"
-        src="https://www.thetimes.co.uk/imageserver/image/%2Fpuzzles%2Ficons%2F33b27655-dcc9-421f-906f-b2b10dd26865.png?crop=1250%2C833%2C0%2C0&resize=500"
+        src="https://www.thetimes.com/imageserver/image/%2Fpuzzles%2Ficons%2F33b27655-dcc9-421f-906f-b2b10dd26865.png?crop=1250%2C833%2C0%2C0&resize=500"
       />
       <p
         class="sc-htoDjs bXFtLv"

package/src/components/article-sidebar/__tests__/index.test.tsx

@@ -1,33 +1,83 @@
 import React from 'react';
 import { ArticleSidebar, ArticleSideBarProps } from '../ArticleSidebar';
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import { useTrackingContext } from '../../../helpers/tracking/TrackingContextProvider';
+
+jest.mock('../../../helpers/tracking/TrackingContextProvider', () => ({
+  useTrackingContext: jest.fn()
+}));
+
+const mockFireAnalyticsEvent = jest.fn();
 
 const defaultProps: ArticleSideBarProps = {
   sectionTitle: 'Puzzles for you',
   data: [
     {
       title: 'Crossword',
-      url: 'https://www.thetimes.co.uk/puzzles/crossword',
+      url: 'https://www.thetimes.com/puzzles/crossword',
       imgUrl:
-        'https://www.thetimes.co.uk/imageserver/image/%2Fpuzzles%2Ficons%2F33b27655-dcc9-421f-906f-b2b10dd26865.png?crop=1250%2C833%2C0%2C0&resize=500'
+        'https://www.thetimes.com/imageserver/image/%2Fpuzzles%2Ficons%2F33b27655-dcc9-421f-906f-b2b10dd26865.png?crop=1250%2C833%2C0%2C0&resize=500'
     },
     {
       title: 'Polygon',
-      url: 'https://www.thetimes.co.uk/puzzles/sudoku',
+      url: 'https://www.thetimes.com/puzzles/sudoku',
       imgUrl:
-        'https://www.thetimes.co.uk/imageserver/image/%2Fpuzzles%2Ficons%2F33b27655-dcc9-421f-906f-b2b10dd26865.png?crop=1250%2C833%2C0%2C0&resize=500'
+        'https://www.thetimes.com/imageserver/image/%2Fpuzzles%2Ficons%2F33b27655-dcc9-421f-906f-b2b10dd26865.png?crop=1250%2C833%2C0%2C0&resize=500'
     }
   ],
-  pageLink: 'https://www.thetimes.co.uk/puzzles'
+  pageLink: 'https://www.thetimes.com/puzzles'
 };
 
 const renderComponent = (props: ArticleSideBarProps) =>
   render(<ArticleSidebar {...props} />);
 
 describe('ArticleSidebar', () => {
+  beforeEach(() => {
+    (useTrackingContext as jest.Mock).mockReturnValue({
+      fireAnalyticsEvent: mockFireAnalyticsEvent
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('should render ArticleSidebar component', () => {
     const { asFragment } = renderComponent(defaultProps);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  it('should call fireAnalyticsEvent when header is clicked', () => {
+    const { container } = renderComponent(defaultProps);
+    fireEvent.click(container.querySelector('.trigger')!);
+
+    expect(mockFireAnalyticsEvent).toHaveBeenCalledWith({
+      object: 'ArticleSidebar',
+      action: 'Clicked',
+      attrs: {
+        event_navigation_action: 'navigation',
+        event_navigation_name: 'puzzle sidebar: header selected',
+        event_navigation_browsing_method: 'click',
+        component_name: 'Article Sidebar'
+      }
+    });
+  });
+
+  it('should call fireAnalyticsEvent when a puzzle card is clicked', () => {
+    const { container } = renderComponent(defaultProps);
+    fireEvent.click(container.querySelector('.trigger-card-link')!);
+
+    expect(mockFireAnalyticsEvent).toHaveBeenCalledWith({
+      object: 'ArticleSidebar',
+      action: 'Clicked',
+      attrs: {
+        event_navigation_action: 'navigation',
+        event_navigation_name: 'puzzle sidebar: puzzle selected',
+        event_navigation_browsing_method: 'click',
+        component_name: 'Article Sidebar',
+        article_parent_name: 'crossword'
+      }
+    });
+  });
 });

package/src/components/article-sidebar/tracking-helpers.ts

@@ -0,0 +1,21 @@
+const clickEvent = (title: string, parent: string = '') => ({
+  object: 'ArticleSidebar',
+  action: 'Clicked',
+  attrs: {
+    event_navigation_action: 'navigation',
+    event_navigation_name: `${title}`,
+    event_navigation_browsing_method: 'click',
+    component_name: 'Article Sidebar',
+    ...(parent && { article_parent_name: parent.toLowerCase() })
+  }
+});
+
+const handleClick = (
+  fireAnalyticsEvent: ((analyticsEvent: any) => void) | undefined,
+  title: string,
+  parent?: string
+) => {
+  fireAnalyticsEvent && fireAnalyticsEvent(clickEvent(title, parent));
+};
+
+export { handleClick, clickEvent };

package/src/components/twitter-embed/TwitterEmbed.tsx

@@ -1,4 +1,23 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
+import {
+  AllowButton,
+  CardContainer,
+  EnableButton,
+  LinkPrivacyManager,
+  Paragraph,
+  Title,
+  CustomIconContainer,
+  Header
+} from './styles';
+import get from 'lodash.get';
+import { InfoIcon } from '../inline-message/InfoIcon';
+// @ts-ignore
+import InteractiveWrapper from '@times-components/interactive-wrapper';
+
+export declare type TwitterEmbedProps = {
+  element: any;
+  url: string;
+};
 
 declare global {
   interface Window {
@@ -10,31 +29,144 @@ declare global {
   }
 }
 
-export const TwitterEmbed: React.FC<{
-  sectionColour: string;
-}> = () => {
-  // tslint:disable-next-line:no-console
-  console.log('window', window);
+export const TwitterEmbed: React.FC<TwitterEmbedProps> = ({ element, url }) => {
+  const [allowedOnce, setAllowedOnce] = useState(false);
+  const [isTwitterAllowed, setIsTwitterAllowed] = useState(false);
 
   useEffect(() => {
     if (window.__tcfapi) {
       window.__tcfapi('getCustomVendorConsents', 2, (data, success) => {
-        if (success) {
-          // tslint:disable-next-line:no-console
-          console.log('TCF API response:', data);
+        if (success && data && data.consentedVendors) {
+          const isTwitterVendorAllowed = data.consentedVendors.some(
+            (vendor: { name: string }) => vendor.name === 'Twitter'
+          );
+          setIsTwitterAllowed(isTwitterVendorAllowed);
         } else {
           // tslint:disable-next-line:no-console
-          console.log('Error fetching TCF API data');
+          console.log('Error fetching consent data or Twitter not allowed');
         }
       });
+    }
+    // tslint:disable-next-line:no-console
+    console.log('window', window);
+  }, []);
+
+  enum ModalType {
+    GDPR = 'gdpr',
+    CCPA = 'ccpa'
+  }
+
+  const openPrivacyModal = (type: ModalType, messageId: string) => {
+    const loadModal = get(window, `_sp_.${type}.loadPrivacyManagerModal`);
+
+    if (loadModal) {
+      loadModal(messageId);
     } else {
       // tslint:disable-next-line:no-console
-      console.log('TCF API not available');
+      console.warn('Sourcepoint LoadPrivacyManagerModal is not available');
     }
-  }, []);
+  };
+
+  const allowCookiesOnce = () => {
+    setAllowedOnce(true);
+    setIsTwitterAllowed(true);
+  };
 
+  const handlePrivacyManagerClick = (
+    e: React.MouseEvent<HTMLAnchorElement>
+  ) => {
+    e.preventDefault();
+    openPrivacyModal(
+      ModalType.GDPR,
+      window.__TIMES_CONFIG__.sourcepoint.gdprMessageId
+    );
+  };
+
+  const socialMediaVendors = {
+    twitter: { id: '5fab0c31a22863611c5f8764', status: 'pending' }
+  };
+
+  const enableCookies = () => {
+    const onCustomConsent = (data: any, success: boolean) => {
+      if (success) {
+        // tslint:disable-next-line:no-console
+        console.log('Consent successfully updated', data);
+        setIsTwitterAllowed(true);
+      } else {
+        // tslint:disable-next-line:no-console
+        console.error('Failed to set consent for Twitter.', data);
+      }
+    };
+
+    const twitterVendorId = socialMediaVendors.twitter.id;
+
+    if (window.__tcfapi && twitterVendorId) {
+      window.__tcfapi(
+        'getCustomVendorConsents',
+        2,
+        (data: any, successful: boolean) => {
+          if (successful && data && data.grants[twitterVendorId]) {
+            // const purposeGrants = Object.keys(data.grants[twitterVendorId].purposeGrants).join(',');
+
+            (window.__tcfapi as any)(
+              'postCustomConsent',
+              2,
+              onCustomConsent,
+              twitterVendorId,
+              Object.keys(data.grants[twitterVendorId].purposeGrants),
+              ''
+            );
+          } else {
+            // tslint:disable-next-line:no-console
+            console.error('Twitter vendor consent not available:', data);
+          }
+        }
+      );
+    } else {
+      // tslint:disable-next-line:no-console
+      console.error(
+        'TCF API is not available or Twitter vendor ID is missing.'
+      );
+    }
+  };
+
+  // tslint:disable-next-line:no-console
+  console.log('allowedOnce', allowedOnce);
+  // tslint:disable-next-line:no-console
+  console.log(
+    'allowedOnce || isTwitterAllowed',
+    allowedOnce || isTwitterAllowed
+  );
   // tslint:disable-next-line:no-console
-  console.log('window.__tcfapi', window.__tcfapi);
+  console.log(
+    'allowedOnce && isTwitterAllowed',
+    allowedOnce && isTwitterAllowed
+  );
 
-  return <h1>Test</h1>;
+  return isTwitterAllowed ? (
+    <InteractiveWrapper
+      attributes={element.attributes}
+      element={element.value}
+      key={element.key}
+      source={url}
+    />
+  ) : (
+    <CardContainer>
+      <Header>
+        <CustomIconContainer>
+          <InfoIcon />
+        </CustomIconContainer>
+        <Title>X (Twitter) content blocked</Title>
+      </Header>
+      <Paragraph>
+        Please enable cookies and other technologies to view this content. You
+        can update your cookies preferences any time using{' '}
+        <LinkPrivacyManager href="#" onClick={handlePrivacyManagerClick}>
+          privacy manager.
+        </LinkPrivacyManager>
+      </Paragraph>
+      <EnableButton onClick={enableCookies}>Enable cookies</EnableButton>
+      <AllowButton onClick={allowCookiesOnce}>Allow cookies once</AllowButton>
+    </CardContainer>
+  );
 };