Chronicles of a build – the signup plugin 10

140 people in the never sign up plugin is somewhat holding up but still missing some features.
Among its functions is the one that customizes the profile page for some users making it look like an extended subscription form.
Looking like a form people expects it to behave like one and is taken aback by its mute success and lousy failure messages.
Short story long this means that a success confirm dialog is mandatory to reassure users about profile details success.

Going with the hooks

Using the Deubg Bar plugin and its Actions and Filters add-on I take a look to what happens when on the user profile page and hook a conditioned load into the admin_init hook

$this->functions->add_action('admin_init', array(
    $this,
    'maybeLoadDataUpdateConfirmationDialogMarkupAndScripts'
));

Here you can see I’m using my Adapter Classes plugin as a base but still the code is not that difficult to understand.
The method itself

    public function maybeLoadDataUpdateConfirmationDialogMarkupAndScripts()
{
    if (!$this->isUserTarget()) {

        return false;
    }
    if (!$this->userComesFromProfile()) {

        return false;
    }
    $this->functions->add_action('show_user_profile', array(
        $this,
        'appendDataUpdateConfirmationDialog'
    ));
    // $this->appendDataUpdateConfirmationDialog();
    $this->enqueueDataUpdateConfirmationDialogScript();

    return true;
}

It uses two utility method to check that the user has the target role (in the code below hardocoded for simplicity)

    public function isUserTarget()
{
    $roles = array(
        'member',
        'subscriber'
    );

    foreach ($roles as $role) {
        if (membersignup_User_Role_Checker::is_user_of_role($role)) {

            return true;
        }
    }

    return false;
}

And, to avoid showing the jQuery confirmation dialog anytime a user accesses his profile, that the user comes from the profile page

    public function userComesFromProfile()
{
    $httpReferer = $this->functions->wp_get_referer();
    if (false === strpos($httpReferer, 'profile.php')) {

        return false;
    }

    return true;
}

The two conditionals stand to make sure that the dialog only appears when a user is taken back to the profile page after having either inserted data for the first time or having updated them.
To differentiate message from a first insertion and a later update of data I hook into the personal_options_update hook

$this->functions->add_action('personal_options_update', array(
    $this,
    'setFirstCompile'
));

to set a value that tells me this is not the first time the user accesses his profile. The hook is fired when the user clicks the Update button for the first time making it a one time alone trigger

public function setFirstCompile()
{
    $userId = $this->functions->get_current_user_id();
    $key = 'firstCompile';
    $this->functions->update_user_meta($userId, $key, 'no');
}

that value is checked, in fact, in the function that will append the dialog markup code to the profile page

    public function appendDataUpdateConfirmationDialog()
{
    $confirmationDialogTitle = $this->functions->esc_html('Data saved');
    $updateMessage = $this->functions->esc_html('Updates saved, thank you.');
    $firstEntryMessage = $this->functions->esc_html("Data has been saved into the database, thank you.\nCome back any time to update.");
    $confirmationDialogMessage = null;
    // if it's the first time the user fill his profile then differentiate the message
    if ($this->isUserFirstCompilation()) {
        $confirmationDialogMessage = $firstEntryMessage;
    }
    else {
        $confirmationDialogMessage = $updateMessage;
    }
    // include the view
    include_once (MEMBERSIGNUP_PLUGIN_DIRPATH . 'includes/views/userDataUpdateConfirmationDialog.php');

    return true;
}   

Another functions, finally, loads the required script and styles into the page

public function enqueueDataUpdateConfirmationDialogScript()
{
    // register the script
    $src = MEMBERSIGNUP_PLUGIN_URL . 'assets/js/modalUserDataUpdateConfirmation.min.js';
    $handle = 'modalConfirmation';
    $this->functions->wp_register_script($handle, $src, array(
        'jquery-ui-dialog'
    ));
    // enqueue the script
    $this->functions->wp_enqueue_script($handle);
    // enqueue WordPress default dialog style
    $this->functions->wp_enqueue_style('dialogStyle', k'http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css');
    $this->functions->wp_enqueue_style('wp-jquery-ui-dialog');

    return true;
}   

The jQuery script is of the trivial sort

jQuery(document).ready(function($) {
    $( "#membersignupDataUpdateConfirmationDialog" ).dialog({
      modal: true,
      buttons: {
        Chiudi: function() {
          $( this ).dialog( "close" );
        }
      }
    });
});

The final result, after the user has updated his data, is this

Updates saved, thank you.
Updates saved, thank you.

Probably related

I appreciate your input