refactor(web): mark Props of billing/ components as read-only (#25219) (#37249)

web/app/components/billing/annotation-full/modal.tsx

@@ -9,10 +9,10 @@ import UpgradeBtn from '../upgrade-btn'
 import s from './style.module.css'
 import Usage from './usage'
 
-type Props = {
+type Props = Readonly<{
   show: boolean
   onHide: () => void
-}
+}>
 const AnnotationFullModal: FC<Props> = ({
   show,
   onHide,

web/app/components/billing/annotation-full/usage.tsx

@@ -6,9 +6,9 @@ import { useProviderContext } from '@/context/provider-context'
 import { MessageFastPlus } from '../../base/icons/src/vender/line/communication'
 import UsageInfo from '../usage-info'
 
-type Props = {
+type Props = Readonly<{
   className?: string
-}
+}>
 
 const Usage: FC<Props> = ({
   className,

web/app/components/billing/header-billing-btn/index.tsx

@@ -6,10 +6,10 @@ import { useProviderContext } from '@/context/provider-context'
 import { Plan } from '../type'
 import UpgradeBtn from '../upgrade-btn'
 
-type Props = {
+type Props = Readonly<{
   onClick?: () => void
   isDisplayOnly?: boolean
-}
+}>
 
 const HeaderBillingBtn: FC<Props> = ({
   onClick,

web/app/components/billing/plan-upgrade-modal/index.tsx

@@ -8,7 +8,7 @@ import UpgradeBtn from '@/app/components/billing/upgrade-btn'
 import { useModalContext } from '@/context/modal-context'
 import { SquareChecklist } from '../../base/icons/src/vender/other'
 
-type Props = {
+type Props = Readonly<{
   Icon?: ComponentType<{ className?: string }>
   title: string
   description: string
@@ -16,7 +16,7 @@ type Props = {
   show: boolean
   onClose: () => void
   onUpgrade?: () => void
-}
+}>
 
 export function PlanUpgradeModal({
   Icon = SquareChecklist,

web/app/components/billing/plan/index.tsx

@@ -31,9 +31,9 @@ import AppsInfo from '../usage-info/apps-info'
 import VectorSpaceInfo from '../usage-info/vector-space-info'
 import { Enterprise, Professional, Sandbox, Team } from './assets'
 
-type Props = {
+type Props = Readonly<{
   loc: string
-}
+}>
 
 const PlanComp: FC<Props> = ({
   loc,

web/app/components/billing/trigger-events-limit-modal/index.tsx

@@ -4,14 +4,14 @@ import { TriggerAll } from '@/app/components/base/icons/src/vender/workflow'
 import { PlanUpgradeModal } from '@/app/components/billing/plan-upgrade-modal'
 import UsageInfo from '@/app/components/billing/usage-info'
 
-type Props = {
+type Props = Readonly<{
   show: boolean
   onClose: () => void
   onUpgrade: () => void
   usage: number
   total: number
   resetInDays?: number
-}
+}>
 
 export default function TriggerEventsLimitModal({
   show,

web/app/components/billing/upgrade-btn/index.tsx

@@ -8,7 +8,7 @@ import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
 import { useModalContext } from '@/context/modal-context'
 import { PremiumBadgeButton } from '../../base/premium-badge'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   style?: CSSProperties
   isFull?: boolean
@@ -18,7 +18,7 @@ type Props = {
   onClick?: () => void
   loc?: string
   labelKey?: Exclude<I18nKeysWithPrefix<'billing'>, 'plans.community.features' | 'plans.enterprise.features' | 'plans.premium.features'>
-}
+}>
 
 type GtagHandler = (command: 'event', action: 'click_upgrade_btn', payload: { loc: string }) => void
 

web/app/components/billing/usage-info/apps-info.tsx

@@ -8,9 +8,9 @@ import { useTranslation } from 'react-i18next'
 import { useProviderContext } from '@/context/provider-context'
 import UsageInfo from '../usage-info'
 
-type Props = {
+type Props = Readonly<{
   className?: string
-}
+}>
 
 const AppsInfo: FC<Props> = ({
   className,

web/app/components/billing/usage-info/index.tsx

@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next'
 import { Infotip } from '@/app/components/base/infotip'
 import { NUM_INFINITE } from '../config'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   Icon: ComponentType<{ className?: string }>
   name: string
@@ -26,7 +26,7 @@ type Props = {
   storageThreshold?: number
   storageTooltip?: string
   isSandboxPlan?: boolean
-}
+}>
 
 const UsageInfo: FC<Props> = ({
   className,

web/app/components/billing/usage-info/vector-space-info.tsx

@@ -12,9 +12,9 @@ import { Plan } from '../type'
 import UsageInfo from '../usage-info'
 import { getPlanVectorSpaceLimitMB } from '../utils'
 
-type Props = {
+type Props = Readonly<{
   className?: string
-}
+}>
 
 // Storage threshold in MB - usage below this shows as "< 50 MB"
 const STORAGE_THRESHOLD_MB = getPlanVectorSpaceLimitMB(Plan.sandbox)