初始化

wwf

2025-05-20 938c3e5a587ce950a94964ea509b9e7f8834dfae

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
'use client'
import type { FC } from 'react'
import React from 'react'
import UpgradeBtn from '../upgrade-btn'
import { Plan } from '../type'
import cn from '@/utils/classnames'
import { useProviderContext } from '@/context/provider-context'
 
type Props = {
  onClick?: () => void
  isDisplayOnly?: boolean
}
 
const HeaderBillingBtn: FC<Props> = ({
  onClick,
  isDisplayOnly = false,
}) => {
  const { plan, enableBilling, isFetchedPlan } = useProviderContext()
  const {
    type,
  } = plan
 
  const name = (() => {
    if (type === Plan.professional)
      return 'pro'
    return type
  })()
  const classNames = (() => {
    if (type === Plan.professional)
      return `border-[#E0F2FE] ${!isDisplayOnly ? 'hover:border-[#B9E6FE]' : ''} bg-[#E0F2FE] text-[#026AA2]`
    if (type === Plan.team)
      return `border-[#E0EAFF] ${!isDisplayOnly ? 'hover:border-[#C7D7FE]' : ''} bg-[#E0EAFF] text-[#3538CD]`
    return ''
  })()
 
  if (!enableBilling || !isFetchedPlan)
    return null
 
  if (type === Plan.sandbox)
    return <UpgradeBtn onClick={isDisplayOnly ? undefined : onClick} isShort />
 
  const handleClick = () => {
    if (!isDisplayOnly && onClick)
      onClick()
  }
 
  return (
    <div
      onClick={handleClick}
      className={cn(
        classNames,
        'flex h-[22px] items-center rounded-md border px-2 text-xs font-semibold uppercase',
        isDisplayOnly ? 'cursor-default' : 'cursor-pointer',
      )}
    >
      {name}
    </div>
  )
}
export default React.memo(HeaderBillingBtn)