@financial-times/n-conversion-forms/utils/subscription-confirmation-with-payment-link.js

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

/**
 * Utility for the subscription confirmation with payment link component
 * @example
 * const subscriptionConfirmation = new SubscriptionConfirmationWithPaymentLink(document);
 * subscriptionConfirmation.handleCopyPaymentLink((copiedText) => {
 *   // Handle copy event
 * });
 */
class SubscriptionConfirmationWithPaymentLink {
	static CONTAINER_QUERY_SELECTOR = '.subscription-active-with-payment-link';

	/**
	 * Initialize the SubscriptionConfirmationWithPaymentLink utility
	 * @param {Element} element Usually the window.document
	 * @throws If the document not passed
	 * @throws When the component element not found
	 */
	constructor(element) {
		if (!element) {
			throw new Error('Please supply a DOM element');
		}

		this.$container = element.querySelector(
			'.subscription-active-with-payment-link'
		);

		if (!this.$container) {
			throw new Error(
				'Please include the subscription confirmation with payment link component on the page'
			);
		}

		this.$button = this.$container.querySelector(
			'.subscription-active-with-payment-link__button'
		);
		this.$input = this.$container.querySelector(
			'.subscription-active-with-payment-link__input'
		);
	}

	/**
	 * Get the payment link value
	 * @return {String}
	 */
	getValue() {
		return this.$input ? this.$input.value : '';
	}

	/**
	 * Handle copying the payment link
	 * @param {Function} callback Called after successful copy
	 */
	handleCopyPaymentLink(callback) {
		if (!this.$button || !this.$input) return;

		this.$button.addEventListener('click', () => {
			navigator.clipboard.writeText(this.getValue()).then(() => {
				this.$button.textContent = 'Copied';
				this.$button.classList.add(
					'subscription-active-with-payment-link__button--copied'
				);

				setTimeout(() => {
					this.$button.textContent = 'Copy';
					this.$button.classList.remove(
						'subscription-active-with-payment-link__button--copied'
					);
				}, 2000);

				if (callback) {
					callback(this.getValue());
				}
			});
		});
	}
}

module.exports = SubscriptionConfirmationWithPaymentLink;