chore: define add on unit price temporarily

packages/console/src/components/ApplicationCreation/CreateForm/Footer/index.tsx

@@ -7,6 +7,7 @@ import ContactUsPhraseLink from '@/components/ContactUsPhraseLink';
 import PlanName from '@/components/PlanName';
 import QuotaGuardFooter from '@/components/QuotaGuardFooter';
 import { isDevFeaturesEnabled } from '@/consts/env';
+import { machineToMachineAddOnUnitPrice } from '@/consts/subscriptions';
 import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
 import Button from '@/ds-components/Button';
 import TextLink from '@/ds-components/TextLink';
@@ -22,14 +23,13 @@ type Props = {
 };
 
 function Footer({ selectedType, isLoading, onClickCreate, isThirdParty }: Props) {
-  const { currentPlan, currentSku, logtoSkus } = useContext(SubscriptionDataContext);
+  const { currentPlan, currentSku } = useContext(SubscriptionDataContext);
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.upsell' });
   const {
     hasAppsReachedLimit,
     hasMachineToMachineAppsReachedLimit,
     hasThirdPartyAppsReachedLimit,
   } = useApplicationsUsage();
-  const addOnUnitPrice = logtoSkus.find(({ id }) => id === currentPlan.id)?.unitPrice ?? 0;
 
   if (selectedType) {
     const { id: planId, name: planName, quota } = currentPlan;
@@ -52,7 +52,7 @@ function Footer({ selectedType, isLoading, onClickCreate, isThirdParty }: Props)
             }}
           >
             {t('add_on.footer.machine_to_machine_app', {
-              price: Number(addOnUnitPrice) / 100,
+              price: machineToMachineAddOnUnitPrice,
             })}
           </Trans>
         </AddOnNoticeFooter>

packages/console/src/consts/subscriptions.ts

@@ -10,6 +10,16 @@ export const freePlanPermissionsLimit = 1;
 export const freePlanAuditLogsRetentionDays = 3;
 export const proPlanAuditLogsRetentionDays = 14;
 
+// TODO: currently we do not provide a good way to retrieve add-on items unit price in console, we hence manually defined the unit price here, will implement the API soon.
+/* === Add-on unit price (in USD) === */
+export const resourceAddOnUnitPrice = 4;
+export const machineToMachineAddOnUnitPrice = 8;
+export const tenantMembersAddOnUnitPrice = 8;
+export const mfaAddOnUnitPrice = 48;
+export const enterpriseSsoAddOnUnitPrice = 48;
+export const organizationAddOnUnitPrice = 48;
+/* === Add-on unit price (in USD) === */
+
 /**
  * In console, only featured plans are shown in the plan selection component.
  */

packages/console/src/pages/ApiResources/components/CreateForm/Footer.tsx

@@ -7,6 +7,7 @@ import ContactUsPhraseLink from '@/components/ContactUsPhraseLink';
 import PlanName from '@/components/PlanName';
 import QuotaGuardFooter from '@/components/QuotaGuardFooter';
 import { isDevFeaturesEnabled } from '@/consts/env';
+import { resourceAddOnUnitPrice } from '@/consts/subscriptions';
 import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
 import Button from '@/ds-components/Button';
 import TextLink from '@/ds-components/TextLink';
@@ -23,13 +24,11 @@ function Footer({ isCreationLoading, onClickCreate }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const {
     currentPlan,
-    logtoSkus,
     currentSubscription: { planId },
     currentSubscriptionUsage: { resourcesLimit },
     currentSku,
   } = useContext(SubscriptionDataContext);
   const { hasReachedLimit } = useApiResourcesUsage();
-  const addOnUnitPrice = logtoSkus.find(({ id }) => id === planId)?.unitPrice ?? 0;
 
   if (
     hasReachedLimit &&
@@ -68,7 +67,7 @@ function Footer({ isCreationLoading, onClickCreate }: Props) {
           }}
         >
           {t('upsell.add_on.footer.api_resource', {
-            price: Number(addOnUnitPrice) / 100,
+            price: resourceAddOnUnitPrice,
           })}
         </Trans>
       </AddOnNoticeFooter>

packages/console/src/pages/EnterpriseSso/SsoCreationModal/index.tsx

@@ -18,6 +18,7 @@ import Skeleton from '@/components/CreateConnectorForm/Skeleton';
 import { getConnectorRadioGroupSize } from '@/components/CreateConnectorForm/utils';
 import QuotaGuardFooter from '@/components/QuotaGuardFooter';
 import { isCloud, isDevFeaturesEnabled } from '@/consts/env';
+import { enterpriseSsoAddOnUnitPrice } from '@/consts/subscriptions';
 import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
 import Button from '@/ds-components/Button';
 import DynamicT from '@/ds-components/DynamicT';
@@ -48,7 +49,6 @@ function SsoCreationModal({ isOpen, onClose: rawOnClose }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const {
     currentPlan,
-    logtoSkus,
     currentSubscription: { planId },
     currentSubscriptionQuota,
   } = useContext(SubscriptionDataContext);
@@ -60,7 +60,6 @@ function SsoCreationModal({ isOpen, onClose: rawOnClose }: Props) {
       ? currentSubscriptionQuota.enterpriseSsoLimit === null ||
         currentSubscriptionQuota.enterpriseSsoLimit > 0
       : currentPlan.quota.ssoEnabled);
-  const addOnUnitPrice = logtoSkus.find(({ id }) => id === planId)?.unitPrice ?? 0;
 
   const { data, error } = useSWR<SsoConnectorProvidersResponse, RequestError>(
     'api/sso-connector-providers'
@@ -160,7 +159,7 @@ function SsoCreationModal({ isOpen, onClose: rawOnClose }: Props) {
                   }}
                 >
                   {t('upsell.add_on.footer.enterprise_sso', {
-                    price: Number(addOnUnitPrice) / 100,
+                    price: enterpriseSsoAddOnUnitPrice,
                     planName: t('subscription.pro_plan'),
                   })}
                 </Trans>

packages/console/src/pages/Mfa/MfaForm/UpsellNotice/index.tsx

@@ -2,6 +2,7 @@ import { ReservedPlanId } from '@logto/schemas';
 import { useContext } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
+import { mfaAddOnUnitPrice } from '@/consts/subscriptions';
 import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
 import InlineNotification from '@/ds-components/InlineNotification';
 import TextLink from '@/ds-components/TextLink';
@@ -15,13 +16,11 @@ function UpsellNotice({ className }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const {
     currentSubscription: { planId },
-    logtoSkus,
   } = useContext(SubscriptionDataContext);
   const {
     data: { mfaUpsellNoticeAcknowledged },
     update,
   } = useUserPreferences();
-  const addOnUnitPrice = logtoSkus.find(({ id }) => id === planId)?.unitPrice ?? 0;
 
   if (planId !== ReservedPlanId.Pro || mfaUpsellNoticeAcknowledged) {
     return null;
@@ -41,7 +40,7 @@ function UpsellNotice({ className }: Props) {
         }}
       >
         {t('upsell.add_on.mfa_inline_notification', {
-          price: Number(addOnUnitPrice) / 100,
+          price: mfaAddOnUnitPrice,
           planName: String(t('subscription.pro_plan')),
         })}
       </Trans>

packages/console/src/pages/Organizations/CreateOrganizationModal/index.tsx

@@ -9,6 +9,7 @@ import AddOnNoticeFooter from '@/components/AddOnNoticeFooter';
 import ContactUsPhraseLink from '@/components/ContactUsPhraseLink';
 import QuotaGuardFooter from '@/components/QuotaGuardFooter';
 import { isCloud, isDevFeaturesEnabled } from '@/consts/env';
+import { organizationAddOnUnitPrice } from '@/consts/subscriptions';
 import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
 import Button from '@/ds-components/Button';
 import FormField from '@/ds-components/FormField';
@@ -32,7 +33,6 @@ function CreateOrganizationModal({ isOpen, onClose }: Props) {
   const {
     currentPlan,
     currentSubscription: { planId },
-    logtoSkus,
     currentSubscriptionQuota,
   } = useContext(SubscriptionDataContext);
   const isOrganizationsDisabled =
@@ -40,7 +40,6 @@ function CreateOrganizationModal({ isOpen, onClose }: Props) {
     !(isDevFeaturesEnabled
       ? currentSubscriptionQuota.organizationsEnabled
       : currentPlan.quota.organizationsEnabled);
-  const addOnUnitPrice = logtoSkus.find(({ id }) => id === planId)?.unitPrice ?? 0;
 
   const {
     reset,
@@ -95,7 +94,7 @@ function CreateOrganizationModal({ isOpen, onClose }: Props) {
                   }}
                 >
                   {t('upsell.add_on.footer.organization', {
-                    price: Number(addOnUnitPrice) / 100,
+                    price: organizationAddOnUnitPrice,
                     planName: t('subscription.pro_plan'),
                   })}
                 </Trans>

packages/console/src/pages/TenantSettings/TenantMembers/InviteMemberModal/index.tsx

@@ -9,6 +9,7 @@ import ReactModal from 'react-modal';
 import { useAuthedCloudApi } from '@/cloud/hooks/use-cloud-api';
 import AddOnNoticeFooter from '@/components/AddOnNoticeFooter';
 import { isDevFeaturesEnabled } from '@/consts/env';
+import { tenantMembersAddOnUnitPrice } from '@/consts/subscriptions';
 import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
 import { TenantsContext } from '@/contexts/TenantsProvider';
 import FormField from '@/ds-components/FormField';
@@ -40,9 +41,7 @@ function InviteMemberModal({ isOpen, onClose }: Props) {
   const { show } = useConfirmModal();
   const {
     currentSubscription: { planId },
-    logtoSkus,
   } = useContext(SubscriptionDataContext);
-  const addOnUnitPrice = logtoSkus.find(({ id }) => id === planId)?.unitPrice ?? 0;
 
   const formMethods = useForm<InviteMemberForm>({
     defaultValues: {
@@ -137,7 +136,7 @@ function InviteMemberModal({ isOpen, onClose }: Props) {
                   }}
                 >
                   {t('upsell.add_on.footer.tenant_members', {
-                    price: Number(addOnUnitPrice) / 100,
+                    price: tenantMembersAddOnUnitPrice,
                   })}
                 </Trans>
               </AddOnNoticeFooter>