From b80958daba44adafafcc8e8c4716568c84c1cec9 Mon Sep 17 00:00:00 2001
From: Odysseus Chiu <odysseus@highwaythreesolutions.com>
Date: Fri, 27 Feb 2026 08:53:42 -0800
Subject: [PATCH 1/2] 32148 - initial FAS refund approval flow updates

---
 .../RoutingSlip/TransactionDataTable.vue      | 91 ++++++++++++++++++-
 .../components/refund/RefundRequestsTable.vue |  2 +-
 web/pay-ui/app/composables/pay-api.ts         |  9 ++
 web/pay-ui/app/composables/useRoutingSlip.ts  | 15 +++
 .../useTransactionDataTable.ts                | 10 +-
 web/pay-ui/app/interfaces/invoice.ts          |  6 ++
 .../[id]/InvoiceRefundHistory.vue             |  8 +-
 .../transaction-view/[id]/[...details].vue    | 32 +++++--
 .../app/pages/view-routing-slip/[slipId].vue  | 10 +-
 web/pay-ui/app/utils/constants.ts             | 10 +-
 10 files changed, 174 insertions(+), 19 deletions(-)

diff --git a/web/pay-ui/app/components/RoutingSlip/TransactionDataTable.vue b/web/pay-ui/app/components/RoutingSlip/TransactionDataTable.vue
index d05c36e3..48ec8f38 100644
--- a/web/pay-ui/app/components/RoutingSlip/TransactionDataTable.vue
+++ b/web/pay-ui/app/components/RoutingSlip/TransactionDataTable.vue
@@ -2,6 +2,12 @@
 import type { Invoice } from '@/interfaces/invoice'
 import useTransactionDataTable from '@/composables/viewRoutingSlip/useTransactionDataTable'
 import commonUtil from '@/utils/common-util'
+import { RefundApprovalStatus, RefundApprovalStatusDisplay } from '~/utils'
+import { RolePattern } from '~/enums'
+import CommonUtils from '~/utils/common-util'
+
+const route = useRoute()
+const { getFeatureFlag } = useConnectLaunchDarkly()
 
 interface Props {
   invoices?: Invoice[]
@@ -20,8 +26,56 @@ const {
   isAlreadyCancelled
 } = useTransactionDataTable(toRef(props, 'invoices'))
 
+const enableRefundRequestFlow = await getFeatureFlag(LDFlags.EnableFasRefundRequestFlow, false, 'await')
+
 const formatDisplayDate = commonUtil.formatDisplayDate
 const appendCurrencySymbol = commonUtil.appendCurrencySymbol
+
+async function cancelTransaction(id: number) {
+  if (enableRefundRequestFlow) {
+    navigateTo({
+      path: `/transaction-view/${id}/initiateRefund`,
+      query: {
+        returnTo: route.path,
+        returnType: 'viewRoutingSlip',
+        returnToId: route.params.slipId
+      }
+    })
+  } else {
+    cancel(id)
+  }
+}
+
+async function viewRefundDetail(invoiceId: number, refundId: number) {
+  navigateTo({
+    path: `/transaction-view/${invoiceId}/refund-request/${refundId}`,
+    query: {
+      returnTo: route.path,
+      returnType: 'viewRoutingSlip',
+      returnToId: route.params.slipId
+    }
+  })
+}
+
+function showInitiateRefundButton(invoiceRow: Invoice) {
+  if (
+    !invoiceRow.latestRefundStatus
+    || RefundApprovalStatus.DECLINED === invoiceRow.latestRefundStatus
+  ) {
+    const productRole = (invoiceRow.product?.toLowerCase() ?? '')
+      + RolePattern.ProductRefundRequester
+    return (!!invoiceRow.partialRefundable || !!invoiceRow.fullRefundable)
+      && invoiceRow.total > 0
+      && CommonUtils.canInitiateProductRefund(productRole)
+  }
+  return false
+}
+
+function showRefundRequestBadge(invoiceRow: Invoice) {
+  return !!(invoiceRow.latestRefundStatus
+    && [RefundApprovalStatus.DECLINED, RefundApprovalStatus.PENDING_APPROVAL]
+      .includes(invoiceRow.latestRefundStatus as RefundApprovalStatus))
+}
 </script>
 
 <template>
@@ -58,6 +112,19 @@ const appendCurrencySymbol = commonUtil.appendCurrencySymbol
       <template #total-cell="{ row }">
         <div class="font-bold table-cell-text text-right">
           {{ appendCurrencySymbol(row.original.total?.toFixed(2) || '0.00') }}
+          <br>
+          <span v-if="row.original.refund > 0" class="font-normal">
+            Refunded ({{ appendCurrencySymbol(row.original.refund?.toFixed(2) || '0.00') }})
+          </span>
+          <UBadge
+            v-else-if="showRefundRequestBadge(row.original)"
+            color="neutral"
+            class="!bg-gray-200 !text-gray-700 font-bold"
+            variant="solid"
+            size="md"
+          >
+            {{ RefundApprovalStatusDisplay[row.original.latestRefundStatus as RefundApprovalStatus]?.toUpperCase() }}
+          </UBadge>
         </div>
       </template>
       <template #description-cell="{ row }">
@@ -73,7 +140,7 @@ const appendCurrencySymbol = commonUtil.appendCurrencySymbol
         </div>
       </template>
       <template #actions-cell="{ row }">
-        <template v-if="isAlreadyCancelled(row.original.statusCode)">
+        <template v-if="isAlreadyCancelled(row.original.statusCode) && !enableRefundRequestFlow">
           <span
             :data-test="commonUtil.getIndexedTag('text-cancel', row.index)"
             class="text-error font-bold"
@@ -81,16 +148,36 @@ const appendCurrencySymbol = commonUtil.appendCurrencySymbol
             Cancelled
           </span>
         </template>
+        <template v-else-if="enableRefundRequestFlow">
+          <UButton
+            :data-test="commonUtil.getIndexedTag('btn-invoice-cancel', row.index)"
+            label="View Refund Detail"
+            variant="outline"
+            color="primary"
+            class="btn-table"
+            @click="viewRefundDetail(row.original.id, row.original.latestRefundId)"
+          />
+        </template>
         <template v-else>
           <div v-can:fas_refund.hide>
             <UButton
+              v-if="enableRefundRequestFlow && showInitiateRefundButton(row.original)"
+              :data-test="commonUtil.getIndexedTag('btn-invoice-cancel', row.index)"
+              label="Request Refund"
+              variant="outline"
+              color="primary"
+              class="btn-table"
+              @click="cancelTransaction(row.original.id!)"
+            />
+            <UButton
+              v-else-if="!enableRefundRequestFlow"
               :data-test="commonUtil.getIndexedTag('btn-invoice-cancel', row.index)"
               label="Cancel"
               variant="outline"
               color="primary"
               class="btn-table"
               :disabled="disableCancelButton"
-              @click="cancel(row.original.id!)"
+              @click="cancelTransaction(row.original.id!)"
             />
           </div>
         </template>
diff --git a/web/pay-ui/app/components/refund/RefundRequestsTable.vue b/web/pay-ui/app/components/refund/RefundRequestsTable.vue
index 8f030401..5f1615a8 100644
--- a/web/pay-ui/app/components/refund/RefundRequestsTable.vue
+++ b/web/pay-ui/app/components/refund/RefundRequestsTable.vue
@@ -389,7 +389,7 @@ const columns = computed<TableColumn<RefundRequestResult>[]>(() => {
 
           <template #refundAmount-cell="{ row }">
             <div class="flex items-center justify-start gap-2">
-              <span>{{ formatAmount(row.original.transactionAmount) }}</span>
+              <span>{{ formatAmount(row.original.refundAmount) }}</span>
             </div>
           </template>
 
diff --git a/web/pay-ui/app/composables/pay-api.ts b/web/pay-ui/app/composables/pay-api.ts
index 476aa94e..784cd3a1 100644
--- a/web/pay-ui/app/composables/pay-api.ts
+++ b/web/pay-ui/app/composables/pay-api.ts
@@ -19,6 +19,14 @@ export const usePayApi = () => {
     return $payApi(`/fas/routing-slips/${routingNumber}`, options as Record<string, unknown>)
   }
 
+  async function getRoutingSlipV2(
+    routingNumber: string,
+    options?: { showErrorToast?: boolean }
+  ): Promise<RoutingSlip | undefined> {
+    const { payApiUrl } = useRuntimeConfig().public
+    return $payApi(`${payApiUrl}/api/v2/fas/routing-slips/${routingNumber}`, options as Record<string, unknown>)
+  }
+
   async function postRoutingSlip(payload: CreateRoutingSlipPayload): Promise<RoutingSlip> {
     return nuxtApp.$payApi('/fas/routing-slips', {
       method: 'POST',
@@ -195,6 +203,7 @@ export const usePayApi = () => {
   return {
     getCodes,
     getRoutingSlip,
+    getRoutingSlipV2,
     postRoutingSlip,
     postLinkRoutingSlip,
     postSearchRoutingSlip,
diff --git a/web/pay-ui/app/composables/useRoutingSlip.ts b/web/pay-ui/app/composables/useRoutingSlip.ts
index f7e8d60f..475f8ece 100644
--- a/web/pay-ui/app/composables/useRoutingSlip.ts
+++ b/web/pay-ui/app/composables/useRoutingSlip.ts
@@ -125,6 +125,20 @@ export const useRoutingSlip = () => {
     }
   }
 
+  const getRoutingSlipV2 = async (getRoutingSlipRequestPayload: GetRoutingSlipRequestPayload) => {
+    try {
+      // Global Exception handler will handle this one.
+      const response = await usePayApi().getRoutingSlipV2(
+        getRoutingSlipRequestPayload.routingSlipNumber
+      )
+      if (response) {
+        store.routingSlip = response
+      }
+    } catch (error) {
+      console.error('error ', error) // 500 errors may not return data
+    }
+  }
+
   const updateRoutingSlipStatus = async (
     statusDetails: string | StatusDetails
   ) => {
@@ -385,6 +399,7 @@ export const useRoutingSlip = () => {
     createRoutingSlip,
     checkRoutingNumber,
     getRoutingSlip,
+    getRoutingSlipV2,
     updateRoutingSlipStatus,
     updateRoutingSlipRefundStatus,
     adjustRoutingSlip,
diff --git a/web/pay-ui/app/composables/viewRoutingSlip/useTransactionDataTable.ts b/web/pay-ui/app/composables/viewRoutingSlip/useTransactionDataTable.ts
index aa7e2ff9..e01b77d0 100644
--- a/web/pay-ui/app/composables/viewRoutingSlip/useTransactionDataTable.ts
+++ b/web/pay-ui/app/composables/viewRoutingSlip/useTransactionDataTable.ts
@@ -31,7 +31,7 @@ export default function useTransactionDataTable(invoices: Ref<Invoice[]>) {
       }
 
       const invoiceNumber = invoice.references?.find(ref => ref.invoiceNumber)?.invoiceNumber
-        || invoice.references?.[0]?.invoiceNumber
+        || invoice.references?.[0]?.invoiceNumber || invoice.invoiceNumber
 
       return {
         id: invoice.id,
@@ -41,7 +41,13 @@ export default function useTransactionDataTable(invoices: Ref<Invoice[]>) {
         total: invoice.total,
         createdName: invoice.createdName,
         createdBy: invoice.createdBy,
-        description: descriptions.length > 0 ? descriptions : ['N/A']
+        description: descriptions.length > 0 ? descriptions : ['N/A'],
+        refund: invoice.refund,
+        latestRefundId: invoice.latestRefundId,
+        latestRefundStatus: invoice.latestRefundStatus,
+        partialRefundable: invoice.partialRefundable,
+        fullRefundable: invoice.fullRefundable,
+        product: invoice.product
       }
     })
   }
diff --git a/web/pay-ui/app/interfaces/invoice.ts b/web/pay-ui/app/interfaces/invoice.ts
index 100725af..f584b95f 100644
--- a/web/pay-ui/app/interfaces/invoice.ts
+++ b/web/pay-ui/app/interfaces/invoice.ts
@@ -36,6 +36,7 @@ export interface Invoice {
   statusCode?: string
   total?: number
   details?: Detail[]
+  invoiceNumber?: string
   latestRefundId?: number
   latestRefundStatus?: string
   partialRefundable?: boolean
@@ -53,6 +54,11 @@ export interface InvoiceDisplay {
   createdBy?: string
   description?: string[]
   id?: number
+  latestRefundId?: number
+  latestRefundStatus?: string
+  partialRefundable?: boolean
+  fullRefundable?: boolean
+  product?: string
 }
 
 export interface LineItem {
diff --git a/web/pay-ui/app/pages/transaction-view/[id]/InvoiceRefundHistory.vue b/web/pay-ui/app/pages/transaction-view/[id]/InvoiceRefundHistory.vue
index 64f507c4..d15ae727 100644
--- a/web/pay-ui/app/pages/transaction-view/[id]/InvoiceRefundHistory.vue
+++ b/web/pay-ui/app/pages/transaction-view/[id]/InvoiceRefundHistory.vue
@@ -40,7 +40,7 @@ function viewDetails(index: number) {
 function getStatusConfig(item: RefundHistoryItem) {
   if (item.refundStatus === RefundApprovalStatus.PENDING_APPROVAL) {
     return { label: 'REFUND REQUESTED', color: 'neutral' as const,
-      classes: '!bg-gray-200 !text-gray-700' }
+      classes: '!bg-gray-200 !text-gray-700 font-bold' }
   }
   if (item.refundStatus === RefundApprovalStatus.APPROVED && item.partialRefundLines?.length > 0) {
     return { label: 'PARTIALLY REFUNDED', color: 'primary' as const }
@@ -48,8 +48,12 @@ function getStatusConfig(item: RefundHistoryItem) {
   if (item.refundStatus === RefundApprovalStatus.APPROVED) {
     return { label: 'FULL REFUND APPROVED', color: 'primary' as const }
   }
+  if (item.refundStatus === RefundApprovalStatus.APPROVAL_NOT_REQUIRED) {
+    return { label: 'APPROVAL NOT REQUIRED', color: 'primary' as const }
+  }
   if (item.refundStatus === RefundApprovalStatus.DECLINED) {
-    return { label: 'REFUND DECLINED', color: 'red' as const }
+    return { label: 'REFUND DECLINED', color: 'neutral' as const,
+      classes: '!bg-gray-200 !text-gray-700 font-bold' }
   }
   return null
 }
diff --git a/web/pay-ui/app/pages/transaction-view/[id]/[...details].vue b/web/pay-ui/app/pages/transaction-view/[id]/[...details].vue
index 2f644cc4..571dbe4c 100644
--- a/web/pay-ui/app/pages/transaction-view/[id]/[...details].vue
+++ b/web/pay-ui/app/pages/transaction-view/[id]/[...details].vue
@@ -23,6 +23,10 @@ const details = computed(() => {
 const mode = computed(() => details.value[0] || null)
 const refundId = computed(() => details.value[1] ? Number(details.value[1]) : null)
 
+const returnTo = route.query.returnTo as string | undefined
+const returnType = route.query.returnType as string | undefined
+const returnToId = route.query.returnToId as string | undefined
+
 definePageMeta({
   layout: 'connect-auth',
   middleware: ['pay-auth'],
@@ -239,7 +243,11 @@ async function onProceedToConfirm() {
       color: 'success'
     })
     if (state.refundFormStage === RefundRequestStage.DATA_VALIDATED) {
-      goToTransactionList()
+      if (returnTo) {
+        router.push(returnTo)
+      } else {
+        goToTransactionList()
+      }
     }
   } catch (error) {
     console.error(`Refund request failed: ${error}`)
@@ -360,7 +368,12 @@ function goToTransactionList() {
 }
 
 function onCancel() {
-  goToTransactionList()
+  const returnTo = route.query.returnTo as string | undefined
+  if (returnTo) {
+    router.push(returnTo)
+  } else {
+    goToTransactionList()
+  }
 }
 
 onMounted(async () => {
@@ -371,13 +384,14 @@ onMounted(async () => {
   }
 
   setBreadcrumbs([
-    {
-      label: t('page.transactionView.breadcrumb.transactions'),
-      to: '/transactions'
-    },
-    {
-      label: t(getTransactionPageTitle())
-    }
+    ...(returnType === 'viewRoutingSlip' && returnToId
+      ? [
+        { label: t('label.fasDashboard'), to: '/home' },
+        { label: t('page.viewRoutingSlip.h1', { id: returnToId }), to: returnTo }
+      ]
+      : [{ label: t('page.transactionView.breadcrumb.transactions'), to: '/transactions' }]
+    ),
+    { label: t(getTransactionPageTitle()) }
   ])
 })
 </script>
diff --git a/web/pay-ui/app/pages/view-routing-slip/[slipId].vue b/web/pay-ui/app/pages/view-routing-slip/[slipId].vue
index 78784f24..2ce74963 100644
--- a/web/pay-ui/app/pages/view-routing-slip/[slipId].vue
+++ b/web/pay-ui/app/pages/view-routing-slip/[slipId].vue
@@ -10,6 +10,7 @@ import { useLoader } from '~/composables/common/useLoader'
 
 const route = useRoute()
 const { t } = useI18n()
+const { getFeatureFlag } = useConnectLaunchDarkly()
 
 definePageMeta({
   layout: 'connect-auth',
@@ -35,7 +36,7 @@ setBreadcrumbs([
 ])
 useViewRoutingSlip({ slipId })
 
-const { getRoutingSlip, getLinkedRoutingSlips } = useRoutingSlip()
+const { getRoutingSlip, getRoutingSlipV2, getLinkedRoutingSlips } = useRoutingSlip()
 const { store } = useRoutingSlipStore()
 const { isLoading, toggleLoading } = useLoader()
 
@@ -49,7 +50,12 @@ function handlePaymentAdjusted() {
 onMounted(async () => {
   toggleLoading(true)
   try {
-    await getRoutingSlip({ routingSlipNumber: slipId })
+    const enableRefundRequestFlow = await getFeatureFlag(LDFlags.EnableFasRefundRequestFlow, false, 'await')
+    if (enableRefundRequestFlow) {
+      await getRoutingSlipV2({ routingSlipNumber: slipId })
+    } else {
+      await getRoutingSlip({ routingSlipNumber: slipId })
+    }
     await getLinkedRoutingSlips(slipId)
   } finally {
     toggleLoading(false)
diff --git a/web/pay-ui/app/utils/constants.ts b/web/pay-ui/app/utils/constants.ts
index f0ec9465..23c77c6b 100644
--- a/web/pay-ui/app/utils/constants.ts
+++ b/web/pay-ui/app/utils/constants.ts
@@ -1,6 +1,7 @@
 export enum LDFlags {
   EnableDetailsFilter = 'enable-transactions-detail-filter',
-  EnableEFTRefundByCheque = 'enable-eft-refund-by-cheque'
+  EnableEFTRefundByCheque = 'enable-eft-refund-by-cheque',
+  EnableFasRefundRequestFlow = 'enable-fas-refund-request-flow'
 }
 
 export enum RouteNames {
@@ -456,6 +457,13 @@ export enum RefundApprovalStatus {
   APPROVAL_NOT_REQUIRED = 'APPROVAL_NOT_REQUIRED'
 }
 
+export const RefundApprovalStatusDisplay = {
+  [RefundApprovalStatus.APPROVED]: 'Refund Approved',
+  [RefundApprovalStatus.PENDING_APPROVAL]: 'Refund Requested',
+  [RefundApprovalStatus.DECLINED]: 'Refund Declined',
+  [RefundApprovalStatus.APPROVAL_NOT_REQUIRED]: 'Approval Not Required'
+}
+
 export enum PaymentTypeToRefundMethodMap {
   DRAWDOWN = 'Refund back to BCOL Account',
   DIRECT_PAY = 'Refund back to Credit Card',

From 8a98f7d6d2e2674c4470a8274025a60fe6359834 Mon Sep 17 00:00:00 2001
From: Odysseus Chiu <odysseus@highwaythreesolutions.com>
Date: Tue, 3 Mar 2026 08:59:21 -0800
Subject: [PATCH 2/2] Refactor routing slip transaction table actions logic,
 test updates for table and breadcrumbs

---
 .../RoutingSlip/TransactionDataTable.vue      |  69 ++--
 .../routing-slip/TransactionDataTable.spec.ts | 323 +++++++++++++-----
 .../pages/transaction-view/details.spec.ts    | 187 ++++++++++
 3 files changed, 465 insertions(+), 114 deletions(-)
 create mode 100644 web/pay-ui/tests/unit/pages/transaction-view/details.spec.ts

diff --git a/web/pay-ui/app/components/RoutingSlip/TransactionDataTable.vue b/web/pay-ui/app/components/RoutingSlip/TransactionDataTable.vue
index 48ec8f38..8db33029 100644
--- a/web/pay-ui/app/components/RoutingSlip/TransactionDataTable.vue
+++ b/web/pay-ui/app/components/RoutingSlip/TransactionDataTable.vue
@@ -57,7 +57,7 @@ async function viewRefundDetail(invoiceId: number, refundId: number) {
   })
 }
 
-function showInitiateRefundButton(invoiceRow: Invoice) {
+function isRefundable(invoiceRow: Invoice): boolean {
   if (
     !invoiceRow.latestRefundStatus
     || RefundApprovalStatus.DECLINED === invoiceRow.latestRefundStatus
@@ -76,6 +76,15 @@ function showRefundRequestBadge(invoiceRow: Invoice) {
     && [RefundApprovalStatus.DECLINED, RefundApprovalStatus.PENDING_APPROVAL]
       .includes(invoiceRow.latestRefundStatus as RefundApprovalStatus))
 }
+
+function showViewDetails(invoiceRow: Invoice) {
+  const isCancelled = isAlreadyCancelled(invoiceRow.statusCode)
+  const isRefund = invoiceRow.latestRefundStatus
+    && ![RefundApprovalStatus.DECLINED]
+      .includes(invoiceRow.latestRefundStatus as RefundApprovalStatus)
+
+  return isCancelled || isRefund
+}
 </script>
 
 <template>
@@ -140,46 +149,50 @@ function showRefundRequestBadge(invoiceRow: Invoice) {
         </div>
       </template>
       <template #actions-cell="{ row }">
-        <template v-if="isAlreadyCancelled(row.original.statusCode) && !enableRefundRequestFlow">
-          <span
-            :data-test="commonUtil.getIndexedTag('text-cancel', row.index)"
-            class="text-error font-bold"
-          >
-            Cancelled
-          </span>
-        </template>
-        <template v-else-if="enableRefundRequestFlow">
-          <UButton
-            :data-test="commonUtil.getIndexedTag('btn-invoice-cancel', row.index)"
-            label="View Refund Detail"
-            variant="outline"
-            color="primary"
-            class="btn-table"
-            @click="viewRefundDetail(row.original.id, row.original.latestRefundId)"
-          />
-        </template>
-        <template v-else>
-          <div v-can:fas_refund.hide>
+        <template v-if="enableRefundRequestFlow">
+          <template v-if="showViewDetails(row.original)">
             <UButton
-              v-if="enableRefundRequestFlow && showInitiateRefundButton(row.original)"
               :data-test="commonUtil.getIndexedTag('btn-invoice-cancel', row.index)"
-              label="Request Refund"
+              label="View Refund Detail"
               variant="outline"
               color="primary"
               class="btn-table"
-              @click="cancelTransaction(row.original.id!)"
+              @click="viewRefundDetail(row.original.id, row.original.latestRefundId)"
             />
+          </template>
+          <template v-else-if="isRefundable(row.original)">
             <UButton
-              v-else-if="!enableRefundRequestFlow"
               :data-test="commonUtil.getIndexedTag('btn-invoice-cancel', row.index)"
-              label="Cancel"
+              label="Request Refund"
               variant="outline"
               color="primary"
               class="btn-table"
-              :disabled="disableCancelButton"
               @click="cancelTransaction(row.original.id!)"
             />
-          </div>
+          </template>
+        </template>
+        <template v-else>
+          <template v-if="isAlreadyCancelled(row.original.statusCode)">
+            <span
+              :data-test="commonUtil.getIndexedTag('text-cancel', row.index)"
+              class="text-error font-bold"
+            >
+              Cancelled
+            </span>
+          </template>
+          <template v-else>
+            <div v-can:fas_refund.hide>
+              <UButton
+                :data-test="commonUtil.getIndexedTag('btn-invoice-cancel', row.index)"
+                label="Cancel"
+                variant="outline"
+                color="primary"
+                class="btn-table"
+                :disabled="disableCancelButton"
+                @click="cancelTransaction(row.original.id!)"
+              />
+            </div>
+          </template>
         </template>
       </template>
       <template #empty>
diff --git a/web/pay-ui/tests/unit/components/routing-slip/TransactionDataTable.spec.ts b/web/pay-ui/tests/unit/components/routing-slip/TransactionDataTable.spec.ts
index 28204443..ab6223f7 100644
--- a/web/pay-ui/tests/unit/components/routing-slip/TransactionDataTable.spec.ts
+++ b/web/pay-ui/tests/unit/components/routing-slip/TransactionDataTable.spec.ts
@@ -1,43 +1,40 @@
-import { mountSuspended } from '@nuxt/test-utils/runtime'
-import { ref, computed } from 'vue'
+import { mockNuxtImport, mountSuspended } from '@nuxt/test-utils/runtime'
+import { computed } from 'vue'
 import TransactionDataTable from '~/components/RoutingSlip/TransactionDataTable.vue'
-import type { Invoice } from '~/interfaces/invoice'
-import { InvoiceStatus } from '~/utils/constants'
+import type { Invoice, InvoiceDisplay } from '~/interfaces/invoice'
+import { InvoiceStatus, RefundApprovalStatus } from '~/utils/constants'
 
-const mockCancel = vi.fn()
+const {
+  mockCancel,
+  mockNavigateTo,
+  mockGetFeatureFlag,
+  mockDisplayData
+} = vi.hoisted(() => ({
+  mockCancel: vi.fn(),
+  mockNavigateTo: vi.fn(),
+  mockGetFeatureFlag: vi.fn(),
+  mockDisplayData: { list: [] as InvoiceDisplay[] }
+}))
 
 vi.mock('~/utils/common-util', async () => {
-  const actual = await vi.importActual('~/utils/common-util')
+  const actual = await vi.importActual<{ default: Record<string, unknown> }>('~/utils/common-util')
   return {
     default: {
       ...actual.default,
-      verifyRoles: () => true
+      verifyRoles: () => true,
+      canInitiateProductRefund: () => true
     }
   }
 })
 
+mockNuxtImport('navigateTo', () => mockNavigateTo)
+mockNuxtImport('useConnectLaunchDarkly', () => () => ({
+  getFeatureFlag: mockGetFeatureFlag
+}))
+
 vi.mock('~/composables/viewRoutingSlip/useTransactionDataTable', () => ({
   default: () => ({
-    invoiceDisplay: computed(() => [
-      {
-        id: 1,
-        createdOn: '2025-11-17T10:00:00Z',
-        invoiceNumber: 'REGUT00053322',
-        statusCode: InvoiceStatus.COMPLETED,
-        total: 30.00,
-        createdName: 'Travis Semple',
-        description: ['Name Request Renewal fee']
-      },
-      {
-        id: 2,
-        createdOn: '2025-11-18T10:00:00Z',
-        invoiceNumber: 'REGUT00053323',
-        statusCode: InvoiceStatus.CANCELLED,
-        total: 50.00,
-        createdName: 'John Doe',
-        description: ['Fee Type: Annual Report']
-      }
-    ]),
+    invoiceDisplay: computed(() => mockDisplayData.list),
     headerTransactions: computed(() => [
       { accessorKey: 'createdOn', header: 'Date' },
       { accessorKey: 'invoiceNumber', header: 'Invoice #' },
@@ -46,90 +43,244 @@ vi.mock('~/composables/viewRoutingSlip/useTransactionDataTable', () => ({
       { accessorKey: 'createdName', header: 'Initiator' },
       { accessorKey: 'actions', header: 'Actions' }
     ]),
-    invoiceCount: computed(() => 2),
+    invoiceCount: computed(() => mockDisplayData.list.length),
     transformInvoices: vi.fn(),
     cancel: mockCancel,
     getIndexedTag: (baseTag: string, index: number) => `${baseTag}-${index}`,
-    disableCancelButton: ref(false),
+    disableCancelButton: false,
     isAlreadyCancelled: (statusCode?: string) => statusCode === InvoiceStatus.CANCELLED
   })
 }))
 
+// InvoiceDisplay is the shaped type the composable returns to the template
+const baseInvoices: InvoiceDisplay[] = [
+  {
+    id: 1,
+    createdOn: '2025-11-17T10:00:00Z',
+    invoiceNumber: 'REGUT00053322',
+    statusCode: InvoiceStatus.COMPLETED,
+    total: 30.00,
+    createdName: 'Travis Semple',
+    description: ['Name Request Renewal fee']
+  },
+  {
+    id: 2,
+    createdOn: '2025-11-18T10:00:00Z',
+    invoiceNumber: 'REGUT00053323',
+    statusCode: InvoiceStatus.CANCELLED,
+    total: 50.00,
+    createdName: 'John Doe',
+    description: ['Fee Type: Annual Report']
+  }
+]
+
+const defaultDirectives = {
+  can: { mounted: () => {}, updated: () => {} }
+}
+
+// Stub renders the label prop as text so assertions like button.text() work
+const uButtonStub = {
+  template: '<button @click="$emit(\'click\')" :data-test="$props.dataTest">{{ label }}</button>',
+  props: ['label', 'variant', 'color', 'disabled', 'dataTest']
+}
+
+function mountTable() {
+  return mountSuspended(TransactionDataTable, {
+    props: { invoices: [] as Invoice[] },
+    global: {
+      directives: defaultDirectives,
+      stubs: { UButton: uButtonStub }
+    }
+  })
+}
+
 describe('TransactionDataTable', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    mockDisplayData.list = [...baseInvoices]
+    mockGetFeatureFlag.mockResolvedValue(false)
   })
 
-  it('renders component with title and invoice count', async () => {
-    const wrapper = await mountSuspended(TransactionDataTable, {
-      props: {
-        invoices: [] as Invoice[]
-      },
-      global: {
-        directives: {
-          can: { mounted: () => {}, updated: () => {} }
-        }
-      }
-    })
-
-    expect(wrapper.find('[data-test="title"]').exists()).toBe(true)
+  it('renders title and invoice count', async () => {
+    const wrapper = await mountTable()
     expect(wrapper.find('[data-test="title"]').text()).toBe('Transactions')
-    expect(wrapper.text()).toContain('(2)')
+    expect(wrapper.text()).toContain(`(${baseInvoices.length})`)
   })
 
-  it('displays cancelled status for cancelled invoices', async () => {
-    const wrapper = await mountSuspended(TransactionDataTable, {
-      props: {
-        invoices: [] as Invoice[]
-      },
-      global: {
-        directives: {
-          can: { mounted: () => {}, updated: () => {} }
-        }
-      }
+  describe('legacy flow (enableRefundRequestFlow = false)', () => {
+    it('shows "Cancelled" text for a cancelled invoice', async () => {
+      const wrapper = await mountTable()
+      const cancelText = wrapper.find('[data-test="text-cancel-1"]')
+      expect(cancelText.exists()).toBe(true)
+      expect(cancelText.text()).toBe('Cancelled')
+    })
+
+    it('shows "Cancel" button for an active invoice', async () => {
+      const wrapper = await mountTable()
+      const button = wrapper.find('[data-test="btn-invoice-cancel-0"]')
+      expect(button.exists()).toBe(true)
+      expect(button.text()).toBe('Cancel')
     })
 
-    expect(wrapper.find('[data-test="text-cancel-1"]').exists()).toBe(true)
-    expect(wrapper.find('[data-test="text-cancel-1"]').text()).toBe('Cancelled')
+    it('calls cancel() when the "Cancel" button is clicked, does not navigate', async () => {
+      const wrapper = await mountTable()
+      await wrapper.find('[data-test="btn-invoice-cancel-0"]').trigger('click')
+      expect(mockCancel).toHaveBeenCalledWith(1)
+      expect(mockNavigateTo).not.toHaveBeenCalled()
+    })
   })
 
-  it('displays cancel button for active invoices', async () => {
-    const wrapper = await mountSuspended(TransactionDataTable, {
-      props: {
-        invoices: [] as Invoice[]
-      },
-      global: {
-        directives: {
-          can: { mounted: () => {}, updated: () => {} }
-        }
-      }
+  describe('new flow (enableRefundRequestFlow = true)', () => {
+    beforeEach(() => {
+      mockGetFeatureFlag.mockResolvedValue(true)
     })
 
-    expect(wrapper.html()).toContain('btn-invoice-cancel-0')
+    describe('"View Refund Detail" button', () => {
+      it('shows for a cancelled invoice', async () => {
+        mockDisplayData.list = [
+          { id: 2, statusCode: InvoiceStatus.CANCELLED, total: 50.00, latestRefundId: 10, description: [] }
+        ]
+        const wrapper = await mountTable()
+        const button = wrapper.find('[data-test="btn-invoice-cancel-0"]')
+        expect(button.exists()).toBe(true)
+        expect(button.text()).toBe('View Refund Detail')
+      })
+
+      it('shows for a REFUND_REQUESTED invoice', async () => {
+        mockDisplayData.list = [{
+          id: 1,
+          statusCode: InvoiceStatus.REFUND_REQUESTED,
+          total: 30.00,
+          latestRefundStatus: RefundApprovalStatus.PENDING_APPROVAL,
+          latestRefundId: 5,
+          description: []
+        }]
+        const wrapper = await mountTable()
+        const button = wrapper.find('[data-test="btn-invoice-cancel-0"]')
+        expect(button.exists()).toBe(true)
+        expect(button.text()).toBe('View Refund Detail')
+      })
+
+      it.each([
+        RefundApprovalStatus.PENDING_APPROVAL,
+        RefundApprovalStatus.APPROVED,
+        RefundApprovalStatus.APPROVAL_NOT_REQUIRED
+      ])('shows for invoice with refund status "%s"', async (refundStatus) => {
+        mockDisplayData.list = [{
+          id: 1, statusCode: InvoiceStatus.COMPLETED, total: 30.00,
+          latestRefundStatus: refundStatus, latestRefundId: 5, description: []
+        }]
+
+        const wrapper = await mountTable()
+        const button = wrapper.find('[data-test="btn-invoice-cancel-0"]')
+        expect(button.exists()).toBe(true)
+        expect(button.text()).toBe('View Refund Detail')
+      })
+
+      it('navigates to the refund-request page with correct params on click', async () => {
+        const invoiceId = 1
+        const refundId = 5
+        mockDisplayData.list = [{
+          id: invoiceId, statusCode: InvoiceStatus.COMPLETED, total: 30.00,
+          latestRefundStatus: RefundApprovalStatus.PENDING_APPROVAL,
+          latestRefundId: refundId, description: []
+        }]
+
+        const wrapper = await mountTable()
+        await wrapper.find('[data-test="btn-invoice-cancel-0"]').trigger('click')
+
+        expect(mockNavigateTo).toHaveBeenCalledWith(expect.objectContaining({
+          path: `/transaction-view/${invoiceId}/refund-request/${refundId}`,
+          query: expect.objectContaining({ returnType: 'viewRoutingSlip' })
+        }))
+      })
+    })
+
+    describe('"Request Refund" button', () => {
+      it('shows for a refundable invoice with no prior refund', async () => {
+        mockDisplayData.list = [
+          { id: 1, statusCode: InvoiceStatus.COMPLETED, total: 30.00,
+            fullRefundable: true, product: 'NR', description: [] }
+        ]
+
+        const wrapper = await mountTable()
+        const button = wrapper.find('[data-test="btn-invoice-cancel-0"]')
+        expect(button.exists()).toBe(true)
+        expect(button.text()).toBe('Request Refund')
+      })
+
+      it('shows for a refundable invoice with a DECLINED refund (re-request)', async () => {
+        mockDisplayData.list = [{
+          id: 1, statusCode: InvoiceStatus.COMPLETED, total: 30.00,
+          fullRefundable: true, product: 'NR',
+          latestRefundStatus: RefundApprovalStatus.DECLINED, description: []
+        }]
+
+        const wrapper = await mountTable()
+        const button = wrapper.find('[data-test="btn-invoice-cancel-0"]')
+        expect(button.exists()).toBe(true)
+        expect(button.text()).toBe('Request Refund')
+      })
+
+      it('navigates to the initiateRefund page on click, does not call cancel()', async () => {
+        const invoiceId = 1
+        mockDisplayData.list = [{
+          id: invoiceId, statusCode: InvoiceStatus.COMPLETED, total: 30.00,
+          fullRefundable: true, product: 'NR', description: []
+        }]
+
+        const wrapper = await mountTable()
+        await wrapper.find('[data-test="btn-invoice-cancel-0"]').trigger('click')
+
+        expect(mockNavigateTo).toHaveBeenCalledWith(expect.objectContaining({
+          path: `/transaction-view/${invoiceId}/initiateRefund`,
+          query: expect.objectContaining({ returnType: 'viewRoutingSlip' })
+        }))
+        expect(mockCancel).not.toHaveBeenCalled()
+      })
+
+      it('does not show for a non-refundable invoice', async () => {
+        mockDisplayData.list = [{
+          id: 1, statusCode: InvoiceStatus.COMPLETED, total: 30.00,
+          fullRefundable: false, partialRefundable: false, description: []
+        }]
+
+        const wrapper = await mountTable()
+        expect(wrapper.find('[data-test="btn-invoice-cancel-0"]').exists()).toBe(false)
+      })
+
+      it('does not show for an invoice with $0 total', async () => {
+        mockDisplayData.list = [
+          { id: 1, statusCode: InvoiceStatus.COMPLETED, total: 0, fullRefundable: true, product: 'NR', description: [] }
+        ]
+
+        const wrapper = await mountTable()
+        expect(wrapper.find('[data-test="btn-invoice-cancel-0"]').exists()).toBe(false)
+      })
+    })
   })
 
-  it('calls cancel function when cancel button is clicked', async () => {
-    const wrapper = await mountSuspended(TransactionDataTable, {
-      props: {
-        invoices: [] as Invoice[]
-      },
-      global: {
-        directives: {
-          can: { mounted: () => {}, updated: () => {} }
-        },
-        stubs: {
-          UButton: {
-            template: '<button @click="$emit(\'click\')" :data-test="dataTest"><slot /></button>',
-            props: ['label', 'variant', 'color', 'disabled', 'dataTest']
-          }
-        }
-      }
+  describe('refund status badge in total column', () => {
+    it.each([
+      [RefundApprovalStatus.PENDING_APPROVAL, 'REFUND REQUESTED'],
+      [RefundApprovalStatus.DECLINED, 'REFUND DECLINED']
+    ])('shows badge for %s refund status', async (refundStatus, expectedText) => {
+      mockDisplayData.list = [
+        { id: 1, statusCode: InvoiceStatus.COMPLETED, total: 30.00, latestRefundStatus: refundStatus, description: [] }
+      ]
+
+      const wrapper = await mountTable()
+      expect(wrapper.text()).toContain(expectedText)
     })
 
-    const button = wrapper.find('[data-test="btn-invoice-cancel-0"]')
-    expect(button.exists()).toBe(true)
-    await button.trigger('click')
+    it('does not show badge for APPROVED status', async () => {
+      mockDisplayData.list = [{
+        id: 1, statusCode: InvoiceStatus.COMPLETED, total: 30.00,
+        latestRefundStatus: RefundApprovalStatus.APPROVED, description: []
+      }]
 
-    expect(mockCancel).toHaveBeenCalledWith(1)
+      const wrapper = await mountTable()
+      expect(wrapper.text()).not.toContain('REFUND APPROVED')
+    })
   })
 })
diff --git a/web/pay-ui/tests/unit/pages/transaction-view/details.spec.ts b/web/pay-ui/tests/unit/pages/transaction-view/details.spec.ts
new file mode 100644
index 00000000..3a42c4bb
--- /dev/null
+++ b/web/pay-ui/tests/unit/pages/transaction-view/details.spec.ts
@@ -0,0 +1,187 @@
+import { mountSuspended, mockNuxtImport } from '@nuxt/test-utils/runtime'
+import { nextTick } from 'vue'
+import DetailsPage from '~/pages/transaction-view/[id]/[...details].vue'
+
+const {
+  mockT,
+  mockSetBreadcrumbs,
+  mockGetInvoiceComposite,
+  mockGetInvoiceRefundHistory,
+  mockGetRefundRequest,
+  mockPatchRefundRequest,
+  mockRefundInvoice,
+  mockToastAdd
+} = vi.hoisted(() => ({
+  mockT: vi.fn(),
+  mockSetBreadcrumbs: vi.fn(),
+  mockGetInvoiceComposite: vi.fn(),
+  mockGetInvoiceRefundHistory: vi.fn(),
+  mockGetRefundRequest: vi.fn(),
+  mockPatchRefundRequest: vi.fn(),
+  mockRefundInvoice: vi.fn(),
+  mockToastAdd: vi.fn()
+}))
+
+const mockRoute = {
+  params: { id: '123', details: [] as string | string[] },
+  query: {} as Record<string, string | undefined>
+}
+
+mockNuxtImport('useRoute', () => () => mockRoute)
+mockNuxtImport('useI18n', () => () => ({ t: mockT }))
+mockNuxtImport('useToast', () => () => ({ add: mockToastAdd }))
+mockNuxtImport('setBreadcrumbs', () => mockSetBreadcrumbs)
+
+vi.mock('~/composables/transactions/useTransactionView', () => ({
+  useTransactionView: () => ({
+    getInvoiceComposite: mockGetInvoiceComposite,
+    getInvoiceRefundHistory: mockGetInvoiceRefundHistory,
+    getRefundRequest: mockGetRefundRequest,
+    patchRefundRequest: mockPatchRefundRequest,
+    refundInvoice: mockRefundInvoice
+  })
+}))
+
+// We have tests for the individual components, this is mainly to test things like breadcrumbs on the details page
+vi.mock('~/pages/transaction-view/[id]/PaymentDetails.vue', () => ({
+  default: { name: 'PaymentDetails', template: '<div />' }
+}))
+vi.mock('~/pages/transaction-view/[id]/TransactionDetails.vue', () => ({
+  default: { name: 'TransactionDetails', template: '<div />' }
+}))
+vi.mock('~/pages/transaction-view/[id]/InvoiceRefundHistory.vue', () => ({
+  default: { name: 'InvoiceRefundHistory', template: '<div />' }
+}))
+vi.mock('~/pages/transaction-view/[id]/RefundDecisionForm.vue', () => ({
+  default: { name: 'RefundDecisionForm', template: '<div />' }
+}))
+vi.mock('~/pages/transaction-view/[id]/RefundRequestForm.vue', () => ({
+  default: { name: 'RefundRequestForm', template: '<div />' }
+}))
+vi.mock('~/pages/transaction-view/[id]/RefundReviewForm.vue', () => ({
+  default: { name: 'RefundReviewForm', template: '<div />' }
+}))
+
+function setupApiMocks() {
+  mockGetInvoiceComposite.mockResolvedValue(null)
+  mockGetInvoiceRefundHistory.mockResolvedValue({ items: [] })
+  mockGetRefundRequest.mockResolvedValue({})
+}
+
+function setupI18nMock() {
+  mockT.mockImplementation((key: string, params?: Record<string, unknown>) =>
+    params?.id ? `${key}:${params.id}` : key
+  )
+}
+
+async function mountPage() {
+  const wrapper = await mountSuspended(DetailsPage)
+  await nextTick()
+  await new Promise(resolve => setTimeout(resolve, 100))
+  return wrapper
+}
+
+describe('TransactionView [...details] page', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockRoute.params = { id: '123', details: [] }
+    mockRoute.query = {}
+    setupApiMocks()
+    setupI18nMock()
+  })
+
+  it('renders the page', async () => {
+    const wrapper = await mountPage()
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  describe('breadcrumbs — view routing slip entry point (returnType = viewRoutingSlip)', () => {
+    const slipId = 'RS0000123'
+    const returnTo = `/view-routing-slip/${slipId}`
+
+    beforeEach(() => {
+      mockRoute.query = {
+        returnType: 'viewRoutingSlip',
+        returnToId: slipId,
+        returnTo
+      }
+    })
+
+    it('sets FAS Dashboard + routing slip + refund title for initiateRefund mode', async () => {
+      mockRoute.params.details = ['initiateRefund']
+      await mountPage()
+
+      expect(mockSetBreadcrumbs).toHaveBeenCalledWith([
+        { label: 'label.fasDashboard', to: '/home' },
+        { label: expect.stringContaining(slipId), to: returnTo },
+        { label: 'page.transactionView.transactionRefundTitle' }
+      ])
+    })
+
+    it('sets FAS Dashboard + routing slip + refund title for refund-request mode', async () => {
+      mockRoute.params.details = ['refund-request', '5']
+      await mountPage()
+
+      expect(mockSetBreadcrumbs).toHaveBeenCalledWith([
+        { label: 'label.fasDashboard', to: '/home' },
+        { label: expect.stringContaining(slipId), to: returnTo },
+        { label: 'page.transactionView.transactionRefundTitle' }
+      ])
+    })
+
+    it('sets FAS Dashboard + routing slip + information title for view mode', async () => {
+      mockRoute.params.details = ['view']
+      await mountPage()
+
+      expect(mockSetBreadcrumbs).toHaveBeenCalledWith([
+        { label: 'label.fasDashboard', to: '/home' },
+        { label: expect.stringContaining(slipId), to: returnTo },
+        { label: 'page.transactionView.transactionInformationTitle' }
+      ])
+    })
+
+    it('falls back to Transactions breadcrumb when returnToId is missing', async () => {
+      // returnType is set but returnToId is absent — condition fails, falls back
+      mockRoute.query = { returnType: 'viewRoutingSlip', returnTo }
+      mockRoute.params.details = ['initiateRefund']
+      await mountPage()
+
+      expect(mockSetBreadcrumbs).toHaveBeenCalledWith([
+        { label: 'page.transactionView.breadcrumb.transactions', to: '/transactions' },
+        { label: 'page.transactionView.transactionRefundTitle' }
+      ])
+    })
+  })
+
+  describe('breadcrumbs — standard transactions entry point (no returnType)', () => {
+    it('sets Transactions + information title for view mode', async () => {
+      mockRoute.params.details = ['view']
+      await mountPage()
+
+      expect(mockSetBreadcrumbs).toHaveBeenCalledWith([
+        { label: 'page.transactionView.breadcrumb.transactions', to: '/transactions' },
+        { label: 'page.transactionView.transactionInformationTitle' }
+      ])
+    })
+
+    it('sets Transactions + refund title for initiateRefund mode', async () => {
+      mockRoute.params.details = ['initiateRefund']
+      await mountPage()
+
+      expect(mockSetBreadcrumbs).toHaveBeenCalledWith([
+        { label: 'page.transactionView.breadcrumb.transactions', to: '/transactions' },
+        { label: 'page.transactionView.transactionRefundTitle' }
+      ])
+    })
+
+    it('sets Transactions + refund title for refund-request mode', async () => {
+      mockRoute.params.details = ['refund-request', '5']
+      await mountPage()
+
+      expect(mockSetBreadcrumbs).toHaveBeenCalledWith([
+        { label: 'page.transactionView.breadcrumb.transactions', to: '/transactions' },
+        { label: 'page.transactionView.transactionRefundTitle' }
+      ])
+    })
+  })
+})