From 2485ac4e875fe2a374a1761b3d8ffe4425c628c5 Mon Sep 17 00:00:00 2001
From: Bogdan Chadkin <trysound@yandex.ru>
Date: Fri, 3 May 2024 22:06:47 +0400
Subject: [PATCH] feat: allow customizing default contact email

Fixes https://github.com/webstudio-is/webstudio/issues/3289

Here added contact email fields to use it as recipient instead of owner
email. This way users can host sites for many clients and use default
webhook form behavior without implementing own n8n workflows.
---
 .../project-settings/section-general.tsx      | 58 +++++++++++++++----
 .../project-settings/section-marketplace.tsx  |  8 ++-
 .../app/__generated__/_index.server.tsx       |  4 +-
 .../app/routes/_index.tsx                     |  8 +--
 .../[script-test]._index.server.tsx           |  4 +-
 .../[sitemap-html]._index.server.tsx          |  4 +-
 .../__generated__/[world]._index.server.tsx   |  4 +-
 .../app/__generated__/_index.server.tsx       |  4 +-
 .../app/routes/[script-test]._index.tsx       |  8 +--
 .../app/routes/[sitemap-html]._index.tsx      |  8 +--
 .../app/routes/[world]._index.tsx             |  8 +--
 .../app/routes/_index.tsx                     |  8 +--
 .../app/__generated__/_index.server.tsx       |  4 +-
 .../app/routes/_index.tsx                     |  8 +--
 .../app/__generated__/_index.server.tsx       |  4 +-
 .../app/routes/_index.tsx                     |  8 +--
 .../[_route_with_symbols_]._index.server.tsx  |  4 +-
 .../__generated__/[form]._index.server.tsx    |  4 +-
 .../[heading-with-id]._index.server.tsx       |  4 +-
 .../[nested].[nested-page]._index.server.tsx  |  4 +-
 .../__generated__/[radix]._index.server.tsx   |  4 +-
 .../[resources]._index.server.tsx             |  4 +-
 .../app/__generated__/_index.server.tsx       |  4 +-
 .../routes/[_route_with_symbols_]._index.tsx  |  8 +--
 .../app/routes/[form]._index.tsx              |  8 +--
 .../app/routes/[heading-with-id]._index.tsx   |  8 +--
 .../routes/[nested].[nested-page]._index.tsx  |  8 +--
 .../app/routes/[radix]._index.tsx             |  8 +--
 .../app/routes/[resources]._index.tsx         |  8 +--
 .../app/routes/_index.tsx                     |  8 +--
 packages/cli/__generated__/_index.server.tsx  |  4 +-
 packages/cli/src/prebuild.ts                  |  5 +-
 .../defaults/app/routes/template.tsx          |  8 +--
 packages/sdk/src/schema/pages.ts              |  1 +
 34 files changed, 116 insertions(+), 136 deletions(-)

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 f489cdb84ff8..29f2c134d88f 100644
--- a/apps/builder/app/builder/features/project-settings/section-general.tsx
+++ b/apps/builder/app/builder/features/project-settings/section-general.tsx
@@ -1,3 +1,4 @@
+import { useId, useState } from "react";
 import { useStore } from "@nanostores/react";
 import {
   Grid,
@@ -10,13 +11,15 @@ import {
   CheckboxAndLabel,
   Checkbox,
   css,
+  Flex,
+  Tooltip,
 } from "@webstudio-is/design-system";
+import { InfoCircleIcon } from "@webstudio-is/icons";
 import { ImageControl } from "./image-control";
-import { $assets, $imageLoader, $pages } from "~/shared/nano-states";
 import { Image } from "@webstudio-is/image";
-import { useIds } from "~/shared/form-utils";
 import type { ProjectMeta, CompilerSettings } from "@webstudio-is/sdk";
-import { useState } from "react";
+import { $assets, $imageLoader, $pages } from "~/shared/nano-states";
+import { useIds } from "~/shared/form-utils";
 import { serverSyncStore } from "~/shared/sync";
 import { sectionSpacing } from "./utils";
 import { CodeEditor } from "~/builder/shared/code-editor";
@@ -32,6 +35,7 @@ const imgStyle = css({
 
 const defaultMetaSettings: ProjectMeta = {
   siteName: "",
+  contactEmail: "",
   faviconAssetId: "",
   code: "",
 };
@@ -40,7 +44,8 @@ export const SectionGeneral = () => {
   const [meta, setMeta] = useState(
     () => $pages.get()?.meta ?? defaultMetaSettings
   );
-  const ids = useIds(["siteName"]);
+  const siteNameId = useId();
+  const contactEmailId = useId();
   const assets = useStore($assets);
   const asset = assets.get(meta.faviconAssetId ?? "");
   const favIconUrl = asset ? `${asset.name}` : undefined;
@@ -65,18 +70,49 @@ export const SectionGeneral = () => {
   };
 
   return (
-    <>
+    <Grid gap={2}>
+      <Text variant="titles" css={sectionSpacing}>
+        General
+      </Text>
+
       <Grid gap={1} css={sectionSpacing}>
-        <Text variant="titles">General</Text>
-        <Label htmlFor={ids.siteName}>Site Name</Label>
+        <Flex gap={1} align="center">
+          <Label htmlFor={siteNameId}>Site Name</Label>
+          <Tooltip
+            variant="wrapped"
+            content="Used in search results and social preview."
+          >
+            <InfoCircleIcon tabIndex={0} />
+          </Tooltip>
+        </Flex>
         <InputField
-          id={ids.siteName}
+          id={siteNameId}
+          placeholder="Current Site Name"
+          autoFocus={true}
           value={meta.siteName ?? ""}
           onChange={(event) => {
             handleSave("siteName")(event.target.value);
           }}
-          placeholder="Current Site Name"
-          autoFocus
+        />
+      </Grid>
+
+      <Grid gap={1} css={sectionSpacing}>
+        <Flex gap={1} align="center">
+          <Label htmlFor={contactEmailId}>Contact Email</Label>
+          <Tooltip
+            variant="wrapped"
+            content="Used as email recipient when submit webhook form without action."
+          >
+            <InfoCircleIcon tabIndex={0} />
+          </Tooltip>
+        </Flex>
+        <InputField
+          id={contactEmailId}
+          placeholder="email@address.com"
+          value={meta.contactEmail ?? ""}
+          onChange={(event) => {
+            handleSave("contactEmail")(event.target.value);
+          }}
         />
       </Grid>
 
@@ -118,7 +154,7 @@ export const SectionGeneral = () => {
       <Separator />
 
       <CompilerSection />
-    </>
+    </Grid>
   );
 };
 
diff --git a/apps/builder/app/builder/features/project-settings/section-marketplace.tsx b/apps/builder/app/builder/features/project-settings/section-marketplace.tsx
index 617c972fa1f7..50016b975d3c 100644
--- a/apps/builder/app/builder/features/project-settings/section-marketplace.tsx
+++ b/apps/builder/app/builder/features/project-settings/section-marketplace.tsx
@@ -167,9 +167,11 @@ export const SectionMarketplace = () => {
   };
 
   return (
-    <>
+    <Grid gap={2}>
+      <Text variant="titles" css={sectionSpacing}>
+        Marketplace
+      </Text>
       <Grid gap={1} css={sectionSpacing}>
-        <Text variant="titles">Marketplace</Text>
         <Label htmlFor={ids.name}>Product Name</Label>
         <InputErrorsTooltip errors={errors?.name}>
           <InputField
@@ -350,6 +352,6 @@ export const SectionMarketplace = () => {
           </Button>
         )}
       </Flex>
-    </>
+    </Grid>
   );
 };
diff --git a/fixtures/webstudio-cloudflare-template/app/__generated__/_index.server.tsx b/fixtures/webstudio-cloudflare-template/app/__generated__/_index.server.tsx
index 4470a4f4272e..8add12c869a7 100644
--- a/fixtures/webstudio-cloudflare-template/app/__generated__/_index.server.tsx
+++ b/fixtures/webstudio-cloudflare-template/app/__generated__/_index.server.tsx
@@ -37,8 +37,6 @@ export const getRemixParams = ({ ...params }: Params): Params => {
 
 export const projectId = "d845c167-ea07-4875-b08d-83e97c09dcce";
 
-export const user: { email: string | null } | undefined = {
-  email: "hello@webstudio.is",
-};
+export const contactEmail = "hello@webstudio.is";
 
 export const customCode = "";
diff --git a/fixtures/webstudio-cloudflare-template/app/routes/_index.tsx b/fixtures/webstudio-cloudflare-template/app/routes/_index.tsx
index 7e3ddebbeb85..5ed3bcbb163c 100644
--- a/fixtures/webstudio-cloudflare-template/app/routes/_index.tsx
+++ b/fixtures/webstudio-cloudflare-template/app/routes/_index.tsx
@@ -26,7 +26,7 @@ import {
   getPageMeta,
   getRemixParams,
   projectId,
-  user,
+  contactEmail,
 } from "../__generated__/_index.server";
 
 import css from "../__generated__/index.css?url";
@@ -255,9 +255,7 @@ export const action = async ({ request, context }: ActionFunctionArgs) => {
   // form properties are not defined when defaults are used
   const { action, method } = formProperties ?? {};
 
-  const email = user?.email;
-
-  if (email == null) {
+  if (contactEmail === undefined) {
     return { success: false };
   }
 
@@ -292,7 +290,7 @@ export const action = async ({ request, context }: ActionFunctionArgs) => {
     action: action ?? null,
     method: getMethod(method),
     pageUrl: pageUrl.toString(),
-    toEmail: email,
+    toEmail: contactEmail,
     fromEmail: pageUrl.hostname + "@webstudio.email",
   } as const;
 
diff --git a/fixtures/webstudio-custom-template/app/__generated__/[script-test]._index.server.tsx b/fixtures/webstudio-custom-template/app/__generated__/[script-test]._index.server.tsx
index 431ccaff7d43..a0ef6e6c5176 100644
--- a/fixtures/webstudio-custom-template/app/__generated__/[script-test]._index.server.tsx
+++ b/fixtures/webstudio-custom-template/app/__generated__/[script-test]._index.server.tsx
@@ -37,9 +37,7 @@ export const getRemixParams = ({ ...params }: Params): Params => {
 
 export const projectId = "0d856812-61d8-4014-a20a-82e01c0eb8ee";
 
-export const user: { email: string | null } | undefined = {
-  email: "hello@webstudio.is",
-};
+export const contactEmail = "hello@webstudio.is";
 
 export const customCode =
   '<script>console.log(\'HELLO\')</script>\n<meta property="saas:test" content="test">';
diff --git a/fixtures/webstudio-custom-template/app/__generated__/[sitemap-html]._index.server.tsx b/fixtures/webstudio-custom-template/app/__generated__/[sitemap-html]._index.server.tsx
index fe8f6737c772..065bf11aa79a 100644
--- a/fixtures/webstudio-custom-template/app/__generated__/[sitemap-html]._index.server.tsx
+++ b/fixtures/webstudio-custom-template/app/__generated__/[sitemap-html]._index.server.tsx
@@ -63,9 +63,7 @@ export const getRemixParams = ({ ...params }: Params): Params => {
 
 export const projectId = "0d856812-61d8-4014-a20a-82e01c0eb8ee";
 
-export const user: { email: string | null } | undefined = {
-  email: "hello@webstudio.is",
-};
+export const contactEmail = "hello@webstudio.is";
 
 export const customCode =
   '<script>console.log(\'HELLO\')</script>\n<meta property="saas:test" content="test">';
diff --git a/fixtures/webstudio-custom-template/app/__generated__/[world]._index.server.tsx b/fixtures/webstudio-custom-template/app/__generated__/[world]._index.server.tsx
index 8eb96562d975..1d4ce43b9cbc 100644
--- a/fixtures/webstudio-custom-template/app/__generated__/[world]._index.server.tsx
+++ b/fixtures/webstudio-custom-template/app/__generated__/[world]._index.server.tsx
@@ -37,9 +37,7 @@ export const getRemixParams = ({ ...params }: Params): Params => {
 
 export const projectId = "0d856812-61d8-4014-a20a-82e01c0eb8ee";
 
-export const user: { email: string | null } | undefined = {
-  email: "hello@webstudio.is",
-};
+export const contactEmail = "hello@webstudio.is";
 
 export const customCode =
   '<script>console.log(\'HELLO\')</script>\n<meta property="saas:test" content="test">';
diff --git a/fixtures/webstudio-custom-template/app/__generated__/_index.server.tsx b/fixtures/webstudio-custom-template/app/__generated__/_index.server.tsx
index 44228641760f..8d4a3ceb0a57 100644
--- a/fixtures/webstudio-custom-template/app/__generated__/_index.server.tsx
+++ b/fixtures/webstudio-custom-template/app/__generated__/_index.server.tsx
@@ -37,9 +37,7 @@ export const getRemixParams = ({ ...params }: Params): Params => {
 
 export const projectId = "0d856812-61d8-4014-a20a-82e01c0eb8ee";
 
-export const user: { email: string | null } | undefined = {
-  email: "hello@webstudio.is",
-};
+export const contactEmail = "hello@webstudio.is";
 
 export const customCode =
   '<script>console.log(\'HELLO\')</script>\n<meta property="saas:test" content="test">';
diff --git a/fixtures/webstudio-custom-template/app/routes/[script-test]._index.tsx b/fixtures/webstudio-custom-template/app/routes/[script-test]._index.tsx
index 178b053d8b08..05ee991c1103 100644
--- a/fixtures/webstudio-custom-template/app/routes/[script-test]._index.tsx
+++ b/fixtures/webstudio-custom-template/app/routes/[script-test]._index.tsx
@@ -26,7 +26,7 @@ import {
   getPageMeta,
   getRemixParams,
   projectId,
-  user,
+  contactEmail,
 } from "../__generated__/[script-test]._index.server";
 
 import css from "../__generated__/index.css?url";
@@ -255,9 +255,7 @@ export const action = async ({ request, context }: ActionFunctionArgs) => {
   // form properties are not defined when defaults are used
   const { action, method } = formProperties ?? {};
 
-  const email = user?.email;
-
-  if (email == null) {
+  if (contactEmail === undefined) {
     return { success: false };
   }
 
@@ -292,7 +290,7 @@ export const action = async ({ request, context }: ActionFunctionArgs) => {
     action: action ?? null,
     method: getMethod(method),
     pageUrl: pageUrl.toString(),
-    toEmail: email,
+    toEmail: contactEmail,
     fromEmail: pageUrl.hostname + "@webstudio.email",
   } as const;
 
diff --git a/fixtures/webstudio-custom-template/app/routes/[sitemap-html]._index.tsx b/fixtures/webstudio-custom-template/app/routes/[sitemap-html]._index.tsx
index 36f6c6f55a95..1bc27c25b710 100644
--- a/fixtures/webstudio-custom-template/app/routes/[sitemap-html]._index.tsx
+++ b/fixtures/webstudio-custom-template/app/routes/[sitemap-html]._index.tsx
@@ -26,7 +26,7 @@ import {
   getPageMeta,
   getRemixParams,
   projectId,
-  user,
+  contactEmail,
 } from "../__generated__/[sitemap-html]._index.server";
 
 import css from "../__generated__/index.css?url";
@@ -255,9 +255,7 @@ export const action = async ({ request, context }: ActionFunctionArgs) => {
   // form properties are not defined when defaults are used
   const { action, method } = formProperties ?? {};
 
-  const email = user?.email;
-
-  if (email == null) {
+  if (contactEmail === undefined) {
     return { success: false };
   }
 
@@ -292,7 +290,7 @@ export const action = async ({ request, context }: ActionFunctionArgs) => {
     action: action ?? null,
     method: getMethod(method),
     pageUrl: pageUrl.toString(),
-    toEmail: email,
+    toEmail: contactEmail,
     fromEmail: pageUrl.hostname + "@webstudio.email",
   } as const;
 
diff --git a/fixtures/webstudio-custom-template/app/routes/[world]._index.tsx b/fixtures/webstudio-custom-template/app/routes/[world]._index.tsx
index bf0574fa4835..0894462f43ad 100644
--- a/fixtures/webstudio-custom-template/app/routes/[world]._index.tsx
+++ b/fixtures/webstudio-custom-template/app/routes/[world]._index.tsx
@@ -26,7 +26,7 @@ import {
   getPageMeta,
   getRemixParams,
   projectId,
-  user,
+  contactEmail,
 } from "../__generated__/[world]._index.server";
 
 import css from "../__generated__/index.css?url";
@@ -255,9 +255,7 @@ export const action = async ({ request, context }: ActionFunctionArgs) => {
   // form properties are not defined when defaults are used
   const { action, method } = formProperties ?? {};
 
-  const email = user?.email;
-
-  if (email == null) {
+  if (contactEmail === undefined) {
     return { success: false };
   }
 
@@ -292,7 +290,7 @@ export const action = async ({ request, context }: ActionFunctionArgs) => {
     action: action ?? null,
     method: getMethod(method),
     pageUrl: pageUrl.toString(),
-    toEmail: email,
+    toEmail: contactEmail,
     fromEmail: pageUrl.hostname + "@webstudio.email",
   } as const;
 
diff --git a/fixtures/webstudio-custom-template/app/routes/_index.tsx b/fixtures/webstudio-custom-template/app/routes/_index.tsx
index 7e3ddebbeb85..5ed3bcbb163c 100644
--- a/fixtures/webstudio-custom-template/app/routes/_index.tsx
+++ b/fixtures/webstudio-custom-template/app/routes/_index.tsx
@@ -26,7 +26,7 @@ import {
   getPageMeta,
   getRemixParams,
   projectId,
-  user,
+  contactEmail,
 } from "../__generated__/_index.server";
 
 import css from "../__generated__/index.css?url";
@@ -255,9 +255,7 @@ export const action = async ({ request, context }: ActionFunctionArgs) => {
   // form properties are not defined when defaults are used
   const { action, method } = formProperties ?? {};
 
-  const email = user?.email;
-
-  if (email == null) {
+  if (contactEmail === undefined) {
     return { success: false };
   }
 
@@ -292,7 +290,7 @@ export const action = async ({ request, context }: ActionFunctionArgs) => {
     action: action ?? null,
     method: getMethod(method),
     pageUrl: pageUrl.toString(),
-    toEmail: email,
+    toEmail: contactEmail,
     fromEmail: pageUrl.hostname + "@webstudio.email",
   } as const;
 
diff --git a/fixtures/webstudio-remix-netlify-edge-functions/app/__generated__/_index.server.tsx b/fixtures/webstudio-remix-netlify-edge-functions/app/__generated__/_index.server.tsx
index 4470a4f4272e..8add12c869a7 100644
--- a/fixtures/webstudio-remix-netlify-edge-functions/app/__generated__/_index.server.tsx
+++ b/fixtures/webstudio-remix-netlify-edge-functions/app/__generated__/_index.server.tsx
@@ -37,8 +37,6 @@ export const getRemixParams = ({ ...params }: Params): Params => {
 
 export const projectId = "d845c167-ea07-4875-b08d-83e97c09dcce";
 
-export const user: { email: string | null } | undefined = {
-  email: "hello@webstudio.is",
-};
+export const contactEmail = "hello@webstudio.is";
 
 export const customCode = "";
diff --git a/fixtures/webstudio-remix-netlify-edge-functions/app/routes/_index.tsx b/fixtures/webstudio-remix-netlify-edge-functions/app/routes/_index.tsx
index 7e3ddebbeb85..5ed3bcbb163c 100644
--- a/fixtures/webstudio-remix-netlify-edge-functions/app/routes/_index.tsx
+++ b/fixtures/webstudio-remix-netlify-edge-functions/app/routes/_index.tsx
@@ -26,7 +26,7 @@ import {
   getPageMeta,
   getRemixParams,
   projectId,
-  user,
+  contactEmail,
 } from "../__generated__/_index.server";
 
 import css from "../__generated__/index.css?url";
@@ -255,9 +255,7 @@ export const action = async ({ request, context }: ActionFunctionArgs) => {
   // form properties are not defined when defaults are used
   const { action, method } = formProperties ?? {};
 
-  const email = user?.email;
-
-  if (email == null) {
+  if (contactEmail === undefined) {
     return { success: false };
   }
 
@@ -292,7 +290,7 @@ export const action = async ({ request, context }: ActionFunctionArgs) => {
     action: action ?? null,
     method: getMethod(method),
     pageUrl: pageUrl.toString(),
-    toEmail: email,
+    toEmail: contactEmail,
     fromEmail: pageUrl.hostname + "@webstudio.email",
   } as const;
 
diff --git a/fixtures/webstudio-remix-netlify-functions/app/__generated__/_index.server.tsx b/fixtures/webstudio-remix-netlify-functions/app/__generated__/_index.server.tsx
index 4470a4f4272e..8add12c869a7 100644
--- a/fixtures/webstudio-remix-netlify-functions/app/__generated__/_index.server.tsx
+++ b/fixtures/webstudio-remix-netlify-functions/app/__generated__/_index.server.tsx
@@ -37,8 +37,6 @@ export const getRemixParams = ({ ...params }: Params): Params => {
 
 export const projectId = "d845c167-ea07-4875-b08d-83e97c09dcce";
 
-export const user: { email: string | null } | undefined = {
-  email: "hello@webstudio.is",
-};
+export const contactEmail = "hello@webstudio.is";
 
 export const customCode = "";
diff --git a/fixtures/webstudio-remix-netlify-functions/app/routes/_index.tsx b/fixtures/webstudio-remix-netlify-functions/app/routes/_index.tsx
index 7e3ddebbeb85..5ed3bcbb163c 100644
--- a/fixtures/webstudio-remix-netlify-functions/app/routes/_index.tsx
+++ b/fixtures/webstudio-remix-netlify-functions/app/routes/_index.tsx
@@ -26,7 +26,7 @@ import {
   getPageMeta,
   getRemixParams,
   projectId,
-  user,
+  contactEmail,
 } from "../__generated__/_index.server";
 
 import css from "../__generated__/index.css?url";
@@ -255,9 +255,7 @@ export const action = async ({ request, context }: ActionFunctionArgs) => {
   // form properties are not defined when defaults are used
   const { action, method } = formProperties ?? {};
 
-  const email = user?.email;
-
-  if (email == null) {
+  if (contactEmail === undefined) {
     return { success: false };
   }
 
@@ -292,7 +290,7 @@ export const action = async ({ request, context }: ActionFunctionArgs) => {
     action: action ?? null,
     method: getMethod(method),
     pageUrl: pageUrl.toString(),
-    toEmail: email,
+    toEmail: contactEmail,
     fromEmail: pageUrl.hostname + "@webstudio.email",
   } as const;
 
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[_route_with_symbols_]._index.server.tsx b/fixtures/webstudio-remix-vercel/app/__generated__/[_route_with_symbols_]._index.server.tsx
index 2cb9318f31b2..e424b9eda459 100644
--- a/fixtures/webstudio-remix-vercel/app/__generated__/[_route_with_symbols_]._index.server.tsx
+++ b/fixtures/webstudio-remix-vercel/app/__generated__/[_route_with_symbols_]._index.server.tsx
@@ -37,8 +37,6 @@ export const getRemixParams = ({ ...params }: Params): Params => {
 
 export const projectId = "cddc1d44-af37-4cb6-a430-d300cf6f932d";
 
-export const user: { email: string | null } | undefined = {
-  email: "hello@webstudio.is",
-};
+export const contactEmail = "hello@webstudio.is";
 
 export const customCode = "<script>console.log('KittyGuardedZone')</script>";
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[form]._index.server.tsx b/fixtures/webstudio-remix-vercel/app/__generated__/[form]._index.server.tsx
index b9cb201bb330..bff101d5317c 100644
--- a/fixtures/webstudio-remix-vercel/app/__generated__/[form]._index.server.tsx
+++ b/fixtures/webstudio-remix-vercel/app/__generated__/[form]._index.server.tsx
@@ -39,8 +39,6 @@ export const getRemixParams = ({ ...params }: Params): Params => {
 
 export const projectId = "cddc1d44-af37-4cb6-a430-d300cf6f932d";
 
-export const user: { email: string | null } | undefined = {
-  email: "hello@webstudio.is",
-};
+export const contactEmail = "hello@webstudio.is";
 
 export const customCode = "<script>console.log('KittyGuardedZone')</script>";
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[heading-with-id]._index.server.tsx b/fixtures/webstudio-remix-vercel/app/__generated__/[heading-with-id]._index.server.tsx
index d8e308e4dae2..7f36e291ad8d 100644
--- a/fixtures/webstudio-remix-vercel/app/__generated__/[heading-with-id]._index.server.tsx
+++ b/fixtures/webstudio-remix-vercel/app/__generated__/[heading-with-id]._index.server.tsx
@@ -37,8 +37,6 @@ export const getRemixParams = ({ ...params }: Params): Params => {
 
 export const projectId = "cddc1d44-af37-4cb6-a430-d300cf6f932d";
 
-export const user: { email: string | null } | undefined = {
-  email: "hello@webstudio.is",
-};
+export const contactEmail = "hello@webstudio.is";
 
 export const customCode = "<script>console.log('KittyGuardedZone')</script>";
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[nested].[nested-page]._index.server.tsx b/fixtures/webstudio-remix-vercel/app/__generated__/[nested].[nested-page]._index.server.tsx
index ba310340b1cf..9ae50e09a517 100644
--- a/fixtures/webstudio-remix-vercel/app/__generated__/[nested].[nested-page]._index.server.tsx
+++ b/fixtures/webstudio-remix-vercel/app/__generated__/[nested].[nested-page]._index.server.tsx
@@ -37,8 +37,6 @@ export const getRemixParams = ({ ...params }: Params): Params => {
 
 export const projectId = "cddc1d44-af37-4cb6-a430-d300cf6f932d";
 
-export const user: { email: string | null } | undefined = {
-  email: "hello@webstudio.is",
-};
+export const contactEmail = "hello@webstudio.is";
 
 export const customCode = "<script>console.log('KittyGuardedZone')</script>";
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[radix]._index.server.tsx b/fixtures/webstudio-remix-vercel/app/__generated__/[radix]._index.server.tsx
index 5e1e108ad14f..46f649235ef7 100644
--- a/fixtures/webstudio-remix-vercel/app/__generated__/[radix]._index.server.tsx
+++ b/fixtures/webstudio-remix-vercel/app/__generated__/[radix]._index.server.tsx
@@ -38,8 +38,6 @@ export const getRemixParams = ({ ...params }: Params): Params => {
 
 export const projectId = "cddc1d44-af37-4cb6-a430-d300cf6f932d";
 
-export const user: { email: string | null } | undefined = {
-  email: "hello@webstudio.is",
-};
+export const contactEmail = "hello@webstudio.is";
 
 export const customCode = "<script>console.log('KittyGuardedZone')</script>";
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[resources]._index.server.tsx b/fixtures/webstudio-remix-vercel/app/__generated__/[resources]._index.server.tsx
index f5fe8a7e835b..2e54f03c1fa3 100644
--- a/fixtures/webstudio-remix-vercel/app/__generated__/[resources]._index.server.tsx
+++ b/fixtures/webstudio-remix-vercel/app/__generated__/[resources]._index.server.tsx
@@ -63,8 +63,6 @@ export const getRemixParams = ({ ...params }: Params): Params => {
 
 export const projectId = "cddc1d44-af37-4cb6-a430-d300cf6f932d";
 
-export const user: { email: string | null } | undefined = {
-  email: "hello@webstudio.is",
-};
+export const contactEmail = "hello@webstudio.is";
 
 export const customCode = "<script>console.log('KittyGuardedZone')</script>";
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/_index.server.tsx b/fixtures/webstudio-remix-vercel/app/__generated__/_index.server.tsx
index dd0baef2b719..f8c92b5fa972 100644
--- a/fixtures/webstudio-remix-vercel/app/__generated__/_index.server.tsx
+++ b/fixtures/webstudio-remix-vercel/app/__generated__/_index.server.tsx
@@ -43,8 +43,6 @@ export const getRemixParams = ({ ...params }: Params): Params => {
 
 export const projectId = "cddc1d44-af37-4cb6-a430-d300cf6f932d";
 
-export const user: { email: string | null } | undefined = {
-  email: "hello@webstudio.is",
-};
+export const contactEmail = "hello@webstudio.is";
 
 export const customCode = "<script>console.log('KittyGuardedZone')</script>";
diff --git a/fixtures/webstudio-remix-vercel/app/routes/[_route_with_symbols_]._index.tsx b/fixtures/webstudio-remix-vercel/app/routes/[_route_with_symbols_]._index.tsx
index 41e5f96f425c..000e76941c52 100644
--- a/fixtures/webstudio-remix-vercel/app/routes/[_route_with_symbols_]._index.tsx
+++ b/fixtures/webstudio-remix-vercel/app/routes/[_route_with_symbols_]._index.tsx
@@ -26,7 +26,7 @@ import {
   getPageMeta,
   getRemixParams,
   projectId,
-  user,
+  contactEmail,
 } from "../__generated__/[_route_with_symbols_]._index.server";
 
 import css from "../__generated__/index.css?url";
@@ -255,9 +255,7 @@ export const action = async ({ request, context }: ActionFunctionArgs) => {
   // form properties are not defined when defaults are used
   const { action, method } = formProperties ?? {};
 
-  const email = user?.email;
-
-  if (email == null) {
+  if (contactEmail === undefined) {
     return { success: false };
   }
 
@@ -292,7 +290,7 @@ export const action = async ({ request, context }: ActionFunctionArgs) => {
     action: action ?? null,
     method: getMethod(method),
     pageUrl: pageUrl.toString(),
-    toEmail: email,
+    toEmail: contactEmail,
     fromEmail: pageUrl.hostname + "@webstudio.email",
   } as const;
 
diff --git a/fixtures/webstudio-remix-vercel/app/routes/[form]._index.tsx b/fixtures/webstudio-remix-vercel/app/routes/[form]._index.tsx
index 41410de1cffa..e9f71076863e 100644
--- a/fixtures/webstudio-remix-vercel/app/routes/[form]._index.tsx
+++ b/fixtures/webstudio-remix-vercel/app/routes/[form]._index.tsx
@@ -26,7 +26,7 @@ import {
   getPageMeta,
   getRemixParams,
   projectId,
-  user,
+  contactEmail,
 } from "../__generated__/[form]._index.server";
 
 import css from "../__generated__/index.css?url";
@@ -255,9 +255,7 @@ export const action = async ({ request, context }: ActionFunctionArgs) => {
   // form properties are not defined when defaults are used
   const { action, method } = formProperties ?? {};
 
-  const email = user?.email;
-
-  if (email == null) {
+  if (contactEmail === undefined) {
     return { success: false };
   }
 
@@ -292,7 +290,7 @@ export const action = async ({ request, context }: ActionFunctionArgs) => {
     action: action ?? null,
     method: getMethod(method),
     pageUrl: pageUrl.toString(),
-    toEmail: email,
+    toEmail: contactEmail,
     fromEmail: pageUrl.hostname + "@webstudio.email",
   } as const;
 
diff --git a/fixtures/webstudio-remix-vercel/app/routes/[heading-with-id]._index.tsx b/fixtures/webstudio-remix-vercel/app/routes/[heading-with-id]._index.tsx
index af30d5a7753f..184b0966d318 100644
--- a/fixtures/webstudio-remix-vercel/app/routes/[heading-with-id]._index.tsx
+++ b/fixtures/webstudio-remix-vercel/app/routes/[heading-with-id]._index.tsx
@@ -26,7 +26,7 @@ import {
   getPageMeta,
   getRemixParams,
   projectId,
-  user,
+  contactEmail,
 } from "../__generated__/[heading-with-id]._index.server";
 
 import css from "../__generated__/index.css?url";
@@ -255,9 +255,7 @@ export const action = async ({ request, context }: ActionFunctionArgs) => {
   // form properties are not defined when defaults are used
   const { action, method } = formProperties ?? {};
 
-  const email = user?.email;
-
-  if (email == null) {
+  if (contactEmail === undefined) {
     return { success: false };
   }
 
@@ -292,7 +290,7 @@ export const action = async ({ request, context }: ActionFunctionArgs) => {
     action: action ?? null,
     method: getMethod(method),
     pageUrl: pageUrl.toString(),
-    toEmail: email,
+    toEmail: contactEmail,
     fromEmail: pageUrl.hostname + "@webstudio.email",
   } as const;
 
diff --git a/fixtures/webstudio-remix-vercel/app/routes/[nested].[nested-page]._index.tsx b/fixtures/webstudio-remix-vercel/app/routes/[nested].[nested-page]._index.tsx
index baa48c53f03e..ba9909169c81 100644
--- a/fixtures/webstudio-remix-vercel/app/routes/[nested].[nested-page]._index.tsx
+++ b/fixtures/webstudio-remix-vercel/app/routes/[nested].[nested-page]._index.tsx
@@ -26,7 +26,7 @@ import {
   getPageMeta,
   getRemixParams,
   projectId,
-  user,
+  contactEmail,
 } from "../__generated__/[nested].[nested-page]._index.server";
 
 import css from "../__generated__/index.css?url";
@@ -255,9 +255,7 @@ export const action = async ({ request, context }: ActionFunctionArgs) => {
   // form properties are not defined when defaults are used
   const { action, method } = formProperties ?? {};
 
-  const email = user?.email;
-
-  if (email == null) {
+  if (contactEmail === undefined) {
     return { success: false };
   }
 
@@ -292,7 +290,7 @@ export const action = async ({ request, context }: ActionFunctionArgs) => {
     action: action ?? null,
     method: getMethod(method),
     pageUrl: pageUrl.toString(),
-    toEmail: email,
+    toEmail: contactEmail,
     fromEmail: pageUrl.hostname + "@webstudio.email",
   } as const;
 
diff --git a/fixtures/webstudio-remix-vercel/app/routes/[radix]._index.tsx b/fixtures/webstudio-remix-vercel/app/routes/[radix]._index.tsx
index a39cb5d5c3bc..ec310daad483 100644
--- a/fixtures/webstudio-remix-vercel/app/routes/[radix]._index.tsx
+++ b/fixtures/webstudio-remix-vercel/app/routes/[radix]._index.tsx
@@ -26,7 +26,7 @@ import {
   getPageMeta,
   getRemixParams,
   projectId,
-  user,
+  contactEmail,
 } from "../__generated__/[radix]._index.server";
 
 import css from "../__generated__/index.css?url";
@@ -255,9 +255,7 @@ export const action = async ({ request, context }: ActionFunctionArgs) => {
   // form properties are not defined when defaults are used
   const { action, method } = formProperties ?? {};
 
-  const email = user?.email;
-
-  if (email == null) {
+  if (contactEmail === undefined) {
     return { success: false };
   }
 
@@ -292,7 +290,7 @@ export const action = async ({ request, context }: ActionFunctionArgs) => {
     action: action ?? null,
     method: getMethod(method),
     pageUrl: pageUrl.toString(),
-    toEmail: email,
+    toEmail: contactEmail,
     fromEmail: pageUrl.hostname + "@webstudio.email",
   } as const;
 
diff --git a/fixtures/webstudio-remix-vercel/app/routes/[resources]._index.tsx b/fixtures/webstudio-remix-vercel/app/routes/[resources]._index.tsx
index 6628ee354dd1..b7289a4c837e 100644
--- a/fixtures/webstudio-remix-vercel/app/routes/[resources]._index.tsx
+++ b/fixtures/webstudio-remix-vercel/app/routes/[resources]._index.tsx
@@ -26,7 +26,7 @@ import {
   getPageMeta,
   getRemixParams,
   projectId,
-  user,
+  contactEmail,
 } from "../__generated__/[resources]._index.server";
 
 import css from "../__generated__/index.css?url";
@@ -255,9 +255,7 @@ export const action = async ({ request, context }: ActionFunctionArgs) => {
   // form properties are not defined when defaults are used
   const { action, method } = formProperties ?? {};
 
-  const email = user?.email;
-
-  if (email == null) {
+  if (contactEmail === undefined) {
     return { success: false };
   }
 
@@ -292,7 +290,7 @@ export const action = async ({ request, context }: ActionFunctionArgs) => {
     action: action ?? null,
     method: getMethod(method),
     pageUrl: pageUrl.toString(),
-    toEmail: email,
+    toEmail: contactEmail,
     fromEmail: pageUrl.hostname + "@webstudio.email",
   } as const;
 
diff --git a/fixtures/webstudio-remix-vercel/app/routes/_index.tsx b/fixtures/webstudio-remix-vercel/app/routes/_index.tsx
index 7e3ddebbeb85..5ed3bcbb163c 100644
--- a/fixtures/webstudio-remix-vercel/app/routes/_index.tsx
+++ b/fixtures/webstudio-remix-vercel/app/routes/_index.tsx
@@ -26,7 +26,7 @@ import {
   getPageMeta,
   getRemixParams,
   projectId,
-  user,
+  contactEmail,
 } from "../__generated__/_index.server";
 
 import css from "../__generated__/index.css?url";
@@ -255,9 +255,7 @@ export const action = async ({ request, context }: ActionFunctionArgs) => {
   // form properties are not defined when defaults are used
   const { action, method } = formProperties ?? {};
 
-  const email = user?.email;
-
-  if (email == null) {
+  if (contactEmail === undefined) {
     return { success: false };
   }
 
@@ -292,7 +290,7 @@ export const action = async ({ request, context }: ActionFunctionArgs) => {
     action: action ?? null,
     method: getMethod(method),
     pageUrl: pageUrl.toString(),
-    toEmail: email,
+    toEmail: contactEmail,
     fromEmail: pageUrl.hostname + "@webstudio.email",
   } as const;
 
diff --git a/packages/cli/__generated__/_index.server.tsx b/packages/cli/__generated__/_index.server.tsx
index 1dc40fd9b821..9a6907ed0c33 100644
--- a/packages/cli/__generated__/_index.server.tsx
+++ b/packages/cli/__generated__/_index.server.tsx
@@ -30,8 +30,6 @@ export const getRemixParams = ({ ...params }: Params): Params => {
 
 export const projectId = "project-id";
 
-export const user: { email: string | null } | undefined = {
-  email: "email@domain",
-};
+export const contactEmail: undefined | string = undefined;
 
 export const customCode = "";
diff --git a/packages/cli/src/prebuild.ts b/packages/cli/src/prebuild.ts
index a0fe3be5cda9..dd95d5b2dec0 100644
--- a/packages/cli/src/prebuild.ts
+++ b/packages/cli/src/prebuild.ts
@@ -581,6 +581,8 @@ export const prebuild = async (options: {
     });
 
     const projectMeta = siteData.build.pages.meta;
+    const contactEmail: undefined | string =
+      projectMeta?.contactEmail ?? siteData.user?.email ?? undefined;
     const pageMeta = pageData.page.meta;
     const favIconAsset = assets.get(projectMeta?.faviconAssetId ?? "");
     const socialImageAsset = assets.get(pageMeta.socialImageAssetId ?? "");
@@ -636,8 +638,7 @@ ${generateRemixParams(pageData.page.path)}
 
 export const projectId = "${siteData.build.projectId}";
 
-export const user: { email: string | null } | undefined =
-  ${JSON.stringify(siteData.user)};
+export const contactEmail = ${JSON.stringify(contactEmail)};
 
 export const customCode = ${JSON.stringify(projectMeta?.code?.trim() ?? "")};
 `;
diff --git a/packages/cli/templates/defaults/app/routes/template.tsx b/packages/cli/templates/defaults/app/routes/template.tsx
index 0dce0c2ea9db..2a3279259999 100644
--- a/packages/cli/templates/defaults/app/routes/template.tsx
+++ b/packages/cli/templates/defaults/app/routes/template.tsx
@@ -26,7 +26,7 @@ import {
   getPageMeta,
   getRemixParams,
   projectId,
-  user,
+  contactEmail,
 } from "../../../../__generated__/_index.server";
 
 import css from "../__generated__/index.css?url";
@@ -255,9 +255,7 @@ export const action = async ({ request, context }: ActionFunctionArgs) => {
   // form properties are not defined when defaults are used
   const { action, method } = formProperties ?? {};
 
-  const email = user?.email;
-
-  if (email == null) {
+  if (contactEmail === undefined) {
     return { success: false };
   }
 
@@ -292,7 +290,7 @@ export const action = async ({ request, context }: ActionFunctionArgs) => {
     action: action ?? null,
     method: getMethod(method),
     pageUrl: pageUrl.toString(),
-    toEmail: email,
+    toEmail: contactEmail,
     fromEmail: pageUrl.hostname + "@webstudio.email",
   } as const;
 
diff --git a/packages/sdk/src/schema/pages.ts b/packages/sdk/src/schema/pages.ts
index 29fa3e5e6f41..6e86756d7fbc 100644
--- a/packages/sdk/src/schema/pages.ts
+++ b/packages/sdk/src/schema/pages.ts
@@ -108,6 +108,7 @@ const Page = z.object({
 const ProjectMeta = z.object({
   // All fields are optional to ensure consistency and allow for the addition of new fields without requiring migration
   siteName: z.string().optional(),
+  contactEmail: z.string().optional(),
   faviconAssetId: z.string().optional(),
   code: z.string().optional(),
 });