Implement bookers page overhaul

frontend/src/locales/de.json

@@ -220,6 +220,7 @@
     "back": "Zurück",
     "backToTop": "Nach oben scrollen",
     "bookEvent": "Buchen",
+    "bookAppointment": "Termin buchen",
     "booked": "Gebucht",
     "bookingConfirmation": "Bestätigung für Buchungen",
     "bookingDetails": "Buchungsdetails",
@@ -255,14 +256,12 @@
     "confirm": "Bestätigen",
     "confirmed": "Bestätigt",
     "confirmBooking": "Buchung bestätigen",
-    "confirmSelection": "Auswahl bestätigen",
     "connect": "Verbinden",
     "connectCalendar": "Kalender verbinden",
     "connectGoogleCalendar": "Google Kalender verbinden",
     "connectedAs": "Verbunden als {name}",
     "contact": "Kontakt",
     "continue": "Weiter",
-    "continueAsGuest": "Weiter als Gast",
     "contributeToThisSite": "Dieser Seite beitragen",
     "cookies": "Cookies",
     "copied": "Kopiert",
@@ -360,6 +359,7 @@
     "next": "Weiter",
     "nextWeek": "Nächste Woche",
     "no": "Nein",
+    "noneSelected": "Keine Auswahl",
     "earlier": "Früher",
     "notConnected": "Nicht verbunden",
     "notProvided": "Keine Angabe",
@@ -370,6 +370,7 @@
     "off": "Aus",
     "on": "An",
     "online": "Online",
+    "onlineMeeting": "Online-Meeting",
     "open": "Offen",
     "openMenu": "Menü öffnen",
     "openMyPage": "Meinen Link öffnen",
@@ -408,7 +409,7 @@
     "searchAppointments": "Termine durchsuchen",
     "searchForCalendars": "Nach Kalendern suchen",
     "secondaryTimeZone": "Sekundäre Zeitzone",
-    "selectATimeFromTheCalendar": "Zeit aus dem Kalender wählen",
+    "selectATimeFromTheCalendar": "Wähle einen freien Zeitpunkt aus dem Kalender",
     "selectCalendar": "Kalender auswählen",
     "selectDays": "Wochentage auswählen",
     "selectDateForWeek": "Datum für Woche auswählen",
@@ -481,7 +482,8 @@
     "yes": "Ja",
     "youAreBookable": "Du bist verfügbar",
     "youAreNotBookable": "Du bist nicht verfügbar",
-    "youHaveUnsavedChanges": "Du hast ungespeicherte Änderungen"
+    "youHaveUnsavedChanges": "Du hast ungespeicherte Änderungen",
+    "yourAppointmentWillBeConfirmedAutomatically": "Deine Buchung wird automatisch bestätigt."
   },
   "locales": {
     "de": "Deutsch",
@@ -539,6 +541,7 @@
       "completelyRemoveUser": "Hier wird ein Benutzer vollständig aus Thunderbird Appointment entfernt, einschließlich aller Benutzerdaten. Diese Funktion bitte nicht ausführen, wenn es keine Aufforderung dafür gab.",
       "disableAccountFirst": "Das Konto muss zunächst deaktiviert sein."
     },
+    "bookATimeToMeetWith": "Buche einen Zeitpunkt um dich mit {name} zu treffen",
     "calendarDeletionWarning": "Wenn die Verbindung zu diesem Kalender getrennt wird, werden alle Termine und Zeitpläne aus Thunderbird Appointment entfernt. Es werden keine Termine entfernt, die derzeit in diesem Kalender gespeichert sind.",
     "chooseDateAndTime": "Wähle Tag und Zeit für ein Treffen.",
     "connectZoom": "Du kannst dein Zoom-Konto verbinden, um Besprechungen direkt mit einer Zoom-Einladung zu erstellen.",
@@ -560,7 +563,6 @@
     "login": {
       "continueToFxa": "Bitte die E-Mail-Adresse des Mozilla-Kontos eingeben."
     },
-    "nameIsInvitingYou": "{name} lädt dich ein zu",
     "ownerNeedsToConfirmBooking": "Wenn diese Option aktiviert ist, müssen Buchungen dieses Zeitplans bestätigt oder ablehnt werden. Wenn diese Option deaktiviert ist, werden alle Zeiten automatisch bestätigt.",
     "preferredEmailHelp": "Die E-Mail-Adresse festlegen, die für ausgehende Kommunikation in Kalenderereignissen verwendet werden soll.",
     "recipientsCanScheduleBetween": "Empfänger können einen Termin zwischen {earliest} und {farthest} ab dem aktuellen Zeitpunkt wählen. ",

frontend/src/locales/en.json

@@ -222,6 +222,7 @@
     "back": "Back",
     "backToTop": "Back to top",
     "bookEvent": "Book",
+    "bookAppointment": "Book appointment",
     "booked": "Booked",
     "bookingConfirmation": "Booking Confirmation",
     "bookingDetails": "Booking Details",
@@ -257,15 +258,13 @@
     "confirm": "Confirm",
     "confirmed": "Confirmed",
     "confirmBooking": "Confirm booking",
-    "confirmSelection": "Confirm selection",
     "connect": "Connect",
     "connecting": "Connecting",
     "connectCalendar": "Connect calendar",
     "connectGoogleCalendar": "Connect Google Calendar",
     "connectedAs": "Connected as {name}",
     "contact": "Contact",
     "continue": "Continue",
-    "continueAsGuest": "Continue as Guest",
     "contributeToThisSite": "Contribute to this site",
     "cookies": "Cookies",
     "copied": "Copied",
@@ -364,6 +363,7 @@
     "next": "Next",
     "nextWeek": "Next week",
     "no": "No",
+    "noneSelected": "None selected",
     "notConnected": "Not connected",
     "notProvided": "Not Provided",
     "notVerified": "Not Verified",
@@ -373,6 +373,7 @@
     "off": "Off",
     "on": "On",
     "online": "Online",
+    "onlineMeeting": "Online meeting",
     "open": "Open",
     "openMenu": "Open menu",
     "openMyPage": "Open my page",
@@ -411,7 +412,7 @@
     "searchAppointments": "Search bookings",
     "searchForCalendars": "Search for calendars",
     "secondaryTimeZone": "Secondary time zone",
-    "selectATimeFromTheCalendar": "Select a time from the calendar",
+    "selectATimeFromTheCalendar": "Select an open time slot from the calendar.",
     "selectCalendar": "Select calendar",
     "selectDays": "Select days",
     "selectDateForWeek": "Select date for week",
@@ -451,7 +452,7 @@
     "timeFormat": "Time Format",
     "timeOfTheEvent": "Time of the event:",
     "timeUpdated": "Time Updated",
-    "timeZone": "Time Zone",
+    "timeZone": "Timezone",
     "title": "Title",
     "to": "to",
     "today": "Today",
@@ -484,7 +485,8 @@
     "yes": "Yes",
     "youAreBookable": "You're bookable",
     "youAreNotBookable": "You're not bookable",
-    "youHaveUnsavedChanges": "You have unsaved changes"
+    "youHaveUnsavedChanges": "You have unsaved changes",
+    "yourAppointmentWillBeConfirmedAutomatically": "Your appointment will be confirmed automatically."
   },
   "locales": {
     "de": "German",
@@ -542,6 +544,7 @@
       "completelyRemoveUser": "This will completely remove a user from Thunderbird Appointment, including all of their user data. Don't do this unless you're told to.",
       "disableAccountFirst": "You must disable the account first."
     },
+    "bookATimeToMeetWith": "Book a time to meet with {name}",
     "calendarDeletionWarning": "Removing this calendar will remove all appointments and schedules from Thunderbird Appointment. Any confirmed events currently stored in your calendar will not be removed.",
     "chooseDateAndTime": "Choose when to meet.",
     "connectZoom": "Connect your Zoom account to generate instant meeting invites for each booking.",
@@ -563,7 +566,6 @@
     "login": {
       "continueToFxa": "Enter your email above to continue to Mozilla Accounts"
     },
-    "nameIsInvitingYou": "{name} is inviting you to",
     "ownerNeedsToConfirmBooking": "When this option is active, you will be required to confirm or decline times booked on your schedule. When this option is deactivated, all times will automatically be confirmed.",
     "preferredEmailHelp": "Set the email you'll use for out-going communication. This will be used in calendar events and emails.",
     "recipientsCanScheduleBetween": "Recipients can schedule a {duration} appointment between {earliest} and {farthest} ahead of time.",

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

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { inject, computed } from 'vue';
 import { storeToRefs } from 'pinia';
+import { Dayjs } from 'dayjs';
+import { useI18n } from 'vue-i18n';
+import { PhGlobe } from '@phosphor-icons/vue';
 
 import { useBookingViewStore } from '@/stores/booking-view-store';
 import { useCalendarStore } from '@/stores/calendar-store';
@@ -10,8 +13,9 @@ import { dayjsKey } from '@/keys';
 import WeekPicker from '@/views/DashboardView/components/WeekPicker.vue';
 import WeekCalendar from '@/views/DashboardView/components/WeekCalendar.vue';
 import SlotSelectionAside from './SlotSelectionAside.vue';
-import { Dayjs } from 'dayjs';
+import SlotSelectionHeader from './SlotSelectionHeader.vue';
 
+const { t } = useI18n();
 const calendarStore = useCalendarStore();
 const { appointment, activeDate, selectedEvent } = storeToRefs(useBookingViewStore());
 const dj = inject(dayjsKey);
@@ -22,6 +26,8 @@ const activeDateRange = computed(() => ({
   end: activeDate.value.endOf('week').format('YYYY-MM-DD'),
 }));
 
+const timezone = computed(() => dj.tz.guess());
+
 /**
  * Select a specific time slot
  * @param day string
@@ -53,21 +59,33 @@ async function onDateChange(dateObj: TimeFormatted) {
 </script>
 
 <template>
-  <div v-if="appointment" class="booker-view-container">
-    <div class="calendar-container">
+  <template v-if="appointment">
+    <slot-selection-header />
+
+    <div class="week-picker-container">
       <week-picker
         :active-date-range="activeDateRange"
         :onDateChange="onDateChange"
       />
-      <week-calendar
-        :active-date-range="activeDateRange"
-        :selectable-slots="appointment.slots"
-        @event-selected="selectEvent"
-      />
     </div>
 
-    <slot-selection-aside />
-  </div>
+    <div class="booker-view-container">
+      <div class="calendar-container">
+        <week-calendar
+          :active-date-range="activeDateRange"
+          :selectable-slots="appointment.slots"
+          @event-selected="selectEvent"
+        />
+      </div>
+
+      <slot-selection-aside />
+    </div>
+
+    <div class="calendar-footer">
+      <ph-globe size="16" />
+      <span>{{ t('label.timeZone') }}: {{ timezone }}</span>
+    </div>
+  </template>
 </template>
 
 <style scoped>
@@ -76,11 +94,23 @@ async function onDateChange(dateObj: TimeFormatted) {
 .booker-view-container {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 2rem;
+}
+
+.week-picker-container {
+  margin-block-end: 2rem;
 }
 
 .calendar-container {
-  width: 100%;
+  flex: 1;
+}
+
+.calendar-footer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-block: 1.25rem;
+  font-size: 0.6875rem;
 }
 
 @media (--md) {