fix: Show toast after copy referral link + change icon to "gift" (#16618)

Co-authored-by: zomars <zomars@me.com>

apps/web/pages/api/generate-referral-link.ts

@@ -16,9 +16,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   }
 
   try {
-    return await dub.links.get({
+    const { shortLink } = await dub.links.get({
       externalId: `ext_${session.user.id.toString()}`,
     });
+    return res.status(200).json({ shortLink });
   } catch (error) {
     console.log("Referral link not found, creating...");
   }

apps/web/public/icons/sprite.svg

@@ -92,7 +92,7 @@
   <path d="M3 10h18" ></path>
   <path d="m16 20 2 2 4-4" ></path>
 </symbol>
-<symbol class="lucide lucide-calendar-days" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="calendar-days">
+<symbol class="lucide lucide-calendar-days" viewBox="0 0 24 24" fill="inherit" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="calendar-days">
   <path d="M8 2v4" ></path>
   <path d="M16 2v4" ></path>
   <rect width="18" height="18" x="3" y="4" rx="2" ></rect>
@@ -104,7 +104,7 @@
   <path d="M12 18h.01" ></path>
   <path d="M16 18h.01" ></path>
 </symbol>
-<symbol class="lucide lucide-calendar-heart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="calendar-heart">
+<symbol class="lucide lucide-calendar-heart" viewBox="0 0 24 24" fill="inherit" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="calendar-heart">
   <path d="M3 10h18V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7" ></path>
   <path d="M8 2v4" ></path>
   <path d="M16 2v4" ></path>
@@ -319,6 +319,12 @@
 <symbol class="lucide lucide-folder" viewBox="0 0 24 24" fill="inherit" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="folder">
   <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" ></path>
 </symbol>
+<symbol class="lucide lucide-gift" viewBox="0 0 24 24" fill="inherit" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="gift">
+  <rect x="3" y="8" width="18" height="4" rx="1" ></rect>
+  <path d="M12 8v13" ></path>
+  <path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7" ></path>
+  <path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5" ></path>
+</symbol>
 <symbol class="lucide lucide-git-merge" viewBox="0 0 24 24" fill="inherit" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="git-merge">
   <circle cx="18" cy="18" r="3" ></circle>
   <circle cx="6" cy="6" r="3" ></circle>

packages/features/shell/Shell.tsx

@@ -55,7 +55,7 @@ import getBrandColours from "@calcom/lib/getBrandColours";
 import { useBookerUrl } from "@calcom/lib/hooks/useBookerUrl";
 import { useCopy } from "@calcom/lib/hooks/useCopy";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { useNotifications, ButtonState } from "@calcom/lib/hooks/useNotifications";
+import { ButtonState, useNotifications } from "@calcom/lib/hooks/useNotifications";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { isKeyInObject } from "@calcom/lib/isKeyInObject";
 import { localStorage } from "@calcom/lib/webstorage";
@@ -929,7 +929,7 @@ function SideBarContainer({ bannersHeight, isPlatformUser = false }: SideBarCont
 }
 
 function SideBar({ bannersHeight, user }: SideBarProps) {
-  const { isCopied, copyToClipboard, resetCopyStatus } = useCopy();
+  const { copyToClipboard } = useCopy();
   const { t, isLocaleReady } = useLocale();
   const orgBranding = useOrgBranding();
   const pathname = usePathname();
@@ -973,13 +973,12 @@ function SideBar({ bannersHeight, user }: SideBarProps) {
               method: "POST",
             });
             const { shortLink } = await res.json();
-            copyToClipboard(shortLink);
-
-            if (isCopied) {
-              showToast(t("link_copied"), "success");
-            }
+            copyToClipboard(shortLink, {
+              onSuccess: () => showToast(t("link_copied"), "success"),
+              onFailure: () => showToast("Copy to clipboard failed", "error"),
+            });
           },
-          icon: "copy",
+          icon: "gift",
         }
       : null,
     {

packages/lib/hooks/useCopy.ts

@@ -1,14 +1,27 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 
 export function useCopy() {
   const [isCopied, setIsCopied] = useState(false);
 
-  const copyToClipboard = (text: string) => {
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  const noop = () => {};
+
+  const copyToClipboard = (
+    text: string,
+    options: { onSuccess?: () => void; onFailure?: () => void } = {}
+  ) => {
+    const { onSuccess = noop, onFailure = noop } = options;
     if (typeof navigator !== "undefined" && navigator.clipboard) {
       navigator.clipboard
         .writeText(text)
-        .then(() => setIsCopied(true))
-        .catch((error) => console.error("Copy to clipboard failed:", error));
+        .then(() => {
+          setIsCopied(true);
+          onSuccess();
+        })
+        .catch((error) => {
+          onFailure();
+          console.error("Copy to clipboard failed:", error);
+        });
     } else {
       console.warn(
         "You need to use a secure context to use clipboard \n Please use the following link: ",

packages/ui/components/icon/IconSprites.tsx

@@ -1,10 +1,13 @@
-import * as React from "react";
 import SVG from "react-inlinesvg";
 
+// eslint-disable-next-line turbo/no-undeclared-env-vars
+const vercelCommitHash = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA;
+const commitHash = vercelCommitHash ? `-${vercelCommitHash.slice(0, 7)}` : "";
+
 export function IconSprites() {
   return (
     <SVG
-      src={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/icons/sprite.svg?v=${process.env.NEXT_PUBLIC_CALCOM_VERSION}`}
+      src={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/icons/sprite.svg?v=${process.env.NEXT_PUBLIC_CALCOM_VERSION}-${commitHash}`}
     />
   );
 }

packages/ui/components/icon/icon-list.mjs

@@ -67,6 +67,7 @@ export const lucideIconList = new Set([
   "fingerprint",
   "flag",
   "folder",
+  "gift",
   "git-merge",
   "github",
   "globe",

packages/ui/components/icon/icon-names.ts

@@ -67,6 +67,7 @@ export type IconName =
   | "fingerprint"
   | "flag"
   | "folder"
+  | "gift"
   | "git-merge"
   | "github"
   | "globe"