lnbits-exts/nostrmarket
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

feat: UI improvements

Browse source
This commit is contained in:
Vlad Stan 2023-07-11 18:08:32 +03:00
parent bce0b342d0
commit 6d921d7559
5 changed files with 95 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

35
static/components/customer-orders/customer-orders.html
View file

@ -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>
</div>
v-text="order.shipped ? 'Shipped' : 'Not Shipped'"></span></q-badge>
</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>

64
static/components/customer-orders/customer-orders.js
View file

@ -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)
const productId = order.items[0]?.product_id
if (!productId) return 'Stall Name'
const product = this.products.find(p => p.id === productId)
if (!product) return 'Stall Name'
const stall = this.stalls.find(s => s.id === product.stall_id)
if (!stall) return 'Stall Name'
return stall.name
}
try {
console.log('### stallNameForOrder', order)
const productId = order.items[0]?.product_id
if (!productId) return 'Stall Name'
const product = this.products.find(p => p.id === productId)
if (!product) return 'Stall Name'
const stall = this.stalls.find(s => s.id === product.stall_id)
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)
}
})
}

4
static/components/shopping-cart-checkout/shopping-cart-checkout.html
View file

@ -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>

22
static/js/market.js
View file

@ -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) {
console.log('### persistOrderUpdate', pubkey, orderUpdate)
persistOrderUpdate(pubkey, createdAt, 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
}
}
}

2
templates/nostrmarket/market.html
View file

@ -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 ?? {}"