From b34e03909d0c1c459414568028012d1a02ae23e4 Mon Sep 17 00:00:00 2001
From: "Adam T. Carpenter" <atc@53hor.net>
Date: Thu, 10 Dec 2020 08:26:38 -0500
Subject: started checkout form

---
 .../src/components/checkout/CheckoutForm.vue       | 55 ++++++++++++++++++++++
 iridescence/src/views/Checkout.vue                 | 13 ++++-
 2 files changed, 66 insertions(+), 2 deletions(-)
 create mode 100644 iridescence/src/components/checkout/CheckoutForm.vue

diff --git a/iridescence/src/components/checkout/CheckoutForm.vue b/iridescence/src/components/checkout/CheckoutForm.vue
new file mode 100644
index 0000000..a2ddfad
--- /dev/null
+++ b/iridescence/src/components/checkout/CheckoutForm.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="container">
+    <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>
+          <div class="field">
+            <p class="control is-expanded">
+              <input class="input" type="text" placeholder="surname" />
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <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>
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      <h1 class="title">Payment</h1>
+      <hr />
+    </section>
+    <section class="section">
+      <h1 class="title">Delivery</h1>
+      <hr />
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CheckoutForm",
+  computed: {},
+  methods: {}
+};
+</script>
diff --git a/iridescence/src/views/Checkout.vue b/iridescence/src/views/Checkout.vue
index ab28517..3b66fbf 100644
--- a/iridescence/src/views/Checkout.vue
+++ b/iridescence/src/views/Checkout.vue
@@ -1,12 +1,21 @@
 <template>
   <div id="checkout">
-    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>
 
 <script>
+import CheckoutForm from "@/components/checkout/CheckoutForm.vue";
 export default {
   name: "Checkout",
-  components: {}
+  components: { CheckoutForm }
 };
 </script>
-- 
cgit v1.2.3