115 lines
3.7 KiB
TypeScript
115 lines
3.7 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { useState, useEffect, useCallback } from '@wordpress/element';
|
|
import { useSelect, useDispatch } from '@wordpress/data';
|
|
import { PLUGINS_STORE_NAME, useUser } from '@woocommerce/data';
|
|
import { createErrorNotice } from '@woocommerce/data/src/plugins/actions';
|
|
|
|
export const JetpackPluginStates = {
|
|
/** Jetpack plugin is not installed, can use installHandler() to install */
|
|
NOT_INSTALLED: 'not-installed',
|
|
/** Installing Jetpack plugin on the WordPress installation */
|
|
INSTALLING: 'installing',
|
|
/** User doesn't have permissions to install plugins on this site */
|
|
USER_CANNOT_INSTALL: 'user-cannot-install',
|
|
/** Weird edge case where the plugin is installed but not activated */
|
|
NOT_ACTIVATED: 'not-activated',
|
|
/** Jetpack plugin is installed but not connected to a WordPress.com user */
|
|
USERLESS_CONNECTION: 'userless-connection',
|
|
/** Jetpack on this site is connected to a user but not the currently logged in user */
|
|
NOT_OWNER_OF_CONNECTION: 'not-owner-of-connection',
|
|
/** Jetpack Plugin installed and WordPress.com user connected */
|
|
FULL_CONNECTION: 'full-connection',
|
|
/** Still retrieving Jetpack state from Wordpress Installation */
|
|
INITIALIZING: 'initializing',
|
|
} as const;
|
|
|
|
export type JetpackPluginStates =
|
|
typeof JetpackPluginStates[ keyof typeof JetpackPluginStates ];
|
|
|
|
/**
|
|
* Utility hook to determine and manipulate the state of the Jetpack plugin on the WordPress installation
|
|
*/
|
|
export const useJetpackPluginState = () => {
|
|
const { currentUserCan } = useUser();
|
|
const {
|
|
canUserInstallPlugins,
|
|
jetpackInstallState,
|
|
jetpackConnectionData,
|
|
} = useSelect( ( select ) => {
|
|
const { getPluginInstallState, getJetpackConnectionData } =
|
|
select( PLUGINS_STORE_NAME );
|
|
const installState = getPluginInstallState( 'jetpack' );
|
|
|
|
return {
|
|
jetpackConnectionData: getJetpackConnectionData(),
|
|
jetpackInstallState: installState,
|
|
canUserInstallPlugins: currentUserCan( 'install_plugins' ),
|
|
};
|
|
} );
|
|
|
|
const { installJetpackAndConnect } = useDispatch( PLUGINS_STORE_NAME );
|
|
|
|
const [ pluginState, setPluginState ] = useState< JetpackPluginStates >(
|
|
JetpackPluginStates.INITIALIZING
|
|
);
|
|
|
|
/**
|
|
* Installs, Activates, and Connects Jetpack - starting wherever hasn't been completed
|
|
*/
|
|
const onClickInstall = useCallback( () => {
|
|
const thisUrl = window.location.href;
|
|
installJetpackAndConnect(
|
|
createErrorNotice,
|
|
() => thisUrl + '&jetpackState=returning'
|
|
);
|
|
setPluginState( JetpackPluginStates.INSTALLING );
|
|
}, [ installJetpackAndConnect ] );
|
|
|
|
useEffect( () => {
|
|
if ( ! canUserInstallPlugins ) {
|
|
setPluginState( JetpackPluginStates.USER_CANNOT_INSTALL );
|
|
} else {
|
|
switch ( jetpackInstallState ) {
|
|
case 'installed':
|
|
setPluginState( JetpackPluginStates.NOT_ACTIVATED );
|
|
break;
|
|
case 'unavailable':
|
|
setPluginState( JetpackPluginStates.NOT_INSTALLED );
|
|
break;
|
|
case 'activated':
|
|
if (
|
|
// Jetpack can be installed and activated but not connected to a WordPress.com user account, this handles that
|
|
jetpackConnectionData &&
|
|
! jetpackConnectionData?.connectionOwner
|
|
) {
|
|
setPluginState(
|
|
JetpackPluginStates.USERLESS_CONNECTION
|
|
);
|
|
} else if (
|
|
jetpackConnectionData &&
|
|
! jetpackConnectionData?.currentUser?.isMaster
|
|
) {
|
|
setPluginState(
|
|
JetpackPluginStates.NOT_OWNER_OF_CONNECTION
|
|
);
|
|
} else if (
|
|
jetpackConnectionData &&
|
|
jetpackConnectionData?.currentUser?.isConnected &&
|
|
jetpackConnectionData?.currentUser?.isMaster
|
|
) {
|
|
setPluginState( JetpackPluginStates.FULL_CONNECTION );
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}, [ canUserInstallPlugins, jetpackInstallState, jetpackConnectionData ] );
|
|
|
|
return {
|
|
state: pluginState,
|
|
installHandler: onClickInstall,
|
|
jetpackConnectionData,
|
|
};
|
|
};
|