Merge pull request #1 from ryan953/ryan953/feedback-labels

Add a new testcase for translating all the labels

Author: ryan953

package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@sentry/nextjs": "^9.30.0",
+    "@sentry/nextjs": "10.10.0",
     "next": "15.3.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

src/app/examples/translatedFeedbackForm.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import {useEffect, useState} from 'react';
+import * as Sentry from "@sentry/nextjs";
+
+type FeedbackIntegration = ReturnType<typeof Sentry.getFeedback>;
+
+export default function TranslatedFeedbackForm() {
+  const [feedback, setFeedback] = useState<FeedbackIntegration>();
+  // Read `getFeedback` on the client only, to avoid hydration errors when server rendering
+  useEffect(() => {
+    setFeedback(Sentry.getFeedback());
+  }, []);
+
+  // Don't render custom feedback button if Feedback integration isn't installed
+  if (!feedback) {
+    return null;
+  }
+
+  return (
+    <button
+    className="hover:bg-hover px-4 py-2 rounded-md"
+      type="button"
+      onClick={async () => {
+        const form = await feedback.createForm({
+          tags: {component: 'TranslatedFeedbackForm'},
+
+          /**
+           * The label for the Feedback widget button that opens the dialog
+           */
+          triggerLabel: 'Lets get started',
+          /**
+           * The aria label for the Feedback widget button that opens the dialog
+           */
+          triggerAriaLabel: 'Send it!',
+          /**
+           * The label for the Feedback form cancel button that closes dialog
+           */
+          cancelButtonLabel: 'Nevermind',
+          /**
+           * The label for the Feedback form submit button that sends feedback
+           */
+          submitButtonLabel: 'Send it!',
+          /**
+           * The label for the Screenshot editor cancel buttons
+           */
+          confirmButtonLabel: 'I confirm',
+          /**
+           * The title of the Feedback form
+           */
+          formTitle: 'Feedback Test Area',
+          /**
+           * Label for the email input
+           */
+          emailLabel: 'Email or contact info',
+          /**
+           * Placeholder text for Feedback email input
+           */
+          emailPlaceholder: 'you@example.com or (555) 555-5555',
+          /**
+           * Label for the message input
+           */
+          messageLabel: "What's up?",
+          /**
+           * Placeholder text for Feedback message input
+           */
+          messagePlaceholder: 'Tell me about it',
+          /**
+           * Label for the name input
+           */
+          nameLabel: 'Who dis?',
+          /**
+           * Placeholder text for Feedback name input
+           */
+          namePlaceholder: 'Name, nickname, etc.',
+          /**
+           * Message after feedback was sent successfully
+           */
+          successMessageText: 'Thanks, we got it!',
+          /**
+           * Text which indicates that a field is required
+           */
+          isRequiredLabel: 'critical',
+          /**
+           * The label for the button that adds a screenshot and renders the image editor
+           */
+          addScreenshotButtonLabel: 'Add a pic',
+          /**
+           * The label for the button that removes a screenshot and hides the image editor
+           */
+          removeScreenshotButtonLabel: 'Drop the pic',
+          /**
+           * The label for the button that highlights portions ofthe screenshot
+           */
+          highlightToolText: 'Spotlight it',
+          /**
+           * The label for the button that hides portions of the screenshot
+           */
+          hideToolText: 'Not this part',
+          /**
+           * The label for the button that removed a highlight/hidden section of the screenshot.
+           */
+          removeHighlightText: 'Take it out',
+        });
+        form.appendToDom();
+        form.open();
+      }}
+    >
+      Give me feedback (translated)
+    </button>
+  );
+}

src/app/page.tsx

@@ -5,6 +5,7 @@ import CreateFeedbackFromButton from "./examples/createFeedbackFormButton";
 import MyFeedbackForm from "./examples/myFeedbackForm";
 import CrashReportButton from "./examples/crashReportButton";
 import ThumbsUpDownButtons from "src/app/examples/thumbsUpDownButtons";
+import TranslatedFeedbackForm from "src/app/examples/translatedFeedbackForm";
 
 export default function Home() {
   return (
@@ -61,6 +62,12 @@ export default function Home() {
             <ThumbsUpDownButtons /> 
           </fieldset>
         </li>
+        <li>
+          <fieldset className="border-1 border-gray-300 rounded-md p-2">
+            <legend>Translated Feedback Form (<a href="https://github.com/ryan953/nextjs-test-feedback/blob/main/src/app/examples/translatedFeedbackForm.tsx">source</a>)</legend>
+            <TranslatedFeedbackForm />
+          </fieldset>
+        </li>
       </ul>
     </div>
   );