diff --git a/.changeset/shaky-seas-dream.md b/.changeset/shaky-seas-dream.md new file mode 100644 index 00000000000..87109eff393 --- /dev/null +++ b/.changeset/shaky-seas-dream.md @@ -0,0 +1,7 @@ +--- +'@clerk/localizations': patch +'@clerk/clerk-js': patch +'@clerk/types': patch +--- + +Add "Past Due" amount on checkout flow when applicable diff --git a/packages/clerk-js/bundlewatch.config.json b/packages/clerk-js/bundlewatch.config.json index 0adcde5ca77..24ae8062b1a 100644 --- a/packages/clerk-js/bundlewatch.config.json +++ b/packages/clerk-js/bundlewatch.config.json @@ -21,7 +21,7 @@ { "path": "./dist/waitlist*.js", "maxSize": "1.3KB" }, { "path": "./dist/keylessPrompt*.js", "maxSize": "6.5KB" }, { "path": "./dist/pricingTable*.js", "maxSize": "4.02KB" }, - { "path": "./dist/checkout*.js", "maxSize": "6.52KB" }, + { "path": "./dist/checkout*.js", "maxSize": "6.65KB" }, { "path": "./dist/paymentSources*.js", "maxSize": "9.06KB" }, { "path": "./dist/up-billing-page*.js", "maxSize": "3.0KB" }, { "path": "./dist/op-billing-page*.js", "maxSize": "3.0KB" }, diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx index fdd2087d7f4..8b2772ce395 100644 --- a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx +++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx @@ -31,6 +31,7 @@ export const CheckoutForm = ({ }) => { const { plan, planPeriod, totals, isImmediatePlanChange } = checkout; const showCredits = !!totals.credit?.amount && totals.credit.amount > 0; + const showPastDue = !!totals.pastDue?.amount && totals.pastDue.amount > 0; const showDowngradeInfo = !isImmediatePlanChange; return ( @@ -69,6 +70,12 @@ export const CheckoutForm = ({ )} + {showPastDue && ( + + + + + )} diff --git a/packages/clerk-js/src/utils/commerce.ts b/packages/clerk-js/src/utils/commerce.ts index ac39f166150..1430f752b34 100644 --- a/packages/clerk-js/src/utils/commerce.ts +++ b/packages/clerk-js/src/utils/commerce.ts @@ -30,6 +30,10 @@ export const commerceTotalsFromJSON =