From e3f07e09dae935256923eb6dd747141673688638 Mon Sep 17 00:00:00 2001 From: Soeren Wegener Date: Sun, 17 Mar 2024 19:02:56 +0100 Subject: [PATCH 1/3] feat(feedback): Configurable "required" label (#11152) --- packages/feedback/src/constants.ts | 2 ++ packages/feedback/src/integration.ts | 6 ++++++ packages/feedback/src/types/index.ts | 2 ++ packages/feedback/src/widget/Form.ts | 7 ++++--- packages/feedback/src/widget/createWidget.ts | 1 + packages/feedback/test/widget/Dialog.test.ts | 2 ++ packages/feedback/test/widget/Form.test.ts | 8 +++++--- packages/feedback/test/widget/createWidget.test.ts | 5 ++++- 8 files changed, 26 insertions(+), 7 deletions(-) diff --git a/packages/feedback/src/constants.ts b/packages/feedback/src/constants.ts index 07782968375f..53cddf61a8c4 100644 --- a/packages/feedback/src/constants.ts +++ b/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'; diff --git a/packages/feedback/src/integration.ts b/packages/feedback/src/integration.ts index b70bf008d24d..8046003d2cf0 100644 --- a/packages/feedback/src/integration.ts +++ b/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, @@ -105,7 +107,9 @@ export 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, @@ -152,7 +156,9 @@ export class Feedback implements Integration { messagePlaceholder, nameLabel, namePlaceholder, + isRequiredLabel, successMessageText, + // errorMessageText, onFormClose, onFormOpen, diff --git a/packages/feedback/src/types/index.ts b/packages/feedback/src/types/index.ts index c2642b54d09c..4699548d58fb 100644 --- a/packages/feedback/src/types/index.ts +++ b/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; } /** diff --git a/packages/feedback/src/widget/Form.ts b/packages/feedback/src/widget/Form.ts index 9b90cf547477..ab5ef4933a47 100644 --- a/packages/feedback/src/widget/Form.ts +++ b/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, ], diff --git a/packages/feedback/src/widget/createWidget.ts b/packages/feedback/src/widget/createWidget.ts index 2332aa950b1c..20eea7c9d43c 100644 --- a/packages/feedback/src/widget/createWidget.ts +++ b/packages/feedback/src/widget/createWidget.ts @@ -200,6 +200,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: () => { diff --git a/packages/feedback/test/widget/Dialog.test.ts b/packages/feedback/test/widget/Dialog.test.ts index 69a333f69813..7be40e92704b 100644 --- a/packages/feedback/test/widget/Dialog.test.ts +++ b/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 = {}) { return Dialog({ @@ -44,6 +45,7 @@ function renderDialog({ messagePlaceholder, cancelButtonLabel, submitButtonLabel, + isRequiredLabel, ...rest, }) as NonNullableFields>; } diff --git a/packages/feedback/test/widget/Form.test.ts b/packages/feedback/test/widget/Form.test.ts index 7b45cabd8503..1ffa57ffce09 100644 --- a/packages/feedback/test/widget/Form.test.ts +++ b/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 = {}) { return Form({ @@ -37,6 +38,7 @@ function renderForm({ messagePlaceholder, cancelButtonLabel, submitButtonLabel, + isRequiredLabel, ...rest, }) as NonNullableFields>; } @@ -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; diff --git a/packages/feedback/test/widget/createWidget.test.ts b/packages/feedback/test/widget/createWidget.test.ts index c2a5f50daebc..6b93addf1937 100644 --- a/packages/feedback/test/widget/createWidget.test.ts +++ b/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(), From 78faf270031a10ade1386c3a35fe5fc13ca0fbca Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Tue, 26 Mar 2024 11:24:37 -0400 Subject: [PATCH 2/3] remove error message text --- packages/feedback/src/constants.ts | 1 - packages/feedback/src/integration.ts | 3 --- packages/feedback/src/types/index.ts | 5 ++++- packages/feedback/test/widget/createWidget.test.ts | 3 +-- 4 files changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/feedback/src/constants.ts b/packages/feedback/src/constants.ts index 53cddf61a8c4..42129ae79838 100644 --- a/packages/feedback/src/constants.ts +++ b/packages/feedback/src/constants.ts @@ -72,7 +72,6 @@ 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'; diff --git a/packages/feedback/src/integration.ts b/packages/feedback/src/integration.ts index 8046003d2cf0..e762ace9e91d 100644 --- a/packages/feedback/src/integration.ts +++ b/packages/feedback/src/integration.ts @@ -7,7 +7,6 @@ import { DEFAULT_THEME, EMAIL_LABEL, EMAIL_PLACEHOLDER, - // ERROR_MESSAGE_TEXT, FORM_TITLE, IS_REQUIRED_LABEL, MESSAGE_LABEL, @@ -109,7 +108,6 @@ export class Feedback implements Integration { nameLabel = NAME_LABEL, isRequiredLabel = IS_REQUIRED_LABEL, successMessageText = SUCCESS_MESSAGE_TEXT, - // errorMessageText = ERROR_MESSAGE_TEXT, onFormClose, onFormOpen, @@ -158,7 +156,6 @@ export class Feedback implements Integration { namePlaceholder, isRequiredLabel, successMessageText, - // errorMessageText, onFormClose, onFormOpen, diff --git a/packages/feedback/src/types/index.ts b/packages/feedback/src/types/index.ts index 4699548d58fb..c10abeab5887 100644 --- a/packages/feedback/src/types/index.ts +++ b/packages/feedback/src/types/index.ts @@ -149,7 +149,10 @@ export interface FeedbackTextConfiguration { * Message after feedback was sent successfully */ successMessageText: string; - // errorMessageText: string; + + /** + * Label shown when an input field is required + */ isRequiredLabel: string; } diff --git a/packages/feedback/test/widget/createWidget.test.ts b/packages/feedback/test/widget/createWidget.test.ts index 6b93addf1937..92236e3f6430 100644 --- a/packages/feedback/test/widget/createWidget.test.ts +++ b/packages/feedback/test/widget/createWidget.test.ts @@ -3,7 +3,7 @@ import { CANCEL_BUTTON_LABEL, DEFAULT_THEME, EMAIL_LABEL, - EMAIL_PLACEHOLDER, ERROR_MESSAGE_TEXT, + EMAIL_PLACEHOLDER, FORM_TITLE, IS_REQUIRED_LABEL, MESSAGE_LABEL, @@ -50,7 +50,6 @@ const DEFAULT_OPTIONS = { nameLabel: NAME_LABEL, isRequiredLabel: IS_REQUIRED_LABEL, successMessageText: SUCCESS_MESSAGE_TEXT, - // errorMessageText: ERROR_MESSAGE_TEXT, onFormClose: jest.fn(), onFormOpen: jest.fn(), From 7497ef8b23f9791e9ea270b67a5514e0af603ada Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Tue, 26 Mar 2024 15:19:05 -0400 Subject: [PATCH 3/3] formatting --- packages/feedback/src/widget/Form.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/feedback/src/widget/Form.ts b/packages/feedback/src/widget/Form.ts index ab5ef4933a47..a0d1ff5694e5 100644 --- a/packages/feedback/src/widget/Form.ts +++ b/packages/feedback/src/widget/Form.ts @@ -177,7 +177,8 @@ export function Form({ 'span', { className: 'form__label__text' }, nameLabel, - isNameRequired && createElement('span', { className: 'form__label__text--required' }, ` ${isRequiredLabel}`), + isNameRequired && + createElement('span', { className: 'form__label__text--required' }, ` ${isRequiredLabel}`), ), nameEl, ], @@ -196,7 +197,8 @@ export function Form({ 'span', { className: 'form__label__text' }, emailLabel, - isEmailRequired && createElement('span', { className: 'form__label__text--required' }, ` ${isRequiredLabel}`), + isEmailRequired && + createElement('span', { className: 'form__label__text--required' }, ` ${isRequiredLabel}`), ), emailEl, ],