path: root/iridescence/src/components/checkout/CheckoutForm.vue

<template>
  <div class="container">
    <form>
      <section class="section">
        <h1 class="title">Customer Info</h1>
        <hr />

        <div class="columns">
          <div class="column">
            <div class="field">
              <label for="firstName" class="label">First Name</label>

              <div class="control has-icons-left">
                <input
                  id="firstName"
                  class="input is-rounded"
                  type="text"
                  required
                />
                <span class="icon is-left">
                  <span
                    class="iconify-inline"
                    data-icon="mdi-card-account-details"
                  ></span>
                </span>
              </div>
            </div>
            <div class="field">
              <label class="label">Last Name</label>

              <div class="control has-icons-left">
                <input class="input is-rounded" type="text" required />
                <span class="icon is-left">
                  <span
                    class="iconify-inline"
                    data-icon="mdi-card-account-details"
                  ></span>
                </span>
              </div>
            </div>

            <div class="field">
              <label class="label">Email Address</label>

              <div class="control has-icons-left">
                <input class="input is-rounded" type="email" required />
                <span class="icon is-left">
                  <span class="iconify-inline" data-icon="mdi-email"></span>
                </span>
              </div>
              <p class="help">Example: you@example.com</p>
            </div>

            <div class="field">
              <label class="label">Phone Number</label>
              <div class="control has-icons-left">
                <input
                  class="input is-rounded"
                  type="tel"
                  pattern="[0-9]{10}"
                  required
                />
                <span class="icon is-left">
                  <span
                    class="iconify-inline"
                    data-icon="mdi-phone-classic"
                  ></span>
                </span>
              </div>
              <p class="help">Example: 7571234567</p>
            </div>

            <label class="checkbox">
              <input type="checkbox" />
              <span class="iconify" data-icon="mdi-cellphone-android"></span>
              May we text order updates and questions to this number?
            </label>
          </div>
          <div class="column">
            <label class="label">Location</label>
            <div class="field has-addons">
              <div class="control has-icons-left">
                <div class="select is-rounded">
                  <select required>
                    <option selected>United States</option>
                  </select>
                </div>
                <span class="icon is-left">
                  <span
                    class="iconify-inline"
                    data-icon="mdi-flag-variant"
                  ></span>
                </span>
              </div>

              <div class="control has-icons-left">
                <div class="select is-rounded">
                  <select required>
                    <option selected>Virginia</option>
                  </select>
                </div>
                <span class="icon is-left">
                  <span class="iconify-inline" data-icon="mdi-map"></span>
                </span>
              </div>
            </div>

            <div class="field">
              <label class="label">Address</label>

              <div class="control has-icons-left">
                <input class="input is-rounded" type="text" required />
                <span class="icon is-left">
                  <span
                    class="iconify-inline"
                    data-icon="mdi-road-variant"
                  ></span>
                </span>
              </div>
            </div>
            <div class="field">
              <label class="label">Address 2 (Optional)</label>

              <div class="control has-icons-left">
                <input class="input is-rounded" type="text" />
                <span class="icon is-left">
                  <span
                    class="iconify-inline"
                    data-icon="mdi-format-list-numbered"
                  ></span>
                </span>
              </div>
            </div>

            <div class="field">
              <label class="label">City</label>
              <div class="control has-icons-left">
                <input class="input is-rounded" type="text" required />
                <span class="icon is-left">
                  <span class="iconify-inline" data-icon="mdi-city"></span>
                </span>
              </div>
            </div>

            <div class="field">
              <label class="label">Zip Code</label>

              <div class="control has-icons-left">
                <input
                  class="input is-rounded"
                  type="text"
                  pattern="[0-9]{5}"
                  required
                />
                <span class="icon is-left">
                  <span class="iconify-inline" data-icon="mdi-mailbox"></span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="section">
        <h1 class="title">Payment</h1>
        <hr />

        <div class="field">
          <div class="control ">
            <label class="radio">
              <input type="radio" name="payment" checked />
              Cash or check upon delivery
            </label>
            <label class="radio">
              <input type="radio" name="payment" />
              Mail-in cash or check
            </label>
            <label class="radio">
              <input type="radio" name="payment" />
              PayPal, Square
            </label>
          </div>
        </div>
      </section>

      <section class="section">
        <h1 class="title">Delivery Options</h1>
        <hr />
        <div class="field">
          <div class="control ">
            <label class="radio">
              <input type="radio" name="delivery" checked />
              Pick up at studio
            </label>
            <label class="radio">
              <input type="radio" name="delivery" />
              Pick up at Simply Vintage Art Gallery
            </label>
            <label class="radio">
              <input type="radio" name="delivery" />
              Delivery
            </label>
          </div>
        </div>
      </section>

      <section class="section">
        <button class="button is-success is-rounded">
          Continue to Confirmation
        </button>
      </section>
    </form>
  </div>
</template>

<script>
export default {
  name: "CheckoutForm",
  computed: {},
  methods: {}
};
</script>