@financial-times/n-conversion-forms/components/proceed-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 { ProceedWithPaymentLink } from './proceed-with-payment-link';

export default {
	title: 'Proceed With Payment Link',
	component: ProceedWithPaymentLink,
	argTypes: {
		id: { control: 'text' },
		title: { control: 'text' },
		description: { control: 'text' },
		listItems: { control: 'array' },
	},
};

export const Basic = (args) => (
	<ProceedWithPaymentLink {...args}>
		<button className="proceed-with-payment-link__button o3-button o3-button--primary">
			{args.buttonText}
		</button>
	</ProceedWithPaymentLink>
);

Basic.args = {
	id: 'payment-section',
	title: `By proceeding now, you're:`,
	listItems: [
		'Activating the customer’s subscription',
		'Creating a payment link for the customer to complete their payment on Zuora, which they must do within 24 hours',
	],
	buttonText: 'Proceed now',
};