mirror of
https://github.com/langgenius/dify.git
synced 2026-04-14 16:08:01 +08:00
61 lines
2.3 KiB
TypeScript
61 lines
2.3 KiB
TypeScript
'use client'
|
|
import type { FC } from 'react'
|
|
import React from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import {
|
|
RiArrowRightUpLine,
|
|
} from '@remixicon/react'
|
|
import PlanComp from '../plan'
|
|
import { useAppContext } from '@/context/app-context'
|
|
import { useProviderContext } from '@/context/provider-context'
|
|
import { useBillingUrl } from '@/service/use-billing'
|
|
import { useAsyncWindowOpen } from '@/hooks/use-async-window-open'
|
|
|
|
const Billing: FC = () => {
|
|
const { t } = useTranslation()
|
|
const { isCurrentWorkspaceManager } = useAppContext()
|
|
const { enableBilling } = useProviderContext()
|
|
const { data: billingUrl, isFetching, refetch } = useBillingUrl(enableBilling && isCurrentWorkspaceManager)
|
|
const openAsyncWindow = useAsyncWindowOpen()
|
|
|
|
const handleOpenBilling = async () => {
|
|
await openAsyncWindow(async () => {
|
|
const url = (await refetch()).data
|
|
if (url)
|
|
return url
|
|
return null
|
|
}, {
|
|
immediateUrl: billingUrl,
|
|
features: 'noopener,noreferrer',
|
|
onError: (err) => {
|
|
console.error('Failed to fetch billing url', err)
|
|
},
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<PlanComp loc={'billing-page'} />
|
|
{enableBilling && isCurrentWorkspaceManager && (
|
|
<button
|
|
type='button'
|
|
className='mt-3 flex w-full items-center justify-between rounded-xl bg-background-section-burn px-4 py-3'
|
|
onClick={handleOpenBilling}
|
|
disabled={isFetching}
|
|
>
|
|
<div className='flex flex-col gap-0.5 text-left'>
|
|
<div className='system-md-semibold text-text-primary'>{t('billing.viewBillingTitle')}</div>
|
|
<div className='system-sm-regular text-text-secondary'>{t('billing.viewBillingDescription')}</div>
|
|
</div>
|
|
<span className='inline-flex h-8 w-24 items-center justify-center gap-0.5 rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-3 py-2 text-saas-dify-blue-accessible shadow-[0_1px_2px_rgba(9,9,11,0.05)] backdrop-blur-[5px]'>
|
|
<span className='system-sm-medium leading-[1]'>{t('billing.viewBillingAction')}</span>
|
|
<RiArrowRightUpLine className='h-4 w-4' />
|
|
</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default React.memo(Billing)
|