fix(clerk-js): Always revalidate checkout checkout when drawer opens (#5798)

Author: octoper

.changeset/mighty-years-learn.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Always revalidate when checkout drawer opens

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, Box, localizationKeys, Spinner } from '../../customizables';
 import { Drawer, useDrawerContext } from '../../elements';
@@ -9,7 +10,7 @@ import { CheckoutForm } from './CheckoutForm';
 
 export const CheckoutPage = (props: __experimental_CheckoutProps) => {
   const { planId, planPeriod, subscriberType, onSubscriptionComplete } = props;
-  const { setIsOpen } = useDrawerContext();
+  const { setIsOpen, isOpen } = useDrawerContext();
 
   const { checkout, isLoading, invalidate, revalidate, updateCheckout, isMissingPayerEmail } = useCheckout({
     planId,
@@ -23,6 +24,12 @@ export const CheckoutPage = (props: __experimental_CheckoutProps) => {
     onSubscriptionComplete?.();
   };
 
+  useEffect(() => {
+    if (isOpen) {
+      revalidate();
+    }
+  }, [isOpen]);
+
   if (isLoading) {
     return (
       <Spinner