19361 - UXA add Returned Undeliverable to FAS

src/components/ViewRoutingSlip/RefundRequestForm.vue

@@ -24,7 +24,7 @@
       <v-col
         data-test="rsDetail"
         class="col-3 font-weight-bold pb-0"
-        v-if="canEdit || address"
+        v-if="showAddress"
       >
         {{ 'Address' }}
       </v-col>
@@ -64,7 +64,7 @@
           close-on-content-click
           offset-y
           v-model="isExpanded"
-          v-if="!canEdit && currentRefundStatusLabel !== RoutingSlipRefundCodes.PROCESSING"
+          v-if="!canEdit && currentRefundStatusLabel && currentRefundStatusLabel !== RoutingSlipRefundCodes.PROCESSING"
         >
           <template v-slot:activator="{ on, attrs }">
             <v-btn
@@ -73,17 +73,19 @@
               v-on="on"
               small
               class="hover-btn ml-2"
+              color="primary"
               @click="expendStatus"
             >
               Update Status
               <v-icon dense>{{ isExpanded ? 'mdi-menu-up' : 'mdi-menu-down' }}</v-icon>
             </v-btn>
           </template>
-          <v-list>
+          <v-list
+           class="status-list"
+          >
             <v-list-item
                 v-for="status in filteredStatuses"
                 :key="status.code"
-                class="menu-list"
                 @click="updateRefundStatus(status.code)"
               >
               <v-list-item-title>{{ status.text }}</v-list-item-title>
@@ -123,11 +125,12 @@ import { computed, defineComponent, reactive, toRefs } from '@vue/composition-ap
 import { useRefundRequestForm, useRoutingSlipInfo } from '@/composables/ViewRoutingSlip'
 import AddressForm from '@/components/common/AddressForm.vue'
 import { GetRoutingSlipRequestPayload, RefundRequestDetails } from '@/models/RoutingSlip'
-import { RoutingSlipRefundCodes, RoutingSlipRefundStatus } from '@/util/constants'
+import { RoutingSlipRefundCodes, RoutingSlipRefundStatus, SlipStatus } from '@/util/constants'
 import { useRoutingSlip } from '@/composables/useRoutingSlip'
 import { useSearch } from '@/composables/Dashboard/useSearch'
 
 export default defineComponent({
+  name: 'RefundRequestForm',
   components: {
     AddressForm
   },
@@ -153,11 +156,22 @@ export default defineComponent({
 
     const state = reactive({
       currentRefundStatus: routingSlipState.routingSlipDetails.value?.refundStatus,
+      currentStatus: routingSlipState.routingSlipDetails.value?.status,
       isExpanded: false,
       ...refundRequestFormState
     })
 
-    const currentRefundStatusLabel = computed(() => searchState.getRefundStatusText(state.currentRefundStatus))
+    const currentRefundStatusLabel = computed(() => {
+      const refundInProgress = [SlipStatus.REFUNDAUTHORIZED, SlipStatus.REFUNDREQUEST, SlipStatus.REFUNDUPLOADED].includes(state.currentStatus as SlipStatus)
+      const refundComplete = [SlipStatus.REFUNDPROCESSED].includes(state.currentStatus as SlipStatus)
+      if (refundInProgress) {
+        return RoutingSlipRefundCodes.PROCESSING
+      } else if (refundComplete) {
+        return searchState.getRefundStatusText(state.currentRefundStatus)
+      } else {
+        return null
+      }
+    })
 
     const expendStatus = () => {
       state.isExpanded = !state.isExpanded
@@ -171,6 +185,7 @@ export default defineComponent({
       await routingSlipOperations.updateRoutingSlipRefundStatus(status)
       const comment = `Refund status updated from ${searchState.getRefundStatusText(state.currentRefundStatus)} to ${searchState.getRefundStatusText(status)}`
       await routingSlipOperations.updateRoutingSlipComments(comment)
+      context.emit('commentsUpdated')
       state.currentRefundStatus = status
       if (routingSlipOperations.routingSlip.value?.number) {
         const getRoutingSlipRequestPayload: GetRoutingSlipRequestPayload = { routingSlipNumber: routingSlipOperations.routingSlip.value?.number }
@@ -179,7 +194,7 @@ export default defineComponent({
     }
 
     return {
-      ...toRefs(state), // Convert all reactive properties to refs
+      ...toRefs(state),
       currentRefundStatusLabel,
       filteredStatuses,
       expendStatus,
@@ -193,10 +208,24 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.hover-btn {
+  font-size: 16px !important;
+  text-transform: none;
+}
+
 .hover-btn:before {
   background-color: transparent !important;
 }
-.menu-list {
-  font-size: 10px;
+
+.status-list {
+  margin: 0 !important;
+  padding: 0 !important;
+  min-width: auto !important;
+}
+
+.status-list .v-list-item__title {
+  color: #1669BB !important;
+  font-size: 16px !important;
+  padding: 8px 16px !important;
 }
 </style>

src/components/ViewRoutingSlip/RoutingSlipInfo.vue

@@ -75,6 +75,7 @@
                   @update:refundRequestDetails="refundRequestDetails = $event"
                   :isApprovalFlow="isApprovalFlow"
                   :routingSlipDetails="routingSlipDetails"
+                  @commentsUpdated="$emit('commentsUpdated')"
                 >
                 </RefundRequestForm>
               </template>

src/composables/Dashboard/useSearch.ts

@@ -277,9 +277,9 @@ export function useSearch (props, context) {
     reachedEnd.value = await infiniteScrollCallback()
   }, 100) // Adjust the wait time as needed
 
-  function getRefundStatusText (statusCode: string): string {
-    const status = RoutingSlipRefundStatus.find(item => item.code === statusCode)
-    return status.text ? status.text : RoutingSlipRefundCodes.PROCESSING
+  function getRefundStatusText (statusCode: string | undefined): string {
+    const refundStatus = RoutingSlipRefundStatus.find(item => item.code === statusCode)
+    return refundStatus.text ? refundStatus.text : RoutingSlipRefundCodes.PROCESSING
   }
 
   function getStatusFromRefundStatus (statusCode: string): SlipStatus {

src/composables/ViewRoutingSlip/useRefundRequestForm.ts

@@ -20,14 +20,18 @@ export default function useRefundRequestForm (props, context) {
   const chequeAdviceRules = CommonUtils.optionalFieldRule('This field should be maximum of 40 characters', 40)
 
   const name = ref<string>('')
-  const address = ref<Address>(undefined)
+  const address = ref<Address>({})
   const chequeAdvice = ref<string>('')
 
   const canEdit = computed(() => {
     // except "chequeAdvice" , all other field are not editable in approval process
     return !isApprovalFlow.value && isEditing.value
   })
 
+  const showAddress = computed(() => {
+    return canEdit.value || (address.value && Object.values(address.value).some(value => !!value))
+  })
+
   function addressValidity (isValid: boolean): void {
     isAddressValid.value = isValid
   }
@@ -69,6 +73,7 @@ export default function useRefundRequestForm (props, context) {
     addressForm,
     addressValidity,
     isValid,
-    canEdit
+    canEdit,
+    showAddress
   }
 }

src/composables/useRoutingSlip.ts

@@ -126,6 +126,7 @@ export const useRoutingSlip = () => {
 
   const getRoutingSlip = async (getRoutingSlipRequestPayload: GetRoutingSlipRequestPayload) => {
     try {
+      routingSlip.value = null
       const response = await RoutingSlipService.getRoutingSlip(
         getRoutingSlipRequestPayload.routingSlipNumber,
         getRoutingSlipRequestPayload?.showGlobalLoader

src/views/ViewRoutingSlip.vue

@@ -13,27 +13,27 @@
           </header>
         </v-col>
         <v-col cols="12" class="mb-1 py-0 pl-0">
-          <staff-comments :routingSlipNumber="slipId" />
+          <StaffComments :routingSlipNumber="slipId" :key="commentsKey" />
         </v-col>
         <v-col cols="12" class="mb-5">
-          <routing-slip-info />
+          <RoutingSlipInfo  @commentsUpdated="refreshComments" />
         </v-col>
         <v-col cols="12" class="my-5">
-          <payment-information />
+          <PaymentInformation />
         </v-col>
         <v-col cols="12" class="my-5">
-          <link-routing-slip />
+          <LinkRoutingSlip />
         </v-col>
         <v-col cols="12" class="my-5">
-          <routing-slip-transaction />
+          <RoutingSlipTransaction />
         </v-col>
       </v-row>
     </v-container>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator'
+import { defineComponent, ref } from '@vue/composition-api'
 import {
   RoutingSlipInfo,
   PaymentInformation,
@@ -42,19 +42,32 @@ import {
 } from '@/components/ViewRoutingSlip'
 import { useViewRoutingSlip } from '@/composables/ViewRoutingSlip'
 
-@Component({
+export default defineComponent({
+  name: 'ViewRoutingSlip',
   components: {
     RoutingSlipInfo,
     PaymentInformation,
     RoutingSlipTransaction,
     LinkRoutingSlip,
     StaffComments
   },
+  props: {
+    slipId: {
+      type: String,
+      required: true
+    }
+  },
   setup (props) {
     useViewRoutingSlip(props)
+    // Reactive key for forcing re-render
+    const commentsKey = ref(0)
+    const refreshComments = () => {
+      commentsKey.value += 1
+    }
+    return {
+      commentsKey,
+      refreshComments
+    }
   }
 })
-export default class ViewRoutingSlip extends Vue {
-  @Prop() slipId: string
-}
 </script>