From a2ffb79bd2b435637253789d56184d1897a5cde3 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Fri, 25 Apr 2025 13:18:15 +0300
Subject: [PATCH 1/2] fix(clerk-js): Invalidate invoices after checkout

---
 .changeset/nasty-emus-give.md                    |  5 +++++
 .../src/ui/contexts/components/Invoices.tsx      |  5 +++--
 .../src/ui/contexts/components/Plans.tsx         | 16 ++++++++++++++--
 3 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/nasty-emus-give.md

diff --git a/.changeset/nasty-emus-give.md b/.changeset/nasty-emus-give.md
new file mode 100644
index 00000000000..fe7d87687dd
--- /dev/null
+++ b/.changeset/nasty-emus-give.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Invalidate invoices after successful checkout.
diff --git a/packages/clerk-js/src/ui/contexts/components/Invoices.tsx b/packages/clerk-js/src/ui/contexts/components/Invoices.tsx
index 681d38e81ac..352318692e9 100644
--- a/packages/clerk-js/src/ui/contexts/components/Invoices.tsx
+++ b/packages/clerk-js/src/ui/contexts/components/Invoices.tsx
@@ -1,4 +1,4 @@
-import { useClerk, useOrganization } from '@clerk/shared/react';
+import { useClerk, useOrganization, useUser } from '@clerk/shared/react';
 import type { __experimental_CommerceSubscriberType } from '@clerk/types';
 import type { ReactNode } from 'react';
 import { createContext, useContext } from 'react';
@@ -17,12 +17,13 @@ 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 } : {}) },
     undefined,
-    'commerce-invoices',
+    `commerce-invoices-${user?.id}`,
   );
   const { data: invoices, total_count: totalCount } = data || { data: [], totalCount: 0 };
 
diff --git a/packages/clerk-js/src/ui/contexts/components/Plans.tsx b/packages/clerk-js/src/ui/contexts/components/Plans.tsx
index 5e112a540cf..5e396408c6c 100644
--- a/packages/clerk-js/src/ui/contexts/components/Plans.tsx
+++ b/packages/clerk-js/src/ui/contexts/components/Plans.tsx
@@ -1,4 +1,4 @@
-import { useClerk, useOrganization } from '@clerk/shared/react';
+import { useClerk, useOrganization, useUser } from '@clerk/shared/react';
 import type {
   __experimental_CommercePlanResource,
   __experimental_CommerceSubscriberType,
@@ -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 (

From f675fe0aeda9b6cf6bd76f386da94d2cafe6caae Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Fri, 25 Apr 2025 13:22:03 +0300
Subject: [PATCH 2/2] fix(clerk-js): Invalidate invoices after checkout

---
 packages/clerk-js/src/ui/contexts/components/Invoices.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/clerk-js/src/ui/contexts/components/Invoices.tsx b/packages/clerk-js/src/ui/contexts/components/Invoices.tsx
index fbc3866ccf0..352318692e9 100644
--- a/packages/clerk-js/src/ui/contexts/components/Invoices.tsx
+++ b/packages/clerk-js/src/ui/contexts/components/Invoices.tsx
@@ -19,7 +19,6 @@ export const InvoicesContextProvider = ({
   const { organization } = useOrganization();
   const { user } = useUser();
 
-  const { user } = useUser();
   const { data, isLoading, revalidate } = useFetch(
     __experimental_commerce?.__experimental_billing.getInvoices,
     { ...(subscriberType === 'org' ? { orgId: organization?.id } : {}) },