From 9ddea28f2afd07e530d4ce2f3adf56bb22f1a050 Mon Sep 17 00:00:00 2001
From: CameronEYDS <53542131+cameron-eyds@users.noreply.github.com>
Date: Tue, 15 Oct 2024 13:04:15 -0700
Subject: [PATCH] Create New Permit UXA (#2039)

* Create Permit UXA and Location Change Options Fix

* Update svg path name
---
 ppr-ui/package-lock.json                      |  4 ++--
 ppr-ui/package.json                           |  2 +-
 ppr-ui/src/assets/svgs/IconExtend.svg         | 11 ---------
 ppr-ui/src/assets/svgs/iconExtend.svg         | 23 +++++++++++++++++++
 ppr-ui/src/assets/svgs/iconNewPermit.svg      | 21 +++++++++++++++++
 .../mhrTransportPermit/LocationChange.vue     | 13 +++++++----
 .../mhrInformation/MhrTransportPermit.vue     | 10 ++++----
 ppr-ui/tests/unit/MhrTransportPermit.spec.ts  |  6 ++---
 8 files changed, 63 insertions(+), 27 deletions(-)
 delete mode 100644 ppr-ui/src/assets/svgs/IconExtend.svg
 create mode 100644 ppr-ui/src/assets/svgs/iconExtend.svg
 create mode 100644 ppr-ui/src/assets/svgs/iconNewPermit.svg

diff --git a/ppr-ui/package-lock.json b/ppr-ui/package-lock.json
index f6decdffd..d90c14595 100644
--- a/ppr-ui/package-lock.json
+++ b/ppr-ui/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "ppr-ui",
-  "version": "3.2.63",
+  "version": "3.2.64",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ppr-ui",
-      "version": "3.2.63",
+      "version": "3.2.64",
       "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 a83d3c1c1..3022fb8e5 100644
--- a/ppr-ui/package.json
+++ b/ppr-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ppr-ui",
-  "version": "3.2.63",
+  "version": "3.2.64",
   "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
deleted file mode 100644
index 6b887e6ac..000000000
--- a/ppr-ui/src/assets/svgs/IconExtend.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg viewBox="0 0 18 18" 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/iconExtend.svg b/ppr-ui/src/assets/svgs/iconExtend.svg
new file mode 100644
index 000000000..53b7ef742
--- /dev/null
+++ b/ppr-ui/src/assets/svgs/iconExtend.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 17 17">
+  <defs>
+    <style>
+      .cls-1 {
+        fill-rule: evenodd;
+      }
+
+      .cls-1, .cls-2 {
+        fill: #1669bb;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.7.1, SVG Export Plug-In . SVG Version: 1.2.0 Build 142)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <path class="cls-1" d="M9.6,13.1H1.7v-7.2h11.7v3.5h1.7V3.4c0-.9-.8-1.7-1.7-1.7h-.8V0h-1.7v1.7h-6.7V0h-1.7v1.7h-.8C.8,1.7,0,2.5,0,3.4v9.7c0,.4.2.9.5,1.2.3.3.7.5,1.2.5h7.9v-1.7Z"/>
+        <polygon class="cls-2" points="15.1 13.3 15.1 11.3 13.4 11.3 13.4 13.3 11.4 13.3 11.4 15 13.4 15 13.4 17 15.1 17 15.1 15 17.1 15 17.1 13.3 15.1 13.3"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/ppr-ui/src/assets/svgs/iconNewPermit.svg b/ppr-ui/src/assets/svgs/iconNewPermit.svg
new file mode 100644
index 000000000..36c8b310c
--- /dev/null
+++ b/ppr-ui/src/assets/svgs/iconNewPermit.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 17 17">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #1669bb;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.7.1, SVG Export Plug-In . SVG Version: 1.2.0 Build 142)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <rect class="cls-1" x="4.9" y="6.9" width="5.5" height="1.1"/>
+        <path class="cls-1" d="M3,1.6h5.5v3.9h3.9v3.9h1.6v-4.7L9.3,0H3C2.1,0,1.4.7,1.4,1.6v11.7c0,.9.7,1.6,1.6,1.6h5.5v-1.6H3V1.6Z"/>
+        <path class="cls-1" d="M13.8,13.3v-2.3h-1.3v2.3h-2.3v1.3h2.3v2.3h1.3v-2.3h2.3v-1.3h-2.3ZM15.9,14.4h0v-.8h0v.8Z"/>
+        <rect class="cls-1" x="4.9" y="9.8" width="5.5" height="1.1"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/ppr-ui/src/components/mhrTransportPermit/LocationChange.vue b/ppr-ui/src/components/mhrTransportPermit/LocationChange.vue
index 4962e7dda..51e24622f 100644
--- a/ppr-ui/src/components/mhrTransportPermit/LocationChange.vue
+++ b/ppr-ui/src/components/mhrTransportPermit/LocationChange.vue
@@ -228,11 +228,13 @@ const props = defineProps<{
 
 const emit = defineEmits(['updateLocationType'])
 
-const { isRoleQualifiedSupplier, isRoleStaffSbc, setMhrTransportPermit, setMhrTransportPermitNewLocation,
+const { setMhrTransportPermit, setMhrTransportPermitNewLocation,
   setMhrTransportPermitNewCivicAddress, setUnsavedChanges, setMhrStatusType } = useStore()
 
 const {
   hasUnsavedChanges,
+  isRoleStaffSbc,
+  isRoleQualifiedSupplier,
   getMhrTransportPermit,
   getMhrTransportPermitHomeLocation,
   getMhrOriginalTransportPermit,
@@ -274,9 +276,9 @@ const state = reactive({
   prevLocationChangeType: null,
   locationChangeFromValid: false,
   roleBasedLocationChangeTypes: computed(() =>
-    (isRoleQualifiedSupplier || isRoleStaffSbc)
-      ? locationChangeTypes.slice(0, -2) // remove Registered Location Change and Cancel Permit from the list
-      : locationChangeTypes.slice(0, -1)), // remove Cancel Permit from the list
+    (isRoleQualifiedSupplier.value || isRoleStaffSbc.value)
+      ? locationChangeTypes.slice(0, -3) // remove Registered Location Change and Cancel Permit and Extend from the list
+      : locationChangeTypes.slice(0, -2)), // remove Cancel Permit and Extend from the list
   isTransportPermitType: computed(() =>
     getMhrTransportPermit.value.locationChangeType === LocationChangeTypes.TRANSPORT_PERMIT),
   isNotManufacturersLot: computed(() => getMhrRegistrationLocation.value.locationType !== HomeLocationTypes.LOT),
@@ -287,7 +289,8 @@ const state = reactive({
     (props.validate && !isValueAmended('newLocation.address') && !hasAmendmentChanges.value)),
   isLandOwnershipInvalid: computed(() => (props.validate && !getInfoValidation('isHomeLandOwnershipValid')) ||
     (props.validate && !isValueAmended('ownLand') && !hasAmendmentChanges.value)),
-  isRoleQSorSBCAmend: computed(() => (isRoleQualifiedSupplier || isRoleStaffSbc) && isAmendLocationActive.value),
+  isRoleQSorSBCAmend: computed(() => (isRoleQualifiedSupplier.value || isRoleStaffSbc.value) &&
+    isAmendLocationActive.value),
   showChangeTransportPermitLocationTypeDialog: false,
   amendedBadgeHomeLocationType: {
     action: 'AMENDED',
diff --git a/ppr-ui/src/views/mhrInformation/MhrTransportPermit.vue b/ppr-ui/src/views/mhrInformation/MhrTransportPermit.vue
index d75a1b727..73044b5f7 100644
--- a/ppr-ui/src/views/mhrInformation/MhrTransportPermit.vue
+++ b/ppr-ui/src/views/mhrInformation/MhrTransportPermit.vue
@@ -7,8 +7,8 @@
       @proceed="handleConfirmNewPermit"
     >
       <template #content>
-        <p class="px-0">
-          By applying for a new transport permit you are confirming that the active Transport permit
+        <p class="px-0 mr-n11">
+          By applying for a new transport permit you are confirming that the active transport permit
           {{ getMhrInformation.permitRegistrationNumber }} issued on
           {{ pacificDate(getMhrInformation.permitDateTime, true) }} has been completed and will render as no longer
           active.
@@ -78,7 +78,7 @@
             <img
               alt="extend-icon"
               class="icon-small"
-              src="@/assets/svgs/NewPermit.svg"
+              src="@/assets/svgs/iconNewPermit.svg"
             >
             Create New Transport Permit
           </v-btn>
@@ -140,7 +140,7 @@
                         <img
                           alt="extend-icon"
                           class="icon-small"
-                          src="@/assets/svgs/IconExtend.svg"
+                          src="@/assets/svgs/iconExtend.svg"
                         >
                       </span>
                       <span class="extend-btn-text ml-1">Extend Transport Permit</span>
@@ -160,7 +160,7 @@
                         <img
                           alt="extend-icon"
                           class="icon-small"
-                          src="@/assets/svgs/NewPermit.svg"
+                          src="@/assets/svgs/iconNewPermit.svg"
                         >
                       </span>
                       <span class="extend-btn-text ml-1">Create New Transport Permit</span>
diff --git a/ppr-ui/tests/unit/MhrTransportPermit.spec.ts b/ppr-ui/tests/unit/MhrTransportPermit.spec.ts
index 5a07780db..d53e132b2 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(3)
+    expect(locationChangeDropdown.vm.items.length).toBe(2)
   })
 
   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(4)
+    expect(locationChangeDropdown.vm.items.length).toBe(3)
 
     // 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(3)
+    expect(locationChangeDropdown.vm.items.length).toBe(2)
 
     expect(wrapper.findComponent(DocumentId).exists()).toBe(false)
     expect(locationChange.findComponent(HomeLocationType).exists()).toBe(true)