diff --git a/tavla/app/(admin)/utils/index.ts b/tavla/app/(admin)/utils/index.ts index 51fb5cce1..a52b3fba4 100644 --- a/tavla/app/(admin)/utils/index.ts +++ b/tavla/app/(admin)/utils/index.ts @@ -234,6 +234,13 @@ export function getFormFeedbackForError( variant: 'error', } } + case 'contact/message-missing': { + return { + form_type: 'user', + feedback: 'Vennligst legg igjen en melding.', + variant: 'error', + } + } } return { diff --git a/tavla/app/components/ContactForm.tsx b/tavla/app/components/ContactForm.tsx new file mode 100644 index 000000000..f61a4e27b --- /dev/null +++ b/tavla/app/components/ContactForm.tsx @@ -0,0 +1,124 @@ +'use client' +import { TextArea, TextField } from '@entur/form' +import { Label, Paragraph } from '@entur/typography' +import { SubmitButton } from 'components/Form/SubmitButton' +import { postForm } from './actions' +import { + TFormFeedback, + getFormFeedbackForError, + getFormFeedbackForField, +} from 'app/(admin)/utils' +import { useState } from 'react' +import { FormError } from 'app/(admin)/components/FormError' +import { useToast } from '@entur/alert' +import { Expandable } from './Expandable' +import { usePostHog } from 'posthog-js/react' +import { isEmptyOrSpaces } from 'app/(admin)/edit/utils' +import { validEmail } from 'utils/email' +function ContactForm() { + const posthog = usePostHog() + + const { addToast } = useToast() + const [isOpen, setIsOpen] = useState(false) + const [formState, setFormError] = useState( + undefined, + ) + + const submit = async (data: FormData) => { + const email = data.get('email') as string + const message = data.get('message') as string + + if (!validEmail(email)) + return setFormError(getFormFeedbackForError('auth/missing-email')) + + if (isEmptyOrSpaces(message)) + return setFormError( + getFormFeedbackForError('contact/message-missing'), + ) + const error = await postForm(formState, data) + + if (error) return setFormError(error) + else { + setIsOpen(false) + setFormError(undefined) + addToast('Takk for tilbakemelding!') + } + } + + return ( +
+ isOpen + ? posthog.capture('CONTACT_FORM_OPENED') + : setFormError(undefined) + } + > + +
+ + Vi setter stor pris på tilbakemeldinger og innspill, og + bistår gjerne hvis du vil ha hjelp til å komme i gang + med Tavla! + +
+ + + +
+
+ +