name: string
tooltip?: string
usage: number
@@ -19,6 +19,11 @@ type Props = {
resetHint?: string
resetInDays?: number
hideIcon?: boolean
+ // Props for the 50MB threshold display logic
+ storageThreshold?: number
+ storageTooltip?: string
+ storageTotalDisplay?: string // e.g., "5GB" or "50MB" for formatted display
+ isSandboxPlan?: boolean
}
const WARNING_THRESHOLD = 80
@@ -35,30 +40,150 @@ const UsageInfo: FC
= ({
resetHint,
resetInDays,
hideIcon = false,
+ storageThreshold = 50,
+ storageTooltip,
+ storageTotalDisplay,
+ isSandboxPlan = false,
}) => {
const { t } = useTranslation()
+ // Special display logic for usage below threshold
+ const isBelowThreshold = usage < storageThreshold
+ // Sandbox at full capacity (usage >= threshold and it's sandbox plan)
+ const isSandboxFull = isSandboxPlan && usage >= storageThreshold
+
const percent = usage / total * 100
- const color = percent >= 100
- ? 'bg-components-progress-error-progress'
- : (percent >= WARNING_THRESHOLD ? 'bg-components-progress-warning-progress' : 'bg-components-progress-bar-progress-solid')
+ const getProgressColor = () => {
+ if (percent >= 100)
+ return 'bg-components-progress-error-progress'
+ if (percent >= WARNING_THRESHOLD)
+ return 'bg-components-progress-warning-progress'
+ return 'bg-components-progress-bar-progress-solid'
+ }
+ const color = getProgressColor()
const isUnlimited = total === NUM_INFINITE
let totalDisplay: string | number = isUnlimited ? t('plansCommon.unlimited', { ns: 'billing' }) : total
if (!isUnlimited && unit && unitPosition === 'inline')
totalDisplay = `${total}${unit}`
const showUnit = !!unit && !isUnlimited && unitPosition === 'suffix'
const resetText = resetHint ?? (typeof resetInDays === 'number' ? t('usagePage.resetsIn', { ns: 'billing', count: resetInDays }) : undefined)
- const rightInfo = resetText
- ? (
+
+ const renderRightInfo = () => {
+ if (resetText) {
+ return (
{resetText}
)
- : (showUnit && (
+ }
+ if (showUnit) {
+ return (
{unit}
- ))
+ )
+ }
+ return null
+ }
+
+ // Render usage display
+ const renderUsageDisplay = () => {
+ // Sandbox user at full capacity
+ if (isSandboxFull) {
+ return (
+
+
+ {storageThreshold}
+
+ /
+
+ {storageThreshold}
+ {' '}
+ {unit}
+
+
+ )
+ }
+ // Usage below threshold - show "< 50 MB" or "< 50 / 5GB"
+ if (isBelowThreshold) {
+ const totalText = storageTotalDisplay || totalDisplay
+ return (
+
+
+ <
+ {' '}
+ {storageThreshold}
+
+ {!isSandboxPlan && (
+ <>
+ /
+ {totalText}
+
+ )}
+ {isSandboxPlan && {unit}}
+
+ )
+ }
+ // Pro/Team users with usage >= threshold - show actual usage
+ const totalText = storageTotalDisplay || totalDisplay
+ return (
+
+ {usage}
+ /
+ {totalText}
+
+ )
+ }
+
+ // Render progress bar with optional tooltip wrapper
+ const renderProgressBar = () => {
+ const progressBar = (
+
+ )
+
+ if (storageTooltip) {
+ return (
+
+ {storageTooltip}
+
+
+ )
+ }
+
+ return progressBar
+ }
+
+ // Render usage text with optional tooltip wrapper
+ const renderUsageWithTooltip = () => {
+ const usageDisplay = renderUsageDisplay()
+
+ if (storageTooltip) {
+ return (
+