Merge branch 'main' into vaggelis/com-763-cant-switch-to-monthly-subscription-for-the-same-plan-if

Author: octoper

.changeset/chubby-memes-pull.md

@@ -0,0 +1,6 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+---
+
+Added a notice in tooltip when member no has permissions to manage billing for all manager related buttons

.changeset/rude-friends-create.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fix mobile `<Drawer />` sizing.

.changeset/smart-horses-wish.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Add descriptor ids to `UserMembershipList` and `OrganizationSwitcherTrigger` elements to improve styling experience.

.changeset/two-keys-act.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Add loading state to `<PaymentSources />` component.

packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx

@@ -30,6 +30,7 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
     return (
       <Button
         elementDescriptor={descriptors.organizationSwitcherTrigger}
+        elementId={descriptors.organizationSwitcherTrigger.setId(organization ? 'organization' : 'personal')}
         variant='ghost'
         colorScheme='neutral'
         hoverAsFocus

packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx

@@ -77,6 +77,7 @@ export const UserMembershipList = (props: UserMembershipListProps) => {
       {currentOrg && !hidePersonal && (
         <PreviewButton
           elementDescriptor={descriptors.organizationSwitcherPreviewButton}
+          elementId={descriptors.organizationSwitcherPreviewButton.setId('personal')}
           icon={SwitchArrowRight}
           onClick={onPersonalWorkspaceClick}
           role='menuitem'
@@ -92,6 +93,7 @@ export const UserMembershipList = (props: UserMembershipListProps) => {
         <PreviewButton
           key={organization.id}
           elementDescriptor={descriptors.organizationSwitcherPreviewButton}
+          elementId={descriptors.organizationSwitcherPreviewButton.setId('organization')}
           icon={SwitchArrowRight}
           onClick={() => onOrganizationClick(organization)}
           role='menuitem'

packages/clerk-js/src/ui/components/PaymentSources/PaymentSources.tsx

@@ -6,7 +6,7 @@ import { Fragment, useMemo, useRef } from 'react';
 import { RemoveResourceForm } from '../../common';
 import { useSubscriberTypeContext } from '../../contexts';
 import { localizationKeys } from '../../customizables';
-import { ProfileSection, ThreeDotsMenu, useCardState } from '../../elements';
+import { FullHeightLoader, ProfileSection, ThreeDotsMenu, useCardState, withCardStateProvider } from '../../elements';
 import { Action } from '../../elements/Action';
 import { useActionContext } from '../../elements/Action/ActionRoot';
 import { useFetch } from '../../hooks';
@@ -83,25 +83,29 @@ const RemoveScreen = ({
   );
 };
 
-export const PaymentSources = () => {
+export const PaymentSources = withCardStateProvider(() => {
   const clerk = useClerk();
   const subscriberType = useSubscriberTypeContext();
 
   const resource = subscriberType === 'org' ? clerk?.organization : clerk.user;
 
-  const { data, revalidate } = useFetch(
+  const { data, revalidate, isLoading } = useFetch(
     resource?.getPaymentSources,
     {},
     undefined,
     `commerce-payment-sources-${resource?.id}`,
   );
-  const { data: paymentSources } = data || { data: [] };
+  const { data: paymentSources = [] } = data || {};
 
   const sortedPaymentSources = useMemo(
     () => paymentSources.sort((a, b) => (a.isDefault && !b.isDefault ? -1 : 1)),
     [paymentSources],
   );
 
+  if (!resource) {
+    return null;
+  }
+
   return (
     <ProfileSection.Root
       title={localizationKeys('userProfile.billingPage.paymentSourcesSection.title')}
@@ -115,43 +119,52 @@ export const PaymentSources = () => {
       })}
     >
       <Action.Root>
-        <ProfileSection.ItemList id='paymentSources'>
-          {sortedPaymentSources.map(paymentSource => (
-            <Fragment key={paymentSource.id}>
-              <ProfileSection.Item id='paymentSources'>
-                <PaymentSourceRow paymentSource={paymentSource} />
-                <PaymentSourceMenu
-                  paymentSource={paymentSource}
-                  revalidate={revalidate}
+        <ProfileSection.ItemList
+          id='paymentSources'
+          disableAnimation
+        >
+          {isLoading ? (
+            <FullHeightLoader />
+          ) : (
+            <>
+              {sortedPaymentSources.map(paymentSource => (
+                <Fragment key={paymentSource.id}>
+                  <ProfileSection.Item id='paymentSources'>
+                    <PaymentSourceRow paymentSource={paymentSource} />
+                    <PaymentSourceMenu
+                      paymentSource={paymentSource}
+                      revalidate={revalidate}
+                    />
+                  </ProfileSection.Item>
+
+                  <Action.Open value={`remove-${paymentSource.id}`}>
+                    <Action.Card variant='destructive'>
+                      <RemoveScreen
+                        paymentSource={paymentSource}
+                        revalidate={revalidate}
+                      />
+                    </Action.Card>
+                  </Action.Open>
+                </Fragment>
+              ))}
+              <Action.Trigger value='add'>
+                <ProfileSection.ArrowButton
+                  id='paymentSources'
+                  localizationKey={localizationKeys('userProfile.billingPage.paymentSourcesSection.add')}
                 />
-              </ProfileSection.Item>
-
-              <Action.Open value={`remove-${paymentSource.id}`}>
-                <Action.Card variant='destructive'>
-                  <RemoveScreen
-                    paymentSource={paymentSource}
-                    revalidate={revalidate}
-                  />
+              </Action.Trigger>
+              <Action.Open value='add'>
+                <Action.Card>
+                  <AddScreen onSuccess={revalidate} />
                 </Action.Card>
               </Action.Open>
-            </Fragment>
-          ))}
-          <Action.Trigger value='add'>
-            <ProfileSection.ArrowButton
-              id='paymentSources'
-              localizationKey={localizationKeys('userProfile.billingPage.paymentSourcesSection.add')}
-            />
-          </Action.Trigger>
-          <Action.Open value='add'>
-            <Action.Card>
-              <AddScreen onSuccess={revalidate} />
-            </Action.Card>
-          </Action.Open>
+            </>
+          )}
         </ProfileSection.ItemList>
       </Action.Root>
     </ProfileSection.Root>
   );
-};
+});
 
 const PaymentSourceMenu = ({
   paymentSource,

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

@@ -1,7 +1,8 @@
-import { useClerk } from '@clerk/shared/react';
+import { useClerk, useSession } from '@clerk/shared/react';
 import type { CommercePlanResource, CommerceSubscriptionPlanPeriod, PricingTableProps } from '@clerk/types';
 import * as React from 'react';
 
+import { useProtect } from '../../common';
 import { usePlansContext, usePricingTableContext, useSubscriberTypeContext } from '../../contexts';
 import {
   Badge,
@@ -17,7 +18,7 @@ import {
   Span,
   Text,
 } from '../../customizables';
-import { Switch } from '../../elements';
+import { Switch, Tooltip } from '../../elements';
 import { Check, Plus } from '../../icons';
 import { common, InternalThemeProvider } from '../../styledSystem';
 import { colors, getClosestProfileScrollBox } from '../../utils';
@@ -97,13 +98,17 @@ interface CardProps {
 function Card(props: CardProps) {
   const { plan, planPeriod, setPlanPeriod, onSelect, props: pricingTableProps, isCompact = false } = props;
   const clerk = useClerk();
+  const { isSignedIn } = useSession();
   const { mode = 'mounted', ctaPosition: ctxCtaPosition } = usePricingTableContext();
   const subscriberType = useSubscriberTypeContext();
 
   const ctaPosition = pricingTableProps.ctaPosition || ctxCtaPosition || 'bottom';
   const collapseFeatures = pricingTableProps.collapseFeatures || false;
   const { id, slug } = plan;
 
+  const canManageBilling = useProtect(
+    has => has({ permission: 'org:sys_billing:manage' }) || subscriberType === 'user',
+  );
   const { buttonPropsForPlan, upcomingSubscriptionsExist, activeOrUpcomingSubscriptionBasedOnPlanPeriod } =
     usePlansContext();
 
@@ -244,15 +249,24 @@ function Card(props: CardProps) {
                 })}
               />
             ) : (
-              <Button
-                elementDescriptor={descriptors.pricingTableCardFooterButton}
-                block
-                textVariant={isCompact ? 'buttonSmall' : 'buttonLarge'}
-                {...buttonPropsForPlan({ plan, isCompact, selectedPlanPeriod: planPeriod })}
-                onClick={event => {
-                  onSelect(plan, event);
-                }}
-              />
+              <Tooltip.Root>
+                <Tooltip.Trigger sx={{ width: '100%' }}>
+                  <Button
+                    elementDescriptor={descriptors.pricingTableCardFooterButton}
+                    block
+                    textVariant={isCompact ? 'buttonSmall' : 'buttonLarge'}
+                    {...buttonPropsForPlan({ plan, isCompact, selectedPlanPeriod: planPeriod })}
+                    onClick={event => {
+                      onSelect(plan, event);
+                    }}
+                  />
+                </Tooltip.Trigger>
+                {isSignedIn && !canManageBilling && (
+                  <Tooltip.Content
+                    text={localizationKeys('organizationProfile.billingPage.alerts.noPermissionsToManageBilling')}
+                  />
+                )}
+              </Tooltip.Root>
             )}
           </Box>
         ) : (

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

@@ -244,6 +244,7 @@ export const usePlansContext = () => {
       variant: 'bordered' | 'solid';
       colorScheme: 'secondary' | 'primary';
       isDisabled: boolean;
+      disabled: boolean;
     } => {
       const subscription =
         sub ?? (plan ? activeOrUpcomingSubscriptionWithPlanPeriod(plan, selectedPlanPeriod) : undefined);
@@ -299,6 +300,7 @@ export const usePlansContext = () => {
         variant: isCompact ? 'bordered' : 'solid',
         colorScheme: isCompact ? 'secondary' : 'primary',
         isDisabled: !canManageBilling,
+        disabled: !canManageBilling,
       };
     },
     [activeOrUpcomingSubscriptionWithPlanPeriod, canManageBilling, ctx.subscriptions],

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

@@ -92,6 +92,7 @@ function Root({
     onOpenChange,
     transform: false,
     strategy,
+    placement: 'right',
     ...floatingProps,
   });
 
@@ -223,7 +224,8 @@ const Content = React.forwardRef<HTMLDivElement, ContentProps>(({ children }, re
         style={{
           position: strategy,
           insetBlock: 0,
-          insetInlineEnd: 0,
+          insetInline: 0,
+          pointerEvents: 'none',
         }}
       >
         <Flex
@@ -241,17 +243,19 @@ const Content = React.forwardRef<HTMLDivElement, ContentProps>(({ children }, re
             insetInlineEnd: strategy === 'fixed' ? t.space.$3 : 0,
             outline: 0,
             width: t.sizes.$100,
+            maxWidth: strategy === 'fixed' ? `calc(100% - ${t.space.$6})` : '100%',
             backgroundColor: t.colors.$colorBackground,
-            borderStartStartRadius: t.radii.$xl,
-            borderEndStartRadius: t.radii.$xl,
-            borderEndEndRadius: strategy === 'fixed' ? t.radii.$xl : 0,
-            borderStartEndRadius: strategy === 'fixed' ? t.radii.$xl : 0,
+            borderStartStartRadius: t.radii.$lg,
+            borderEndStartRadius: t.radii.$lg,
+            borderEndEndRadius: strategy === 'fixed' ? t.radii.$lg : 0,
+            borderStartEndRadius: strategy === 'fixed' ? t.radii.$lg : 0,
             borderWidth: t.borderWidths.$normal,
             borderStyle: t.borderStyles.$solid,
             borderColor: t.colors.$neutralAlpha100,
             boxShadow: t.shadows.$cardBoxShadow,
             overflow: 'hidden',
             zIndex: t.zIndices.$modal,
+            pointerEvents: 'auto',
           })}
         >
           {children}
@@ -289,8 +293,8 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>(({ title, children,
           borderBlockEndWidth: t.borderWidths.$normal,
           borderBlockEndStyle: t.borderStyles.$solid,
           borderBlockEndColor: t.colors.$neutralAlpha100,
-          borderStartStartRadius: t.radii.$xl,
-          borderStartEndRadius: t.radii.$xl,
+          borderStartStartRadius: t.radii.$lg,
+          borderStartEndRadius: t.radii.$lg,
           paddingBlock: title ? t.space.$3 : undefined,
           paddingInline: title ? t.space.$4 : undefined,
         }),