feat(404): route retired links

website/client/src/components/404.vue

@@ -1,18 +1,26 @@
 <template>
   <div class="row">
-    <div class="col-12 text-center">
+    <div class="col-6 text-center mx-auto mb-5">
       <!-- @TODO i18n. How to setup the strings with the router-link inside?-->
       <img
-        class="not-found-img"
+        class="my-5"
         src="~@/assets/images/404.png"
       >
-      <h1 class="not-found">
+      <div v-if="retiredChatPage">
+        <h1>
+          {{ $t('tavernDiscontinued') }}
+        </h1>
+        <p>{{ $t('tavernDiscontinuedDetail') }}</p>
+        <p v-html="$t('tavernDiscontinuedLinks')"></p>
+      </div>
+      <div v-else>
+        <h1>
           Sometimes even the bravest adventurer gets lost.
         </h1>
-      <h2 class="not-found">
+        <p>
           Looks like this link is broken or the page may have moved, sorry!
-      </h2>
-      <h2 class="not-found">
+        </p>
+        <p>
           Head back to the
           <router-link to="/">
             Homepage
@@ -20,7 +28,8 @@
           <router-link :to="contactUsLink">
             Contact Us
           </router-link>about the issue.
-      </h2>
+        </p>
+      </div>
     </div>
   </div>
 </template>
@@ -37,6 +46,9 @@ export default {
       }
       return { name: 'contact' };
     },
+    retiredChatPage () {
+      return this.$route.fullPath.indexOf('/groups') !== -1;
+    },
   },
 };
 </script>
@@ -44,28 +56,14 @@ export default {
 <style lang="scss" scoped>
 @import '~@/assets/scss/colors.scss';
 
-.col-12 {
-  margin-bottom: 120px;
-}
-
-.not-found-img {
-  margin-top: 152px;
-  margin-bottom: 42px;
-}
-
-h1.not-found {
-  line-height: 1.33;
+h1 {
   color: $purple-200;
-  margin-bottom: 8px;
-  font-weight: normal;
-  margin-top: 0px;
+  margin-bottom: 1rem;
 }
 
-h2.not-found {
-  line-height: 1.4;
-  font-weight: normal;
-  color: $gray-200;
-  margin-bottom: 0px;
-  margin-top: 0px;
+p {
+  font-size: 18px;
+  line-height: 1.77;
 }
+
 </style>

website/client/src/router/index.js

@@ -74,10 +74,6 @@ const EquipmentPage = () => import(/* webpackChunkName: "inventory" */'@/compone
 const StablePage = () => import(/* webpackChunkName: "inventory" */'@/components/inventory/stable/index');
 
 // Guilds & Parties
-const GuildIndex = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/index');
-const TavernPage = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/tavern');
-const MyGuilds = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/myGuilds');
-const GuildsDiscoveryPage = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/discovery');
 const GroupPage = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/group');
 const GroupPlansAppPage = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/groupPlan');
 const LookingForParty = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/lookingForParty');
@@ -189,23 +185,20 @@ const router = new VueRouter({
     },
     {
       path: '/groups',
-      component: GuildIndex,
+      component: NotFoundPage,
       children: [
-        { name: 'tavern', path: 'tavern', component: TavernPage },
+        { name: 'tavern', path: 'tavern' },
         {
           name: 'myGuilds',
           path: 'myGuilds',
-          component: MyGuilds,
         },
         {
           name: 'guildsDiscovery',
           path: 'discovery',
-          component: GuildsDiscoveryPage,
         },
         {
           name: 'guild',
           path: 'guild/:groupId',
-          component: GroupPage,
           props: true,
         },
       ],

website/common/locales/en/groups.json

@@ -417,5 +417,8 @@
   "lookingForPartyTitle": "Find Members",
   "findMorePartyMembers": "Find More Members",
   "findPartyMembers": "Find Party Members",
-  "noOneLooking": "There’s no one looking for a Party right now.<br>You can check back later!"
+  "noOneLooking": "There’s no one looking for a Party right now.<br>You can check back later!",
+  "tavernDiscontinued": "The Tavern and Guilds have been discontinued",
+  "tavernDiscontinuedDetail": "Due to a number of factors, including changes in how our player base interacts with Habitica, the resources necessary to maintain these spaces became disproportionate to the number of people participating in them and unsustainable over the long term.",
+  "tavernDiscontinuedLinks": "Read more about the <a href='/static/faq/tavern-and-guilds'>Tavern and Guild Service Discontinuation</a> or head back to the <a href='/'>homepage</a>."
 }