Add tooltip checkbox

apps/builder/app/builder/features/topbar/domain-checkbox.tsx

@@ -0,0 +1,69 @@
+import { useStore } from "@nanostores/react";
+import {
+  Flex,
+  Tooltip,
+  Text,
+  theme,
+  Link,
+  buttonStyle,
+  Checkbox,
+} from "@webstudio-is/design-system";
+import { $userPlanFeatures } from "~/builder/shared/nano-states";
+
+export const domainToPublishName = "domainToPublish[]";
+
+interface DomainCheckboxProps {
+  defaultChecked?: boolean;
+  domain: string;
+  buildId: string | undefined;
+  disabled?: boolean;
+}
+
+const DomainCheckbox = (props: DomainCheckboxProps) => {
+  const hasProPlan = useStore($userPlanFeatures).hasProPlan;
+
+  const tooltipContentForFreeUsers = hasProPlan ? undefined : (
+    <Flex direction="column" gap="2" css={{ maxWidth: theme.spacing[28] }}>
+      <Text variant="titles">Publish to Staging</Text>
+      <Text>
+        <Flex direction="column">
+          Staging allows you to preview a production version of your site
+          without potentially breaking what production site visitors will see.
+          <>
+            <br />
+            <br />
+            Upgrade to Pro to be able to publish to each domain individually.
+            <br /> <br />
+            <Link
+              className={buttonStyle({ color: "gradient" })}
+              color="contrast"
+              underline="none"
+              href="https://webstudio.is/pricing"
+              target="_blank"
+            >
+              Upgrade
+            </Link>
+          </>
+        </Flex>
+      </Text>
+    </Flex>
+  );
+
+  const defaultChecked = hasProPlan ? props.defaultChecked : true;
+  const disabled = hasProPlan ? props.disabled : true;
+
+  return (
+    <Tooltip content={tooltipContentForFreeUsers} variant="wrapped">
+      <Checkbox
+        disabled={disabled}
+        key={props.buildId ?? "-"}
+        defaultChecked={defaultChecked}
+        css={{ pointerEvents: "all" }}
+        name={domainToPublishName}
+        value={props.domain}
+      />
+    </Tooltip>
+  );
+};
+
+export default DomainCheckbox;

apps/builder/app/builder/features/topbar/domains.tsx

@@ -11,7 +11,6 @@ import {
   NestedInputButton,
   Separator,
   toast,
-  Checkbox,
 } from "@webstudio-is/design-system";
 import type { Project } from "@webstudio-is/project";
 import {
@@ -36,7 +35,7 @@ import { useStore } from "@nanostores/react";
 import { $publisherHost } from "~/shared/nano-states";
 import { extractCname } from "./cname";
 import { useEffectEvent } from "~/shared/hook-utils/effect-event";
-import { domainToPublishName } from "./shared-consts";
+import DomainCheckbox from "./domain-checkbox";
 
 export type Domain = Project["domainsVirtual"][number];
 
@@ -323,16 +322,14 @@ const DomainItem = (props: {
   return (
     <CollapsibleDomainSection
       prefix={
-        <Checkbox
-          key={props.projectDomain.latestBuildVirtual?.buildId ?? "-"}
+        <DomainCheckbox
+          buildId={props.projectDomain.latestBuildVirtual?.buildId}
           defaultChecked={
             props.projectDomain.latestBuildVirtual?.buildId != null &&
             props.projectDomain.latestBuildVirtual?.buildId ===
               props.project.latestBuildVirtual?.buildId
           }
-          css={{ pointerEvents: "all" }}
-          name={domainToPublishName}
-          value={props.projectDomain.domain}
+          domain={props.projectDomain.domain}
           disabled={domainStatus !== "VERIFIED_ACTIVE"}
         />
       }

apps/builder/app/builder/features/topbar/publish.tsx

@@ -32,7 +32,6 @@ import {
   buttonStyle,
   toast,
   RadioGroup,
-  Checkbox,
 } from "@webstudio-is/design-system";
 import stripIndent from "strip-indent";
 import {
@@ -55,7 +54,7 @@ import { trpcClient, nativeClient } from "~/shared/trpc/trpc-client";
 import { isFeatureEnabled } from "@webstudio-is/feature-flags";
 import type { Templates } from "@webstudio-is/sdk";
 import { formatDistance } from "date-fns/formatDistance";
-import { domainToPublishName } from "./shared-consts";
+import DomainCheckbox, { domainToPublishName } from "./domain-checkbox";
 
 type ChangeProjectDomainProps = {
   project: Project;
@@ -116,13 +115,11 @@ const ChangeProjectDomain = ({
     <CollapsibleDomainSection
       title={new URL(publishedOrigin).host}
       prefix={
-        <Checkbox
-          key={project.latestBuildVirtual?.buildId ?? "-"}
+        <DomainCheckbox
           defaultChecked={project.latestBuildVirtual?.domain === domain}
-          css={{ pointerEvents: "all" }}
-          name={domainToPublishName}
-          value={domain}
-        />
+          buildId={project.latestBuildVirtual?.buildId}
+          domain={domain}
+        ></DomainCheckbox>
       }
       suffix={
         <Grid flow="column" align="center">