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

174 lines
4.1 KiB
JavaScript
Raw Normal View History

/**
* 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';
import {
__experimentalResolveSelect,
PLUGINS_STORE_NAME,
useUserPreferences,
} from '@woocommerce/data';
import { H } from '@woocommerce/components';
import { getAdminLink } from '@woocommerce/wc-admin-settings';
/**
* Internal dependencies
*/
import { recordEvent } from '../../lib/tracks';
import { createNoticesFromResponse } from '../../lib/notices';
Migrate user store to wp.data (https://github.com/woocommerce/woocommerce-admin/pull/4505) * Initial user preferences custom hook (wc meta). * Organize dependencies. * Specify dependencies in useSelect() call. * Remove specifying preference keys. There's currently no performance benefit to be had. * Add HoC for hydrating current user data. * Add user prefs update method. * Export user prefs hook and HoC in data package. * Handle error condition when updating user preferences. * Use closure to get user ID for prefs update. * Refactor analytics dashboard to use new user hook. * Refactor ReportTable component to use new user hook. * Move prop access to top of function component. * Add todo for potential manual resolution logic. * Refactor DashboardCharts component to use new user preferences hook. * Move code out of functional component where possible. * Fix chart interval query property. * Refactor Leaderboards component to use new user preferences hook. * Move code out of functional component where possible. * Refactor Inbox panel to use user prefs hook. @todo - updating last read isn't working. * Use user prefs hook in StatsOverview component. * Export user preferences store name. * Use new store for unread inbox indicator. * Hydrate current user data higher up in the app. * Update "last read" timestamp in inbox panel. * Fix StatsOverview test. * Remove unused dispatch method from StorePerformance component. * Remove now defunct user methods from wc-api spec. * Add tests for isRequesting. * JSON decode WC meta on updated user object. * Test user prefs retrieval and save. * Remove todo comment. * Use user prefs hook in Jetpack install CTA on homepage.
2020-06-10 16:46:46 +00:00
function InstallJetpackCta( {
getJetpackConnectUrl,
getPluginsError,
Migrate user store to wp.data (https://github.com/woocommerce/woocommerce-admin/pull/4505) * Initial user preferences custom hook (wc meta). * Organize dependencies. * Specify dependencies in useSelect() call. * Remove specifying preference keys. There's currently no performance benefit to be had. * Add HoC for hydrating current user data. * Add user prefs update method. * Export user prefs hook and HoC in data package. * Handle error condition when updating user preferences. * Use closure to get user ID for prefs update. * Refactor analytics dashboard to use new user hook. * Refactor ReportTable component to use new user hook. * Move prop access to top of function component. * Add todo for potential manual resolution logic. * Refactor DashboardCharts component to use new user preferences hook. * Move code out of functional component where possible. * Fix chart interval query property. * Refactor Leaderboards component to use new user preferences hook. * Move code out of functional component where possible. * Refactor Inbox panel to use user prefs hook. @todo - updating last read isn't working. * Use user prefs hook in StatsOverview component. * Export user preferences store name. * Use new store for unread inbox indicator. * Hydrate current user data higher up in the app. * Update "last read" timestamp in inbox panel. * Fix StatsOverview test. * Remove unused dispatch method from StorePerformance component. * Remove now defunct user methods from wc-api spec. * Add tests for isRequesting. * JSON decode WC meta on updated user object. * Test user prefs retrieval and save. * Remove todo comment. * Use user prefs hook in Jetpack install CTA on homepage.
2020-06-10 16:46:46 +00:00
isJetpackInstalled,
isJetpackActivated,
isJetpackConnected,
installAndActivatePlugins,
isConnecting,
isInstalling,
Migrate user store to wp.data (https://github.com/woocommerce/woocommerce-admin/pull/4505) * Initial user preferences custom hook (wc meta). * Organize dependencies. * Specify dependencies in useSelect() call. * Remove specifying preference keys. There's currently no performance benefit to be had. * Add HoC for hydrating current user data. * Add user prefs update method. * Export user prefs hook and HoC in data package. * Handle error condition when updating user preferences. * Use closure to get user ID for prefs update. * Refactor analytics dashboard to use new user hook. * Refactor ReportTable component to use new user hook. * Move prop access to top of function component. * Add todo for potential manual resolution logic. * Refactor DashboardCharts component to use new user preferences hook. * Move code out of functional component where possible. * Fix chart interval query property. * Refactor Leaderboards component to use new user preferences hook. * Move code out of functional component where possible. * Refactor Inbox panel to use user prefs hook. @todo - updating last read isn't working. * Use user prefs hook in StatsOverview component. * Export user preferences store name. * Use new store for unread inbox indicator. * Hydrate current user data higher up in the app. * Update "last read" timestamp in inbox panel. * Fix StatsOverview test. * Remove unused dispatch method from StorePerformance component. * Remove now defunct user methods from wc-api spec. * Add tests for isRequesting. * JSON decode WC meta on updated user object. * Test user prefs retrieval and save. * Remove todo comment. * Use user prefs hook in Jetpack install CTA on homepage.
2020-06-10 16:46:46 +00:00
} ) {
const { updateUserPreferences, ...userPrefs } = useUserPreferences();
const [ isDismissed, setIsDismissed ] = useState(
Migrate user store to wp.data (https://github.com/woocommerce/woocommerce-admin/pull/4505) * Initial user preferences custom hook (wc meta). * Organize dependencies. * Specify dependencies in useSelect() call. * Remove specifying preference keys. There's currently no performance benefit to be had. * Add HoC for hydrating current user data. * Add user prefs update method. * Export user prefs hook and HoC in data package. * Handle error condition when updating user preferences. * Use closure to get user ID for prefs update. * Refactor analytics dashboard to use new user hook. * Refactor ReportTable component to use new user hook. * Move prop access to top of function component. * Add todo for potential manual resolution logic. * Refactor DashboardCharts component to use new user preferences hook. * Move code out of functional component where possible. * Fix chart interval query property. * Refactor Leaderboards component to use new user preferences hook. * Move code out of functional component where possible. * Refactor Inbox panel to use user prefs hook. @todo - updating last read isn't working. * Use user prefs hook in StatsOverview component. * Export user preferences store name. * Use new store for unread inbox indicator. * Hydrate current user data higher up in the app. * Update "last read" timestamp in inbox panel. * Fix StatsOverview test. * Remove unused dispatch method from StorePerformance component. * Remove now defunct user methods from wc-api spec. * Add tests for isRequesting. * JSON decode WC meta on updated user object. * Test user prefs retrieval and save. * Remove todo comment. * Use user prefs hook in Jetpack install CTA on homepage.
2020-06-10 16:46:46 +00:00
( userPrefs.homepage_stats || {} ).installJetpackDismissed
);
async function install() {
recordEvent( 'statsoverview_install_jetpack' );
installAndActivatePlugins( [ 'jetpack' ] )
.then( connect )
.catch( ( error ) => {
createNoticesFromResponse( error );
} );
}
function connect() {
if ( isJetpackConnected ) {
return;
}
getJetpackConnectUrl( {
redirect_url: getAdminLink( 'admin.php?page=wc-admin' ),
} ).then( ( url ) => {
const error = getPluginsError( 'getJetpackConnectUrl' );
if ( error ) {
createNoticesFromResponse( error );
return;
}
window.location = url;
} );
}
function dismiss() {
if ( isInstalling || isConnecting ) {
return;
}
Migrate user store to wp.data (https://github.com/woocommerce/woocommerce-admin/pull/4505) * Initial user preferences custom hook (wc meta). * Organize dependencies. * Specify dependencies in useSelect() call. * Remove specifying preference keys. There's currently no performance benefit to be had. * Add HoC for hydrating current user data. * Add user prefs update method. * Export user prefs hook and HoC in data package. * Handle error condition when updating user preferences. * Use closure to get user ID for prefs update. * Refactor analytics dashboard to use new user hook. * Refactor ReportTable component to use new user hook. * Move prop access to top of function component. * Add todo for potential manual resolution logic. * Refactor DashboardCharts component to use new user preferences hook. * Move code out of functional component where possible. * Fix chart interval query property. * Refactor Leaderboards component to use new user preferences hook. * Move code out of functional component where possible. * Refactor Inbox panel to use user prefs hook. @todo - updating last read isn't working. * Use user prefs hook in StatsOverview component. * Export user preferences store name. * Use new store for unread inbox indicator. * Hydrate current user data higher up in the app. * Update "last read" timestamp in inbox panel. * Fix StatsOverview test. * Remove unused dispatch method from StorePerformance component. * Remove now defunct user methods from wc-api spec. * Add tests for isRequesting. * JSON decode WC meta on updated user object. * Test user prefs retrieval and save. * Remove todo comment. * Use user prefs hook in Jetpack install CTA on homepage.
2020-06-10 16:46:46 +00:00
const homepageStats = userPrefs.homepage_stats || {};
homepageStats.installJetpackDismissed = true;
Migrate user store to wp.data (https://github.com/woocommerce/woocommerce-admin/pull/4505) * Initial user preferences custom hook (wc meta). * Organize dependencies. * Specify dependencies in useSelect() call. * Remove specifying preference keys. There's currently no performance benefit to be had. * Add HoC for hydrating current user data. * Add user prefs update method. * Export user prefs hook and HoC in data package. * Handle error condition when updating user preferences. * Use closure to get user ID for prefs update. * Refactor analytics dashboard to use new user hook. * Refactor ReportTable component to use new user hook. * Move prop access to top of function component. * Add todo for potential manual resolution logic. * Refactor DashboardCharts component to use new user preferences hook. * Move code out of functional component where possible. * Fix chart interval query property. * Refactor Leaderboards component to use new user preferences hook. * Move code out of functional component where possible. * Refactor Inbox panel to use user prefs hook. @todo - updating last read isn't working. * Use user prefs hook in StatsOverview component. * Export user preferences store name. * Use new store for unread inbox indicator. * Hydrate current user data higher up in the app. * Update "last read" timestamp in inbox panel. * Fix StatsOverview test. * Remove unused dispatch method from StorePerformance component. * Remove now defunct user methods from wc-api spec. * Add tests for isRequesting. * JSON decode WC meta on updated user object. * Test user prefs retrieval and save. * Remove todo comment. * Use user prefs hook in Jetpack install CTA on homepage.
2020-06-10 16:46:46 +00:00
updateUserPreferences( { homepage_stats: homepageStats } );
setIsDismissed( true );
recordEvent( 'statsoverview_dismiss_install_jetpack' );
}
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>
</article>
);
}
InstallJetpackCta.propTypes = {
/**
* Is the Jetpack plugin connected.
*/
isJetpackConnected: PropTypes.bool.isRequired,
};
export default compose(
withSelect( ( select ) => {
const {
isJetpackConnected,
isPluginsRequesting,
getActivePlugins,
getInstalledPlugins,
getPluginsError,
} = select( PLUGINS_STORE_NAME );
return {
getJetpackConnectUrl: __experimentalResolveSelect(
PLUGINS_STORE_NAME
).getJetpackConnectUrl,
getPluginsError,
isConnecting: isPluginsRequesting( 'getJetpackConnectUrl' ),
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 );