Phone number field: Adds helper icon to improve how supported phone n…

…umber types are shown (#8126)

* Adds utility fn. to humanize strings

* Adds helper to clarify supported phone number types in phone number field

* update `humanizeStrings` implementation

* correct icon for user register page

* fix responsiveness

* handle empty array gracefully

src/Components/Form/FormFields/PhoneNumberFormField.tsx

@@ -7,15 +7,17 @@ import {
   formatPhoneNumber as formatPhoneNumberUtil,
   getCountryCode,
   CountryData,
+  humanizeStrings,
 } from "../../../Utils/utils";
 import phoneCodesJson from "../../../Common/static/countryPhoneAndFlags.json";
 import {
   FieldError,
   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<string, CountryData> = phoneCodesJson;
 
@@ -154,29 +156,22 @@ export default function PhoneNumberFormField(props: Props) {
   );
 }
 
-const phoneNumberTypeIcons: Record<PhoneNumberType, IconName> = {
-  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[] }) => (
-  <div className="flex gap-1">
-    {types.map((type) => (
-      <span key={type} className="tooltip mt-1">
-        <CareIcon
-          icon={phoneNumberTypeIcons[type]}
-          className="text-lg text-gray-500"
-        />
-        <span className="tooltip-text tooltip-bottom -translate-x-1/2 translate-y-1 text-xs capitalize">
-          {type.replace("_", " ")}
-        </span>
-      </span>
-    ))}
-  </div>
-);
+  return (
+    <div className="tooltip mt-1 pr-1 text-gray-500">
+      <CareIcon icon="l-question-circle" className="text-lg" />
+      <div className="tooltip-text tooltip-bottom w-64 -translate-x-full whitespace-pre-wrap text-sm">
+        Supports only{" "}
+        <span className="font-bold lowercase">
+          {humanizeStrings(props.types.map((item) => t(item)))}
+        </span>{" "}
+        numbers.
+      </div>
+    </div>
+  );
+};
 
 const conditionPhoneCode = (code: string) => {
   code = code.split(" ")[0];

src/Components/Users/UserAdd.tsx

@@ -608,7 +608,8 @@ export const UserAdd = (props: UserProps) => {
           className="inline-block rounded border border-gray-600 bg-gray-50 px-4 py-2 text-gray-600 transition hover:bg-gray-100"
           target="_blank"
         >
-          <CareIcon icon="l-info-circle" className="text-lg" /> &nbsp;Need Help?
+          <CareIcon icon="l-question-circle" className="text-lg" /> &nbsp;Need
+          Help?
         </Link>
       }
       backUrl="/users"

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",

src/Utils/utils.ts

@@ -454,3 +454,22 @@ export const isPostPartum = (data_of_delivery?: string) => {
 export const isAntenatal = (menstruation_start_date?: string) => {
   return dayjs().diff(menstruation_start_date, "month") <= 9;
 };
+
+/**
+ * A utility method to format an array of string to human readable format.
+ *
+ * @param values Array of strings to be made human readable.
+ * @returns Human readable version of the list of strings
+ */
+export const humanizeStrings = (strings: readonly string[], empty = "") => {
+  if (strings.length === 0) {
+    return empty;
+  }
+
+  if (strings.length === 1) {
+    return strings[0];
+  }
+
+  const [last, ...items] = [...strings].reverse();
+  return `${items.reverse().join(", ")} and ${last}`;
+};