From a86999214bdabb88b862c26ab64e343a509d556d Mon Sep 17 00:00:00 2001
From: purusott <74315929+purusott@users.noreply.github.com>
Date: Wed, 25 Sep 2024 08:15:59 +0200
Subject: [PATCH] feat(landing): contact form (#1636)

* feat(utils): new error messages

* feat(landing): contact form

* style(landing): contact form

* style(landing): webhook message

* feat(helm): slack secret

* style(landing): mobile friendly contact form

* feat(helm): slack webhook

* chore(components): delete unused file

* style(landing): webhook formatting

* style(contact): responsive contact form

* fix(contact): client and server validation

* fix(helm): correct reference

* chore(contact): refactor

* chore(contact): refactor

* chore(shared): delete unused

* chore(utils): refactor
---
 tavla/app/(admin)/utils/index.ts         |   7 ++
 tavla/app/components/ContactForm.tsx     | 124 +++++++++++++++++++++++
 tavla/app/components/Expandable.tsx      |  36 +++++++
 tavla/app/components/FloatingContact.tsx |  24 -----
 tavla/app/components/actions.ts          | 110 ++++++++++++++++++++
 tavla/app/layout.tsx                     |   4 +-
 tavla/helm/tavla/values.yaml             |   7 ++
 tavla/src/Shared/types/featureFlag.ts    |   1 -
 tavla/src/Shared/utils/email.ts          |   3 +
 tavla/src/Shared/utils/featureFlags.ts   |   8 --
 10 files changed, 289 insertions(+), 35 deletions(-)
 create mode 100644 tavla/app/components/ContactForm.tsx
 create mode 100644 tavla/app/components/Expandable.tsx
 delete mode 100644 tavla/app/components/FloatingContact.tsx
 create mode 100644 tavla/app/components/actions.ts
 delete mode 100644 tavla/src/Shared/types/featureFlag.ts
 create mode 100644 tavla/src/Shared/utils/email.ts
 delete mode 100644 tavla/src/Shared/utils/featureFlags.ts

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<TFormFeedback | undefined>(
+        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 (
+        <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="Send oss en melding!"
+                isOpen={isOpen}
+                setIsOpen={setIsOpen}
+            >
+                <form
+                    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!
+                    </Paragraph>
+                    <div>
+                        <Label
+                            htmlFor="email"
+                            className="font-bold"
+                            aria-required
+                        >
+                            E-post *
+                        </Label>
+
+                        <TextField
+                            label="E-postadresse"
+                            name="email"
+                            id="email"
+                            aria-label="E-postadresse"
+                            {...getFormFeedbackForField('email', formState)}
+                        />
+                    </div>
+                    <div>
+                        <Label
+                            htmlFor="message"
+                            className="font-bold"
+                            aria-required
+                        >
+                            Melding *
+                        </Label>
+                        <TextArea
+                            name="message"
+                            id="message"
+                            label="Melding"
+                            aria-label="Skriv her"
+                            aria-required
+                            {...getFormFeedbackForField('user', formState)}
+                        />
+                    </div>
+                    <Paragraph margin="none">
+                        Hvis du ønsker å legge ved bilder, kan du sende en
+                        e-post til tavla@entur.org.
+                    </Paragraph>
+                    <FormError
+                        {...getFormFeedbackForField('general', formState)}
+                    />
+                    <SubmitButton
+                        variant="primary"
+                        width="fluid"
+                        aria-label="Send"
+                    >
+                        Send
+                    </SubmitButton>
+                </form>
+            </Expandable>
+        </div>
+    )
+}
+export { ContactForm }
diff --git a/tavla/app/components/Expandable.tsx b/tavla/app/components/Expandable.tsx
new file mode 100644
index 000000000..62ef9ccf2
--- /dev/null
+++ b/tavla/app/components/Expandable.tsx
@@ -0,0 +1,36 @@
+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: React.ReactNode
+}) {
+    return (
+        <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" className=" sm:text-base !text-lg">
+                    {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/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 }
diff --git a/tavla/app/components/actions.ts b/tavla/app/components/actions.ts
new file mode 100644
index 000000000..53d10b294
--- /dev/null
+++ b/tavla/app/components/actions.ts
@@ -0,0 +1,110 @@
+'use server'
+
+import { isEmptyOrSpaces } from 'app/(admin)/edit/utils'
+import { TFormFeedback, getFormFeedbackForError } from 'app/(admin)/utils'
+import { validEmail } from 'utils/email'
+async function postForm(prevState: TFormFeedback | undefined, data: FormData) {
+    const email = data.get('email') as string
+    const message = data.get('message') as string
+
+    if (!validEmail(email)) return getFormFeedbackForError('auth/missing-email')
+
+    if (isEmptyOrSpaces(message))
+        return getFormFeedbackForError('contact/message-missing')
+
+    const timestamp = Math.floor(Date.now() / 1000)
+
+    const payload = {
+        blocks: [
+            {
+                type: 'header',
+                text: {
+                    type: 'plain_text',
+                    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',
+                fields: [
+                    {
+                        type: 'mrkdwn',
+                        text: `*Fra:* \n${email}`,
+                    },
+                ],
+            },
+
+            {
+                type: 'rich_text',
+                elements: [
+                    {
+                        type: 'rich_text_section',
+                        elements: [
+                            {
+                                type: 'text',
+                                text: 'Melding:',
+                                style: {
+                                    bold: true,
+                                },
+                            },
+                        ],
+                    },
+                ],
+            },
+            {
+                type: 'rich_text',
+                elements: [
+                    {
+                        type: 'rich_text_section',
+                        elements: [
+                            {
+                                type: 'text',
+                                text: `${message}`,
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+    }
+
+    try {
+        const url = process.env.SLACK_WEBHOOK_URL
+        if (!url) throw Error('Could not find url')
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(payload),
+        })
+
+        if (!response.ok) {
+            throw Error('Error in request')
+        }
+    } catch (e: unknown) {
+        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>
diff --git a/tavla/helm/tavla/values.yaml b/tavla/helm/tavla/values.yaml
index 4564b499d..1390bdad6 100644
--- a/tavla/helm/tavla/values.yaml
+++ b/tavla/helm/tavla/values.yaml
@@ -17,6 +17,13 @@ common:
                   secretKeyRef:
                       name: backend
                       key: api-key
+
+            - name: SLACK_WEBHOOK_URL
+              valueFrom:
+                  secretKeyRef:
+                      name: slack-webhook
+                      key: url
+
         probes:
             enabled: true
             spec:
diff --git a/tavla/src/Shared/types/featureFlag.ts b/tavla/src/Shared/types/featureFlag.ts
deleted file mode 100644
index 136d0aa35..000000000
--- a/tavla/src/Shared/types/featureFlag.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type Feature = 'LOGIN' | 'BOARDS' | 'ORGANIZATIONS'
diff --git a/tavla/src/Shared/utils/email.ts b/tavla/src/Shared/utils/email.ts
new file mode 100644
index 000000000..054466945
--- /dev/null
+++ b/tavla/src/Shared/utils/email.ts
@@ -0,0 +1,3 @@
+export function validEmail(string: string) {
+    return new RegExp(/^[\w.-]+@([\w-]+\.)+[\w-]{2,4}$/g).test(string)
+}
diff --git a/tavla/src/Shared/utils/featureFlags.ts b/tavla/src/Shared/utils/featureFlags.ts
deleted file mode 100644
index 6adc48b9f..000000000
--- a/tavla/src/Shared/utils/featureFlags.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Feature } from 'types/featureFlag'
-
-export function checkFeatureFlags(feature: Feature) {
-    if (!process.env.NEXT_PUBLIC_ENABLED_FEATURES) return false
-    const enabledFeatures = JSON.parse(process.env.NEXT_PUBLIC_ENABLED_FEATURES)
-
-    return enabledFeatures.includes(feature)
-}