diff --git a/.changeset/floppy-cities-warn.md b/.changeset/floppy-cities-warn.md new file mode 100644 index 00000000000..beb83dc620a --- /dev/null +++ b/.changeset/floppy-cities-warn.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Bug fix: on session switch, revalidate cached commerce resources. diff --git a/packages/clerk-js/bundlewatch.config.json b/packages/clerk-js/bundlewatch.config.json index de33e194086..3049651f4f9 100644 --- a/packages/clerk-js/bundlewatch.config.json +++ b/packages/clerk-js/bundlewatch.config.json @@ -19,7 +19,7 @@ { "path": "./dist/onetap*.js", "maxSize": "1KB" }, { "path": "./dist/waitlist*.js", "maxSize": "1.3KB" }, { "path": "./dist/keylessPrompt*.js", "maxSize": "6.5KB" }, - { "path": "./dist/pricingTable*.js", "maxSize": "4KB" }, + { "path": "./dist/pricingTable*.js", "maxSize": "4.02KB" }, { "path": "./dist/checkout*.js", "maxSize": "4.9KB" }, { "path": "./dist/paymentSources*.js", "maxSize": "8.5KB" }, { "path": "./dist/up-billing-page*.js", "maxSize": "1KB" }, diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx index 20327b399d5..8b089173978 100644 --- a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx +++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx @@ -1,4 +1,4 @@ -import { useClerk, useOrganization } from '@clerk/shared/react'; +import { useClerk, useOrganization, useUser } from '@clerk/shared/react'; import type { __experimental_CommerceCheckoutResource, __experimental_CommerceMoney, @@ -91,6 +91,7 @@ const CheckoutFormElements = ({ onCheckoutComplete: (checkout: __experimental_CommerceCheckoutResource) => void; }) => { const { __experimental_commerce } = useClerk(); + const { user } = useUser(); const { organization } = useOrganization(); const { subscriberType } = useCheckoutContext(); @@ -100,7 +101,7 @@ const CheckoutFormElements = ({ ...(subscriberType === 'org' ? { orgId: organization?.id } : {}), }, undefined, - 'commerce-payment-sources', + `commerce-payment-sources-${user?.id}`, ); const [openAccountFundsDropDown, setOpenAccountFundsDropDown] = useState(true); diff --git a/packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx b/packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx index dc4a6718012..c54292e23d7 100644 --- a/packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx +++ b/packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx @@ -1,4 +1,4 @@ -import { useClerk, useOrganization } from '@clerk/shared/react'; +import { useClerk, useOrganization, useUser } from '@clerk/shared/react'; import type { __experimental_CommerceCheckoutResource, __experimental_CommercePaymentSourceResource, @@ -31,6 +31,7 @@ export const AddPaymentSource = (props: AddPaymentSourceProps) => { const { __experimental_commerce } = useClerk(); const { __experimental_commerceSettings } = useEnvironment(); const { organization } = useOrganization(); + const { user } = useUser(); const { subscriberType } = usePaymentSourcesContext(); const stripePromiseRef = useRef | null>(null); @@ -67,7 +68,7 @@ export const AddPaymentSource = (props: AddPaymentSourceProps) => { ...(subscriberType === 'org' ? { orgId: organization?.id } : {}), }, undefined, - 'commerce-payment-source-initialize', + `commerce-payment-source-initialize-${user?.id}`, ); const externalGatewayId = checkout?.externalGatewayId ?? initializedPaymentSource?.externalGatewayId; @@ -139,6 +140,7 @@ const AddPaymentSourceForm = withCardStateProvider( const elements = useElements(); const { displayConfig } = useEnvironment(); const { organization } = useOrganization(); + const { user } = useUser(); const { subscriberType } = usePaymentSourcesContext(); const [submitError, setSubmitError] = useState(); @@ -149,7 +151,7 @@ const AddPaymentSourceForm = withCardStateProvider( ...(subscriberType === 'org' ? { orgId: organization?.id } : {}), }, undefined, - 'commerce-payment-sources', + `commerce-payment-sources-${user?.id}`, ); const onSubmit = async (e: React.FormEvent) => { diff --git a/packages/clerk-js/src/ui/components/PaymentSources/PaymentSources.tsx b/packages/clerk-js/src/ui/components/PaymentSources/PaymentSources.tsx index 951a9954c94..3719f4191ef 100644 --- a/packages/clerk-js/src/ui/components/PaymentSources/PaymentSources.tsx +++ b/packages/clerk-js/src/ui/components/PaymentSources/PaymentSources.tsx @@ -1,4 +1,4 @@ -import { useClerk, useOrganization } from '@clerk/shared/react'; +import { useClerk, useOrganization, useUser } from '@clerk/shared/react'; import type { __experimental_CommercePaymentSourceResource, __experimental_PaymentSourcesProps } from '@clerk/types'; import { Fragment, useRef } from 'react'; @@ -88,11 +88,12 @@ const PaymentSources = (_: __experimental_PaymentSourcesProps) => { const { organization } = useOrganization(); const { subscriberType } = usePaymentSourcesContext(); + const { user } = useUser(); const { data, revalidate } = useFetch( __experimental_commerce?.getPaymentSources, { ...(subscriberType === 'org' ? { orgId: organization?.id } : {}) }, undefined, - 'commerce-payment-sources', + `commerce-payment-sources-${user?.id}`, ); const { data: paymentSources } = data || { data: [] }; diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx index dcdbd18c13d..5e62ebc2345 100644 --- a/packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx +++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTable.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_CommerceSubscriptionPlanPeriod, @@ -31,13 +31,14 @@ const PricingTable = (props: __experimental_PricingTableProps) => { const { __experimental_commerce } = useClerk(); + const { user } = useUser(); useFetch( - __experimental_commerce?.getPaymentSources, + user ? __experimental_commerce?.getPaymentSources : undefined, { ...(subscriberType === 'org' ? { orgId: organization?.id } : {}), }, undefined, - 'commerce-payment-sources', + `commerce-payment-sources-${user?.id}`, ); return ( diff --git a/packages/clerk-js/src/ui/contexts/components/Invoices.tsx b/packages/clerk-js/src/ui/contexts/components/Invoices.tsx index 681d38e81ac..9bca31e0c04 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'; @@ -18,11 +18,12 @@ 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..6a01acb8e35 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, @@ -23,12 +23,12 @@ const PlansContext = createContext<__experimental_PlansCtx | null>(null); export const useSubscriptions = (subscriberType?: __experimental_CommerceSubscriberType) => { const { __experimental_commerce } = useClerk(); const { organization } = useOrganization(); - + const { user } = useUser(); return useFetch( - __experimental_commerce?.__experimental_billing.getSubscriptions, + user ? __experimental_commerce?.__experimental_billing.getSubscriptions : undefined, { orgId: subscriberType === 'org' ? organization?.id : undefined }, undefined, - 'commerce-subscriptions', + `commerce-subscriptions-${user?.id}`, ); }; diff --git a/packages/clerk-js/src/ui/hooks/useCheckout.ts b/packages/clerk-js/src/ui/hooks/useCheckout.ts index 992d5b1952e..68e05ef6d2f 100644 --- a/packages/clerk-js/src/ui/hooks/useCheckout.ts +++ b/packages/clerk-js/src/ui/hooks/useCheckout.ts @@ -1,4 +1,4 @@ -import { useClerk, useOrganization } from '@clerk/shared/react'; +import { useClerk, useOrganization, useUser } from '@clerk/shared/react'; import type { __experimental_CheckoutProps, __experimental_CommerceCheckoutResource, @@ -14,6 +14,7 @@ export const useCheckout = (props: __experimental_CheckoutProps) => { const { organization } = useOrganization(); const [currentCheckout, setCurrentCheckout] = useState<__experimental_CommerceCheckoutResource | null>(null); + const { user } = useUser(); const { data: initialCheckout, isLoading, @@ -28,7 +29,7 @@ export const useCheckout = (props: __experimental_CheckoutProps) => { ...(subscriberType === 'org' ? { orgId: organization?.id } : {}), }, undefined, - 'commerce-checkout', + `commerce-checkout-${user?.id}`, ); const updateCheckout = useCallback((newCheckout: __experimental_CommerceCheckoutResource) => {