From aa53b6e6d5c89a49fd1d63a7b4f07b7211b7ef16 Mon Sep 17 00:00:00 2001 From: Davi Nakano Date: Wed, 7 Jan 2026 13:45:06 -0600 Subject: [PATCH 1/6] Update BookingPage appointment info styles --- frontend/src/locales/de.json | 2 +- frontend/src/locales/en.json | 4 +- .../components/BookingViewSlotSelection.vue | 61 ++++++++++---- .../components/SlotSelectionAside.vue | 63 --------------- .../components/SlotSelectionHeader.vue | 81 +++++++++++++++++++ frontend/src/views/BookerView/index.vue | 78 +++++++++--------- .../DashboardView/components/WeekCalendar.vue | 1 - frontend/src/views/DashboardView/index.vue | 16 ++-- 8 files changed, 181 insertions(+), 125 deletions(-) create mode 100644 frontend/src/views/BookerView/components/SlotSelectionHeader.vue diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json index 2a0281f13..21f65ab3d 100644 --- a/frontend/src/locales/de.json +++ b/frontend/src/locales/de.json @@ -539,6 +539,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 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 +561,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. ", diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json index 76f46c638..6a7dac740 100644 --- a/frontend/src/locales/en.json +++ b/frontend/src/locales/en.json @@ -451,7 +451,7 @@ "timeFormat": "Time Format", "timeOfTheEvent": "Time of the event:", "timeUpdated": "Time Updated", - "timeZone": "Time Zone", + "timeZone": "Timezone", "title": "Title", "to": "to", "today": "Today", @@ -542,6 +542,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 +564,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.", diff --git a/frontend/src/views/BookerView/components/BookingViewSlotSelection.vue b/frontend/src/views/BookerView/components/BookingViewSlotSelection.vue index 2a4596dba..f644b048c 100644 --- a/frontend/src/views/BookerView/components/BookingViewSlotSelection.vue +++ b/frontend/src/views/BookerView/components/BookingViewSlotSelection.vue @@ -1,6 +1,9 @@ diff --git a/frontend/src/views/BookerView/components/SlotSelectionHeader.vue b/frontend/src/views/BookerView/components/SlotSelectionHeader.vue new file mode 100644 index 000000000..baa8901d6 --- /dev/null +++ b/frontend/src/views/BookerView/components/SlotSelectionHeader.vue @@ -0,0 +1,81 @@ + + + + + \ No newline at end of file diff --git a/frontend/src/views/BookerView/index.vue b/frontend/src/views/BookerView/index.vue index b8a1ace93..79a4fbb67 100644 --- a/frontend/src/views/BookerView/index.vue +++ b/frontend/src/views/BookerView/index.vue @@ -127,43 +127,41 @@ export default { diff --git a/frontend/src/views/DashboardView/components/WeekCalendar.vue b/frontend/src/views/DashboardView/components/WeekCalendar.vue index dffa97404..d92444b46 100644 --- a/frontend/src/views/DashboardView/components/WeekCalendar.vue +++ b/frontend/src/views/DashboardView/components/WeekCalendar.vue @@ -487,7 +487,6 @@ const filteredSelectableSlotsForGrid = computed(() => { border: 1px solid var(--colour-neutral-border); border-radius: 1.5rem; background-color: var(--colour-neutral-base); - margin-block-end: 2rem; flex: 1; overflow-y: auto; overflow-x: auto; diff --git a/frontend/src/views/DashboardView/index.vue b/frontend/src/views/DashboardView/index.vue index 9e4bd1814..7046c7cfb 100644 --- a/frontend/src/views/DashboardView/index.vue +++ b/frontend/src/views/DashboardView/index.vue @@ -71,11 +71,13 @@ export default { - +
+ +
@@ -94,6 +96,10 @@ export default { flex-direction: column; width: 100%; margin-block-start: 0.25rem; + + .calendar-container { + margin-block-end: 2rem; + } } .calendar-header-container { From f0e4191db7fa27cd9c70335f807c4f3da24e57fa Mon Sep 17 00:00:00 2001 From: Davi Nakano Date: Wed, 7 Jan 2026 15:02:19 -0600 Subject: [PATCH 2/6] Update aside styles in slot selection --- frontend/src/locales/de.json | 7 +- frontend/src/locales/en.json | 7 +- .../components/BookingViewSlotSelection.vue | 23 +- .../components/SlotSelectionAside.vue | 213 ++++++++++++------ .../components/SlotSelectionHeader.vue | 14 +- .../components/SlotSelectionUserInfo.vue | 124 +--------- 6 files changed, 181 insertions(+), 207 deletions(-) diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json index 21f65ab3d..799b7e163 100644 --- a/frontend/src/locales/de.json +++ b/frontend/src/locales/de.json @@ -262,7 +262,6 @@ "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", @@ -408,7 +408,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 +481,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", diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json index 6a7dac740..e1c4c4785 100644 --- a/frontend/src/locales/en.json +++ b/frontend/src/locales/en.json @@ -265,7 +265,6 @@ "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", @@ -411,7 +411,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", @@ -484,7 +484,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", diff --git a/frontend/src/views/BookerView/components/BookingViewSlotSelection.vue b/frontend/src/views/BookerView/components/BookingViewSlotSelection.vue index f644b048c..bc320aca4 100644 --- a/frontend/src/views/BookerView/components/BookingViewSlotSelection.vue +++ b/frontend/src/views/BookerView/components/BookingViewSlotSelection.vue @@ -62,14 +62,15 @@ async function onDateChange(dateObj: TimeFormatted) { @@ -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) { diff --git a/frontend/src/views/BookerView/components/SlotSelectionAside.vue b/frontend/src/views/BookerView/components/SlotSelectionAside.vue index d01f629f5..ce8dd97c3 100644 --- a/frontend/src/views/BookerView/components/SlotSelectionAside.vue +++ b/frontend/src/views/BookerView/components/SlotSelectionAside.vue @@ -1,5 +1,5 @@ - - - - \ No newline at end of file From f100d6a36a21bf78f4280c7e68648c35c812ac1a Mon Sep 17 00:00:00 2001 From: Davi Nakano Date: Wed, 7 Jan 2026 18:04:31 -0600 Subject: [PATCH 4/6] Update CTA for selection a booking slot --- frontend/src/locales/de.json | 2 +- frontend/src/locales/en.json | 2 +- .../BookerView/components/SlotSelectionAside.vue | 12 ++++++++---- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json index f21b98746..6291edabc 100644 --- a/frontend/src/locales/de.json +++ b/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,7 +256,6 @@ "confirm": "Bestätigen", "confirmed": "Bestätigt", "confirmBooking": "Buchung bestätigen", - "confirmSelection": "Auswahl bestätigen", "connect": "Verbinden", "connectCalendar": "Kalender verbinden", "connectGoogleCalendar": "Google Kalender verbinden", diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json index b15390566..df29ad929 100644 --- a/frontend/src/locales/en.json +++ b/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,7 +258,6 @@ "confirm": "Confirm", "confirmed": "Confirmed", "confirmBooking": "Confirm booking", - "confirmSelection": "Confirm selection", "connect": "Connect", "connecting": "Connecting", "connectCalendar": "Connect calendar", diff --git a/frontend/src/views/BookerView/components/SlotSelectionAside.vue b/frontend/src/views/BookerView/components/SlotSelectionAside.vue index ce8dd97c3..6414a10a5 100644 --- a/frontend/src/views/BookerView/components/SlotSelectionAside.vue +++ b/frontend/src/views/BookerView/components/SlotSelectionAside.vue @@ -167,14 +167,14 @@ const bookEvent = async () => { - {{ t('label.confirmSelection') }} + {{ t('label.bookAppointment') }} @@ -249,7 +249,6 @@ aside { .appointment-card-inner { padding: 0.75rem; border-radius: 0.25rem; - color: black; /* TODO: Update colors when hi-fi is available */ background-color: var(--colour-primary-soft); margin-block-end: 1.5rem; @@ -259,6 +258,7 @@ aside { justify-content: space-between; font-weight: 600; margin-block-end: 0.5rem; + color: var(--colour-ti-base); } .appointment-card-inner-details { @@ -294,6 +294,10 @@ aside { display: flex; flex-direction: column; gap: 1.5rem; + + .book-appointment-button { + text-transform: capitalize; + } } .booking-request-error { From e9669ebe031bbdb4654eda3848ba874b5d27f33e Mon Sep 17 00:00:00 2001 From: Davi Nakano <114549747+davinotdavid@users.noreply.github.com> Date: Thu, 8 Jan 2026 15:09:26 -0600 Subject: [PATCH 5/6] Update frontend/src/locales/de.json Co-authored-by: Andreas --- frontend/src/locales/de.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json index 6291edabc..33031d36f 100644 --- a/frontend/src/locales/de.json +++ b/frontend/src/locales/de.json @@ -541,7 +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 mit {name} zu treffen", + "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.", From 0dc3f814d7d45372b7cdbcdf87009956129fd3e1 Mon Sep 17 00:00:00 2001 From: Davi Nakano Date: Thu, 8 Jan 2026 16:28:48 -0600 Subject: [PATCH 6/6] Prefill name and email in Bookers page if signed in --- .../BookerView/components/SlotSelectionAside.vue | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/frontend/src/views/BookerView/components/SlotSelectionAside.vue b/frontend/src/views/BookerView/components/SlotSelectionAside.vue index 6414a10a5..56f5c3a2c 100644 --- a/frontend/src/views/BookerView/components/SlotSelectionAside.vue +++ b/frontend/src/views/BookerView/components/SlotSelectionAside.vue @@ -33,8 +33,8 @@ const userInfoForm = useTemplateRef('userInfoForm'); const bookingRequestLoading = ref(false); const bookingRequestError = ref(''); -const guestUserName = ref(''); -const guestUserEmail = ref(''); +const guestUserName = ref(userStore.authenticated ? userStore.data.name : ''); +const guestUserEmail = ref(userStore.authenticated ? userStore.data.email : ''); const timezone = computed(() => dj.tz.guess()); const selectedSlotDate = computed(() => dj(selectedEvent.value?.start).format('LL')) @@ -60,12 +60,7 @@ const bookEvent = async () => { bookingRequestLoading.value = true; bookingRequestError.value = ''; - const attendeeData = userStore.authenticated ? { - id: userStore.data.id, - email: userStore.data.email, - name: userStore.data.name, - timezone: userStore.data.settings.timezone, - } : { + const attendeeData = { email: guestUserEmail.value, name: guestUserName.value, timezone: timezone.value,