function TabletAndDesktop()

in support-frontend/assets/components/subscriptionCheckouts/summary.tsx [175:235]

61 lines of code
11 McCabe index (conditional complexity)


function TabletAndDesktop({
	billingPeriod,
	changeSubscription,
	dataList,
	description,
	image,
	productPrice,
	title,
	product,
	orderIsAGift,
}: TabletAndDesktopPropTypes): JSX.Element {
	const isGuardianWeeklyGift = product === GuardianWeekly && !orderIsAGift;
	return (
		<span className={styles.tabletAndDesktop}>
			{image && (
				<div
					className={
						isGuardianWeeklyGift ? styles.imgGuardianWeekly : styles.img
					}
				>
					{image}
				</div>
			)}
			<div className={styles.content}>
				<h3
					className={
						!image
							? styles.headerNoImage
							: isGuardianWeeklyGift
							? styles.headerGuardianWeekly
							: styles.header
					}
				>
					Order summary
				</h3>
				<h4 className={styles.title} title={`your subscription is ${title}`}>
					{!orderIsAGift && 'The '}
					{title}
					{orderIsAGift && ' Gift Subscription'}
				</h4>
				{description && (
					<h4 className={styles.titleDescription}>{description}</h4>
				)}
				<div>
					<PriceLabel
						className={styles.pricing}
						productPrice={productPrice}
						billingPeriod={billingPeriod}
					/>
					<PromotionDiscount
						promotion={getAppliedPromo(productPrice.promotions)}
					/>
					{dataList.length > 0 && <DataList dataList={dataList} />}
				</div>
				{changeSubscription ? (
					<ChangeSubscription route={changeSubscription} />
				) : null}
			</div>
		</span>
	);
}