Adding message feature to offer section in request page

cotasson · February 4, 2025, 3:40pm

Hello,

I am trying to address a problem/missing feature that has been already raised here by @kikomigo, that is , to allow customer to contact vendor from the request page (in the offer section), by adding the blue icon here below :

For this, I’ve overriden the \hivepress-requests\templates\offer\view\offer-bidder.php template (now in /myawesome-custom-plugin/hivepress/offer/view) and added some custom code :

<div id="message_send_modal_1231" class="hp-modal" data-component="modal" style="display: none;">
   <h3 class="hp-modal__title">Envoyer un message</h3>
<?php echo ( new HivePress\Blocks\Message_Send_Form( ['values' => ['recipient' => $vendor->get_id()] ] ) )->render();?>   
</div>
<!-- blue icon below :  -->
<a href="#message_send_modal_1231" title="" class="hp-vendor__action hp-vendor__action--message" aria-describedby="ui-id-1"><i class="hp-icon fas fa-comment"></i></a>
<?php
echo '[debug] vendor id : ' . $vendor->get_id();

For the moment ‘1231’ is hardcoded in various html attributes, but it would be easy to replace id by $vendor->get_id(); which returns the current vendor_id; (as seen in the screenshot above).

So the pop-up opens, but I have a json error message when I submit (so the message is never written in database) :
POST https://myawesomewebsite.fr/wp-json/hivepress/v1/messages/ 400 (Bad Request)

Here the HTML generated for the given form :

<form data-model="message" data-message="Votre message a été envoyé." action="#" data-action="https://lancelo.fr/wp-json/hivepress/v1/messages/" method="POST" data-component="form" class="hp-form hp-form--message-send" data-gtm-form-interact-id="0">
   <div class="hp-form__messages" data-component="messages" style="display: none;"></div>
   <div class="hp-form__fields">
      <input type="hidden" name="recipient" value="1231" data-component="number" class="hp-field hp-field--hidden"><input type="hidden" name="listing" value="" data-component="number" class="hp-field hp-field--hidden">
      <div class="hp-form__field hp-form__field--textarea"><label class="hp-field__label hp-form__label"><span>Message</span></label><textarea name="text" maxlength="2048" required="required" class="hp-field hp-field--textarea" data-gtm-form-interact-field-id="0"></textarea></div>
   </div>
   <div class="hp-form__footer"><button type="submit" class="hp-form__button button-primary alt button hp-field hp-field--submit" style="box-shadow: rgba(255, 193, 7, 0.35) 0px 5px 21px;" data-state=""><span>Envoyer un message</span></button></div>
</form>

At times, I have the following error message (but not so often) :

which translates as ‘recipient field is required’, but the value seems to be passed along :
<input type="hidden" name="recipient" value="1231" data-component="number" class="hp-field hp-field--hidden">

How to address the problem ?

Thank you for your consideration.

cotasson · February 5, 2025, 9:32am

OK. Found a way. Even two, that I share with the community.
When the door is locked, you sometimes have to jump through the window.

It’s maybe not that “academic”, but it works. Looks like good old spaghetti code, but, for some reasons, new HivePress\Blocks\Message_Send_Form( ['values' => ['recipient' => $vendor->get_id()] ] ) )->render();. Even when I realised I needed to pass the user_id and not the vendor_id as parameter. Go figure…

Here’s the updated code for the file above (to put in your child theme folder, as mentioned above) :

<?php
//offer-bidder.php 
// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;
?>
<h5 class="hp-offer__bidder">
	<a href="<?php echo esc_url( hivepress()->router->get_url( 'vendor_view_page', [ 'vendor_id' => $vendor->get_id() ] ) ); ?>">
		<?php echo esc_html( $offer->get_bidder__display_name() ); ?>
	</a>
</h5>

<?php 
//don't display when current bidder is viewing the offer page 
if (get_current_user_id() !== $offer->get_bidder__id()){
//get user_id from vendor_id; 
$user_id = $offer->get_bidder__id(); //get_post_field( 'post_author', $vendor->get_id()); 	
//echo 'bidder id : ' . $offer->get_bidder__id(); 
?>
	<div id="message_send_modal_<?php echo $user_id;?>" class="hp-modal" data-component="modal" style="display: none;">
	   <h3 class="hp-modal__title">Envoyer un message</h3>
	<form data-model="message" data-message="Votre message a été envoyé." action="#" data-action="https://lancelo.fr/wp-json/hivepress/v1/messages/" method="POST" data-component="form" class="hp-form hp-form--message-send">
	   <div class="hp-form__messages" data-component="messages"></div>
	   <div class="hp-form__fields">
		  <input type="hidden" name="recipient" value="<?php echo $user_id;?>" data-component="number" class="hp-field hp-field--hidden"><input type="hidden" name="listing" value="" data-component="number" class="hp-field hp-field--hidden">
		  <div class="hp-form__field hp-form__field--textarea"><label class="hp-field__label hp-form__label"><span>Message</span></label><textarea name="text" maxlength="2048" required="required" class="hp-field hp-field--textarea"></textarea></div>
	   </div>
	   <div class="hp-form__footer"><button type="submit" class="hp-form__button button-primary alt button hp-field hp-field--submit" style="box-shadow: rgba(255, 193, 7, 0.35) 0px 5px 21px;"><span>Envoyer un message</span></button></div>
	</form>
	</div>

	<a href="#message_send_modal_<?php echo $user_id;?>" title="envoyer un message" class="hp-vendor__action hp-vendor__action--message" aria-describedby="ui-id-1"><i class="hp-icon fas fa-comment"></i></a>
<?php
}//end if

2d solution :
Now let’s get a little further. What if you want to add the blue message icon next to the “Accept offer” button.

There is no possible override, as the file does not exist in ‘templates’.

We have to add it via a filter :

/* ##############
* Add extra msg icon  to offer view block 
*/
add_filter(
	'hivepress/v1/templates/offer_view_block/blocks',
	function( $blocks, $template ) {
		$offer = $template->get_context('offer');
		
		if($offer){
			$blocks = hivepress()->helper->merge_trees(
					[ 'blocks' => $blocks ],
					[
						'blocks' => [
							'offer_footer' => [
								'blocks' => [
									'offer_actions_primary' => [
										'blocks' => [
											'custom_request_block_description' => [
												'type'    => 'content',
												'content' => 'Hello HivePressers !',
												'_order'  => 1,
											],
										],
									],
								],
							],
						],
				]
				)['blocks'];
				
		}
		
		return $blocks;
	},
	1000,
	2
);

Outcome :

All we need now, is to replace the static text by some dynamic HTML, passing over the offer context (IDs) :

Let’s replace

'content' => 'Hello HivePressers !',

by

'content' => show_msg_icon_for_offer($offer)

And define the show_msg_icon_for_offer() function :

function show_msg_icon_for_offer($offer){
	
	if (get_current_user_id() !== $offer->get_bidder__id()){
	//get user_id from vendor_id; 
	$user_id = $offer->get_bidder__id(); //get_post_field( 'post_author', $vendor->get_id()); 	

		return '<div id="message_send_modal_' . $user_id . '" class="hp-modal" data-component="modal" style="display: none;">
		   <h3 class="hp-modal__title">Envoyer un message</h3>
		<form data-model="message" data-message="Votre message a été envoyé." action="#" data-action="https://lancelo.fr/wp-json/hivepress/v1/messages/" method="POST" data-component="form" class="hp-form hp-form--message-send">
		   <div class="hp-form__messages" data-component="messages"></div>
		   <div class="hp-form__fields">
			  <input type="hidden" name="recipient" value="' . $user_id . '" data-component="number" class="hp-field hp-field--hidden"><input type="hidden" name="listing" value="" data-component="number" class="hp-field hp-field--hidden">
			  <div class="hp-form__field hp-form__field--textarea"><label class="hp-field__label hp-form__label"><span>Message</span></label><textarea name="text" maxlength="2048" required="required" class="hp-field hp-field--textarea"></textarea></div>
		   </div>
		   <div class="hp-form__footer"><button type="submit" class="hp-form__button button-primary alt button hp-field hp-field--submit" style="box-shadow: rgba(255, 193, 7, 0.35) 0px 5px 21px;"><span>Envoyer un message</span></button></div>
		</form>
		</div>

		<a href="#message_send_modal_' . $user_id . '" title="envoyer un message" class="hp-vendor__action hp-vendor__action--message" aria-describedby="ui-id-1"><i class="hp-icon fas fa-comment"></i></a> &nbsp; &nbsp; &nbsp; '; 
	}	
}

Output :

Still struggling, and learning the ropes, but may apply soon to become a HivePress expert.

Any code revision and improvement welcome.

ihor · February 5, 2025, 3:58pm

Thanks for sharing! Yes, adding the message link and modal HTML with dynamic parameters like the recipient ID should work fine.

cotasson · February 5, 2025, 4:14pm

But the solution you provided here does not :
new HivePress\Blocks\Message_Send_Form( ['values' => ['recipient' => $vendor->get_id()] ] ) )->render();

At least for me, even if you replace the $vendor->get_id() by its underlying user_id.

It’s a pity, because it was more elegant, hence this spaghetti code workaround.

ihor · February 6, 2025, 4:09pm

You can try using this one instead, it uses the form directly and may require setting all the other values usually pre-filled automatically, though:

echo ( new \HivePress\Forms\Message_Send( [ 'values' => [ 'recipient' => 123 ] ] ) )->render();