updated footer with facebook and privacy, finalized user info contact

form

3 files changed, 137 insertions, 46 deletions

diff --git a/iridescence/src/components/Footer.vue b/iridescence/src/components/Footer.vue
index 709f2c0..d0d4f70 100644
--- a/iridescence/src/components/Footer.vue
+++ b/iridescence/src/components/Footer.vue
@@ -3,7 +3,15 @@
     <footer class="footer">
       <nav class="level">
         <div class="level-item has-text-centered">
-          (Social links)
+          <ul>
+            <li>
+              <a
+                class="navbar-item"
+                href="https://www.facebook.com/glassyladiesart"
+                >Like Us on Facebook</a
+              >
+            </li>
+          </ul>
         </div>
 
         <div class="level-item has-text-centered">
@@ -18,6 +26,13 @@
                 </router-link>
               </a>
             </li>
+            <li>
+              <a
+                ><router-link to="/privacy" class="navbar-item">
+                  Privacy Policy</router-link
+                ></a
+              >
+            </li>
           </ul>
         </div>
       </nav>
diff --git a/iridescence/src/components/checkout/CheckoutForm.vue b/iridescence/src/components/checkout/CheckoutForm.vue
index a2ddfad..ee6c898 100644
--- a/iridescence/src/components/checkout/CheckoutForm.vue
+++ b/iridescence/src/components/checkout/CheckoutForm.vue
@@ -1,48 +1,132 @@
 <template>
   <div class="container">
-    <section class="section">
-      <h1 class="title">Customer Info</h1>
-      <hr />
+    <form>
+      <section class="section">
+        <h1 class="title">Customer Info</h1>
+        <hr />
 
-      <div class="field is-horizontal">
-        <div class="field-label">
-          <label class="label">Name</label>
-        </div>
-        <div class="field-body">
-          <div class="field">
-            <p class="control is-expanded ">
-              <input class="input" type="text" placeholder="given name" />
-            </p>
+        <div class="columns">
+          <div class="column">
+            <div class="field">
+              <label for="firstName" class="label">First Name</label>
+
+              <div class="control">
+                <input id="firstName" class="input" type="text" required />
+              </div>
+            </div>
+            <div class="field">
+              <label class="label">Last Name</label>
+
+              <div class="control">
+                <input class="input" type="text" required />
+              </div>
+            </div>
+
+            <div class="field">
+              <label class="label">Email Address</label>
+
+              <div class="control">
+                <input class="input" type="email" required />
+              </div>
+              <p class="help">Example: you@example.com</p>
+            </div>
+
+            <div class="field">
+              <label class="label">Phone Number</label>
+              <div class="control">
+                <input class="input" type="tel" pattern="[0-9]{10}" required />
+              </div>
+              <p class="help">Example: 7571234567</p>
+            </div>
+
+            <label class="checkbox">
+              <input type="checkbox" />
+              May we text order updates and questions to this number?
+            </label>
           </div>
-          <div class="field">
-            <p class="control is-expanded">
-              <input class="input" type="text" placeholder="surname" />
-            </p>
+          <div class="column">
+            <div class="field">
+              <label class="label">Country</label>
+
+              <div class="control">
+                <div class="select">
+                  <select required>
+                    <option selected>United States</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+
+            <div class="field">
+              <label class="label">Address</label>
+
+              <div class="control">
+                <input class="input" type="text" required />
+              </div>
+            </div>
+            <div class="field">
+              <label class="label">Address 2 (Optional)</label>
+
+              <div class="control">
+                <input class="input" type="text" />
+              </div>
+            </div>
+
+            <div class="field">
+              <label class="label">City</label>
+              <div class="control">
+                <input class="input" type="text" required />
+              </div>
+            </div>
+
+            <div class="field">
+              <label class="label">State</label>
+
+              <div class="select">
+                <select required>
+                  <option selected>VA</option>
+                </select>
+              </div>
+            </div>
+
+            <div class="field">
+              <label class="label">Zip Code</label>
+
+              <input class="input" type="text" pattern="[0-9]{5}" required />
+            </div>
           </div>
         </div>
-      </div>
+      </section>
 
-      <div class="field is-horizontal">
-        <div class="field-label">
-          <label class="label">E-mail Address</label>
-        </div>
-        <div class="field-body">
-          <div class="field">
-            <p class="control is-expanded">
-              <input class="input" type="email" placeholder="email address" />
-            </p>
-          </div>
+      <section class="section">
+        <h1 class="title">Payment</h1>
+        <hr />
+        payment option (mailed check, paypal, cash or check on delivery)
+      </section>
+
+      <section class="section">
+        <h1 class="title">Delivery Options</h1>
+        <hr />
+        <div class="control">
+          <label class="radio">
+            <input type="radio" name="delivery" />
+            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">
-      <h1 class="title">Payment</h1>
-      <hr />
-    </section>
-    <section class="section">
-      <h1 class="title">Delivery</h1>
-      <hr />
-    </section>
+      </section>
+
+      <section class="section">
+        <button class="button is-primary">Continue to Confirmation</button>
+      </section>
+    </form>
   </div>
 </template>
 
diff --git a/iridescence/src/views/Checkout.vue b/iridescence/src/views/Checkout.vue
index 3b66fbf..01519ee 100644
--- a/iridescence/src/views/Checkout.vue
+++ b/iridescence/src/views/Checkout.vue
@@ -1,13 +1,5 @@
 <template>
   <div id="checkout">
-    <ul>
-      <li>get user info (name, address, email, phone)</li>
-      <li>payment option (mailed check, paypal, cash or check on delivery)</li>
-      <li>
-        pickup option (pick up at studio, pick up at simply vintage, ship to
-        address)
-      </li>
-    </ul>
     <CheckoutForm></CheckoutForm>
   </div>
 </template>