@financial-times/n-conversion-forms/components/delivery-option.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';
import classNames from 'classnames';
import { getDeliveryOption } from '../utils/delivery-option-messages';
import { identifyShippingZone } from '../helpers/supportedCountries';

export function DeliveryOption({
	fieldId = 'deliveryOptionField',
	country: countryCode,
	productCode = undefined,
	options = [],
	isSingle = false,
	isAutoRenewingSubscriptionTermType = true,
	isNonRenewingSubscriptionTermType = false,
}) {
	const divClassName = classNames([
		'o-forms-field',
		'ncf__delivery-option',
		{ 'ncf__delivery-option--single': isSingle },
	]);

	const shippingZone = identifyShippingZone(countryCode);

	return (
		<div
			id={fieldId}
			className={divClassName}
			role="group"
			aria-label="Delivery options"
		>
			<span className="o-forms-input o-forms-input--radio-round">
				{options.map((option) => {
					const { value, isValidDeliveryOption, isSelected } = option;
					const deliveryOptionValue = getDeliveryOption({
						productCode,
						option,
						shippingZone,
						countryCode,
						isAutoRenewingSubscriptionTermType,
						isNonRenewingSubscriptionTermType,
					});

					if (!isValidDeliveryOption || !deliveryOptionValue) {
						return null;
					}

					// in case the delivery option has a custom ID
					const id = deliveryOptionValue.customId || value;

					const inputProps = {
						type: 'radio',
						id,
						name: 'deliveryOption',
						value: value,
						className: 'ncf__delivery-option__input',
						defaultChecked: isSelected,
					};

					const deliveryOptionBoxClassNames = classNames([
						'o-forms-input__label',
						'ncf__delivery-option__label',
						{ 'no-title__delivery-option__box': !deliveryOptionValue.title },
					]);

					return (
						<label
							key={value}
							className="ncf__delivery-option__item"
							htmlFor={id}
						>
							<input {...inputProps} />
							<span className={deliveryOptionBoxClassNames}>
								{deliveryOptionValue.title && (
									<span className="ncf__delivery-option__title o-forms-title__main">
										{deliveryOptionValue.title}
									</span>
								)}
								<div className="ncf__delivery-option__description">
									{deliveryOptionValue.description}
								</div>
							</span>
						</label>
					);
				})}
			</span>
		</div>
	);
}

DeliveryOption.propTypes = {
	country: PropTypes.string.isRequired,
	productCode: PropTypes.string,
	options: PropTypes.arrayOf(
		PropTypes.shape({
			value: PropTypes.oneOf(['PV', 'HD', 'EV']),
			isSelected: PropTypes.bool,
			deliveryOnPublicationDate: PropTypes.bool,
			flightMarket: PropTypes.bool,
			mailDelivery: PropTypes.bool,
		})
	),
	isSingle: PropTypes.bool,
	isAutoRenewingSubscriptionTermType: PropTypes.bool,
	isNonRenewingSubscriptionTermType: PropTypes.bool,
};