Merge main HEAD (segment 5) into sandboxed-agent-rebase

Resolve 83 conflicts: 10 backend, 62 frontend, 11 config/lock files.
Preserve sandbox/agent/collaboration features while adopting main's
UI refactorings (Dialog/AlertDialog/Popover), model provider updates,
and enterprise features.

Made-with: Cursor

web/app/components/billing/partner-stack/__tests__/use-ps-info.spec.tsx

@@ -48,7 +48,7 @@ vi.mock('js-cookie', () => {
     remove,
   }
 })
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useSearchParams: () => ({
     get: (key: string) => searchParamsValues[key] ?? null,
   }),

web/app/components/billing/partner-stack/use-ps-info.ts

@@ -1,8 +1,8 @@
 import { useBoolean } from 'ahooks'
 import Cookies from 'js-cookie'
-import { useSearchParams } from 'next/navigation'
 import { useCallback } from 'react'
 import { PARTNER_STACK_CONFIG } from '@/config'
+import { useSearchParams } from '@/next/navigation'
 import { useBindPartnerStackInfo } from '@/service/use-billing'
 
 const usePSInfo = () => {

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

@@ -7,7 +7,7 @@ let currentPath = '/billing'
 
 const push = vi.fn()
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push }),
   usePathname: () => currentPath,
 }))

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

@@ -7,7 +7,6 @@ import {
   RiGroupLine,
 } from '@remixicon/react'
 import { useUnmountedRef } from 'ahooks'
-import { usePathname, useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -19,6 +18,7 @@ import VerifyStateModal from '@/app/education-apply/verify-state-modal'
 import { useAppContext } from '@/context/app-context'
 import { useModalContextSelector } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
+import { usePathname, useRouter } from '@/next/navigation'
 import { useEducationVerify } from '@/service/use-education'
 import { getDaysUntilEndOfMonth } from '@/utils/time'
 import { Loading } from '../../base/icons/src/public/thought'

web/app/components/billing/pricing/__tests__/dialog.spec.tsx

@@ -0,0 +1,93 @@
+import type { ReactNode } from 'react'
+import type { Mock } from 'vitest'
+import type { UsagePlanInfo } from '../../type'
+import { render } from '@testing-library/react'
+import { useAppContext } from '@/context/app-context'
+import { useGetPricingPageLanguage } from '@/context/i18n'
+import { useProviderContext } from '@/context/provider-context'
+import { Plan } from '../../type'
+import Pricing from '../index'
+
+type DialogProps = {
+  children: ReactNode
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+let latestOnOpenChange: DialogProps['onOpenChange']
+
+vi.mock('@/app/components/base/ui/dialog', () => ({
+  Dialog: ({ children, onOpenChange }: DialogProps) => {
+    latestOnOpenChange = onOpenChange
+    return <div data-testid="dialog">{children}</div>
+  },
+  DialogContent: ({ children, className }: { children: ReactNode, className?: string }) => (
+    <div className={className}>{children}</div>
+  ),
+}))
+
+vi.mock('../header', () => ({
+  default: ({ onClose }: { onClose: () => void }) => (
+    <button data-testid="pricing-header-close" onClick={onClose}>close</button>
+  ),
+}))
+
+vi.mock('../plan-switcher', () => ({
+  default: () => <div>plan-switcher</div>,
+}))
+
+vi.mock('../plans', () => ({
+  default: () => <div>plans</div>,
+}))
+
+vi.mock('../footer', () => ({
+  default: () => <div>footer</div>,
+}))
+
+vi.mock('@/context/app-context', () => ({
+  useAppContext: vi.fn(),
+}))
+
+vi.mock('@/context/provider-context', () => ({
+  useProviderContext: vi.fn(),
+}))
+
+vi.mock('@/context/i18n', () => ({
+  useGetPricingPageLanguage: vi.fn(),
+}))
+
+const buildUsage = (): UsagePlanInfo => ({
+  buildApps: 0,
+  teamMembers: 0,
+  annotatedResponse: 0,
+  documentsUploadQuota: 0,
+  apiRateLimit: 0,
+  triggerEvents: 0,
+  vectorSpace: 0,
+})
+
+describe('Pricing dialog lifecycle', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    latestOnOpenChange = undefined
+    ;(useAppContext as Mock).mockReturnValue({ isCurrentWorkspaceManager: true })
+    ;(useProviderContext as Mock).mockReturnValue({
+      plan: {
+        type: Plan.sandbox,
+        usage: buildUsage(),
+        total: buildUsage(),
+      },
+    })
+    ;(useGetPricingPageLanguage as Mock).mockReturnValue('en')
+  })
+
+  it('should only call onCancel when the dialog requests closing', () => {
+    const onCancel = vi.fn()
+    render(<Pricing onCancel={onCancel} />)
+
+    latestOnOpenChange?.(true)
+    latestOnOpenChange?.(false)
+
+    expect(onCancel).toHaveBeenCalledTimes(1)
+  })
+})

web/app/components/billing/pricing/__tests__/footer.spec.tsx

@@ -1,9 +1,9 @@
 import { render, screen } from '@testing-library/react'
 import * as React from 'react'
-import { CategoryEnum } from '..'
 import Footer from '../footer'
+import { CategoryEnum } from '../types'
 
-vi.mock('next/link', () => ({
+vi.mock('@/next/link', () => ({
   default: ({ children, href, className, target }: { children: React.ReactNode, href: string, className?: string, target?: string }) => (
     <a href={href} className={className} target={target} data-testid="pricing-link">
       {children}

web/app/components/billing/pricing/__tests__/header.spec.tsx

@@ -1,7 +1,16 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
+import { Dialog } from '@/app/components/base/ui/dialog'
 import Header from '../header'
 
+function renderHeader(onClose: () => void) {
+  return render(
+    <Dialog open>
+      <Header onClose={onClose} />
+    </Dialog>,
+  )
+}
+
 describe('Header', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -11,7 +20,7 @@ describe('Header', () => {
     it('should render title and description translations', () => {
       const handleClose = vi.fn()
 
-      render(<Header onClose={handleClose} />)
+      renderHeader(handleClose)
 
       expect(screen.getByText('billing.plansCommon.title.plans')).toBeInTheDocument()
       expect(screen.getByText('billing.plansCommon.title.description')).toBeInTheDocument()
@@ -22,7 +31,7 @@ describe('Header', () => {
   describe('Props', () => {
     it('should invoke onClose when close button is clicked', () => {
       const handleClose = vi.fn()
-      render(<Header onClose={handleClose} />)
+      renderHeader(handleClose)
 
       fireEvent.click(screen.getByRole('button'))
 
@@ -32,7 +41,7 @@ describe('Header', () => {
 
   describe('Edge Cases', () => {
     it('should render structural elements with translation keys', () => {
-      const { container } = render(<Header onClose={vi.fn()} />)
+      const { container } = renderHeader(vi.fn())
 
       expect(container.querySelector('span')).toBeInTheDocument()
       expect(container.querySelector('p')).toBeInTheDocument()

web/app/components/billing/pricing/__tests__/index.spec.tsx

@@ -19,7 +19,7 @@ vi.mock('../plans/self-hosted-plan-item/list', () => ({
   ),
 }))
 
-vi.mock('next/link', () => ({
+vi.mock('@/next/link', () => ({
   default: ({ children, href, className, target }: { children: React.ReactNode, href: string, className?: string, target?: string }) => (
     <a href={href} className={className} target={target} data-testid="pricing-link">
       {children}
@@ -74,15 +74,11 @@ describe('Pricing', () => {
   })
 
   describe('Props', () => {
-    it('should allow switching categories and handle esc key', () => {
-      const handleCancel = vi.fn()
-      render(<Pricing onCancel={handleCancel} />)
+    it('should allow switching categories', () => {
+      render(<Pricing onCancel={vi.fn()} />)
 
       fireEvent.click(screen.getByText('billing.plansCommon.self'))
       expect(screen.queryByRole('switch')).not.toBeInTheDocument()
-
-      fireEvent.keyDown(window, { key: 'Escape', keyCode: 27 })
-      expect(handleCancel).toHaveBeenCalled()
     })
   })
 

web/app/components/billing/pricing/footer.tsx

@@ -1,10 +1,9 @@
-import type { Category } from '.'
-import { RiArrowRightUpLine } from '@remixicon/react'
-import Link from 'next/link'
+import type { Category } from './types'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import Link from '@/next/link'
 import { cn } from '@/utils/classnames'
-import { CategoryEnum } from '.'
+import { CategoryEnum } from './types'
 
 type FooterProps = {
   pricingPageURL: string
@@ -34,7 +33,7 @@ const Footer = ({
           >
             {t('plansCommon.comparePlanAndFeatures', { ns: 'billing' })}
           </Link>
-          <RiArrowRightUpLine className="size-4" />
+          <span aria-hidden="true" className="i-ri-arrow-right-up-line size-4" />
         </span>
       </div>
     </div>

web/app/components/billing/pricing/header.module.css

@@ -0,0 +1,24 @@
+.instrumentSerif {
+  font-family: "Instrument Serif", serif;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Instrument Serif";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./InstrumentSerif-Italic-Latin.woff2") format("woff2");
+  unicode-range:
+    U+0000-00FF,
+    U+0100-024F,
+    U+0259,
+    U+0300-036F,
+    U+1E00-1EFF,
+    U+2010-205E,
+    U+20A0-20CF,
+    U+2113,
+    U+2212,
+    U+2C60-2C7F,
+    U+A720-A7FF;
+}

web/app/components/billing/pricing/header.tsx

@@ -1,8 +1,9 @@
-import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import { cn } from '@/utils/classnames'
 import Button from '../../base/button'
 import DifyLogo from '../../base/logo/dify-logo'
+import styles from './header.module.css'
 
 type HeaderProps = {
   onClose: () => void
@@ -20,7 +21,12 @@ const Header = ({
           <div className="py-[5px]">
             <DifyLogo className="h-[27px] w-[60px]" />
           </div>
-          <span className="bg-billing-plan-title-bg bg-clip-text px-1.5 font-instrument text-[37px] italic leading-[1.2] text-transparent">
+          <span
+            className={cn(
+              'bg-billing-plan-title-bg bg-clip-text px-1.5 text-[37px] leading-[1.2] text-transparent',
+              styles.instrumentSerif,
+            )}
+          >
             {t('plansCommon.title.plans', { ns: 'billing' })}
           </span>
         </div>
@@ -32,7 +38,7 @@ const Header = ({
           className="absolute bottom-[40.5px] right-[-18px] z-10 size-9 rounded-full p-2"
           onClick={onClose}
         >
-          <RiCloseLine className="size-5" />
+          <span aria-hidden="true" className="i-ri-close-line size-5" />
         </Button>
       </div>
     </div>

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

@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
-import { useKeyPress } from 'ahooks'
+import type { Category } from './types'
 import * as React from 'react'
 import { useState } from 'react'
-import { createPortal } from 'react-dom'
+import { Dialog, DialogContent } from '@/app/components/base/ui/dialog'
 import { useAppContext } from '@/context/app-context'
 import { useGetPricingPageLanguage } from '@/context/i18n'
 import { useProviderContext } from '@/context/provider-context'
@@ -13,13 +13,7 @@ import Header from './header'
 import PlanSwitcher from './plan-switcher'
 import { PlanRange } from './plan-switcher/plan-range-switcher'
 import Plans from './plans'
-
-export enum CategoryEnum {
-  CLOUD = 'cloud',
-  SELF = 'self',
-}
-
-export type Category = CategoryEnum.CLOUD | CategoryEnum.SELF
+import { CategoryEnum } from './types'
 
 type PricingProps = {
   onCancel: () => void
@@ -33,42 +27,47 @@ const Pricing: FC<PricingProps> = ({
   const [planRange, setPlanRange] = React.useState<PlanRange>(PlanRange.monthly)
   const [currentCategory, setCurrentCategory] = useState<Category>(CategoryEnum.CLOUD)
   const canPay = isCurrentWorkspaceManager
-  useKeyPress(['esc'], onCancel)
 
   const pricingPageLanguage = useGetPricingPageLanguage()
   const pricingPageURL = pricingPageLanguage
     ? `https://dify.ai/${pricingPageLanguage}/pricing#plans-and-features`
     : 'https://dify.ai/pricing#plans-and-features'
 
-  return createPortal(
-    <div
-      className="fixed inset-0 bottom-0 left-0 right-0 top-0 z-[1000] overflow-auto bg-saas-background"
-      onClick={e => e.stopPropagation()}
+  return (
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open)
+          onCancel()
+      }}
     >
-      <div className="relative grid min-h-full min-w-[1200px] grid-rows-[1fr_auto_auto_1fr] overflow-hidden">
-        <div className="absolute -top-12 left-0 right-0 -z-10">
-          <NoiseTop />
+      <DialogContent
+        className="inset-0 h-full max-h-none w-full max-w-none translate-x-0 translate-y-0 overflow-auto rounded-none border-none bg-saas-background p-0 shadow-none"
+      >
+        <div className="relative grid min-h-full min-w-[1200px] grid-rows-[1fr_auto_auto_1fr] overflow-hidden">
+          <div className="absolute -top-12 left-0 right-0 -z-10">
+            <NoiseTop />
+          </div>
+          <Header onClose={onCancel} />
+          <PlanSwitcher
+            currentCategory={currentCategory}
+            onChangeCategory={setCurrentCategory}
+            currentPlanRange={planRange}
+            onChangePlanRange={setPlanRange}
+          />
+          <Plans
+            plan={plan}
+            currentPlan={currentCategory}
+            planRange={planRange}
+            canPay={canPay}
+          />
+          <Footer pricingPageURL={pricingPageURL} currentCategory={currentCategory} />
+          <div className="absolute -bottom-12 left-0 right-0 -z-10">
+            <NoiseBottom />
+          </div>
         </div>
-        <Header onClose={onCancel} />
-        <PlanSwitcher
-          currentCategory={currentCategory}
-          onChangeCategory={setCurrentCategory}
-          currentPlanRange={planRange}
-          onChangePlanRange={setPlanRange}
-        />
-        <Plans
-          plan={plan}
-          currentPlan={currentCategory}
-          planRange={planRange}
-          canPay={canPay}
-        />
-        <Footer pricingPageURL={pricingPageURL} currentCategory={currentCategory} />
-        <div className="absolute -bottom-12 left-0 right-0 -z-10">
-          <NoiseBottom />
-        </div>
-      </div>
-    </div>,
-    document.body,
+      </DialogContent>
+    </Dialog>
   )
 }
 export default React.memo(Pricing)

web/app/components/billing/pricing/plan-switcher/__tests__/index.spec.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
-import { CategoryEnum } from '../../index'
+import { CategoryEnum } from '../../types'
 import PlanSwitcher from '../index'
 import { PlanRange } from '../plan-range-switcher'
 

web/app/components/billing/pricing/plan-switcher/index.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import type { Category } from '../index'
+import type { Category } from '../types'
 import type { PlanRange } from './plan-range-switcher'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'

web/app/components/billing/pricing/plans/cloud-plan-item/__tests__/index.spec.tsx

@@ -1,22 +1,16 @@
 import type { Mock } from 'vitest'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
+import { toast, ToastHost } from '@/app/components/base/ui/toast'
 import { useAppContext } from '@/context/app-context'
 import { useAsyncWindowOpen } from '@/hooks/use-async-window-open'
 import { fetchSubscriptionUrls } from '@/service/billing'
 import { consoleClient } from '@/service/client'
-import Toast from '../../../../../base/toast'
 import { ALL_PLANS } from '../../../../config'
 import { Plan } from '../../../../type'
 import { PlanRange } from '../../../plan-switcher/plan-range-switcher'
 import CloudPlanItem from '../index'
 
-vi.mock('../../../../../base/toast', () => ({
-  default: {
-    notify: vi.fn(),
-  },
-}))
-
 vi.mock('@/context/app-context', () => ({
   useAppContext: vi.fn(),
 }))
@@ -47,11 +41,19 @@ const mockUseAppContext = useAppContext as Mock
 const mockUseAsyncWindowOpen = useAsyncWindowOpen as Mock
 const mockBillingInvoices = consoleClient.billing.invoices as Mock
 const mockFetchSubscriptionUrls = fetchSubscriptionUrls as Mock
-const mockToastNotify = Toast.notify as Mock
 
 let assignedHref = ''
 const originalLocation = window.location
 
+const renderWithToastHost = (ui: React.ReactNode) => {
+  return render(
+    <>
+      <ToastHost timeout={0} />
+      {ui}
+    </>,
+  )
+}
+
 beforeAll(() => {
   Object.defineProperty(window, 'location', {
     configurable: true,
@@ -68,6 +70,7 @@ beforeAll(() => {
 
 beforeEach(() => {
   vi.clearAllMocks()
+  toast.dismiss()
   mockUseAppContext.mockReturnValue({ isCurrentWorkspaceManager: true })
   mockUseAsyncWindowOpen.mockReturnValue(vi.fn(async open => await open()))
   mockBillingInvoices.mockResolvedValue({ url: 'https://billing.example' })
@@ -163,7 +166,7 @@ describe('CloudPlanItem', () => {
     it('should show toast when non-manager tries to buy a plan', () => {
       mockUseAppContext.mockReturnValue({ isCurrentWorkspaceManager: false })
 
-      render(
+      renderWithToastHost(
         <CloudPlanItem
           plan={Plan.professional}
           currentPlan={Plan.sandbox}
@@ -173,10 +176,7 @@ describe('CloudPlanItem', () => {
       )
 
       fireEvent.click(screen.getByRole('button', { name: 'billing.plansCommon.startBuilding' }))
-      expect(mockToastNotify).toHaveBeenCalledWith(expect.objectContaining({
-        type: 'error',
-        message: 'billing.buyPermissionDeniedTip',
-      }))
+      expect(screen.getByText('billing.buyPermissionDeniedTip')).toBeInTheDocument()
       expect(mockBillingInvoices).not.toHaveBeenCalled()
     })
 

web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx

@@ -4,11 +4,11 @@ import type { BasicPlan } from '../../../type'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
+import { toast } from '@/app/components/base/ui/toast'
 import { useAppContext } from '@/context/app-context'
 import { useAsyncWindowOpen } from '@/hooks/use-async-window-open'
 import { fetchSubscriptionUrls } from '@/service/billing'
 import { consoleClient } from '@/service/client'
-import Toast from '../../../../base/toast'
 import { ALL_PLANS } from '../../../config'
 import { Plan } from '../../../type'
 import { Professional, Sandbox, Team } from '../../assets'
@@ -66,11 +66,7 @@ const CloudPlanItem: FC<CloudPlanItemProps> = ({
       return
 
     if (!isCurrentWorkspaceManager) {
-      Toast.notify({
-        type: 'error',
-        message: t('buyPermissionDeniedTip', { ns: 'billing' }),
-        className: 'z-[1001]',
-      })
+      toast.error(t('buyPermissionDeniedTip', { ns: 'billing' }))
       return
     }
     setLoading(true)
@@ -83,7 +79,7 @@ const CloudPlanItem: FC<CloudPlanItemProps> = ({
           throw new Error('Failed to open billing page')
         }, {
           onError: (err) => {
-            Toast.notify({ type: 'error', message: err.message || String(err) })
+            toast.error(err.message || String(err))
           },
         })
         return

web/app/components/billing/pricing/plans/self-hosted-plan-item/__tests__/index.spec.tsx

@@ -1,8 +1,8 @@
 import type { Mock } from 'vitest'
 import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
+import { toast, ToastHost } from '@/app/components/base/ui/toast'
 import { useAppContext } from '@/context/app-context'
-import Toast from '../../../../../base/toast'
 import { contactSalesUrl, getStartedWithCommunityUrl, getWithPremiumUrl } from '../../../../config'
 import { SelfHostedPlan } from '../../../../type'
 import SelfHostedPlanItem from '../index'
@@ -16,12 +16,6 @@ vi.mock('../list', () => ({
   ),
 }))
 
-vi.mock('../../../../../base/toast', () => ({
-  default: {
-    notify: vi.fn(),
-  },
-}))
-
 vi.mock('@/context/app-context', () => ({
   useAppContext: vi.fn(),
 }))
@@ -35,11 +29,19 @@ vi.mock('../../../assets', () => ({
 }))
 
 const mockUseAppContext = useAppContext as Mock
-const mockToastNotify = Toast.notify as Mock
 
 let assignedHref = ''
 const originalLocation = window.location
 
+const renderWithToastHost = (ui: React.ReactNode) => {
+  return render(
+    <>
+      <ToastHost timeout={0} />
+      {ui}
+    </>,
+  )
+}
+
 beforeAll(() => {
   Object.defineProperty(window, 'location', {
     configurable: true,
@@ -56,6 +58,7 @@ beforeAll(() => {
 
 beforeEach(() => {
   vi.clearAllMocks()
+  toast.dismiss()
   mockUseAppContext.mockReturnValue({ isCurrentWorkspaceManager: true })
   assignedHref = ''
 })
@@ -90,13 +93,10 @@ describe('SelfHostedPlanItem', () => {
     it('should show toast when non-manager tries to proceed', () => {
       mockUseAppContext.mockReturnValue({ isCurrentWorkspaceManager: false })
 
-      render(<SelfHostedPlanItem plan={SelfHostedPlan.premium} />)
+      renderWithToastHost(<SelfHostedPlanItem plan={SelfHostedPlan.premium} />)
       fireEvent.click(screen.getByRole('button', { name: /billing\.plans\.premium\.btnText/ }))
 
-      expect(mockToastNotify).toHaveBeenCalledWith(expect.objectContaining({
-        type: 'error',
-        message: 'billing.buyPermissionDeniedTip',
-      }))
+      expect(screen.getByText('billing.buyPermissionDeniedTip')).toBeInTheDocument()
     })
 
     it('should redirect to community url when community plan button clicked', () => {

web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx

@@ -4,9 +4,9 @@ import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Azure, GoogleCloud } from '@/app/components/base/icons/src/public/billing'
+import { toast } from '@/app/components/base/ui/toast'
 import { useAppContext } from '@/context/app-context'
 import { cn } from '@/utils/classnames'
-import Toast from '../../../../base/toast'
 import { contactSalesUrl, getStartedWithCommunityUrl, getWithPremiumUrl } from '../../../config'
 import { SelfHostedPlan } from '../../../type'
 import { Community, Enterprise, EnterpriseNoise, Premium, PremiumNoise } from '../../assets'
@@ -56,11 +56,7 @@ const SelfHostedPlanItem: FC<SelfHostedPlanItemProps> = ({
   const handleGetPayUrl = useCallback(() => {
     // Only workspace manager can buy plan
     if (!isCurrentWorkspaceManager) {
-      Toast.notify({
-        type: 'error',
-        message: t('buyPermissionDeniedTip', { ns: 'billing' }),
-        className: 'z-[1001]',
-      })
+      toast.error(t('buyPermissionDeniedTip', { ns: 'billing' }))
       return
     }
     if (isFreePlan) {

web/app/components/billing/pricing/types.ts

@@ -0,0 +1,6 @@
+export enum CategoryEnum {
+  CLOUD = 'cloud',
+  SELF = 'self',
+}
+
+export type Category = CategoryEnum.CLOUD | CategoryEnum.SELF