From 60091989caa5e9898c88e865c8325ff372660762 Mon Sep 17 00:00:00 2001
From: Paul Dempsey <76729591+paul-daniel-dempsey@users.noreply.github.com>
Date: Mon, 13 Jan 2025 10:30:59 +0000
Subject: [PATCH] feat: displays per month/year in priceCards now

---
 .../supporter-plus-landing/components/amountsCard.tsx    | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/support-frontend/assets/pages/supporter-plus-landing/components/amountsCard.tsx b/support-frontend/assets/pages/supporter-plus-landing/components/amountsCard.tsx
index 4b4a1bc953..2aa0e5bd71 100644
--- a/support-frontend/assets/pages/supporter-plus-landing/components/amountsCard.tsx
+++ b/support-frontend/assets/pages/supporter-plus-landing/components/amountsCard.tsx
@@ -12,6 +12,7 @@ import {
 	LinkButton,
 } from '@guardian/source/react-components';
 import { useState } from 'react';
+import type { PriceCardPaymentInterval } from 'components/priceCards/priceCard';
 import { OtherAmount } from '../../../components/otherAmount/otherAmount';
 import { PriceCards } from '../../../components/priceCards/priceCards';
 import type {
@@ -90,6 +91,13 @@ export function AmountsCard({
 			? `one-time-checkout?contribution=${amount}`
 			: `checkout?product=Contribution&ratePlan=${billingPeriod}&contribution=${amount}`;
 
+	const contributionTypeToPaymentInterval: Partial<
+		Record<ContributionType, PriceCardPaymentInterval>
+	> = {
+		MONTHLY: 'month',
+		ANNUAL: 'year',
+	};
+
 	return (
 		<section css={sectionStyle}>
 			<div
@@ -103,6 +111,7 @@ export function AmountsCard({
 					amounts={amountsData.amounts}
 					selectedAmount={selectedAmount}
 					currency={currencyId}
+					paymentInterval={contributionTypeToPaymentInterval[contributionType]}
 					onAmountChange={(amount: string) => {
 						if (amount === 'other') {
 							setSelectedAmount(amount);