tweak not logged in customer

static/components/chat-dialog/chat-dialog.js

@@ -17,7 +17,7 @@ async function chatDialog(path) {
     },
     computed: {
       sortedMessages() {
-        return this.nostrMessages.sort((a, b) => b.timestamp - a.timestamp)
+        return this.nostrMessages.sort((a, b) => b.created_at - a.created_at)
       }
     },
     methods: {
@@ -36,11 +36,11 @@ async function chatDialog(path) {
         let sub = this.pool.sub(Array.from(this.relays), [
           {
             kinds: [4],
-            authors: [this.account.pubkey]
+            authors: [this.account.pubkey, this.merchant]
           },
           {
             kinds: [4],
-            '#p': [this.account.pubkey]
+            '#p': [this.account.pubkey, this.merchant]
           }
         ])
         sub.on('eose', () => {
@@ -68,18 +68,16 @@ async function chatDialog(path) {
               )
             }
             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

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

@@ -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,8 +80,8 @@
                 </li>
                 <li>use a Nostr Signer Extension (NIP07)</li>
                 <li>
-                  fill out the required fields, without keys, and download the
+                  fill out the required fields, with your publickey, download
-                  order and send as a direct message to the merchant on any
+                  the order and send as a direct message to the merchant on any
                   Nostr client
                 </li>
               </ol>
@@ -95,15 +95,6 @@
                 label="Get from Extension"
                 ><q-tooltip>Use a Nostr browser extension</q-tooltip></q-btn
               >
-              <q-btn
-                unelevated
-                @click="downloadOrder"
-                color="primary"
-                label="Download order"
-                ><q-tooltip
-                  >Download the order and send manually</q-tooltip
-                ></q-btn
-              >
             </q-card-actions>
           </q-card>
         </q-expansion-item>
@@ -123,7 +114,7 @@
           :type="isPwd ? 'password' : 'text'"
           v-if="!customerUseExtension"
           v-model.trim="checkoutDialog.data.privkey"
-          label="Private key"
+          label="Private key *optional"
           hint="Enter your private key"
         >
           <template v-slot:append>
@@ -170,12 +161,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
           >
@@ -214,12 +206,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
@@ -237,9 +233,6 @@
           >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 -->
@@ -247,18 +240,36 @@
     <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-subtitle2">{{ stall.pubkey }}</div>
+        <div class="text-subtitle1">Merchant pubkey</div>
-        <small
+        <div class="text-subtitle2" @click="copyText(stall.pubkey)">
-          >Send the bellow message, to the merchant pubkey, in any Nostr
+          {{ `${stall.pubkey.slice(0,5)}...${stall.pubkey.slice(-5)}` }}
-          client</small
+          <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>{{JSON.stringify(downloadOrderDialog.data, null, 2)}}</pre>
+        <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>

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

@@ -59,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)
       },
@@ -120,24 +136,27 @@ async function customerStall(path) {
       },
       async downloadOrder() {
         let created_at = Math.floor(Date.now() / 1000)
-        let order = this.checkoutDialog.data
+        let orderData = this.checkoutDialog.data
-        // this.downloadOrderDialog.data = {
+        let orderObj = {
-        //   name: orderData?.username,
+          name: orderData?.username,
-        //   address: orderData.address,
+          address: orderData.address,
-        //   message: orderData?.message,
+          message: orderData?.message,
-        //   contact: {
+          contact: {
-        //     nostr: this.customerPubkey,
+            nostr: orderData.pubkey,
-        //     phone: null,
+            phone: null,
-        //     email: orderData?.email
+            email: orderData?.email
-        //   },
+          },
-        //   items: Array.from(this.cart.products, p => {
+          items: Array.from(this.cart.products, p => {
-        //     return {product_id: p[0], quantity: p[1].quantity}
+            return {product_id: p[0], quantity: p[1].quantity}
-        //   })
+          })
-        // }
+        }
-        // orderObj.id = await hash(
+        orderObj.id = await hash(
-        //   [this.customerPubkey, created_at, JSON.stringify(orderObj)].join(':')
+          [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()
@@ -241,6 +260,8 @@ async function customerStall(path) {
             })
             relay.on('error', () => {
               console.log(`failed to connect to ${relay.url}`)
+              relay.close()
+              return
             })
 
             await relay.connect()
@@ -261,17 +282,20 @@ async function customerStall(path) {
         this.resetCheckout()
         this.resetCart()
         this.qrCodeDialog.show = true
-        this.qrCodeDialog.dismissMsg = this.$q.notify({
+        this.$q.notify({
-          timeout: 0,
           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]
@@ -284,7 +308,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) {
@@ -314,15 +337,17 @@ async function customerStall(path) {
         if (!isJson(text)) return
         let json = JSON.parse(text)
         if (json.id != this.activeOrder) return
-        if (json?.payment_options) {
+        if (json.payment_options) {
-          this.qrCodeDialog.data.payment_request = json.payment_options.find(
+          let payment_request = json.payment_options.find(o => o.type == 'ln')
-            o => o.type == 'ln'
+            .link
-          ).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',