Merge pull request woocommerce/woocommerce-admin#1723 from woocommerce/add/1708-notes-endpoint
Hook up StoreAlerts component to notes endpoint
This commit is contained in:
Tiago Noronha
GitHub
commit
9164e85fad
|
|
@ -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 );
|
||||
|
|
@ -100,80 +61,87 @@ class StoreAlerts extends Component {
|
|||
|
||||
render() {
|
||||
const { alerts } = this.props;
|
||||
|
||||
if ( ! alerts || alerts.length === 0 ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
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,
|
||||
'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 } />,
|
||||
<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>
|
||||
)
|
||||
<Card
|
||||
title={ [
|
||||
alert.icon && <Dashicon key="icon" icon={ alert.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"
|
||||
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 );
|
||||
|
|
|
|||
|
|
@ -27,8 +27,14 @@
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
a.components-button.is-button {
|
||||
color: $core-grey-dark-500;
|
||||
a.components-button {
|
||||
+ .components-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&.is-button {
|
||||
color: $core-grey-dark-500;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint( '<782px' ) {
|
||||
|
|
@ -43,7 +49,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.is-alert-emergency {
|
||||
.is-alert-error {
|
||||
$alert-color: #dc3232;
|
||||
@include store-alerts-box-shadow( $alert-color );
|
||||
|
||||
|
|
@ -54,7 +60,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.is-alert-alert {
|
||||
.is-alert-update {
|
||||
$alert-color: #11a0d2;
|
||||
@include store-alerts-box-shadow( $alert-color );
|
||||
|
||||
|
|
@ -65,17 +71,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue