Add a banner header (props to JoshuaM) (#41)

* add banner header

* init naddr

* add type to place order content obj

* add content to config

* naddr working, still WIP

* add banner and UI customization

* add banner header

* init naddr

* add type to place order content obj

* add content to config

* naddr working, still WIP

* add banner and UI customization

* add market name to stall page breadcrumbs

* Add usage description to readme

static/components/customer-market/customer-market.html

@@ -22,44 +22,27 @@
           </div>
         </q-card-section>
         <q-card-section>
-          <q-input
-            class="q-ml-md"
-            standout
-            square
-            dense
-            outlined
-            clearable
-            v-model.trim="search"
-            label="Search products"
-            @keydown.enter="searchProducts"
-            hint="Enter search terms separated by spaces"
-          >
+          <q-input class="q-ml-md" standout square dense outlined clearable v-model.trim="search"
+            label="Search products" @keydown.enter="searchProducts" hint="Enter search terms separated by spaces">
             <template v-slot:after>
-              <q-btn
-                dense
-                flat
-                icon="search"
-                label="Search"
-                @click="searchProducts"
-              />
+              <q-btn dense flat icon="search" label="Search" @click="searchProducts" />
             </template>
           </q-input>
         </q-card-section>
       </q-card>
     </div>
   </div>
+  <q-banner v-if="styles?.ui?.banner" class="row q-pa-none q-mb-md">
+    <q-img :src="styles.ui.banner" style="width: 100%; height: 250px" cover></q-img>
+  </q-banner>
   <q-toolbar>
     <q-breadcrumbs>
-      <q-breadcrumbs-el label="Market" icon="home"></q-breadcrumbs-el>
+      <q-breadcrumbs-el :label="styles.name ?? 'Market'" icon="home"></q-breadcrumbs-el>
     </q-breadcrumbs>
   </q-toolbar>
   <div class="row q-col-gutter-md">
-    <div
-      class="col-xs-12 col-sm-6 col-md-4 col-lg-3"
-      v-for="(item, idx) in products"
-      :key="idx"
-    >
+    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" v-for="(item, idx) in products" :key="idx">
       <product-card :product="item" @change-page="changePageM"></product-card>
     </div>
   </div>
-</div>
+</div>

static/components/customer-market/customer-market.js

@@ -10,7 +10,8 @@ async function customerMarket(path) {
       'search-nostr',
       'relays',
       'update-products',
-      'update-stalls'
+      'update-stalls',
+      'styles'
     ],
     data: function () {
       return {

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

@@ -1,79 +1,35 @@
 <div>
   <q-toolbar>
     <q-breadcrumbs class="cursor">
-      <q-breadcrumbs-el
-        label="Market"
-        icon="home"
-        @click="$emit('change-page', 'market')"
-        style="cursor: pointer"
-      ></q-breadcrumbs-el>
-      <q-breadcrumbs-el
-        :label="stall?.name || 'Stall'"
-        icon="widgets"
-      ></q-breadcrumbs-el>
+      <q-breadcrumbs-el :label="styles.name ?? 'Market'" icon="home" @click="$emit('change-page', 'market')"
+        style="cursor: pointer"></q-breadcrumbs-el>
+      <q-breadcrumbs-el :label="stall?.name || 'Stall'" icon="widgets"></q-breadcrumbs-el>
     </q-breadcrumbs>
     <q-toolbar-title></q-toolbar-title>
-    <chat-dialog
-      v-if="this.customerPrivkey || this.customerUseExtension"
-      :account="account ? account : dropIn"
-      :merchant="stall.pubkey"
-      :relays="relays"
-      :pool="pool"
-    />
-    <shopping-cart
-      :cart="cart"
-      :cart-menu="cartMenu"
-      :products="stallProducts"
-      @add-to-cart="addToCart"
-      @remove-from-cart="removeFromCart"
-      @update-qty="updateQty"
-      @reset-cart="resetCart"
-      @open-checkout="openCheckout"
-    ></shopping-cart>
+    <chat-dialog v-if="this.customerPrivkey || this.customerUseExtension" :account="account ? account : dropIn"
+      :merchant="stall.pubkey" :relays="relays" :pool="pool" />
+    <shopping-cart :cart="cart" :cart-menu="cartMenu" :products="stallProducts" @add-to-cart="addToCart"
+      @remove-from-cart="removeFromCart" @update-qty="updateQty" @reset-cart="resetCart"
+      @open-checkout="openCheckout"></shopping-cart>
   </q-toolbar>
   <div class="row">
-    <product-detail
-      class="col-12"
-      v-if="productDetail && product"
-      :product="product"
-      @add-to-cart="addToCart"
-    ></product-detail>
+    <product-detail class="col-12" v-if="productDetail && product" :product="product"
+      @add-to-cart="addToCart"></product-detail>
     <div class="col-12 q-my-lg">
       <q-separator></q-separator>
     </div>
   </div>
   <div class="row q-col-gutter-md">
-    <div
-      class="col-xs-12 col-sm-6 col-md-4 col-lg-3"
-      v-for="(item, idx) in products"
-      :key="idx"
-    >
-      <product-card
-        :product="item"
-        @change-page="changePageS"
-        @add-to-cart="addToCart"
-        :is-stall="true"
-      ></product-card>
+    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" v-for="(item, idx) in products" :key="idx">
+      <product-card :product="item" @change-page="changePageS" @add-to-cart="addToCart" :is-stall="true"></product-card>
     </div>
   </div>
   <!-- BEGIN CHECKOUT DIALOG -->
   <q-dialog v-model="checkoutDialog.show" position="top">
     <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
       <q-form @submit="placeOrder" class="q-gutter-md">
-        <q-input
-          filled
-          dense
-          v-model.trim="checkoutDialog.data.username"
-          label="Name (optional)"
-        ></q-input>
-        <q-expansion-item
-          v-if="!account"
-          dense
-          dense-toggle
-          expand-separator
-          icon="person_off"
-          label="Not logged in?"
-        >
+        <q-input filled dense v-model.trim="checkoutDialog.data.username" label="Name (optional)"></q-input>
+        <q-expansion-item v-if="!account" dense dense-toggle expand-separator icon="person_off" label="Not logged in?">
           <q-card>
             <q-card-section>
               It seems you haven't logged in. You can:
@@ -91,131 +47,53 @@
               </ol>
             </q-card-section>
             <q-card-actions align="right">
-              <q-btn
-                v-if="hasNip07"
-                unelevated
-                @click="getFromExtension"
-                color="primary"
-                label="Get from Extension"
-                ><q-tooltip>Use a Nostr browser extension</q-tooltip></q-btn
-              >
-              <q-btn
-                v-if="!this.account && !this.customerPubkey && !this.customerPrivkey"
-                unelevated
-                @click="makeLogin"
-                color="primary"
-                label="Login"
-              ></q-btn>
+              <q-btn v-if="hasNip07" unelevated @click="getFromExtension" color="primary"
+                label="Get from Extension"><q-tooltip>Use a Nostr browser extension</q-tooltip></q-btn>
+              <q-btn v-if="!this.account && !this.customerPubkey && !this.customerPrivkey" unelevated @click="makeLogin"
+                color="primary" label="Login"></q-btn>
             </q-card-actions>
           </q-card>
         </q-expansion-item>
-        <q-input
-          filled
-          dense
-          :readonly="Boolean(customerPubkey)"
-          v-model.trim="checkoutDialog.data.pubkey"
-          label="Public key"
-          hint="Enter your public key"
-        >
+        <q-input filled dense :readonly="Boolean(customerPubkey)" v-model.trim="checkoutDialog.data.pubkey"
+          label="Public key" hint="Enter your public key">
         </q-input>
-        <q-input
-          filled
-          dense
-          :readonly="Boolean(customerPrivkey)"
-          :type="isPwd ? 'password' : 'text'"
-          v-if="!customerUseExtension"
-          v-model.trim="checkoutDialog.data.privkey"
-          label="Private key (optional)"
-          hint="Enter your private key"
-        >
+        <q-input filled dense :readonly="Boolean(customerPrivkey)" :type="isPwd ? 'password' : 'text'"
+          v-if="!customerUseExtension" v-model.trim="checkoutDialog.data.privkey" label="Private key (optional)"
+          hint="Enter your private key">
           <template v-slot:append>
-            <q-icon
-              :name="isPwd ? 'visibility_off' : 'visibility'"
-              class="cursor-pointer"
-              @click="isPwd = !isPwd"
-            />
+            <q-icon :name="isPwd ? 'visibility_off' : 'visibility'" class="cursor-pointer" @click="isPwd = !isPwd" />
           </template>
         </q-input>
-        <q-input
-          filled
-          dense
-          v-model.trim="checkoutDialog.data.address"
-          label="Address (optional)"
-          hint="If ordering a physical product make sure to fill this"
-        ></q-input>
-        <q-input
-          v-model="checkoutDialog.data.email"
-          filled
-          dense
-          type="email"
-          label="Email (optional)"
-          hint="Merchant may not use email"
-        ></q-input>
-        <q-input
-          v-model="checkoutDialog.data.message"
-          filled
-          dense
-          type="text"
-          label="Message (optional)"
-        ></q-input>
+        <q-input filled dense v-model.trim="checkoutDialog.data.address" label="Address (optional)"
+          hint="If ordering a physical product make sure to fill this"></q-input>
+        <q-input v-model="checkoutDialog.data.email" filled dense type="email" label="Email (optional)"
+          hint="Merchant may not use email"></q-input>
+        <q-input v-model="checkoutDialog.data.message" filled dense type="text" label="Message (optional)"></q-input>
         <p>Select the shipping zone:</p>
         <div class="row q-mt-lg">
-          <q-select
-            style="min-width: 200px"
-            filled
-            dense
-            stack-label
-            v-model="checkoutDialog.data.shippingzone"
-            emit-value
-            map-options
-            :options="stall.shipping.map(s => ({label: s.countries.toString(), value: s.id}))"
-            label="Shipping Zone"
-          />
+          <q-select style="min-width: 200px" filled dense stack-label v-model="checkoutDialog.data.shippingzone"
+            emit-value map-options :options="stall.shipping.map(s => ({label: s.countries.toString(), value: s.id}))"
+            label="Shipping Zone" />
         </div>
         <div class="row q-mt-lg">
           Total: {{ stall.currency != 'sat' ? getAmountFormated(finalCost,
           stall.currency) : finalCost + 'sats' }}
         </div>
         <div class="row q-mt-lg">
-          <q-btn
-            v-if="!customerUseExtension && !checkoutDialog.data.privkey"
-            :loading="loading"
-            unelevated
-            color="primary"
-            :disable="checkoutDialog.data.shippingzone == null
-              || checkoutDialog.data.pubkey == null"
-            @click="downloadOrder"
-            >Download Order</q-btn
-          >
-          <q-btn
-            v-else
-            :loading="loading"
-            unelevated
-            color="primary"
-            :disable="checkoutDialog.data.shippingzone == null
-              || checkoutDialog.data.pubkey == null"
-            type="submit"
-            >Checkout</q-btn
-          >
-          <q-btn
-            v-close-popup
-            flat
-            @click="checkoutDialog = {show: false, data: {pubkey: null}}"
-            color="grey"
-            class="q-ml-auto"
-            >Cancel</q-btn
-          >
+          <q-btn v-if="!customerUseExtension && !checkoutDialog.data.privkey" :loading="loading" unelevated
+            color="primary" :disable="checkoutDialog.data.shippingzone == null
+              || checkoutDialog.data.pubkey == null" @click="downloadOrder">Download Order</q-btn>
+          <q-btn v-else :loading="loading" unelevated color="primary" :disable="checkoutDialog.data.shippingzone == null
+              || checkoutDialog.data.pubkey == null" type="submit">Checkout</q-btn>
+          <q-btn v-close-popup flat @click="checkoutDialog = {show: false, data: {pubkey: null}}" color="grey"
+            class="q-ml-auto">Cancel</q-btn>
         </div>
       </q-form>
     </q-card>
   </q-dialog>
   <!-- END CHECKOUT DIALOG -->
   <!-- INVOICE DIALOG -->
-  <q-dialog
-    v-model="qrCodeDialog.show"
-    position="top"
-    @hide="closeQrCodeDialog"
-  >
+  <q-dialog v-model="qrCodeDialog.show" position="top" @hide="closeQrCodeDialog">
     <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">
@@ -223,12 +101,8 @@
         </div>
         <a v-else :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>
+            <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">
@@ -236,15 +110,8 @@
         </q-inner-loading>
       </div>
       <div class="row q-mt-lg">
-        <q-btn
-          outline
-          color="grey"
-          @click="copyText(qrCodeDialog.data.payment_request)"
-          >Copy invoice</q-btn
-        >
-        <q-btn @click="closeQrCodeDialog" flat color="grey" class="q-ml-auto"
-          >Close</q-btn
-        >
+        <q-btn outline color="grey" @click="copyText(qrCodeDialog.data.payment_request)">Copy invoice</q-btn>
+        <q-btn @click="closeQrCodeDialog" flat color="grey" class="q-ml-auto">Close</q-btn>
       </div>
     </q-card>
   </q-dialog>
@@ -271,18 +138,12 @@
 
       <q-card-section>
         <pre
-          style="font-size: 0.65rem; overflow-x: auto"
-        ><code>{{JSON.stringify(downloadOrderDialog.data, null, 2)}}</code></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 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>
+</div>

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

@@ -14,7 +14,8 @@ async function customerStall(path) {
       'product-detail',
       'change-page',
       'relays',
-      'pool'
+      'pool',
+      'styles'
     ],
     data: function () {
       return {
@@ -31,6 +32,7 @@ async function customerStall(path) {
         customerPrivkey: null,
         customerUseExtension: null,
         activeOrder: null,
+        banner: null,
         checkoutDialog: {
           show: false,
           data: {
@@ -269,7 +271,8 @@ async function customerStall(path) {
           items: Array.from(this.cart.products, p => {
             return {product_id: p[0], quantity: p[1].quantity}
           }),
-          shipping_id: orderData.shippingzone
+          shipping_id: orderData.shippingzone,
+          type: 0
         }
         let created_at = Math.floor(Date.now() / 1000)
         orderObj.id = await hash(
@@ -375,9 +378,8 @@ async function customerStall(path) {
             this.qrCodeDialog.data.message = json.message
             return cb()
           }
-          let payment_request = json.payment_options.find(
-            o => o.type == 'ln'
-          ).link
+          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

static/js/market.js

@@ -61,7 +61,21 @@ const market = async () => {
         activePage: 'market',
         activeStall: null,
         activeProduct: null,
-        pool: null
+        pool: null,
+        config: null,
+        configDialog: {
+          show: false,
+          data: {
+            name: null,
+            about: null,
+            ui: {
+              picture: null,
+              banner: null,
+              theme: null
+            }
+          }
+        },
+        naddr: null,
       }
     },
     computed: {
@@ -103,11 +117,15 @@ const market = async () => {
           key = data
         }
         return key?.toLowerCase()?.match(/^[0-9a-f]{64}$/)
+      },
+      canEditConfig(){
+        return this.account && this.account.pubkey == this.config?.pubkey
       }
     },
     async created() {
       // Check for user stored
       this.account = this.$q.localStorage.getItem('diagonAlley.account') || null
+      //console.log("UUID", crypto.randomUUID())
 
       // Check for stored merchants and relays on localStorage
       try {
@@ -132,6 +150,23 @@ const market = async () => {
       let merchant_pubkey = params.get('merchant_pubkey')
       let stall_id = params.get('stall_id')
       let product_id = params.get('product_id')
+      let naddr = params.get('naddr')
+
+      if(naddr) {
+        try {
+          let {type, data} = NostrTools.nip19.decode(naddr)
+          if(type == 'naddr' && data.kind == '30019') { // just double check
+            this.config = {
+              d: data.identifier,
+              pubkey: data.pubkey,
+              relays: data.relays
+            }
+          }
+          this.naddr = naddr
+        }catch (err){
+          console.error(err)
+        }
+      }
 
       // What component to render on start
       if (stall_id) {
@@ -204,6 +239,79 @@ const market = async () => {
       openAccountDialog() {
         this.accountDialog.show = true
       },
+      editConfigDialog(){
+        if(this.canEditConfig && this.config?.opts){
+          let {name, about, ui} = this.config.opts
+          this.configDialog.data = {name, about, ui}
+          this.configDialog.data.identifier = this.config?.d
+        }
+        this.openConfigDialog()
+      },
+      openConfigDialog() {
+        if(!this.account){
+          this.$q.notify({
+            message: `You need to be logged in first.`,
+            color: 'negative',
+            icon: 'warning'
+          })
+          return 
+        }
+        this.configDialog.show = true
+      },
+      async sendConfig() {
+        let {name, about, ui} = this.configDialog.data
+        let merchants = Array.from(this.pubkeys)
+        let identifier = this.configDialog.data.identifier ?? crypto.randomUUID()
+        let event = {
+          ...(await NostrTools.getBlankEvent()),
+          kind: 30019,
+          content: JSON.stringify({name, about, ui, merchants}),
+          created_at: Math.floor(Date.now() / 1000),
+          tags: [['d', identifier]],
+          pubkey: this.account.pubkey
+        }
+        event.id = NostrTools.getEventHash(event)
+        try {
+          if(this.account.useExtension){
+            event = await window.nostr.signEvent(event)
+          }else if (this.account.privkey) {
+            event.sig = await NostrTools.signEvent(event, this.account.privkey)
+          }
+          let pub = this.pool.publish(Array.from(this.relays), event)
+          pub.on('ok', () => console.debug(`Config event was sent`))
+          pub.on('failed', error => console.error(error))
+        } catch (err) {
+          console.error(err)
+          this.$q.notify({
+            message: `Error signing event.`,
+            color: 'negative',
+            icon: 'warning'
+          })
+          return
+        }
+        this.naddr = NostrTools.nip19.naddrEncode({
+          pubkey: event.pubkey,
+          kind: 30019,
+          identifier: identifier,
+          relays: Array.from(this.relays)
+        })
+        this.config = this.configDialog.data
+        this.resetConfig()
+        return 
+      },
+      resetConfig() {
+        this.configDialog = {show: false,
+          identifier: null,
+        data: {
+          name: null,
+          about: null,
+          ui: {
+            picture: null,
+            banner: null,
+            theme: null
+          }
+        }}
+      },
       async updateData(events) {
         if (events.length < 1) {
           this.$q.notify({
@@ -254,6 +362,28 @@ const market = async () => {
       async initNostr() {
         this.$q.loading.show()
         const pool = new NostrTools.SimplePool()
+        
+        // If there is an naddr in the URL, get it and parse content
+        if (this.config) {  
+          // add relays to the set   
+          this.config.relays.forEach(r => this.relays.add(r))
+          await pool.get(this.config.relays, {
+            kinds: [30019],
+            limit: 1,
+            authors: [this.config.pubkey],
+            '#d': [this.config.d]
+          }).then(event => {
+            if(!event) return 
+            let content = JSON.parse(event.content)   
+            this.config = {... this.config, opts: content}            
+            // add merchants 
+            this.config.opts?.merchants.forEach(m => this.pubkeys.add(m))
+            // change theme
+            let {theme} = this.config.opts?.ui
+            theme && document.body.setAttribute('data-theme', theme)
+          }).catch(err => console.error(err))          
+        }
+        
         let relays = Array.from(this.relays)
 
         // Get metadata and market data from the pubkeys
@@ -323,6 +453,15 @@ const market = async () => {
         window.history.pushState({}, '', url)
         this.activePage = page
       },
+      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)
       },