summaryrefslogtreecommitdiff
path: root/iridescence/src/components/checkout/CheckoutForm.vue
diff options
context:
space:
mode:
Diffstat (limited to 'iridescence/src/components/checkout/CheckoutForm.vue')
-rw-r--r--iridescence/src/components/checkout/CheckoutForm.vue301
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>
generated by cgit v1.2.3 (git 2.25.1) at 2024-05-14 10:21:58 +0000