userland/src/views/AddFundsPayment.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-payment">
    <h2>Seleccione medio de pago</h2>
    <div class="payment-methods">
      <template v-for="(paymentMethod, index) in paymentMethods">
        <router-link
          :key="index"
          :to="linkTo(paymentMethod)"
          class="payment-method"
        >
          <img
            :src="image(paymentMethod)"
            :alt="paymentMethod.title"
            class="img"
          >
          <div class="description">
            {{ paymentMethod.description }}
          </div>
        </router-link>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AddFundsPayment',
  data() {
    return {
      paymentMethods: [],
    };
  },
  beforeCreate() {
    this.$fetcher.haweseGet('/gateways/payment-methods/purchase')
      .then((body) => { this.paymentMethods = body; });
  },
  methods: {
    linkTo(paymentMethod) {
      return `/add-funds/${paymentMethod.gateway}?${paymentMethod.property}=${paymentMethod.const}`;
    },
    image(paymentMethod) {
      return `/img/payment_methods/${paymentMethod.gateway}.${paymentMethod.const}.svg`;
    },
  },
};
</script>

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

.add-funds-payment {
  > h2 {
    @extend .text-center;
  }

  > .payment-methods {
    @extend .row;
    @extend .text-center;
    @extend .mx-1;

    > a.payment-method {
      @extend .col-lg-6;
      @extend .mx-auto;
      @extend .d-flex;
      @extend .flex-column;
      @extend .justify-content-center;

      transition: all 1s ease;
      height: 9rem;
      color: var(--dark);

      > .description {
        @extend .mx-auto;
        width: 80%;
      }

      > img {
        @extend .mx-auto;
        width: 80%;
        transition: all 300ms ease;
      }

      &:hover {
        background-color: $gray-200;
        text-decoration: none;

        > img {
          width: 84%;
        }
      }
    }
  }
}
</style>