From ac96a15dd6a0e129e46c57443f93013f5af14132 Mon Sep 17 00:00:00 2001
From: Soeren Wegener <wegener92@gmail.com>
Date: Tue, 19 Mar 2024 01:56:37 +0100
Subject: [PATCH 1/3] feat(feedback): Configurable "required" label (#11152)

---
 packages/feedback/src/constants/index.ts        |  1 +
 packages/feedback/src/core/integration.ts       |  3 +++
 packages/feedback/src/core/sendFeedback.ts      |  2 +-
 packages/feedback/src/modal/components/Form.tsx | 12 +++++++-----
 packages/feedback/src/modal/createDialog.tsx    |  1 +
 packages/feedback/src/types/config.ts           |  5 +++++
 6 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/feedback/src/constants/index.ts b/packages/feedback/src/constants/index.ts
index 9804fdedf431..218f2e678494 100644
--- a/packages/feedback/src/constants/index.ts
+++ b/packages/feedback/src/constants/index.ts
@@ -20,6 +20,7 @@ export const MESSAGE_LABEL = 'Description';
 export const NAME_PLACEHOLDER = 'Your Name';
 export const NAME_LABEL = 'Name';
 export const SUCCESS_MESSAGE_TEXT = 'Thank you for your report!';
+export const IS_REQUIRED_TEXT = '(required)';
 
 export const FEEDBACK_WIDGET_SOURCE = 'widget';
 export const FEEDBACK_API_SOURCE = 'api';
diff --git a/packages/feedback/src/core/integration.ts b/packages/feedback/src/core/integration.ts
index 489bfd32728d..fd673dbf873d 100644
--- a/packages/feedback/src/core/integration.ts
+++ b/packages/feedback/src/core/integration.ts
@@ -9,6 +9,7 @@ import {
   EMAIL_LABEL,
   EMAIL_PLACEHOLDER,
   FORM_TITLE,
+  IS_REQUIRED_TEXT,
   MESSAGE_LABEL,
   MESSAGE_PLACEHOLDER,
   NAME_LABEL,
@@ -76,6 +77,7 @@ export const _feedbackIntegration = (({
   nameLabel = NAME_LABEL,
   namePlaceholder = NAME_PLACEHOLDER,
   successMessageText = SUCCESS_MESSAGE_TEXT,
+  isRequiredText = IS_REQUIRED_TEXT,
 
   // FeedbackCallbacks
   onFormOpen,
@@ -116,6 +118,7 @@ export const _feedbackIntegration = (({
     nameLabel,
     namePlaceholder,
     successMessageText,
+    isRequiredText,
 
     onFormClose,
     onFormOpen,
diff --git a/packages/feedback/src/core/sendFeedback.ts b/packages/feedback/src/core/sendFeedback.ts
index f3310303082a..c05eef265e91 100644
--- a/packages/feedback/src/core/sendFeedback.ts
+++ b/packages/feedback/src/core/sendFeedback.ts
@@ -74,7 +74,7 @@ export async function sendFeedback(
       }
 
       // Require valid status codes, otherwise can assume feedback was not sent successfully
-      if (typeof response.statusCode === 'number' && (response.statusCode < 200 || response.statusCode >= 300)) {
+     if (typeof response.statusCode === 'number' && (response.statusCode < 200 || response.statusCode >= 300)) {
         if (response.statusCode === 0) {
           throw new Error(
             'Unable to send Feedback. This is because of network issues, or because you are using an ad-blocker.',
diff --git a/packages/feedback/src/modal/components/Form.tsx b/packages/feedback/src/modal/components/Form.tsx
index 0b2b1bb98fb1..9a8a3edaa167 100644
--- a/packages/feedback/src/modal/components/Form.tsx
+++ b/packages/feedback/src/modal/components/Form.tsx
@@ -29,6 +29,7 @@ export interface Props
     | 'showEmail'
     | 'showName'
     | 'submitButtonLabel'
+    | 'isRequiredText'
   > {
   defaultEmail: string;
   defaultName: string;
@@ -66,6 +67,7 @@ export function Form({
   showEmail,
   showName,
   submitButtonLabel,
+  isRequiredText,
   screenshotInput,
 }: Props): VNode {
   // TODO: set a ref on the form, and whenever an input changes call proceessForm() and setError()
@@ -145,7 +147,7 @@ export function Form({
 
           {showName ? (
             <label for="name" class="form__label">
-              <LabelText label={nameLabel} isRequired={isNameRequired} />
+              <LabelText label={nameLabel} isRequiredText={isRequiredText} isRequired={isNameRequired} />
               <input
                 class="form__input"
                 defaultValue={defaultName}
@@ -162,7 +164,7 @@ export function Form({
 
           {showEmail ? (
             <label for="email" class="form__label">
-              <LabelText label={emailLabel} isRequired={isEmailRequired} />
+              <LabelText label={emailLabel} isRequiredText={isRequiredText} isRequired={isEmailRequired} />
               <input
                 class="form__input"
                 defaultValue={defaultEmail}
@@ -178,7 +180,7 @@ export function Form({
           )}
 
           <label for="message" class="form__label">
-            <LabelText label={messageLabel} isRequired />
+            <LabelText label={messageLabel} isRequiredText={isRequiredText} isRequired />
             <textarea
               autoFocus
               class="form__input form__input--textarea"
@@ -223,11 +225,11 @@ export function Form({
   );
 }
 
-function LabelText({ label, isRequired }: { label: string; isRequired: boolean }): VNode {
+function LabelText({ label, isRequired, isRequiredText }: { label: string; isRequired: boolean, isRequiredText: string }): VNode {
   return (
     <span class="form__label__text">
       {label}
-      {isRequired && <span class="form__label__text--required">(required)</span>}
+      {isRequired && <span class="form__label__text--required">${isRequiredText}</span>}
     </span>
   );
 }
diff --git a/packages/feedback/src/modal/createDialog.tsx b/packages/feedback/src/modal/createDialog.tsx
index d0c65389e006..626c1fe20d19 100644
--- a/packages/feedback/src/modal/createDialog.tsx
+++ b/packages/feedback/src/modal/createDialog.tsx
@@ -69,6 +69,7 @@ export function createDialog({ options, screenshotIntegration, sendFeedback, sha
         defaultName={(userKey && user && user[userKey.name]) || ''}
         defaultEmail={(userKey && user && user[userKey.email]) || ''}
         successMessageText={options.successMessageText}
+        isRequiredText={options.isRequiredText}
         onFormClose={() => {
           renderContent(false);
           options.onFormClose && options.onFormClose();
diff --git a/packages/feedback/src/types/config.ts b/packages/feedback/src/types/config.ts
index 0bcdcb0443cf..97c0465b7392 100644
--- a/packages/feedback/src/types/config.ts
+++ b/packages/feedback/src/types/config.ts
@@ -135,6 +135,11 @@ export interface FeedbackTextConfiguration {
    * Message after feedback was sent successfully
    */
   successMessageText: string;
+
+  /**
+   * Text which indicates that a field is required
+   */
+  isRequiredText: string;
 }
 
 /**

From a7a99ffb776cc7a17dbf6e42df0eaa2bf446b92d Mon Sep 17 00:00:00 2001
From: Billy Vong <billyvg@users.noreply.github.com>
Date: Fri, 22 Mar 2024 13:19:50 -0400
Subject: [PATCH 2/3] lint

---
 packages/feedback/src/core/sendFeedback.ts      | 2 +-
 packages/feedback/src/modal/components/Form.tsx | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/feedback/src/core/sendFeedback.ts b/packages/feedback/src/core/sendFeedback.ts
index c05eef265e91..f3310303082a 100644
--- a/packages/feedback/src/core/sendFeedback.ts
+++ b/packages/feedback/src/core/sendFeedback.ts
@@ -74,7 +74,7 @@ export async function sendFeedback(
       }
 
       // Require valid status codes, otherwise can assume feedback was not sent successfully
-     if (typeof response.statusCode === 'number' && (response.statusCode < 200 || response.statusCode >= 300)) {
+      if (typeof response.statusCode === 'number' && (response.statusCode < 200 || response.statusCode >= 300)) {
         if (response.statusCode === 0) {
           throw new Error(
             'Unable to send Feedback. This is because of network issues, or because you are using an ad-blocker.',
diff --git a/packages/feedback/src/modal/components/Form.tsx b/packages/feedback/src/modal/components/Form.tsx
index 9a8a3edaa167..407da1cd9f4e 100644
--- a/packages/feedback/src/modal/components/Form.tsx
+++ b/packages/feedback/src/modal/components/Form.tsx
@@ -225,7 +225,11 @@ export function Form({
   );
 }
 
-function LabelText({ label, isRequired, isRequiredText }: { label: string; isRequired: boolean, isRequiredText: string }): VNode {
+function LabelText({
+  label,
+  isRequired,
+  isRequiredText,
+}: { label: string; isRequired: boolean; isRequiredText: string }): VNode {
   return (
     <span class="form__label__text">
       {label}

From 0984abef1b05a64a28344164dfec49b38f6c3ebf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Wegener?= <wegener92@gmail.com>
Date: Fri, 22 Mar 2024 20:53:08 +0100
Subject: [PATCH 3/3] Update packages/feedback/src/modal/components/Form.tsx

Co-authored-by: Billy Vong <billyvg@users.noreply.github.com>
---
 packages/feedback/src/modal/components/Form.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/feedback/src/modal/components/Form.tsx b/packages/feedback/src/modal/components/Form.tsx
index 407da1cd9f4e..960b4c3d9038 100644
--- a/packages/feedback/src/modal/components/Form.tsx
+++ b/packages/feedback/src/modal/components/Form.tsx
@@ -233,7 +233,7 @@ function LabelText({
   return (
     <span class="form__label__text">
       {label}
-      {isRequired && <span class="form__label__text--required">${isRequiredText}</span>}
+      {isRequired && <span class="form__label__text--required">{isRequiredText}</span>}
     </span>
   );
 }