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

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 { action } from '@storybook/addon-actions';
import { SubscriptionConfirmationWithPaymentLink } from './subscription-confirmation-with-payment-link';
import SubscriptionConfirmationWithPaymentLinkUtil from '../utils/subscription-confirmation-with-payment-link';

// Initialize the utility after story renders
const initializeUtil = () => {
	const subscriptionConfirmation =
		new SubscriptionConfirmationWithPaymentLinkUtil(document);
	subscriptionConfirmation.handleCopyPaymentLink();
};

export default {
	title: 'Subscription Confirmation With Payment Link',
	component: SubscriptionConfirmationWithPaymentLink,
	argTypes: {
		body: { control: 'text' }, // Allows input of raw HTML in Storybook UI
	},
	parameters: {
		docs: {
			description: {
				component:
					'A component that displays subscription confirmation with a copyable payment link.',
			},
		},
	},
};

function handleButtonClick(event) {
	const button = event.target.closest('button');
	if (button) {
		navigator.clipboard
			.readText()
			.then((copiedText) => action('copied')(copiedText));
	}
}

// HOC to add utility initialization for stories with payment link
const withUtilInit = (Story, args) => {
	if (args.paymentLink) {
		setTimeout(initializeUtil, 0);
	}
	return (
		<div className="ncf" onClick={handleButtonClick}>
			<Story {...args} />
		</div>
	);
};

export const WithPaymentLink = (args) =>
	withUtilInit(SubscriptionConfirmationWithPaymentLink, args);

WithPaymentLink.args = {
	header: 'The subscription is now active',
	body: 'To remain active, the customer must pay using the Zuora Payment link below <strong>within the next 24 hours</strong>.',
	paymentLink: 'https://knowledgecenter.zuora.com/Zuora_Payments/Process',
};

export const WithoutPaymentLink = (args) =>
	withUtilInit(SubscriptionConfirmationWithPaymentLink, args);

WithoutPaymentLink.args = {
	header: 'The subscription is now active',
	body: 'Your subscription has been activated successfully.',
};