@times-components/ts-components 1.105.1-alpha.0 → 1.105.1-alpha.13

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/__tests__/InlineNewsletterPuff.test.tsx

@@ -2,22 +2,17 @@ import React from 'react';
 
 import { delay } from '@times-components/test-utils';
 
-import { render, fireEvent, cleanup } from '@testing-library/react';
+import { render, cleanup } 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 FakeIntersectionObserver from '../../../test-utils/FakeIntersectionObserver';
-
 const renderComponent = (
   analyticsStream?: () => void,
   mocks: any[] = [
@@ -38,25 +33,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 +71,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(), [
       {
@@ -144,39 +104,4 @@ describe('Inline Newsletter Puff', () => {
 
     expect(component.baseElement).toMatchSnapshot();
   });
-
-  describe('intersectionObserverTests', () => {
-    let oldIntersectionObserver: typeof IntersectionObserver;
-    beforeEach(() => {
-      oldIntersectionObserver = window.IntersectionObserver;
-      // @ts-ignore
-      window.IntersectionObserver = FakeIntersectionObserver;
-    });
-
-    afterEach(() => {
-      window.IntersectionObserver = oldIntersectionObserver;
-    });
-
-    it('Sign up with one click : displayed', async () => {
-      const analyticsStream = jest.fn();
-      const component = renderComponent(analyticsStream);
-
-      await component.findAllByText('Sign up with one click');
-
-      FakeIntersectionObserver.intersect();
-
-      expect(analyticsStream).toHaveBeenCalledWith({
-        action: 'Scrolled',
-        component: 'ArticleSkeleton',
-        object: 'NewsletterPuffButton',
-        attrs: {
-          article_parent_name: 'RED BOX',
-          eventTime: '2021-05-03T00:00:00.000Z',
-          event_navigation_action: 'navigation',
-          event_navigation_browsing_method: 'automated',
-          event_navigation_name: 'widget : puff : sign up now : displayed'
-        }
-      });
-    });
-  });
 });

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

@@ -1,66 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Inline Newsletter Puff renders loading state state 1`] = `
-<body>
-  <div>
-    <div
-      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"
-      >
-        <div
-          class="sc-bxivhb sc-gqjmRU kcwRFH"
-        >
-          <div
-            class="sc-bxivhb sc-gZMcBi bklePC"
-          >
-            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"
-          >
-            <button
-              class="sc-bwzfXH gHDjoa"
-            >
-              Sign up with one click
-            </button>
-          </div>
-        </div>
-        <div
-          class="sc-htpNat sc-VigVT iWOUWL"
-        >
-          <button
-            class="sc-bdVaJa knKdEu"
-          >
-            Sign up with one click
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</body>
-`;
-
 exports[`Inline Newsletter Puff renders null when is already subscribed 1`] = `
 <body>
   <div />
@@ -105,50 +44,6 @@ exports[`Inline Newsletter Puff renders placeholder when loading 1`] = `
 </body>
 `;
 
-exports[`Inline Newsletter Puff renders signup state 1`] = `
-<body>
-  <div>
-    <div
-      class="sc-htpNat sc-ifAKCX iWYiTB"
-    >
-      <div
-        class="sc-htpNat sc-iwsKbI cuimXU"
-      >
-        <div
-          class="sc-bxivhb sc-gqjmRU kcwRFH"
-        >
-          <div
-            class="sc-bxivhb sc-gZMcBi bklePC"
-          >
-            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"
-          >
-            <button
-              class="sc-bwzfXH gHDjoa"
-            >
-              Sign up with one click
-            </button>
-          </div>
-        </div>
-        <div
-          class="sc-htpNat sc-VigVT iWOUWL"
-        >
-          <button
-            class="sc-bdVaJa knKdEu"
-          >
-            Sign up with one click
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</body>
-`;
-
 exports[`Inline Newsletter Puff renders signup view when not already subscribed 1`] = `
 <body>
   <div>
@@ -156,37 +51,30 @@ exports[`Inline Newsletter Puff renders signup view when not already subscribed
       class="sc-htpNat sc-ifAKCX iWYiTB"
     >
       <div
-        class="sc-htpNat sc-iwsKbI cuimXU"
+        class="sc-htpNat sc-dnqmqq duLROv"
       >
         <div
           class="sc-bxivhb sc-gqjmRU kcwRFH"
         >
-          <div
-            class="sc-bxivhb sc-gZMcBi bklePC"
-          >
-            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"
+          An error occurred. Please use the link below.
+          <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,44 +18,44 @@ 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;
+  data?: { isSubscribed: boolean };
 };
 
 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 />}
+        {loading && <LoadingOverlay />}
         {justSubscribed && (
           <InpSubscribedContainer>
             <InpCopy>
@@ -66,7 +66,7 @@ export const Newsletter = ({
             <InpPreferencesContainer />
           </InpSubscribedContainer>
         )}
-        {justSubscribedError && (
+        {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/opta/cricket/scorecard/OptaCricketScorecard.tsx

@@ -57,7 +57,7 @@ export const OptaCricketScorecard: React.FC<{
           show_bowling: true,
           show_economy: true,
           show_fow: true,
-          player_naming: 'last_name',
+          player_naming: 'full',
           breakpoints: '520'
         }).outerHTML;
 

package/src/components/opta/football/fixtures-ticker/OptaFootballFixturesTicker.stories.tsx

@@ -25,7 +25,7 @@ storiesOf('Typescript Component/In Article/Football/Fixtures', module)
     const selComp = select('Competition', competitons, '8');
     return (
       <OptaFootballFixturesTicker
-        season={text('season', '2023')}
+        season={text('season', '2024')}
         competition={selComp}
         date_from=""
         date_to=""
@@ -42,7 +42,7 @@ storiesOf('Typescript Component/In Article/Football/Fixtures', module)
     const selComp = select('Competition', competitons, '8');
     return (
       <OptaFootballFixturesTicker
-        season={text('season', '2023')}
+        season={text('season', '2024')}
         competition={selComp}
         date_from=""
         date_to=""

package/src/components/opta/football/fixtures-ticker/__tests__/__snapshots__/OptaFootballFixturesTicker.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`OptaFootballFixturesTicker with flags should render correctly 1`] = `
     class="sc-bxivhb dBqngZ"
   >
     <div
-      class="sc-htpNat sc-EHOje iKoDpo"
+      class="sc-htpNat sc-EHOje gQHnKF"
     />
     <div
       class="sc-bwzfXH uxFfR"
@@ -24,7 +24,7 @@ exports[`OptaFootballFixturesTicker with flags should render correctly 2`] = `
     class="sc-bxivhb dBqngZ"
   >
     <div
-      class="sc-htpNat sc-EHOje iKoDpo"
+      class="sc-htpNat sc-EHOje gQHnKF"
     >
       <div>
         Widget
@@ -40,7 +40,7 @@ exports[`OptaFootballFixturesTicker without flags should render correctly 1`] =
     class="sc-bxivhb dBqngZ"
   >
     <div
-      class="sc-htpNat sc-EHOje iKoDpo"
+      class="sc-htpNat sc-EHOje gQHnKF"
     />
     <div
       class="sc-bwzfXH uxFfR"
@@ -58,7 +58,7 @@ exports[`OptaFootballFixturesTicker without flags should render correctly 2`] =
     class="sc-bxivhb dBqngZ"
   >
     <div
-      class="sc-htpNat sc-EHOje iKoDpo"
+      class="sc-htpNat sc-EHOje gQHnKF"
     >
       <div>
         Widget
@@ -74,7 +74,7 @@ exports[`OptaFootballFixturesTicker without flags should render correctly with f
     class="sc-bxivhb dBqngZ"
   >
     <div
-      class="sc-htpNat sc-EHOje iKoDpo"
+      class="sc-htpNat sc-EHOje gQHnKF"
     />
     <div
       class="sc-bwzfXH uxFfR"
@@ -92,7 +92,7 @@ exports[`OptaFootballFixturesTicker without flags should render correctly with f
     class="sc-bxivhb dBqngZ"
   >
     <div
-      class="sc-htpNat sc-EHOje iKoDpo"
+      class="sc-htpNat sc-EHOje gQHnKF"
     >
       <div>
         Widget
@@ -108,7 +108,7 @@ exports[`OptaFootballFixturesTicker without flags should render correctly with i
     class="sc-bxivhb dBqngZ"
   >
     <div
-      class="sc-htpNat sc-EHOje eZPTBn"
+      class="sc-htpNat sc-EHOje cjTULJ"
     />
     <div
       class="sc-bwzfXH uxFfR"
@@ -126,7 +126,7 @@ exports[`OptaFootballFixturesTicker without flags should render correctly with i
     class="sc-bxivhb dBqngZ"
   >
     <div
-      class="sc-htpNat sc-EHOje eZPTBn"
+      class="sc-htpNat sc-EHOje cjTULJ"
     >
       <div>
         Widget

package/src/components/opta/football/fixtures-ticker/styles.ts

@@ -225,18 +225,26 @@ export const WidgetContainer = styled(WidgetContainerBase)<{
       border-start-start-radius: 4px;
       border-start-end-radius: 4px;
 
-      @media (prefers-color-scheme: dark) {
-        color: #e4e4e4 !important;
-      }
+      ${({ isApp }) =>
+        isApp &&
+        `
+          @media (prefers-color-scheme: dark) {
+          color: #e4e4e4 !important;
+        }
+      `}
     }
 
     .Opta-timings .Opta-Time * {
       font-weight: 700;
       color: #01000d !important;
 
-      @media (prefers-color-scheme: dark) {
-        color: #fff !important;
-      }
+      ${({ isApp }) =>
+        isApp &&
+        `
+        @media (prefers-color-scheme: dark) {
+          color: #fff !important;
+        }
+      `}
     }
 
     .Opta-TeamName,
@@ -244,9 +252,13 @@ export const WidgetContainer = styled(WidgetContainerBase)<{
       color: #01000d !important;
       font-family: 'Roboto-Medium' !important;
 
-      @media (prefers-color-scheme: dark) {
-        color: #fff !important;
-      }
+      ${({ isApp }) =>
+        isApp &&
+        `
+        @media (prefers-color-scheme: dark) {
+          color: #fff !important;
+        }
+      `}
     }
 
     .Opta-Away {
@@ -259,9 +271,13 @@ export const WidgetContainer = styled(WidgetContainerBase)<{
       > div {
         background-color: #f5f5f5 !important;
 
-        @media (prefers-color-scheme: dark) {
-          background-color: #333 !important;
-        }
+        ${({ isApp }) =>
+          isApp &&
+          `
+          @media (prefers-color-scheme: dark) {
+            background-color: #333 !important;
+          }
+        `}
       }
       .Opta-Team-Score::after {
         content: '-';
@@ -275,10 +291,14 @@ export const WidgetContainer = styled(WidgetContainerBase)<{
     &.Opta-result > div {
       border: 1px solid #ccc !important;
 
-      @media (prefers-color-scheme: dark) {
-        background-color: #1d1d1b !important;
-        border: 1px solid #333 !important;
-      }
+      ${({ isApp }) =>
+        isApp &&
+        `
+        @media (prefers-color-scheme: dark) {
+          background-color: #1d1d1b !important;
+          border: 1px solid #333 !important;
+        }
+      `}
 
       &.Opta-timings {
         border-bottom: none !important;
@@ -294,10 +314,14 @@ export const WidgetContainer = styled(WidgetContainerBase)<{
     &.Opta-live > div {
       border: 1px solid #01000d !important;
 
-      @media (prefers-color-scheme: dark) {
-        background-color: #121212 !important;
-        border: 1px solid #e4e4e4 !important;
-      }
+      ${({ isApp }) =>
+        isApp &&
+        `
+        @media (prefers-color-scheme: dark) {
+          background-color: #121212 !important;
+          border: 1px solid #e4e4e4 !important;
+        }
+      `}
 
       &.Opta-timings {
         border-bottom: none !important;