feat(WEB-220): label translations

components/TempDesignSystem/Form/Country/country.ts

@@ -2,6 +2,5 @@ import type { RegisterOptions } from "react-hook-form"
 
 export type CountryProps = {
   name?: string
-  placeholder?: string
   registerOptions?: RegisterOptions
 }

components/TempDesignSystem/Form/Country/index.tsx

@@ -12,8 +12,7 @@ import {
   Popover,
 } from "react-aria-components"
 import { useController, useFormContext } from "react-hook-form"
-
-import { _ } from "@/lib/translation"
+import { useIntl } from "react-intl"
 
 import SelectChevron from "../SelectChevron"
 import { countries } from "./countries"
@@ -24,9 +23,9 @@ import type { CountryProps } from "./country"
 
 export default function CountrySelect({
   name = "country",
-  placeholder = "Select a country",
   registerOptions,
 }: CountryProps) {
+  const { formatMessage } = useIntl()
   const divRef = useRef<HTMLDivElement>(null)
   const { control, setValue } = useFormContext()
   const { field } = useController({
@@ -39,10 +38,12 @@ export default function CountrySelect({
     setValue(name, country)
   }
 
+  const selectCountryLabel = formatMessage({ id: "Select a country" })
+
   return (
     <div className={styles.container} ref={divRef}>
       <ComboBox
-        aria-label={_("Select country of residence")}
+        aria-label={formatMessage({ id: "Select country of residence" })}
         className={styles.select}
         isRequired={!!registerOptions?.required}
         name={field.name}
@@ -53,9 +54,9 @@ export default function CountrySelect({
       >
         <div className={styles.comboBoxContainer}>
           <Input
-            aria-label="Selected country"
+            aria-label={selectCountryLabel}
             className={styles.input}
-            placeholder={_(placeholder)}
+            placeholder={selectCountryLabel}
           />
           <Button className={styles.button}>
             <SelectChevron />