Dynamically fetch control epic copy

package.json

@@ -23,6 +23,7 @@
     "emotion": "^10.0.27",
     "emotion-server": "^10.0.27",
     "express": "^4.17.1",
+    "node-fetch": "^2.6.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0"
   },
@@ -34,7 +35,9 @@
     "@types/aws-serverless-express": "^3.3.2",
     "@types/cors": "^2.8.6",
     "@types/express": "^4.17.2",
+    "@types/fetch-mock": "^7.3.2",
     "@types/jest": "^24.0.25",
+    "@types/node-fetch": "^2.5.4",
     "@types/react": "^16.9.17",
     "@types/react-dom": "^16.9.4",
     "@typescript-eslint/eslint-plugin": "^2.16.0",
@@ -45,6 +48,7 @@
     "eslint-config-prettier": "^6.9.0",
     "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-react": "^7.18.0",
+    "fetch-mock": "^8.3.1",
     "inquirer": "^7.0.3",
     "jest": "^24.9.0",
     "prettier": "^1.19.1",

src/api/contributionsApi.test.ts

@@ -0,0 +1,39 @@
+import { fetchDefaultEpicContent } from './contributionsApi';
+
+jest.mock('node-fetch', () => require('fetch-mock').sandbox());
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const fetchMock = require('node-fetch');
+
+describe('fetchDefaultEpic', () => {
+    it('fetches and returns the data in the expected format', async () => {
+        const url =
+            'https://interactive.guim.co.uk/docsdata/1fy0JolB1bf1IEFLHGHfUYWx-niad7vR9K954OpTOvjE.json';
+
+        const response = {
+            sheets: {
+                control: [
+                    {
+                        heading: 'Since you’re here...',
+                        paragraphs: 'First paragraph',
+                        highlightedText: 'Highlighted Text',
+                    },
+                    {
+                        heading: '',
+                        paragraphs: 'Second paragraph',
+                        highlightedText: '',
+                    },
+                ],
+            },
+        };
+
+        fetchMock.get(url, response);
+
+        const epicData = await fetchDefaultEpicContent();
+
+        expect(epicData).toEqual({
+            heading: 'Since you’re here...',
+            paragraphs: ['First paragraph', 'Second paragraph'],
+            highlighted: ['Highlighted Text'],
+        });
+    });
+});

src/api/contributionsApi.ts

@@ -0,0 +1,34 @@
+import fetch from 'node-fetch';
+
+const defaultEpicUrl =
+    'https://interactive.guim.co.uk/docsdata/1fy0JolB1bf1IEFLHGHfUYWx-niad7vR9K954OpTOvjE.json';
+
+export type DefaultEpicContent = {
+    heading?: string;
+    paragraphs: string[];
+    highlighted: string[];
+};
+
+export const fetchDefaultEpicContent = async (): Promise<DefaultEpicContent> => {
+    const response = await fetch(defaultEpicUrl);
+    if (!response.ok) {
+        throw new Error(
+            `Encountered a non-ok response when fetching default epic: ${response.status}`,
+        );
+    }
+    const data = await response.json();
+    const control = data?.sheets?.control;
+
+    return control.reduce(
+        (
+            acc: DefaultEpicContent,
+            item: { heading: string; paragraphs: string; highlightedText: string },
+        ) => {
+            if (!acc.heading && item.heading) acc.heading = item.heading;
+            if (item.paragraphs) acc.paragraphs.push(item.paragraphs);
+            if (item.highlightedText) acc.highlighted.push(item.highlightedText);
+            return acc;
+        },
+        { paragraphs: [], highlighted: [] },
+    );
+};

src/components/DefaultEpic.tsx

@@ -5,6 +5,11 @@ import { palette } from '@guardian/src-foundations';
 import { space } from '@guardian/src-foundations';
 import { CallToAction } from './CallToAction';
 
+const currencySymbol = '£';
+
+const replacePlaceholders = (content: string): string =>
+    content.replace(/%%CURRENCY_SYMBOL%%/g, currencySymbol);
+
 // Spacing values below are multiples of 4.
 // See https://www.theguardian.design/2a1e5182b/p/449bd5
 const wrapperStyles = css`
@@ -56,51 +61,69 @@ const imageStyles = css`
     margin: ${space[1]}px 0;
 `;
 
-export const DefaultEpic: React.FC<{}> = ({}) => {
-    return (
-        <section className={wrapperStyles}>
-            <h2 className={headingStyles}>Since you're here...</h2>
-            <p className={bodyStyles}>
-                ... we have a small favour to ask. More people, like you, are reading and supporting
-                the Guardian’s independent, investigative journalism than ever before. And unlike
-                many news organisations, we made the choice to keep our reporting open for all,
-                regardless of where they live or what they can afford to pay.
-            </p>
-            <p className={bodyStyles}>
-                The Guardian will engage with the most critical issues of our time – from the
-                escalating climate catastrophe to widespread inequality to the influence of big tech
-                on our lives. At a time when factual information is a necessity, we believe that
-                each of us, around the world, deserves access to accurate reporting with integrity
-                at its heart.
-            </p>
-            <p className={bodyStyles}>
-                Our editorial independence means we set our own agenda and voice our own opinions.
-                Guardian journalism is free from commercial and political bias and not influenced by
-                billionaire owners or shareholders. This means we can give a voice to those less
-                heard, explore where others turn away, and rigorously challenge those in power.
-            </p>
-            <p className={bodyStyles}>
-                We hope you will consider supporting us today. We need your support to keep
-                delivering quality journalism that’s open and independent. Every reader
-                contribution, however big or small, is so valuable.{' '}
-                <strong className={highlightWrapperStyles}>
-                    <span className={highlightStyles}>
-                        Support The Guardian from as little as £1 - and it only takes a minute.
-                        Thank you.
-                    </span>
-                </strong>
-            </p>
-            <div className={buttonWrapperStyles}>
-                <CallToAction
-                    url="https://support.theguardian.com/uk/contribute"
-                    linkText="Support The Guardian"
-                />
-                <img
-                    src="https://assets.guim.co.uk/images/acquisitions/2db3a266287f452355b68d4240df8087/payment-methods.png"
-                    alt="Accepted payment methods: Visa, Mastercard, American Express and PayPal"
-                    className={imageStyles}
-                />
-            </div>
-        </section>
-    );
+type Props = {
+    heading?: string;
+    paragraphs: string[];
+    highlighted: string[];
+};
+
+type HighlightedProps = {
+    highlighted: string[];
 };
+
+type BodyProps = {
+    paragraphs: string[];
+    highlighted: string[];
+};
+
+const Highlighted: React.FC<HighlightedProps> = ({ highlighted }: HighlightedProps) => (
+    <strong className={highlightWrapperStyles}>
+        {' '}
+        {highlighted.map((highlightText, idx) => (
+            <span
+                key={idx}
+                className={highlightStyles}
+                dangerouslySetInnerHTML={{ __html: replacePlaceholders(highlightText) }}
+            />
+        ))}
+    </strong>
+);
+
+const EpicBody: React.FC<BodyProps> = ({ highlighted, paragraphs }: BodyProps) => (
+    <>
+        {paragraphs.map((paragraph, idx) => (
+            <p key={idx} className={bodyStyles}>
+                <span dangerouslySetInnerHTML={{ __html: replacePlaceholders(paragraph) }} />
+
+                {highlighted.length > 0 && idx === paragraphs.length - 1 && (
+                    <Highlighted highlighted={highlighted} />
+                )}
+            </p>
+        ))}
+    </>
+);
+
+export const DefaultEpic: React.FC<Props> = ({ heading, paragraphs, highlighted }: Props) => (
+    <section className={wrapperStyles}>
+        {heading && (
+            <h2
+                className={headingStyles}
+                dangerouslySetInnerHTML={{ __html: replacePlaceholders(heading) }}
+            />
+        )}
+
+        <EpicBody paragraphs={paragraphs} highlighted={highlighted} />
+
+        <div className={buttonWrapperStyles}>
+            <CallToAction
+                url="https://support.theguardian.com/uk/contribute"
+                linkText="Support The Guardian"
+            />
+            <img
+                src="https://assets.guim.co.uk/images/acquisitions/2db3a266287f452355b68d4240df8087/payment-methods.png"
+                alt="Accepted payment methods: Visa, Mastercard, American Express and PayPal"
+                className={imageStyles}
+            />
+        </div>
+    </section>
+);

src/server.tsx

@@ -5,33 +5,48 @@ import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { extractCritical } from 'emotion-server';
 import { renderHtmlDocument } from './utils/renderHtmlDocument';
+import { fetchDefaultEpicContent, DefaultEpicContent } from './api/contributionsApi';
 import { DefaultEpic } from './components/DefaultEpic';
 import cors from 'cors';
 
-const app = express();
-app.use(express.json({ limit: '50mb' }));
+const bootApp = (content: DefaultEpicContent): void => {
+    const app = express();
+    app.use(express.json({ limit: '50mb' }));
 
-// Note allows *all* cors. We may want to tighten this later.
-app.use(cors());
-app.options('*', cors());
+    // Note allows *all* cors. We may want to tighten this later.
+    app.use(cors());
+    app.options('*', cors());
 
-app.get('/', (req, res) => {
-    const { html, css } = extractCritical(renderToStaticMarkup(<DefaultEpic />));
-    if (typeof req.query.showPreview !== 'undefined') {
-        const htmlContent = renderHtmlDocument({ html, css });
-        res.send(htmlContent);
+    app.get('/', (req, res) => {
+        const { html, css } = extractCritical(
+            renderToStaticMarkup(
+                <DefaultEpic
+                    heading={content.heading}
+                    paragraphs={content.paragraphs}
+                    highlighted={content.highlighted}
+                />,
+            ),
+        );
+        if (typeof req.query.showPreview !== 'undefined') {
+            const htmlContent = renderHtmlDocument({ html, css });
+            res.send(htmlContent);
+        } else {
+            res.send({ html, css });
+        }
+    });
+
+    // If local then don't wrap in serverless
+    const PORT = process.env.PORT || 3030;
+    if (process.env.NODE_ENV === 'development') {
+        app.listen(PORT, () => console.log(`Listening on port ${PORT}`));
     } else {
-        res.send({ html, css });
+        const server = awsServerlessExpress.createServer(app);
+        exports.handler = (event: any, context: Context) => {
+            awsServerlessExpress.proxy(server, event, context);
+        };
     }
-});
+};
 
-// If local then don't wrap in serverless
-const PORT = process.env.PORT || 3030;
-if (process.env.NODE_ENV === 'development') {
-    app.listen(PORT, () => console.log(`Listening on port ${PORT}`));
-} else {
-    const server = awsServerlessExpress.createServer(app);
-    exports.handler = (event: any, context: Context) => {
-        awsServerlessExpress.proxy(server, event, context);
-    };
-}
+fetchDefaultEpicContent()
+    .then(bootApp)
+    .catch(error => console.error(`App failed to boot: ${error}`));