From 28c5618cae7d405354257e1e5b35b54858ee8c6d Mon Sep 17 00:00:00 2001
From: CameronEYDS <53542131+cameron-eyds@users.noreply.github.com>
Date: Tue, 21 May 2024 15:24:28 -0700
Subject: [PATCH] SAN Notice/Orders: Edit/Remove (#1886)

* AddRemove Notice/Orders

* Version bump and test fix

* styling fix

* Unit test update

* hide show label swap
---
 .../AddEditCourtOrder.vue                     |  13 +-
 .../CourtCommissionOrderReview.vue            | 150 ++++-----
 .../securities-act-notices/NoticePanel.vue    | 299 ++++++++++++++----
 .../SecuritiesActNotices.vue                  |   2 +-
 .../SecuritiesActNoticesPanels.vue            |  17 +-
 .../dialogOptions/confirmationDialogs.ts      |   7 +
 .../unit/SecuritiesActNoticesPanels.spec.ts   |  31 ++
 7 files changed, 373 insertions(+), 146 deletions(-)

diff --git a/ppr-ui/src/components/registration/securities-act-notices/AddEditCourtOrder.vue b/ppr-ui/src/components/registration/securities-act-notices/AddEditCourtOrder.vue
index acf57c0d4..144ad7904 100644
--- a/ppr-ui/src/components/registration/securities-act-notices/AddEditCourtOrder.vue
+++ b/ppr-ui/src/components/registration/securities-act-notices/AddEditCourtOrder.vue
@@ -166,7 +166,7 @@ const props = withDefaults(defineProps<{
 /** Local Properties **/
 const isValidCourtOrderForm = ref(false)
 const validateAddEditCourtOrder = ref(false)
-const courtOrderData: Ref<CourtOrderIF> = ref(props.courtOrderProp || {
+const courtOrderData: Ref<CourtOrderIF> = ref({
   courtOrder: true,
   courtName: '',
   courtRegistry: '',
@@ -175,7 +175,7 @@ const courtOrderData: Ref<CourtOrderIF> = ref(props.courtOrderProp || {
   effectOfOrder: ''
 })
 const addEditLabel = ref(computed(() => props.isEditing ? 'Edit' : 'Add'))
-const isFormValid = ref(computed(() => isValidCourtOrderForm.value && !!courtOrderData.value.orderDate))
+const isFormValid = computed(() => isValidCourtOrderForm.value && !!courtOrderData.value.orderDate)
 
 /** Form Rules **/
 const nameOrRegistryRules = customRules(
@@ -198,10 +198,13 @@ const submitAddEditCourtOrder = async () => {
     emits('done', courtOrderData.value)
   }
 }
-
-watch(() => isFormValid.value,  () => {
-  emits('isValid', !validateAddEditCourtOrder.value || isFormValid.value)
+watch(() => validateAddEditCourtOrder.value,  (val: boolean) => {
+  if (val) emits('isValid', isFormValid.value)
 })
+watch(() => props.isEditing,  (val: boolean) => {
+  if (val) courtOrderData.value = { ...props.courtOrderProp }
+}, { immediate: true })
+
 </script>
 <style lang="scss" scoped>
 @import '@/assets/styles/theme';
diff --git a/ppr-ui/src/components/registration/securities-act-notices/CourtCommissionOrderReview.vue b/ppr-ui/src/components/registration/securities-act-notices/CourtCommissionOrderReview.vue
index 6e95a3c44..f0b77158e 100644
--- a/ppr-ui/src/components/registration/securities-act-notices/CourtCommissionOrderReview.vue
+++ b/ppr-ui/src/components/registration/securities-act-notices/CourtCommissionOrderReview.vue
@@ -1,76 +1,84 @@
 <template>
-  <v-row
-    id="court-commission-order-review"
-    class="pa-4"
-    noGuttters
-  >
-    <v-col
-      cols="12"
-      class="py-0"
+  <v-expand-transition>
+    <v-row
+      id="court-commission-order-review"
+      class="pa-4"
+      noGuttters
     >
-      <h4>{{ courtCommissionLabel }}</h4>
-    </v-col>
-    <v-col
-      cols="3"
-      class="pt-1 pb-0 mb-0"
-    >
-      <h4>Court Name</h4>
-    </v-col>
-    <v-col
-      cols="9"
-      class="pt-1 pb-0 mb-0"
-    >
-      <p>{{ order.courtName }}</p>
-    </v-col>
-    <v-col
-      cols="3"
-      class="pt-1 pb-0 mb-0"
-    >
-      <h4>Court Registry</h4>
-    </v-col>
-    <v-col
-      cols="9"
-      class="pt-1 pb-0 mb-0"
-    >
-      <p>{{ order.courtRegistry }}</p>
-    </v-col>
-    <v-col
-      cols="3"
-      class="pt-1 pb-0 mb-0"
-    >
-      <h4>Court File Number</h4>
-    </v-col>
-    <v-col
-      cols="9"
-      class="pt-1 pb-0 mb-0"
-    >
-      <p>{{ order.fileNumber }}</p>
-    </v-col>
-    <v-col
-      cols="3"
-      class="pt-1 pb-0 mb-0"
-    >
-      <h4>Date of Order</h4>
-    </v-col>
-    <v-col
-      cols="9"
-      class="pt-1 pb-0 mb-0"
-    >
-      <p>{{ yyyyMmDdToPacificDate(order.orderDate, true) }}</p>
-    </v-col>
-    <v-col
-      cols="3"
-      class="pt-1 pb-0 mb-0"
-    >
-      <h4>Effect of Order</h4>
-    </v-col>
-    <v-col
-      cols="9"
-      class="pt-1 pb-0 mb-0"
-    >
-      <p>{{ order.effectOfOrder || '(Not Entered)' }}</p>
-    </v-col>
-  </v-row>
+      <v-col
+        cols="3"
+        class="py-0"
+      >
+        <h4>{{ courtCommissionLabel }}</h4>
+      </v-col>
+      <v-col
+        cols="9"
+        class="py-0 px-0 mx-0 mt-n1"
+      >
+        <slot name="actions" />
+      </v-col>
+      <v-col
+        cols="3"
+        class="pt-1 pb-0 mb-0"
+      >
+        <h4>Court Name</h4>
+      </v-col>
+      <v-col
+        cols="9"
+        class="pt-1 pb-0 mb-0"
+      >
+        <p>{{ order.courtName }}</p>
+      </v-col>
+      <v-col
+        cols="3"
+        class="pt-1 pb-0 mb-0"
+      >
+        <h4>Court Registry</h4>
+      </v-col>
+      <v-col
+        cols="9"
+        class="pt-1 pb-0 mb-0"
+      >
+        <p>{{ order.courtRegistry }}</p>
+      </v-col>
+      <v-col
+        cols="3"
+        class="pt-1 pb-0 mb-0"
+      >
+        <h4>Court File Number</h4>
+      </v-col>
+      <v-col
+        cols="9"
+        class="pt-1 pb-0 mb-0"
+      >
+        <p>{{ order.fileNumber }}</p>
+      </v-col>
+      <v-col
+        cols="3"
+        class="pt-1 pb-0 mb-0"
+      >
+        <h4>Date of Order</h4>
+      </v-col>
+      <v-col
+        cols="9"
+        class="pt-1 pb-0 mb-0"
+      >
+        <p>{{ yyyyMmDdToPacificDate(order.orderDate, true) }}</p>
+      </v-col>
+      <v-col
+        cols="3"
+        class="pt-1 pb-0 mb-0"
+      >
+        <h4>Effect of Order</h4>
+      </v-col>
+      <v-col
+        cols="9"
+        class="pt-1 pb-0 mb-0"
+      >
+        <p>{{ order.effectOfOrder || '(Not Entered)' }}</p>
+      </v-col>
+    </v-row>
+  </v-expand-transition>
 </template>
 
 <script setup lang="ts">
diff --git a/ppr-ui/src/components/registration/securities-act-notices/NoticePanel.vue b/ppr-ui/src/components/registration/securities-act-notices/NoticePanel.vue
index 45d0054ab..abc0f1e40 100644
--- a/ppr-ui/src/components/registration/securities-act-notices/NoticePanel.vue
+++ b/ppr-ui/src/components/registration/securities-act-notices/NoticePanel.vue
@@ -1,34 +1,66 @@
 <template>
   <v-expansion-panel
     class="notice-panel pb-4"
-    :class="{ 'border-error-left' : isActivePanel && (addCourtOrder && !isValidCourtOrder) }"
+    :class="{ 'border-error-left' : isActivePanel && ((addCourtOrder || editCourtOrder) && !isValidCourtOrder) }"
   >
+    <!-- Remove Notice Dialog -->
+    <BaseDialog
+      id="removeNoticeDialog"
+      setAttach="#securities-act-notices"
+      :setDisplay="showRemoveNoticeDialog"
+      :setOptions="confirmRemoveNoticeDialog"
+      @proceed="removeNotice"
+    />
+
+    <!-- Default Notice Title Content -->
     <v-expansion-panel-title
+      v-if="!(isActivePanel && editNotice)"
       disableIconRotate
       :disabled="true"
     >
-      <v-row
-        noGutters
-        class="py-3"
-      >
-        <v-col cols="12">
-          <h3> {{ saNoticeTypeMapping[notice.securitiesActNoticeType] }} </h3>
-        </v-col>
-        <v-col cols="12">
-          <p class="fs-14">
-            Effective Date: {{ yyyyMmDdToPacificDate(notice.effectiveDate, true) || '(Not Entered)' }}
-          </p>
-        </v-col>
-      </v-row>
+      <v-expand-transition>
+        <v-row
+          noGutters
+          class="py-3"
+        >
+          <v-col
+            cols="12"
+            class="d-inline-flex"
+          >
+            <h3 class="notice-type-text">
+              {{ saNoticeTypeMapping[notice.securitiesActNoticeType] }}
+            </h3>
+            <v-btn
+              v-if="notice.securitiesActOrders?.length"
+              class="hide-show-orders-btn ml-n2"
+              variant="plain"
+              color="primary"
+              :ripple="false"
+              :disabled="disableActions"
+              @click="showOrders = !showOrders"
+            >
+              <span class="fs-14">
+                <v-icon size="20">{{ showOrders ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
+                {{ showOrders ? 'Hide Orders' : 'Show Orders' }} ({{ notice.securitiesActOrders?.length }})
+              </span>
+            </v-btn>
+          </v-col>
+          <v-col cols="12">
+            <p class="effective-date-text fs-14">
+              Effective Date: {{ yyyyMmDdToPacificDate(notice.effectiveDate, true) || '(Not Entered)' }}
+            </p>
+          </v-col>
+        </v-row>
+      </v-expand-transition>
 
       <!-- Custom Panel Actions -->
       <template #actions>
-        <span class="security-notice-header-action mt-n4 mr-n2">
+        <span class="security-notice-header-action mt-n4">
           <v-btn
-            class="security-notice-menu-btn px-0"
+            class="security-notice-btn px-0"
             variant="plain"
             color="primary"
-            :disabled="isActivePanel"
+            :disabled="disableActions"
             :ripple="false"
             @click="toggleNoticeForm('editNotice')"
           >
@@ -44,13 +76,14 @@
           >
             <template #activator="{ props, isActive }">
               <v-btn
-                class="security-notice-menu-btn px-0"
+                id="security-notice-menu-btn"
+                class="px-0"
                 variant="plain"
                 color="primary"
                 v-bind="props"
                 minWidth="10"
                 width="45"
-                :disabled="isActivePanel"
+                :disabled="disableActions"
                 :ripple="false"
               >
                 <v-icon
@@ -78,7 +111,7 @@
               </v-list-item>
 
               <v-list-item
-                :data-test-id="`security-notice-add-sco`"
+                :data-test-id="`security-notice-add-comm`"
                 @click="toggleNoticeForm('addCommissionOrder')"
               >
                 <v-list-item-subtitle class="text-left">
@@ -91,8 +124,8 @@
               </v-list-item>
 
               <v-list-item
-                :data-test-id="`security-notice-add-co`"
-                @click="removeNotice"
+                :data-test-id="`security-notice-remove`"
+                @click="removeOrNotify"
               >
                 <v-list-item-subtitle class="text-left">
                   <v-icon
@@ -109,52 +142,133 @@
       </template>
     </v-expansion-panel-title>
 
+    <!-- Add/Edit Notice/Order Content-->
     <v-expansion-panel-text>
-      <v-divider class="ml-0 mt-n2 mb-4" />
-      <!-- Edit Notice Content-->
       <AddEditNotice
         v-if="editNotice"
         class="px-0 mx-0"
         isEditing
         :notice="notice"
-        @cancel="togglePanel"
+        @cancel="togglePanel(true)"
         @done="handleEditNotice"
       />
 
       <!-- Add Court Order -->
-      <AddEditCourtOrder
-        v-else-if="addCourtOrder"
-        class="px-0 mx-0"
-        @isValid="isValidCourtOrder = $event"
-        @cancel="togglePanel"
-        @done="handleAddEditCourtOrder"
-      />
+      <template v-else-if="addCourtOrder">
+        <v-divider class="ml-0 mt-n2 mb-4" />
+        <AddEditCourtOrder
+          class="px-0 mx-0"
+          @isValid="isValidCourtOrder = $event"
+          @cancel="togglePanel(true)"
+          @done="handleAddEditCourtOrder"
+        />
+      </template>
 
-      <!-- Add Commission Order -->
-      <AddEditCommissionOrder
-        v-else-if="addCommissionOrder"
-        @click="toggleNoticeForm('addCommissionOrder')"
-      />
+      <template v-else-if="addCommissionOrder">
+        <v-divider class="ml-0 mt-n2 mb-4" />
+        <!-- Add Commission Order -->
+        <AddEditCommissionOrder
+          @click="toggleNoticeForm('addCommissionOrder')"
+        />
+      </template>
     </v-expansion-panel-text>
 
     <!-- Order Review Content -->
-    <v-expansion-panel-title
-      v-for="(order, index) in notice.securitiesActOrders"
-      :key="index"
-      class="py-4 px-7"
-      disabled
-      hideActions
-    >
-      <CourtCommissionOrderReview
-        class="rounded-all"
-        :order="order"
-      />
-    </v-expansion-panel-title>
+    <template v-if="showOrders">
+      <v-expansion-panel-title
+        v-for="(order, index) in notice.securitiesActOrders"
+        :key="index"
+        class="py-4 px-7 mt-n1"
+        disabled
+        hideActions
+      >
+        <div class="order-content">
+          <!-- Inline Court Order Edit -->
+          <template v-if="editOrderIndex === index">
+            <AddEditCourtOrder
+              class="px-0 mx-0"
+              isEditing
+              :courtOrderProp="notice.securitiesActOrders[editOrderIndex]"
+              @isValid="isValidCourtOrder = $event"
+              @cancel="togglePanel(true)"
+              @done="handleAddEditCourtOrder"
+            />
+          </template>
+
+          <!-- Order Review Components -->
+          <CourtCommissionOrderReview
+            v-else-if="editOrderIndex !== index"
+            class="rounded-all"
+            :order="order"
+          >
+            <template #actions>
+              <span class="float-right mr-n2">
+                <v-btn
+                  class="security-order-menu-btn px-0"
+                  variant="plain"
+                  color="primary"
+                  :disabled="disableActions"
+                  :ripple="false"
+                  @click="toggleNoticeForm('editOrder', index)"
+                >
+                  <span class="pr-4">
+                    <v-icon size="small">mdi-pencil</v-icon>
+                    Edit Order
+                  </span>
+                  <v-divider vertical />
+                </v-btn>
+                <v-menu
+                  location="bottom right"
+                  class="security-order-menu"
+                >
+                  <template #activator="{ props, isActive }">
+                    <v-btn
+                      class="px-0"
+                      variant="plain"
+                      color="primary"
+                      v-bind="props"
+                      minWidth="10"
+                      width="45"
+                      :disabled="disableActions"
+                      :ripple="false"
+                    >
+                      <v-icon
+                        class="menu-drop-down-icon"
+                        color="primary"
+                      >
+                        {{ isActive ? 'mdi-menu-up' : 'mdi-menu-down' }}
+                      </v-icon>
+                    </v-btn>
+                  </template>
+
+                  <!-- Drop down list -->
+                  <v-list>
+                    <v-list-item
+                      :data-test-id="'security-order-remove'"
+                      @click="removeOrder(noticeIndex, index)"
+                    >
+                      <v-list-item-subtitle class="text-left">
+                        <v-icon
+                          color="primary"
+                          size="1.125rem"
+                        >mdi-delete</v-icon>
+                        Remove Order
+                      </v-list-item-subtitle>
+                    </v-list-item>
+
+                  </v-list>
+                </v-menu>
+              </span>
+            </template>
+          </CourtCommissionOrderReview>
+        </div>
+      </v-expansion-panel-title>
+    </template>
   </v-expansion-panel>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { nextTick, ref } from 'vue'
 import { AddEditSaNoticeIF, CourtOrderIF } from '@/interfaces'
 import { saNoticeTypeMapping } from '@/enums'
 import { yyyyMmDdToPacificDate } from '@/utils/date-helper'
@@ -166,6 +280,8 @@ import {
 } from '@/components/registration'
 import { useStore } from '@/store/store'
 import { storeToRefs } from 'pinia'
+import { confirmRemoveNoticeDialog } from '@/resources/dialogOptions'
+import { BaseDialog } from '@/components/dialogs'
 
 /** Composables **/
 const { setSecuritiesActNotices } = useStore()
@@ -180,49 +296,87 @@ const emits = defineEmits<{
 const props = withDefaults(defineProps<{
   notice: AddEditSaNoticeIF,
   noticeIndex: number,
-  isActivePanel: boolean
+  isActivePanel: boolean,
+  disableActions?: boolean
 }>(), {
   notice: null,
   noticeIndex: null,
-  isActivePanel: false
+  isActivePanel: false,
+  disableActions: false
 })
 
 /** Local Properties **/
 const editNotice = ref(false)
 const addCourtOrder = ref(false)
+const editCourtOrder = ref(false)
+const editOrderIndex = ref(-1)
 const addCommissionOrder = ref(false)
-const isValidCourtOrder = ref(false)
+const isValidCourtOrder = ref(true)
+const isValidCommissionOrder = ref(true)
+const showRemoveNoticeDialog = ref(false)
+const showOrders = ref(true)
 
 /** Local Functions **/
 /** Open and close respective notice and order forms **/
-const toggleNoticeForm = (formRef: string) => {
+const toggleNoticeForm = async (formRef: string, index: number = -1) => {
   // Reset form refs
-  editNotice.value = false
-  addCourtOrder.value = false
-  addCommissionOrder.value = false
+  resetFormDefaults()
 
   switch (formRef) {
     case 'editNotice':
+      await nextTick()
       editNotice.value = true
       break
     case 'addCourtOrder':
+      await nextTick()
       addCourtOrder.value = true
       break
     case 'addCommissionOrder':
       addCommissionOrder.value = true
       break
+    case 'editOrder':
+      // Set Order index
+      editOrderIndex.value = index
+      await nextTick()
+      editCourtOrder.value = true
+      break
   }
   togglePanel()
 }
-/** Remove and set security notice **/
-const removeNotice = () => {
-  getSecuritiesActNotices.value.splice(props.noticeIndex, 1)
-  setSecuritiesActNotices([...getSecuritiesActNotices.value])
+/** Remove Notice and Order handlers **/
+const removeNotice = (proceed: boolean) => {
+  if (proceed) {
+    getSecuritiesActNotices.value.splice(props.noticeIndex, 1)
+    setSecuritiesActNotices([...getSecuritiesActNotices.value])
+    showRemoveNoticeDialog.value = false
+  } else showRemoveNoticeDialog.value = false
+}
+const removeOrNotify = () => {
+  if (getSecuritiesActNotices.value[props.noticeIndex].securitiesActOrders.length > 0) {
+    showRemoveNoticeDialog.value = true
+  } else removeNotice(true)
+}
+const removeOrder = (noticeIndex: number, orderIndex: number) => {
+    getSecuritiesActNotices.value[noticeIndex].securitiesActOrders.splice(orderIndex, 1)
+    setSecuritiesActNotices([...getSecuritiesActNotices.value])
+}
+const resetFormDefaults = () => {
+  // Reset form refs
+  editOrderIndex.value = -1
+  editNotice.value = false
+  addCourtOrder.value = false
+  editCourtOrder.value = false
+  addCommissionOrder.value = false
+  isValidCourtOrder.value = true
+  isValidCommissionOrder.value = true
 }
+
 /** Toggle open and close panel expansion **/
-const togglePanel = () => {
+const togglePanel = (isCancel: boolean = false) => {
+  if (isCancel) resetFormDefaults()
   emits('togglePanel', props.noticeIndex)
 }
+
 /** Handle notice form edits **/
 const handleEditNotice = (notice: AddEditSaNoticeIF): void => {
   // Set add edit notices
@@ -230,24 +384,39 @@ const handleEditNotice = (notice: AddEditSaNoticeIF): void => {
   setAndCloseNotice()
 }
 const handleAddEditCourtOrder = (courtOrder: CourtOrderIF): void => {
-  // Set add edit Court Order
-  getSecuritiesActNotices.value[props.noticeIndex].securitiesActOrders.push(courtOrder)
+  // Update when editing
+  if (editOrderIndex.value > -1) {
+    // Edit Order
+    getSecuritiesActNotices.value[props.noticeIndex].securitiesActOrders[editOrderIndex.value] = courtOrder
+  } else {
+    // Set add Court Order
+    getSecuritiesActNotices.value[props.noticeIndex].securitiesActOrders.unshift(courtOrder)
+  }
   setAndCloseNotice()
 }
-
 const setAndCloseNotice = (): void => {
   setSecuritiesActNotices([...getSecuritiesActNotices.value])
 
   // Close expanded panel
+  resetFormDefaults()
   togglePanel()
 }
 </script>
 
 <style lang="scss" scoped>
 @import '@/assets/styles/theme.scss';
+h3 {
+  line-height: 2.45rem;
+}
 .notice-content-row {
   background-color: #F2F6FB;
 }
+.order-content {
+  width: 100%
+}
+.hide-show-orders-btn {
+  line-height: 1.25rem
+}
 :deep(.v-expansion-panel-title) {
   cursor: default;
 }
diff --git a/ppr-ui/src/components/registration/securities-act-notices/SecuritiesActNotices.vue b/ppr-ui/src/components/registration/securities-act-notices/SecuritiesActNotices.vue
index ff86e4802..1f0251587 100644
--- a/ppr-ui/src/components/registration/securities-act-notices/SecuritiesActNotices.vue
+++ b/ppr-ui/src/components/registration/securities-act-notices/SecuritiesActNotices.vue
@@ -76,7 +76,7 @@ const disableAddNotice = ref(false)
 const handleAddNotice = (notice: AddEditSaNoticeIF) => {
   openAddNotice.value = false
   // Set add edit notices
-  setSecuritiesActNotices([...getSecuritiesActNotices.value, notice])
+  setSecuritiesActNotices([notice, ...getSecuritiesActNotices.value])
 }
 </script>
 <style lang="scss" scoped>
diff --git a/ppr-ui/src/components/registration/securities-act-notices/SecuritiesActNoticesPanels.vue b/ppr-ui/src/components/registration/securities-act-notices/SecuritiesActNoticesPanels.vue
index 9db1b9d77..7e605c034 100644
--- a/ppr-ui/src/components/registration/securities-act-notices/SecuritiesActNoticesPanels.vue
+++ b/ppr-ui/src/components/registration/securities-act-notices/SecuritiesActNoticesPanels.vue
@@ -19,7 +19,8 @@
           :disabled="false"
           :notice="item"
           :noticeIndex="index"
-          :isActivePanel="activePanels.includes(index) || isAddingNotice"
+          :isActivePanel="activePanels.includes(index)"
+          :disableActions="!!activePanels.length || isAddingNotice"
           @togglePanel="togglePanel"
         />
       </v-expansion-panels>
@@ -73,22 +74,30 @@ const togglePanel = (panelIndex: number) => {
 watch(() => activePanels.value, () => {
   emits('hasActivePanel', activePanels.value.length > 0)
   if (activePanels.value.length > 1) activePanels.value.shift()
+  scrollToActivePanel(activePanels.value[0])
 })
 
+/** Scroll active panel into view **/
+const scrollToActivePanel = (activeIndex: number) => {
+  setTimeout(() => {
+    document.getElementsByClassName('notice-panel')[activeIndex]?.scrollIntoView({ behavior: 'smooth' })
+  }, 200)
+}
+
 </script>
 <style lang="scss" scoped>
 @import '@/assets/styles/theme';
-
 .securities-act-notices-panel-row {
   background: $gray1;
   overflow-y: auto;
 }
-
 .empty-notices-msg {
   background: white;
 }
-
 :deep(.theme--light.v-btn.v-btn--disabled) {
   color: $primary-blue !important;
 }
+:deep(.v-expansion-panel--active:not(:first-child)), :deep(.v-expansion-panel--active+.v-expansion-panel) {
+  margin-top: 3px;
+}
 </style>
diff --git a/ppr-ui/src/resources/dialogOptions/confirmationDialogs.ts b/ppr-ui/src/resources/dialogOptions/confirmationDialogs.ts
index 9f305a495..786838fc2 100644
--- a/ppr-ui/src/resources/dialogOptions/confirmationDialogs.ts
+++ b/ppr-ui/src/resources/dialogOptions/confirmationDialogs.ts
@@ -117,3 +117,10 @@ export const outOfDateOwnersDialogOptions = (mhrIdentifier: string): DialogOptio
      of MHR Number ${mhrIdentifier} and redo your changes.`
   }
 }
+
+export const confirmRemoveNoticeDialog: DialogOptionsIF = {
+  acceptText: 'Remove Notice',
+  cancelText: 'Cancel',
+  title: 'Remove Notice and Orders Attached',
+  text: `Removing this notice will also remove all orders attached.`
+}
diff --git a/ppr-ui/tests/unit/SecuritiesActNoticesPanels.spec.ts b/ppr-ui/tests/unit/SecuritiesActNoticesPanels.spec.ts
index c73271754..e5431c833 100644
--- a/ppr-ui/tests/unit/SecuritiesActNoticesPanels.spec.ts
+++ b/ppr-ui/tests/unit/SecuritiesActNoticesPanels.spec.ts
@@ -5,9 +5,17 @@ import SecuritiesActNoticesPanels from '@/components/registration/securities-act
 import { beforeEach } from 'vitest'
 import { createComponent } from './utils'
 import { SaNoticeTypes } from '@/enums'
+import flushPromises from 'flush-promises'
+import { AddEditSaNoticeIF } from '@/interfaces'
 
 const store = useStore()
 
+const mockNotice: AddEditSaNoticeIF = {
+  securitiesActNoticeType: SaNoticeTypes.NOTICE_OF_LIEN,
+  effectiveDate: '2024-01-01',
+  securitiesActOrders: []
+}
+
 describe('SecuritiesActNoticesPanel.vue', () => {
   let wrapper
   beforeEach(async () => {
@@ -67,4 +75,27 @@ describe('SecuritiesActNoticesPanel.vue', () => {
     // Check if the second panel is active and the first active panel was closed
     expect(wrapper.vm.activePanels).toEqual([1])
   })
+
+  it('renders a notice panel content correctly', async () => {
+    await store.setSecuritiesActNotices([mockNotice])
+    await nextTick()
+
+    expect(wrapper.find('.notice-type-text').text()).toBe('Notice of Lien')
+    expect(wrapper.find('.security-notice-header-action').exists()).toBe(true)
+    expect(wrapper.find('.security-notice-btn').exists()).toBe(true)
+    expect(wrapper.find('#security-notice-menu-btn').exists()).toBe(true)
+  })
+
+  it('removes a notice correctly', async () => {
+    await store.setSecuritiesActNotices([mockNotice])
+    await nextTick()
+    expect(wrapper.find('.notice-type-text').text()).toBe('Notice of Lien')
+
+    await wrapper.findComponent(NoticePanel).vm.removeNotice(true)
+    await nextTick()
+    await flushPromises()
+
+    expect(wrapper.find('.notice-type-text').exists()).toBe(false)
+    expect(wrapper.find('.effective-date-text').exists()).toBe(false)
+  })
 })