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 />}>