Create 'copyToClipboard' utility function

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

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<T extends Record<string, unknown>>(
     Object.entries(obj).filter(([_, value]) => !predicate(value)),
   ) as Partial<T>;
 }
+
+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" });
+  }
+};

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 (
     <div
       className={classNames(
@@ -293,18 +298,22 @@ function UserListItem({ user }: { user: UserAnnotatedWithGroup }) {
               <a
                 role="button"
                 href="#"
-                onClick={async (e) => {
+                onClick={(e) => {
                   e.stopPropagation();
-                  await navigator.clipboard.writeText(
-                    user?.alt_phone_number || "",
-                  );
+                  copyToClipboard(user?.alt_phone_number || "");
+                  setCopied(true);
+                  setTimeout(() => setCopied(false), 2500);
                 }}
               >
                 <span className="tooltip" id="copy-phoneicon">
                   <span className="tooltip-text tooltip-top">
-                    Copy Phone number
+                    {t("copy_phone_number")}
                   </span>
-                  <CareIcon icon="l-clipboard" className="h-5 w-5" />
+                  <CareIcon
+                    icon={copied ? "l-check" : "l-clipboard"}
+                    id="copy-icon"
+                    className="h-5 w-5"
+                  />
                 </span>
               </a>
               <span>{user.alt_phone_number}</span>