26980 - Split Credits into PAD and ONLINE Banking Credits (#3455)

Author: seeker25

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

@@ -21,11 +21,28 @@
         {{ title }}
       </h2>
     </header>
-    <section v-if="showCredit && credit !== 0">
+    <section v-if="showCredit && (hasPadCredit || hasObCredit)">
       <v-divider class="mb-8" />
-      <h2>Account Credit: <span class="cad-credit ml-4">CAD</span> ${{ credit.toFixed(2) }}</h2>
+      <div class="credit-header-row">
+        <span class="font-weight-bold">Account Credit Available:</span>
+        <span
+          v-if="hasPadCredit"
+          class="credit-method-amount ml-4"
+        >
+          <span class="font-weight-bold credit-method-name">{{ paymentTypeDisplay.PAD }}</span>
+          <span class="font-weight-bold ml-1">CAD ${{ padCredit.toFixed(2) }}</span>
+        </span>
+        <span
+          v-if="hasObCredit"
+          class="credit-method-amount ml-4"
+        >
+          <span class="font-weight-bold credit-method-name">{{ paymentTypeDisplay.ONLINE_BANKING }}</span>
+          <span class="font-weight-bold ml-1">${{ obCredit.toFixed(2) }}</span>
+        </span>
+      </div>
       <p class="credit-details mt-1">
-        You have a credit of ${{ credit.toFixed(2) }} on this account.
+        Credit for different payment methods are not transferable. To use your credit, please navigate
+        to the Product and Payment page and select the related payment method.
       </p>
       <v-divider class="mb-8 mt-8" />
     </section>
@@ -126,6 +143,7 @@ import { StatusCodes } from 'http-status-codes'
 import TransactionsDataTable from './TransactionsDataTable.vue'
 import { getTransactionTableHeaders } from '@/resources/table-headers'
 import moment from 'moment'
+import { paymentTypeDisplay } from '@/resources/display-mappers/payment-type-display'
 import { useOrgStore } from '@/stores/org'
 
 export default defineComponent({
@@ -151,7 +169,12 @@ export default defineComponent({
     const { clearAllFilters, getTransactionReport, loadTransactionList, setViewAll, defaultSearchToOneYear } = useTransactions()
 
     const state = reactive({
-      isLoading: false
+      isLoading: false,
+      obCredit: 0,
+      padCredit: 0,
+      paymentMethod: null,
+      hasPadCredit: computed(() => state.padCredit > 0),
+      hasObCredit: computed(() => state.obCredit > 0)
     })
 
     // FUTURE: vue3 we can set this fn explicitly in the resource instead of doing it here
@@ -186,8 +209,6 @@ export default defineComponent({
       })
     })
 
-    const credit = ref(0)
-
     const isTransactionsAllowed = computed((): boolean => {
       return orgStore.hasPermission(Permission.TRANSACTION_HISTORY)
     })
@@ -196,9 +217,13 @@ export default defineComponent({
       const accountId = currentOrgPaymentDetails.value?.accountId
       if (!accountId || Number(accountId) !== currentOrganization.value?.id) {
         const paymentDetails: OrgPaymentDetails = await orgStore.getOrgPayments(currentOrganization.value?.id)
-        credit.value = Number(paymentDetails?.credit || 0)
+        state.obCredit = Number(paymentDetails?.obCredit || 0)
+        state.padCredit = Number(paymentDetails?.padCredit || 0)
+        state.paymentMethod = paymentDetails.paymentMethod || ''
       } else {
-        credit.value = Number(currentOrgPaymentDetails.value?.credit || 0)
+        state.obCredit = Number(currentOrgPaymentDetails.value?.obCredit || 0)
+        state.padCredit = Number(currentOrgPaymentDetails.value?.padCredit || 0)
+        state.paymentMethod = currentOrgPaymentDetails.value?.paymentMethod || ''
       }
     }
 
@@ -245,8 +270,8 @@ export default defineComponent({
       headerSelections,
       headersSelected,
       sortedHeaders,
-      credit,
-      exportCSV
+      exportCSV,
+      paymentTypeDisplay
     }
   }
 })
@@ -341,4 +366,16 @@ export default defineComponent({
   .loading-container {
     background: rgba(255,255,255, 0.8);
   }
+
+  .credit-header-row {
+    display: flex;
+    align-items: center;
+    font-size: 1.15rem;
+  }
+  .credit-method-amount {
+    font-size: 1.15rem;
+  }
+  .credit-method-name {
+    color: $gray7;
+  }
 </style>

auth-web/src/components/pay/PayWithCreditCard.vue

@@ -41,15 +41,25 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from '@vue/composition-api'
 
-import { Component, Prop, Vue } from 'vue-property-decorator'
-
-@Component({})
-export default class PayWithCreditCard extends Vue {
-  @Prop({ default: false }) showPayWithOnlyCC: boolean
-  @Prop({ default: 0 }) totalBalanceDue: number
-  @Prop({ default: false }) partialCredit: boolean
-}
+export default defineComponent({
+  name: 'PayWithCreditCard',
+  props: {
+    showPayWithOnlyCC: {
+      type: Boolean,
+      default: false
+    },
+    totalBalanceDue: {
+      type: Number,
+      default: 0
+    },
+    partialCredit: {
+      type: Boolean,
+      default: false
+    }
+  }
+})
 </script>
 
 <style lang="scss" scoped>

auth-web/src/components/pay/PayWithOnlineBanking.vue

@@ -2,7 +2,8 @@
   <v-card elevation="0">
     <v-card-text class="heading-info py-7 px-8">
       <h2 class="mb-2">
-        Balance Due: <span class="ml-2">{{ overCredit ? '-': '' }}${{ totalBalanceDue.toFixed(2) }}</span>
+        Transaction Amount: <span class="ml-2">${{ originalAmount.toFixed(2) }}</span><br>
+        Balance Due: <span class="ml-2">${{ totalBalanceDue.toFixed(2) }}</span>
       </h2>
       <template v-if="overCredit">
         <p class="mb-6">
@@ -56,42 +57,55 @@
 </template>
 
 <script lang="ts">
+import { defineComponent, onMounted, reactive, toRefs, watch } from '@vue/composition-api'
 
-import { Component, Prop, Watch } from 'vue-property-decorator'
-import Vue from 'vue'
+export default defineComponent({
+  name: 'PayWithOnlineBanking',
+  props: {
+    onlineBankingData: {
+      type: Object,
+      required: true
+    },
+    showPayWithOnlyCC: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup (props) {
+    const state = reactive({
+      payWithCreditCard: false,
+      totalBalanceDue: 0,
+      cfsAccountId: '',
+      payeeName: '',
+      overCredit: false,
+      creditBalance: 0,
+      partialCredit: false,
+      credit: 0,
+      originalAmount: 0
+    })
 
-@Component
-export default class PayWithOnlineBanking extends Vue {
-  @Prop() onlineBankingData: any
-  @Prop({ default: false }) showPayWithOnlyCC: boolean
-  private payWithCreditCard: boolean = false
-  private totalBalanceDue = 0
-  private cfsAccountId: string = ''
-  private payeeName: string = ''
-  private overCredit:boolean = false
-  private creditBalance = 0
-  private partialCredit:boolean = false
-  private credit = 0
+    const updateOnlineBankingData = () => {
+      state.totalBalanceDue = props.onlineBankingData?.totalBalanceDue || 0
+      state.payeeName = props.onlineBankingData?.payeeName
+      state.cfsAccountId = props.onlineBankingData?.cfsAccountId || ''
+      state.overCredit = props.onlineBankingData?.overCredit || false
+      state.partialCredit = props.onlineBankingData?.partialCredit || false
+      state.creditBalance = props.onlineBankingData?.creditBalance || 0
+      state.credit = props.onlineBankingData?.credit || 0
+      state.originalAmount = props.onlineBankingData?.originalAmount || 0
+    }
 
-  @Watch('onlineBankingData', { deep: true })
-  async updateonlineBankingData () {
-    this.setData()
-  }
+    watch(() => props.onlineBankingData, updateOnlineBankingData, { deep: true })
 
-  private setData () {
-    this.totalBalanceDue = this.onlineBankingData?.totalBalanceDue || 0
-    this.payeeName = this.onlineBankingData?.payeeName
-    this.cfsAccountId = this.onlineBankingData?.cfsAccountId || ''
-    this.overCredit = this.onlineBankingData?.overCredit || false
-    this.partialCredit = this.onlineBankingData?.partialCredit || false
-    this.creditBalance = this.onlineBankingData?.creditBalance || 0
-    this.credit = this.onlineBankingData?.credit || 0
-  }
+    onMounted(() => {
+      updateOnlineBankingData()
+    })
 
-  private mounted () {
-    this.setData()
+    return {
+      ...toRefs(state)
+    }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>