diff --git a/public/locale/en.json b/public/locale/en.json index 2ceaf310fac..ce70849187d 100644 --- a/public/locale/en.json +++ b/public/locale/en.json @@ -549,6 +549,7 @@ "contribute_github": "Contribute on Github", "copied_to_clipboard": "Copied to clipboard", "copilot_thinking": "Copilot is thinking...", + "copy_phone_number": "Copy Phone Number", "could_not_autofill": "We could not autofill any fields from what you said", "countries_travelled": "Countries travelled", "covid_19_cat_gov": "Covid_19 Clinical Category as per Govt. of Kerala guideline (A/B/C)", diff --git a/src/Utils/utils.ts b/src/Utils/utils.ts index 5588e048bd2..f9e0e14577a 100644 --- a/src/Utils/utils.ts +++ b/src/Utils/utils.ts @@ -3,6 +3,7 @@ import { PatientModel } from "@/components/Patient/models"; import { AREACODES, IN_LANDLINE_AREA_CODES } from "@/common/constants"; import phoneCodesJson from "@/common/static/countryPhoneAndFlags.json"; +import * as Notification from "@/Utils/Notifications"; import dayjs from "@/Utils/dayjs"; interface ApacheParams { @@ -561,3 +562,12 @@ export function omitBy>( Object.entries(obj).filter(([_, value]) => !predicate(value)), ) as Partial; } + +export const copyToClipboard = async (content: string) => { + try { + await navigator.clipboard.writeText(content); + Notification.Success({ msg: "Copied to clipboard" }); + } catch (err) { + Notification.Error({ msg: "Copying is not allowed" }); + } +}; diff --git a/src/components/Facility/DoctorVideoSlideover.tsx b/src/components/Facility/DoctorVideoSlideover.tsx index 61c7a63c17b..98058fd4bfb 100644 --- a/src/components/Facility/DoctorVideoSlideover.tsx +++ b/src/components/Facility/DoctorVideoSlideover.tsx @@ -1,4 +1,5 @@ -import React, { useState } from "react"; +import { useState } from "react"; +import { useTranslation } from "react-i18next"; import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon"; import SlideOver from "@/CAREUI/interactive/SlideOver"; @@ -17,6 +18,7 @@ import routes from "@/Utils/request/api"; import useTanStackQueryInstead from "@/Utils/request/useQuery"; import { classNames, + copyToClipboard, formatName, isUserOnline, relativeTime, @@ -238,6 +240,9 @@ function UserListItem({ user }: { user: UserAnnotatedWithGroup }) { } } + const { t } = useTranslation(); + const [copied, setCopied] = useState(false); + return (
{ + onClick={(e) => { e.stopPropagation(); - await navigator.clipboard.writeText( - user?.alt_phone_number || "", - ); + copyToClipboard(user?.alt_phone_number || ""); + setCopied(true); + setTimeout(() => setCopied(false), 2500); }} > - Copy Phone number + {t("copy_phone_number")} - + {user.alt_phone_number}