Tax Cert: CheckOptions and Help Content (#2040)

* Tax Certifcate Options and Help Content

* padding fix

* Refactor Validation for QS

* State Improvements for Tax Cert and Extend/CreateNew Permits

* clean up:

ppr-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ppr-ui",
-  "version": "3.2.64",
+  "version": "3.2.65",
   "private": true,
   "appName": "Assets UI",
   "sbcName": "SBC Common Components",

ppr-ui/src/components/mhrTransfers/TaxCertificate.vue

@@ -10,13 +10,22 @@
         ref="expiryDatePickerRef"
         title="Tax Certificate Expiry Date"
         :initialValue="props.expiryDate"
-        :inputRules="required('This field is required')"
+        :inputRules="state.dateRules"
         :minDate="state.minDate"
         :maxDate="state.maxDate"
+        :disablePicker="state.certificateWaived"
         @emitDate="setDate($event)"
         @emitCancel="state.selectedFutureDate = ''"
         @emitClear="state.selectedFutureDate = ''"
       />
+
+      <!-- Waive Certificate Checkbox -->
+      <v-checkbox
+        v-if="isRoleStaffReg || isRoleStaffSbc"
+        v-model="state.certificateWaived"
+        class="ml-n3 mb-n8"
+        label="Certificate requirement waived"
+      />
     </template>
   </FormCard>
 </template>
@@ -25,10 +34,11 @@
 
 import { useInputRules } from "@/composables"
 import { calendarDates } from "@/utils"
-import { reactive, computed, watch, ref } from "vue"
+import { reactive, computed, watch, ref, nextTick, onMounted } from 'vue'
 import { FormCard, InputFieldDatePicker } from "../common"
 import { useStore } from "@/store/store"
 import { FormIF } from "@/interfaces"
+import { storeToRefs } from 'pinia'
 
 const props = defineProps<{
   expiryDate?: string,
@@ -37,21 +47,40 @@ const props = defineProps<{
 
 const expiryDatePickerRef = ref(null) as FormIF
 
-const emit = defineEmits(['isValid', 'setStoreProperty'])
+const emit = defineEmits(['isValid', 'setStoreProperty', 'waiveCertificate'])
 
-const { isRoleStaffReg } = useStore()
+const { isRoleStaffReg, isRoleStaffSbc, getMhrTransportPermitHomeLocation } = storeToRefs(useStore())
 const { required } = useInputRules()
 
 const state = reactive({
+  certificateWaived: false,
   selectedFutureDate: '',
-  minDate: calendarDates.tomorrow,
-  maxDate: computed(() => isRoleStaffReg ? null : calendarDates.startOfNextYear)
+  dateRules: computed(() => !state.certificateWaived ? required('This field is required') : []),
+  minDate: computed(() => isRoleStaffReg.value ? null : calendarDates.tomorrow),
+  maxDate: computed(() => isRoleStaffReg.value ? null : calendarDates.startOfNextYear)
+})
+
+onMounted(() => {
+  // Set the initial value of the certificate waived checkbox if the user is a staff member
+  if (isRoleStaffReg.value || isRoleStaffSbc.value) {
+    state.certificateWaived = getMhrTransportPermitHomeLocation.value?.waiveCertificate
+  }
 })
 
 watch(() => props.validate, async () => {
   expiryDatePickerRef.value?.validate()
 })
 
+watch(() => state.certificateWaived, async (val: boolean) => {
+  if (val){
+    expiryDatePickerRef.value.clearDate()
+    await nextTick()
+    expiryDatePickerRef.value?.validate()
+  }
+  emit('isValid', val)
+  emit('waiveCertificate', val)
+})
+
 watch(() => state.selectedFutureDate, val => {
   emit('setStoreProperty', val)
   emit('isValid', !!val)

ppr-ui/src/components/mhrTransportPermit/HelpContent/QsTaxCertificateHelp.vue

@@ -0,0 +1,38 @@
+<script  setup lang="ts" />
+<template>
+  <article
+    id="qs-tax-certificate-help"
+    class="px-8 py-2"
+  >
+    <h3 class="text-center">
+      Help with Tax Certificate
+    </h3>
+
+    <p class="pt-3">
+      The tax certificate or an equivalent form of consent must be issued from the tax authority with
+      jurisdiction of the home, and must be valid for the period of the transport permit.
+    </p>
+    <p class="mt-7">
+      If the tax notice for the current year has not yet been mailed to the owner, then the owner must pay a
+      deposit against taxes owing in order to receive a tax certificate. The deposit must be an amount equal
+      to the greater of $75 or the previous year's taxes less any home owner grant
+    </p>
+    <p class="mt-7">
+      The form of tax certificate may vary depending upon the tax authority. However, the tax certificate must
+      state that:
+    </p>
+    <p class="ml-4 mb-0">
+      a. all local taxes have been paid for the current tax year,
+    </p>
+    <p class="ml-4 mb-0">
+      b. a deposit has been paid against the current year's taxes, or
+    </p>
+    <p class="ml-4 mb-0">
+      c. the tax collector has consented to the transport permit.
+    </p>
+    <p class="mt-7">
+      If there is no expiry date in the tax certificate, then enter the last day of the relevant tax year,
+      e.g. 31 Dec 20xx.
+    </p>
+  </article>
+</template>

ppr-ui/src/components/mhrTransportPermit/HelpContent/StaffTaxCertificateHelp.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+</script>
+<template>
+  <article
+    id="staff-tax-certificate-help"
+    class="px-8 py-2"
+  >
+    <h3 class="text-center">
+      Help with Tax Certificate
+    </h3>
+
+    <p class="pt-3">
+      The certificate must be issued from the tax authority with jurisdiction of the home, and must be valid for the
+      period of the transport permit. It must state that all local taxes have been paid for the current tax year, or
+      that a deposit has been paid against the current year's taxes, or that the tax collector has consented to the
+      transport permit.
+    </p>
+
+    <p class="mt-7">
+      The form of tax certificate may vary depending upon the tax authority. However, the tax certificate must
+      state that:
+    </p>
+    <p class="ml-4 mb-0">
+      a. all local taxes have been paid for the current tax year,
+    </p>
+    <p class="ml-4 mb-0">
+      b. a deposit has been paid against the current year's taxes, or
+    </p>
+    <p class="ml-4 mb-0">
+      c. the tax collector has consented to the transport permit.
+    </p>
+
+    <p class="mt-7">
+      A valid tax certificate is required in all cases except in the scenarios described below:
+    </p>
+
+    <p class="mt-7 font-weight-bold">
+      Scenario 1
+    </p>
+    <p>
+      No tax certificate is required for moving the manufactured home to a different pad within the same park, or moving
+      the manufactured home from locations on a manufacturer or dealer’s lot. To confirm this exemption applies check
+      the ‘Certificate requirement waved’ below
+    </p>
+
+    <p class="mt-7 font-weight-bold">
+      Scenario 2
+    </p>
+    <p>
+      If the transport permit is requested by a landlord under MHA section 15(2)(b), then you must confirm consent from
+      the taxing authority. To confirm you have received evidence of consent, check the ‘Certificate requirement waved’
+      below
+    </p>
+
+    <p class="mt-7 font-weight-bold">
+      Scenario 3
+    </p>
+    <p>
+      If there are special circumstances for which registry staff deem it appropriate to waive the requirement for a tax
+      certificate, then check the ‘Certificate requirement waved’ below.
+    </p>
+
+    <p class="mt-7">
+      If there is no expiry date in the tax certificate, then enter the last day of the relevant tax year, e.g. 31 Dec
+      20xx.
+    </p>
+
+    <p class="mt-7">
+      If the tax notice for the current year has not yet been mailed to the owner, then the owner must pay a deposit
+      against taxes owing in order to receive a tax certificate. The deposit must be an amount equal to the greater of
+      $75 or the previous year's taxes less any home owner grant.
+    </p>
+  </article>
+</template>

ppr-ui/src/components/mhrTransportPermit/LocationChange.vue

@@ -185,19 +185,41 @@
         class="mt-10"
       >
         <h2>4. Confirm Tax Certificate </h2>
-        <p class="mt-2">
+        <p
+          v-if="isRoleStaffSbc || isRoleStaffReg"
+          class="mt-2"
+        >
+          A valid tax certificate is required in all cases. To confirm your tax certificate, enter the expiry date
+          below. If there is no expiry date in the tax certificate, then enter the last day of the relevant tax year
+          , e.g. 31 Dec 20xx. Exceptions are outlined in the tax certificate help section.
+        </p>
+        <p
+          v-else
+          class="mt-2"
+        >
           A valid tax certificate is required; it must be issued from the tax
           authority with jurisdiction of the home, and must show that all local taxes have
           been paid for the current tax year. To confirm your tax certificate, enter the expiry date below.
         </p>
 
+        <SimpleHelpToggle
+          :toggleButtonTitle="'Help with Tax Certificate'"
+          class="my-6"
+        >
+          <template #content>
+            <StaffTaxCertificateHelp v-if="isRoleStaffSbc || isRoleStaffReg" />
+            <QsTaxCertificateHelp v-else />
+          </template>
+        </SimpleHelpToggle>
+
         <TaxCertificate
           ref="taxCertificateRef"
           :key="getMhrTransportPermit.locationChangeType"
           :expiryDate="getMhrTransportPermit.newLocation.taxExpiryDate"
           :class="{ 'border-error-left': validate && !getInfoValidation('isTaxCertificateValid') }"
           :validate="validate && !getInfoValidation('isTaxCertificateValid')"
           @setStoreProperty="handleTaxCertificateUpdate($event)"
+          @waiveCertificate="setMhrTransportPermitNewLocation({ key: 'waiveCertificate', value: $event })"
           @isValid="setValidation('isTaxCertificateValid', $event)"
         />
       </section>
@@ -211,7 +233,7 @@ import { FormIF } from '@/interfaces'
 import { locationChangeTypes } from '@/resources/mhr-transport-permits/transport-permits'
 import { useStore } from '@/store/store'
 import { reactive, computed, watch, ref, nextTick, onMounted } from 'vue'
-import { FormCard } from '@/components/common'
+import { FormCard, SimpleHelpToggle } from '@/components/common'
 import { HomeCivicAddress, HomeLandOwnership, HomeLocationType } from '@/components/mhrRegistration'
 import { CivicAddressSchema } from '@/schemas/civic-address'
 import { TaxCertificate } from '@/components/mhrTransfers'
@@ -221,6 +243,8 @@ import { storeToRefs } from "pinia"
 import { changeTransportPermitLocationTypeDialog } from '@/resources/dialogOptions'
 import { BaseDialog } from '@/components/dialogs'
 import { cloneDeep } from 'lodash'
+import QsTaxCertificateHelp from '@/components/mhrTransportPermit/HelpContent/QsTaxCertificateHelp.vue'
+import StaffTaxCertificateHelp from '@/components/mhrTransportPermit/HelpContent/StaffTaxCertificateHelp.vue'
 
 const props = defineProps<{
   validate: boolean
@@ -234,6 +258,7 @@ const { setMhrTransportPermit, setMhrTransportPermitNewLocation,
 const {
   hasUnsavedChanges,
   isRoleStaffSbc,
+  isRoleStaffReg,
   isRoleQualifiedSupplier,
   getMhrTransportPermit,
   getMhrTransportPermitHomeLocation,

ppr-ui/src/interfaces/mhr-registration-interfaces/MhrRegistrationHomeLocationIF.ts

@@ -38,4 +38,5 @@ export interface MhrRegistrationHomeLocationWithoutAddressIF {
   reserveNumber?: string
   exceptionPlan?: string
   permitWithinSamePark?: boolean // for transport permit amendment
+  waiveCertificate?: boolean // waive transport permit tax certificate
 }

ppr-ui/src/resources/dialogOptions/cancelDialogs.ts

@@ -86,6 +86,6 @@ export const confirmNewTransportPermit: DialogOptionsIF = {
   title: 'Verify Transport Permit Status',
   label: '',
   text: 'By applying for a new transport permit you are confirming that the active Transport permit {number} issued' +
-    ' on {date of issue} has been completed and will render as no longer active.'
+    ' on {date of issue} has been completed and will no longer be active.'
 }
 

ppr-ui/src/views/mhrInformation/MhrTransportPermit.vue

@@ -579,13 +579,15 @@ const toggleCancelTransportPermit = (val: boolean) => {
 const toggleExtendTransportPermit = (val: boolean) => {
   setExtendLocationChange(val)
   setMhrTransportPermitLocationChangeType(val ? LocationChangeTypes.EXTEND_PERMIT : null)
+  if (!val) emit('cancelTransportPermitChanges', val)
 }
 
 const handleConfirmNewPermit = (val: boolean) => {
   setNewPermitChange(val)
   setLocationChange(val)
   setLocationChangeType(val ? LocationChangeTypes.TRANSPORT_PERMIT : null)
   state.showConfirmNewPermitDialog = false
+  if (!val) emit('cancelTransportPermitChanges', val)
 }
 
 </script>