feat: removed redux from coverTransactionCost component if required t…

…o go into one-time-checkout
guardian · Oct 15, 2024 · f77011d · f77011d
1 parent a381909
commit f77011d
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git 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<boolean>(false);
 
-	const dispatch = useContributionsDispatch();
-
 	return (
 		<>
 			<div css={coverTransactionCheckboxContainer}>
@@ -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
@@ -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
@@ -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({
 							<CoverTransactionCost
 								transactionCost={coverTransactionCost}
 								transactionCostCopy={transactionCostCopy}
+								onChecked={(check) => {
+									dispatch(setCoverTransactionCost(check));
+								}}
 								transactionCostAmount={simpleFormatAmount(currency, amount)}
 							/>
 						)}