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

121 lines
3.1 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,
useUser,
useUserPreferences,
} from '@woocommerce/data';
import { H } from '@woocommerce/components';
import { recordEvent } from '@woocommerce/tracks';
import { getAdminLink } from '@woocommerce/settings';
Enable Typescript checking on ./client folder (https://github.com/woocommerce/woocommerce-admin/pull/8372) * Copied .tsconfig into ./client to enable ts checking - Made sub-repos composite typescript packages where necessary * Prevent tsc from transpiling ./client - we use webpack for transpiling so no need for this * Added tsc resolution path for @automattic/explat-client - Seems like there's a type export issue (?) with @automattic/explat-client and @automattic/explat-client-react-helpers - adding the node_modules/@automattic/explat-client path in tsconfig seems to help TS resolve this using the source .ts files - found answer here: https://github.com/microsoft/TypeScript/issues/42873 - should figure out what's actually wrong with the type exports and fix that there instead * Removed mandatory checking from webpack - removed this for now as it will block all development until all type inconsistencies are fixed - for now, run the optional ts:check task either in console or vscode for highlighting type errors * Added vscode tasks for typescript checking * Patch @automattic/explat-client-react-helpers - this changes the installed code in node_modules (post-installation) for @automattic/explat-client-react-helpers so that it exports the necessary type interfaces required by us - attempted unsuccessfully to override type exports using declare module - not too sure how to fix this internally by other means - have to investigate what fixes to propose to @automattic/explat-client-react-helpers team * changed tests in ./client to use ts-jest instead of babel-jest - rewrote jest config to use ts-jest instead of babel-jest - set ts errors to warnings instead so that tests don't fail on type errors - created new tsconfig for ./packages/js-tests so that build and ts-check are separate, as js-tests need to be built for commonjs
2022-03-01 04:19:07 +00:00
import { createErrorNotice } from '@woocommerce/data/src/plugins/actions';
const getJetpackInstallText = ( jetpackInstallState ) => {
return (
{
unavailable: __( 'Get Jetpack', 'woocommerce' ),
installed: __( 'Activate Jetpack', 'woocommerce' ),
activated: __( 'Connect Jetpack', 'woocommerce' ),
}[ 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' ) }</H>
<p>
{ __(
'Keep an eye on your views and visitors metrics with ' +
'Jetpack. Requires Jetpack plugin and a WordPress.com ' +
'account.',
'woocommerce'
) }
</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' ) }
</Button>
</footer>
</article>
);
};
export const InstallJetpackCTA = () => {
const { currentUserCan } = useUser();
const { updateUserPreferences, ...userPrefs } = useUserPreferences();
const { canUserInstallPlugins, 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,
canUserInstallPlugins: currentUserCan( 'install_plugins' ),
};
}
);
const { installJetpackAndConnect } = useDispatch( PLUGINS_STORE_NAME );
if ( ! canUserInstallPlugins ) {
return null;
}
const onClickInstall = () => {
installJetpackAndConnect( createErrorNotice, getAdminLink );
};
return (
<JetpackCTA
jetpackInstallState={ jetpackInstallState }
isBusy={ isBusy }
onClickInstall={ onClickInstall }
onClickDismiss={ () => {
const homepageStats = userPrefs.homepage_stats || {};
homepageStats.installJetpackDismissed = true;
updateUserPreferences( {
homepage_stats: homepageStats,
} );
} }
/>
);
};