export function AmountsCard()

in support-frontend/assets/pages/supporter-plus-landing/components/amountsCard.tsx [74:157]
81 lines of code
8 McCabe index (conditional complexity)

export function AmountsCard({
	countryGroupId,
	amountsData,
	currencyId,
	heading,
	standFirst,
	contributionType,
}: AmountsCardProps) {
	const [selectedAmount, setSelectedAmount] = useState<number | 'other'>(
		amountsData.defaultAmount,
	);
	const [otherAmount, setOtherAmount] = useState('');

	const billingPeriod = contributionType === 'ANNUAL' ? 'Annual' : 'Monthly';
	const amount = selectedAmount === 'other' ? otherAmount : selectedAmount;
	const checkoutLink =
		contributionType === 'ONE_OFF'
			? `one-time-checkout?contribution=${amount}`
			: `checkout?product=Contribution&ratePlan=${billingPeriod}&contribution=${amount}`;

	const contributionTypeToPaymentInterval: Partial<
		Record<ContributionType, PriceCardPaymentInterval>
	> = {
		MONTHLY: 'month',
		ANNUAL: 'year',
	};

	return (
		<section css={sectionStyle}>
			<div
				css={css`
					${textSans15}
				`}
			>
				{heading && <h2 css={titleStyle}>{heading}</h2>}
				{standFirst && <p css={standFirstStyle}>{standFirst}</p>}
				<PriceCards
					amounts={amountsData.amounts}
					selectedAmount={selectedAmount}
					currency={currencyId}
					paymentInterval={contributionTypeToPaymentInterval[contributionType]}
					onAmountChange={(amount: string) => {
						if (amount === 'other') {
							setSelectedAmount(amount);
						} else {
							const amountNumber = parseInt(amount, 10);
							if (!isNaN(amountNumber)) {
								setSelectedAmount(amountNumber);
							}
						}
					}}
					hideChooseYourAmount={amountsData.hideChooseYourAmount}
					otherAmountField={
						<OtherAmount
							currency={currencyId}
							selectedAmount={selectedAmount}
							otherAmount={otherAmount}
							onOtherAmountChange={(otherAmount) => {
								setOtherAmount(otherAmount);
							}}
							errors={[]}
						/>
					}
				/>
			</div>
			<div css={buttonContainer}>
				<ThemeProvider theme={buttonThemeReaderRevenueBrand}>
					<LinkButton
						href={checkoutLink}
						cssOverrides={btnStyleOverrides}
						onClick={() => {
							trackComponentClick(
								`npf-contribution-amount-toggle-${countryGroupId}-${contributionType}`,
							);
						}}
					>
						Continue to checkout
					</LinkButton>
				</ThemeProvider>
				<PaymentCards />
			</div>
		</section>
	);
}