feat: show end of life message to users starting April (#879)

* feat: show end of life message to users starting April

* chore: make it prettier

components/end-of-life.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <h1>We're moving to time writing in Bridge!</h1>
+    <p>
+      The last couple of months the bridge team added multiple features to time writing in Bridge
+      which makes it suitable for us.
+    </p>
+    <p>That's why, starting April, we all will use Bridge for time writing.</p>
+    <p>Use these contract names to find the right items to write hours in Bridge:</p>
+
+    <b-table class="mb-4" striped :items="contracts" :fields="fields"></b-table>
+
+    <b-button
+      variant="success"
+      href="https://bridge.hosted-tools.com/worklogs/calendar/grid"
+      target="_blank"
+    >
+      Start writing hours in Bridge
+      <b-icon icon="box-arrow-up-right" class="ml-1" aria-hidden="true" />
+    </b-button>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  useStore,
+} from "@nuxtjs/composition-api";
+
+export default defineComponent({
+  setup() {
+    const store = useStore<RootStoreState>();
+
+    const timesheet = computed(() => store.state.timesheets.weeklyTimesheet);
+    const contracts = computed(() => timesheet.value.projects.map((project) => project.project.contract));
+
+    return {
+      fields: [{ key: 'name', label: 'Contract' }, { key: 'project_name', label: 'Project' }],
+      contracts,
+    };
+  },
+});
+</script>

components/records/weekly-timesheet.vue

@@ -23,7 +23,7 @@ nl:
         />
 
         <weekly-timesheet-messages
-          v-if="timesheet.info"
+          v-if="timesheet.info && !showEndOfLife"
           :comments="timesheet.info.messages"
           :readonly="$store.getters['timesheets/isReadonly']"
           :show-weekends="showWeekends"
@@ -34,7 +34,12 @@ nl:
     </div>
 
     <div class="container">
-      <weekly-timesheet-container :selected-week="relevantWeeksView" :show-weekends="showWeekends">
+      <end-of-life v-if="showEndOfLife"></end-of-life>
+      <weekly-timesheet-container
+        v-if="!showEndOfLife"
+        :selected-week="relevantWeeksView"
+        :show-weekends="showWeekends"
+      >
         <template #rows>
           <weekly-timesheet-row-hours
             v-for="(timesheetProject) in $store.getters['timesheets/projectsOrdered']"
@@ -68,7 +73,7 @@ nl:
       </weekly-timesheet-container>
 
       <weekly-timesheet-container
-        v-if="showStandby || showTravel"
+        v-if="(showStandby || showTravel) && !showEndOfLife"
         :show-header="false"
         class="mt-4"
       >
@@ -96,6 +101,7 @@ nl:
       </weekly-timesheet-container>
 
       <weekly-timesheet-footer
+        v-if="!showEndOfLife"
         class="mt-3 mt-md-5"
         :has-unsaved-changes="hasUnsavedChanges"
         :is-saving="isSaving"
@@ -154,9 +160,17 @@ export default defineComponent({
     routePrefix: {
       type: String,
       default: undefined
-    }
+    },
+    isFreelancer: {
+      type: Boolean,
+      default: false
+    },
+    isEndOfLife: {
+      type: Boolean,
+      default: false
+    },
   },
-  setup({employee, year, week}: { employee: Employee, year: number, week: number }) {
+  setup({employee, year, week, isEndOfLife, isFreelancer}: { employee: Employee, year: number, week: number, isEndOfLife: boolean, isFreelancer: boolean}) {
     const {i18n, app} = useContext();
     const store = useStore<RootStoreState>();
 
@@ -168,6 +182,7 @@ export default defineComponent({
     const isSaving = ref<boolean>(false);
     const lastSaved = ref<Date>();
 
+    const showEndOfLife = computed(() => isEndOfLife && !isFreelancer);
     const customers = computed(() => store.state.customers.customers);
     const timesheet = computed(() => store.state.timesheets.weeklyTimesheet);
     const showBridgeError = computed(() => store.state.timesheets.isErrored.bridge);
@@ -408,6 +423,7 @@ export default defineComponent({
     getTimesheet();
 
     return {
+      showEndOfLife,
       isLoading,
       startDate,
       timesheet,

pages/_year/_week.vue

@@ -5,6 +5,8 @@
       :employee="employee"
       :year="year"
       :week="week"
+      :is-freelancer="isFreelancer"
+      :is-end-of-life="isEndOfLife"
     />
   </admin-container>
 </template>
@@ -24,10 +26,12 @@ export default defineComponent({
     const week = computed(() => parseInt(router.currentRoute.params.week, 10));
     const pageTitle = computed(() => `${i18n.t('timesheets')} - ${employee.value?.name}`);
 
+    const isFreelancer = computed(() => !!employee?.value?.freelancer);
+    const isEndOfLife = computed(() => year.value >= 2024 && week.value >= 14);
+
     if (!router.currentRoute.params.year || !router.currentRoute.params.week) {
       router.replace(format(new Date(), '/yyyy/I'));
     }
-
     watch([employee], () => {
       if (employee.value && !employee.value?.billable) {
         router.push(store.state.employee.employee?.isAdmin ? '/admin/reports' : '/welcome')
@@ -42,6 +46,8 @@ export default defineComponent({
       employee,
       year,
       week,
+      isFreelancer,
+      isEndOfLife,
     };
   },