MAE-539: Fix new membership screen on memberships tab

[erawat]

Overview

This PR fixes the new membership form does not load properly when accessing from Membership Tab in Contact summary page.

Before

After

Technical Details

In this PR, we separated JavaScript functions onto a JavaScript file, and then we add JavaScript files into the template, so we could separate logics from template. By doing that the JavaScript was loaded property when buildForm hook is called and the JavaScript is loaded intohtml-header region.

However, when accessing the form as a modal from membership tab on the contact summary page, the html header region has been declared on the main page and therefore CiviCRM ignore this injection. In order to address this issue, the JavaScript file must be added to CRM_Member_Page_Tab in page-body region so the JavaScript exist before the form is loaded.

A trait was created so the code for injection of the JavaScript can be shared into different hooks.

trait CRM_MembershipExtras_Helper_PaymentPlanTogglerTrait {

  /**
   * @param $region
   */
  private function addResources($region) {
    Civi::resources()->add([
      'scriptFile' => ['uk.co.compucorp.membershipextras', 'js/paymentPlanToggler.js'],
      'region' => $region,
    ]);
  }

}