diff options
author | Adam T. Carpenter <atc@53hor.net> | 2022-10-26 21:02:31 -0400 |
---|---|---|
committer | Adam T. Carpenter <atc@53hor.net> | 2022-10-26 21:02:31 -0400 |
commit | 9f3098e80c6b6c87e9bfbfe36239a39e5cafb29f (patch) | |
tree | db9ca419266117facecdff6d30460669f3148efb /iridescence/src/components/checkout | |
parent | f243a3b7341012227d6e8342a65f9c5d7784256f (diff) | |
download | theglassyladies-9f3098e80c6b6c87e9bfbfe36239a39e5cafb29f.tar.xz theglassyladies-9f3098e80c6b6c87e9bfbfe36239a39e5cafb29f.zip |
init: add some stories and personas and begin layout out domain
Diffstat (limited to 'iridescence/src/components/checkout')
-rw-r--r-- | iridescence/src/components/checkout/CheckoutForm.vue | 301 |
1 files changed, 0 insertions, 301 deletions
diff --git a/iridescence/src/components/checkout/CheckoutForm.vue b/iridescence/src/components/checkout/CheckoutForm.vue deleted file mode 100644 index 482baec..0000000 --- a/iridescence/src/components/checkout/CheckoutForm.vue +++ /dev/null @@ -1,301 +0,0 @@ -<template> - <div class="container"> - <form action="#"> - <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 - v-model="formData.firstName" - 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 - v-model="formData.lastName" - 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 - v-model="formData.email" - 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 - v-model="formData.phone" - 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 v-model="formData.sms" 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>USA</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 v-model="formData.state" required> - <option v-for="state in states" :key="state">{{ - state - }}</option> - </select> - </div> - <span class="icon is-left"> - <span class="iconify-inline" data-icon="mdi-map"></span> - </span> - </div> - </div> - <p class="help"> - If you are located outside of the United States, please - <a href="mailto:liz@theglassyladies.com" - >contact us directly regarding your order</a - > - </p> - - <div class="field"> - <label class="label">Address</label> - - <div class="control has-icons-left"> - <input - v-model="formData.address1" - 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 - v-model="formData.address2" - 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 - v-model="formData.city" - 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 - v-model="formData.zip" - 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 & Delivery</h1> - <hr /> - - <div class="content"> - <p> - You will be contacted directly regarding payment and delivery - options. - </p> - </div> - </section> - - <section class="section"> - <h1 class="title">Finish</h1> - <hr /> - <h1 class="subtitle">Confirm your order of {{ cartTotal }}?</h1> - <button class="button is-success is-rounded is-medium"> - Place Order - </button> - </section> - </form> - </div> -</template> - -<script> -export default { - name: "CheckoutForm", - data() { - return { - states: [ - "Virginia", - "Alabama", - "Alaska", - "Arizona", - "Arkansas", - "California", - "Colorado", - "Connecticut", - "Delaware", - "Florida", - "Georgia", - "Hawaii", - "Idaho", - "Illinois", - "Indiana", - "Iowa", - "Kansas", - "Kentucky", - "Louisiana", - "Maine", - "Maryland", - "Massachusetts", - "Michigan", - "Minnesota", - "Mississippi", - "Missouri", - "Montana", - "Nebraska", - "Nevada", - "New Hampshire", - "New Jersey", - "New Mexico", - "New York", - "North Carolina", - "North Dakota", - "Ohio", - "Oklahoma", - "Oregon", - "Pennsylvania", - "Rhode Island", - "South Carolina", - "South Dakota", - "Tennessee", - "Texas", - "Utah", - "Vermont", - "Washington", - "West Virginia", - "Wisconsin", - "Wyoming" - ], - formData: { - firstName: "", - lastName: "", - email: "", - phone: "", - address1: "", - address2: "", - city: "", - state: "Virginia", - country: "USA", - zip: "", - sms: false - } - }; - }, - computed: { - cartTotal() { - return this.$store.getters.cartTotal; - } - } -}; -</script> |