bagis/resources/js/components/DonationCard.vue

<template>
  <div class="card">
    <div class="card-header">Donate</div>

    <div class="card-body">
      <form method="POST" action>
        <div class="form-group row">
          <label for="currency" class="col-md-4 col-form-label text-md-right">Donation currency</label>

          <div class="col-md-8">
            <div class="row">
              <div class="col" v-for="currencyItem in currencies" :key="currencyItem.code">
                <button
                  type="button"
                  class="btn btn-block"
                  :class="{'btn-primary':currency==currencyItem.code, 'btn-outline-primary':currency!=currencyItem.code}"
                  @click="currency=currencyItem.code"
                >{{currencyItem.symbol}} | {{currencyItem.name}}</button>
              </div>
            </div>
          </div>
        </div>
        <div class="form-group row">
          <label for="frequency" class="col-md-4 col-form-label text-md-right">Donation frequency</label>

          <div class="col-md-8">
            <div class="row">
              <div class="col" v-for="frequencyItem in frequencies" :key="frequencyItem.code">
                <button
                  type="button"
                  class="btn btn-block"
                  :class="{'btn-primary':frequency==frequencyItem.code, 'btn-outline-primary':frequency!=frequencyItem.code}"
                  @click="frequency=frequencyItem.code"
                >{{frequencyItem.name}}</button>
              </div>
            </div>
          </div>
        </div>
        <div class="form-group row">
          <label for="donationPackage" class="col-md-4 col-form-label text-md-right">Donation amount</label>

          <div class="col-md-8">
            <div class="row">
              <div
                class="col-6"
                v-for="donationPackageItem in donationPackages"
                :key="donationPackageItem.id"
              >
                <button
                  type="button"
                  class="btn btn-block mb-2"
                  :class="{'btn-primary':donationPackage==donationPackageItem.id, 'btn-outline-primary':donationPackage!=donationPackageItem.id}"
                  @click="setDonationPackage(donationPackageItem.id)"
                >
                  <span>{{activeCurrency.symbol}}</span>
                  <span v-if="frequency=='once'">{{donationPackageItem.once_amount}}</span>
                  <span v-else-if="frequency=='monthly'">{{donationPackageItem.monthly_amount}} /mo</span>
                  <span
                    v-else-if="frequency=='annually'"
                  >{{donationPackageItem.annually_amount}} /yr</span>

                  <br />
                  <small>{{donationPackageItem.name}}</small>
                </button>
              </div>
              <div class="col-6">
                <button
                  type="button"
                  class="btn btn-block mb-2"
                  :class="{'btn-primary':donationPackage==null, 'btn-outline-primary':donationPackage!=null}"
                  @click="setDonationPackage(null)"
                >
                  <small>other</small>
                  <br />

                  <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="input-group-text">{{activeCurrency.symbol}}</span>
                    </div>
                    <input
                      type="number"
                      class="form-control"
                      aria-label="Amount"
                      v-model.number="amount"
                      @keypress="onlyNumber"
                    />
                    <div
                      class="input-group-append"
                      v-if="frequency=='monthly' || frequency=='annually'"
                    >
                      <span v-if="frequency=='monthly'" class="input-group-text">/mo</span>
                      <span v-else-if="frequency=='annually'" class="input-group-text">/yr</span>
                    </div>
                  </div>
                </button>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="form-group row">
          <label for="email" class="col-md-4 col-form-label text-md-right">E-Mail Address</label>

          <div class="col-md-6">
            <input
              id="email"
              type="email"
              class="form-control is-invalid"
              name="email"
              required
              autocomplete="email"
              autofocus
            />
            <span class="invalid-feedback" role="alert">
              <strong>Sample error</strong>
            </span>
          </div>
        </div>

        <div class="form-group row">
          <label for="password" class="col-md-4 col-form-label text-md-right">Password</label>

          <div class="col-md-6">
            <input
              id="password"
              type="password"
              class="form-control"
              name="password"
              required
              autocomplete="current-password"
            />
          </div>
        </div>

        <div class="form-group row">
          <div class="col-md-6 offset-md-4">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="remember" id="remember" />
              <label class="form-check-label" for="remember">Remember Me</label>
            </div>
          </div>
        </div>-->

        <div class="form-group row mb-0">
          <div class="col-md-8 offset-md-4">
            <button type="submit" class="btn btn-primary btn-lg">Donate {{amountText}}</button>

            <!-- <a class="btn btn-link" href="#">Forgot Your Password?</a> -->
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currency: "USD",
      frequency: "monthly",
      donationPackage: 4,
      amount: 25,
      currencies: [
        { name: "USD", code: "USD", symbol: "$" },
        { name: "EUR", code: "EUR", symbol: "€" },
        { name: "TRY", code: "TRY", symbol: "₺" }
      ],
      frequencies: [
        { name: "once", code: "once" },
        { name: "monthly", code: "monthly" },
        { name: "annually", code: "annually" }
      ],
      donationPackages: [
        {
          id: 1,
          name: "Super Major Donor",
          once_amount: 2500,
          monthly_amount: 250,
          annually_amount: 2500
        },
        {
          id: 2,
          name: "Major Donor",
          once_amount: 1000,
          monthly_amount: 100,
          annually_amount: 1000
        },
        {
          id: 3,
          name: "Rare Earths Level",
          once_amount: 500,
          monthly_amount: 50,
          annually_amount: 500
        },
        {
          id: 4,
          name: "Titanium Level",
          once_amount: 250,
          monthly_amount: 25,
          annually_amount: 250
        },
        {
          id: 5,
          name: "Gold Level",
          once_amount: 100,
          monthly_amount: 10,
          annually_amount: 100
        },
        {
          id: 6,
          name: "Copper Level",
          once_amount: 50,
          monthly_amount: 5,
          annually_amount: 50
        }
      ]
    };
  },
  computed: {
    activeCurrency() {
      const itemIndex = this.currencies.findIndex(
        item => item.code === this.currency
      );
      if (itemIndex === -1) return false;
      return this.currencies[itemIndex];
    },
    amountText() {
      var text = this.activeCurrency.symbol + this.amount;
      if (this.frequency == "monthly") {
        text = text + "/mo";
      } else if (this.frequency == "annually") {
        text = text + "/yr";
      }
      return text;
    }
  },
  methods: {
    setDonationPackage(id) {
      this.donationPackage = id;
      const itemIndex = this.donationPackages.findIndex(item => item.id === id);
      if (itemIndex !== -1) {
        if (this.frequency == "once") {
          this.amount = this.donationPackages[itemIndex].once_amount;
        } else if (this.frequency == "monthly") {
          this.amount = this.donationPackages[itemIndex].monthly_amount;
        } else if (this.frequency == "annually") {
          this.amount = this.donationPackages[itemIndex].annually_amount;
        }
      }
    },
    onlyNumber($event) {
      //console.log($event.keyCode); //keyCodes value
      let keyCode = $event.keyCode ? $event.keyCode : $event.which;
      if ((keyCode < 48 || keyCode > 57) && keyCode !== 46) {
        // 46 is dot
        $event.preventDefault();
      }
    }
  },
  watch: {
    amount() {
      if (this.amount < 1) {
        this.amount = 5;
      }
    }
  }
};
</script>