[WIP] Internationalize the Letter of Complaint front-end

common-data/config.ts

@@ -14,6 +14,7 @@ const config: DjangoChoicesTypescriptConfig = {
       jsonFilename: "issue-area-choices.json",
       typeName: "IssueAreaChoice",
       exportLabels: true,
+      internationalizeLabels: true,
       filterOut: ["LANDLORD"],
     },
     {
@@ -30,11 +31,13 @@ const config: DjangoChoicesTypescriptConfig = {
       jsonFilename: "lease-choices.json",
       typeName: "LeaseChoice",
       exportLabels: true,
+      internationalizeLabels: true,
       filterOut: ["NOT_SURE"],
     },
     {
       jsonFilename: "signup-intent-choices.json",
       typeName: "SignupIntent",
+      internationalizeLabels: true,
       exportLabels: true,
     },
     {

common-data/issue-area-choices.ts

@@ -1,6 +1,9 @@
 // This file was auto-generated by commondatabuilder.
 // Please don't edit it.
 
+import { t } from "@lingui/macro";
+import { li18n } from '../frontend/lib/i18n-lingui';
+
 export type IssueAreaChoice = "BEDROOMS"|"KITCHEN"|"LIVING_ROOM"|"BATHROOMS"|"HOME"|"PUBLIC_AREAS";
 
 export const IssueAreaChoices: IssueAreaChoice[] = [
@@ -24,11 +27,11 @@ export type IssueAreaChoiceLabels = {
 
 export function getIssueAreaChoiceLabels(): IssueAreaChoiceLabels {
   return {
-    BEDROOMS: "Bedrooms",
-    KITCHEN: "Kitchen",
-    LIVING_ROOM: "Living room",
-    BATHROOMS: "Bathrooms",
-    HOME: "Home-wide",
-    PUBLIC_AREAS: "Building-wide",
+    BEDROOMS: li18n._(t`Bedrooms`),
+    KITCHEN: li18n._(t`Kitchen`),
+    LIVING_ROOM: li18n._(t`Living room`),
+    BATHROOMS: li18n._(t`Bathrooms`),
+    HOME: li18n._(t`Home-wide`),
+    PUBLIC_AREAS: li18n._(t`Building-wide`),
   };
 }

common-data/lease-choices.ts

@@ -1,6 +1,9 @@
 // This file was auto-generated by commondatabuilder.
 // Please don't edit it.
 
+import { t } from "@lingui/macro";
+import { li18n } from '../frontend/lib/i18n-lingui';
+
 export type LeaseChoice = "RENT_STABILIZED"|"MARKET_RATE"|"NYCHA"|"OTHER"|"NO_LEASE";
 
 export const LeaseChoices: LeaseChoice[] = [
@@ -23,10 +26,10 @@ export type LeaseChoiceLabels = {
 
 export function getLeaseChoiceLabels(): LeaseChoiceLabels {
   return {
-    RENT_STABILIZED: "Rent Stabilized/Rent Controlled",
-    MARKET_RATE: "Market Rate",
-    NYCHA: "NYCHA Housing Development",
-    OTHER: "Other (Mitchell Lama, COOP/Condo, House, HUD, etc.)",
-    NO_LEASE: "I don't have a lease",
+    RENT_STABILIZED: li18n._(t`Rent Stabilized/Rent Controlled`),
+    MARKET_RATE: li18n._(t`Market Rate`),
+    NYCHA: li18n._(t`NYCHA Housing Development`),
+    OTHER: li18n._(t`Other (Mitchell Lama, COOP/Condo, House, HUD, etc.)`),
+    NO_LEASE: li18n._(t`I don't have a lease`),
   };
 }

common-data/signup-intent-choices.ts

@@ -1,6 +1,9 @@
 // This file was auto-generated by commondatabuilder.
 // Please don't edit it.
 
+import { t } from "@lingui/macro";
+import { li18n } from '../frontend/lib/i18n-lingui';
+
 export type SignupIntent = "LOC"|"HP"|"EHP"|"NORENT";
 
 export const SignupIntents: SignupIntent[] = [
@@ -22,9 +25,9 @@ export type SignupIntentLabels = {
 
 export function getSignupIntentLabels(): SignupIntentLabels {
   return {
-    LOC: "Letter of Complaint",
-    HP: "HP Action",
-    EHP: "Emergency HP Action",
-    NORENT: "No rent letter",
+    LOC: li18n._(t`Letter of Complaint`),
+    HP: li18n._(t`HP Action`),
+    EHP: li18n._(t`Emergency HP Action`),
+    NORENT: li18n._(t`No rent letter`),
   };
 }

frontend/lib/forms/email-attachment.tsx

@@ -4,10 +4,15 @@ import { PageTitle } from "../ui/page";
 import { Formset } from "./formset";
 import { TextualFormField } from "./form-fields";
 import { NextButton } from "../ui/buttons";
-import { maxRecipients } from "../../../common-data/email-attachment-validation.json";
+import eav from "../../../common-data/email-attachment-validation.json";
 import { FetchMutationInfo } from "./forms-graphql";
 import { WithServerFormFieldErrors } from "./form-errors";
 import { DemoDeploymentNote } from "../ui/demo-deployment-note";
+import { li18n } from "../i18n-lingui";
+import { t, Trans } from "@lingui/macro";
+
+// https://github.com/lingui/js-lingui/issues/514
+const { maxRecipients } = eav;
 
 type Recipient = {
   email: string;
@@ -29,8 +34,8 @@ export type EmailAttachmentFormProps = {
 const EMPTY_FORM: EmailAttachmentInput = { recipients: [] };
 
 function labelForRecipient(i: number): string {
-  const label = `Email address for recipient #${i + 1}`;
-  return i === 0 ? label : `${label} (optional)`;
+  const label = li18n._(t`Email address for recipient #${i + 1}`);
+  return i === 0 ? label : `${label} ` + li18n._(t`(optional)`);
 }
 
 function SuccessMessage(props: { text: string }) {
@@ -59,19 +64,24 @@ export function EmailAttachmentForm(props: EmailAttachmentFormProps) {
           <>
             {wasSentTo && (
               <SuccessMessage
-                text={`Got it! We're sending your ${noun} to ${wasSentTo.join(
-                  ", "
-                )}.`}
+                text={
+                  li18n._(t`Got it! We're sending your ${noun} to`) +
+                  ` ${wasSentTo.join(", ")}.`
+                }
               />
             )}
             <div className={wasSentTo ? "is-hidden" : ""}>
               <p>
-                You can use the form below if you'd like us to email your {noun}{" "}
-                to up to {maxRecipients} addresses.
+                <Trans>
+                  You can use the form below if you'd like us to email your{" "}
+                  {noun} to up to {maxRecipients} addresses.
+                </Trans>
               </p>
               <DemoDeploymentNote>
                 <p>
-                  Using this form <strong>will send</strong> real e-mails.
+                  <Trans>
+                    Using this form <strong>will send</strong> real e-mails.
+                  </Trans>
                 </p>
               </DemoDeploymentNote>
               <Formset

frontend/lib/issues/issue-pages.tsx

@@ -32,10 +32,7 @@ import {
   IssueAreaChoices,
 } from "../../../common-data/issue-area-choices";
 import { IssueChoice } from "../../../common-data/issue-choices";
-import {
-  CUSTOM_ISSUE_MAX_LENGTH,
-  MAX_CUSTOM_ISSUES_PER_AREA,
-} from "../../../common-data/issue-validation.json";
+import issueConsts from "../../../common-data/issue-validation.json";
 import { FormContext } from "../forms/form-context";
 import { Formset } from "../forms/formset";
 import { FormsetItem, formsetItemProps } from "../forms/formset-item";
@@ -44,9 +41,14 @@ import { Modal } from "../ui/modal";
 import { UpdateBrowserStorage, useBrowserStorage } from "../browser-storage";
 import { NoScriptFallback } from "../ui/progressive-enhancement";
 import { getQuerystringVar } from "../util/querystring";
+import { li18n } from "../i18n-lingui";
+import { t, Trans } from "@lingui/macro";
 
 const checkSvg = require("../svg/check-solid.svg") as JSX.Element;
 
+// https://github.com/lingui/js-lingui/issues/514
+const { CUSTOM_ISSUE_MAX_LENGTH, MAX_CUSTOM_ISSUES_PER_AREA } = issueConsts;
+
 type IssuesAreaPropsWithCtx = IssuesRouteAreaProps & {
   toHome: string;
 };
@@ -62,13 +64,15 @@ export class IssuesArea extends React.Component<IssuesAreaPropsWithCtx> {
         <HiddenFormField {...ctx.fieldPropsFor("area")} />
         <MultiCheckboxFormField
           {...ctx.fieldPropsFor("issues")}
-          label="Select your issues"
+          label={li18n._(t`Select your issues`)}
           choices={issueChoicesForArea(area)}
         />
         <br />
         <p>
-          Don't see your issues listed? You can add up to{" "}
-          {MAX_CUSTOM_ISSUES_PER_AREA} additional issues below.
+          <Trans>
+            Don't see your issues listed? You can add up to{" "}
+            {MAX_CUSTOM_ISSUES_PER_AREA} additional issues below.
+          </Trans>
         </p>
         <br />
         <Formset
@@ -85,7 +89,9 @@ export class IssuesArea extends React.Component<IssuesAreaPropsWithCtx> {
                 fieldProps={{
                   style: { maxWidth: `${CUSTOM_ISSUE_MAX_LENGTH}em` },
                 }}
-                label={`Custom issue #${i + 1} (optional)`}
+                label={
+                  li18n._(t`Custom issue #`) + (i + 1) + li18n._(t`(optional)`)
+                }
               />
             </FormsetItem>
           )}
@@ -98,8 +104,11 @@ export class IssuesArea extends React.Component<IssuesAreaPropsWithCtx> {
   renderFormButtons(isLoading: boolean): JSX.Element {
     return (
       <ProgressButtons>
-        <BackButton to={this.props.toHome} label="Cancel and go back" />
-        <NextButton isLoading={isLoading} label="Save" />
+        <BackButton
+          to={this.props.toHome}
+          label={li18n._(t`Cancel and go back`)}
+        />
+        <NextButton isLoading={isLoading} label={li18n._(t`Save`)} />
       </ProgressButtons>
     );
   }
@@ -123,10 +132,10 @@ export class IssuesArea extends React.Component<IssuesAreaPropsWithCtx> {
     });
     const svg = assertNotUndefined(ISSUE_AREA_SVGS[area]);
     return (
-      <Page title={`${label} - Issue checklist`}>
+      <Page title={`${label} - ` + li18n._(t`Issue checklist`)}>
         <div>
           <h1 className="title is-4 jf-issue-area">
-            {svg} {label} issues
+            {svg} {label} <Trans>issues</Trans>
           </h1>
           <SessionUpdatingFormSubmitter
             confirmNavIfChanged
@@ -144,10 +153,10 @@ export class IssuesArea extends React.Component<IssuesAreaPropsWithCtx> {
 
 export function getIssueLabel(count: number): string {
   return count === 0
-    ? "No issues reported"
+    ? li18n._(t`No issues reported`)
     : count === 1
-    ? "One issue reported"
-    : `${count} issues reported`;
+    ? li18n._(t`One issue reported`)
+    : li18n._(t`${count} issues reported`);
 }
 
 type IssueAreaLinkProps = {
@@ -170,8 +179,11 @@ function IssueAreaLink(props: IssueAreaLinkProps): JSX.Element {
         );
         const url = props.routes.area.create(allCapsToSlug(area));
         const modalUrl = props.routes.modal;
-        const actionLabel = count === 0 ? "Add issues" : "Add or remove issues";
-        const title = `${actionLabel} for ${label}`;
+        const actionLabel =
+          count === 0
+            ? li18n._(t`Add issues`)
+            : li18n._(t`Add or remove issues`);
+        const title = `${actionLabel}: ${label}`;
         const issueLabel = getIssueLabel(count);
         const ariaLabel = `${title} (${issueLabel})`;
         const svg = assertNotUndefined(ISSUE_AREA_SVGS[area]);
@@ -211,7 +223,7 @@ function LinkToNextStep(props: { toNext: string }): JSX.Element {
         if (ctx.session.issues.length || ctx.session.customIssuesV2?.length) {
           return (
             <Link to={props.toNext} className="button is-primary is-medium">
-              Next
+              <Trans>Next</Trans>
             </Link>
           );
         } else {
@@ -251,23 +263,29 @@ type IssuesHomeProps = IssuesRoutesProps;
 const CovidRiskMessage = () => (
   <>
     <p>
-      <strong className="has-text-danger">Warning: </strong>
-      Please be aware that letting a repair-worker into your home to make
-      repairs may increase exposure to the COVID-19 virus.
+      <strong className="has-text-danger">
+        <Trans>Warning:</Trans>
+      </strong>
+      <Trans>
+        Please be aware that letting a repair-worker into your home to make
+        repairs may increase exposure to the COVID-19 virus.
+      </Trans>
     </p>
     <p>
-      In order to follow social distancing guidelines and to limit exposure, we
-      recommend only asking for repairs{" "}
-      <strong>in the case of an emergency</strong> such as if you have no heat,
-      no hot water, or no gas.
+      <Trans id="justfix.CovidRecForEmergencyRepairsOnly">
+        In order to follow social distancing guidelines and to limit exposure,
+        we recommend only asking for repairs{" "}
+        <strong>in the case of an emergency</strong> such as if you have no
+        heat, no hot water, or no gas.
+      </Trans>
     </p>
   </>
 );
 
 function CovidRiskModal(props: { routes: IssuesRouteInfo }): JSX.Element {
   return (
     <Modal
-      title="Social distancing and repairs"
+      title={li18n._(t`Social distancing and repairs`)}
       withHeading
       onCloseGoTo={(loc) => {
         const slug = getQuerystringVar(loc.search, "area") || "";
@@ -286,7 +304,7 @@ function CovidRiskModal(props: { routes: IssuesRouteInfo }): JSX.Element {
               className={`button is-primary is-medium is-danger`}
               {...ctx.getLinkCloseProps()}
             >
-              I understand the risk
+              <Trans>I understand the risk</Trans>
             </Link>
           </div>
           <UpdateBrowserStorage hasViewedCovidRiskModal={true} />
@@ -314,16 +332,23 @@ class IssuesHome extends React.Component<IssuesHomeProps> {
     const labels = getIssueAreaChoiceLabels();
     const introContent = this.props.introContent || (
       <>
-        This <strong>issue checklist</strong> will be sent to your landlord.
+        <Trans>
+          This <strong>issue checklist</strong> will be sent to your landlord.
+        </Trans>
       </>
     );
     return (
-      <Page title="Home self-inspection" withHeading>
+      <Page title={li18n._(t`Home self-inspection`)}>
         <div>
+          <h1 className="title is-4 is-spaced">
+            <Trans>Home self-inspection</Trans>
+          </h1>
           <p className="subtitle is-6">
-            Please go room-by-room and select all of the issues that you are
-            experiencing. {introContent}{" "}
-            <strong>Make sure to be thorough.</strong>
+            <Trans>
+              Please go room-by-room and select all of the issues that you are
+              experiencing. {introContent}{" "}
+              <strong>Make sure to be thorough.</strong>
+            </Trans>
           </p>
           <NoScriptFallback>
             <>
@@ -342,7 +367,7 @@ class IssuesHome extends React.Component<IssuesHomeProps> {
           <br />
           <ProgressButtons>
             <Link to={this.props.toBack} className="button is-light is-medium">
-              Back
+              <Trans>Back</Trans>
             </Link>
             <LinkToNextStep toNext={this.props.toNext} />
           </ProgressButtons>

frontend/lib/justfix-site.tsx

@@ -130,9 +130,14 @@ const JustfixRoute: React.FC<RouteComponentProps> = (props) => {
         exact
         component={LogoutPage}
       />
-      {toPLRoute(getOnboardingRouteForIntent(OnboardingInfoSignupIntent.LOC))}
+      {toPLRoute(getOnboardingRouteForIntent(OnboardingInfoSignupIntent.LOC), {
+        locales: ["en"],
+        wipLocales: ["es"],
+      })}
       <PLRoute
         path={JustfixRoutes.locale.loc.prefix}
+        locales={["en"]}
+        wipLocales={["es"]}
         component={LoadableLetterOfComplaintRoutes}
       />
       {redirectToEHP && (