Skip to content

Bulk partner invite #3462

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
steven-tey merged 8 commits into from
Feb 13, 2026
Merged

Bulk partner invite #3462

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5e01006
Add bulk partner email invites
marcusljf Feb 12, 2026
d038d96
Tiny height adjustment to stop shifting
marcusljf Feb 12, 2026
8c08cbe
Coderabbit critical fixes
marcusljf Feb 12, 2026
8832f78
reusable MultiValueInput component
steven-tey Feb 13, 2026
7788507
MAX_PARTNERS_INVITES_PER_REQUEST
steven-tey Feb 13, 2026
7354813
improve efficiency via bulkInvitePartners
steven-tey Feb 13, 2026
1212a00
Merge branch 'main' into bulk-partner-invite
steven-tey Feb 13, 2026
2c77cf3
Bulk invite: skip already enrolled partners, create default links, im…
devkiran Feb 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
172 changes: 118 additions & 54 deletions apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/partners/invite-partner-sheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,12 @@ import { invitePartnerSchema } from "@/lib/zod/schemas/partners";
import { GroupSelector } from "@/ui/partners/groups/group-selector";
import { X } from "@/ui/shared/icons";
import {
AnimatedSizeContainer,
BlurImage,
Button,
InfoTooltip,
MultiValueInput,
type MultiValueInputRef,
RichTextArea,
RichTextProvider,
RichTextToolbar,
Expand Down Expand Up @@ -92,16 +95,39 @@ function InvitePartnerSheetContent({ setIsOpen }: InvitePartnerSheetProps) {
setValue,
} = useForm<InvitePartnerFormData>({
defaultValues: {
email: "",
emails: [],
groupId: program?.defaultGroupId || "",
},
});

const email = watch("email");
const multiValueInputRef = useRef<MultiValueInputRef>(null);
const emails = watch("emails") ?? [];
const hasMultipleRecipients = emails.length > 1;

const { executeAsync, isPending } = useAction(invitePartnerAction, {
onSuccess: () => {
toast.success("Invitation sent to partner!");
setIsOpen(false);
onSuccess: ({ data }) => {
const invitedCount = data?.invitedCount ?? 0;
const errorsCount = data?.errors?.length ?? 0;

if (errorsCount === 0) {
toast.success(
invitedCount > 1
? `Invitations sent to ${invitedCount} partners!`
: "Invitation sent to partner!",
);
setIsOpen(false);
return;
}

if (invitedCount > 0) {
toast.warning(
`Sent ${invitedCount} invite${invitedCount === 1 ? "" : "s"}, ${errorsCount} failed.`,
);
return;
}

toast.error(data?.errors?.[0]?.error || "Failed to send invites");
},
onError({ error }) {
toast.error(error.serverError);
Expand Down Expand Up @@ -133,8 +159,21 @@ function InvitePartnerSheetContent({ setIsOpen }: InvitePartnerSheetProps) {
return;
}

const finalEmails =
multiValueInputRef.current?.commitPendingInput() ?? data.emails ?? [];

if (finalEmails.length === 0) {
toast.error("Please enter at least one email address.");
return;
}

await executeAsync({
...data,
email: finalEmails[0],
emails: finalEmails,
...(finalEmails.length > 1
? { name: undefined, username: undefined }
: {}),
workspaceId,
});
};
Expand Down Expand Up @@ -213,70 +252,95 @@ function InvitePartnerSheetContent({ setIsOpen }: InvitePartnerSheetProps) {
<div className="grid grid-cols-1 gap-6">
<div>
<label
htmlFor="email"
htmlFor="partner-email-input"
className="block text-sm font-medium text-neutral-900"
>
Email
</label>

<div className="relative mt-2 rounded-md shadow-sm">
<input
{...register("email", { required: true })}
className="block w-full rounded-md border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
<div className="mt-2">
<MultiValueInput
ref={multiValueInputRef}
id="partner-email-input"
values={emails}
onChange={(values) => {
setValue("emails", values, {
shouldDirty: true,
shouldValidate: true,
});
setValue("email", values[0] ?? "", {
shouldDirty: true,
shouldValidate: true,
});
}}
placeholder="panic@thedis.co"
type="email"
autoComplete="off"
normalize={(v) => v.trim().toLowerCase()}
maxValues={50}
disabled={isEditingEmail || isSavingEmailData}
autoFocus={!isMobile}
/>
</div>
<p className="mt-2 text-xs text-neutral-500">
Separate multiple emails with commas, or paste a list
</p>
</div>

<div>
<label
htmlFor="name"
className="block text-sm font-medium text-neutral-900"
<AnimatedSizeContainer
height
className="overflow-visible"
transition={{ ease: "easeOut", duration: 0.35 }}
>
Name <span className="text-neutral-500">(optional)</span>
</label>

<div className="relative mt-2 rounded-md shadow-sm">
<input
{...register("name")}
className="block w-full rounded-md border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
placeholder="John Doe"
type="text"
autoComplete="off"
/>
</div>
</div>

<div>
<div className="flex items-center gap-2">
<label
htmlFor="username"
className="block text-sm font-medium text-neutral-900"
>
Short link{" "}
<span className="text-neutral-500">(optional)</span>
</label>
</div>
{!hasMultipleRecipients && (
<div className="grid grid-cols-1 gap-6 pb-6">
<div>
<label
htmlFor="name"
className="block text-sm font-medium text-neutral-900"
>
Name{" "}
<span className="text-neutral-500">(optional)</span>
</label>

<div className="relative mt-2 rounded-md shadow-sm">
<input
{...register("name")}
className="block w-full rounded-md border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
placeholder="John Doe"
type="text"
autoComplete="off"
/>
</div>
</div>

<div className="mt-2 flex">
<span className="inline-flex items-center rounded-l-md border border-r-0 border-neutral-300 bg-neutral-50 px-3 text-neutral-500 sm:text-sm">
{program?.domain}
</span>
<input
{...register("username")}
type="text"
id="username"
className="block w-full rounded-r-md border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
placeholder="johndoe"
autoComplete="off"
/>
</div>
</div>
<div>
<div className="flex items-center gap-2">
<label
htmlFor="username"
className="block text-sm font-medium text-neutral-900"
>
Short link{" "}
<span className="text-neutral-500">(optional)</span>
</label>
</div>

<div>
<div className="mt-2 flex">
<span className="inline-flex items-center rounded-l-md border border-r-0 border-neutral-300 bg-neutral-50 px-3 text-neutral-500 sm:text-sm">
{program?.domain}
</span>
<input
{...register("username")}
type="text"
id="username"
className="block w-full rounded-r-md border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
placeholder="johndoe"
autoComplete="off"
/>
</div>
</div>
</div>
)}
</AnimatedSizeContainer>
<label className="block text-sm font-medium text-neutral-900">
Group <span className="text-neutral-500">(optional)</span>
</label>
Expand Down Expand Up @@ -324,7 +388,7 @@ function InvitePartnerSheetContent({ setIsOpen }: InvitePartnerSheetProps) {
className="w-fit"
loading={isPending || isSubmitting || isSubmitSuccessful}
disabled={
isPending || !email || isEditingEmail || isSavingEmailData
isPending || isEditingEmail || isSavingEmailData
}
/>
</div>
Expand Down
Loading