@times-components/ts-components 1.104.1-alpha.58 → 1.104.1-alpha.67

package/src/components/social-embed/SocialMediaEmbed.tsx

@@ -1,55 +1,74 @@
-import React, { useEffect, useState } from 'react';
-import {
-  AllowButton,
-  CardContainer,
-  EnableButton,
-  LinkPrivacyManager,
-  Paragraph,
-  Title,
-  CustomIconContainer,
-  Header
-} from './styles';
-import { InfoIcon } from '../inline-message/InfoIcon';
-import { openPrivacyModal, ModalType } from './helpers/privacyModal';
-// @ts-ignore
-import InteractiveWrapper from '@times-components/interactive-wrapper';
+import React, { FC, useEffect, useState } from 'react';
+import { BlockedEmbedMessage } from './BlockedEmbedMessage';
 import { checkVendorConsent } from './helpers/vendorConsent';
-import { getVendorTitle } from './helpers/getVendorTitle';
-import { enableCookies } from './helpers/enableCookies';
-import { socialMediaVendors } from './helpers/socialMediaVendors';
-
-export declare type SocialEmbedProps = {
-  element: any;
-  url?: string;
-  vendorName: string;
-  id: string;
-};
+import { eventStatus } from './constants';
+import { TcData, VendorName } from './types';
 
 declare global {
   interface Window {
     __tcfapi?: (
       command: string,
       version: number,
-      callback: (data: any, success: boolean) => void
+      callback: (data: TcData, success: boolean) => void,
+      listenerId?: number
     ) => void;
   }
 }
 
-export const SocialMediaEmbed: React.FC<SocialEmbedProps> = ({
-  element,
-  vendorName
+export type SocialMediaEmbedProps = {
+  element?: any;
+  url: string;
+  vendorName: VendorName;
+  id: string;
+};
+
+export const SocialMediaEmbed: FC<SocialMediaEmbedProps> = ({
+  vendorName,
+  url
 }) => {
-  const [allowedOnce, setAllowedOnce] = useState(false);
-  const [isSocialAllowed, setIsSocialAllowed] = useState(false);
+  const [isSocialEmbedAllowed, setIsSocialEmbedAllowed] = useState(false);
+  const [data, setData] = useState<TcData | null>(null);
 
-  useEffect(
-    () => {
-      // tslint:disable-next-line:no-console
-      console.log('useEffect enterred', element);
-      checkVendorConsent(vendorName, setIsSocialAllowed);
-    },
-    [vendorName, allowedOnce, isSocialAllowed]
-  );
+  useEffect(() => {
+    if (window.__tcfapi) {
+      window.__tcfapi('addEventListener', 2, (tcData, success) => {
+        if (success && tcData.eventStatus === eventStatus.tcLoaded) {
+          setData({
+            cmpStatus: tcData.cmpStatus,
+            eventStatus: tcData.eventStatus,
+            listenerId: tcData.listenerId
+          });
+
+          checkVendorConsent(vendorName, setIsSocialEmbedAllowed);
+        }
+        if (success && tcData.eventStatus === eventStatus.userActionComplete) {
+          setData({
+            cmpStatus: tcData.cmpStatus,
+            eventStatus: tcData.eventStatus,
+            listenerId: tcData.listenerId
+          });
+
+          checkVendorConsent(vendorName, setIsSocialEmbedAllowed);
+        }
+      });
+    }
+
+    return () => {
+      if (window.__tcfapi && data && data.listenerId) {
+        window.__tcfapi(
+          'removeEventListener',
+          2,
+          success => {
+            if (success) {
+              // tslint:disable-next-line:no-console
+              console.log(success);
+            }
+          },
+          data.listenerId
+        );
+      }
+    };
+  }, []);
 
   useEffect(
     () => {
@@ -63,62 +82,27 @@ export const SocialMediaEmbed: React.FC<SocialEmbedProps> = ({
         script.async = true;
         script.src = 'https://platform.twitter.com/widgets.js';
 
+        let link = document.createElement('a');
+        link.href = `${url}?ref_src=twsrc%5Etfw`;
+
         socialEmbedContainer.appendChild(script);
+        socialEmbedContainer.appendChild(link);
       }
     },
-    [isSocialAllowed, allowedOnce]
+    [isSocialEmbedAllowed]
   );
 
-  const allowCookiesOnce = () => {
-    setAllowedOnce(true);
-    setIsSocialAllowed(true);
-  };
-
-  const handlePrivacyManagerClick = (
-    e: React.MouseEvent<HTMLAnchorElement>
-  ) => {
-    e.preventDefault();
-    openPrivacyModal(
-      ModalType.GDPR,
-      window.__TIMES_CONFIG__.sourcepoint.gdprMessageId
-    );
-  };
-  // tslint:disable-next-line:no-console
-  console.log('allowedOnce', allowedOnce);
   // tslint:disable-next-line:no-console
-  console.log('allowedOnce || isSocialAllowed', allowedOnce || isSocialAllowed);
+  console.log('tcData', data);
   // tslint:disable-next-line:no-console
-  console.log('allowedOnce && isSocialAllowed', allowedOnce && isSocialAllowed);
+  console.log('isSocialEmbedAllowed', isSocialEmbedAllowed);
 
-  return isSocialAllowed || allowedOnce ? (
-    <div className="social-embed">
-      <blockquote className="twitter-tweet">
-        <a href={`${element.attributes.url}?ref_src=twsrc%5Etfw`} />
-      </blockquote>
-    </div>
+  return isSocialEmbedAllowed ? (
+    <blockquote className="social-embed" />
   ) : (
-    <CardContainer>
-      <Header>
-        <CustomIconContainer>
-          <InfoIcon />
-        </CustomIconContainer>
-        <Title>
-          {getVendorTitle(vendorName, socialMediaVendors)} 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(vendorName, setIsSocialAllowed)}
-      >
-        Enable cookies
-      </EnableButton>
-      <AllowButton onClick={allowCookiesOnce}>Allow cookies once</AllowButton>
-    </CardContainer>
+    <BlockedEmbedMessage
+      vendorName={vendorName}
+      setIsSocialEmbedAllowed={setIsSocialEmbedAllowed}
+    />
   );
 };

package/src/components/social-embed/constants.ts

@@ -0,0 +1,14 @@
+export const modalType = {
+  GDPR: 'gdpr',
+  CCPA: 'ccpa'
+} as const;
+
+export const eventStatus = {
+  tcLoaded: 'tcloaded',
+  cmpIsShown: 'cmpuishown',
+  userActionComplete: 'useractioncomplete'
+} as const;
+
+export const vendors = {
+  twitter: 'twitter'
+} as const;

package/src/components/social-embed/helpers/__tests__/vendorConsent.test.ts

@@ -0,0 +1,77 @@
+import { checkVendorConsent } from '../vendorConsent';
+import { VendorName } from '../../types';
+
+describe('checkVendorConsent', () => {
+  let setIsSocialEmbedAllowed: jest.Mock;
+
+  beforeEach(() => {
+    setIsSocialEmbedAllowed = jest.fn();
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('calls setIsSocialEmbedAllowed with true if vendor consent is found', () => {
+    const mockVendorName: VendorName = 'twitter';
+    // Mock window.__tcfapi function
+    (window as any).__tcfapi = jest.fn((command, version, callback) => {
+      // tslint:disable-next-line:no-console
+      console.log('command, version', command, version);
+      callback(
+        { consentedVendors: [{ name: 'twitter' }] },
+        true // success
+      );
+    });
+
+    checkVendorConsent(mockVendorName, setIsSocialEmbedAllowed);
+
+    expect(setIsSocialEmbedAllowed).toHaveBeenCalledWith(true);
+    expect((window as any).__tcfapi).toHaveBeenCalledWith(
+      'getCustomVendorConsents',
+      2,
+      expect.any(Function)
+    );
+  });
+
+  it('calls setIsSocialEmbedAllowed with false if vendor consent is not found', () => {
+    const mockVendorName: VendorName = 'twitter';
+    (window as any).__tcfapi = jest.fn((command, version, callback) => {
+      // tslint:disable-next-line:no-console
+      console.log('command, version', command, version);
+      callback({ consentedVendors: [{ name: 'Other Vendor' }] }, true);
+    });
+
+    checkVendorConsent(mockVendorName, setIsSocialEmbedAllowed);
+
+    expect(setIsSocialEmbedAllowed).toHaveBeenCalledWith(false);
+  });
+
+  it('logs an error message if fetching consent data fails', () => {
+    const consoleSpy = jest.spyOn(console, 'log').mockImplementation();
+    const mockVendorName: VendorName = 'twitter';
+    (window as any).__tcfapi = jest.fn((command, version, callback) => {
+      // tslint:disable-next-line:no-console
+      console.log('command, version', command, version);
+      callback(null, false); // indicate failure
+    });
+
+    checkVendorConsent(mockVendorName, setIsSocialEmbedAllowed);
+
+    expect(setIsSocialEmbedAllowed).not.toHaveBeenCalled();
+    expect(consoleSpy).toHaveBeenCalledWith(
+      `Error fetching consent data or ${mockVendorName} embed not allowed`
+    );
+
+    consoleSpy.mockRestore();
+  });
+
+  it('does nothing if window.__tcfapi is undefined', () => {
+    delete (window as any).__tcfapi;
+    const mockVendorName: VendorName = 'twitter';
+
+    checkVendorConsent(mockVendorName, setIsSocialEmbedAllowed);
+
+    expect(setIsSocialEmbedAllowed).not.toHaveBeenCalled();
+  });
+});

package/src/components/social-embed/helpers/enableCookies.ts

@@ -1,12 +1,9 @@
 import { socialMediaVendors } from './socialMediaVendors';
 
-export const enableCookies = (
-  vendorName: string,
-  setIsSocialAllowed: (allowed: boolean) => void
-) => {
+export const enableCookies = (vendorName: string) => {
   const onCustomConsent = (_: any, success: boolean) => {
     if (success) {
-      setIsSocialAllowed(true);
+      return true;
     }
     return null;
   };

package/src/components/social-embed/helpers/privacyModal.ts

@@ -1,9 +1,5 @@
 import get from 'lodash.get';
-
-export enum ModalType {
-  GDPR = 'gdpr',
-  CCPA = 'ccpa'
-}
+import { ModalType } from '../types';
 
 export const openPrivacyModal = (type: ModalType, messageId: string) => {
   const loadModal = get(window, `_sp_.${type}.loadPrivacyManagerModal`);

package/src/components/social-embed/helpers/vendorConsent.ts

@@ -1,6 +1,8 @@
+import { VendorName } from '../types';
+
 export const checkVendorConsent = (
-  vendorName: string,
-  setIsSocialAllowed: (allowed: boolean) => void
+  vendorName: VendorName,
+  setIsSocialEmbedAllowed: (isSocialVendorAllowed: boolean) => void
 ) => {
   if (window.__tcfapi) {
     window.__tcfapi(
@@ -12,12 +14,7 @@ export const checkVendorConsent = (
             (vendor: { name: string }) =>
               vendor.name.toLowerCase() === vendorName.toLowerCase()
           );
-          setIsSocialAllowed(isSocialVendorAllowed);
-          // tslint:disable-next-line:no-console
-          console.log(
-            `Consent check for ${vendorName}:`,
-            isSocialVendorAllowed
-          );
+          setIsSocialEmbedAllowed(isSocialVendorAllowed);
         } else {
           // tslint:disable-next-line:no-console
           console.log(

package/src/components/social-embed/types.ts

@@ -0,0 +1,13 @@
+import { eventStatus, vendors, modalType } from './constants';
+
+export type EventStatus = typeof eventStatus[keyof typeof eventStatus];
+
+export type TcData = {
+  cmpStatus: string;
+  eventStatus: EventStatus;
+  listenerId: number;
+};
+
+export type VendorName = typeof vendors[keyof typeof vendors];
+
+export type ModalType = typeof modalType[keyof typeof modalType];

package/src/fixtures/preview-data/recommended-articles.ts

@@ -4,6 +4,8 @@ export default {
       {
         url:
           'https://www.thetimes.co.uk/article/save-or-splurge-what-experts-spend-their-own-money-on-tdd65qlj6',
+        categoryPath:
+          'l1/l2/article/save-or-splurge-what-experts-spend-their-own-money-on-tdd65qlj6',
         slug: 'save-or-splurge-what-experts-spend-their-own-money-on',
         label: null,
         headline: 'Save or splurge: what experts spend their own money on',
@@ -51,6 +53,8 @@ export default {
       {
         url:
           'https://www.thetimes.co.uk/article/lieutenant-colonel-ian-crooke-obituary-t0b890wgp',
+        categoryPath:
+          'l1/l2/article/lieutenant-colonel-ian-crooke-obituary-t0b890wgp',
         slug: 'lieutenant-colonel-ian-crooke-obituary',
         label: 'Obituary',
         headline: 'Lieutenant Colonel Ian Crooke',
@@ -78,6 +82,8 @@ export default {
       {
         url:
           'https://www.thetimes.co.uk/article/is-the-party-over-for-boris-johnson-k8s0jxv6r',
+        categoryPath:
+          'l1/l2/article/is-the-party-over-for-boris-johnson-k8s0jxv6r',
         slug: 'is-the-party-over-for-boris-johnson',
         label: 'RED BOX | PATRICK MAGUIRE',
         headline: 'Is the party over for Johnson?',
@@ -118,6 +124,8 @@ export default {
       {
         url:
           'https://www.thetimes.co.uk/article/quentin-letts-a-pm-his-party-and-the-country-left-firmly-in-limp-on-territory-klvfgrj8g',
+        categoryPath:
+          'l1/l2/article/quentin-letts-a-pm-his-party-and-the-country-left-firmly-in-limp-on-territory-klvfgrj8g',
         slug:
           'quentin-letts-a-pm-his-party-and-the-country-left-firmly-in-limp-on-territory',
         label: 'Political Sketch',
@@ -152,6 +160,8 @@ export default {
       {
         url:
           'https://www.thetimes.co.uk/article/boris-johnson-should-look-for-an-honourable-exit-7fkgkl2rq',
+        categoryPath:
+          'l1/l2/article/boris-johnson-should-look-for-an-honourable-exit-7fkgkl2rq',
         slug: 'boris-johnson-should-look-for-an-honourable-exit',
         label: 'WILLIAM HAGUE | COMMENT',
         headline: 'Hague: Johnson should look for an honourable exit',
@@ -184,6 +194,8 @@ export default {
       {
         url:
           'https://www.thetimes.co.uk/article/carrie-johnson-and-hard-times-at-no-10-hfmkr8ssn',
+        categoryPath:
+          'l1/l2/article/carrie-johnson-and-hard-times-at-no-10-hfmkr8ssn',
         slug: 'carrie-johnson-and-hard-times-at-no-10',
         label: 'POLITICS',
         headline: 'Carrie Johnson and hard times at No 10',
@@ -216,6 +228,8 @@ export default {
       {
         url:
           'https://www.thetimes.co.uk/article/dead-man-walking-times-commentators-give-their-verdicts-boris-johnson-confidence-vote-0f59md3bt',
+        categoryPath:
+          'l1/l2/article/dead-man-walking-times-commentators-give-their-verdicts-boris-johnson-confidence-vote-0f59md3bt',
         slug:
           'dead-man-walking-times-commentators-give-their-verdicts-boris-johnson-confidence-vote',
         label: 'Politics',
@@ -269,6 +283,7 @@ export default {
       {
         url:
           'https://www.thetimes.co.uk/article/margot-heuman-obituary-9fdm8h3hr',
+        categoryPath: 'l1/l2/article/margot-heuman-obituary-9fdm8h3hr',
         slug: 'margot-heuman-obituary',
         label: 'Obituary',
         headline: 'Margot Heuman',
@@ -296,6 +311,8 @@ export default {
       {
         url:
           'https://www.thetimes.co.uk/article/the-times-view-on-tory-confidence-in-boris-johnson-pyrrhic-victory-wl5fl2jb2',
+        categoryPath:
+          'l1/l2/article/the-times-view-on-tory-confidence-in-boris-johnson-pyrrhic-victory-wl5fl2jb2',
         slug:
           'the-times-view-on-tory-confidence-in-boris-johnson-pyrrhic-victory',
         label: 'LEADING ARTICLE',
@@ -329,6 +346,8 @@ export default {
       {
         url:
           'https://www.thetimes.co.uk/article/boris-johnson-allies-took-time-saving-big-dog-leadership-contest-rn5dzbw8h',
+        categoryPath:
+          'l1/l2/article/boris-johnson-allies-took-time-saving-big-dog-leadership-contest-rn5dzbw8h',
         slug:
           'boris-johnson-allies-took-time-saving-big-dog-leadership-contest',
         label: 'Politics',

package/src/types/externs.d.ts

@@ -24,6 +24,7 @@ declare module '@times-components/ts-slices' {
   export type SliceArticle = {
     id?: string;
     url?: string;
+    categoryPath?: string;
     label?: string;
     byline?: string;
     headline: string;
@@ -194,7 +195,6 @@ declare module '@times-components/provider' {
 declare module '@times-components/provider-queries' {
   import { DocumentNode } from 'graphql';
   export const getNewsletter: DocumentNode;
-  export const subscribeNewsletter: DocumentNode;
 }
 
 declare module '@times-components/provider-test-tools' {