From c7d5ec1520c42939fe2b9fbb2497cf7ca82df895 Mon Sep 17 00:00:00 2001 From: twwu Date: Fri, 15 Aug 2025 18:39:59 +0800 Subject: [PATCH] feat: add new pricing assets and update billing plan components to utilize them --- .../billing/pricing/assets/community.tsx | 96 +++++++++++++++++++ .../billing/pricing/assets/enterprise.tsx | 96 +++++++++++++++++++ .../billing/pricing/assets/index.tsx | 6 ++ .../billing/pricing/assets/premium.tsx | 96 +++++++++++++++++++ .../billing/pricing/assets/professional.tsx | 96 +++++++++++++++++++ .../billing/pricing/assets/sandbox.tsx | 96 +++++++++++++++++++ .../billing/pricing/assets/team.tsx | 96 +++++++++++++++++++ .../pricing/plans/cloud-plan-item/index.tsx | 7 +- .../plans/self-hosted-plan-item/index.tsx | 16 +--- 9 files changed, 590 insertions(+), 15 deletions(-) create mode 100644 web/app/components/billing/pricing/assets/community.tsx create mode 100644 web/app/components/billing/pricing/assets/enterprise.tsx create mode 100644 web/app/components/billing/pricing/assets/premium.tsx create mode 100644 web/app/components/billing/pricing/assets/professional.tsx create mode 100644 web/app/components/billing/pricing/assets/sandbox.tsx create mode 100644 web/app/components/billing/pricing/assets/team.tsx diff --git a/web/app/components/billing/pricing/assets/community.tsx b/web/app/components/billing/pricing/assets/community.tsx new file mode 100644 index 0000000000..7037f63b6c --- /dev/null +++ b/web/app/components/billing/pricing/assets/community.tsx @@ -0,0 +1,96 @@ +const Community = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} + +export default Community diff --git a/web/app/components/billing/pricing/assets/enterprise.tsx b/web/app/components/billing/pricing/assets/enterprise.tsx new file mode 100644 index 0000000000..70a3520903 --- /dev/null +++ b/web/app/components/billing/pricing/assets/enterprise.tsx @@ -0,0 +1,96 @@ +const Enterprise = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} + +export default Enterprise diff --git a/web/app/components/billing/pricing/assets/index.tsx b/web/app/components/billing/pricing/assets/index.tsx index 6e34fdfe98..9e0eb8eced 100644 --- a/web/app/components/billing/pricing/assets/index.tsx +++ b/web/app/components/billing/pricing/assets/index.tsx @@ -1,2 +1,8 @@ export { default as Cloud } from './cloud' export { default as SelfHosted } from './self-hosted' +export { default as Sandbox } from './sandbox' +export { default as Professional } from './professional' +export { default as Team } from './team' +export { default as Community } from './community' +export { default as Premium } from './premium' +export { default as Enterprise } from './enterprise' diff --git a/web/app/components/billing/pricing/assets/premium.tsx b/web/app/components/billing/pricing/assets/premium.tsx new file mode 100644 index 0000000000..dcd04f61ec --- /dev/null +++ b/web/app/components/billing/pricing/assets/premium.tsx @@ -0,0 +1,96 @@ +const Premium = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} + +export default Premium diff --git a/web/app/components/billing/pricing/assets/professional.tsx b/web/app/components/billing/pricing/assets/professional.tsx new file mode 100644 index 0000000000..5cfff9c9a0 --- /dev/null +++ b/web/app/components/billing/pricing/assets/professional.tsx @@ -0,0 +1,96 @@ +const Professional = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} + +export default Professional diff --git a/web/app/components/billing/pricing/assets/sandbox.tsx b/web/app/components/billing/pricing/assets/sandbox.tsx new file mode 100644 index 0000000000..4b7f98147d --- /dev/null +++ b/web/app/components/billing/pricing/assets/sandbox.tsx @@ -0,0 +1,96 @@ +const Sandbox = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} + +export default Sandbox diff --git a/web/app/components/billing/pricing/assets/team.tsx b/web/app/components/billing/pricing/assets/team.tsx new file mode 100644 index 0000000000..9e46f55ba8 --- /dev/null +++ b/web/app/components/billing/pricing/assets/team.tsx @@ -0,0 +1,96 @@ +const Team = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} + +export default Team diff --git a/web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx b/web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx index a4e3e819ae..4862439f6a 100644 --- a/web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx +++ b/web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx @@ -11,11 +11,12 @@ import { useAppContext } from '@/context/app-context' import { fetchSubscriptionUrls } from '@/service/billing' import List from './list' import Button from './button' +import { Professional, Sandbox, Team } from '../../assets' const ICON_MAP = { - [Plan.sandbox]:
, - [Plan.professional]:
, - [Plan.team]:
, + [Plan.sandbox]: , + [Plan.professional]: , + [Plan.team]: , } type CloudPlanItemProps = { diff --git a/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx b/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx index 6044192adf..6df33c47ed 100644 --- a/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx +++ b/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx @@ -10,28 +10,20 @@ import { useAppContext } from '@/context/app-context' import Button from './button' import List from './list' import { Azure, GoogleCloud } from '@/app/components/base/icons/src/public/billing' +import { Community, Enterprise, Premium } from '../../assets' const style = { [SelfHostedPlan.community]: { - icon:
, + icon: , bg: '', - btnStyle: 'bg-components-button-secondary-bg hover:bg-components-button-secondary-bg-hover border-[0.5px] border-components-button-secondary-border text-text-primary', - values: 'text-text-secondary', - tooltipIconColor: 'text-text-tertiary', }, [SelfHostedPlan.premium]: { - icon:
, + icon: , bg: '', - btnStyle: 'bg-third-party-aws hover:bg-third-party-aws-hover border border-components-button-primary-border text-text-primary-on-surface shadow-xs', - values: 'text-text-secondary', - tooltipIconColor: 'text-text-tertiary', }, [SelfHostedPlan.enterprise]: { - icon:
, + icon: , bg: '', - btnStyle: 'bg-white/96 hover:opacity-85 border-[0.5px] border-components-button-secondary-border text-[#155AEF] shadow-xs', - values: 'text-text-primary-on-surface', - tooltipIconColor: 'text-text-primary-on-surface', }, }