From 5c0539b1d095367fb54ad6a7658989e6b319de26 Mon Sep 17 00:00:00 2001 From: Keiran Flanigan Date: Sat, 12 Apr 2025 08:45:29 -0700 Subject: [PATCH 1/3] fix(clerk-js): Invalidate cached checkout --- .changeset/violet-jobs-brush.md | 5 +++++ .../core/modules/commerce/CommerceBilling.ts | 4 +++- .../ui/components/Checkout/CheckoutPage.tsx | 7 ++++++- packages/clerk-js/src/ui/hooks/useCheckout.ts | 20 ++++++++++++++----- 4 files changed, 29 insertions(+), 7 deletions(-) create mode 100644 .changeset/violet-jobs-brush.md diff --git a/.changeset/violet-jobs-brush.md b/.changeset/violet-jobs-brush.md new file mode 100644 index 00000000000..f0ed3f7a19f --- /dev/null +++ b/.changeset/violet-jobs-brush.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Invalidate cached checkout on checkout drawer unmount diff --git a/packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts b/packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts index aacab3ecea0..613b9548522 100644 --- a/packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts +++ b/packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts @@ -61,6 +61,8 @@ export class __experimental_CommerceBilling implements __experimental_CommerceBi }) )?.response as unknown as __experimental_CommerceCheckoutJSON; - return new __experimental_CommerceCheckout(json); + const checkout = new __experimental_CommerceCheckout(json); + checkout.pathRoot = orgId ? `/organizations/${orgId}/commerce/checkouts` : `/me/commerce/checkouts`; + return checkout; }; } diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx index d8cda15a918..fcd71de2ac6 100644 --- a/packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx +++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx @@ -1,4 +1,5 @@ import type { __experimental_CheckoutProps, __experimental_CommerceCheckoutResource } from '@clerk/types'; +import { useEffect } from 'react'; import { Alert, Spinner } from '../../customizables'; import { useCheckout } from '../../hooks'; @@ -8,12 +9,16 @@ import { CheckoutForm } from './CheckoutForm'; export const CheckoutPage = (props: __experimental_CheckoutProps) => { const { planId, planPeriod, subscriberType, onSubscriptionComplete } = props; - const { checkout, updateCheckout, isLoading } = useCheckout({ + const { checkout, isLoading, invalidate, updateCheckout } = useCheckout({ planId, planPeriod, subscriberType, }); + useEffect(() => { + return invalidate; + }, []); + const onCheckoutComplete = (newCheckout: __experimental_CommerceCheckoutResource) => { updateCheckout(newCheckout); onSubscriptionComplete?.(); diff --git a/packages/clerk-js/src/ui/hooks/useCheckout.ts b/packages/clerk-js/src/ui/hooks/useCheckout.ts index 80b09fb79ba..6f190c99414 100644 --- a/packages/clerk-js/src/ui/hooks/useCheckout.ts +++ b/packages/clerk-js/src/ui/hooks/useCheckout.ts @@ -10,11 +10,20 @@ export const useCheckout = (props: __experimental_CheckoutProps) => { const { organization } = useOrganization(); const [currentCheckout, setCurrentCheckout] = useState<__experimental_CommerceCheckoutResource | null>(null); - const { data: initialCheckout, isLoading } = useFetch(__experimental_commerce?.__experimental_billing.startCheckout, { - planId, - planPeriod, - ...(subscriberType === 'org' ? { orgId: organization?.id } : {}), - }); + const { + data: initialCheckout, + isLoading, + invalidate, + } = useFetch( + __experimental_commerce?.__experimental_billing.startCheckout, + { + planId, + planPeriod, + ...(subscriberType === 'org' ? { orgId: organization?.id } : {}), + }, + undefined, + 'commerce-checkout', + ); useEffect(() => { if (initialCheckout && !currentCheckout) { @@ -30,5 +39,6 @@ export const useCheckout = (props: __experimental_CheckoutProps) => { checkout: currentCheckout || initialCheckout, updateCheckout, isLoading, + invalidate, }; }; From 616dbf0f534b06663f4e867abaffecefbba87801 Mon Sep 17 00:00:00 2001 From: Keiran Flanigan Date: Sat, 12 Apr 2025 08:49:44 -0700 Subject: [PATCH 2/3] bundle bump --- packages/clerk-js/bundlewatch.config.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/clerk-js/bundlewatch.config.json b/packages/clerk-js/bundlewatch.config.json index 38da23426e4..c19ac6ba739 100644 --- a/packages/clerk-js/bundlewatch.config.json +++ b/packages/clerk-js/bundlewatch.config.json @@ -1,7 +1,7 @@ { "files": [ { "path": "./dist/clerk.js", "maxSize": "590kB" }, - { "path": "./dist/clerk.browser.js", "maxSize": "73.64KB" }, + { "path": "./dist/clerk.browser.js", "maxSize": "73.67KB" }, { "path": "./dist/clerk.headless*.js", "maxSize": "55KB" }, { "path": "./dist/ui-common*.js", "maxSize": "99KB" }, { "path": "./dist/vendors*.js", "maxSize": "36KB" }, From 0bcc485bcd2d7c7a894ab7b33526db05db37a3f6 Mon Sep 17 00:00:00 2001 From: Keiran Flanigan Date: Sat, 12 Apr 2025 15:27:17 -0700 Subject: [PATCH 3/3] feedback update --- .changeset/violet-jobs-brush.md | 2 +- .../clerk-js/src/core/modules/commerce/CommerceBilling.ts | 4 +--- packages/clerk-js/src/core/resources/CommerceCheckout.ts | 3 ++- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/.changeset/violet-jobs-brush.md b/.changeset/violet-jobs-brush.md index f0ed3f7a19f..d12713c36d3 100644 --- a/.changeset/violet-jobs-brush.md +++ b/.changeset/violet-jobs-brush.md @@ -2,4 +2,4 @@ '@clerk/clerk-js': patch --- -Invalidate cached checkout on checkout drawer unmount +Bug fix: Invalidate cached checkout on checkout drawer unmount diff --git a/packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts b/packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts index 613b9548522..4166a0b9d91 100644 --- a/packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts +++ b/packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts @@ -61,8 +61,6 @@ export class __experimental_CommerceBilling implements __experimental_CommerceBi }) )?.response as unknown as __experimental_CommerceCheckoutJSON; - const checkout = new __experimental_CommerceCheckout(json); - checkout.pathRoot = orgId ? `/organizations/${orgId}/commerce/checkouts` : `/me/commerce/checkouts`; - return checkout; + return new __experimental_CommerceCheckout(json, orgId); }; } diff --git a/packages/clerk-js/src/core/resources/CommerceCheckout.ts b/packages/clerk-js/src/core/resources/CommerceCheckout.ts index e488905a6c2..bd59b6276fd 100644 --- a/packages/clerk-js/src/core/resources/CommerceCheckout.ts +++ b/packages/clerk-js/src/core/resources/CommerceCheckout.ts @@ -27,9 +27,10 @@ export class __experimental_CommerceCheckout extends BaseResource implements __e subscription?: __experimental_CommerceSubscription; totals!: __experimental_CommerceTotals; - constructor(data: __experimental_CommerceCheckoutJSON) { + constructor(data: __experimental_CommerceCheckoutJSON, orgId?: string) { super(); this.fromJSON(data); + this.pathRoot = orgId ? `/organizations/${orgId}/commerce/checkouts` : `/me/commerce/checkouts`; } protected fromJSON(data: __experimental_CommerceCheckoutJSON | null): this {