Merge pull request woocommerce/woocommerce-admin#1627 from woocommerce/add/115-store-alerts

Adds StoreAlerts component

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

@@ -22,6 +22,7 @@ import Header from 'header';
 import Notices from './notices';
 import { recordPageView } from 'lib/tracks';
 import TransientNotices from './transient-notices';
+import StoreAlerts from './store-alerts';
 
 class Layout extends Component {
 	componentDidMount() {
@@ -66,6 +67,8 @@ class Layout extends Component {
 				<TransientNotices />
 
 				<div className="woocommerce-layout__primary" id="woocommerce-layout__primary">
+					{ window.wcAdminFeatures[ 'store-alerts' ] && <StoreAlerts /> }
+
 					<Notices />
 					{ ! isEmbeded && (
 						<div className="woocommerce-layout__main">

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

@@ -0,0 +1,179 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+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';
+
+/**
+ * WooCommerce dependencies
+ */
+import { Card } from '@woocommerce/components';
+
+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 );
+		const { alerts } = this.props;
+
+		this.state = {
+			currentIndex: alerts ? 0 : null,
+		};
+
+		this.previousAlert = this.previousAlert.bind( this );
+		this.nextAlert = this.nextAlert.bind( this );
+	}
+
+	previousAlert( event ) {
+		event.stopPropagation();
+		const { currentIndex } = this.state;
+
+		if ( currentIndex > 0 ) {
+			this.setState( {
+				currentIndex: currentIndex - 1,
+			} );
+		}
+	}
+
+	nextAlert( event ) {
+		event.stopPropagation();
+		const { alerts } = this.props;
+		const { currentIndex } = this.state;
+
+		if ( currentIndex < alerts.length - 1 ) {
+			this.setState( {
+				currentIndex: currentIndex + 1,
+			} );
+		}
+	}
+
+	render() {
+		const { alerts } = this.props;
+		const { currentIndex } = this.state;
+		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,
+		} );
+
+		return (
+			numberOfAlerts > 0 && (
+				<Card
+					title={ [
+						icon && <Dashicon key="icon" icon={ icon } />,
+						<Fragment key="title">{ alert.title }</Fragment>,
+					] }
+					className={ className }
+					action={
+						numberOfAlerts > 1 && (
+							<div className="woocommerce-store-alerts__pagination">
+								<IconButton
+									icon="arrow-left-alt2"
+									onClick={ this.previousAlert }
+									disabled={ 0 === currentIndex }
+									label={ __( 'Previous Alert', 'wc-admin' ) }
+								/>
+								<span
+									className="woocommerce-store-alerts__pagination-label"
+									role="status"
+									aria-live="polite"
+								>
+									{ interpolateComponents( {
+										mixedString: __( '{{current /}} of {{total /}}', 'wc-admin' ),
+										components: {
+											current: <Fragment>{ currentIndex + 1 }</Fragment>,
+											total: <Fragment>{ numberOfAlerts }</Fragment>,
+										},
+									} ) }
+								</span>
+								<IconButton
+									icon="arrow-right-alt2"
+									onClick={ this.nextAlert }
+									disabled={ numberOfAlerts - 1 === currentIndex }
+									label={ __( 'Next Alert', 'wc-admin' ) }
+								/>
+							</div>
+						)
+					}
+				>
+					<div className="woocommerce-store-alerts__message">{ alert.message }</div>
+					<Button isDefault className="woocommerce-store-alerts__button" href={ alert.action.url }>
+						{ alert.action.label }
+					</Button>
+				</Card>
+			)
+		);
+	}
+}
+
+export default StoreAlerts;
+
+StoreAlerts.propTypes = {
+	alerts: PropTypes.arrayOf(
+		PropTypes.shape( {
+			title: PropTypes.string,
+			type: PropTypes.string,
+			message: PropTypes.string,
+			action: PropTypes.object,
+		} )
+	),
+};
+
+StoreAlerts.defaultProps = {
+	alerts: dummy || [],
+};

plugins/woocommerce-admin/client/layout/store-alerts/style.scss

@@ -0,0 +1,113 @@
+/** @format */
+@mixin store-alerts-box-shadow( $color ) {
+	box-shadow: 0 0 8px -2px rgba(0, 0, 0, 0.3), inset 4px 0 0 0 $color;
+}
+
+.woocommerce-store-alerts {
+	margin: 0 0 $gap-largest 0;
+	margin-right: var(--large-gap);
+	padding: $gap-large;
+	border: 0;
+
+	.woocommerce-card__header {
+		padding: 0;
+		border: 0;
+		margin-bottom: 12px;
+	}
+
+	.woocommerce-card__title {
+		display: inline-flex;
+
+		svg {
+			margin-right: 6px;
+		}
+	}
+
+	.woocommerce-card__body {
+		padding: 0;
+	}
+
+	a.components-button.is-button {
+		color: $core-grey-dark-500;
+	}
+
+	@include breakpoint( '<782px' ) {
+		margin-bottom: $gap-large;
+		padding: $gap;
+
+		.woocommerce-card__header {
+			display: flex;
+			flex-direction: column-reverse;
+			align-items: flex-start;
+		}
+	}
+}
+
+.is-alert-emergency {
+	$alert-color: #dc3232;
+	@include store-alerts-box-shadow( $alert-color );
+
+	.woocommerce-card__title {
+		svg {
+			color: $alert-color;
+		}
+	}
+}
+
+.is-alert-alert {
+	$alert-color: #11a0d2;
+	@include store-alerts-box-shadow( $alert-color );
+
+	.woocommerce-card__title {
+		svg {
+			color: $alert-color;
+		}
+	}
+}
+
+.is-alert-critical {
+	$alert-color: #ffb900;
+	@include store-alerts-box-shadow( $alert-color );
+
+	.woocommerce-card__title {
+		svg {
+			color: $alert-color;
+		}
+	}
+}
+
+.woocommerce-store-alerts__message {
+	margin-bottom: 16px;
+}
+
+.woocommerce-store-alerts__pagination {
+	display: inline-flex;
+	align-items: center;
+	border: 1px solid $button-border;
+	border-bottom: 2px solid $button-border;
+	border-radius: 4px;
+	background: $button;
+	margin-left: 16px;
+	min-width: 120px;
+
+	.components-button {
+		padding: 4px;
+	}
+
+	.woocommerce-store-alerts__pagination-label {
+		padding: 5px 12px;
+		border-width: 0 1px;
+		border-color: $button-border;
+		border-style: solid;
+		flex: 1 1;
+	}
+
+	@include breakpoint( '<782px' ) {
+		margin-left: 0;
+		margin-bottom: 14px;
+
+		.woocommerce-store-alerts__pagination-label {
+			text-align: center;
+		}
+	}
+}

plugins/woocommerce-admin/config/core.json

@@ -3,6 +3,7 @@
 		"activity-panels": false,
 		"analytics": false,
 		"dashboard": false,
-		"devdocs": false
+		"devdocs": false,
+		"store-alerts": false
 	}
-}
+}

plugins/woocommerce-admin/config/development.json

@@ -3,6 +3,7 @@
 		"activity-panels": true,
 		"analytics": true,
 		"dashboard": true,
-		"devdocs": true
+		"devdocs": true,
+		"store-alerts": true
 	}
-}
+}

plugins/woocommerce-admin/config/plugin.json

@@ -3,6 +3,7 @@
 		"activity-panels": false,
 		"analytics": true,
 		"dashboard": true,
-		"devdocs": false
+		"devdocs": false,
+		"store-alerts": false
 	}
-}
+}