export function ThreeTierCard()

in support-frontend/assets/pages/supporter-plus-landing/components/threeTierCard.tsx [188:278]
89 lines of code
9 McCabe index (conditional complexity)

export function ThreeTierCard({
	cardContent,
	cardTier,
	promoCount,
	isSubdued,
	currencyId,
	paymentFrequency,
}: ThreeTierCardProps): JSX.Element {
	const {
		title,
		benefits,
		isUserSelected,
		promotion,
		price,
		link,
		cta,
		product,
	} = cardContent;
	const currency = currencies[currencyId];
	const period = recurringContributionPeriodMap[paymentFrequency];
	const formattedPrice = simpleFormatAmount(currency, price);
	const quantumMetricButtonRef = `tier-${cardTier}-button`;
	const pillCopy = promotion?.landingPage?.roundel ?? cardContent.label?.copy;

	return (
		<section css={container(!!pillCopy, isUserSelected, isSubdued)}>
			{isUserSelected && <ThreeTierCardPill title="Your selection" />}
			{!!pillCopy && !isUserSelected && (
				<ThreeTierCardPill
					subdue={isSubdued}
					title={promotion?.landingPage?.roundel ?? pillCopy}
				/>
			)}
			<h2 css={titleCss}>{title}</h2>
			<p css={priceCss(!!promotion)}>
				{promotion && (
					<>
						<span css={previousPriceStrikeThrough}>{formattedPrice}</span>{' '}
						{`${simpleFormatAmount(
							currency,
							promotion.discountedPrice ?? price,
						)}/${period}`}
						<span css={discountSummaryCss}>
							{discountSummaryCopy(
								currency,
								promoCount,
								price,
								promotion,
								paymentFrequency,
							)}
						</span>
					</>
				)}
				{!promotion && `${formattedPrice}/${period}`}
			</p>
			<ThemeProvider theme={buttonThemeReaderRevenueBrand}>
				<LinkButton
					href={link}
					cssOverrides={btnStyleOverrides}
					data-qm-trackable={quantumMetricButtonRef}
					aria-label={title}
				>
					{cta.copy}
				</LinkButton>
			</ThemeProvider>

			{product === 'TierThree' && (
				<div css={benefitsPrefixCss}>
					<span>
						The rewards from <strong>All-access digital</strong>
					</span>
					{benefits.length > 0 && <span css={benefitsPrefixPlus}>plus</span>}
				</div>
			)}
			<BenefitsCheckList
				benefitsCheckListData={benefits.map((benefit) => {
					return {
						text: benefit.copy,
						isChecked: true,
						toolTip: benefit.tooltip,
						pill: benefit.label?.copy,
						hideBullet: benefits.length <= 1 && product !== 'TierThree',
					};
				})}
				style={'compact'}
				iconColor={palette.brand[500]}
				cssOverrides={checkmarkBenefitList}
			/>
		</section>
	);
}