export function ContributionsOrderSummary()

in support-frontend/assets/components/orderSummary/contributionsOrderSummary.tsx [161:271]
105 lines of code
19 McCabe index (conditional complexity)

export function ContributionsOrderSummary({
	productKey,
	productDescription,
	ratePlanKey,
	ratePlanDescription,
	amount,
	promotion,
	currency,
	paymentFrequency,
	checkListData,
	onCheckListToggle,
	headerButton,
	tsAndCs,
	startDate,
	enableCheckList,
}: ContributionsOrderSummaryProps): JSX.Element {
	const [showCheckList, setCheckList] = useState(false);
	const isSundayOnlyNewspaperSubscription = isSundayOnlyNewspaperSub(
		productKey,
		ratePlanKey,
	);

	const hasCheckList = enableCheckList && checkListData.length > 0;
	const checkList = hasCheckList && (
		<BenefitsCheckList
			benefitsCheckListData={checkListData}
			style="compact"
			iconColor={palette.brand[500]}
		/>
	);

	const formattedAmount = simpleFormatAmount(currency, amount);

	const formattedPromotionAmount =
		promotion &&
		simpleFormatAmount(currency, promotion.discountedPrice ?? amount);

	return (
		<div css={componentStyles}>
			<div css={[summaryRow, rowSpacing, headingRow]}>
				<h2 css={headingCss}>Your subscription</h2>
				{headerButton}
			</div>
			<hr css={hrCss} />
			<div css={detailsSection}>
				<div css={summaryRow}>
					<div>
						{ratePlanDescription && <p>{ratePlanDescription}</p>}
						<p>{productDescription}</p>
					</div>
					{(hasCheckList || isSundayOnlyNewspaperSubscription) && (
						<Button
							priority="subdued"
							aria-expanded={showCheckList ? 'true' : 'false'}
							onClick={() => {
								onCheckListToggle?.(!showCheckList);
								setCheckList(!showCheckList);
							}}
							icon={<SvgChevronDownSingle />}
							iconSide="right"
							cssOverrides={[buttonOverrides, iconCss(showCheckList)]}
						>
							{showCheckList ? 'Hide details' : 'View details'}
						</Button>
					)}
				</div>

				{hasCheckList && showCheckList && (
					<>
						<div css={checklistContainer}>{checkList}</div>
						{startDate}
					</>
				)}
				{isSundayOnlyNewspaperSubscription && showCheckList && (
					<div css={orderSummarySundayDetails}>
						{productKey === 'HomeDelivery'
							? 'Print edition, delivered every Sunday and access to exclusive slow news digital newsletters, thought-provoking podcasts and Think-Ins, discussions with journalists.'
							: 'Print edition every Sunday and access to exclusive slow news digital newsletters, thought-provoking podcasts and Think-Ins, discussions with journalists.'}
					</div>
				)}
			</div>

			<hr css={hrCss} />
			<div css={[summaryRow, rowSpacing, boldText, totalRow(!!tsAndCs)]}>
				<p>Total</p>
				<p>
					{formattedPromotionAmount && (
						<>
							<span css={originalPriceStrikeThrough}>
								<span css={visuallyHiddenCss}>Was </span>
								{formattedAmount}
								<span css={visuallyHiddenCss}>, now</span>
							</span>{' '}
							{paymentFrequency
								? `${formattedPromotionAmount}/${paymentFrequency}`
								: formattedPromotionAmount}
						</>
					)}
					{!formattedPromotionAmount && (
						<>
							{paymentFrequency
								? `${formattedAmount}/${paymentFrequency}`
								: formattedAmount}
						</>
					)}
				</p>
			</div>
			{!!tsAndCs && <div css={termsAndConditions}>{tsAndCs}</div>}
		</div>
	);
}