feat: add feedback button (#627)

tasks/components/FeedbackButton.tsx

@@ -0,0 +1,31 @@
+import { Button } from '@helpwave/common/components/Button'
+import type { PropsWithLanguage } from '@helpwave/common/hooks/useTranslation'
+import { useTranslation } from '@helpwave/common/hooks/useTranslation'
+import type { Languages } from '@helpwave/common/hooks/useLanguage'
+import { getConfig } from '../utils/config'
+
+type FeedbackButtonTranslation = {
+  text: string
+}
+
+const defaultFeedbackButtonTranslation: Record<Languages, FeedbackButtonTranslation> = {
+  en: {
+    text: 'Issue or Feedback?'
+  },
+  de: {
+    text: 'Fehler oder Feedback?'
+  }
+}
+
+export const FeedbackButton = ({ language }: PropsWithLanguage<FeedbackButtonTranslation>) => {
+  const config = getConfig()
+  const translation = useTranslation(language, defaultFeedbackButtonTranslation)
+
+  const onClick = () => window.open(config.feedbackFormUrl, '_blank')
+
+  return (
+    <Button variant="tertiary" color="neutral" onClick={onClick}>
+      {translation.text}
+    </Button>
+  )
+}

tasks/components/layout/PageWithHeader.tsx

@@ -6,6 +6,7 @@ import { UserMenu } from '../UserMenu'
 import type { Crumb } from '../BreadCrumb'
 import { BreadCrumb } from '../BreadCrumb'
 import { useAuth } from '../../hooks/useAuth'
+import { FeedbackButton } from '../FeedbackButton'
 
 type PageWithHeaderProps = Partial<HeaderProps> & {
   crumbs?: Crumb[]
@@ -28,6 +29,7 @@ export const PageWithHeader = ({
 
   if (!user) return null
 
+  const feedbackButton = <FeedbackButton/>
   const userMenu = <UserMenu />
 
   return (
@@ -36,7 +38,7 @@ export const PageWithHeader = ({
         title={title}
         withIcon={withIcon}
         leftSide={[(crumbs ? <BreadCrumb crumbs={crumbs}/> : undefined), ...(leftSide ?? [])]}
-        rightSide={[...(rightSide ?? []), userMenu]}
+        rightSide={[...(rightSide ?? []), feedbackButton, userMenu]}
       />
       {children}
     </div>

tasks/utils/config.ts

@@ -36,7 +36,8 @@ const configSchema = z.object({
   NEXT_PUBLIC_OAUTH_CLIENT_ID: z.string().default('425f8b8d-c786-4ff7-b2bf-e52f505fb588'),
   NEXT_PUBLIC_OAUTH_SCOPES: z.string().default('openid,offline_access,email,nickname,name,organizations'),
   NEXT_PUBLIC_FAKE_TOKEN_ENABLE: z.literal('true').or(z.literal('false')).default('false'),
-  NEXT_PUBLIC_FAKE_TOKEN: z.object({ sub: z.string().uuid(), name: z.string(), nickname: z.string(), email: z.string().email(), organizations: z.string().array() }).default({ sub: '18159713-5d4e-4ad5-94ad-fbb6bb147984', name: 'Max Mustermann', nickname: 'max.mustermann', email: '[email protected]', organizations: ['3b25c6f5-4705-4074-9fc6-a50c28eba406'] })
+  NEXT_PUBLIC_FAKE_TOKEN: z.object({ sub: z.string().uuid(), name: z.string(), nickname: z.string(), email: z.string().email(), organizations: z.string().array() }).default({ sub: '18159713-5d4e-4ad5-94ad-fbb6bb147984', name: 'Max Mustermann', nickname: 'max.mustermann', email: '[email protected]', organizations: ['3b25c6f5-4705-4074-9fc6-a50c28eba406'] }),
+  NEXT_PUBLIC_FEEDBACK_FORM_URL: z.string().url().default('https://share-eu1.hsforms.com/1Libxb_ANSm-CpMCQ37Ti6Qfsrtd'),
 }).transform(obj => ({
   env: obj.NODE_ENV,
   apiUrl: obj.NEXT_PUBLIC_API_URL,
@@ -54,6 +55,7 @@ const configSchema = z.object({
   },
   fakeTokenEnable: obj.NEXT_PUBLIC_FAKE_TOKEN_ENABLE === 'true',
   fakeToken: Buffer.from(JSON.stringify(obj.NEXT_PUBLIC_FAKE_TOKEN)).toString('base64'),
+  feedbackFormUrl: obj.NEXT_PUBLIC_FEEDBACK_FORM_URL,
 }))
 
 const getConfig = () => {