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
thunderbird · Jul 10, 2024 · 1882e2d · 1882e2d
1 parent f687f70
commit 1882e2d
Show file tree

Hide file tree

Showing 10 changed files with 43 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>