@financial-times/n-conversion-forms/utils/submit.js

Containing jsx components and styles for forms included on Accounts and Acquisition apps (next-signup, next-profile, next-retention, etc).

/**
 * Utility for the `n-conversion-forms/partial/payment-term.html` partial
 * @example
 * const submit = new Submit(document);
 *
 * // Update the button text
 * submit.updateText('Pay with Apple Pay');
 */

class Submit {
	/**
	 * Initalise the submit utility
	 * @param {Element} element Usually the window.document
	 * @param id
	 * @throws If the document not passed
	 * @throws When the submit element not found
	 */
	constructor(element, id = 'submitButton') {
		if (!element) {
			throw new Error('Please supply a DOM element');
		}

		this.element = element;
		this.$submit = element.querySelector(`#${id}`);

		if (!this.$submit) {
			throw new Error('Please include the submit button partial on the page');
		}
	}

	/**
	 * Update the button text
	 * @param {String}
	 */
	updateText(newText) {
		if (!newText) throw new Error('Please supply a new text value');
		return (this.$submit.innerHTML = newText);
	}

	/**
	 * Enables the submit button
	 */
	enable() {
		this.$submit.disabled = false;
	}

	/**
	 * Disables the submit button
	 */
	disable() {
		this.$submit.disabled = true;
	}

	/**
	 * Whether or not the button is disabled.
	 */
	isDisabled() {
		return !!this.$submit.disabled;
	}

	/**
	 * Hides the submit button
	 */
	hide() {
		this.$submit.classList.add('ncf__hidden');
	}

	/**
	 * Shows the submit button
	 */
	show() {
		this.$submit.classList.remove('ncf__hidden');
	}
}

module.exports = Submit;