fix(clerk-js): Invalidate cached checkout (#5602)

Author: aeliox

.changeset/violet-jobs-brush.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Bug fix: Invalidate cached checkout on checkout drawer unmount

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" },

packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts

@@ -61,6 +61,6 @@ export class __experimental_CommerceBilling implements __experimental_CommerceBi
       })
     )?.response as unknown as __experimental_CommerceCheckoutJSON;
 
-    return new __experimental_CommerceCheckout(json);
+    return new __experimental_CommerceCheckout(json, orgId);
   };
 }

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 {

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?.();

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,
   };
 };