From 8e1a7883bf0e656defc92b0cc83e12bdfff7fa9a Mon Sep 17 00:00:00 2001
From: lindtvedtsebastian
 <46536611+lindtvedtsebastian@users.noreply.github.com>
Date: Wed, 5 Jun 2024 08:49:27 +0200
Subject: [PATCH] feat(support): add support email buttons (#1534)

* feat(support): add support email buttons

* chore(footer): remove redundant mb

* feat(preview): fix scroll to top bug
---
 .../app/(admin)/components/Footer/index.tsx   | 28 ++++++++++++++++---
 .../app/(admin)/components/Preview/index.tsx  |  2 +-
 next-tavla/app/components/FloatingContact.tsx | 23 +++++++++++++++
 next-tavla/app/layout.tsx                     |  4 +++
 next-tavla/app/page.tsx                       |  5 +---
 5 files changed, 53 insertions(+), 9 deletions(-)
 create mode 100644 next-tavla/app/components/FloatingContact.tsx

diff --git a/next-tavla/app/(admin)/components/Footer/index.tsx b/next-tavla/app/(admin)/components/Footer/index.tsx
index 314598891..6dc6cfd6f 100644
--- a/next-tavla/app/(admin)/components/Footer/index.tsx
+++ b/next-tavla/app/(admin)/components/Footer/index.tsx
@@ -1,10 +1,13 @@
+'use client'
 import Image from 'next/image'
 import TavlaLogo from 'assets/logos/Tavla-white.svg'
 import { Heading3, Link as EnturLink, Paragraph } from '@entur/typography'
 import Link from 'next/link'
 import { ExternalIcon, GithubIcon } from '@entur/icons'
+import { usePostHog } from 'posthog-js/react'
 
 function Footer() {
+    const posthog = usePostHog()
     return (
         <footer className="eds-contrast">
             <div className="container mx-auto pt-16 pb-4">
@@ -12,19 +15,36 @@ function Footer() {
                 <div className="flex flex-col sm:flex-row justify-between">
                     <div>
                         <Heading3>Entur AS</Heading3>
-                        <Paragraph className="mb-4 items-center">
+                        <Paragraph className=" items-center">
                             Rådhusgata 5, 0151 Oslo
                             <br />
                             Postboks 1554, 0117 Oslo
                         </Paragraph>
-                        <Paragraph className="mb-4 items-center">
+                        <Paragraph className="items-center">
                             Organisasjonsnummer:
                             <br />
                             917 422 575
                         </Paragraph>
-                        <Paragraph className="mb-4 items-center flex flex-row gap-1">
+                        <Paragraph
+                            className="items-center flex flex-row gap-1"
+                            margin="none"
+                        >
                             <EnturLink href="https://www.entur.org/kontakt-oss/">
-                                Kontakt oss
+                                Kontakt kundesenteret
+                            </EnturLink>
+                            <ExternalIcon className="!top-0" />
+                        </Paragraph>
+                        <Paragraph className="items-center flex flex-row gap-1">
+                            <EnturLink
+                                href="mailto:tavla@entur.org"
+                                target="_blank"
+                                onClick={() =>
+                                    posthog.capture('SUPPORT_EMAIL', {
+                                        type: 'footer',
+                                    })
+                                }
+                            >
+                                Kontakt Tavla
                             </EnturLink>
                             <ExternalIcon className="!top-0" />
                         </Paragraph>
diff --git a/next-tavla/app/(admin)/components/Preview/index.tsx b/next-tavla/app/(admin)/components/Preview/index.tsx
index 40809eeb9..0ced896b6 100644
--- a/next-tavla/app/(admin)/components/Preview/index.tsx
+++ b/next-tavla/app/(admin)/components/Preview/index.tsx
@@ -10,7 +10,7 @@ function Preview({ boards }: { boards: TBoard[] }) {
     useEffect(() => {
         const interval = setInterval(() => {
             setBoardIndex((boardIndex + 1) % boards.length)
-        }, 5000)
+        }, 10000)
         return () => clearInterval(interval)
     }, [boardIndex, boards])
 
diff --git a/next-tavla/app/components/FloatingContact.tsx b/next-tavla/app/components/FloatingContact.tsx
new file mode 100644
index 000000000..b5ba1b054
--- /dev/null
+++ b/next-tavla/app/components/FloatingContact.tsx
@@ -0,0 +1,23 @@
+'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"
+            >
+                <EmailIcon size={20} />
+            </Link>
+        </div>
+    )
+}
+export { FloatingContact }
diff --git a/next-tavla/app/layout.tsx b/next-tavla/app/layout.tsx
index b8d1938a7..df00c31ba 100644
--- a/next-tavla/app/layout.tsx
+++ b/next-tavla/app/layout.tsx
@@ -7,6 +7,8 @@ import { ReactNode } from 'react'
 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'
 
 export const metadata: Metadata = {
     title: 'Entur Tavla',
@@ -44,6 +46,8 @@ function RootLayout({ children }: { children: ReactNode }) {
                     <body>
                         <PostHogPageView />
                         {children}
+                        <FloatingContact />
+                        <Footer />
                     </body>
                 </EnturToastProvider>
             </PHProvider>
diff --git a/next-tavla/app/page.tsx b/next-tavla/app/page.tsx
index 8c4483a59..6a744cd38 100644
--- a/next-tavla/app/page.tsx
+++ b/next-tavla/app/page.tsx
@@ -11,7 +11,6 @@ import {
     LeadParagraph,
     Paragraph,
 } from '@entur/typography'
-import { Footer } from './(admin)/components/Footer'
 import { Preview } from './(admin)/components/Preview'
 import { previewBoards } from '../src/Shared/utils/previewBoards'
 import { Welcome } from './components/Welcome'
@@ -54,7 +53,7 @@ async function Landing() {
                         </LeadParagraph>
                         <div className="flex flex-col xl:flex-row gap-4">
                             <div
-                                className="xl:w-1/2 max-h-[60vh] overflow-y-hidden rounded-2xl"
+                                className="xl:w-1/2 h-[60vh] overflow-y-hidden rounded-2xl"
                                 data-theme="entur"
                             >
                                 <Preview boards={previewBoards} />
@@ -89,8 +88,6 @@ async function Landing() {
                     </div>
                 </div>
             </main>
-
-            <Footer />
         </>
     )
 }