➕ Add step 4 for schedule creation

thunderbird · Sep 10, 2024 · 4e5cce1 · 4e5cce1
1 parent 43e5993
commit 4e5cce1
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 14 deletions.
diff --git a/frontend/src/components/ScheduleCreation.vue b/frontend/src/components/ScheduleCreation.vue
@@ -66,6 +66,7 @@ const state = ref(firstStep);
 const activeStep1 = computed(() => state.value === firstStep);
 const activeStep2 = computed(() => state.value === ScheduleCreationState.Settings);
 const activeStep3 = computed(() => state.value === ScheduleCreationState.Details);
+const activeStep4 = computed(() => state.value === ScheduleCreationState.Booking);
 const visitedStep1 = ref(false);
 
 // calculate calendar titles
@@ -415,6 +416,7 @@ watch(
           <div v-if="!scheduleInput.name" class="content-center text-red-500">*</div>
         </label>
       </div>
+
       <!-- step 1 -->
       <div
         class="mx-4 flex flex-col gap-2 rounded-lg border border-zinc-200 p-4 text-gray-700 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100"
@@ -487,6 +489,7 @@ watch(
           </div>
         </div>
       </div>
+
       <!-- step 2 -->
       <div
         class="mx-4 flex flex-col gap-2 rounded-lg border border-zinc-200 p-4 text-gray-700 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100"
@@ -594,6 +597,7 @@ watch(
           </div>
         </div>
       </div>
+
       <!-- step 3 -->
       <div
         @click="state = ScheduleCreationState.Details"
@@ -673,18 +677,57 @@ watch(
           </label>
         </div>
       </div>
-      <!-- option to deactivate confirmation -->
-      <div class="px-4">
-        <switch-toggle
-          class="my-1 pr-3 text-sm font-medium text-gray-500 dark:text-gray-300"
-          :active="schedule.booking_confirmation"
-          :label="t('label.bookingConfirmation')"
-          :disabled="!scheduleInput.active"
-          @changed="toggleBookingConfirmation"
-          no-legend
-        />
-        <div class="text-xs">
-          {{ t('text.ownerNeedsToConfirmBooking') }}
+
+      <!-- step 4 -->
+      <div
+        @click="state = ScheduleCreationState.Booking"
+        class="btn-step-3 mx-4 flex flex-col gap-2 rounded-lg border border-zinc-200 p-4 text-gray-700 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100"
+        :class="{'bg-neutral-50': activeStep4}"
+        id="schedule-details"
+      >
+        <div class="flex cursor-pointer items-center justify-between">
+          <div class="flex flex-col gap-1">
+            <h2>
+              {{ t("label.bookingSettings") }}
+            </h2>
+            <h3 class="text-xs">
+              {{ t('label.scheduleSettings.bookingSettingsSubHeading') }}
+            </h3>
+          </div>
+          <icon-chevron-down
+            class="size-6 -rotate-90 fill-transparent stroke-gray-800 stroke-1 transition-transform dark:stroke-gray-100"
+            :class="{ '!rotate-0': activeStep4 }"
+          />
+        </div>
+        <div v-show="activeStep4" class="flex flex-col gap-2">
+          <hr/>
+          <!-- option to deactivate confirmation -->
+          <div class="flex flex-col gap-3">
+            <switch-toggle
+              class="my-1 text-sm font-medium text-gray-500 dark:text-gray-300"
+              :active="schedule.booking_confirmation"
+              :label="t('label.bookingConfirmation')"
+              :disabled="!scheduleInput.active"
+              @changed="toggleBookingConfirmation"
+              no-legend
+            />
+            <div class="whitespace-pre-line rounded-lg bg-white p-4 text-xs text-gray-500 dark:bg-gray-800">
+              <div>
+                {{ t('text.yourQuickLinkIs', { url: user.myLink }) }}<br />
+                <i18n-t keypath="text.toUpdateYourUsername.text" for="text.toUpdateYourUsername.link">
+                  <router-link class="underline" :to="{ name: 'settings' }" target="_blank">
+                    {{ t('text.toUpdateYourUsername.link') }}
+                  </router-link>
+                </i18n-t>
+                <span v-if="scheduleInput.booking_confirmation">
+                  {{ t('text.bookingsWillRequireToBeConfirmed') }}
+                </span>
+                <span v-else>
+                  {{ t('text.bookingsWillAutomaticallyBeConfirmed') }}
+                </span>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

diff --git a/frontend/src/definitions.ts b/frontend/src/definitions.ts
@@ -38,6 +38,7 @@ export enum ScheduleCreationState {
   Availability = 1,
   Settings = 2,
   Details = 3,
+  Booking = 4,
 }
 
 /**

diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
@@ -270,6 +270,7 @@
     "scheduleDetails": "Zeitplan Details",
     "scheduleSettings": {
       "availabilitySubHeading": "Lege deine Verfügbarkeit fest",
+      "bookingSettingsSubHeading": "Kurzlink bearbeiten und Sonstiges",
       "meetingDetailsSubHeading": "Videos und/oder Notizen den Events hinzufügen",
       "schedulingDetailsSubHeading": "Buchungsintervalle und Dauer festlegen"
     },
@@ -329,6 +330,8 @@
   "text": {
     "accountDataNotice": "Lade all deine Daten von Thunderbird Appointment herunter.",
     "accountDeletionWarning": "Achtung: Die Löschung des Benutzerkontos ist dauerhaft! Du wirst all deine Daten von Thunderbird Appointment verlieren. Deine verbundenen Kalender bleiben selbstverständlich unverändert. Du kannst jederzeit ein neues Benutzerkonto erstellen.",
+    "bookingsWillAutomaticallyBeConfirmed": "Buchungen werden automatisch bestätigt und zum Kalender hinzugefügt.",
+    "bookingsWillRequireToBeConfirmed": "Buchungen müssen bestätigt oder abgelehnt werden.",
     "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.",
@@ -405,8 +408,13 @@
     },
     "timesAreDisplayedInLocalTimezone": "Die Zeiten werden in deiner lokalen Zeitzone {timezone} angezeigt.",
     "titleIsReadyForBookings": "{title} ist für Buchungen bereit",
+    "toUpdateYourUsername": {
+      "link": "Kontoeinstellungen",
+      "text": "Der Nutzername kann unter {0} angepasst werden. "
+    },
     "updateUsernameNotice": "Ein Ändern des Benutzernamens aktualisiert auch deinen Link. Alle alten Links werden dann nicht mehr funktionieren.",
-    "videoLinkNotice": "Der Videolink verwendet denselben Link für alle Veranstaltungen, die im Rahmen deines Zeitplans erstellt werden. Bei der Erstellung von Zoom-Meetings wird für jede erstellte Veranstaltung ein neuer Zoom-Link erstellt."
+    "videoLinkNotice": "Der Videolink verwendet denselben Link für alle Veranstaltungen, die im Rahmen deines Zeitplans erstellt werden. Bei der Erstellung von Zoom-Meetings wird für jede erstellte Veranstaltung ein neuer Zoom-Link erstellt.",
+    "yourQuickLinkIs": "Dein Kurzlink ist:\n{url}"
   },
   "units": {
     "minutes": "{value} Minuten",

diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
@@ -270,6 +270,7 @@
     "scheduleDetails": "Scheduling Details",
     "scheduleSettings": {
       "availabilitySubHeading": "Set your availability days and times",
+      "bookingSettingsSubHeading": "Edit your quick link and more",
       "meetingDetailsSubHeading": "Add video and/or notes to events",
       "schedulingDetailsSubHeading": "Set booking intervals and duration"
     },
@@ -329,6 +330,8 @@
   "text": {
     "accountDataNotice": "Download all of your data from Thunderbird Appointment.",
     "accountDeletionWarning": "Your account and data on Thunderbird Appointment will be deleted. This does not impact your linked calendars. And you can create a new account with us anytime.",
+    "bookingsWillAutomaticallyBeConfirmed": "Bookings will automatically be confirmed and added to your calendar.",
+    "bookingsWillRequireToBeConfirmed": "You will need to confirm or decline bookings on your calendar.",
     "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.",
@@ -405,8 +408,13 @@
     },
     "timesAreDisplayedInLocalTimezone": "Times are displayed in your local timezone {timezone}.",
     "titleIsReadyForBookings": "{title} is ready for bookings",
+    "toUpdateYourUsername": {
+      "link": "Account Settings",
+      "text": "To update your username, go to {0}. "
+    },
     "updateUsernameNotice": "Changing your username will also change your link. Your old link will no longer work.",
-    "videoLinkNotice": "Video link will use the same link for all events created in this general availability. Generating zoom meetings will create a new zoom link for each event created."
+    "videoLinkNotice": "Video link will use the same link for all events created in this general availability. Generating zoom meetings will create a new zoom link for each event created.",
+    "yourQuickLinkIs": "Your quick link is:\n{url}"
   },
   "units": {
     "minutes": "{value} minutes",