woocommerce/plugins/woocommerce-admin/client/homescreen/stats-overview/install-jetpack-cta.js

163 lines
3.9 KiB
JavaScript

/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { compose } from '@wordpress/compose';
import { Button } from '@wordpress/components';
import { useState } from 'react';
import PropTypes from 'prop-types';
import { withDispatch, withSelect } from '@wordpress/data';
/**
* WooCommerce dependencies
*/
import { H } from '@woocommerce/components';
import { getAdminLink } from '@woocommerce/wc-admin-settings';
import { PLUGINS_STORE_NAME, useUserPreferences } from '@woocommerce/data';
/**
* Internal dependencies
*/
import Connect from 'dashboard/components/connect';
import { recordEvent } from 'lib/tracks';
import { createNoticesFromResponse } from 'lib/notices';
function InstallJetpackCta( {
isJetpackInstalled,
isJetpackActivated,
isJetpackConnected,
installAndActivatePlugins,
isInstalling,
} ) {
const { updateUserPreferences, ...userPrefs } = useUserPreferences();
const [ isConnecting, setIsConnecting ] = useState( false );
const [ isDismissed, setIsDismissed ] = useState(
( userPrefs.homepage_stats || {} ).installJetpackDismissed
);
async function install() {
recordEvent( 'statsoverview_install_jetpack' );
installAndActivatePlugins( [ 'jetpack' ] )
.then( () => {
setIsConnecting( ! isJetpackConnected );
} )
.catch( ( error ) => {
createNoticesFromResponse( error );
} );
}
function dismiss() {
if ( isInstalling || isConnecting ) {
return;
}
const homepageStats = userPrefs.homepage_stats || {};
homepageStats.installJetpackDismissed = true;
updateUserPreferences( { homepage_stats: homepageStats } );
setIsDismissed( true );
recordEvent( 'statsoverview_dismiss_install_jetpack' );
}
function getConnector() {
return (
<Connect
autoConnect
onError={ () => setIsConnecting( false ) }
redirectUrl={ getAdminLink( 'admin.php?page=wc-admin' ) }
/>
);
}
const doNotShow =
isDismissed ||
( isJetpackInstalled && isJetpackActivated && isJetpackConnected );
if ( doNotShow ) {
return null;
}
function getInstallJetpackText() {
if ( ! isJetpackInstalled ) {
return __( 'Get Jetpack', 'woocommerce-admin' );
}
if ( ! isJetpackActivated ) {
return __( 'Activate Jetpack', 'woocommerce-admin' );
}
if ( ! isJetpackConnected ) {
return __( 'Connect Jetpack', 'woocommerce-admin' );
}
return '';
}
return (
<article className="woocommerce-stats-overview__install-jetpack-promo">
<div className="woocommerce-stats-overview__install-jetpack-promo__content">
<H>
{ __(
'Get traffic stats with Jetpack',
'woocommerce-admin'
) }
</H>
<p>
{ __(
'Keep an eye on your views and visitors metrics with ' +
'Jetpack. Requires Jetpack plugin and a WordPress.com ' +
'account.',
'woocommerce-admin'
) }
</p>
</div>
<footer>
<Button isSecondary onClick={ install } isBusy={ isInstalling }>
{ getInstallJetpackText() }
</Button>
<Button isTertiary onClick={ dismiss } isBusy={ isInstalling }>
{ __( 'No thanks', 'woocommerce-admin' ) }
</Button>
</footer>
{ isConnecting && getConnector() }
</article>
);
}
InstallJetpackCta.propTypes = {
/**
* Is the Jetpack plugin connected.
*/
isJetpackConnected: PropTypes.bool.isRequired,
};
export default compose(
withSelect( ( select ) => {
const {
isJetpackConnected,
isPluginsRequesting,
getInstalledPlugins,
getActivePlugins,
} = select( PLUGINS_STORE_NAME );
return {
isInstalling:
isPluginsRequesting( 'installPlugins' ) ||
isPluginsRequesting( 'activatePlugins' ),
isJetpackInstalled: getInstalledPlugins().includes( 'jetpack' ),
isJetpackActivated: getActivePlugins().includes( 'jetpack' ),
isJetpackConnected: isJetpackConnected(),
};
} ),
withDispatch( ( dispatch ) => {
const { installAndActivatePlugins } = dispatch( PLUGINS_STORE_NAME );
return {
installAndActivatePlugins,
};
} )
)( InstallJetpackCta );