feat: UI improvements

static/components/customer-orders/customer-orders.html

@@ -6,8 +6,6 @@
   </q-card>
   <div v-for="merchant in merchantOrders">
 
-
-
     <q-card bordered class="q-mb-md">
       <q-item>
         <q-item-section avatar>
@@ -20,13 +18,10 @@
         <q-item-section>
           <q-item-label>
             <strong>
-              <!-- <span v-text="cart.products[0]?.stallName"></span> -->
+
-              Todo: merchant name
             </strong>
           </q-item-label>
           <q-item-label caption>
-            By
-            <!-- <span v-text="cart.merchant?.profile?.name || cart.merchant?.publicKey"></span> -->
             <span v-text="merchant.pubkey"></span>
           </q-item-label>
         </q-item-section>
@@ -40,30 +35,44 @@
         <q-card-section class="col-12">
           <q-list class="q-mt-md">
             <div v-for="order in merchant.orders" :key="order.id" class="q-mb-md">
-              <q-expansion-item>
+              <q-expansion-item dense expand-separator>
 
                 <template v-slot:header>
                   <q-item-section class="q-mt-sm">
-                    <q-item-label><strong> <span v-text="stallNameForOrder(order)"></span> </strong></q-item-label>
+                    <q-item-label><strong> <span v-text="order.stallName"></span> </strong> 
+                      <q-badge @click="showInvoice(order)"
+                        v-if="order.invoice?.human_readable_part?.amount" color="orange" class="q-ml-lg">
+                        <span v-text="formatCurrency(order.invoice?.human_readable_part?.amount / 1000, 'sat')"></span>
+                      </q-badge></q-item-label>
+
                     <q-item-label>
                       <div class="text-caption text-grey ellipsis-2-lines">
-                        <p>xxxx</p>
+                        <p v-if="order.createdAt"><span v-text="fromNow(order.createdAt)"></span></p>
                       </div>
                     </q-item-label>
                   </q-item-section>
 
                   <q-item-section side>
-                    <div>
+                    <q-item-label>
+
                       <q-badge :color="order.paid ? 'green' : 'gray'"><span
                           v-text="order.paid ? 'Paid' : 'Not Paid'"></span></q-badge>
                       <q-badge :color="order.shipped ? 'green' : 'gray'"><span
-                          v-text="order.paid ? 'Shipped' : 'Not Shipped'"></span></q-badge>
+                          v-text="order.shipped ? 'Shipped' : 'Not Shipped'"></span></q-badge>
-                    </div>
+                    </q-item-label>
+                    <q-item-label>
+                      <div class="text-caption text-grey ellipsis-2-lines">
+                        <p>
+                          <span v-text="order.items.length"></span>
+                          <span v-text="order.items.length  === 1 ? 'product': 'products'"></span>
+                        </p>
+                      </div>
+                    </q-item-label>
                   </q-item-section>
                 </template>
                 <q-card-section class="q-pa-none">
                   <q-separator></q-separator>
-                  xxxx
+                  <span v-text="order.invoice?.human_readable_part?.amount"></span>
                 </q-card-section>
 
 

static/components/customer-orders/customer-orders.js

@@ -5,32 +5,74 @@ async function customerOrders(path) {
     name: 'orders',
     template,
 
-    props: ['orders', 'products', 'stalls'],
+    props: ['orders', 'products', 'stalls', 'merchants'],
     data: function () {
       return {}
     },
     computed: {
       merchantOrders: function () {
-        return Object.keys(this.orders).map(pubkey => ({ pubkey, orders: this.orders[pubkey] }))
+        return Object.keys(this.orders).map(pubkey => ({ pubkey, orders: this.orders[pubkey].map(this.enrichOrder) }))
       }
     },
     methods: {
+      enrichOrder: function (order) {
+        return {
+          ...order,
+          stallName: this.stallNameForOrder(order),
+          invoice: this.invoiceForOrder(order)
+        }
+      },
       stallNameForOrder: function (order) {
-        console.log('### stallNameForOrder', order)
+        try {
-        const productId = order.items[0]?.product_id
+          console.log('### stallNameForOrder', order)
-        if (!productId) return 'Stall Name'
+          const productId = order.items[0]?.product_id
-        const product = this.products.find(p => p.id === productId)
+          if (!productId) return 'Stall Name'
-        if (!product) return 'Stall Name'
+          const product = this.products.find(p => p.id === productId)
-        const stall = this.stalls.find(s => s.id === product.stall_id)
+          if (!product) return 'Stall Name'
-        if (!stall) return 'Stall Name'
+          const stall = this.stalls.find(s => s.id === product.stall_id)
-        return stall.name
+          if (!stall) return 'Stall Name'
-      }
+          return stall.name
+        } catch (error) {
+          return 'Stall Name'
+        }
 
+      },
+      invoiceForOrder: function (order) {
+        try {
+          const lnPaymentOption = order?.payment_options?.find(p => p.type === 'ln')
+          if (!lnPaymentOption?.link) return
+          return decode(lnPaymentOption.link)
+        } catch (error) {
+          console.warn(error)
+        }
+      },
+
+      merchantProfile: function (pubkey) {
+        const merchant = this.merchants.find(m => m.publicKey === pubkey)
+        return merchant?.profile
+      },
+
+      showInvoice: function (order) {
+        if (order.paid) return
+        const invoice = order?.payment_options?.find(p => p.type === 'ln').link
+        if (!invoice) return
+        this.$emit('show-invoice', invoice)
+      },
+
+      formatCurrency: function (value, unit) {
+        return formatCurrency(value, unit)
+      },
+
+      fromNow: function (date) {
+        if (!date) return ''
+        return moment(date * 1000).fromNow()
+      }
     },
     created() {
       console.log('### orders', this.orders)
       console.log('### products', this.products)
       console.log('### stall', this.stalls)
+      console.log('### merchants', this.merchants)
     }
   })
 }

static/components/shopping-cart-checkout/shopping-cart-checkout.html

@@ -118,7 +118,9 @@
 
         <q-card-actions align="right">
             <div v-if="orderConfirmed">
-                <q-btn @click="orderConfirmed = false" flat round icon="arrow_back" />
+                <q-btn @click="orderConfirmed = false" flat color="gray">
+                    Back
+                </q-btn>
                 <q-btn @click="placeOrder()" flat color="primary">
                     Place Order
                 </q-btn>

static/js/market.js

@@ -695,7 +695,7 @@ const market = async () => {
         event.sig = await NostrTools.signEvent(event, this.account.privkey)
 
         this.sendOrderEvent(event)
-        this.persistOrderUpdate(this.checkoutStall.pubkey, order)
+        this.persistOrderUpdate(this.checkoutStall.pubkey, event.created_at, order)
       },
 
       sendOrderEvent(event) {
@@ -768,10 +768,10 @@ const market = async () => {
           const jsonData = JSON.parse(plainText)
           if (jsonData.type === 1) {
             this.handlePaymentRequest(jsonData)
-            this.persistOrderUpdate(event.pubkey, jsonData)
+            this.persistOrderUpdate(event.pubkey, event.created_at, jsonData)
           } else if (jsonData.type === 2) {
             this.handleOrderStatusUpdate(jsonData)
-            this.persistOrderUpdate(event.pubkey, jsonData)
+            this.persistOrderUpdate(event.pubkey, event.created_at, jsonData)
           }
         } catch (e) {
           console.warn('Unable to handle incomming DM', e)
@@ -829,12 +829,11 @@ const market = async () => {
         return dms.lastCreatedAt
       },
 
-      persistOrderUpdate(pubkey, orderUpdate) {
+      persistOrderUpdate(pubkey, createdAt, orderUpdate) {
-        console.log('### persistOrderUpdate', pubkey, orderUpdate)
         let orders = this.$q.localStorage.getItem(`nostrmarket.orders.${pubkey}`) || []
         let order = orders.find(o => o.id === orderUpdate.id)
         if (!order) {
-          orders.unshift({ ...orderUpdate, messages: orderUpdate.message ? [orderUpdate.message] : [] })
+          orders.unshift({ ...orderUpdate, createdAt, messages: orderUpdate.message ? [orderUpdate.message] : [] })
           this.orders[pubkey] = orders
           this.$q.localStorage.set(`nostrmarket.orders.${pubkey}`, orders)
           return
@@ -855,6 +854,17 @@ const market = async () => {
         orders = [order].concat(orders.filter(o => o.id !== order.id))
         this.orders[pubkey] = orders
         this.$q.localStorage.set(`nostrmarket.orders.${pubkey}`, orders)
+      },
+
+      showInvoiceQr(invoice){
+        if (!invoice) return
+        this.qrCodeDialog = {
+          data: {
+            payment_request: invoice
+          },
+          dismissMsg: null,
+          show: true
+        }
       }
 
     }

templates/nostrmarket/market.html

@@ -219,7 +219,7 @@
           :stall="checkoutStall" :customer-pubkey="account?.pubkey" @login-required="openAccountDialog"
           @place-order="placeOrder"></shopping-cart-checkout>
         <customer-orders v-else-if="activePage === 'customer-orders'" :orders="orders" :products="products"
-          :stalls="stalls"></customer-orders>
+          :stalls="stalls" :merchants="merchants" @show-invoice="showInvoiceQr"></customer-orders>
         <customer-stall v-else-if=" !isLoading && activeStall" :stall="stalls.find(stall => stall.id == activeStall)"
           :products="filterProducts" :stall-products="products.filter(p => p.stall_id == activeStall)"
           :product-detail="activeProduct" :relays="relays" :account="account" :pool="pool" :styles="config?.opts ?? {}"