Amendment Fixes + Date Formatting for Safari (bcgov#1668)

* Initial commit

* More date formatting fixes

* lint fixes

* Date Formatting for Safari latest

* pr clean up

* FF revert

* some clearable clean up and updated regex

* padding clean up

ppr-ui/package.json

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

ppr-ui/src/components/collateral/Collateral.vue

@@ -97,7 +97,7 @@
     </v-row>
     <VehicleCollateral
       :isSummary="false"
-      :showInvalid="collateral.showInvalid && !valid"
+      :showInvalid="collateral.showInvalid && !valid && hasVehicleCollateral()"
       @collateralOpen="setVehicleCollateralOpen($event)"
     />
     <GeneralCollateral
@@ -335,6 +335,7 @@ export default defineComponent({
       registrationFlowType,
       registrationType,
       RegistrationFlowType,
+      hasVehicleCollateral,
       setVehicleCollateralOpen,
       setGeneralCollateralOpen,
       ...toRefs(localState)

ppr-ui/src/components/common/CourtOrder.vue

@@ -326,7 +326,6 @@
               class="court-date-text-input"
               nudgeRight="40"
               title="Date of Order"
-              clearable
               :errorMsg="errors.orderDate.message ? errors.orderDate.message : ''"
               :initialValue="orderDate"
               :minDate="minCourtDate"
@@ -463,16 +462,16 @@ export default defineComponent({
         }
         return props.setShowErrors
       }),
-      minCourtDate: computed((): string => {
+      minCourtDate: computed((): Date|string => {
         if (registrationType === APIRegistrationTypes.REPAIRERS_LIEN) {
           const minDate = new Date(getRegistrationCreationDate.value)
           return localTodayDate(minDate)
         } else {
-          return '0'
+          return ''
         }
       }),
       maxCourtDate: computed((): string => {
-        return localTodayDate()
+        return localTodayDate(new Date(), true)
       }),
       fileNumberMessage: computed((): string => {
         if (localState.fileNumber.length > 20) {

ppr-ui/src/components/common/InputFieldDatePicker.vue

@@ -71,7 +71,7 @@
 <script lang="ts">
 import { defineComponent, reactive, ref, toRefs, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import { dateToYyyyMmDd, shortPacificDate } from '@/utils'
+import { convertDate, dateToYyyyMmDd, yyyyMmDdToDate } from '@/utils'
 import { FormIF } from '@/interfaces'
 import BaseDatePicker from '@/components/common/BaseDatePicker.vue'
 
@@ -97,16 +97,16 @@ export default defineComponent({
     const form = ref(null) as FormIF
     const dateTextField = ref(null)
     const localState = reactive({
-      defaultDate: null as Date,
-      dateText: props.initialValue || null,
+      defaultDate: props.initialValue && yyyyMmDdToDate(props.initialValue) || null,
+      dateText: props.initialValue && convertDate(props.initialValue, false, false) || null,
       displayPicker: false
     })
 
 
     /** Handle emitted Date and format for display **/
     const dateHandler = (val: Date): void => {
       localState.defaultDate = val
-      localState.dateText = shortPacificDate(val)
+      localState.dateText =  convertDate(val, false, false)
     }
     /** Clear local model after each action. */
     const clearDate = (): void => {
@@ -126,7 +126,7 @@ export default defineComponent({
 
     /** Emit date to add or remove. */
     const emitDate = (): void => {
-      context.emit('emitDate', dateToYyyyMmDd(localState.defaultDate))
+      localState.defaultDate && context.emit('emitDate', dateToYyyyMmDd(localState.defaultDate))
       localState.displayPicker = false
     }
 

ppr-ui/src/components/mhrRegistration/YourHome/HomeCertification.vue

@@ -257,7 +257,7 @@ export default defineComponent({
           (localState.isEngineerOption && localState.isEngineerValid && !!localState.engineerDate) ||
           localState.hasNoCertification
       }),
-      today: computed(() => localTodayDate()),
+      today: computed(() => localTodayDate(new Date(), true)),
       minDate: computed(() => {
         // Determined by YEAR value in Manufacturers, Make, Model Section
         const ptDate = createDateFromPacificTime(getMhrRegistrationHomeDescription.value?.baseInformation.year, 0, 1)

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

@@ -50,11 +50,10 @@
           <InputFieldDatePicker
             id="death-date-time"
             ref="deathDateTimeRef"
-            clearable
             title="Date of Death"
             :errorMsg="validate && !deathDateTime ? 'Enter date of death' : ''"
             :initialValue="deathDateTime"
-            :maxDate="localTodayDate()"
+            :maxDate="localTodayDate(new Date(), true)"
             :disablePicker="isDisabled"
             data-test-id="death-date-time"
             @emitDate="deathDateTime = $event"

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

@@ -55,7 +55,6 @@
               <InputFieldDatePicker
                 id="transfer-date"
                 ref="transferDateRef"
-                clearable
                 title="Date"
                 :errorMsg="showFormError && !transferDate ? 'Enter bill of sale date of execution' : ''"
                 :initialValue="transferDate"

ppr-ui/src/components/registration/length-trust/RegistrationRepairersLien.vue

@@ -207,7 +207,6 @@
           <InputFieldDatePicker
             ref="datePickerRef"
             :key="datePickerKey"
-            clearable
             title="Date"
             nudgeRight="40"
             hint="Must not be more than 21 days in the past"
@@ -305,10 +304,8 @@ export default defineComponent({
         return 'Registration'
       }),
       minSurrenderDate: computed((): Date => {
-        const dateOffset = 24 * 60 * 60 * 1000 * 21 // 21 days in milliseconds
         const minDate = new Date()
-        minDate.setTime(minDate.getTime() - dateOffset)
-        return minDate
+        return new Date(minDate.getTime() - 21 * 24 * 60 * 60 * 1000)
       }),
       computedExpiryDateFormatted: computed((): string => {
         if (props.isRenewal) {
@@ -338,8 +335,6 @@ export default defineComponent({
       }),
       surrenderDateSummary: computed((): string => {
         if (props.isRenewal) {
-          // TODO: I'm not sure assigning a computed to a computed works as expected or at all. Revisit this asap.
-          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
           getLengthTrust.value.surrenderDate = getRegistrationSurrenderDate.value
           return convertDate(
             new Date(getLengthTrust.value.surrenderDate),

ppr-ui/src/components/unitNotes/EffectiveDate.vue

@@ -122,7 +122,7 @@ export default defineComponent({
       effectiveDateType: EffectiveDateTypes.IMMEDIATE,
       effectiveDate: '',
 
-      maxDate: computed((): string => localTodayDate(new Date(date.setDate(date.getDate() - 1)))),
+      maxDate: computed((): string => localTodayDate(new Date(date.setDate(date.getDate() - 1)), true)),
       isImmediateDateSelected: computed((): boolean => localState.effectiveDateType === EffectiveDateTypes.IMMEDIATE),
       isEffectiveDateValid: computed((): boolean =>
         localState.isImmediateDateSelected ||

ppr-ui/src/utils/date-helper.ts

@@ -38,14 +38,14 @@ export function formatExpiryDate (expDate: Date) {
 }
 
 /** Converts date to display format. */
-export function convertDate (date: Date, includeTime: boolean, includeTz: boolean): string {
+export function convertDate (date: Date|string, includeTime: boolean, includeTz: boolean): string {
   if (!includeTime) return moment(date).format('MMMM D, Y')
 
   // add 'Pacific Time' to end if pacific timezone
   let timezone = ''
   if ((date.toString()).includes('Pacific')) timezone = 'Pacific time'
 
-  const datetime = format12HourTime(date)
+  const datetime = format12HourTime(date as Date)
 
   if (includeTz) return moment(date).format('MMMM D, Y') + ` at ${datetime} ${timezone}`
   else return moment(date).format('MMMM D, Y') + ` ${datetime}`
@@ -149,13 +149,14 @@ export function yyyyMmDdToDate (dateStr: string): Date {
 export function dateToYyyyMmDd (date: Date): string {
   // safety check
   if (!isDate(date) || isNaN(date.getTime())) return null
-
-  return date.toLocaleDateString('en-CA', {
+  const localDate = date.toLocaleDateString('en-CA', {
     timeZone: 'America/Vancouver',
     month: 'numeric', // 12
     day: 'numeric', // 31
     year: 'numeric' // 2020
   })
+
+  return convertDateFormat(localDate)
 }
 
 /**
@@ -193,9 +194,32 @@ export function dateToPacificDate (date: Date, longMonth = false, showWeekday =
   return dateStr
 }
 
-export function localTodayDate (date: Date = new Date()): string {
+
+/**
+ * Transforms a date string from "YYYY/MM/DD" to "YYYY-MM-DD" format.
+ * Useful for modern versions of safari where date functions can return non-iso formats
+ * @param dateString
+ */
+export function convertDateFormat(dateString) {
+  const originalDate = new Date(dateString)
+
+  // Check if the date is valid and the input format is "MM/DD/YYYY"
+  if (!isNaN(originalDate.getTime()) && /\d{1,2}\/\d{1,2}\/\d{4}/.test(dateString)) {
+    const year = originalDate.getFullYear()
+    const month = (originalDate.getMonth() + 1).toString().padStart(2, '0')
+    const day = originalDate.getDate().toString().padStart(2, '0')
+
+    return `${year}-${month}-${day}`
+  }
+
+  // If the date is already in "YYYY-MM-DD" format or invalid, return the original input
+  return dateString
+}
+
+export function localTodayDate (date: Date = new Date(), returnYYYYMMDD: boolean = false): string {
   const localYear = date.toLocaleDateString('en-CA', { year: 'numeric', timeZone: 'America/Vancouver' })
   const localMonth = date.toLocaleDateString('en-CA', { month: '2-digit', timeZone: 'America/Vancouver' })
   const localDay = date.toLocaleDateString('en-CA', { day: '2-digit', timeZone: 'America/Vancouver' })
+  if (returnYYYYMMDD) return `${localYear}, ${localMonth}, ${localDay}`
   return [localYear, localMonth, localDay].join('-')
 }

ppr-ui/src/views/discharge/ConfirmDischarge.vue

@@ -1,7 +1,7 @@
 <template>
   <v-container
     id="confirm-discharge"
-    class="view-container pa-15 pt-14"
+    class="px-0 pt-14"
     fluid
     style="min-width: 960px;"
   >

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

@@ -9,7 +9,7 @@
         noGutters
         align="center"
       >
-        <v-col cols="9">
+        <v-col cols="8">
           <img
             class="ml-1 review-header-icon"
             alt="home-location-review-icon"
@@ -18,13 +18,13 @@
           <label class="font-weight-bold pl-2">Location of Home</label>
         </v-col>
         <v-col
-          cols="3"
+          cols="4"
           class="text-right"
         >
           <v-btn
             id="home-location-change-btn"
             variant="plain"
-            class="pl-1"
+            class=""
             color="primary"
             :ripple="false"
             :disabled="disable"
@@ -47,7 +47,7 @@
       </v-row>
     </header>
 
-    <p class="mt-6">
+    <p class="mt-8">
       Transport permits are issued by changing the location on the manufactured home. Transport permits expire 30 days
       from the date of issue.
     </p>
@@ -58,6 +58,23 @@
         To change the location of this home, first select the Location Change Type.
       </p>
 
+      <p
+        v-if="!isRoleStaffReg"
+        class="mt-4"
+      >
+        <span class="font-weight-bold">Note:</span> If the home has already been moved without a permit, a change of
+        location cannot be completed online. You must notify BC Registries of the new location by submitting a
+        <a
+          :href="'https://www2.gov.bc.ca/assets/gov/employment-business-and-economic-development/business-management/' +
+            'permits-licences-and-registration/registries-forms/form_13_mhr_-_registered_location_change.pdf'"
+          class="generic-link"
+          target="_blank"
+        >
+          Registered Location Change form
+          <v-icon>mdi-open-in-new</v-icon>
+        </a>
+      </p>
+
       <!-- Help Content -->
       <SimpleHelpToggle
         class="mt-1"
@@ -181,7 +198,6 @@ const { isChangeLocationActive, setLocationChange } = useTransportPermits()
 
 // LocalState
 const docID: Ref<string> = ref('')
-
 </script>
 <style lang="scss" scoped>
 @import '@/assets/styles/theme.scss';

ppr-ui/src/views/renew/RenewRegistration.vue

@@ -122,7 +122,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, onMounted, reactive, toRefs, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
 import { useStore } from '@/store/store'
 import { StickyContainer, CourtOrder } from '@/components/common'
 import { BaseDialog } from '@/components/dialogs'
@@ -172,8 +172,7 @@ export default defineComponent({
   emits: ['error', 'haveData'],
   setup (props, context) {
     const route = useRoute()
-    const router = useRouter()
-    const { goToDash } = useNavigation()
+    const { goToDash, goToRoute } = useNavigation()
     const { isAuthenticated } = useAuth()
     const { initPprUpdateFilling } = usePprRegistration()
 
@@ -282,10 +281,7 @@ export default defineComponent({
     const confirmRenewal = (): void => {
       localState.errMsg = ''
       if (localState.registrationValid) {
-        router.push({
-          name: RouteNames.CONFIRM_RENEWAL,
-          query: { 'reg-num': localState.registrationNumber }
-        })
+        goToRoute(RouteNames.CONFIRM_RENEWAL, { 'reg-num': localState.registrationNumber })
       } else {
         localState.errMsg = '< You have unfinished changes'
         localState.showInvalid = true