@times-components/ts-components 1.52.4 → 1.54.0

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

@@ -6,8 +6,7 @@ export const AutoNewsletterPuff = ({
   code,
   copy,
   headline,
-  imageUri,
-  label
+  section
 }: AutoNewsletterPuffProps) => (
   <ViewCountWrapper
     trackingName={`auto-puff-${code}`}
@@ -17,8 +16,7 @@ export const AutoNewsletterPuff = ({
       code={code}
       copy={copy}
       headline={headline}
-      imageUri={imageUri}
-      label={label}
+      section={section}
     />
   </ViewCountWrapper>
 );
@@ -27,6 +25,5 @@ type AutoNewsletterPuffProps = {
   code: string;
   copy: string;
   headline: string;
-  imageUri: string;
-  label?: string;
+  section?: string;
 };

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

@@ -3,32 +3,19 @@ import { Mutation } from 'react-apollo';
 
 import { GetNewsletter } from '@times-components/provider';
 import { subscribeNewsletter as subscribeNewsletterMutation } from '@times-components/provider-queries';
-import Image, { Placeholder } from '@times-components/image';
+import { Placeholder } from '@times-components/image';
 
-import { NewsletterPuffButton } from './NewsletterPuffButton';
-
-import { NewsletterPuffLink } from './NewsletterPuffLink';
+import { Newsletter } from './newsletter/Newsletter';
 
 import { TrackingContextProvider } from '../../helpers/tracking/TrackingContextProvider';
+import { capitaliseFirstCharacter } from '../../helpers/text-formatting/CapitaliseFirstCharacter';
 
-import {
-  InpContainer,
-  InpCopy,
-  InpImageContainer,
-  InpPreferencesContainer,
-  InpSignupContainer,
-  InpSignupCTAContainer,
-  InpSignupHeadline,
-  InpSignupLabel,
-  InpSubscribedContainer,
-  InpSubscribedHeadline
-} from './styles';
+import { InpContainer } from './styles';
 
 type InlineNewsletterPuffProps = {
   copy: string;
   headline: string;
-  imageUri: string;
-  label?: string;
+  section?: string;
   code: string;
 };
 
@@ -36,8 +23,7 @@ export const InlineNewsletterPuff = ({
   code,
   copy,
   headline,
-  imageUri,
-  label
+  section
 }: InlineNewsletterPuffProps) => {
   const [justSubscribed, setJustSubscribed] = useState(false);
 
@@ -90,39 +76,16 @@ export const InlineNewsletterPuff = ({
                 }}
               >
                 {({ intersectObserverRef }) => (
-                  <InpContainer>
-                    <InpImageContainer>
-                      <Image aspectRatio={1.42} uri={imageUri} />
-                    </InpImageContainer>
-                    {justSubscribed ? (
-                      <InpSubscribedContainer>
-                        <InpSubscribedHeadline>
-                          {`You’ve successfully signed up to ${
-                            newsletter.title
-                          }`}
-                        </InpSubscribedHeadline>
-                        <InpPreferencesContainer>
-                          <NewsletterPuffLink />
-                        </InpPreferencesContainer>
-                      </InpSubscribedContainer>
-                    ) : (
-                      <InpSignupContainer>
-                        <InpSignupLabel>{label}</InpSignupLabel>
-                        <InpSignupHeadline>{headline}</InpSignupHeadline>
-                        <InpCopy>{copy}</InpCopy>
-                        <InpSignupCTAContainer ref={intersectObserverRef}>
-                          <NewsletterPuffButton
-                            updatingSubscription={updatingSubscription}
-                            onPress={() => {
-                              if (!updatingSubscription) {
-                                subscribeNewsletter({ variables: { code } });
-                              }
-                            }}
-                          />
-                        </InpSignupCTAContainer>
-                      </InpSignupContainer>
-                    )}
-                  </InpContainer>
+                  <Newsletter
+                    intersectObserverRef={intersectObserverRef}
+                    section={capitaliseFirstCharacter(section)}
+                    justSubscribed={justSubscribed}
+                    headline={headline}
+                    updatingSubscription={updatingSubscription}
+                    copy={copy}
+                    code={code}
+                    subscribeNewsletter={subscribeNewsletter}
+                  />
                 )}
               </TrackingContextProvider>
             )}

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

@@ -11,7 +11,7 @@ import { AutoNewsletterPuff } from './AutoNewsletterPuff';
 import { InlineNewsletterPuff } from './InlineNewsletterPuff';
 
 import { TrackingContextProvider } from '../../helpers/tracking/TrackingContextProvider';
-import { PreviewNewsletterPuff } from './PreviewNewsletterPuff';
+import { PreviewNewsletterPuff } from './preview-newsletter-puff/PreviewNewsletterPuff';
 
 import analyticsStream from '../../fixtures/analytics-actions/analytics-actions';
 
@@ -72,10 +72,7 @@ const showcase = {
                 'copy',
                 'We’ll send you our top stories, across all sections, straight to your inbox. Simple as that.'
               )}
-              imageUri={text(
-                'imageUri',
-                'https://www.thetimes.co.uk/imageserver/image/methode%2Ftimes%2Fprod%2Fweb%2Fbin%2F728c3e68-5311-4533-809a-b313a6503789.jpg?resize=800'
-              )}
+              section="sport"
             />
           </TrackingContextProvider>
         </MockedProvider>
@@ -94,16 +91,13 @@ const showcase = {
             context={{ component: 'ArticleSkeleton' }}
           >
             <InlineNewsletterPuff
+              section="news"
               code={text('code', 'TNL-101')}
               headline={text('headline', 'Best of Times')}
               copy={text(
                 'copy',
                 'We’ll send you our top stories, across all sections, straight to your inbox. Simple as that.'
               )}
-              imageUri={text(
-                'imageUri',
-                'https://www.thetimes.co.uk/imageserver/image/methode%2Ftimes%2Fprod%2Fweb%2Fbin%2F728c3e68-5311-4533-809a-b313a6503789.jpg?resize=800'
-              )}
             />
           </TrackingContextProvider>
         </MockedProvider>
@@ -117,15 +111,12 @@ const showcase = {
       // eslint-disable-next-line react/prop-types
       component: ({ text }: any) => (
         <PreviewNewsletterPuff
+          section="sport"
           headline={text('headline', 'Best of Times')}
           copy={text(
             'copy',
             'We’ll send you our top stories, across all sections, straight to your inbox. Simple as that.'
           )}
-          imageUri={text(
-            'imageUri',
-            'https://www.thetimes.co.uk/imageserver/image/methode%2Ftimes%2Fprod%2Fweb%2Fbin%2F728c3e68-5311-4533-809a-b313a6503789.jpg?resize=800'
-          )}
         />
       ),
 

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

@@ -13,9 +13,7 @@ import {
 const defaultProps = {
   code: '123',
   copy: 'abc',
-  headline: 'headline',
-  imageUri: 'http://jpeg.jpg',
-  label: 'news'
+  headline: 'headline'
 };
 
 const mocks = [

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

@@ -69,13 +69,10 @@ const renderComponent = (
         <InlineNewsletterPuff
           {...{
             code: 'TNL-119',
-
-            label: 'STRAIGHT IN YOUR INBOX',
+            section: 'news',
             headline: 'Politics. Explained.',
             copy:
-              'Sign up to receive our brilliant Red Box newsletter, Matt Chorley`s poke at politics delivered every weekday morning at 8am.',
-            imageUri:
-              'https://nuk-tnl-deck-prod-static.s3-eu-west-1.amazonaws.com/uploads/2aa9050e6c3d4de682f11a4802ebba96.jpg'
+              'Sign up to receive our brilliant Red Box newsletter, Matt Chorley`s poke at politics delivered every weekday morning at 8am.'
           }}
         />
       </TrackingContextProvider>
@@ -100,7 +97,15 @@ describe('Inline Newsletter Puff', () => {
 
   it('renders signup state', async () => {
     const component = renderComponent();
-    await component.findByText('Sign up now');
+    await component.findAllByText('One click sign up');
+    expect(component.baseElement).toMatchSnapshot();
+  });
+
+  it('renders loading state state', async () => {
+    const component = renderComponent();
+    const oneClickSignUp = await component.findAllByText('One click sign up');
+
+    fireEvent.click(oneClickSignUp[0]);
     expect(component.baseElement).toMatchSnapshot();
   });
 
@@ -138,90 +143,6 @@ describe('Inline Newsletter Puff', () => {
     expect(component.baseElement).toMatchSnapshot();
   });
 
-  describe('Clicking Subscribe', () => {
-    it("renders 'saving' when the button is clicked", async () => {
-      const component = renderComponent(() => true);
-
-      const signupButton = await component.findByText('Sign up now');
-      fireEvent.click(signupButton);
-
-      expect(component.baseElement).toMatchSnapshot();
-      expect(await component.findByText('Saving…')).toBeTruthy();
-    });
-
-    it('triggers analytics when subscribed', async () => {
-      const analyticsStream = jest.fn();
-      const component = renderComponent(analyticsStream);
-
-      const signupButton = await component.findByText('Sign up now');
-      fireEvent.click(signupButton);
-
-      await component.findByText('Saving…');
-
-      expect(analyticsStream).toHaveBeenCalledWith({
-        action: 'Clicked',
-        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: 'click',
-          event_navigation_name: 'widget : puff : sign up now'
-        }
-      });
-    });
-  });
-
-  describe('Manage preferences ', () => {
-    beforeEach(() => {
-      mockDate.set(1620000000000);
-    });
-
-    afterEach(() => {
-      mockDate.reset();
-      jest.clearAllMocks();
-      cleanup();
-    });
-    it('renders the success view after subscribing ', async () => {
-      const component = renderComponent(() => true);
-
-      const signupButton = await component.findByText('Sign up now');
-      fireEvent.click(signupButton);
-
-      expect(
-        await component.findByText('Manage preferences here')
-      ).toBeTruthy();
-      expect(component.baseElement).toMatchSnapshot();
-    });
-
-    it('triggers analytics event when manage preferences clicked', async () => {
-      const analyticsStream = jest.fn();
-      const component = renderComponent(analyticsStream);
-
-      const signupButton = await component.findByText('Sign up now');
-      fireEvent.click(signupButton);
-
-      const link = await component.findByText('Manage preferences here');
-
-      analyticsStream.mockClear();
-
-      fireEvent.click(link);
-      expect(analyticsStream).toHaveBeenCalledWith({
-        action: 'Clicked',
-        object: 'NewsletterPuffLink',
-        component: 'ArticleSkeleton',
-        attrs: {
-          article_parent_name: 'RED BOX',
-          eventTime: '2021-05-03T00:00:00.000Z',
-          event_navigation_action: 'navigation',
-          event_navigation_browsing_method: 'click',
-          event_navigation_name: 'widget : puff : manage preferences here'
-        }
-      });
-    });
-  });
-
   describe('intersectionObserverTests', () => {
     let oldIntersectionObserver: typeof IntersectionObserver;
     beforeEach(() => {
@@ -234,11 +155,11 @@ describe('Inline Newsletter Puff', () => {
       window.IntersectionObserver = oldIntersectionObserver;
     });
 
-    it('sign up now : displayed', async () => {
+    it('One click sign up : displayed', async () => {
       const analyticsStream = jest.fn();
       const component = renderComponent(analyticsStream);
 
-      await component.findByText('Sign up now');
+      await component.findAllByText('One click sign up');
 
       FakeIntersectionObserver.intersect();
 
@@ -255,32 +176,5 @@ describe('Inline Newsletter Puff', () => {
         }
       });
     });
-    it('manage preferences here : displayed', async () => {
-      const analyticsStream = jest.fn();
-      const component = renderComponent(analyticsStream);
-
-      const signupButton = await component.findByText('Sign up now');
-      fireEvent.click(signupButton);
-
-      await component.findByText('Manage preferences here');
-
-      analyticsStream.mockClear();
-
-      FakeIntersectionObserver.intersect();
-
-      expect(analyticsStream).toHaveBeenCalledWith({
-        action: 'Scrolled',
-        component: 'ArticleSkeleton',
-        object: 'NewsletterPuffLink',
-        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 : manage preferences here : displayed'
-        }
-      });
-    });
   });
 });

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

@@ -6,7 +6,7 @@ exports[`<AutoNewsletterPuff> display function always renders 1`] = `
   style="display: block;"
 >
   <div
-    class="sc-bdVaJa sc-htpNat bSdOkq"
+    class="sc-bwzfXH sc-bxivhb jahLAV"
     style="height: 257px;"
   >
     <div
@@ -45,7 +45,7 @@ exports[`<AutoNewsletterPuff> display function doesnt render without consent 1`]
   style="display: none;"
 >
   <div
-    class="sc-bdVaJa sc-htpNat bSdOkq"
+    class="sc-bwzfXH sc-bxivhb jahLAV"
     style="height: 257px;"
   >
     <div
@@ -84,7 +84,7 @@ exports[`<AutoNewsletterPuff> using a display function [1, 3] count = 1 1`] = `
   style="display: block;"
 >
   <div
-    class="sc-bdVaJa sc-htpNat bSdOkq"
+    class="sc-bwzfXH sc-bxivhb jahLAV"
     style="height: 257px;"
   >
     <div
@@ -123,7 +123,7 @@ exports[`<AutoNewsletterPuff> using a display function [1, 3] count = 2 1`] = `
   style="display: none;"
 >
   <div
-    class="sc-bdVaJa sc-htpNat bSdOkq"
+    class="sc-bwzfXH sc-bxivhb jahLAV"
     style="height: 257px;"
   >
     <div