userland/src/views/AddFundsVerify.vue

<!--
  Copyright 2019 Hackware SpA <human@hackware.cl>
  This file is part of "Hackware Userland" and licensed under the terms
  of the GNU Affero General Public License version 3, or (at your option)
  a later version. You should have received a copy of this license along
  with the software. If not, see <https://www.gnu.org/licenses/>.
-->

<template>
  <div class="add-funds-verify">
    <h2>Verificación de pago</h2>
    <div v-show="Object.keys(payment).length === 0 || payment.status === 'pending'">
      <i class="fas fa-3x fa-spinner fa-pulse" />
      <p class="lead">
        Estamos esperando la comprobación de tu pago...
      </p>
    </div>
    <div v-show="payment.status === 'aborted'">
      <i class="fas fa-3x fa-times-circle" />
      <p class="lead">
        Tu pago no pudo ser procesado, no se han realizado cargos
      </p>
    </div>
    <div v-show="payment.status === 'completed'">
      <i class="fas fa-3x fa-check-circle" />
      <p class="lead">
        Tu pago ha sido procesado exitosamente
      </p>
      <p class="lead">
        ¡Muchas gracias!
        <i class="fas fa-2x fa-laugh-beam" />
        <i class="fas fa-heart" />
      </p>
      <p class="small">
        Si aún no ves el pago reflejado en tu saldo, por favor
        <router-link :to="{ name: 'transactions' }">
          revísalo aquí
        </router-link>.
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AddFundsVerify',
  data() {
    return {
      payment: {},
    };
  },
  created() {
    this.fetchVerifyPayment();
  },
  methods: {
    fetchVerifyPayment() {
      return this.$fetcher.haweseGet(`/payments/${this.$route.query.uuid}`)
        .then((body) => {
          this.payment = body;
          if (this.payment.status === 'pending') {
            setTimeout(() => { this.fetchVerifyPayment(); }, 15000); // 15 seconds
          } else {
            this.$eventHub.$emit('payment-updated');
          }
        });
    },
  },
};
</script>

<style lang="scss">
@import "../assets/bootstrap/custom";

.add-funds-verify {
  @extend .pt-5;
  @extend .text-center;

  > h2 {
    @extend .pb-3;
  }

  > div {
    >.fa-spinner {
      color: var(--gray);
    }
    >.fa-times-circle {
      color: var(--danger);
    }
    >.fa-check-circle {
      color: var(--success);
    }
    > p {
      @extend .pt-3;
      > .fa-laugh-beam {
        color: var(--yellow);
      }
      > .fa-heart {
        color: var(--red);
        position:relative;
        top: -1rem;
      }
    }
  }
}
</style>