How to use Ajax_handler inside Elementor Form Action

[feperrella]

I'm creating a plugin the enable like the redirect action, another one that opens a new window.

However I'm unable to enqueue script to the action, nor call the Ajax_handler properly...
Could anyone help me out?

Example PHP

<?php
/**
 * Class Whatsapp_Action_After_Submit
 *
 * @package Integrate_Elementor_Form_with_Whatsapp/Includes/Whatsapp_Action_After_Submit
 * @since   1.0.0
 * @see     https://developers.elementor.com/custom-form-action/
 *
 * Custom elementor form action after submit to add a subsciber to
 * Whatsapp lists via API
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

class Whatsapp_Action_After_Submit extends \ElementorPro\Modules\Forms\Classes\Action_Base {

	/**
	 * Get Scripts for the Action
	 *
	 * @param array $data
	 * @param [type] $args
	 */
	public function __construct( $data = [], $args = null ) {
		wp_register_script( 'whatsapp-clicktochat', PLUGIN_PATH . 'js/whatsapp-clicktochat.js', [ 'jquery', 'elementor-frontend' ], '0.0.1', true );
	}

	public function get_script_depends() {
		return [ 'whatsapp-clicktochat' ];
	}

	/**
	 * Get Name
	 *
	 * Return the action name
	 *
	 * @access public
	 * @return string
	 */
	public function get_name() {
		return 'whatsapp';
	}

	/**
	 * Get Label
	 *
	 * Returns the action label
	 *
	 * @access public
	 * @return string
	 */
	public function get_label() {
		return __( 'Whatsapp', 'integrate-elementor-whatsapp' );
	}

	/**
	 * Register Settings Section
	 *
	 * Registers the Action controls
	 *
	 * @access public
	 * @param \Elementor\Widget_Base $widget
	 */
	public function register_settings_section( $widget ) {
		$widget->start_controls_section(
			'whatsapp_section',
			[
				'label'     => __( 'Whatsapp', 'integrate-elementor-whatsapp' ),
				'condition' => [
					'submit_actions' => $this->get_name(),
				],
			]
		);

		$widget->add_control(
			'whatsapp_number',
			[
				'label'       => __( 'Phone Number', 'integrate-elementor-whatsapp' ),
				'type'        => \Elementor\Controls_Manager::TEXT,
				'default'     => __( '9999999999999', 'integrate-elementor-whatsapp' ),
				'description' => __( 'WhatsApp <b>Phone</b> must be only numbers in international format, for example, +55 (11) 4321-1234 should be typed 551143211234.', 'integrate-elementor-whatsapp' ),
				'placeholder' => __( 'Type only numbers', 'integrate-elementor-whatsapp' ),
			]
		);

		$widget->add_control(
			'whatsapp_fields',
			[
				'label'       => __( 'Message', 'integrate-elementor-whatsapp' ),
				'type'        => \Elementor\Controls_Manager::TEXTAREA,
				'rows'        => 10,
				'default'     => __( '[all-fields]', 'integrate-elementor-whatsapp' ),
				'placeholder' => __( '[all-fields]', 'integrate-elementor-whatsapp' ),
				'description' => __( 'By default all fields are sent with [all-fields] and displayed in the order they appear in the form, however you can customize pasting the desired shortcodes in this field.', 'integrate-elementor-whatsapp' ),
				'render_type' => 'none',
			]
		);

		$widget->end_controls_section();
	}

	/**
	 * Run
	 *
	 * Runs the action after submit
	 *
	 * @access public
	 * @param \ElementorPro\Modules\Forms\Classes\Form_Record $record
	 * @param \ElementorPro\Modules\Forms\Classes\Ajax_Handler $ajax_handler
	 */
	public function run( $record, $ajax_handler ) {
		$settings    = $record->get( 'form_settings' );
		$line_break  = "\n";
		$phonenumber = $settings['whatsapp_number'];
		$content     = $this->replace_content_shortcodes( $settings['whatsapp_fields'], $record, $line_break );
		$clicktochat = 'https://wa.me/' . $phonenumber . '?text=' . rawurlencode( $content );
		$ajax_handler->add_response_data( 'form_name', $form_name );
	}

	/**
	 * On Export
	 *
	 * Clears form settings on export
	 * @access Public
	 * @param array $element
	 */
	public function on_export( $element ) {
		unset(
			$element['whatsapp_number'],
			$element['whatsapp_fields']
		);
	}
}

Example JS

/**
 * @class WhatsappClicktochatHandler
 */
class WhatsappClicktochatHandler extends elementorModules.frontend.handlers.Base {

	getDefaultSettings() {
    return {
      selectors: {
				form: '.elementor-form',
				button: '.elementor-button',
      },
    };
	}

	getDefaultElements() {
    const selectors = this.getSettings( 'selectors' );
        
    return {
			$form: this.$element.find( selectors.form ),
			$button: this.$element.find( selectors.button ),
    };
  }
	
	bindEvents() {
		this.elements.$form.on( 'submit_success', () => this.onSentSuccess() );
		this.elements.$button.on( 'click', console.log('clicked') );
	}
	
	onSentSuccess( response ) {
		console.log( response );
		console.log( response.data );
		console.log( response.data.clicktochat );
		//window.open( clicktochat );
	}
}

jQuery( window ).on( 'elementor/frontend/init', () => {
 const addHandler = ( $element ) => {
		 elementorFrontend.elementsHandler.addHandler( WhatsappClicktochatHandler, {
				 $element,
		 } );
 };

 elementorFrontend.hooks.addAction( 'frontend/element_ready/whatsapp-clicktochat.default', addHandler );
} );