15568 - As a BCOL HD staff user I need to launch any/all products (bcgov#3273)

Author: Jxio

auth-web/src/components/auth/staff/AllProductsLauncher.vue

@@ -0,0 +1,104 @@
+<template>
+  <v-card
+    class="product-container"
+    :href="businessURL"
+  >
+    <v-row
+      align="center"
+      no-gutters
+    >
+      <v-col cols="auto">
+        <img
+          alt="product"
+          class="product-img"
+          :src="getImgUrl(img)"
+        >
+      </v-col>
+      <v-col
+        class="product-info"
+        align-self="baseline"
+      >
+        <h2>{{ title }}</h2>
+        <p class="mt-5 mb-0">
+          {{ text }}
+        </p>
+        <v-btn class="primary product-info__btn px-5">
+          Open
+          <v-icon>mdi-chevron-right</v-icon>
+        </v-btn>
+      </v-col>
+    </v-row>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, reactive, toRefs } from '@vue/composition-api'
+import ConfigHelper from '@/util/config-helper'
+import { useI18n } from 'vue-i18n-composable'
+
+export default defineComponent({
+  setup () {
+    const { t } = useI18n()
+
+    const state = reactive({
+      img: 'AssetsRegistries_dashboard.jpg',
+      title: t('viewAllProductsLauncherTitle').toString(),
+      text: t('viewAllProductsLauncherText').toString()
+    })
+
+    const businessURL = computed(() => ConfigHelper.getBcrosDashboardURL())
+
+    function getImgUrl (imgName: string) {
+      return new URL(`/src/assets/img/${imgName}`, import.meta.url).href
+    }
+
+    return {
+      ...toRefs(state),
+      businessURL,
+      getImgUrl
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+h2 {
+  line-height: 1.5rem;
+}
+
+.product-container {
+  border-left: 3px solid transparent;
+  box-shadow: none;
+  cursor: pointer;
+  height: 100%;
+  max-width: none;
+  padding: 30px;
+
+  &:hover {
+    border-left: 3px solid $app-blue !important;
+  }
+}
+.product-img {
+  height: 196px;
+  width: 230px;
+}
+.product-info {
+  height: 196px;
+  padding-left: 15px !important;
+  position: relative;
+
+  p {
+    color: $gray7;
+    font-size: 1rem;
+  }
+
+  &__btn {
+    font-weight: 600;
+    height: 40px !important;
+    text-transform: none;
+    pointer-events: none;
+    position: absolute;
+    bottom: 0;
+  }
+}
+</style>

auth-web/src/locales/en.json

@@ -225,6 +225,8 @@
   "developerAccessSubtitle": "Enabling developer access would allow you to integrate the BC Registries API services to your system.<br />Learn more in the  <a href=\"{url}\">API documentation</a>.",
   "assetLauncherText": "Register or search for manufactured homes and register or search for legal claims on personal property.",
   "assetLauncherTitle": "Staff Asset Registries",
+  "viewAllProductsLauncherTitle": "View All Products",
+  "viewAllProductsLauncherText": "Access various products and services available to your account.",
   "pprLauncherText": "Register or search for legal claims on personal property.",
   "pprLauncherTitle": "Staff Personal Property Registry",
   "mhrLauncherText": "Register or search for legal claims on manufactured homes.",

auth-web/src/views/auth/staff/StaffDashboardView.vue

@@ -134,6 +134,13 @@
       >
         <PPRLauncher />
       </v-col>
+      <v-col
+        v-if="isContactCentreStaff"
+        class="pr-2"
+        cols="6"
+      >
+        <AllProductsLauncher />
+      </v-col>
     </v-row>
 
     <!-- Director search -->
@@ -310,6 +317,7 @@
 import { BaseVExpansionPanel, LaunchTile } from '@/components'
 import { ComputedRef, Ref, computed, defineComponent, reactive, ref, toRefs } from '@vue/composition-api'
 import { LDFlags, Role, SessionStorageKeys } from '@/util/constants'
+import AllProductsLauncher from '@/components/auth/staff/AllProductsLauncher.vue'
 import CommonUtils from '@/util/common-util'
 import ConfigHelper from '@/util/config-helper'
 import ContinuationApplications from '@/components/auth/staff/continuation-application/ContinuationApplications.vue'
@@ -356,6 +364,7 @@ export default defineComponent({
     GLCodesListView,
     IncorporationSearchResultView,
     PPRLauncher,
+    AllProductsLauncher,
     StaffAccountManagement,
     ContinuationApplications,
     Transactions