feat(WEB-220): label translations

components/MyProfile/Profile/Edit/Form/Content.tsx

@@ -2,8 +2,8 @@
 import { useEffect } from "react"
 import { useFormStatus } from "react-dom"
 import { useWatch } from "react-hook-form"
+import { useIntl } from "react-intl"
 
-import { _ } from "@/lib/translation"
 import { useProfileStore } from "@/stores/edit-profile"
 
 import {
@@ -21,6 +21,7 @@ import Phone from "@/components/TempDesignSystem/Form/Phone"
 import type { EditFormContentProps } from "@/types/components/myPages/myProfile/edit"
 
 export default function FormContent({ control }: EditFormContentProps) {
+  const { formatMessage } = useIntl()
   const { pending } = useFormStatus()
   const setIsPending = useProfileStore((store) => store.setIsPending)
   const country = useWatch({ name: "address.country" })
@@ -29,11 +30,18 @@ export default function FormContent({ control }: EditFormContentProps) {
     setIsPending(pending)
   }, [pending, setIsPending])
 
+  const city = formatMessage({ id: "City" })
+  const email = formatMessage({ id: "Email" })
+  const street = formatMessage({ id: "Street" })
+  const zipCode = formatMessage({ id: "Zip code" })
+
   return (
     <>
       <Field>
         <Field.Icon>{country}</Field.Icon>
-        <Field.Label htmlFor="address.country">*{_("Country")}</Field.Label>
+        <Field.Label htmlFor="address.country">
+          *{formatMessage({ id: "Country" })}
+        </Field.Label>
         <Field.Content>
           <CountrySelect name="address.country" />
         </Field.Content>
@@ -43,7 +51,9 @@ export default function FormContent({ control }: EditFormContentProps) {
         <Field.Icon>
           <CalendarIcon />
         </Field.Icon>
-        <Field.Label htmlFor="dateOfBirth">*{_("Date of Birth")}</Field.Label>
+        <Field.Label htmlFor="dateOfBirth">
+          *{formatMessage({ id: "Date of Birth" })}
+        </Field.Label>
         <Field.Content>
           <DateSelect
             control={control}
@@ -57,13 +67,13 @@ export default function FormContent({ control }: EditFormContentProps) {
         <Field.Icon>
           <EmailIcon />
         </Field.Icon>
-        <Field.Label htmlFor="email">*{_("Email")}</Field.Label>
+        <Field.Label htmlFor="email">*{email}</Field.Label>
         <Field.Content>
           <Input
-            aria-label={_("Email")}
+            aria-label={email}
             control={control}
             name="email"
-            placeholder={_("Email")}
+            placeholder={email}
             registerOptions={{ required: true }}
             type="email"
           />
@@ -74,7 +84,9 @@ export default function FormContent({ control }: EditFormContentProps) {
         <Field.Icon>
           <PhoneIcon />
         </Field.Icon>
-        <Field.Label htmlFor="phoneNumber">*{_("Phone")}</Field.Label>
+        <Field.Label htmlFor="phoneNumber">
+          *{formatMessage({ id: "Phone" })}
+        </Field.Label>
         <Field.Content>
           <Phone countrySelectName="address.country" name="phoneNumber" />
         </Field.Content>
@@ -85,14 +97,14 @@ export default function FormContent({ control }: EditFormContentProps) {
           <HouseIcon />
         </Field.Icon>
         <Field.Label htmlFor="address.streetAddress">
-          {_("Address")}
+          {formatMessage({ id: "Address" })}
         </Field.Label>
         <Field.Content>
           <Input
-            aria-label={_("Street")}
+            aria-label={street}
             control={control}
             name="address.streetAddress"
-            placeholder={_("Street 123")}
+            placeholder={street}
           />
         </Field.Content>
       </Field>
@@ -101,13 +113,15 @@ export default function FormContent({ control }: EditFormContentProps) {
         <Field.Icon>
           <HouseIcon />
         </Field.Icon>
-        <Field.Label htmlFor="address.city">{_("City/State")}</Field.Label>
+        <Field.Label htmlFor="address.city">
+          {formatMessage({ id: "City/State" })}
+        </Field.Label>
         <Field.Content>
           <Input
-            aria-label={_("City")}
+            aria-label={city}
             control={control}
             name="address.city"
-            placeholder={_("City")}
+            placeholder={city}
           />
         </Field.Content>
       </Field>
@@ -116,13 +130,13 @@ export default function FormContent({ control }: EditFormContentProps) {
         <Field.Icon>
           <HouseIcon />
         </Field.Icon>
-        <Field.Label htmlFor="address.zipCode">*{_("Zip code")}</Field.Label>
+        <Field.Label htmlFor="address.zipCode">*{zipCode}</Field.Label>
         <Field.Content>
           <Input
-            aria-label={_("Zip code")}
+            aria-label={zipCode}
             control={control}
             name="address.zipCode"
-            placeholder={_("Zip code")}
+            placeholder={zipCode}
             registerOptions={{ required: true }}
           />
         </Field.Content>