From f27c510e2d53a20afb66a11caba79bd35787931a Mon Sep 17 00:00:00 2001
From: Thomas Ruoff <truoff@brandwatch.com>
Date: Mon, 9 Jan 2023 00:53:39 +0100
Subject: [PATCH] add terms checkbox

---
 components/book/index.tsx | 13 ++++++++++++-
 context/book.tsx          | 11 ++++++++---
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/components/book/index.tsx b/components/book/index.tsx
index b14d4e4..882f60e 100644
--- a/components/book/index.tsx
+++ b/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'}
diff --git a/context/book.tsx b/context/book.tsx
index 45c8ba3..be9ab89 100644
--- a/context/book.tsx
+++ b/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>
   )
-}
+}
\ No newline at end of file