From d07b51facd6d35e349b85c24440ae6c23ca461e6 Mon Sep 17 00:00:00 2001
From: josh-willis-arcadis
 <168561922+josh-willis-arcadis@users.noreply.github.com>
Date: Tue, 15 Oct 2024 13:51:56 -0500
Subject: [PATCH] feat(companions-pane): add i18n key/vals

---
 i18n/en-US.yml                                |  5 ++
 .../user/mobility-profile/companions-pane.tsx | 52 ++++++++++++++-----
 2 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index 1aaa74961..7d7026bd5 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -216,13 +216,18 @@ components:
     groupSize: "Group size:"
     intermediateDestination: Enter intermediate destination
   CompanionsPane:
+    addNewCompanion: Add a new travel companion
+    companionAlreadyAdded: You already have a companion with email {email}
     companionExplanation: >
       Invite an exiting GMAP user to be a travel companion by entering their
       email. When they accept, their status will change to "verified", and you
       can share your trip status and plan trips based on one another's mobility
       profile.
+    confirmDeleteCompanion: Do you want to delete companion {email}?
     currentCompanionsLabel: "Current travel companions:"
+    deleteCompanion: Delete {email}
     noCompanions: You do not have any existing travel companions.
+    submitNewCompanion: Send invitation
   DateTimeOptions:
     arriveBy: Arrive by
     departAt: Depart at
diff --git a/lib/components/user/mobility-profile/companions-pane.tsx b/lib/components/user/mobility-profile/companions-pane.tsx
index 9ef16a250..91cdbc053 100644
--- a/lib/components/user/mobility-profile/companions-pane.tsx
+++ b/lib/components/user/mobility-profile/companions-pane.tsx
@@ -1,5 +1,5 @@
 import { ControlLabel, FormGroup } from 'react-bootstrap'
-import { FormattedMessage } from 'react-intl'
+import { FormattedMessage, IntlShape, useIntl } from 'react-intl'
 import { FormikProps } from 'formik'
 import { Trash } from '@styled-icons/fa-solid/Trash'
 import { User as UserIcon } from '@styled-icons/fa-solid/User'
@@ -41,23 +41,32 @@ const RightGroup = styled.div`
 
 interface CompanionRowProps {
   companionInfo: CompanionInfo
+  intl: IntlShape
   onDelete: (email: string) => void
 }
 
 const CompanionRow = ({
   companionInfo,
+  intl,
   onDelete
 }: CompanionRowProps): JSX.Element => {
   const { email, status } = companionInfo
   const [disabled, setDisabled] = useState(false)
 
   const handleDelete = useCallback(async () => {
-    if (window.confirm(`Do you want to delete companion ${email}?`)) {
+    if (
+      window.confirm(
+        intl.formatMessage(
+          { id: 'components.CompanionsPane.confirmDeleteCompanion' },
+          { email: email }
+        )
+      )
+    ) {
       setDisabled(true)
       await onDelete(email)
       setDisabled(false)
     }
-  }, [email, onDelete])
+  }, [email, intl, onDelete])
 
   return (
     <Companion>
@@ -73,18 +82,25 @@ const CompanionRow = ({
           as={UnstyledButton}
           disabled={disabled}
           onClick={handleDelete}
-          title={`Delete ${email}`}
+          title={intl.formatMessage(
+            { id: 'components.CompanionsPane.deleteCompanion' },
+            { email: email }
+          )}
         >
           <StyledIconWrapper>
             <Trash />
           </StyledIconWrapper>
-          <InvisibleA11yLabel>Delete {email}</InvisibleA11yLabel>
+          <InvisibleA11yLabel>
+            <FormattedMessage
+              id="components.CompanionsPane.deleteCompanion"
+              values={{ email }}
+            />
+          </InvisibleA11yLabel>
         </SubmitButton>
       </RightGroup>
     </Companion>
   )
 }
-
 /**
  * Companions pane, part of mobility profile.
  */
@@ -95,6 +111,7 @@ const CompanionsPane = ({
 }: FormikProps<User>): JSX.Element => {
   const { guardians: companions = [] } = userData
   const formId = 'add-companion-form'
+  const intl = useIntl()
 
   const updateCompanions = useCallback(
     async (newCompanions) => {
@@ -122,10 +139,15 @@ const CompanionsPane = ({
         ])
         resetForm()
       } else {
-        alert(`You already have a companion with email ${newEmail}.`)
+        alert(
+          intl.formatMessage(
+            { id: 'components.CompanionsPane.companionAlreadyAdded' },
+            { email: newEmail }
+          )
+        )
       }
     },
-    [companions, updateCompanions]
+    [companions, intl, updateCompanions]
   )
 
   const handleDeleteEmail = useCallback(
@@ -138,10 +160,7 @@ const CompanionsPane = ({
   return (
     <div>
       <p>
-        Invite an exiting GMAP user to be a travel companion by entering their
-        email. When they accept, their status will change to "verified", and you
-        can share your trip status and plan trips based on one another's
-        mobility profile.
+        <FormattedMessage id="components.CompanionsPane.companionExplanation" />
       </p>
       <FormGroup>
         <ControlLabel>
@@ -157,6 +176,7 @@ const CompanionsPane = ({
             {companions.map((companion) => (
               <CompanionRow
                 companionInfo={companion}
+                intl={intl}
                 key={companion.email}
                 onDelete={handleDeleteEmail}
               />
@@ -166,10 +186,14 @@ const CompanionsPane = ({
       </FormGroup>
       <AddEmailForm
         id={formId}
-        label="Add a new travel companion"
+        label={
+          <FormattedMessage id="components.CompanionsPane.addNewCompanion" />
+        }
         onSubmit={handleAddNewEmail}
         placeholder="friend.email@example.com"
-        submitText="Send invitation"
+        submitText={
+          <FormattedMessage id="components.CompanionsPane.submitNewCompanion" />
+        }
       />
     </div>
   )