From d91a126b419e69f08a9e03ddc38c51c1d5e3ebca Mon Sep 17 00:00:00 2001 From: Addison Date: Mon, 26 Feb 2024 12:21:32 -0700 Subject: [PATCH 1/4] Update formspree configuration to the block instead of manifest --- integrations/formspree/gitbook-manifest.yaml | 18 ++------ integrations/formspree/src/index.tsx | 44 ++++++++++++++++++-- 2 files changed, 43 insertions(+), 19 deletions(-) diff --git a/integrations/formspree/gitbook-manifest.yaml b/integrations/formspree/gitbook-manifest.yaml index 0ec4f7769..6f60d00ae 100644 --- a/integrations/formspree/gitbook-manifest.yaml +++ b/integrations/formspree/gitbook-manifest.yaml @@ -6,8 +6,11 @@ description: A simple Formspree integration to collect user signups directly in summary: | # Overview The GitBook Formspree integration allows you to specify a form ID from your Formspree account to collect user signups. + # Configure You can install the integration on a single space by clicking the integrations button in sub-navigation panel. If you prefer to install the Formspree integration on multiple on all spaces you can enable this through organization settings. From here you can specify different Formspree IDs for different spaces. + + You can customize the integration's form fields directly from the block itself. Press the Action menu with the block selected to see the available customization options. icon: ./assets/formspree-icon.png previewImages: - ./assets/formspree-banner.png @@ -30,19 +33,4 @@ configurations: type: string title: Formspree endpoint description: The endpoint your formspree lives at. - email: - type: boolean - title: Email - description: An email field for your form - default: true - name: - type: boolean - title: Name - description: A name field for your form - default: false - message: - type: boolean - title: Message - description: A message field for your form - default: false secrets: {} diff --git a/integrations/formspree/src/index.tsx b/integrations/formspree/src/index.tsx index 340f6f902..5e1aaba5a 100644 --- a/integrations/formspree/src/index.tsx +++ b/integrations/formspree/src/index.tsx @@ -25,6 +25,9 @@ const formspreeBlock = createComponent({ email: '', name: '', message: '', + emailVisible: true, + nameVisible: false, + messageVisible: false, formSubmitted: false, }, action: async (element, action: FormspreeAction, context: FormspreeContext) => { @@ -38,16 +41,49 @@ const formspreeBlock = createComponent({ return { state: { formSubmitted: true, + ...element.state, }, }; + case 'toggleEmail': { + return { state: { emailVisible: !element.state.emailVisible, ...element.state } }; + } + case 'toggleName': { + return { state: { nameVisible: !element.state.nameVisible, ...element.state } }; + } + case 'toggleMessage': { + return { + state: { messageVisible: !element.state.messageVisible, ...element.state }, + }; + } } }, render: async (element, context: FormspreeContext) => { return ( - + {/* Email */} - {context.environment.spaceInstallation?.configuration.email ? ( + {element.state.emailVisible ? ( {/* Message */} - {context.environment.spaceInstallation?.configuration.message ? ( + {element.state.messageVisible ? ( Date: Mon, 26 Feb 2024 12:25:39 -0700 Subject: [PATCH 2/4] Add changeset --- .changeset/wise-geckos-punch.md | 5 +++++ integrations/formspree/package.json | 1 + 2 files changed, 6 insertions(+) create mode 100644 .changeset/wise-geckos-punch.md diff --git a/.changeset/wise-geckos-punch.md b/.changeset/wise-geckos-punch.md new file mode 100644 index 000000000..01e24c3d3 --- /dev/null +++ b/.changeset/wise-geckos-punch.md @@ -0,0 +1,5 @@ +--- +'@gitbook/integration-formspree': minor +--- + +Updates the configuration of the formspree integration to the block itself, instead of in the manifest diff --git a/integrations/formspree/package.json b/integrations/formspree/package.json index a2930f35d..388e98080 100644 --- a/integrations/formspree/package.json +++ b/integrations/formspree/package.json @@ -1,6 +1,7 @@ { "name": "@gitbook/integration-formspree", "private": true, + "version": "1.0.0", "scripts": { "lint": "eslint ./**/*.ts*", "typecheck": "tsc --noEmit", From c61a250cd8ca3c0a175f16b7bf465f7768535d94 Mon Sep 17 00:00:00 2001 From: Addison Date: Wed, 25 Sep 2024 15:33:13 +0900 Subject: [PATCH 3/4] Persist state to configuration object --- integrations/formspree/src/index.tsx | 59 ++++++++++++++++++++-------- integrations/formspree/src/utils.ts | 25 ++++++++++++ 2 files changed, 67 insertions(+), 17 deletions(-) diff --git a/integrations/formspree/src/index.tsx b/integrations/formspree/src/index.tsx index 5e1aaba5a..078b30c3d 100644 --- a/integrations/formspree/src/index.tsx +++ b/integrations/formspree/src/index.tsx @@ -1,6 +1,6 @@ import { createIntegration, createComponent } from '@gitbook/runtime'; -import { handleSubmit } from './utils'; +import { saveSpaceConfiguration, handleSubmit } from './utils'; type FormspreeContext = { environment: { @@ -10,6 +10,9 @@ type FormspreeContext = { email: string; name: string; message: string; + emailVisible?: boolean; + nameVisible?: boolean; + messageVisible?: boolean; }; }; }; @@ -21,14 +24,17 @@ type FormspreeAction = { const formspreeBlock = createComponent({ componentId: 'formspree', - initialState: { - email: '', - name: '', - message: '', - emailVisible: true, - nameVisible: false, - messageVisible: false, - formSubmitted: false, + initialState: (props: any) => { + console.log('PROPS on create component: ', props); + return { + email: '', + name: '', + message: '', + emailVisible: props.spaceInstallation?.configuration?.emailVisible || true, + nameVisible: props.spaceInstallation?.configuration?.nameVisibile || false, + messageVisible: props.spaceInstallation?.configuration?.messageVisible || false, + formSubmitted: false, + }; }, action: async (element, action: FormspreeAction, context: FormspreeContext) => { switch (action.action) { @@ -45,19 +51,38 @@ const formspreeBlock = createComponent({ }, }; case 'toggleEmail': { - return { state: { emailVisible: !element.state.emailVisible, ...element.state } }; + const emailToggle = + !context.environment.spaceInstallation.configuration.emailVisible; + await saveSpaceConfiguration(context, { + ...element.state, + emailVisible: emailToggle, + }); + return element; } case 'toggleName': { - return { state: { nameVisible: !element.state.nameVisible, ...element.state } }; + const nameToggle = !context.environment.spaceInstallation.configuration.nameVisible; + await saveSpaceConfiguration(context, { + ...element.state, + nameVisible: nameToggle, + }); + return element; } case 'toggleMessage': { - return { - state: { messageVisible: !element.state.messageVisible, ...element.state }, - }; + const messageToggle = + !context.environment.spaceInstallation.configuration.messageVisible; + await saveSpaceConfiguration(context, { + ...element.state, + messageVisible: messageToggle, + }); + return element; } } }, render: async (element, context: FormspreeContext) => { + const spaceInstallationConfigration = context.environment.spaceInstallation.configuration; + + console.log('Rendering State: ', element.state); + console.log('Rendering Configuration: ', spaceInstallationConfigration); return ( {/* Email */} - {element.state.emailVisible ? ( + {spaceInstallationConfigration?.emailVisible ? ( {/* Message */} - {element.state.messageVisible ? ( + {spaceInstallationConfigration?.messageVisible ? ( Date: Thu, 17 Oct 2024 18:20:29 +1100 Subject: [PATCH 4/4] Remove toggle temporarily, show all fields --- integrations/formspree/src/index.tsx | 106 +++++++++++++-------------- 1 file changed, 51 insertions(+), 55 deletions(-) diff --git a/integrations/formspree/src/index.tsx b/integrations/formspree/src/index.tsx index 078b30c3d..8d872737e 100644 --- a/integrations/formspree/src/index.tsx +++ b/integrations/formspree/src/index.tsx @@ -85,72 +85,68 @@ const formspreeBlock = createComponent({ console.log('Rendering Configuration: ', spaceInstallationConfigration); return ( {/* Email */} - {spaceInstallationConfigration?.emailVisible ? ( - - } - /> - - ) : null} + + } + /> + {/* Name */} - {spaceInstallationConfigration?.nameVisible ? ( - - } - /> - - ) : null} + + } + /> + {/* Message */} - {spaceInstallationConfigration?.messageVisible ? ( - - - } - /> - - ) : null} + + + } + /> + -