Merge pull request #1402 from guardian/voucher-subs-holiday-stop-bug-fix

voucher subs holiday stop bug fix

Author: rBangay

client/__tests__/components/identity/__snapshots__/NewsletterPreference.test.tsx.snap

@@ -1,6 +1,10 @@
 import { css } from '@emotion/react';
 import { space, until } from '@guardian/source/foundations';
-import { Button, InlineError } from '@guardian/source/react-components';
+import {
+	Button,
+	Checkbox,
+	InlineError,
+} from '@guardian/source/react-components';
 import { useContext, useState } from 'react';
 import { Link, Navigate, useLocation } from 'react-router-dom';
 import type { DateRange } from '../../../../shared/dates';
@@ -12,7 +16,6 @@ import { fetchWithDefaultParameters } from '../../../utilities/fetch';
 import { CallCentreNumbers } from '../../shared/CallCentreNumbers';
 import { InfoIcon } from '../shared/assets/InfoIcon';
 import { LinkButton } from '../shared/Buttons';
-import { Checkbox } from '../shared/Checkbox';
 import { ProgressIndicator } from '../shared/ProgressIndicator';
 import { buttonBarCss, cancelLinkCss } from './HolidayDateChooser';
 import {
@@ -138,15 +141,17 @@ export const HolidayReview = () => {
 								}}
 							>
 								<Checkbox
-									checked={isCheckboxConfirmed}
-									onChange={(newValue) =>
-										setIsCheckboxConfirmed(newValue)
-									}
 									label={
 										productType.holidayStops
 											.explicitConfirmationRequired
 											.checkboxLabel
 									}
+									checked={isCheckboxConfirmed}
+									onChange={() => {
+										setIsCheckboxConfirmed(
+											!isCheckboxConfirmed,
+										);
+									}}
 								/>
 							</div>
 							<Modal
@@ -212,17 +217,12 @@ export const HolidayReview = () => {
 					</div>
 				) : (
 					<div
-						css={[
-							buttonBarCss,
-							{
-								justifyContent: 'flex-end',
-								marginTop: '20px',
-								[until.mobileMedium]: {
-									flexDirection: 'column',
-									marginTop: 0,
-								},
+						css={{
+							marginTop: '20px',
+							[until.mobileMedium]: {
+								marginTop: 0,
 							},
-						]}
+						}}
 					>
 						<div
 							css={[
@@ -253,7 +253,11 @@ export const HolidayReview = () => {
 						{!!productType.holidayStops
 							.explicitConfirmationRequired &&
 							!isCheckboxConfirmed && (
-								<InlineError>
+								<InlineError
+									cssOverrides={css`
+										margin-top: ${space[3]}px;
+									`}
+								>
 									Please confirm you will destroy the affected
 									vouchers by checking the box.
 								</InlineError>

client/components/mma/holiday/HolidayReview.tsx

@@ -1,5 +1,5 @@
+import { Checkbox } from '@guardian/source/react-components';
 import type { FC } from 'react';
-import { Checkbox } from '../shared/Checkbox';
 import { standardSansText } from './sharedStyles';
 
 interface MarketingCheckboxProps {
@@ -41,29 +41,21 @@ export const MarketingCheckbox: FC<MarketingCheckboxProps> = (props) => {
 
 	return (
 		<div
+			key={id}
 			data-cy={id}
-			onClick={() => {
-				onClick(id);
-			}}
 			css={[
 				standardSansText,
 				{
 					marginTop: '12px',
-					paddingLeft: '30px',
-					position: 'relative',
 				},
 			]}
 		>
-			<div css={{ position: 'absolute', left: 0 }}>
-				<Checkbox
-					checked={!!selected}
-					onChange={() => onClick(id)}
-					label={title}
-					hideLabel={true}
-				/>
-			</div>
-			{title && getTitle(title)}
-			{description && getDescription(description)}
+			<Checkbox
+				checked={!!selected}
+				onChange={() => onClick(id)}
+				label={getTitle(title)}
+				supporting={getDescription(description)}
+			/>
 		</div>
 	);
 };

client/components/mma/identity/MarketingCheckbox.tsx

@@ -21,6 +21,7 @@ export const MarketingToggle: FC<MarketingToggleProps> = (props) => {
 	const { id, description, selected, title, onClick } = props;
 	return (
 		<div
+			key={id}
 			data-cy={id}
 			css={[
 				standardSansText,

client/components/mma/identity/MarketingToggle.tsx

@@ -1,7 +1,8 @@
+import { css } from '@emotion/react';
 import { palette } from '@guardian/source/foundations';
+import { Checkbox } from '@guardian/source/react-components';
 import type { FC } from 'react';
 import { sans } from '../../../styles/fonts';
-import { Checkbox } from '../shared/Checkbox';
 
 interface NewsletterPreferenceProps {
 	id: string;
@@ -113,29 +114,31 @@ export const NewsletterPreference: FC<NewsletterPreferenceProps> = (props) => {
 
 	return (
 		<div
-			data-cy={id}
-			onClick={interact}
+			key={id}
 			css={[
 				standardText,
 				{
 					lineHeight: '1.333',
 					marginTop: '12px',
-					paddingLeft: '30px',
-					position: 'relative',
 				},
 			]}
 		>
-			<div css={{ position: 'absolute', left: 0 }}>
-				<Checkbox
-					checked={!!selected}
-					onChange={interact}
-					label={accessibleLabel}
-					hideLabel={true}
-				/>
-			</div>
-			{title && getTitle(title)}
-			{getDescription(description)}
-			{frequency && getFrequency(frequency)}
+			<Checkbox
+				data-cy={id}
+				checked={!!selected}
+				onChange={interact}
+				label={title && getTitle(title)}
+				aria-label={accessibleLabel}
+				supporting={
+					<div>
+						{getDescription(description)}
+						{frequency && getFrequency(frequency)}
+					</div>
+				}
+				cssOverrides={css`
+					align-items: start;
+				`}
+			/>
 		</div>
 	);
 };

client/components/mma/identity/NewsletterPreference.tsx

@@ -47,7 +47,6 @@ const consentPreference = (
 	const { id, name, description, subscribed } = consent;
 	const props = {
 		id,
-		key: id,
 		title: name,
 		description,
 		selected: subscribed,