From 1882e2d1e5489ee94b3564804f1f47c24a74bf0c Mon Sep 17 00:00:00 2001
From: Mel <97147377+MelissaAutumn@users.noreply.github.com>
Date: Wed, 10 Jul 2024 12:21:11 -0700
Subject: [PATCH] Bugs/517 ftue qa (#532)

* Don't overwrite app theme, just remove the dark class from html.

* * Require one weekday to be selected
* Adjust styling of notice bar
* Dynamically show warnings on notice bar
* Add missing chip
---
 backend/src/appointment/database/schemas.py      |  2 +-
 frontend/src/assets/styles/colours.css           |  1 +
 .../src/components/FTUE/ConnectCalendars.vue     | 12 ++++++++++--
 frontend/src/components/FTUE/ConnectVideo.vue    | 16 ++++++++++++++++
 frontend/src/components/FTUE/SetupSchedule.vue   |  1 -
 frontend/src/locales/en.json                     |  3 ++-
 frontend/src/stores/ftue-store.js                |  4 +++-
 frontend/src/stores/schedule-store.ts            |  2 ++
 frontend/src/tbpro/elements/NoticeBar.vue        |  3 +++
 .../src/views/FirstTimeUserExperienceView.vue    |  7 +++++--
 10 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/backend/src/appointment/database/schemas.py b/backend/src/appointment/database/schemas.py
index f40b752e8..3abd8fa1f 100644
--- a/backend/src/appointment/database/schemas.py
+++ b/backend/src/appointment/database/schemas.py
@@ -167,7 +167,7 @@ class ScheduleBase(BaseModel):
     end_time: time | None = None
     earliest_booking: int | None = None
     farthest_booking: int | None = None
-    weekdays: list[int] | None = [1, 2, 3, 4, 5]
+    weekdays: list[int] | None = Field(min_length=1, default=[1, 2, 3, 4, 5])
     slot_duration: int | None = None
     meeting_link_provider: MeetingLinkProviderType | None = MeetingLinkProviderType.none
 
diff --git a/frontend/src/assets/styles/colours.css b/frontend/src/assets/styles/colours.css
index e61aef32c..4d94cf41d 100644
--- a/frontend/src/assets/styles/colours.css
+++ b/frontend/src/assets/styles/colours.css
@@ -33,6 +33,7 @@ html {
   --tbpro-primary-hover: #066769;
   --tbpro-primary-pressed: #0A5757;
 
+  --tbpro-appointment-seconday: #81D4B5;
   --tbpro-secondary: var(--surface-subtle);
   --tbpro-secondary-border: var(--surface-border);
   --tbpro-secondary-pressed: var(--neutral-500);
diff --git a/frontend/src/components/FTUE/ConnectCalendars.vue b/frontend/src/components/FTUE/ConnectCalendars.vue
index 4c2e43d96..dea9ee46d 100644
--- a/frontend/src/components/FTUE/ConnectCalendars.vue
+++ b/frontend/src/components/FTUE/ConnectCalendars.vue
@@ -35,7 +35,7 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import {
-  onMounted, inject, ref, computed,
+  onMounted, inject, ref, computed, watch,
 } from 'vue';
 import SecondaryButton from '@/tbpro/elements/SecondaryButton.vue';
 import { useFTUEStore } from '@/stores/ftue-store';
@@ -52,7 +52,7 @@ const isLoading = ref(false);
 
 const ftueStore = useFTUEStore();
 const {
-  hasNextStep, hasPreviousStep, infoMessage,
+  hasNextStep, hasPreviousStep, infoMessage, warningMessage,
 } = storeToRefs(ftueStore);
 
 const { previousStep, nextStep } = ftueStore;
@@ -62,6 +62,14 @@ const calendars = ref([]);
 const selected = computed(() => calendars.value.filter((item) => item.checked).length);
 const continueTitle = computed(() => (selected.value ? t('label.continue') : t('ftue.oneCalendarRequired')));
 
+watch(selected, (val) => {
+  if (val === 0) {
+    warningMessage.value = t('ftue.oneCalendarRequired');
+  } else {
+    warningMessage.value = null;
+  }
+});
+
 onMounted(async () => {
   isLoading.value = true;
 
diff --git a/frontend/src/components/FTUE/ConnectVideo.vue b/frontend/src/components/FTUE/ConnectVideo.vue
index 4d19270b5..c22ee38a6 100644
--- a/frontend/src/components/FTUE/ConnectVideo.vue
+++ b/frontend/src/components/FTUE/ConnectVideo.vue
@@ -2,6 +2,7 @@
   <div class="content">
     <div class="cards">
       <div class="card zoom" @click="connectZoom">
+        <div class="chip">Recommended</div>
         <img class="zoom-logo" src="@/assets/svg/zoom-logo.svg" :alt="t('heading.zoom')"/>
         <p class="zoom-description">
           {{ t('text.connectZoom') }}
@@ -144,6 +145,21 @@ const connectZoom = async () => {
   }
 }
 
+.chip {
+  display: flex;
+  justify-content: center;
+  align-self: flex-end;
+  align-items: center;
+  width: 6.0625rem;
+  min-height: 1.0625rem;
+  font-size: 0.5625rem;
+  font-weight: 700;
+  color: var(--tbpro-text);
+  background-color: var(--tbpro-appointment-seconday);
+  border-radius: 0.1875rem;
+  text-transform: uppercase;
+}
+
 .zoom-logo {
   margin: auto;
   width: 8.25rem;
diff --git a/frontend/src/components/FTUE/SetupSchedule.vue b/frontend/src/components/FTUE/SetupSchedule.vue
index c6749e50c..5ea32f464 100644
--- a/frontend/src/components/FTUE/SetupSchedule.vue
+++ b/frontend/src/components/FTUE/SetupSchedule.vue
@@ -112,7 +112,6 @@ const isLoading = ref(false);
 
 const onSubmit = async () => {
   isLoading.value = true;
-
   errorMessage.value = null;
 
   if (!formRef.value.checkValidity()) {
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 6ae6ccea7..60bfb0a99 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -19,7 +19,8 @@
     "unknownAppointmentError": "There was an issue creating your booking. Please try again.",
     "unknownScheduleError": "There was an issue creating your schedule. Please try again.",
     "usernameIsNotAvailable": "Username not available. Please choose another.",
-    "externalAccountHasNoCalendars": "Your {external} account contains no calendars. Please connect a different account."
+    "externalAccountHasNoCalendars": "Your {external} account contains no calendars. Please connect a different account.",
+    "selectOneDay": "You need to select at least one day to continue."
   },
   "fields": {
     "slot_duration": "Slot Duration",
diff --git a/frontend/src/stores/ftue-store.js b/frontend/src/stores/ftue-store.js
index f0e763113..91e8cd905 100644
--- a/frontend/src/stores/ftue-store.js
+++ b/frontend/src/stores/ftue-store.js
@@ -16,6 +16,7 @@ export const useFTUEStore = defineStore('FTUE', () => {
   const data = useLocalStorage('tba/ftue', structuredClone(initialObject));
   const infoMessage = ref(null);
   const errorMessage = ref(null);
+  const warningMessage = ref(null);
 
   /**
    * State information for navigating the First Time User Experience
@@ -74,6 +75,7 @@ export const useFTUEStore = defineStore('FTUE', () => {
   const clearMessages = () => {
     infoMessage.value = null;
     errorMessage.value = null;
+    warningMessage.value = null;
   };
 
   const nextStep = async () => {
@@ -97,6 +99,6 @@ export const useFTUEStore = defineStore('FTUE', () => {
   };
 
   return {
-    data, ftueView, nextStep, previousStep, currentStep, hasNextStep, hasPreviousStep, stepTitle, $reset, infoMessage, errorMessage,
+    data, ftueView, nextStep, previousStep, currentStep, hasNextStep, hasPreviousStep, stepTitle, $reset, infoMessage, errorMessage, warningMessage,
   };
 });
diff --git a/frontend/src/stores/schedule-store.ts b/frontend/src/stores/schedule-store.ts
index a5767e98a..e045f4e04 100644
--- a/frontend/src/stores/schedule-store.ts
+++ b/frontend/src/stores/schedule-store.ts
@@ -80,6 +80,8 @@ export const useScheduleStore = defineStore('schedules', () => {
             field: fieldLocalized,
             value: valueLocalized,
           });
+        } else if (err.type === 'too_short' && field === 'weekdays') {
+          message = i18n.t('error.selectOneDay');
         }
 
         return message;
diff --git a/frontend/src/tbpro/elements/NoticeBar.vue b/frontend/src/tbpro/elements/NoticeBar.vue
index 386aeaf1d..b4cbd8128 100644
--- a/frontend/src/tbpro/elements/NoticeBar.vue
+++ b/frontend/src/tbpro/elements/NoticeBar.vue
@@ -48,6 +48,9 @@ const isError = props.type === 'error';
 }
 .body {
   margin: auto;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  line-height: 1;
 }
 .notice {
   position: relative;
diff --git a/frontend/src/views/FirstTimeUserExperienceView.vue b/frontend/src/views/FirstTimeUserExperienceView.vue
index bfc301aad..fa4c82fa1 100644
--- a/frontend/src/views/FirstTimeUserExperienceView.vue
+++ b/frontend/src/views/FirstTimeUserExperienceView.vue
@@ -10,6 +10,9 @@
           <notice-bar type="error" v-if="errorMessage">
             {{ errorMessage }}
           </notice-bar>
+          <notice-bar type="warning" v-else-if="warningMessage">
+            {{ warningMessage }}
+          </notice-bar>
           <notice-bar v-else-if="infoMessage">
             {{ infoMessage }}
           </notice-bar>
@@ -60,7 +63,7 @@ const router = useRouter();
 const user = useUserStore();
 const ftueStore = useFTUEStore();
 const {
-  stepTitle, currentStep, infoMessage, errorMessage,
+  stepTitle, currentStep, infoMessage, errorMessage, warningMessage,
 } = storeToRefs(ftueStore);
 
 const { t } = useI18n();
@@ -73,7 +76,7 @@ onMounted(() => {
   }
 
   // Force light-mode
-  localStorage?.setItem('theme', 'light');
+  document.documentElement.classList.remove('dark');
 });
 
 </script>