90 lines
2.0 KiB
JavaScript
90 lines
2.0 KiB
JavaScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { __ } from '@wordpress/i18n';
|
|
import { Button } from '@wordpress/components';
|
|
import Gridicon from 'gridicons';
|
|
import { compose } from '@wordpress/compose';
|
|
import { withDispatch, withSelect } from '@wordpress/data';
|
|
import PropTypes from 'prop-types';
|
|
|
|
/**
|
|
* WooCommerce dependencies
|
|
*/
|
|
import { Card } from '@woocommerce/components';
|
|
import { OPTIONS_STORE_NAME } from '@woocommerce/data';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import './style.scss';
|
|
import { recordEvent } from 'lib/tracks';
|
|
import WelcomeImage from './images/welcome.svg';
|
|
|
|
const WelcomeCard = ( {
|
|
isHidden,
|
|
updateOptions,
|
|
} ) => {
|
|
|
|
const hide = () => {
|
|
updateOptions( {
|
|
woocommerce_marketing_overview_welcome_hidden: 'yes',
|
|
} );
|
|
recordEvent( 'marketing_intro_close', {} );
|
|
}
|
|
|
|
if ( isHidden ) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Card
|
|
className="woocommerce-marketing-overview-welcome-card"
|
|
>
|
|
<Button
|
|
label={ __( 'Hide', 'woocommerce-admin' ) }
|
|
onClick={ hide }
|
|
className="woocommerce-marketing-overview-welcome-card__hide-button"
|
|
>
|
|
<Gridicon icon="cross" />
|
|
</Button>
|
|
<img src={ WelcomeImage } alt="" />
|
|
<h3>{ __( 'Grow your customer base and increase your sales with marketing tools built for WooCommerce', 'woocommerce-admin' ) }</h3>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
WelcomeCard.propTypes = {
|
|
/**
|
|
* Whether the card is hidden.
|
|
*/
|
|
isHidden: PropTypes.bool.isRequired,
|
|
/**
|
|
* updateOptions function.
|
|
*/
|
|
updateOptions: PropTypes.func.isRequired,
|
|
};
|
|
|
|
// named export
|
|
export { WelcomeCard }
|
|
|
|
// default export
|
|
export default compose(
|
|
withSelect( ( select ) => {
|
|
const { getOption, isOptionsUpdating } = select( OPTIONS_STORE_NAME );
|
|
const isUpdateRequesting = isOptionsUpdating();
|
|
|
|
return {
|
|
isHidden:
|
|
getOption( 'woocommerce_marketing_overview_welcome_hidden' ) ===
|
|
'yes' || isUpdateRequesting,
|
|
};
|
|
} ),
|
|
withDispatch( ( dispatch ) => {
|
|
const { updateOptions } = dispatch( OPTIONS_STORE_NAME );
|
|
return {
|
|
updateOptions,
|
|
};
|
|
} )
|
|
)( WelcomeCard );
|