From 5ce5065835b5890f5904a94b32f398d2ea94ab23 Mon Sep 17 00:00:00 2001
From: Bogdan Chadkin <opensource@trysound.io>
Date: Sat, 4 May 2024 15:14:08 +0400
Subject: [PATCH] fix: hide contact email behind pro (#3296)

We want to allow customizing email only for pro users to avoid abusing
of our workflow.

<img width="631" alt="Screenshot 2024-05-04 at 12 57 15"
src="https://github.com/webstudio-is/webstudio/assets/5635476/089500e9-fa9f-4599-ba09-2568e04b9ac6">
---
 .../builder/features/project-settings/section-general.tsx    | 5 +++++
 apps/builder/app/builder/shared/nano-states/index.ts         | 1 +
 apps/builder/app/dashboard/dashboard.stories.tsx             | 1 +
 apps/builder/app/shared/db/user-plan-features.server.ts      | 2 ++
 packages/trpc-interface/src/context/context.server.ts        | 1 +
 5 files changed, 10 insertions(+)

diff --git a/apps/builder/app/builder/features/project-settings/section-general.tsx b/apps/builder/app/builder/features/project-settings/section-general.tsx
index 104adebda791..3a18d7d79555 100644
--- a/apps/builder/app/builder/features/project-settings/section-general.tsx
+++ b/apps/builder/app/builder/features/project-settings/section-general.tsx
@@ -15,6 +15,7 @@ import {
   Flex,
   Tooltip,
   InputErrorsTooltip,
+  ProBadge,
 } from "@webstudio-is/design-system";
 import { InfoCircleIcon } from "@webstudio-is/icons";
 import { ImageControl } from "./image-control";
@@ -25,6 +26,7 @@ import { useIds } from "~/shared/form-utils";
 import { serverSyncStore } from "~/shared/sync";
 import { sectionSpacing } from "./utils";
 import { CodeEditor } from "~/builder/shared/code-editor";
+import { $userPlanFeatures } from "~/builder/shared/nano-states";
 
 const imgStyle = css({
   width: 72,
@@ -45,6 +47,7 @@ const defaultMetaSettings: ProjectMeta = {
 const Email = z.string().email();
 
 export const SectionGeneral = () => {
+  const { allowContactEmail } = useStore($userPlanFeatures);
   const [meta, setMeta] = useState(
     () => $pages.get()?.meta ?? defaultMetaSettings
   );
@@ -114,6 +117,7 @@ export const SectionGeneral = () => {
           >
             <InfoCircleIcon tabIndex={0} />
           </Tooltip>
+          {allowContactEmail === false && <ProBadge>Pro</ProBadge>}
         </Flex>
         <InputErrorsTooltip
           errors={contactEmailError ? [contactEmailError] : undefined}
@@ -122,6 +126,7 @@ export const SectionGeneral = () => {
             id={contactEmailId}
             color={contactEmailError ? "error" : undefined}
             placeholder="email@address.com"
+            disabled={allowContactEmail === false}
             value={meta.contactEmail ?? ""}
             onChange={(event) => {
               handleSave("contactEmail")(event.target.value);
diff --git a/apps/builder/app/builder/shared/nano-states/index.ts b/apps/builder/app/builder/shared/nano-states/index.ts
index f1738716d6c6..c31e48a55546 100644
--- a/apps/builder/app/builder/shared/nano-states/index.ts
+++ b/apps/builder/app/builder/shared/nano-states/index.ts
@@ -45,6 +45,7 @@ export const $activeSidebarPanel = atom<TabName>("none");
 export const $userPlanFeatures = atom<UserPlanFeatures>({
   allowShareAdminLinks: false,
   allowDynamicData: false,
+  allowContactEmail: false,
   maxDomainsAllowedPerUser: 5,
   hasSubscription: false,
   hasProPlan: false,
diff --git a/apps/builder/app/dashboard/dashboard.stories.tsx b/apps/builder/app/dashboard/dashboard.stories.tsx
index fe0e7ccd9d9a..faa89d457797 100644
--- a/apps/builder/app/dashboard/dashboard.stories.tsx
+++ b/apps/builder/app/dashboard/dashboard.stories.tsx
@@ -31,6 +31,7 @@ const userPlanFeatures: UserPlanFeatures = {
   hasSubscription: false,
   allowShareAdminLinks: false,
   allowDynamicData: false,
+  allowContactEmail: false,
   maxDomainsAllowedPerUser: 5,
 };
 
diff --git a/apps/builder/app/shared/db/user-plan-features.server.ts b/apps/builder/app/shared/db/user-plan-features.server.ts
index abc4da5b6040..b5d6ae10be1d 100644
--- a/apps/builder/app/shared/db/user-plan-features.server.ts
+++ b/apps/builder/app/shared/db/user-plan-features.server.ts
@@ -63,6 +63,7 @@ export const getUserPlanFeatures = async (
     return {
       allowShareAdminLinks: true,
       allowDynamicData: true,
+      allowContactEmail: true,
       maxDomainsAllowedPerUser: Number.MAX_SAFE_INTEGER,
       hasSubscription,
       hasProPlan: true,
@@ -73,6 +74,7 @@ export const getUserPlanFeatures = async (
   return {
     allowShareAdminLinks: false,
     allowDynamicData: false,
+    allowContactEmail: false,
     maxDomainsAllowedPerUser: 5,
     hasSubscription: false,
     hasProPlan: false,
diff --git a/packages/trpc-interface/src/context/context.server.ts b/packages/trpc-interface/src/context/context.server.ts
index 418a0c2c5fe1..1402a53ab6fd 100644
--- a/packages/trpc-interface/src/context/context.server.ts
+++ b/packages/trpc-interface/src/context/context.server.ts
@@ -54,6 +54,7 @@ type DeploymentContext = {
 type UserPlanFeatures = {
   allowShareAdminLinks: boolean;
   allowDynamicData: boolean;
+  allowContactEmail: boolean;
   maxDomainsAllowedPerUser: number;
   hasSubscription: boolean;
 } & (