diff --git a/.changeset/sharp-monkeys-live.md b/.changeset/sharp-monkeys-live.md new file mode 100644 index 00000000000..394b8933c70 --- /dev/null +++ b/.changeset/sharp-monkeys-live.md @@ -0,0 +1,7 @@ +--- +'@clerk/localizations': minor +'@clerk/clerk-js': minor +'@clerk/shared': minor +--- + +Add support for displaying proration and account credits on payment attempts and statements. diff --git a/packages/clerk-js/bundlewatch.config.json b/packages/clerk-js/bundlewatch.config.json index 8739f42128a..73138c36f87 100644 --- a/packages/clerk-js/bundlewatch.config.json +++ b/packages/clerk-js/bundlewatch.config.json @@ -1,6 +1,6 @@ { "files": [ - { "path": "./dist/clerk.js", "maxSize": "929KB" }, + { "path": "./dist/clerk.js", "maxSize": "930KB" }, { "path": "./dist/clerk.browser.js", "maxSize": "87KB" }, { "path": "./dist/clerk.legacy.browser.js", "maxSize": "129KB" }, { "path": "./dist/clerk.headless*.js", "maxSize": "67KB" }, diff --git a/packages/clerk-js/src/core/resources/BillingSubscription.ts b/packages/clerk-js/src/core/resources/BillingSubscription.ts index 3b80c7dbe66..ddcd083fdc5 100644 --- a/packages/clerk-js/src/core/resources/BillingSubscription.ts +++ b/packages/clerk-js/src/core/resources/BillingSubscription.ts @@ -1,4 +1,5 @@ import type { + BillingCredits, BillingMoneyAmount, BillingSubscriptionItemJSON, BillingSubscriptionItemResource, @@ -12,7 +13,7 @@ import type { import { unixEpochToDate } from '@/utils/date'; -import { billingMoneyAmountFromJSON } from '../../utils'; +import { billingCreditsFromJSON, billingMoneyAmountFromJSON } from '../../utils'; import { Billing } from '../modules/billing/namespace'; import { BaseResource, BillingPlan, DeletedObject } from './internal'; @@ -75,6 +76,7 @@ export class BillingSubscriptionItem extends BaseResource implements BillingSubs credit?: { amount: BillingMoneyAmount; }; + credits?: BillingCredits; isFreeTrial!: boolean; constructor(data: BillingSubscriptionItemJSON) { @@ -103,6 +105,8 @@ export class BillingSubscriptionItem extends BaseResource implements BillingSubs this.credit = data.credit && data.credit.amount ? { amount: billingMoneyAmountFromJSON(data.credit.amount) } : undefined; + this.credits = data.credits ? billingCreditsFromJSON(data.credits) : undefined; + this.isFreeTrial = this.withDefault(data.is_free_trial, false); return this; } diff --git a/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx b/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx index ca4671fd3ac..3cee693d74b 100644 --- a/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx +++ b/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx @@ -233,14 +233,26 @@ function PaymentAttemptBody({ subscriptionItem }: { subscriptionItem: BillingSub text={`${subscriptionItem.amount?.currencySymbol}${subscriptionItem.amount?.amountFormatted}`} /> - {subscriptionItem.credit && subscriptionItem.credit.amount.amount > 0 && ( - - - - - )} + {subscriptionItem.credits && + subscriptionItem.credits.proration && + subscriptionItem.credits.proration.amount.amount > 0 && ( + + + + + )} + {subscriptionItem.credits && + subscriptionItem.credits.payer && + subscriptionItem.credits.payer.appliedAmount.amount > 0 && ( + + + + + )} ); diff --git a/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx b/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx index c5571e4f7ef..d9ddb8fc602 100644 --- a/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx +++ b/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx @@ -137,12 +137,24 @@ export const StatementPage = () => { } /> - {item.subscriptionItem.credit && item.subscriptionItem.credit.amount.amount > 0 ? ( + {item.subscriptionItem.credits && + item.subscriptionItem.credits.proration && + item.subscriptionItem.credits.proration.amount.amount > 0 ? ( + ) : null} + {item.subscriptionItem.credits && + item.subscriptionItem.credits.payer && + item.subscriptionItem.credits.payer.appliedAmount.amount > 0 ? ( + ) : null} diff --git a/packages/clerk-js/src/utils/billing.ts b/packages/clerk-js/src/utils/billing.ts index 8c42f1a86fa..acdeb376016 100644 --- a/packages/clerk-js/src/utils/billing.ts +++ b/packages/clerk-js/src/utils/billing.ts @@ -18,7 +18,7 @@ export const billingMoneyAmountFromJSON = (data: BillingMoneyAmountJSON): Billin }; }; -const billingCreditsFromJSON = (data: BillingCreditsJSON): BillingCredits => { +export const billingCreditsFromJSON = (data: BillingCreditsJSON): BillingCredits => { return { proration: data.proration ? { diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts index 974df8cff69..2fb81fe0104 100644 --- a/packages/localizations/src/en-US.ts +++ b/packages/localizations/src/en-US.ts @@ -109,6 +109,8 @@ export const enUS: LocalizationResource = { totalDueAfterTrial: 'Total Due after trial ends in {{days}} days', }, credit: 'Credit', + prorationCredit: 'Prorated credit', + accountCredit: 'Account credit', creditRemainder: 'Credit for the remainder of your current subscription.', payerCreditRemainder: 'Credit from account balance.', defaultFreePlanActive: "You're currently on the Free plan", @@ -314,6 +316,7 @@ export const enUS: LocalizationResource = { empty: 'No statements to display', itemCaption__paidForPlan: 'Paid for {{plan}} {{period}} plan', itemCaption__proratedCredit: 'Prorated credit for partial usage of previous subscription', + itemCaption__payerCredit: 'Credit from account balance', itemCaption__subscribedAndPaidForPlan: 'Subscribed and paid for {{plan}} {{period}} plan', notFound: 'Statement not found', tableHeader__amount: 'Amount', @@ -1144,6 +1147,7 @@ export const enUS: LocalizationResource = { empty: 'No statements to display', itemCaption__paidForPlan: 'Paid for {{plan}} {{period}} plan', itemCaption__proratedCredit: 'Prorated credit for partial usage of previous subscription', + itemCaption__payerCredit: 'Credit from account balance', itemCaption__subscribedAndPaidForPlan: 'Subscribed and paid for {{plan}} {{period}} plan', notFound: 'Statement not found', tableHeader__amount: 'Amount', diff --git a/packages/shared/src/types/billing.ts b/packages/shared/src/types/billing.ts index a7ba45ae532..37dbd50dd6a 100644 --- a/packages/shared/src/types/billing.ts +++ b/packages/shared/src/types/billing.ts @@ -548,6 +548,7 @@ export interface BillingSubscriptionItemResource extends ClerkResource { */ amount: BillingMoneyAmount; }; + credits?: BillingCredits; /** * A function to cancel the subscription item. Accepts the following parameters: *