@financial-times/n-conversion-forms/components/region-selector.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 regionConfigByCountry from '../utils/region-config-by-country';

export function RegionSelector({
	country = 'USA',
	fieldId,
	hasError = false,
	isBillingSelector = false,
	isDisabled = false,
	isHidden = false,
	label,
	regionType,
	selectId,
	value,
}) {
	const {
		regions = [],
		defaultRegionType,
		label: defaultLabel,
	} = regionConfigByCountry[country];

	const dynamicRegionType = regionType || defaultRegionType;
	const dynamicLabel = isBillingSelector
		? `Billing ${label || defaultLabel}`
		: label || defaultLabel;
	const dynamicFieldId = fieldId || `${dynamicRegionType}Field`;
	const dynamicSelectId = selectId || dynamicRegionType;

	const dynamicName = isBillingSelector
		? `billing${
				dynamicRegionType.charAt(0).toUpperCase() + dynamicRegionType.slice(1)
			}`
		: dynamicRegionType;

	const fieldClassNames = classNames([
		'o-forms-field',
		{ ncf__hidden: isHidden },
	]);

	const inputWrapperClassNames = classNames([
		'o-forms-input',
		'o-forms-input--select',
		{ 'o-forms-input--invalid': hasError },
	]);

	return (
		<label
			id={dynamicFieldId}
			className={fieldClassNames}
			data-validate="required"
			htmlFor={dynamicSelectId}
		>
			<span className="o-forms-title">
				<span className="o-forms-title__main">{dynamicLabel}</span>
			</span>
			<span className={inputWrapperClassNames}>
				<select
					id={selectId}
					aria-required="true"
					required
					name={dynamicName}
					data-trackable={`field-${dynamicRegionType}`}
					disabled={isDisabled}
					defaultValue={value}
				>
					<option disabled value="">
						Please select a {defaultLabel.toLowerCase()}
					</option>
					{regions.map(({ code, name }) => {
						return (
							<option key={code} value={code}>
								{name}
							</option>
						);
					})}
				</select>
				<span className="o-forms-input__error">
					Please select your {defaultLabel.toLowerCase()}
				</span>
			</span>
		</label>
	);
}

RegionSelector.propTypes = {
	country: PropTypes.oneOf(['USA', 'CAN', 'IND']),
	fieldId: PropTypes.string,
	hasError: PropTypes.bool,
	isBillingSelector: PropTypes.bool,
	isDisabled: PropTypes.bool,
	isHidden: PropTypes.bool,
	label: PropTypes.string,
	regionType: PropTypes.string,
	selectId: PropTypes.string,
	value: PropTypes.string,
};