From eb62b7acab76db93b80d86fc1b5b934203b8e40e Mon Sep 17 00:00:00 2001 From: panteliselef Date: Fri, 25 Apr 2025 18:22:04 +0300 Subject: [PATCH 1/4] fix(clerk-js): Checkout CTAs to not display payment of zero amount --- .changeset/upset-webs-stand.md | 5 +++ .changeset/witty-bikes-relate.md | 5 +++ .../ui/components/Checkout/CheckoutForm.tsx | 31 +++++++++++++------ packages/types/src/commerce.ts | 2 +- packages/types/src/json.ts | 2 +- 5 files changed, 33 insertions(+), 12 deletions(-) create mode 100644 .changeset/upset-webs-stand.md create mode 100644 .changeset/witty-bikes-relate.md diff --git a/.changeset/upset-webs-stand.md b/.changeset/upset-webs-stand.md new file mode 100644 index 00000000000..facbfa0f1d2 --- /dev/null +++ b/.changeset/upset-webs-stand.md @@ -0,0 +1,5 @@ +--- +'@clerk/types': patch +--- + +Update `checkout.totals.totalDueNow` to always be defined. diff --git a/.changeset/witty-bikes-relate.md b/.changeset/witty-bikes-relate.md new file mode 100644 index 00000000000..cc19e519e17 --- /dev/null +++ b/.changeset/witty-bikes-relate.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Update the text in Checkout buttons from "Pay $0" to "Finish Checkout". diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx index 8b089173978..4c7199db8e6 100644 --- a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx +++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx @@ -169,7 +169,7 @@ const CheckoutFormElements = ({ @@ -192,12 +192,17 @@ const CheckoutFormElements = ({ 0 + ? localizationKeys( + 'userProfile.__experimental_billingPage.paymentSourcesSection.formButtonPrimary__pay', + { + amount: `${checkout.totals.totalDueNow.currencySymbol}${checkout.totals.totalDueNow.amountFormatted}`, + }, + ) + : 'Finish Checkout' + } /> @@ -283,9 +288,15 @@ const PaymentSourceMethods = ({ }} isLoading={isSubmitting} > - {/* TODO(@COMMERCE): needs localization */} - Pay {totalDueNow.currencySymbol} - {totalDueNow.amountFormatted} + {totalDueNow.amount > 0 ? ( + <> + {/* TODO(@COMMERCE): needs localization */} + Pay {totalDueNow.currencySymbol} + {totalDueNow.amountFormatted} + + ) : ( + 'Finish Checkout' + )} ); diff --git a/packages/types/src/commerce.ts b/packages/types/src/commerce.ts index d7a6a47865c..263612d2642 100644 --- a/packages/types/src/commerce.ts +++ b/packages/types/src/commerce.ts @@ -146,7 +146,7 @@ export interface __experimental_CommerceTotals { subtotal: __experimental_CommerceMoney; grandTotal: __experimental_CommerceMoney; taxTotal: __experimental_CommerceMoney; - totalDueNow?: __experimental_CommerceMoney; + totalDueNow: __experimental_CommerceMoney; } export type __experimental_CreateCheckoutParams = WithOptionalOrgType<{ diff --git a/packages/types/src/json.ts b/packages/types/src/json.ts index 973a8550a04..789a4cc497f 100644 --- a/packages/types/src/json.ts +++ b/packages/types/src/json.ts @@ -674,7 +674,7 @@ export interface __experimental_CommerceTotalsJSON { grand_total: __experimental_CommerceMoneyJSON; subtotal: __experimental_CommerceMoneyJSON; tax_total: __experimental_CommerceMoneyJSON; - total_due_now?: __experimental_CommerceMoneyJSON; + total_due_now: __experimental_CommerceMoneyJSON; } export interface __experimental_CommerceCheckoutJSON extends ClerkResourceJSON { From 4e0a41ba3686ffea245c8e22513d317e12333af8 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Fri, 25 Apr 2025 18:54:45 +0300 Subject: [PATCH 2/4] patch --- packages/clerk-js/src/utils/commerce.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/clerk-js/src/utils/commerce.ts b/packages/clerk-js/src/utils/commerce.ts index ed365850607..a3868a1401c 100644 --- a/packages/clerk-js/src/utils/commerce.ts +++ b/packages/clerk-js/src/utils/commerce.ts @@ -19,6 +19,6 @@ export const commerceTotalsFromJSON = (data: __experimental_CommerceTotalsJSON): grandTotal: commerceMoneyFromJSON(data.grand_total), subtotal: commerceMoneyFromJSON(data.subtotal), taxTotal: commerceMoneyFromJSON(data.tax_total), - totalDueNow: data.total_due_now ? commerceMoneyFromJSON(data.total_due_now) : undefined, + totalDueNow: commerceMoneyFromJSON(data.total_due_now), }; }; From 989315443928fc1dfe9d36b42d69ce2555b6da02 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Fri, 25 Apr 2025 19:16:40 +0300 Subject: [PATCH 3/4] Apply suggestions from code review --- packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx index 4c7199db8e6..6c5837fcd9f 100644 --- a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx +++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx @@ -201,7 +201,7 @@ const CheckoutFormElements = ({ amount: `${checkout.totals.totalDueNow.currencySymbol}${checkout.totals.totalDueNow.amountFormatted}`, }, ) - : 'Finish Checkout' + : 'Finish checkout' } /> @@ -295,7 +295,7 @@ const PaymentSourceMethods = ({ {totalDueNow.amountFormatted} ) : ( - 'Finish Checkout' + 'Finish checkout' )} From 627cc1a0e5be8c4848f1c729b8d60e16d35486b1 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Fri, 25 Apr 2025 19:39:19 +0300 Subject: [PATCH 4/4] Apply suggestions from code review --- .changeset/witty-bikes-relate.md | 2 +- packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.changeset/witty-bikes-relate.md b/.changeset/witty-bikes-relate.md index cc19e519e17..384e3218921 100644 --- a/.changeset/witty-bikes-relate.md +++ b/.changeset/witty-bikes-relate.md @@ -2,4 +2,4 @@ '@clerk/clerk-js': patch --- -Update the text in Checkout buttons from "Pay $0" to "Finish Checkout". +Update the text in Checkout buttons from "Pay $0" to "Subscribe". diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx index 6c5837fcd9f..a453d3efbcd 100644 --- a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx +++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx @@ -201,7 +201,7 @@ const CheckoutFormElements = ({ amount: `${checkout.totals.totalDueNow.currencySymbol}${checkout.totals.totalDueNow.amountFormatted}`, }, ) - : 'Finish checkout' + : 'Subscribe' } /> @@ -295,7 +295,7 @@ const PaymentSourceMethods = ({ {totalDueNow.amountFormatted} ) : ( - 'Finish checkout' + 'Subscribe' )}