<!--
This will look for any <form class="impact_stack"> on your page
It will intercept the submission of the form, then make an Impact Stack prepopulation link out of the data in the form
-->

<script>
  document.addEventListener("DOMContentLoaded", () => {
    // You could have multiple forms on the page with the way this is set up.

    // Feel free to choose another selector to find the forms on your page
    const forms = Array.from(document.querySelectorAll("form.impact_stack"));

    if (forms.length === 0) {
      console.error("No forms were found.");
      return;
    }

    for (const form of forms) {
      if (form === null || !(form instanceof HTMLFormElement)) {
        return;
      }

      form.addEventListener("submit", (event) => {
        event.preventDefault();

        if (
          event.target === null ||
          !(event.target instanceof HTMLFormElement)
        ) {
          return;
        }

        try {
          // Get the data from the form fields
          const formData = new FormData(event.target);

          // Get the Impact Stack form URL from the action attribute of the form
          const actionURL = new URL(event.target.action);

          // This makes a pre-population link for Impact Stack:
          // https://support.impact-stack.org/hc/en-us/articles/115001868166-How-to-pre-populate-forms
          //
          // The 'keys' here are from the 'name' attribute on the form inputs.
          // They should match the 'form key' on your Impact Stack form

          actionURL.hash = Array.from(formData.entries())
            .filter(([, value]) => typeof value === "string")
            .map(([key, value]) => {
              //
              // Validation checks.
              //
              // You could adjust these or add any other checks you need here
              // Donation interval must be 1, m or y
              // Donation amount must be an integer greater than 0

              if (
                key === "donation_interval" &&
                !["1", "m", "y"].includes(value)
              ) {
                throw new Error(`Invalid donation_interval value: ${value}`);
              }

              if (
                key === "donation_amount" &&
                (!Number.isInteger(Number(value)) || Number(value) <= 0)
              ) {
                throw new Error(`Invalid donation_amount value: ${value}`);
              }

              return `p:${encodeURIComponent(key)}=${encodeURIComponent(
                value
              )}`;
            })
            .join("&");

          // Use _blank instead of _self if you want to open in a new tab
          window.open(actionURL.toString(), "_self");
        } catch (error) {
          console.error("Form submission error: ", error.message);

          // You might want to show an error message on the page here
        }
      });
    }
  });
</script>

<!--
The URL in the action attribute should be the URL of your Impact Stack form

The name attribute on these inputs should match the form key on the Impact Stack form you want to lead your supporters to
Example: The value of the <select name="donation_interval"> will go into the form field on Impact Stack with the form key of "donation_interval"
-->
<form class="impact_stack" action="https://demo2.impact-stack.org/donation-2">
  <label for="donation-interval">Donation Interval</label>
  <select id="donation-interval" name="donation_interval">
    <option value="1">One-time</option>
    <option value="m">Monthly</option>
    <option value="y">Yearly</option>
  </select>
  <label for="donation-amount">Donation Amount</label>
  <input type="number" id="donation-amount" name="donation_amount" value="5" min="1" placeholder="Donation amount">
  <button type="submit" class="button">Donate <span class="arrow">→</span></button>
</form>