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

117 lines
2.9 KiB
JavaScript
Raw Normal View History

/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { PLUGINS_STORE_NAME, useUserPreferences } from '@woocommerce/data';
import { H } from '@woocommerce/components';
import { recordEvent } from '@woocommerce/tracks';
/**
* Internal dependencies
*/
import { createErrorNotice } from '../../../packages/data/src/plugins/actions';
const getJetpackInstallText = ( jetpackInstallState ) => {
return (
{
unavailable: __( 'Get Jetpack', 'woocommerce-admin' ),
installed: __( 'Activate Jetpack', 'woocommerce-admin' ),
activated: __( 'Connect Jetpack', 'woocommerce-admin' ),
}[ jetpackInstallState ] || ''
);
};
export const JetpackCTA = ( {
onClickInstall,
onClickDismiss,
isBusy,
jetpackInstallState,
} ) => {
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={ () => {
recordEvent( 'statsoverview_install_jetpack' );
onClickInstall();
} }
disabled={ isBusy }
isBusy={ isBusy }
>
{ getJetpackInstallText( jetpackInstallState ) }
</Button>
<Button
isTertiary
onClick={ () => {
recordEvent( 'statsoverview_dismiss_install_jetpack' );
onClickDismiss();
} }
disabled={ isBusy }
isBusy={ isBusy }
>
{ __( 'No thanks', 'woocommerce-admin' ) }
</Button>
</footer>
</article>
);
};
export const InstallJetpackCTA = () => {
const { updateUserPreferences, ...userPrefs } = useUserPreferences();
const { jetpackInstallState, isBusy } = useSelect( ( select ) => {
const { getPluginInstallState, isPluginsRequesting } = select(
PLUGINS_STORE_NAME
);
const installState = getPluginInstallState( 'jetpack' );
const busyState =
isPluginsRequesting( 'getJetpackConnectUrl' ) ||
isPluginsRequesting( 'installPlugins' ) ||
isPluginsRequesting( 'activatePlugins' );
return {
isBusy: busyState,
jetpackInstallState: installState,
};
} );
const { installJetpackAndConnect } = useDispatch( PLUGINS_STORE_NAME );
const onClickInstall = () => {
installJetpackAndConnect( createErrorNotice );
};
return (
<JetpackCTA
jetpackInstallState={ jetpackInstallState }
isBusy={ isBusy }
onClickInstall={ onClickInstall }
onClickDismiss={ () => {
const homepageStats = userPrefs.homepage_stats || {};
homepageStats.installJetpackDismissed = true;
updateUserPreferences( {
homepage_stats: homepageStats,
} );
} }
/>
);
};