Merge pull request #87 from dimak1/feat/ui-fixes

Application Count on Dashboard & UI Fixes

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,4 +1,6 @@
-*Issue:*https://github.com/bcgov/entity/issues/
+*Issue:*
+
+- bcgov/entity/issues/
 
 *Description of changes:*
 

strr-web/app.config.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 export default defineAppConfig({
   ui: {
     primary: 'blue',
@@ -7,7 +8,8 @@ export default defineAppConfig({
       variant: {
         solid: 'hover:bg-opacity-[.92] hover:bg-{color}-500',
         editButton: 'text-primary border-0 border-r-2 border-gray focus-visible:ring-2 focus-visible:ring-primary',
-        removeButton: 'text-primary border-0 focus-visible:ring-2 focus-visible:ring-primary'
+        removeButton: 'text-primary border-0 focus-visible:ring-2 focus-visible:ring-primary',
+        ghost: 'focus-visible:ring-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary'
       }
     },
     formGroup: {

strr-web/components/bcros/banner/banner.vue

@@ -61,7 +61,7 @@
 <script setup lang="ts">
 
 const { hideButtons = true } = defineProps<{ hideButtons?: boolean }>()
-const t = useNuxtApp().$i18n.t
+const { t } = useTranslation()
 const tBanner = (text: string) => t(`banner.${text}`)
 const {
   issueRegistration,

strr-web/components/bcros/existing-accounts-list/ExistingAccountsList.vue

@@ -60,7 +60,7 @@
 import { formState } from '@/stores/strr'
 
 const { accounts } = defineProps<{ accounts: OrgI[] }>()
-const t = useNuxtApp().$i18n.t
+const { t } = useTranslation()
 const { goToCreateAccount, goToCreateSbcAccount } = useBcrosNavigate()
 const { switchCurrentAccount } = useBcrosAccount()
 

strr-web/components/bcros/fee-widget/FeeWidget.vue

@@ -53,7 +53,7 @@
 
 import useScreenSize from '../../../composables/useScreenSize'
 
-const t = useNuxtApp().$i18n.t
+const { t } = useTranslation()
 const folded = ref(false)
 const isMobile = ref(false)
 

strr-web/components/bcros/footer/Footer.vue

@@ -49,7 +49,7 @@
 
 <script setup lang="ts">
 
-const t = useNuxtApp().$i18n.t
+const { t } = useTranslation()
 const version = useRuntimeConfig().public.version
 
 const { extraSpace } = defineProps<{ extraSpace?: boolean }>()

strr-web/components/bcros/form-section/FormSection.vue

@@ -26,6 +26,6 @@ const { title, optional, divider, className } = defineProps<{
   className?: string
 }>()
 
-const t = useNuxtApp().$i18n.t
+const { t } = useTranslation()
 
 </script>

strr-web/components/bcros/form-section/contact-information/ContactDetails.vue

@@ -76,7 +76,7 @@
 </template>
 
 <script setup lang="ts">
-const t = useNuxtApp().$i18n.t
+const { t } = useTranslation()
 
 const { isPrimary } = defineProps<{
   isPrimary: boolean

strr-web/components/bcros/form-section/contact-information/ContactInfo.vue

@@ -31,7 +31,7 @@
 </template>
 
 <script setup lang="ts">
-const t = useNuxtApp().$i18n.t
+const { t } = useTranslation()
 
 const {
   isPrimary,

strr-web/components/bcros/form-section/contact-information/CraInfo.vue

@@ -30,7 +30,7 @@
 </template>
 
 <script setup lang="ts">
-const t = useNuxtApp().$i18n.t
+const { t } = useTranslation()
 
 const socialInsuranceNumber = defineModel<string>('socialInsuranceNumber')
 const businessNumber = defineModel<string>('businessNumber')

strr-web/components/bcros/form-section/contact-information/Form.vue

@@ -118,7 +118,7 @@
 
 <script setup lang="ts">
 import { formState } from '@/stores/strr'
-const t = useNuxtApp().$i18n.t
+const { t } = useTranslation()
 const monthError = ref('')
 
 const {

strr-web/components/bcros/form-section/contact-information/MailingAddress.vue

@@ -55,7 +55,7 @@
 <script setup lang="ts">
 import { CountryItem } from '@/interfaces/address-i'
 import countries from '@/utils/countries.json'
-const t = useNuxtApp().$i18n.t
+const { t } = useTranslation()
 
 const country = defineModel<string>('country')
 const address = defineModel<string>('address')

strr-web/components/bcros/form-section/principal-residence/Form.vue

@@ -152,7 +152,7 @@
 </template>
 
 <script setup lang="ts">
-const t = useNuxtApp().$i18n.t
+const { t } = useTranslation()
 const tPrincipalResidence = (translationKey: string) => t(`createAccount.principalResidence.${translationKey}`)
 
 const reasonError = ref()

strr-web/components/bcros/form-section/property/Address.vue

@@ -78,7 +78,7 @@
 <script setup lang="ts">
 import { CountryItem } from '@/interfaces/address-i'
 import countries from '@/utils/countries.json'
-const t = useNuxtApp().$i18n.t
+const { t } = useTranslation()
 
 const country = defineModel<string>('country')
 const address = defineModel<string>('address')

strr-web/components/bcros/form-section/property/Details.vue

@@ -56,7 +56,7 @@
 
 <script setup lang="ts">
 
-const t = useNuxtApp().$i18n.t
+const { t } = useTranslation()
 
 const propertyType = defineModel<string>('propertyType')
 const ownershipType = defineModel<string>('ownershipType')

strr-web/components/bcros/form-section/property/Form.vue

@@ -73,7 +73,7 @@ watch(canadaPostAddress, (newAddress) => {
   }
 })
 
-const t = useNuxtApp().$i18n.t
+const { t } = useTranslation()
 
 const isValid = ref(false)
 const listingURLErrors = ref<(({

strr-web/components/bcros/form-section/property/ListingDetails.vue

@@ -71,6 +71,6 @@ const emitValidate = (index: number) => {
 
 const listingDetails = defineModel<{ url: string }[]>('listingDetails')
 
-const t = useNuxtApp().$i18n.t
+const { t } = useTranslation()
 
 </script>

strr-web/components/bcros/form-section/review/Declaration.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-const t = useNuxtApp().$i18n.t
+const { t } = useTranslation()
 
 const tReview = (translationKey: string) => t(`createAccount.review.${translationKey}`)
 

strr-web/components/bcros/form-section/review/Form.vue

@@ -164,7 +164,7 @@
 </template>
 
 <script setup lang="ts">
-const t = useNuxtApp().$i18n.t
+const { t } = useTranslation()
 
 const { secondaryContact, isComplete } = defineProps<{ secondaryContact: boolean, isComplete: boolean }>()
 

strr-web/components/bcros/form-section/review/Subsection.vue

@@ -59,7 +59,7 @@
 
 <script setup lang="ts">
 
-const t = useNuxtApp().$i18n.t
+const { t } = useTranslation()
 const tContact = (translationKey: string) => t(`createAccount.contactForm.${translationKey}`)
 
 const { state, primary } = defineProps<{

strr-web/components/bcros/header/Header.vue

@@ -84,7 +84,7 @@ import hamburgerIcon from '~/assets/icons/hamburger.svg'
 
 const props = defineProps<{ personMode?: boolean }>()
 
-const t = useNuxtApp().$i18n.t
+const { t } = useTranslation()
 const {
   goToAccountInfo,
   goToBcrosHome,

strr-web/components/bcros/status-card/StatusCard.vue

@@ -20,15 +20,15 @@
       <BcrosButtonsPrimary
         :action="() => navigateTo(`/application-details/${applicationId}`, { open: { target: '_blank' } })"
         :label="tRegistrationStatus('view')"
-        class-name="px-4 py-1"
+        class-name="px-4 py-1 mobile:grow-0"
         variant="ghost"
       />
 
       <BcrosButtonsPrimary
         v-if="isCertificateIssued"
         :action="() => downloadCertificate(applicationId.toString())"
         :label="tRegistrationStatus('download')"
-        class-name="px-4 py-1"
+        class-name="px-4 py-1 mobile:grow-0"
         variant="ghost"
       />
     </div>
@@ -38,7 +38,7 @@
 <script setup lang="ts">
 import { AlertsFlavourE, RegistrationStatusE, ApplicationStatusE } from '#imports'
 
-const t = useNuxtApp().$i18n.t
+const { t } = useTranslation()
 const tRegistrationStatus = (translationKey: string) => t(`registrationStatus.${translationKey}`)
 
 const { getCertificate } = useRegistrations()

strr-web/components/bcros/stepper/Stepper.vue

@@ -92,6 +92,6 @@ const emit = defineEmits<{
   changeStep: [stepIndex: number] // named tuple syntax
 }>()
 
-const t = useNuxtApp().$i18n.t
+const { t } = useTranslation()
 
 </script>

strr-web/components/bcros/stepper/StepperFooter.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-const t = useNuxtApp().$i18n.t
+const { t } = useTranslation()
 
 const {
   isFirstStep,

strr-web/composables/useChipFlavour.ts

@@ -1,5 +1,5 @@
 export const useChipFlavour = () => {
-  const t = useNuxtApp().$i18n.t
+  const { t } = useTranslation()
   const tRegistryDashboardStatus = (translationKey: string) => t(`registryDashboard.statusChip.${translationKey}`)
 
   const getChipFlavour = (status: string): StatusChipFlavoursI['flavour'] => {

strr-web/enums/application-status-e.ts

@@ -2,9 +2,9 @@ export enum ApplicationStatusE {
   DRAFT = 'DRAFT',
   SUBMITTED = 'SUBMITTED',
   PAID = 'PAID',
-  APPROVED = 'APPROVED',
-  ADDITIONAL_INFO_REQUESTED = 'ADDITIONAL_INFO_REQUESTED',
   UNDER_REVIEW = 'UNDER_REVIEW',
-  REJECTED = 'REJECTED',
-  PROVISIONAL = 'PROVISIONAL'
+  ADDITIONAL_INFO_REQUESTED = 'ADDITIONAL_INFO_REQUESTED',
+  APPROVED = 'APPROVED',
+  PROVISIONAL = 'PROVISIONAL',
+  REJECTED = 'REJECTED'
 }

strr-web/enums/registration-status-e.ts

@@ -1,10 +1,10 @@
 export enum RegistrationStatusE {
-  DENIED = 'DENIED',
-  APPROVED = 'APPROVED',
-  ISSUED = 'ISSUED',
-  REJECTED = 'REJECTED',
+  SUBMITTED = 'SUBMITTED',
   PENDING = 'PENDING',
   UNDER_REVIEW = 'UNDER_REVIEW',
   MORE_INFO_NEEDED = 'MORE_INFO_NEEDED',
-  SUBMITTED = 'SUBMITTED'
+  APPROVED = 'APPROVED',
+  ISSUED = 'ISSUED',
+  REJECTED = 'REJECTED',
+  DENIED = 'DENIED'
 }

strr-web/lang/en.json

@@ -131,7 +131,7 @@
     "applied": "APPLIED",
     "provisional": "PROVISIONAL",
     "create": "Create New Registration",
-    "myRegApplication": "My Registration Application",
+    "myRegApplication": "My Registration Applications",
     "title": "My STR Registry Dashboard",
     "view": "View",
     "download": "Download Certificate",
@@ -157,7 +157,7 @@
       "submitted": "Application Submitted",
       "altTextConfirm": "Confirmation check mark",
       "submittedForProperty": "Short term registry application submitted for the following property:",
-      "teamWillReview": "Your application will be reviewed by our team and we will email you with next steps.",
+      "teamWillReview": "Your application will be reviewed by our team. Please check your dashboard for your application periodically.",
       "links": "Helpful Links",
       "status": "View your application status",
       "dashboard": "in your dashboard",

strr-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "strr-web",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Short Term Rental Registration UI - Mono repo workspace",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -14,7 +14,7 @@
     "lint:fix": "eslint --cache --ext '.ts,.vue' . --max-warnings 0 --fix",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
-    "test": "vitest run --coverage && cp ./coverage/cobertura-coverage.xml ./coverage.xml",
+    "test": "vitest run",
     "test:cov": "vitest run --coverage && cp ./coverage/cobertura-coverage.xml ./coverage.xml",
     "test:e2e": "cypress open",
     "test:e2e:firefox": "cypress run firefox",

strr-web/pages/account-select.vue

@@ -20,7 +20,7 @@
 <script setup lang="ts">
 import { AlertsFlavourE } from '#imports'
 
-const t = useNuxtApp().$i18n.t
+const { t } = useTranslation()
 
 const alertFlavour: AlertsFlavourE = AlertsFlavourE.INFO
 

strr-web/pages/application-details/[applicationId]/auto-approval/index.vue

@@ -48,7 +48,7 @@ import { AlertsFlavourE } from '#imports'
 import { AutoApprovalDataI } from '~/interfaces/auto-approval-data-i'
 
 const route = useRoute()
-const t = useNuxtApp().$i18n.t
+const { t } = useTranslation()
 const tRegistrationStatus = (translationKey: string) => t(`registrationStatus.${translationKey}`)
 const tApplicationDetails = (translationKey: string) => t(`applicationDetails.${translationKey}`)
 const tAutoApproval = (translationKey: string) => t(`autoApproval.${translationKey}`)

strr-web/pages/application-details/[applicationId]/index.vue

@@ -229,7 +229,7 @@
 import { propertyTypeMap } from '~/utils/propertyTypeMap'
 
 const route = useRoute()
-const t = useNuxtApp().$i18n.t
+const { t } = useTranslation()
 const tRegistrationStatus = (translationKey: string) => t(`registrationStatus.${translationKey}`)
 const tApplicationDetails = (translationKey: string) => t(`applicationDetails.${translationKey}`)
 const tPropertyForm = (translationKey: string) => t(`createAccount.propertyForm.${translationKey}`)

strr-web/pages/application-details/[applicationId]/ltsa/index.vue

@@ -125,7 +125,7 @@ import { AlertsFlavourE } from '#imports'
 import { LtsaDataI } from '~/interfaces/ltsa-data-i'
 
 const route = useRoute()
-const t = useNuxtApp().$i18n.t
+const { t } = useTranslation()
 const tRegistrationStatus = (translationKey: string) => t(`registrationStatus.${translationKey}`)
 const tApplicationDetails = (translationKey: string) => t(`applicationDetails.${translationKey}`)
 const tLtsa = (translationKey: string) => t(`ltsa.${translationKey}`)