fix/org-owner-membership-invite-role: fix: align organization owner role display and invite authorization

Author: DaveMiscampbell

apps/web/actions/organization/send-invites.ts

@@ -5,10 +5,14 @@ import { getCurrentUser } from "@cap/database/auth/session";
 import { sendEmail } from "@cap/database/emails/config";
 import { OrganizationInvite } from "@cap/database/emails/organization-invite";
 import { nanoId } from "@cap/database/helpers";
-import { organizationInvites, organizations } from "@cap/database/schema";
+import {
+	organizationInvites,
+	organizationMembers,
+	organizations,
+} from "@cap/database/schema";
 import { serverEnv } from "@cap/env";
 import type { Organisation } from "@cap/web-domain";
-import { eq } from "drizzle-orm";
+import { and, eq } from "drizzle-orm";
 import { revalidatePath } from "next/cache";
 
 export async function sendOrganizationInvites(
@@ -30,10 +34,27 @@ export async function sendOrganizationInvites(
 		throw new Error("Organization not found");
 	}
 
-	if (organization[0]?.ownerId !== user.id) {
+	const [ownerMembership] = await db()
+		.select({ id: organizationMembers.id })
+		.from(organizationMembers)
+		.where(
+			and(
+				eq(organizationMembers.organizationId, organizationId),
+				eq(organizationMembers.userId, user.id),
+				eq(organizationMembers.role, "owner"),
+			),
+		)
+		.limit(1);
+
+	if (!ownerMembership) {
 		throw new Error("Only the owner can send organization invites");
 	}
 
+	const [org] = organization;
+	if (!org) {
+		throw new Error("Organization not found");
+	}
+
 	const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 	const validEmails = invitedEmails.filter((email) =>
 		emailRegex.test(email.trim()),
@@ -53,11 +74,11 @@ export async function sendOrganizationInvites(
 		const inviteUrl = `${serverEnv().WEB_URL}/invite/${inviteId}`;
 		await sendEmail({
 			email: email.trim(),
-			subject: `Invitation to join ${organization[0].name} on Cap`,
+			subject: `Invitation to join ${org.name} on Cap`,
 			react: OrganizationInvite({
 				email: email.trim(),
 				url: inviteUrl,
-				organizationName: organization[0].name,
+				organizationName: org.name,
 			}),
 		});
 	}

apps/web/app/(org)/dashboard/settings/organization/Organization.tsx

@@ -25,6 +25,10 @@ export const Organization = () => {
 	const [loading, setLoading] = useState(false);
 	const [billingLoading, setBillingLoading] = useState(false);
 	const isOwner = user?.id === activeOrganization?.organization.ownerId;
+	const canInviteUsers =
+		activeOrganization?.members?.some(
+			(member) => member.userId === user?.id && member.role === "owner",
+		) ?? false;
 	const [isInviteDialogOpen, setIsInviteDialogOpen] = useState(false);
 	const ownerToastShown = useRef(false);
 
@@ -71,6 +75,7 @@ export const Organization = () => {
 
 			<MembersCard
 				isOwner={isOwner}
+				canInviteUsers={canInviteUsers}
 				loading={loading}
 				handleManageBilling={() => handleManageBilling(setLoading)}
 				showOwnerToast={showOwnerToast}
@@ -86,6 +91,7 @@ export const Organization = () => {
 			<InviteDialog
 				isOpen={isInviteDialogOpen}
 				setIsOpen={setIsInviteDialogOpen}
+				canInviteUsers={canInviteUsers}
 				isOwner={isOwner}
 				showOwnerToast={showOwnerToast}
 				handleManageBilling={() => handleManageBilling(setLoading)}

apps/web/app/(org)/dashboard/settings/organization/components/InviteDialog.tsx

@@ -23,6 +23,7 @@ import { useDashboardContext } from "../../../Contexts";
 interface InviteDialogProps {
 	isOpen: boolean;
 	setIsOpen: (isOpen: boolean) => void;
+	canInviteUsers: boolean;
 	isOwner: boolean;
 	showOwnerToast: () => void;
 	handleManageBilling: () => Promise<void>;
@@ -31,6 +32,7 @@ interface InviteDialogProps {
 export const InviteDialog = ({
 	isOpen,
 	setIsOpen,
+	canInviteUsers,
 	isOwner,
 	showOwnerToast,
 	handleManageBilling,
@@ -41,9 +43,7 @@ export const InviteDialog = ({
 	const [emailInput, setEmailInput] = useState("");
 	const [upgradeLoading, setUpgradeLoading] = useState(false);
 
-	const { inviteQuota, remainingSeats } = calculateSeats(
-		activeOrganization || {},
-	);
+	const { remainingSeats } = calculateSeats(activeOrganization || {});
 
 	const handleAddEmails = () => {
 		const newEmails = emailInput
@@ -83,7 +83,7 @@ export const InviteDialog = ({
 
 	const sendInvites = useMutation({
 		mutationFn: async () => {
-			if (!isOwner) {
+			if (!canInviteUsers) {
 				showOwnerToast();
 				throw new Error("Not authorized");
 			}
@@ -162,7 +162,7 @@ export const InviteDialog = ({
 											variant="destructive"
 											size="xs"
 											onClick={() => handleRemoveEmail(email)}
-											disabled={!isOwner}
+											disabled={!canInviteUsers}
 										>
 											Remove
 										</Button>

apps/web/app/(org)/dashboard/settings/organization/components/MembersCard.tsx

@@ -29,6 +29,7 @@ import { calculateSeats } from "@/utils/organization";
 
 interface MembersCardProps {
 	isOwner: boolean;
+	canInviteUsers: boolean;
 	loading: boolean;
 	handleManageBilling: () => Promise<void>;
 	showOwnerToast: () => void;
@@ -37,6 +38,7 @@ interface MembersCardProps {
 
 export const MembersCard = ({
 	isOwner,
+	canInviteUsers,
 	loading,
 	handleManageBilling,
 	showOwnerToast,
@@ -115,8 +117,8 @@ export const MembersCard = ({
 		}
 	};
 
-	const isMemberOwner = (id: string) => {
-		return id === activeOrganization?.organization.ownerId;
+	const isMemberOwner = (role: string) => {
+		return role === "owner";
 	};
 
 	const pendingMemberTest = {
@@ -177,7 +179,7 @@ export const MembersCard = ({
 							variant="dark"
 							className="px-6 min-w-auto"
 							onClick={() => {
-								if (!isOwner) {
+								if (!canInviteUsers) {
 									showOwnerToast();
 								} else if (remainingSeats <= 0) {
 									toast.error(
@@ -187,7 +189,7 @@ export const MembersCard = ({
 									setIsInviteDialogOpen(true);
 								}
 							}}
-							disabled={!isOwner}
+							disabled={!canInviteUsers}
 						>
 							+ Invite users
 						</Button>
@@ -210,12 +212,12 @@ export const MembersCard = ({
 								<TableCell>{member.user.name}</TableCell>
 								<TableCell>{member.user.email}</TableCell>
 								<TableCell>
-									{isMemberOwner(member.user.id) ? "Owner" : "Member"}
+									{isMemberOwner(member.role) ? "Owner" : "Member"}
 								</TableCell>
 								<TableCell>{format(member.createdAt, "MMM d, yyyy")}</TableCell>
 								<TableCell>Active</TableCell>
 								<TableCell>
-									{!isMemberOwner(member.user.id) ? (
+									{!isMemberOwner(member.role) ? (
 										<Button
 											type="button"
 											size="xs"