Chore: frontend infrastructure upgrade (#16420)
Co-authored-by: NFish <douxc512@gmail.com> Co-authored-by: zxhlyh <jasonapring2015@outlook.com> Co-authored-by: twwu <twwu@dify.ai> Co-authored-by: jZonG <jzongcode@gmail.com>
This commit is contained in:
Joel
@@ -35,19 +35,19 @@ const Pricing: FC<Props> = ({
|
||||
|
||||
return createPortal(
|
||||
<div
|
||||
className='fixed inset-0 top-0 right-0 bottom-0 left-0 p-4 bg-background-overlay-backdrop backdrop-blur-[6px] z-[1000]'
|
||||
className='fixed inset-0 bottom-0 left-0 right-0 top-0 z-[1000] bg-background-overlay-backdrop p-4 backdrop-blur-[6px]'
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<div className='w-full h-full relative overflow-auto rounded-2xl border border-effects-highlight bg-saas-background'>
|
||||
<div className='relative h-full w-full overflow-auto rounded-2xl border border-effects-highlight bg-saas-background'>
|
||||
<div
|
||||
className='fixed top-7 right-7 flex items-center justify-center w-9 h-9 bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover rounded-[10px] cursor-pointer z-[1001]'
|
||||
className='fixed right-7 top-7 z-[1001] flex h-9 w-9 cursor-pointer items-center justify-center rounded-[10px] bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover'
|
||||
onClick={onCancel}
|
||||
>
|
||||
<RiCloseLine className='size-5 text-components-button-tertiary-text' />
|
||||
</div>
|
||||
<GridMask wrapperClassName='w-full min-h-full' canvasClassName='min-h-full'>
|
||||
<div className='pt-12 px-8 pb-7 flex flex-col items-center'>
|
||||
<div className='mb-2 title-5xl-bold text-text-primary'>
|
||||
<div className='flex flex-col items-center px-8 pb-7 pt-12'>
|
||||
<div className='title-5xl-bold mb-2 text-text-primary'>
|
||||
{t('billing.plansCommon.title')}
|
||||
</div>
|
||||
<div className='system-sm-regular text-text-secondary'>
|
||||
@@ -56,8 +56,8 @@ const Pricing: FC<Props> = ({
|
||||
<span>{t('billing.plansCommon.freeTrialTipSuffix')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className='w-[1152px] mx-auto'>
|
||||
<div className='py-2 flex items-center justify-between h-[64px]'>
|
||||
<div className='mx-auto w-[1152px]'>
|
||||
<div className='flex h-[64px] items-center justify-between py-2'>
|
||||
<TabSlider
|
||||
value={currentPlan}
|
||||
className='inline-flex'
|
||||
@@ -67,14 +67,14 @@ const Pricing: FC<Props> = ({
|
||||
text: <div className={
|
||||
classNames('inline-flex items-center system-md-semibold-uppercase text-text-secondary',
|
||||
currentPlan === 'cloud' && 'text-text-accent-light-mode-only')} >
|
||||
<RiCloudFill className='size-4 mr-2' />{t('billing.plansCommon.cloud')}</div>,
|
||||
<RiCloudFill className='mr-2 size-4' />{t('billing.plansCommon.cloud')}</div>,
|
||||
},
|
||||
{
|
||||
value: 'self',
|
||||
text: <div className={
|
||||
classNames('inline-flex items-center system-md-semibold-uppercase text-text-secondary',
|
||||
currentPlan === 'self' && 'text-text-accent-light-mode-only')}>
|
||||
<RiTerminalBoxFill className='size-4 mr-2' />{t('billing.plansCommon.self')}</div>,
|
||||
<RiTerminalBoxFill className='mr-2 size-4' />{t('billing.plansCommon.self')}</div>,
|
||||
}]}
|
||||
onChange={v => setCurrentPlan(v)} />
|
||||
|
||||
@@ -83,8 +83,8 @@ const Pricing: FC<Props> = ({
|
||||
onChange={setPlanRange}
|
||||
/>}
|
||||
</div>
|
||||
<div className='pt-3 pb-8'>
|
||||
<div className='flex justify-center flex-nowrap gap-x-4'>
|
||||
<div className='pb-8 pt-3'>
|
||||
<div className='flex flex-nowrap justify-center gap-x-4'>
|
||||
{currentPlan === 'cloud' && <>
|
||||
<PlanItem
|
||||
currentPlan={plan.type}
|
||||
@@ -125,8 +125,8 @@ const Pricing: FC<Props> = ({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='py-4 flex items-center justify-center'>
|
||||
<div className='px-3 py-2 flex items-center justify-center gap-x-0.5 text-components-button-secondary-accent-text rounded-lg hover:bg-state-accent-hover hover:cursor-pointer'>
|
||||
<div className='flex items-center justify-center py-4'>
|
||||
<div className='flex items-center justify-center gap-x-0.5 rounded-lg px-3 py-2 text-components-button-secondary-accent-text hover:cursor-pointer hover:bg-state-accent-hover'>
|
||||
<Link href='https://dify.ai/pricing#plans-and-features' className='system-sm-medium'>{t('billing.plansCommon.comparePlanAndFeatures')}</Link>
|
||||
<RiArrowRightUpLine className='size-4' />
|
||||
</div>
|
||||
|
||||
@@ -24,17 +24,17 @@ type Props = {
|
||||
const KeyValue = ({ icon, label, tooltip }: { icon: ReactNode; label: string; tooltip?: ReactNode }) => {
|
||||
return (
|
||||
<div className='flex text-text-tertiary'>
|
||||
<div className='size-4 flex items-center justify-center'>
|
||||
<div className='flex size-4 items-center justify-center'>
|
||||
{icon}
|
||||
</div>
|
||||
<div className='ml-2 mr-0.5 text-text-primary system-sm-regular'>{label}</div>
|
||||
<div className='system-sm-regular ml-2 mr-0.5 text-text-primary'>{label}</div>
|
||||
{tooltip && (
|
||||
<Tooltip
|
||||
asChild
|
||||
popupContent={tooltip}
|
||||
popupClassName='w-[200px]'
|
||||
>
|
||||
<div className='size-4 flex items-center justify-center'>
|
||||
<div className='flex size-4 items-center justify-center'>
|
||||
<RiQuestionLine className='text-text-quaternary' />
|
||||
</div>
|
||||
</Tooltip>
|
||||
@@ -46,19 +46,19 @@ const KeyValue = ({ icon, label, tooltip }: { icon: ReactNode; label: string; to
|
||||
const priceClassName = 'leading-[125%] text-[28px] font-bold text-text-primary'
|
||||
const style = {
|
||||
[Plan.sandbox]: {
|
||||
icon: <ArCube1 className='text-text-primary size-7' />,
|
||||
icon: <ArCube1 className='size-7 text-text-primary' />,
|
||||
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',
|
||||
btnDisabledStyle: 'bg-components-button-secondary-bg-disabled hover:bg-components-button-secondary-bg-disabled border-components-button-secondary-border-disabled text-components-button-secondary-text-disabled',
|
||||
},
|
||||
[Plan.professional]: {
|
||||
icon: <Keyframe className='text-util-colors-blue-brand-blue-brand-600 size-7' />,
|
||||
icon: <Keyframe className='size-7 text-util-colors-blue-brand-blue-brand-600' />,
|
||||
description: 'text-util-colors-blue-brand-blue-brand-600',
|
||||
btnStyle: 'bg-components-button-primary-bg hover:bg-components-button-primary-bg-hover border border-components-button-primary-border text-components-button-primary-text',
|
||||
btnDisabledStyle: 'bg-components-button-primary-bg-disabled hover:bg-components-button-primary-bg-disabled border-components-button-primary-border-disabled text-components-button-primary-text-disabled',
|
||||
},
|
||||
[Plan.team]: {
|
||||
icon: <Group2 className='text-util-colors-indigo-indigo-600 size-7' />,
|
||||
icon: <Group2 className='size-7 text-util-colors-indigo-indigo-600' />,
|
||||
description: 'text-util-colors-indigo-indigo-600',
|
||||
btnStyle: 'bg-components-button-indigo-bg hover:bg-components-button-indigo-bg-hover border border-components-button-primary-border text-components-button-primary-text',
|
||||
btnDisabledStyle: 'bg-components-button-indigo-bg-disabled hover:bg-components-button-indigo-bg-disabled border-components-button-indigo-border-disabled text-components-button-primary-text-disabled',
|
||||
@@ -121,18 +121,18 @@ const PlanItem: FC<Props> = ({
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div className={cn('flex flex-col w-[373px] p-6 border-[0.5px] border-effects-highlight-lightmode-off bg-background-section-burn rounded-2xl',
|
||||
isMostPopularPlan ? 'shadow-lg backdrop-blur-[5px] border-effects-highlight' : 'hover:shadow-lg hover:backdrop-blur-[5px] hover:border-effects-highlight',
|
||||
<div className={cn('flex w-[373px] flex-col rounded-2xl border-[0.5px] border-effects-highlight-lightmode-off bg-background-section-burn p-6',
|
||||
isMostPopularPlan ? 'border-effects-highlight shadow-lg backdrop-blur-[5px]' : 'hover:border-effects-highlight hover:shadow-lg hover:backdrop-blur-[5px]',
|
||||
)}>
|
||||
<div className='flex flex-col gap-y-1'>
|
||||
{style[plan].icon}
|
||||
<div className='flex items-center'>
|
||||
<div className='leading-[125%] text-lg font-semibold uppercase text-text-primary'>{t(`${i18nPrefix}.name`)}</div>
|
||||
{isMostPopularPlan && <div className='ml-1 px-1 py-[3px] flex items-center justify-center rounded-full border-[0.5px] shadow-xs bg-price-premium-badge-background text-components-premium-badge-grey-text-stop-0'>
|
||||
<div className='text-lg font-semibold uppercase leading-[125%] text-text-primary'>{t(`${i18nPrefix}.name`)}</div>
|
||||
{isMostPopularPlan && <div className='ml-1 flex items-center justify-center rounded-full border-[0.5px] bg-price-premium-badge-background px-1 py-[3px] text-components-premium-badge-grey-text-stop-0 shadow-xs'>
|
||||
<div className='pl-0.5'>
|
||||
<SparklesSoft className='size-3' />
|
||||
</div>
|
||||
<span className='px-0.5 system-2xs-semibold-uppercase bg-clip-text bg-price-premium-text-background text-transparent'>{t('billing.plansCommon.mostPopular')}</span>
|
||||
<span className='system-2xs-semibold-uppercase bg-price-premium-text-background bg-clip-text px-0.5 text-transparent'>{t('billing.plansCommon.mostPopular')}</span>
|
||||
</div>}
|
||||
</div>
|
||||
<div className={cn(style[plan].description, 'system-sm-regular')}>{t(`${i18nPrefix}.description`)}</div>
|
||||
@@ -146,8 +146,8 @@ const PlanItem: FC<Props> = ({
|
||||
<div className='flex items-end'>
|
||||
<div className={priceClassName}>${isYear ? planInfo.price * 10 : planInfo.price}</div>
|
||||
<div className='ml-1 flex flex-col'>
|
||||
{isYear && <div className='leading-[14px] text-[14px] font-normal italic text-text-warning'>{t('billing.plansCommon.save')}${planInfo.price * 2}</div>}
|
||||
<div className='leading-normal text-[14px] font-normal text-text-tertiary'>
|
||||
{isYear && <div className='text-[14px] font-normal italic leading-[14px] text-text-warning'>{t('billing.plansCommon.save')}${planInfo.price * 2}</div>}
|
||||
<div className='text-[14px] font-normal leading-normal text-text-tertiary'>
|
||||
{t('billing.plansCommon.priceTip')}
|
||||
{t(`billing.plansCommon.${!isYear ? 'month' : 'year'}`)}</div>
|
||||
</div>
|
||||
@@ -156,7 +156,7 @@ const PlanItem: FC<Props> = ({
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={cn('flex py-3 px-5 rounded-full justify-center items-center h-[42px]',
|
||||
className={cn('flex h-[42px] items-center justify-center rounded-full px-5 py-3',
|
||||
style[plan].btnStyle,
|
||||
isPlanDisabled && style[plan].btnDisabledStyle,
|
||||
isPlanDisabled ? 'cursor-not-allowed' : 'cursor-pointer')}
|
||||
@@ -164,7 +164,7 @@ const PlanItem: FC<Props> = ({
|
||||
>
|
||||
{btnText}
|
||||
</div>
|
||||
<div className='flex flex-col gap-y-3 mt-6'>
|
||||
<div className='mt-6 flex flex-col gap-y-3'>
|
||||
<KeyValue
|
||||
icon={<RiChatAiLine />}
|
||||
label={isFreePlan
|
||||
|
||||
@@ -38,7 +38,7 @@ const SelectPlanRange: FC<Props> = ({
|
||||
|
||||
return (
|
||||
<div className='relative flex flex-col items-end pr-6'>
|
||||
<div className='text-sm italic bg-clip-text bg-premium-yearly-tip-text-background text-transparent'>{t('billing.plansCommon.yearlyTip')}</div>
|
||||
<div className='bg-premium-yearly-tip-text-background bg-clip-text text-sm italic text-transparent'>{t('billing.plansCommon.yearlyTip')}</div>
|
||||
<div className='flex items-center py-1'>
|
||||
<span className='mr-2 text-[13px]'>{t('billing.plansCommon.annualBilling')}</span>
|
||||
<Switch size='l' defaultValue={value === PlanRange.yearly} onChange={(v) => {
|
||||
|
||||
@@ -21,17 +21,17 @@ type Props = {
|
||||
const KeyValue = ({ label, tooltip, textColor, tooltipIconColor }: { icon: ReactNode; label: string; tooltip?: string; textColor: string; tooltipIconColor: string }) => {
|
||||
return (
|
||||
<div className={cn('flex', textColor)}>
|
||||
<div className='size-4 flex items-center justify-center'>
|
||||
<div className='flex size-4 items-center justify-center'>
|
||||
<RiCheckLine />
|
||||
</div>
|
||||
<div className={cn('ml-2 mr-0.5 system-sm-regular', textColor)}>{label}</div>
|
||||
<div className={cn('system-sm-regular ml-2 mr-0.5', textColor)}>{label}</div>
|
||||
{tooltip && (
|
||||
<Tooltip
|
||||
asChild
|
||||
popupContent={tooltip}
|
||||
popupClassName='w-[200px]'
|
||||
>
|
||||
<div className='size-4 flex items-center justify-center'>
|
||||
<div className='flex size-4 items-center justify-center'>
|
||||
<RiQuestionLine className={cn(tooltipIconColor)} />
|
||||
</div>
|
||||
</Tooltip>
|
||||
@@ -42,7 +42,7 @@ const KeyValue = ({ label, tooltip, textColor, tooltipIconColor }: { icon: React
|
||||
|
||||
const style = {
|
||||
[SelfHostedPlan.community]: {
|
||||
icon: <Asterisk className='text-text-primary size-7' />,
|
||||
icon: <Asterisk className='size-7 text-text-primary' />,
|
||||
title: 'text-text-primary',
|
||||
price: 'text-text-primary',
|
||||
priceTip: 'text-text-tertiary',
|
||||
@@ -53,7 +53,7 @@ const style = {
|
||||
tooltipIconColor: 'text-text-tertiary',
|
||||
},
|
||||
[SelfHostedPlan.premium]: {
|
||||
icon: <Diamond className='text-text-warning size-7' />,
|
||||
icon: <Diamond className='size-7 text-text-warning' />,
|
||||
title: 'text-text-primary',
|
||||
price: 'text-text-primary',
|
||||
priceTip: 'text-text-tertiary',
|
||||
@@ -64,7 +64,7 @@ const style = {
|
||||
tooltipIconColor: 'text-text-tertiary',
|
||||
},
|
||||
[SelfHostedPlan.enterprise]: {
|
||||
icon: <Buildings className='text-text-primary-on-surface size-7' />,
|
||||
icon: <Buildings className='size-7 text-text-primary-on-surface' />,
|
||||
title: 'text-text-primary-on-surface',
|
||||
price: 'text-text-primary-on-surface',
|
||||
priceTip: 'text-text-primary-on-surface',
|
||||
@@ -108,47 +108,47 @@ const SelfHostedPlanItem: FC<Props> = ({
|
||||
window.location.href = contactSalesUrl
|
||||
}
|
||||
return (
|
||||
<div className={cn(`relative flex flex-col w-[374px] border-[0.5px] rounded-2xl
|
||||
hover:shadow-lg hover:backdrop-blur-[5px] hover:border-effects-highlight overflow-hidden`, style[plan].bg)}>
|
||||
<div className={cn(`relative flex w-[374px] flex-col overflow-hidden rounded-2xl
|
||||
border-[0.5px] hover:border-effects-highlight hover:shadow-lg hover:backdrop-blur-[5px]`, style[plan].bg)}>
|
||||
<div>
|
||||
<div className={cn(isEnterprisePlan ? 'bg-price-enterprise-background absolute left-0 top-0 right-0 bottom-0 z-1' : '')} >
|
||||
<div className={cn(isEnterprisePlan ? 'z-1 absolute bottom-0 left-0 right-0 top-0 bg-price-enterprise-background' : '')} >
|
||||
</div>
|
||||
{isEnterprisePlan && <div className='bg-[#09328c] opacity-15 mix-blend-plus-darker blur-[80px] size-[341px] rounded-full absolute -top-[104px] -left-[90px] z-15'></div>}
|
||||
{isEnterprisePlan && <div className='bg-[#e2eafb] opacity-15 mix-blend-plus-darker blur-[80px] size-[341px] rounded-full absolute -right-[40px] -bottom-[72px] z-15'></div>}
|
||||
{isEnterprisePlan && <div className='z-15 absolute -left-[90px] -top-[104px] size-[341px] rounded-full bg-[#09328c] opacity-15 mix-blend-plus-darker blur-[80px]'></div>}
|
||||
{isEnterprisePlan && <div className='z-15 absolute -bottom-[72px] -right-[40px] size-[341px] rounded-full bg-[#e2eafb] opacity-15 mix-blend-plus-darker blur-[80px]'></div>}
|
||||
</div>
|
||||
<div className='relative w-full p-6 z-10 min-h-[559px]'>
|
||||
<div className=' flex flex-col gap-y-1 min-h-[108px]'>
|
||||
<div className='relative z-10 min-h-[559px] w-full p-6'>
|
||||
<div className=' flex min-h-[108px] flex-col gap-y-1'>
|
||||
{style[plan].icon}
|
||||
<div className='flex items-center'>
|
||||
<div className={cn('leading-[125%] system-md-semibold uppercase', style[plan].title)}>{t(`${i18nPrefix}.name`)}</div>
|
||||
<div className={cn('system-md-semibold uppercase leading-[125%]', style[plan].title)}>{t(`${i18nPrefix}.name`)}</div>
|
||||
</div>
|
||||
<div className={cn(style[plan].description, 'system-sm-regular')}>{t(`${i18nPrefix}.description`)}</div>
|
||||
</div>
|
||||
<div className='my-3'>
|
||||
<div className='flex items-end'>
|
||||
<div className={cn('leading-[125%] text-[28px] font-bold shrink-0', style[plan].price)}>{t(`${i18nPrefix}.price`)}</div>
|
||||
<div className={cn('shrink-0 text-[28px] font-bold leading-[125%]', style[plan].price)}>{t(`${i18nPrefix}.price`)}</div>
|
||||
{!isFreePlan
|
||||
&& <span className={cn('ml-2 py-1 leading-normal text-[14px] font-normal', style[plan].priceTip)}>
|
||||
&& <span className={cn('ml-2 py-1 text-[14px] font-normal leading-normal', style[plan].priceTip)}>
|
||||
{t(`${i18nPrefix}.priceTip`)}
|
||||
</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={cn('flex py-3 px-5 rounded-full justify-center items-center h-[44px] system-md-semibold cursor-pointer',
|
||||
className={cn('system-md-semibold flex h-[44px] cursor-pointer items-center justify-center rounded-full px-5 py-3',
|
||||
style[plan].btnStyle)}
|
||||
onClick={handleGetPayUrl}
|
||||
>
|
||||
{t(`${i18nPrefix}.btnText`)}
|
||||
{isPremiumPlan
|
||||
&& <>
|
||||
<div className='pt-[6px] mx-1'>
|
||||
<div className='mx-1 pt-[6px]'>
|
||||
<AwsMarketplace className='h-6' />
|
||||
</div>
|
||||
<RiArrowRightUpLine className='size-4' />
|
||||
</>}
|
||||
</div>
|
||||
<div className={cn('mt-6 system-sm-semibold mb-2', style[plan].values)}>{t(`${i18nPrefix}.includesTitle`)}</div>
|
||||
<div className={cn('system-sm-semibold mb-2 mt-6', style[plan].values)}>{t(`${i18nPrefix}.includesTitle`)}</div>
|
||||
<div className='flex flex-col gap-y-3'>
|
||||
{features.map(v =>
|
||||
<KeyValue key={`${plan}-${v}`}
|
||||
@@ -160,14 +160,14 @@ const SelfHostedPlanItem: FC<Props> = ({
|
||||
</div>
|
||||
{isPremiumPlan && <div className='mt-[68px]'>
|
||||
<div className='flex items-center gap-x-1'>
|
||||
<div className='size-8 flex items-center justify-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default shadow-xs'>
|
||||
<div className='flex size-8 items-center justify-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default shadow-xs'>
|
||||
<Azure />
|
||||
</div>
|
||||
<div className='size-8 flex items-center justify-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default shadow-xs'>
|
||||
<div className='flex size-8 items-center justify-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default shadow-xs'>
|
||||
<GoogleCloud />
|
||||
</div>
|
||||
</div>
|
||||
<span className={cn('mt-2 system-xs-regular', style[plan].tooltipIconColor)}>{t('billing.plans.premium.comingSoon')}</span>
|
||||
<span className={cn('system-xs-regular mt-2', style[plan].tooltipIconColor)}>{t('billing.plans.premium.comingSoon')}</span>
|
||||
</div>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user