diff --git a/webapp/channels/src/components/admin_console/billing/delete_workspace/delete_feedback.tsx b/webapp/channels/src/components/admin_console/billing/delete_workspace/delete_feedback.tsx index 4b103160cf..25c73d3b73 100644 --- a/webapp/channels/src/components/admin_console/billing/delete_workspace/delete_feedback.tsx +++ b/webapp/channels/src/components/admin_console/billing/delete_workspace/delete_feedback.tsx @@ -6,7 +6,7 @@ import React from 'react'; import {injectIntl, WrappedComponentProps} from 'react-intl'; import {Feedback} from '@mattermost/types/cloud'; -import FeedbackModal from 'components/feedback_modal/feedback'; +import FeedbackModal, {FeedbackOption} from 'components/feedback_modal/feedback'; type Props = { onSubmit: (deleteFeedback: Feedback) => void; @@ -28,23 +28,35 @@ const DeleteFeedbackModal = (props: Props) => { defaultMessage: 'Delete Workspace', }); - const deleteFeedbackOptions = [ - props.intl.formatMessage({ - id: 'feedback.deleteWorkspace.feedbackNoValue', - defaultMessage: 'No longer found value', - }), - props.intl.formatMessage({ - id: 'feedback.deleteWorkspace.feedbackMoving', - defaultMessage: 'Moving to a different solution', - }), - props.intl.formatMessage({ - id: 'feedback.deleteWorkspace.feedbackMistake', - defaultMessage: 'Created a workspace by mistake', - }), - props.intl.formatMessage({ - id: 'feedback.deleteWorkspace.feedbackHosting', - defaultMessage: 'Moving to hosting my own Mattermost instance (self-hosted)', - }), + const deleteFeedbackOptions: FeedbackOption[] = [ + { + translatedMessage: props.intl.formatMessage({ + id: 'feedback.deleteWorkspace.feedbackNoValue', + defaultMessage: 'No longer found value', + }), + submissionValue: 'No longer found value', + }, + { + translatedMessage: props.intl.formatMessage({ + id: 'feedback.deleteWorkspace.feedbackMoving', + defaultMessage: 'Moving to a different solution', + }), + submissionValue: 'Moving to a different solution', + }, + { + translatedMessage: props.intl.formatMessage({ + id: 'feedback.deleteWorkspace.feedbackMistake', + defaultMessage: 'Created a workspace by mistake', + }), + submissionValue: 'Created a workspace by mistake', + }, + { + translatedMessage: props.intl.formatMessage({ + id: 'feedback.deleteWorkspace.feedbackHosting', + defaultMessage: 'Moving to hosting my own Mattermost instance (self-hosted)', + }), + submissionValue: 'Moving to hosting my own Mattermost instance (self-hosted)', + }, ]; return ( diff --git a/webapp/channels/src/components/feedback_modal/downgrade_feedback.tsx b/webapp/channels/src/components/feedback_modal/downgrade_feedback.tsx index 65174c147f..9b0fa90739 100644 --- a/webapp/channels/src/components/feedback_modal/downgrade_feedback.tsx +++ b/webapp/channels/src/components/feedback_modal/downgrade_feedback.tsx @@ -6,7 +6,7 @@ import React from 'react'; import {injectIntl, WrappedComponentProps} from 'react-intl'; import {Feedback} from '@mattermost/types/cloud'; -import FeedbackModal from 'components/feedback_modal/feedback'; +import FeedbackModal, {FeedbackOption} from 'components/feedback_modal/feedback'; type Props = { onSubmit: (downgradeFeedback: Feedback) => void; @@ -28,23 +28,35 @@ const DowngradeFeedbackModal = (props: Props) => { defaultMessage: 'Downgrade', }); - const downgradeFeedbackOptions = [ - props.intl.formatMessage({ - id: 'feedback.downgradeWorkspace.technicalIssues', - defaultMessage: 'Experienced technical issues', - }), - props.intl.formatMessage({ - id: 'feedback.downgradeWorkspace.noLongerNeeded', - defaultMessage: 'No longer need Cloud Professional features', - }), - props.intl.formatMessage({ - id: 'feedback.downgradeWorkspace.exploringOptions', - defaultMessage: 'Exploring other solutions', - }), - props.intl.formatMessage({ - id: 'feedback.downgradeWorkspace.tooExpensive', - defaultMessage: 'Too expensive', - }), + const downgradeFeedbackOptions: FeedbackOption[] = [ + { + translatedMessage: props.intl.formatMessage({ + id: 'feedback.downgradeWorkspace.technicalIssues', + defaultMessage: 'Experienced technical issues', + }), + submissionValue: 'Experienced technical issues', + }, + { + translatedMessage: props.intl.formatMessage({ + id: 'feedback.downgradeWorkspace.noLongerNeeded', + defaultMessage: 'No longer need Cloud Professional features', + }), + submissionValue: 'No longer need Cloud Professional features', + }, + { + translatedMessage: props.intl.formatMessage({ + id: 'feedback.downgradeWorkspace.exploringOptions', + defaultMessage: 'Exploring other solutions', + }), + submissionValue: 'Exploring other solutions', + }, + { + translatedMessage: props.intl.formatMessage({ + id: 'feedback.downgradeWorkspace.tooExpensive', + defaultMessage: 'Too expensive', + }), + submissionValue: 'Too expensive', + }, ]; return ( diff --git a/webapp/channels/src/components/feedback_modal/feedback.tsx b/webapp/channels/src/components/feedback_modal/feedback.tsx index af8daaac91..3f612017be 100644 --- a/webapp/channels/src/components/feedback_modal/feedback.tsx +++ b/webapp/channels/src/components/feedback_modal/feedback.tsx @@ -15,18 +15,23 @@ import {ModalIdentifiers} from 'utils/constants'; import './feedback.scss'; +export interface FeedbackOption { + translatedMessage: string; + submissionValue: string; +} + type Props = { onSubmit: (deleteFeedback: Feedback) => void; title: string; submitText: string; - feedbackOptions: string[]; + feedbackOptions: FeedbackOption[]; freeformTextPlaceholder: string; } & WrappedComponentProps function FeedbackModal(props: Props) { const maxFreeFormTextLength = 500; - const optionOther = props.intl.formatMessage({id: 'feedback.other', defaultMessage: 'Other'}); - const feedbackModalOptions: string[] = [ + const optionOther = {translatedMessage: props.intl.formatMessage({id: 'feedback.other', defaultMessage: 'Other'}), submissionValue: 'Other'}; + const feedbackModalOptions: FeedbackOption[] = [ ...props.feedbackOptions, optionOther, ]; @@ -34,9 +39,9 @@ function FeedbackModal(props: Props) { const [reason, setReason] = useState(''); const [comments, setComments] = useState(''); const reasonNotSelected = reason === ''; - const reasonOther = reason === optionOther; + const reasonOther = reason === optionOther.submissionValue; const commentsNotProvided = comments.trim() === ''; - const submitDisabled = reasonNotSelected || (reason === optionOther && commentsNotProvided); + const submitDisabled = reasonNotSelected || (reasonOther && commentsNotProvided); const dispatch = useDispatch(); @@ -71,15 +76,15 @@ function FeedbackModal(props: Props) { testId='FeedbackModalRadioGroup' values={feedbackModalOptions.map((option) => { return { - value: option, - key: option, - testId: option, + value: option.submissionValue, + key: option.translatedMessage, + testId: option.submissionValue, }; })} value={reason} onChange={(e) => setReason(e.target.value)} /> - {reason === optionOther && + {reasonOther && <>