feat(payment): add checkout welcome component

src/components/Welcome/Welcome.module.scss

@@ -0,0 +1,14 @@
+@use '../../styles/variables';
+@use '../../styles/theme';
+
+.welcome {
+  h2 {
+    font-family: theme.$body-font-family;
+    font-weight: 700;
+    font-size: 24px;
+  }
+
+  p {
+    font-family: theme.$body-font-family;
+  }
+}

src/components/Welcome/Welcome.test.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { act, fireEvent, render } from '@testing-library/react';
+
+import Welcome from './Welcome';
+
+describe('<Welcome>', () => {
+  test('renders and matches snapshot', () => {
+    const { container } = render(<Welcome />);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  test('calls the onCloseButtonClick callback when clicking the close button', () => {
+    const onCloseButtonClick = jest.fn();
+    const { getByText } = render(<Welcome onCloseButtonClick={onCloseButtonClick} />);
+
+    fireEvent.click(getByText('checkout.start_watching'));
+
+    expect(onCloseButtonClick).toBeCalled();
+  });
+
+  test('calls the onCloseButtonClick callback when clicking the close button', () => {
+    jest.useFakeTimers();
+    const onCountdownCompleted = jest.fn();
+
+    render(<Welcome onCountdownCompleted={onCountdownCompleted} />);
+
+    let i = 10;
+    while(i--) {
+      act(() => {
+        jest.runAllTimers()
+      });
+    }
+
+    expect(onCountdownCompleted).toBeCalled();
+    jest.useRealTimers();
+  });
+});

src/components/Welcome/Welcome.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import Button from '../Button/Button';
+import useCountdown from '../../hooks/useCountdown';
+import { ConfigStore } from '../../stores/ConfigStore';
+
+import styles from './Welcome.module.scss';
+import { useTranslation } from 'react-i18next';
+
+type Props = {
+  onCloseButtonClick?: () => void;
+  onCountdownCompleted?: () => void;
+};
+
+const Welcome: React.FC<Props> = ({ onCloseButtonClick, onCountdownCompleted }) => {
+  const { t } = useTranslation('account');
+  const config = ConfigStore.useState(s => s.config);
+  const countdown = useCountdown(10, 1, onCountdownCompleted);
+
+  return (
+    <div className={styles.welcome}>
+      <h2>{t('checkout.welcome_title', { siteName: config.siteName })}</h2>
+      <p>{t('checkout.welcome_description', { siteName: config.siteName })}</p>
+      <Button variant="contained" color="primary" label={t('checkout.start_watching', { countdown })} onClick={onCloseButtonClick} size="large" fullWidth />
+    </div>
+  );
+};
+
+export default Welcome;

src/components/Welcome/__snapshots__/Welcome.test.tsx.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Welcome> renders and matches snapshot 1`] = `
+<div>
+  <div
+    class="welcome"
+  >
+    <h2>
+      checkout.welcome_title
+    </h2>
+    <p>
+      checkout.welcome_description
+    </p>
+    <button
+      class="button primary fullWidth large"
+    >
+      <span>
+        checkout.start_watching
+      </span>
+    </button>
+  </div>
+</div>
+`;

src/containers/AccountModal/AccountModal.tsx

@@ -6,6 +6,7 @@ import Dialog from '../../components/Dialog/Dialog';
 import useQueryParam from '../../hooks/useQueryParam';
 import { removeQueryParam } from '../../utils/history';
 import PaymentFailed from '../../components/PaymentFailed/PaymentFailed';
+import Welcome from '../../components/Welcome/Welcome';
 
 import styles from './AccountModal.module.scss';
 import Login from './forms/Login';
@@ -39,6 +40,7 @@ const AccountModal = () => {
       {view === 'checkout' ? <Checkout /> : null}
       {view === 'paypal-error' ? <PaymentFailed type="error" message={message} onCloseButtonClick={closeHandler} /> : null}
       {view === 'paypal-cancelled' ? <PaymentFailed type="cancelled" onCloseButtonClick={closeHandler} /> : null}
+      {view === 'welcome' ? <Welcome onCloseButtonClick={closeHandler} onCountdownCompleted={closeHandler} /> : null}
     </Dialog>
   );
 };

src/hooks/useCountdown.ts

@@ -0,0 +1,22 @@
+import { useEffect, useRef, useState } from 'react';
+
+const useCountdown = (durationSeconds: number, intervalSeconds: number = 1, completeHandler?: () => void) => {
+  const timerRef = useRef<number>();
+  const [countdown, setCountdown] = useState(durationSeconds);
+
+  useEffect(() => {
+    window.clearTimeout(timerRef.current);
+    if (countdown === 0) {
+      if (completeHandler) completeHandler();
+      return;
+    }
+
+    timerRef.current = window.setTimeout(() => {
+      setCountdown(count => count - intervalSeconds);
+    }, intervalSeconds * 1000);
+  }, [countdown]);
+
+  return countdown;
+};
+
+export default useCountdown;

src/i18n/locales/en_US/account.json

@@ -17,7 +17,10 @@
     "paypal": "PayPal",
     "paypal_instructions": "Clicking 'continue' will bring you to the PayPal site.",
     "redeem_coupon": "Redeem coupon",
+    "start_watching": "Start watching ({{countdown}})",
     "total_price": "Total",
+    "welcome_description": "Thank you for subscribing to {{siteName}}. Please enjoy all our content.",
+    "welcome_title": "Welcome to {{siteName}}",
     "yearly": "Yearly subscription"
   },
   "choose_offer": {

src/i18n/locales/nl_NL/account.json

@@ -17,7 +17,10 @@
     "paypal": "",
     "paypal_instructions": "",
     "redeem_coupon": "",
+    "start_watching": "",
     "total_price": "",
+    "welcome_description": "",
+    "welcome_title": "",
     "yearly": ""
   },
   "choose_offer": {