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>
          <p>
            Özgür Yazılım Derneği is a registered association in İstanbul,
            Turkey with the number 34-242-113
          </p>
        </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-6 col-md-4"
                v-for="currencyItem in currencies"
                :key="currencyItem.code"
              >
                <button
                  type="button"
                  class="btn btn-block mb-2"
                  :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-6 col-md-4"
                v-for="frequencyItem in frequencies"
                :key="frequencyItem.code"
              >
                <button
                  type="button"
                  class="btn btn-block mb-2"
                  :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-12 col-md-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"
              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"
              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"
            />
          </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"
              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="################"
              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"
              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"
              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-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"
              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"
              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"
              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"
              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"
              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"
            />
            <span class="invalid-feedback" role="alert" v-if="1 == 0">
              <strong>Sample error</strong>
            </span>
          </div>
        </div>
        <div class="form-group row">
          <label for="captcha" class="col-md-4 col-form-label text-md-right">
            <img :src="captcha_src" />
          </label>

          <div class="col-md-3">
            <input
              id="captcha"
              type="text"
              placeholder="Captcha"
              class="form-control"
              :class="{ 'is-invalid': 1 == 0 }"
              name="captcha"
            />
            <input type="hidden" name="captcha_key" :value="captcha_key" />
            <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 {
      captcha_src: null,
      captcha_key: null,
      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: 20,
          annually_amount: 100,
        },
        {
          id: 6,
          name: "Copper Level",
          once_amount: 50,
          monthly_amount: 10,
          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;
      }
    },
  },
  mounted() {
    axios.get("/captcha/api/math").then((response) => {
      this.captcha_src = response.data.img;
      this.captcha_key = response.data.key;
    });
  },
};
</script>