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

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

@@ -62,7 +62,7 @@ export const ArticleSidebar: FC<ArticleSideBarProps> = ({
             }
             className="trigger-card-link"
           >
-            <PuzzleImage src={imgUrl} alt="Puzzle thumbnail" />
+            <PuzzleImage src={imgUrl} alt="Puzzle category thumbnail" />
             <ItemTitle>{title}</ItemTitle>
           </PuzzleContainer>
           <Divider />

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

@@ -3,10 +3,10 @@
 exports[`ArticleSidebar should render ArticleSidebar component 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bwzfXH kzdaiS"
+    class="sc-bwzfXH gYmlvh"
   >
     <a
-      class="trigger sc-ifAKCX kcwwi"
+      class="trigger sc-ifAKCX YFVti"
       href="https://www.thetimes.com/puzzles"
     >
       <div
@@ -18,7 +18,7 @@ exports[`ArticleSidebar should render ArticleSidebar component 1`] = `
           Puzzles for you
         </h3>
         <button
-          class="sc-gzVnrw ecbmwv"
+          class="sc-gzVnrw eoEpFe"
         >
           <svg
             aria-hidden="true"
@@ -52,7 +52,7 @@ exports[`ArticleSidebar should render ArticleSidebar component 1`] = `
       href="https://www.thetimes.com/puzzles/crossword"
     >
       <img
-        alt="Puzzle thumbnail"
+        alt="Puzzle category thumbnail"
         class="sc-iwsKbI elYeaz"
         src="https://www.thetimes.com/imageserver/image/%2Fpuzzles%2Ficons%2F33b27655-dcc9-421f-906f-b2b10dd26865.png?crop=1250%2C833%2C0%2C0&resize=500"
       />
@@ -70,7 +70,7 @@ exports[`ArticleSidebar should render ArticleSidebar component 1`] = `
       href="https://www.thetimes.com/puzzles/sudoku"
     >
       <img
-        alt="Puzzle thumbnail"
+        alt="Puzzle category thumbnail"
         class="sc-iwsKbI elYeaz"
         src="https://www.thetimes.com/imageserver/image/%2Fpuzzles%2Ficons%2F33b27655-dcc9-421f-906f-b2b10dd26865.png?crop=1250%2C833%2C0%2C0&resize=500"
       />

package/src/components/article-sidebar/styles.ts

@@ -11,7 +11,7 @@ export const Container = styled.div`
   padding-top: 12px;
   border-style: solid none none none;
   border-width: 3px;
-  border-color: #df7334;
+  border-color: #c05729;
 `;
 
 export const Description = styled.p`
@@ -47,7 +47,7 @@ export const Link = styled.a`
     }
   }
   h3 {
-    color: #df7334;
+    color: #c05729;
   }
 `;
 
@@ -68,7 +68,7 @@ export const Title = styled.h3`
 
 export const ChevronButton = styled.button`
   background-color: #eeeeee;
-  color: #df7334;
+  color: #c05729;
   border-radius: 50%;
   border: none;
   cursor: pointer;

package/src/components/newsletter-puff/InlineNewsletterPuff.tsx

@@ -1,8 +1,6 @@
-import React, { useState } from 'react';
-import { Mutation } from 'react-apollo';
+import React, { useMemo, useState } from 'react';
 
 import { GetNewsletter } from '@times-components/provider';
-import { subscribeNewsletter as subscribeNewsletterMutation } from '@times-components/provider-queries';
 import { Placeholder } from '@times-components/image';
 import { capitalise } from '@times-components/utils';
 
@@ -11,6 +9,8 @@ import { Newsletter } from './newsletter/Newsletter';
 import { TrackingContextProvider } from '../../helpers/tracking/TrackingContextProvider';
 
 import { InpContainer } from './styles';
+import { FetchProvider } from '../../helpers/fetch/FetchProvider';
+import { ContentProvider } from '../save-star/ContentProvider';
 
 type InlineNewsletterPuffProps = {
   copy: string;
@@ -25,8 +25,10 @@ export const InlineNewsletterPuff = ({
   headline,
   section
 }: InlineNewsletterPuffProps) => {
-  const [justSubscribed, setJustSubscribed] = useState(false);
-  const [justSubscribedError, setJustSubscribedError] = useState(false);
+  const [url, setUrl] = useState<string>(
+    `/api/is-subscribed-newsletter/${code}`
+  );
+  const fetchOptions = useMemo(() => ({ credentials: 'same-origin' }), []);
 
   return (
     <GetNewsletter code={code} ssr={false} debounceTimeMs={0}>
@@ -43,58 +45,44 @@ export const InlineNewsletterPuff = ({
           );
         }
 
-        if (newsletter.isSubscribed && !justSubscribed) {
+        if (newsletter.isSubscribed) {
           return null;
         }
 
         return (
-          <Mutation
-            mutation={subscribeNewsletterMutation}
-            onCompleted={({ subscribeNewsletter = {} }: any) => {
-              setJustSubscribed(subscribeNewsletter.isSubscribed);
-            }}
-            onError={() => {
-              setJustSubscribedError(true);
-            }}
-          >
-            {(
-              subscribeNewsletter: any,
-              { loading: updatingSubscription }: any
-            ) => (
-              <TrackingContextProvider
-                context={{
-                  object: 'InlineNewsletterPuff',
-                  attrs: {
-                    article_parent_name: newsletter.title,
-                    event_navigation_action: 'navigation'
-                  }
-                }}
-                scrolledEvent={{
-                  object: 'NewsletterPuffButton',
-                  attrs: {
-                    event_navigation_name:
-                      'widget : puff : sign up now : displayed',
-                    event_navigation_browsing_method: 'automated',
-                    event_navigation_action: 'navigation'
-                  }
-                }}
-              >
-                {({ intersectObserverRef }) => (
+          <FetchProvider url={url} options={fetchOptions}>
+            <TrackingContextProvider
+              context={{
+                object: 'InlineNewsletterPuff',
+                attrs: {
+                  article_parent_name: newsletter.title,
+                  event_navigation_action: 'navigation'
+                }
+              }}
+              scrolledEvent={{
+                object: 'NewsletterPuffButton',
+                attrs: {
+                  event_navigation_name:
+                    'widget : puff : sign up now : displayed',
+                  event_navigation_browsing_method: 'automated',
+                  event_navigation_action: 'navigation'
+                }
+              }}
+            >
+              {({ intersectObserverRef }) => (
+                <ContentProvider>
                   <Newsletter
                     intersectObserverRef={intersectObserverRef}
                     section={capitalise(section)}
-                    justSubscribed={justSubscribed}
-                    justSubscribedError={justSubscribedError}
                     headline={headline}
-                    updatingSubscription={updatingSubscription}
                     copy={copy}
                     code={code}
-                    subscribeNewsletter={subscribeNewsletter}
+                    subscribeNewsletter={setUrl}
                   />
-                )}
-              </TrackingContextProvider>
-            )}
-          </Mutation>
+                </ContentProvider>
+              )}
+            </TrackingContextProvider>
+          </FetchProvider>
         );
       }}
     </GetNewsletter>

package/src/components/newsletter-puff/NewsletterPuff.stories.tsx

@@ -2,10 +2,7 @@ import { showcaseConverter } from '@times-components/storybook';
 
 import React from 'react';
 import { MockedProvider } from '@times-components/provider-test-tools';
-import {
-  getNewsletter,
-  subscribeNewsletter
-} from '@times-components/provider-queries';
+import { getNewsletter } from '@times-components/provider-queries';
 
 import { AutoNewsletterPuff } from './AutoNewsletterPuff';
 import { InlineNewsletterPuff } from './InlineNewsletterPuff';
@@ -33,24 +30,6 @@ const mocks = [
         }
       }
     }
-  },
-  {
-    delay: 1000,
-    request: {
-      query: subscribeNewsletter,
-      variables: {
-        code: 'TNL-101'
-      }
-    },
-    result: {
-      data: {
-        subscribeNewsletter: {
-          id: 'a2l6E000000CdHzQAK',
-          isSubscribed: true,
-          __typename: 'Newsletter'
-        }
-      }
-    }
   }
 ];
 

package/src/components/newsletter-puff/__tests__/AutoNewsletterPuff.test.tsx

@@ -5,10 +5,7 @@ import { cleanup, render } from '@testing-library/react';
 import { AutoNewsletterPuff } from '../AutoNewsletterPuff';
 import FakeIntersectionObserver from '../../../test-utils/FakeIntersectionObserver';
 import { MockedProvider } from '@times-components/provider-test-tools';
-import {
-  getNewsletter,
-  subscribeNewsletter
-} from '@times-components/provider-queries';
+import { getNewsletter } from '@times-components/provider-queries';
 
 const defaultProps = {
   code: '123',
@@ -35,24 +32,6 @@ const mocks = [
         }
       }
     }
-  },
-  {
-    delay: 1000,
-    request: {
-      query: subscribeNewsletter,
-      variables: {
-        code: 'TNL-101'
-      }
-    },
-    result: {
-      data: {
-        subscribeNewsletter: {
-          id: 'a2l6E000000CdHzQAK',
-          isSubscribed: true,
-          __typename: 'Newsletter'
-        }
-      }
-    }
   }
 ];
 

package/src/components/newsletter-puff/__tests__/InlineNewsletterPuff.test.tsx

@@ -2,22 +2,25 @@ import React from 'react';
 
 import { delay } from '@times-components/test-utils';
 
-import { render, fireEvent, cleanup } from '@testing-library/react';
+import { render, cleanup, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
 import { MockedProvider } from '@times-components/provider-test-tools';
 
 import mockDate from 'mockdate';
 
-import {
-  getNewsletter,
-  subscribeNewsletter
-} from '@times-components/provider-queries';
+import { getNewsletter } from '@times-components/provider-queries';
 import { InlineNewsletterPuff } from '../InlineNewsletterPuff';
 import { TrackingContextProvider } from '../../../helpers/tracking/TrackingContextProvider';
+import { useFetch } from '../../../helpers/fetch/FetchProvider';
 
 import FakeIntersectionObserver from '../../../test-utils/FakeIntersectionObserver';
 
+jest.mock('../../../helpers/fetch/FetchProvider', () => ({
+  ...jest.requireActual('../../../helpers/fetch/FetchProvider'),
+  useFetch: jest.fn()
+}));
+
 const renderComponent = (
   analyticsStream?: () => void,
   mocks: any[] = [
@@ -38,25 +41,6 @@ const renderComponent = (
           }
         }
       }
-    },
-    {
-      delay: 50,
-      request: {
-        query: subscribeNewsletter,
-        variables: {
-          code: 'TNL-119'
-        }
-      },
-      result: {
-        data: {
-          subscribeNewsletter: {
-            id: 'a2l6E000000CdHzQAK',
-            isSubscribed: true,
-            title: 'RED BOX',
-            __typename: 'Newsletter'
-          }
-        }
-      }
     }
   ]
 ) =>
@@ -95,22 +79,6 @@ describe('Inline Newsletter Puff', () => {
     expect(component.baseElement).toMatchSnapshot();
   });
 
-  it('renders signup state', async () => {
-    const component = renderComponent();
-    await component.findAllByText('Sign up with one click');
-    expect(component.baseElement).toMatchSnapshot();
-  });
-
-  it('renders loading state state', async () => {
-    const component = renderComponent();
-    const oneClickSignUp = await component.findAllByText(
-      'Sign up with one click'
-    );
-
-    fireEvent.click(oneClickSignUp[0]);
-    expect(component.baseElement).toMatchSnapshot();
-  });
-
   it('renders null when is already subscribed', async () => {
     const component = renderComponent(jest.fn(), [
       {
@@ -137,6 +105,26 @@ describe('Inline Newsletter Puff', () => {
     expect(component.baseElement).toMatchSnapshot();
   });
 
+  it('renders signup state', async () => {
+    (useFetch as jest.Mock).mockReturnValue({ data: { isSubscribed: false } });
+
+    const component = renderComponent();
+    await component.findAllByText('Sign up with one click');
+    expect(component.baseElement).toMatchSnapshot();
+  });
+
+  it('renders loading state state', async () => {
+    (useFetch as jest.Mock).mockReturnValue({ data: { isSubscribed: false } });
+
+    const component = renderComponent();
+    const oneClickSignUp = await component.findAllByText(
+      'Sign up with one click'
+    );
+
+    fireEvent.click(oneClickSignUp[0]);
+    expect(component.baseElement).toMatchSnapshot();
+  });
+
   it('renders signup view when not already subscribed', async () => {
     const component = renderComponent();
 
@@ -159,6 +147,9 @@ describe('Inline Newsletter Puff', () => {
 
     it('Sign up with one click : displayed', async () => {
       const analyticsStream = jest.fn();
+      (useFetch as jest.Mock).mockReturnValue({
+        data: { isSubscribed: false }
+      });
       const component = renderComponent(analyticsStream);
 
       await component.findAllByText('Sign up with one click');

package/src/components/newsletter-puff/__tests__/__snapshots__/InlineNewsletterPuff.test.tsx.snap

@@ -7,54 +7,37 @@ exports[`Inline Newsletter Puff renders loading state state 1`] = `
       class="sc-htpNat sc-ifAKCX iWYiTB"
     >
       <div
-        class="sc-htpNat sc-bZQynM fcQclH"
-      >
-        <div
-          class="sc-htpNat sc-htoDjs bnLiNW"
-        >
-          <div
-            class="sc-gzVnrw TDlzj"
-          />
-          <div
-            class="sc-gzVnrw TDlzj"
-          />
-          <div
-            class="sc-gzVnrw TDlzj"
-          />
-        </div>
-      </div>
-      <div
-        class="sc-htpNat sc-iwsKbI cuimXU"
+        class="sc-htpNat sc-dnqmqq duLROv"
       >
         <div
           class="sc-bxivhb sc-gqjmRU kcwRFH"
         >
+          You've succesfully signed up to
+           
           <div
             class="sc-bxivhb sc-gZMcBi bklePC"
           >
-            Politics. Explained.
+            Politics. Explained..
              
           </div>
-          Sign up to receive our brilliant Red Box newsletter, Matt Chorley\`s poke at politics delivered every weekday morning at 8am. 
-          <div
-            class="sc-htpNat sc-VigVT cSaWjg"
+          <a
+            class="link__RespLink-sc-1ocvixa-0 dfMuic"
+            href="https://home.thetimes.co.uk/myNews"
           >
-            <button
-              class="sc-bwzfXH gHDjoa"
+            <div
+              class="hover-icon__HoverIcon-sc-1ge5rtz-0 jJVcIr"
             >
-              Sign up with one click
-            </button>
-          </div>
+              <div
+                class="sc-bxivhb sc-EHOje jzxwzj"
+              >
+                Explore our newsletters
+              </div>
+            </div>
+          </a>
         </div>
         <div
-          class="sc-htpNat sc-VigVT iWOUWL"
-        >
-          <button
-            class="sc-bdVaJa knKdEu"
-          >
-            Sign up with one click
-          </button>
-        </div>
+          class="sc-htpNat sc-jTzLTM gzkEml"
+        />
       </div>
     </div>
   </div>

package/src/components/newsletter-puff/newsletter/Newsletter.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import { NewsletterPuffButton } from '../newsletter-puff-button/NewsletterPuffButton';
 import { NewsletterPuffLink } from '../newsletter-puff-link/NewsletterPuffLink';
@@ -18,55 +18,55 @@ import { InpContainer } from '../styles';
 type NewsletterProps = {
   intersectObserverRef: (ref: HTMLElement | null) => void;
   section?: string;
-  justSubscribed: boolean;
-  justSubscribedError: boolean;
   headline: string;
-  updatingSubscription: boolean;
   copy: string;
   code: string;
-  subscribeNewsletter: ({}) => {};
+  subscribeNewsletter: any;
+  loading?: boolean;
+  error?: string;
 };
 
 export const Newsletter = ({
   intersectObserverRef,
   section,
-  justSubscribed,
-  justSubscribedError,
   headline,
-  updatingSubscription,
   copy,
   code,
-  subscribeNewsletter
+  subscribeNewsletter,
+  loading,
+  error
 }: NewsletterProps) => {
+  const [justSubscribed, setJustSubscribed] = useState(false);
   const PuffButton = (style: 'link' | 'button') => (
     <InpSignupCTAContainer ref={intersectObserverRef} childStyle={style}>
       <NewsletterPuffButton
         style={style}
-        updatingSubscription={updatingSubscription}
+        updatingSubscription={loading}
         onPress={() => {
-          if (!updatingSubscription) {
-            subscribeNewsletter({ variables: { code } });
+          if (!loading) {
+            setJustSubscribed(true);
+            subscribeNewsletter(`/api/subscribe-newsletter/${code}`);
           }
         }}
       />
     </InpSignupCTAContainer>
   );
-
   return (
     <React.Fragment>
       <InpContainer section={section}>
-        {updatingSubscription && <LoadingOverlay />}
-        {justSubscribed && (
-          <InpSubscribedContainer>
-            <InpCopy>
-              You've succesfully signed up to{' '}
-              <InpSignupHeadline>{`${headline}.`} </InpSignupHeadline>
-              <NewsletterPuffLink />
-            </InpCopy>
-            <InpPreferencesContainer />
-          </InpSubscribedContainer>
-        )}
-        {justSubscribedError && (
+        {loading && <LoadingOverlay />}
+        {!error &&
+          justSubscribed && (
+            <InpSubscribedContainer>
+              <InpCopy>
+                You've succesfully signed up to{' '}
+                <InpSignupHeadline>{`${headline}.`} </InpSignupHeadline>
+                <NewsletterPuffLink />
+              </InpCopy>
+              <InpPreferencesContainer />
+            </InpSubscribedContainer>
+          )}
+        {error && (
           <InpSubscribedContainer>
             <InpCopy>
               An error occurred. Please use the link below.
@@ -76,7 +76,7 @@ export const Newsletter = ({
           </InpSubscribedContainer>
         )}
         {!justSubscribed &&
-          !justSubscribedError && (
+          !error && (
             <InpSignupContainer>
               <InpCopy>
                 <InpSignupHeadline>{headline} </InpSignupHeadline>

package/src/components/recommended-articles/__tests__/formatters.test.tsx

@@ -23,7 +23,7 @@ const expectedArticles = [
     summary:
       'How is your bank balance? Even if the cost of living crisis doesn’t constitute a crisis for you, you’ll have noticed that you’re suddenly paying more for  and what felt reasonable may now...',
     url:
-      'https://www.thetimes.co.uk/article/save-or-splurge-what-experts-spend-their-own-money-on-tdd65qlj6'
+      'l1/l2/article/save-or-splurge-what-experts-spend-their-own-money-on-tdd65qlj6'
   },
   {
     byline: '',
@@ -42,8 +42,7 @@ const expectedArticles = [
     label: 'Obituary',
     summary:
       'On August 1, 1981, Major Ian Crooke, the operations officer of 22 Special Air Service in Hereford, received a telephone call from London. A Marxist coup d’état was taking place in the former British...',
-    url:
-      'https://www.thetimes.co.uk/article/lieutenant-colonel-ian-crooke-obituary-t0b890wgp'
+    url: 'l1/l2/article/lieutenant-colonel-ian-crooke-obituary-t0b890wgp'
   },
   {
     byline: 'Patrick Maguire',
@@ -62,8 +61,7 @@ const expectedArticles = [
     label: 'RED BOX | PATRICK MAGUIRE',
     summary:
       'Worse than May. Worse than Major. As bad as Thatcher. of his own MPs, far more than even the most pessimistic whip predicted this time yesterday. Can Boris...',
-    url:
-      'https://www.thetimes.co.uk/article/is-the-party-over-for-boris-johnson-k8s0jxv6r'
+    url: 'l1/l2/article/is-the-party-over-for-boris-johnson-k8s0jxv6r'
   }
 ];
 

package/src/components/recommended-articles/formatters.ts

@@ -31,6 +31,7 @@ type Article = {
   bylines?: Byline[];
   summary?: Summary;
   media?: Media;
+  categoryPath: string;
 };
 
 // HELPERS
@@ -66,7 +67,7 @@ const getImage = (media?: Media) => {
 
 const formatArticle = (article: Article): SliceArticle => {
   return {
-    url: article.url,
+    url: article.categoryPath,
     label: article.label,
     byline: getBylines(article.bylines),
     headline: article.headline,

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

@@ -0,0 +1,67 @@
+import React, { FC, MouseEvent, Dispatch, SetStateAction } from 'react';
+import {
+  AllowButton,
+  CardContainer,
+  CustomIconContainer,
+  EnableButton,
+  Header,
+  LinkPrivacyManager,
+  Paragraph,
+  Title
+} from './styles';
+import { InfoIcon } from '../inline-message/InfoIcon';
+import { getVendorTitle } from './helpers/getVendorTitle';
+import { enableCookies } from './helpers/enableCookies';
+import { openPrivacyModal } from './helpers/privacyModal';
+import { socialMediaVendors } from './helpers/socialMediaVendors';
+import { VendorName } from './types';
+import { modalType } from './constants';
+
+type BlockedEmbedMessageProps = {
+  vendorName: VendorName;
+  setIsSocialEmbedAllowed: Dispatch<SetStateAction<boolean>>;
+};
+
+export const BlockedEmbedMessage: FC<BlockedEmbedMessageProps> = ({
+  vendorName,
+  setIsSocialEmbedAllowed
+}) => {
+  const allowCookiesOnce = () => {
+    enableCookies(vendorName);
+    setIsSocialEmbedAllowed(true);
+  };
+
+  const handlePrivacyManagerClick = (e: MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+    openPrivacyModal(
+      modalType.GDPR,
+      window.__TIMES_CONFIG__.sourcepoint.gdprMessageId
+    );
+  };
+
+  return (
+    <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)}>
+        Enable cookies
+      </EnableButton>
+      <AllowButton onClick={() => allowCookiesOnce()}>
+        Allow cookies once
+      </AllowButton>
+    </CardContainer>
+  );
+};