From c6a15597b65f303a52b4d3d55fef79583b8ff9be Mon Sep 17 00:00:00 2001
From: "Adam T. Carpenter" <atc@53hor.net>
Date: Sun, 13 Dec 2020 09:14:32 -0500
Subject: updated footer with facebook and privacy, finalized user info contact
form
---
iridescence/src/components/Footer.vue | 17 ++-
.../src/components/checkout/CheckoutForm.vue | 158 ++++++++++++++++-----
iridescence/src/views/Checkout.vue | 8 --
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>
--
cgit v1.2.3