diff --git a/src/Components/Form/FormFields/PhoneNumberFormField.tsx b/src/Components/Form/FormFields/PhoneNumberFormField.tsx index b2034507475..d718acdff50 100644 --- a/src/Components/Form/FormFields/PhoneNumberFormField.tsx +++ b/src/Components/Form/FormFields/PhoneNumberFormField.tsx @@ -7,6 +7,7 @@ import { formatPhoneNumber as formatPhoneNumberUtil, getCountryCode, CountryData, + humanizeStrings, } from "../../../Utils/utils"; import phoneCodesJson from "../../../Common/static/countryPhoneAndFlags.json"; import { @@ -14,8 +15,9 @@ import { PhoneNumberValidator, PhoneNumberType, } from "../FieldValidators"; -import CareIcon, { IconName } from "../../../CAREUI/icons/CareIcon"; +import CareIcon from "../../../CAREUI/icons/CareIcon"; import { Popover } from "@headlessui/react"; +import { useTranslation } from "react-i18next"; const phoneCodes: Record = phoneCodesJson; @@ -154,29 +156,22 @@ export default function PhoneNumberFormField(props: Props) { ); } -const phoneNumberTypeIcons: Record = { - international_mobile: "l-globe", - indian_mobile: "l-mobile-android", - mobile: "l-mobile-android", - landline: "l-phone", - support: "l-headset", -}; +const PhoneNumberTypesHelp = (props: { types: PhoneNumberType[] }) => { + const { t } = useTranslation(); -const PhoneNumberTypesHelp = ({ types }: { types: PhoneNumberType[] }) => ( -
- {types.map((type) => ( - - - - {type.replace("_", " ")} - - - ))} -
-); + return ( +
+ +
+ Supports only{" "} + + {humanizeStrings(...props.types.map((item) => t(item)))} + {" "} + numbers. +
+
+ ); +}; const conditionPhoneCode = (code: string) => { code = code.split(" ")[0]; diff --git a/src/Locale/en/Common.json b/src/Locale/en/Common.json index 019a51232ba..f6ee4f1032d 100644 --- a/src/Locale/en/Common.json +++ b/src/Locale/en/Common.json @@ -48,6 +48,11 @@ "filter": "Filter", "ordering": "Ordering", "phone_number": "Phone Number", + "international_mobile": "International Mobile", + "indian_mobile": "Indian Mobile", + "mobile": "Mobile", + "landline": "Indian landline", + "support": "Support", "emergency_contact_number": "Emergency Contact Number", "last_modified": "Last Modified", "patient_address": "Patient Address",