From 7e70433a494453a9a67d398237956271a9e99931 Mon Sep 17 00:00:00 2001
From: CameronEYDS <53542131+cameron-eyds@users.noreply.github.com>
Date: Tue, 8 Oct 2024 17:31:16 -0700
Subject: [PATCH] extend transport permits (#2032)

---
 ppr-ui/package-lock.json                      |  4 +-
 ppr-ui/package.json                           |  2 +-
 ppr-ui/src/assets/svgs/IconExtend.svg         | 11 +++
 ppr-ui/src/assets/svgs/newPermit.svg          |  3 +
 ppr-ui/src/components/common/QsAccessBtn.vue  |  3 +-
 .../ReviewConfirm/HomeLocationReview.vue      | 27 ++++--
 .../mhrTransportPermit/LocationChange.vue     | 10 ++-
 .../LocationChangeReview.vue                  |  8 +-
 .../TransportPermitDetails.vue                | 19 ++++-
 .../components/tombstone/TombstoneDynamic.vue | 12 ++-
 .../mhrInformation/useMhrInfoValidation.ts    |  9 ++
 .../mhrInformation/useTransportPermits.ts     | 16 ++++
 ppr-ui/src/enums/registrationTypes.ts         |  1 +
 ppr-ui/src/enums/transportPermits.ts          |  5 +-
 .../transport-permits.ts                      |  5 ++
 ppr-ui/src/utils/date-helper.ts               | 21 ++++-
 ppr-ui/src/views/Dashboard.vue                |  1 +
 .../views/mhrInformation/MhrInformation.vue   | 56 ++++++++-----
 .../mhrInformation/MhrTransportPermit.vue     | 84 ++++++++++++++++---
 ppr-ui/tests/unit/MhrTransportPermit.spec.ts  |  6 +-
 20 files changed, 246 insertions(+), 57 deletions(-)
 create mode 100644 ppr-ui/src/assets/svgs/IconExtend.svg
 create mode 100644 ppr-ui/src/assets/svgs/newPermit.svg

diff --git a/ppr-ui/package-lock.json b/ppr-ui/package-lock.json
index c26b26d7c..2ffce949f 100644
--- a/ppr-ui/package-lock.json
+++ b/ppr-ui/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "ppr-ui",
-  "version": "3.2.61",
+  "version": "3.2.62",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ppr-ui",
-      "version": "3.2.61",
+      "version": "3.2.62",
       "dependencies": {
         "@bcrs-shared-components/input-field-date-picker": "^1.0.0",
         "@lemoncode/fonk": "^1.5.1",
diff --git a/ppr-ui/package.json b/ppr-ui/package.json
index a9c4756aa..83b1728ef 100644
--- a/ppr-ui/package.json
+++ b/ppr-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ppr-ui",
-  "version": "3.2.61",
+  "version": "3.2.62",
   "private": true,
   "appName": "Assets UI",
   "sbcName": "SBC Common Components",
diff --git a/ppr-ui/src/assets/svgs/IconExtend.svg b/ppr-ui/src/assets/svgs/IconExtend.svg
new file mode 100644
index 000000000..a00070c7f
--- /dev/null
+++ b/ppr-ui/src/assets/svgs/IconExtend.svg
@@ -0,0 +1,11 @@
+<svg width="14" height="14" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5131_3518)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.043 15.8335H4.16667V6.66683H15.8333V11.1909H17.5V4.16683C17.5 3.24183 16.75 2.50016 15.8333 2.50016H15V0.833496H13.3333V2.50016H6.66667V0.833496H5V2.50016H4.16667C3.24167 2.50016 2.5 3.24183 2.5 4.16683V15.8335C2.5 16.2755 2.67559 16.6994 2.98816 17.012C3.30072 17.3246 3.72464 17.5002 4.16667 17.5002H11.043V15.8335Z" fill="#1669BB"/>
+<path d="M20.1777 17.3964H20.3527V17.2214V16.2214V16.0464H20.1777H17.3527V13.2214V13.0464H17.1777H16.1777H16.0027V13.2214V16.0464H13.1777H13.0027V16.2214V17.2214V17.3964H13.1777H16.0027V20.2214V20.3964H16.1777H17.1777H17.3527V20.2214V17.3964H20.1777Z" fill="#1669BB" stroke="#1669BB" stroke-width="0.35"/>
+</g>
+<defs>
+<clipPath id="clip0_5131_3518">
+<rect width="18" height="18" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/ppr-ui/src/assets/svgs/newPermit.svg b/ppr-ui/src/assets/svgs/newPermit.svg
new file mode 100644
index 000000000..ba5560292
--- /dev/null
+++ b/ppr-ui/src/assets/svgs/newPermit.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.60026 17.3458H10.4336V15.6791H4.60026V3.17912H10.4336V7.34579H14.6003V11.5125H16.2669V6.51245L11.2669 1.51245H4.60026C3.68359 1.51245 2.93359 2.26245 2.93359 3.17912V15.6791C2.93359 16.5958 3.68359 17.3458 4.60026 17.3458ZM18.6276 17.0908H16.1276V19.5908H14.7109V17.0908H12.2109V15.6741H14.7109V13.1741H16.1276V15.6741H18.6276V17.0908ZM18.3356 16.7991V15.9658H18.3359V16.7991H15.8359V19.2991H15.0026V19.2991H15.8356V16.7991H18.3356ZM15.0023 16.7991V16.7991H12.5026V16.7991H15.0023ZM15.8356 15.9658V13.4658H15.8359V15.9658H15.8356ZM6.625 8.81519H12.4375V10H6.625V8.81519ZM12.4375 11.9293H6.625V13.1141H12.4375V11.9293Z" fill="#1669BB"/>
+</svg>
diff --git a/ppr-ui/src/components/common/QsAccessBtn.vue b/ppr-ui/src/components/common/QsAccessBtn.vue
index ac519f582..e7cf49f74 100644
--- a/ppr-ui/src/components/common/QsAccessBtn.vue
+++ b/ppr-ui/src/components/common/QsAccessBtn.vue
@@ -52,10 +52,11 @@ import { useUserAccess } from '@/composables'
 export default defineComponent({
   name: 'QsAccessBtn',
   setup () {
-    const { isRoleStaffReg } = storeToRefs(useStore())
+    const { isRoleStaffReg, getUserEmail } = storeToRefs(useStore())
     const { hasActiveQsAccess, hasPendingQsAccess, isUserAccessRoute, goToUserAccess } = useUserAccess()
 
     return {
+      getUserEmail,
       goToUserAccess,
       isRoleStaffReg,
       hasActiveQsAccess,
diff --git a/ppr-ui/src/components/mhrRegistration/ReviewConfirm/HomeLocationReview.vue b/ppr-ui/src/components/mhrRegistration/ReviewConfirm/HomeLocationReview.vue
index d569bab57..469121e9f 100644
--- a/ppr-ui/src/components/mhrRegistration/ReviewConfirm/HomeLocationReview.vue
+++ b/ppr-ui/src/components/mhrRegistration/ReviewConfirm/HomeLocationReview.vue
@@ -83,11 +83,11 @@
         <!-- Transport permit details rendered when there is an active permit -->
         <!-- add top margin to compensate negative bottom margin of the section tag -->
         <TransportPermitDetails
-          v-if="hasActiveTransportPermit &&
+          v-if="(hasActiveTransportPermit &&
             !isChangeLocationActive &&
             !isCorrectionReview &&
             !isPrevTransportPermitLocation &&
-            !isCancelTransportPermitReview"
+            !isCancelTransportPermitReview) || isExtendChangeLocationActive"
           :isCancelledLocation="isCancelledTransportPermitDetails"
           :isVoidPermit="isExemptionWithActiveTransportPermit"
           :infoText="exemptionWithActivePermitText"
@@ -513,7 +513,8 @@
           </v-row>
           <template
             v-if="!isMhrManufacturerRegistration && !isTransferReview && !hideLandLease &&
-              !(isMhrCorrection && hasActiveTransportPermit) && !isCancelChangeLocationActive"
+              !(isMhrCorrection && hasActiveTransportPermit) && !isCancelChangeLocationActive &&
+              !isExtendChangeLocationActive"
           >
             <v-divider class="mx-8 mt-6" />
 
@@ -583,7 +584,10 @@
               Tax Certificate <br>Expiry Date
             </v-col>
             <v-col cols="9">
-              {{ convertDateToLongFormat(homeLocationInfo.taxExpiryDate) }}
+              {{ isExtendChangeLocationActive
+                ? convertDateToLongFormat(getMhrTransportPermit.newLocation.taxExpiryDate)
+                : convertDateToLongFormat(homeLocationInfo.taxExpiryDate)
+              }}
             </v-col>
           </v-row>
         </template>
@@ -651,6 +655,10 @@ export default defineComponent({
     isCancelTransportPermitReview: {
       type: Boolean,
       default: false
+    },
+    isExtendChangeLocationReview: {
+      type: Boolean,
+      default: false
     }
   },
   setup (props) {
@@ -686,14 +694,15 @@ export default defineComponent({
       isAmendLocationActive,
       isNotManufacturersLot,
       isMovingWithinSamePark,
-      isCancelChangeLocationActive
+      isCancelChangeLocationActive,
+      isExtendChangeLocationActive
     } = useTransportPermits()
     const { correctionState, isMhrCorrection } = useMhrCorrections()
     const { showUpdatedBadge } = useUpdatedBadges()
     const { isExemptionWithActiveTransportPermit, exemptionLabel } = useExemptions()
 
     const homeLocationInfo: MhrRegistrationHomeLocationIF =
-      (props.isPrevTransportPermitLocation || props.isCancelTransportPermitReview)
+      (props.isPrevTransportPermitLocation || props.isCancelTransportPermitReview || props.isExtendChangeLocationReview)
         ? getMhrTransportPermitPreviousLocation.value
         : props.isTransportPermitReview
             ? getMhrTransportPermit.value.newLocation
@@ -703,8 +712,8 @@ export default defineComponent({
       // transport permit
       currentPadNumber: homeLocationInfo.pad,
       newTransportPermitPadNumber: '',
-      showTaxCertificateExpiryDate: homeLocationInfo.taxCertificate
-        && isNotManufacturersLot.value && !isMovingWithinSamePark.value,
+      showTaxCertificateExpiryDate: isNotManufacturersLot.value && !isMovingWithinSamePark.value &&
+        (homeLocationInfo.taxCertificate || getMhrTransportPermit.value?.newLocation?.taxCertificate),
       isNewPadNumberValid: false,
       amendedBadgeLocationType: {
         baseline: getMhrOriginalTransportPermitHomeLocation.value,
@@ -830,10 +839,12 @@ export default defineComponent({
       isAmendLocationActive,
       isChangeLocationActive,
       isCancelChangeLocationActive,
+      isExtendChangeLocationActive,
       correctionState,
       isMhrCorrection,
       isMhrReRegistration,
       showUpdatedBadge,
+      getMhrTransportPermit,
       isExemptionWithActiveTransportPermit,
       ...toRefs(localState)
     }
diff --git a/ppr-ui/src/components/mhrTransportPermit/LocationChange.vue b/ppr-ui/src/components/mhrTransportPermit/LocationChange.vue
index ed7e26ead..7270c8ae0 100644
--- a/ppr-ui/src/components/mhrTransportPermit/LocationChange.vue
+++ b/ppr-ui/src/components/mhrTransportPermit/LocationChange.vue
@@ -7,7 +7,7 @@
     />
 
     <FormCard
-      v-if="!isAmendLocationActive"
+      v-if="!isAmendLocationActive && !isExtendChangeLocationActive"
       label="Location Change Type"
       :showErrors="validate && !state.locationChangeFromValid"
       :class="{'border-error-left': validate && !state.locationChangeFromValid}"
@@ -79,10 +79,11 @@
     </FormCard>
 
     <div
-      v-if="state.isTransportPermitType || isRegisteredLocationChange"
+      v-if="state.isTransportPermitType || isRegisteredLocationChange || isExtendChangeLocationActive"
       id="transport-permit-location-type"
     >
       <section
+        v-if="!isExtendChangeLocationActive"
         id="transport-permit-home-location-type"
         class="mt-10"
       >
@@ -111,6 +112,7 @@
       </section>
 
       <section
+        v-if="!isExtendChangeLocationActive"
         id="transport-permit-home-civic-address"
         class="mt-12"
       >
@@ -153,6 +155,7 @@
       </section>
 
       <section
+        v-if="!isExtendChangeLocationActive"
         id="transport-permit-home-land-ownership"
         class="mt-12"
       >
@@ -247,7 +250,8 @@ const {
   hasAmendmentChanges,
   isActiveHomeOutsideBc,
   isRegisteredLocationChange,
-  getLandStatusConfirmation
+  getLandStatusConfirmation,
+  isExtendChangeLocationActive
 } = useTransportPermits()
 
 const {
diff --git a/ppr-ui/src/components/mhrTransportPermit/LocationChangeReview.vue b/ppr-ui/src/components/mhrTransportPermit/LocationChangeReview.vue
index fb8a7f6c9..f3b071051 100644
--- a/ppr-ui/src/components/mhrTransportPermit/LocationChangeReview.vue
+++ b/ppr-ui/src/components/mhrTransportPermit/LocationChangeReview.vue
@@ -47,6 +47,7 @@
       hideDefaultHeader
       isTransportPermitReview
       :isCancelTransportPermitReview="isCancelChangeLocationActive"
+      :isExtendChangeLocationReview="isExtendChangeLocationActive"
     />
   </v-card>
 </template>
@@ -59,7 +60,12 @@ import { HomeLocationReview } from '../mhrRegistration/ReviewConfirm';
 
 const { isRoleStaffReg, getMhrTransportPermit } = storeToRefs(useStore())
 
-const { getUiLocationType, isCancelChangeLocationActive, isAmendLocationActive } = useTransportPermits()
+const {
+  getUiLocationType,
+  isCancelChangeLocationActive,
+  isAmendLocationActive,
+  isExtendChangeLocationActive
+} = useTransportPermits()
 
 </script>
 
diff --git a/ppr-ui/src/components/mhrTransportPermit/TransportPermitDetails.vue b/ppr-ui/src/components/mhrTransportPermit/TransportPermitDetails.vue
index 4c9b5fb71..9973cf305 100644
--- a/ppr-ui/src/components/mhrTransportPermit/TransportPermitDetails.vue
+++ b/ppr-ui/src/components/mhrTransportPermit/TransportPermitDetails.vue
@@ -69,9 +69,18 @@
     >
       <v-col cols="3 tp-header">
         Date of Expiry
+        <UpdatedBadge
+          v-if="isExtendChangeLocationActive"
+          action="EXTENDED"
+          :baseline="getMhrInformation.permitDateTime"
+          :currentState="addDaysToDate(convertDate(new Date(), false, false), 30)"
+        />
       </v-col>
       <v-col cols="9 tp-label">
-        {{ shortPacificDate(getMhrInformation.permitExpiryDateTime) }}
+        {{ isExtendChangeLocationActive
+          ? shortPacificDate(addDaysToDate(convertDate(new Date(), false, false), 30))
+          : shortPacificDate(getMhrInformation.permitExpiryDateTime)
+        }}
       </v-col>
     </v-row>
     <v-divider class="transport-permit-divider my-6" />
@@ -81,8 +90,10 @@
 <script setup lang="ts">
 import { useStore } from '@/store/store'
 import { storeToRefs } from 'pinia'
-import { pacificDate, shortPacificDate } from '@/utils/date-helper'
-import { InfoChip } from '@/components/common'
+import { convertDate } from '@/utils'
+import { addDaysToDate, pacificDate, shortPacificDate } from '@/utils/date-helper'
+import { InfoChip, UpdatedBadge } from '@/components/common'
+import { useTransportPermits } from '@/composables'
 const { getMhrInformation } = storeToRefs(useStore())
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -96,6 +107,8 @@ const props = withDefaults(defineProps<{
   infoText: ''
 })
 
+const { isExtendChangeLocationActive } = useTransportPermits()
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/ppr-ui/src/components/tombstone/TombstoneDynamic.vue b/ppr-ui/src/components/tombstone/TombstoneDynamic.vue
index e2c5c4612..eee8714d9 100755
--- a/ppr-ui/src/components/tombstone/TombstoneDynamic.vue
+++ b/ppr-ui/src/components/tombstone/TombstoneDynamic.vue
@@ -120,7 +120,7 @@
         variant="plain"
         role="link"
         :ripple="false"
-        :disabled="actionInProgress || isCancelChangeLocationActive"
+        :disabled="actionInProgress || isCancelChangeLocationActive || isExtendChangeLocationActive"
         @click="initMhrCorrection(MhrPublicAmendment)"
       >
         <v-icon
@@ -145,7 +145,7 @@
             v-bind="props"
             role="link"
             :ripple="false"
-            :disabled="actionInProgress || isCancelChangeLocationActive"
+            :disabled="actionInProgress || isCancelChangeLocationActive || isExtendChangeLocationActive"
           >
             <v-icon
               color="primary"
@@ -234,7 +234,12 @@ export default defineComponent({
     const { isFrozenMhr, isCancelledMhr } = useMhrInformation()
     const { initMhrCorrection, isMhrChangesEnabled, isMhrCorrection } = useMhrCorrections()
 
-    const { isAmendLocationActive, isCancelChangeLocationActive, hasMhrStatusChangedToActive } = useTransportPermits()
+    const {
+      isAmendLocationActive,
+      isCancelChangeLocationActive,
+      hasMhrStatusChangedToActive,
+      isExtendChangeLocationActive
+    } = useTransportPermits()
 
     const localState = reactive({
       creationDate: computed((): string => {
@@ -299,6 +304,7 @@ export default defineComponent({
       MhrPublicAmendment,
       getMhrOriginalTransportPermitRegStatus,
       isCancelChangeLocationActive,
+      isExtendChangeLocationActive,
       isAmendLocationActive,
       getMhrInformation,
       isMhrReRegistration,
diff --git a/ppr-ui/src/composables/mhrInformation/useMhrInfoValidation.ts b/ppr-ui/src/composables/mhrInformation/useMhrInfoValidation.ts
index 7fb469e9c..e13ab4099 100644
--- a/ppr-ui/src/composables/mhrInformation/useMhrInfoValidation.ts
+++ b/ppr-ui/src/composables/mhrInformation/useMhrInfoValidation.ts
@@ -132,6 +132,14 @@ export const useMhrInfoValidation = (validationState: mhrInfoValidationStateIF)
     )
   })
 
+  const isValidExtendTransportPermit = computed((): boolean => {
+    return (
+      (isRoleStaffReg.value ? validationState.isDocumentIdValid : true) &&
+      ((isNotManufacturersLot.value && !isAmendLocationActive.value && !isActiveHomeOutsideBc.value)
+        ? validationState.isTaxCertificateValid : true)
+    )
+  })
+
   /**
    * Scroll to first designated error on Information or Review page
    * @param scrollToTop Force scroll to top of MHR
@@ -170,6 +178,7 @@ export const useMhrInfoValidation = (validationState: mhrInfoValidationStateIF)
     isValidTransferReview,
     isValidTransportPermit,
     isValidTransportPermitReview,
+    isValidExtendTransportPermit,
     scrollToFirstError,
     resetValidationState
   }
diff --git a/ppr-ui/src/composables/mhrInformation/useTransportPermits.ts b/ppr-ui/src/composables/mhrInformation/useTransportPermits.ts
index 71c6335ba..1972eb764 100644
--- a/ppr-ui/src/composables/mhrInformation/useTransportPermits.ts
+++ b/ppr-ui/src/composables/mhrInformation/useTransportPermits.ts
@@ -30,6 +30,8 @@ import { useMhrInformation } from '@/composables'
 const isChangeLocationActive: Ref<boolean> = ref(false)
 const isAmendLocationActive: Ref<boolean> = ref(false)
 const isCancelChangeLocationActive: Ref<boolean> = ref(false)
+const isExtendChangeLocationActive: Ref<boolean> = ref(false)
+
 
 export const useTransportPermits = () => {
   const {
@@ -120,6 +122,11 @@ export const useTransportPermits = () => {
     isCancelChangeLocationActive.value = val
   }
 
+  /** Toggle Extend location change flow **/
+  const setExtendLocationChange = (val: boolean) => {
+    isExtendChangeLocationActive.value = val
+  }
+
   const setLocationChangeType = (locationChangeType: LocationChangeTypes) => {
     setMhrTransportPermitLocationChangeType(locationChangeType)
   }
@@ -265,6 +272,13 @@ export const useTransportPermits = () => {
     // clean up UI only props
     delete payloadData.registrationStatus
 
+    // Modify payload for Extend Transport Permit
+    if (payloadData.locationChangeType === LocationChangeTypes.EXTEND_PERMIT) {
+      payloadData.extension = true
+      payloadData.newLocation = { ...payloadData.previousLocation, ...payloadData.newLocation }
+      delete payloadData.previousLocation
+    }
+
     return payloadData
   }
 
@@ -387,6 +401,7 @@ export const useTransportPermits = () => {
     isChangeLocationActive,
     isAmendLocationActive,
     isCancelChangeLocationActive,
+    isExtendChangeLocationActive,
     isChangeLocationEnabled,
     isAmendChangeLocationEnabled,
     isCancelChangeLocationEnabled,
@@ -404,6 +419,7 @@ export const useTransportPermits = () => {
     setLocationChangeType,
     setAmendLocationChange,
     setCancelLocationChange,
+    setExtendLocationChange,
     getUiLocationType,
     getUiFeeSummaryLocationType,
     populateLocationInfoForSamePark,
diff --git a/ppr-ui/src/enums/registrationTypes.ts b/ppr-ui/src/enums/registrationTypes.ts
index da8b42195..7287dc63a 100644
--- a/ppr-ui/src/enums/registrationTypes.ts
+++ b/ppr-ui/src/enums/registrationTypes.ts
@@ -266,6 +266,7 @@ export enum APIMhrTypes {
   RESIDENTIAL_EXEMPTION = 'EXEMPTION_RES',
   MANUFACTURED_HOME_REGISTRATION = 'MHREG',
   TRANSPORT_PERMIT = 'PERMIT',
+  TRANSPORT_PERMIT_EXTEND = 'PERMIT_EXTEND',
   REGISTRY_STAFF_ADMIN = 'REG_STAFF_ADMIN'
 }
 
diff --git a/ppr-ui/src/enums/transportPermits.ts b/ppr-ui/src/enums/transportPermits.ts
index 22ea85866..bb74ed5ca 100644
--- a/ppr-ui/src/enums/transportPermits.ts
+++ b/ppr-ui/src/enums/transportPermits.ts
@@ -2,5 +2,8 @@ export enum LocationChangeTypes {
   TRANSPORT_PERMIT = 'TRANSPORT_PERMIT',
   TRANSPORT_PERMIT_SAME_PARK = 'TRANSPORT_PERMIT_SAME_PARK',
   TRANSPORT_PERMIT_CANCEL = 'CANCEL_PERMIT',
-  REGISTERED_LOCATION = 'REGISTERED_LOCATION'
+  REGISTERED_LOCATION = 'REGISTERED_LOCATION',
+  EXTEND_PERMIT = 'EXTEND_PERMIT',
+  PERMIT_EXTEND_API = 'PERMIT_EXTEND',
+  CREATE_NEW_PERMIT = 'CREATE_NEW_PERMIT'
 }
diff --git a/ppr-ui/src/resources/mhr-transport-permits/transport-permits.ts b/ppr-ui/src/resources/mhr-transport-permits/transport-permits.ts
index 83f7f7870..8d908cc89 100644
--- a/ppr-ui/src/resources/mhr-transport-permits/transport-permits.ts
+++ b/ppr-ui/src/resources/mhr-transport-permits/transport-permits.ts
@@ -20,5 +20,10 @@ export const locationChangeTypes = [
     type: LocationChangeTypes.TRANSPORT_PERMIT_CANCEL,
     title: 'Cancel Transport Permit',
     feeSummaryTitle: 'Cancel Transport Permit'
+  },
+  {
+    type: LocationChangeTypes.EXTEND_PERMIT,
+    title: 'Transport Permit - Extend',
+    feeSummaryTitle: 'Extend Transport Permit'
   }
 ]
diff --git a/ppr-ui/src/utils/date-helper.ts b/ppr-ui/src/utils/date-helper.ts
index bf1d07f99..a1ddc89de 100644
--- a/ppr-ui/src/utils/date-helper.ts
+++ b/ppr-ui/src/utils/date-helper.ts
@@ -53,6 +53,24 @@ export function convertDate (date: Date|string, includeTime: boolean, includeTz:
   else return moment(date).format('MMMM D, Y') + ` ${datetime}`
 }
 
+/**
+ * Adds a specified number of days to a given date string in ISO 8601 format.
+ *
+ * @param {string} dateString - The original date string in the format 'YYYY-MM-DDTHH:mm:ssZ'.
+ * @param {number} daysToAdd - The number of days to add to the date.
+ * @returns {string} - The updated date string in ISO 8601 format.
+ */
+export const addDaysToDate = (dateString, daysToAdd) => {
+  // Create a new Date object from the input string
+  const date = new Date(dateString)
+
+  // Add the specified number of days
+  date.setDate(date.getDate() + daysToAdd)
+
+  // Return the updated date in the original format (ISO 8601)
+  return date.toISOString()
+}
+
 /**
  * Converts a date string in 'YYYY-MM-DD' format to a long date format, ignoring the timezone.
  *
@@ -61,7 +79,8 @@ export function convertDate (date: Date|string, includeTime: boolean, includeTz:
  * @returns A string representing the date in long format.
  */
 export function convertDateToLongFormat (dateString: string): string {
-  const [year, month, day] = dateString.split('-').map(Number);
+  if (!dateString) return ''
+  const [year, month, day] = dateString?.split('-').map(Number);
   const date = new Date(year, month - 1, day);
   return date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
 }
diff --git a/ppr-ui/src/views/Dashboard.vue b/ppr-ui/src/views/Dashboard.vue
index 81c468ec7..ac7a75478 100644
--- a/ppr-ui/src/views/Dashboard.vue
+++ b/ppr-ui/src/views/Dashboard.vue
@@ -283,6 +283,7 @@ export default defineComponent({
       setSearchResults(null)
       setMhrDraftNumber('')
       useTransportPermits().setLocationChange(false)
+      useTransportPermits().setExtendLocationChange(false)
       onAppReady(props.appReady)
     })
 
diff --git a/ppr-ui/src/views/mhrInformation/MhrInformation.vue b/ppr-ui/src/views/mhrInformation/MhrInformation.vue
index 2c41fb609..53a3a1b46 100644
--- a/ppr-ui/src/views/mhrInformation/MhrInformation.vue
+++ b/ppr-ui/src/views/mhrInformation/MhrInformation.vue
@@ -188,7 +188,8 @@
                 !isTransferDueToDeath &&
                 !isChangeLocationActive &&
                 !isCancelChangeLocationActive &&
-                !isTransferWithoutBillOfSale"
+                !isTransferWithoutBillOfSale &&
+                !isExtendChangeLocationActive"
               class="mt-7 mb-5"
               setMsg="This information must match the information on the bill of sale."
             />
@@ -214,7 +215,7 @@
                 </header>
 
                 <section
-                  v-if="!isChangeLocationActive && !isCancelChangeLocationActive"
+                  v-if="!isChangeLocationActive && !isCancelChangeLocationActive && !isExtendChangeLocationActive"
                   id="owners-review"
                   class="mt-9"
                 >
@@ -226,7 +227,7 @@
                 </section>
 
                 <section
-                  v-if="isChangeLocationActive || isCancelChangeLocationActive"
+                  v-if="isChangeLocationActive || isCancelChangeLocationActive || isExtendChangeLocationActive"
                   id="location-change-review"
                 >
                   <LocationChangeReview />
@@ -245,7 +246,7 @@
                 </section>
 
                 <section
-                  v-if="!isChangeLocationActive && !isCancelChangeLocationActive"
+                  v-if="!isChangeLocationActive && !isCancelChangeLocationActive && !isExtendChangeLocationActive"
                 >
                   <v-divider class="mx-7 ma-0" />
                   <TransferDetailsReview class="py-6 pt-4 px-8" />
@@ -266,7 +267,8 @@
                       : submittingPartyChangeContent"
                     :validate="validateSubmittingParty"
                     :hidePartySearch="isTransportPermitByStaffSbc"
-                    @setStoreProperty="(isChangeLocationActive || isCancelChangeLocationActive)
+                    @setStoreProperty="(isChangeLocationActive || isCancelChangeLocationActive ||
+                      isExtendChangeLocationActive)
                       ? setMhrTransportPermit({ key: 'submittingParty', value: $event })
                       : setMhrAccountSubmittingParty($event)"
                     @isValid="setValidation('isSubmittingPartyValid', $event)"
@@ -300,7 +302,8 @@
                     :validate="!getInfoValidation('isRefNumValid')"
                     data-test-id="attn-ref-number-card"
                     @isAttentionValid="setValidation('isRefNumValid', $event)"
-                    @setStoreProperty="(isChangeLocationActive || isCancelChangeLocationActive)
+                    @setStoreProperty="(isChangeLocationActive || isCancelChangeLocationActive ||
+                      isExtendChangeLocationActive)
                       ? setMhrTransportPermit({ key: 'attentionReference', value: $event })
                       : setMhrTransferAttentionReference($event)"
                   />
@@ -393,6 +396,7 @@
                     @updateLocationType="validate = false"
                     @cancelTransportPermitChanges="handleCancelTransportPermitChanges($event)"
                   />
+
                   <HomeLocationReview
                     v-if="showHomeLocationReview"
                     isTransferReview
@@ -532,12 +536,14 @@
                   isMhrTransfer
                   class="mt-10"
                   :class="{ 'mb-10': !hasUnsavedChanges }"
-                  :validateTransfer="validate && !isChangeLocationActive && !isCancelChangeLocationActive"
+                  :validateTransfer="validate && !isChangeLocationActive && !isCancelChangeLocationActive &&
+                    !isExtendChangeLocationActive"
                   @isValidTransferOwners="setValidation('isValidTransferOwners', $event)"
                 />
 
                 <TransferDetails
-                  v-if="hasUnsavedChanges && !isChangeLocationActive && !isCancelChangeLocationActive"
+                  v-if="hasUnsavedChanges && !isChangeLocationActive && !isCancelChangeLocationActive &&
+                    !isExtendChangeLocationActive"
                   ref="transferDetailsComponent"
                   class="mt-10"
                   :disablePrefill="isFrozenMhrDueToAffidavit"
@@ -562,7 +568,8 @@
             </section>
           </v-col>
           <v-col
-            v-if="showTransferType || isReviewMode || isChangeLocationActive || isCancelChangeLocationActive"
+            v-if="showTransferType || isReviewMode || isChangeLocationActive || isCancelChangeLocationActive ||
+              isExtendChangeLocationActive"
             class="pl-6 pt-5"
             cols="3"
           >
@@ -577,7 +584,7 @@
                 :setShowFeeSummary="true"
                 :setFeeType="feeType"
                 :setErrMsg="transferErrorMsg"
-                :transferType="(isChangeLocationActive || isCancelChangeLocationActive)
+                :transferType="(isChangeLocationActive || isCancelChangeLocationActive || isExtendChangeLocationActive)
                   ? getUiFeeSummaryLocationType(transportPermitLocationType)
                   : getUiTransferType()"
                 :setIsLoading="submitBtnLoading"
@@ -816,6 +823,7 @@ export default defineComponent({
       isValidTransferReview,
       isValidTransportPermit,
       isValidTransportPermitReview,
+      isValidExtendTransportPermit,
       scrollToFirstError,
       resetValidationState
     } = useMhrInfoValidation(getMhrInfoValidation.value)
@@ -842,6 +850,7 @@ export default defineComponent({
       isCancelChangeLocationActive,
       isTransportPermitDisabled,
       isRegisteredLocationChange,
+      isExtendChangeLocationActive,
       isExemptMhrTransportPermitChangesEnabled,
       setLocationChange,
       getUiFeeSummaryLocationType,
@@ -850,7 +859,7 @@ export default defineComponent({
       setLocationChangeType,
       initTransportPermit,
       populateLocationInfoForSamePark,
-      buildAndSubmitTransportPermit
+      buildAndSubmitTransportPermit,
     } = useTransportPermits()
 
     // Refs
@@ -887,7 +896,7 @@ export default defineComponent({
       hasTransactionInProgress: false,
       reviewModeHeader: computed((): string =>
         isCancelChangeLocationActive.value ? 'Location of Home' :
-        isChangeLocationActive.value ? 'Location Change' :
+          (isChangeLocationActive.value || isExtendChangeLocationActive) ? 'Location Change' :
         'Ownership Transfer or Change'
       ),
       isChangeOwnershipBtnDisabled: computed((): boolean => {
@@ -898,7 +907,7 @@ export default defineComponent({
         const isFrozenMhr = isFrozenMhrDueToAffidavit.value || isFrozenMhrDueToUnitNote.value
 
         const isTransportPermitDisabled = isChangeLocationActive.value ||
-          isAmendLocationActive.value || isCancelChangeLocationActive.value
+          isAmendLocationActive.value || isCancelChangeLocationActive.value || isExtendChangeLocationActive.value
 
         const isRoleBasedTransferDisabled = !isRoleStaffReg.value && localState.disableRoleBaseTransfer
 
@@ -921,8 +930,11 @@ export default defineComponent({
         return localState.hasTransactionInProgress || (!isRoleStaffReg.value && isFrozenMhrDueToAffidavit.value)
       }),
       showHomeLocationReview: computed((): boolean => {
-        return ![LocationChangeTypes.TRANSPORT_PERMIT, LocationChangeTypes.REGISTERED_LOCATION]
-          .includes(localState.transportPermitLocationType)
+        return ![
+          LocationChangeTypes.TRANSPORT_PERMIT,
+          LocationChangeTypes.REGISTERED_LOCATION,
+          LocationChangeTypes.EXTEND_PERMIT
+        ].includes(localState.transportPermitLocationType)
       }),
       validateHomeLocationReview: computed((): boolean =>
         localState.validate &&
@@ -934,6 +946,8 @@ export default defineComponent({
           return FeeSummaryTypes.MHR_AMEND_TRANSPORT_PERMIT
         } else if (isCancelChangeLocationActive.value) {
           return FeeSummaryTypes.MHR_TRANSPORT_PERMIT_CANCEL
+        } else if (isExtendChangeLocationActive.value) {
+          return FeeSummaryTypes.MHR_TRANSPORT_PERMIT
         } else {
           return isChangeLocationActive.value ? FeeSummaryTypes.MHR_TRANSPORT_PERMIT : FeeSummaryTypes.MHR_TRANSFER
         }
@@ -985,7 +999,9 @@ export default defineComponent({
 
         if (isChangeLocationActive.value || isCancelChangeLocationActive.value) {
           // transport permit activated
-          isValidReview = localState.isReviewMode ? isValidTransportPermitReview.value : isValidTransportPermit.value
+          isValidReview = localState.isReviewMode
+            ? isValidTransportPermitReview.value
+            : isExtendChangeLocationActive.value ? isValidExtendTransportPermit.value : isValidTransportPermit.value
         } else {
           isValidReview = localState.isReviewMode ? isValidTransferReview.value : isValidTransfer.value
         }
@@ -1167,7 +1183,8 @@ export default defineComponent({
 
         // 1 - Check if any required fields have errors
         const isValidReview: boolean =
-          (isChangeLocationActive.value || isAmendLocationActive.value || isCancelChangeLocationActive.value)
+          (isChangeLocationActive.value || isAmendLocationActive.value || isCancelChangeLocationActive.value ||
+            isExtendChangeLocationActive)
             ? isValidTransportPermitReview.value
             : isValidTransferReview.value
 
@@ -1232,7 +1249,7 @@ export default defineComponent({
         }
 
         // 3b - Submit Transport Permit
-        if (isChangeLocationActive.value) {
+        if (isChangeLocationActive.value || isExtendChangeLocationActive.value) {
           const transportPermitFilingResp: any =
             await buildAndSubmitTransportPermit(getMhrInformation.value.mhrNumber, localState.staffPayment)
 
@@ -1302,7 +1319,7 @@ export default defineComponent({
 
       // If Transfer or Transport Permit is valid, enter review mode
       // For Affidavit Transfers, need to complete affidavit before proceeding
-      if (isValidTransfer.value || isValidTransportPermit.value) {
+      if (isValidTransfer.value || isValidTransportPermit.value || isValidExtendTransportPermit.value) {
         localState.isReviewMode = true
         localState.validate = false
       }
@@ -1611,6 +1628,7 @@ export default defineComponent({
       isValidTransportPermitReview,
       isRegisteredLocationChange,
       isCancelChangeLocationActive,
+      isExtendChangeLocationActive,
       isAmendLocationActive,
       getMhrTransportPermit,
       setMhrTransportPermit,
diff --git a/ppr-ui/src/views/mhrInformation/MhrTransportPermit.vue b/ppr-ui/src/views/mhrInformation/MhrTransportPermit.vue
index 82bdc560b..6f8546b2b 100644
--- a/ppr-ui/src/views/mhrInformation/MhrTransportPermit.vue
+++ b/ppr-ui/src/views/mhrInformation/MhrTransportPermit.vue
@@ -29,7 +29,8 @@
         >
           <!-- Active Transport Permit Actions -->
           <v-btn
-            v-if="hasActiveTransportPermit && isAmendChangeLocationEnabled && !isCancelChangeLocationActive"
+            v-if="hasActiveTransportPermit && isAmendChangeLocationEnabled &&
+              !isCancelChangeLocationActive && !isExtendChangeLocationActive"
             id="home-location-change-btn"
             variant="plain"
             color="primary"
@@ -70,6 +71,24 @@
 
                 <!-- Permit actions drop down list -->
                 <v-list>
+                  <!-- Extend Permit -->
+                  <v-list-item
+                    v-if="!state.disableTransportPermitExtension"
+                    data-test-id="extend-transport-permit-btn"
+                    @click="toggleExtendTransportPermit(true)"
+                  >
+                    <v-list-item-subtitle
+                      class="pa-0"
+                    >
+                      <img
+                        alt="extend-icon"
+                        class="icon-small"
+                        src="@/assets/svgs/IconExtend.svg"
+                      >
+                      <span class="extend-btn-text ml-1">Extend Transport Permit</span>
+                    </v-list-item-subtitle>
+                  </v-list-item>
+
                   <v-list-item
                     data-test-id="cancel-transport-permit-btn"
                     :disabled="!getTransportPermitChangeAllowed"
@@ -105,6 +124,22 @@
             </v-icon> Undo Cancellation
           </v-btn>
 
+          <v-btn
+            v-else-if="isExtendChangeLocationActive"
+            variant="plain"
+            color="primary"
+            data-test-id="undo-transport-permit-extend-btn"
+            :ripple="false"
+            @click="toggleExtendTransportPermit(false)"
+          >
+            <v-icon
+              size="small"
+              class="mr-2"
+            >
+              mdi-undo
+            </v-icon> Cancel Transport Permit Extension
+          </v-btn>
+
           <!-- Default Transport Permit Actions -->
           <v-btn
             v-else-if="!isExemptMhr && !hasActiveTransportPermit && !isCancelledMhr"
@@ -150,16 +185,23 @@
     >
       <template v-if="hasActiveTransportPermit">
         <p role="alert">
-          <b>Note</b>: A transport permit has been issued for this home. The transport
-          permit location can be only amended or cancelled by the qualified supplier who issued the permit,
-          Service BC Staff, or BC Registries staff.
+          A transport permit has already been issued for this home. The transport permit can only be modified by the
+          issuing qualified supplier or BC Registries staff.
         </p>
         <p
+          v-if="!isExtendChangeLocationActive"
           data-test-id="cancel-permit-info"
           class="my-6"
         >
           Cancelling the transport permit will restore the previous registered location for this home.
         </p>
+        <p
+          v-else
+          data-test-id="extend-permit-info"
+          class="my-6"
+        >
+          <b>Note</b>: The expiry date will be extended by 30 days from the date this extension is submitted.
+        </p>
       </template>
       <template v-else>
         <p>
@@ -199,7 +241,7 @@
 
     <!-- Help Content -->
     <SimpleHelpToggle
-      v-if="isChangeLocationActive || isCancelChangeLocationActive"
+      v-if="isChangeLocationActive || isCancelChangeLocationActive || isExtendChangeLocationActive"
       class="mt-1"
       toggleButtonTitle="Help with Transport Permits"
     >
@@ -272,7 +314,7 @@
 
     <!-- Document ID -->
     <section
-      v-if="isRoleStaffReg && (isChangeLocationActive || isCancelChangeLocationActive)"
+      v-if="isRoleStaffReg && (isChangeLocationActive || isCancelChangeLocationActive || isExtendChangeLocationActive)"
       id="document-id-section"
       class="mt-7"
     >
@@ -285,6 +327,13 @@
       />
     </section>
 
+    <HomeLocationReview
+      v-if="isExtendChangeLocationActive"
+      isTransferReview
+      :hideDefaultHeader="true"
+      :isPadEditable="false"
+    />
+
     <div
       v-if="isCancelChangeLocationActive"
       data-test-id="verify-location-details"
@@ -298,7 +347,7 @@
 
     <!-- Location Change Type -->
     <section
-      v-if="isChangeLocationActive"
+      v-if="isChangeLocationActive || isExtendChangeLocationActive"
       id="location-change-type-section"
       class="mt-5"
     >
@@ -315,10 +364,11 @@
 import { DocumentId, SimpleHelpToggle } from "@/components/common"
 import { LocationChange } from "@/components/mhrTransportPermit"
 import { useMhrInformation, useMhrInfoValidation, useTransportPermits } from "@/composables/mhrInformation"
-import { LocationChangeTypes } from "@/enums"
+import { APIMhrTypes, LocationChangeTypes } from '@/enums'
 import { useStore } from "@/store/store"
 import { storeToRefs } from "pinia"
 import { computed, reactive } from "vue"
+import { HomeLocationReview } from '@/components/mhrRegistration'
 
 withDefaults(defineProps<{
   disable: boolean,
@@ -332,10 +382,11 @@ withDefaults(defineProps<{
 
 const emit = defineEmits(['updateLocationType', 'cancelTransportPermitChanges'])
 
-const { setMhrTransportPermit } = useStore()
+const { setMhrTransportPermit, setMhrTransportPermitLocationChangeType } = useStore()
 
 const {
   isRoleStaffReg,
+  getMhrInformation,
   getMhrInfoValidation,
   getMhrTransportPermit,
   getTransportPermitChangeAllowed
@@ -343,7 +394,7 @@ const {
 const { hasActiveTransportPermit, isChangeLocationActive, isAmendLocationActive, isCancelChangeLocationActive,
   setLocationChange, setAmendLocationChange, prefillTransportPermit, setLocationChangeType,
   isActivePermitWithinSamePark, isAmendChangeLocationEnabled, isCancelChangeLocationEnabled,
-  setCancelLocationChange
+  setCancelLocationChange, setExtendLocationChange, isExtendChangeLocationActive
  } = useTransportPermits()
 const { isExemptMhr, isCancelledMhr } = useMhrInformation()
 
@@ -352,7 +403,13 @@ const {
 } = useMhrInfoValidation(getMhrInfoValidation.value)
 
 const state = reactive({
-  transportPermitDocumentId: computed(() => getMhrTransportPermit.value.documentId)
+  transportPermitDocumentId: computed(() => getMhrTransportPermit.value.documentId),
+  disableTransportPermitExtension: computed(() => {
+    const hasPreviousExtend = getMhrInformation.value.changes.some(reg =>
+      reg.registrationType === APIMhrTypes.TRANSPORT_PERMIT_EXTEND
+    )
+    return !isRoleStaffReg.value && hasPreviousExtend
+  })
 })
 
 const toggleLocationChange = () => {
@@ -397,6 +454,11 @@ const toggleCancelTransportPermit = (val: boolean) => {
   }
 }
 
+const toggleExtendTransportPermit = (val: boolean) => {
+  setExtendLocationChange(val)
+  setMhrTransportPermitLocationChangeType(val ? LocationChangeTypes.EXTEND_PERMIT : null)
+}
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/ppr-ui/tests/unit/MhrTransportPermit.spec.ts b/ppr-ui/tests/unit/MhrTransportPermit.spec.ts
index d53e132b2..5a07780db 100644
--- a/ppr-ui/tests/unit/MhrTransportPermit.spec.ts
+++ b/ppr-ui/tests/unit/MhrTransportPermit.spec.ts
@@ -117,7 +117,7 @@ describe('MhrTransportPermit', () => {
     await nextTick()
 
     const locationChangeDropdown = wrapper.findComponent(LocationChange).findComponent('.v-select')
-    expect(locationChangeDropdown.vm.items.length).toBe(2)
+    expect(locationChangeDropdown.vm.items.length).toBe(3)
   })
 
   it('should render different location change options', async () => {
@@ -127,7 +127,7 @@ describe('MhrTransportPermit', () => {
     const locationChangeDropdown = locationChange.findComponent('.v-select')
 
     expect(locationChangeDropdown.exists()).toBe(true)
-    expect(locationChangeDropdown.vm.items.length).toBe(3)
+    expect(locationChangeDropdown.vm.items.length).toBe(4)
 
     // select transport permit
     locationChange.vm.selectLocationType(LocationChangeTypes.TRANSPORT_PERMIT)
@@ -609,7 +609,7 @@ describe('Mhr Information Transport Permit', async () => {
     await nextTick()
 
     const locationChangeDropdown = locationChange.findComponent('.v-select')
-    expect(locationChangeDropdown.vm.items.length).toBe(2)
+    expect(locationChangeDropdown.vm.items.length).toBe(3)
 
     expect(wrapper.findComponent(DocumentId).exists()).toBe(false)
     expect(locationChange.findComponent(HomeLocationType).exists()).toBe(true)