feat: submit webhook form without n8n

Closes #3789 Here stopped submitting webhook form with custom action to n8n and requested directly from generated code. This has a few benefits - self-hosted websites (vercel, netlify) no longer have to setup n8n to support forms - we can pay n8n for these executions no more - user no longer have to unsubscribe from emails when setup custom webhook
webstudio-is · Jul 28, 2024 · 3afbc67 · 3afbc67
1 parent d7531b7
commit 3afbc67
Show file tree

Hide file tree

Showing 20 changed files with 452 additions and 231 deletions.
diff --git a/fixtures/webstudio-cloudflare-template/app/routes/[another-page]._index.tsx b/fixtures/webstudio-cloudflare-template/app/routes/[another-page]._index.tsx
@@ -10,7 +10,11 @@ import {
   redirect,
 } from "@remix-run/server-runtime";
 import { useLoaderData } from "@remix-run/react";
-import { isLocalResource, loadResources } from "@webstudio-is/sdk";
+import {
+  isLocalResource,
+  loadResource,
+  loadResources,
+} from "@webstudio-is/sdk";
 import { ReactSdkContext } from "@webstudio-is/react-sdk";
 import {
   n8nHandler,
@@ -297,22 +301,32 @@ export const action = async ({
       throw new Error(`Form bot value invalid ${formBotValue}`);
     }
 
+    formData.delete(formIdFieldName);
+    formData.delete(formBotFieldName);
+
+    if (resource) {
+      const { ok, statusText } = await loadResource(fetch, {
+        ...resource,
+        body: Object.fromEntries(formData),
+      });
+      if (ok) {
+        return { success: true };
+      }
+      return { success: false, errors: [statusText] };
+    }
+
     if (contactEmail === undefined) {
       throw new Error("Contact email not found");
     }
 
-    const formInfo = {
-      formData,
-      projectId,
-      action: resource?.url ?? null,
-      method: getMethod(resource?.method),
-      pageUrl: pageUrl.toString(),
-      toEmail: contactEmail,
-      fromEmail: pageUrl.hostname + "@webstudio.email",
-    } as const;
-
     const result = await n8nHandler({
-      formInfo,
+      formInfo: {
+        formId: [projectId, resourceName].join("--"),
+        formData,
+        pageUrl: pageUrl.toString(),
+        toEmail: contactEmail,
+        fromEmail: pageUrl.hostname + "@webstudio.email",
+      },
       hookUrl: context.N8N_FORM_EMAIL_HOOK,
     });
 

diff --git a/fixtures/webstudio-cloudflare-template/app/routes/_index.tsx b/fixtures/webstudio-cloudflare-template/app/routes/_index.tsx
@@ -10,7 +10,11 @@ import {
   redirect,
 } from "@remix-run/server-runtime";
 import { useLoaderData } from "@remix-run/react";
-import { isLocalResource, loadResources } from "@webstudio-is/sdk";
+import {
+  isLocalResource,
+  loadResource,
+  loadResources,
+} from "@webstudio-is/sdk";
 import { ReactSdkContext } from "@webstudio-is/react-sdk";
 import {
   n8nHandler,
@@ -297,22 +301,32 @@ export const action = async ({
       throw new Error(`Form bot value invalid ${formBotValue}`);
     }
 
+    formData.delete(formIdFieldName);
+    formData.delete(formBotFieldName);
+
+    if (resource) {
+      const { ok, statusText } = await loadResource(fetch, {
+        ...resource,
+        body: Object.fromEntries(formData),
+      });
+      if (ok) {
+        return { success: true };
+      }
+      return { success: false, errors: [statusText] };
+    }
+
     if (contactEmail === undefined) {
       throw new Error("Contact email not found");
     }
 
-    const formInfo = {
-      formData,
-      projectId,
-      action: resource?.url ?? null,
-      method: getMethod(resource?.method),
-      pageUrl: pageUrl.toString(),
-      toEmail: contactEmail,
-      fromEmail: pageUrl.hostname + "@webstudio.email",
-    } as const;
-
     const result = await n8nHandler({
-      formInfo,
+      formInfo: {
+        formId: [projectId, resourceName].join("--"),
+        formData,
+        pageUrl: pageUrl.toString(),
+        toEmail: contactEmail,
+        fromEmail: pageUrl.hostname + "@webstudio.email",
+      },
       hookUrl: context.N8N_FORM_EMAIL_HOOK,
     });
 

diff --git a/fixtures/webstudio-custom-template/app/routes/[script-test]._index.tsx b/fixtures/webstudio-custom-template/app/routes/[script-test]._index.tsx
@@ -10,7 +10,11 @@ import {
   redirect,
 } from "@remix-run/server-runtime";
 import { useLoaderData } from "@remix-run/react";
-import { isLocalResource, loadResources } from "@webstudio-is/sdk";
+import {
+  isLocalResource,
+  loadResource,
+  loadResources,
+} from "@webstudio-is/sdk";
 import { ReactSdkContext } from "@webstudio-is/react-sdk";
 import {
   n8nHandler,
@@ -297,22 +301,32 @@ export const action = async ({
       throw new Error(`Form bot value invalid ${formBotValue}`);
     }
 
+    formData.delete(formIdFieldName);
+    formData.delete(formBotFieldName);
+
+    if (resource) {
+      const { ok, statusText } = await loadResource(fetch, {
+        ...resource,
+        body: Object.fromEntries(formData),
+      });
+      if (ok) {
+        return { success: true };
+      }
+      return { success: false, errors: [statusText] };
+    }
+
     if (contactEmail === undefined) {
       throw new Error("Contact email not found");
     }
 
-    const formInfo = {
-      formData,
-      projectId,
-      action: resource?.url ?? null,
-      method: getMethod(resource?.method),
-      pageUrl: pageUrl.toString(),
-      toEmail: contactEmail,
-      fromEmail: pageUrl.hostname + "@webstudio.email",
-    } as const;
-
     const result = await n8nHandler({
-      formInfo,
+      formInfo: {
+        formId: [projectId, resourceName].join("--"),
+        formData,
+        pageUrl: pageUrl.toString(),
+        toEmail: contactEmail,
+        fromEmail: pageUrl.hostname + "@webstudio.email",
+      },
       hookUrl: context.N8N_FORM_EMAIL_HOOK,
     });
 

diff --git a/fixtures/webstudio-custom-template/app/routes/[world]._index.tsx b/fixtures/webstudio-custom-template/app/routes/[world]._index.tsx
@@ -10,7 +10,11 @@ import {
   redirect,
 } from "@remix-run/server-runtime";
 import { useLoaderData } from "@remix-run/react";
-import { isLocalResource, loadResources } from "@webstudio-is/sdk";
+import {
+  isLocalResource,
+  loadResource,
+  loadResources,
+} from "@webstudio-is/sdk";
 import { ReactSdkContext } from "@webstudio-is/react-sdk";
 import {
   n8nHandler,
@@ -297,22 +301,32 @@ export const action = async ({
       throw new Error(`Form bot value invalid ${formBotValue}`);
     }
 
+    formData.delete(formIdFieldName);
+    formData.delete(formBotFieldName);
+
+    if (resource) {
+      const { ok, statusText } = await loadResource(fetch, {
+        ...resource,
+        body: Object.fromEntries(formData),
+      });
+      if (ok) {
+        return { success: true };
+      }
+      return { success: false, errors: [statusText] };
+    }
+
     if (contactEmail === undefined) {
       throw new Error("Contact email not found");
     }
 
-    const formInfo = {
-      formData,
-      projectId,
-      action: resource?.url ?? null,
-      method: getMethod(resource?.method),
-      pageUrl: pageUrl.toString(),
-      toEmail: contactEmail,
-      fromEmail: pageUrl.hostname + "@webstudio.email",
-    } as const;
-
     const result = await n8nHandler({
-      formInfo,
+      formInfo: {
+        formId: [projectId, resourceName].join("--"),
+        formData,
+        pageUrl: pageUrl.toString(),
+        toEmail: contactEmail,
+        fromEmail: pageUrl.hostname + "@webstudio.email",
+      },
       hookUrl: context.N8N_FORM_EMAIL_HOOK,
     });
 

diff --git a/fixtures/webstudio-custom-template/app/routes/_index.tsx b/fixtures/webstudio-custom-template/app/routes/_index.tsx
@@ -10,7 +10,11 @@ import {
   redirect,
 } from "@remix-run/server-runtime";
 import { useLoaderData } from "@remix-run/react";
-import { isLocalResource, loadResources } from "@webstudio-is/sdk";
+import {
+  isLocalResource,
+  loadResource,
+  loadResources,
+} from "@webstudio-is/sdk";
 import { ReactSdkContext } from "@webstudio-is/react-sdk";
 import {
   n8nHandler,
@@ -297,22 +301,32 @@ export const action = async ({
       throw new Error(`Form bot value invalid ${formBotValue}`);
     }
 
+    formData.delete(formIdFieldName);
+    formData.delete(formBotFieldName);
+
+    if (resource) {
+      const { ok, statusText } = await loadResource(fetch, {
+        ...resource,
+        body: Object.fromEntries(formData),
+      });
+      if (ok) {
+        return { success: true };
+      }
+      return { success: false, errors: [statusText] };
+    }
+
     if (contactEmail === undefined) {
       throw new Error("Contact email not found");
     }
 
-    const formInfo = {
-      formData,
-      projectId,
-      action: resource?.url ?? null,
-      method: getMethod(resource?.method),
-      pageUrl: pageUrl.toString(),
-      toEmail: contactEmail,
-      fromEmail: pageUrl.hostname + "@webstudio.email",
-    } as const;
-
     const result = await n8nHandler({
-      formInfo,
+      formInfo: {
+        formId: [projectId, resourceName].join("--"),
+        formData,
+        pageUrl: pageUrl.toString(),
+        toEmail: contactEmail,
+        fromEmail: pageUrl.hostname + "@webstudio.email",
+      },
       hookUrl: context.N8N_FORM_EMAIL_HOOK,
     });
 

diff --git a/fixtures/webstudio-remix-netlify-edge-functions/app/routes/[another-page]._index.tsx b/fixtures/webstudio-remix-netlify-edge-functions/app/routes/[another-page]._index.tsx
@@ -10,7 +10,11 @@ import {
   redirect,
 } from "@remix-run/server-runtime";
 import { useLoaderData } from "@remix-run/react";
-import { isLocalResource, loadResources } from "@webstudio-is/sdk";
+import {
+  isLocalResource,
+  loadResource,
+  loadResources,
+} from "@webstudio-is/sdk";
 import { ReactSdkContext } from "@webstudio-is/react-sdk";
 import {
   n8nHandler,
@@ -297,22 +301,32 @@ export const action = async ({
       throw new Error(`Form bot value invalid ${formBotValue}`);
     }
 
+    formData.delete(formIdFieldName);
+    formData.delete(formBotFieldName);
+
+    if (resource) {
+      const { ok, statusText } = await loadResource(fetch, {
+        ...resource,
+        body: Object.fromEntries(formData),
+      });
+      if (ok) {
+        return { success: true };
+      }
+      return { success: false, errors: [statusText] };
+    }
+
     if (contactEmail === undefined) {
       throw new Error("Contact email not found");
     }
 
-    const formInfo = {
-      formData,
-      projectId,
-      action: resource?.url ?? null,
-      method: getMethod(resource?.method),
-      pageUrl: pageUrl.toString(),
-      toEmail: contactEmail,
-      fromEmail: pageUrl.hostname + "@webstudio.email",
-    } as const;
-
     const result = await n8nHandler({
-      formInfo,
+      formInfo: {
+        formId: [projectId, resourceName].join("--"),
+        formData,
+        pageUrl: pageUrl.toString(),
+        toEmail: contactEmail,
+        fromEmail: pageUrl.hostname + "@webstudio.email",
+      },
       hookUrl: context.N8N_FORM_EMAIL_HOOK,
     });
 

diff --git a/fixtures/webstudio-remix-netlify-edge-functions/app/routes/_index.tsx b/fixtures/webstudio-remix-netlify-edge-functions/app/routes/_index.tsx
@@ -10,7 +10,11 @@ import {
   redirect,
 } from "@remix-run/server-runtime";
 import { useLoaderData } from "@remix-run/react";
-import { isLocalResource, loadResources } from "@webstudio-is/sdk";
+import {
+  isLocalResource,
+  loadResource,
+  loadResources,
+} from "@webstudio-is/sdk";
 import { ReactSdkContext } from "@webstudio-is/react-sdk";
 import {
   n8nHandler,
@@ -297,22 +301,32 @@ export const action = async ({
       throw new Error(`Form bot value invalid ${formBotValue}`);
     }
 
+    formData.delete(formIdFieldName);
+    formData.delete(formBotFieldName);
+
+    if (resource) {
+      const { ok, statusText } = await loadResource(fetch, {
+        ...resource,
+        body: Object.fromEntries(formData),
+      });
+      if (ok) {
+        return { success: true };
+      }
+      return { success: false, errors: [statusText] };
+    }
+
     if (contactEmail === undefined) {
       throw new Error("Contact email not found");
     }
 
-    const formInfo = {
-      formData,
-      projectId,
-      action: resource?.url ?? null,
-      method: getMethod(resource?.method),
-      pageUrl: pageUrl.toString(),
-      toEmail: contactEmail,
-      fromEmail: pageUrl.hostname + "@webstudio.email",
-    } as const;
-
     const result = await n8nHandler({
-      formInfo,
+      formInfo: {
+        formId: [projectId, resourceName].join("--"),
+        formData,
+        pageUrl: pageUrl.toString(),
+        toEmail: contactEmail,
+        fromEmail: pageUrl.hostname + "@webstudio.email",
+      },
       hookUrl: context.N8N_FORM_EMAIL_HOOK,
     });