diff --git a/apps/builder/app/builder/features/topbar/publish.tsx b/apps/builder/app/builder/features/topbar/publish.tsx index 6c4cddd76703..1b301e5795a3 100644 --- a/apps/builder/app/builder/features/topbar/publish.tsx +++ b/apps/builder/app/builder/features/topbar/publish.tsx @@ -83,11 +83,11 @@ import DomainCheckbox, { domainToPublishName } from "./domain-checkbox"; import { CopyToClipboard } from "~/builder/shared/copy-to-clipboard"; import { $openProjectSettings } from "~/shared/nano-states/project-settings"; import { RelativeTime } from "~/builder/shared/relative-time"; -import cmsUpgradeBanner from "../settings-panel/cms-upgrade-banner.svg?url"; import { showAttribute } from "@webstudio-is/react-sdk"; -import { $styleObjectModel } from "../style-panel/shared/model"; import { toValue, type CssProperty } from "@webstudio-is/css-engine"; import { getComputedStyleDecl } from "~/shared/style-object-model"; +import { $styleObjectModel } from "../style-panel/shared/model"; +import cmsUpgradeBanner from "../settings-panel/cms-upgrade-banner.svg?url"; type ChangeProjectDomainProps = { project: Project; @@ -786,6 +786,108 @@ const buttonLinkClass = css({ ...textVariants.link, }).toString(); +const UpgradeBanner = () => { + const usedProFeatures = useStore($usedProFeatures); + const { canAddDomain, maxDomainsAllowedPerUser } = useCanAddDomain(); + const { userPublishCount, maxPublishesAllowedPerUser } = + useUserPublishCount(); + + if (userPublishCount >= maxPublishesAllowedPerUser) { + return ( + + + Upgrade to publish more than {maxPublishesAllowedPerUser} times per + day: + + + Upgrade + + + ); + } + + if (usedProFeatures.size > 0) { + return ( + + Upgrade for CMS + Following Pro features are used: + + {Array.from(usedProFeatures).map( + ([message, { awareness, info } = {}], index) => ( +
  • + + {awareness ? ( + + ) : ( + message + )} + {info && ( + + } /> + + )} + +
  • + ) + )} +
    + You can delete these features or upgrade. + + + + Upgrade to Pro + + +
    + ); + } + if (canAddDomain === false) { + return ( + + Free domains limit reached + + You have reached the limit of {maxDomainsAllowedPerUser} custom + domains on your account.{" "} + + Upgrade to a Pro account + {" "} + to add unlimited domains and publish to each domain individually. + + + Upgrade + + + ); + } +}; + const Content = (props: { projectId: Project["id"]; onExportClick: () => void; @@ -801,99 +903,12 @@ const Content = (props: { } const projectState = "idle"; - const { canAddDomain, maxDomainsAllowedPerUser } = useCanAddDomain(); const { userPublishCount, maxPublishesAllowedPerUser } = useUserPublishCount(); return (
    - {userPublishCount >= maxPublishesAllowedPerUser ? ( - - - Upgrade to publish more than {maxPublishesAllowedPerUser} times - per day: - - - Upgrade - - - ) : usedProFeatures.size > 0 && hasProPlan === false ? ( - - Upgrade for CMS - - Upgrade to publish with following features: - - - {Array.from(usedProFeatures).map( - ([message, { awareness, info } = {}], index) => ( -
  • - - {awareness ? ( - - ) : ( - message - )} - {info && ( - - } /> - - )} - -
  • - ) - )} -
    - - - - Upgrade to Pro - - -
    - ) : canAddDomain === false ? ( - - Free domains limit reached - - You have reached the limit of {maxDomainsAllowedPerUser} custom - domains on your account.{" "} - - Upgrade to a Pro account - {" "} - to add unlimited domains and publish to each domain individually. - - - Upgrade - - - ) : null} + {hasProPlan === false && }