feat(clerk-js): Remove dummy default free plan subscription (#6109)

Author: aeliox

.changeset/lemon-walls-brush.md

@@ -0,0 +1,3 @@
+---
+'@clerk/clerk-js': patch
+---

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

@@ -2,6 +2,7 @@ import {
   __experimental_usePaymentAttempts,
   __experimental_usePaymentMethods,
   __experimental_useStatements,
+  __experimental_useSubscriptionItems,
   useClerk,
   useOrganization,
   useSession,
@@ -16,7 +17,6 @@ import type {
 import { useCallback, useMemo } from 'react';
 import useSWR from 'swr';
 
-import { CommerceSubscription } from '@/core/resources/CommerceSubscription';
 import { getClosestProfileScrollBox } from '@/ui/utils/getClosestProfileScrollBox';
 
 import type { LocalizationKey } from '../../localization';
@@ -72,58 +72,14 @@ export const useStatements = (params?: { mode: 'cache' }) => {
 };
 
 export const useSubscriptions = () => {
-  const { billing } = useClerk();
-  const { organization } = useOrganization();
-  const { user, isSignedIn } = useUser();
   const subscriberType = useSubscriberTypeContext();
-  const { data: plans } = usePlans();
-
-  const { data: _subscriptions, ...rest } = useSWR(
-    {
-      key: `commerce-subscriptions`,
-      userId: user?.id,
-      args: { orgId: subscriberType === 'org' ? organization?.id : undefined },
-    },
-    ({ 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.canceledAtDate))
-    ) {
-      const canceledSubscription = _subscriptions.data.find(subscription => subscription.canceledAtDate);
-      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',
-          created_at: canceledSubscription?.periodEndDate?.getTime() || 0,
-          period_start: canceledSubscription?.periodEndDate?.getTime() || 0,
-          period_end: 0,
-        }),
-      ];
-    }
-    return _subscriptions.data;
-  }, [_subscriptions, plans, isSignedIn]);
 
-  return {
-    data: subscriptions,
-    ...rest,
-  };
+  return __experimental_useSubscriptionItems({
+    for: subscriberType === 'org' ? 'organization' : 'user',
+    initialPage: 1,
+    pageSize: 10,
+    keepPreviousData: true,
+  });
 };
 
 export const usePlans = () => {
@@ -167,7 +123,7 @@ export const usePlansContext = () => {
     return false;
   }, [clerk, subscriberType]);
 
-  const { data: subscriptions, mutate: mutateSubscriptions } = useSubscriptions();
+  const { data: subscriptions, revalidate: revalidateSubscriptions } = useSubscriptions();
 
   // Invalidates cache but does not fetch immediately
   const { data: plans, mutate: mutatePlans } = useSWR<Awaited<ReturnType<typeof clerk.billing.getPlans>>>({
@@ -182,11 +138,11 @@ export const usePlansContext = () => {
 
   const revalidateAll = useCallback(() => {
     // Revalidate the plans and subscriptions
-    void mutateSubscriptions();
+    void revalidateSubscriptions();
     void mutatePlans();
     void revalidateStatements();
     void revalidatePaymentSources();
-  }, [mutateSubscriptions, mutatePlans, revalidateStatements, revalidatePaymentSources]);
+  }, [revalidateSubscriptions, mutatePlans, revalidateStatements, revalidatePaymentSources]);
 
   // should the default plan be shown as active
   const isDefaultPlanImplicitlyActiveOrUpcoming = useMemo(() => {
@@ -245,13 +201,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(
     ({
@@ -409,7 +358,6 @@ export const usePlansContext = () => {
     buttonPropsForPlan,
     canManageSubscription,
     captionForSubscription,
-    upcomingSubscriptionsExist,
     defaultFreePlan,
     revalidateAll,
   };