Upgrade our notice bar, and add some icons

frontend/src/assets/styles/colours.css

@@ -6,15 +6,25 @@ html {
 
   --teal-700: #008080;
 
+  --yellow-900: #713F12;
+
+  --warning: #FACC15;
+  --warning-background: #FEFAE8;
+
   --critical: #DC2626;
   --critical-default: #991B1B;
+  --critical-pressed: #7F1D1D;
+  --critical-soft: #FEF2F2;
 
   --surface-base: #FEFFFF;
   --surface-subtle: #F7F7F7;
   --surface-lower: #F7F7F7;
   --surface-raised: var(--neutral);
   --surface-border: var(--neutral-200);
   --surface-intense: #777580;
+
+  --success: #1D783B;
+  --success-soft: #F4F9F4;
   --success-pressed: #194E2C;
 
   --text-highlight: #107781;
@@ -36,6 +46,7 @@ html {
   --tbpro-select-open: var(--surface-subtle);
   --tbpro-select-open-border: var(--surface-intense);
 
+  --tbpro-soft: #F3F9FC;
 
   --tbpro-text: #26272A;
   --tbpro-text-muted: #737584;

frontend/src/components/FTUE/ConnectCalendars.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="content">
-    <InfoBar>
+    <notice-bar>
       Connect your calendars to manage your availability
-    </InfoBar>
-    <SyncCard class="sync-card" v-model="calendars" title="Calendars">
+    </notice-bar>
+    <sync-card class="sync-card" v-model="calendars" title="Calendars">
       <template v-slot:icon>
         <span class="icon-calendar">
           <img src="@/assets/svg/icons/calendar.svg" alt="calendar icon" title="calendar icon"/>
         </span>
       </template>
-    </SyncCard>
+    </sync-card>
   </div>
   <div class="absolute bottom-[5.75rem] flex w-full justify-end gap-4">
     <secondary-button
@@ -41,9 +41,9 @@ import SecondaryButton from '@/tbpro/elements/SecondaryButton.vue';
 import { useFTUEStore } from '@/stores/ftue-store';
 import { useCalendarStore } from '@/stores/calendar-store';
 import { storeToRefs } from 'pinia';
-import InfoBar from '@/elements/InfoBar.vue';
 import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
 import SyncCard from '@/tbpro/elements/SyncCard.vue';
+import NoticeBar from '@/tbpro/elements/NoticeBar.vue';
 
 const { t } = useI18n();
 

frontend/src/components/FTUE/ConnectVideo.vue

@@ -43,7 +43,6 @@ import SecondaryButton from '@/tbpro/elements/SecondaryButton.vue';
 import { useFTUEStore } from '@/stores/ftue-store';
 import { useCalendarStore } from '@/stores/calendar-store';
 import { storeToRefs } from 'pinia';
-import InfoBar from '@/elements/InfoBar.vue';
 import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
 import SyncCard from '@/tbpro/elements/SyncCard.vue';
 import TextButton from '@/elements/TextButton.vue';

frontend/src/components/FTUE/Finish.vue

@@ -25,7 +25,6 @@ import SecondaryButton from '@/tbpro/elements/SecondaryButton.vue';
 import { useFTUEStore } from '@/stores/ftue-store';
 import { useCalendarStore } from '@/stores/calendar-store';
 import { storeToRefs } from 'pinia';
-import InfoBar from '@/elements/InfoBar.vue';
 import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
 import SyncCard from '@/tbpro/elements/SyncCard.vue';
 

frontend/src/components/FTUE/GooglePermissions.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="flex w-full flex-col gap-4">
-    <InfoBar v-if="errorMessage">
+    <notice-bar v-if="errorMessage">
       {{ errorMessage }}
-    </InfoBar>
+    </notice-bar>
     <p class="mb-2 text-lg">{{ t('text.googlePermissionDisclaimer') }}</p>
     <ul class="text-md mx-8 list-disc">
       <li>
@@ -60,10 +60,10 @@ import {
 import SecondaryButton from '@/tbpro/elements/SecondaryButton.vue';
 import { useFTUEStore } from '@/stores/ftue-store';
 import { useCalendarStore } from '@/stores/calendar-store';
-import { useUserStore } from '@/stores/user-store.js';
+import { useUserStore } from '@/stores/user-store';
 import { storeToRefs } from 'pinia';
 import { useRoute, useRouter } from 'vue-router';
-import InfoBar from '@/elements/InfoBar.vue';
+import NoticeBar from '@/tbpro/elements/NoticeBar.vue';
 
 const { t } = useI18n();
 const route = useRoute();

frontend/src/components/FTUE/SetupSchedule.vue

@@ -11,13 +11,15 @@ import { storeToRefs } from 'pinia';
 import { useFTUEStore } from '@/stores/ftue-store';
 import { useUserStore } from '@/stores/user-store';
 import SecondaryButton from '@/tbpro/elements/SecondaryButton.vue';
-import InfoBar from '@/elements/InfoBar.vue';
+import NoticeBar from '@/tbpro/elements/NoticeBar.vue';
 import { defaultSlotDuration } from '@/definitions';
 import { useI18n } from 'vue-i18n';
 import { useCalendarStore } from '@/stores/calendar-store';
 import BubbleSelect from '@/elements/BubbleSelect.vue';
+import { useScheduleStore } from '@/stores/schedule-store';
 
 const { t } = useI18n();
+const dj = inject('dayjs');
 const call = inject('call');
 const isoWeekdays = inject('isoWeekdays');
 
@@ -28,7 +30,9 @@ const {
 const { nextStep, previousStep } = ftueStore;
 const user = useUserStore();
 const calendarStore = useCalendarStore();
+const scheduleStore = useScheduleStore();
 const { connectedCalendars } = storeToRefs(calendarStore);
+const { schedules } = storeToRefs(scheduleStore);
 
 const calendarOptions = computed(() => connectedCalendars.value.map((calendar) => ({
   label: calendar.title,
@@ -46,9 +50,10 @@ const scheduleDayOptions = isoWeekdays.map((day) => ({
  * @type {Ref<HTMLFormElement>}
  */
 const formRef = ref();
+const errorMessage = ref(null);
 
 const scheduleName = ref(`${user.data.name}'s Availability`);
-const calendar = ref({});
+const calendar = ref(0);
 const startTime = ref('09:00');
 const endTime = ref('17:00');
 const bookingDuration = ref(defaultSlotDuration);
@@ -59,8 +64,36 @@ const isLoading = ref(false);
 
 const onSubmit = async () => {
   isLoading.value = true;
+  errorMessage.value = null;
   if (!formRef.value.checkValidity()) {
-    console.log('Nope!');
+    isLoading.value = false;
+    return;
+  }
+
+  const startTimeFormatted = dj(`${dj().format('YYYY-MM-DD')}T${startTime.value}:00`)
+    .tz(user.data.timezone ?? dj.tz.guess(), true)
+    .utc()
+    .format('HH:mm');
+  const endTimeFormatted = dj(`${dj().format('YYYY-MM-DD')}T${endTime.value}:00`)
+    .tz(user.data.timezone ?? dj.tz.guess(), true)
+    .utc()
+    .format('HH:mm');
+
+  const scheduleData = {
+    active: true,
+    name: scheduleName.value,
+    calendar_id: calendar.value,
+    start_time: startTimeFormatted,
+    end_time: endTimeFormatted,
+    slot_duration: bookingDuration.value,
+    weekdays: scheduleDays.value,
+  };
+
+  const data = schedules.value.length > 0 ? await scheduleStore.updateSchedule(call, schedules.value[0].id, scheduleData) : await scheduleStore.createSchedule(call, scheduleData);
+  console.log(data);
+
+  if (data?.error) {
+    errorMessage.value = data?.message;
     isLoading.value = false;
     return;
   }
@@ -69,25 +102,32 @@ const onSubmit = async () => {
 };
 
 onMounted(async () => {
-  await calendarStore.fetch(call);
+  await Promise.all([
+    calendarStore.fetch(call),
+    scheduleStore.fetch(call),
+  ]);
+
   calendar.value = connectedCalendars.value[0].id;
 });
 
 </script>
 
 <template>
   <div class="content">
-    <InfoBar>
+    <notice-bar type="error" v-if="errorMessage">
+      {{ errorMessage }}
+    </notice-bar>
+    <notice-bar v-else>
       You can edit this schedule later
-    </InfoBar>
+    </notice-bar>
     <form ref="formRef" autocomplete="off" autofocus>
       <div class="column">
         <text-input name="scheduleName" v-model="scheduleName" required>Schedule's Name</text-input>
         <div class="pair">
         <text-input type="time" name="startTime" v-model="startTime" required>Start Time</text-input>
         <text-input type="time" name="endTime" v-model="endTime" required>End Time</text-input>
         </div>
-        <bubble-select :options="scheduleDayOptions" />
+        <bubble-select :options="scheduleDayOptions" v-model="scheduleDays" />
       </div>
       <div class="column">
         <select-input name="calendar" v-model="calendar" :options="calendarOptions" required>Select Calendar</select-input>
@@ -125,6 +165,11 @@ 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/locales/en.json

@@ -358,5 +358,12 @@
   "units": {
     "minutes": "{value} minutes",
     "none": "{value}"
+  },
+  "icons": {
+    "calendar": "Calendar",
+    "info": "Information",
+    "success": "Success",
+    "warning": "Warning",
+    "critical": "Critical"
   }
 }