bagis/resources/js/components/DonationCard.vue

<template>
  <div class="card">
    <div class="card-body">
      <div class="form-group row mb-0">
        <div class="col-12">
          <h1>Donate</h1>
        </div>
      </div>
      <form method="POST" action="/make-donation">
        <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="setFrequency(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>
        <hr />
        <div class="form-group row mb-0">
          <div class="col-md-8 offset-md-4">
            <h2>Your Info</h2>
          </div>
        </div>
        <div class="form-group row">
          <label for="first_name" class="col-md-4 col-form-label text-md-right">First Name</label>

          <div class="col-md-6">
            <input
              id="first_name"
              type="text"
              class="form-control"
              :class="{'is-invalid':1==0}"
              name="first_name"
              value="John"
              required
            />
            <span class="invalid-feedback" role="alert" v-if="1==0">
              <strong>Sample error</strong>
            </span>
          </div>
        </div>
        <div class="form-group row">
          <label for="last_name" class="col-md-4 col-form-label text-md-right">Last Name</label>

          <div class="col-md-6">
            <input
              id="last_name"
              type="text"
              class="form-control"
              :class="{'is-invalid':1==0}"
              name="last_name"
              value="Doe"
              required
            />
            <span class="invalid-feedback" role="alert" v-if="1==0">
              <strong>Sample error</strong>
            </span>
          </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="show_name"
                id="show_name"
                value="1"
              />
              <label class="form-check-label" for="show_name">Show my name on donors list</label>
            </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"
              name="email"
              required
              autocomplete="email"
              value="john@doe.comi"
            />
          </div>
        </div>
        <hr />
        <div class="form-group row mb-0">
          <div class="col-md-8 offset-md-4">
            <h2>Credit Card Info</h2>
          </div>
        </div>
        <div class="form-group row">
          <label
            for="card_holder_name"
            class="col-md-4 col-form-label text-md-right"
          >Card Holder Name</label>

          <div class="col-md-6">
            <input
              id="card_holder_name"
              type="text"
              class="form-control"
              :class="{'is-invalid':1==0}"
              name="card_holder_name"
              value="John Doe"
              required
            />
            <span class="invalid-feedback" role="alert" v-if="1==0">
              <strong>Sample error</strong>
            </span>
          </div>
        </div>
        <div class="form-group row">
          <label for="card_number" class="col-md-4 col-form-label text-md-right">Credit Card Number</label>

          <div class="col-md-6">
            <input
              id="card_number"
              type="tel"
              class="form-control"
              :class="{'is-invalid':1==0}"
              name="card_number"
              required
              minlength="15"
              maxlength="16"
              autocomplete="off"
              placeholder="################"
              value="5400010000000004"
              v-cardformat:restrictNumeric
            />
            <span class="invalid-feedback" role="alert" v-if="1==0">
              <strong>Sample error</strong>
            </span>
          </div>
        </div>
        <div class="form-group row">
          <label
            for="card_expire_month"
            class="col-md-4 col-form-label text-md-right"
          >Credit Card Expiration</label>

          <div class="col-3">
            <input
              id="card_expire_month"
              type="tel"
              class="form-control"
              :class="{'is-invalid':1==0}"
              name="card_expire_month"
              required
              autocomplete="card_expire_month"
              placeholder="MM"
              minlength="2"
              maxlength="2"
              value="12"
              v-cardformat:restrictNumeric
            />
          </div>
          <div class="col-3">
            <input
              id="card_expire_year"
              type="tel"
              class="form-control"
              :class="{'is-invalid':1==0}"
              name="card_expire_year"
              required
              autocomplete="card_expire_year"
              placeholder="YY"
              minlength="2"
              maxlength="2"
              value="30"
              v-cardformat:restrictNumeric
            />
          </div>
        </div>
        <div class="form-group row">
          <label for="card_cvc" class="col-md-4 col-form-label text-md-right">Credit Card CVC</label>

          <div class="col-md-3">
            <input
              id="card_cvc"
              type="tel"
              class="form-control"
              :class="{'is-invalid':1==0}"
              name="card_cvc"
              required
              autocomplete="card_cvc"
              placeholder="***"
              minlength="3"
              maxlength="4"
              value="123"
              v-cardformat:restrictNumeric
            />
          </div>
        </div>
        <hr />
        <div class="form-group row mb-0">
          <div class="col-md-8 offset-md-4">
            <h2>Billing Address</h2>
          </div>
        </div>
        <div class="form-group row">
          <label
            for="billing_contact_name"
            class="col-md-4 col-form-label text-md-right"
          >Contact Name</label>

          <div class="col-md-6">
            <input
              id="billing_contact_name"
              type="text"
              class="form-control"
              :class="{'is-invalid':1==0}"
              name="billing_contact_name"
              value="John Doe"
              required
            />
            <span class="invalid-feedback" role="alert" v-if="1==0">
              <strong>Sample error</strong>
            </span>
          </div>
        </div>
        <div class="form-group row">
          <label for="billing_address" class="col-md-4 col-form-label text-md-right">Address</label>

          <div class="col-md-6">
            <input
              id="billing_address"
              type="text"
              class="form-control"
              :class="{'is-invalid':1==0}"
              name="billing_address"
              value="Freedom St. 18/7"
              required
            />
            <span class="invalid-feedback" role="alert" v-if="1==0">
              <strong>Sample error</strong>
            </span>
          </div>
        </div>
        <div class="form-group row">
          <label for="billing_city" class="col-md-4 col-form-label text-md-right">City</label>

          <div class="col-md-6">
            <input
              id="billing_city"
              type="text"
              class="form-control"
              :class="{'is-invalid':1==0}"
              name="billing_city"
              value="Istanbul"
              required
            />
            <span class="invalid-feedback" role="alert" v-if="1==0">
              <strong>Sample error</strong>
            </span>
          </div>
        </div>
        <div class="form-group row">
          <label for="billing_country" class="col-md-4 col-form-label text-md-right">Country</label>

          <div class="col-md-6">
            <input
              id="billing_country"
              type="text"
              class="form-control"
              :class="{'is-invalid':1==0}"
              name="billing_country"
              value="Turkey"
              required
            />
            <span class="invalid-feedback" role="alert" v-if="1==0">
              <strong>Sample error</strong>
            </span>
          </div>
        </div>
        <div class="form-group row">
          <label for="billing_zipcode" class="col-md-4 col-form-label text-md-right">
            Zip Code
            <small>optional</small>
          </label>

          <div class="col-md-3">
            <input
              id="billing_zipcode"
              type="text"
              class="form-control"
              :class="{'is-invalid':1==0}"
              name="billing_zipcode"
              value
            />
            <span class="invalid-feedback" role="alert" v-if="1==0">
              <strong>Sample error</strong>
            </span>
          </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>
        <input type="hidden" name="amount" :value="amount" />
        <input type="hidden" name="frequency" :value="frequency" />
        <input type="hidden" name="currency" :value="currency" />
        <input type="hidden" name="_token" :value="csrfToken" />
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      card_number: null,
      card_expire_month: null,
      card_expire_year: null,
      currency: "USD",
      frequency: "monthly",
      donationPackage: 4,
      amount: 25,
      currencies: [
        { name: "USD", code: "USD", symbol: "$" },
        { name: "EUR", code: "EUR", symbol: "€" },
        { name: "TRY", code: "TL", 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;
    },
    csrfToken() {
      return document
        .querySelector('meta[name="csrf-token"]')
        .getAttribute("content");
    }
  },
  methods: {
    setFrequency(code) {
      this.frequency = code;
      this.setAmountByPackage();
    },
    setDonationPackage(id) {
      this.donationPackage = id;
      this.setAmountByPackage();
    },
    setAmountByPackage() {
      const itemIndex = this.donationPackages.findIndex(
        item => item.id === this.donationPackage
      );
      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>