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">
                <input id="firstName" class="input" type="text" required />
              </div>
            </div>
            <div class="field">
              <label class="label">Last Name</label>

              <div class="control">
                <input class="input" type="text" required />
              </div>
            </div>

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

              <div class="control">
                <input class="input" type="email" required />
              </div>
              <p class="help">Example: you@example.com</p>
            </div>

            <div class="field">
              <label class="label">Phone Number</label>
              <div class="control">
                <input class="input" type="tel" pattern="[0-9]{10}" required />
              </div>
              <p class="help">Example: 7571234567</p>
            </div>

            <label class="checkbox">
              <input type="checkbox" />
              May we text order updates and questions to this number?
            </label>
          </div>
          <div class="column">
            <div class="field">
              <label class="label">Country</label>

              <div class="control">
                <div class="select">
                  <select required>
                    <option selected>United States</option>
                  </select>
                </div>
              </div>
            </div>

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

              <div class="control">
                <input class="input" type="text" required />
              </div>
            </div>
            <div class="field">
              <label class="label">Address 2 (Optional)</label>

              <div class="control">
                <input class="input" type="text" />
              </div>
            </div>

            <div class="field">
              <label class="label">City</label>
              <div class="control">
                <input class="input" type="text" required />
              </div>
            </div>

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

              <div class="select">
                <select required>
                  <option selected>VA</option>
                </select>
              </div>
            </div>

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

              <input class="input" type="text" pattern="[0-9]{5}" required />
            </div>
          </div>
        </div>
      </section>

      <section class="section">
        <h1 class="title">Payment</h1>
        <hr />
        payment option (mailed check, paypal, cash or check on delivery)
      </section>

      <section class="section">
        <h1 class="title">Delivery Options</h1>
        <hr />
        <div class="control">
          <label class="radio">
            <input type="radio" name="delivery" />
            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>
      </section>

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

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