Update aside styles in slot selection

Author: davinotdavid

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",

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",

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

@@ -62,14 +62,15 @@ async function onDateChange(dateObj: TimeFormatted) {
   <template v-if="appointment">
     <slot-selection-header />
 
+    <div class="week-picker-container">
+      <week-picker
+        :active-date-range="activeDateRange"
+        :onDateChange="onDateChange"
+      />
+    </div>
+
     <div class="booker-view-container">
       <div class="calendar-container">
-        <div class="week-picker-container">
-          <week-picker
-            :active-date-range="activeDateRange"
-            :onDateChange="onDateChange"
-          />
-        </div>
         <week-calendar
           :active-date-range="activeDateRange"
           :selectable-slots="appointment.slots"
@@ -96,12 +97,12 @@ async function onDateChange(dateObj: TimeFormatted) {
   gap: 2rem;
 }
 
-.calendar-container {
-  width: 100%;
+.week-picker-container {
+  margin-block-end: 2rem;
+}
 
-  .week-picker-container {
-    margin-block-end: 2rem;
-  }
+.calendar-container {
+  flex: 1;
 
   .calendar-footer {
     display: flex;

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

@@ -3,11 +3,8 @@ import { computed, inject, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
 import {
-  PhGlobe,
-  PhCalendarDot,
   PhCalendarBlank,
   PhClock,
-  PhCheckCircle,
   PhMapPin
 } from '@phosphor-icons/vue';
 import { PrimaryButton } from '@thunderbirdops/services-ui';
@@ -40,6 +37,7 @@ const bookingRequestError = ref<string>('');
 
 const timezone = computed(() => dj.tz.guess());
 const selectedSlotDate = computed(() => dj(selectedEvent.value?.start).format('LL'))
+const selectedSlotDateDayOfWeek = computed(() => dj(selectedEvent.value?.start).format('dddd'));
 const selectedSlotTimeDuration = computed(() => {
   const startTime = dj(selectedEvent.value?.start).format('LT');
   const endTime = dj(selectedEvent.value?.start)
@@ -111,112 +109,170 @@ const bookEvent = async () => {
 
 <template>
   <aside>
+    <h3>{{ t('label.bookingDetails') }}</h3>
+
     <template v-if="selectedEvent">
-      <div class="appointment-card">
-        <h3>{{ t('label.bookingDetails') }}</h3>
-        <div class="appointment-card-inner">
-          <header>
-            {{ selectedEvent.title }}
-            <ph-check-circle size="24"/>
-          </header>
-          <div class="appointment-card-inner-details">
-            <ph-calendar-blank size="16"/>
-            <span>{{ selectedSlotDate }}</span>
-            <ph-map-pin size="16"/>
+      <div class="appointment-card-inner">
+        <header>{{ selectedEvent.title }}</header>
+        <div class="appointment-card-inner-details">
+          <div class="appointment-card-inner-details-item">
+            <ph-calendar-blank size="20"/>
+            <div class="appointment-card-inner-details-item-details">
+              <p>{{ selectedSlotDateDayOfWeek }}</p>
+              <span>{{ selectedSlotDate }}</span>
+            </div>
+          </div>
+          <div class="appointment-card-inner-details-item">
+            <ph-clock size="20"/>
+            <div class="appointment-card-inner-details-item-details">
+              <p>{{ timezone }}</p>
+              <span>{{ selectedSlotTimeDuration }}</span>
+            </div>
+          </div>
+          <div class="appointment-card-inner-details-item">
+            <ph-clock size="20"/>
+            <span>{{ t('units.minutes', { value: selectedEvent.slot_duration }) }}</span>
+          </div>
+          <div class="appointment-card-inner-details-item">
+            <ph-map-pin size="20"/>
             <!-- 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.virtual') }}</span>
-            <ph-clock size="16"/>
-            <span>{{ selectedSlotTimeDuration }} <span class="timezone-badge">{{ timezone }}</span></span>
-            <ph-clock size="16"/>
-            <span>{{ t('units.minutes', { value: selectedEvent.slot_duration }) }}</span>
           </div>
         </div>
       </div>
 
-      <slot-selection-user-info v-if="!userStore.authenticated" />
+      <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>
+
+      <p
+        v-if="selectedEvent && !appointment.booking_confirmation"
+        class="confirmation-footer-note"
+      >
+        {{ t('label.yourAppointmentWillBeConfirmedAutomatically') }}
+      </p>
     </template>
 
     <div v-else class="appointment-card empty">
-      {{ t('label.selectATimeFromTheCalendar') }}
-      <ph-calendar-dot size="108"/>
+      <ph-calendar-blank size="24" class="empty-icon" weight="duotone" />
+      <strong>{{ t('label.noneSelected') }}</strong>
+      <p>{{ t('label.selectATimeFromTheCalendar') }}</p>
     </div>
-
-    <alert-box
-      v-if="bookingRequestError"
-      :alert="{ title: bookingRequestError }"
-      :scheme="AlertSchemes.Error"
-      @close="bookingRequestError = ''"
-    />
-
-    <primary-button
-      :label="t('label.confirmSelection')"
-      :disabled="!selectedEvent || bookingRequestLoading || (!userStore.authenticated && !guestUserInfoValid)"
-      @click="bookEvent"
-      :title="t('label.confirm')"
-      class="confirm-selection-button"
-      data-testid="booking-view-confirm-selection-button"
-    >
-      {{ t('label.confirmSelection') }}
-    </primary-button>
   </aside>
 </template>
 
 <style scoped>
 @import '@/assets/styles/custom-media.pcss';
 
 aside {
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem 1rem;
+  border: 1px solid var(--colour-neutral-border);
+  border-radius: 24px;
+  background-color: var(--colour-neutral-base);
+  font-family: Inter, sans-serif;
+
+  h3 {
+    font-weight: 600;
+    color: var(--colour-ti-highlight);
+    margin-block-end: 1.5rem;
+  }
+
   .appointment-card {
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 1rem;
-    padding: 1rem 0.5rem;
-    border: 1px dashed var(--colour-neutral-border);
-    border-radius: 0.25rem;
-    background-color: var(--colour-neutral-raised);
-    margin-block-end: 1rem;
+    padding: 1rem 1.5rem;
+    border: 1px solid var(--colour-neutral-border);
+    border-radius: 4px;
+    background-color: var(--colour-neutral-lower);
+    margin-block-end: 1.5rem;
 
     &.empty {
       align-items: center;
-      padding: 4rem 1.5rem;
+      text-align: center;
+      font-size: 1rem;
+      gap: 0;
+      margin-block-end: 0;
+
+      .empty-icon {
+        margin-block: 0.75rem 1.5rem;
+      }
+
+      strong {
+        font-weight: 500;
+        margin-block-end: 0.5rem;
+      }
+
+      p {
+        font-size: 0.875rem;
+        margin-block-end: 0.75rem;
+      }
     }
+  }
 
-    h3 {
-      text-align: center;
-      font-weight: 500;
+  .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;
+
+    header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-weight: 600;
+      margin-block-end: 0.5rem;
     }
 
-    .appointment-card-inner {
-      padding: 1rem 1.5rem;
-      border-radius: 0.25rem;
-      color: black; /* TODO: Update colors when hi-fi is available */
-      background-color: #58C9FF; /* TODO: Update colors when hi-fi is available */
+    .appointment-card-inner-details {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      font-size: 0.875rem;
+      color: var(--colour-ti-base);
 
-      header {
+      .appointment-card-inner-details-item {
         display: flex;
         align-items: center;
-        justify-content: space-between;
-        margin-block-end: 1rem;
-      }
+        gap: 0.5rem;
 
-      .appointment-card-inner-details {
-        display: grid;
-        grid-template-columns: 1.5rem 1fr;
-        align-items: center;
-        row-gap: 0.25rem;
-        column-gap: 0.125rem;
-
-        .timezone-badge {
-          color: #58C9FF; /* TODO: Update colors when hi-fi is available */
-          background-color: black; /* TODO: Update colors when hi-fi is available */
-          font-size: 0.75rem;
-          padding: 0.25rem 0.375rem;
-          margin-inline-start: 0.25rem;
-          border-radius: 8px;
-          white-space: nowrap;
+        .appointment-card-inner-details-item-details {
+          display: flex;
+          flex-direction: column;
+
+          p {
+            line-height: 0.75rem;
+            font-size: 0.6875rem;
+          }
         }
       }
+
+      svg {
+        color: var(--colour-ti-highlight);
+      }
     }
   }
 
@@ -228,8 +284,17 @@ aside {
     color: var(--colour-danger-default);
   }
 
+  .booking-request-error {
+    margin-block: 1rem 0;
+  }
+
   .confirm-selection-button {
-    margin-inline-start: auto;
+    margin-block-start: 1rem;
+  }
+
+  .confirmation-footer-note {
+    text-align: center;
+    font-size: 0.6875rem;
     margin-block-start: 1rem;
   }
 }
@@ -238,7 +303,7 @@ aside {
   aside {
     position: sticky;
     top: 5rem;
-    width: 470px;
+    width: 268px;
   }
 }
 </style>