IO-122: Update schedule API response and payment plan toggler UI

[erawat]

Overview

This PR changes Payment Schedule API response to include the calculation for total instalments amount for the schedule.

The total amount will be set to two different places when schedule instalments is generated.

• Total amount field which is hidden as this field will be processed by CiviCRM once the form is submitted
• Price value (Total amount) text when price set is being used.

The PR also updates payment plan toggler UI that includes:

• Handles new response from Payment Schedule API.
• Adds event handler when start date and end date is changed.
• Adds validate to check if selected price values is empty to prevent receiving error from the API if the price value is empty.

The PR also includes the unit tests for testing calculation of total amount for fixed membership type, rolling membership type, price field value

Before

The gift shows that the schedule prices do not equal to total price on price value total amount

The gift shows the error message when non the price values are selected

After

The gift shows that the schedule prices (pro rated price in this case) do not equal to total price on price value total amount

The gift shows that no error message appears when none of the price value is selected.

Technical Details

This section shows that JSON response looks like before and after this PR.

The response only provides instalments which have already formatted.

{

    "is_error": 0,
    "version": 3,
    "count": 1,
    "id": 0,
    "values": [
        {
            "instalment_no": 1,
            "instalment_date": "1st July 2020",
            "instalment_tax_amount": "£180",
            "instalment_amount": "£900",
            "instalment_status": "Pending"
        }
    ]
}

After this PR.

JSON response if sequential = 0 on the request.

{

    "is_error": 0,
    "version": 3,
    "count": 2,
    "values": {
        "instalments": [
            {
                "instalment_no": 1,
                "instalment_date": "1st July 2020",
                "instalment_tax_amount": "£180",
                "instalment_amount": "£900",
                "instalment_status": "Pending"
            }
        ],
        "total_amount": 1080
    }
}

JSON response if sequential = 1 on the request.

{

    "is_error": 0,
    "version": 3,
    "count": 2,
    "values": [
        [
            {
                "instalment_no": 1,
                "instalment_date": "1st July 2020",
                "instalment_tax_amount": "£180",
                "instalment_amount": "£900",
                "instalment_status": "Pending"
            }
        ],
        1080
    ]
}

The reason that total_amount should return to in the response because

• We should avoid any calculation in the UI
• It is easier to test the calculation in different scenarios in the back end.