suspendAccountAction.tsx 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. import {Component} from 'react';
  2. import type {
  3. AdminConfirmParams,
  4. AdminConfirmRenderProps,
  5. } from 'admin/components/adminConfirmationModal';
  6. const suspendReasons = [
  7. ['event_volume', 'Event Volume', 'This account has greatly exceeded its paid volume'],
  8. ['fraud', 'Fraudulent', 'This account was reported as fraudulent'],
  9. ] as const;
  10. type State = {
  11. suspensionReason: (typeof suspendReasons)[number][0] | null;
  12. };
  13. /**
  14. * Rendered as part of a openAdminConfirmModal call
  15. */
  16. class SuspendAccountAction extends Component<AdminConfirmRenderProps, State> {
  17. state: State = {
  18. suspensionReason: null,
  19. };
  20. componentDidMount() {
  21. this.props.setConfirmCallback(this.handleConfirm);
  22. }
  23. handleConfirm = (_params: AdminConfirmParams) => {
  24. // XXX(epurkhiser): In the original implementation none of the audit params
  25. // were passed, is that an oversight?
  26. this.props.onConfirm?.({suspensionReason: this.state.suspensionReason});
  27. };
  28. getReasonChoices = () => [
  29. ['event_volume', 'Event Volume', 'This account has greatly exceeded its paid volume'],
  30. ['fraud', 'Fraudulent', 'This account was reported as fraudulent'],
  31. ];
  32. render() {
  33. return suspendReasons.map(([key, label, help]) => (
  34. <label style={{marginBottom: 10, position: 'relative'}} key={key}>
  35. <div style={{position: 'absolute', left: 0, width: 20}}>
  36. <input
  37. data-test-id={`suspend-radio-btn-${key}`}
  38. aria-label={label}
  39. type="radio"
  40. name="suspensionReason"
  41. value={key}
  42. checked={this.state.suspensionReason === key}
  43. onChange={() => {
  44. this.setState({suspensionReason: key});
  45. this.props.disableConfirmButton(false);
  46. }}
  47. />
  48. </div>
  49. <div style={{marginLeft: 25}}>
  50. <strong>{label}</strong>
  51. <br />
  52. <small style={{fontWeight: 'normal'}}>{help}</small>
  53. </div>
  54. </label>
  55. ));
  56. }
  57. }
  58. export default SuspendAccountAction;