Lots of small tweaks

backend/src/appointment/routes/api.py

@@ -1,3 +1,4 @@
+import logging
 import os
 import secrets
 

backend/src/appointment/routes/schedule.py

@@ -108,6 +108,14 @@ def update_schedule(
         and subscriber.get_external_connection(ExternalConnectionType.zoom) is None
     ):
         raise validation.ZoomNotConnectedException()
+
+    if schedule.slug is None:
+        # If slug isn't provided, give them the last 8 characters from a uuid4
+        schedule.slug = repo.schedule.generate_slug(db, id)
+        if not schedule.slug:
+            # A little extra, but things are a little out of place right now..
+            raise validation.ScheduleCreationException()
+
     return repo.schedule.update(db=db, schedule=schedule, schedule_id=id)
 
 

frontend/src/assets/styles/main.css

@@ -154,11 +154,11 @@
   table {
     @apply w-full table-auto border-collapse bg-white text-sm shadow-sm dark:bg-gray-600;
   }
-  
+
   thead, tfoot {
     @apply border-gray-200 bg-gray-100 dark:border-gray-500 dark:bg-gray-700 text-gray-600 dark:text-gray-300;
   }
-  
+
   th {
     @apply px-4 text-left font-semibold border-gray-200 dark:border-gray-500;
   }
@@ -172,3 +172,8 @@
     @apply border-y border-gray-200 p-4 dark:border-gray-500;
   }
 }
+
+/* Force First Time User Experience to be different from the rest of the site */
+.page-ftue {
+  font-family: 'Inter', 'sans-serif';
+}

frontend/src/components/FTUE/ConnectVideo.vue

@@ -1,16 +1,21 @@
 <template>
   <div class="content">
-    <div class="card zoom" @click="connectZoom">
-      <img class="zoom-logo" src="@/assets/svg/zoom-logo.svg" alt="Zoom"/>
-      <p class="zoom-description">
-        Connect your Zoom account to generate instant meeting invites for each booking
-      </p>
-      <primary-button class="connect-zoom" :disabled="isLoading">Connect</primary-button>
+    <div class="cards">
+      <div class="card zoom" @click="connectZoom">
+        <img class="zoom-logo" src="@/assets/svg/zoom-logo.svg" alt="Zoom"/>
+        <p class="zoom-description">
+          Connect your Zoom account to generate instant meeting invites for each booking
+        </p>
+        <primary-button class="connect-zoom" :disabled="isLoading">Connect</primary-button>
+      </div>
+      <div class="card">
+        <strong>Custom video meeting link</strong>
+        <p>Use a single meeting link for all bookings from your selected provider</p>
+        <text-input name="custom-meeting-link" v-model="customMeetingLink" placeholder="http://meet.google.com">Video meeting link</text-input>
+      </div>
     </div>
-    <div class="card">
-      <h2>Custom video meeting link</h2>
-      <p>Use a single meeting link for all bookings from your selected provider</p>
-      <text-input name="custom-meeting-link" v-model="customMeetingLink" placeholder="http://meet.google.com">Video meeting link</text-input>
+    <div class="skip-text">
+      <a href="#" @click="onSkip">Skip connect video</a>
     </div>
   </div>
   <div class="absolute bottom-[5.75rem] flex w-full justify-end gap-4">
@@ -27,7 +32,7 @@
       :title="continueTitle"
       v-if="hasNextStep"
       @click="onSubmit()"
-      :disabled="isLoading || !selected"
+      :disabled="isLoading || customMeetingLink.length === 0"
     >
       Continue
     </primary-button>
@@ -41,13 +46,10 @@ import {
 } from 'vue';
 import SecondaryButton from '@/tbpro/elements/SecondaryButton.vue';
 import { useFTUEStore } from '@/stores/ftue-store';
-import { useCalendarStore } from '@/stores/calendar-store';
 import { storeToRefs } from 'pinia';
 import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
-import SyncCard from '@/tbpro/elements/SyncCard.vue';
-import TextButton from '@/elements/TextButton.vue';
 import TextInput from '@/tbpro/elements/TextInput.vue';
-import { useExternalConnectionsStore } from '@/stores/external-connections-store.js';
+import { useExternalConnectionsStore } from '@/stores/external-connections-store';
 import { useRoute, useRouter } from 'vue-router';
 
 const { t } = useI18n();
@@ -66,7 +68,6 @@ const { previousStep, nextStep } = ftueStore;
 const externalConnectionStore = useExternalConnectionsStore();
 const { zoom } = storeToRefs(externalConnectionStore);
 const customMeetingLink = ref('');
-const selected = computed(() => zoom.value.length > 0 || customMeetingLink.value.length > 0);
 
 const continueTitle = '';// computed(() => (selected.value ? 'Continue' : 'Please enable one calendar to continue'));
 const initFlowKey = 'tba/startedMeetingConnect';
@@ -96,6 +97,11 @@ const onSubmit = async () => {
   await nextStep();
 };
 
+const onSkip = async () => {
+  isLoading.value = true;
+  await nextStep();
+};
+
 const connectZoom = async () => {
   localStorage?.setItem(initFlowKey, true);
   isLoading.value = true;
@@ -111,14 +117,21 @@ const connectZoom = async () => {
 .content {
   display: flex;
   flex-direction: column;
-  gap: 3.125rem;
-  width: 100%;
   justify-content: center;
   align-items: center;
-  height: 23rem;
-  margin-top: 6.25rem;
   font-family: 'Inter', 'sans-serif';
   font-size: 0.8125rem;
+  height: 23rem;
+  margin: 6.25rem auto auto;
+}
+
+.cards {
+  display: flex;
+  flex-direction: column;
+  gap: 3.125rem;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
 }
 
 .card {
@@ -150,10 +163,25 @@ const connectZoom = async () => {
   }
 
   .content {
+    margin-top: 0;
+  }
+
+  .cards {
     flex-direction: row;
     margin-top: 0;
   }
 
+  .skip-text {
+    color: var(--tbpro-primary-pressed);
+    margin-right: 0;
+    margin-left: auto;
+    text-transform: uppercase;
+    font-size: 0.5625rem;
+    font-weight: 600;
+    text-decoration: underline;
+    padding: 0.75rem 1.5rem;
+  }
+
   .connect-zoom {
     margin: auto;
     width: 50%;

frontend/src/components/FTUE/Finish.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="content">
     <img src="@/assets/svg/ftue-finish.svg" alt="A user icon in front of two calendars."/>
+    <div class="copy">
     <p>Before you close this screen, copy your shareable schedule link to start receiving appointments.</p>
-    <a href="">A link goes here :)</a>
+    <a class="link" :href="myLink">{{ myLink }}</a>
+    </div>
   </div>
   <div class="absolute bottom-[5.75rem] flex w-full justify-end gap-4">
     <primary-button
@@ -21,37 +23,31 @@ import { useI18n } from 'vue-i18n';
 import {
   onMounted, inject, ref, computed,
 } from 'vue';
-import SecondaryButton from '@/tbpro/elements/SecondaryButton.vue';
 import { useFTUEStore } from '@/stores/ftue-store';
 import { useCalendarStore } from '@/stores/calendar-store';
+import { useScheduleStore } from '@/stores/schedule-store';
 import { storeToRefs } from 'pinia';
 import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
-import SyncCard from '@/tbpro/elements/SyncCard.vue';
+import { useUserStore } from '@/stores/user-store';
 
 const { t } = useI18n();
 
 const call = inject('call');
 
 const isLoading = ref(false);
 
+const userStore = useUserStore();
+
 const ftueStore = useFTUEStore();
-const {
-  hasNextStep, hasPreviousStep,
-} = storeToRefs(ftueStore);
-const { previousStep, nextStep } = ftueStore;
 
-const calendarStore = useCalendarStore();
-const calendars = ref([]);
-const selected = computed(() => calendars.value.filter((item) => item.checked).length);
-const continueTitle = computed(() => (selected.value ? 'Continue' : 'Please enable one calendar to continue'));
+const myLink = ref('');
+const { nextStep } = ftueStore;
+
+const scheduleStore = useScheduleStore();
 
 onMounted(async () => {
-  await calendarStore.fetch(call);
-  calendars.value = calendarStore.calendars.map((calendar) => ({
-    key: calendar.title,
-    label: calendar.title,
-    checked: calendar.connected,
-  }));
+  await scheduleStore.fetch(call);
+  myLink.value = userStore.myLink;
 });
 
 const onSubmit = async () => {
@@ -72,13 +68,18 @@ const onSubmit = async () => {
   align-items: center;
 
 }
-.sync-card {
-  width: 100%;
+
+.copy {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 60%;
+  font-size: 0.8125rem;
+  text-align: center;
 }
 
-@media (--md) {
-  .sync-card {
-    width: 27.5rem;
-  }
+.link {
+  color: var(--tbpro-primary);
+  text-decoration: underline;
 }
 </style>

frontend/src/components/FTUE/SetupSchedule.vue

@@ -80,6 +80,7 @@ const onSubmit = async () => {
     .format('HH:mm');
 
   const scheduleData = {
+    ...schedules?.value[0] ?? {},
     active: true,
     name: scheduleName.value,
     calendar_id: calendar.value,
@@ -165,11 +166,6 @@ onMounted(async () => {
 <style scoped>
 @import '@/assets/styles/custom-media.pcss';
 
-/* Notice bar from the notice-bar element */
-.notice-bar {
-  min-width: 31.25rem;
-}
-
 form {
   gap: 1rem;
   border-radius: 0.5625rem;

frontend/src/stores/schedule-store.js

@@ -32,8 +32,10 @@ export const useScheduleStore = defineStore('schedules', () => {
     schedules.value = data.value;
     isLoaded.value = true;
 
+    console.log('Data -> ', data.value);
+
     const { updateScheduleUrls } = useUserStore();
-    updateScheduleUrls(data.value);
+    await updateScheduleUrls(data.value);
   };
 
   /**

frontend/src/stores/user-store.js

@@ -81,7 +81,6 @@ export const useUserStore = defineStore('user', () => {
       return { error: false };
     }
 
-    console.log('oops', data.value, error.value);
     return { error: data.value ?? error.value };
   };
 

frontend/src/tbpro/elements/NoticeBar.vue

@@ -56,6 +56,7 @@ const isError = props.type === 'error';
   padding: 0.5625rem 1.75rem;
   gap: 0.625rem;
   border: 0.0625rem solid;
+  min-width: 31.25rem;
 }
 .info {
   background-color: var(--tbpro-soft);

frontend/src/views/FirstTimeUserExperienceView.vue

@@ -2,7 +2,7 @@
   <div class="page-ftue overlay fixed left-0 top-0 z-[55] h-screen w-screen overflow-hidden" role="dialog" tabindex="-1" aria-labelledby="ftue-title" aria-modal="true">
     <div class="modal">
       <div class="relative flex size-full w-full flex-col items-center gap-4">
-        <word-mark v-if="currentStep === ftueStep.setupProfile"/>
+        <word-mark v-if="currentStep === ftueStep.setupProfile || currentStep === ftueStep.finish"/>
         <h2 id="ftue-title">
           {{ stepTitle }}
         </h2>