fix: Allow publishing to staging with CMS on free plan (#5721)

Also Clarify staging vs custom-domain upgrade messaging

Author: kof

apps/builder/app/builder/features/pages/page-settings.tsx

@@ -340,8 +340,8 @@ const PathField = ({
                   <br />
                   <Text>
                     To make the path dynamic and use it with CMS, you can use
-                    parameters and other features. CMS features are part of the
-                    Pro plan.
+                    parameters and other features. You can publish to staging
+                    for free; upgrade to Pro to publish to custom domains.
                   </Text>
                   <Link
                     className={buttonStyle({ color: "gradient" })}
@@ -855,8 +855,9 @@ const FormFields = ({
           {allowDynamicData === false && (
             <PanelBanner>
               <Text>
-                Dynamic routing and redirect are a part of the CMS
-                functionality.
+                Dynamic routing and redirect are part of the CMS functionality.
+                You can publish to staging for free; upgrade to Pro to publish
+                to custom domains.
               </Text>
               <Flex align="center" gap={1}>
                 <UploadIcon />

apps/builder/app/builder/features/publish/collapsible-domain-section.stories.tsx

@@ -382,7 +382,9 @@ export const UpgradeBanners = () => (
           <li>Redirect</li>
           <li>Custom contact email</li>
         </Text>
-        <Text>You can delete these features or upgrade.</Text>
+        <Text>
+          You can delete these features or upgrade to publish to custom domains.
+        </Text>
         <Flex align="center" gap={1}>
           <UpgradeIcon />
           <Link color="inherit" href="#">

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

@@ -401,19 +401,28 @@ const Publish = ({
   timesLeft,
   disabled,
   refresh,
+  restrictedFeatures,
 }: {
   project: Project;
   timesLeft: number;
   disabled: boolean;
   refresh: () => Promise<void>;
+  restrictedFeatures: Map<
+    string,
+    | undefined
+    | { awareness?: Awareness; view?: "pageSettings"; info?: ReactNode }
+  >;
 }) => {
   const { maxDailyPublishesPerUser } = useStore($permissions);
+  const { userPublishCount } = useUserPublishCount();
   const [publishError, setPublishError] = useState<
     undefined | JSX.Element | string
   >();
   const [isPublishing, setIsPublishing] = useOptimistic(false);
   const buttonRef = useRef<HTMLButtonElement>(null);
   const [hasSelectedDomains, setHasSelectedDomains] = useState(false);
+  const [hasCustomDomainsSelected, setHasCustomDomainsSelected] =
+    useState(false);
   const countdown = usePublishCountdown(isPublishing);
 
   useEffect(() => {
@@ -425,8 +434,18 @@ const Publish = ({
 
     const handleFormInput = () => {
       const formData = new FormData(form);
-      const domainsSelected = formData.getAll(domainToPublishName).length;
-      setHasSelectedDomains(domainsSelected > 0);
+      const domainsSelected = formData
+        .getAll(domainToPublishName)
+        .map((domain) => domain.toString());
+
+      setHasSelectedDomains(domainsSelected.length > 0);
+
+      // Check if any custom domains are selected
+      // Custom domains are those that are NOT the staging domain (project.domain)
+      const hasCustom = domainsSelected.some(
+        (domain) => domain !== project.domain
+      );
+      setHasCustomDomainsSelected(hasCustom);
     };
 
     const observer = new MutationObserver(() => {
@@ -445,7 +464,7 @@ const Publish = ({
     return () => {
       observer.disconnect();
     };
-  }, []);
+  }, [project.domain]);
 
   const handlePublish = async (formData: FormData) => {
     setPublishError(undefined);
@@ -582,7 +601,12 @@ const Publish = ({
           formAction={handlePublish}
           color="positive"
           state={showPendingState ? "pending" : undefined}
-          disabled={hasSelectedDomains === false || disabled}
+          disabled={
+            hasSelectedDomains === false ||
+            disabled ||
+            (restrictedFeatures.size > 0 && hasCustomDomainsSelected) ||
+            userPublishCount >= maxDailyPublishesPerUser
+          }
         >
           {countdown !== undefined && countdown > 0
             ? `Publishing (${countdown}s)`
@@ -789,7 +813,7 @@ const buttonLinkClass = css({
   ...textVariants.link,
 }).toString();
 
-const UpgradeBanner = () => {
+const UpgradeBanner = ({ hasCustomDomains }: { hasCustomDomains: boolean }) => {
   const restrictedFeatures = useStore($restrictedFeatures);
   const { canAddDomain } = useCanAddDomain();
   const { userPublishCount, maxDailyPublishesPerUser } = useUserPublishCount();
@@ -812,7 +836,9 @@ const UpgradeBanner = () => {
     );
   }
 
-  if (restrictedFeatures.size > 0) {
+  // Only show Pro feature upgrade banner if custom domains are available
+  // Free tier users can still publish to staging domain with Pro features
+  if (restrictedFeatures.size > 0 && hasCustomDomains) {
     return (
       <PanelBanner>
         <img
@@ -854,7 +880,9 @@ const UpgradeBanner = () => {
             )
           )}
         </Text>
-        <Text>You can delete these features or upgrade.</Text>
+        <Text>
+          You can delete these features or upgrade to publish to custom domains.
+        </Text>
         <Flex align="center" gap={1}>
           <UpgradeIcon />
           <Link
@@ -915,6 +943,11 @@ const Content = (props: {
       domain.latestBuildVirtual == null
   );
 
+  // Check if any custom domains exist (active and verified)
+  const hasCustomDomains = project.domainsVirtual.some(
+    (domain) => domain.status === "ACTIVE" && domain.verified
+  );
+
   return (
     <form>
       <ScrollArea>
@@ -947,7 +980,7 @@ const Content = (props: {
           }}
           onExportClick={props.onExportClick}
         />
-        <UpgradeBanner />
+        <UpgradeBanner hasCustomDomains={hasCustomDomains} />
         {hasUnpublishedDomains && (
           <PanelBanner>
             <Flex align="center" gap="1">
@@ -964,10 +997,8 @@ const Content = (props: {
           project={project}
           refresh={refreshProject}
           timesLeft={maxDailyPublishesPerUser - userPublishCount}
-          disabled={
-            restrictedFeatures.size > 0 ||
-            userPublishCount >= maxDailyPublishesPerUser
-          }
+          disabled={false}
+          restrictedFeatures={restrictedFeatures}
         />
       </Flex>
     </form>

apps/builder/app/builder/features/settings-panel/settings-panel.tsx

@@ -45,10 +45,11 @@ export const SettingsPanel = ({
             width={rawTheme.spacing[28]}
             style={{ aspectRatio: "4.1" }}
           />
-          <Text variant="regularBold">Upgrade for CMS</Text>
+          <Text variant="regularBold">Upgrade for CMS on custom domains</Text>
           <Text>
             Integrate content from other tools to create blogs, directories, and
-            any other structured content.
+            any other structured content. You can preview CMS on staging without
+            upgrading.
           </Text>
           <Flex align="center" gap={1}>
             <UpgradeIcon />