176 lines
8.2 KiB
Plaintext
176 lines
8.2 KiB
Plaintext
---
|
|
layout: layouts/base.njk
|
|
title: Order
|
|
---
|
|
|
|
<style>
|
|
#qr_wrapper {
|
|
max-width: 80vh;
|
|
width: 80vw;
|
|
height: 80vh;
|
|
max-height: 80vw;
|
|
padding: calc(1.5vh + 1.5vw);
|
|
background-color: #FFFFFF;
|
|
margin: auto;
|
|
}
|
|
#qr_wrapper div {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="/assets/shop.css">
|
|
<script src="https://js.stripe.com/v3/"></script>
|
|
|
|
<h1>📋 Order <span data-bind="visible:isPaid,text:orderId"></span> <span data-bind="text:titleStatus"></span></h1>
|
|
|
|
{# Intro #}
|
|
<p data-bind="visible:isPaid">Your order number is <code data-bind="text:orderId">(loading)</code>. You may bookmark and/or <a href="javascript:window.print()">print</a> this page for your records. You can also share this secret link:</p>
|
|
<pre data-bind="visible:isPaid"><code data-bind="text:orderUrl"></code></pre>
|
|
|
|
<hr>
|
|
|
|
{# Items #}
|
|
<table class="tal" style="width:100%"><thead><b>
|
|
<th>Item</th>
|
|
<th class="tar">Price</th>
|
|
<th class="tar">Qty</th>
|
|
<th class="tar">Sub</th>
|
|
</b></thead><tbody data-bind="foreach:items"><tr>
|
|
<td data-bind="text:name"></td>
|
|
<td class="tar" data-bind="text:price"></td>
|
|
<td class="tar" data-bind="text:qty" style="width:2rem"></td>
|
|
<td class="tar" data-bind="text:subtotal"></td>
|
|
</tr></tbody></table>
|
|
<hr>
|
|
|
|
{# Order details #}
|
|
<div class="flex" style="align-items:flex-start">
|
|
<p id="shipping-container">
|
|
<b>📦 <span class="ul">Shipping</span></b><br>
|
|
<span data-bind="text:shipname"></span>
|
|
<br><span data-bind="text:addr1"></span>
|
|
<br><span data-bind="text:addr2"></span>
|
|
<br><span data-bind="text:city"></span>,
|
|
<span data-bind="text:state"></span>
|
|
<span data-bind="text:zip"></span>
|
|
</p>
|
|
<p id="contact-container">
|
|
<b>📇 <span class="ul">Contact</ul></b><br>
|
|
<span data-bind="text:contactname"></span>
|
|
<br><span data-bind="text:phone"></span>
|
|
<br><span data-bind="text:email"></span>
|
|
</p>
|
|
<div id="totals-container">
|
|
<table><tbody>
|
|
<tr>
|
|
<td>Subtotal:</td>
|
|
<td class="tar" data-bind="text:subtotal"></td>
|
|
</tr><tr>
|
|
<td>Tax:</td>
|
|
<td class="tar" data-bind="text:tax"></td>
|
|
</tr><tr>
|
|
<td>Shipping:</td>
|
|
<td class="tar" data-bind="text:shipping"></td>
|
|
</tr><tr data-bind="visible:paymentMethod()=='USD'">
|
|
<td>Processing:</td>
|
|
<td class="tar" data-bind="text:processing_pretty"></td>
|
|
</tr><tr style="border-top:.1vh solid">
|
|
<td><b>Total:</b></td>
|
|
<td class="tar"><b data-bind="text:total_pretty"></b></td>
|
|
</tr><tr data-bind="visible:paymentMethod()=='XMR'">
|
|
<td><b>Monero:</b></td>
|
|
<td class="tar"><b data-bind="text:totalxmr_pretty"></b>
|
|
</td></tr>
|
|
</tbody></table>
|
|
<p data-bind="visible:isPaid">
|
|
Paid: <span data-bind="text:paidDate_pretty"></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<p data-bind="hidden:isPaid">To change order details, <a href="#" onclick="cancel()">cancel it and return to your cart</a>.</p>
|
|
<hr>
|
|
|
|
<h2><span data-bind="visible:paymentMethod()==='USD'">💳 </span><span data-bind="visible:paymentMethod()==='XMR'"><img src="/assets/img/monero.svg" style="width:1em;height:1em"> </span>Payment</h2>
|
|
|
|
{# XMR Payment form #}
|
|
<div data-bind="hidden:(paymentMethod()!='XMR'||isSubmitted())">
|
|
<p>Please send <code data-bind="text:unsubmitted"></code> XMR to this address: </p>
|
|
<pre><code data-bind="text:xmr_address"></code></pre>
|
|
<p>You can also click, tap, or scan this qr code:</p>
|
|
<a data-bind="attr:{href:xmr_uri}"><div id="qr_wrapper"><div id="xmr_qr"></div></div></a>
|
|
</div>
|
|
|
|
{# Stripe payment form #}
|
|
<div data-bind="hidden:(paymentMethod()!='USD'||isPaid())">
|
|
<div id="stripe-payment">Loading payment form...</div>
|
|
<button data-bind="click:submitStripePayment(), text:stripeSubmitButtonText(),disable:isPlacingStripeOrder()" style="margin:2em 0 1em;height:4em"></button>
|
|
</div>
|
|
|
|
<hr data-bind="hidden:(isSubmitted()||paymentMethod()==='USD')">
|
|
|
|
{# Stripe payment status #}
|
|
<p data-bind="text:stripeText"></p>
|
|
|
|
{# Monero payment status #}
|
|
<div data-bind="visible:paymentMethod()=='XMR'">
|
|
<p>Your order is for <code data-bind="text:totalxmr_pretty"></code>.
|
|
<br><code data-bind="text:submitted_pretty"></code> have been submitted to the blockchain.
|
|
<br><code data-bind="text:unlocked_pretty"></code> have been unlocked.
|
|
</p>
|
|
<div data-bind="hidden:isPaid">
|
|
<p>Transactions you send will appear on this page when they are accepted into a block. <b><i>THIS COULD TAKE TEN MINUTES OR MORE</i></b>. Transactions "unlock" after receiving 10 confirmations on the blockchain, each taking a few minutes each. Once the full <span data-bind="text:totalxmr_pretty"></span> are unlocked, we'll ship your order.
|
|
<p>You don't have to wait for the payment to unlock. After sumbitting it in your wallet app<span data-bind="visible:isSubmitted()"> (which you've done already)</span>, you can close this window. When the payment confirms, we'll send a link to this page to the email specified, if you ever want to come back and check on the order.</p>
|
|
</div><div data-bind="visible:isPaid">
|
|
<p>Your payment has been confirmed! We will ship your order as soon as possible and send an email with the tracking info.</p>
|
|
</div>
|
|
<p data-bind="visible:isOverpaid">You <i>overpaid</I> us by <code data-bind="text:overpaidAmount_pretty"></code>! We would be happy to return the change to you at no extra cost. This process is done by hand so please email us{% if env.SALES_EMAIL %} at {{env.SALES_EMAIL}}{% endif %} to let us know that you overpaid. Be sure to include your order number, <code data-bind="text:orderId"></code>, as well as a monero address where you can receive the refund. </p>
|
|
<h3 data-bind="visible:transactions().length>0">Transactions</h3>
|
|
<table data-bind="visible:transactions().length>0">
|
|
<thead>
|
|
<th class="tal">Date</th>
|
|
<th class="tal">Time</th>
|
|
<th class="tal">Amt</th>
|
|
<th class="tal">Fee</th>
|
|
<th class="tal">Confs</th>
|
|
<th class="tal">Block</th>
|
|
<th class="tal">Stat</th>
|
|
</thead>
|
|
<tbody data-bind="foreach:transactions"><tr>
|
|
<td class="tal" data-bind="text:date"></td>
|
|
<td class="tal" data-bind="text:time"></td>
|
|
<td class="tal" data-bind="text:amount"></td>
|
|
<td class="tal" data-bind="text:fee_usd_pretty"></td>
|
|
<td class="tal" data-bind="text:confirmations"></td>
|
|
<td class="tal" data-bind="text:height"></td>
|
|
<td class="tal" style="cursor:default">
|
|
<span data-bind="visible:locked" title="LOCKED: Wait for 10 confirmations for this transaction to unlock">⏲️</span>
|
|
<span data-bind="visible:double_spend_seen" title="DOUBLE SPENT! Double-spend has been detected! This transaction is invalid. Contact {{metadata.sales.email}} to resolve.">⛔</span>
|
|
<span data-bind="hidden:(locked||double_spend_seen)" title="CONFIRMED! This transaction is valid and has been confirmed by the blockchain.">✅</span>
|
|
</td>
|
|
</tr></tbody>
|
|
</table>
|
|
<p data-bind="hidden:isPaid"><i data-bind="text:checkingStatus"></i></p>
|
|
</div>
|
|
|
|
{# Shipment section #}
|
|
<div data-bind="visible:isPaid">
|
|
<hr>
|
|
<h2>📦 Shipment</h2>
|
|
<p data-bind="hidden:isShipped">Your order has not yet shipped. We will email you a tracking number when it goes out. You can also check back here for updates.</p>
|
|
<p data-bind="visible:isShipped">Your order was shipped through <span data-bind="text:shipCarrier"></span> on <span data-bind="text:shipDate_pretty"></span>. You can <a data-bind="attr:{href:tracking_url}">track your package through <span data-bind="text:shipCarrier"></span></a> or copy-paste the tracking number below.</p>
|
|
<pre data-bind="visible:isShipped"><code data-bind="text:trackingNumbers_newlined"></code></pre>
|
|
</div>
|
|
|
|
<script>
|
|
const stripe = Stripe('{{env.STRIPE_PUB}}')
|
|
const SUCCESS_URL = '{{env.SITE_DOMAIN}}/shop/order/'
|
|
const API_DOMAIN = '{{env.API_DOMAIN}}'
|
|
const SITE_DOMAIN = '{{env.SITE_DOMAIN}}'
|
|
const MONERO_PRICECHECK_SEC = {{env.MONERO_PRICECHECK_SEC}}
|
|
const MONERO_CHECKOUT_POLL_SECS = {{env.MONERO_CHECKOUT_POLL_SECS}}
|
|
</script>
|
|
<script src="/assets/scripts/lib/qrcode.min.js" integrity="sha256-CxytvzTC2wdC92a5wqFc1DTkbS+uuQ8N2NgxGcuqoDc="></script>
|
|
<script src="/assets/scripts/lib/knockout-3.5.1.min.js" integrity="sha256-6JV7sYKlBHsHvqCkn9IrEWFLGrmsW4KG/LIln0hljnM="></script>
|
|
{#<script src="/assets/scripts/lib/socket-io_4-5-4.min.js" integrity="sha256-GKNqkn2sVGULGLkD+Ph3ghngLhOUblgdmz4eSZX3Q1s="></script>#}
|
|
<script src="/assets/scripts/order.js" integrity="{{'/assets/scripts/order.js'|srintegrity}}" defer></script>
|