export function PaperPrices()

in support-frontend/assets/pages/paper-subscription-landing/components/content/paperPrices.tsx [105:166]


export function PaperPrices({
	activeTab,
	setTabAction,
	products,
}: PaperPricesPropTypes): JSX.Element {
	const infoTextMessages = {
		delivery: 'Delivery is included.',
		cancel_subscripton: 'You can cancel your subscription at any time.',
		sunday_subscription: `Sunday only subscriptions for The Observer are offered by Tortoise Media Ltd. \
							  Tortoise Media's <a href="${observerLinks.TERMS}">terms and conditions</a> and \
							   <a href="${observerLinks.PRIVACY}">privacy policy</a> will apply.`,
	};

	const infoText = [
		activeTab === HomeDelivery ? infoTextMessages.delivery : '',
		infoTextMessages.cancel_subscripton,
		infoTextMessages.sunday_subscription,
	].join(' ');

	return (
		<section css={pricesSection}>
			<h2 css={pricesHeadline}>Pick your subscription package below</h2>
			<div css={pricesTabs}>
				<LinkTo
					tab={HomeDelivery}
					setTabAction={setTabAction}
					activeTab={activeTab}
					isPricesTabLink
				>
					Home Delivery
				</LinkTo>
				<LinkTo
					tab={Collection}
					setTabAction={setTabAction}
					activeTab={activeTab}
					isPricesTabLink
				>
					Subscription card
				</LinkTo>
			</div>
			<FlexContainer cssOverrides={[priceBoxes, pricesBoxesGridLayout]}>
				{products.map((product) => (
					<ProductOption
						cssOverrides={
							product.label ? productOverrideWithLabel : productOverride
						}
						title={product.title}
						price={product.price}
						priceCopy={product.priceCopy}
						offerCopy={product.offerCopy}
						buttonCopy={product.buttonCopy}
						href={product.href}
						onClick={product.onClick}
						onView={product.onView}
						label={product.label}
						productLabel={product.productLabel}
						unavailableOutsideLondon={product.unavailableOutsideLondon}
					/>
				))}
			</FlexContainer>
			<div css={pricesInfo}>
				<ProductInfoChip icon={<SvgInfoRound />}>