bug: fix visibility of outdated banner

src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue

@@ -12,21 +12,21 @@
         <v-col cols="11" md="8">
           <hgroup>
             <h1>Hosting Policy</h1>
-            <p v-if="policyMetadata && policyMetadata.active_from" class="text-subtitle-1 text--secondary mb-2">
+            <p v-if="policyActiveFrom" class="text-subtitle-1 text--secondary mb-2">
               Effective: {{ formattedActiveFrom }}
             </p>
           </hgroup>
 
-          <v-alert class="mt-2" type="info" v-if="isUpcomingRoute">
+          <v-alert class="mt-2" type="info" v-if="isUpcomingPolicy">
             This is an upcoming version. You can find the
             <router-link class="white--text" to="/hosting-policy">current version here</router-link>.
           </v-alert>
-          <v-alert class="mt-2" type="info" v-if="!isUpcomingRoute && !isCurrentRoute">
+          <v-alert class="mt-2" type="info" v-if="isOutdatedPolicy">
             This is an outdated version. You can find the
             <router-link class="white--text" to="/hosting-policy">current version here</router-link>.
           </v-alert>
 
-          <component :is="policy" v-if="policy" :active-from="policyMetadata && policyMetadata.active_from" />
+          <component :is="policyContentComponent" v-if="policyContentComponent" :active-from="policyActiveFrom" />
         </v-col>
       </v-row>
     </v-container>
@@ -36,73 +36,105 @@
 <script>
 
 import PolicyNavigationPanel from '../Components/PolicyNavigationPanel.vue'
-
-export const versions = {
-  'hosting-policy/version-1.vue': () => ({ component: import('./hosting-policy/version-1.vue') }),
-}
+import { AxiosError } from 'axios'
 
 export default {
   name: 'HostingPolicyRenderer',
   components: {
     PolicyNavigationPanel,
   },
   computed: {
-    policyActiveFrom: function () {
-      return this.$route.params.activeFrom
+    isUpcomingPolicy: function () {
+      return this.policyActiveFrom && this.policyActiveFrom === this.upcomingPolicyActiveFrom
     },
-    isUpcomingRoute: function () {
-      return this.$route.path === '/hosting-policy/upcoming'
-    },
-    isCurrentRoute: function () {
-      return this.policyActiveFrom === undefined
+    isOutdatedPolicy: function () {
+      return this.policyActiveFrom &&
+        this.policyActiveFrom !== this.upcomingPolicyActiveFrom &&
+        this.policyActiveFrom !== this.currentPolicyActiveFrom
     },
     formattedActiveFrom: function () {
-      if (!this.policyMetadata || !this.policyMetadata.active_from) return null
-      return new Date(this.policyMetadata.active_from).toLocaleDateString('en-GB', { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' })
+      if (!this.policyActiveFrom) return null
+      return new Date(this.policyActiveFrom).toLocaleDateString('en-GB', { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' })
     },
   },
   data () {
     return {
-      policy: undefined,
-      policyMetadata: undefined,
-      error: undefined,
       policyType: 'hosting-policy',
+      policyContentComponent: undefined,
+      policyActiveFrom: undefined,
+      upcomingPolicyActiveFrom: undefined,
+      currentPolicyActiveFrom: undefined,
+      error: undefined,
     }
   },
   methods: {
-    async loadPolicy () {
-      this.policy = undefined
-      this.policyMetadata = undefined
+    async renderPage () {
+      this.policyContentComponent = undefined
+      this.policyActiveFrom = undefined
       this.error = undefined
 
       try {
         const policyType = this.policyType // TODO for a generalized component, read this from component property
-        const activeFrom = this.policyActiveFrom
-        let response
+        const activeFromRouteParam = this.$route.params.activeFrom
+
+        let upcomingPolicy
+        let currentPolicy
+        let policyContentVueFile
 
-        if (this.isUpcomingRoute) {
-          response = await this.$api.getUpcomingPolicyByType({ policyType })
-        } else if (this.isCurrentRoute) {
-          // Special case to redirect users to the pilot policy if there is no current policy
-          // Remove afer T408316
-          try {
-            response = await this.$api.getCurrentPolicyByType({ policyType })
-          } catch (error) {
-            if (error && error.response && error.response.status === 404) {
-              this.$router.replace({ path: '/hosting-policy/pilot' })
-              return
-            }
+        try {
+          upcomingPolicy = await this.$api.getUpcomingPolicyByType({ policyType })
+          this.upcomingPolicyActiveFrom = upcomingPolicy.metadata.active_from
+        } catch (exception) {
+          if (exception instanceof AxiosError && exception.status === 404) {
+            upcomingPolicy = undefined
+          } else {
+            throw exception
           }
-        } else {
-          response = await this.$api.getPolicyByDate({ policyType, activeFrom })
         }
 
-        const metadata = response.metadata
-        const policy = versions[metadata.content_vue_file]
+        try {
+          currentPolicy = await this.$api.getCurrentPolicyByType({ policyType })
+          this.currentPolicyActiveFrom = currentPolicy.metadata.active_from
+        } catch (exception) {
+          if (exception instanceof AxiosError && exception.status === 404) {
+            // Special case to redirect users to the pilot policy if there is no current policy
+            // Remove after T408316
+            this.$router.replace({ path: '/hosting-policy/pilot' })
+            return
+            // And replace with:
+            // currentPolicy = undefined
+          } else {
+            throw exception
+          }
+        }
+
+        // The route can be one of:
+        //   /hosting-policy/upcoming      - upcoming version
+        //   /hosting-policy/:activeFrom   - upcoming version
+        //   /hosting-policy               - current version
+        //   /hosting-policy/:activeFrom   - current version
+        //   /hosting-policy/:activeFrom   - previous version
+        const isUpcomingRoute = this.$route.path === '/hosting-policy/upcoming'
+        const isUpcomingActiveFrom = activeFromRouteParam && activeFromRouteParam === this.upcomingPolicyActiveFrom
+        const isCurrentRoute = this.$route.path === '/hosting-policy'
+        const isCurrentActiveFrom = activeFromRouteParam && activeFromRouteParam === this.currentPolicyActiveFrom
 
-        if (policy !== undefined) {
-          this.policy = policy
-          this.policyMetadata = metadata
+        // Determine which policy to render based on the route and the activeFrom parameter
+        if (isUpcomingRoute || isUpcomingActiveFrom) {
+          policyContentVueFile = upcomingPolicy.metadata.content_vue_file
+          this.policyActiveFrom = upcomingPolicy.metadata.active_from
+        } else if (isCurrentRoute || isCurrentActiveFrom) {
+          policyContentVueFile = currentPolicy.metadata.content_vue_file
+          this.policyActiveFrom = currentPolicy.metadata.active_from
+        } else {
+          const previousPolicy = await this.$api.getPolicyByDate({ policyType, activeFrom: activeFromRouteParam })
+          policyContentVueFile = previousPolicy.metadata.content_vue_file
+          this.policyActiveFrom = previousPolicy.metadata.active_from
+        }
+
+        const policyContentComponent = () => ({ component: import(`./${policyContentVueFile}`) })
+        if (policyContentComponent !== undefined) {
+          this.policyContentComponent = policyContentComponent
         } else {
           this.error = 'missing policy'
         }
@@ -112,15 +144,14 @@ export default {
       }
     },
   },
-  mounted () {
-    this.loadPolicy()
-  },
   watch: {
-    policyActiveFrom: function () {
-      this.loadPolicy()
-    },
-    isUpcomingRoute: function () {
-      this.loadPolicy()
+    // Watch for route changes to (re-)render the page
+    $route: {
+      // Run the handler immediately on component creation
+      immediate: true,
+      handler (to, from) {
+        this.renderPage()
+      },
     },
   },
 }

src/components/Pages/TermsOfUse/TermsOfUseRenderer.vue

@@ -12,21 +12,21 @@
         <v-col cols="11" md="8">
           <hgroup>
             <h1>Terms of Use</h1>
-            <p v-if="policyMetadata && policyMetadata.active_from" class="text-subtitle-1 text--secondary mb-2">
+            <p v-if="policyActiveFrom" class="text-subtitle-1 text--secondary mb-2">
               Effective: {{ formattedActiveFrom }}
             </p>
           </hgroup>
 
-          <v-alert class="mt-2" type="info" v-if="isUpcomingRoute">
+          <v-alert class="mt-2" type="info" v-if="isUpcomingPolicy">
             This is an upcoming version. You can find the
             <router-link class="white--text" to="/terms-of-use">current version here</router-link>.
           </v-alert>
-          <v-alert class="mt-2" type="info" v-if="!isUpcomingRoute && !isCurrentRoute">
+          <v-alert class="mt-2" type="info" v-if="!isUpcomingPolicy && !isCurrentPolicy  ">
             This is an outdated version. You can find the
             <router-link class="white--text" to="/terms-of-use">current version here</router-link>.
           </v-alert>
 
-          <component :is="policy" v-if="policy" :active-from="policyMetadata && policyMetadata.active_from" />
+          <component :is="policy" v-if="policy" :active-from="policyActiveFrom" />
         </v-col>
       </v-row>
     </v-container>
@@ -35,6 +35,7 @@
 
 <script>
 import PolicyNavigationPanel from '../Components/PolicyNavigationPanel.vue'
+import { AxiosError } from 'axios'
 
 export const versions = {
   'terms-of-use/version-1.vue': () => ({ component: import('./terms-of-use/version-1.vue') }),
@@ -47,53 +48,84 @@ export default {
     PolicyNavigationPanel,
   },
   computed: {
-    policyActiveFrom: function () {
+    policyActiveFromRoute: function () {
       return this.$route.params.activeFrom
     },
     isUpcomingRoute: function () {
       return this.$route.path === '/terms-of-use/upcoming'
     },
+    isCurrentPolicy: function () {
+      return this.currentPolicyActiveFrom === this.policyActiveFrom
+    },
+    isUpcomingPolicy: function () {
+      return this.upcomingPolicyActiveFrom === this.policyActiveFrom
+    },
     isCurrentRoute: function () {
-      return this.policyActiveFrom === undefined
+      return this.policyActiveFromRoute === undefined
     },
     formattedActiveFrom: function () {
-      if (!this.policyMetadata || !this.policyMetadata.active_from) return null
-      return new Date(this.policyMetadata.active_from).toLocaleDateString('en-GB', { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' })
+      if (!this.policyActiveFrom) return null
+      return new Date(this.policyActiveFrom).toLocaleDateString('en-GB', { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' })
     },
   },
   data () {
     return {
       policy: undefined,
-      policyMetadata: undefined,
+      policyActiveFrom: undefined,
       error: undefined,
       policyType: 'terms-of-use',
+      currentPolicyActiveFrom: undefined,
     }
   },
   methods: {
     async loadPolicy () {
       this.policy = undefined
-      this.policyMetadata = undefined
       this.error = undefined
+      this.policyActiveFrom = undefined
 
       try {
         const policyType = this.policyType // TODO for a generalized component, read this from component property
-        const activeFrom = this.policyActiveFrom
+        const activeFrom = this.policyActiveFromRoute
         let response
 
+        let upcomingPolicy
+        let currentPolicy
+
+        try {
+          upcomingPolicy = await this.$api.getUpcomingPolicyByType({ policyType })
+          this.upcomingPolicyActiveFrom = upcomingPolicy.metadata.active_from
+        } catch (exception) {
+          if (exception instanceof AxiosError && exception.status === 404) {
+            upcomingPolicy = undefined
+          } else {
+            throw exception
+          }
+        }
+
+        try {
+          currentPolicy = await this.$api.getCurrentPolicyByType({ policyType })
+          this.currentPolicyActiveFrom = currentPolicy.metadata.active_from
+        } catch (exception) {
+          if (exception instanceof AxiosError && exception.status === 404) {
+            currentPolicy = undefined
+          } else {
+            throw exception
+          }
+        }
+
         if (this.isUpcomingRoute) {
-          response = await this.$api.getUpcomingPolicyByType({ policyType })
+          response = upcomingPolicy
         } else if (this.isCurrentRoute) {
-          response = await this.$api.getCurrentPolicyByType({ policyType })
+          response = currentPolicy
         } else {
           response = await this.$api.getPolicyByDate({ policyType, activeFrom })
         }
 
-        const metadata = response.metadata
-        const policy = versions[metadata.content_vue_file]
+        const policy = versions[response.metadata.content_vue_file]
 
         if (policy !== undefined) {
           this.policy = policy
-          this.policyMetadata = metadata
+          this.policyActiveFrom = response.metadata.active_from
         } else {
           this.error = 'missing policy'
         }
@@ -107,7 +139,7 @@ export default {
     this.loadPolicy()
   },
   watch: {
-    policyActiveFrom: function () {
+    policyActiveFromRoute: function () {
       this.loadPolicy()
     },
     isUpcomingRoute: function () {

src/router/index.js

@@ -97,13 +97,13 @@ const router = new Router({
       component: HostingPolicyPilot,
     },
     {
-      path: '/hosting-policy/:activeFrom',
-      name: 'HostingPolicyRendererExact',
+      path: '/hosting-policy/upcoming',
+      name: 'HostingPolicyRendererUpcoming',
       component: HostingPolicyRenderer,
     },
     {
-      path: '/hosting-policy/upcoming',
-      name: 'HostingPolicyRendererUpcoming',
+      path: '/hosting-policy/:activeFrom',
+      name: 'HostingPolicyRendererExact',
       component: HostingPolicyRenderer,
     },
     {