feat: improve button labels for questionnaire completion

Author: stampaaaron

apps/frontend/src/routes/_auth/questionnaire/_questionnaire/$id/remarks.tsx

@@ -1,5 +1,5 @@
 import { Button, Group, isSameOrAfter, Stack, Textarea, useForm } from "@quassel/ui";
-import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { i18n } from "../../../../../stores/i18n";
 import { useStore } from "@nanostores/react";
 import { $api } from "../../../../../stores/api";
@@ -8,11 +8,11 @@ import { components } from "../../../../../api.gen";
 import { useQueryClient } from "@tanstack/react-query";
 
 export const messages = i18n("questionnaireRemarks", {
+  actionBack: "Back (Save)",
+  actionContinueNextPeriod: "Continue with next period",
+  actionCompleteQuestionnaire: "Complete questionnaire",
   title: "Add remarks",
   remarkDescription: "Use this field to point out any exceptions to the language exposure like vacations etc...",
-  backAction: "Back",
-  saveAction: "Save",
-  formAction: "Save and complete",
 });
 
 type FormValues = {
@@ -36,6 +36,8 @@ function QuestionnaireRemarks() {
   const { data: questionnaire } = $api.useSuspenseQuery("get", "/questionnaires/{id}", { params: { path: { id: p.id } } });
   const updateMutation = $api.useMutation("patch", "/questionnaires/{id}");
 
+  const isLastQuestionnaire = isSameOrAfter(new Date(Date.parse(questionnaire.endedAt)), new Date(), "month");
+
   useEffect(() => {
     if (questionnaire) {
       f.setValues(questionnaire);
@@ -46,10 +48,15 @@ function QuestionnaireRemarks() {
   const onSave = (values: components["schemas"]["QuestionnaireMutationDto"]) =>
     updateMutation.mutateAsync({ params: { path: p }, body: values });
 
+  const handleBackAndSave = async () => {
+    await onSave(f.getValues());
+    n({ to: "/questionnaire/$id/entries", params: p });
+  };
+
   const handleSubmit = async (values: FormValues) => {
     await onSave({ ...values, completedAt: new Date().toISOString() });
 
-    if (isSameOrAfter(new Date(Date.parse(questionnaire.endedAt)), new Date(), "month")) {
+    if (isLastQuestionnaire) {
       n({ to: "/questionnaire/completed" });
     } else {
       await c.invalidateQueries(
@@ -67,14 +74,11 @@ function QuestionnaireRemarks() {
         <Textarea {...f.getInputProps("remark")} description={t.remarkDescription} rows={8} />
 
         <Group>
-          <Link to="/questionnaire/$id/entries" params={p}>
-            <Button variant="light">{t.backAction}</Button>
-          </Link>
-          <Button variant="outline" onClick={() => onSave(f.getValues())} loading={updateMutation.isPending}>
-            {t.saveAction}
+          <Button variant="light" onClick={handleBackAndSave} loading={updateMutation.isPending}>
+            {t.actionBack}
           </Button>
           <Button type="submit" loading={updateMutation.isPending}>
-            {t.formAction}
+            {isLastQuestionnaire ? t.actionCompleteQuestionnaire : t.actionContinueNextPeriod}
           </Button>
         </Group>
       </Stack>