diff --git a/support-frontend/assets/pages/supporter-plus-landing/components/coverTransactionCost.tsx b/support-frontend/assets/pages/supporter-plus-landing/components/coverTransactionCost.tsx index a218e677fb..20af832c7b 100644 --- a/support-frontend/assets/pages/supporter-plus-landing/components/coverTransactionCost.tsx +++ b/support-frontend/assets/pages/supporter-plus-landing/components/coverTransactionCost.tsx @@ -3,8 +3,6 @@ import { from, neutral, space, textSans } from '@guardian/source/foundations'; import { useState } from 'react'; import { Checkbox } from 'components/checkbox/Checkbox'; import { sendTrackingEventsOnClick } from 'helpers/productPrice/subscriptions'; -import { setCoverTransactionCost } from 'helpers/redux/checkout/product/actions'; -import { useContributionsDispatch } from 'helpers/redux/storeHooks'; import { CheckoutDivider } from 'pages/supporter-plus-landing/components/checkoutDivider'; const coverTransactionDivider = css` @@ -40,6 +38,7 @@ export type CoverTransactionCostProps = { transactionCost: boolean; transactionCostCopy: string; transactionCostAmount: string; + onChecked: (check: boolean) => void; showTransactionCostSummary?: boolean; }; @@ -48,12 +47,11 @@ export function CoverTransactionCost({ transactionCostCopy, transactionCostAmount, showTransactionCostSummary, + onChecked, }: CoverTransactionCostProps): JSX.Element { const [displayTransactionCostSummary, setDisplayTransactionCostSummary] = useState(false); - const dispatch = useContributionsDispatch(); - return ( <>
@@ -66,7 +64,7 @@ export function CoverTransactionCost({ componentType: 'ACQUISITIONS_BUTTON', })(); } - dispatch(setCoverTransactionCost(e.target.checked)); + onChecked(e.target.checked); if (showTransactionCostSummary) { setDisplayTransactionCostSummary(true); } diff --git a/support-frontend/assets/pages/supporter-plus-landing/supporterPlusRouter.tsx b/support-frontend/assets/pages/supporter-plus-landing/supporterPlusRouter.tsx index 7c67f219be..63bc486946 100644 --- a/support-frontend/assets/pages/supporter-plus-landing/supporterPlusRouter.tsx +++ b/support-frontend/assets/pages/supporter-plus-landing/supporterPlusRouter.tsx @@ -14,7 +14,7 @@ import { SupporterPlusThankYou } from 'pages/supporter-plus-thank-you/supporterP import { setUpRedux } from './setup/setUpRedux'; import { threeTierCheckoutEnabled } from './setup/threeTierChecks'; import { SupporterPlusInitialLandingPage } from './twoStepPages/firstStepLanding'; -import SupporterPlusCheckout from './twoStepPages/secondStepCheckout'; +import { SupporterPlusCheckout } from './twoStepPages/secondStepCheckout'; import { ThreeTierLanding } from './twoStepPages/threeTierLanding'; parseAppConfig(window.guardian); diff --git a/support-frontend/assets/pages/supporter-plus-landing/twoStepPages/secondStepCheckout.tsx b/support-frontend/assets/pages/supporter-plus-landing/twoStepPages/secondStepCheckout.tsx index b37c12f22c..664d8fcaff 100644 --- a/support-frontend/assets/pages/supporter-plus-landing/twoStepPages/secondStepCheckout.tsx +++ b/support-frontend/assets/pages/supporter-plus-landing/twoStepPages/secondStepCheckout.tsx @@ -18,7 +18,10 @@ import { simpleFormatAmount } from 'helpers/forms/checkouts'; import { countryGroups } from 'helpers/internationalisation/countryGroup'; import { currencies } from 'helpers/internationalisation/currency'; import { resetValidation } from 'helpers/redux/checkout/checkoutActions'; -import { setSelectedAmount } from 'helpers/redux/checkout/product/actions'; +import { + setCoverTransactionCost, + setSelectedAmount, +} from 'helpers/redux/checkout/product/actions'; import { isSupporterPlusFromState } from 'helpers/redux/checkout/product/selectors/isSupporterPlus'; import { getContributionType } from 'helpers/redux/checkout/product/selectors/productType'; import { @@ -56,7 +59,7 @@ const paymentButtonSpacing = css` } `; -export default function SupporterPlusCheckout({ +export function SupporterPlusCheckout({ thankYouRoute, }: { thankYouRoute: string; @@ -151,6 +154,9 @@ export default function SupporterPlusCheckout({ transactionCost={coverTransactionCost} transactionCostCopy={transactionCostCopy} transactionCostAmount={simpleFormatAmount(currency, amount)} + onChecked={(check) => { + dispatch(setCoverTransactionCost(check)); + }} showTransactionCostSummary={true} /> )} @@ -202,6 +208,9 @@ export default function SupporterPlusCheckout({ { + dispatch(setCoverTransactionCost(check)); + }} transactionCostAmount={simpleFormatAmount(currency, amount)} /> )}