fix(clerk-js): Invalidate invoices after checkout

.changeset/nasty-emus-give.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Invalidate invoices after successful checkout.

packages/clerk-js/src/ui/contexts/components/Invoices.tsx

@@ -17,8 +17,8 @@ export const InvoicesContextProvider = ({
 }) => {
   const { __experimental_commerce } = useClerk();
   const { organization } = useOrganization();
-
   const { user } = useUser();
+
   const { data, isLoading, revalidate } = useFetch(
     __experimental_commerce?.__experimental_billing.getInvoices,
     { ...(subscriberType === 'org' ? { orgId: organization?.id } : {}) },

packages/clerk-js/src/ui/contexts/components/Plans.tsx

@@ -39,7 +39,8 @@ export const PlansContextProvider = ({
   children: ReactNode;
 }) => {
   const { __experimental_commerce } = useClerk();
-
+  const { organization } = useOrganization();
+  const { user } = useUser();
   const {
     data: subscriptions,
     isLoading: isLoadingSubscriptions,
@@ -57,10 +58,21 @@ export const PlansContextProvider = ({
     'commerce-plans',
   );
 
+  // Revalidates the next time the hooks gets mounted
+  const { revalidate: revalidateInvoices } = useFetch(
+    undefined,
+    {
+      ...(subscriberType === 'org' ? { orgId: organization?.id } : {}),
+    },
+    undefined,
+    `commerce-invoices-${user?.id}`,
+  );
+
   const revalidate = () => {
     // Revalidate the plans and subscriptions
     revalidateSubscriptions();
     revalidatePlans();
+    revalidateInvoices();
   };
 
   return (