diff --git a/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx b/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx index bbcd83d6a..3a45f07a5 100644 --- a/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx +++ b/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx @@ -23,6 +23,8 @@ const messages = defineMessages({ close: { id: 'lightbox.close', defaultMessage: 'Close' }, placeholder: { id: 'report.placeholder', defaultMessage: 'Additional comments' }, submit: { id: 'report.submit', defaultMessage: 'Submit' }, + cancel: { id: 'common.cancel', defaultMessage: 'Cancel' }, + previous: { id: 'report.previous', defaultMessage: 'Previous' }, }); enum Steps { @@ -101,6 +103,52 @@ const ReportModal = ({ onClose }: IReportModal) => { } }; + const renderSelectedStatuses = useCallback(() => { + switch (selectedStatusIds.size) { + case 0: + return ( +
+ {intl.formatMessage(messages.blankslate)} +
+ ); + default: + return ; + } + }, [selectedStatusIds.size]); + + const cancelText = useMemo(() => { + switch (currentStep) { + case Steps.ONE: + return intl.formatMessage(messages.cancel); + default: + return intl.formatMessage(messages.previous); + } + }, [currentStep]); + + const cancelAction = () => { + switch (currentStep) { + case Steps.ONE: + onClose(); + break; + case Steps.TWO: + setCurrentStep(Steps.ONE); + break; + default: + break; + } + }; + + const confirmationText = useMemo(() => { + switch (currentStep) { + case Steps.TWO: + return intl.formatMessage(messages.submit); + case Steps.THREE: + return intl.formatMessage(messages.done); + default: + return intl.formatMessage(messages.next); + } + }, [currentStep]); + const handleNextStep = () => { switch (currentStep) { case Steps.ONE: @@ -118,30 +166,6 @@ const ReportModal = ({ onClose }: IReportModal) => { } }; - const renderSelectedStatuses = useCallback(() => { - switch (selectedStatusIds.size) { - case 0: - return ( -
- {intl.formatMessage(messages.blankslate)} -
- ); - default: - return ; - } - }, [selectedStatusIds.size]); - - const confirmationText = useMemo(() => { - switch (currentStep) { - case Steps.TWO: - return intl.formatMessage(messages.submit); - case Steps.THREE: - return intl.formatMessage(messages.done); - default: - return intl.formatMessage(messages.next); - } - }, [currentStep]); - const isConfirmationButtonDisabled = useMemo(() => { if (currentStep === Steps.THREE) { return false; @@ -179,8 +203,8 @@ const ReportModal = ({ onClose }: IReportModal) => { @{account.acct} }} />} onClose={onClose} - cancelText={} - cancelAction={currentStep === Steps.THREE ? undefined : onClose} + cancelText={cancelText} + cancelAction={cancelAction} confirmationAction={handleNextStep} confirmationText={confirmationText} confirmationDisabled={isConfirmationButtonDisabled}