hedera-front/src/pages/OrderCheckout.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">{{data.debt | currency}}</td>
            </tr>
          </tbody>
          <tbody
            class="border">
            <tr>
              <td>{{$t('orderTotal')}}</td>
              <td class="text-right">{{data.total | currency}}</td>
            </tr>
            <tr>
              <td>{{$t('vat')}}</td>
              <td class="text-right">{{data.vat | 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">{{data.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">
              {{bankName}}
            </div>
            <div>
              {{bankAccount}}
            </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: 'OrderCheckout',
  mixins: [Page],
  data () {
    return {
      data: {
        debt: -27.52,
        total: 163.13,
        vat: 16.31,
        credit: 50
      },
      payAmount: null,
      payMethod: null,
      bankName: 'BANKINTER SA',
      bankAccount: 'ES81 0128 7635 0205 0000 2291'
    }
  },
  computed: {
    totalDebt () {
      let data = this.data
      return data.debt + data.total + data.vat
    },
    execeededCredit () {
      return this.totalDebt - this.data.credit
    },
    hasCredit () {
      return this.data.credit > 0
    },
    isCreditExceeded () {
      return this.hasCredit && this.execeededCredit > 0
    },
    canUseCredit () {
      return this.hasCredit && !this.isCreditExceeded
    },
    hasDebt () {
      return this.totalDebt > 0
    }
  },
  mounted () {
    this.payAmount = this.isCreditExceeded ? 'exceeded' : 'total'

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