Hook up "Remove" button

plugins/wporg-5ftf/assets/js/admin.js

@@ -1,25 +1,54 @@
-/* global ajaxurl, FiveForTheFuture_ManageNonce, jQuery */
+/* global ajaxurl, FiveForTheFuture, jQuery */
 /* eslint no-alert: "off" */
 jQuery( document ).ready( function( $ ) {
 	function sendAjaxRequest( data, callback ) {
 		$.ajax( {
 			type: 'POST',
 			url: ajaxurl,
-			data: {
+			data: Object.assign( {
 				action: 'manage_contributors',
-				pledge_id: data.pledgePost || 0,
+				_ajax_nonce: FiveForTheFuture.manageNonce,
-				contributor_id: data.contributorPost || 0,
+			}, data ),
-				manage_action: data.action || '',
-				_ajax_nonce: FiveForTheFuture_ManageNonce,
-			},
 			success: callback,
 			dataType: 'json',
 		} );
 	}
 
-	$( '.contributor-list [data-action="resend-contributor-confirmation"]' ).click( function( event ) {
+	const container = document.getElementById( '5ftf-contributors' );
+
+	// Remove Contributor button action.
+	$( container ).on( 'click', '[data-action="remove-contributor"]', function( event ) {
 		event.preventDefault();
-		sendAjaxRequest( event.currentTarget.dataset, function( response ) {
+
+		const confirmMsg = event.currentTarget.dataset.confirm;
+		if ( confirmMsg && confirm( confirmMsg ) ) {
+			const data = event.currentTarget.dataset;
+
+			sendAjaxRequest( {
+				pledge_id: data.pledgePost || 0,
+				contributor_id: data.contributorPost || 0,
+				manage_action: data.action || '',
+			}, function( response ) {
+				if ( response.message ) {
+					alert( response.message );
+				}
+				if ( response.success ) {
+					$( event.currentTarget ).closest( 'li' ).remove();
+				}
+			} );
+		}
+	} );
+
+	// Resend Contributor Confirmation button action.
+	$( container ).on( 'click', '[data-action="resend-contributor-confirmation"]', function( event ) {
+		event.preventDefault();
+		const data = event.currentTarget.dataset;
+
+		sendAjaxRequest( {
+			pledge_id: data.pledgePost || 0,
+			contributor_id: data.contributorPost || 0,
+			manage_action: data.action || '',
+		}, function( response ) {
 			if ( response.message ) {
 				alert( response.message );
 			}

plugins/wporg-5ftf/includes/endpoints.php

@@ -28,6 +28,14 @@ function handler() {
 				'message' => sprintf( __( 'Confirmation email sent to %s.', 'wporg-5ftf' ), $contribution->post_title ),
 			] ) );
 			break;
+
+		case 'remove-contributor':
+			// Trash contributor.
+			Contributor\remove_contributor( $contributor_id );
+			wp_die( wp_json_encode( [
+				'success' => true,
+			] ) );
+			break;
 	}
 
 	// No matching action, we can just exit.

plugins/wporg-5ftf/includes/pledge-meta.php

@@ -480,7 +480,18 @@ function enqueue_assets() {
 
 	$ver = filemtime( FiveForTheFuture\PATH . '/assets/js/admin.js' );
 	wp_register_script( '5ftf-admin', plugins_url( 'assets/js/admin.js', __DIR__ ), [ 'jquery' ], $ver );
-	wp_localize_script( '5ftf-admin', 'FiveForTheFuture_ManageNonce', wp_create_nonce( 'manage-pledge' ) );
+
+	$script_data = [
+		'manageNonce' => wp_create_nonce( 'manage-pledge' ),
+	];
+	wp_add_inline_script(
+		'5ftf-admin',
+		sprintf(
+			'var FiveForTheFuture = JSON.parse( decodeURIComponent( \'%s\' ) );',
+			rawurlencode( wp_json_encode( $script_data ) )
+		),
+		'before'
+	);
 
 	$current_page = get_current_screen();
 	if ( Pledge\CPT_ID === $current_page->id ) {

plugins/wporg-5ftf/views/manage-contributors.php

@@ -6,7 +6,7 @@ namespace WordPressDotOrg\FiveForTheFuture\View;
 /** @var bool  $readonly */
 ?>
 
-<div class="5ftf-contributors">
+<div id="5ftf-contributors">
 	<?php if ( ! empty( $contributors ) ) : ?>
 		<?php foreach ( $contributors as $contributor_status => $group ) : ?>
 			<?php if ( ! empty( $group ) ) : ?>