add terms checkbox

components/book/index.tsx

@@ -1,12 +1,14 @@
 import React, { useContext } from 'react'
+import Link from 'next/link'
 import Contact from './contact'
 import BookProvider, { BookContext } from '../../context/book'
 import DateSelect from './dateSelect'
 import Reason from './reason'
 import Button from '../button'
+import Required from '../required'
 
 function BookForm() {
-  const { onSubmit, state, forgetData } = useContext(BookContext)
+  const { onSubmit, onChangeEvent, state, forgetData } = useContext(BookContext)
   const { postData, postDataError, dataStoredLoaded } = state
 
   return (
@@ -18,6 +20,9 @@ function BookForm() {
           onSubmit()
         }}
       >
+        <div className="text-right">
+          Mit <Required /> markierte Felder sind Pflichtfelder.
+        </div>
         <DateSelect />
         <Reason />
         {dataStoredLoaded && (
@@ -32,6 +37,12 @@ function BookForm() {
           </p>
         )}
         <Contact />
+        <div className="mb-3">
+          <label className="form-check-label inline-block text-gray-800 cursor-pointer" htmlFor="termsAgreed">
+            <input className="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="checkbox" value="" id="termsAgreed" name="termsAgreed" required onChange={onChangeEvent} />
+            Ich stimme den <Link href="./terms" target="_blank" className="underline hover:text-blue-700">Mietbedingungen</Link> zu <Required />
+          </label>
+        </div>
         <div className="flex items-end">
           <Button type="submit" loading={!!postData} disabled={postData}>
             {postData ? 'Speichern...' : 'Absenden'}

context/book.tsx

@@ -135,11 +135,16 @@ export default function BookProvider({ children }) {
   const onChangeEvent = (
     event: React.ChangeEvent<React.ElementRef<'input'>>
   ) => {
-    const { name, value } = event.target
+
+    if (event.target.tagName !== 'INPUT') {
+      throw new Error('Woops, this only supports inputs');
+    }
+
+    const { name, value, checked, type } = event.target
 
     dispatch({
       type: ACTIONS.SET_FORM_DATA,
-      payload: { [name]: value },
+      payload: { [name]: type === 'checkbox' ? checked : value },
     })
   }
 
@@ -181,4 +186,4 @@ export default function BookProvider({ children }) {
       {children}
     </BookContext.Provider>
   )
-}
+}