diff --git a/apps/frontend/src/components/layout/support.tsx b/apps/frontend/src/components/layout/support.tsx index 3dc543d7..6b4779c7 100644 --- a/apps/frontend/src/components/layout/support.tsx +++ b/apps/frontend/src/components/layout/support.tsx @@ -1,43 +1,100 @@ 'use client'; +import * as Sentry from '@sentry/nextjs'; import { EventEmitter } from 'events'; -import { useEffect, useState } from 'react'; +import { useEffect, useState, useRef } from 'react'; import { useVariables } from '@gitroom/react/helpers/variable.context'; import { useT } from '@gitroom/react/translation/get.transation.service.client'; export const supportEmitter = new EventEmitter(); -export const Support = () => { - const [show, setShow] = useState(true); - const { discordUrl } = useVariables(); +function AttachToFeedbackButton() { + const [feedback, setFeedback] = useState(); const t = useT(); - + // Read `getFeedback` on the client only, to avoid hydration errors during server rendering useEffect(() => { - supportEmitter.on('change', setShow); - return () => { - supportEmitter.off('state', setShow); - }; + // Sentry.getFeedback is only available when Sentry is initialized on the client + try { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const fb = (Sentry as any).getFeedback?.(); + setFeedback(fb); + } catch (e) { + setFeedback(undefined); + } }, []); - if (!discordUrl || !show) return null; + const buttonRef = useRef(null); + useEffect(() => { + if (feedback && buttonRef.current) { + const unsubscribe = feedback.attachTo(buttonRef.current); + return unsubscribe; + } + return () => {}; + }, [feedback]); return ( -
window.open(discordUrl)} + + ); +} + +export const Support = () => { + const [show, setShow] = useState(true); + const { discordUrl, sentryDsn } = useVariables(); + const t = useT(); + + useEffect(() => { + supportEmitter.on('change', setShow); + return () => { + supportEmitter.off('change', setShow); + }; + }, []); + + if (!discordUrl || !show) return null; + + return ( +
+ {sentryDsn ? ( + + ) : null} + +
window.open(discordUrl)} + > +
+ + + +
+
{t('discord_support', 'Discord Support')}
+
); };