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 9bca31e0c04..352318692e9 100644 --- a/packages/clerk-js/src/ui/contexts/components/Invoices.tsx +++ b/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 } : {}) }, diff --git a/packages/clerk-js/src/ui/contexts/components/Plans.tsx b/packages/clerk-js/src/ui/contexts/components/Plans.tsx index 6a01acb8e35..8cdf0b2d9d4 100644 --- a/packages/clerk-js/src/ui/contexts/components/Plans.tsx +++ b/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 (