woocommerce/plugins/woocommerce-admin/client/layout/activity-panel/panels/inbox.js

135 lines
3.1 KiB
JavaScript
Raw Normal View History

/** @format */
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
import { Component, Fragment } from '@wordpress/element';
import Gridicon from 'gridicons';
/**
* Internal dependencies
*/
import { ActivityCard, ActivityCardPlaceholder } from '../activity-card';
import ActivityHeader from '../activity-header';
import { getAdminLink } from 'lib/nav-utils';
import { Section } from 'layout/section';
const demoNotices = [
{
id: 1,
type: 'informational',
title: __( 'Accept Apple Pay using Stripe', 'wc-admin' ),
content: __(
'Your Stripe payment gateway now allows your customers to pay using Apple Pay.',
'wc-admin'
),
icon: 'customize',
status: 'unread',
source: 'woocommerce-core',
date_created: '2018-07-12T16:23:08Z',
},
{
id: 2,
type: 'warning',
title: __( 'Extension subscription expired', 'wc-admin' ),
content: __(
'Your subscription for WooCommerce Subscriptions expired on Jun 7th 2018.',
'wc-admin'
),
icon: 'notice-outline',
status: 'read',
source: 'woocommerce-core',
date_created: '2018-07-11T02:49:00Z',
},
{
id: 3,
type: 'informational',
title: __( 'Looking for the Store Notice setting?', 'wc-admin' ),
content: __( 'It can now be found in the customizer.', 'wc-admin' ),
icon: 'info-outline',
status: 'read',
source: 'woocommerce-core',
date_created: '2018-07-10T02:49:00Z',
actions: [
{
id: 1,
name: 'store-customizer-setting',
label: 'Open Customizer',
// @todo What format will links be? Should they default to external/full URLs?
// Full URLs that are wc-admin links will force a page refresh though…
url: getAdminLink( 'customize.php?autofocus%5Bpanel%5D=woocommerce' ),
},
],
},
];
class InboxPanel extends Component {
constructor( props ) {
super( props );
this.state = {
loading: true,
notices: [],
};
}
componentDidMount() {
this.interval = setTimeout( () => {
this.setState( {
loading: false,
notices: demoNotices,
} );
}, 5000 );
}
componentWillUnmount() {
clearTimeout( this.interval );
}
render() {
const { loading = true, notices = [] } = this.state;
const getButtonsFromActions = actions => {
if ( ! actions ) {
return [];
}
return actions.map( action => (
<Button isDefault href={ action.url }>
{ action.label }
</Button>
) );
};
return (
<Fragment>
<ActivityHeader title={ __( 'Inbox', 'wc-admin' ) } />
<Section>
{ loading ? (
<ActivityCardPlaceholder
className="woocommerce-inbox-activity-card"
hasAction
hasDate
lines={ 2 }
/>
) : (
notices.map( note => (
<ActivityCard
key={ note.id }
className="woocommerce-inbox-activity-card"
title={ note.title }
date={ note.date_created }
icon={ <Gridicon icon={ note.icon } size={ 48 } /> }
unread={ 'unread' === note.status }
actions={ getButtonsFromActions( note.actions ) }
>
{ note.content }
</ActivityCard>
) )
) }
</Section>
</Fragment>
);
}
}
export default InboxPanel;