From e90d0161ebc0552e0317f3651851cebdfa243573 Mon Sep 17 00:00:00 2001
From: Vlad Stan <stan.v.vlad@gmail.com>
Date: Wed, 12 Jul 2023 12:08:16 +0300
Subject: [PATCH] feat: UI improvements

---
 .../shopping-cart-checkout.html               | 25 +++++++++++++++----
 .../shopping-cart-checkout.js                 | 11 ++++----
 static/js/market.js                           |  9 ++++---
 templates/nostrmarket/market.html             |  8 +++---
 4 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/static/components/shopping-cart-checkout/shopping-cart-checkout.html b/static/components/shopping-cart-checkout/shopping-cart-checkout.html
index 65619ac..3e1a2e9 100644
--- a/static/components/shopping-cart-checkout/shopping-cart-checkout.html
+++ b/static/components/shopping-cart-checkout/shopping-cart-checkout.html
@@ -25,14 +25,24 @@
 
         <q-separator />
         <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">
+                    <strong>Message:</strong>
+                </div>
+                <div class="col-xs-12 col-sm-12 col-md-10">
+                    <q-input v-model.trim="contactData.message" outlined type="textarea" rows="3"
+                        label="Message (optional)" hint="Message merchant about additional order needs"></q-input>
+                </div>
+            </div>
 
             <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">
                     <strong>Address:</strong>
                 </div>
                 <div class="col-xs-12 col-sm-12 col-md-10">
-                    <q-input v-model.trim="contactData.address" outlined
-                        label="Address (required for physical shipping)"></q-input>
+                    <q-input v-model.trim="contactData.address" outlined type="textarea" rows="3"
+                        label="Address (optional)" hint="Must provide for physical shipping">
+                    </q-input>
                 </div>
             </div>
 
@@ -48,13 +58,15 @@
 
             <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">
-                    <strong>Message:</strong>
+                    <strong>Npub:</strong>
                 </div>
                 <div class="col-xs-12 col-sm-12 col-md-10">
-                    <q-input v-model.trim="contactData.message" outlined type="textarea" rows="3"
-                        label="Message to Merchant (optional)"></q-input>
+                    <q-input v-model.trim="contactData.npub" outlined label="Alternative Npub (optional)"
+                        hint="Use a different Npub to communicate with the merchant"></q-input>
                 </div>
             </div>
+
+
         </q-card-section>
 
         <q-card-section v-else horizontal>
@@ -126,6 +138,9 @@
                 </q-btn>
             </div>
             <div v-else>
+                <q-btn @click="goToShoppingCart" flat color="gray">
+                    Back
+                </q-btn>
                 <q-btn @click="orderConfirmed = true" flat color="primary">
                     Confirm
                 </q-btn>
diff --git a/static/components/shopping-cart-checkout/shopping-cart-checkout.js b/static/components/shopping-cart-checkout/shopping-cart-checkout.js
index 236c3ee..ff03ee8 100644
--- a/static/components/shopping-cart-checkout/shopping-cart-checkout.js
+++ b/static/components/shopping-cart-checkout/shopping-cart-checkout.js
@@ -13,6 +13,7 @@ async function shoppingCartCheckout(path) {
         shippingZone: null,
         contactData: {
           email: null,
+          npub: null,
           address: null,
           message: null
         },
@@ -61,8 +62,6 @@ async function shoppingCartCheckout(path) {
       },
 
       async placeOrder() {
-        console.log('### placeOrder cart', this.cart)
-        console.log('### placeOrder stal', this.stall)
         if (!this.shippingZone) {
           this.$q.notify({
             timeout: 5000,
@@ -79,7 +78,7 @@ async function shoppingCartCheckout(path) {
           address: this.contactData.address,
           message: this.contactData.message,
           contact: {
-            nostr: this.customerPubkey,
+            nostr: this.contactData.npub,
             email: this.contactData.email
           },
           items: Array.from(this.cart.products, p => {
@@ -103,12 +102,12 @@ async function shoppingCartCheckout(path) {
 
         this.$emit('place-order', { event, order })
 
-
-
       },
+      goToShoppingCart: function(){
+        this.$emit('change-page', 'shopping-cart-list')
+      }
     },
     created() {
-      console.log('### shoppingCartCheckout', this.stall)
       if (this.stall.shipping?.length === 1) {
         this.shippingZone = this.stall.shipping[0]
       }
diff --git a/static/js/market.js b/static/js/market.js
index 0cc81ea..63a2d1c 100644
--- a/static/js/market.js
+++ b/static/js/market.js
@@ -63,7 +63,8 @@ const market = async () => {
 
         qrCodeDialog: {
           data: {
-            payment_request: null
+            payment_request: null,
+            message: null,
           },
           dismissMsg: null,
           show: false
@@ -706,7 +707,8 @@ const market = async () => {
         })
         this.qrCodeDialog = {
           data: {
-            payment_request: null
+            payment_request: null,
+            message: null,
           },
           dismissMsg: null,
           show: true
@@ -781,13 +783,14 @@ const market = async () => {
       handlePaymentRequest(json) {
         if (!json.payment_options?.length) {
           this.qrCodeDialog.data.message = json.message || 'Unexpected error'
+          console.log('### qrCodeDialog.data.message', this.qrCodeDialog.data.message)
           return
         }
         if (json.id && (json.id !== this.activeOrderId)) {
           // not for active order, store somewehre else
           return
         }
-        let paymentRequest = json.payment_options.find(o => o.type == 'ln')
+        const paymentRequest = json.payment_options.find(o => o.type == 'ln')
           .link
         if (!paymentRequest) return
         this.qrCodeDialog.data.payment_request = paymentRequest
diff --git a/templates/nostrmarket/market.html b/templates/nostrmarket/market.html
index f8308c6..afeea13 100644
--- a/templates/nostrmarket/market.html
+++ b/templates/nostrmarket/market.html
@@ -217,7 +217,7 @@
           @checkout-cart="checkoutStallCart"></shopping-cart-list>
         <shopping-cart-checkout v-else-if="activePage === 'shopping-cart-checkout'" :cart="checkoutCart"
           :stall="checkoutStall" :customer-pubkey="account?.pubkey" @login-required="openAccountDialog"
-          @place-order="placeOrder"></shopping-cart-checkout>
+          @place-order="placeOrder" @change-page="navigateTo"></shopping-cart-checkout>
         <customer-orders v-else-if="activePage === 'customer-orders'" :orders="orders" :products="products"
           :stalls="stalls" :merchants="merchants" @show-invoice="showInvoiceQr"></customer-orders>
         <customer-stall v-else-if=" !isLoading && activeStall" :stall="stalls.find(stall => stall.id == activeStall)"
@@ -291,10 +291,10 @@
   <q-dialog v-model="qrCodeDialog.show" position="top">
     <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
       <div class="text-center q-mb-lg">
-        <div class="q-my-lg" v-if="qrCodeDialog.data.message">
-          <p><span v-text="qrCodeDialog.data.message"></span> </p>
+        <div v-if="qrCodeDialog.data.message" class="q-my-lg">
+          <strong><span v-text="qrCodeDialog.data.message"></span> </strong>
         </div>
-        <a v-else :href="'lightning:' + qrCodeDialog.data.payment_request">
+        <a v-else :href="'lightning:' + qrCodeDialog.data?.payment_request">
           <q-responsive v-if="qrCodeDialog.data.payment_request" :ratio="1" class="q-mx-xl">
             <qrcode :value="qrCodeDialog.data.payment_request" :options="{width: 340}" class="rounded-borders"></qrcode>
           </q-responsive>