Hook up StoreAlerts component to notes endpoint

plugins/woocommerce-admin/client/layout/store-alerts/index.js

@@ -7,61 +7,22 @@ import { Component, Fragment } from '@wordpress/element';
 import { IconButton, Button, Dashicon } from '@wordpress/components';
 import classnames from 'classnames';
 import interpolateComponents from 'interpolate-components';
-import PropTypes from 'prop-types';
+import { compose } from '@wordpress/compose';
 
 /**
  * WooCommerce dependencies
  */
 import { Card } from '@woocommerce/components';
 
+/**
+ * Internal dependencies
+ */
+import withSelect from 'wc-api/with-select';
+import { QUERY_DEFAULTS } from 'wc-api/constants';
+import sanitizeHTML from 'lib/sanitize-html';
+
 import './style.scss';
 
-const dummy = [
-	{
-		title: 'Lorem ipsum dolor sit amet',
-		type: 'alert',
-		message:
-			'Pellentesque accumsan ligula in aliquam tristique. Donec elementum magna ut sapien tincidunt aliquam.',
-		action: {
-			label: 'Button',
-			url: '#',
-		},
-	},
-	{
-		title: 'Sed bibendum non augue tincidunt mollis',
-		type: 'critical',
-		message: 'Quisque in efficitur nisi. In hac habitasse platea dictumst. Vivamus ut congue diam.',
-		action: {
-			label: 'Button',
-			url: '#',
-		},
-	},
-	{
-		title: 'Duis dictum condimentum sem eu blandit',
-		type: 'emergency',
-		message: 'Fusce fermentum magna dolor, vitae faucibus justo ullamcorper eu.',
-		action: {
-			label: 'Button',
-			url: '#',
-		},
-	},
-];
-
-const alertTypes = {
-	emergency: {
-		label: __( 'Emergency', 'wc-admin' ),
-		icon: 'warning',
-	},
-	alert: {
-		label: __( 'Alert', 'wc-admin' ),
-		icon: 'flag',
-	},
-	critical: {
-		label: __( 'Critical', 'wc-admin' ),
-		icon: 'info',
-	},
-};
-
 class StoreAlerts extends Component {
 	constructor( props ) {
 		super( props );
@@ -104,18 +65,23 @@ class StoreAlerts extends Component {
 		const numberOfAlerts = alerts.length;
 		const alert = alerts[ currentIndex ] ? alerts[ currentIndex ] : null;
 		const type = alert && alert.type ? alert.type : null;
-		const icon = type && alertTypes[ type ] ? alertTypes[ type ].icon : null;
 		const className = classnames( 'woocommerce-store-alerts', {
-			'is-alert-emergency': 'emergency' === type,
-			'is-alert-alert': 'alert' === type,
-			'is-alert-critical': 'critical' === type,
+			'is-alert-error': 'error' === type,
+			'is-alert-update': 'update' === type,
 		} );
+		const actions =
+			alert &&
+			alert.actions.map( action => (
+				<Button key={ action.name } isDefault href={ action.url }>
+					{ action.label }
+				</Button>
+			) );
 
 		return (
 			numberOfAlerts > 0 && (
 				<Card
 					title={ [
-						icon && <Dashicon key="icon" icon={ icon } />,
+						alert.icon && <Dashicon key="icon" icon={ alert.icon } />,
 						<Fragment key="title">{ alert.title }</Fragment>,
 					] }
 					className={ className }
@@ -151,29 +117,28 @@ class StoreAlerts extends Component {
 						)
 					}
 				>
-					<div className="woocommerce-store-alerts__message">{ alert.message }</div>
-					<Button isDefault className="woocommerce-store-alerts__button" href={ alert.action.url }>
-						{ alert.action.label }
-					</Button>
+					<div
+						className="woocommerce-store-alerts__message"
+						dangerouslySetInnerHTML={ sanitizeHTML( alert.content ) }
+					/>
+					{ actions && <div className="woocommerce-store-alerts__actions">{ actions }</div> }
 				</Card>
 			)
 		);
 	}
 }
 
-export default StoreAlerts;
+export default compose(
+	withSelect( select => {
+		const { getNotes } = select( 'wc-api' );
+		const alertsQuery = {
+			page: 1,
+			per_page: QUERY_DEFAULTS.pageSize,
+			type: 'error,update',
+		};
 
-StoreAlerts.propTypes = {
-	alerts: PropTypes.arrayOf(
-		PropTypes.shape( {
-			title: PropTypes.string,
-			type: PropTypes.string,
-			message: PropTypes.string,
-			action: PropTypes.object,
-		} )
-	),
-};
+		const alerts = getNotes( alertsQuery );
 
-StoreAlerts.defaultProps = {
-	alerts: dummy || [],
-};
+		return { alerts };
+	} )
+)( StoreAlerts );