hedera-web/src/pages/Webshop/Pending/Checkout.vue

<template>
  <div class="vn-pp row justify-center">
    <q-card class="vn-w-md">
      <q-card-section>
        <div class="text-h6">{{$t('accountsSummary')}}</div>
        <q-markup-table
          class="q-ma-sm"
          separator="vertical"
          bordered
          flat>
          <tbody>
            <tr>
              <td>{{$t('previousBalance')}}</td>
              <td class="text-right">{{debt | currency}}</td>
            </tr>
          </tbody>
          <tbody
            class="border">
            <tr>
              <td>{{$t('orderTotal')}}</td>
              <td class="text-right">{{order.taxableBase | currency}}</td>
            </tr>
            <tr>
              <td>{{$t('vat')}}</td>
              <td class="text-right">{{order.tax | currency}}</td>
            </tr>
          </tbody>
          <tbody
            class="border">
            <tr class="text-bold">
              <td class="text-left">{{$t('totalDebt')}}</td>
              <td class="text-right">{{totalDebt | currency}}</td>
            </tr>
            <tr v-if="hasCredit">
              <td class="text-left">{{$t('credit')}}</td>
              <td class="text-right">{{credit | currency}}</td>
            </tr>
          </tbody>
          <tbody
            class="border"
            v-if="isCreditExceeded">
            <tr class="text-red text-bold">
              <td class="text-left">{{$t('exceededCredit')}}</td>
              <td class="text-right">{{execeededCredit | currency}}</td>
            </tr>
          </tbody>
        </q-markup-table>
      </q-card-section>
      <q-card-section>
        <div class="text-h6">{{$t('payMethod')}}</div>
        <div v-if="!hasDebt">
          <q-radio
            v-model="payMethod"
            val="balance"
            :label="$t('useMyBalance')"/>
          <div
            v-if="payMethod == 'balance'"
            class="method-desc">
            {{$t('youHaveFaborableBalance')}}
          </div>
        </div>
        <div v-if="canUseCredit">
          <q-radio
            v-model="payMethod"
            val="credit"
            :label="$t('useMyCredit')"/>
          <div
            v-if="payMethod == 'credit'"
            class="method-desc">
            {{$t('youHaveFaborableCredit')}}
          </div>
        </div>
        <div>
          <q-radio
            v-model="payMethod"
            val="card"
            :label="$t('creditCard')"/>
          <div
            v-if="payMethod == 'card'"
            class="method-desc">
            {{$t('youWillRedirectToPayment')}}
          </div>
        </div>
        <div>
          <q-radio
            v-model="payMethod"
            val="transfer"
            :label="$t('bankTransfer')"/>
          <div
            v-if="payMethod == 'transfer'"
            class="method-desc">
            <div>
              {{$t('makeTransfer')}}
            </div>
            <div class="q-mt-sm">
              {{bank.name}}
            </div>
            <div>
              {{bank.iban | iban}}
            </div>
          </div>
        </div>
        <div>
          <q-radio
            v-model="payMethod"
            val="later"
            :label="$t('payLater')"/>
        </div>
      </q-card-section>
      <q-card-section v-if="payMethod == 'card' && isCreditExceeded">
        <div class="text-h6">{{$t('payAmount')}}</div>
        <div>
          <q-radio
            v-model="payAmount"
            val="exceeded"
            :label="$t('exceededCredit') + ', '">
            {{execeededCredit | currency}}
          </q-radio>
        </div>
        <div>
          <q-radio
            v-model="payAmount"
            val="total"
            :label="$t('totalDebt') + ', '">
            {{totalDebt | currency}}
          </q-radio>
        </div>
      </q-card-section>
    </q-card>
    <q-page-sticky position="bottom-right" :offset="[18, 18]">
      <q-btn
        fab
        icon="send"
        color="accent"
        @click="onConfirm"
        :title="$t('confirm')"/>
    </q-page-sticky>
  </div>
</template>

<style lang="stylus" scoped>
  .border
    border-top $layout-border
  .method-desc
    margin-left 3.2em
    color: $grey-8
</style>

<script>
import Page from 'components/Page'

export default {
  name: 'OrdersPendingCheckout',
  mixins: [Page],
  data () {
    return {
      order: {},
      credit: 0,
      debt: 0,
      bank: {},
      payAmount: null,
      payMethod: null
    }
  },
  computed: {
    totalDebt () {
      let order = this.order
      return this.debt + order.taxableBase + order.tax
    },
    execeededCredit () {
      return this.totalDebt - this.credit
    },
    hasCredit () {
      return this.credit > 0
    },
    isCreditExceeded () {
      return this.hasCredit && this.execeededCredit > 0
    },
    canUseCredit () {
      return this.hasCredit && !this.isCreditExceeded
    },
    hasDebt () {
      return this.totalDebt > 0
    }
  },
  mounted () {
    this.$axios.get(`Orders/${this.$route.params.id}/checkoutInfo`)
      .then(res => this.onData(res.data))
  },
  filters: {
    iban (val) {
      if ((typeof val) !== 'string') return val
      return val.match(/.{1,4}/g).join(' ')
    }
  },
  methods: {
    onData (data) {
      this.order = data.order
      this.credit = data.credit
      this.debt = data.debt
      this.bank = data.bank

      this.payAmount = this.isCreditExceeded ? 'exceeded' : 'total'

      if (!this.hasDebt) {
        this.payMethod = 'balance'
      } else if (this.canUseCredit) {
        this.payMethod = 'credit'
      } else {
        this.payMethod = 'card'
      }
    },
    onConfirm () {
      this.$q.dialog({
        message: this.$t('doYouWantToConfirm'),
        cancel: true
      }).onOk(() => {
        this.$axios.post(`Orders/${this.$route.params.id}/confirm`)
          .then(() => {
            this.$q.dialog({
              message: this.$t('orderConfirmedSuccessfully')
            })
          })
      })
    }
  }
}
</script>