WordPress - Send email from dashboard widget - php

Question

I'm working on a dshboard widget for WordPress. I've successfully added it using add_meta_box function and also tried using wp_add_dashboard_widget and I'm able to see my custom HTML code. I need now to send an email when the submit button is clicked, is this possible?I'm looking to the wordpress codex, but there is no trace of how to manage the widget content, can anyone help me please?
public function setup_ticketing_widget()
{
// Remove Welcome panel.
remove_action( 'welcome_panel', 'wp_welcome_panel' );
// Remove all Dashboard widgets.
global $wp_meta_boxes;
unset( $wp_meta_boxes['dashboard'] );
//
//wp_add_dashboard_widget(
// 'ict-support-ticket',
// __('Richiesta ticket di supporto'),
// [$this, 'ticketing_widget_content'],
//);
// Add custom dashbboard widget.
add_meta_box( 'dashboard_widget_example',
__( 'Richiesta ticket di supporto'),
[$this, 'ticketing_widget_content'],
'dashboard',
'side', // $context: 'advanced', 'normal', 'side', 'column3', 'column4'
'high', // $priority: 'high', 'core', 'default', 'low'
);
}
/*
*
*/
public function ticketing_widget_content()
{
?>
<div id="form-wrappe">
<label id="form-label">Request Type</label>
<select name="support_request_type" id="form-input">
<option value="">-----</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
</div>
<div id="form-wrapper">
<lable id="form-label">Email</label>
<input type="text" name="support_request_from" id="form-input">
</div>
<div id="form-wrapper">
<label id="form-label">Messsage</label>
<textarea name="support_request_message" rows="10" id="form-input"></textarea>
</div>
<div id="form-wrapper">
<button id="submit-button">Invia ticket</button>
</div>
<style>
option {
text-transform: uppercase;
}
#form-label {
display: block;
}
#form-input {
width: 100%;
}
#help-text {
display: block;
font-size: 1em !important;
}
#submit-button {
width: 100%;
text-transform: uppercase;
}
#form-wrapper {
margin-top: 1em;
margin-bottom: 1em;
}
</style>
<?php
}
UPDATE
I've created a rest route that will be called from the code using the following code
public function submit_support_ticket( WP_REST_Request $request )
{
$request_type = sanitize_text_field( $request->get_param('reqType') );
$request_issuer = sanitize_email( $request->get_param('issuerEmail') );
$request_message = sanitize_textarea_field( $request->get_param('reqMessage') );
var_dump( $request_type, $request_issuer, $request_message );
switch( $request_type ){
case '1':
$subject = '... WordPress';
break;
case '2':
$subject = '... WordPress';
break;
case '3':
$subject = '... WordPress';
break;
case '4':
$subject = '...';
break;
}
//wp_mail( $to:string|array, $subject:string, $message:string, $headers:string|array, $attachments:string|array )
$to = 'demo#example.org';
$headers[] = 'From: Ticketing System WordPress <demo#example.org>';
$headers[] = 'Cc: User 1 <demo#example.org>';
$headers[] = 'Cc: User 2 <demo#example.org>';
$headers[] = 'Cc: User 3 <demo#example.org>';
if( wp_mail( $to, $subject, $request_message, $headers ) ){
return [
'status' => 'success',
'message' => 'Email sent'
];
} else {
return [
'status' => 'error',
'message' => 'Email not sent'
];
}
}
In my class construct I've used the rest_api_init hook to register the route and this is the JS script part I've added to the function that is responsable to send the ajax request to the route
<script>
const siteURL = window.location.origin
const requestType = document.getElementById('request-type');
const issuerEmail = document.getElementById('issuer-email');
const requestMessage = document.getElementById('request-message');
const submitButton = document.getElementById('submit-button');
//
submitButton.addEventListener('click', (e) => {
e.preventDefault();
console.log(siteURL, requestType.value, issuerEmail.value, requestMessage.value);
fetch(`${siteURL}/wp-json/support/ticketing/send-request`, {
method: 'POST',
body: JSON.stringify({
reqType: requestType.value,
issuerEmail: issuerEmail.value,
reqMessage: requestMessage.value
})
}).then( (res) => {
console.log(res)
}).catch( e => console.log(e) )
});
</script>
I've noticed that the callback that is responsable to send the email will be not fired. Is there something wrong into the implementation?