Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: 0604eb3 The changes in this PR will be included in the next version bump. This PR includes changesets to release 21 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
@clerk/agent-toolkit
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/dev-cli
@clerk/expo
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/hono
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/react
@clerk/react-router
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/ui
@clerk/upgrade
@clerk/vue
commit: |
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughAdds seat-based and per-unit billing support across types, JSON shapes, and deserialization: new interfaces for unit prices, tiers, per-unit totals, and subscription seats; BillingPlan gains 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/clerk-js/src/utils/billing.ts`:
- Around line 23-33: The change adds a new parser billingPerUnitTotalsFromJSON
(and related types like BillingPerUnitTotalJSON) but no tests were added; add
unit tests that cover the happy-path mapping of per_unit_totals to
BillingPerUnitTotal (verify name, block_size -> blockSize, tiers array,
fee_per_block and total mapped via billingMoneyAmountFromJSON) and
negative/null/optional cases (e.g., missing tiers, null fee_per_block/total) to
detect regressions—place tests exercising the billingPerUnitTotalsFromJSON
function and any upstream parsing that produces per_unit_totals so future
changes to unit_prices/seats/per_unit_totals are guarded.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: b7290789-ebef-42a4-ad61-b568277203b5
📒 Files selected for processing (6)
.changeset/cute-ideas-appear.mdpackages/clerk-js/src/core/resources/BillingPlan.tspackages/clerk-js/src/core/resources/BillingSubscription.tspackages/clerk-js/src/utils/billing.tspackages/shared/src/types/billing.tspackages/shared/src/types/json.ts
| const billingPerUnitTotalsFromJSON = (data: BillingPerUnitTotalJSON[]): BillingPerUnitTotal[] => { | ||
| return data.map(unitTotal => ({ | ||
| name: unitTotal.name, | ||
| blockSize: unitTotal.block_size, | ||
| tiers: unitTotal.tiers.map(tier => ({ | ||
| quantity: tier.quantity, | ||
| feePerBlock: billingMoneyAmountFromJSON(tier.fee_per_block), | ||
| total: billingMoneyAmountFromJSON(tier.total), | ||
| })), | ||
| })); | ||
| }; |
There was a problem hiding this comment.
Add regression tests for new billing parsers before merge.
This adds new parsing paths (per_unit_totals) and is part of a broader rollout (unit_prices, seats) but no tests were added/updated in this PR context. Please add coverage for happy-path mapping and null/optional field handling to prevent silent contract regressions.
As per coding guidelines: "**/*: If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes."
Also applies to: 70-72
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/clerk-js/src/utils/billing.ts` around lines 23 - 33, The change adds
a new parser billingPerUnitTotalsFromJSON (and related types like
BillingPerUnitTotalJSON) but no tests were added; add unit tests that cover the
happy-path mapping of per_unit_totals to BillingPerUnitTotal (verify name,
block_size -> blockSize, tiers array, fee_per_block and total mapped via
billingMoneyAmountFromJSON) and negative/null/optional cases (e.g., missing
tiers, null fee_per_block/total) to detect regressions—place tests exercising
the billingPerUnitTotalsFromJSON function and any upstream parsing that produces
per_unit_totals so future changes to unit_prices/seats/per_unit_totals are
guarded.
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/clerk-js/sandbox/scenarios/pricing-table-sbb.ts`:
- Around line 65-77: The scenario authenticates via
setClerkState(EnvironmentService.MULTI_SESSION, session, user) but the mocked
subscriptionHandler
(http.get('https://*.clerk.accounts.dev/v1/me/billing/subscription')) returns an
empty data object so the PricingTable renders no plans; fix by returning a
realistic subscription shape in subscriptionHandler.response.response.data that
matches the pricing-table visibility tests (include active plan/tiers and seat
information) so plans remain visible, or alternatively remove the
setClerkState/login to make this scenario unauthenticated and keep the empty
subscription response—update the mock in subscriptionHandler or the
authentication setup accordingly.
In `@packages/ui/src/components/PricingTable/PricingTableDefault.tsx`:
- Around line 324-330: The memo for feePeriodText (React.useMemo) and the
CardFeaturesList rendering assume plan.unitPrices has at least one element; if
unitPrices is [] this will throw on plan.unitPrices[0]. Fix by adding a
non-empty guard (e.g., check plan.unitPrices && plan.unitPrices.length > 0)
before accessing index 0 and in the conditional that decides to use
localizationKeys('billing.monthPerUnit', { unitName: ... }). Also update the
useMemo dependency list to include plan.hasBaseFee and either
plan.unitPrices?.length or plan.unitPrices to ensure recalculation when the
array changes, and apply the same non-empty guard before indexing inside
CardFeaturesList.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: 807ec30a-ded8-4044-a595-1f0364efcf56
📒 Files selected for processing (7)
packages/clerk-js/sandbox/scenarios/index.tspackages/clerk-js/sandbox/scenarios/pricing-table-sbb.tspackages/localizations/src/en-US.tspackages/shared/src/types/localization.tspackages/ui/src/components/PricingTable/PricingTable.tsxpackages/ui/src/components/PricingTable/PricingTableDefault.tsxpackages/ui/src/components/PricingTable/__tests__/PricingTable.test.tsx
✅ Files skipped from review due to trivial changes (1)
- packages/ui/src/components/PricingTable/PricingTable.tsx
| setClerkState({ | ||
| environment: EnvironmentService.MULTI_SESSION, | ||
| session, | ||
| user, | ||
| }); | ||
|
|
||
| const subscriptionHandler = http.get('https://*.clerk.accounts.dev/v1/me/billing/subscription', () => { | ||
| return HttpResponse.json({ | ||
| response: { | ||
| data: {}, | ||
| }, | ||
| }); | ||
| }); |
There was a problem hiding this comment.
This signed-in sandbox scenario won't actually show the pricing table.
The scenario authenticates a user and then answers billing/subscription with an empty payload. In this PR's own PricingTable visibility tests, signed-in users without a subscription render no plans, so pricing-table-sbb is likely to come up blank instead of exercising the new seat-based states. Either return a subscription shape that keeps plans visible or make this scenario unauthenticated.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/clerk-js/sandbox/scenarios/pricing-table-sbb.ts` around lines 65 -
77, The scenario authenticates via
setClerkState(EnvironmentService.MULTI_SESSION, session, user) but the mocked
subscriptionHandler
(http.get('https://*.clerk.accounts.dev/v1/me/billing/subscription')) returns an
empty data object so the PricingTable renders no plans; fix by returning a
realistic subscription shape in subscriptionHandler.response.response.data that
matches the pricing-table visibility tests (include active plan/tiers and seat
information) so plans remain visible, or alternatively remove the
setClerkState/login to make this scenario unauthenticated and keep the empty
subscription response—update the mock in subscriptionHandler or the
authentication setup accordingly.
packages/ui/src/components/PricingTable/PricingTableDefault.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/msw/request-handlers.ts (1)
1109-1137:⚠️ Potential issue | 🔴 CriticalInconsistent response shape across branches in the same handler.
The first branch (lines 1116-1121) now wraps data in a
responseenvelope, but the fallback branches (lines 1126-1131 and 1133-1136) still return the flat{ data, total_count }structure. This will cause unpredictable API responses depending on which branch executes.Proposed fix to make all branches consistent
// Fall back to current membership if it matches if (currentMembership && currentOrganization?.id === orgId) { return createNoStoreResponse({ - data: [SessionService.serialize(currentMembership)], - total_count: 1, + response: { + data: [SessionService.serialize(currentMembership)], + total_count: 1, + }, }); } return createNoStoreResponse({ - data: [], - total_count: 0, + response: { + data: [], + total_count: 0, + }, });🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/msw/request-handlers.ts` around lines 1109 - 1137, The handler registered with http.get for '*/v1/organizations/:orgId/memberships*' returns inconsistent shapes: the first branch returns createNoStoreResponse({ response: { data, total_count } }) while the fallback branches return createNoStoreResponse({ data, total_count }); make all branches return the same envelope by updating the fallback returns to wrap their payload in the same response field (i.e., use createNoStoreResponse({ response: { data: [SessionService.serialize(currentMembership)], total_count: 1 } }) and createNoStoreResponse({ response: { data: [], total_count: 0 } })), ensuring consistency with SessionService.serialize, currentUser, currentMembership and currentOrganization usage.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/ui/src/components/OrganizationProfile/OrganizationMembers.tsx`:
- Around line 179-217: The outer Col (elementDescriptor={descriptors.page})
currently lacks positioning, so the inner Box (the seat usage bar using
position: 'absolute') is not anchored correctly; fix this by adding sx={{
position: 'relative' }} to the Col component (the one with
elementDescriptor={descriptors.page} and gap={2}) so the absolute-positioned Box
is positioned relative to that page container.
---
Outside diff comments:
In `@packages/msw/request-handlers.ts`:
- Around line 1109-1137: The handler registered with http.get for
'*/v1/organizations/:orgId/memberships*' returns inconsistent shapes: the first
branch returns createNoStoreResponse({ response: { data, total_count } }) while
the fallback branches return createNoStoreResponse({ data, total_count }); make
all branches return the same envelope by updating the fallback returns to wrap
their payload in the same response field (i.e., use createNoStoreResponse({
response: { data: [SessionService.serialize(currentMembership)], total_count: 1
} }) and createNoStoreResponse({ response: { data: [], total_count: 0 } })),
ensuring consistency with SessionService.serialize, currentUser,
currentMembership and currentOrganization usage.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: ASSERTIVE
Plan: Pro
Run ID: 57e44511-254b-488b-8af5-a6266ed6f647
📒 Files selected for processing (6)
packages/clerk-js/sandbox/scenarios/index.tspackages/clerk-js/sandbox/scenarios/org-profile-seat-limit.tspackages/localizations/src/en-US.tspackages/msw/request-handlers.tspackages/shared/src/types/localization.tspackages/ui/src/components/OrganizationProfile/OrganizationMembers.tsx
| {canReadMemberships && !!memberships?.count && organization && organization.maxAllowedMemberships > 0 ? ( | ||
| <Box | ||
| sx={theme => ({ | ||
| position: 'absolute', | ||
| bottom: 0, | ||
| left: 0, | ||
| right: 0, | ||
| backgroundColor: theme.colors.$colorBackground, | ||
| borderTop: `1px solid ${theme.colors.$borderAlpha100}`, | ||
| paddingInline: theme.space.$4, | ||
| height: theme.space.$13, | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| })} | ||
| > | ||
| <Text | ||
| sx={t => ({ | ||
| display: 'inline-flex', | ||
| alignItems: 'center', | ||
| gap: t.space.$2, | ||
| })} | ||
| > | ||
| <Icon | ||
| icon={Users} | ||
| size='md' | ||
| colorScheme='neutral' | ||
| /> | ||
| <Text | ||
| as='span' | ||
| colorScheme='inherit' | ||
| localizationKey={localizationKeys('organizationProfile.start.membershipSeatUsageLabel', { | ||
| count: memberships.count + (invitations?.count ?? 0), | ||
| limit: organization.maxAllowedMemberships, | ||
| })} | ||
| /> | ||
| </Text> | ||
| </Box> | ||
| ) : null} |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check if the page descriptor or Col component applies position: relative
echo "=== Checking descriptors.page definition ==="
rg -n "page\s*[:=]" packages/ui/src/customizables/elementDescriptors.ts -A 3
echo "=== Checking Col component default styles ==="
ast-grep --pattern $'const Col = $_($$$)'
rg -n "position.*relative" packages/ui/src/primitives/Col.tsx packages/ui/src/customizables/ -l 2>/dev/null || echo "No direct matches found"
echo "=== Checking if profilePage or page applies relative positioning ==="
rg -nP "profilePage|\.page" packages/ui/src/styledSystem/ packages/ui/src/customizables/ -A 2Repository: clerk/javascript
Length of output: 568
🏁 Script executed:
# Read the context around line 179 to see the parent container structure
sed -n '150,220p' packages/ui/src/components/OrganizationProfile/OrganizationMembers.tsx | cat -n
# Also check if there's a container div or Col with position: relative
rg -n "position.*relative" packages/ui/src/components/OrganizationProfile/OrganizationMembers.tsx
# Check the full file structure to understand parent containers
wc -l packages/ui/src/components/OrganizationProfile/OrganizationMembers.tsxRepository: clerk/javascript
Length of output: 2947
🏁 Script executed:
# Read the first 100 lines to see the outer Col definition and its sx prop
head -n 100 packages/ui/src/components/OrganizationProfile/OrganizationMembers.tsx | cat -nRepository: clerk/javascript
Length of output: 4749
🏁 Script executed:
# Check the descriptors.page definition in elementDescriptors.ts
grep -n "descriptors.page\|'page'" packages/ui/src/customizables/elementDescriptors.ts -B 2 -A 10 | head -n 40
# Check Col component implementation
cat -n packages/ui/src/primitives/Col.tsx | head -n 60
# Search for position: relative in makeCustomizable or Col styling
rg -n "position.*relative" packages/ui/src/ -t ts -t tsx | grep -i "col\|customizable" | head -n 20Repository: clerk/javascript
Length of output: 463
🏁 Script executed:
# Find where Primitives is imported from in customizables/index.ts
grep -n "Primitives" packages/ui/src/customizables/index.ts -B 5 -A 5
# Find Col definition
fd "\.tsx?$" packages/ui/src/ | xargs grep -l "export.*Col\s*=" | grep -v node_modules | head -n 10
# Search for Col component or primitive
rg -n "^export const Col|^const Col\s*=" packages/ui/src/ -t ts -t tsx | head -n 10Repository: clerk/javascript
Length of output: 4823
🏁 Script executed:
# Find all files in primitives directory
ls -la packages/ui/src/primitives/
# Search for Col implementation
grep -r "export.*Col" packages/ui/src/primitives/ --include="*.ts" --include="*.tsx"
# Check the structure of Flex.tsx since it was found
head -n 80 packages/ui/src/primitives/Flex.tsxRepository: clerk/javascript
Length of output: 5085
🏁 Script executed:
# Get the rest of Flex.tsx to see the Col definition
tail -n 50 packages/ui/src/primitives/Flex.tsx
# Also check Box.tsx to see if it applies position: relative
cat packages/ui/src/primitives/Box.tsxRepository: clerk/javascript
Length of output: 2257
🏁 Script executed:
# Final verification: confirm the outer Col structure around the absolute Box
sed -n '52,70p' packages/ui/src/components/OrganizationProfile/OrganizationMembers.tsx | cat -nRepository: clerk/javascript
Length of output: 765
Add position: relative to the outer Col to ensure the absolute-positioned seat usage bar is positioned correctly.
The Box with position: absolute at lines 179-217 is a direct child of the outer Col (with elementDescriptor={descriptors.page}), which currently has no position: relative. Without it, the bar will be positioned relative to the nearest positioned ancestor or the viewport rather than the page container, causing incorrect layout.
Add sx={{ position: 'relative' }} to the outer Col at line 53:
<Col
elementDescriptor={descriptors.page}
gap={2}
sx={{ position: 'relative' }}
>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/ui/src/components/OrganizationProfile/OrganizationMembers.tsx`
around lines 179 - 217, The outer Col (elementDescriptor={descriptors.page})
currently lacks positioning, so the inner Box (the seat usage bar using
position: 'absolute') is not anchored correctly; fix this by adding sx={{
position: 'relative' }} to the Col component (the one with
elementDescriptor={descriptors.page} and gap={2}) so the absolute-positioned Box
is positioned relative to that page container.
There was a problem hiding this comment.
♻️ Duplicate comments (1)
packages/ui/src/components/PricingTable/PricingTableDefault.tsx (1)
317-323:⚠️ Potential issue | 🔴 CriticalGuard
unitPricesfor non-empty arrays before indexing.Line 319 and Line 524 still access
plan.unitPrices[0]after a truthiness check only.unitPrices: []is valid for the new plan shape, so a no-base-fee plan with an empty array will throw during render.Suggested fix
- if (!plan.hasBaseFee && plan.unitPrices) { + if (!plan.hasBaseFee && plan.unitPrices?.length) { return localizationKeys('billing.monthPerUnit', { unitName: plan.unitPrices[0].name }); } ... - {plan.unitPrices && (plan.hasBaseFee || plan.unitPrices[0].tiers.length > 0) ? ( + {plan.unitPrices?.length && (plan.hasBaseFee || plan.unitPrices[0].tiers.length > 0) ? ( <CardFeaturesListSeatCost plan={plan} /> ) : null}Also applies to: 524-526
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/ui/src/components/PricingTable/PricingTableDefault.tsx` around lines 317 - 323, The code indexes plan.unitPrices[0] after only a truthiness check, which breaks when unitPrices is an empty array; update the guards in feePeriodText (and any other spots that access plan.unitPrices[0]) to ensure plan.unitPrices.length > 0 before indexing, and fall back to an appropriate default (e.g., a generic unitName or the month/year localization) when the array is empty. Locate occurrences by searching for plan.unitPrices[0] (notably in the feePeriodText useMemo) and add the length check to the conditional and dependency array as needed.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@packages/ui/src/components/PricingTable/PricingTableDefault.tsx`:
- Around line 317-323: The code indexes plan.unitPrices[0] after only a
truthiness check, which breaks when unitPrices is an empty array; update the
guards in feePeriodText (and any other spots that access plan.unitPrices[0]) to
ensure plan.unitPrices.length > 0 before indexing, and fall back to an
appropriate default (e.g., a generic unitName or the month/year localization)
when the array is empty. Locate occurrences by searching for plan.unitPrices[0]
(notably in the feePeriodText useMemo) and add the length check to the
conditional and dependency array as needed.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: ASSERTIVE
Plan: Pro
Run ID: 9a6931e5-cb5f-4a9e-8d5c-eabb103c9ab0
📒 Files selected for processing (8)
packages/clerk-js/sandbox/scenarios/index.tspackages/clerk-js/src/core/resources/BillingPlan.tspackages/localizations/src/en-US.tspackages/shared/src/types/billing.tspackages/shared/src/types/json.tspackages/shared/src/types/localization.tspackages/ui/src/components/Checkout/CheckoutForm.tsxpackages/ui/src/components/PricingTable/PricingTableDefault.tsx
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/clerk-js/sandbox/scenarios/index.ts`:
- Around line 3-5: This change added new barrel re-exports (CheckoutSeats,
OrgProfileSeatLimit, PricingTableSBB) to the sandbox scenarios index.ts which
violates the rule banning index.ts barrels and can cause circular deps; remove
the three export lines from index.ts and instead update any consumers to import
CheckoutSeats, OrgProfileSeatLimit, and PricingTableSBB directly from their
specific files ('./checkout-seats', './org-profile-seat-limit',
'./pricing-table-sbb') so each consumer references the concrete module rather
than the barrel.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: ASSERTIVE
Plan: Pro
Run ID: 620bc863-b2e9-443c-9c43-216c1297d078
📒 Files selected for processing (4)
packages/clerk-js/sandbox/scenarios/checkout-seats.tspackages/clerk-js/sandbox/scenarios/index.tspackages/ui/src/components/Checkout/CheckoutForm.tsxpackages/ui/src/elements/LineItems.tsx
Code reviewClaude review found 2 issues:
javascript/packages/ui/src/components/PricingTable/PricingTableDefault.tsx Lines 331 to 337 in 2390e62 javascript/packages/ui/src/components/PricingTable/PricingTableDefault.tsx Lines 537 to 540 in 2390e62
javascript/packages/ui/src/utils/billingPlanSeats.ts Lines 6 to 18 in 2390e62 javascript/packages/ui/src/components/Checkout/CheckoutForm.tsx Lines 53 to 55 in 2390e62 |
Our API doesn't respond with empty arrays, but there's no harm in adding additional length checks just to be safe!
yup, this is just an artifact of writing the mock data before the actual API implementation. updated!
This was intentional as the |
wobsoriano
left a comment
wobsoriano
left a comment
There was a problem hiding this comment.
Looks good overall! The separation of seat logic into billingPlanSeats.ts and sandbox scenarios are nice 👀 Left a few comments but nothing really blocking
packages/ui/src/components/PricingTable/PricingTableDefault.tsx
Outdated
Show resolved
Hide resolved
| localizationKey={localizationKeys('organizationProfile.start.membershipSeatUsageLabel', { | ||
| count: memberships.count + (invitations?.count ?? 0), | ||
| limit: organization.maxAllowedMemberships, |
There was a problem hiding this comment.
❓ Should this use an unfiltered organization-level member total instead of memberships.count I think with search active, memberships.count becomes the filtered result count, so the seat usage banner can show something like 1 of 25 instead of the real usage (correct me if Im wrong 🙏🏼 )
There was a problem hiding this comment.
really good catch! you're indeed correct. I'll look into how we should obtain an unfiltered count of the organization members.
| descriptionElements.push(localizationKeys('billing.billedAnnually')); | ||
| } | ||
| const seatUnitPrice = getSeatUnitPrice(plan); | ||
| if (seatUnitPrice && seatUnitPrice.tiers.length === 1 && seatUnitPrice.tiers[0].feePerBlock.amount === 0) { |
There was a problem hiding this comment.
consider a helper that codifies the intent:
if(isIncludedOrUnlimitedSeats(seatUnitPrice))
| const isBelowLimit = useMemo(() => { | ||
| if (!organization) { | ||
| return false; | ||
| } | ||
|
|
||
| // A value of 0 means unlimited memberships, thus the organization is always below the limit | ||
| if (organization.maxAllowedMemberships === 0) { | ||
| return true; | ||
| } | ||
|
|
||
| return organization.membersCount + organization.pendingInvitationsCount < organization.maxAllowedMemberships; | ||
| }, [organization]); |
There was a problem hiding this comment.
nit: useMemo() isn't doing much for us here, simple computation
| } | ||
|
|
||
| const formatTierFee = (tier: BillingPlanUnitPrice['tiers'][number]) => | ||
| `${tier.feePerBlock.currencySymbol}${normalizeFormatted(tier.feePerBlock.amountFormatted)}`; |
There was a problem hiding this comment.
❓ do we already have a formatting helper that deals w/ symbols?
4 participants
Description
This PR updates our components to support rendering details for seat-based billing plans. Seat-based plans support two mechanisms of pricing: seat limits, and per-seat costs. This PR implements across-the-board support for seat limits, and partial support for per-seat costs (in the PricingTable component).
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit
New Features
UI
Localization
Tests
Chores