FP-990: <Message type=scope>, not <SectionMessage>

I couldn't figure out how to use `<Sectionmessage>` to achieve FP-990.

client/src/components/_common/IntroMessage/IntroMessage.js

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Alert } from 'reactstrap';
 import { useDispatch, useSelector } from 'react-redux';
 
+import { Message } from '_common';
+
 /**
  * Whether the name is of a known intro message
  * @param {String} messageName - The name of the message to check
@@ -31,24 +32,30 @@ function IntroMessage({ children, className, messageName }) {
  const dispatch = useDispatch();
  const introMessages = useSelector(state => state.introMessages);
  const shouldShow = isKnownMessage(messageName);
+ const [isVisible, setIsVisible] = useState(shouldShow);
 
- function onDismiss(name) {
+ // Manage visibility
+ const onDismiss = useCallback(() => {
  const newMessagesState = {
  ...introMessages,
- [name]: false
+ [messageName]: false
  };
  dispatch({ type: 'SAVE_INTRO', payload: newMessagesState });
- }
+
+ setIsVisible(!isVisible);
+ }, [isVisible]);
 
  return (
- <Alert
- isOpen={shouldShow}
- toggle={() => onDismiss(messageName)}
- color="secondary"
+ <Message
+ type="info"
+ scope="section"
+ canDismiss
  className={className}
+ isVisible={isVisible}
+ onDismiss={onDismiss}
  >
  {children}
- </Alert>
+ </Message>
  );
 }
 IntroMessage.propTypes = {

client/src/components/_common/IntroMessage/IntroMessage.test.js

@@ -20,7 +20,7 @@ describe('IntroMessage', () => {
  );
  expect(container.getElementsByClassName('test-class').length).toEqual(1);
  // NOTE: The `status` role (https://www.w3.org/TR/html-aria/#index-aria-status) is more appropriate than the `alert` role (https://www.w3.org/TR/html-aria/#index-aria-alert), but setting the `role` attribute of an `Alert` is ineffectual
- expect(getByRole('alert')).not.toEqual(null);
+ expect(getByRole('status')).not.toEqual(null);
  expect(getByText('Test Message')).not.toEqual(null);
  });
  });