Render email to DHCR using React on server-side. (#1520)

This fixes #892 and tees us up for localizing the email content (#1508).  It also refactors our CSS a bit by adding a new `.jf-email-subject` class that can be used to style the subject lines of our email previews in a DRY way.

frontend/lib/justfix-routes.ts

@@ -220,6 +220,7 @@ function createRentalHistoryRouteInfo(prefix: string) {
   return {
     [ROUTE_PREFIX]: prefix,
     latestStep: prefix,
+    emailToDhcr: `${prefix}/email-to-dhcr.txt`,
     splash: `${prefix}/splash`,
     form: `${prefix}/form`,
     formAddressModal: `${prefix}/form/address-modal`,

frontend/lib/norent/letter-builder/letter-preview.tsx

@@ -155,7 +155,7 @@ export const NorentLetterPreviewPage = NorentNotSentLetterStep((props) => {
           <ForeignLanguageOnly>
             <InYourLanguageMicrocopy />
           </ForeignLanguageOnly>
-          <article className="message jf-email-preview">
+          <article className="message">
             <div className="message-header has-text-weight-normal">
               <Trans>To:</Trans> {session.landlordDetails?.name}{" "}
               {session.landlordDetails?.email &&

frontend/lib/norent/tests/__snapshots__/letter-email-to-user.test.tsx.snap

@@ -2,7 +2,9 @@
 
 exports[`NorentLetterEmailToUser works 1`] = `
 <div>
-  <p>
+  <p
+    class="jf-email-subject"
+  >
     Subject: 
     Here's a copy of your NoRent letter
   </p>

frontend/lib/rh/email-to-dhcr.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+
+import { useContext } from "react";
+import { AppContext } from "../app-context";
+import {
+  EmailSubject,
+  asEmailStaticPage,
+} from "../static-page/email-static-page";
+import {
+  getBoroughChoiceLabels,
+  BoroughChoice,
+} from "../../../common-data/borough-choices";
+
+export const RhEmailToDhcr: React.FC<{}> = () => {
+  const rh = useContext(AppContext).session.rentalHistoryInfo;
+
+  if (!rh) {
+    return <p>We do not have enough information to create an email to DHCR.</p>;
+  }
+
+  const fullName = `${rh.firstName} ${rh.lastName}`;
+  const borough = getBoroughChoiceLabels()[rh.borough as BoroughChoice];
+  const fullAddress = `${rh.address}, ${borough} ${rh.zipcode}`.trim();
+
+  return (
+    <>
+      <EmailSubject value="Request for Rent History" />
+      <p>DHCR administrator,</p>
+      <p>
+        I, {fullName}, am currently living at {fullAddress} in apartment{" "}
+        {rh.apartmentNumber}, and would like to request the complete Rent
+        History for this apartment back to the year 1984.
+      </p>
+      <p>
+        Thank you,
+        <br />
+        {fullName}
+      </p>
+    </>
+  );
+};
+
+export const RhEmailToDhcrStaticPage = asEmailStaticPage(RhEmailToDhcr);

frontend/lib/rh/rental-history.tsx

@@ -14,26 +14,22 @@ import { exactSubsetOrDefault, assertNotNull } from "../util/util";
 import { NextButton, BackButton } from "../ui/buttons";
 import { PhoneNumberFormField } from "../forms/phone-number-form-field";
 import { AppContext, AppContextType } from "../app-context";
-import { Link, Route } from "react-router-dom";
+import { Link, Route, Switch } from "react-router-dom";
 import { RhFormInput } from "../queries/globalTypes";
 import { RhSendEmailMutation } from "../queries/RhSendEmailMutation";
-import * as rhEmailText from "../../../common-data/rh.json";
 import { AddressAndBoroughField } from "../forms/address-and-borough-form-field";
 import {
   ConfirmAddressModal,
   redirectToAddressConfirmationOrNextStep,
 } from "../ui/address-confirmation";
-import {
-  getBoroughChoiceLabels,
-  BoroughChoice,
-} from "../../../common-data/borough-choices";
 import { ClearSessionButton } from "../forms/clear-session-button";
 import { OutboundLink } from "../analytics/google-analytics";
 import { CustomerSupportLink } from "../ui/customer-support-link";
 import { updateAddressFromBrowserStorage } from "../browser-storage";
 import { GetStartedButton } from "../ui/get-started-button";
 import { ProgressiveLoadableConfetti } from "../ui/confetti-loadable";
 import { DemoDeploymentNote } from "../ui/demo-deployment-note";
+import { RhEmailToDhcr, RhEmailToDhcrStaticPage } from "./email-to-dhcr";
 import { renderSuccessHeading } from "../ui/success-heading";
 
 const RH_ICON = "frontend/img/ddo/rent.svg";
@@ -188,9 +184,6 @@ function RentalHistoryForm(): JSX.Element {
 }
 
 function RentalHistoryPreview(): JSX.Element {
-  const appContext = useContext(AppContext);
-  const formData = appContext.session.rentalHistoryInfo;
-
   return (
     <Page title="Review your email to the DHCR">
       <h1 className="title is-4">Review your request to the DHCR</h1>
@@ -199,45 +192,14 @@ function RentalHistoryPreview(): JSX.Element {
         address and apartment number so that the DHCR can mail you.
       </p>
       <br />
-      {formData && (
-        <article className="message">
-          <div className="message-header">
-            <p className="has-text-weight-normal">
-              To: New York Division of Housing and Community Renewal (DHCR)
-            </p>
-          </div>
-          <div className="message-body">
-            <h4 className="is-italic">
-              Subject: {rhEmailText.DHCR_EMAIL_SUBJECT}
-            </h4>
-            <div className="is-divider jf-divider-narrow" />
-            <p>DHCR administrator,</p>
-            <br />
-            <p>
-              {rhEmailText.DHCR_EMAIL_BODY.replace(
-                "FULL_NAME",
-                formData.firstName + " " + formData.lastName
-              )
-                .replace(
-                  "FULL_ADDRESS",
-                  (
-                    formData.address +
-                    ", " +
-                    getBoroughChoiceLabels()[
-                      formData.borough as BoroughChoice
-                    ] +
-                    " " +
-                    formData.zipcode
-                  ).trim()
-                )
-                .replace("APARTMENT_NUMBER", formData.apartmentNumber)}
-            </p>
-            <br />
-            <p>{rhEmailText.DHCR_EMAIL_SIGNATURE} </p>
-            <p>{formData.firstName + " " + formData.lastName}</p>
-          </div>
-        </article>
-      )}
+      <article className="message">
+        <div className="message-header has-text-weight-normal">
+          To: New York Division of Housing and Community Renewal (DHCR)
+        </div>
+        <div className="message-body content">
+          <RhEmailToDhcr />
+        </div>
+      </article>
       <DemoDeploymentNote>
         <p>
           This demo site <strong>will not send</strong> a real request to the
@@ -360,8 +322,19 @@ export const getRentalHistoryRoutesProps = (): ProgressRoutesProps => ({
   ],
 });
 
-const RentalHistoryRoutes = buildProgressRoutesComponent(
+const RentalHistoryProgressRoutes = buildProgressRoutesComponent(
   getRentalHistoryRoutesProps
 );
 
+const RentalHistoryRoutes: React.FC<{}> = () => (
+  <Switch>
+    <Route
+      path={JustfixRoutes.locale.rh.emailToDhcr}
+      exact
+      component={RhEmailToDhcrStaticPage}
+    />
+    <Route component={RentalHistoryProgressRoutes} />
+  </Switch>
+);
+
 export default RentalHistoryRoutes;

frontend/lib/rh/tests/__snapshots__/email-to-dhcr.test.tsx.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`email to dhcr renders 1`] = `
+<div>
+  <p
+    class="jf-email-subject"
+  >
+    Subject: 
+    Request for Rent History
+  </p>
+  <p>
+    DHCR administrator,
+  </p>
+  <p>
+    I, 
+    boop jones
+    , am currently living at 
+    150 DOOMBRINGER STREET, Manhattan 10001
+     in apartment
+     
+    2
+    , and would like to request the complete Rent History for this apartment back to the year 1984.
+  </p>
+  <p>
+    Thank you,
+    <br />
+    boop jones
+  </p>
+</div>
+`;

frontend/lib/rh/tests/email-to-dhcr.test.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { AppTesterPal } from "../../tests/app-tester-pal";
+import { RhEmailToDhcr } from "../email-to-dhcr";
+import { exampleRentalHistoryInfo } from "./example-rh-info";
+
+test("email to dhcr renders", () => {
+  const pal = new AppTesterPal(<RhEmailToDhcr />, {
+    session: {
+      rentalHistoryInfo: exampleRentalHistoryInfo,
+    },
+  });
+
+  expect(pal.rr.container).toMatchSnapshot();
+});

frontend/lib/rh/tests/example-rh-info.ts

@@ -0,0 +1,12 @@
+import { AllSessionInfo_rentalHistoryInfo } from "../../queries/AllSessionInfo";
+
+export const exampleRentalHistoryInfo: AllSessionInfo_rentalHistoryInfo = {
+  firstName: "boop",
+  lastName: "jones",
+  address: "150 DOOMBRINGER STREET",
+  apartmentNumber: "2",
+  phoneNumber: "2120000000",
+  borough: "MANHATTAN",
+  zipcode: "10001",
+  addressVerified: true,
+};

frontend/lib/rh/tests/rental-history.test.tsx

@@ -18,6 +18,7 @@ import {
 } from "../../queries/globalTypes";
 import { BlankOnboardingInfo } from "../../queries/OnboardingInfo";
 import { LogoutMutation } from "../../queries/LogoutMutation";
+import { exampleRentalHistoryInfo } from "./example-rh-info";
 
 const tester = new ProgressRoutesTester(
   getRentalHistoryRoutesProps(),
@@ -82,16 +83,7 @@ describe("Rental history frontend", () => {
     const pal = new AppTesterPal(<RentalHistoryRoutes />, {
       url: JustfixRoutes.locale.rh.form,
       session: {
-        rentalHistoryInfo: {
-          firstName: "boop",
-          lastName: "jones",
-          address: "150 DOOMBRINGER STREET",
-          apartmentNumber: "2",
-          phoneNumber: "2120000000",
-          borough: "MANHATTAN",
-          zipcode: "10001",
-          addressVerified: true,
-        },
+        rentalHistoryInfo: exampleRentalHistoryInfo,
       },
     });
     const inputAddress = pal.rr.getAllByLabelText(

frontend/lib/static-page/email-static-page.tsx

@@ -21,7 +21,7 @@ export const EmailSubject = withRouter(
       return null;
     }
 
-    return <p>Subject: {props.value}</p>;
+    return <p className="jf-email-subject">Subject: {props.value}</p>;
   }
 );
 

frontend/sass/_bulma-overrides.scss

@@ -18,8 +18,3 @@ $widescreen-enabled: false;
 
 // Disable the fullhd breakpoint
 $fullhd-enabled: false;
-
-// Minimize the margin around Bulma dividers
-.is-divider.jf-divider-narrow {
-  margin: 1rem 0;
-}

frontend/sass/_email.scss

@@ -0,0 +1,6 @@
+.jf-email-subject {
+  font-size: 1rem;
+  font-style: italic;
+  border-bottom: 2px solid $grey-lighter;
+  padding-bottom: 1rem;
+}

frontend/sass/norent/_email-overrides.scss

@@ -0,0 +1,3 @@
+.jf-email-subject {
+  border-bottom: 1px solid $light;
+}

frontend/sass/norent/_primary_pages.scss

@@ -128,15 +128,6 @@ $norent-sticky-menu-height: 100px;
   }
 }
 
-.jf-email-preview {
-  .message-body p:first-child {
-    font-size: 1rem;
-    font-style: italic;
-    border-bottom: 1px solid $light;
-    padding-bottom: 1rem;
-  }
-}
-
 .jf-how-it-works-container {
   .column {
     p:not(.title) {

frontend/sass/norent/styles.scss

@@ -32,6 +32,8 @@ $jf-alt-title-family: "Montserrat Bold", sans-serif;
 @import "../_autocomplete.scss";
 @import "../_helpers.scss";
 @import "./_language-toggle.scss";
+@import "../_email.scss";
+@import "./_email-overrides.scss";
 
 @import "./_fonts.scss";
 
@@ -105,11 +107,6 @@ $jf-navbar-content: $black;
     padding: 4rem 2rem;
   }
 
-  // Default divider styling
-  .is-divider {
-    border-top: 1px solid #dbdbdb;
-  }
-
   // Make all media icons have vertical centering
   // as well as smaller margins on mobile
   .media .media-left,

frontend/sass/styles.scss

@@ -26,6 +26,7 @@
 @import "./_animations.scss";
 @import "./_letter-preview.scss";
 @import "./_helpers.scss";
+@import "./_email.scss";
 
 // These variables define the background and content colors for the nav-bar
 $jf-navbar-background: $primary;