feat: trigger billing (#28335)

Signed-off-by: lyzno1 <yuanyouhuilyz@gmail.com>
Co-authored-by: lyzno1 <yuanyouhuilyz@gmail.com>
Co-authored-by: lyzno1 <92089059+lyzno1@users.noreply.github.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

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

@@ -1,5 +1,5 @@
 'use client'
-import type { FC } from 'react'
+import type { CSSProperties, FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import PremiumBadge from '../../base/premium-badge'
@@ -9,19 +9,24 @@ import { useModalContext } from '@/context/modal-context'
 
 type Props = {
   className?: string
+  style?: CSSProperties
   isFull?: boolean
   size?: 'md' | 'lg'
   isPlain?: boolean
   isShort?: boolean
   onClick?: () => void
   loc?: string
+  labelKey?: string
 }
 
 const UpgradeBtn: FC<Props> = ({
+  className,
+  style,
   isPlain = false,
   isShort = false,
   onClick: _onClick,
   loc,
+  labelKey,
 }) => {
   const { t } = useTranslation()
   const { setShowPricingModal } = useModalContext()
@@ -40,10 +45,17 @@ const UpgradeBtn: FC<Props> = ({
     }
   }
 
+  const defaultBadgeLabel = t(`billing.upgradeBtn.${isShort ? 'encourageShort' : 'encourage'}`)
+  const label = labelKey ? t(labelKey) : defaultBadgeLabel
+
   if (isPlain) {
     return (
-      <Button onClick={onClick}>
-        {t('billing.upgradeBtn.plain')}
+      <Button
+        className={className}
+        style={style}
+        onClick={onClick}
+      >
+        {labelKey ? label : t('billing.upgradeBtn.plain')}
       </Button>
     )
   }
@@ -54,11 +66,13 @@ const UpgradeBtn: FC<Props> = ({
       color='blue'
       allowHover={true}
       onClick={onClick}
+      className={className}
+      style={style}
     >
       <SparklesSoft className='flex h-3.5 w-3.5 items-center py-[1px] pl-[3px] text-components-premium-badge-indigo-text-stop-0' />
       <div className='system-xs-medium'>
         <span className='p-1'>
-          {t(`billing.upgradeBtn.${isShort ? 'encourageShort' : 'encourage'}`)}
+          {label}
         </span>
       </div>
     </PremiumBadge>