@financial-times/n-conversion-forms/components/payment-term.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 { Fieldset } from './fieldset';
import { PaymentTerm } from './payment-term';

export default {
	title: 'Payment Term',
	component: PaymentTerm,
};

export const AutoRenewingTermType = (args) => (
	<div className="ncf">
		<Fieldset>
			<PaymentTerm {...args} />
		</Fieldset>
	</div>
);

AutoRenewingTermType.args = {
	options: [
		{
			name: '3 yearly',
			isTrial: false,
			discount: '',
			selected: false,
			price: '$909.00',
			trialPrice: '$0.00',
			trialDuration: '',
			monthlyPrice: '0',
			amount: '909.00',
			trialAmount: null,
			value: 'P3Y',
			symbol: '$',
			subscriptionAutoRenewTerm: true,
		},
		{
			name: '26 monthly',
			isTrial: false,
			discount: '',
			selected: false,
			price: '£335.00',
			trialPrice: '£0.00',
			trialDuration: '',
			monthlyPrice: null,
			amount: '335.00',
			trialAmount: null,
			value: 'P26M',
			symbol: '£',
			subscriptionAutoRenewTerm: true,
		},
		// 2 yearly (non-trial)
		{
			name: '2 yearly',
			isTrial: false,
			discount: '',
			selected: false,
			price: '£310.00',
			trialPrice: '£0.00',
			trialDuration: '',
			monthlyPrice: null,
			amount: '310.00',
			trialAmount: null,
			value: 'P2Y',
			symbol: '£',
			subscriptionAutoRenewTerm: true,
		},
		// 2 yearly (trial)
		{
			name: '2 yearly',
			isTrial: true,
			discount: '',
			selected: false,
			price: '$645.00',
			trialPrice: '$100.00',
			trialDuration: 'Trial period',
			monthlyPrice: '0',
			amount: '645.00',
			trialAmount: 100,
			value: 'P2Y',
			symbol: '$',
			subscriptionAutoRenewTerm: true,
		},
		{
			name: '13 monthly',
			isTrial: false,
			discount: '',
			selected: false,
			price: '£155.00',
			trialPrice: '£0.00',
			trialDuration: '',
			monthlyPrice: null,
			amount: '155.00',
			trialAmount: null,
			value: 'P13M',
			symbol: '£',
			subscriptionAutoRenewTerm: true,
		},
		// Annual whose value is P1Y
		{
			name: 'annual',
			isTrial: false,
			discount: '',
			selected: true,
			price: '$385.00',
			trialPrice: '$0.00',
			trialDuration: '',
			monthlyPrice: '$32.09',
			amount: '385.00',
			trialAmount: null,
			value: 'P1Y',
			symbol: '$',
			subscriptionAutoRenewTerm: true,
		},
		// Annual whose value is P52W
		{
			name: 'annual',
			isTrial: false,
			discount: '',
			selected: false,
			price: '£140.00',
			trialPrice: '£0.00',
			trialDuration: '',
			monthlyPrice: null,
			amount: '140.00',
			trialAmount: null,
			value: 'P52W',
			symbol: '£',
			subscriptionAutoRenewTerm: true,
		},
		{
			name: '6 monthly',
			isTrial: false,
			discount: '',
			selected: false,
			price: '$229.00',
			trialPrice: '$0.00',
			trialDuration: '',
			monthlyPrice: '0',
			amount: '229.00',
			trialAmount: null,
			value: 'P6M',
			symbol: '$',
			subscriptionAutoRenewTerm: true,
		},
		{
			name: 'quarterly',
			isTrial: false,
			discount: '',
			selected: false,
			price: '$95.00',
			trialPrice: '$0.00',
			trialDuration: '',
			monthlyPrice: '$31.67',
			amount: '95.00',
			trialAmount: null,
			value: 'P3M',
			symbol: '$',
			subscriptionAutoRenewTerm: true,
		},
		{
			name: 'monthly',
			isTrial: false,
			discount: '',
			selected: false,
			price: '£42.00',
			trialPrice: '£0.00',
			trialDuration: '',
			monthlyPrice: null,
			amount: '42.00',
			trialAmount: null,
			value: 'P1M',
			symbol: '£',
			subscriptionAutoRenewTerm: true,
		},
	],
	isAutoRenewingSubscriptionTermType: true,
	isNonRenewingSubscriptionTermType: false,
};

export const NonRenewingTermType = (args) => (
	<div className="ncf">
		<Fieldset>
			<PaymentTerm {...args} />
		</Fieldset>
	</div>
);
NonRenewingTermType.args = {
	options: [
		{
			name: 'quarterly',
			isTrial: false,
			discount: '',
			selected: true,
			price: '£15.00',
			trialPrice: '£0.00',
			trialDuration: '',
			monthlyPrice: null,
			amount: '15.00',
			trialAmount: null,
			value: 'P13W',
			symbol: '£',
			subscriptionAutoRenewTerm: false,
		},
		{
			name: '8 weeks',
			isTrial: false,
			discount: '',
			selected: false,
			price: '£19.00',
			trialPrice: '£0.00',
			trialDuration: '',
			monthlyPrice: null,
			amount: '19.00',
			trialAmount: null,
			value: 'P8W',
			symbol: '£',
			subscriptionAutoRenewTerm: false,
		},
	],
	isAutoRenewingSubscriptionTermType: false,
	isNonRenewingSubscriptionTermType: true,
};

export const RenewOffers = (args) => (
	<div className="ncf">
		<Fieldset>
			<PaymentTerm {...args} />
		</Fieldset>
	</div>
);

RenewOffers.args = {
	showLegal: false,
	largePrice: true,
	options: [
		{
			title: 'Annual',
			subTitle: '(Renews annually unless cancelled)',
			price: '€ 270.00',
			value: 270.0,
			isTrial: false,
			discount: '33%',
			bestOffer: true,
			selected: false,
			chargeOnText: 'You will be charged on May 1, 2021',
		},
		{
			title: '12 Month Subscription',
			price: '€ 300.00',
			value: 300.0,
			isTrial: false,
			discount: '10%',
			selected: true,
			chargeOnText: 'You will be charged on May 1, 2021',
		},
	],
	optionsInARow: true,
};