@financial-times/n-conversion-forms/components/subscription-confirmation-with-payment-link.jsx

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

import React from 'react';
import PropTypes from 'prop-types';

export function SubscriptionConfirmationWithPaymentLink({
	id = 'subscriptionConfirmationWithPaymentLink',
	header = 'The subscription is now active',
	body,
	paymentLink,
}) {
	return (
		<div id={id} className="subscription-active-with-payment-link">
			{/* Header */}
			{header && (
				<div className="subscription-active-with-payment-link__header">
					<div className="subscription-active-with-payment-link__icon-container">
						<span className="subscription-active-with-payment-link__icon"></span>
					</div>
					<h3 className="subscription-active-with-payment-link__title">
						{header}
					</h3>
				</div>
			)}

			{/* Body */}
			{body && (
				<p
					className="subscription-active-with-payment-link__description"
					dangerouslySetInnerHTML={{ __html: body }}
				/>
			)}

			{/* Payment Link Section */}
			{paymentLink && (
				<>
					<label className="subscription-active-with-payment-link__label">
						Zuora Payment Link
					</label>
					<div className="subscription-active-with-payment-link__payment-box">
						<input
							type="text"
							value={paymentLink}
							readOnly
							className="subscription-active-with-payment-link__input"
						/>
						<button className="subscription-active-with-payment-link__button o3-button o3-button--primary subscription-active-with-payment-link__button--ft-pink">
							Copy
						</button>
					</div>
				</>
			)}
		</div>
	);
}

SubscriptionConfirmationWithPaymentLink.propTypes = {
	id: PropTypes.string,
	header: PropTypes.string,
	body: PropTypes.string,
	paymentLink: PropTypes.string,
};