Implementation of receipt downloads on Transactions table

Author: rodrigo-barraza

auth-web/package-lock.json

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

auth-web/package.json

@@ -146,8 +146,8 @@ export default defineComponent({
     })
 
     // dynamic header selection stuff
-    let preSelectedHeaders = ['createdOn', 'total', 'paymentMethod', 'statusCode', 'actions']
-    if (props.extended) preSelectedHeaders = ['accountName', 'appType', 'lineItems', ...preSelectedHeaders]
+    let preSelectedHeaders = ['createdOn', 'total', 'paymentMethod', 'statusCode', 'downloads', 'actions']
+    if (props.extended) preSelectedHeaders = ['accountName', 'appType', 'lineItems', 'downloads', ...preSelectedHeaders]
     else preSelectedHeaders = ['lineItemsAndDetails', ...preSelectedHeaders]
 
     const headerSelections: BaseTableHeaderI[] = [] // what the user sees in the dropdown

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

@@ -139,6 +139,22 @@
           </v-col>
         </v-row>
       </template>
+      <template #item-slot-downloads="{ item }">
+        <div
+          v-if="item.statusCode === InvoiceStatus.COMPLETED"
+          class="receipt"
+          @click="downloadReceipt(item)"
+        >
+          <v-icon
+            color="primary"
+          >
+            mdi-file-pdf-outline
+          </v-icon>
+          <span>
+            Receipt
+          </span>
+        </div>
+      </template>
     </BaseVDataTable>
   </div>
 </template>
@@ -151,6 +167,7 @@ import { BaseTableHeaderI } from '@/components/datatable/interfaces'
 import CommonUtils from '@/util/common-util'
 import { DEFAULT_DATA_OPTIONS } from '@/components/datatable/resources'
 import { DataOptions } from 'vuetify'
+import PaymentService from '@/services/payment.services'
 import { Transaction } from '@/models'
 import _ from 'lodash'
 import { invoiceStatusDisplay } from '@/resources/display-mappers'
@@ -254,6 +271,13 @@ export default defineComponent({
       }
     })
 
+    async function downloadReceipt (item: Transaction) {
+      const receipt = await PaymentService.postReceipt(item.id);
+      console.log(item);
+      const filename = `bcregistry-receipts-${item.id}.pdf`
+      CommonUtils.fileDownload(receipt.data, filename, 'application/pdf')
+    }
+
     const displayDate = (val: string) => {
       const date = moment.utc(val).toDate()
       return CommonUtils.formatDisplayDate(date, 'MMMM DD, YYYY')
@@ -289,13 +313,18 @@ export default defineComponent({
       updateDateRange,
       loadTransactionList,
       getInvoiceStatus,
-      datePickerValue
+      datePickerValue,
+      downloadReceipt
     }
   }
 })
 </script>
 
 <style lang="scss" scoped>
+.receipt {
+  cursor: pointer;
+  color: var(--v-primary-base);
+}
 .section-heading {
   background-color: $app-background-blue;
   border-radius: 5px 5px 0 0;

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

@@ -223,5 +223,12 @@ export const TransactionTableHeaders: BaseTableHeaderI[] = [
     minWidth: '164px',
     value: '',
     width: '164px'
-  }
+  },
+  {
+    col: 'downloads',
+    hasFilter: false,
+    itemClass: 'line-item',
+    width: '164px',
+    value: 'Downloads'
+  },
 ]

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

@@ -7,10 +7,10 @@ export const getTransactionTableHeaders = (extended = false): BaseTableHeaderI[]
   let headerTitles = []
   if (extended) {
     headerTitles = ['accountName', 'product', 'lineItems', 'details', 'businessIdentifier', 'folioNumber',
-      'createdName', 'createdOn', 'total', 'id', 'invoiceNumber', 'paymentMethod', 'statusCode', 'actions']
+      'createdName', 'createdOn', 'total', 'id', 'invoiceNumber', 'paymentMethod', 'statusCode', 'downloads', 'actions']
   } else {
     headerTitles = ['lineItemsAndDetails', 'folioNumber', 'createdName', 'createdOn',
-      'total', 'id', 'invoiceNumber', 'paymentMethod', 'statusCode', 'actions']
+      'total', 'id', 'invoiceNumber', 'paymentMethod', 'statusCode', 'downloads', 'actions']
   }
 
   for (const i in headerTitles) {

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

@@ -52,6 +52,15 @@ export default class PaymentService {
     return axios.post(url, refundPayload)
   }
 
+  static postReceipt (invoiceId: string | number): AxiosPromise<any> {
+    const url = `${ConfigHelper.getPayAPIURL()}/payment-requests/${invoiceId}/receipts`
+    const headers = { 'Accept': 'application/pdf' }
+    const body = {
+      filingDateTime: new Date().toLocaleDateString('en-CA', { year: 'numeric', month: 'long', day: 'numeric' })
+    }
+    return axios.post(url, body, { headers, responseType: 'blob' as 'json' })
+  }
+
   static refundEFT (refundPayload: EftRefundRequest): AxiosPromise<any> {
     const url = `${ConfigHelper.getPayAPIURL()}/eft-shortnames/shortname-refund`
     return axios.post(url, refundPayload)