woocommerce/plugins/woocommerce-admin/client/homescreen/mobile-app-modal/components/useJetpackPluginState.tsx

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,
};
};