From 127f4148ea156a9d06ae7cddf106d411541b74bb Mon Sep 17 00:00:00 2001
From: Vlad Stan <stan.v.vlad@gmail.com>
Date: Tue, 11 Jul 2023 11:42:28 +0300
Subject: [PATCH] feat: add order confirmation

---
 .../shopping-cart-checkout.html               | 26 ++++++++++++-------
 .../shopping-cart-checkout.js                 |  1 +
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/static/components/shopping-cart-checkout/shopping-cart-checkout.html b/static/components/shopping-cart-checkout/shopping-cart-checkout.html
index c66a4ab..5f01a2c 100644
--- a/static/components/shopping-cart-checkout/shopping-cart-checkout.html
+++ b/static/components/shopping-cart-checkout/shopping-cart-checkout.html
@@ -24,7 +24,7 @@
         </q-item>
 
         <q-separator />
-        <q-card-section>
+        <q-card-section v-if="orderConfirmed">
 
             <div class="row q-mt-md q-ml-md q-pr-md">
                 <div class="col-xs-12 col-sm-12 col-md-2 q-mt-md">
@@ -32,7 +32,7 @@
                 </div>
                 <div class="col-xs-12 col-sm-12 col-md-10">
                     <q-input v-model.trim="contactData.address" outlined
-                        label="Required for physical shipping"></q-input>
+                        label="Address (required for physical shipping)"></q-input>
                 </div>
             </div>
 
@@ -41,7 +41,8 @@
                     <strong>Email:</strong>
                 </div>
                 <div class="col-xs-12 col-sm-12 col-md-10">
-                    <q-input v-model.trim="contactData.email" outlined label="Email (optional)"></q-input>
+                    <q-input v-model.trim="contactData.email" type="email" outlined label="Email (optional)"
+                        hint="Merchant may not use email"></q-input>
                 </div>
             </div>
 
@@ -56,9 +57,7 @@
             </div>
         </q-card-section>
 
-        <q-separator class="q-mt-md" />
-
-        <q-card-section horizontal>
+        <q-card-section v-else horizontal>
             <q-card-section class="col-7">
                 <div class="row q-mt-md">
                     <div class="col-xs-12 col-sm-12 col-md-4">
@@ -118,9 +117,18 @@
         <q-separator />
 
         <q-card-actions align="right">
-            <q-btn @click="placeOrder()" flat color="primary">
-                Place Order
-            </q-btn>
+            <div v-if="orderConfirmed">
+                <q-btn @click="orderConfirmed = false" flat round icon="arrow_back" />
+                <q-btn @click="placeOrder()" flat color="primary">
+                    Place Order
+                </q-btn>
+            </div>
+            <div v-else>
+                <q-btn @click="orderConfirmed = true" flat color="primary">
+                    Confirm
+                </q-btn>
+            </div>
+
         </q-card-actions>
     </q-card>
 
diff --git a/static/components/shopping-cart-checkout/shopping-cart-checkout.js b/static/components/shopping-cart-checkout/shopping-cart-checkout.js
index 2e0d911..236c3ee 100644
--- a/static/components/shopping-cart-checkout/shopping-cart-checkout.js
+++ b/static/components/shopping-cart-checkout/shopping-cart-checkout.js
@@ -8,6 +8,7 @@ async function shoppingCartCheckout(path) {
     props: ['cart', 'stall', 'customer-pubkey'],
     data: function () {
       return {
+        orderConfirmed: false,
         paymentMethod: 'ln',
         shippingZone: null,
         contactData: {