refactor(console): only display reserved plans in the console (#4848)

packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/index.tsx

@@ -1,3 +1,4 @@
+import { conditional } from '@silverhand/essentials';
 import { Trans, useTranslation } from 'react-i18next';
 import Modal from 'react-modal';
 
@@ -11,6 +12,7 @@ import useSubscribe from '@/hooks/use-subscribe';
 import useSubscriptionPlans from '@/hooks/use-subscription-plans';
 import * as modalStyles from '@/scss/modal.module.scss';
 import { type SubscriptionPlan } from '@/types/subscriptions';
+import { pickupReservedPlans } from '@/utils/subscription';
 
 import { type CreateTenantData } from '../type';
 
@@ -27,7 +29,9 @@ function SelectTenantPlanModal({ tenantData, onClose }: Props) {
   const { data: subscriptionPlans } = useSubscriptionPlans();
   const { subscribe } = useSubscribe();
   const cloudApi = useCloudApi({ hideErrorToast: true });
-  if (!subscriptionPlans || !tenantData) {
+  const reservedPlans = conditional(subscriptionPlans && pickupReservedPlans(subscriptionPlans));
+
+  if (!reservedPlans || !tenantData) {
     return null;
   }
 
@@ -75,7 +79,7 @@ function SelectTenantPlanModal({ tenantData, onClose }: Props) {
         onClose={onClose}
       >
         <div className={styles.container}>
-          {subscriptionPlans.map((plan) => (
+          {reservedPlans.map((plan) => (
             <PlanCardItem
               key={plan.id}
               plan={plan}

packages/console/src/consts/subscriptions.ts

@@ -4,6 +4,8 @@ export enum ReservedPlanId {
   pro = 'pro',
 }
 
+export const reservedPlanIds: string[] = Object.values(ReservedPlanId);
+
 export const reservedPlanIdOrder: string[] = [
   ReservedPlanId.free,
   ReservedPlanId.hobby,

packages/console/src/pages/TenantSettings/Subscription/index.tsx

@@ -1,4 +1,5 @@
 import { withAppInsights } from '@logto/app-insights/react';
+import { conditionalArray } from '@silverhand/essentials';
 import { useContext } from 'react';
 
 import PageMeta from '@/components/PageMeta';
@@ -6,6 +7,7 @@ import { TenantsContext } from '@/contexts/TenantsProvider';
 import useSubscription from '@/hooks/use-subscription';
 import useSubscriptionPlans from '@/hooks/use-subscription-plans';
 import useSubscriptionUsage from '@/hooks/use-subscription-usage';
+import { pickupReservedPlans } from '@/utils/subscription';
 
 import Skeleton from '../components/Skeleton';
 
@@ -29,6 +31,10 @@ function Subscription() {
   const isLoadingSubscription = !currentSubscription && !fetchSubscriptionError;
   const isLoadingSubscriptionUsage = !subscriptionUsage && !fetchSubscriptionUsageError;
 
+  const reservedPlans = conditionalArray(
+    subscriptionPlans && pickupReservedPlans(subscriptionPlans)
+  );
+
   if (isLoadingPlans || isLoadingSubscription || isLoadingSubscriptionUsage) {
     return <Skeleton />;
   }
@@ -53,10 +59,10 @@ function Subscription() {
         subscriptionPlan={currentSubscriptionPlan}
         subscriptionUsage={subscriptionUsage}
       />
-      <PlanQuotaTable subscriptionPlans={subscriptionPlans} />
+      <PlanQuotaTable subscriptionPlans={reservedPlans} />
       <SwitchPlanActionBar
         currentSubscriptionPlanId={currentSubscription.planId}
-        subscriptionPlans={subscriptionPlans}
+        subscriptionPlans={reservedPlans}
         onSubscriptionUpdated={mutateSubscription}
       />
     </div>

packages/console/src/utils/subscription.ts

@@ -8,7 +8,8 @@ import {
   organizationEnabledMap,
   ticketSupportResponseTimeMap,
 } from '@/consts/plan-quotas';
-import { reservedPlanIdOrder } from '@/consts/subscriptions';
+import { reservedPlanIdOrder, reservedPlanIds } from '@/consts/subscriptions';
+import { type SubscriptionPlan } from '@/types/subscriptions';
 
 export const addSupportQuotaToPlan = (subscriptionPlanResponse: SubscriptionPlanResponse) => {
   const { id, quota } = subscriptionPlanResponse;
@@ -60,3 +61,6 @@ export const isExceededQuotaLimitError = async (error: unknown) => {
 
   return Boolean(message?.includes('Exceeded quota limit'));
 };
+
+export const pickupReservedPlans = (plans: SubscriptionPlan[]): SubscriptionPlan[] =>
+  plans.filter(({ id }) => reservedPlanIds.includes(id));