Update selected booking slot styles

Author: davinotdavid

frontend/src/locales/de.json

@@ -370,6 +370,7 @@
     "off": "Aus",
     "on": "An",
     "online": "Online",
+    "onlineMeeting": "Online-Meeting",
     "open": "Offen",
     "openMenu": "Menü öffnen",
     "openMyPage": "Meinen Link öffnen",

frontend/src/locales/en.json

@@ -373,6 +373,7 @@
     "off": "Off",
     "on": "On",
     "online": "Online",
+    "onlineMeeting": "Online meeting",
     "open": "Open",
     "openMenu": "Open menu",
     "openMyPage": "Open my page",

frontend/src/models.ts

@@ -16,11 +16,6 @@ export type Attendee = {
   timezone: string;
 };
 
-export type GuestUserInfo = {
-  name?: string;
-  email: string;
-}
-
 export type Slot = {
   id: number;
   start: Dayjs|string;

frontend/src/stores/booking-view-store.ts

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia';
 import { ref, inject } from 'vue';
 import { BookingCalendarView } from '@/definitions';
-import { Appointment, Attendee, Slot, GuestUserInfo } from '@/models';
+import { Appointment, Attendee, Slot } from '@/models';
 import { dayjsKey } from '@/keys';
 
 /**
@@ -19,8 +19,6 @@ export const useBookingViewStore = defineStore('bookingView', () => {
   const selectedEvent = ref<Appointment & Slot>(null); // The selected slot also needs some data from its parent
   const appointment = ref<Appointment>(null);
   const attendee = ref<Attendee>(null); // Attendee can either be a guest or an actual user
-  const guestUserInfo = ref<GuestUserInfo>({ name: '', email: '' }); // Used in the SlotSelectionUserInfo form
-  const guestUserInfoValid = ref<boolean>(false); // Used in the SlotSelectionUserInfo form
 
   /**
    * Restore default state, set date to today and remove other data
@@ -31,7 +29,6 @@ export const useBookingViewStore = defineStore('bookingView', () => {
     selectedEvent.value = null;
     appointment.value = null;
     attendee.value = null;
-    guestUserInfo.value = { name: '', email: '' };
   };
 
   return {
@@ -42,8 +39,6 @@ export const useBookingViewStore = defineStore('bookingView', () => {
     selectedEvent,
     appointment,
     attendee,
-    guestUserInfo,
-    guestUserInfoValid,
     // Funcs
     $reset,
   };

frontend/src/views/BookerView/components/BookingViewSlotSelection.vue

@@ -76,15 +76,15 @@ async function onDateChange(dateObj: TimeFormatted) {
           :selectable-slots="appointment.slots"
           @event-selected="selectEvent"
         />
-
-        <div class="calendar-footer">
-          <ph-globe size="16" />
-          <span>{{ t('label.timeZone') }}: {{ timezone }}</span>
-        </div>
       </div>
-  
+
       <slot-selection-aside />
     </div>
+
+    <div class="calendar-footer">
+      <ph-globe size="16" />
+      <span>{{ t('label.timeZone') }}: {{ timezone }}</span>
+    </div>
   </template>
 </template>
 
@@ -103,14 +103,14 @@ async function onDateChange(dateObj: TimeFormatted) {
 
 .calendar-container {
   flex: 1;
+}
 
-  .calendar-footer {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    margin-block: 1.25rem;
-    font-size: 0.6875rem;
-  }
+.calendar-footer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-block: 1.25rem;
+  font-size: 0.6875rem;
 }
 
 @media (--md) {

frontend/src/views/BookerView/components/SlotSelectionAside.vue

@@ -1,20 +1,19 @@
 <script setup lang="ts">
-import { computed, inject, ref } from 'vue';
+import { computed, inject, ref, useTemplateRef } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
 import {
   PhCalendarBlank,
   PhClock,
   PhMapPin
 } from '@phosphor-icons/vue';
-import { PrimaryButton } from '@thunderbirdops/services-ui';
+import { TextInput, PrimaryButton } from '@thunderbirdops/services-ui';
 import { dayjsKey, callKey } from '@/keys';
 import { SlotResponse } from '@/models';
 import { usePosthog, posthog } from '@/composables/posthog';
 import { useBookingViewStore } from '@/stores/booking-view-store';
 import { useUserStore } from '@/stores/user-store';
 import { BookingCalendarView, MetricEvents, AlertSchemes } from '@/definitions';
-import SlotSelectionUserInfo from './SlotSelectionUserInfo.vue';
 import AlertBox from '@/elements/AlertBox.vue';
 
 const { t } = useI18n();
@@ -26,14 +25,16 @@ const userStore = useUserStore();
 const {
   appointment,
   selectedEvent,
-  guestUserInfo,
-  guestUserInfoValid,
   attendee,
   activeView
 } = storeToRefs(useBookingViewStore());
 
+const userInfoForm = useTemplateRef<HTMLFormElement>('userInfoForm');
+
 const bookingRequestLoading = ref<boolean>(false);
 const bookingRequestError = ref<string>('');
+const guestUserName = ref<string>('');
+const guestUserEmail = ref<string>('');
 
 const timezone = computed(() => dj.tz.guess());
 const selectedSlotDate = computed(() => dj(selectedEvent.value?.start).format('LL'))
@@ -51,6 +52,11 @@ const selectedSlotTimeDuration = computed(() => {
  * Book or request to book a selected time.
  */
 const bookEvent = async () => {
+  if (!userInfoForm.value.checkValidity()) {
+    userInfoForm.value.reportValidity();
+    return;
+  }
+
   bookingRequestLoading.value = true;
   bookingRequestError.value = '';
 
@@ -60,8 +66,8 @@ const bookEvent = async () => {
     name: userStore.data.name,
     timezone: userStore.data.settings.timezone,
   } : {
-    email: guestUserInfo.value.email,
-    name: guestUserInfo.value.name,
+    email: guestUserEmail.value,
+    name: guestUserName.value,
     timezone: timezone.value,
   }
 
@@ -142,27 +148,35 @@ const bookEvent = async () => {
         </div>
       </div>
 
-      <slot-selection-user-info />
-
-      <alert-box
-        v-if="bookingRequestError"
-        :alert="{ title: bookingRequestError }"
-        :scheme="AlertSchemes.Error"
-        @close="bookingRequestError = ''"
-        class="booking-request-error"
-      />
-
-      <primary-button
-        v-if="selectedEvent"
-        :label="t('label.confirmSelection')"
-        :disabled="bookingRequestLoading || !guestUserInfoValid"
-        @click="bookEvent"
-        :title="t('label.confirm')"
-        class="confirm-selection-button"
-        data-testid="booking-view-confirm-selection-button"
-      >
-        {{ t('label.confirmSelection') }}
-      </primary-button>
+      <form ref="userInfoForm" class="user-info-form" @submit.prevent @keyup.enter="bookEvent">
+        <text-input required name="booker-view-user-name" v-model="guestUserName">
+          {{ t('label.name') }}
+        </text-input>
+
+        <text-input required type="email" name="booker-view-user-email" v-model="guestUserEmail">
+          {{ t('label.email') }}
+        </text-input>
+
+        <alert-box
+          v-if="bookingRequestError"
+          :alert="{ title: bookingRequestError }"
+          :scheme="AlertSchemes.Error"
+          @close="bookingRequestError = ''"
+          class="booking-request-error"
+        />
+
+        <primary-button
+          v-if="selectedEvent && userInfoForm"
+          :label="t('label.confirmSelection')"
+          :disabled="bookingRequestLoading"
+          @click="bookEvent"
+          :title="t('label.confirm')"
+          class="confirm-selection-button"
+          data-testid="booking-view-confirm-selection-button"
+        >
+          {{ t('label.confirmSelection') }}
+        </primary-button>
+      </form>
 
       <p
         v-if="selectedEvent && !appointment.booking_confirmation"
@@ -276,6 +290,12 @@ aside {
     }
   }
 
+  .user-info-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  } 
+
   .booking-request-error {
     margin-block: 1rem;
     border-radius: 0.25rem;
@@ -285,11 +305,7 @@ aside {
   }
 
   .booking-request-error {
-    margin-block: 1rem 0;
-  }
-
-  .confirm-selection-button {
-    margin-block-start: 1rem;
+    margin-block: 0;
   }
 
   .confirmation-footer-note {

frontend/src/views/BookerView/components/SlotSelectionHeader.vue

@@ -20,11 +20,13 @@ const { appointment } = storeToRefs(calendarStore);
       <div class="booking-header-time-place">
         <div class="booking-header-time-place-item">
           <ph-clock size="16" />
-          <span>{{ appointment.slot_duration }} minutes</span>
+          <span>{{ t('units.minutes', { value: appointment.slot_duration }) }}</span>
         </div>
         <div class="booking-header-time-place-item">
           <ph-map-pin size="16" />
-          <span>Online meeting</span>
+          <!-- TODO: We are currently only allowing for events to be online but the backend defaults to in person -->
+          <!-- <span>{{ selectedEvent.location_type === EventLocationType.Online ? t('label.virtual') : t('label.inPerson') }}</span> -->
+          <span>{{ t('label.onlineMeeting') }}</span>
         </div>
       </div>
     </div>