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-12 12:08:16 +03:00
parent 84807367c3
commit e90d0161eb
4 changed files with 35 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

11
static/components/shopping-cart-checkout/shopping-cart-checkout.js
View file

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

9
static/js/market.js
View file

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

8
templates/nostrmarket/market.html
View file

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