Enable "add contributors" functionality

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

@@ -66,6 +66,7 @@ jQuery( document ).ready( function( $ ) {
 			url: ajaxurl,
 			data: Object.assign( {
 				action: 'manage_contributors',
+				pledge_id: FiveForTheFuture.pledgeId,
 				_ajax_nonce: FiveForTheFuture.manageNonce,
 			}, data ),
 			success: callback,
@@ -73,6 +74,33 @@ jQuery( document ).ready( function( $ ) {
 		} );
 	}
 
+	/**
+	 * Send off the AJAX request with contributors pulled from the contributor text field.
+	 */
+	function _addContributors() {
+		const contribs = $( '#5ftf-pledge-contributors' ).val();
+		if ( ! contribs.length ) {
+			return;
+		}
+
+		sendAjaxRequest( {
+			contributors: contribs,
+			manage_action: 'add-contributor',
+		}, function( response ) {
+			if ( ! response.success ) {
+				const $message = $( '<div>' )
+					.attr( 'id', 'add-contrib-message' )
+					.addClass( 'notice notice-error notice-alt' )
+					.html( '<p>' + response.message + '</p>' );
+
+				$( '#add-contrib-message' ).replaceWith( $message );
+			} else if ( response.contributors ) {
+				render( response.contributors, container );
+				$( '#5ftf-pledge-contributors' ).val( '' );
+			}
+		} );
+	}
+
 	// Initialize.
 	const container = document.getElementById( '5ftf-contributors' );
 	render( fftfContributors, container );
@@ -86,7 +114,6 @@ jQuery( document ).ready( function( $ ) {
 			const data = event.currentTarget.dataset;
 
 			sendAjaxRequest( {
-				pledge_id: data.pledgePost || 0,
 				contributor_id: data.contributorPost || 0,
 				manage_action: data.action || '',
 			} );
@@ -99,9 +126,22 @@ jQuery( document ).ready( function( $ ) {
 		const data = event.currentTarget.dataset;
 
 		sendAjaxRequest( {
-			pledge_id: data.pledgePost || 0,
 			contributor_id: data.contributorPost || 0,
 			manage_action: data.action || '',
 		} );
 	} );
+
+	// Add Contributor button action.
+	$( container ).on( 'click', '[data-action="add-contributor"]', function( event ) {
+		event.preventDefault();
+		_addContributors();
+	} );
+
+	// Prevent "enter" in the contributor field from submitting the whole post form.
+	$( container ).on( 'keydown', '#5ftf-pledge-contributors', function( event ) {
+		if ( 13 === event.which ) {
+			event.preventDefault();
+			_addContributors();
+		}
+	} );
 } );

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

@@ -37,6 +37,25 @@ function handler() {
 				'contributors' => Contributor\get_pledge_contributors_data( $pledge_id ),
 			] ) );
 			break;
+
+		case 'add-contributor':
+			$new_contributors = PledgeForm\parse_contributors( $_POST['contributors'] );
+			if ( is_wp_error( $new_contributors ) ) {
+				wp_die( wp_json_encode( [
+					'success' => false,
+					'message' => $new_contributors->get_error_message(),
+				] ) );
+			}
+			Contributor\add_pledge_contributors( $pledge_id, $new_contributors );
+
+			// Fetch all contributors, now that the new ones have been added.
+			$contributors = Contributor\get_pledge_contributors_data( $pledge_id );
+
+			wp_die( wp_json_encode( [
+				'success' => true,
+				'contributors' => $contributors,
+			] ) );
+			break;
 	}
 
 	// No matching action, we can just exit.

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

@@ -483,6 +483,7 @@ function enqueue_assets() {
 	wp_register_script( '5ftf-admin', plugins_url( 'assets/js/admin.js', __DIR__ ), [ 'jquery' ], $ver );
 
 	$script_data = [
+		'pledgeId'    => get_the_ID(),
 		'manageNonce' => wp_create_nonce( 'manage-pledge' ),
 	];
 	wp_add_inline_script(

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

@@ -24,7 +24,6 @@ use function WordPressDotOrg\FiveForTheFuture\get_views_path;
 		<button
 			class="button-link button-link-delete"
 			data-action="remove-contributor"
-			data-pledge-post="{{ data.pledgeId }}"
 			data-contributor-post="{{ data.contributorId }}"
 			data-confirm="{{ data.removeConfirm }}"
 			aria-label="{{ data.removeLabel }}"
@@ -39,7 +38,6 @@ use function WordPressDotOrg\FiveForTheFuture\get_views_path;
 			<button
 				class="button"
 				data-action="resend-contributor-confirmation"
-				data-pledge-post="{{ data.pledgeId }}"
 				data-contributor-post="{{ data.contributorId }}"
 			>
 				{{ data.resendLabel }}
@@ -74,8 +72,7 @@ use function WordPressDotOrg\FiveForTheFuture\get_views_path;
 	<button
 		class="button-primary"
 		data-action="add-contributor"
-		data-pledge-post="<?php the_ID(); ?>"
 	>
-		<?php esc_html_e( 'Add new contributor', 'wporg' ); ?>
+		<?php esc_html_e( 'Add new contributors', 'wporg' ); ?>
 	</button>
 </div>