feat: pbac org billing (calcom#23709)

* refactor layout to not check session

* add actions for orgs + org admins

* update types on actions to be correctly non nullable

* Add tests for utils

* Apply suggestion from @coderabbitai[bot]

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* restore lock file

* add permission check action for org authentication managment

* WIP BRANCH

* Git merge fix conflicts

* Fix imports

* intro to pbac team billing

* restore log

* refactor to be a billing portal factory service

* fix merge conflict

* Fix merge conflicts

* Passing test with non hardcoded vars

* fix migration

* Wip

* remove layout permision checks

* Fix type check

* remove logs

* improve error handling and logs

* Fix nits

* nits

* Use push instead of slice for billing tab

* Add permissions to memo

* Fix credits handlers to use PBAC also

* fix imports

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: sean-brydon

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx

@@ -101,10 +101,7 @@ const getTabs = (orgBranding: OrganizationBranding | null) => {
           name: "privacy",
           href: "/settings/organizations/privacy",
         },
-        {
-          name: "billing",
-          href: "/settings/organizations/billing",
-        },
+
         { name: "OAuth Clients", href: "/settings/organizations/platform/oauth-clients" },
         {
           name: "SSO",
@@ -173,17 +170,11 @@ const getTabs = (orgBranding: OrganizationBranding | null) => {
 // The following keys are assigned to admin only
 const adminRequiredKeys = ["admin"];
 const organizationRequiredKeys = ["organization"];
-const organizationAdminKeys = [
-  "privacy",
-  "billing",
-  "OAuth Clients",
-  "SSO",
-  "directory_sync",
-  "delegation_credential",
-];
+const organizationAdminKeys = ["privacy", "OAuth Clients", "SSO", "directory_sync", "delegation_credential"];
 
 export interface SettingsPermissions {
   canViewRoles?: boolean;
+  canViewOrganizationBilling?: boolean;
 }
 
 const useTabs = ({
@@ -232,11 +223,27 @@ const useTabs = ({
 
         // Add pbac menu item only if feature flag is enabled AND user has permission to view roles
         // This prevents showing the menu item when user has no organization permissions
-        if (isPbacEnabled && permissions?.canViewRoles) {
-          newArray.push({
-            name: "roles_and_permissions",
-            href: "/settings/organizations/roles",
-          });
+        if (isPbacEnabled) {
+          if (permissions?.canViewRoles) {
+            newArray.push({
+              name: "roles_and_permissions",
+              href: "/settings/organizations/roles",
+            });
+          }
+
+          if (permissions?.canViewOrganizationBilling) {
+            newArray.push({
+              name: "billing",
+              href: "/settings/organizations/billing",
+            });
+          }
+        } else {
+          if (isOrgAdminOrOwner) {
+            newArray.push({
+              name: "billing",
+              href: "/settings/organizations/billing",
+            });
+          }
         }
 
         return {
@@ -272,7 +279,7 @@ const useTabs = ({
       if (isAdmin) return true;
       return !adminRequiredKeys.includes(tab.name);
     });
-  }, [isAdmin, orgBranding, isOrgAdminOrOwner, user, isDelegationCredentialEnabled]);
+  }, [isAdmin, orgBranding, isOrgAdminOrOwner, user, isDelegationCredentialEnabled, isPbacEnabled, permissions]);
 
   return processTabsMemod;
 };

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/layout.tsx

@@ -3,11 +3,12 @@ import { cookies, headers } from "next/headers";
 import { redirect } from "next/navigation";
 import React from "react";
 
+import { checkAdminOrOwner } from "@calcom/features/auth/lib/checkAdminOrOwner";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import type { TeamFeatures } from "@calcom/features/flags/config";
 import { FeaturesRepository } from "@calcom/features/flags/features.repository";
 import { PermissionMapper } from "@calcom/features/pbac/domain/mappers/PermissionMapper";
-import { Resource, CrudAction } from "@calcom/features/pbac/domain/types/permission-registry";
+import { Resource, CrudAction, CustomAction } from "@calcom/features/pbac/domain/types/permission-registry";
 import { PermissionCheckService } from "@calcom/features/pbac/services/permission-check.service";
 import { prisma } from "@calcom/prisma";
 
@@ -45,13 +46,16 @@ export default async function SettingsLayoutAppDir(props: SettingsLayoutProps) {
 
   let teamFeatures: Record<number, TeamFeatures> | null = null;
   let canViewRoles = false;
+  let canViewOrganizationBilling = false;
   const orgId = session?.user?.profile?.organizationId ?? session?.user.org?.id;
 
   // For now we only grab organization features but it would be nice to fetch these on the server side for specific team feature flags
   if (orgId) {
-    const [features, rolePermissions] = await Promise.all([
+    const isOrgAdminOrOwner = checkAdminOrOwner(session.user.org?.role);
+    const [features, rolePermissions, organizationPermissions] = await Promise.all([
       getTeamFeatures(orgId),
       getCachedResourcePermissions(userId, orgId, Resource.Role),
+      getCachedResourcePermissions(userId, orgId, Resource.Organization),
     ]);
 
     if (features) {
@@ -62,6 +66,8 @@ export default async function SettingsLayoutAppDir(props: SettingsLayoutProps) {
       // Check if user has permission to read roles
       const roleActions = PermissionMapper.toActionMap(rolePermissions, Resource.Role);
       canViewRoles = roleActions[CrudAction.Read] ?? false;
+      const orgActions = PermissionMapper.toActionMap(organizationPermissions, Resource.Organization);
+      canViewOrganizationBilling = orgActions[CustomAction.ManageBilling] ?? isOrgAdminOrOwner;
     }
   }
 
@@ -70,7 +76,7 @@ export default async function SettingsLayoutAppDir(props: SettingsLayoutProps) {
       <SettingsLayoutAppDirClient
         {...props}
         teamFeatures={teamFeatures ?? {}}
-        permissions={{ canViewRoles }}
+        permissions={{ canViewRoles, canViewOrganizationBilling }}
       />
     </>
   );

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/(org-admin-only)/billing/page.tsx

@@ -2,10 +2,11 @@ import { _generateMetadata } from "app/_utils";
 import { getTranslate } from "app/_utils";
 
 import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+import { MembershipRole } from "@calcom/prisma/enums";
 
 import BillingView from "~/settings/billing/billing-view";
 
-import { validateUserHasOrgAdmin } from "../../actions/validateUserHasOrgAdmin";
+import { validateUserHasOrgPerms } from "../../actions/validateUserHasOrgPerms";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
@@ -18,9 +19,11 @@ export const generateMetadata = async () =>
 
 const Page = async () => {
   const t = await getTranslate();
-  await validateUserHasOrgAdmin();
 
-  // TODO(SEAN): Add PBAC to this page in the next PR
+  await validateUserHasOrgPerms({
+    permission: "organization.manageBilling",
+    fallbackRoles: [MembershipRole.OWNER, MembershipRole.ADMIN],
+  });
 
   return (
     <SettingsHeader

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/(org-admin-only)/layout.tsx

@@ -1,24 +1,4 @@
-import { cookies, headers } from "next/headers";
-import { redirect } from "next/navigation";
-
-import { checkAdminOrOwner } from "@calcom/features/auth/lib/checkAdminOrOwner";
-import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
-
-import { buildLegacyRequest } from "@lib/buildLegacyCtx";
-
 const OrgAdminOnlyLayout = async ({ children }: { children: React.ReactNode }) => {
-  const session = await getServerSession({ req: buildLegacyRequest(await headers(), await cookies()) });
-  const userProfile = session?.user?.profile;
-  const userId = session?.user?.id;
-  const orgRole =
-    session?.user?.org?.role ??
-    userProfile?.organization?.members.find((m: { userId: number }) => m.userId === userId)?.role;
-  const isOrgAdminOrOwner = checkAdminOrOwner(orgRole);
-
-  if (!isOrgAdminOrOwner) {
-    return redirect("/settings/organizations/profile");
-  }
-
   return children;
 };
 

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/actions/validateUserHasOrgPerms.tsx

@@ -0,0 +1,34 @@
+import { redirect } from "next/navigation";
+
+import type { PermissionString } from "@calcom/features/pbac/domain/types/permission-registry";
+import { PermissionCheckService } from "@calcom/features/pbac/services/permission-check.service";
+import type { MembershipRole } from "@calcom/prisma/enums";
+
+import { validateUserHasOrg } from "./validateUserHasOrg";
+
+export const validateUserHasOrgPerms = async ({
+  redirectTo,
+  fallbackRoles,
+  permission,
+}: {
+  redirectTo?: string;
+  permission: PermissionString;
+  fallbackRoles: MembershipRole[];
+}) => {
+  const session = await validateUserHasOrg();
+
+  const permissionCheckService = new PermissionCheckService();
+
+  const hasPermission = await permissionCheckService.checkPermission({
+    userId: session.user.id,
+    teamId: session.user.org.id,
+    permission,
+    fallbackRoles,
+  });
+
+  if (!hasPermission) {
+    redirect(redirectTo || "/settings/my-account/profile");
+  }
+
+  return session;
+};