Fix/upgrade btn show logic (#14072)

web/app/components/header/index.tsx

@@ -4,8 +4,6 @@ import Link from 'next/link'
 import { useBoolean } from 'ahooks'
 import { useSelectedLayoutSegment } from 'next/navigation'
 import { Bars3Icon } from '@heroicons/react/20/solid'
-import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
-import PremiumBadge from '../base/premium-badge'
 import AccountDropdown from './account-dropdown'
 import AppNav from './app-nav'
 import DatasetNav from './dataset-nav'
@@ -13,7 +11,6 @@ import EnvNav from './env-nav'
 import PluginsNav from './plugins-nav'
 import ExploreNav from './explore-nav'
 import ToolsNav from './tools-nav'
-import LicenseNav from './license-env'
 import { WorkspaceProvider } from '@/context/workspace-context'
 import { useAppContext } from '@/context/app-context'
 import LogoSite from '@/app/components/base/logo/logo-site'
@@ -21,7 +18,9 @@ import WorkplaceSelector from '@/app/components/header/account-dropdown/workplac
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { useProviderContext } from '@/context/provider-context'
 import { useModalContext } from '@/context/modal-context'
-import { useTranslation } from 'react-i18next'
+import LicenseNav from './license-env'
+import PlanBadge from './plan-badge'
+import { Plan } from '../billing/type'
 
 const navClassName = `
   flex items-center relative mr-0 sm:mr-3 px-3 h-8 rounded-xl
@@ -31,15 +30,13 @@ const navClassName = `
 
 const Header = () => {
   const { isCurrentWorkspaceEditor, isCurrentWorkspaceDatasetOperator } = useAppContext()
-  const { t } = useTranslation()
-
   const selectedSegment = useSelectedLayoutSegment()
   const media = useBreakpoints()
   const isMobile = media === MediaType.mobile
   const [isShowNavMenu, { toggle, setFalse: hideNavMenu }] = useBoolean(false)
   const { enableBilling, plan } = useProviderContext()
   const { setShowPricingModal, setShowAccountSettingModal } = useModalContext()
-  const isFreePlan = plan.type === 'sandbox'
+  const isFreePlan = plan.type === Plan.sandbox
   const handlePlanClick = useCallback(() => {
     if (isFreePlan)
       setShowPricingModal()
@@ -71,18 +68,7 @@ const Header = () => {
               <WorkspaceProvider>
                 <WorkplaceSelector />
               </WorkspaceProvider>
-              {enableBilling && (
-                <div className='select-none'>
-                  <PremiumBadge color='blue' allowHover={true} onClick={handlePlanClick}>
-                    <SparklesSoft className='flex items-center py-[1px] pl-[3px] w-3.5 h-3.5 text-components-premium-badge-indigo-text-stop-0' />
-                    <div className='system-xs-medium'>
-                      <span className='p-1'>
-                        {t('billing.upgradeBtn.encourageShort')}
-                      </span>
-                    </div>
-                  </PremiumBadge>
-                </div>
-              )}
+              {enableBilling ? <PlanBadge allowHover sandboxAsUpgrade plan={plan.type} onClick={handlePlanClick} /> : <LicenseNav />}
             </div>
           </div>
         }
@@ -93,20 +79,7 @@ const Header = () => {
             <LogoSite />
           </Link>
           <div className='font-light text-divider-deep'>/</div>
-          {
-            enableBilling && (
-              <div className='select-none'>
-                <PremiumBadge color='blue' allowHover={true} onClick={handlePlanClick}>
-                  <SparklesSoft className='flex items-center py-[1px] pl-[3px] w-3.5 h-3.5 text-components-premium-badge-indigo-text-stop-0' />
-                  <div className='system-xs-medium'>
-                    <span className='p-1'>
-                      {t('billing.upgradeBtn.encourageShort')}
-                    </span>
-                  </div>
-                </PremiumBadge>
-              </div>
-            )
-          }
+          {enableBilling ? <PlanBadge allowHover sandboxAsUpgrade plan={plan.type} onClick={handlePlanClick} /> : <LicenseNav />}
         </div >
       )}
       {
@@ -120,7 +93,6 @@ const Header = () => {
         )
       }
       <div className='flex items-center shrink-0'>
-        <LicenseNav />
         <EnvNav />
         <div className='mr-3'>
           <PluginsNav />