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

---
 iridescence/src/components/Footer.vue              |  10 +-
 iridescence/src/components/Navbar.vue              |  11 +-
 iridescence/src/components/ProductSearch.vue       |   5 +-
 iridescence/src/components/admin/NewProduct.vue    |   2 +-
 .../src/components/checkout/CheckoutForm.vue       | 177 +++++++++++++++------
 5 files changed, 148 insertions(+), 57 deletions(-)

(limited to 'iridescence/src/components')

diff --git a/iridescence/src/components/Footer.vue b/iridescence/src/components/Footer.vue
index ac394c7..d41c4ce 100644
--- a/iridescence/src/components/Footer.vue
+++ b/iridescence/src/components/Footer.vue
@@ -28,7 +28,13 @@
         </div>
 
         <div class="level-item has-text-centered">
-          <p>&copy; {{ year }} The Glassy Ladies, LLC</p>
+          <div class="content">
+            <p>&copy; {{ year }} The Glassy Ladies, LLC</p>
+            <p>
+              Experiencing issues?
+              <a href="mailto:webmaster@theglassyladies.com">Let us know.</a>
+            </p>
+          </div>
         </div>
         <div class="level-item has-text-centered">
           <ul>
@@ -50,7 +56,7 @@
                     class="iconify-inline"
                     data-icon="mdi-monitor-eye"
                   ></span>
-                  <span>Privacy Policy</span>
+                  <span>Privacy</span>
                 </router-link></a
               >
             </li>
diff --git a/iridescence/src/components/Navbar.vue b/iridescence/src/components/Navbar.vue
index f9f99c2..4ad001f 100644
--- a/iridescence/src/components/Navbar.vue
+++ b/iridescence/src/components/Navbar.vue
@@ -19,11 +19,14 @@
       <div :class="navMenu">
         <div class="navbar-start">
           <router-link to="/" class="navbar-item">
-            Shop
+            Home
+          </router-link>
+          <router-link to="/faq" class="navbar-item">
+            F.A.Q.
+          </router-link>
+          <router-link to="/care" class="navbar-item">
+            Care & Handling
           </router-link>
-          <!--<router-link to="/about" class="navbar-item">
-            About
-          </router-link>-->
         </div>
 
         <transition
diff --git a/iridescence/src/components/ProductSearch.vue b/iridescence/src/components/ProductSearch.vue
index 2a7a2e3..e02952a 100644
--- a/iridescence/src/components/ProductSearch.vue
+++ b/iridescence/src/components/ProductSearch.vue
@@ -30,7 +30,10 @@
     <content class="has-text-centered" v-if="noResults">
       <p>
         Couldn't find what you're looking for?
-        <a href="#">We do custom orders too!</a>
+        <a
+          href="mailto:liz@theglassyladies.com?subject=Custom Order Request&body=Please describe what you are looking for and we will be in touch."
+          >We do custom orders too!</a
+        >
       </p>
     </content>
   </div>
diff --git a/iridescence/src/components/admin/NewProduct.vue b/iridescence/src/components/admin/NewProduct.vue
index 3d2e1f2..a1d3304 100644
--- a/iridescence/src/components/admin/NewProduct.vue
+++ b/iridescence/src/components/admin/NewProduct.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="addNewProduct">
-    <button class="button is-primary is-medium" @click="toggleModal">
+    <button class="button is-primary is-medium is-rounded" @click="toggleModal">
       + Add New
     </button>
     <transition
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