Merge pull request #1423 from it-at-m/feature-zmskvr-526-buttons-after-confirming-the-appointment

feat(ZMSKVR-526): restart-button after confirming the appointment

Author: matthilo96

zmscitizenview/src/components/Appointment/AppointmentView.vue

@@ -160,6 +160,25 @@
               t("appointmentSuccessfullyBookedHeader")
             }}</template>
           </muc-callout>
+          <div
+            v-if="confirmAppointmentSuccess"
+            class="m-button-group"
+          >
+            <!-- Nachfolgender Button kommt mit Ticket ZMSKVR-97. Styling sollte bereits passen.
+                <muc-button
+                  icon="download"
+                  @click="downloadIcsAppointment"
+                >
+                  {{ t("downloadAppointment") }}
+                </muc-button>
+                bis hierhin. -->
+            <muc-button
+              @click="redirectToAppointmentStart"
+              variant="secondary"
+            >
+              {{ t("bookAnotherAppointment") }}
+            </muc-button>
+          </div>
           <muc-callout
             v-if="hasConfirmAppointmentError"
             :type="toCalloutType(apiErrorTranslation.errorType)"
@@ -901,3 +920,31 @@ onMounted(() => {
   }
 });
 </script>
+<style lang="scss" scoped>
+@use "@/styles/breakpoints.scss" as *;
+
+.m-button-group {
+  display: flex;
+  flex-direction: row;
+  margin-top: 1rem;
+}
+
+.button-item {
+  margin-bottom: 0;
+  margin-right: 1rem;
+}
+
+@include xs-down {
+  .m-button-group {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .button-item {
+    margin-right: 0;
+    margin-bottom: 1rem;
+    width: auto;
+    flex: none;
+  }
+}
+</style>

zmscitizenview/src/utils/de-DE.json

@@ -153,6 +153,7 @@
   "arrangeAppointment": "Termin vereinbaren",
   "availableTimes": "Verfügbare Termine",
   "back": "Zurück",
+  "bookAnotherAppointment": "Weiteren Termin vereinbaren",
   "bookAppointment": "Termin reservieren",
   "bookAppointmentStart": "Termin vereinbaren",
   "buttonBackToOverview": "Zurück zur Übersicht",
@@ -169,6 +170,7 @@
   "contact": "Kontakt",
   "contactDetails": "Kontaktdaten",
   "detailTimeHint": "Kommen Sie bitte pünktlich zu Ihrem Termin. In seltenen Fällen kann es vorkommen, dass Sie trotz Termin kurz warten müssen. Bitte haben Sie dafür Verständnis.",
+  "downloadAppointment": "Termin herunterladen (ics)",
   "earlier": "Früher",
   "errorMessageCustomTextfield": "Bitte geben Sie die notwendigen Informationen ein.",
   "errorMessageCustomTextfield2": "Bitte geben Sie die notwendigen Informationen ein.",

zmscitizenview/src/utils/en-US.json

@@ -148,6 +148,7 @@
   "appointmentSuccessfullyCanceledText": "Thank you for cancelling your appointment in favor of others.",
   "availableTimes": "Available dates",
   "back": "Back",
+  "bookAnotherAppointment": "Book another appointment",
   "bookAppointment": "Book appointment",
   "bookAppointmentStart": "Book appointment",
   "calendarView": "Calendar view",
@@ -162,6 +163,7 @@
   "confirmAppointmentText": "In the next minutes you will receive an e-mail with an activation link. Click on the link to finalise the booking. If you do not activate the appointment within {activationMinutes} minutes, your reservation will expire.",
   "contact": "Contact us",
   "contactDetails": "Contact details",
+  "downloadAppointment": "Download Appointment (ics)",
   "earlier": "Earlier",
   "errorMessageCustomTextfield": "Please enter the required information.",
   "errorMessageCustomTextfield2": "Please enter the required information.",

zmscitizenview/tests/unit/AppointmentView.spec.ts

@@ -1241,4 +1241,33 @@ describe("AppointmentView", () => {
     expect(errorCallout.text()).toContain(de.apiErrorGenericFallbackHeader);
   });
   });
+  describe("Book another appointment button", () => {
+    it("renders with correct label and redirects to start when clicked", async () => {
+      const originalLocation = window.location as any;
+      delete (window as any).location;
+      (window as any).location = {
+        ...originalLocation,
+        href: "http://localhost:8082/#/services/000000000000/locations/000000000000",
+        origin: "http://localhost:8082",
+        pathname: "/",
+      };
+
+      const wrapper = createWrapper({ appointmentHash: undefined });
+      wrapper.vm.confirmAppointmentSuccess = true;
+      await nextTick();
+
+      const button = wrapper.find(".m-button-group button");
+      expect(button.exists()).toBe(true);
+
+      const expectedLabel =
+        (de as any).bookAnotherAppointment ?? "bookAnotherAppointment";
+      expect(button.text()).toContain(expectedLabel);
+      expect(button.attributes("variant")).toBe("secondary");
+
+      await button.trigger("click");
+      expect(window.location.href).toBe("http://localhost:8082/");
+
+      (window as any).location = originalLocation;
+    });
+  });
 });