improve conflict code toast to link to the partner

Author: steven-tey

apps/web/app/(ee)/api/discount-codes/route.ts

@@ -100,12 +100,15 @@ export const POST = withWorkspace(
             code,
           },
         },
+        include: {
+          partner: true,
+        },
       });
 
       if (duplicateByCode) {
         throw new DubApiError({
-          code: "bad_request",
-          message: `A discount with the code ${code} already exists in the program. Please choose a different code.`,
+          code: "conflict",
+          message: `This discount code "${code}" is already in use by [${duplicateByCode.partner.email}](https://app.dub.co/${workspace.slug}/program/partners/${duplicateByCode.partner.id}). Please choose a different code.`,
         });
       }
     }

apps/web/package.json

@@ -129,7 +129,7 @@
     "remark-gfm": "^4.0.0",
     "sanitize-html": "^2.17.0",
     "shiki": "^1.14.1",
-    "sonner": "^1.4.41",
+    "sonner": "^2.0.7",
     "streamdown": "^2.3.0",
     "stripe": "^18.2.0",
     "svix": "^1.76.1",

apps/web/ui/modals/add-discount-code-modal.tsx

@@ -18,7 +18,8 @@ import { toast } from "sonner";
 import { useDebounce } from "use-debounce";
 import * as z from "zod/v4";
 import { ERROR_MAP } from "../partners/constants";
-import { X } from "../shared/icons";
+import { CustomToast } from "../shared/custom-toast";
+import { AlertCircleFill, X } from "../shared/icons";
 import { UpgradeRequiredToast } from "../shared/upgrade-required-toast";
 
 type FormData = z.infer<typeof createDiscountCodeSchema>;
@@ -87,28 +88,30 @@ const AddDiscountCodeModal = ({
         toast.success("Discount code created and copied to clipboard!");
       },
       onError: (error) => {
-        if (error) {
-          const code = Object.keys(ERROR_MAP).find((key) =>
-            error.startsWith(key),
-          );
+        const code = Object.keys(ERROR_MAP).find((key) =>
+          error.startsWith(key),
+        );
 
-          if (code) {
-            const { title, ctaLabel, ctaUrl } = ERROR_MAP[code];
-            const message = error.replace(`${code}: `, "");
+        if (code) {
+          const { title, ctaLabel, ctaUrl } = ERROR_MAP[code];
+          const message = error.replace(`${code}: `, "");
 
-            toast.custom(() => (
-              <UpgradeRequiredToast
-                title={title}
-                message={message}
-                ctaLabel={ctaLabel}
-                ctaUrl={ctaUrl}
-              />
-            ));
-            return;
-          }
+          toast.custom(() => (
+            <UpgradeRequiredToast
+              title={title}
+              message={message}
+              ctaLabel={ctaLabel}
+              ctaUrl={ctaUrl}
+            />
+          ));
+          return;
+        } else if (error.includes("already in use")) {
+          toast.custom(() => (
+            <CustomToast icon={AlertCircleFill}>{error}</CustomToast>
+          ));
+        } else {
+          toast.error(error);
         }
-
-        toast.error(error);
       },
     });
   };

apps/web/ui/shared/custom-toast.tsx

@@ -1,4 +1,4 @@
-import ReactMarkdown from "react-markdown";
+import { MarkdownDescription } from "./markdown-description";
 
 export function CustomToast({
   icon: Icon,
@@ -10,20 +10,9 @@ export function CustomToast({
   return (
     <div className="flex items-center gap-1.5 rounded-lg bg-white p-4 text-sm shadow-[0_4px_12px_#0000001a]">
       {Icon && <Icon className="size-[18px] shrink-0 text-black" />}
-      <ReactMarkdown
-        className="text-[13px] font-medium text-neutral-900"
-        components={{
-          a: ({ node, ...props }) => (
-            <a
-              {...props}
-              target="_blank"
-              className="text-neutral-500 underline transition-colors hover:text-neutral-800"
-            />
-          ),
-        }}
-      >
+      <MarkdownDescription className="text-[13px] font-medium text-neutral-900">
         {children}
-      </ReactMarkdown>
+      </MarkdownDescription>
     </div>
   );
 }