Submit the form through ajax

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

@@ -1,4 +1,4 @@
-/* global ajaxurl, FiveForTheFuture, jQuery */
+/* global FiveForTheFuture, jQuery */
 jQuery( document ).ready( function( $ ) {
 	const button = document.getElementById( 'toggle-management-link-form' );
 	const template = wp.template( '5ftf-send-link-dialog' );
@@ -72,8 +72,35 @@ jQuery( document ).ready( function( $ ) {
 		}, 0);
 	}
 
-	function sendRequest() {
+	function sendRequest( event ) {
-		//
+		event.preventDefault();
+		const email = $( event.target.querySelector('input[type="email"]') ).val();
+		$( event.target.querySelector('.message') ).html( '' );
+		$.ajax( {
+			type: 'POST',
+			url: FiveForTheFuture.ajaxurl,
+			data: {
+				action: 'send-manage-email',
+				pledge_id: FiveForTheFuture.pledgeId,
+				email: email,
+				_ajax_nonce: FiveForTheFuture.ajaxNonce,
+			},
+			success: function( response ) {
+				if ( response.message ) {
+					const $message = $( '<div>' )
+						.addClass( 'notice notice-alt' )
+						.addClass( response.success ? 'notice-success' : 'notice-error' )
+						.append( $( '<p>' ).html( response.message ) );
+
+					$( event.target.querySelector('.message') ).html( $message );
+					
+					if ( response.success ) {
+						$( event.target.querySelector('input[type="submit"]') ).remove();
+					}
+				}
+			},
+			dataType: 'json',
+		} );
 	}
 
 	// Initialize.
@@ -94,7 +121,7 @@ jQuery( document ).ready( function( $ ) {
 		}
 	} );
 
-	$( modal ).on( 'submit', 'form', sendRequest );
+	$( modal.querySelector( 'form' ) ).submit( sendRequest );
 } );
 
 

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

@@ -109,7 +109,7 @@ function send_manage_email_handler() {
 		}
 	} else {
 		$error_message = sprintf(
-			__( 'That\'s not the address that we have for this pledge, please try a different one. If none of the addresses you try are working, please <a href="%s">email us</a> for help.', 'wporg-5ftf' ),
+			__( 'That\'s not the address that we have for this pledge. If you don\'t know the email associated with this pledge, <a href="%s">please contact us for help.</a>', 'wporg-5ftf' ),
 			get_permalink( get_page_by_path( 'report' ) )
 		);
 

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

@@ -273,7 +273,8 @@ function enqueue_assets() {
 		wp_enqueue_script( '5ftf-frontend', plugins_url( 'assets/js/frontend.js', __DIR__ ), [ 'jquery', 'wp-util', 'wicg-inert' ], $ver, true );
 
 		$script_data = [
-			'pledgeId'    => get_the_ID(),
+			'ajaxurl'   => admin_url( 'admin-ajax.php', 'relative' ), // The global ajaxurl is not set on the frontend.
+			'pledgeId'  => get_the_ID(),
 			'ajaxNonce' => wp_create_nonce( 'send-manage-email' ),
 		];
 		wp_add_inline_script(

plugins/wporg-5ftf/views/modal-request-manage-link.php

@@ -30,6 +30,8 @@ defined( 'WPINC' ) || die();
 				value=""
 			/>
 
+			<div class="message" role="alert" aria-atomic="true"></div>
+
 			<input
 				type="submit"
 				name="get_manage_pledge_link"

themes/wporg-5ftf/css/components/_pledge-dialog.scss

@@ -29,10 +29,6 @@
 		border-bottom-color: $color-gray-light-400;
 	}
 
-	p:first-child {
-		margin-top: 0;
-	}
-
 	label {
 		display: inline-block;
 		margin-bottom: 4px;
@@ -54,6 +50,10 @@
 		font-size: ms(-3);
 	}
 
+	.notice p {
+		font-size: 1em;
+	}
+
 	.pledge-dialog__close {
 		position: absolute;
 		top: 0;

themes/wporg-5ftf/css/components/_pledge-single.scss

@@ -51,6 +51,7 @@ body.single.single-5ftf_pledge {
 
 	.entry-footer {
 		margin-top: ms(2);
+		margin-bottom: ms(20);
 		border-top: 1px solid $color-gray-light-500;
 		padding-top: ms(2);