fix(console): fix the constant basic sku price on billing notification (#7830)

fix(console): dynamicly render the basic sku price

should render the basic sku price dynamicly using the current SKU context

Author: simeng-li

packages/console/src/consts/subscriptions.ts

@@ -10,7 +10,6 @@ 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 proPlanBasePrice = 16;
 export const resourceAddOnUnitPrice = 4;
 export const machineToMachineAddOnUnitPrice = 8;
 export const tenantMembersAddOnUnitPrice = 8;

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

@@ -2,7 +2,6 @@ import { useContext } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
 import { addOnPricingExplanationLink } from '@/consts/external-links';
-import { proPlanBasePrice } from '@/consts/subscriptions';
 import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
 import InlineNotification from '@/ds-components/InlineNotification';
 import TextLink from '@/ds-components/TextLink';
@@ -16,6 +15,7 @@ type Props = {
 function AddOnUsageChangesNotification({ className }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const {
+    currentSku: { unitPrice },
     currentSubscription: { planId, isEnterprisePlan },
   } = useContext(SubscriptionDataContext);
   const {
@@ -25,7 +25,8 @@ function AddOnUsageChangesNotification({ className }: Props) {
 
   const isPaidTenant = isPaidPlan(planId, isEnterprisePlan);
 
-  if (!isPaidTenant || addOnChangesInCurrentCycleNoticeAcknowledged) {
+  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+  if (!isPaidTenant || addOnChangesInCurrentCycleNoticeAcknowledged || !unitPrice) {
     return null;
   }
 
@@ -43,7 +44,7 @@ function AddOnUsageChangesNotification({ className }: Props) {
         }}
       >
         {t('subscription.usage.pricing.add_on_changes_in_current_cycle_notice', {
-          price: proPlanBasePrice,
+          price: unitPrice / 100,
         })}
       </Trans>
     </InlineNotification>