added song request to form

src/app/actions.ts

@@ -13,6 +13,7 @@ const notionFields: Record<string, string> = {
 	'dietary': `{"Dietary Requirements": {"rich_text": [{"type": "text", "text": {"content": "{{value}}"}}]}}`,
 	'meal': '{"Meal":{"select":{"name": "{{value}}"}}}',
 	'name': `{"Name": {"title": [{"type": "text","text": {"content": "{{value}}"}}]}}`,
+	'song': '{"Song": {"rich_text": [{"type": "text", "text": {"content": "{{value}}"}}]}}',
 }
 
 export async function submit (guest: string, formData: FormData)

src/components/parts/rsvpForm/adult/index.tsx

@@ -8,7 +8,7 @@ const mealOptions: MealOptions[] = ['Steak', 'Fish', 'Vegetarian'];
 
 const Adult = (person: AdultType) =>
 {
-	const { id, name, attending, dietary, meal } = person
+	const { id, name, attending, dietary, meal, song } = person
 	const [status, setStatus] = useState(attending === 'Yes')
 
 	return (
@@ -66,6 +66,11 @@ const Adult = (person: AdultType) =>
 						<label htmlFor={`dietary_${ id }`}>Dietary requirements</label>
 						<textarea name={`dietary_${ id }`} id={`dietary_${ id }`} defaultValue={dietary}></textarea>
 					</span>
+
+					<span>
+						<label htmlFor={`song_${ id }`}>Any songs that would get you on the dancefloor?</label>
+						<textarea name={`song_${ id }`} id={`song_${ id }`} defaultValue={song}></textarea>
+					</span>
 				</>
 			}
 		</div>

src/components/parts/rsvpForm/child/index.tsx

@@ -6,7 +6,7 @@ import styles from '../styles.module.css'
 
 const Child = (person: ChildType) =>
 {
-	const { id, name, attending, dietary, age } = person
+	const { id, name, attending, dietary, age, song } = person
 	const [status, setStatus] = useState(attending === 'Yes')
 
 	return (
@@ -61,8 +61,14 @@ const Child = (person: ChildType) =>
 				<span><label htmlFor={`age_${ id }`}>Age</label>
 					<input type="text" name={`age_${ id }`} id={`age_${ id }`} defaultValue={age} required /></span>
 
-				<span className={styles.long}><label htmlFor={`dietary_${ id }`}>Dietary requirements</label>
+				<span className={styles.long}>
+					<label htmlFor={`dietary_${ id }`}>Dietary requirements</label>
 					<textarea name={`dietary_${ id }`} id={`dietary_${ id }`} defaultValue={dietary}></textarea></span>
+
+				<span>
+					<label htmlFor={`song_${ id }`}>Any songs that would get you on the dancefloor?</label>
+					<textarea name={`song_${ id }`} id={`song_${ id }`} defaultValue={song}></textarea>
+				</span>
 			</>}
 		</div>
 	)

src/components/parts/rsvpForm/index.tsx

@@ -34,7 +34,8 @@ const RSVPForm = ({ people, closeModal, guest, open }: FormTypes) =>
 					meal: properties.Meal?.select?.name,
 					dietary: properties['Dietary Requirements']?.rich_text?.[0]?.text.content,
 					age: parseInt(properties.Age?.rich_text?.[0]?.plain_text),
-					child: properties.Child?.checkbox
+					child: properties.Child?.checkbox,
+					song: properties['Song']?.rich_text?.[0]?.text.content,
 				}
 
 				return (

src/types/people.d.ts

@@ -10,7 +10,8 @@ export type PersonDefaults = {
 		full: string
 	}
 	attending: 'Yes' | 'No'
-	dietary: string
+	dietary?: string
+	song?: string
 }
 
 export type Adult = PersonDefaults & {
@@ -56,6 +57,14 @@ export type NotionPerson = {
 				}
 			}[]
 		}
+		Song: {
+			rich_text: {
+				type: 'text'
+				text: {
+					content: string
+				}
+			}[]
+		}
 		Meal: {
 			select: {
 				name: MealOptions