diff --git a/src/components/DocsFeedback.tsx b/src/components/DocsFeedback.tsx new file mode 100644 index 00000000..06014618 --- /dev/null +++ b/src/components/DocsFeedback.tsx @@ -0,0 +1,184 @@ +import React, { useState } from 'react'; + +// PostHog Survey ID +const POSTHOG_SURVEY_ID = '019c4ba3-c53b-0000-7cef-4903439f7e52'; + +declare global { + interface Window { + posthog?: { + capture: (event: string, properties?: Record) => void; + }; + } +} + +const POSITIVE_OPTIONS = [ + 'Accurate', + 'Easy to understand', + 'Solved my problem', + 'Helped me decide to use the product', + 'Other', +]; + +const NEGATIVE_OPTIONS = [ + 'Hard to understand', + 'Incorrect information', + 'Missing the information', + 'Other', +]; + +// Submit feedback to PostHog +const submitFeedbackToPostHog = ( + isHelpful: 'yes' | 'no', + reason: string, + additionalFeedback: string, + pageUrl: string +): void => { + if (typeof window === 'undefined' || !window.posthog) { + console.error('PostHog not available'); + return; + } + + const properties: Record = { + $survey_id: POSTHOG_SURVEY_ID, + $survey_response: isHelpful === 'yes' ? 'Yes 👍' : 'No 👎', + reason: reason, + pageUrl: pageUrl, + }; + + if (additionalFeedback.trim()) { + properties.$survey_response_1 = additionalFeedback; + } + + window.posthog.capture('survey sent', properties); +}; + +export const DocsFeedback: React.FC = () => { + const [feedbackState, setFeedbackState] = useState< + 'initial' | 'positive' | 'negative' | 'submitted' + >('initial'); + const [selectedReason, setSelectedReason] = useState(''); + const [additionalFeedback, setAdditionalFeedback] = useState(''); + const [isSubmitting, setIsSubmitting] = useState(false); + + const handleThumbsUp = () => { + setFeedbackState('positive'); + setSelectedReason(''); + setAdditionalFeedback(''); + }; + + const handleThumbsDown = () => { + setFeedbackState('negative'); + setSelectedReason(''); + setAdditionalFeedback(''); + }; + + const handleSubmit = () => { + if (!selectedReason) return; + + setIsSubmitting(true); + const pageUrl = typeof window !== 'undefined' ? window.location.pathname : ''; + const isPositive = feedbackState === 'positive'; + + submitFeedbackToPostHog( + isPositive ? 'yes' : 'no', + selectedReason, + additionalFeedback, + pageUrl + ); + + setIsSubmitting(false); + setFeedbackState('submitted'); + }; + + const options = feedbackState === 'positive' ? POSITIVE_OPTIONS : NEGATIVE_OPTIONS; + + if (feedbackState === 'submitted') { + return ( +
+
+ + + + + Thanks for your feedback! +
+
+ ); + } + + if (feedbackState === 'positive' || feedbackState === 'negative') { + return ( +
+
+
+ {feedbackState === 'positive' ? 'What did you like?' : 'What went wrong?'} +
+
+ {options.map((option) => ( + + ))} +
+