feat(js): support new checkout totals shape#8727
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: a81cd41 The changes in this PR will be included in the next version bump. This PR includes changesets to release 20 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/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@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: |
mauricioabreu
force-pushed
the
mauricio-antunes/bill-1791-aio-update-to-use-new-totals-shape
branch
from
a8cef20 to
34342c8
Compare
mauricioabreu
force-pushed
the
mauricio-antunes/bill-1791-aio-update-to-use-new-totals-shape
branch
from
34342c8 to
b8a9cd6
Compare
API Changes Report
Summary
@clerk/sharedCurrent version: 4.14.0 Subpath
|
📝 WalkthroughWalkthroughThis PR extends the billing checkout data model with new pricing breakdown information. It introduces types for prorated discount details and per-period renewal totals in both JSON DTO and runtime contracts, adds parsing logic to convert backend JSON to runtime objects, updates mock data generation to populate the new fields, and extends the CheckoutForm UI to render prorated discounts and renewal period summaries. Localization keys are added for the new UI elements. The changeset documents version updates across multiple Clerk packages. Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 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
🧹 Nitpick comments (1)
packages/clerk-js/src/utils/billing.ts (1)
59-128: ⚡ Quick winConsider adding tests to cover the new parsing logic.
This PR introduces new converter functions and extends existing ones to handle additional billing fields. According to the repository guidelines, tests should be added to ensure the JSON-to-runtime conversions work correctly for all the new fields:
discounts,totalDuePerPeriod,totalsDuePerPeriod, andbaseFee.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."
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/clerk-js/src/utils/billing.ts` around lines 59 - 128, The PR added new parsing logic (fields discounts, totalDuePerPeriod, totalsDuePerPeriod, baseFee) in billingTotalsFromJSON and new helpers billingPerPeriodTotalsFromJSON and billingCheckoutDiscountsFromJSON but no tests were added; add unit tests that exercise these converters by providing representative JSON inputs (including present/absent/null cases) and asserting the expected runtime objects for billingTotalsFromJSON, billingPerPeriodTotalsFromJSON and billingCheckoutDiscountsFromJSON (cover base_fee, discounts, total_due_per_period, totals_due_per_period, and null/undefined branches) so the new parsing paths are validated.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/ui/src/components/Checkout/CheckoutForm.tsx`:
- Around line 42-44: Add tests in the Checkout.test.tsx for the CheckoutForm
component covering the two new conditionals: showProratedDiscount and
showRenewalTotals. For showProratedDiscount (derived from
totals.discounts.proration.amount.amount) add one test where you pass totals
with a positive proration amount and assert the prorated-discount row renders,
and another where amount is zero/undefined and assert it does not render (use
the same label/text used in CheckoutForm to query). For showRenewalTotals
(derived from totals.totalsDuePerPeriod) add tests that pass
totals.totalsDuePerPeriod with differing grandTotal vs totalDueNow to assert the
“Renewal” subtotal + per-period total render when true and do not render when
false. Also add a small assertion to verify the borderTop styling applied to the
Renewal rows (e.g., check the className or inline style on the rendered rows) to
confirm the UI nit mentioned in the review.
---
Nitpick comments:
In `@packages/clerk-js/src/utils/billing.ts`:
- Around line 59-128: The PR added new parsing logic (fields discounts,
totalDuePerPeriod, totalsDuePerPeriod, baseFee) in billingTotalsFromJSON and new
helpers billingPerPeriodTotalsFromJSON and billingCheckoutDiscountsFromJSON but
no tests were added; add unit tests that exercise these converters by providing
representative JSON inputs (including present/absent/null cases) and asserting
the expected runtime objects for billingTotalsFromJSON,
billingPerPeriodTotalsFromJSON and billingCheckoutDiscountsFromJSON (cover
base_fee, discounts, total_due_per_period, totals_due_per_period, and
null/undefined branches) so the new parsing paths are validated.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: 77314e33-076e-4e82-8895-07732c07f6f9
📒 Files selected for processing (8)
.changeset/checkout-totals-new-shape.mdpackages/clerk-js/src/utils/billing.tspackages/localizations/src/en-US.tspackages/msw/BillingService.tspackages/shared/src/types/billing.tspackages/shared/src/types/json.tspackages/shared/src/types/localization.tspackages/ui/src/components/Checkout/CheckoutForm.tsx
mauricioabreu
force-pushed
the
mauricio-antunes/bill-1791-aio-update-to-use-new-totals-shape
branch
from
b8a9cd6 to
896b6b9
Compare
mauricioabreu
force-pushed
the
mauricio-antunes/bill-1791-aio-update-to-use-new-totals-shape
branch
from
896b6b9 to
f2c6a7a
Compare
There was a problem hiding this comment.
🧹 Nitpick comments (1)
.changeset/checkout-totals-new-shape.md (1)
11-14: ⚡ Quick winConsider varying sentence structure for readability.
Three consecutive bullet points begin with "Add", which can make the changelog slightly repetitive. Consider rephrasing for variety, e.g., "Introduces
discounts...", "ExposestotalsDuePerPeriod...", "IncludesbaseFee...".🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.changeset/checkout-totals-new-shape.md around lines 11 - 14, The changelog uses three consecutive bullets that all start with "Add", making it repetitive; update the entries for BillingCheckoutTotals / BillingCheckoutTotalsJSON (mentions discounts and BillingProrationDiscountDetail), totalsDuePerPeriod / totals_due_per_period (BillingPerPeriodTotals), totalDuePerPeriod / total_due_per_period, and baseFee / base_fee to vary sentence starters — e.g., change one or more "Add" lines to "Introduce", "Expose", or "Include" while preserving the same symbol names and descriptions (proration details, per-period totals structure, backwards-compatible totalDuePerPeriod, and top-level baseFee).
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In @.changeset/checkout-totals-new-shape.md:
- Around line 11-14: The changelog uses three consecutive bullets that all start
with "Add", making it repetitive; update the entries for BillingCheckoutTotals /
BillingCheckoutTotalsJSON (mentions discounts and
BillingProrationDiscountDetail), totalsDuePerPeriod / totals_due_per_period
(BillingPerPeriodTotals), totalDuePerPeriod / total_due_per_period, and baseFee
/ base_fee to vary sentence starters — e.g., change one or more "Add" lines to
"Introduce", "Expose", or "Include" while preserving the same symbol names and
descriptions (proration details, per-period totals structure,
backwards-compatible totalDuePerPeriod, and top-level baseFee).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: cfc05e67-6c43-41c2-bd9f-dcbfdd3485b4
📒 Files selected for processing (9)
.changeset/checkout-totals-new-shape.mdpackages/clerk-js/src/utils/billing.tspackages/localizations/src/en-US.tspackages/msw/BillingService.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/Checkout/__tests__/Checkout.test.tsx
✅ Files skipped from review due to trivial changes (1)
- packages/localizations/src/en-US.ts
🚧 Files skipped from review as they are similar to previous changes (7)
- packages/shared/src/types/billing.ts
- packages/ui/src/components/Checkout/CheckoutForm.tsx
- packages/clerk-js/src/utils/billing.ts
- packages/msw/BillingService.ts
- packages/shared/src/types/localization.ts
- packages/ui/src/components/Checkout/tests/Checkout.test.tsx
- packages/shared/src/types/json.ts
Add `discounts` (prorated seat discount + total), `totals_due_per_period` (full recurring renewal breakdown), `total_due_per_period`, and top-level `base_fee` to checkout totals. The top-level totals now reflect only what is actively being purchased, while `totals_due_per_period` conveys the recurring charge. Parse the new fields and surface the prorated discount and renewal totals in the checkout form
mauricioabreu
force-pushed
the
mauricio-antunes/bill-1791-aio-update-to-use-new-totals-shape
branch
from
f2c6a7a to
ca72a27
Compare
2 participants
Add
discounts(prorated seat discount + total),totals_due_per_period(full recurring renewal breakdown),total_due_per_period, and top-levelbase_feeto checkout totals. The top-level totals now reflect only what is actively being purchased, whiletotals_due_per_periodconveys the recurring charge. Parse the new fields and surface the prorated discount and renewal totals in the checkout formDescription
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change