'use client' import type { FC, ReactNode } from 'react' import React from 'react' import { useTranslation } from 'react-i18next' import { RiAsterisk, RiBrain2Line, RiBuildingLine, RiCheckLine, RiQuestionLine, RiVipDiamondLine } from '@remixicon/react' import { SelfHostedPlan } from '../type' import { contactSalesUrl } from '../config' import Toast from '../../base/toast' import Tooltip from '../../base/tooltip' import { PlanRange } from './select-plan-range' import cn from '@/utils/classnames' import { useAppContext } from '@/context/app-context' import { fetchSubscriptionUrls } from '@/service/billing' type Props = { plan: SelfHostedPlan planRange: PlanRange canPay: boolean } const AWSMarketplaceLogo = () => { return } const AzureIcon = () => { return } const GoogleCloudIcon = () => { return } const KeyValue = ({ label, tooltip }: { icon: ReactNode; label: string; tooltip?: string }) => { return (

{label}

{tooltip && (

)}

) } const style = { [SelfHostedPlan.community]: { icon: , description: 'text-util-colors-gray-gray-600', btnStyle: 'bg-components-button-secondary-bg hover:bg-components-button-secondary-bg-hover border-[0.5px] border-components-button-secondary-border text-text-primary', }, [SelfHostedPlan.premium]: { icon: , description: 'text-text-warning', btnStyle: 'bg-third-party-aws hover:bg-third-party-aws-hover border border-components-button-primary-border text-text-primary-on-surface shadow-xs', }, [SelfHostedPlan.enterprise]: { icon: , description: '', btnStyle: 'hover:shadow-lg hover:!text-white hover:!bg-[#F79009] hover:!border-[#DC6803] active:!text-white active:!bg-[#DC6803] active:!border-[#DC6803]', }, } const PlanItem: FC = ({ plan, planRange, }) => { const { t } = useTranslation() const isFreePlan = plan === SelfHostedPlan.community const isPremiumPlan = plan === SelfHostedPlan.premium const [loading, setLoading] = React.useState(false) const i18nPrefix = `billing.plans.${plan}` const isEnterprisePlan = plan === SelfHostedPlan.enterprise const isYear = planRange === PlanRange.yearly const { isCurrentWorkspaceManager } = useAppContext() const features = t(`${i18nPrefix}.features`, { returnObjects: true }) as string[] const handleGetPayUrl = async () => { if (loading) return if (isEnterprisePlan) { window.location.href = contactSalesUrl return } // Only workspace manager can buy plan if (!isCurrentWorkspaceManager) { Toast.notify({ type: 'error', message: t('billing.buyPermissionDeniedTip'), className: 'z-[1001]', }) return } setLoading(true) try { const res = await fetchSubscriptionUrls(plan, isYear ? 'year' : 'month') // Adb Block additional tracking block the gtag, so we need to redirect directly window.location.href = res.url } finally { setLoading(false) } } return (

{style[plan].icon}

{t(`${i18nPrefix}.name`)}

{t(`${i18nPrefix}.description`)}

{t(`${i18nPrefix}.price`)}

{!isFreePlan &&

{t(`${i18nPrefix}.priceTip`)}

}

{t(`${i18nPrefix}.btnText`)}

{t(`${i18nPrefix}.includesTitle`)}

{features.map(v => } label={v} />)}

{isPremiumPlan &&

{t('billing.plans.premium.comingSoon')}

}

) } export default React.memo(PlanItem)