feat(ZMS-2936): add customer info to appointment

zmscitizenview/src/api/ZMSAppointmentAPI.ts

@@ -93,13 +93,14 @@ export function reserveAppointment(
   timeSlot: number,
   serviceIds: string[],
   serviceCount: number[],
-  providerId: string
+  providerId: string,
 ): Promise<AppointmentDTO | ErrorDTO> {
   const requestBody = {
     timestamp: timeSlot,
     serviceCount: serviceCount,
     officeId: providerId,
     serviceId: serviceIds,
+    captchaSolution: null,
   };
 
   return fetch(
@@ -114,7 +115,7 @@ export function reserveAppointment(
   });
 }
 
-export function updateAppointmentData(
+export function updateAppointment(
   appointment: AppointmentDTO
 ): Promise<AppointmentDTO | ErrorDTO> {
   const requestBody = {

zmscitizenview/src/components/Appointment/AppointmentView.vue

@@ -11,19 +11,20 @@
         :preselected-service-id="serviceId"
         :preselected-offive-id="locationId"
         :t="t"
-        @next="increaseCurrentView"
+        @next="setServices"
       />
       <calendar-view
         v-if="currentView === 1"
+        :selected-service-map="selectedServiceMap"
         :t="t"
         @back="decreaseCurrentView"
-        @next="increaseCurrentView"
+        @next="nextReserveAppointment"
       />
       <customer-info
         v-if="currentView === 2"
         :t="t"
         @back="decreaseCurrentView"
-        @next="increaseCurrentView"
+        @next="nextUpdateAppointment"
       />
     </div>
   </div>
@@ -37,11 +38,20 @@ import CalendarView from "@/components/Appointment/CalendarView.vue";
 import CustomerInfo from "@/components/Appointment/CustomerInfo.vue";
 import ServiceFinder from "@/components/Appointment/ServiceFinder.vue";
 import {
+  CustomerDataProvider,
+  SelectedAppointmentProvider,
   SelectedServiceProvider,
   SelectedTimeslotProvider,
 } from "@/types/ProvideInjectTypes";
 import { ServiceImpl } from "@/types/ServiceImpl";
 import { StepperItem } from "@/types/StepperTypes";
+import {OfficeImpl} from "@/types/OfficeImpl";
+import {
+  reserveAppointment, updateAppointment
+} from "@/api/ZMSAppointmentAPI";
+import {AppointmentDTO} from "@/api/models/AppointmentDTO";
+import {AppointmentImpl} from "@/types/AppointmentImpl";
+import {CustomerData} from "@/types/CustomerData";
 
 const props = defineProps<{
   baseUrl: any;
@@ -84,17 +94,32 @@ const updateSelectedService = (newService: ServiceImpl): void => {
   selectedService.value = newService;
 };
 
+const selectedServiceMap = ref<Map<string, number>>(new Map<string, number>());
+
+const selectedProvider = ref<OfficeImpl>();
 const selectedTimeslot = ref<number>(0);
 
+const customerData = ref<CustomerData>(new CustomerData("","","","",""));
+const appointment = ref<AppointmentImpl>();
+
 provide<SelectedServiceProvider>("selectedServiceProvider", {
   selectedService,
   updateSelectedService,
 } as SelectedServiceProvider);
 
 provide<SelectedTimeslotProvider>("selectedTimeslot", {
+  selectedProvider,
   selectedTimeslot,
 } as SelectedTimeslotProvider);
 
+provide<CustomerDataProvider>("customerData", {
+  customerData: customerData,
+} as CustomerDataProvider);
+
+provide<SelectedAppointmentProvider>("appointment", {
+  appointment,
+} as SelectedAppointmentProvider);
+
 const increaseCurrentView = () => currentView.value++;
 
 const decreaseCurrentView = () => currentView.value--;
@@ -105,11 +130,69 @@ const changeStep = (step: string) => {
   }
 };
 
+const setServices = () => {
+  if (selectedService.value) {
+    if (selectedService.value.count) {
+      selectedServiceMap.value.set(
+        selectedService.value.id,
+        selectedService.value.count
+      );
+    }
+
+    if (selectedService.value.subServices) {
+      selectedService.value.subServices.forEach((subservice) => {
+        if (subservice.count > 0) {
+          selectedServiceMap.value.set(
+            subservice.id.toString(),
+            subservice.count
+          );
+        }
+      });
+    }
+    increaseCurrentView();
+  }
+};
+
+const nextReserveAppointment = () => {
+  increaseCurrentView();
+  reserveAppointment(
+    selectedTimeslot.value,
+    Array.from(selectedServiceMap.value.keys()),
+    Array.from(selectedServiceMap.value.values()),
+    selectedProvider.value.id
+  ).then((data) => {
+    if ((data as AppointmentDTO).processId !== undefined) {
+      appointment.value = data as AppointmentDTO;
+    } else {
+      // error.value = true;
+    }
+  });
+
+};
+
+const nextUpdateAppointment = () => {
+  if(appointment.value) {
+    appointment.value.familyName = customerData.value.firstName +  " " +  customerData.value.lastName;
+    appointment.value.email = customerData.value.mailAddress;
+    appointment.value.telephone = customerData.value.telephoneNumber ? customerData.value.telephoneNumber : undefined;
+    appointment.value.customTextfield = customerData.value.remarks ? customerData.value.remarks : undefined;
+
+    increaseCurrentView();
+    updateAppointment(
+      appointment.value
+    ).then((data) => {
+      if ((data as AppointmentDTO).processId !== undefined) {
+        appointment.value = data as AppointmentDTO;
+        console.log("Appointment: ", appointment.value);
+
+      } else {
+        // error.value = true;
+      }
+    });
+  }
+};
+
 watch(currentView, (newCurrentView) => {
   activeStep.value = newCurrentView.toString();
 });
-
-watch(selectedTimeslot, (newTimeslot) => {
-  console.log("TimeSlot: ", newTimeslot);
-});
 </script>

zmscitizenview/src/components/Appointment/CalendarView.vue

@@ -103,7 +103,8 @@ import {
   SelectedTimeslotProvider,
 } from "@/types/ProvideInjectTypes";
 
-defineProps<{
+const props = defineProps<{
+  selectedServiceMap: Map<string, number>;
   t: any;
 }>();
 
@@ -113,14 +114,12 @@ const { selectedService } = inject<SelectedServiceProvider>(
   "selectedServiceProvider"
 ) as SelectedServiceProvider;
 
-const { selectedTimeslot } = inject<SelectedTimeslotProvider>(
+const { selectedProvider, selectedTimeslot } = inject<SelectedTimeslotProvider>(
   "selectedTimeslot"
 ) as SelectedTimeslotProvider;
 
 const selectableProviders = ref<OfficeImpl[]>();
-const currentProvider = ref<OfficeImpl>();
 const displayInfo = ref<string>();
-const selectedServices = ref<Map<string, number>>(new Map<string, number>());
 const availableDays = ref<string[]>();
 const appointmentTimestamps = ref<number[]>();
 
@@ -182,7 +181,7 @@ const timeSlotsInHours = () => {
 };
 
 const showSelectionForProvider = (provider: OfficeImpl) => {
-  currentProvider.value = provider;
+  selectedProvider.value = provider;
   error.value = false;
 
   if (
@@ -196,9 +195,9 @@ const showSelectionForProvider = (provider: OfficeImpl) => {
   }
 
   fetchAvailableDays(
-    currentProvider.value,
-    Array.from(selectedServices.value.keys()),
-    Array.from(selectedServices.value.values())
+    selectedProvider.value,
+    Array.from(props.selectedServiceMap.keys()),
+    Array.from(props.selectedServiceMap.values())
   ).then((data) => {
     if ((data as AvailableDaysDTO).availableDays !== undefined) {
       availableDays.value = (data as AvailableDaysDTO).availableDays;
@@ -213,9 +212,9 @@ const showSelectionForProvider = (provider: OfficeImpl) => {
 const getAppointmentsOfDay = (date: string) => {
   fetchAvailableTimeSlots(
     date,
-    currentProvider.value,
-    Array.from(selectedServices.value.keys()),
-    Array.from(selectedServices.value.values())
+    selectedProvider.value,
+    Array.from(props.selectedServiceMap.keys()),
+    Array.from(props.selectedServiceMap.values())
   ).then((data) => {
     if (data as AvailableTimeSlotsDTO) {
       appointmentTimestamps.value = (
@@ -263,24 +262,6 @@ const previousStep = () => emit("back");
 
 onMounted(() => {
   if (selectedService.value) {
-    if (selectedService.value.count) {
-      selectedServices.value.set(
-        selectedService.value.id,
-        selectedService.value.count
-      );
-    }
-
-    if (selectedService.value.subServices) {
-      selectedService.value.subServices.forEach((subservice) => {
-        if (subservice.count > 0) {
-          selectedServices.value.set(
-            subservice.id.toString(),
-            subservice.count
-          );
-        }
-      });
-    }
-
     if (selectedService.value.providers && selectedService.value.subServices) {
       const choosenSubservices = selectedService.value.subServices.filter(
         (subservice) => subservice.count > 0

zmscitizenview/src/components/Appointment/CustomerInfo.vue

@@ -2,31 +2,33 @@
   <h2 class="m-component-form__title">Kontaktdaten</h2>
   <form class="m-form m-form--default">
     <muc-input
-      v-model="firstName"
+      v-model="customerData.firstName"
       :error-msg="errorMessageFirstName"
       :label="t('firstName')"
       required
     />
     <muc-input
-      v-model="lastName"
+      v-model="customerData.lastName"
       :error-msg="errorMessageLastName"
       :label="t('lastName')"
       required
     />
     <muc-input
-      v-model="mailAddress"
-      :error-msg="errorMessagemMailAddress"
+      v-model="customerData.mailAddress"
+      :error-msg="errorMessageMailAddress"
       :label="t('mailAddress')"
       required
     />
     <muc-input
-      v-model="telephoneNumber"
-      :error-msg="errorMessagemTelephoneNumber"
+      v-if="telephoneActivated"
+      v-model="customerData.telephoneNumber"
+      :error-msg="errorMessageTelephoneNumber"
       :label="t('telephoneNumber')"
       placeholder="+49 151 1234567"
     />
     <muc-text-area
-      v-model="remarks"
+      v-if="customTextfieldActivated"
+      v-model="customerData.remarks"
       :label="t('remarks')"
       :hint="t('remarkCompletionInstructions')"
     />
@@ -49,47 +51,60 @@
 
 <script setup lang="ts">
 import { MucButton, MucInput, MucTextArea } from "@muenchen/muc-patternlab-vue";
-import { computed, ref } from "vue";
+import {computed, inject} from "vue";
+import {CustomerDataProvider, SelectedAppointmentProvider} from "@/types/ProvideInjectTypes";
 
 const props = defineProps<{
   t: any;
 }>();
 
 const emit = defineEmits<(e: "next" | "back") => void>();
 
-const firstName = ref<string>();
-const lastName = ref<string>();
-const mailAddress = ref<string>();
-const telephoneNumber = ref<string>();
-const remarks = ref<string>();
+const { customerData } = inject<CustomerDataProvider>(
+  "customerData"
+) as CustomerDataProvider;
+
+const { appointment } = inject<SelectedAppointmentProvider>(
+  "appointment"
+) as SelectedAppointmentProvider;
 
 const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 const telephonPattern = /^\+?\d[\d\s]*$/;
 
+const telephoneActivated = () =>
+  appointment.value
+  && appointment.value.scope
+  && appointment.value.scope.telephoneActivated == "1";
+
+const customTextfieldActivated = () =>
+  appointment.value
+  && appointment.value.scope
+  && appointment.value.scope.customTextfieldActivated == "1";
+
 const errorMessageFirstName = computed(() =>
-  firstName.value ? undefined : props.t("errorMessageFirstName")
+  customerData.value.firstName ? undefined : props.t("errorMessageFirstName")
 );
 
 const errorMessageLastName = computed(() =>
-  lastName.value ? undefined : props.t("errorMessageLastName")
+  customerData.value.lastName ? undefined : props.t("errorMessageLastName")
 );
 
-const errorMessagemMailAddress = computed(() => {
-  if (!mailAddress.value) {
+const errorMessageMailAddress = computed(() => {
+  if (!customerData.value.mailAddress) {
     return props.t("errorMessageMailAddressRequired");
-  } else if (!emailPattern.test(mailAddress.value)) {
+  } else if (!emailPattern.test(customerData.value.mailAddress)) {
     return props.t("errorMessageMailAddressValidation");
   } else {
     return undefined;
   }
 });
 
-const errorMessagemTelephoneNumber = computed(() => {
-  if (!telephoneNumber.value && false) {
+const errorMessageTelephoneNumber = computed(() => {
+  if (!customerData.value.telephoneNumber && appointment.value && appointment.value.scope.telephoneRequired == "1") {
     return props.t("errorMessageTelephoneNumberRequired");
   } else if (
-    telephoneNumber.value &&
-    !telephonPattern.test(telephoneNumber.value)
+    customerData.value.telephoneNumber &&
+    !telephonPattern.test(customerData.value.telephoneNumber)
   ) {
     return props.t("errorMessageTelephoneNumberValidation");
   } else {
@@ -101,12 +116,13 @@ const validForm = computed(
   () =>
     !errorMessageFirstName.value &&
     !errorMessageLastName.value &&
-    !errorMessagemMailAddress.value &&
-    !errorMessagemTelephoneNumber.value
+    !errorMessageMailAddress.value &&
+    !errorMessageTelephoneNumber.value
 );
 
 const nextStep = () => emit("next");
 const previousStep = () => emit("back");
+
 </script>
 
 <style scoped></style>