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

Author: soerface

packages/feedback/src/constants.ts

@@ -70,7 +70,9 @@ export const MESSAGE_PLACEHOLDER = "What's the bug? What did you expect?";
 export const MESSAGE_LABEL = 'Description';
 export const NAME_PLACEHOLDER = 'Your Name';
 export const NAME_LABEL = 'Name';
+export const IS_REQUIRED_LABEL = '(required)';
 export const SUCCESS_MESSAGE_TEXT = 'Thank you for your report!';
+export const ERROR_MESSAGE_TEXT = 'Unable to send Feedback. This is because of network issues, or because you are using an ad-blocker.';
 
 export const FEEDBACK_WIDGET_SOURCE = 'widget';
 export const FEEDBACK_API_SOURCE = 'api';

packages/feedback/src/integration.ts

@@ -7,7 +7,9 @@ import {
   DEFAULT_THEME,
   EMAIL_LABEL,
   EMAIL_PLACEHOLDER,
+  // ERROR_MESSAGE_TEXT,
   FORM_TITLE,
+  IS_REQUIRED_LABEL,
   MESSAGE_LABEL,
   MESSAGE_PLACEHOLDER,
   NAME_LABEL,
@@ -103,7 +105,9 @@ class Feedback implements Integration {
     messageLabel = MESSAGE_LABEL,
     namePlaceholder = NAME_PLACEHOLDER,
     nameLabel = NAME_LABEL,
+    isRequiredLabel = IS_REQUIRED_LABEL,
     successMessageText = SUCCESS_MESSAGE_TEXT,
+    // errorMessageText = ERROR_MESSAGE_TEXT,
 
     onFormClose,
     onFormOpen,
@@ -149,7 +153,9 @@ class Feedback implements Integration {
       messagePlaceholder,
       nameLabel,
       namePlaceholder,
+      isRequiredLabel,
       successMessageText,
+      // errorMessageText,
 
       onFormClose,
       onFormOpen,

packages/feedback/src/types/index.ts

@@ -149,6 +149,8 @@ export interface FeedbackTextConfiguration {
    * Message after feedback was sent successfully
    */
   successMessageText: string;
+  // errorMessageText: string;
+  isRequiredLabel: string;
 }
 
 /**

packages/feedback/src/widget/Form.ts

@@ -53,6 +53,7 @@ export function Form({
   emailPlaceholder,
   messageLabel,
   messagePlaceholder,
+  isRequiredLabel,
   cancelButtonLabel,
   submitButtonLabel,
 
@@ -176,7 +177,7 @@ export function Form({
               'span',
               { className: 'form__label__text' },
               nameLabel,
-              isNameRequired && createElement('span', { className: 'form__label__text--required' }, ' (required)'),
+              isNameRequired && createElement('span', { className: 'form__label__text--required' }, ` ${isRequiredLabel}`),
             ),
             nameEl,
           ],
@@ -195,7 +196,7 @@ export function Form({
               'span',
               { className: 'form__label__text' },
               emailLabel,
-              isEmailRequired && createElement('span', { className: 'form__label__text--required' }, ' (required)'),
+              isEmailRequired && createElement('span', { className: 'form__label__text--required' }, ` ${isRequiredLabel}`),
             ),
             emailEl,
           ],
@@ -213,7 +214,7 @@ export function Form({
             'span',
             { className: 'form__label__text' },
             messageLabel,
-            createElement('span', { className: 'form__label__text--required' }, ' (required)'),
+            createElement('span', { className: 'form__label__text--required' }, ` ${isRequiredLabel}`),
           ),
           messageEl,
         ],

packages/feedback/src/widget/createWidget.ts

@@ -197,6 +197,7 @@ export function createWidget({
         messagePlaceholder: options.messagePlaceholder,
         nameLabel: options.nameLabel,
         namePlaceholder: options.namePlaceholder,
+        isRequiredLabel: options.isRequiredLabel,
         defaultName: (userKey && user && user[userKey.name]) || '',
         defaultEmail: (userKey && user && user[userKey.email]) || '',
         onClosed: () => {

packages/feedback/test/widget/Dialog.test.ts

@@ -23,6 +23,7 @@ function renderDialog({
   messagePlaceholder = 'What is the issue?',
   cancelButtonLabel = 'Cancel!',
   submitButtonLabel = 'Submit!',
+  isRequiredLabel = '(needed!)',
   ...rest
 }: Partial<DialogProps> = {}) {
   return Dialog({
@@ -44,6 +45,7 @@ function renderDialog({
     messagePlaceholder,
     cancelButtonLabel,
     submitButtonLabel,
+    isRequiredLabel,
     ...rest,
   }) as NonNullableFields<ReturnType<typeof Dialog>>;
 }

packages/feedback/test/widget/Form.test.ts

@@ -20,6 +20,7 @@ function renderForm({
   messagePlaceholder = 'What is the issue?',
   cancelButtonLabel = 'Cancel!',
   submitButtonLabel = 'Submit!',
+  isRequiredLabel = '(needed!)',
   ...rest
 }: Partial<FormComponentProps> = {}) {
   return Form({
@@ -37,6 +38,7 @@ function renderForm({
     messagePlaceholder,
     cancelButtonLabel,
     submitButtonLabel,
+    isRequiredLabel,
     ...rest,
   }) as NonNullableFields<ReturnType<typeof Form>>;
 }
@@ -89,9 +91,9 @@ describe('Form', () => {
     const nameLabel = formComponent.el.querySelector('label[htmlFor="name"]') as HTMLLabelElement;
     const emailLabel = formComponent.el.querySelector('label[htmlFor="email"]') as HTMLLabelElement;
     const messageLabel = formComponent.el.querySelector('label[htmlFor="message"]') as HTMLLabelElement;
-    expect(nameLabel.textContent).toBe('Name! (required)');
-    expect(emailLabel.textContent).toBe('Email! (required)');
-    expect(messageLabel.textContent).toBe('Description! (required)');
+    expect(nameLabel.textContent).toBe('Name! (needed!)');
+    expect(emailLabel.textContent).toBe('Email! (needed!)');
+    expect(messageLabel.textContent).toBe('Description! (needed!)');
 
     const nameInput = formComponent.el.querySelector('[name="name"]') as HTMLInputElement;
     const emailInput = formComponent.el.querySelector('[name="email"]') as HTMLInputElement;

packages/feedback/test/widget/createWidget.test.ts

@@ -3,8 +3,9 @@ import {
   CANCEL_BUTTON_LABEL,
   DEFAULT_THEME,
   EMAIL_LABEL,
-  EMAIL_PLACEHOLDER,
+  EMAIL_PLACEHOLDER, ERROR_MESSAGE_TEXT,
   FORM_TITLE,
+  IS_REQUIRED_LABEL,
   MESSAGE_LABEL,
   MESSAGE_PLACEHOLDER,
   NAME_LABEL,
@@ -47,7 +48,9 @@ const DEFAULT_OPTIONS = {
   messageLabel: MESSAGE_LABEL,
   namePlaceholder: NAME_PLACEHOLDER,
   nameLabel: NAME_LABEL,
+  isRequiredLabel: IS_REQUIRED_LABEL,
   successMessageText: SUCCESS_MESSAGE_TEXT,
+  // errorMessageText: ERROR_MESSAGE_TEXT,
 
   onFormClose: jest.fn(),
   onFormOpen: jest.fn(),