fix copy partner link

dubinc · Nov 27, 2024 · 2fca33a · 2fca33a
1 parent b8e5a0e
commit 2fca33a
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 24 deletions.
diff --git a/apps/web/app/partners.dub.co/(dashboard)/[partnerId]/[programId]/page-client.tsx b/apps/web/app/partners.dub.co/(dashboard)/[partnerId]/[programId]/page-client.tsx
@@ -14,13 +14,12 @@ import SimpleDateRangePicker from "@/ui/shared/simple-date-range-picker";
 import {
   Button,
   buttonVariants,
-  Check2,
   MaxWidthWrapper,
   MiniAreaChart,
   useCopyToClipboard,
   useRouterStuff,
 } from "@dub/ui";
-import { Copy, LoadingSpinner, MoneyBill2 } from "@dub/ui/src/icons";
+import { Check, Copy, LoadingSpinner, MoneyBill2 } from "@dub/ui/src/icons";
 import {
   cn,
   currencyFormatter,
@@ -93,16 +92,31 @@ export default function ProgramPageClient() {
           )}
           <Button
             icon={
-              copied ? (
-                <Check2 className="size-4" />
-              ) : (
-                <Copy className="size-4" />
-              )
+              <div className="relative size-4">
+                <div
+                  className={cn(
+                    "absolute inset-0 transition-[transform,opacity]",
+                    copied && "translate-y-1 opacity-0",
+                  )}
+                >
+                  <Copy className="size-4" />
+                </div>
+                <div
+                  className={cn(
+                    "absolute inset-0 transition-[transform,opacity]",
+                    !copied && "translate-y-1 opacity-0",
+                  )}
+                >
+                  <Check className="size-4" />
+                </div>
+              </div>
             }
             text={copied ? "Copied link" : "Copy link"}
             className="xs:w-fit"
+            disabled={!programEnrollment?.link?.shortLink}
             onClick={() =>
-              copyToClipboard(getPrettyUrl(programEnrollment?.link?.shortLink))
+              programEnrollment?.link?.shortLink &&
+              copyToClipboard(programEnrollment?.link?.shortLink)
             }
           />
         </div>

diff --git a/apps/web/ui/layout/sidebar/partners-sidebar-nav.tsx b/apps/web/ui/layout/sidebar/partners-sidebar-nav.tsx
@@ -3,7 +3,7 @@
 import usePartnerAnalytics from "@/lib/swr/use-partner-analytics";
 import usePartnerProgramInvites from "@/lib/swr/use-partner-program-invites";
 import useProgramEnrollment from "@/lib/swr/use-program-enrollment";
-import { Button, useRouterStuff } from "@dub/ui";
+import { Button, useCopyToClipboard, useRouterStuff } from "@dub/ui";
 import {
   ArrowRight,
   ChartActivity2,
@@ -26,8 +26,7 @@ import { cn, currencyFormatter } from "@dub/utils";
 import { Store } from "lucide-react";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
-import { ReactNode, useMemo, useRef, useState } from "react";
-import { toast } from "sonner";
+import { ReactNode, useMemo } from "react";
 import { PartnerProgramDropdown } from "./partner-program-dropdown";
 import { SidebarNav, SidebarNavAreas } from "./sidebar-nav";
 
@@ -212,8 +211,7 @@ function ProgramInfo() {
   };
   const { programEnrollment } = useProgramEnrollment();
 
-  const [isCopied, setIsCopied] = useState(false);
-  const copyTimeout = useRef<NodeJS.Timeout | null>(null);
+  const [copied, copyToClipboard] = useCopyToClipboard();
 
   const { data: analytics, loading } = usePartnerAnalytics();
 
@@ -247,30 +245,26 @@ function ProgramInfo() {
                 <div
                   className={cn(
                     "absolute inset-0 transition-[transform,opacity]",
-                    isCopied && "translate-y-1 opacity-0",
+                    copied && "translate-y-1 opacity-0",
                   )}
                 >
                   <Copy className="size-4" />
                 </div>
                 <div
                   className={cn(
                     "absolute inset-0 transition-[transform,opacity]",
-                    !isCopied && "translate-y-1 opacity-0",
+                    !copied && "translate-y-1 opacity-0",
                   )}
                 >
                   <Check className="size-4" />
                 </div>
               </div>
             }
-            onClick={() => {
-              navigator.clipboard.writeText(
-                programEnrollment.link?.shortLink || "",
-              );
-              toast.success("Copied to clipboard");
-              setIsCopied(true);
-              if (copyTimeout.current) clearTimeout(copyTimeout.current);
-              copyTimeout.current = setTimeout(() => setIsCopied(false), 1000);
-            }}
+            disabled={!programEnrollment.link?.shortLink}
+            onClick={() =>
+              programEnrollment.link?.shortLink &&
+              copyToClipboard(programEnrollment.link?.shortLink)
+            }
           />
         </div>
       </div>