Skip to content
Closed
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
211 changes: 108 additions & 103 deletions apps/builder/app/builder/features/topbar/publish.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ import {
import { validateProjectDomain, type Project } from "@webstudio-is/project";
import {
$awareness,
$selectedPagePath,
findAwarenessByInstanceId,
type Awareness,
} from "~/shared/awareness";
Expand Down Expand Up @@ -101,15 +100,11 @@ const ChangeProjectDomain = ({
}: ChangeProjectDomainProps) => {
const id = useId();
const publishedOrigin = useStore($publishedOrigin);
const selectedPagePath = useStore($selectedPagePath);

const [domain, setDomain] = useState(project.domain);
const [error, setError] = useState<string>();
const [isUpdateInProgress, setIsUpdateInProgress] = useOptimistic(false);

const pageUrl = new URL(publishedOrigin);
pageUrl.pathname = selectedPagePath;

const updateProjectDomain = async () => {
setIsUpdateInProgress(true);
const validationResult = validateProjectDomain(domain);
Expand Down Expand Up @@ -148,7 +143,7 @@ const ChangeProjectDomain = ({

return (
<CollapsibleDomainSection
title={pageUrl.host}
title={new URL(publishedOrigin).host}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

did you reverted this?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

shit, must be something wasn't updated before I started

prefix={
<DomainCheckbox
defaultChecked={project.latestBuildVirtual?.domain === domain}
Expand Down Expand Up @@ -181,18 +176,11 @@ const ChangeProjectDomain = ({
)}
</Flex>
</Tooltip>
<Tooltip
content={
<Text css={{ wordBreak: "break-all" }}>
Proceed to ${pageUrl.toString()}
</Text>
}
variant="wrapped"
>
<Tooltip content={`Proceed to ${publishedOrigin}`}>
<IconButton
tabIndex={-1}
onClick={(event) => {
window.open(pageUrl, "_blank");
window.open(publishedOrigin, "_blank");
event.preventDefault();
}}
>
Expand Down Expand Up @@ -786,12 +774,115 @@ const buttonLinkClass = css({
...textVariants.link,
}).toString();

const UpgradeBanner = () => {
const usedProFeatures = useStore($usedProFeatures);
const { canAddDomain, maxDomainsAllowedPerUser } = useCanAddDomain();
const { userPublishCount, maxPublishesAllowedPerUser } =
useUserPublishCount();

if (userPublishCount >= maxPublishesAllowedPerUser) {
return (
<PanelBanner>
<Text variant="regularBold">
Upgrade to publish more than {maxPublishesAllowedPerUser} times per
day:
</Text>
<Link
className={buttonStyle({ color: "gradient" })}
color="contrast"
underline="none"
href="https://webstudio.is/pricing"
target="_blank"
>
Upgrade
</Link>
</PanelBanner>
);
}

if (usedProFeatures.size > 0) {
return (
<PanelBanner>
<img
src={cmsUpgradeBanner}
alt="Upgrade for CMS"
width={rawTheme.spacing[28]}
style={{ aspectRatio: "4.1" }}
/>
<Text variant="regularBold">Following Pro features are used:</Text>
<Text as="ul" color="destructive" css={{ paddingLeft: "1em" }}>
{Array.from(usedProFeatures).map(
([message, { awareness, info } = {}], index) => (
<li key={index}>
<Flex align="center" gap="1">
{awareness ? (
<button
className={buttonLinkClass}
type="button"
onClick={() => $awareness.set(awareness)}
>
{message}
</button>
) : (
message
)}
{info && (
<Tooltip variant="wrapped" content={info}>
<SmallIconButton icon={<HelpIcon />} />
</Tooltip>
)}
</Flex>
</li>
)
)}
</Text>
<Text>You can delete these features or upgrade.</Text>
<Flex align="center" gap={1}>
<UpgradeIcon />
<Link
color="inherit"
target="_blank"
href="https://webstudio.is/pricing"
>
Upgrade to Pro
</Link>
</Flex>
</PanelBanner>
);
}
if (canAddDomain === false) {
return (
<PanelBanner>
<Text variant="regularBold">Free domains limit reached</Text>
<Text variant="regular">
You have reached the limit of {maxDomainsAllowedPerUser} custom
domains on your account.{" "}
<Text variant="regularBold" inline>
Upgrade to a Pro account
</Text>{" "}
to add unlimited domains and publish to each domain individually.
</Text>
<Link
className={buttonStyle({ color: "gradient" })}
color="contrast"
underline="none"
href="https://webstudio.is/pricing"
target="_blank"
>
Upgrade
</Link>
</PanelBanner>
);
}
};

const Content = (props: {
projectId: Project["id"];
onExportClick: () => void;
}) => {
const usedProFeatures = useStore($usedProFeatures);
const { hasProPlan } = useStore($userPlanFeatures);
//const { hasProPlan } = useStore($userPlanFeatures);
const hasProPlan = false;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

uncomment

const [newDomains, setNewDomains] = useState(new Set<string>());

const project = useStore($project);
Expand All @@ -801,99 +892,12 @@ const Content = (props: {
}
const projectState = "idle";

const { canAddDomain, maxDomainsAllowedPerUser } = useCanAddDomain();
const { userPublishCount, maxPublishesAllowedPerUser } =
useUserPublishCount();

return (
<form>
<ScrollArea>
{userPublishCount >= maxPublishesAllowedPerUser ? (
<PanelBanner>
<Text variant="regularBold">
Upgrade to publish more than {maxPublishesAllowedPerUser} times
per day:
</Text>
<Link
className={buttonStyle({ color: "gradient" })}
color="contrast"
underline="none"
href="https://webstudio.is/pricing"
target="_blank"
>
Upgrade
</Link>
</PanelBanner>
) : usedProFeatures.size > 0 && hasProPlan === false ? (
<PanelBanner>
<img
src={cmsUpgradeBanner}
alt="Upgrade for CMS"
width={rawTheme.spacing[28]}
style={{ aspectRatio: "4.1" }}
/>
<Text variant="regularBold">
Upgrade to publish with following features:
</Text>
<Text as="ul">
{Array.from(usedProFeatures).map(
([message, { awareness, info } = {}], index) => (
<li key={index}>
<Flex align="center" gap="1">
{awareness ? (
<button
className={buttonLinkClass}
type="button"
onClick={() => $awareness.set(awareness)}
>
{message}
</button>
) : (
message
)}
{info && (
<Tooltip variant="wrapped" content={info}>
<SmallIconButton icon={<HelpIcon />} />
</Tooltip>
)}
</Flex>
</li>
)
)}
</Text>
<Flex align="center" gap={1}>
<UpgradeIcon />
<Link
color="inherit"
target="_blank"
href="https://webstudio.is/pricing"
>
Upgrade to Pro
</Link>
</Flex>
</PanelBanner>
) : canAddDomain === false ? (
<PanelBanner>
<Text variant="regularBold">Free domains limit reached</Text>
<Text variant="regular">
You have reached the limit of {maxDomainsAllowedPerUser} custom
domains on your account.{" "}
<Text variant="regularBold" inline>
Upgrade to a Pro account
</Text>{" "}
to add unlimited domains and publish to each domain individually.
</Text>
<Link
className={buttonStyle({ color: "gradient" })}
color="contrast"
underline="none"
href="https://webstudio.is/pricing"
target="_blank"
>
Upgrade
</Link>
</PanelBanner>
) : null}
<RadioGroup name="publishDomain">
<ChangeProjectDomain
refresh={refreshProject}
Expand Down Expand Up @@ -923,6 +927,7 @@ const Content = (props: {
}}
onExportClick={props.onExportClick}
/>
{hasProPlan === false && <UpgradeBanner />}
<Publish
project={project}
refresh={refreshProject}
Expand Down