First pass at setup schedule

frontend/src/assets/styles/colours.css

@@ -10,6 +10,7 @@ html {
   --surface-base: #FEFFFF;
   --surface-subtle: #F7F7F7;
   --surface-lower: #F7F7F7;
+  --surface-raised: var(--neutral);
   --surface-border: var(--neutral-200);
   --surface-intense: #777580;
   --success-pressed: #194E2C;

frontend/src/assets/styles/custom-media.pcss

@@ -0,0 +1,5 @@
+/* PostCSS Custom Media Plugin */
+@custom-media --sm (min-width: 40.0rem); /* 640px */
+@custom-media --md (min-width: 48.0rem); /* 768px */
+@custom-media --lg (min-width: 64.0rem); /* 1024px */
+@custom-media --xl (min-width: 80.0rem); /* 1280px */

frontend/src/assets/styles/variables.css

@@ -1,5 +1,5 @@
 html {
   --border-radius: 0.1875rem; /* 3px */
-  --txt-input: 0.8125rem;     /* 13px */
+  --txt-input: 0.8125rem; /* 13px */
   --line-height-input: 1.25rem; /* 20px */
 }

frontend/src/components/FTUE/ConnectCalendars.vue

@@ -72,11 +72,14 @@ onMounted(async () => {
 });
 
 const onSubmit = async () => {
-  // await nextStep();
+  isLoading.value = true;
+  await nextStep();
 };
 
 </script>
 <style scoped>
+@import '@/assets/styles/custom-media.pcss';
+
 .content {
   display: flex;
   flex-direction: column;
@@ -87,6 +90,12 @@ const onSubmit = async () => {
 
 }
 .sync-card {
-  width: 27.5rem;
+  width: 100%;
+}
+
+@media (--md) {
+  .sync-card {
+    width: 27.5rem;
+  }
 }
 </style>

frontend/src/components/FTUE/SetupSchedule.vue

@@ -0,0 +1,175 @@
+<script setup>
+
+import TextInput from '@/tbpro/elements/TextInput.vue';
+import SelectInput from '@/tbpro/elements/SelectInput.vue';
+import {
+  computed,
+  inject, onMounted, ref,
+} from 'vue';
+import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
+import { storeToRefs } from 'pinia';
+import { useFTUEStore } from '@/stores/ftue-store';
+import { useUserStore } from '@/stores/user-store';
+import SecondaryButton from '@/tbpro/elements/SecondaryButton.vue';
+import SyncCard from '@/tbpro/elements/SyncCard.vue';
+import InfoBar from '@/elements/InfoBar.vue';
+import { defaultSlotDuration } from '@/definitions.js';
+import { useI18n } from 'vue-i18n';
+import { useCalendarStore } from '@/stores/calendar-store.js';
+
+const { t } = useI18n();
+const call = inject('call');
+const dj = inject('dayjs');
+const isoWeekdays = inject('isoWeekdays');
+
+const ftueStore = useFTUEStore();
+const {
+  hasNextStep, hasPreviousStep,
+} = storeToRefs(ftueStore);
+const { nextStep, previousStep } = ftueStore;
+const user = useUserStore();
+const calendarStore = useCalendarStore();
+const { connectedCalendars } = storeToRefs(calendarStore);
+
+const calendarOptions = computed(() => connectedCalendars.value.map((calendar) => ({
+  label: calendar.title,
+  value: calendar.id,
+})));
+const durationOptions = [15, 30, 45, 60, 75, 90].map((min) => ({
+  label: `${min} min`,
+  value: min,
+}));
+/**
+ * @type {Ref<HTMLFormElement>}
+ */
+const formRef = ref();
+
+const scheduleName = ref(`${user.data.name}'s Availability`);
+const calendar = ref({});
+const startTime = ref('09:00');
+const endTime = ref('17:00');
+const bookingDuration = ref(defaultSlotDuration);
+const scheduleDays = ref([1, 2, 3, 4, 5]);
+
+const duration = computed(() => `${bookingDuration.value} minute`);
+const isLoading = ref(false);
+
+const onSubmit = async () => {
+  if (!formRef.value.checkValidity()) {
+    console.log('Nope!');
+  }
+
+  // await nextStep();
+};
+
+onMounted(async () => {
+  await calendarStore.fetch(call);
+  calendar.value = connectedCalendars.value[0].id;
+});
+
+</script>
+
+<template>
+  <div class="content">
+    <InfoBar>
+      You can edit this schedule later
+    </InfoBar>
+    <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>
+        <ul>
+          <li v-for="day in isoWeekdays" :key="day.iso">{{ day.min[0] }}</li>
+        </ul>
+      </div>
+      <div class="column">
+        <select-input name="calendar" v-model="calendar" :options="calendarOptions" required>Select Calendar</select-input>
+        <select-input name="duration" v-model="bookingDuration" :options="durationOptions" required>Booking Duration</select-input>
+        <div class="scheduleInfo">{{
+                t('text.recipientsCanScheduleBetween', {
+                  duration: duration,
+                  earliest: '24 hours',
+                  farthest: '2 weeks',
+                })
+              }}
+            </div>
+      </div>
+    </form>
+  </div>
+  <div class="absolute bottom-[5.75rem] flex w-full justify-end gap-4">
+    <secondary-button
+      class="btn-back"
+      title="Back"
+      v-if="hasPreviousStep"
+      :disabled="isLoading"
+      @click="previousStep()"
+    >Back
+    </secondary-button>
+    <primary-button
+      class="btn-continue"
+      title="Continue"
+      v-if="hasNextStep"
+      @click="onSubmit()"
+      :disabled="isLoading"
+    >Continue</primary-button>
+  </div>
+</template>
+
+<style scoped>
+@import '@/assets/styles/custom-media.pcss';
+
+form {
+  gap: 1rem;
+  border-radius: 0.5625rem;
+  background-color: color-mix(in srgb, var(--surface-base) 65%, transparent);
+  width: 100%;
+  height: 100%;
+  padding: 1rem;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 3.125rem;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  font-family: 'Inter', 'sans-serif';
+}
+
+ul {
+  display: flex;
+  gap: 1rem;
+}
+
+.scheduleInfo {
+  padding: 1rem;
+  border-radius: 0.3565625rem;
+  border: 0.0625rem solid var(--surface-border);
+  background-color: var(--surface-raised);
+  font-size: 0.6875rem;
+  line-height: 163%;
+  font-weight: 400;
+}
+
+@media (--md) {
+  form {
+    display: flex;
+    width: 40.0rem;
+    height: 18rem
+  }
+  .column {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 50%;
+  }
+  .pair {
+    display: flex;
+    gap: 2rem;
+  }
+}
+</style>

frontend/src/main.js

@@ -13,7 +13,7 @@ import useDayJS from '@/composables/dayjs';
 import i18ninstance from '@/composables/i18n';
 
 // init basic css with tailwind imports
-import '@/assets/main.css';
+import '@/assets/styles/main.css';
 
 // init sentry
 // eslint-disable-next-line import/no-extraneous-dependencies

frontend/src/stores/ftue-store.js

@@ -43,7 +43,7 @@ export const useFTUEStore = defineStore('FTUE', () => {
     [ftueStep.setupSchedule]: {
       previous: ftueStep.connectCalendars,
       next: ftueStep.connectVideoConferencing,
-      title: 'Create schedule',
+      title: 'Set up your appointment availability',
     },
     [ftueStep.connectVideoConferencing]: {
       previous: ftueStep.setupSchedule,

frontend/src/tbpro/elements/BaseButton.vue

@@ -125,4 +125,5 @@ button {
     height: 1.25rem
   }
 }
+
 </style>

frontend/src/tbpro/elements/SelectInput.vue

@@ -43,7 +43,7 @@ const onInvalid = (evt) => {
         {{ option.label }}
       </option>
     </select>
-    <span v-if="isInvalid" class="flex w-full text-left text-rose-500">
+    <span :class="{'visible': isInvalid}" class="help-label">
       {{ validationMessage }}
     </span>
   </label>
@@ -66,6 +66,21 @@ const onInvalid = (evt) => {
   font-weight: 600;
 }
 
+.help-label {
+  visibility: hidden;
+  display: flex;
+  color: var(--critical-default);
+
+  width: 100%;
+  min-height: 0.9375rem;
+  font-size: 0.625rem;
+  line-height: 0.9375rem;
+}
+
+.visible {
+  visibility: visible;
+}
+
 .required {
   color: var(--critical);
 }

frontend/src/tbpro/elements/SyncCard.vue

@@ -41,19 +41,23 @@ defineProps({
 });
 </script>
 <style scoped>
+@import '@/assets/styles/custom-media.pcss';
+
 .wrapper {
-  border-radius: 9px;
-  border: 1px solid var(--surface-border);
+  border-radius: 0.5625rem;
+  border: 0.0625rem solid var(--surface-border);
   background: var(--neutral);
   font-family: 'Inter', 'sans-serif';
   font-size: var(--txt-input);
   color: var(--tbpro-text);
 }
 
 .header {
+  display: flex;
+  flex-direction: column;
+
   position: relative;
   min-height: 3.375rem;
-  display: flex;
   gap: 0.5rem;
   padding: 0.75rem 0.625rem;
   border-top-left-radius: 0.5rem;
@@ -109,9 +113,18 @@ input {
 }
 
 .select-all {
-  position: relative;
   margin-left: auto;
-  margin-right: 0.25rem;
-  top: 2.25rem;
+  margin-right: auto;
+}
+
+@media (--md) {
+  .header {
+    flex-direction: row;
+  }
+  .select-all {
+    position: relative;
+    margin-right: 0.25rem;
+    top: 2.25rem;
+  }
 }
 </style>

frontend/src/tbpro/elements/TextInput.vue

@@ -3,6 +3,10 @@ import { ref } from 'vue';
 
 defineProps({
   name: String,
+  type: {
+    type: String,
+    default: 'text',
+  },
   placeholder: {
     type: String,
     default: '',
@@ -36,7 +40,7 @@ const onInvalid = (evt) => {
     </span>
     <input
       v-model="model"
-      type="text"
+      :type="type"
       :id="name"
       :name="name"
       :disabled="disabled"