diff --git a/plugins/woocommerce-admin/client/layout/store-alerts/index.js b/plugins/woocommerce-admin/client/layout/store-alerts/index.js index 6f012c0d033..201afa899c7 100644 --- a/plugins/woocommerce-admin/client/layout/store-alerts/index.js +++ b/plugins/woocommerce-admin/client/layout/store-alerts/index.js @@ -4,7 +4,7 @@ */ import { __ } from '@wordpress/i18n'; import { Component, Fragment } from '@wordpress/element'; -import { IconButton, Button, Dashicon } from '@wordpress/components'; +import { IconButton, Button, Dashicon, Dropdown, NavigableMenu } from '@wordpress/components'; import classnames from 'classnames'; import interpolateComponents from 'interpolate-components'; import { compose } from '@wordpress/compose'; @@ -14,7 +14,7 @@ import { withDispatch } from '@wordpress/data'; /** * WooCommerce dependencies */ -import { Card } from '@woocommerce/components'; +import { Card, DropdownButton } from '@woocommerce/components'; /** * Internal dependencies @@ -62,6 +62,86 @@ class StoreAlerts extends Component { } } + renderActions( alert ) { + const actions = alert.actions.map( action => { + const markStatus = () => { + this.props.updateNote( alert.id, { status: action.status } ); + }; + return ( + + ); + } ); + + const snoozeOptions = [ + { + value: 0, + label: __( 'Later Today', 'woocommerce-admin' ), + }, + { + value: 1, + label: __( 'Tomorrow', 'woocommerce-admin' ), + }, + { + value: 2, + label: __( 'Next Week', 'woocommerce-admin' ), + }, + { + value: 3, + label: __( 'Next Month', 'woocommerce-admin' ), + }, + ]; + + const onNavigate = ( key, onClose ) => { + return () => { + onClose(); + console.log( 'onNavigate', snoozeOptions[ key ] ); + }; + }; + + const snooze = alert.is_snoozable && ( + ( + + ) } + renderContent={ ( { onClose } ) => ( + + { snoozeOptions.map( ( option, idx ) => ( + + ) ) } + + ) } + /> + ); + + if ( actions || snooze ) { + return ( +
+ { actions } + { snooze } +
+ ); + } + } + render() { const alerts = this.props.alerts || []; const preloadAlertCount = wcSettings.alertCount && parseInt( wcSettings.alertCount ); @@ -81,22 +161,6 @@ class StoreAlerts extends Component { 'is-alert-update': 'update' === type, } ); - const actions = alert.actions.map( action => { - const markStatus = () => { - this.props.updateNote( alert.id, { status: action.status } ); - }; - return ( - - ); - } ); - return ( - { actions &&
{ actions }
} + { this.renderActions( alert ) }
); }