Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 | 6x 57x 57x 57x 57x 57x 57x 30x 30x 57x 57x 57x 5x 5x 5x 5x 3x 3x 2x 2x 1x 2x 2x 57x 8x 49x 49x | /**
* External dependencies
*/
import jetpackAnalytics from '@automattic/jetpack-analytics';
import restApi from '@automattic/jetpack-api';
import { Modal } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { useCallback, useState } from 'react';
/**
* Internal dependencies
*/
import useRestApiInit from '../../hooks/use-rest-api-init';
import { STORE_ID } from '../../state/store';
import OwnerDisconnectDialog from '../owner-disconnect-dialog';
import DisconnectActionFooter from '../shared/disconnect-action-footer';
type StoreSelector = ( storeId: string ) => Record< string, ( ...args: unknown[] ) => unknown >;
interface CurrentUserConnectionData {
/** Whether the user is the connection owner. */
isMaster?: boolean;
/** The user's capabilities. */
permissions?: {
manage_options?: boolean;
};
}
export interface DisconnectUserDialogProps {
/** Whether the dialog is open. */
isOpen?: boolean;
/** Callback for when the dialog is dismissed without disconnecting. */
onClose: () => void;
/** API root URL. */
apiRoot: string;
/** API nonce. */
apiNonce: string;
/** Callback after the owner's disconnection takes the whole connection with it. */
onDisconnected?: () => void;
/** Callback after the user is unlinked. The host decides what closes and what reloads. */
onUnlinked?: () => void;
/** Opens the ownership transfer flow, offered to an owner. Omit to hide that action. */
onTransferOwnership?: () => void;
/** The context in which this component is being used. */
context?: string;
}
/**
* Confirmation dialog for disconnecting your own WordPress.com user account.
*
* Owns the owner/non-owner decision so no host repeats it: the owner gets the cascade
* warning and a way out through transfer, everyone else a plain confirm.
*
* @param {DisconnectUserDialogProps} props - Component props.
* @return {import('react').ReactNode} The DisconnectUserDialog component.
*/
const DisconnectUserDialog = ( {
isOpen,
onClose,
apiRoot,
apiNonce,
onDisconnected,
onUnlinked,
onTransferOwnership,
context = 'jetpack-dashboard',
}: DisconnectUserDialogProps ) => {
const [ isDisconnecting, setIsDisconnecting ] = useState( false );
const [ disconnectError, setDisconnectError ] = useState( '' );
const disconnectingText = __( 'Disconnecting…', 'jetpack-connection-js' );
const disconnectText = __( 'Disconnect', 'jetpack-connection-js' );
useRestApiInit( apiRoot, apiNonce );
const currentUser = useSelect( ( select: StoreSelector ) => {
const data = select( STORE_ID ).getUserConnectionData() as
{ currentUser?: CurrentUserConnectionData } | false;
return data ? data.currentUser || {} : {};
}, [] );
const isAdmin = !! currentUser.permissions?.manage_options;
const isOwner = !! currentUser.isMaster;
const handleDisconnect = useCallback( () => {
jetpackAnalytics.tracks.recordEvent( 'jetpack_manage_connection_dialog_disconnect_user_click', {
context,
} );
setIsDisconnecting( true );
setDisconnectError( '' );
restApi
// Passing true to unlink will force the user disconnection.
// This is needed for an admin to disconnect themselves.
.unlinkUser( isAdmin )
.then( () => {
setIsDisconnecting( false );
onUnlinked?.();
} )
.catch( () => {
let errorMessage: string = __(
'There was some trouble disconnecting your user account, your Jetpack plugin(s) may be outdated. Please visit your plugins page and make sure all Jetpack plugins are updated.',
'jetpack-connection-js'
);
if ( ! isAdmin ) {
errorMessage = __(
'There was some trouble disconnecting your user account, your Jetpack plugin(s) may be outdated. Please ask a site admin to update Jetpack',
'jetpack-connection-js'
);
}
setDisconnectError( errorMessage );
setIsDisconnecting( false );
} );
}, [ context, isAdmin, onUnlinked ] );
if ( isOwner ) {
return (
<OwnerDisconnectDialog
isOpen={ isOpen }
onClose={ onClose }
apiRoot={ apiRoot }
apiNonce={ apiNonce }
onDisconnected={ onDisconnected }
onUnlinked={ onUnlinked }
onTransferOwnership={ onTransferOwnership }
/>
);
}
const heading = __( 'Disconnect your user account', 'jetpack-connection-js' );
return (
isOpen && (
<Modal
title=""
contentLabel={ heading }
aria={ {
labelledby: 'jp-connection__disconnect-user-dialog__heading',
} }
onRequestClose={ onClose }
className="jp-connection__disconnect-dialog"
>
<div className="jp-connection__disconnect-dialog__content">
<h1 id="jp-connection__disconnect-user-dialog__heading">{ heading }</h1>
<p className="jp-connection__disconnect-dialog__large-text">
{ __(
'Are you sure you want to disconnect your WordPress.com account?',
'jetpack-connection-js'
) }
</p>
</div>
<DisconnectActionFooter
stayLabel={ __( 'Cancel', 'jetpack-connection-js' ) }
stayDisabled={ isDisconnecting }
onStay={ onClose }
disconnectLabel={ isDisconnecting ? disconnectingText : disconnectText }
disconnectDisabled={ isDisconnecting }
onDisconnect={ handleDisconnect }
error={ disconnectError }
/>
</Modal>
)
);
};
export default DisconnectUserDialog;
|