From a524d328ffde09cb3a1e6109e5a656a067dc0f9d Mon Sep 17 00:00:00 2001 From: bgravenorst Date: Wed, 13 Aug 2025 06:27:53 +1000 Subject: [PATCH 1/8] testfeedback Signed-off-by: bgravenorst --- .gitignore | 1 + src/components/PageFeedback/index.tsx | 160 ++++++++++ .../PageFeedback/styles.module.scss | 284 ++++++++++++++++++ src/theme/DocItem/Layout/index.jsx | 2 + src/utils/analytics.ts | 66 ++++ 5 files changed, 513 insertions(+) create mode 100644 src/components/PageFeedback/index.tsx create mode 100644 src/components/PageFeedback/styles.module.scss create mode 100644 src/utils/analytics.ts diff --git a/.gitignore b/.gitignore index fe97056833b..8e188e9452d 100644 --- a/.gitignore +++ b/.gitignore @@ -16,6 +16,7 @@ .env.development.local .env.test.local .env.production.local +.prettierignore npm-debug.log* .vercel diff --git a/src/components/PageFeedback/index.tsx b/src/components/PageFeedback/index.tsx new file mode 100644 index 00000000000..54ed0f5e93c --- /dev/null +++ b/src/components/PageFeedback/index.tsx @@ -0,0 +1,160 @@ +import React, { useState, useEffect } from 'react' +import { trackFeedbackForGA } from '../../utils/analytics' +import styles from './styles.module.scss' + +export default function PageFeedback() { + const [feedbackGiven, setFeedbackGiven] = useState(false) + const [reason, setReason] = useState('') + const [otherReason, setOtherReason] = useState('') + const [submitted, setSubmitted] = useState(false) + + // Demo logging when component loads + useEffect(() => { + console.log('🚀 PageFeedback component loaded and ready for demo!') + console.log('📍 Current page:', window.location.pathname) + }, []) + + const handleFeedback = (positive: boolean) => { + console.log(`🎯 User clicked: ${positive ? 'Yes' : 'No'} (positive: ${positive})`) + setFeedbackGiven(true) + if (positive) { + trackFeedbackForGA({ + positive: true, + locale: navigator.language, + }) + setSubmitted(true) + } + } + + const handleReasonSubmit = (r: string) => { + const finalReason = r === 'other' ? otherReason.trim() : r + console.log(`💭 User selected reason: "${finalReason}"`) + + const data = { + positive: false, + reason: finalReason, + locale: navigator.language, + } + trackFeedbackForGA(data) + setSubmitted(true) + } + + const handleOtherReasonChange = (e: React.ChangeEvent) => { + setOtherReason(e.target.value.slice(0, 120)) + } + + if (submitted) { + return ( +
+
+
+

+ Thanks for your feedback! We appreciate your input. +

+
+
+
+ ) + } + + if (!feedbackGiven) { + return ( +
+
+
+

Was this page helpful?

+
+ + +
+
+
+
+ ) + } + + if (!reason) { + return ( +
+
+
+

What didn't work for you?

+
+
+
+ + + + +
+
+ ) + } + + if (reason === 'other') { + return ( +
+
+
+

Please tell us more:

+
+
+