Fix formspree submit function (#727)

* Fix formspree integration

* Changeset

* Fix lint

Author: nolannbiron

.changeset/curly-singers-destroy.md

@@ -0,0 +1,5 @@
+---
+'@gitbook/integration-formspree': patch
+---
+
+Fix formspree submit function

bun.lock

@@ -87,7 +87,7 @@
     },
     "integrations/formspree": {
       "name": "@gitbook/integration-formspree",
-      "version": "0.2.3",
+      "version": "0.2.4",
       "dependencies": {
         "@gitbook/runtime": "packages/runtime",
       },
@@ -340,7 +340,7 @@
     },
     "integrations/openapi": {
       "name": "@gitbook/integration-openapi",
-      "version": "0.0.0",
+      "version": "0.0.1",
       "dependencies": {
         "@gitbook/api": "*",
         "@gitbook/document": "*",
@@ -534,7 +534,7 @@
     },
     "packages/api": {
       "name": "@gitbook/api",
-      "version": "0.94.0",
+      "version": "0.96.0",
       "dependencies": {
         "event-iterator": "^2.0.0",
         "eventsource-parser": "^3.0.0",
@@ -577,7 +577,7 @@
     },
     "packages/document": {
       "name": "@gitbook/document",
-      "version": "0.0.0",
+      "version": "0.1.0",
       "dependencies": {
         "@gitbook/api": "*",
       },
@@ -588,7 +588,7 @@
     },
     "packages/runtime": {
       "name": "@gitbook/runtime",
-      "version": "0.18.0",
+      "version": "0.19.0",
       "dependencies": {
         "@gitbook/api": "*",
       },

integrations/formspree/src/index.tsx

@@ -1,35 +1,16 @@
-import {
-    createIntegration,
-    createComponent,
-    RuntimeContext,
-    RuntimeEnvironment,
-} from '@gitbook/runtime';
+import { createIntegration, createComponent } from '@gitbook/runtime';
 
 import { handleSubmit } from './utils';
-
-type FormspreeConfiguration = {
-    formspree_id: string;
-    email: string;
-    name: string;
-    message: string;
-};
-
-type FormspreeEnvironment = RuntimeEnvironment<FormspreeConfiguration>;
-type FormspreeContext = RuntimeContext<FormspreeEnvironment>;
-
-type FormspreeAction = {
-    action: 'submit';
-};
+import type {
+    FormspreeActionResponse,
+    FormspreeConfiguration,
+    FormspreeAction,
+    FormspreeContext,
+} from './types';
 
 const formspreeBlock = createComponent<
-    {},
-    | { formSubmitted: true }
-    | {
-          email: string;
-          name: string;
-          message: string;
-          formSubmitted: boolean;
-      },
+    Record<string, string>,
+    FormspreeActionResponse,
     FormspreeAction,
     FormspreeContext
 >({
@@ -42,12 +23,12 @@ const formspreeBlock = createComponent<
     },
     action: async (element, action, context) => {
         switch (action.action) {
-            case 'submit':
+            case 'submit': {
                 if (element.state.formSubmitted) {
                     return element;
                 }
 
-                handleSubmit(
+                const success = await handleSubmit(
                     (context.environment.spaceInstallation?.configuration as FormspreeConfiguration)
                         .formspree_id,
                     {
@@ -56,11 +37,17 @@ const formspreeBlock = createComponent<
                         message: element.state.message,
                     },
                 );
+
+                if (!success) {
+                    return element;
+                }
+
                 return {
                     state: {
                         formSubmitted: true,
                     },
                 };
+            }
         }
     },
     render: async (element, context: FormspreeContext) => {
@@ -113,6 +100,7 @@ const formspreeBlock = createComponent<
                     label={element.state.formSubmitted ? 'Submitted' : 'Submit'}
                     onPress={{ action: 'submit' }}
                     disabled={element.state.formSubmitted}
+                    style="primary"
                 />
             </block>
         );

integrations/formspree/src/types.ts

@@ -0,0 +1,28 @@
+import type { RuntimeContext, RuntimeEnvironment } from '@gitbook/runtime';
+
+export type FormspreeBodyData = {
+    email: string;
+    name: string;
+    message: string;
+};
+
+export type FormspreeConfiguration = FormspreeBodyData & {
+    formspree_id: string;
+};
+
+type FormspreeResponseSuccess = {
+    formSubmitted: true;
+};
+
+type FormspreeResponseFailure = FormspreeBodyData & {
+    formSubmitted: boolean;
+};
+
+export type FormspreeActionResponse = FormspreeResponseSuccess | FormspreeResponseFailure;
+
+export type FormspreeEnvironment = RuntimeEnvironment<FormspreeConfiguration>;
+export type FormspreeContext = RuntimeContext<FormspreeEnvironment>;
+
+export type FormspreeAction = {
+    action: 'submit';
+};

integrations/formspree/src/utils.ts

@@ -1,36 +1,19 @@
-// Handle errors better
+import type { FormspreeBodyData } from './types';
 
-export async function handleSubmit(formspreeId: string, body: any) {
-    const cleanedFormBody = await removeEmptyValues(body);
+// Submit form data to Formspree
+export async function handleSubmit(formspreeId: string, body: FormspreeBodyData) {
+    const cleanedFormBody = removeEmptyValues(body);
 
-    fetch(formspreeId, {
+    return fetch(formspreeId, {
         method: 'POST',
-        body: JSON.stringify({ data: cleanedFormBody, form: 'GitBook Integration' }),
+        body: JSON.stringify(cleanedFormBody),
         headers: {
             Accept: 'application/json',
         },
-    })
-        .then((response) => {
-            if (response.ok) {
-                return true;
-            } else {
-                return false;
-            }
-        })
-        .catch((error) => {
-            console.error(error);
-        });
+    });
 }
 
 // Clean data object being submitted
-export async function removeEmptyValues(object: any) {
-    for (const key in object) {
-        if (object.hasOwnProperty(key)) {
-            const value = object[key];
-            if (value === null || value === undefined || value === '') {
-                delete object[key];
-            }
-        }
-    }
-    return object;
+export function removeEmptyValues(object: FormspreeBodyData) {
+    return Object.fromEntries(Object.entries(object).filter(([, value]) => !!value));
 }

packages/runtime/src/jsx-runtime.d.ts

@@ -1,4 +1,4 @@
-import {
+import type {
     ContentKitBox,
     ContentKitButton,
     ContentKitCard,
@@ -25,7 +25,7 @@ import {
     ContentKitConfiguration,
 } from '@gitbook/api';
 
-import { jsx, jsxDEV, jsxs, Fragment } from './contentkit-jsx';
+import type { jsx, jsxDEV, jsxs, Fragment } from './contentkit-jsx';
 
 /**
  * This is a workaround for Typescript not supporting subpath exports in package.json
@@ -44,7 +44,7 @@ type OmitType<T> = Omit<T, 'type'>;
 declare global {
     namespace JSX {
         interface ElementChildrenAttribute {
-            children: {}; // specify children name to use
+            children: Record<string, unknown>; // specify children name to use
         }
 
         interface IntrinsicElements {