Add a beta warning warning people about the fact we're still in beta.

frontend/src/definitions.ts

@@ -275,6 +275,10 @@ export enum MetricEvents {
   WaitingListEmailRemoved = 'apmt.signup.email-removed',
 }
 
+export enum Dismissibles {
+  BetaWarning = 'beta-warning'
+}
+
 export default {
   AlertSchemes,
   BookingCalendarView,
@@ -304,4 +308,5 @@ export default {
   TableDataType,
   TooltipPosition,
   WaitingListAction,
+  Dismissibles,
 };

frontend/src/locales/en.json

@@ -357,6 +357,21 @@
     "shareMyLink": "Share my link",
     "reportBug": "Report Bug"
   },
+  "notices": {
+    "betaWarning": {
+      "heading": "As we're currently in beta, we do have some issues we're dealing with:",
+      "list": [
+        "Please check your spam folder as some emails might end up there",
+        "If Zoom meetings don't appear in your appointment invite, please disconnect and reconnect your zoom account in the {connectedAccounts} section of the settings",
+        "If you experience other issues, please use the {contactUs} form, or join us on our {matrixChannel}"
+      ],
+      "linkText": {
+        "connectedAccounts": "Connected Accounts",
+        "contactUs": "contact us",
+        "matrixChannel": "Matrix Channel"
+      }
+    }
+  },
   "placeholder": {
     "biWeeklyCafeDates": "Bi-weekly Café Dates…",
     "emailAddress": "john.doe{'@'}example.com",

frontend/src/models.ts

@@ -229,6 +229,14 @@ export type User = {
   uniqueHash: string;
 };
 
+/**
+ * User activity as in the things they do within our application
+ * Used to store the state of dismissables and such.
+ */
+export type UserActivity = {
+  dismissedBetaWarning: boolean,
+};
+
 export type Subscriber = {
   id?: number;
   username: string;

frontend/src/stores/user-activity-store.ts

@@ -0,0 +1,20 @@
+import { defineStore } from 'pinia';
+import { UserActivity } from '@/models';
+import { useLocalStorage } from '@vueuse/core';
+import { Dismissibles } from '@/definitions';
+
+const initialUserActivityObject = {
+  dismissedBetaWarning: false,
+} as UserActivity;
+
+export const useUserActivityStore = defineStore('user-activity', () => {
+  const data = useLocalStorage('tba/user-activity', initialUserActivityObject);
+
+  const dismiss = (dismissible: Dismissibles) => {
+    if (dismissible === Dismissibles.BetaWarning) {
+      data.value.dismissedBetaWarning = true;
+    }
+  };
+
+  return { dismiss, data };
+});

frontend/src/views/ScheduleView.vue

@@ -2,7 +2,7 @@
 import {
   BookingCalendarView,
   DateFormatStrings,
-  DEFAULT_SLOT_DURATION,
+  DEFAULT_SLOT_DURATION, Dismissibles,
   EventLocationType,
   MeetingLinkProviderType,
 } from '@/definitions';
@@ -23,10 +23,13 @@ import {
 } from '@/models';
 import ScheduleCreation from '@/components/ScheduleCreation.vue';
 import CalendarQalendar from '@/components/CalendarQalendar.vue';
+import NoticeBar from '@/tbpro/elements/NoticeBar.vue';
+import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
 
 // stores
 import { useAppointmentStore } from '@/stores/appointment-store';
 import { useCalendarStore } from '@/stores/calendar-store';
+import { useUserActivityStore } from '@/stores/user-activity-store';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -36,8 +39,10 @@ const refresh = inject(refreshKey);
 
 const appointmentStore = useAppointmentStore();
 const calendarStore = useCalendarStore();
+const userActivityStore = useUserActivityStore();
 const { pendingAppointments } = storeToRefs(appointmentStore);
 const { connectedCalendars } = storeToRefs(calendarStore);
+const { data: userActivityData } = storeToRefs(userActivityStore);
 
 // current selected date, if not in route: defaults to now
 const activeDate = ref(route.params.date ? dj(route.params.date as string) : dj());
@@ -146,9 +151,43 @@ onMounted(async () => {
   const eventsTo = dj(activeDate.value).endOf('month').format('YYYY-MM-DD');
   await getRemoteEvents(eventsFrom, eventsTo);
 });
+
+const dismiss = () => {
+  userActivityStore.dismiss(Dismissibles.BetaWarning);
+};
 </script>
 
 <template>
+  <notice-bar type="info" id="beta-warning" v-if="!userActivityData.dismissedBetaWarning">
+    <p>{{ t('notices.betaWarning.heading') }}</p>
+    <ul>
+      <li>{{ t('notices.betaWarning.list.0') }}</li>
+      <li>
+        <i18n-t keypath="notices.betaWarning.list.1">
+          <template v-slot:connectedAccounts>
+            <router-link class="underline" :to="{ path: '/settings/connectedAccounts' }" target="_blank">
+              {{ t('notices.betaWarning.linkText.connectedAccounts') }}
+            </router-link>
+          </template>
+        </i18n-t>
+      </li>
+      <li>
+        <i18n-t keypath="notices.betaWarning.list.2">
+          <template v-slot:contactUs>
+            <router-link class="underline" :to="{ name: 'contact' }" target="_blank">
+              {{ t('notices.betaWarning.linkText.contactUs') }}
+            </router-link>
+          </template>
+          <template v-slot:matrixChannel>
+            <a class="underline" href="https://matrix.to/#/#tb-services:mozilla.org" target="_blank">
+              {{ t('notices.betaWarning.linkText.matrixChannel') }}
+            </a>
+          </template>
+        </i18n-t>
+      </li>
+    </ul>
+    <primary-button class="dismiss" size="small" @click="dismiss">Dismiss</primary-button>
+  </notice-bar>
   <!-- page title area -->
   <div class="flex select-none flex-col items-start justify-between lg:flex-row">
     <div class="text-4xl font-light">{{ t('label.dashboard') }}</div>
@@ -180,3 +219,52 @@ onMounted(async () => {
     />
   </div>
 </template>
+<style scoped>
+@import '@/assets/styles/custom-media.pcss';
+
+#beta-warning {
+  position: relative;
+  /* The navbar provides margin already */
+  margin: 0 0 2rem;
+
+  :deep(.icon) {
+    top: 0.75rem;
+  }
+
+  :deep(.body) {
+    text-align: left;
+    margin-left: 0.5rem;
+    line-height: 1.5;
+
+    a {
+      text-decoration: underline;
+    }
+
+    ul {
+      list-style: circle;
+      margin-left: 1rem;
+      font-weight: 400;
+    }
+
+    .dismiss {
+      margin: 1rem auto;
+    }
+  }
+}
+
+@media (--md) {
+  #beta-warning {
+    position: relative;
+    margin: 0 1rem 2rem;
+
+    :deep(.body) {
+      .dismiss {
+        position: absolute;
+        top: 0.75rem;
+        right: 1rem;
+        margin: 0;
+      }
+    }
+  }
+}
+</style>