286 lines
8.7 KiB
HTML
286 lines
8.7 KiB
HTML
<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>
|
|
<q-toolbar-title></q-toolbar-title>
|
|
<chat-dialog
|
|
v-if="this.customerPrivkey || this.customerUseExtension"
|
|
:account="account ? account : dropIn"
|
|
:merchant="stall.pubkey"
|
|
:relays="relays"
|
|
/>
|
|
<shopping-cart
|
|
:cart="cart"
|
|
:cart-menu="cartMenu"
|
|
@remove-from-cart="removeFromCart"
|
|
@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>
|
|
<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>
|
|
</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-card>
|
|
<q-card-section>
|
|
It seems you haven't logged in. You can:
|
|
<ol>
|
|
<li>
|
|
enter your public and private keys bellow (to sign the order
|
|
message)
|
|
</li>
|
|
<li>use a Nostr Signer Extension (NIP07)</li>
|
|
<li>
|
|
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 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="generateKeyPair"
|
|
color="primary"
|
|
label="Generate Keys"
|
|
><q-tooltip>Generate a new key pair</q-tooltip></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>
|
|
<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"
|
|
/>
|
|
</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>
|
|
<p>Select the shipping zone:</p>
|
|
<div class="row q-mt-lg">
|
|
<q-option-group
|
|
:options="stall.shipping.map(s => ({label: s.countries.toString(), value: s.id}))"
|
|
type="radio"
|
|
emit-value
|
|
v-model="checkoutDialog.data.shippingzone"
|
|
/>
|
|
</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
|
|
>
|
|
</div>
|
|
</q-form>
|
|
</q-card>
|
|
</q-dialog>
|
|
<!-- END CHECKOUT DIALOG -->
|
|
<!-- INVOICE DIALOG -->
|
|
<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">
|
|
<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-puff size="50px" color="primary" />
|
|
</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"
|
|
v-close-popup
|
|
flat
|
|
color="grey"
|
|
class="q-ml-auto"
|
|
>Close</q-btn
|
|
>
|
|
</div>
|
|
</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>
|