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">

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 protected]"
+            disabled={allowContactEmail === false}
             value={meta.contactEmail ?? ""}
             onChange={(event) => {
               handleSave("contactEmail")(event.target.value);

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,

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

@@ -31,6 +31,7 @@ const userPlanFeatures: UserPlanFeatures = {
   hasSubscription: false,
   allowShareAdminLinks: false,
   allowDynamicData: false,
+  allowContactEmail: false,
   maxDomainsAllowedPerUser: 5,
 };
 

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,

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;
 } & (