Donation amount changes on failed form submission when EN activates NSG values.

[MichaelT372]

Sometimes on failed form submission, EN activates NSG values if it recognises the user. So the donation button values and labels are changed by EN, and EN re-selects the correct donation value (even if the button values changed). This is an EN bug. We have an open issue with EN about this SUP-17422 and we previously had one in January SUP-10442.

But when this bug happens, it causes ENgrid to select a different donation amount on page load. In my tests, I selected the first button ($50) and then EN changed the first button to $25 and the $25 first button was selected by ENgrid.

It appears to be some sort of race condition with ENgrid running before EN's JS. If EN fixes their bug, then we may not need to fix this. But we should test if this happens on NSG page loads too, not just failed form submissions.

To reproduce the issue:

• go to an ENgrid donation page with NSG enabled
• submit the form with a recognised email address that has a NSG value
• Force a submission error for example use a test card on a production gateway
• observe that donation values and labels change and you're donating a different amount than you selected before.

For TNC, I have done a quick patch for this issue by adding to their client ENgrid the following code:

new App({
// ..... other options
  onLoad: () => {
    // ..... other onLoad code before this
    // Restore donation amount from session storage if submission failed
    const donationValue = sessionStorage.getItem("donationValue");
    const submissionFailed =
      ENGrid.checkNested(
        window.EngagingNetworks,
        "require",
        "_defined",
        "enjs",
        "checkSubmissionFailed"
      ) &&
      window.EngagingNetworks.require._defined.enjs.checkSubmissionFailed();
    if (donationValue && submissionFailed) {
      setTimeout(() => {
        const _amt = DonationAmount.getInstance();
        _amt.setAmount(parseFloat(donationValue));
        console.log(
          "Restored donation amount from session storage:",
          donationValue
        );
      }, 1000);
    }
    sessionStorage.removeItem("donationValue");
  },
  onValidate: () => {
   // .... other onValidate code
    // Save donation amount to session storage in case of submission error
    // We use onValidate to also capture digital wallets, which dont trigger onSubmit.
    const _amt = DonationAmount.getInstance();
    sessionStorage.setItem("donationValue", _amt.amount.toString());
  },
});