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
entur · Jun 5, 2024 · 8e1a788 · 8e1a788
1 parent 1feb940
commit 8e1a788
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 9 deletions.
diff --git a/next-tavla/app/(admin)/components/Footer/index.tsx b/next-tavla/app/(admin)/components/Footer/index.tsx
@@ -1,30 +1,50 @@
+'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">
                 <Image src={TavlaLogo} alt="" />
                 <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:[email protected]"
+                                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
@@ -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
@@ -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:[email protected]"
+                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
@@ -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
@@ -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 />
         </>
     )
 }