fix(clerk-js): Minor UI fixes for commerce (#5690)

Author: panteliselef

.changeset/icy-lemons-fall.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Minor UI fixes for Billing pages in `<UserProfile/>` and `<OrganizationProfile/>`.

packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx

@@ -2,7 +2,7 @@ import {
   __experimental_PaymentSourcesContext,
   __experimental_PricingTableContext,
   InvoicesContextProvider,
-  usePlansContext,
+  useSubscriptions,
   withPlans,
 } from '../../contexts';
 import { Col, descriptors, Heading, Hr, localizationKeys } from '../../customizables';
@@ -32,9 +32,13 @@ const orgTabMap = {
 export const OrganizationBillingPage = withPlans(
   withCardStateProvider(() => {
     const card = useCardState();
-    const { subscriptions } = usePlansContext();
+    const { data: subscriptions } = useSubscriptions('org');
     const { selectedTab, handleTabChange } = useTabState(orgTabMap);
 
+    if (!Array.isArray(subscriptions?.data)) {
+      return null;
+    }
+
     return (
       <Col
         elementDescriptor={descriptors.page}
@@ -61,7 +65,7 @@ export const OrganizationBillingPage = withPlans(
             <TabsList sx={t => ({ gap: t.space.$6 })}>
               <Tab
                 localizationKey={
-                  subscriptions.length > 0
+                  subscriptions.data.length > 0
                     ? localizationKeys('userProfile.__experimental_billingPage.start.headerTitle__subscriptions')
                     : localizationKeys('userProfile.__experimental_billingPage.start.headerTitle__plans')
                 }
@@ -77,7 +81,7 @@ export const OrganizationBillingPage = withPlans(
             </TabsList>
             <TabPanels>
               <TabPanel sx={{ width: '100%', flexDirection: 'column' }}>
-                {subscriptions.length > 0 && (
+                {subscriptions.data.length > 0 && (
                   <>
                     <SubscriptionsList />
                     <Hr sx={t => ({ marginBlock: t.space.$6 })} />

packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx

@@ -68,6 +68,7 @@ export const OrganizationProfileRoutes = () => {
                 </Suspense>
               </Route>
               <Route path='invoice/:invoiceId'>
+                {/* TODO(@commerce): Should this be lazy loaded ? */}
                 <Suspense fallback={''}>
                   <InvoicesContextProvider subscriberType='org'>
                     <InvoicePage />

packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx

@@ -25,7 +25,7 @@ export function SubscriptionsList() {
       </Thead>
       <Tbody>
         {subscriptions.map(subscription => (
-          <Tr key={subscription.plan.id}>
+          <Tr key={subscription.id}>
             <Td>
               <Box
                 sx={t => ({
@@ -72,7 +72,7 @@ export function SubscriptionsList() {
                 size='xs'
                 textVariant='buttonSmall'
                 onClick={() => handleSelectSubscription(subscription)}
-                {...buttonPropsForPlan({ plan: subscription.plan })}
+                {...buttonPropsForPlan({ subscription })}
               />
             </Td>
           </Tr>

packages/clerk-js/src/ui/components/UserProfile/BillingPage.tsx

@@ -2,7 +2,7 @@ import {
   __experimental_PaymentSourcesContext,
   __experimental_PricingTableContext,
   InvoicesContextProvider,
-  usePlansContext,
+  useSubscriptions,
   withPlans,
 } from '../../contexts';
 import { Col, descriptors, Heading, Hr, localizationKeys } from '../../customizables';
@@ -32,9 +32,14 @@ const tabMap = {
 export const BillingPage = withPlans(
   withCardStateProvider(() => {
     const card = useCardState();
-    const { subscriptions } = usePlansContext();
+    const { data: subscriptions } = useSubscriptions();
+
     const { selectedTab, handleTabChange } = useTabState(tabMap);
 
+    if (!Array.isArray(subscriptions?.data)) {
+      return null;
+    }
+
     return (
       <Col
         elementDescriptor={descriptors.page}
@@ -61,7 +66,7 @@ export const BillingPage = withPlans(
             <TabsList sx={t => ({ gap: t.space.$6 })}>
               <Tab
                 localizationKey={
-                  subscriptions.length > 0
+                  subscriptions.data.length > 0
                     ? localizationKeys('userProfile.__experimental_billingPage.start.headerTitle__subscriptions')
                     : localizationKeys('userProfile.__experimental_billingPage.start.headerTitle__plans')
                 }
@@ -77,7 +82,7 @@ export const BillingPage = withPlans(
             </TabsList>
             <TabPanels>
               <TabPanel sx={_ => ({ width: '100%', flexDirection: 'column' })}>
-                {subscriptions.length > 0 && (
+                {subscriptions.data.length > 0 && (
                   <>
                     <SubscriptionsList />
                     <Hr sx={t => ({ marginBlock: t.space.$6 })} />

packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx

@@ -66,6 +66,7 @@ export const UserProfileRoutes = () => {
                   </Suspense>
                 </Route>
                 <Route path='invoice/:invoiceId'>
+                  {/* TODO(@commerce): Should this be lazy loaded ? */}
                   <Suspense fallback={''}>
                     <InvoicesContextProvider>
                       <InvoicePage />

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

@@ -3,6 +3,7 @@ import type {
   __experimental_CommercePlanResource,
   __experimental_CommerceSubscriberType,
   __experimental_CommerceSubscriptionPlanPeriod,
+  __experimental_CommerceSubscriptionResource,
 } from '@clerk/types';
 import type { ComponentType, ReactNode } from 'react';
 import { createContext, useCallback, useContext, useMemo } from 'react';
@@ -19,25 +20,31 @@ type PlansContextProviderProps = {
 
 const PlansContext = createContext<__experimental_PlansCtx | null>(null);
 
+export const useSubscriptions = (subscriberType?: __experimental_CommerceSubscriberType) => {
+  const { __experimental_commerce } = useClerk();
+  const { organization } = useOrganization();
+
+  return useFetch(
+    __experimental_commerce?.__experimental_billing.getSubscriptions,
+    { orgId: subscriberType === 'org' ? organization?.id : undefined },
+    undefined,
+    'commerce-subscriptions',
+  );
+};
+
 export const PlansContextProvider = ({
   subscriberType = 'user',
   children,
 }: PlansContextProviderProps & {
   children: ReactNode;
 }) => {
   const { __experimental_commerce } = useClerk();
-  const { organization } = useOrganization();
 
   const {
     data: subscriptions,
     isLoading: isLoadingSubscriptions,
     revalidate: revalidateSubscriptions,
-  } = useFetch(
-    __experimental_commerce?.__experimental_billing.getSubscriptions,
-    { orgId: subscriberType === 'org' ? organization?.id : undefined },
-    undefined,
-    'commerce-subscriptions',
-  );
+  } = useSubscriptions(subscriberType);
 
   const {
     data: plans,
@@ -133,12 +140,14 @@ export const usePlansContext = () => {
   const buttonPropsForPlan = useCallback(
     ({
       plan,
+      subscription: sub,
       isCompact = false,
     }: {
-      plan: __experimental_CommercePlanResource;
+      plan?: __experimental_CommercePlanResource;
+      subscription?: __experimental_CommerceSubscriptionResource;
       isCompact?: boolean;
     }): { localizationKey: LocalizationKey; variant: 'bordered' | 'solid'; colorScheme: 'secondary' | 'primary' } => {
-      const subscription = activeOrUpcomingSubscription(plan);
+      const subscription = sub ?? (plan ? activeOrUpcomingSubscription(plan) : undefined);
 
       return {
         localizationKey: subscription
@@ -162,7 +171,11 @@ export const usePlansContext = () => {
         clerk.__internal_openSubscriptionDetails({
           subscription,
           subscriberType: ctx.subscriberType,
-          onSubscriptionCancel: onSubscriptionChange,
+          onSubscriptionCancel: () => {
+            ctx.revalidate();
+            onSubscriptionChange?.();
+            clerk.__internal_closeSubscriptionDetails();
+          },
           portalId:
             mode === 'modal'
               ? ctx.subscriberType === 'user'

packages/clerk-js/src/ui/hooks/useFetch.ts

@@ -38,15 +38,16 @@ export const useCache = <K = any, V = any>(
   serializer = serialize,
 ): {
   getCache: () => State<V> | undefined;
-  setCache: (state: State<V>) => void;
+  setCache: (state: State<V> | ((params: State<V>) => State<V>)) => void;
   clearCache: () => void;
   subscribeCache: (callback: () => void) => () => void;
 } => {
   const serializedKey = serializer(key);
   const get = useCallback(() => requestCache.get(serializedKey), [serializedKey]);
   const set = useCallback(
-    (data: State) => {
-      requestCache.set(serializedKey, data);
+    (data: State | ((params: State) => State)) => {
+      // @ts-ignore
+      requestCache.set(serializedKey, typeof data === 'function' ? data(get()) : data);
       subscribers.forEach(callback => callback());
     },
     [serializedKey],
@@ -106,9 +107,12 @@ export const useFetch = <K, T>(
   const cached = useSyncExternalStore(subscribeCache, getCache);
 
   const revalidate = useCallback(() => {
-    clearCache();
+    setCache(d => ({
+      ...d,
+      cachedAt: 0,
+    }));
     setRevalidationCounter(prev => prev + 1);
-  }, [clearCache]);
+  }, [setCache]);
 
   useEffect(() => {
     const fetcherMissing = !fetcherRef.current;