Add confetti to HP Action confirmation page. Fixes #395.

frontend/lib/confetti-loadable.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Loadable from 'react-loadable';
+import { ConfettiProps } from './confetti';
+import { SimpleProgressiveEnhancement } from './progressive-enhancement';
+
+const LoadableConfetti = Loadable({
+  loader: () => import(/* webpackChunkName: "confetti" */ './confetti'),
+  // We don't want to display anything while the confetti is loading.
+  loading() { return null; },
+  // This ensures that our server doesn't generate <script> tags
+  // to load this component in its static HTML: we don't *want* to block page
+  // load on this optional feature.
+  modules: [],
+  webpack: () => [],
+});
+
+export function ProgressiveLoadableConfetti(props: ConfettiProps): JSX.Element {
+  return <SimpleProgressiveEnhancement><LoadableConfetti {...props} /></SimpleProgressiveEnhancement>;
+}

frontend/lib/confetti.tsx

@@ -24,7 +24,7 @@ export function ensurePointerEventsIsNone(el: Element) {
   }
 }
 
-interface ConfettiProps extends ConfettiCanvasProps {
+export interface ConfettiProps extends ConfettiCanvasProps {
 }
 
 interface ConfettiState {

frontend/lib/hp-action.tsx

@@ -11,6 +11,7 @@ import { GenerateHPActionPDF } from './queries/GenerateHPActionPDF';
 import { PdfLink } from './pdf-link';
 import { ProgressRoutesProps, buildProgressRoutesComponent } from './progress-routes';
 import { OutboundLink } from './google-analytics';
+import { ProgressiveLoadableConfetti } from './confetti-loadable';
 
 const onboardingForHPActionRoute = Routes.hp.onboarding.latestStep;
 
@@ -105,6 +106,7 @@ const HPActionConfirmation = withAppContext((props: AppContextType) => {
   return (
     <Page title="Your HP Action packet has been created!!" className="content">
       <h1 className="title is-4">Your HP Action packet has been created!</h1>
+      <ProgressiveLoadableConfetti regenerateForSecs={1} />
       <p>Here is all of your HP Action paperwork, including instructions:</p>
       {href && <PdfLink href={href} label="Download HP Action packet" />}
       <h2>What happens next?</h2>

frontend/lib/pages/loc-confirmation.tsx

@@ -1,25 +1,13 @@
 import React from 'react';
-import Loadable from 'react-loadable';
 
 import { withAppContext, AppContextType } from '../app-context';
 import { LetterRequestMailChoice } from '../queries/globalTypes';
 import { AllSessionInfo_letterRequest } from '../queries/AllSessionInfo';
 import Page from '../page';
 import { friendlyDate } from '../util';
 import { OutboundLink } from '../google-analytics';
-import { SimpleProgressiveEnhancement } from '../progressive-enhancement';
 import { PdfLink } from '../pdf-link';
-
-const LoadableConfetti = Loadable({
-  loader: () => import(/* webpackChunkName: "confetti" */ '../confetti'),
-  // We don't want to display anything while the confetti is loading.
-  loading() { return null; },
-  // This ensures that our server doesn't generate <script> tags
-  // to load this component in its static HTML: we don't *want* to block page
-  // load on this optional feature.
-  modules: [],
-  webpack: () => [],
-});
+import { ProgressiveLoadableConfetti } from '../confetti-loadable';
 
 const DownloadLetterLink = (props: { locPdfURL: string }) => (
   <PdfLink href={props.locPdfURL} label="Download letter" />
@@ -84,7 +72,7 @@ const LetterConfirmation = withAppContext((props: AppContextType): JSX.Element =
 
   return (
     <Page title={letterConfirmationPageTitle}>
-      <SimpleProgressiveEnhancement><LoadableConfetti regenerateForSecs={1} /></SimpleProgressiveEnhancement>
+      <ProgressiveLoadableConfetti regenerateForSecs={1} />
       <div className="content">
         <h1 className="title">{letterConfirmationPageTitle}</h1>
         {letterStatus}