diff options
Diffstat (limited to 'iridescence/src/components/checkout/CheckoutForm.vue')
| -rw-r--r-- | iridescence/src/components/checkout/CheckoutForm.vue | 177 |
1 files changed, 128 insertions, 49 deletions
diff --git a/iridescence/src/components/checkout/CheckoutForm.vue b/iridescence/src/components/checkout/CheckoutForm.vue index cf73149..482baec 100644 --- a/iridescence/src/components/checkout/CheckoutForm.vue +++ b/iridescence/src/components/checkout/CheckoutForm.vue @@ -1,6 +1,6 @@ <template> <div class="container"> - <form> + <form action="#"> <section class="section"> <h1 class="title">Customer Info</h1> <hr /> @@ -12,6 +12,7 @@ <div class="control has-icons-left"> <input + v-model="formData.firstName" id="firstName" class="input is-rounded" type="text" @@ -29,7 +30,12 @@ <label class="label">Last Name</label> <div class="control has-icons-left"> - <input class="input is-rounded" type="text" required /> + <input + v-model="formData.lastName" + class="input is-rounded" + type="text" + required + /> <span class="icon is-left"> <span class="iconify-inline" @@ -43,7 +49,12 @@ <label class="label">Email Address</label> <div class="control has-icons-left"> - <input class="input is-rounded" type="email" required /> + <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> @@ -55,6 +66,7 @@ <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}" @@ -71,7 +83,7 @@ </div> <label class="checkbox"> - <input type="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> @@ -95,8 +107,10 @@ <div class="control has-icons-left"> <div class="select is-rounded"> - <select required> - <option selected>Virginia</option> + <select v-model="formData.state" required> + <option v-for="state in states" :key="state">{{ + state + }}</option> </select> </div> <span class="icon is-left"> @@ -104,12 +118,23 @@ </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 class="input is-rounded" type="text" required /> + <input + v-model="formData.address1" + class="input is-rounded" + type="text" + required + /> <span class="icon is-left"> <span class="iconify-inline" @@ -122,7 +147,11 @@ <label class="label">Address 2 (Optional)</label> <div class="control has-icons-left"> - <input class="input is-rounded" type="text" /> + <input + v-model="formData.address2" + class="input is-rounded" + type="text" + /> <span class="icon is-left"> <span class="iconify-inline" @@ -135,7 +164,12 @@ <div class="field"> <label class="label">City</label> <div class="control has-icons-left"> - <input class="input is-rounded" type="text" required /> + <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> @@ -147,6 +181,7 @@ <div class="control has-icons-left"> <input + v-model="formData.zip" class="input is-rounded" type="text" pattern="[0-9]{5}" @@ -162,51 +197,23 @@ </section> <section class="section"> - <h1 class="title">Payment</h1> + <h1 class="title">Payment & Delivery</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 class="content"> + <p> + You will be contacted directly regarding payment and delivery + options. + </p> </div> </section> <section class="section"> - <h1 class="title">Delivery Options</h1> + <h1 class="title">Finish</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 + <h1 class="subtitle">Confirm your order of {{ cartTotal }}?</h1> + <button class="button is-success is-rounded is-medium"> + Place Order </button> </section> </form> @@ -216,7 +223,79 @@ <script> export default { name: "CheckoutForm", - computed: {}, - methods: {} + 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> |