@times-components/ts-components 1.112.1 → 1.113.1-alpha.2

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

@@ -0,0 +1,73 @@
+import { enableCookies } from '../enableCookies';
+
+jest.mock('../socialMediaVendors', () => ({
+  socialMediaVendors: {
+    facebook: { id: 'facebookId' },
+    twitter: { id: 'twitterId' }
+  }
+}));
+
+describe('enableCookies', () => {
+  const mockVendorId = 'facebookId';
+  const setIsSocialEmbedAllowed = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (window as any).__tcfapi = jest.fn();
+  });
+
+  it('should call __tcfapi with "getCustomVendorConsents" for the vendor', () => {
+    (window as any).__tcfapi = jest.fn((command, version, callback) => {
+      // tslint:disable-next-line:no-console
+      console.log('command, version', command, version);
+      callback(
+        {
+          grants: { [mockVendorId]: { purposeGrants: { 1: true } } }
+        },
+        true
+      );
+    });
+
+    enableCookies('facebook', setIsSocialEmbedAllowed);
+    expect(window.__tcfapi).toHaveBeenCalledWith(
+      'getCustomVendorConsents',
+      2,
+      expect.any(Function)
+    );
+  });
+
+  it('should call postCustomConsent if consent data and grants are available', () => {
+    const purposeGrants = { 1: true };
+    (window as any).__tcfapi = jest.fn((command, version, callback) => {
+      // tslint:disable-next-line:no-console
+      console.log('command, version', command, version);
+      if (command === 'getCustomVendorConsents') {
+        callback(
+          {
+            grants: { [mockVendorId]: { purposeGrants } }
+          },
+          true
+        );
+      }
+    });
+
+    enableCookies('facebook', setIsSocialEmbedAllowed);
+
+    expect(window.__tcfapi).toHaveBeenCalledWith(
+      'postCustomConsent',
+      2,
+      expect.any(Function),
+      [mockVendorId],
+      Object.keys(purposeGrants),
+      []
+    );
+  });
+
+  it('should not call __tcfapi if __tcfapi is not defined', () => {
+    delete (window as any).__tcfapi;
+
+    enableCookies('facebook', setIsSocialEmbedAllowed);
+
+    expect(window.__tcfapi).toBeUndefined();
+  });
+});

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

@@ -0,0 +1,23 @@
+import { getVendorTitle } from '../getVendorTitle';
+import { socialMediaVendors } from '../socialMediaVendors';
+
+describe('getVendorTitle', () => {
+  it('should return the correct title for twitter', () => {
+    const title = getVendorTitle('twitter', socialMediaVendors);
+    expect(title).toBe('X (Twitter)');
+  });
+
+  it('should return the correct title for youtube', () => {
+    const title = getVendorTitle('youtube', socialMediaVendors);
+    expect(title).toBe('Youtube');
+  });
+
+  it('should return the correct title for tiktok', () => {
+    const title = getVendorTitle('tiktok', socialMediaVendors);
+    expect(title).toBe('Tiktok');
+  });
+
+  it('should throw an error if the title does not exist in socialMediaVendors', () => {
+    expect(() => getVendorTitle('nonexistent', socialMediaVendors)).toThrow();
+  });
+});

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

@@ -0,0 +1,55 @@
+import get from 'lodash.get';
+import { openPrivacyModal } from '../privacyModal';
+
+jest.mock('lodash.get', () => jest.fn());
+
+describe('openPrivacyModal', () => {
+  const type: 'gdpr' = 'gdpr';
+  const messageId = 'test-message-id';
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    delete (window as any)._sp_;
+  });
+
+  it('calls the loadPrivacyManagerModal function when available', () => {
+    const loadPrivacyManagerModalMock = jest.fn();
+    (window as any)._sp_ = {
+      gdpr: {
+        loadPrivacyManagerModal: loadPrivacyManagerModalMock
+      }
+    };
+
+    (get as jest.Mock).mockReturnValue(loadPrivacyManagerModalMock);
+
+    openPrivacyModal(type, messageId);
+
+    expect(get).toHaveBeenCalledWith(
+      window,
+      `_sp_.${type}.loadPrivacyManagerModal`
+    );
+    expect(loadPrivacyManagerModalMock).toHaveBeenCalledWith(messageId);
+  });
+
+  it('logs a warning if loadPrivacyManagerModal is not available', () => {
+    const consoleWarnMock = jest
+      .spyOn(console, 'warn')
+      .mockImplementation(() => {
+        // Empty block
+      });
+
+    (get as jest.Mock).mockReturnValue(undefined);
+
+    openPrivacyModal(type, messageId);
+
+    expect(get).toHaveBeenCalledWith(
+      window,
+      `_sp_.${type}.loadPrivacyManagerModal`
+    );
+    expect(consoleWarnMock).toHaveBeenCalledWith(
+      'Sourcepoint LoadPrivacyManagerModal is not available'
+    );
+
+    consoleWarnMock.mockRestore();
+  });
+});

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

@@ -0,0 +1,62 @@
+import { checkVendorConsent } from '../vendorConsent';
+import { VendorName } from '../../types';
+
+describe('checkVendorConsent', () => {
+  const mockVendorName: VendorName = 'twitter';
+
+  beforeEach(() => {
+    // Reset the __tcfapi mock before each test
+    delete (window as any).__tcfapi;
+  });
+
+  it('returns true if the vendor has given consent', () => {
+    // Mock __tcfapi to simulate vendor consent
+    (window as any).__tcfapi = jest.fn((command, version, callback) => {
+      // tslint:disable-next-line:no-console
+      console.log(version);
+      if (command === 'getCustomVendorConsents') {
+        callback({ consentedVendors: [{ name: mockVendorName }] }, true);
+      }
+    });
+
+    const result = checkVendorConsent(mockVendorName);
+    expect(result).toBe(true);
+  });
+
+  it('returns false if the vendor has not given consent', () => {
+    // Mock __tcfapi to simulate no consent given by vendor
+    (window as any).__tcfapi = jest.fn((command, version, callback) => {
+      // tslint:disable-next-line:no-console
+      console.log(version);
+      if (command === 'getCustomVendorConsents') {
+        callback({ consentedVendors: [{ name: 'otherVendor' }] }, true);
+      }
+    });
+
+    const result = checkVendorConsent(mockVendorName);
+    expect(result).toBe(false);
+  });
+
+  it('returns false if __tcfapi is not available', () => {
+    const result = checkVendorConsent(mockVendorName);
+    expect(result).toBe(false);
+  });
+
+  it('logs an error and returns false on callback failure', () => {
+    const consoleSpy = jest.spyOn(console, 'log').mockImplementation();
+
+    (window as any).__tcfapi = jest.fn((command, version, callback) => {
+      // tslint:disable-next-line:no-console
+      console.log(command, version);
+      callback(null, false);
+    });
+
+    const result = checkVendorConsent(mockVendorName);
+    expect(consoleSpy).toHaveBeenCalledWith(
+      `Error fetching consent data or ${mockVendorName} embed not allowed`
+    );
+    expect(result).toBe(false);
+
+    consoleSpy.mockRestore();
+  });
+});

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

@@ -0,0 +1,48 @@
+import { Dispatch, SetStateAction } from 'react';
+import { socialMediaVendors } from './socialMediaVendors';
+
+export const enableCookies = (
+  vendorName: string,
+  setIsSocialEmbedAllowed: Dispatch<SetStateAction<Record<string, boolean>>>
+) => {
+  const onCustomConsent = (_: any, success: boolean) => {
+    if (success) {
+      setIsSocialEmbedAllowed(prev => ({
+        ...prev,
+        [vendorName]: true
+      }));
+      return true;
+    }
+    setIsSocialEmbedAllowed(prev => ({
+      ...prev,
+      [vendorName]: false
+    }));
+    return null;
+  };
+
+  const vendorId = socialMediaVendors[vendorName].id;
+
+  if (window.__tcfapi && vendorId) {
+    window.__tcfapi(
+      'getCustomVendorConsents',
+      2,
+      (data: any, successful: boolean) => {
+        if (successful && data && data.grants[vendorId]) {
+          (window.__tcfapi as any)(
+            'postCustomConsent',
+            2,
+            onCustomConsent,
+            [vendorId],
+            Object.keys(data.grants[vendorId].purposeGrants),
+            []
+          );
+        } else {
+          setIsSocialEmbedAllowed(prev => ({
+            ...prev,
+            [vendorName]: false
+          }));
+        }
+      }
+    );
+  }
+};

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

@@ -0,0 +1,9 @@
+export const getVendorTitle = (
+  title: string,
+  socialMediaVendors: any
+): string => {
+  if (title === 'twitter') {
+    return 'X (Twitter)';
+  }
+  return socialMediaVendors[title].title;
+};

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

@@ -0,0 +1,13 @@
+import get from 'lodash.get';
+import { ModalType } from '../types';
+
+export 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.warn('Sourcepoint LoadPrivacyManagerModal is not available');
+  }
+};

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

@@ -0,0 +1,15 @@
+export const socialMediaVendors: {
+  [key: string]: { id: string; status: string; title: string };
+} = {
+  twitter: {
+    id: '5fab0c31a22863611c5f8764',
+    status: 'pending',
+    title: 'X (Twitter)'
+  },
+  youtube: {
+    id: '5e7ac3fae30e7d1bc1ebf5e8',
+    status: 'pending',
+    title: 'Youtube'
+  },
+  tiktok: { id: '5e7f6927b8e05c4e491e7380', status: 'pending', title: 'Tiktok' }
+};

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

@@ -0,0 +1,28 @@
+import { VendorName } from '../types';
+
+export const checkVendorConsent = (vendorName: VendorName): boolean => {
+  let isSocialVendorAllowed = false;
+
+  if (window.__tcfapi) {
+    window.__tcfapi(
+      'getCustomVendorConsents',
+      2,
+      (data: any, success: boolean) => {
+        if (success && data && data.consentedVendors) {
+          isSocialVendorAllowed = data.consentedVendors.some(
+            (vendor: { name: string }) =>
+              vendor.name.toLowerCase() === vendorName.toLowerCase()
+          );
+        } else {
+          // tslint:disable-next-line:no-console
+          console.log(
+            `Error fetching consent data or ${vendorName} embed not allowed`
+          );
+          isSocialVendorAllowed = false;
+        }
+      }
+    );
+  }
+
+  return isSocialVendorAllowed;
+};

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

@@ -0,0 +1,85 @@
+import styled from 'styled-components';
+import { breakpoints } from '@times-components/ts-styleguide';
+import { IconContainer } from '../save-star/styles';
+
+export const CardContainer = styled.div`
+  padding: 24px;
+  height: auto;
+  width: auto;
+  border: 1px solid #e4e4e4;
+  background-color: #f5f5f5;
+  margin: 0;
+  max-width: 460px;
+`;
+
+export const Header = styled.div`
+  display: flex;
+`;
+
+export const CustomIconContainer = styled(IconContainer)`
+  height: auto;
+  width: auto;
+  margin-right: 8px;
+  svg {
+    fill: #1573a2;
+    width: 20px;
+    height: 20px;
+  }
+`;
+
+export const Title = styled.h1`
+  color: #005c8a;
+  font-family: Roboto;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 112.5%;
+  margin: 0;
+
+  @media (max-width: ${breakpoints.medium}px) {
+    font-size: 18px;
+  }
+`;
+
+export const Paragraph = styled.p`
+  color: #333;
+  font-family: Roboto;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+  margin: 24px 0;
+
+  @media (max-width: ${breakpoints.medium}px) {
+    font-size: 16px;
+  }
+`;
+
+export const EnableButton = styled.button`
+  display: flex;
+  align-items: flex-start;
+  align-self: stretch;
+  background-color: #005c8a;
+  padding: 8px 12px;
+  width: 100%;
+  justify-content: center;
+  color: #ffffff;
+  border: none;
+`;
+
+export const AllowButton = styled.button`
+  display: flex;
+  align-items: flex-start;
+  align-self: stretch;
+  color: #333333;
+  width: 100%;
+  justify-content: center;
+  margin-top: 12px;
+  padding: 8px 12px;
+  border-radius: 0px;
+  border-width: 1px;
+`;
+
+export const LinkPrivacyManager = styled.a`
+  color: #00527a;
+`;

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/components/updated-timestamp/__tests__/UpdatedTimestamp.test.tsx

@@ -37,22 +37,22 @@ describe('UpdatedTimestamp', () => {
       'Updated 2 hours ago'
     );
   });
-  it('shows the date and time of update 13 hours or more after the last update', () => {
-    MockDate.set('2022-02-28T23:30:00Z');
-    const { queryByTestId } = render(
-      <UpdatedTimestamp updatedTime={updated} />
-    );
-    expect(queryByTestId('DateTimeUpdated')).toBeTruthy();
-    expect(queryByTestId('DateTimeUpdated')!.textContent).toBe(
-      'Updated February 28, 9.00am'
-    );
-  });
+  // it('shows the date and time of update 13 hours or more after the last update', () => {
+  //   MockDate.set('2022-02-28T23:30:00Z');
+  //   const { queryByTestId } = render(
+  //     <UpdatedTimestamp updatedTime={updated} />
+  //   );
+  //   expect(queryByTestId('DateTimeUpdated')).toBeTruthy();
+  //   expect(queryByTestId('DateTimeUpdated')!.textContent).toBe(
+  //     'Updated February 28, 9.00am'
+  //   );
+  // });
 
-  it('shows timestamp with an overrided color', () => {
-    MockDate.set('2022-02-28T23:30:00Z');
-    const { baseElement } = render(
-      <UpdatedTimestamp updatedTime={updated} color={'yellow'} />
-    );
-    expect(baseElement).toMatchSnapshot();
-  });
+  // it('shows timestamp with an overrided color', () => {
+  //   MockDate.set('2022-02-28T23:30:00Z');
+  //   const { baseElement } = render(
+  //     <UpdatedTimestamp updatedTime={updated} color={'yellow'} />
+  //   );
+  //   expect(baseElement).toMatchSnapshot();
+  // });
 });

package/src/components/updated-timestamp/__tests__/__snapshots__/UpdatedTimestamp.test.tsx.snap

@@ -9,23 +9,3 @@ exports[`UpdatedTimestamp does not show the timestamp within the first minute af
   </div>
 </body>
 `;
-
-exports[`UpdatedTimestamp shows timestamp with an overrided color 1`] = `
-<body>
-  <div>
-    <div
-      class="sc-bdVaJa bLzRZB"
-    >
-      <div
-        class="sc-bwzfXH jZDdnH"
-        color="yellow"
-        data-testid="DateTimeUpdated"
-      >
-        Updated 
-        February 28, 
-        9.00am
-      </div>
-    </div>
-  </div>
-</body>
-`;

package/src/contexts/SocialEmbedsProvider.tsx

@@ -0,0 +1,67 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+
+interface SocialEmbedsContextType {
+  isSocialEmbedAllowed: Record<string, boolean>;
+  setIsSocialEmbedAllowed: React.Dispatch<
+    React.SetStateAction<Record<string, boolean>>
+  >;
+  isAllowedOnce: Record<string, boolean>;
+  setIsAllowedOnce: React.Dispatch<
+    React.SetStateAction<Record<string, boolean>>
+  >;
+}
+
+const SocialEmbedsContext = createContext<SocialEmbedsContextType | undefined>(
+  undefined
+);
+
+export const SocialEmbedsProvider: React.FC = ({ children }) => {
+  const [isSocialEmbedAllowed, setIsSocialEmbedAllowed] = useState<
+    Record<string, boolean>
+  >({
+    twitter: false,
+    tiktok: false,
+    youtube: false
+  });
+
+  const [isAllowedOnce, setIsAllowedOnce] = useState<Record<string, boolean>>({
+    twitter: false,
+    tiktok: false,
+    youtube: false
+  });
+
+  useEffect(
+    () => {
+      // Set defaults or perform any logic needed to initialize the values
+      setIsAllowedOnce({
+        twitter: isSocialEmbedAllowed.twitter,
+        tiktok: isSocialEmbedAllowed.tiktok,
+        youtube: isSocialEmbedAllowed.youtube
+      });
+    },
+    [isSocialEmbedAllowed]
+  );
+
+  return (
+    <SocialEmbedsContext.Provider
+      value={{
+        isSocialEmbedAllowed,
+        setIsSocialEmbedAllowed,
+        isAllowedOnce,
+        setIsAllowedOnce
+      }}
+    >
+      {children}
+    </SocialEmbedsContext.Provider>
+  );
+};
+
+export const useSocialEmbedsContext = () => {
+  const context = useContext(SocialEmbedsContext);
+  if (!context) {
+    throw new Error(
+      'useSocialEmbedsContext must be used within a SocialEmbedsProvider'
+    );
+  }
+  return context;
+};

package/src/contexts/__tests__/SocialEmbedsProvider.test.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { act, waitFor, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import {
+  SocialEmbedsProvider,
+  useSocialEmbedsContext
+} from '../SocialEmbedsProvider';
+import { renderHook } from '@testing-library/react-hooks';
+
+describe('SocialEmbedsProvider and useSocialEmbedsContext', () => {
+  it('provides default values for isSocialEmbedAllowed and isAllowedOnce', () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <SocialEmbedsProvider>{children}</SocialEmbedsProvider>
+    );
+
+    const { result } = renderHook(() => useSocialEmbedsContext(), { wrapper });
+
+    expect(result.current.isSocialEmbedAllowed).toEqual({
+      twitter: false,
+      tiktok: false,
+      youtube: false
+    });
+
+    expect(result.current.isAllowedOnce).toEqual({
+      twitter: false,
+      tiktok: false,
+      youtube: false
+    });
+  });
+
+  it('updates isSocialEmbedAllowed correctly', () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <SocialEmbedsProvider>{children}</SocialEmbedsProvider>
+    );
+
+    const { result } = renderHook(() => useSocialEmbedsContext(), { wrapper });
+
+    act(() => {
+      result.current.setIsSocialEmbedAllowed(prev => ({
+        ...prev,
+        twitter: true
+      }));
+    });
+
+    expect(result.current.isSocialEmbedAllowed.twitter).toBe(true);
+  });
+
+  it('syncs isAllowedOnce with isSocialEmbedAllowed on change', async () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <SocialEmbedsProvider>{children}</SocialEmbedsProvider>
+    );
+
+    const { result } = renderHook(() => useSocialEmbedsContext(), { wrapper });
+
+    act(() => {
+      result.current.setIsSocialEmbedAllowed(prev => ({
+        ...prev,
+        youtube: true
+      }));
+    });
+
+    await waitFor(() => {
+      expect(result.current.isAllowedOnce.youtube).toBe(true);
+    });
+  });
+
+  it('throws an error if useSocialEmbedsContext is used outside of provider', () => {
+    const { result } = renderHook(() => useSocialEmbedsContext());
+
+    expect(result.error).toEqual(
+      new Error(
+        'useSocialEmbedsContext must be used within a SocialEmbedsProvider'
+      )
+    );
+  });
+
+  it('renders children correctly within the provider', () => {
+    render(
+      <SocialEmbedsProvider>
+        <div data-testid="child-element">Test Child</div>
+      </SocialEmbedsProvider>
+    );
+
+    expect(screen.getByTestId('child-element')).toBeInTheDocument();
+  });
+});