fix: add an extra confirmation step to appointment booking

appinfo/routes.php

@@ -23,7 +23,8 @@
 		['name' => 'appointment#show', 'url' => '/appointment/{token}', 'verb' => 'GET'],
 		['name' => 'booking#getBookableSlots', 'url' => '/appointment/{appointmentConfigToken}/slots', 'verb' => 'GET'],
 		['name' => 'booking#bookSlot', 'url' => '/appointment/{appointmentConfigToken}/book', 'verb' => 'POST'],
-		['name' => 'booking#confirmBooking', 'url' => '/appointment/confirm/{token}', 'verb' => 'GET'],
+		['name' => 'booking#showConfirmBooking', 'url' => '/appointment/confirm/{token}', 'verb' => 'GET'],
+		['name' => 'booking#confirmBooking', 'url' => '/appointment/confirm/{token}', 'verb' => 'POST'],
 		// Public views
 		['name' => 'publicView#public_index_with_branding', 'url' => '/p/{token}', 'verb' => 'GET'],
 		['name' => 'publicView#public_index_with_branding', 'url' => '/p/{token}/{view}/{timeRange}', 'verb' => 'GET', 'postfix' => 'publicview.timerange'],

lib/Controller/BookingController.php

@@ -204,7 +204,7 @@
 	 * @return TemplateResponse
 	 * @throws Exception
 	 */
-	public function confirmBooking(string $token): TemplateResponse {
+	public function showConfirmBooking(string $token): TemplateResponse {
 		try {
 			$booking = $this->bookingService->findByToken($token);
 		} catch (ClientException $e) {
@@ -229,27 +229,50 @@
 			);
 		}
 
-		$link = $this->urlGenerator->linkToRouteAbsolute('calendar.appointment.show', [ 'token' => $config->getToken() ]);
-		try {
-			$booking = $this->bookingService->confirmBooking($booking, $config);
-		} catch (ClientException $e) {
-			$this->logger->warning($e->getMessage(), ['exception' => $e]);
-		}
+		$link = $this->urlGenerator->linkToRouteAbsolute('calendar.appointment.show', ['token' => $config->getToken()]);
 
-		$this->initialState->provideInitialState(
-			'appointment-link',
-			$link
-		);
-		$this->initialState->provideInitialState(
-			'booking',
-			$booking
-		);
+		$this->initialState->provideInitialState('appointment-link', $link);
+		$this->initialState->provideInitialState('booking', $booking);
+		$this->initialState->provideInitialState('booking-token', $token);
 
 		return new TemplateResponse(
 			Application::APP_ID,
-			'appointments/booking-conflict',
+			'appointments/confirmation',
 			[],
 			TemplateResponse::RENDER_AS_GUEST
 		);
 	}
+
+	/**
+	 * @PublicPage
+	 * @NoCSRFRequired
+	 *
+	 * @param string $token
+	 * @return JsonResponse
+	 * @throws Exception
+	 */
+	public function confirmBooking(string $token): JsonResponse {
+		try {
+			$booking = $this->bookingService->findByToken($token);
+		} catch (ClientException $e) {
+			$this->logger->warning($e->getMessage(), ['exception' => $e]);
+			return JsonResponse::fail(null, Http::STATUS_NOT_FOUND);
+		}
+
+		try {
+			$config = $this->appointmentConfigService->findById($booking->getApptConfigId());
+		} catch (ServiceException $e) {
+			$this->logger->error($e->getMessage(), ['exception' => $e]);
+			return JsonResponse::fail(null, Http::STATUS_NOT_FOUND);
+		}
+
+		try {
+			$booking = $this->bookingService->confirmBooking($booking, $config);
+		} catch (ClientException $e) {
+			$this->logger->warning($e->getMessage(), ['exception' => $e]);
+			return JsonResponse::fail('slot_unavailable', Http::STATUS_CONFLICT);
+		}
+
+		return JsonResponse::success(['confirmed' => $booking->getConfirmed()]);
+	}
 }

src/appointments/main-confirmation.js

@@ -11,7 +11,6 @@ import { createApp } from 'vue'
 import Confirmation from '../views/Appointments/Confirmation.vue'
 
 // CSP config for webpack dynamic chunk loading
-
 __webpack_nonce__ = btoa(getRequestToken())
 
 // Correct the root of the app for chunk loading
@@ -21,10 +20,14 @@ __webpack_nonce__ = btoa(getRequestToken())
 // eslint-disable-next-line
 __webpack_public_path__ = linkTo('calendar', 'js/')
 
+const link = loadState('calendar', 'appointment-link')
 const booking = loadState('calendar', 'booking')
+const token = loadState('calendar', 'booking-token')
 
 const app = createApp(Confirmation, {
+	link,
 	booking,
+	token,
 })
 
 app.config.globalProperties.$t = translate

src/views/Appointments/Confirmation.vue

@@ -3,40 +3,151 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div class="update">
-		{{ $t('calendar', 'The slot for your appointment has been confirmed') }}
-		<br>
-		<br>
-		{{ $t('calendar', 'Appointment Details:') }}
-		<br>
-		{{ $t('calendar', 'Time:') }} <b>{{ startDate }}</b> - <b>{{ endDate }}</b>
-		<br>
-		{{ $t('calendar', 'Booked for:') }} {{ booking.displayName }} ({{ booking.email }})
-		<br>
-		<br>
+	<div class="guest-box">
+		<!-- Reuse Conflict for post-confirmation outcomes -->
+		<Conflict
+			v-if="status !== 'pending'"
+			:link="link"
+			:confirmed="status === 'confirmed'"
+			:start="booking.start"
+			:end="booking.end" />
+
+		<div v-else class="update">
+			<h2>{{ $t('calendar', 'Confirm your appointment') }}</h2>
+			<div class="booking__date">
+				<IconCalendar :size="16" />
+				{{ date }}
+			</div>
+			<div class="booking__time">
+				<IconTime :size="16" />
+				{{ startTime }} – {{ endTime }}
+			</div>
+			<div class="booking__time">
+				<IconTimezone :size="16" />
+				{{ booking.timezone }}
+			</div>
+			<div class="booking__attendee">
+				<IconAccount :size="16" />
+				{{ booking.displayName }} ({{ booking.email }})
+			</div>
+			<NcNoteCard v-if="error" type="error">
+				{{ $t('calendar', 'Could not confirm the appointment. Please try again later or contact the organizer.') }}
+			</NcNoteCard>
+			<div class="buttons">
+				<NcLoadingIcon v-if="loading" :size="32" />
+				<NcButton variant="primary" :disabled="loading" @click="confirm">
+					<template #icon>
+						<IconCheck :size="16" />
+					</template>
+					{{ $t('calendar', 'Confirm') }}
+				</NcButton>
+			</div>
+		</div>
 	</div>
 </template>
 
 <script>
-import moment from '@nextcloud/moment'
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+import { NcButton, NcLoadingIcon, NcNoteCard } from '@nextcloud/vue'
+import IconAccount from 'vue-material-design-icons/AccountOutline.vue'
+import IconCalendar from 'vue-material-design-icons/CalendarOutline.vue'
+import IconCheck from 'vue-material-design-icons/CheckOutline.vue'
+import IconTime from 'vue-material-design-icons/ClockTimeFourOutline.vue'
+import IconTimezone from 'vue-material-design-icons/Web.vue'
+import Conflict from './Conflict.vue'
+import { timeStampToLocaleDate, timeStampToLocaleTime } from '../../utils/localeTime.js'
 
 export default {
 	name: 'Confirmation',
+
+	components: {
+		Conflict,
+		NcButton,
+		NcLoadingIcon,
+		NcNoteCard,
+		IconAccount,
+		IconCheck,
+		IconCalendar,
+		IconTime,
+		IconTimezone,
+	},
+
 	props: {
 		booking: {
 			required: true,
 			type: Object,
 		},
+
+		link: {
+			required: true,
+			type: String,
+		},
+
+		token: {
+			required: true,
+			type: String,
+		},
+	},
+
+	data() {
+		return {
+			status: 'pending',
+			loading: false,
+			error: false,
+		}
 	},
 
 	computed: {
-		startDate() {
-			return moment(this.booking.start * 1000).format('LLL')
+		date() {
+			return timeStampToLocaleDate(this.booking.start, this.booking.timezone)
+		},
+
+		startTime() {
+			return timeStampToLocaleTime(this.booking.start, this.booking.timezone)
+		},
+
+		endTime() {
+			return timeStampToLocaleTime(this.booking.end, this.booking.timezone)
 		},
+	},
 
-		endDate() {
-			return moment(this.booking.end * 1000).format('LLL')
+	methods: {
+		async confirm() {
+			this.loading = true
+			this.error = false
+			try {
+				const url = generateUrl('/apps/calendar/appointment/confirm/{token}', { token: this.token })
+				await axios.post(url)
+				this.status = 'confirmed'
+			} catch (e) {
+				if (e.response?.status === 409) {
+					this.status = 'conflict'
+				} else {
+					this.error = true
+				}
+			} finally {
+				this.loading = false
+			}
 		},
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.booking__date,
+.booking__time,
+.booking__attendee {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	padding-top: 10px;
+}
+
+.buttons {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin-top: 20px;
+}
+</style>