diff --git a/packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts b/packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts index 5426968522b..b28e6454137 100644 --- a/packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts +++ b/packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts @@ -45,7 +45,7 @@ export class CommerceBilling implements CommerceBillingNamespace { const { orgId, ...rest } = params; return await BaseResource._fetch({ - path: orgId ? `/organizations/${orgId}/commerce/subscriptions` : `/me/commerce/subscriptions`, + path: orgId ? `/organizations/${orgId}/commerce/subscription_items` : `/me/commerce/subscription_items`, method: 'GET', search: convertPageToOffsetSearchParams(rest), }).then(res => { diff --git a/packages/clerk-js/src/core/resources/CommerceSubscription.ts b/packages/clerk-js/src/core/resources/CommerceSubscription.ts index fe63c472629..aa45426968a 100644 --- a/packages/clerk-js/src/core/resources/CommerceSubscription.ts +++ b/packages/clerk-js/src/core/resources/CommerceSubscription.ts @@ -52,8 +52,8 @@ export class CommerceSubscription extends BaseResource implements CommerceSubscr const json = ( await BaseResource._fetch({ path: orgId - ? `/organizations/${orgId}/commerce/subscriptions/${this.id}` - : `/me/commerce/subscriptions/${this.id}`, + ? `/organizations/${orgId}/commerce/subscription_items/${this.id}` + : `/me/commerce/subscription_items/${this.id}`, method: 'DELETE', }) )?.response as unknown as DeletedObjectJSON; diff --git a/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx b/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx index 4bfb535d1df..6c3a804da48 100644 --- a/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx +++ b/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx @@ -347,7 +347,8 @@ const Header = React.forwardRef((props, ref) => { const { plan, subscription, closeSlot, planPeriod, setPlanPeriod } = props; const { captionForSubscription, isDefaultPlanImplicitlyActiveOrUpcoming } = usePlansContext(); - const { data: subscriptions } = useSubscriptions(); + const { data } = useSubscriptions(); + const { data: subscriptions = [] } = data || {}; const isImplicitlyActiveOrUpcoming = isDefaultPlanImplicitlyActiveOrUpcoming && plan.isDefault; diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx index f897067b2be..d492c38c9ee 100644 --- a/packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx +++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx @@ -11,7 +11,8 @@ const PricingTableRoot = (props: PricingTableProps) => { const clerk = useClerk(); const { mode = 'mounted' } = usePricingTableContext(); const isCompact = mode === 'modal'; - const { data: subscriptions } = useSubscriptions(); + const { data } = useSubscriptions(); + const { data: subscriptions = [] } = data || {}; const { data: plans } = usePlans(); const { handleSelectPlan } = usePlansContext(); diff --git a/packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx b/packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx index c5cf4d702c1..00635f4951a 100644 --- a/packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx +++ b/packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx @@ -35,7 +35,8 @@ export function SubscriptionsList({ }) { const { handleSelectPlan, captionForSubscription, canManageSubscription } = usePlansContext(); const subscriberType = useSubscriberTypeContext(); - const { data: subscriptions } = useSubscriptions(); + const { data } = useSubscriptions(); + const { data: subscriptions = [] } = data || {}; const canManageBilling = useProtect( has => has({ permission: 'org:sys_billing:manage' }) || subscriberType === 'user', ); diff --git a/packages/clerk-js/src/ui/contexts/components/Plans.tsx b/packages/clerk-js/src/ui/contexts/components/Plans.tsx index 0ec0005d9b5..9312d7111a6 100644 --- a/packages/clerk-js/src/ui/contexts/components/Plans.tsx +++ b/packages/clerk-js/src/ui/contexts/components/Plans.tsx @@ -8,7 +8,6 @@ import type { import { useCallback, useMemo } from 'react'; import useSWR from 'swr'; -import { CommerceSubscription } from '../../../core/resources/internal'; import type { LocalizationKey } from '../../localization'; import { localizationKeys } from '../../localization'; import { getClosestProfileScrollBox } from '../../utils'; @@ -80,11 +79,10 @@ export const useStatements = () => { export const useSubscriptions = () => { const { billing } = useClerk(); const { organization } = useOrganization(); - const { user, isSignedIn } = useUser(); + const { user } = useUser(); const subscriberType = useSubscriberTypeContext(); - const { data: plans } = usePlans(); - const { data: _subscriptions, ...rest } = useSWR( + return useSWR( { key: `commerce-subscriptions`, userId: user?.id, @@ -93,42 +91,6 @@ export const useSubscriptions = () => { ({ args, userId }) => (userId ? billing.getSubscriptions(args) : undefined), dedupeOptions, ); - - const subscriptions = useMemo(() => { - if (!_subscriptions) { - return []; - } - const defaultFreePlan = plans?.find(plan => plan.hasBaseFee === false && plan.amount === 0); - - // are we signed in, is there a default free plan, and should it be shown as active or upcoming? then add an implicit subscription - if ( - isSignedIn && - defaultFreePlan && - (_subscriptions.data.length === 0 || !_subscriptions.data.some(subscription => !subscription.canceledAt)) - ) { - const canceledSubscription = _subscriptions.data.find(subscription => subscription.canceledAt); - return [ - ..._subscriptions.data, - new CommerceSubscription({ - object: 'commerce_subscription', - id: '__implicit_default_plan_subscription__', - payment_source_id: '', - plan: defaultFreePlan.__internal_toSnapshot(), - plan_period: 'month', - canceled_at: null, - status: _subscriptions.data.length === 0 ? 'active' : 'upcoming', - period_start: canceledSubscription?.periodEnd || 0, - period_end: 0, - }), - ]; - } - return _subscriptions.data; - }, [_subscriptions, plans, isSignedIn]); - - return { - data: subscriptions, - ...rest, - }; }; export const usePlans = () => { @@ -172,7 +134,8 @@ export const usePlansContext = () => { return false; }, [clerk, subscriberType]); - const { data: subscriptions, mutate: mutateSubscriptions } = useSubscriptions(); + const { data, mutate: mutateSubscriptions } = useSubscriptions(); + const { data: subscriptions = [] } = data || {}; // Invalidates cache but does not fetch immediately const { data: plans, mutate: mutatePlans } = useSWR>>({ @@ -251,13 +214,6 @@ export const usePlansContext = () => { [activeOrUpcomingSubscription], ); - // should the default plan be shown as active - const upcomingSubscriptionsExist = useMemo(() => { - return ( - subscriptions.some(subscription => subscription.status === 'upcoming') || isDefaultPlanImplicitlyActiveOrUpcoming - ); - }, [subscriptions, isDefaultPlanImplicitlyActiveOrUpcoming]); - // return the CTA button props for a plan const buttonPropsForPlan = useCallback( ({ @@ -411,7 +367,6 @@ export const usePlansContext = () => { buttonPropsForPlan, canManageSubscription, captionForSubscription, - upcomingSubscriptionsExist, defaultFreePlan, revalidateAll, };