Split banner and epic factories (#194)

* Split the BrazeMessageComponent factory in two Now we have two factory components, one per slot. This has the advantage of having to only pass in the set of props that we might need for the components for a given slot. So we now no longer need to pass subscribe ToNewsletter to the banner component factory, as none of the underlying components require it. I also removed some unused props from the common end of article props interface which weren’t used by any of the underlying components. * We need to export these to be used by the platform Co-authored-by: Michael Clapham <[email protected]>
guardian · Jul 26, 2021 · 5ffdb35 · 5ffdb35
1 parent 0716ff7
commit 5ffdb35
Show file tree

Hide file tree

Showing 16 changed files with 50 additions and 128 deletions.
diff --git a/src/AUNewsletterEpic/index.stories.tsx b/src/AUNewsletterEpic/index.stories.tsx
@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react';
-import { BrazeMessageComponent } from '../BrazeMessageComponent';
+import { BrazeEndOfArticleComponent } from '../BrazeMessageComponent';
 import { StorybookWrapper } from '../utils/StorybookWrapper';
 import { withKnobs, text } from '@storybook/addon-knobs';
 
@@ -28,14 +28,8 @@ export const defaultStory = (): ReactElement | null => {
 
     return (
         <StorybookWrapper>
-            <BrazeMessageComponent
+            <BrazeEndOfArticleComponent
                 componentName={componentName}
-                logButtonClickWithBraze={(internalButtonId) => {
-                    console.log(`Button with internal ID ${internalButtonId} clicked`);
-                }}
-                submitComponentEvent={(componentEvent) => {
-                    console.log('submitComponentEvent called with: ', componentEvent);
-                }}
                 brazeMessageProps={{
                     header,
                     frequency,

diff --git a/src/AUNewsletterEpic/index.tsx b/src/AUNewsletterEpic/index.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
 import { canRender, COMPONENT_NAME } from './canRender';
 import { NewsletterEpic, NewsletterSubscribeCallback } from '../NewsletterEpic';
-import { BrazeClickHandler } from '../utils/tracking';
-import { OphanComponentEvent } from '@guardian/types';
 
 const IMAGE_URL =
     'https://i.guim.co.uk/img/media/9f9f9c06ed5a323b13be816d5c160728c81d1bf9/0_0_784_784/784.png?width=196&s=4c4d5ff2c20821a6e6ff4d25f8ebcc16';
@@ -18,8 +16,6 @@ export type BrazeMessageProps = {
 };
 
 export type Props = {
-    logButtonClickWithBraze: BrazeClickHandler;
-    submitComponentEvent: (componentEvent: OphanComponentEvent) => void;
     brazeMessageProps: BrazeMessageProps;
     subscribeToNewsletter: NewsletterSubscribeCallback;
 };

diff --git a/src/AppBanner/index.stories.tsx b/src/AppBanner/index.stories.tsx
@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react';
 import { withKnobs, text } from '@storybook/addon-knobs';
-import { BrazeMessageComponent } from '../BrazeMessageComponent';
+import { BrazeBannerComponent } from '../BrazeMessageComponent';
 import { StorybookWrapper } from '../utils/StorybookWrapper';
 import { knobsData } from '../utils/knobsData';
 import { withGrid, grid } from '../../.storybook/grid/withGrid';
@@ -38,7 +38,7 @@ export const defaultStory = (): ReactElement => {
 
     return (
         <StorybookWrapper>
-            <BrazeMessageComponent
+            <BrazeBannerComponent
                 componentName={componentName}
                 logButtonClickWithBraze={(internalButtonId) => {
                     console.log(`Button with internal ID ${internalButtonId} clicked`);
@@ -52,7 +52,6 @@ export const defaultStory = (): ReactElement => {
                     imageUrl,
                     cta,
                 }}
-                subscribeToNewsletter={() => Promise.resolve()}
             />
         </StorybookWrapper>
     );

diff --git a/src/BrazeMessageComponent.test.tsx b/src/BrazeMessageComponent.test.tsx
@@ -14,15 +14,7 @@ describe('BrazeMessage', () => {
         };
         const BrazeMessageComponent = buildBrazeMessageComponent(mappings);
 
-        render(
-            <BrazeMessageComponent
-                componentName={'ExampleComponent'}
-                logButtonClickWithBraze={jest.fn()}
-                submitComponentEvent={jest.fn()}
-                brazeMessageProps={{}}
-                subscribeToNewsletter={() => Promise.resolve()}
-            />,
-        );
+        render(<BrazeMessageComponent componentName={'ExampleComponent'} />);
 
         expect(ExampleComponent).toHaveBeenCalled();
     });
@@ -34,15 +26,7 @@ describe('BrazeMessage', () => {
         };
         const BrazeMessageComponent = buildBrazeMessageComponent(mappings);
 
-        render(
-            <BrazeMessageComponent
-                componentName={'NoSuchComponent'}
-                logButtonClickWithBraze={jest.fn()}
-                submitComponentEvent={jest.fn()}
-                brazeMessageProps={{}}
-                subscribeToNewsletter={() => Promise.resolve()}
-            />,
-        );
+        render(<BrazeMessageComponent componentName={'NoSuchComponent'} />);
 
         expect(ExampleComponent).not.toHaveBeenCalled();
     });

diff --git a/src/BrazeMessageComponent.tsx b/src/BrazeMessageComponent.tsx
@@ -33,65 +33,63 @@ type BrazeMessageProps = {
     [key: string]: string | undefined;
 };
 
-type CommonComponentProps = {
+export type CommonBannerComponentProps = {
+    componentName: string;
     logButtonClickWithBraze: BrazeClickHandler;
     submitComponentEvent: (componentEvent: OphanComponentEvent) => void;
     brazeMessageProps: BrazeMessageProps;
-    countryCode?: string;
+};
+
+export type CommonEndOfArticleComponentProps = {
+    componentName: string;
+    brazeMessageProps: BrazeMessageProps;
     subscribeToNewsletter: NewsletterSubscribeCallback;
+    countryCode?: string;
 };
 
-type ComponentMapping = {
-    [key: string]: React.FC<CommonComponentProps>;
+type ComponentMapping<A> = {
+    [key: string]: React.FC<A>;
 };
 
-const COMPONENT_MAPPINGS: ComponentMapping = {
+const BANNER_MAPPINGS: ComponentMapping<CommonBannerComponentProps> = {
     [DIGITAL_SUBSCRIBER_APP_BANNER_NAME]: DigitalSubscriberAppBanner,
     [APP_BANNER_NAME]: AppBanner,
     [SPECIAL_EDITION_BANNER_NAME]: SpecialEditionBanner,
     [THE_GUARDIAN_IN_2020_BANNER_NAME]: TheGuardianIn2020Banner,
+};
+
+const END_OF_ARTICLE_MAPPINGS: ComponentMapping<CommonEndOfArticleComponentProps> = {
     [NEWSLETTER_EPIC_NAME]: NewsletterEpic,
     [US_NEWSLETTER_EPIC_NAME]: USNewsletterEpic,
     [AU_NEWSLETTER_EPIC_NAME]: AUNewsletterEpic,
     [UK_NEWSLETTER_EPIC_NAME]: UKNewsletterEpic,
     [EPIC_NAME]: Epic,
 };
 
-export type Props = {
+interface HasComponentName {
     componentName: string;
-    logButtonClickWithBraze: BrazeClickHandler;
-    submitComponentEvent: (componentEvent: OphanComponentEvent) => void;
-    brazeMessageProps: BrazeMessageProps;
-    subscribeToNewsletter: (newsletterId: string) => Promise<void>;
-};
+}
 
-export const buildBrazeMessageComponent = (mappings: ComponentMapping): React.FC<Props> => {
-    const BrazeMessageComponent = ({
-        logButtonClickWithBraze,
-        submitComponentEvent,
-        componentName,
-        brazeMessageProps,
-        subscribeToNewsletter,
-    }: Props) => {
-        const ComponentToRender = mappings[componentName];
+export function buildBrazeMessageComponent<A extends HasComponentName>(
+    mappings: ComponentMapping<A>,
+): React.FC<A> {
+    const BrazeMessageComponent = (props: A) => {
+        const ComponentToRender = mappings[props.componentName];
 
         if (!ComponentToRender) {
             return null;
         }
 
-        return (
-            <ComponentToRender
-                logButtonClickWithBraze={logButtonClickWithBraze}
-                submitComponentEvent={submitComponentEvent}
-                subscribeToNewsletter={subscribeToNewsletter}
-                brazeMessageProps={brazeMessageProps}
-            />
-        );
+        return <ComponentToRender {...props} />;
     };
 
     return BrazeMessageComponent;
-};
+}
+
+export const BrazeBannerComponent: React.FC<CommonBannerComponentProps> = buildBrazeMessageComponent<
+    CommonBannerComponentProps
+>(BANNER_MAPPINGS);
 
-export const BrazeMessageComponent: React.FC<Props> = buildBrazeMessageComponent(
-    COMPONENT_MAPPINGS,
-);
+export const BrazeEndOfArticleComponent: React.FC<CommonEndOfArticleComponentProps> = buildBrazeMessageComponent<
+    CommonEndOfArticleComponentProps
+>(END_OF_ARTICLE_MAPPINGS);
diff --git a/src/DigitalSubscriberAppBanner/index.stories.tsx b/src/DigitalSubscriberAppBanner/index.stories.tsx
@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react';
 import { withKnobs, text } from '@storybook/addon-knobs';
-import { BrazeMessageComponent } from '../BrazeMessageComponent';
+import { BrazeBannerComponent } from '../BrazeMessageComponent';
 import { StorybookWrapper } from '../utils/StorybookWrapper';
 import { knobsData } from '../utils/knobsData';
 
@@ -26,7 +26,7 @@ export const defaultStory = (): ReactElement => {
     return (
         <StorybookWrapper>
             <>
-                <BrazeMessageComponent
+                <BrazeBannerComponent
                     componentName={componentName}
                     logButtonClickWithBraze={(internalButtonId) => {
                         console.log(`Button with internal ID ${internalButtonId} clicked`);
@@ -38,7 +38,6 @@ export const defaultStory = (): ReactElement => {
                         header: header,
                         body: body,
                     }}
-                    subscribeToNewsletter={() => Promise.resolve()}
                 />
             </>
         </StorybookWrapper>

diff --git a/src/Epic/index.stories.tsx b/src/Epic/index.stories.tsx
@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react';
 import { withKnobs, text } from '@storybook/addon-knobs';
 import { StorybookWrapper } from '../utils/StorybookWrapper';
-import { BrazeMessageComponent } from '../BrazeMessageComponent';
+import { BrazeEndOfArticleComponent } from '../BrazeMessageComponent';
 
 export default {
     component: 'Epic',
@@ -58,7 +58,7 @@ export const defaultStory = (): ReactElement | null => {
 
     return (
         <StorybookWrapper>
-            <BrazeMessageComponent
+            <BrazeEndOfArticleComponent
                 brazeMessageProps={{
                     slotName,
                     ophanComponentId,
@@ -69,13 +69,8 @@ export const defaultStory = (): ReactElement | null => {
                     ...paragraphMap,
                 }}
                 componentName={componentName}
-                logButtonClickWithBraze={(internalButtonId) => {
-                    console.log(`Button with internal ID ${internalButtonId} clicked`);
-                }}
-                submitComponentEvent={(componentEvent) => {
-                    console.log('submitComponentEvent called with: ', componentEvent);
-                }}
-            ></BrazeMessageComponent>
+                subscribeToNewsletter={() => Promise.resolve()}
+            />
         </StorybookWrapper>
     );
 };

diff --git a/src/Epic/index.tsx b/src/Epic/index.tsx
@@ -1,8 +1,6 @@
 import { css, ThemeProvider } from '@emotion/react';
 import React from 'react';
 import { brand, palette, space } from '@guardian/src-foundations';
-import { OphanComponentEvent } from '@guardian/types';
-import { BrazeClickHandler } from '../utils/tracking';
 import { ContributionsEpicButtons } from './ContributionsEpicButtons';
 import { body, headline } from '@guardian/src-foundations/typography';
 import { COMPONENT_NAME, canRenderEpic, parseParagraphs } from './canRender';
@@ -67,18 +65,13 @@ export type BrazeMessageProps = {
 };
 
 export type EpicProps = {
-    logButtonClickWithBraze: BrazeClickHandler;
-    submitComponentEvent: (componentEvent: OphanComponentEvent) => void;
     ophanComponentId?: string;
     brazeMessageProps: BrazeMessageProps;
     countryCode?: string;
 };
 
 export const Epic: React.FC<EpicProps> = (props: EpicProps) => {
     const {
-        // logButtonClickWithBraze,
-        // submitComponentEvent,
-        // ophanComponentId = COMPONENT_NAME,
         brazeMessageProps: { heading, buttonText, buttonUrl, highlightedText },
         countryCode,
     } = props;

diff --git a/src/NewsletterEpic/index.test.tsx b/src/NewsletterEpic/index.test.tsx
@@ -8,12 +8,6 @@ import { NewsletterEpic } from '.';
 
 describe('NewsletterEpic', () => {
     describe('when the sign up button is clicked', () => {
-        const logButtonClickWithOphan = () => {
-            return;
-        };
-        const logButtonClickWithBraze = () => {
-            return;
-        };
         const newsletterId = '4156';
         const brazeMessageProps = {
             header: 'First Thing',
@@ -30,8 +24,6 @@ describe('NewsletterEpic', () => {
 
             render(
                 <NewsletterEpic
-                    submitComponentEvent={logButtonClickWithOphan}
-                    logButtonClickWithBraze={logButtonClickWithBraze}
                     brazeMessageProps={brazeMessageProps}
                     subscribeToNewsletter={subscribeToNewsletter}
                 />,
@@ -48,8 +40,6 @@ describe('NewsletterEpic', () => {
 
             render(
                 <NewsletterEpic
-                    submitComponentEvent={logButtonClickWithOphan}
-                    logButtonClickWithBraze={logButtonClickWithBraze}
                     brazeMessageProps={brazeMessageProps}
                     subscribeToNewsletter={subscribeToNewsletter}
                 />,

diff --git a/src/NewsletterEpic/index.tsx b/src/NewsletterEpic/index.tsx
@@ -5,8 +5,6 @@ import { Button, buttonBrandAlt } from '@guardian/src-button';
 import { COMPONENT_NAME } from './canRender';
 import { body, headline, textSans } from '@guardian/src-foundations/typography';
 import { canRender } from './canRender';
-import { OphanComponentEvent } from '@guardian/types';
-import { BrazeClickHandler } from '../utils/tracking';
 import { from, until } from '@guardian/src-foundations/mq';
 
 // Once https://github.com/guardian/source/pull/843 is merged and in a
@@ -119,8 +117,6 @@ export type BrazeMessageProps = {
 };
 
 export type Props = {
-    logButtonClickWithBraze: BrazeClickHandler;
-    submitComponentEvent: (componentEvent: OphanComponentEvent) => void;
     brazeMessageProps: BrazeMessageProps;
     subscribeToNewsletter: NewsletterSubscribeCallback;
 };

diff --git a/src/SpecialEditionBanner/index.stories.tsx b/src/SpecialEditionBanner/index.stories.tsx
@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react';
 import { withKnobs, text } from '@storybook/addon-knobs';
-import { BrazeMessageComponent } from '../BrazeMessageComponent';
+import { BrazeBannerComponent } from '../BrazeMessageComponent';
 import { StorybookWrapper } from '../utils/StorybookWrapper';
 import { knobsData } from '../utils/knobsData';
 
@@ -31,7 +31,7 @@ export const defaultStory = (): ReactElement => {
     return (
         <StorybookWrapper>
             <>
-                <BrazeMessageComponent
+                <BrazeBannerComponent
                     componentName={componentName}
                     logButtonClickWithBraze={(internalButtonId) => {
                         console.log(`Button with internal ID ${internalButtonId} clicked`);
@@ -43,7 +43,6 @@ export const defaultStory = (): ReactElement => {
                         header: header,
                         body: body,
                     }}
-                    subscribeToNewsletter={() => Promise.resolve()}
                 />
             </>
         </StorybookWrapper>

diff --git a/src/TheGuardianIn2020Banner/index.stories.tsx b/src/TheGuardianIn2020Banner/index.stories.tsx
@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react';
 import { withKnobs, text } from '@storybook/addon-knobs';
-import { BrazeMessageComponent } from '../BrazeMessageComponent';
+import { BrazeBannerComponent } from '../BrazeMessageComponent';
 import { StorybookWrapper } from '../utils/StorybookWrapper';
 import { knobsData } from '../utils/knobsData';
 
@@ -30,7 +30,7 @@ export const defaultStory = (): ReactElement => {
 
     return (
         <StorybookWrapper>
-            <BrazeMessageComponent
+            <BrazeBannerComponent
                 componentName={componentName}
                 logButtonClickWithBraze={(internalButtonId) => {
                     console.log(`Button with internal ID ${internalButtonId} clicked`);
@@ -42,7 +42,6 @@ export const defaultStory = (): ReactElement => {
                     header,
                     body,
                 }}
-                subscribeToNewsletter={() => Promise.resolve()}
             />
         </StorybookWrapper>
     );