Skip to content

chore(clerk-js,types,localizations): Clean up empty subscription list #5912

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
merged 3 commits into from
May 13, 2025
Merged

chore(clerk-js,types,localizations): Clean up empty subscription list #5912

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fb5a8e0
handle state with no subs and hidden free plan
aeliox May 12, 2025
1318255
changeset
aeliox May 12, 2025
9184eeb
address localizations
aeliox May 13, 2025
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
7 changes: 7 additions & 0 deletions .changeset/hip-dancers-write.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'@clerk/localizations': patch
'@clerk/clerk-js': patch
'@clerk/types': patch
---

Display a better subscription list / button when empty and the free plan is hidden
53 changes: 14 additions & 39 deletions packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,10 @@ import {
SubscriberTypeContext,
useSubscriptions,
} from '../../contexts';
import { Col, descriptors, Flex, localizationKeys } from '../../customizables';
import { Col, descriptors, localizationKeys } from '../../customizables';
import {
Card,
Header,
ProfileSection,
Tab,
TabPanel,
TabPanels,
Expand All @@ -19,8 +18,6 @@ import {
withCardStateProvider,
} from '../../elements';
import { useTabState } from '../../hooks/useTabState';
import { ArrowsUpDown } from '../../icons';
import { useRouter } from '../../router';
import { PaymentSources } from '../PaymentSources';
import { StatementsList } from '../Statements';
import { SubscriptionsList } from '../Subscriptions';
Expand All @@ -35,7 +32,7 @@ const OrganizationBillingPageInternal = withCardStateProvider(() => {
const card = useCardState();
const { data: subscriptions } = useSubscriptions('org');
const { selectedTab, handleTabChange } = useTabState(orgTabMap);
const { navigate } = useRouter();

if (!Array.isArray(subscriptions?.data)) {
return null;
}
Expand Down Expand Up @@ -71,40 +68,18 @@ const OrganizationBillingPageInternal = withCardStateProvider(() => {
</TabsList>
<TabPanels>
<TabPanel sx={{ width: '100%', flexDirection: 'column' }}>
<Flex
sx={{ width: '100%', flexDirection: 'column' }}
gap={4}
>
<ProfileSection.Root
id='subscriptionsList'
title={localizationKeys('organizationProfile.billingPage.subscriptionsListSection.title')}
centered={false}
sx={t => ({
borderTop: 'none',
paddingTop: t.space.$1,
})}
>
<SubscriptionsList />
<ProfileSection.ArrowButton
id='subscriptionsList'
textLocalizationKey={localizationKeys(
'organizationProfile.billingPage.subscriptionsListSection.actionLabel__switchPlan',
)}
sx={[
t => ({
justifyContent: 'start',
height: t.sizes.$8,
}),
]}
leftIcon={ArrowsUpDown}
leftIconSx={t => ({ width: t.sizes.$4, height: t.sizes.$4 })}
onClick={() => void navigate('plans')}
/>
</ProfileSection.Root>
<Protect condition={has => has({ permission: 'org:sys_billing:manage' })}>
<PaymentSources />
</Protect>
</Flex>
<SubscriptionsList
title={localizationKeys('organizationProfile.billingPage.subscriptionsListSection.title')}
arrowButtonText={localizationKeys(
'organizationProfile.billingPage.subscriptionsListSection.actionLabel__switchPlan',
)}
arrowButtonEmptyText={localizationKeys(
'organizationProfile.billingPage.subscriptionsListSection.actionLabel__newSubscription',
)}
/>
<Protect condition={has => has({ permission: 'org:sys_billing:manage' })}>
<PaymentSources />
</Protect>
</TabPanel>
<TabPanel sx={{ width: '100%' }}>
<StatementsContextProvider>
Expand Down
261 changes: 151 additions & 110 deletions packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import type { CommerceSubscriptionResource } from '@clerk/types';

import { useProtect } from '../../common';
import { usePlansContext, useSubscriberTypeContext } from '../../contexts';
import type { LocalizationKey } from '../../customizables';
import {
Badge,
Button,
Expand All @@ -18,14 +19,25 @@ import {
Thead,
Tr,
} from '../../customizables';
import { CogFilled, Plans } from '../../icons';
import { ProfileSection } from '../../elements';
import { ArrowsUpDown, CogFilled, Plans, Plus } from '../../icons';
import { useRouter } from '../../router';

export function SubscriptionsList() {
export function SubscriptionsList({
title,
arrowButtonText,
arrowButtonEmptyText,
}: {
title: LocalizationKey;
arrowButtonText: LocalizationKey;
arrowButtonEmptyText: LocalizationKey;
}) {
const { subscriptions, handleSelectPlan, captionForSubscription, canManageSubscription } = usePlansContext();
const subscriberType = useSubscriberTypeContext();
const canManageBilling = useProtect(
has => has({ permission: 'org:sys_billing:manage' }) || subscriberType === 'user',
);
const { navigate } = useRouter();
const handleSelectSubscription = (
subscription: CommerceSubscriptionResource,
event?: React.MouseEvent<HTMLElement>,
Expand All @@ -52,117 +64,146 @@ export function SubscriptionsList() {
});

return (
<Table tableHeadVisuallyHidden>
<Thead>
<Tr>
<Th>Plan</Th>
<Th>Start date</Th>
<Th>Edit</Th>
</Tr>
</Thead>
<Tbody>
{sortedSubscriptions.map(subscription => (
<Tr key={subscription.id}>
<Td>
<Col gap={1}>
<Flex
align='center'
gap={1}
<ProfileSection.Root
id='subscriptionsList'
title={title}
centered={false}
sx={t => ({
borderTop: 'none',
paddingTop: t.space.$1,
})}
>
{subscriptions.length > 0 && (
<Table tableHeadVisuallyHidden>
<Thead>
<Tr>
<Th>Plan</Th>
<Th>Start date</Th>
<Th>Edit</Th>
</Tr>
</Thead>
<Tbody>
{sortedSubscriptions.map(subscription => (
<Tr key={subscription.id}>
<Td>
<Col gap={1}>
<Flex
align='center'
gap={1}
>
<Icon
icon={Plans}
sx={t => ({
width: t.sizes.$4,
height: t.sizes.$4,
opacity: t.opacity.$inactive,
})}
/>
<Text
variant='subtitle'
sx={t => ({ marginRight: t.sizes.$1 })}
>
{subscription.plan.name}
</Text>
{sortedSubscriptions.length > 1 || !!subscription.canceledAt ? (
<Badge
colorScheme={subscription.status === 'active' ? 'secondary' : 'primary'}
localizationKey={
subscription.status === 'active'
? localizationKeys('badge__activePlan')
: localizationKeys('badge__upcomingPlan')
}
/>
) : null}
</Flex>
{(!subscription.plan.isDefault || subscription.status === 'upcoming') && (
<Text
variant='caption'
colorScheme='secondary'
localizationKey={captionForSubscription(subscription)}
/>
)}
</Col>
</Td>
<Td
sx={_ => ({
textAlign: 'right',
})}
>
<Icon
icon={Plans}
sx={t => ({
width: t.sizes.$4,
height: t.sizes.$4,
opacity: t.opacity.$inactive,
})}
/>
<Text
variant='subtitle'
sx={t => ({ marginRight: t.sizes.$1 })}
>
{subscription.plan.name}
<Text variant='subtitle'>
{subscription.plan.currencySymbol}
{subscription.planPeriod === 'annual'
? subscription.plan.annualAmountFormatted
: subscription.plan.amountFormatted}
{(subscription.plan.amount > 0 || subscription.plan.annualAmount > 0) && (
<Span
sx={t => ({
color: t.colors.$colorTextSecondary,
textTransform: 'lowercase',
':before': {
content: '"/"',
marginInline: t.space.$1,
},
})}
localizationKey={
subscription.planPeriod === 'annual'
? localizationKeys('commerce.year')
: localizationKeys('commerce.month')
}
/>
)}
</Text>
{sortedSubscriptions.length > 1 || !!subscription.canceledAt ? (
<Badge
colorScheme={subscription.status === 'active' ? 'secondary' : 'primary'}
localizationKey={
subscription.status === 'active'
? localizationKeys('badge__activePlan')
: localizationKeys('badge__upcomingPlan')
}
/>
) : null}
</Flex>
{(!subscription.plan.isDefault || subscription.status === 'upcoming') && (
<Text
variant='caption'
colorScheme='secondary'
localizationKey={captionForSubscription(subscription)}
/>
)}
</Col>
</Td>
<Td
sx={_ => ({
textAlign: 'right',
})}
>
<Text variant='subtitle'>
{subscription.plan.currencySymbol}
{subscription.planPeriod === 'annual'
? subscription.plan.annualAmountFormatted
: subscription.plan.amountFormatted}
{(subscription.plan.amount > 0 || subscription.plan.annualAmount > 0) && (
<Span
sx={t => ({
color: t.colors.$colorTextSecondary,
textTransform: 'lowercase',
':before': {
content: '"/"',
marginInline: t.space.$1,
},
})}
localizationKey={
subscription.planPeriod === 'annual'
? localizationKeys('commerce.year')
: localizationKeys('commerce.month')
}
/>
)}
</Text>
</Td>
<Td
sx={_ => ({
textAlign: 'right',
})}
>
{canManageSubscription({ subscription }) && subscription.id && !subscription.plan.isDefault && (
<Button
aria-label='Manage subscription'
onClick={event => handleSelectSubscription(subscription, event)}
variant='bordered'
colorScheme='secondary'
isDisabled={!canManageBilling}
sx={t => ({
width: t.sizes.$6,
height: t.sizes.$6,
</Td>
<Td
sx={_ => ({
textAlign: 'right',
})}
>
<Icon
icon={CogFilled}
sx={t => ({
width: t.sizes.$4,
height: t.sizes.$4,
opacity: t.opacity.$inactive,
})}
/>
</Button>
)}
</Td>
</Tr>
))}
</Tbody>
</Table>
{canManageSubscription({ subscription }) && subscription.id && !subscription.plan.isDefault && (
<Button
aria-label='Manage subscription'
onClick={event => handleSelectSubscription(subscription, event)}
variant='bordered'
colorScheme='secondary'
isDisabled={!canManageBilling}
sx={t => ({
width: t.sizes.$6,
height: t.sizes.$6,
})}
>
<Icon
icon={CogFilled}
sx={t => ({
width: t.sizes.$4,
height: t.sizes.$4,
opacity: t.opacity.$inactive,
})}
/>
</Button>
)}
</Td>
</Tr>
))}
</Tbody>
</Table>
)}

<ProfileSection.ArrowButton
id='subscriptionsList'
textLocalizationKey={subscriptions.length > 0 ? arrowButtonText : arrowButtonEmptyText}
sx={[
t => ({
justifyContent: 'start',
height: t.sizes.$8,
}),
]}
leftIcon={subscriptions.length > 0 ? ArrowsUpDown : Plus}
leftIconSx={t => ({
width: t.sizes.$4,
height: t.sizes.$4,
})}
onClick={() => void navigate('plans')}
/>
</ProfileSection.Root>
);
}
Loading