src/js/donate.js

/*
 * Copyright (c) 2023 Eclipse Foundation, Inc.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * Contributors:
 *   Olivier Goulet <olivier.goulet@eclipse-foundation.org>
 *
 * SPDX-License-Identifier: EPL-2.0
*/

const sponsorForm = () => {
  const formElement = document.querySelector('.sponsor-form');
  if (!formElement) return;

  const paymentMethodOptionElements = Array.from(document.querySelectorAll('.payment-method-option'));
  const currencySymbolElements = Array.from(document.querySelectorAll('.sponsor-form-currency'));
  const amountInputElement = document.querySelector('input[name="amount"]');
  const paymentPresetOptionElements = Array.from(document.querySelectorAll('.payment-preset-option'));
  const currencySelectElement = document.querySelector('select[name="currency"]'); 
  const subscriptionOptionElements = Array.from(document.querySelectorAll('.subscription-option'));
  const buttonLabelElements = Array.from(document.querySelectorAll('.sponsor-form .payment-method-option, .sponsor-form .subscription-option'));

  const handleSubscriptionOptionElements = (event) => {
    if (event.target.classList.contains('disabled') || event.target.querySelector('input')?.disabled) {
      event.preventDefault();
    }
  };

  // Set up event listeners
  const handleButtonTabbed = (event) => {
    if (event.key === 'Enter') {
      element.click();
    }
  };

  /**
   * Handles the currency select change event. This will update the currency
   * symbols on the form.
   *
   * @param {Event} event - The change event which was fired.
   */
  const handleCurrencySelectChange = (event) => {
    const options = event.target.options;

    const value = options[options.selectedIndex].value;
    let symbol;
    switch (value) {
      case 'eur':
        symbol = '&euro;';
        break;
      case 'cad':
        symbol = '$';
        break;
      case 'usd':
        symbol = '$';
        break;
    }

    currencySymbolElements.forEach((element) => element.innerHTML = symbol);
  };

  const disableSubscriptionOptions = () => {
    subscriptionOptionElements.forEach((option) => { 
      option.classList.add('disabled')
      const inputElement = option.querySelector('input');
      inputElement.disabled = true;
      if (inputElement.value === '0') {
        option.classList.add('active');
        option.querySelector('input').checked = true;
      } else {
        option.classList.remove('active');
        option.querySelector('input').checked = false;
      }
    });
  };

  const handlePaymentMethodClick = (event) => {
    // We don't use the value of the input because it's not reliable with
    // untrusted mouse events. Use the value attribute directly instead.
    const value = event.target.querySelector('input').getAttribute('value');
    switch (value) {
      case 'credit':
        formElement.action = formElement.querySelector('input[name="credit_process_url"]').value;
        disableSubscriptionOptions();
        break;
      case 'paypal':
        formElement.action = formElement.querySelector('input[name="default_process_url"]').value;
        subscriptionOptionElements.forEach((option) => { 
          option.classList.remove('disabled')
          option.querySelector('input').disabled = false;
        });
        break;
    }
  };

  /**
   * Removes the active class on the payment preset options when the user
   * begins to type in the amount input.
   */
  const handleAmountInput = () => {
    paymentPresetOptionElements.forEach((option) => option.classList.remove('active'));
  };


  /**
   * Toggles the active class on the payment preset options on click.
   *
   * @param {MouseEvent} event - The mouse event which was fired.
   */
  const handlePaymentPresetOptionClick = (event) => {
    const value = event.target.value;
    paymentPresetOptionElements.forEach((option) => option.classList.remove('active'));
    event.target.classList.add('active');
    amountInputElement.value = value;
  };

  // Add event listeners
  amountInputElement.addEventListener('change', handleAmountInput);
  amountInputElement.addEventListener('keyup', handleAmountInput);
  currencySelectElement.addEventListener('change', handleCurrencySelectChange);
  paymentPresetOptionElements.forEach((option) => {
    option.addEventListener('click', handlePaymentPresetOptionClick);
  });
  paymentMethodOptionElements.forEach((option) => {
    option.addEventListener('click', handlePaymentMethodClick);
  });
  buttonLabelElements.forEach((element) => {
    element.addEventListener('keyup', handleButtonTabbed);
  });
  subscriptionOptionElements.forEach((option) => {
    option.addEventListener('click', handleSubscriptionOptionElements);
  });
};

sponsorForm();