feat(payments): Add staging 123done post-subscription redirect

- Also simplify the whole post-subscription redirect component
- Add basic tests for redirect URL selection logic

fixes #1942

packages/fxa-payments-server/src/routes/Product/SubscriptionRedirect/Redirect123donePro.tsx

@@ -1,25 +0,0 @@
-import React, { useEffect } from 'react';
-import { SubscriptionRedirectProps } from './index';
-
-export const RedirectDefault = ({
-  navigateToUrl,
-  plan: {
-    plan_name
-  }
-}: SubscriptionRedirectProps) => {
-  const redirectUrl = 'http://127.0.0.1:8080/'; 
-
-  useEffect(() => {
-    navigateToUrl(redirectUrl);
-  }, [ navigateToUrl, redirectUrl ]);
-
-  return (
-    <div className="subscription-ready">
-      <h2>Your subscription is ready</h2>
-      <p>Hang on for a moment while we send you to the {plan_name} download page.</p>
-      <a href={redirectUrl}>Click here if you're not automatically redirected</a>
-    </div>
-  );
-};
-
-export default RedirectDefault;

packages/fxa-payments-server/src/routes/Product/SubscriptionRedirect/RedirectDefault.tsx

@@ -1,26 +0,0 @@
-import React, { useEffect } from 'react';
-import { SubscriptionRedirectProps } from './index';
-
-export const RedirectDefault = ({
-  navigateToUrl,
-  plan: {
-    plan_name
-  }
-}: SubscriptionRedirectProps) => {
-  // TODO: From where do we get this URL? Plan details from subhub won't have it.
-  const redirectUrl = 'https://mozilla.org'; 
-
-  useEffect(() => {
-    navigateToUrl(redirectUrl);
-  }, [ navigateToUrl, redirectUrl ]);
-
-  return (
-    <div className="subscription-ready">
-      <h2>Your subscription is ready</h2>
-      <p>Hang on for a moment while we send you to the {plan_name} download page.</p>
-      <a href={redirectUrl}>Click here if you're not automatically redirected</a>
-    </div>
-  );
-};
-
-export default RedirectDefault;

packages/fxa-payments-server/src/routes/Product/SubscriptionRedirect/RedirectDev.tsx

@@ -1,25 +0,0 @@
-import React, { useEffect } from 'react';
-import { SubscriptionRedirectProps } from './index';
-
-export const RedirectDev = ({
-  navigateToUrl,
-  plan: {
-    plan_name
-  }
-}: SubscriptionRedirectProps) => {
-  const redirectUrl = 'https://123done-latest.dev.lcip.org/'; 
-
-  useEffect(() => {
-    navigateToUrl(redirectUrl);
-  }, [ navigateToUrl, redirectUrl ]);
-
-  return (
-    <div className="subscription-ready">
-      <h2>Your subscription is ready</h2>
-      <p>Hang on for a moment while we send you to the {plan_name} download page.</p>
-      <a href={redirectUrl}>Click here if you're not automatically redirected</a>
-    </div>
-  );
-};
-
-export default RedirectDev;

packages/fxa-payments-server/src/routes/Product/SubscriptionRedirect/index.test.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { render, cleanup, fireEvent, } from '@testing-library/react';
+import 'jest-dom/extend-expect';
+
+import {
+  SubscriptionRedirect,
+} from './index';
+
+afterEach(cleanup);
+
+it('performs a redirect to the expected URL for local product', () => {
+  assertRedirectForProduct('123doneProProduct', 'local', 'http://127.0.0.1:8080/');
+});
+
+it('performs a redirect to the default URL for unknown product', () => {
+  assertRedirectForProduct('beepBoop', 'bazquux', 'https://mozilla.org');
+});
+
+function assertRedirectForProduct(product_id: string, plan_name: string, expectedUrl: string) {
+  const navigateToUrl = jest.fn();
+  const plan = { ...MOCK_PLAN, product_id, plan_name };
+  const { getByText } = render(<SubscriptionRedirect {...{ navigateToUrl, plan }} />);
+  expect(getByText(plan_name)).toBeInTheDocument();
+  expect(navigateToUrl).toBeCalledWith(expectedUrl);
+}
+
+const MOCK_PLAN = {
+  plan_id: 'plan_123',
+  plan_name: 'Example Plan',
+  product_id: '123doneProProduct',
+  product_name: 'Example Product',
+  currency: 'USD',
+  amount: 1050,
+  interval: 'month'
+};

packages/fxa-payments-server/src/routes/Product/SubscriptionRedirect/index.tsx

@@ -1,33 +1,44 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Plan } from '../../../store/types';
 
 import './index.scss';
 
+// Mapping of product IDs to post-subscription redirect URLs
+// TODO: Move / merge in some kind of configuration variable?
+type productRedirectURLsType = { [productID: string]: string };
+const productRedirectURLs: productRedirectURLsType = {
+  '123doneProProduct': 'http://127.0.0.1:8080/',
+  'prod_Ex9Z1q5yVydhyk': 'https://123done-latest.dev.lcip.org/',
+  'prod_FUUNYnlDso7FeB': 'https://123done-stage.dev.lcip.org',
+};
+const defaultProductRedirectURL = 'https://mozilla.org';
+
 export type SubscriptionRedirectProps = {
   plan: Plan,
   navigateToUrl: Function,
 };
 
-// Table of lazy-loaded plan detail components - the keys are plan IDs.
-type availableRedirectsType = {
-  [propName: string]: React.LazyExoticComponent<(props: SubscriptionRedirectProps) => JSX.Element>
-};
-const availableRedirects: availableRedirectsType = {
-  // Examples:
-  '123doneProProduct': React.lazy(() => import('./Redirect123donePro')),
-  // '321doneProProduct': React.lazy(() => import('./Redirect321donePro')),
-  'prod_Ex9Z1q5yVydhyk': React.lazy(() => import('./RedirectDev')),
-};
-const defaultRedirect = React.lazy(() => import('./RedirectDefault'));
-
 export const SubscriptionRedirect = ({
-  plan,
   navigateToUrl,
+  plan: {
+    product_id,
+    plan_name,
+  }
 }: SubscriptionRedirectProps) => {
-  const SubRedirect = plan.product_id in availableRedirects
-    ? availableRedirects[plan.product_id]
-    : defaultRedirect;
-  return <SubRedirect {...{ plan, navigateToUrl }} />;
+  const redirectUrl = productRedirectURLs[product_id]
+    || defaultProductRedirectURL;
+
+  useEffect(() => {
+    navigateToUrl(redirectUrl);
+  }, [ navigateToUrl, redirectUrl ]);
+
+  return (
+    <div className="subscription-ready">
+      <h2>Your subscription is ready</h2>
+      <p>Hang on for a moment while we send you to the <span className="plan-name">{plan_name}</span> download page.</p>
+      <a href={redirectUrl}>Click here if you're not automatically redirected</a>
+    </div>
+  );
 };
 
 export default SubscriptionRedirect;