MAE-499: Fix Update Recurring Contribution's confirm dialogue button

[erawat]

Overview

On Update Recurring Contribution confirmation dialogue, the button relies on submotOnce function provided by CiviCRM and the function has been removed from CiviCRM Core since version 5.31.0. The PR that updated in the CiviCRM core can be found here and the actual commit here

Since the submotOnce() function was removed, the error is presented when clicked we clicked Yes on the confirmation dialogue.

This PR fixes that.

This PR also improves the display box to include a warning colour similar to what CiviCRM core does for consistency as well as refactors the code to improve readability of the code and separate js file from the template.

Before

After

Technical Details

CiviCRM removes submitOnce function from the core and the confirmation dialogue relies on the function.

Since CiviCRM does not provide JS function (as submitOnce is now binding to the form) as well as provide the API or function to add a confirmation dialogue when submitting the form.

We need an alternative options to overcome this issue as we want to maintain the confirmation dialogue for Update Recurring Contribution and to ensure that the form is only submitted once when user clicks 'Yes'

So what changed?

On addButtons() we updated the return javascript function on the onclick event and pass the event to the function to display a dialogue

'js' => ['onclick' => "return processUpdate(event);"],

On JS

We only want to show the confirmation only then user changed payment method and cycle day then prevent the form to submitted and only summit the form and apply existing functionality to when user clicked yes.

I have also updated the jQuery to dialogue to include civicrm ts() tag for translation the text.

function processUpdate(event) {
  if (!isPaymentMethodChanged() && !isCycleDayChanged()) {
    return true;
  }
  event.preventDefault();
  CRM.$('#confirmInstallmentsUpdate').dialog({
    modal: true, title: ts('Update Recurring Contribution'), zIndex: 10000, autoOpen: true,
    width: 'auto', resizable: false,
    buttons: [{
      text: ts('Yes'),
      click: function () {
        disableConfirmButton();
        CRM.$('#update_installments').val(1);
        CRM.$('#UpdateSubscription').unbind();
        CRM.$('#UpdateSubscription').submit();
        CRM.$(this).dialog("close");
      },
    }, {
      text: ts('No'),
      click: function () {
        CRM.$(this).dialog("close");
      }
    }],
    close: function (event, ui) {
      CRM.$(this).dialog("close");
    }
  });
}

When clicked yes, we also disable the button and change the button text to processing as per CiviCRM fashion.

CRM.$('button[data-identifier="_qf_UpdateSubscription_upload"]').attr("disabled", true);
CRM.$('button[data-identifier="_qf_UpdateSubscription_upload"]').html(ts('Processing') + '...');