Merge pull request #16 from lnbits/UI_hotfixes

UI hotfixes

static/components/chat-dialog/chat-dialog.html

@@ -82,7 +82,7 @@
         </q-card-section>
       </div>
       <q-inner-loading :showing="loading">
-        <q-spinner-cube size="50px" color="primary" />
+        <q-spinner-comment size="50px" color="primary" />
       </q-inner-loading>
     </q-card>
   </q-dialog>

static/components/customer-market/customer-market.html

@@ -1,6 +1,6 @@
 <div>
   <div v-if="searchNostr" class="row q-col-gutter-md">
-    <div class="col-12 col-md-7 q-gutter-y-md">
+    <div class="col-12 q-gutter-y-md">
       <q-card>
         <!-- <q-card-section class="row items-center q-pb-none">
           <div class="text-h6">Search Globally</div>

static/components/customer-stall/customer-stall.html

@@ -60,7 +60,7 @@
           filled
           dense
           v-model.trim="checkoutDialog.data.username"
-          label="Name *optional"
+          label="Name (optional)"
         ></q-input>
         <q-expansion-item
           v-if="!account"
@@ -126,7 +126,7 @@
           :type="isPwd ? 'password' : 'text'"
           v-if="!customerUseExtension"
           v-model.trim="checkoutDialog.data.privkey"
-          label="Private key *optional"
+          label="Private key (optional)"
           hint="Enter your private key"
         >
           <template v-slot:append>
@@ -141,14 +141,15 @@
           filled
           dense
           v-model.trim="checkoutDialog.data.address"
-          label="Address"
+          label="Address (optional)"
+          hint="If ordering a physical product make sure to fill this"
         ></q-input>
         <q-input
           v-model="checkoutDialog.data.email"
           filled
           dense
           type="email"
-          label="Email *optional"
+          label="Email (optional)"
           hint="Merchant may not use email"
         ></q-input>
         <q-input
@@ -156,7 +157,7 @@
           filled
           dense
           type="text"
-          label="Message *optional"
+          label="Message (optional)"
         ></q-input>
         <p>Select the shipping zone:</p>
         <div class="row q-mt-lg">
@@ -177,8 +178,7 @@
             :loading="loading"
             unelevated
             color="primary"
-            :disable="checkoutDialog.data.address == null
-              || checkoutDialog.data.shippingzone == null
+            :disable="checkoutDialog.data.shippingzone == null
               || checkoutDialog.data.pubkey == null"
             @click="downloadOrder"
             >Download Order</q-btn
@@ -188,8 +188,7 @@
             :loading="loading"
             unelevated
             color="primary"
-            :disable="checkoutDialog.data.address == null
-              || checkoutDialog.data.shippingzone == null
+            :disable="checkoutDialog.data.shippingzone == null
               || checkoutDialog.data.pubkey == null"
             type="submit"
             >Checkout</q-btn
@@ -226,7 +225,7 @@
           </q-responsive>
         </a>
         <q-inner-loading :showing="loading">
-          <q-spinner-cube size="50px" color="primary" />
+          <q-spinner-puff size="50px" color="primary" />
         </q-inner-loading>
       </div>
       <div class="row q-mt-lg">

static/components/customer-stall/customer-stall.js

@@ -189,7 +189,6 @@ async function customerStall(path) {
         }
       },
       closeQrCodeDialog() {
-        this.qrCodeDialog.dismissMsg()
         this.qrCodeDialog.show = false
       },
       async placeOrder() {
@@ -254,19 +253,22 @@ async function customerStall(path) {
             } else if (this.customerUseExtension && this.hasNip07) {
               event = await window.nostr.signEvent(event)
             }
-
+            this.resetCheckout()
             await this.sendOrder(event)
           })
       },
       async sendOrder(order) {
+        this.$q.notify({
+          message: 'Waiting for invoice from merchant...'
+        })
         for (const url of Array.from(this.relays)) {
           try {
             let relay = NostrTools.relayInit(url)
             relay.on('connect', () => {
-              console.log(`connected to ${relay.url}`)
+              console.debug(`connected to ${relay.url}`)
             })
             relay.on('error', () => {
-              console.log(`failed to connect to ${relay.url}`)
+              console.debug(`failed to connect to ${relay.url}`)
               relay.close()
               return
             })
@@ -274,11 +276,11 @@ async function customerStall(path) {
             await relay.connect()
             let pub = relay.publish(order)
             pub.on('ok', () => {
-              console.log(`${relay.url} has accepted our event`)
+              console.debug(`${relay.url} has accepted our event`)
               relay.close()
             })
             pub.on('failed', reason => {
-              console.log(`failed to publish to ${relay.url}: ${reason}`)
+              console.debug(`failed to publish to ${relay.url}: ${reason}`)
               relay.close()
             })
           } catch (err) {
@@ -286,12 +288,8 @@ async function customerStall(path) {
           }
         }
         this.loading = false
-        this.resetCheckout()
         this.resetCart()
         this.qrCodeDialog.show = true
-        this.$q.notify({
-          message: 'Waiting for invoice from merchant...'
-        })
         this.listenMessages()
       },
       async listenMessages() {
@@ -329,7 +327,6 @@ async function customerStall(path) {
                   event.content
                 )
               }
-              //console.log(`${mine ? 'Me' : 'Merchant'}: ${plaintext}`)
 
               this.messageFilter(plaintext, cb => Promise.resolve(pool.close))
             } catch {
@@ -345,9 +342,8 @@ async function customerStall(path) {
         let json = JSON.parse(text)
         if (json.id != this.activeOrder) return
         if (json.payment_options) {
-          let payment_request = json.payment_options.find(
-            o => o.type == 'ln'
-          ).link
+          let payment_request = json.payment_options.find(o => o.type == 'ln')
+            .link
           if (!payment_request) return
           this.loading = false
           this.qrCodeDialog.data.payment_request = payment_request

static/js/market.js

@@ -114,7 +114,7 @@ const market = async () => {
           this.pubkeys.add(this.account.pubkey)
         }
         if (relays && relays.length) {
-          this.relays = new Set([...defaultRelays, ...relays])
+          this.relays = new Set(relays)
         } else {
           this.relays = new Set(defaultRelays)
         }
@@ -196,6 +196,12 @@ const market = async () => {
         return
       },
       async updateData(events) {
+        if (events.length < 1) {
+          this.$q.notify({
+            message: 'No matches were found!'
+          })
+          return
+        }
         let products = new Map()
         let stalls = new Map()
 
@@ -215,15 +221,21 @@ const market = async () => {
 
         this.stalls = await Array.from(stalls.values())
 
-        this.products = Array.from(products.values()).map(obj => {
+        this.products = Array.from(products.values())
+          .map(obj => {
             let stall = this.stalls.find(s => s.id == obj.stall_id)
+            if (!stall) return
             obj.stallName = stall.name
             obj.images = [obj.image]
             if (obj.currency != 'sat') {
-            obj.formatedPrice = this.getAmountFormated(obj.price, obj.currency)
+              obj.formatedPrice = this.getAmountFormated(
+                obj.price,
+                obj.currency
+              )
             }
             return obj
           })
+          .filter(f => f)
       },
       async initNostr() {
         this.$q.loading.show()
@@ -261,15 +273,21 @@ const market = async () => {
         await Promise.resolve(sub)
         this.stalls = await Array.from(stalls.values())
 
-        this.products = Array.from(products.values()).map(obj => {
+        this.products = Array.from(products.values())
+          .map(obj => {
             let stall = this.stalls.find(s => s.id == obj.stall_id)
+            if (!stall) return
             obj.stallName = stall.name
             obj.images = [obj.image]
             if (obj.currency != 'sat') {
-            obj.formatedPrice = this.getAmountFormated(obj.price, obj.currency)
+              obj.formatedPrice = this.getAmountFormated(
+                obj.price,
+                obj.currency
+              )
             }
             return obj
           })
+          .filter(f => f)
         this.$q.loading.hide()
         pool.close(relays)
         return

templates/nostrmarket/_api_docs.html

@@ -35,4 +35,10 @@
       >Swagger REST API Documentation</a
     >
   </q-card-section>
+  <q-card-section>
+    <a target="_blank" href="/nostrmarket/market" class="text-white"
+      ><q-tooltip>Visit the market client</q-tooltip
+      ><q-icon name="storefront" class="q-mr-sm"></q-icon>Market client</a
+    >
+  </q-card-section>
 </q-card>