From 18f0adcf70763629814a1a3285c47bc3128c1f24 Mon Sep 17 00:00:00 2001
From: Purusoth Thushyanthan <purusoth.thushyanthan@bekk.no>
Date: Tue, 3 Sep 2024 13:05:26 +0200
Subject: [PATCH 01/13] feat(utils): new error messages

---
 tavla/app/(admin)/utils/index.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/tavla/app/(admin)/utils/index.ts b/tavla/app/(admin)/utils/index.ts
index 51fb5cce1..fdb478464 100644
--- a/tavla/app/(admin)/utils/index.ts
+++ b/tavla/app/(admin)/utils/index.ts
@@ -234,6 +234,20 @@ export function getFormFeedbackForError(
                 variant: 'error',
             }
         }
+        case 'contact/message-missing': {
+            return {
+                form_type: 'user',
+                feedback: 'Vennligst legg igjen en melding',
+                variant: 'error',
+            }
+        }
+        case 'success': {
+            return {
+                form_type: 'general',
+                feedback: '',
+                variant: 'success',
+            }
+        }
     }
 
     return {

From e914ba78ca90864c1c2f82d183dd17e2922f31c0 Mon Sep 17 00:00:00 2001
From: Purusoth Thushyanthan <purusoth.thushyanthan@bekk.no>
Date: Wed, 4 Sep 2024 08:04:49 +0200
Subject: [PATCH 02/13] feat(landing): contact form

---
 tavla/app/(admin)/utils/index.ts     |  7 ---
 tavla/app/components/ContactForm.tsx | 92 ++++++++++++++++++++++++++++
 tavla/app/components/Expandable.tsx  | 34 ++++++++++
 tavla/app/components/actions.ts      | 32 ++++++++++
 tavla/app/layout.tsx                 |  4 +-
 5 files changed, 160 insertions(+), 9 deletions(-)
 create mode 100644 tavla/app/components/ContactForm.tsx
 create mode 100644 tavla/app/components/Expandable.tsx
 create mode 100644 tavla/app/components/actions.ts

diff --git a/tavla/app/(admin)/utils/index.ts b/tavla/app/(admin)/utils/index.ts
index fdb478464..bc4c33b41 100644
--- a/tavla/app/(admin)/utils/index.ts
+++ b/tavla/app/(admin)/utils/index.ts
@@ -241,13 +241,6 @@ export function getFormFeedbackForError(
                 variant: 'error',
             }
         }
-        case 'success': {
-            return {
-                form_type: 'general',
-                feedback: '',
-                variant: 'success',
-            }
-        }
     }
 
     return {
diff --git a/tavla/app/components/ContactForm.tsx b/tavla/app/components/ContactForm.tsx
new file mode 100644
index 000000000..a769b631a
--- /dev/null
+++ b/tavla/app/components/ContactForm.tsx
@@ -0,0 +1,92 @@
+'use client'
+import { TextArea, TextField } from '@entur/form'
+import { Heading4, Label, Paragraph } from '@entur/typography'
+import { SubmitButton } from 'components/Form/SubmitButton'
+import { useFormState } from 'react-dom'
+import { postForm } from './actions'
+import { getFormFeedbackForField } from 'app/(admin)/utils'
+import { useEffect, useRef, useState } from 'react'
+import { FormError } from 'app/(admin)/components/FormError'
+import { useToast } from '@entur/alert'
+import { Expandable } from './Expandable'
+
+export function ContactForm() {
+    const formRef = useRef<HTMLFormElement>(null)
+    const { addToast } = useToast()
+    const [state, action] = useFormState(postForm, undefined)
+    const [isOpen, setIsOpen] = useState(false)
+
+    useEffect(() => {
+        if (!formRef.current) return
+        if (state?.feedback) {
+            setIsOpen(true)
+        } else {
+            formRef.current?.reset()
+            setIsOpen(false)
+            addToast('Takk for din tilbakemelding!')
+        }
+    }, [state, addToast])
+    return (
+        <div className="flex items-center justify-center w-1/6 h-14">
+            <Expandable
+                title="Trenger du hjelp?"
+                isOpen={isOpen}
+                setIsOpen={setIsOpen}
+            >
+                <form
+                    action={action}
+                    ref={formRef}
+                    className="flex flex-col gap-4 pt-4 p-6 "
+                >
+                    <Heading4 margin="none">
+                        Har du spørsmål/innspill eller ønsker hjelp med å komme
+                        i gang?
+                    </Heading4>
+                    <div>
+                        <Label
+                            htmlFor="email"
+                            className="font-bold"
+                            aria-required
+                        >
+                            E-post *
+                        </Label>
+
+                        <TextField
+                            label="E-postadresse"
+                            name="email"
+                            type="email"
+                            aria-required
+                            {...getFormFeedbackForField('email', state)}
+                        />
+                    </div>
+                    <div>
+                        <Label htmlFor="message" className="font-bold">
+                            Melding
+                        </Label>
+                        <TextArea
+                            name="message"
+                            id="message"
+                            label="Melding"
+                            aria-label="Skriv her"
+                            required
+                            aria-required
+                            {...getFormFeedbackForField('user', state)}
+                        />
+                    </div>
+                    <Paragraph margin="none">
+                        Hvis du ønsker å legge ved bilder, kan du sende en
+                        e-post til tavla@entur.org
+                    </Paragraph>
+                    <FormError {...getFormFeedbackForField('general', state)} />
+                    <SubmitButton
+                        variant="primary"
+                        width="fluid"
+                        aria-label="Send"
+                    >
+                        Send
+                    </SubmitButton>
+                </form>
+            </Expandable>
+        </div>
+    )
+}
diff --git a/tavla/app/components/Expandable.tsx b/tavla/app/components/Expandable.tsx
new file mode 100644
index 000000000..0be83876a
--- /dev/null
+++ b/tavla/app/components/Expandable.tsx
@@ -0,0 +1,34 @@
+import { IconButton } from '@entur/button'
+import { DownArrowIcon, UpArrowIcon } from '@entur/icons'
+import { Heading5 } from '@entur/typography'
+import { Dispatch, SetStateAction } from 'react'
+
+function Expandable({
+    title,
+    isOpen,
+    setIsOpen,
+    children,
+}: {
+    title: string
+    isOpen: boolean
+    setIsOpen: Dispatch<SetStateAction<boolean>>
+    children: JSX.Element
+}) {
+    return (
+        <div className="fixed bottom-0 right-6 w-1/4 z-10">
+            <div
+                onClick={() => setIsOpen(!isOpen)}
+                className="flex justify-between items-center px-6 py-4 bg-blue80 w-full rounded-t"
+            >
+                <Heading5 margin="none">{title} </Heading5>
+                <IconButton className="border-0!">
+                    {isOpen ? <DownArrowIcon /> : <UpArrowIcon />}
+                </IconButton>
+            </div>
+            {isOpen && (
+                <div className="rounded-b p-4 bg-blue90">{children}</div>
+            )}
+        </div>
+    )
+}
+export { Expandable }
diff --git a/tavla/app/components/actions.ts b/tavla/app/components/actions.ts
new file mode 100644
index 000000000..a731075d7
--- /dev/null
+++ b/tavla/app/components/actions.ts
@@ -0,0 +1,32 @@
+'use server'
+
+import { TFormFeedback, getFormFeedbackForError } from 'app/(admin)/utils'
+
+async function postForm(prevState: TFormFeedback | undefined, data: FormData) {
+    const email = data.get('email') as string
+    const message = data.get('message') as string
+
+    if (!email) {
+        return getFormFeedbackForError('auth/missing-email')
+    }
+    if (!message) {
+        return getFormFeedbackForError('contact/message-missing')
+    }
+    const payload = {
+        text: `:email: *Ny melding* :email:\n\n*E-postadresse:* ${email}\n*Melding:* ${message}`,
+    }
+    const url = process.env.SLACK_WEBHOOK_URL ?? ''
+    const response = await fetch(url, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(payload),
+    })
+
+    if (!response.ok) {
+        return getFormFeedbackForError('general')
+    }
+}
+
+export { postForm }
diff --git a/tavla/app/layout.tsx b/tavla/app/layout.tsx
index 993194162..2457c3efe 100644
--- a/tavla/app/layout.tsx
+++ b/tavla/app/layout.tsx
@@ -8,10 +8,10 @@ import { Metadata } from 'next'
 import dynamic from 'next/dynamic'
 import { EnturToastProvider, PHProvider } from './providers'
 import { Footer } from './(admin)/components/Footer'
-import { FloatingContact } from './components/FloatingContact'
 import { TopNavigation } from './(admin)/components/TopNavigation'
 import { cookies } from 'next/headers'
 import { verifySession } from './(admin)/utils/firebase'
+import { ContactForm } from './components/ContactForm'
 
 export const metadata: Metadata = {
     title: 'Entur Tavla',
@@ -52,7 +52,7 @@ async function RootLayout({ children }: { children: ReactNode }) {
                         <TopNavigation loggedIn={loggedIn} />
                         <PostHogPageView />
                         {children}
-                        <FloatingContact />
+                        <ContactForm />
                         <Footer />
                     </body>
                 </EnturToastProvider>

From 7de9da948c762eb3986d16c98e27c3e37aaa8815 Mon Sep 17 00:00:00 2001
From: Purusoth Thushyanthan <purusoth.thushyanthan@bekk.no>
Date: Wed, 4 Sep 2024 12:43:04 +0200
Subject: [PATCH 03/13] style(landing): contact form

---
 tavla/app/components/ContactForm.tsx | 6 +++---
 tavla/app/components/Expandable.tsx  | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/tavla/app/components/ContactForm.tsx b/tavla/app/components/ContactForm.tsx
index a769b631a..86cffdb5a 100644
--- a/tavla/app/components/ContactForm.tsx
+++ b/tavla/app/components/ContactForm.tsx
@@ -1,6 +1,6 @@
 'use client'
 import { TextArea, TextField } from '@entur/form'
-import { Heading4, Label, Paragraph } from '@entur/typography'
+import { Label, Paragraph } from '@entur/typography'
 import { SubmitButton } from 'components/Form/SubmitButton'
 import { useFormState } from 'react-dom'
 import { postForm } from './actions'
@@ -38,10 +38,10 @@ export function ContactForm() {
                     ref={formRef}
                     className="flex flex-col gap-4 pt-4 p-6 "
                 >
-                    <Heading4 margin="none">
+                    <Paragraph as="h1" margin="none" className="font-bold">
                         Har du spørsmål/innspill eller ønsker hjelp med å komme
                         i gang?
-                    </Heading4>
+                    </Paragraph>
                     <div>
                         <Label
                             htmlFor="email"
diff --git a/tavla/app/components/Expandable.tsx b/tavla/app/components/Expandable.tsx
index 0be83876a..699d7b164 100644
--- a/tavla/app/components/Expandable.tsx
+++ b/tavla/app/components/Expandable.tsx
@@ -15,7 +15,7 @@ function Expandable({
     children: JSX.Element
 }) {
     return (
-        <div className="fixed bottom-0 right-6 w-1/4 z-10">
+        <div className="fixed bottom-0 right-3 w-1/4 z-10">
             <div
                 onClick={() => setIsOpen(!isOpen)}
                 className="flex justify-between items-center px-6 py-4 bg-blue80 w-full rounded-t"

From 134013cd579bbb042c9548fdb86de927b9b57660 Mon Sep 17 00:00:00 2001
From: Purusoth Thushyanthan <purusoth.thushyanthan@bekk.no>
Date: Thu, 5 Sep 2024 12:35:48 +0200
Subject: [PATCH 04/13] style(landing): webhook message

---
 tavla/app/components/actions.ts | 59 +++++++++++++++++++++++++++------
 1 file changed, 49 insertions(+), 10 deletions(-)

diff --git a/tavla/app/components/actions.ts b/tavla/app/components/actions.ts
index a731075d7..cf4e22a8b 100644
--- a/tavla/app/components/actions.ts
+++ b/tavla/app/components/actions.ts
@@ -13,18 +13,57 @@ async function postForm(prevState: TFormFeedback | undefined, data: FormData) {
         return getFormFeedbackForError('contact/message-missing')
     }
     const payload = {
-        text: `:email: *Ny melding* :email:\n\n*E-postadresse:* ${email}\n*Melding:* ${message}`,
+        blocks: [
+            {
+                type: 'header',
+                text: {
+                    type: 'plain_text',
+                    text: ':email: Ny Melding :email:',
+                    emoji: true,
+                },
+            },
+            {
+                type: 'divider',
+            },
+            {
+                type: 'section',
+                block_id: 'email_info',
+                fields: [
+                    {
+                        type: 'mrkdwn',
+                        text: `*Fra:* \n${email}`,
+                    },
+                ],
+            },
+            {
+                type: 'section',
+                block_id: 'email_body',
+                text: {
+                    type: 'mrkdwn',
+                    text: `*Melding:* \n${message}`,
+                },
+            },
+            {
+                type: 'divider',
+            },
+        ],
     }
-    const url = process.env.SLACK_WEBHOOK_URL ?? ''
-    const response = await fetch(url, {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(payload),
-    })
 
-    if (!response.ok) {
+    try {
+        const url = process.env.SLACK_WEBHOOK_URL
+        if (!url) throw Error()
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(payload),
+        })
+
+        if (!response.ok) {
+            throw Error()
+        }
+    } catch (e: unknown) {
         return getFormFeedbackForError('general')
     }
 }

From 763e070cf459e372aca3b2b167f315fb001dbd72 Mon Sep 17 00:00:00 2001
From: Purusoth Thushyanthan <purusoth.thushyanthan@bekk.no>
Date: Thu, 5 Sep 2024 14:08:02 +0200
Subject: [PATCH 05/13] feat(helm): slack secret

---
 tavla/helm/tavla/values.yaml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/tavla/helm/tavla/values.yaml b/tavla/helm/tavla/values.yaml
index 4564b499d..5f8ed388c 100644
--- a/tavla/helm/tavla/values.yaml
+++ b/tavla/helm/tavla/values.yaml
@@ -17,6 +17,9 @@ common:
                   secretKeyRef:
                       name: backend
                       key: api-key
+    secrets:
+        slack:
+            - SLACK_WEB_HOOK
         probes:
             enabled: true
             spec:

From ba4775507658a65b54dac8701eed89cb5091462d Mon Sep 17 00:00:00 2001
From: Purusoth Thushyanthan <purusoth.thushyanthan@bekk.no>
Date: Mon, 9 Sep 2024 13:39:27 +0200
Subject: [PATCH 06/13] style(landing): mobile friendly contact form

---
 tavla/app/components/ContactForm.tsx | 9 +++++----
 tavla/app/components/Expandable.tsx  | 2 +-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/tavla/app/components/ContactForm.tsx b/tavla/app/components/ContactForm.tsx
index 86cffdb5a..d53a626ee 100644
--- a/tavla/app/components/ContactForm.tsx
+++ b/tavla/app/components/ContactForm.tsx
@@ -27,7 +27,7 @@ export function ContactForm() {
         }
     }, [state, addToast])
     return (
-        <div className="flex items-center justify-center w-1/6 h-14">
+        <div className="flex items-center justify-center w-full md:w-1/6 h-14">
             <Expandable
                 title="Trenger du hjelp?"
                 isOpen={isOpen}
@@ -36,11 +36,12 @@ export function ContactForm() {
                 <form
                     action={action}
                     ref={formRef}
-                    className="flex flex-col gap-4 pt-4 p-6 "
+                    className="flex flex-col gap-4  p-4 sm:p-6 "
                 >
                     <Paragraph as="h1" margin="none" className="font-bold">
-                        Har du spørsmål/innspill eller ønsker hjelp med å komme
-                        i gang?
+                        Vi setter stor pris på tilbakemeldinger og innspill, og
+                        bistår gjerne hvis du vil ha hjelp til å komme i gang
+                        med Tavla
                     </Paragraph>
                     <div>
                         <Label
diff --git a/tavla/app/components/Expandable.tsx b/tavla/app/components/Expandable.tsx
index 699d7b164..632da2118 100644
--- a/tavla/app/components/Expandable.tsx
+++ b/tavla/app/components/Expandable.tsx
@@ -15,7 +15,7 @@ function Expandable({
     children: JSX.Element
 }) {
     return (
-        <div className="fixed bottom-0 right-3 w-1/4 z-10">
+        <div className="fixed bottom-0 right-3 w-full md:w-1/4 z-10 drop-shadow-lg ">
             <div
                 onClick={() => setIsOpen(!isOpen)}
                 className="flex justify-between items-center px-6 py-4 bg-blue80 w-full rounded-t"

From 0c501d1b85c7372aa1b385c05bee594205b1fedb Mon Sep 17 00:00:00 2001
From: Purusoth Thushyanthan <purusoth.thushyanthan@bekk.no>
Date: Mon, 9 Sep 2024 13:40:01 +0200
Subject: [PATCH 07/13] feat(helm): slack webhook

---
 tavla/helm/tavla/values.yaml | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/tavla/helm/tavla/values.yaml b/tavla/helm/tavla/values.yaml
index 5f8ed388c..f3b0c633f 100644
--- a/tavla/helm/tavla/values.yaml
+++ b/tavla/helm/tavla/values.yaml
@@ -17,9 +17,13 @@ common:
                   secretKeyRef:
                       name: backend
                       key: api-key
-    secrets:
-        slack:
-            - SLACK_WEB_HOOK
+
+            - name: SLACK_WEBHOOK_URL
+              valueFrom:
+                  secretKeyRef:
+                      name: slack_webhook
+                      key: url
+
         probes:
             enabled: true
             spec:

From 613f26d2c75c4a22357868b94939fca42c1eb6f9 Mon Sep 17 00:00:00 2001
From: Purusoth Thushyanthan <purusoth.thushyanthan@bekk.no>
Date: Fri, 20 Sep 2024 08:30:59 +0200
Subject: [PATCH 08/13] chore(components): delete unused file

---
 tavla/app/components/FloatingContact.tsx | 24 ------------------------
 1 file changed, 24 deletions(-)
 delete mode 100644 tavla/app/components/FloatingContact.tsx

diff --git a/tavla/app/components/FloatingContact.tsx b/tavla/app/components/FloatingContact.tsx
deleted file mode 100644
index fb6ed5e6b..000000000
--- a/tavla/app/components/FloatingContact.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-'use client'
-import { EmailIcon } from '@entur/icons'
-import Link from 'next/link'
-import { usePostHog } from 'posthog-js/react'
-
-function FloatingContact() {
-    const posthog = usePostHog()
-    return (
-        <div className="fixed bottom-12 right-12">
-            <Link
-                onClick={() =>
-                    posthog.capture('SUPPORT_EMAIL', { type: 'floating' })
-                }
-                href="mailto:tavla@entur.no"
-                target="_blank"
-                className="flex items-center justify-center w-14 h-14 rounded-full border-primary border-2 bg-primary hover:bg-secondary"
-                aria-label="Send en mail til tavla@entur.no"
-            >
-                <EmailIcon size={20} aria-hidden="true" />
-            </Link>
-        </div>
-    )
-}
-export { FloatingContact }

From b7f8c15c62dc985c99f60ad0aec0746c1b4d0040 Mon Sep 17 00:00:00 2001
From: Purusoth Thushyanthan <purusoth.thushyanthan@bekk.no>
Date: Fri, 20 Sep 2024 08:32:58 +0200
Subject: [PATCH 09/13] style(landing): webhook formatting

---
 tavla/app/components/actions.ts | 81 +++++++++++++++++++++++++--------
 1 file changed, 61 insertions(+), 20 deletions(-)

diff --git a/tavla/app/components/actions.ts b/tavla/app/components/actions.ts
index cf4e22a8b..e3a157621 100644
--- a/tavla/app/components/actions.ts
+++ b/tavla/app/components/actions.ts
@@ -2,32 +2,51 @@
 
 import { TFormFeedback, getFormFeedbackForError } from 'app/(admin)/utils'
 
-async function postForm(prevState: TFormFeedback | undefined, data: FormData) {
-    const email = data.get('email') as string
-    const message = data.get('message') as string
+async function postForm(
+    prevState: TFormFeedback | undefined,
+    data: FormData | undefined,
+) {
+    const email = data?.get('email') as string
+    const message = data?.get('message') as string
+
+    if (!email) return getFormFeedbackForError('auth/missing-email')
+
+    if (!message) return getFormFeedbackForError('contact/message-missing')
+
+    const timestamp = Math.floor(Date.now() / 1000)
 
-    if (!email) {
-        return getFormFeedbackForError('auth/missing-email')
-    }
-    if (!message) {
-        return getFormFeedbackForError('contact/message-missing')
-    }
     const payload = {
         blocks: [
             {
                 type: 'header',
                 text: {
                     type: 'plain_text',
-                    text: ':email: Ny Melding :email:',
+                    text: ':email: Ny melding :email:',
                     emoji: true,
                 },
             },
             {
                 type: 'divider',
             },
+            {
+                type: 'rich_text',
+                elements: [
+                    {
+                        type: 'rich_text_section',
+                        elements: [
+                            {
+                                type: 'date',
+                                timestamp: timestamp,
+                                format: '{date_num} klokken {time}',
+                                fallback: 'timey',
+                            },
+                        ],
+                    },
+                ],
+            },
             {
                 type: 'section',
-                block_id: 'email_info',
+                block_id: 'email',
                 fields: [
                     {
                         type: 'mrkdwn',
@@ -35,23 +54,44 @@ async function postForm(prevState: TFormFeedback | undefined, data: FormData) {
                     },
                 ],
             },
+
             {
-                type: 'section',
-                block_id: 'email_body',
-                text: {
-                    type: 'mrkdwn',
-                    text: `*Melding:* \n${message}`,
-                },
+                type: 'rich_text',
+                elements: [
+                    {
+                        type: 'rich_text_section',
+                        elements: [
+                            {
+                                type: 'text',
+                                text: 'Melding:',
+                                style: {
+                                    bold: true,
+                                },
+                            },
+                        ],
+                    },
+                ],
             },
             {
-                type: 'divider',
+                type: 'rich_text',
+                elements: [
+                    {
+                        type: 'rich_text_preformatted',
+                        elements: [
+                            {
+                                type: 'text',
+                                text: `${message}`,
+                            },
+                        ],
+                    },
+                ],
             },
         ],
     }
 
     try {
         const url = process.env.SLACK_WEBHOOK_URL
-        if (!url) throw Error()
+        if (!url) throw Error('Could not find url')
         const response = await fetch(url, {
             method: 'POST',
             headers: {
@@ -61,8 +101,9 @@ async function postForm(prevState: TFormFeedback | undefined, data: FormData) {
         })
 
         if (!response.ok) {
-            throw Error()
+            throw Error('Error in request')
         }
+        return getFormFeedbackForError('form/reset')
     } catch (e: unknown) {
         return getFormFeedbackForError('general')
     }

From aac57ba3ed4ca392f713c33a884e70a0e4affc1c Mon Sep 17 00:00:00 2001
From: Purusoth Thushyanthan <purusoth.thushyanthan@bekk.no>
Date: Fri, 20 Sep 2024 08:34:07 +0200
Subject: [PATCH 10/13] style(contact): responsive contact form

---
 tavla/app/components/Expandable.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/tavla/app/components/Expandable.tsx b/tavla/app/components/Expandable.tsx
index 632da2118..62ef9ccf2 100644
--- a/tavla/app/components/Expandable.tsx
+++ b/tavla/app/components/Expandable.tsx
@@ -12,15 +12,17 @@ function Expandable({
     title: string
     isOpen: boolean
     setIsOpen: Dispatch<SetStateAction<boolean>>
-    children: JSX.Element
+    children: React.ReactNode
 }) {
     return (
-        <div className="fixed bottom-0 right-3 w-full md:w-1/4 z-10 drop-shadow-lg ">
+        <div className="fixed bottom-0 md:right-3 w-full lg:w-1/2 xl:w-1/3 z-10 drop-shadow-lg ">
             <div
                 onClick={() => setIsOpen(!isOpen)}
                 className="flex justify-between items-center px-6 py-4 bg-blue80 w-full rounded-t"
             >
-                <Heading5 margin="none">{title} </Heading5>
+                <Heading5 margin="none" className=" sm:text-base !text-lg">
+                    {title}
+                </Heading5>
                 <IconButton className="border-0!">
                     {isOpen ? <DownArrowIcon /> : <UpArrowIcon />}
                 </IconButton>

From 4660f7c574eb9afdd2acd7391f7d92c473ca7329 Mon Sep 17 00:00:00 2001
From: Purusoth Thushyanthan <purusoth.thushyanthan@bekk.no>
Date: Fri, 20 Sep 2024 08:37:40 +0200
Subject: [PATCH 11/13] fix(contact): client and server validation

---
 tavla/app/(admin)/utils/index.ts     |  7 ++-
 tavla/app/components/ContactForm.tsx | 87 +++++++++++++++++++---------
 2 files changed, 64 insertions(+), 30 deletions(-)

diff --git a/tavla/app/(admin)/utils/index.ts b/tavla/app/(admin)/utils/index.ts
index bc4c33b41..ac5869ec9 100644
--- a/tavla/app/(admin)/utils/index.ts
+++ b/tavla/app/(admin)/utils/index.ts
@@ -32,7 +32,7 @@ export function getFormFeedbackForField(
 export function getFormFeedbackForError(
     e?: TError,
     email?: string,
-): TFormFeedback {
+): TFormFeedback | undefined {
     let code = e
     if (e instanceof FirebaseError) {
         code = e.code
@@ -237,10 +237,13 @@ export function getFormFeedbackForError(
         case 'contact/message-missing': {
             return {
                 form_type: 'user',
-                feedback: 'Vennligst legg igjen en melding',
+                feedback: 'Vennligst legg igjen en melding.',
                 variant: 'error',
             }
         }
+        case 'form/reset': {
+            return
+        }
     }
 
     return {
diff --git a/tavla/app/components/ContactForm.tsx b/tavla/app/components/ContactForm.tsx
index d53a626ee..f7e3b3b70 100644
--- a/tavla/app/components/ContactForm.tsx
+++ b/tavla/app/components/ContactForm.tsx
@@ -2,46 +2,73 @@
 import { TextArea, TextField } from '@entur/form'
 import { Label, Paragraph } from '@entur/typography'
 import { SubmitButton } from 'components/Form/SubmitButton'
-import { useFormState } from 'react-dom'
 import { postForm } from './actions'
-import { getFormFeedbackForField } from 'app/(admin)/utils'
-import { useEffect, useRef, useState } from 'react'
+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'
+
+function ContactForm() {
+    const posthog = usePostHog()
 
-export function ContactForm() {
-    const formRef = useRef<HTMLFormElement>(null)
     const { addToast } = useToast()
-    const [state, action] = useFormState(postForm, undefined)
     const [isOpen, setIsOpen] = useState(false)
+    const [formstate, setFormError] = useState<TFormFeedback | undefined>(
+        undefined,
+    )
+
+    const validEmail = new RegExp(/^[\w.-]+@([\w-]+\.)+[\w-]{2,4}$/g)
+
+    const submit = async (data: FormData) => {
+        const email = data.get('email') as string
+        const message = data.get('message') as string
+
+        if (!validEmail.test(email))
+            return setFormError(getFormFeedbackForError('auth/missing-email'))
+
+        if (isEmptyOrSpaces(message))
+            return setFormError(
+                getFormFeedbackForError('contact/message-missing'),
+            )
+        const error = await postForm(formstate, data)
 
-    useEffect(() => {
-        if (!formRef.current) return
-        if (state?.feedback) {
-            setIsOpen(true)
-        } else {
-            formRef.current?.reset()
+        if (error) return setFormError(error)
+        else {
             setIsOpen(false)
-            addToast('Takk for din tilbakemelding!')
+            setFormError(undefined)
+            addToast('Takk for tilbakemelding!')
         }
-    }, [state, addToast])
+    }
+
     return (
-        <div className="flex items-center justify-center w-full md:w-1/6 h-14">
+        <div
+            className="flex items-center justify-center w-full xl:w-1/6 h-14"
+            onClick={() =>
+                isOpen
+                    ? posthog.capture('CONTACT_FORM_OPENED')
+                    : setFormError(undefined)
+            }
+        >
             <Expandable
-                title="Trenger du hjelp?"
+                title="Send oss en melding"
                 isOpen={isOpen}
                 setIsOpen={setIsOpen}
             >
                 <form
-                    action={action}
-                    ref={formRef}
+                    action={submit}
                     className="flex flex-col gap-4  p-4 sm:p-6 "
                 >
                     <Paragraph as="h1" margin="none" className="font-bold">
                         Vi setter stor pris på tilbakemeldinger og innspill, og
                         bistår gjerne hvis du vil ha hjelp til å komme i gang
-                        med Tavla
+                        med Tavla!
                     </Paragraph>
                     <div>
                         <Label
@@ -55,30 +82,33 @@ export function ContactForm() {
                         <TextField
                             label="E-postadresse"
                             name="email"
-                            type="email"
-                            aria-required
-                            {...getFormFeedbackForField('email', state)}
+                            {...getFormFeedbackForField('email', formstate)}
                         />
                     </div>
                     <div>
-                        <Label htmlFor="message" className="font-bold">
-                            Melding
+                        <Label
+                            htmlFor="message"
+                            className="font-bold"
+                            aria-required
+                        >
+                            Melding *
                         </Label>
                         <TextArea
                             name="message"
                             id="message"
                             label="Melding"
                             aria-label="Skriv her"
-                            required
                             aria-required
-                            {...getFormFeedbackForField('user', state)}
+                            {...getFormFeedbackForField('user', formstate)}
                         />
                     </div>
                     <Paragraph margin="none">
                         Hvis du ønsker å legge ved bilder, kan du sende en
-                        e-post til tavla@entur.org
+                        e-post til tavla@entur.org.
                     </Paragraph>
-                    <FormError {...getFormFeedbackForField('general', state)} />
+                    <FormError
+                        {...getFormFeedbackForField('general', formstate)}
+                    />
                     <SubmitButton
                         variant="primary"
                         width="fluid"
@@ -91,3 +121,4 @@ export function ContactForm() {
         </div>
     )
 }
+export { ContactForm }

From 1c20e459daafa352a3ea5f7f7165684264c9462e Mon Sep 17 00:00:00 2001
From: Purusoth Thushyanthan <purusoth.thushyanthan@bekk.no>
Date: Fri, 20 Sep 2024 09:27:22 +0200
Subject: [PATCH 12/13] fix(helm): correct reference

---
 tavla/helm/tavla/values.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tavla/helm/tavla/values.yaml b/tavla/helm/tavla/values.yaml
index f3b0c633f..1390bdad6 100644
--- a/tavla/helm/tavla/values.yaml
+++ b/tavla/helm/tavla/values.yaml
@@ -21,7 +21,7 @@ common:
             - name: SLACK_WEBHOOK_URL
               valueFrom:
                   secretKeyRef:
-                      name: slack_webhook
+                      name: slack-webhook
                       key: url
 
         probes:

From 46877091a05a0a1ca55158e7b26e5d8ed20e2125 Mon Sep 17 00:00:00 2001
From: Purusoth Thushyanthan <purusoth.thushyanthan@bekk.no>
Date: Fri, 20 Sep 2024 15:19:47 +0200
Subject: [PATCH 13/13] chore(contact): refactor

---
 tavla/app/components/ContactForm.tsx | 14 ++++++++------
 tavla/app/components/actions.ts      |  5 +----
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/tavla/app/components/ContactForm.tsx b/tavla/app/components/ContactForm.tsx
index f7e3b3b70..e03450d2f 100644
--- a/tavla/app/components/ContactForm.tsx
+++ b/tavla/app/components/ContactForm.tsx
@@ -20,7 +20,7 @@ function ContactForm() {
 
     const { addToast } = useToast()
     const [isOpen, setIsOpen] = useState(false)
-    const [formstate, setFormError] = useState<TFormFeedback | undefined>(
+    const [formState, setFormError] = useState<TFormFeedback | undefined>(
         undefined,
     )
 
@@ -37,7 +37,7 @@ function ContactForm() {
             return setFormError(
                 getFormFeedbackForError('contact/message-missing'),
             )
-        const error = await postForm(formstate, data)
+        const error = await postForm(formState, data)
 
         if (error) return setFormError(error)
         else {
@@ -57,7 +57,7 @@ function ContactForm() {
             }
         >
             <Expandable
-                title="Send oss en melding"
+                title="Send oss en melding!"
                 isOpen={isOpen}
                 setIsOpen={setIsOpen}
             >
@@ -82,7 +82,9 @@ function ContactForm() {
                         <TextField
                             label="E-postadresse"
                             name="email"
-                            {...getFormFeedbackForField('email', formstate)}
+                            id="email"
+                            aria-label="E-postadresse"
+                            {...getFormFeedbackForField('email', formState)}
                         />
                     </div>
                     <div>
@@ -99,7 +101,7 @@ function ContactForm() {
                             label="Melding"
                             aria-label="Skriv her"
                             aria-required
-                            {...getFormFeedbackForField('user', formstate)}
+                            {...getFormFeedbackForField('user', formState)}
                         />
                     </div>
                     <Paragraph margin="none">
@@ -107,7 +109,7 @@ function ContactForm() {
                         e-post til tavla@entur.org.
                     </Paragraph>
                     <FormError
-                        {...getFormFeedbackForField('general', formstate)}
+                        {...getFormFeedbackForField('general', formState)}
                     />
                     <SubmitButton
                         variant="primary"
diff --git a/tavla/app/components/actions.ts b/tavla/app/components/actions.ts
index e3a157621..cf5b8421a 100644
--- a/tavla/app/components/actions.ts
+++ b/tavla/app/components/actions.ts
@@ -2,10 +2,7 @@
 
 import { TFormFeedback, getFormFeedbackForError } from 'app/(admin)/utils'
 
-async function postForm(
-    prevState: TFormFeedback | undefined,
-    data: FormData | undefined,
-) {
+async function postForm(prevState: TFormFeedback | undefined, data: FormData) {
     const email = data?.get('email') as string
     const message = data?.get('message') as string