diff --git a/src/components/docFeedback/index.tsx b/src/components/docFeedback/index.tsx new file mode 100644 index 0000000000000..b0dd8704f29af --- /dev/null +++ b/src/components/docFeedback/index.tsx @@ -0,0 +1,122 @@ +'use client'; +import {Fragment, useEffect, useState} from 'react'; +import {CheckIcon as Check} from '@radix-ui/react-icons'; +import {Button} from '@radix-ui/themes'; +import * as Sentry from '@sentry/browser'; + +import {usePlausibleEvent} from 'sentry-docs/hooks/usePlausibleEvent'; + +type Props = { + pathname: string; +}; + +export function DocFeedback({pathname}: Props) { + const {emit} = usePlausibleEvent(); + const [showFeedback, setShowFeedback] = useState(false); + const [feedbackSubmitted, setFeedbackSubmitted] = useState(false); + const [feedbackType, setFeedbackType] = useState<'helpful' | 'not_helpful' | null>( + null + ); + + // Initialize feedback state from sessionStorage + useEffect(() => { + const storedFeedback = sessionStorage.getItem(`feedback_${pathname}`); + if (storedFeedback === 'submitted') { + setFeedbackSubmitted(true); + } + }, [pathname]); + + const handleFeedback = (helpful: boolean) => { + emit('Doc Feedback', {props: {page: pathname, helpful}}); + setFeedbackType(helpful ? 'helpful' : 'not_helpful'); + setShowFeedback(true); + }; + + const handleSubmitFeedback = (e: React.FormEvent) => { + e.preventDefault(); + const formData = new FormData(e.currentTarget); + const comments = formData.get('comments') as string; + + try { + Sentry.captureFeedback( + { + message: comments, + }, + {captureContext: {tags: {page: pathname, type: feedbackType}}} + ); + setFeedbackSubmitted(true); + sessionStorage.setItem(`feedback_${pathname}`, 'submitted'); + } catch (error) { + if (process.env.NODE_ENV === 'development') { + // eslint-disable-next-line no-console + console.error('Failed to submit feedback:', error); + } + Sentry.captureException(error); + } + }; + + return ( + +
+ {feedbackSubmitted ? ( +
+ Thanks for your feedback +
+ ) : ( + +
+ Was this helpful? +
+ + +
+
+ +
+
+
+ +