function Playback()

in support-frontend/assets/components/directDebit/directDebitProgressiveDisclosure/components/playback.tsx [57:139]
73 lines of code
2 McCabe index (conditional complexity)

function Playback(props: {
	editDirectDebitClicked: (event: React.MouseEvent<HTMLButtonElement>) => void;
	onSubmit: (event: React.MouseEvent<HTMLButtonElement>) => void;
	accountHolderName: string;
	accountNumber: string;
	sortCode: string;
	buttonText: string;
	allErrors: Array<Record<string, string>>;
	setRecaptchaToken: (token: string) => void;
	expireRecaptchaToken?: () => void;
	recaptchaError: string;
}): JSX.Element {
	const subscribeButtonRef = useRef<HTMLDivElement>(null);

	// Actively moving focus to the buttons prevents a screenreader 'losing its place' in the document
	// after we switch to this component, and means the user can more easily edit or confirm
	useEffect(() => {
		subscribeButtonRef.current?.focus();
	}, [subscribeButtonRef]);

	return (
		<div css={directDebitForm}>
			<div aria-live="polite">
				<label htmlFor="account-holder-name-input" css={fieldLabel}>
					Account name
				</label>
				<span css={fieldData}>{props.accountHolderName}</span>

				<label htmlFor="sort-code-input" css={fieldLabel}>
					Sort Code
				</label>
				<span css={fieldData}>{props.sortCode}</span>

				<label htmlFor="account-number-input" css={fieldLabel}>
					Account number
				</label>
				<span css={fieldData}>{props.accountNumber}</span>

				<label htmlFor="confirmation-text__locked" css={fieldLabel}>
					Declaration
				</label>
				<p id="confirmation-text__locked" css={fieldInfo}>
					I have confirmed that I am the account holder and that I am solely
					able to authorise debit from the account
				</p>
				<p css={fieldInfoWithMargin}>
					If the details above are correct, press confirm to set up your direct
					debit, otherwise press back to make changes
				</p>
			</div>

			<div css={recaptchaContainer}>
				<RecaptchaField
					label="Security check"
					id={recaptchaId}
					error={props.recaptchaError}
					onRecaptchaCompleted={props.setRecaptchaToken}
					onRecaptchaExpired={props.expireRecaptchaToken}
				/>
			</div>

			<div css={ctaContainer} ref={subscribeButtonRef} tabIndex={-1}>
				<ThemeProvider theme={buttonThemeReaderRevenueBrandAlt}>
					<Button onClick={props.editDirectDebitClicked}>Edit</Button>
				</ThemeProvider>
				<ThemeProvider theme={buttonThemeReaderRevenueBrand}>
					<Button
						id="qa-submit-button-2"
						onClick={props.onSubmit}
						icon={<SvgArrowRightStraight />}
						iconSide="right"
					>
						{props.buttonText}
					</Button>
				</ThemeProvider>
			</div>

			{props.allErrors.length > 0 && (
				<ErrorSummary errors={[...props.allErrors]} />
			)}
		</div>
	);
}