diff --git a/studio/components/interfaces/BillingV2/Subscription/BillingBreakdown.tsx b/studio/components/interfaces/BillingV2/Subscription/BillingBreakdown.tsx index 559021c47bd..c6096abdf49 100644 --- a/studio/components/interfaces/BillingV2/Subscription/BillingBreakdown.tsx +++ b/studio/components/interfaces/BillingV2/Subscription/BillingBreakdown.tsx @@ -274,44 +274,55 @@ const BillingBreakdown = ({}: BillingBreakdownProps) => { )} - {usageMeta?.available_in_plan ? ( - 0 - ? 'bg-scale-1100' - : isExceededLimit && !isUsageBillingEnabled - ? 'bg-red-900' - : isApproachingLimit && !isUsageBillingEnabled - ? 'bg-amber-900' - : 'bg-scale-1100' - } - bgClass="bg-gray-300 dark:bg-gray-600" - labelBottom={usageLabel} - labelBottomClass="!text-scale-1000" - labelTop={hasLimit ? percentageLabel : undefined} - labelTopClass={ - !hasLimit - ? '' - : isExceededLimit && !isUsageBillingEnabled - ? '!text-red-900' - : isApproachingLimit && !isUsageBillingEnabled - ? '!text-amber-900' - : '' - } - /> + {usageMeta ? ( + usageMeta.available_in_plan ? ( + 0 + ? 'bg-scale-1100' + : isExceededLimit && !isUsageBillingEnabled + ? 'bg-red-900' + : isApproachingLimit && !isUsageBillingEnabled + ? 'bg-amber-900' + : 'bg-scale-1100' + } + bgClass="bg-gray-300 dark:bg-gray-600" + labelBottom={usageLabel} + labelBottomClass="!text-scale-1000" + labelTop={hasLimit ? percentageLabel : undefined} + labelTopClass={ + !hasLimit + ? '' + : isExceededLimit && !isUsageBillingEnabled + ? '!text-red-900' + : isApproachingLimit && !isUsageBillingEnabled + ? '!text-amber-900' + : '' + } + /> + ) : ( + // [Joshen] Needs a better CTA here +
+

Unavailable in your plan

+ +
+ ) ) : ( - // [Joshen] Needs a better CTA here
-

Unavailable in your plan

- +

+ The usage for this metric is missing. +

)}