Added confirmation dialog when skipping after entering text

website/public/locales/de/tasks.json

@@ -1,5 +1,6 @@
 {
   "available_task_count": "{{count}} Aufgaben verfügbar",
+  "skip_confirmation": "Sind Sie sicher das sie überspringen wollen?",
   "classify_assistant_reply": {
     "label": "Antwort des Assistenten klassifizieren",
     "desc": "Labeln Sie die Antwort.",

website/public/locales/en/tasks.json

@@ -1,6 +1,7 @@
 {
   "any_feedback_on_this_task": "Any feedback on this task?",
   "available_task_count": "{{count}} tasks available",
+  "skip_confirmation": "Are you sure you want to skip?",
   "default": {
     "unchanged_title": "No changes",
     "unchanged_message": "Are you sure you would like to continue?",

website/src/components/Buttons/Skip.tsx

@@ -0,0 +1,62 @@
+import {
+  Button,
+  ButtonProps,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  useDisclosure,
+} from "@chakra-ui/react";
+import { useTranslation } from "next-i18next";
+
+interface SkipButtonProps extends ButtonProps {
+  onSkip: () => void;
+  confirmSkip: boolean;
+}
+
+export const SkipButton = ({ ...props }: SkipButtonProps) => {
+  const { t } = useTranslation();
+  const { isOpen, onOpen: showModal, onClose: closeModal } = useDisclosure();
+
+  const onClick = () => {
+    if (props.confirmSkip) {
+      showModal();
+    } else {
+      props.onSkip();
+    }
+  };
+
+  const onConfirmedSkip = () => {
+    closeModal();
+    props.onSkip();
+  };
+
+  return (
+    <>
+      <Button size="lg" variant="solid" {...props} onClick={onClick}>
+        {t("skip")}
+      </Button>
+      <Modal isOpen={isOpen} onClose={closeModal}>
+        <ModalOverlay></ModalOverlay>
+        <ModalContent>
+          <ModalCloseButton></ModalCloseButton>
+          <ModalHeader>{t("skip")}</ModalHeader>
+          <ModalBody>
+            <div>{t("tasks:skip_confirmation")}</div>
+          </ModalBody>
+          <ModalFooter>
+            <Button mr={3} onClick={onConfirmedSkip}>
+              {t("yes")}
+            </Button>
+            <Button colorScheme="blue" onClick={closeModal}>
+              {t("no")}
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};

website/src/components/Survey/TaskControls.tsx

@@ -1,11 +1,13 @@
-import { Button, Card, Flex, IconButton, Progress, Tooltip } from "@chakra-ui/react";
+import { Card, Flex, IconButton, Progress, Tooltip } from "@chakra-ui/react";
 import { Edit2 } from "lucide-react";
 import { useTranslation } from "next-i18next";
 import { SubmitButton } from "src/components/Buttons/Submit";
 import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
 import { TaskStatus } from "src/components/Tasks/Task";
 import { BaseTask } from "src/types/Task";
 
+import { SkipButton } from "../Buttons/Skip";
+
 export interface TaskControlsProps {
   task: BaseTask;
   taskStatus: TaskStatus;
@@ -39,9 +41,11 @@ export const TaskControls = ({
         <Flex width={["full", "fit-content"]} justify="center" ml="auto" gap={2}>
           {taskStatus.mode === "EDIT" ? (
             <>
-              <Button size="lg" variant="outline" onClick={onSkip} isLoading={isRejecting}>
-                {t("skip")}
-              </Button>
+              <SkipButton
+                onSkip={onSkip}
+                confirmSkip={taskStatus.replyValidity === "VALID"}
+                isLoading={isRejecting}
+              ></SkipButton>
               <SubmitButton
                 colorScheme="blue"
                 data-cy="review"