Converting to a functional component.

- Adding a check to see if `status.status_code` exists.
- Adding a check to see if `status.status_code` starts with `action.response.`.

src/modules/lists/components/ActionStatusMessage/index.js

@@ -1,39 +1,38 @@
-import React, { Component } from 'react';
-import { Alert } from '../../../reusable';
+import React from 'react';
 import PropTypes from 'prop-types';
 
-class ActionStatusMessage extends Component {
-  render () {
-    const { status, action } = this.props;
+function ActionStatusMessage (props) {
+  const { status, action } = props;
 
-    if (!status) {
-      return null;
-    }
+  if (!status) {
+    return null;
+  }
 
-    let alertType = 'warning';
-    let alertMessage = "We're sorry. Something went wrong. Please use <a href='https://www.lib.umich.edu/ask-librarian'>Ask a Librarian</a> for help.";
+  let alertType = 'warning';
+  let alertMessage = "We're sorry. Something went wrong. Please use <a href='https://www.lib.umich.edu/ask-librarian'>Ask a Librarian</a> for help.";
 
-    if (status.status_code === 'action.response.success') {
+  if (status.status_code?.startsWith('action.response.')) {
+    const statusCode = status.status_code;
+    if (statusCode.endsWith('success')) {
       alertType = 'success';
       alertMessage = `${action.name} successfully sent.`;
     }
-
-    if (status.status_code.startsWith('action.response.invalid.')) {
+    if (statusCode.includes('invalid.')) {
       alertType = 'error';
-      if (status.status_code.endsWith('email')) {
+      if (statusCode.endsWith('email')) {
         alertMessage = 'Please enter a valid email address (e.g. [email protected])';
       }
-      if (status.status_code.endsWith('number')) {
+      if (statusCode.endsWith('number')) {
         alertMessage = 'Please enter a valid 10-digit phone number (e.g. 000-123-5555)';
       }
     }
-
-    return (
-      <Alert type={alertType} className='u-margin-top-1'>
-        <span dangerouslySetInnerHTML={{ __html: alertMessage }} />
-      </Alert>
-    );
   }
+
+  return (
+    <div className={'alert alert-inner alert--' + alertType}>
+      <span dangerouslySetInnerHTML={{ __html: alertMessage }} />
+    </div>
+  );
 }
 
 ActionStatusMessage.propTypes = {