fix(clerk-js): Allow only members with manage billing permission to manage billing in OP

.changeset/eager-lions-tell.md

@@ -0,0 +1,7 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Only allow members with `org:sys_billing:manage` to manage billing for an Organization

packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx

@@ -1,3 +1,4 @@
+import { Protect } from '../../common';
 import {
   InvoicesContextProvider,
   PlansContextProvider,
@@ -7,6 +8,7 @@ import {
 } from '../../contexts';
 import { Button, Col, descriptors, Flex, localizationKeys } from '../../customizables';
 import {
+  Alert,
   Card,
   Header,
   Tab,
@@ -74,28 +76,48 @@ const OrganizationBillingPageInternal = withCardStateProvider(() => {
           </TabsList>
           <TabPanels>
             <TabPanel sx={{ width: '100%', flexDirection: 'column' }}>
-              {subscriptions.data.length > 0 ? (
-                <Flex
-                  sx={{ width: '100%', flexDirection: 'column' }}
-                  gap={4}
-                >
-                  <SubscriptionsList />
-                  <Button
-                    localizationKey='View all plans'
-                    hasArrow
-                    variant='ghost'
-                    onClick={() => navigate('plans')}
-                    sx={{
-                      width: 'fit-content',
-                    }}
-                  />
-                  <PaymentSources />
-                </Flex>
-              ) : (
-                <PricingTableContext.Provider value={{ componentName: 'PricingTable', mode: 'modal' }}>
-                  <PricingTable />
-                </PricingTableContext.Provider>
-              )}
+              <Flex
+                sx={{ width: '100%', flexDirection: 'column' }}
+                gap={4}
+              >
+                {subscriptions.data.length > 0 ? (
+                  <>
+                    <Protect condition={has => !has({ permission: 'org:sys_billing:manage' })}>
+                      <Alert
+                        variant='info'
+                        colorScheme='info'
+                        title={localizationKeys('organizationProfile.billingPage.alerts.noPemissionsToManageBilling')}
+                      />
+                    </Protect>
+                    <SubscriptionsList />
+                    <Button
+                      localizationKey='View all plans'
+                      hasArrow
+                      variant='ghost'
+                      onClick={() => navigate('plans')}
+                      sx={{
+                        width: 'fit-content',
+                      }}
+                    />
+                    <Protect condition={has => has({ permission: 'org:sys_billing:manage' })}>
+                      <PaymentSources />
+                    </Protect>
+                  </>
+                ) : (
+                  <>
+                    <Protect condition={has => !has({ permission: 'org:sys_billing:manage' })}>
+                      <Alert
+                        variant='info'
+                        colorScheme='info'
+                        title={localizationKeys('organizationProfile.billingPage.alerts.noPemissionsToManageBilling')}
+                      />
+                    </Protect>
+                    <PricingTableContext.Provider value={{ componentName: 'PricingTable', mode: 'modal' }}>
+                      <PricingTable />
+                    </PricingTableContext.Provider>
+                  </>
+                )}
+              </Flex>
             </TabPanel>
             <TabPanel sx={{ width: '100%' }}>
               <InvoicesContextProvider>

packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationPlansPage.tsx

@@ -1,5 +1,8 @@
+import { Protect } from '../../common';
 import { PlansContextProvider, PricingTableContext, SubscriberTypeContext } from '../../contexts';
-import { Header } from '../../elements';
+import { Flex } from '../../customizables';
+import { Alert, Header } from '../../elements';
+import { localizationKeys } from '../../localization';
 import { useRouter } from '../../router';
 import { PricingTable } from '../PricingTable/PricingTable';
 
@@ -8,7 +11,15 @@ const OrganizationPlansPageInternal = () => {
 
   return (
     <>
-      <Header.Root sx={t => ({ marginBlockEnd: t.space.$4 })}>
+      <Header.Root
+        sx={t => ({
+          borderBottomWidth: t.borderWidths.$normal,
+          borderBottomStyle: t.borderStyles.$solid,
+          borderBottomColor: t.colors.$neutralAlpha100,
+          marginBlockEnd: t.space.$4,
+          paddingBlockEnd: t.space.$4,
+        })}
+      >
         <Header.BackLink onClick={() => void navigate('../', { searchParams: new URLSearchParams('tab=plans') })}>
           <Header.Title
             localizationKey='Available Plans'
@@ -17,9 +28,21 @@ const OrganizationPlansPageInternal = () => {
         </Header.BackLink>
       </Header.Root>
 
-      <PricingTableContext.Provider value={{ componentName: 'PricingTable', mode: 'modal' }}>
-        <PricingTable />
-      </PricingTableContext.Provider>
+      <Flex
+        direction='col'
+        gap={4}
+      >
+        <Protect condition={has => !has({ permission: 'org:sys_billing:manage' })}>
+          <Alert
+            variant='info'
+            colorScheme='info'
+            title={localizationKeys('organizationProfile.billingPage.alerts.noPemissionsToManageBilling')}
+          />
+        </Protect>
+        <PricingTableContext.Provider value={{ componentName: 'PricingTable', mode: 'modal' }}>
+          <PricingTable />
+        </PricingTableContext.Provider>
+      </Flex>
     </>
   );
 };

packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileNavbar.tsx

@@ -21,6 +21,24 @@ export const OrganizationProfileNavbar = (
       }) || has({ permission: 'org:sys_memberships:manage' }),
   );
 
+  const allowBillingRoutes = useProtect(
+    has =>
+      has({
+        permission: 'org:sys_billing:read',
+      }) || has({ permission: 'org:sys_billing:manage' }),
+  );
+
+  const routes = pages.routes
+    .filter(
+      r =>
+        r.id !== ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.MEMBERS ||
+        (r.id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.MEMBERS && allowMembersRoute),
+    )
+    .filter(
+      r =>
+        r.id !== ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.BILLING ||
+        (r.id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.BILLING && allowBillingRoutes),
+    );
   if (!organization) {
     return null;
   }
@@ -30,11 +48,7 @@ export const OrganizationProfileNavbar = (
       <NavBar
         title={localizationKeys('organizationProfile.navbar.title')}
         description={localizationKeys('organizationProfile.navbar.description')}
-        routes={pages.routes.filter(
-          r =>
-            r.id !== ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.MEMBERS ||
-            (r.id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.MEMBERS && allowMembersRoute),
-        )}
+        routes={routes}
         contentRef={props.contentRef}
       />
       {props.children}

packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx

@@ -61,27 +61,33 @@ export const OrganizationProfileRoutes = () => {
           </Switch>
         </Route>
         {commerceSettings.billing.enabled && commerceSettings.billing.hasPaidOrgPlans && (
-          <Route path={isBillingPageRoot ? undefined : 'organization-billing'}>
-            <Switch>
-              <Route index>
-                <Suspense fallback={''}>
-                  <OrganizationBillingPage />
-                </Suspense>
-              </Route>
-              <Route path='plans'>
-                {/* TODO(@commerce): Should this be lazy loaded ? */}
-                <Suspense fallback={''}>
-                  <OrganizationPlansPage />
-                </Suspense>
-              </Route>
-              <Route path='invoice/:invoiceId'>
-                {/* TODO(@commerce): Should this be lazy loaded ? */}
-                <Suspense fallback={''}>
-                  <OrganizationInvoicePage />
-                </Suspense>
-              </Route>
-            </Switch>
-          </Route>
+          <Protect
+            condition={has =>
+              has({ permission: 'org:sys_billing:read' }) || has({ permission: 'org:sys_billing:manage' })
+            }
+          >
+            <Route path={isBillingPageRoot ? undefined : 'organization-billing'}>
+              <Switch>
+                <Route index>
+                  <Suspense fallback={''}>
+                    <OrganizationBillingPage />
+                  </Suspense>
+                </Route>
+                <Route path='plans'>
+                  {/* TODO(@commerce): Should this be lazy loaded ? */}
+                  <Suspense fallback={''}>
+                    <OrganizationPlansPage />
+                  </Suspense>
+                </Route>
+                <Route path='invoice/:invoiceId'>
+                  {/* TODO(@commerce): Should this be lazy loaded ? */}
+                  <Suspense fallback={''}>
+                    <OrganizationInvoicePage />
+                  </Suspense>
+                </Route>
+              </Switch>
+            </Route>
+          </Protect>
         )}
       </Route>
     </Switch>

packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx

@@ -10,6 +10,7 @@ import type {
 import * as React from 'react';
 import { useState } from 'react';
 
+import { useProtect } from '../../common';
 import { PlansContextProvider, SubscriberTypeContext, usePlansContext, useSubscriberTypeContext } from '../../contexts';
 import {
   Badge,
@@ -55,6 +56,9 @@ const PlanDetailsInternal = ({
   const { activeOrUpcomingSubscription, revalidate, buttonPropsForPlan, isDefaultPlanImplicitlyActiveOrUpcoming } =
     usePlansContext();
   const subscriberType = useSubscriberTypeContext();
+  const canManageBilling = useProtect(
+    has => has({ permission: 'org:sys_billing:manage' }) || subscriberType === 'user',
+  );
 
   if (!plan) {
     return null;
@@ -226,6 +230,7 @@ const PlanDetailsInternal = ({
                     variant='bordered'
                     colorScheme='secondary'
                     textVariant='buttonLarge'
+                    isDisabled={!canManageBilling}
                     onClick={() => openCheckout({ planPeriod: 'annual' })}
                     localizationKey={localizationKeys('commerce.switchToAnnual')}
                   />
@@ -235,6 +240,7 @@ const PlanDetailsInternal = ({
                   variant='bordered'
                   colorScheme='danger'
                   textVariant='buttonLarge'
+                  isDisabled={!canManageBilling}
                   onClick={() => setShowConfirmation(true)}
                   localizationKey={localizationKeys('commerce.cancelSubscription')}
                 />
@@ -262,6 +268,7 @@ const PlanDetailsInternal = ({
                   variant='ghost'
                   size='sm'
                   textVariant='buttonLarge'
+                  isDisabled={!canManageBilling}
                   onClick={() => {
                     setCancelError(undefined);
                     setShowConfirmation(false);
@@ -275,6 +282,7 @@ const PlanDetailsInternal = ({
                 size='sm'
                 textVariant='buttonLarge'
                 isLoading={isSubmitting}
+                isDisabled={!canManageBilling}
                 onClick={() => {
                   setCancelError(undefined);
                   setShowConfirmation(false);

packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

@@ -192,6 +192,10 @@ function Card(props: CardProps) {
               borderTopWidth: t.borderWidths.$normal,
               borderTopStyle: t.borderStyles.$solid,
               borderTopColor: t.colors.$neutralAlpha100,
+              background: common.mergedColorsBackground(
+                colors.setAlpha(t.colors.$colorBackground, 0.3),
+                colors.setAlpha(t.colors.$colorBackground, 0.5),
+              ),
             })}
           >
             {subscription?.status === 'active' || (isImplicitlyActiveOrUpcoming && subscriptions.length === 0) ? (

packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx

@@ -1,6 +1,7 @@
 import type { CommerceSubscriptionResource } from '@clerk/types';
 
-import { usePlansContext } from '../../contexts';
+import { useProtect } from '../../common';
+import { usePlansContext, useSubscriberTypeContext } from '../../contexts';
 import {
   Badge,
   Button,
@@ -21,6 +22,10 @@ import { CogFilled, Plans } from '../../icons';
 
 export function SubscriptionsList() {
   const { subscriptions, handleSelectPlan, captionForSubscription, canManageSubscription } = usePlansContext();
+  const subscriberType = useSubscriberTypeContext();
+  const canManageBilling = useProtect(
+    has => has({ permission: 'org:sys_billing:manage' }) || subscriberType === 'user',
+  );
 
   const handleSelectSubscription = (
     subscription: CommerceSubscriptionResource,
@@ -118,6 +123,7 @@ export function SubscriptionsList() {
                   onClick={event => handleSelectSubscription(subscription, event)}
                   variant='bordered'
                   colorScheme='secondary'
+                  isDisabled={!canManageBilling}
                   sx={t => ({
                     width: t.sizes.$6,
                     height: t.sizes.$6,

packages/clerk-js/src/ui/contexts/components/Plans.tsx

@@ -102,6 +102,18 @@ export const usePlansContext = () => {
     throw new Error('Clerk: usePlansContext called outside Plans.');
   }
 
+  const canManageBilling = useMemo(() => {
+    if (!clerk.session) {
+      return true;
+    }
+
+    if (clerk?.session?.checkAuthorization({ permission: 'org:sys_billing:manage' }) || subscriberType === 'user') {
+      return true;
+    }
+
+    return false;
+  }, [clerk, subscriberType]);
+
   const { componentName, ...ctx } = context;
 
   // return the active or upcoming subscription for a plan if it exists
@@ -137,7 +149,12 @@ export const usePlansContext = () => {
       plan?: CommercePlanResource;
       subscription?: CommerceSubscriptionResource;
       isCompact?: boolean;
-    }): { localizationKey: LocalizationKey; variant: 'bordered' | 'solid'; colorScheme: 'secondary' | 'primary' } => {
+    }): {
+      localizationKey: LocalizationKey;
+      variant: 'bordered' | 'solid';
+      colorScheme: 'secondary' | 'primary';
+      isDisabled: boolean;
+    } => {
       const subscription = sub ?? (plan ? activeOrUpcomingSubscription(plan) : undefined);
 
       return {
@@ -151,6 +168,7 @@ export const usePlansContext = () => {
             : localizationKeys('commerce.subscribe'),
         variant: isCompact || !!subscription ? 'bordered' : 'solid',
         colorScheme: isCompact || !!subscription ? 'secondary' : 'primary',
+        isDisabled: !canManageBilling,
       };
     },
     [activeOrUpcomingSubscription],

packages/clerk-js/src/ui/elements/Alert.tsx

@@ -3,7 +3,7 @@ import { Alert as AlertCust, AlertIcon, Col, descriptors, Text } from '../custom
 import type { PropsOfComponent } from '../styledSystem';
 
 type _AlertProps = {
-  variant?: 'danger' | 'warning';
+  variant?: 'danger' | 'warning' | 'info';
   title?: LocalizationKey | string;
   subtitle?: LocalizationKey | string;
 };
@@ -24,7 +24,7 @@ export const Alert = (props: AlertProps): JSX.Element | null => {
       colorScheme={variant}
       align='start'
       {...rest}
-      sx={[t => ({ backgroundColor: t.colors.$warningAlpha100 }), rest.sx]}
+      sx={[rest.sx]}
     >
       <AlertIcon
         elementId={descriptors.alert.setId(variant)}