31950 - Fix dropdown item missing in Staff Dashboard transactions (#3573)

Author: Jxio

auth-web/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "auth-web",
-  "version": "2.10.31",
+  "version": "2.10.32",
   "appName": "Auth Web",
   "sbcName": "SBC Common Components",
   "private": true,

auth-web/package.json

@@ -217,6 +217,42 @@
           :key="dropdownItem.id"
           class="dropdown-row"
         >
+          <td
+            v-if="isColumnVisible('accountName')"
+            class="dropdown-cell"
+          >
+            <span class="dropdown-item-name">{{ dropdownItem.accountName || 'N/A' }}</span>
+          </td>
+          <td
+            v-if="isColumnVisible('product')"
+            class="dropdown-cell"
+          >
+            <span class="dropdown-item-product">{{ dropdownItem.product }}</span>
+          </td>
+          <td
+            v-if="isColumnVisible('lineItems')"
+            class="dropdown-cell"
+          >
+            <span
+              class="dropdown-item-lineitems"
+              v-html="dropdownItem.lineItems"
+            />
+          </td>
+          <td
+            v-if="isColumnVisible('details')"
+            class="dropdown-cell"
+          >
+            <span
+              class="dropdown-item-details"
+              v-html="dropdownItem.details"
+            />
+          </td>
+          <td
+            v-if="isColumnVisible('businessIdentifier')"
+            class="dropdown-cell"
+          >
+            <span class="dropdown-item-businessid">{{ dropdownItem.businessIdentifier }}</span>
+          </td>
           <td
             v-if="isColumnVisible('lineItemsAndDetails')"
             class="dropdown-cell"
@@ -314,7 +350,9 @@
               <v-icon color="primary">
                 mdi-file-pdf-outline
               </v-icon>
-              <span>Receipt</span>
+              <span>
+                Receipt
+              </span>
             </div>
             <!-- Empty cell for downloads column -->
             <div v-else />
@@ -335,6 +373,7 @@
 import { BaseVDataTable, DatePicker, IconTooltip } from '@/components'
 import { InvoiceStatus, LDFlags, PaymentTypes, SessionStorageKeys } from '@/util/constants'
 import { Ref, computed, defineComponent, nextTick, reactive, ref, toRefs, watch } from '@vue/composition-api'
+import { getApplicationType, getLineItemsDescription, getTransactionDetails } from '@/resources/table-headers/transactions-table/headers'
 import { invoiceStatusDisplay, paymentTypeDisplay } from '@/resources/display-mappers'
 import { BaseTableHeaderI } from '@/components/datatable/interfaces'
 import CommonUtils from '@/util/common-util'
@@ -499,6 +538,11 @@ export default defineComponent({
       folioNumber: item.folioNumber,
       createdName: item.createdName,
       invoiceNumber: item.invoiceNumber,
+      accountName: item.paymentAccount.accountName,
+      lineItems: getLineItemsDescription(item),
+      details: getTransactionDetails(item),
+      businessIdentifier: item.businessIdentifier || 'N/A',
+      product: getApplicationType(item),
       ...overrides
     })
 
@@ -534,6 +578,7 @@ export default defineComponent({
       // Add remaining amount if any
       if (remainingAmount > 0) {
         items.push(createDropdownItem(item, {
+          name: item.createdName || 'N/A',
           id: `remaining-${item.id}`,
           type: '',
           date: item.appliedCredits[0].createdOn,

auth-web/src/components/auth/account-settings/transaction/TransactionsDataTable.vue

@@ -5,6 +5,18 @@ import CommonUtils from '@/util/common-util'
 import { Transaction } from '@/models/transaction'
 import moment from 'moment'
 
+export const getLineItemsDescription = (val: Transaction): string => {
+  return val.lineItems.reduce((resp, lineItem) => `${resp + lineItem.description}<br/>`, '')
+}
+
+export const getTransactionDetails = (val: Transaction): string => {
+  return val.details?.reduce((resp, detail) => `${resp}${detail.label || ''} ${detail.value}<br/>`, '') || 'N/A'
+}
+
+export const getApplicationType = (val: Transaction): string => {
+  return (Object.keys(productDisplay)).includes(val.product) ? productDisplay[val.product] : ''
+}
+
 export const TransactionTableHeaders: BaseTableHeaderI[] = [
   {
     col: 'accountName',
@@ -41,7 +53,7 @@ export const TransactionTableHeaders: BaseTableHeaderI[] = [
       value: ''
     },
     hasFilter: true,
-    itemFn: (val: Transaction) => (Object.keys(productDisplay)).includes(val.product) ? productDisplay[val.product] : '',
+    itemFn: getApplicationType,
     minWidth: '200px',
     value: 'Application Type'
   },
@@ -68,7 +80,7 @@ export const TransactionTableHeaders: BaseTableHeaderI[] = [
     },
     hasFilter: true,
     itemClass: 'line-item',
-    itemFn: (val: Transaction) => val.lineItems.reduce((resp, lineItem) => `${resp + lineItem.description}<br/>`, ''),
+    itemFn: getLineItemsDescription,
     minWidth: '200px',
     value: 'Transaction Type'
   },
@@ -81,7 +93,7 @@ export const TransactionTableHeaders: BaseTableHeaderI[] = [
       value: ''
     },
     hasFilter: true,
-    itemFn: (val: Transaction) => val.details?.reduce((resp, detail) => `${resp}${detail.label || ''} ${detail.value}<br/>`, '') || 'N/A',
+    itemFn: getTransactionDetails,
     minWidth: '200px',
     value: 'Transaction Details'
   },
@@ -226,7 +238,7 @@ export const TransactionTableHeaders: BaseTableHeaderI[] = [
         { text: invoiceStatusDisplay[InvoiceStatus.DELETED], value: InvoiceStatus.DELETED },
         // These are FE only on the backend they are PAID
         { text: invoiceStatusDisplay[InvoiceStatus.PARTIALLY_CREDITED], value: InvoiceStatus.PARTIALLY_CREDITED },
-        { text: invoiceStatusDisplay[InvoiceStatus.PARTIALLY_REFUNDED], value: InvoiceStatus.PARTIALLY_REFUNDED },
+        { text: invoiceStatusDisplay[InvoiceStatus.PARTIALLY_REFUNDED], value: InvoiceStatus.PARTIALLY_REFUNDED }
       ],
       label: 'Status',
       type: 'select',

auth-web/src/resources/table-headers/transactions-table/headers.ts

@@ -1,5 +1,5 @@
 import '../test-utils/composition-api-setup' // important to import this first
-import { InvoiceStatus, PaymentTypes, LDFlags } from '@/util/constants'
+import { InvoiceStatus, LDFlags, PaymentTypes } from '@/util/constants'
 import { Wrapper, createLocalVue, mount } from '@vue/test-utils'
 import { BaseVDataTable } from '@/components/datatable'
 import { DatePicker } from '@/components'
@@ -458,4 +458,50 @@ describe('TransactionsDataTable tests', () => {
     expect(wrapper.vm.canDownloadReceipt(creditedTransaction, false)).toBe(true)
     expect(wrapper.vm.canDownloadReceipt(creditedTransaction, true)).toBe(true)
   })
+
+  it('dropdown should populate all fields from createDropdownItem correctly', async () => {
+    const transaction = createTestTransaction({
+      statusCode: InvoiceStatus.REFUNDED,
+      paymentMethod: PaymentTypes.DIRECT_PAY,
+      total: 100,
+      refundDate: '2023-01-02T10:00:00Z',
+      lineItems: [
+        { description: 'Change of Director', quantity: 1, price: 100 },
+        { description: 'Annual Report', quantity: 1, price: 50 }
+      ],
+      details: [
+        { label: 'Incorporation Number:', value: 'BC0888888' },
+        { label: 'Company Name:', value: 'Test Company' }
+      ],
+      businessIdentifier: 'BC0888888',
+      folioNumber: 'FOLIO456',
+      createdName: 'Joe Doe',
+      invoiceNumber: 'INV456'
+    })
+
+    const { wrapper: testWrapper } = await setupTransactionTest(transaction, wrapper)
+
+    const dropdownItems = testWrapper.vm.getDropdownItems(transaction)
+    expect(dropdownItems.length).toBeGreaterThan(0)
+
+    const refundItem = dropdownItems[0]
+
+    expect(refundItem.accountName).toBe(transaction.paymentAccount.accountName)
+    expect(refundItem.folioNumber).toBe(transaction.folioNumber)
+    expect(refundItem.createdName).toBe(transaction.createdName)
+    expect(refundItem.invoiceNumber).toBe(transaction.invoiceNumber)
+    expect(refundItem.lineItems).toContain('Change of Director')
+    expect(refundItem.lineItems).toContain('Annual Report')
+    expect(refundItem.lineItems).toContain('<br/>')
+    expect(refundItem.details).toContain('Incorporation Number:')
+    expect(refundItem.details).toContain('BC0888888')
+    expect(refundItem.details).toContain('Company Name:')
+    expect(refundItem.details).toContain('Test Company')
+    expect(refundItem.details).toContain('<br/>')
+    expect(refundItem.businessIdentifier).toBe('BC0888888')
+    expect(refundItem.type).toBe('Refund')
+    expect(refundItem.amount).toBe('-$100.00')
+    expect(refundItem.isRefund).toBe(true)
+    expect(refundItem.status).toBe('Refunded')
+  })
 })