Create reusable CopyButton component

public/locale/en.json

@@ -551,6 +551,7 @@
   "copied_to_clipboard": "Copied to clipboard",
   "copilot_thinking": "Copilot is thinking...",
   "copy_phone_number": "Copy Phone Number",
+  "copy_to_clipboard": "Copy to clipboard",
   "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/components/Assets/AssetWarrantyCard.tsx

@@ -1,10 +1,7 @@
-import { t } from "i18next";
-import { useEffect, useState } from "react";
-import CopyToClipboard from "react-copy-to-clipboard";
-
 import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon";
 
 import { AssetData } from "@/components/Assets/AssetTypes";
+import CopyButton from "@/components/Common/CopyButton";
 
 import { formatDate } from "@/Utils/utils";
 
@@ -19,17 +16,6 @@ export default function AssetWarrantyCard(props: { asset: AssetData }) {
     Vendor: asset.vendor_name,
   };
 
-  const [isCopied, setIsCopied] = useState(false);
-
-  useEffect(() => {
-    if (isCopied) {
-      const timeout = setTimeout(() => {
-        setIsCopied(false);
-      }, 2000);
-      return () => clearTimeout(timeout);
-    }
-  }, [isCopied]);
-
   return (
     <div className="warranty-card relative z-10 flex h-full w-screen flex-col overflow-hidden p-6 text-white transition-all hover:scale-[1.01] hover:from-primary-600 hover:to-primary-700 md:w-full md:rounded-xl xl:w-96">
       <div className="mb-3 text-right text-lg font-bold italic">
@@ -45,21 +31,7 @@ export default function AssetWarrantyCard(props: { asset: AssetData }) {
               <div className="flex items-center gap-2 font-semibold">
                 {details[key as keyof typeof details] || "--"}
                 {key === "Serial Number" && (
-                  <button className="tooltip tooltip-bottom">
-                    <CopyToClipboard
-                      text={details[key as keyof typeof details] || "--"}
-                      onCopy={() => setIsCopied(true)}
-                    >
-                      {isCopied ? (
-                        <span className="text-sm text-white">
-                          {t("copied_to_clipboard")}
-                        </span>
-                      ) : (
-                        <CareIcon icon="l-copy" className="text-lg" />
-                      )}
-                    </CopyToClipboard>
-                    <span className="tooltip-text">Copy to clipboard</span>
-                  </button>
+                  <CopyButton content={details[key as keyof typeof details]} />
                 )}
               </div>
             </div>

src/components/Common/CopyButton.tsx

@@ -0,0 +1,58 @@
+import { VariantProps } from "class-variance-authority";
+import { useState } from "react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+
+import CareIcon from "@/CAREUI/icons/CareIcon";
+
+import { Button, buttonVariants } from "@/components/ui/button";
+import { TooltipComponent, TooltipProvider } from "@/components/ui/tooltip";
+
+import { copyToClipboard } from "@/Utils/utils";
+
+export interface CopyButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  children?: React.ReactNode;
+  content: string | undefined;
+  tooltipContent?: string;
+}
+
+const CopyButton = ({
+  content,
+  tooltipContent = "copy_to_clipboard",
+  children,
+  size,
+}: CopyButtonProps) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const { t } = useTranslation();
+
+  if (content === undefined) return null;
+
+  return (
+    <TooltipProvider>
+      <TooltipComponent
+        content={isCopied ? t("copied_to_clipboard") : t(tooltipContent)}
+      >
+        <Button
+          variant="link"
+          size={size}
+          onClick={() => {
+            copyToClipboard(content);
+            setIsCopied(true);
+            setTimeout(() => setIsCopied(false), 2500);
+          }}
+        >
+          {children || (
+            <CareIcon
+              icon={isCopied ? "l-check" : "l-copy"}
+              className="text-lg"
+            />
+          )}
+        </Button>
+      </TooltipComponent>
+    </TooltipProvider>
+  );
+};
+
+export default CopyButton;

src/components/Facility/DoctorVideoSlideover.tsx

@@ -5,6 +5,7 @@ import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon";
 import SlideOver from "@/CAREUI/interactive/SlideOver";
 import Switch from "@/CAREUI/interactive/Switch";
 
+import CopyButton from "@/components/Common/CopyButton";
 import Loading from "@/components/Common/Loading";
 import { SkillObjectModel } from "@/components/Users/models";
 import { UserAssignedModel } from "@/components/Users/models";
@@ -18,7 +19,6 @@ import routes from "@/Utils/request/api";
 import useTanStackQueryInstead from "@/Utils/request/useQuery";
 import {
   classNames,
-  copyToClipboard,
   formatName,
   isUserOnline,
   relativeTime,
@@ -185,7 +185,11 @@ function UserListItem({ user }: { user: UserAnnotatedWithGroup }) {
     e.stopPropagation();
     if (!user.alt_phone_number) return;
     const phoneNumber = user.alt_phone_number?.replace(/\D+/g, "");
-    const message = `${courtesyTitle(user)} ${formatName(user)}, I have a query regarding a patient.\n\nPatient Link: ${window.location.href}`;
+    const message = `${courtesyTitle(user)} ${formatName(
+      user,
+    )}, I have a query regarding a patient.\n\nPatient Link: ${
+      window.location.href
+    }`;
     const encodedMessage = encodeURIComponent(message);
     const whatsappAppURL = `whatsapp://send?phone=${phoneNumber}&text=${encodedMessage}`;
     const whatsappWebURL = `https://wa.me/${phoneNumber}?text=${encodedMessage}`;
@@ -241,7 +245,6 @@ function UserListItem({ user }: { user: UserAnnotatedWithGroup }) {
   }
 
   const { t } = useTranslation();
-  const [copied, setCopied] = useState(false);
 
   return (
     <div
@@ -295,27 +298,10 @@ function UserListItem({ user }: { user: UserAnnotatedWithGroup }) {
           )}
           <div className="flex justify-between gap-2 text-sm text-secondary-500">
             <div className="flex items-center gap-1">
-              <a
-                role="button"
-                href="#"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  copyToClipboard(user?.alt_phone_number || "");
-                  setCopied(true);
-                  setTimeout(() => setCopied(false), 2500);
-                }}
-              >
-                <span className="tooltip" id="copy-phoneicon">
-                  <span className="tooltip-text tooltip-top">
-                    {t("copy_phone_number")}
-                  </span>
-                  <CareIcon
-                    icon={copied ? "l-check" : "l-clipboard"}
-                    id="copy-icon"
-                    className="h-5 w-5"
-                  />
-                </span>
-              </a>
+              <CopyButton
+                content={user.alt_phone_number}
+                tooltipContent={t("copy_phone_number")}
+              />
               <span>{user.alt_phone_number}</span>
             </div>
             <div className="text-sm text-secondary-500">

src/components/Licenses/SBOMViewer.tsx

@@ -1,10 +1,10 @@
 import dayjs from "dayjs";
 import React, { useState } from "react";
-import { CopyToClipboard } from "react-copy-to-clipboard";
 
 import Card from "@/CAREUI/display/Card";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
+import CopyButton from "@/components/Common/CopyButton";
 import beBomData from "@/components/Licenses/be-sbom.json";
 import feBomData from "@/components/Licenses/fe-sbom.json";
 import licenseUrls from "@/components/Licenses/licenseUrls.json";
@@ -13,6 +13,7 @@ const getLicenseUrl = (licenseId: string | undefined): string | null => {
   if (!licenseId) return null;
   return licenseUrls[licenseId as keyof typeof licenseUrls] || null;
 };
+
 interface CycloneDXExternalRef {
   url?: string;
   type?: string;
@@ -64,15 +65,9 @@ interface CycloneDXBOM {
 }
 
 const BOMDisplay: React.FC = () => {
-  const [copyStatus, setCopyStatus] = useState(false);
   const [showExternalRefs, setShowExternalRefs] = useState<number | null>(null);
   const [activeTab, setActiveTab] = useState<string>("bom");
 
-  const handleCopy = () => {
-    setCopyStatus(true);
-    setTimeout(() => setCopyStatus(false), 2000);
-  };
-
   const bomData = (activeTab === "bom" ? feBomData : beBomData) as CycloneDXBOM;
 
   return (
@@ -182,19 +177,13 @@ const BOMDisplay: React.FC = () => {
           ))}
         </div>
         <div className="mt-4">
-          <CopyToClipboard
-            text={JSON.stringify(bomData, null, 2)}
-            onCopy={handleCopy}
+          <CopyButton
+            content={JSON.stringify(bomData, null, 2)}
+            tooltipContent="Copy BOM JSON to clipboard"
+            variant="primary"
           >
-            <button className="text-md hover:bg-primary-dark w-full rounded-md bg-primary px-4 py-2 text-white transition-all duration-300 focus:outline-none md:w-auto">
-              Copy BOM JSON
-            </button>
-          </CopyToClipboard>
-          {copyStatus && (
-            <span className="mt-2 block text-sm text-gray-600">
-              Copied to clipboard!
-            </span>
-          )}
+            Copy BOM JSON
+          </CopyButton>
         </div>
       </Card>
     </div>

src/components/Shifting/ShiftDetails.tsx

@@ -2,7 +2,6 @@ import careConfig from "@careConfig";
 import { QRCodeSVG } from "qrcode.react";
 import { Link, navigate } from "raviger";
 import { useState } from "react";
-import { CopyToClipboard } from "react-copy-to-clipboard";
 import { useTranslation } from "react-i18next";
 
 import RecordMeta from "@/CAREUI/display/RecordMeta";
@@ -12,6 +11,7 @@ import PrintPreview from "@/CAREUI/misc/PrintPreview";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 import ButtonV2 from "@/components/Common/ButtonV2";
+import CopyButton from "@/components/Common/CopyButton";
 import Loading from "@/components/Common/Loading";
 import Page from "@/components/Common/Page";
 import { ConsultationModel } from "@/components/Facility/models";
@@ -30,7 +30,6 @@ import { formatDateTime, formatName, formatPatientAge } from "@/Utils/utils";
 
 export default function ShiftDetails(props: { id: string }) {
   const [isPrintMode, setIsPrintMode] = useState(false);
-  const [isCopied, setIsCopied] = useState(false);
   const { t } = useTranslation();
 
   const shiftStatusOptions = careConfig.wartimeShifting
@@ -41,22 +40,7 @@ export default function ShiftDetails(props: { id: string }) {
     pathParams: { id: props.id },
   });
   const showCopyToclipBoard = (data: any) => {
-    return (
-      <a href="#">
-        <CopyToClipboard
-          text={copyContent(data)}
-          onCopy={() => setIsCopied(true)}
-        >
-          {isCopied ? (
-            <span className="copied-to-cb">{t("copied_to_clipboard")}</span>
-          ) : (
-            <span className="copy-to-cb">
-              <CareIcon icon="l-clipboard" className="text-2xl" />
-            </span>
-          )}
-        </CopyToClipboard>
-      </a>
-    );
+    return <CopyButton content={copyContent(data)} size="sm" />;
   };
 
   const copyContent = (data: any) => {
@@ -93,10 +77,6 @@ export default function ShiftDetails(props: { id: string }) {
     return formattedText;
   };
 
-  setTimeout(() => {
-    setIsCopied(false);
-  }, 5000);
-
   const showPatientCard = (patientData: PatientModel) => {
     const patientGender = GENDER_TYPES.find(
       (i) => i.id === patientData?.gender,