From 91b538c776071a7ae60adfa25bfcaccc0403896e Mon Sep 17 00:00:00 2001
From: "Adam T. Carpenter" <atc@53hor.net>
Date: Sun, 27 Dec 2020 09:37:15 -0500
Subject: Added care, privacy, faq, fixed custom order temporarily, fixed site
 title

---
 .../src/components/checkout/CheckoutForm.vue       | 177 +++++++++++++++------
 1 file changed, 128 insertions(+), 49 deletions(-)

(limited to 'iridescence/src/components/checkout')

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>
-- 
cgit v1.2.3