feat: add billing switch. (#1789)

Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
This commit is contained in:
Garfield Dai
2023-12-20 15:37:57 +08:00
committed by GitHub
parent 022450768f
commit 7b37e05dec
16 changed files with 152 additions and 75 deletions

View File

@@ -10,12 +10,16 @@ import { contactSalesUrl } from '@/app/components/billing/config'
const CustomPage = () => {
const { t } = useTranslation()
const { plan } = useProviderContext()
const { plan, enableBilling } = useProviderContext()
const showBillingTip = enableBilling && plan.type === Plan.sandbox
const showCustomAppHeaderBrand = enableBilling && plan.type === Plan.sandbox
const showContact = enableBilling && (plan.type === Plan.professional || plan.type === Plan.team)
return (
<div className='flex flex-col'>
{
plan.type === Plan.sandbox && (
showBillingTip && (
<GridMask canvasClassName='!rounded-xl'>
<div className='flex justify-between mb-1 px-6 py-5 h-[88px] shadow-md rounded-xl border-[0.5px] border-gray-200'>
<div className={`${s.textGradient} leading-[24px] text-base font-semibold`}>
@@ -29,7 +33,7 @@ const CustomPage = () => {
}
<CustomWebAppBrand />
{
plan.type === Plan.sandbox && (
showCustomAppHeaderBrand && (
<>
<div className='my-2 h-[0.5px] bg-gray-100'></div>
<CustomAppHeaderBrand />
@@ -37,7 +41,7 @@ const CustomPage = () => {
)
}
{
(plan.type === Plan.professional || plan.type === Plan.team) && (
showContact && (
<div className='absolute bottom-0 h-[50px] leading-[50px] text-xs text-gray-500'>
{t('custom.customize.prefix')}
<a className='text-[#155EEF]' href={contactSalesUrl} target='_blank'>{t('custom.customize.contactUs')}</a>

View File

@@ -24,7 +24,7 @@ const ALLOW_FILE_EXTENSIONS = ['svg', 'png']
const CustomWebAppBrand = () => {
const { t } = useTranslation()
const { notify } = useToastContext()
const { plan } = useProviderContext()
const { plan, enableBilling } = useProviderContext()
const {
currentWorkspace,
mutateCurrentWorkspace,
@@ -32,10 +32,11 @@ const CustomWebAppBrand = () => {
} = useAppContext()
const [fileId, setFileId] = useState('')
const [uploadProgress, setUploadProgress] = useState(0)
const isSandbox = plan.type === Plan.sandbox
const isSandbox = enableBilling && plan.type === Plan.sandbox
const uploading = uploadProgress > 0 && uploadProgress < 100
const webappLogo = currentWorkspace.custom_config?.replace_webapp_logo || ''
const webappBrandRemoved = currentWorkspace.custom_config?.remove_webapp_brand
const uploadDisabled = isSandbox || webappBrandRemoved || !isCurrentWorkspaceManager
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0]
@@ -153,9 +154,9 @@ const CustomWebAppBrand = () => {
<Button
className={`
relative mr-2 !h-8 !px-3 bg-white !text-[13px]
${isSandbox ? 'opacity-40' : ''}
${uploadDisabled ? 'opacity-40' : ''}
`}
disabled={isSandbox || webappBrandRemoved || !isCurrentWorkspaceManager}
disabled={uploadDisabled}
>
<ImagePlus className='mr-2 w-4 h-4' />
{
@@ -166,13 +167,13 @@ const CustomWebAppBrand = () => {
<input
className={`
absolute block inset-0 opacity-0 text-[0] w-full
${(isSandbox || webappBrandRemoved) ? 'cursor-not-allowed' : 'cursor-pointer'}
${uploadDisabled ? 'cursor-not-allowed' : 'cursor-pointer'}
`}
onClick={e => (e.target as HTMLInputElement).value = ''}
type='file'
accept={ALLOW_FILE_EXTENSIONS.map(ext => `.${ext}`).join(',')}
onChange={handleChange}
disabled={isSandbox || webappBrandRemoved || !isCurrentWorkspaceManager}
disabled={uploadDisabled}
/>
</Button>
)
@@ -213,9 +214,9 @@ const CustomWebAppBrand = () => {
<Button
className={`
!h-8 !px-3 bg-white !text-[13px]
${isSandbox ? 'opacity-40' : ''}
${(uploadDisabled || (!webappLogo && !webappBrandRemoved)) ? 'opacity-40' : ''}
`}
disabled={isSandbox || (!webappLogo && !webappBrandRemoved) || webappBrandRemoved || !isCurrentWorkspaceManager}
disabled={uploadDisabled || (!webappLogo && !webappBrandRemoved)}
onClick={handleRestore}
>
{t('custom.restore')}