From 00a18d694b704dc3aa5a3260e7f5198922cbf89c Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Thu, 20 Jun 2024 10:27:59 -0700
Subject: [PATCH] First pass at setup schedule

---
 frontend/src/assets/styles/colours.css        |   1 +
 frontend/src/assets/styles/custom-media.pcss  |   5 +
 frontend/src/assets/styles/variables.css      |   2 +-
 .../src/components/FTUE/ConnectCalendars.vue  |  13 +-
 .../src/components/FTUE/SetupSchedule.vue     | 175 ++++++++++++++++++
 frontend/src/main.js                          |   2 +-
 frontend/src/stores/ftue-store.js             |   2 +-
 frontend/src/tbpro/elements/BaseButton.vue    |   1 +
 frontend/src/tbpro/elements/SelectInput.vue   |  17 +-
 frontend/src/tbpro/elements/SyncCard.vue      |  25 ++-
 frontend/src/tbpro/elements/TextInput.vue     |   6 +-
 .../src/views/FirstTimeUserExperienceView.vue |  19 +-
 12 files changed, 253 insertions(+), 15 deletions(-)
 create mode 100644 frontend/src/assets/styles/custom-media.pcss
 create mode 100644 frontend/src/components/FTUE/SetupSchedule.vue

diff --git a/frontend/src/assets/styles/colours.css b/frontend/src/assets/styles/colours.css
index eb0d7e33a..a448e941b 100644
--- a/frontend/src/assets/styles/colours.css
+++ b/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;
diff --git a/frontend/src/assets/styles/custom-media.pcss b/frontend/src/assets/styles/custom-media.pcss
new file mode 100644
index 000000000..e141d2f28
--- /dev/null
+++ b/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 */
diff --git a/frontend/src/assets/styles/variables.css b/frontend/src/assets/styles/variables.css
index e09951ed9..9f9c46bed 100644
--- a/frontend/src/assets/styles/variables.css
+++ b/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 */
 }
diff --git a/frontend/src/components/FTUE/ConnectCalendars.vue b/frontend/src/components/FTUE/ConnectCalendars.vue
index 3da9974d8..4f9bbf42c 100644
--- a/frontend/src/components/FTUE/ConnectCalendars.vue
+++ b/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>
diff --git a/frontend/src/components/FTUE/SetupSchedule.vue b/frontend/src/components/FTUE/SetupSchedule.vue
new file mode 100644
index 000000000..ff66fdcd4
--- /dev/null
+++ b/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>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 63519529b..a942145eb 100644
--- a/frontend/src/main.js
+++ b/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
diff --git a/frontend/src/stores/ftue-store.js b/frontend/src/stores/ftue-store.js
index ea4c34166..fb53478a1 100644
--- a/frontend/src/stores/ftue-store.js
+++ b/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,
diff --git a/frontend/src/tbpro/elements/BaseButton.vue b/frontend/src/tbpro/elements/BaseButton.vue
index e1a6343c8..67dca8a64 100644
--- a/frontend/src/tbpro/elements/BaseButton.vue
+++ b/frontend/src/tbpro/elements/BaseButton.vue
@@ -125,4 +125,5 @@ button {
     height: 1.25rem
   }
 }
+
 </style>
diff --git a/frontend/src/tbpro/elements/SelectInput.vue b/frontend/src/tbpro/elements/SelectInput.vue
index 0a4ffdc0b..c75cc6281 100644
--- a/frontend/src/tbpro/elements/SelectInput.vue
+++ b/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);
 }
diff --git a/frontend/src/tbpro/elements/SyncCard.vue b/frontend/src/tbpro/elements/SyncCard.vue
index 6f25b3332..bf0561799 100644
--- a/frontend/src/tbpro/elements/SyncCard.vue
+++ b/frontend/src/tbpro/elements/SyncCard.vue
@@ -41,9 +41,11 @@ 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);
@@ -51,9 +53,11 @@ defineProps({
 }
 
 .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>
diff --git a/frontend/src/tbpro/elements/TextInput.vue b/frontend/src/tbpro/elements/TextInput.vue
index 19bceafc6..649401979 100644
--- a/frontend/src/tbpro/elements/TextInput.vue
+++ b/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"
diff --git a/frontend/src/views/FirstTimeUserExperienceView.vue b/frontend/src/views/FirstTimeUserExperienceView.vue
index 6e51a7298..8fe4830b7 100644
--- a/frontend/src/views/FirstTimeUserExperienceView.vue
+++ b/frontend/src/views/FirstTimeUserExperienceView.vue
@@ -10,6 +10,7 @@
           <setup-profile v-if="currentStep === ftueStep.setupProfile"/>
           <google-permissions v-else-if="currentStep === ftueStep.googlePermissions"/>
           <connect-calendars v-else-if="currentStep === ftueStep.connectCalendars"/>
+          <setup-schedule v-else-if="currentStep === ftueStep.setupSchedule"/>
         </div>
         <div class="divider"></div>
         <div class="footer">
@@ -30,6 +31,7 @@ import GooglePermissions from '@/components/FTUE/GooglePermissions.vue';
 import WordMark from '@/elements/WordMark.vue';
 import { onMounted } from 'vue';
 import ConnectCalendars from '@/components/FTUE/ConnectCalendars.vue';
+import SetupSchedule from '@/components/FTUE/SetupSchedule.vue';
 
 const ftueStore = useFTUEStore();
 const {
@@ -44,6 +46,8 @@ onMounted(() => {
 </script>
 
 <style scoped>
+@import '@/assets/styles/custom-media.pcss';
+
 .overlay {
   display: flex;
   width: 100%;
@@ -52,11 +56,12 @@ onMounted(() => {
   align-items: center;
   justify-content: center;
 }
+
 /* position-center apmt-background-color fixed z-[60] flex size-full gap-6 rounded-xl bg-white p-8 pb-0 drop-shadow-xl*/
 .modal {
   position: relative;
-  width: 50rem; /* 800px */
-  height: 37.5rem; /* 600px */
+  width: 100%;
+  height: 100%;
   background-color: white;
   background-image: url('@/assets/svg/ftue-background.svg');
   background-size: cover;
@@ -64,6 +69,7 @@ onMounted(() => {
   border-radius: 0.75rem;
   padding: 2rem 2rem 0;
 }
+
 .modal:before {
   content: '';
   position: absolute;
@@ -92,6 +98,7 @@ onMounted(() => {
   position: absolute;
   bottom: 4rem;
 }
+
 .footer {
   position: absolute;
   bottom: 0;
@@ -100,10 +107,18 @@ onMounted(() => {
   display: flex;
   justify-content: center;
   align-items: center;
+
   a {
     color: var(--tbpro-primary);
     font-size: 0.75rem;
     line-height: 1.5rem;
   }
 }
+
+@media (--md) {
+  .modal {
+    width: 50rem; /* 800px */
+    height: 37.5rem; /* 600px */
+  }
+}
 </style>