feat(feedback): Configurable "required" label (#11152)

Author: soerface

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';

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,

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.',

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>
   );
 }

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();

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;
 }
 
 /**