Skip to content

Update formspree configuration to the block instead of manifest #415

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
addisonschultz wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

Update formspree configuration to the block instead of manifest #415

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d91a126
Update formspree configuration to the block instead of manifest
addisonschultz Feb 26, 2024
7b426fe
Add changeset
addisonschultz Feb 26, 2024
c61a250
Persist state to configuration object
addisonschultz Sep 25, 2024
60b2c35
Remove toggle temporarily, show all fields
addisonschultz Oct 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/wise-geckos-punch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@gitbook/integration-formspree': minor
---

Updates the configuration of the formspree integration to the block itself, instead of in the manifest
18 changes: 3 additions & 15 deletions integrations/formspree/gitbook-manifest.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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: {}
1 change: 1 addition & 0 deletions integrations/formspree/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"name": "@gitbook/integration-formspree",
"private": true,
"version": "1.0.0",
"scripts": {
"lint": "eslint ./**/*.ts*",
"typecheck": "tsc --noEmit",
Expand Down
141 changes: 99 additions & 42 deletions integrations/formspree/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { createIntegration, createComponent } from '@gitbook/runtime';

import { handleSubmit } from './utils';
import { saveSpaceConfiguration, handleSubmit } from './utils';

type FormspreeContext = {
environment: {
Expand All @@ -10,6 +10,9 @@ type FormspreeContext = {
email: string;
name: string;
message: string;
emailVisible?: boolean;
nameVisible?: boolean;
messageVisible?: boolean;
};
};
};
Expand All @@ -21,11 +24,17 @@ type FormspreeAction = {

const formspreeBlock = createComponent({
componentId: 'formspree',
initialState: {
email: '',
name: '',
message: '',
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) {
Expand All @@ -38,58 +47,106 @@ const formspreeBlock = createComponent({
return {
state: {
formSubmitted: true,
...element.state,
},
};
case 'toggleEmail': {
const emailToggle =
!context.environment.spaceInstallation.configuration.emailVisible;
await saveSpaceConfiguration(context, {
...element.state,
emailVisible: emailToggle,
});
return element;
}
case 'toggleName': {
const nameToggle = !context.environment.spaceInstallation.configuration.nameVisible;
await saveSpaceConfiguration(context, {
...element.state,
nameVisible: nameToggle,
});
return element;
}
case 'toggleMessage': {
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 (
<block>
<block
// controls={[
// {
// label: 'Toggle Email',
// onPress: {
// action: 'toggleEmail',
// },
// },
// {
// label: 'Toggle Name',
// onPress: {
// action: 'toggleName',
// },
// },
// {
// label: 'Toggle Messsage',
// onPress: {
// action: 'toggleMessage',
// },
// },
// ]}
>
<hstack>
{/* Email */}
{context.environment.spaceInstallation?.configuration.email ? (
<box grow={1}>
<input
label="Email"
element={<textinput state="email" placeholder="Your email" />}
/>
</box>
) : null}
<box grow={1}>
<input
label="Email"
element={<textinput state="email" placeholder="Your email" />}
/>
</box>

{/* Name */}
{context.environment.spaceInstallation?.configuration.name ? (
<box grow={1}>
<input
label="Name"
element={<textinput state="name" placeholder="Your name" />}
/>
</box>
) : null}
<box grow={1}>
<input
label="Name"
element={<textinput state="name" placeholder="Your name" />}
/>
</box>
</hstack>

<vstack>
{/* Message */}
{context.environment.spaceInstallation?.configuration.message ? (
<box grow={2}>
<input
label="Message"
element={
<textinput
state="message"
placeholder="Your message"
multiline={true}
/>
}
/>
</box>
) : null}
<box grow={2}>
<input
label="Message"
element={
<textinput
state="message"
placeholder="Your message"
multiline={true}
/>
}
/>
</box>
</vstack>

<button
label={element.state.formSubmitted ? 'Submitted' : 'Submit'}
onPress={{ action: 'submit' }}
disabled={element.state.formSubmitted}
/>
<box grow={2}>
<button
label={element.state.formSubmitted ? 'Submitted' : 'Submit'}
onPress={{ action: 'submit' }}
disabled={element.state.formSubmitted}
/>
</box>
</block>
);
},
Expand Down
25 changes: 25 additions & 0 deletions integrations/formspree/src/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,3 +34,28 @@ export async function removeEmptyValues(object) {
}
return object;
}

/**
* Save the space configuration for the current space installation.
*/
export async function saveSpaceConfiguration(context, state) {
const { api, environment } = context;
const spaceInstallation = environment.spaceInstallation;

console.log('state trying to be saved: ', state);

// Save the space installation configuration
const { data } = await api.integrations.updateIntegrationSpaceInstallation(
spaceInstallation.integration,
spaceInstallation.installation,
spaceInstallation.space,
{
configuration: {
...spaceInstallation.configuration,
...state,
},
}
);

console.log('Just saved data: ', data.configuration);
}