Fix cancel button in update encounter form

public/locale/en.json

@@ -1472,6 +1472,9 @@
   "quantity_approved": "Quantity Approved",
   "quantity_requested": "Quantity Requested",
   "quantity_required": "Quantity Required",
+  "questionnaire": "Questionnaire",
+  "questionnaire_error_loading": "Error loading questionnaire",
+  "questionnaire_not_exist": "The questionnaire you tried to access does not exist.",
   "raise_consent_request": "Raise a consent request to fetch patient records over ABDM",
   "ration_card__APL": "APL",
   "ration_card__BPL": "BPL",

src/components/Patient/EncounterQuestionnaire.tsx

@@ -1,10 +1,13 @@
+import { t } from "i18next";
 import { navigate } from "raviger";
 
 import { Card, CardContent } from "@/components/ui/card";
 
 import Page from "@/components/Common/Page";
 import { QuestionnaireForm } from "@/components/Questionnaire/QuestionnaireForm";
 
+import useAppHistory from "@/hooks/useAppHistory";
+
 interface Props {
   facilityId: string;
   patientId: string;
@@ -20,9 +23,10 @@ export default function EncounterQuestionnaire({
   questionnaireSlug,
   subjectType,
 }: Props) {
+  const { goBack } = useAppHistory();
   return (
     <Page
-      title="Questionnaire"
+      title={t("questionnaire")}
       backUrl={`/facility/${facilityId}/patient/${patientId}/encounter/${encounterId}`}
     >
       <Card className="mt-2">
@@ -42,6 +46,7 @@ export default function EncounterQuestionnaire({
                 navigate(`/patient/${patientId}/updates`);
               }
             }}
+            onCancel={() => goBack()}
           />
         </CardContent>
       </Card>

src/components/Questionnaire/QuestionnaireForm.tsx

@@ -1,3 +1,4 @@
+import { t } from "i18next";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 
@@ -104,13 +105,10 @@ export function QuestionnaireForm({
   }
 
   if (questionnaireError) {
-    console.log(questionnaireError);
     return (
       <Alert variant="destructive" className="m-4">
-        <AlertTitle>Error loading questionnaire</AlertTitle>
-        <AlertDescription>
-          The questionnaire you tried to access does not exist.
-        </AlertDescription>
+        <AlertTitle>{t("questionnaire_error_loading")}</AlertTitle>
+        <AlertDescription>{t("questionnaire_not_exist")}</AlertDescription>
       </Alert>
     );
   }
@@ -406,7 +404,7 @@ export function QuestionnaireForm({
               onClick={onCancel}
               disabled={isProcessing}
             >
-              Cancel
+              {t("cancel")}
             </Button>
             <Button
               type="button"
@@ -416,13 +414,13 @@ export function QuestionnaireForm({
             >
               {isProcessing ? (
                 <>
-                  <span className="opacity-0">Submit</span>
+                  <span className="opacity-0">{t("submit")}</span>
                   <div className="absolute inset-0 flex items-center justify-center">
                     <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-white" />
                   </div>
                 </>
               ) : (
-                "Submit"
+                t("submit")
               )}
             </Button>
           </div>