small improvements to MultiValueInput, toast, zod schema

Author: steven-tey

apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/partners/invite-partner-sheet.tsx

@@ -135,15 +135,13 @@ function InvitePartnerSheetContent({ setIsOpen }: InvitePartnerSheetProps) {
 
         if (invitedCount > 0) {
           parts.push(
-            invitedCount === 1
-              ? "Invitation sent to 1 partner."
-              : `Invitations sent to ${invitedCount} partners.`,
+            `${pluralize("Invitation", invitedCount)} sent to ${invitedCount} ${pluralize("partner", invitedCount)}.`,
           );
         }
 
         if (skippedCount > 0) {
           parts.push(
-            `${skippedCount} ${pluralize("partner", skippedCount)} were skipped because they're already enrolled or previously invited.`,
+            `Skipped ${skippedCount} ${pluralize("partner", skippedCount)} because they're already enrolled or previously invited.`,
           );
         }
 

apps/web/lib/zod/schemas/partners.ts

@@ -742,6 +742,7 @@ export const bulkInvitePartnersSchema = z.object({
   groupId: z.string().nullish(),
   emails: z
     .array(z.email().trim().min(1).max(100))
+    .min(1)
     .max(MAX_PARTNERS_INVITES_PER_REQUEST),
 });
 

packages/ui/src/multi-value-input.tsx

@@ -90,10 +90,7 @@ const MultiValueInput = React.forwardRef<
 
   const addValues = useCallback(
     (candidates: string[]) => {
-      const normalized = candidates
-        .map(normalize)
-        .filter(Boolean)
-        .filter((v) => !values.includes(v));
+      const normalized = candidates.map(normalize).filter(Boolean);
       if (normalized.length === 0) return values;
       const next = [...values];
       for (const v of normalized) {
@@ -105,6 +102,16 @@ const MultiValueInput = React.forwardRef<
     [values, normalize, maxValues],
   );
 
+  /** Deduplicate preserving first occurrence order; used only on blur. */
+  const deduplicateValues = useCallback((list: string[]): string[] => {
+    const seen = new Set<string>();
+    return list.filter((v) => {
+      if (seen.has(v)) return false;
+      seen.add(v);
+      return true;
+    });
+  }, []);
+
   const commitPendingInput = useCallback((): string[] => {
     const parsed = parseCsvLikeValues(inputValue);
     if (parsed.length === 0) {
@@ -216,6 +223,9 @@ const MultiValueInput = React.forwardRef<
 
   const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
     const pasted = e.clipboardData.getData("text");
+    const hasDelimiter = /[,\n\r]/.test(pasted);
+    if (!hasDelimiter) return;
+
     const parsed = parseCsvLikeValues(pasted);
     if (parsed.length === 0) return;
 
@@ -227,7 +237,11 @@ const MultiValueInput = React.forwardRef<
 
   const handleBlur = () => {
     setSelectedValue(null);
-    commitPendingInput();
+    const afterCommit = commitPendingInput();
+    const deduped = deduplicateValues(afterCommit);
+    if (deduped.length !== afterCommit.length) {
+      onChange(deduped);
+    }
   };
 
   const removeValue = (value: string) => {
@@ -245,9 +259,9 @@ const MultiValueInput = React.forwardRef<
         className,
       )}
     >
-      {values.map((value) => (
+      {values.map((value, index) => (
         <span
-          key={value}
+          key={`${value}-${index}`}
           onClick={() => setSelectedValue(value)}
           className={cn(
             "inline-flex items-center gap-1 rounded-md py-0.5 pl-1.5 pr-1 text-sm leading-6",