From 93864cdc1bc1d2d07584de3f5bc2ebc0eea87d09 Mon Sep 17 00:00:00 2001
From: Atul Varma <varmaa@gmail.com>
Date: Thu, 29 Nov 2018 14:04:37 -0500
Subject: [PATCH] Add confetti to HP Action confirmation page. Fixes #395.

---
 frontend/lib/confetti-loadable.tsx      | 19 +++++++++++++++++++
 frontend/lib/confetti.tsx               |  2 +-
 frontend/lib/hp-action.tsx              |  2 ++
 frontend/lib/pages/loc-confirmation.tsx | 16 ++--------------
 4 files changed, 24 insertions(+), 15 deletions(-)
 create mode 100644 frontend/lib/confetti-loadable.tsx

diff --git a/frontend/lib/confetti-loadable.tsx b/frontend/lib/confetti-loadable.tsx
new file mode 100644
index 000000000..58c74a7ab
--- /dev/null
+++ b/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>;
+}
diff --git a/frontend/lib/confetti.tsx b/frontend/lib/confetti.tsx
index cfbb707bc..2a22cac24 100644
--- a/frontend/lib/confetti.tsx
+++ b/frontend/lib/confetti.tsx
@@ -24,7 +24,7 @@ export function ensurePointerEventsIsNone(el: Element) {
   }
 }
 
-interface ConfettiProps extends ConfettiCanvasProps {
+export interface ConfettiProps extends ConfettiCanvasProps {
 }
 
 interface ConfettiState {
diff --git a/frontend/lib/hp-action.tsx b/frontend/lib/hp-action.tsx
index cc7c3d544..d0d8ab394 100644
--- a/frontend/lib/hp-action.tsx
+++ b/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>
diff --git a/frontend/lib/pages/loc-confirmation.tsx b/frontend/lib/pages/loc-confirmation.tsx
index e887ab8c4..934bc9e59 100644
--- a/frontend/lib/pages/loc-confirmation.tsx
+++ b/frontend/lib/pages/loc-confirmation.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import Loadable from 'react-loadable';
 
 import { withAppContext, AppContextType } from '../app-context';
 import { LetterRequestMailChoice } from '../queries/globalTypes';
@@ -7,19 +6,8 @@ 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}