refactor: restrict publish count per account (#5030)

Author: TrySound

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

@@ -242,13 +242,16 @@ const $usedProFeatures = computed(
 
 const Publish = ({
   project,
-  refresh,
+  timesLeft,
   disabled,
+  refresh,
 }: {
   project: Project;
-  refresh: () => Promise<void>;
+  timesLeft: number;
   disabled: boolean;
+  refresh: () => Promise<void>;
 }) => {
+  const { maxPublishesAllowedPerUser } = useStore($userPlanFeatures);
   const [publishError, setPublishError] = useState<
     undefined | JSX.Element | string
   >();
@@ -379,6 +382,19 @@ const Publish = ({
             };
 
       if (status === "PUBLISHED") {
+        toast.success(
+          <>
+            The project has been successfully published. The project is
+            successfully published.{" "}
+            {hasProPlan === false && (
+              <div>
+                On the free plan, you have {timesLeft} out of{" "}
+                {maxPublishesAllowedPerUser} daily publications remaining. The
+                counter resets tomorrow.
+              </div>
+            )}
+          </>
+        );
         break;
       }
 
@@ -601,6 +617,18 @@ const useCanAddDomain = () => {
   return { canAddDomain, maxDomainsAllowedPerUser };
 };
 
+const useUserPublishCount = () => {
+  const { load, data } = trpcClient.project.userPublishCount.useQuery();
+  const { maxPublishesAllowedPerUser } = useStore($userPlanFeatures);
+  useEffect(() => {
+    load();
+  }, [load]);
+  return {
+    userPublishCount: data?.success ? data.data : 0,
+    maxPublishesAllowedPerUser,
+  };
+};
+
 const refreshProject = async () => {
   const result = await nativeClient.domain.project.query(
     {
@@ -634,11 +662,29 @@ const Content = (props: {
   const projectState = "idle";
 
   const { canAddDomain, maxDomainsAllowedPerUser } = useCanAddDomain();
+  const { userPublishCount, maxPublishesAllowedPerUser } =
+    useUserPublishCount();
 
   return (
     <form>
       <ScrollArea>
-        {usedProFeatures.size > 0 && hasProPlan === false ? (
+        {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}
@@ -719,7 +765,11 @@ const Content = (props: {
         <Publish
           project={project}
           refresh={refreshProject}
-          disabled={usedProFeatures.size > 0 && hasProPlan === false}
+          timesLeft={maxPublishesAllowedPerUser - userPublishCount}
+          disabled={
+            (usedProFeatures.size > 0 && hasProPlan === false) ||
+            userPublishCount >= maxPublishesAllowedPerUser
+          }
         />
       </Flex>
     </form>

apps/builder/app/dashboard/dashboard.stories.tsx

@@ -32,6 +32,7 @@ const userPlanFeatures: UserPlanFeatures = {
   allowDynamicData: false,
   maxContactEmails: 0,
   maxDomainsAllowedPerUser: 1,
+  maxPublishesAllowedPerUser: 1,
 };
 
 const projects = [

apps/builder/app/shared/db/user-plan-features.server.ts

@@ -24,7 +24,7 @@ export const getUserPlanFeatures = async (
     .select("name")
     .in(
       "id",
-      userProducts.map(({ productId }) => productId)
+      userProducts.map(({ productId }) => productId ?? "")
     );
 
   if (productsResult.error) {
@@ -46,6 +46,7 @@ export const getUserPlanFeatures = async (
       allowDynamicData: true,
       maxContactEmails: 5,
       maxDomainsAllowedPerUser: Number.MAX_SAFE_INTEGER,
+      maxPublishesAllowedPerUser: Number.MAX_SAFE_INTEGER,
       hasSubscription,
       hasProPlan: true,
       planName: products[0].name,
@@ -58,6 +59,7 @@ export const getUserPlanFeatures = async (
       allowDynamicData: true,
       maxContactEmails: 5,
       maxDomainsAllowedPerUser: Number.MAX_SAFE_INTEGER,
+      maxPublishesAllowedPerUser: Number.MAX_SAFE_INTEGER,
       hasSubscription: true,
       hasProPlan: true,
       planName: "env.USER_PLAN Pro",
@@ -69,6 +71,7 @@ export const getUserPlanFeatures = async (
     allowDynamicData: false,
     maxContactEmails: 0,
     maxDomainsAllowedPerUser: 1,
+    maxPublishesAllowedPerUser: 10,
     hasSubscription: false,
     hasProPlan: false,
   };

apps/builder/app/shared/nano-states/misc.ts

@@ -317,6 +317,7 @@ export const $userPlanFeatures = atom<UserPlanFeatures>({
   allowDynamicData: false,
   maxContactEmails: 0,
   maxDomainsAllowedPerUser: 1,
+  maxPublishesAllowedPerUser: 1,
   hasSubscription: false,
   hasProPlan: false,
 });

packages/postgrest/package.json

@@ -21,7 +21,7 @@
     "db-test": "docker run --rm --network host -v ./supabase/tests:/tests -e PGOPTIONS='--search_path=pgtap,public' supabase/pg_prove:3.36 pg_prove -d ${DIRECT_URL:-postgresql://postgres:pass@localhost/webstudio} --ext .sql /tests"
   },
   "dependencies": {
-    "@supabase/postgrest-js": "^1.16.2"
+    "@supabase/postgrest-js": "^1.19.3"
   },
   "devDependencies": {
     "@webstudio-is/tsconfig": "workspace:*"

packages/postgrest/src/__generated__/db-types.ts

@@ -0,0 +1,7 @@
+CREATE OR REPLACE VIEW user_publish_count AS
+SELECT DISTINCT "userId" AS user_id, count(*)
+FROM "Build"
+LEFT JOIN "Project" ON "Project".id="Build"."projectId"
+WHERE DATE_TRUNC('day', "Build"."createdAt") = DATE_TRUNC('day', NOW())
+AND "Build".deployment IS NOT NULL
+GROUP BY "userId";

packages/prisma-client/prisma/migrations/20250322141808_user_publish_count/migration.sql

@@ -63,6 +63,38 @@ export const projectRouter = router({
 
     return projectIds.map((project) => project.id);
   }),
+
+  userPublishCount: procedure.query(async ({ ctx }) => {
+    try {
+      if (
+        ctx.authorization.type !== "user" &&
+        ctx.authorization.type !== "token"
+      ) {
+        throw new Error("Not authorized");
+      }
+      const userId =
+        ctx.authorization.type === "user"
+          ? ctx.authorization.userId
+          : ctx.authorization.ownerId;
+      const result = await ctx.postgrest.client
+        .from("user_publish_count")
+        .select("count")
+        .eq("user_id", userId)
+        .maybeSingle();
+      if (result.error) {
+        throw result.error;
+      }
+      return {
+        success: true,
+        data: result.data?.count ?? 0,
+      };
+    } catch (error) {
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : "Unknown error",
+      } as const;
+    }
+  }),
 });
 
 export type ProjectRouter = typeof projectRouter;

packages/project/src/trpc/project-router.ts

@@ -68,6 +68,7 @@ type UserPlanFeatures = {
   allowDynamicData: boolean;
   maxContactEmails: number;
   maxDomainsAllowedPerUser: number;
+  maxPublishesAllowedPerUser: number;
   hasSubscription: boolean;
 } & (
   | {