Add Spanish and Chinese translations (#807)

* Final copy updates

* Add Spanish translations

* Add Chinese translations

* Fix translation errors in frontend

* Update Components page following type updates

* Update CHANGELOG

Author: rachelekm

CHANGELOG.md

@@ -53,6 +53,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Add client feedback copy updates [#793](https://github.com/azavea/echo-locator/pull/793)
 - Add transit routing architecture ADR [#804](https://github.com/azavea/echo-locator/pull/804)
 - Add neighborhood csv submission instructions [#801](https://github.com/azavea/echo-locator/pull/801)
+- Add Spanish and Mandarin translations [#807](https://github.com/azavea/echo-locator/pull/807)
 
 ### Changed
 

src/frontend/public/locales/en/translation.json

@@ -41,7 +41,12 @@
         "otherTitle": "Other recommended neighborhoods",
         "otherTitleLegend": "Other",
         "tooFarTitle": "Not a match",
-        "tooFarDisclaimer": "These neighborhoods are out of reach with your selected transit option, meaning commute times exceeding 1 hour"
+        "tooFarDisclaimer": "These neighborhoods are excluded by the filters set in your profile",
+        "groupedCountZipCodes": "zip codes",
+        "groupedLoadMore": "Load more",
+        "eccBenefits": "ECC Benefits",
+        "min": "min",
+        "over2Hours": "Over 2 hr"
     },
     "photoCredit": "Photo by {{artist}}. ",
     "photoSource": "Source.",
@@ -62,8 +67,14 @@
         "schoolChoice": "School choice options",
         "schoolsSafetyCard": {
             "header": "Schools & Safety",
-            "schoolsLabel": "Schools",
-            "safetyLabel": "Safety"
+            "schools": "Schools",
+            "safety": "Safety",
+            "commute": "Commute",
+            "high": "High",
+            "above": "Above Avg",
+            "average": "Average",
+            "below": "Below Avg",
+            "low": "Low"
         },
         "findUnitsLink": "Go to <strong>Find Units</strong> to learn more",
         "aboutAreaSection": {
@@ -136,7 +147,7 @@
             "header": "Your Profile",
             "stepBedroom": {
                 "question": "How many bedrooms does your voucher have?",
-                "description": "Reach out to your BHA Housing Coordinator if you're unsure."
+                "description": "Reach out to your BHA Housing Specialist if you're unsure."
             },
             "stepImportance": {
                 "question": "What is important to you?",
@@ -188,7 +199,10 @@
         "bodyText": "Edit your settings and add filters using the buttons at the top",
         "showMyRecommendations": "Show my recommendations",
         "listNeighborhoods": "List all neighborhoods",
-        "showTopTen": "Show Top 10"
+        "showTopTen": "Show Top 10",
+        "next": "Next",
+        "details": "Details",
+        "prev": "Prev"
     },
     "filterModal": {
         "dialogHeading": "Filter recommendations",
@@ -201,7 +215,8 @@
         "regionMapCaption": "Based on a map by",
         "echoLink": "Learn more about ECHO",
         "regionsFilterLabel": "Filter by region selections",
-        "eccFilter": "Only recommend Expanded Choice Communities (ECC)"
+        "eccFilter": "Only recommend Expanded Choice Communities (ECC)",
+        "eccFilterDescription": "Moving to an ECC area could qualify you for financial assistance to help with your security deposit, broker fees, and moving expenses."
     },
     "editTripsModal": {
         "dialogHeading": "Choose a trip",

src/frontend/public/locales/es/translation.json

@@ -149,7 +149,7 @@ const EditFiltersModal = ({ isMobile = false }) => {
                             customImageClassName="w-full"
                             customCaption={
                                 <>
-                                    CC BY-SA 3.0. $
+                                    CC BY-SA 3.0.{" "}
                                     {t("filterModal.regionMapCaption")}{" "}
                                     <Link
                                         href={PROTONK_URL}
@@ -213,7 +213,9 @@ const EditFiltersModal = ({ isMobile = false }) => {
                                         ecc: isSelected,
                                     })
                                 }
-                                description={`Select to only recommend neighborhoods that are Expanded Choice Communities (ECC)`}
+                                description={t(
+                                    "filterModal.eccFilterDescription"
+                                )}
                                 footer={
                                     <Link
                                         href={BHA_URL}

src/frontend/public/locales/zh/translation.json

@@ -87,7 +87,10 @@ const StepTrips = ({
                     >
                         <div>
                             <h2 className="text-xl font-bold text-gray-900">
-                                {destination.purpose}
+                                {t([
+                                    "destinationPurposes." +
+                                        destination.purpose,
+                                ])}
                             </h2>
                             <p className="max-w-40 flex flex-wrap font-normal text-gray-600 text-sm">
                                 {destination.location.label}

src/frontend/src/components/EditFiltersModal.tsx

@@ -13,8 +13,9 @@ export const cardStyles = tv({
         zip: "text-rg text-gray-500",
         tagsContainer: "flex flex-wrap gap-2",
         tag: " h-[21px] flex items-center gap-2 rounded-[var(--spacing-2)] border border-gray-300 px-2 py-1 text-xs font-bold text-[#006512]",
-        statsContainer: "flex flex-start gap-5 self-stretch -mt-2",
-        statItem: "flex flex-1 flex-col px-0 py-3 align-start",
+        statsContainer:
+            "flex flex-start gap-5 self-stretch -mt-2 overflow-hidden",
+        statItem: "flex flex-1 max-w-[33.33%] flex-col px-0 py-3 align-start",
         navContainer:
             "flex align-center self-stretch gap-3 border-t border-gray-300 p-3 bg-gray-100",
     },
@@ -37,5 +38,13 @@ export const cardStyles = tv({
                 root: "relative",
             },
         },
+        isPopup: {
+            true: {
+                root: "w-fit",
+            },
+            false: {
+                root: "w-auto",
+            },
+        },
     },
 });

src/frontend/src/components/EditWizard/StepTrips.tsx

@@ -11,6 +11,7 @@ import Button from "components/base/Button/Button";
 import Meter from "components/base/Meter/Meter";
 import Range from "components/base/Range/Range";
 import SchoolMeter from "components/SchoolMeter";
+import { useTranslation } from "react-i18next";
 import type { Stats } from "src/libs/formatNeighborhoodDataByCard";
 import { cardStyles } from "./NeighborhoodCard.styles";
 
@@ -57,7 +58,12 @@ const NeighborhoodCard = ({
         statsContainer,
         statItem,
         navContainer,
-    } = cardStyles({ hasImage: !!imageUrl, ...listViewStyling });
+    } = cardStyles({
+        hasImage: !!imageUrl,
+        isPopup: isPopup,
+        ...listViewStyling,
+    });
+    const { t } = useTranslation();
 
     const hasTag = isTopTen || hasECC;
     const { favorites } = useAppSelector(selectUserProfile);
@@ -106,13 +112,15 @@ const NeighborhoodCard = ({
                         {isTopTen && (
                             <div className={tag()}>
                                 <FlagIcon className="h-4 w-4 fill-[#50935D]" />
-                                <span>Top 10</span>
+                                <span>{t("discoverNeighborhoods.topTen")}</span>
                             </div>
                         )}
                         {hasECC && (
                             <div className={tag()}>
                                 <SquareDollarIcon className="h-[13px] w-[13px] -ml-[1px] mr-[1px] fill-[#50935D]" />
-                                <span>ECC Benefits</span>
+                                <span>
+                                    {t("discoverNeighborhoods.eccBenefits")}
+                                </span>
                             </div>
                         )}
                     </div>
@@ -142,7 +150,7 @@ const NeighborhoodCard = ({
                                 <ArrowLeftIcon className="font-normal h-[14px] w-[14px] text-black" />
                             }
                         >
-                            Prev
+                            {t("top10Tour.prev")}
                         </Button>
                     )}
                     {onDetails && (
@@ -151,7 +159,7 @@ const NeighborhoodCard = ({
                             className="flex-1"
                             onPress={onDetails}
                         >
-                            Details
+                            {t("top10Tour.details")}
                         </Button>
                     )}
                     {onNext && (
@@ -163,7 +171,7 @@ const NeighborhoodCard = ({
                                 <ArrowRightIcon className="font-normal h-[14px] w-[14px] text-black" />
                             }
                         >
-                            Next
+                            {t("top10Tour.next")}
                         </Button>
                     )}
                 </div>

src/frontend/src/components/NeighborhoodCard/NeighborhoodCard.styles.ts

@@ -1,11 +1,12 @@
 import { useState } from "react";
 
-import type { NeighborhoodDetails } from "reducers/neighborhoods/types";
-import formatNeighborhoodDataByViewType from "libs/formatNeighborhoodDataByCard";
 import Button from "components/base/Button/Button";
+import formatNeighborhoodDataByViewType from "libs/formatNeighborhoodDataByCard";
+import type { NeighborhoodDetails } from "reducers/neighborhoods/types";
 
-import { listStyles } from "./NeighborhoodsList.styles";
+import { useTranslation } from "react-i18next";
 import ClickableNeighborhoodCard from "../NeighborhoodCard/ClickableNeighborhoodCard";
+import { listStyles } from "./NeighborhoodsList.styles";
 
 interface Props {
     neighborhoodDetailsMap: NeighborhoodDetails;
@@ -34,6 +35,7 @@ const NeighborhoodList = ({
         groupCount,
         button,
     } = listStyles({ isMobile: isMobile, isGroup: isGroup });
+    const { t } = useTranslation();
 
     // Display 10 Neighborhood cards per page.
     // If it's a grouped-by-neighborhood-name list,
@@ -58,7 +60,8 @@ const NeighborhoodList = ({
                 <div className={groupContainer()}>
                     <p className={groupTitle()}>{groupName}</p>
                     <p className={groupCount()}>
-                        {neighborhoodList.length} zip codes
+                        {neighborhoodList.length}{" "}
+                        {t("discoverNeighborhoods.groupedCountZipCodes")}
                     </p>
                 </div>
             )}
@@ -99,7 +102,7 @@ const NeighborhoodList = ({
                         className={button()}
                         onClick={handleLoadMore}
                     >
-                        Load More
+                        {t("discoverNeighborhoods.groupedLoadMore")}
                     </Button>
                 )}
             </div>

src/frontend/src/components/NeighborhoodCard/NeighborhoodCard.tsx

@@ -29,7 +29,12 @@ const SchoolMeter = ({
     return isSchoolChoice ? (
         <div className="flex flex-col gap-2 w-full">
             <div className={labelContainer()}>
-                <AriaLabel className={mainLabel()}>{props.label}</AriaLabel>
+                <AriaLabel className={mainLabel()}>
+                    {t([
+                        "neighborhoodDetail.schoolsSafetyCard." +
+                            props.labelKey,
+                    ])}
+                </AriaLabel>
             </div>
             <Link
                 href={schoolChoiceLink}