24695 - EFT Warranty - Add in Supplier Site (location in AP) EFT refu…

…nd screen (#3167)

auth-web/package.json

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

auth-web/src/components/pay/eft/ShortNameFinancialDialog.vue

@@ -18,6 +18,9 @@
         <p v-if="isDialogTypeCasSupplierNumber">
           Enter the supplier number created in CAS for this short name
         </p>
+        <p v-if="isDialogTypeCasSupplierSite">
+          Enter the supplier site created in CAS for this short name
+        </p>
         <v-text-field
           v-if="isDialogTypeEmail"
           v-model="email"
@@ -33,6 +36,13 @@
           label="CAS Supplier Number"
           persistent-hint
         />
+        <v-text-field
+          v-if="isDialogTypeCasSupplierSite"
+          v-model="casSupplierSite"
+          filled
+          label="CAS Supplier Site"
+          persistent-hint
+        />
       </template>
       <template #actions>
         <div class="d-flex align-center justify-center w-100 h-100 ga-3">
@@ -90,15 +100,19 @@ export default defineComponent({
     const state = reactive<any>({
       email: '',
       casSupplierNumber: '',
+      casSupplierSite: '',
       isDialogTypeEmail: computed(() => props.shortNameFinancialDialogType === 'EMAIL'),
-      isDialogTypeCasSupplierNumber: computed(() => props.shortNameFinancialDialogType === 'CAS_SUPPLIER_NUMBER')
+      isDialogTypeCasSupplierNumber: computed(() => props.shortNameFinancialDialogType === 'CAS_SUPPLIER_NUMBER'),
+      isDialogTypeCasSupplierSite: computed(() => props.shortNameFinancialDialogType === 'CAS_SUPPLIER_SITE')
     })
 
     function isFormInvalid () {
       if (state.isDialogTypeEmail) {
         return !state.email || emailAddressRules.some(rule => rule(state.email) !== true)
       } else if (state.isDialogTypeCasSupplierNumber) {
         return !state.casSupplierNumber
+      } else if (state.isDialogTypeCasSupplierSite) {
+        return !state.casSupplierSite
       }
       return true
     }
@@ -109,6 +123,8 @@ export default defineComponent({
         state.email = state.shortName.email
       } else if (dialogType === 'CAS_SUPPLIER_NUMBER') {
         state.casSupplierNumber = state.shortName.casSupplierNumber
+      } else if (dialogType === 'CAS_SUPPLIER_SITE') {
+        state.casSupplierSite = state.shortName.casSupplierSite
       }
       modalDialog.value.open()
     }
@@ -118,12 +134,15 @@ export default defineComponent({
         return 'Email'
       } else if (state.isDialogTypeCasSupplierNumber) {
         return 'CAS Supplier Number'
+      } else if (state.isDialogTypeCasSupplierSite) {
+        return 'CAS Supplier Site'
       }
     }
 
     function resetAccountLinkingDialog () {
       state.email = ''
       state.casSupplierNumber = ''
+      state.casSupplierSite = ''
       emit('close-short-name-email-dialog')
     }
 
@@ -137,6 +156,8 @@ export default defineComponent({
         await PaymentService.patchEFTShortName(state.shortName.id, { email: state.email })
       } else if (state.isDialogTypeCasSupplierNumber) {
         await PaymentService.patchEFTShortName(state.shortName.id, { casSupplierNumber: state.casSupplierNumber })
+      } else if (state.isDialogTypeCasSupplierSite) {
+        await PaymentService.patchEFTShortName(state.shortName.id, { casSupplierSite: state.casSupplierSite })
       }
       emit('on-patch')
       cancelAndResetAccountLinkingDialog()

auth-web/src/components/pay/eft/ShortNameRefund.vue

@@ -206,6 +206,12 @@ export default defineComponent({
         width: '240px',
         value: 'CAS Supplier Number'
       },
+      {
+        col: 'casSupplierSite',
+        hasFilter: false,
+        width: '240px',
+        value: 'CAS Supplier Site'
+      },
       {
         col: 'refundAmount',
         hasFilter: false,

auth-web/src/models/pay/short-name.ts

@@ -89,6 +89,7 @@ export interface ShortNameDetails {
 export interface EFTRefund {
   id: number;
   casSupplierNumber?: string;
+  casSupplierSite?: string;
   comment?: string;
   createdBy?: string;
   createdName?: string;

auth-web/src/models/refund.ts

@@ -13,6 +13,7 @@ export interface EftRefundRequest {
   shortNameId: number
   refundAmount: number
   casSupplierNum: string
+  casSupplierSite: string
   refundEmail: string
   comment?: string
   shortName?: string

auth-web/src/views/pay/eft/ShortNameDetailsView.vue

@@ -40,6 +40,21 @@
             Edit
           </span>
         </div>
+        <div class="mb-2 overflow-wrap">
+          <span class="font-weight-bold">CAS Supplier Site: </span>
+          {{ shortName.casSupplierSite || 'N/A' }}
+          <span
+            class="pl-4 primary--text cursor-pointer"
+            data-test="btn-edit"
+            @click="openShortNameSupplierSiteDialog()"
+          >
+            <v-icon
+              color="primary"
+              size="20"
+            > mdi-pencil-outline</v-icon>
+            Edit
+          </span>
+        </div>
         <div class="overflow-wrap">
           <span class="font-weight-bold">Email: </span>
           <span class="email">{{ shortName.email || 'N/A' }}</span>
@@ -207,6 +222,11 @@ export default defineComponent({
       state.displayShortNameFinancialDialog = true
     }
 
+    function openShortNameSupplierSiteDialog () {
+      state.shortNameFinancialDialogType = 'CAS_SUPPLIER_SITE'
+      state.displayShortNameFinancialDialog = true
+    }
+
     async function onPaymentAction () {
       await loadShortname(props.shortNameId)
       updateState()
@@ -241,6 +261,7 @@ export default defineComponent({
       onShortNamePatch,
       openShortNameEmailDialog,
       openShortNameSupplierNumberDialog,
+      openShortNameSupplierSiteDialog,
       formatCurrency: CommonUtils.formatAmount,
       unsettledAmountHeader,
       closeShortNameLinkingDialog,

auth-web/src/views/pay/eft/ShortNameRefundView.vue

@@ -88,6 +88,29 @@
                 />
               </v-row>
 
+              <v-row>
+                <v-col class="col-6 col-sm-3 font-weight-bold">
+                  CAS Supplier Site
+                </v-col>
+                <v-col
+                  v-if="readOnly"
+                  class="pl-0"
+                >
+                  {{ refundDetails.casSupplierSite }}
+                </v-col>
+                <v-text-field
+                  v-else
+                  v-model.trim="casSupplierSite"
+                  hint="This site should be created in CAS before issuing a refund"
+                  filled
+                  label="CAS Supplier Site"
+                  persistent-hint
+                  data-test="casSupplierSite"
+                  :rules="casSupplierSiteRules"
+                  :disabled="isFormDisabled"
+                />
+              </v-row>
+
               <v-row>
                 <v-col class="col-6 col-sm-3 font-weight-bold">
                   Email
@@ -249,6 +272,7 @@ export default defineComponent({
       refundDetails: {} as EFTRefund,
       refundAmount: undefined,
       casSupplierNum: '',
+      casSupplierSite: '',
       email: '',
       staffComment: '',
       isLoading: false,
@@ -262,6 +286,9 @@ export default defineComponent({
       casSupplierNumRules: [
         v => !!v || 'CAS Supplier Number is required'
       ],
+      casSupplierSiteRules: [
+        v => !!v || 'CAS Supplier Site is required'
+      ],
       emailRules: [
         v => !!v || 'Email is required',
         v => {
@@ -339,6 +366,7 @@ export default defineComponent({
           shortNameId: state.shortNameDetails.id,
           refundAmount: state.refundAmount,
           casSupplierNum: state.casSupplierNum,
+          casSupplierSite: state.casSupplierSite,
           refundEmail: state.email,
           comment: state.staffComment
         }

auth-web/tests/unit/components/ShortNameRefund.spec.ts

@@ -14,7 +14,7 @@ Vue.use(Vuetify)
 Vue.use(VueRouter)
 // Selectors
 const { header, headerTitles, itemRow, itemCell } = baseVdataTable
-const headers = ['Initiated By', 'Comment', 'CAS Supplier Number', 'Refund Amount', 'Actions']
+const headers = ['Initiated By', 'Comment', 'CAS Supplier Number', 'CAS Supplier Site', 'Refund Amount', 'Actions']
 
 describe('ShortNameRefund.vue', () => {
   let wrapper
@@ -28,6 +28,7 @@ describe('ShortNameRefund.vue', () => {
     shortNameRefundResponse = [
       {
         'casSupplierNumber': '123456789',
+        'casSupplierSite': '123456789',
         'comment': 'A test',
         'createdName': 'John Doe',
         'createdOn': '2024-10-17 14:51:27.553425',
@@ -94,8 +95,9 @@ describe('ShortNameRefund.vue', () => {
     expect(titles.at(0).text()).toBe('Initiated By')
     expect(titles.at(1).text()).toBe('Comment')
     expect(titles.at(2).text()).toBe('CAS Supplier Number')
-    expect(titles.at(3).text()).toBe('Refund Amount')
-    expect(titles.at(4).text()).toBe('Actions')
+    expect(titles.at(3).text()).toBe('CAS Supplier Site')
+    expect(titles.at(4).text()).toBe('Refund Amount')
+    expect(titles.at(5).text()).toBe('Actions')
     // table items
     const itemRows = wrapper.findComponent(BaseVDataTable).findAll(itemRow)
     expect(itemRows.length).toBe(shortNameRefundResponse.length)
@@ -104,11 +106,11 @@ describe('ShortNameRefund.vue', () => {
     expect(row1Cells.at(0).text()).toBe('John Doe')
     expect(row1Cells.at(1).text()).toBe('A test')
     expect(row1Cells.at(2).text()).toBe('123456789')
-    expect(row1Cells.at(3).findAll('span').at(0).text()).toBe('$10.00')
-    expect(row1Cells.at(3).findAll('span').at(1).text()).toBe('View Refund Detail')
-    expect(row1Cells.at(4).findAll('button').exists()).toBe(true)
-    expect(row1Cells.at(4).findAll('button').at(0).text()).toBe('Decline')
-    expect(row1Cells.at(4).findAll('button').at(1).text()).toBe('Approve')
+    expect(row1Cells.at(4).findAll('span').at(0).text()).toBe('$10.00')
+    expect(row1Cells.at(4).findAll('span').at(1).text()).toBe('View Refund Detail')
+    expect(row1Cells.at(5).findAll('button').exists()).toBe(true)
+    expect(row1Cells.at(5).findAll('button').at(0).text()).toBe('Decline')
+    expect(row1Cells.at(5).findAll('button').at(1).text()).toBe('Approve')
     // without roles
     wrapper.destroy()
     wrapper = mountComponent([])

auth-web/tests/unit/views/ShortNameRefundView.spec.ts

@@ -56,6 +56,7 @@ describe('ShortNameRefundView.vue', () => {
     expect(wrapper.find('.view-header__title').text()).toBe('Refund Information')
     expect(wrapper.find('[data-test="refundAmount"]').exists()).toBe(true)
     expect(wrapper.find('[data-test="casSupplierNumber"]').exists()).toBe(true)
+    expect(wrapper.find('[data-test="casSupplierSite"]').exists()).toBe(true)
     expect(wrapper.find('[data-test="email"]').exists()).toBe(true)
     expect(wrapper.find('[data-test="staffComment"]').exists()).toBe(true)
   })