From 702c223f2e6484663cc18fb0cb7720eeb60dd70c Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sun, 6 Oct 2024 15:59:48 +0300
Subject: [PATCH] Require confirmation if submitting a low point value

---
 .../components/MatchActions.tsx               | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/app/features/tournament-bracket/components/MatchActions.tsx b/app/features/tournament-bracket/components/MatchActions.tsx
index 1899ede56..768dbd047 100644
--- a/app/features/tournament-bracket/components/MatchActions.tsx
+++ b/app/features/tournament-bracket/components/MatchActions.tsx
@@ -136,6 +136,7 @@ export function MatchActions({
 					<input type="hidden" name="position" value={position} />
 					{!revising && (
 						<ReportScoreButtons
+							key={scores.join("-")}
 							winnerIdx={winnerId ? winningTeamIdx() : undefined}
 							points={showPoints ? points : undefined}
 							winnerOfSetName={winnerOfSetName()}
@@ -211,7 +212,9 @@ function ReportScoreButtons({
 	const user = useUser();
 	const tournament = useTournament();
 	const confirmCheckId = React.useId();
+	const pointConfirmCheckId = React.useId();
 	const [endConfirmation, setEndConfirmation] = React.useState(false);
+	const [pointConfirmation, setPointConfirmation] = React.useState(false);
 
 	if (matchLocked) {
 		return (
@@ -263,12 +266,21 @@ function ReportScoreButtons({
 		return "text-warning";
 	};
 
+	const lowPoints = points?.every((point) => point < 10);
+	const submitButtonDisabled = () => {
+		if (wouldEndSet && !endConfirmation) return true;
+		if (lowPoints && !pointConfirmation) return true;
+
+		return false;
+	};
+
 	return (
 		<div className="stack md items-center">
 			{wouldEndSet ? (
 				<div className="stack horizontal sm items-center">
 					<input
 						type="checkbox"
+						checked={endConfirmation}
 						onChange={(e) => setEndConfirmation(e.target.checked)}
 						id={confirmCheckId}
 						data-testid="end-confirmation"
@@ -281,11 +293,25 @@ function ReportScoreButtons({
 					</Label>
 				</div>
 			) : null}
+			{lowPoints ? (
+				<div className="stack horizontal sm items-center">
+					<input
+						type="checkbox"
+						checked={pointConfirmation}
+						onChange={(e) => setPointConfirmation(e.target.checked)}
+						id={pointConfirmCheckId}
+					/>
+					<Label spaced={false} htmlFor={pointConfirmCheckId}>
+						Confirm reporting of low score value (
+						{points!.map((p) => `${p}p`).join(" & ")})
+					</Label>
+				</div>
+			) : null}
 			<SubmitButton
 				size="tiny"
 				_action="REPORT_SCORE"
 				testId="report-score-button"
-				disabled={wouldEndSet && !endConfirmation}
+				disabled={submitButtonDisabled()}
 			>
 				{wouldEndSet ? "Report & end set" : "Report"}
 			</SubmitButton>