From 142e3838c84542a7779dfce1bceb5b36b6cea679 Mon Sep 17 00:00:00 2001
From: Tuukka Hastrup <tuukka@sproutverse.com>
Date: Mon, 24 Jan 2022 21:23:27 +0200
Subject: [PATCH] Add translation disclaimers to the rest of the fields

---
 src/components/EntranceCard.tsx | 22 ++++++++++++++--------
 src/components/VenueDialog.tsx  |  3 +++
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/EntranceCard.tsx b/src/components/EntranceCard.tsx
index 6893493c..03b2c7b0 100644
--- a/src/components/EntranceCard.tsx
+++ b/src/components/EntranceCard.tsx
@@ -21,6 +21,8 @@ interface EntranceCardProps {
   workplaceEntrance: OlmapWorkplaceEntrance;
   workplace: OlmapWorkplace;
   label: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  translateComponent: (record: any, fieldName: string) => JSX.Element;
   onEntranceSelected: (entranceId: number) => void;
   onUnloadingPlaceSelected: (unloadingPlace: OlmapUnloadingPlace) => void;
   onViewDetails: (note: OlmapNote) => void;
@@ -30,6 +32,7 @@ const EntranceCard: React.FC<EntranceCardProps> = ({
   workplaceEntrance,
   workplace,
   label,
+  translateComponent,
   onEntranceSelected,
   onUnloadingPlaceSelected,
   onViewDetails,
@@ -85,12 +88,15 @@ const EntranceCard: React.FC<EntranceCardProps> = ({
             <span>{label}</span>
           </Avatar>
         }
-        title={`${[
-          workplaceEntrance.description_translated,
-          workplaceEntrance.delivery_types.join("; "),
-        ]
-          .filter((x) => x)
-          .join(": ")}`}
+        title={
+          <>
+            {translateComponent(workplaceEntrance, "description")}
+            {workplaceEntrance.description && workplaceEntrance.delivery_types
+              ? ": "
+              : ""}
+            {workplaceEntrance.delivery_types.join("; ")}
+          </>
+        }
         subheader={workplaceEntrance.delivery_hours || workplace.delivery_hours}
         // The following backgrounds are in case a long word overlaps the floated photo
         titleTypographyProps={{
@@ -102,7 +108,7 @@ const EntranceCard: React.FC<EntranceCardProps> = ({
       />
       <CardContent style={{ padding: 0 }}>
         <Typography variant="body2" color="textSecondary" component="p">
-          {workplaceEntrance.delivery_instructions_translated}
+          {translateComponent(workplaceEntrance, "delivery_instructions")}
         </Typography>
       </CardContent>
       <CardActions style={{ padding: 0 }}>
@@ -150,7 +156,7 @@ const EntranceCard: React.FC<EntranceCardProps> = ({
           >
             <CardContent style={{ padding: 0 }}>
               <Typography variant="body2" color="textSecondary" component="p">
-                {unloadingPlace.description_translated}
+                {translateComponent(unloadingPlace, "description")}
               </Typography>
             </CardContent>
             <CardActions style={{ padding: 0 }}>
diff --git a/src/components/VenueDialog.tsx b/src/components/VenueDialog.tsx
index a4e578d4..9ba62957 100644
--- a/src/components/VenueDialog.tsx
+++ b/src/components/VenueDialog.tsx
@@ -273,6 +273,9 @@ const VenueDialog: React.FC<VenueDialogProps> = ({
             onUnloadingPlaceSelected={onUnloadingPlaceSelected}
             onViewDetails={onViewDetails}
             label={romanize(index + 1)}
+            translateComponent={(record, fieldName) =>
+              translatedText(record, fieldName, onLocaleSelected)
+            }
           />
         ))}
       </DialogContent>