Manage Pledge: Enable pledge admins to edit contributors from manage form

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

@@ -1,6 +1,12 @@
 /* global ajaxurl, FiveForTheFuture, fftfContributors, jQuery */
 /* eslint no-alert: "off" */
 jQuery( document ).ready( function( $ ) {
+	let ajaxurl = window.ajaxurl;
+	// Set the ajax url if the global is undefined.
+	if ( 'undefined' === typeof ajaxurl ) {
+		ajaxurl = FiveForTheFuture.ajaxurl;
+	}
+
 	/**
 	 * Render the contributor lists using the contributors template into the pledge-contributors container. This
 	 * uses `_renderContributors` to render a list of contributors per status (published, pending).
@@ -68,6 +74,7 @@ jQuery( document ).ready( function( $ ) {
 				action: 'manage-contributors',
 				pledge_id: FiveForTheFuture.pledgeId,
 				_ajax_nonce: FiveForTheFuture.manageNonce,
+				_token: FiveForTheFuture.authToken,
 			}, data ),
 			success: callback,
 			dataType: 'json',
@@ -83,17 +90,19 @@ jQuery( document ).ready( function( $ ) {
 			return;
 		}
 
+		// Clear the error message field.
+		$( '#add-contrib-message' ).html( '' );
+
 		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' )
 					.append( $( '<p>' ).text( response.message ) );
 
-				$( '#add-contrib-message' ).replaceWith( $message );
+				$( '#add-contrib-message' ).html( $message );
 			} else if ( response.contributors ) {
 				render( response.contributors, container );
 				$( '#5ftf-pledge-contributors' ).val( '' );

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

@@ -8,7 +8,8 @@ namespace WordPressDotOrg\FiveForTheFuture\Endpoints;
 use WordPressDotOrg\FiveForTheFuture\{ Auth, Contributor, Email };
 use const WordPressDotOrg\FiveForTheFuture\PledgeMeta\META_PREFIX;
 
-add_action( 'wp_ajax_manage-contributors', __NAMESPACE__ . '\manage_contributors_handler' );
+add_action( 'wp_ajax_manage-contributors',        __NAMESPACE__ . '\manage_contributors_handler' );
+add_action( 'wp_ajax_nopriv_manage-contributors', __NAMESPACE__ . '\manage_contributors_handler' );
 
 add_action( 'wp_ajax_send-manage-email',        __NAMESPACE__ . '\send_manage_email_handler' );
 add_action( 'wp_ajax_nopriv_send-manage-email', __NAMESPACE__ . '\send_manage_email_handler' );

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

@@ -175,8 +175,6 @@ function render_form_manage() {
 		return ob_get_clean();
 	}
 
-	$contributors = Contributor\get_pledge_contributors( $pledge_id, $status = 'all' );
-
 	if ( 'Update Pledge' === $action ) {
 		$results = process_form_manage( $pledge_id, $auth_token );
 
@@ -187,7 +185,8 @@ function render_form_manage() {
 		}
 	}
 
-	$data = PledgeMeta\get_pledge_meta( $pledge_id );
+	$data         = PledgeMeta\get_pledge_meta( $pledge_id );
+	$contributors = Contributor\get_pledge_contributors_data( $pledge_id );
 
 	ob_start();
 	$readonly = false;

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

@@ -18,6 +18,7 @@ add_action( 'init',                   __NAMESPACE__ . '\schedule_cron_jobs' );
 add_action( 'admin_init',             __NAMESPACE__ . '\add_meta_boxes' );
 add_action( 'save_post',              __NAMESPACE__ . '\save_pledge', 10, 2 );
 add_action( 'admin_enqueue_scripts',  __NAMESPACE__ . '\enqueue_assets' );
+add_action( 'wp_enqueue_scripts',     __NAMESPACE__ . '\enqueue_assets' );
 add_action( 'transition_post_status', __NAMESPACE__ . '\maybe_update_single_cached_pledge_data', 10, 3 );
 add_action( 'update_all_cached_pledge_data', __NAMESPACE__. '\update_all_cached_pledge_data' );
 
@@ -503,9 +504,14 @@ function enqueue_assets() {
 	$ver = filemtime( FiveForTheFuture\PATH . '/assets/js/admin.js' );
 	wp_register_script( '5ftf-admin', plugins_url( 'assets/js/admin.js', __DIR__ ), [ 'jquery', 'wp-util' ], $ver );
 
+	$pledge_id   = is_admin() ? get_the_ID() : absint( $_REQUEST['pledge_id'] ?? 0 );
+	$auth_token  = sanitize_text_field( $_REQUEST['auth_token'] ?? '' );
 	$script_data = [
-		'pledgeId'    => get_the_ID(),
+		// The global ajaxurl is not set on the frontend.
+		'ajaxurl'     => admin_url( 'admin-ajax.php', 'relative' ),
+		'pledgeId'    => $pledge_id,
 		'manageNonce' => wp_create_nonce( 'manage-contributors' ),
+		'authToken'   => $auth_token,
 	];
 	wp_add_inline_script(
 		'5ftf-admin',
@@ -516,9 +522,16 @@ function enqueue_assets() {
 		'before'
 	);
 
-	$current_page = get_current_screen();
-	if ( Pledge\CPT_ID === $current_page->id ) {
-		wp_enqueue_style( '5ftf-admin' );
-		wp_enqueue_script( '5ftf-admin' );
+	if ( is_admin() ) {
+		$current_page = get_current_screen();
+		if ( Pledge\CPT_ID === $current_page->id ) {
+			wp_enqueue_style( '5ftf-admin' );
+			wp_enqueue_script( '5ftf-admin' );
+		}
+	} else {
+		global $post;
+		if ( $post instanceof WP_Post && has_shortcode( $post->post_content, '5ftf_pledge_form_manage' ) ) {
+			wp_enqueue_script( '5ftf-admin' );
+		}
 	}
 }

plugins/wporg-5ftf/views/form-pledge-manage.php

@@ -33,6 +33,11 @@ require __DIR__ . '/partial-result-messages.php';
 				value="<?php esc_attr_e( 'Update Pledge', 'wporg-5ftf' ); ?>"
 			/>
 		</div>
+
+		<h2><?php esc_html_e( 'Contributors', 'wporg-5ftf' ); ?></h2>
+
+		<?php require get_views_path() . 'manage-contributors.php'; ?>
+
 	</form>
 
 <?php endif; ?>

themes/wporg-5ftf/css/objects/_pledge-form.scss

@@ -55,10 +55,34 @@
 		}
 	}
 	
-	input[type="submit"] {
+	input[type="submit"],
+	.button-primary {
 		display: inline-block;
 		height: auto;
 		padding: ms(-3) ms(0);
 		font-weight: 600;
 	}
+
+	.contributor-list {
+		margin-bottom: 1.5rem;
+
+		th,
+		td,
+		th *,
+		td * {
+			vertical-align: middle;
+		}
+		
+		.avatar {
+			margin-right: 8px;
+		}
+
+		.button-link-delete {
+			text-decoration: none;
+
+			.dashicons {
+				margin-top: -2px;
+			}
+		}
+	}
 }