Merge pull request #13 from lnbits/checkout-login-flow
Ordering flow UI
This commit is contained in:
Vlad Stan
GitHub
commit
b10531763e
5 changed files with 259 additions and 88 deletions
|
|
@ -43,7 +43,7 @@ async def m001_initial(db):
|
|||
id TEXT PRIMARY KEY,
|
||||
stall_id TEXT NOT NULL,
|
||||
name TEXT NOT NULL,
|
||||
image TEXT DEFAULT,
|
||||
image TEXT,
|
||||
price REAL NOT NULL,
|
||||
quantity INTEGER NOT NULL,
|
||||
category_list TEXT DEFAULT '[]',
|
||||
|
|
|
|||
|
|
@ -8,8 +8,14 @@
|
|||
>
|
||||
<q-card>
|
||||
<q-bar>
|
||||
<q-icon name="chat" />
|
||||
<div>Chat Box</div>
|
||||
<q-btn dense flat icon="chat" label="Chat" @click="isChat = true" />
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
icon="receipt_long"
|
||||
label="Orders"
|
||||
@click="isChat = false"
|
||||
/>
|
||||
|
||||
<q-space></q-space>
|
||||
|
||||
|
|
@ -17,49 +23,64 @@
|
|||
<q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
|
||||
</q-btn>
|
||||
</q-bar>
|
||||
|
||||
<q-card-section
|
||||
style="
|
||||
height: calc(100vh - 120px);
|
||||
overflow-y: scroll;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
"
|
||||
>
|
||||
<q-chat-message
|
||||
:key="index"
|
||||
v-for="(message, index) in sortedMessages"
|
||||
:name="message.sender"
|
||||
:text="[message.msg]"
|
||||
:sent="message.sender == 'Me'"
|
||||
:bg-color="message.sender == 'Me' ? 'white' : 'light-green-2'"
|
||||
:stamp="message.timestamp"
|
||||
size="6"
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-card-actions>
|
||||
<q-form @submit="sendMessage" class="full-width chat-input">
|
||||
<q-input
|
||||
ref="newMessage"
|
||||
v-model="newMessage"
|
||||
placeholder="Message"
|
||||
class="full-width"
|
||||
dense
|
||||
outlined
|
||||
>
|
||||
<template>
|
||||
<q-btn
|
||||
round
|
||||
dense
|
||||
flat
|
||||
type="submit"
|
||||
icon="send"
|
||||
color="primary"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-form>
|
||||
</q-card-actions>
|
||||
<div v-if="isChat">
|
||||
<q-card-section
|
||||
class="q-ml-auto"
|
||||
style="
|
||||
width: 100%;
|
||||
max-width: 720px;
|
||||
height: calc(100vh - 120px);
|
||||
overflow-y: scroll;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
"
|
||||
>
|
||||
<q-chat-message
|
||||
:key="index"
|
||||
v-for="(message, index) in sortedMessages"
|
||||
:name="message.sender"
|
||||
:text="[message.msg]"
|
||||
:sent="message.sender == 'Me'"
|
||||
:bg-color="message.sender == 'Me' ? 'white' : 'light-green-2'"
|
||||
:stamp="message.timestamp"
|
||||
size="6"
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-card-actions>
|
||||
<q-form @submit="sendMessage" class="full-width chat-input">
|
||||
<q-input
|
||||
ref="newMessage"
|
||||
v-model="newMessage"
|
||||
placeholder="Message"
|
||||
class="full-width"
|
||||
dense
|
||||
outlined
|
||||
>
|
||||
<template>
|
||||
<q-btn
|
||||
round
|
||||
dense
|
||||
flat
|
||||
type="submit"
|
||||
icon="send"
|
||||
color="primary"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-form>
|
||||
</q-card-actions>
|
||||
</div>
|
||||
<div v-else>
|
||||
<q-card-section>
|
||||
<q-table
|
||||
title="Orders"
|
||||
:data="ordersList"
|
||||
:columns="ordersTable.columns"
|
||||
:pagination.sync="ordersTable.pagination"
|
||||
row-key="id"
|
||||
/>
|
||||
</q-card-section>
|
||||
</div>
|
||||
<q-inner-loading :showing="loading">
|
||||
<q-spinner-cube size="50px" color="primary" />
|
||||
</q-inner-loading>
|
||||
|
|
|
|||
|
|
@ -9,15 +9,70 @@ async function chatDialog(path) {
|
|||
data: function () {
|
||||
return {
|
||||
dialog: false,
|
||||
isChat: true,
|
||||
loading: false,
|
||||
pool: null,
|
||||
nostrMessages: [],
|
||||
newMessage: ''
|
||||
newMessage: '',
|
||||
ordersTable: {
|
||||
columns: [
|
||||
{
|
||||
name: 'id',
|
||||
align: 'left',
|
||||
label: 'ID',
|
||||
field: 'id'
|
||||
},
|
||||
{
|
||||
name: 'created_at',
|
||||
align: 'left',
|
||||
label: 'Created/Updated',
|
||||
field: 'created_at',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
name: 'paid',
|
||||
align: 'left',
|
||||
label: 'Paid',
|
||||
field: 'paid',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
name: 'shipped',
|
||||
align: 'left',
|
||||
label: 'Shipped',
|
||||
field: 'shipped',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
name: 'invoice',
|
||||
align: 'left',
|
||||
label: 'Invoice',
|
||||
field: row =>
|
||||
row.payment_options &&
|
||||
row.payment_options.find(p => p.type == 'ln').link
|
||||
}
|
||||
],
|
||||
pagination: {
|
||||
rowsPerPage: 10
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
sortedMessages() {
|
||||
return this.nostrMessages.sort((a, b) => b.timestamp - a.timestamp)
|
||||
return this.nostrMessages.sort((a, b) => b.created_at - a.created_at)
|
||||
},
|
||||
ordersList() {
|
||||
let orders = this.nostrMessages
|
||||
.sort((a, b) => b.created_at - a.created_at)
|
||||
.filter(o => isJson(o.msg))
|
||||
.reduce((acc, cur) => {
|
||||
const obj = JSON.parse(cur.msg)
|
||||
const key = obj.id
|
||||
const curGroup = acc[key] ?? {created_at: cur.timestamp}
|
||||
return {...acc, [key]: {...curGroup, ...obj}}
|
||||
}, {})
|
||||
return Object.values(orders)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -49,9 +104,7 @@ async function chatDialog(path) {
|
|||
})
|
||||
sub.on('event', async event => {
|
||||
let mine = event.pubkey == this.account.pubkey
|
||||
let sender = mine
|
||||
? event.tags.find(([k, v]) => k === 'p' && v && v !== '')[1]
|
||||
: event.pubkey
|
||||
let sender = mine ? this.merchant : event.pubkey
|
||||
|
||||
try {
|
||||
let plaintext
|
||||
|
|
@ -67,19 +120,19 @@ async function chatDialog(path) {
|
|||
event.content
|
||||
)
|
||||
}
|
||||
messagesMap.set(event.id, {
|
||||
msg: plaintext,
|
||||
timestamp: timeFromNow(event.created_at * 1000),
|
||||
sender: `${mine ? 'Me' : 'Merchant'}`
|
||||
})
|
||||
if (plaintext) {
|
||||
messagesMap.set(event.id, {
|
||||
created_at: event.created_at,
|
||||
msg: plaintext,
|
||||
timestamp: timeFromNow(event.created_at * 1000),
|
||||
sender: `${mine ? 'Me' : 'Merchant'}`
|
||||
})
|
||||
this.nostrMessages = Array.from(messagesMap.values())
|
||||
}
|
||||
} catch {
|
||||
console.error('Unable to decrypt message!')
|
||||
}
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.nostrMessages = Array.from(messagesMap.values())
|
||||
this.loading = false
|
||||
}, 5000)
|
||||
},
|
||||
async sendMessage() {
|
||||
if (this.newMessage && this.newMessage.length < 1) return
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<q-toolbar-title></q-toolbar-title>
|
||||
<chat-dialog
|
||||
v-if="this.customerPrivkey || this.customerUseExtension"
|
||||
:account="account"
|
||||
:account="account ? account : dropIn"
|
||||
:merchant="stall.pubkey"
|
||||
:relays="relays"
|
||||
/>
|
||||
|
|
@ -80,13 +80,17 @@
|
|||
</li>
|
||||
<li>use a Nostr Signer Extension (NIP07)</li>
|
||||
<li>
|
||||
fill out the required fields, without keys, and download the
|
||||
order and send as a direct message to the merchant on any
|
||||
Nostr client
|
||||
generate a key pair to make the order (you should backup up
|
||||
your keys)
|
||||
</li>
|
||||
<li>
|
||||
fill out the required fields and with your public key,
|
||||
download the order and send as a direct message to the
|
||||
merchant on any Nostr client
|
||||
</li>
|
||||
</ol>
|
||||
</q-card-section>
|
||||
<q-card-actions v-if="hasNip07" align="right">
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
v-if="hasNip07"
|
||||
unelevated
|
||||
|
|
@ -96,13 +100,12 @@
|
|||
><q-tooltip>Use a Nostr browser extension</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn
|
||||
v-if="!this.account && !this.customerPubkey && !this.customerPrivkey"
|
||||
unelevated
|
||||
@click="downloadOrder"
|
||||
@click="generateKeyPair"
|
||||
color="primary"
|
||||
label="Download order"
|
||||
><q-tooltip
|
||||
>Download the order and send manually</q-tooltip
|
||||
></q-btn
|
||||
label="Generate Keys"
|
||||
><q-tooltip>Generate a new key pair</q-tooltip></q-btn
|
||||
>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
|
|
@ -123,7 +126,8 @@
|
|||
:type="isPwd ? 'password' : 'text'"
|
||||
v-if="!customerUseExtension"
|
||||
v-model.trim="checkoutDialog.data.privkey"
|
||||
hint="Enter your private key or see bellow for instructions"
|
||||
label="Private key *optional"
|
||||
hint="Enter your private key"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
|
|
@ -169,12 +173,13 @@
|
|||
</div>
|
||||
<div class="row q-mt-lg">
|
||||
<q-btn
|
||||
v-if="!checkoutDialog.data.pubkey && !checkoutDialog.data.privkey"
|
||||
v-if="!customerUseExtension && !checkoutDialog.data.privkey"
|
||||
:loading="loading"
|
||||
unelevated
|
||||
color="primary"
|
||||
:disable="checkoutDialog.data.address == null
|
||||
|| checkoutDialog.data.shippingzone == null"
|
||||
|| checkoutDialog.data.shippingzone == null
|
||||
|| checkoutDialog.data.pubkey == null"
|
||||
@click="downloadOrder"
|
||||
>Download Order</q-btn
|
||||
>
|
||||
|
|
@ -213,12 +218,16 @@
|
|||
<a :href="'lightning:' + qrCodeDialog.data.payment_request">
|
||||
<q-responsive :ratio="1" class="q-mx-xl">
|
||||
<qrcode
|
||||
v-if="qrCodeDialog.data.payment_request"
|
||||
:value="qrCodeDialog.data.payment_request"
|
||||
:options="{width: 340}"
|
||||
class="rounded-borders"
|
||||
></qrcode>
|
||||
</q-responsive>
|
||||
</a>
|
||||
<q-inner-loading :showing="loading">
|
||||
<q-spinner-cube size="50px" color="primary" />
|
||||
</q-inner-loading>
|
||||
</div>
|
||||
<div class="row q-mt-lg">
|
||||
<q-btn
|
||||
|
|
@ -236,9 +245,43 @@
|
|||
>Close</q-btn
|
||||
>
|
||||
</div>
|
||||
<q-inner-loading :showing="loading">
|
||||
<q-spinner-cube size="50px" color="primary" />
|
||||
</q-inner-loading>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
<!-- ORDER DOWNLOAD DIALOG -->
|
||||
<q-dialog v-model="downloadOrderDialog.show" position="top">
|
||||
<q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
|
||||
<q-card-section>
|
||||
<div class="text-h6">Order data</div>
|
||||
<div class="text-subtitle1">Merchant pubkey</div>
|
||||
<div class="text-subtitle2" @click="copyText(stall.pubkey)">
|
||||
{{ `${stall.pubkey.slice(0,5)}...${stall.pubkey.slice(-5)}` }}
|
||||
<sup>
|
||||
<q-icon name="content_copy" style="color: #ccc; font-size: 1.2em" />
|
||||
</sup>
|
||||
<q-tooltip>Click to copy</q-tooltip>
|
||||
</div>
|
||||
<p>
|
||||
Send the bellow code as a message, to the merchant pubkey, in any
|
||||
Nostr client
|
||||
</p>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator dark inset />
|
||||
|
||||
<q-card-section>
|
||||
<pre
|
||||
style="font-size: 0.65rem; overflow-x: auto"
|
||||
><code>{{JSON.stringify(downloadOrderDialog.data, null, 2)}}</code></pre>
|
||||
</q-card-section>
|
||||
<div class="row q-mt-lg">
|
||||
<q-btn
|
||||
outline
|
||||
color="primary"
|
||||
@click="copyText(JSON.stringify(downloadOrderDialog.data))"
|
||||
>Copy order</q-btn
|
||||
>
|
||||
<q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
|
||||
</div>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -39,6 +39,10 @@ async function customerStall(path) {
|
|||
payment_request: null
|
||||
},
|
||||
show: false
|
||||
},
|
||||
downloadOrderDialog: {
|
||||
show: false,
|
||||
data: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -55,12 +59,28 @@ async function customerStall(path) {
|
|||
z => z.id == this.checkoutDialog.data.shippingzone
|
||||
)
|
||||
return +this.cart.total + zoneCost.cost
|
||||
},
|
||||
dropIn() {
|
||||
return {
|
||||
privkey: this.customerPrivkey,
|
||||
pubkey: this.customerPubkey,
|
||||
useExtension: this.customerUseExtension
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changePageS(page, opts) {
|
||||
this.$emit('change-page', page, opts)
|
||||
},
|
||||
copyText: function (text) {
|
||||
var notify = this.$q.notify
|
||||
Quasar.utils.copyToClipboard(text).then(function () {
|
||||
notify({
|
||||
message: 'Copied to clipboard!',
|
||||
position: 'bottom'
|
||||
})
|
||||
})
|
||||
},
|
||||
getAmountFormated(amount, unit = 'USD') {
|
||||
return LNbits.utils.formatCurrency(amount, unit)
|
||||
},
|
||||
|
|
@ -115,18 +135,46 @@ async function customerStall(path) {
|
|||
}
|
||||
},
|
||||
async downloadOrder() {
|
||||
return
|
||||
let created_at = Math.floor(Date.now() / 1000)
|
||||
let orderData = this.checkoutDialog.data
|
||||
let orderObj = {
|
||||
name: orderData?.username,
|
||||
address: orderData.address,
|
||||
message: orderData?.message,
|
||||
contact: {
|
||||
nostr: orderData.pubkey,
|
||||
phone: null,
|
||||
email: orderData?.email
|
||||
},
|
||||
items: Array.from(this.cart.products, p => {
|
||||
return {product_id: p[0], quantity: p[1].quantity}
|
||||
})
|
||||
}
|
||||
orderObj.id = await hash(
|
||||
[orderData.pubkey, created_at, JSON.stringify(orderObj)].join(':')
|
||||
)
|
||||
this.downloadOrderDialog.data = orderObj
|
||||
this.downloadOrderDialog.show = true
|
||||
this.resetCheckout()
|
||||
this.resetCart()
|
||||
},
|
||||
async getFromExtension() {
|
||||
this.customerPubkey = await window.nostr.getPublicKey()
|
||||
this.customerUseExtension = true
|
||||
this.checkoutDialog.data.pubkey = this.customerPubkey
|
||||
},
|
||||
async generateKeyPair() {
|
||||
this.customerPrivkey = NostrTools.generatePrivateKey()
|
||||
this.customerPubkey = NostrTools.getPublicKey(this.customerPrivkey)
|
||||
this.customerUseExtension = false
|
||||
this.checkoutDialog.data.pubkey = this.customerPubkey
|
||||
this.checkoutDialog.data.privkey = this.customerPrivkey
|
||||
},
|
||||
openCheckout() {
|
||||
// Check if user is logged in
|
||||
if (this.customerPubkey) {
|
||||
this.checkoutDialog.data.pubkey = this.customerPubkey
|
||||
if (this.customerPrivkey && !useExtension) {
|
||||
if (this.customerPrivkey && !this.useExtension) {
|
||||
this.checkoutDialog.data.privkey = this.customerPrivkey
|
||||
}
|
||||
}
|
||||
|
|
@ -219,6 +267,8 @@ async function customerStall(path) {
|
|||
})
|
||||
relay.on('error', () => {
|
||||
console.log(`failed to connect to ${relay.url}`)
|
||||
relay.close()
|
||||
return
|
||||
})
|
||||
|
||||
await relay.connect()
|
||||
|
|
@ -239,17 +289,20 @@ async function customerStall(path) {
|
|||
this.resetCheckout()
|
||||
this.resetCart()
|
||||
this.qrCodeDialog.show = true
|
||||
this.qrCodeDialog.dismissMsg = this.$q.notify({
|
||||
timeout: 0,
|
||||
this.$q.notify({
|
||||
message: 'Waiting for invoice from merchant...'
|
||||
})
|
||||
this.listenMessages()
|
||||
},
|
||||
async listenMessages() {
|
||||
console.log('LISTEN')
|
||||
this.loading = true
|
||||
try {
|
||||
const pool = new NostrTools.SimplePool()
|
||||
const filters = [
|
||||
{
|
||||
kinds: [4],
|
||||
authors: [this.stall.pubkey]
|
||||
},
|
||||
{
|
||||
kinds: [4],
|
||||
'#p': [this.customerPubkey]
|
||||
|
|
@ -262,7 +315,6 @@ async function customerStall(path) {
|
|||
let sender = mine
|
||||
? event.tags.find(([k, v]) => k === 'p' && v && v !== '')[1]
|
||||
: event.pubkey
|
||||
|
||||
try {
|
||||
let plaintext
|
||||
if (this.customerPrivkey) {
|
||||
|
|
@ -277,7 +329,7 @@ async function customerStall(path) {
|
|||
event.content
|
||||
)
|
||||
}
|
||||
console.log(`${mine ? 'Me' : 'Merchant'}: ${plaintext}`)
|
||||
//console.log(`${mine ? 'Me' : 'Merchant'}: ${plaintext}`)
|
||||
|
||||
this.messageFilter(plaintext, cb => Promise.resolve(pool.close))
|
||||
} catch {
|
||||
|
|
@ -292,15 +344,17 @@ async function customerStall(path) {
|
|||
if (!isJson(text)) return
|
||||
let json = JSON.parse(text)
|
||||
if (json.id != this.activeOrder) return
|
||||
if (json?.payment_options) {
|
||||
this.qrCodeDialog.data.payment_request = json.payment_options.find(
|
||||
o => o.type == 'ln'
|
||||
).link
|
||||
if (json.payment_options) {
|
||||
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
|
||||
this.qrCodeDialog.dismissMsg = this.$q.notify({
|
||||
timeout: 0,
|
||||
message: 'Waiting for payment...'
|
||||
})
|
||||
} else if (json?.paid) {
|
||||
} else if (json.paid) {
|
||||
this.closeQrCodeDialog()
|
||||
this.$q.notify({
|
||||
type: 'positive',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue