Move Completed: Create New Transport Permit

ppr-ui/package.json

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

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

@@ -40,6 +40,7 @@ export default defineComponent({
  case 'HISTORICAL':
  case 'CANCELLED':
  case 'VOID':
+ case 'COMPLETED':
  return { bgColor: 'grey-lighten-2' }
  case 'LIEN':
  case 'LOCKED':

ppr-ui/src/components/mhrRegistration/ReviewConfirm/HomeLocationReview.vue

@@ -41,16 +41,38 @@
  />
  </div>
 
+ <div
+ v-if="isNewPermitActive && !isTransportPermitReview"
+ class="px-7 mt-5"
+ >
+ <div class="d-flex align-center">
+ <v-icon
+ size="21"
+ color="darkBlue"
+ >
+ mdi-map-marker
+ </v-icon>
+
+ <h4 class="fs-16 lh-24 pl-2">
+ Current Registered Location
+ </h4>
+ </div>
+ <v-divider
+ class="border-opacity-15 mt-4"
+ />
+ </div>
+
  <div
  :class="[
- {'border-error-left': showStepError && !isTransferReview && !isTransportPermitReview && !isMhrCorrection},
+ {'border-error-left': showStepError && !isTransferReview && !isTransportPermitReview && !isMhrCorrection &&
+ !isCreateNewPermit},
  {'cancelled-location-info': isCancelChangeLocationActive && !isPrevTransportPermitLocation &&
  !isCancelTransportPermitReview && !isCancelledTransportPermitDetails},
  {'restored-location-info': isCancelChangeLocationActive && isPrevTransportPermitLocation}
  ]"
  >
  <section
- v-if="showStepError && !isTransferReview && !isTransportPermitReview && !isMhrCorrection"
+ v-if="showStepError && !isTransferReview && !isTransportPermitReview && !isMhrCorrection && !isCreateNewPermit"
  :class="{ 'pb-8': !(!!homeLocationInfo.locationType) && !hasAddress }"
  class="mx-6 pt-8"
  >
@@ -87,7 +109,8 @@
  !isChangeLocationActive &&
  !isCorrectionReview &&
  !isPrevTransportPermitLocation &&
- !isCancelTransportPermitReview) || isExtendChangeLocationActive"
+ !isCancelTransportPermitReview &&
+ !isCreateNewPermit) || isExtendChangeLocationActive"
  :isCancelledLocation="isCancelledTransportPermitDetails"
  :isVoidPermit="isExemptionWithActiveTransportPermit"
  :infoText="exemptionWithActivePermitText"
@@ -461,7 +484,10 @@
  </v-row>
 
  <!-- Civic Address -->
- <v-divider class="mx-8 mt-6" />
+ <v-divider
+ v-if="!isCreateNewPermit"
+ class="mx-8 mt-6"
+ />
  <v-row
  noGutters
  class="px-8 pt-5 key-value-pair"
@@ -516,10 +542,14 @@
  !(isMhrCorrection && hasActiveTransportPermit) && !isCancelChangeLocationActive &&
  !isExtendChangeLocationActive"
  >
- <v-divider class="mx-8 mt-6" />
+ <v-divider
+ v-if="!isCreateNewPermit"
+ class="mx-8 mt-6"
+ />
 
  <!-- Land Details -->
  <v-row
+ v-if="!isCreateNewPermit"
  noGutters
  class="px-8 pt-6"
  >
@@ -533,6 +563,7 @@
 
  <!-- Lease or Land Ownership -->
  <v-row
+ v-if="!isCreateNewPermit"
  noGutters
  class="px-8 pt-1 key-value-pair"
  >
@@ -659,6 +690,10 @@ export default defineComponent({
  isExtendChangeLocationReview: {
  type: Boolean,
  default: false
+ },
+ isCreateNewPermit: {
+ type: Boolean,
+ default: false
  }
  },
  setup (props) {
@@ -689,6 +724,7 @@ export default defineComponent({
  const countryProvincesHelpers = useCountriesProvinces()
  const { required, notEqualTo, customRules } = useInputRules()
  const {
+ isNewPermitActive,
  hasActiveTransportPermit,
  isChangeLocationActive,
  isAmendLocationActive,
@@ -702,9 +738,9 @@ export default defineComponent({
  const { isExemptionWithActiveTransportPermit, exemptionLabel } = useExemptions()
 
  const homeLocationInfo: MhrRegistrationHomeLocationIF =
- (props.isPrevTransportPermitLocation || props.isCancelTransportPermitReview || props.isExtendChangeLocationReview)
+ (props.isPrevTransportPermitLocation || props.isCancelTransportPermitReview)
  ? getMhrTransportPermitPreviousLocation.value
- : props.isTransportPermitReview
+ : (props.isTransportPermitReview && !props.isExtendChangeLocationReview)
  ? getMhrTransportPermit.value.newLocation
  : getMhrRegistrationLocation.value
 
@@ -824,6 +860,7 @@ export default defineComponent({
  }, { immediate: true })
 
  return {
+ isNewPermitActive,
  homeLocationInfo,
  newPadNumberRef,
  HomeLocationTypes,

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

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { useStore } from '@/store/store'
+import { storeToRefs } from 'pinia'
+import { convertDate } from '@/utils'
+import { addDaysToDate, pacificDate, shortPacificDate } from '@/utils/date-helper'
+import { useTransportPermits } from '@/composables'
+const { getMhrInformation } = storeToRefs(useStore())
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const props = withDefaults(defineProps<{
+ isCancelledLocation?: boolean,
+ isVoidPermit?: boolean,
+ infoText?: string
+}>(), {
+ isCancelledLocation: false,
+ isVoidPermit: false,
+ infoText: ''
+})
+
+const { isExtendChangeLocationActive } = useTransportPermits()
+
+</script>
+<template>
+ <article
+ id="transport-permit-details"
+ class="px-8 pt-6"
+ :class="[
+ { 'cancelled-transport-permit-details': isCancelledLocation },
+ { 'void-transport-permit-details': isVoidPermit }
+ ]"
+ >
+ <v-row noGutters>
+ <v-col
+ class="transport-details-header"
+ >
+ <h4 class="fs-16 lh-24">
+ Transport Permit Details
+ </h4>
+ </v-col>
+ </v-row>
+
+ <v-row
+ noGutters
+ class="pt-4 key-value-pair"
+ >
+ <v-col cols="3 tp-header">
+ Transport Permit<br> Number
+ </v-col>
+ <v-col cols="9 tp-label">
+ {{ getMhrInformation.permitRegistrationNumber }}
+ </v-col>
+ </v-row>
+
+ <v-row
+ noGutters
+ class="pt-2 key-value-pair"
+ >
+ <v-col cols="3 tp-header">
+ Date and Time of Issue
+ </v-col>
+ <v-col cols="9 tp-label">
+ {{ pacificDate(getMhrInformation.permitDateTime, true) }}
+ </v-col>
+ </v-row>
+
+ <v-row
+ noGutters
+ class="pt-2 pb-1 key-value-pair"
+ >
+ <v-col cols="3 tp-header">
+ Date of Expiry
+ </v-col>
+ <v-col cols="9 tp-label">
+ {{ isExtendChangeLocationActive
+ ? shortPacificDate(addDaysToDate(convertDate(new Date(), false, false), 30))
+ : shortPacificDate(getMhrInformation.permitExpiryDateTime)
+ }}
+ </v-col>
+ </v-row>
+ </article>
+</template>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/theme.scss';
+h3 {
+ line-height: unset;
+}
+
+.cancelled-transport-permit-details {
+ // below is to grey out transport details but not the InfoChip
+ .transport-details-header {
+ display: contents;
+ }
+ dd, dt, .transport-details-header h3 {
+ opacity: 0.4;
+ }
+}
+
+.void-transport-permit-details {
+ background-color: #FAFAFA;
+ margin-top: 0px !important;
+ padding-top: 40px !important;
+
+ border-bottom: 1px solid $gray3;
+ margin-bottom: 28px;
+ padding-bottom: 31px;
+
+ .transport-permit-divider {
+ display: none;
+ }
+}
+</style>

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

@@ -7,7 +7,7 @@
  />
 
  <FormCard
- v-if="!isAmendLocationActive && !isExtendChangeLocationActive"
+ v-if="!isAmendLocationActive && !isExtendChangeLocationActive && !isNewPermitActive"
  label="Location Change Type"
  :showErrors="validate && !state.locationChangeFromValid"
  :class="{'border-error-left': validate && !state.locationChangeFromValid}"
@@ -242,6 +242,7 @@ const {
 } = storeToRefs(useStore())
 
 const {
+ isNewPermitActive,
  setLocationChangeType,
  resetTransportPermit,
  isNotManufacturersLot,

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

@@ -1,9 +1,9 @@
 <template>
  <article
  id="transport-permit-details"
- class="px-8 pt-6"
+ class="px-8 py-6"
  :class="[
- { 'cancelled-transport-permit-details': isCancelledLocation },
+ { 'cancelled-transport-permit-details': isCancelledLocation || isCompletedLocation },
  { 'void-transport-permit-details': isVoidPermit }
  ]"
  >
@@ -19,13 +19,18 @@
  data-test-id="void-transport-permit-badge"
  />
  <h4 class="fs-16 lh-24">
- Transport Permit Details
+ Transport Permit {{ isCompletedLocation ? '' : 'Details' }}
  </h4>
  <InfoChip
  v-if="isCancelledLocation"
  class="ml-2"
  action="CANCELLED"
  />
+ <InfoChip
+ v-if="isCompletedLocation"
+ class="ml-2"
+ action="COMPLETED"
+ />
  </v-col>
  </v-row>
 
@@ -83,7 +88,10 @@
  }}
  </v-col>
  </v-row>
- <v-divider class="transport-permit-divider my-6" />
+ <v-divider
+ v-if="!isCompletedLocation"
+ class="transport-permit-divider mt-6"
+ />
  </article>
 </template>
 
@@ -99,10 +107,12 @@ const { getMhrInformation } = storeToRefs(useStore())
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const props = withDefaults(defineProps<{
  isCancelledLocation?: boolean,
+ isCompletedLocation?: boolean,
  isVoidPermit?: boolean,
  infoText?: string
 }>(), {
  isCancelledLocation: false,
+ isCompletedLocation: false,
  isVoidPermit: false,
  infoText: ''
 })
@@ -122,7 +132,7 @@ h3 {
  .transport-details-header {
  display: contents;
  }
- dd, dt, .transport-details-header h3 {
+ dd, dt, .transport-details-header, .tp-header, .tp-label {
  opacity: 0.4;
  }
 }