2019-01-14 22:43:29 +01:00
|
|
|
@model BTCPayServer.Models.PaymentRequestViewModels.ViewPaymentRequestViewModel
|
|
|
|
|
|
|
|
|
|
@addTagHelper *, Meziantou.AspNetCore.BundleTagHelpers
|
|
|
|
|
@inject BTCPayServer.HostedServices.CssThemeManager themeManager
|
|
|
|
|
@{
|
|
|
|
|
ViewData["Title"] = Model.Title;
|
|
|
|
|
Layout = null;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html class="h-100">
|
|
|
|
|
<head>
|
|
|
|
|
<title>@Model.Title</title>
|
2019-03-12 07:48:24 +01:00
|
|
|
<meta charset="utf-8" />
|
2019-01-14 22:43:29 +01:00
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
2019-03-12 07:48:24 +01:00
|
|
|
<link href="@Context.Request.GetRelativePathOrAbsolute(themeManager.BootstrapUri)" rel="stylesheet" />
|
2019-01-14 22:43:29 +01:00
|
|
|
@if (Model.CustomCSSLink != null)
|
|
|
|
|
{
|
2019-03-12 07:48:24 +01:00
|
|
|
<link href="@Model.CustomCSSLink" rel="stylesheet" />
|
2019-01-14 22:43:29 +01:00
|
|
|
}
|
|
|
|
|
@if (!Context.Request.Query.ContainsKey("simple"))
|
|
|
|
|
{
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
var srvModel = @Html.Raw(Json.Serialize(Model));
|
|
|
|
|
</script>
|
|
|
|
|
<bundle name="wwwroot/bundles/payment-request-bundle-1.min.js"></bundle>
|
|
|
|
|
<bundle name="wwwroot/bundles/payment-request-bundle-2.min.js"></bundle>
|
2019-03-12 07:48:24 +01:00
|
|
|
@*We need to make sure btcpay.js is not bundled, else it will not work if there is a RootPath*@
|
|
|
|
|
<script src="~/modal/btcpay.js"></script>
|
2019-01-14 22:43:29 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
<bundle name="wwwroot/bundles/payment-request-bundle.min.css"></bundle>
|
|
|
|
|
@if (!string.IsNullOrEmpty(Model.EmbeddedCSS))
|
|
|
|
|
{
|
|
|
|
|
<style>
|
2019-03-12 07:48:24 +01:00
|
|
|
@Html.Raw(Model.EmbeddedCSS);
|
2019-01-14 22:43:29 +01:00
|
|
|
</style>
|
|
|
|
|
}
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
@if (Context.Request.Query.ContainsKey("simple"))
|
|
|
|
|
{
|
|
|
|
|
@await Html.PartialAsync("MinimalPaymentRequest", Model)
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
<noscript>
|
|
|
|
|
@await Html.PartialAsync("MinimalPaymentRequest", Model)
|
|
|
|
|
</noscript>
|
|
|
|
|
|
|
|
|
|
<div class="container" id="app" v-cloak>
|
|
|
|
|
<div class="row w-100 p-0 m-0" style="height: 100vh">
|
|
|
|
|
<div class="mx-auto my-auto w-100">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h1 class="card-header">
|
|
|
|
|
{{srvModel.title}}
|
|
|
|
|
|
|
|
|
|
<span class="text-muted float-right text-center">
|
|
|
|
|
<template v-if="settled">Settled</template>
|
|
|
|
|
<template v-else>
|
|
|
|
|
<template v-if="ended">Request Expired</template>
|
|
|
|
|
<template v-else-if="endDiff">Expires in {{endDiff}}</template>
|
|
|
|
|
</template>
|
|
|
|
|
</span>
|
|
|
|
|
</h1>
|
|
|
|
|
<div class="card-body px-0 pt-0">
|
|
|
|
|
<div class="row mb-4">
|
|
|
|
|
<div class="col-sm-12 col-md-12 col-lg-6 ">
|
|
|
|
|
<ul class="w-100 list-group list-group-flush">
|
|
|
|
|
<li class="list-group-item">
|
|
|
|
|
<div class="d-flex justify-content-between">
|
|
|
|
|
<span class="h2 text-muted">Request amount:</span>
|
|
|
|
|
<span class="h2">{{srvModel.amountFormatted}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="list-group-item">
|
|
|
|
|
<div class="d-flex justify-content-between">
|
|
|
|
|
<span class="h2 text-muted">Paid so far:</span>
|
|
|
|
|
<span class="h2">{{srvModel.amountCollectedFormatted}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="list-group-item">
|
|
|
|
|
<div class="d-flex justify-content-between">
|
|
|
|
|
<span class="h2 text-muted">Amount due:</span>
|
|
|
|
|
<span class="h2">{{srvModel.amountDueFormatted}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<div v-html="srvModel.description" class="w-100 p-2"></div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-sm-12 col-md-12 col-lg-6">
|
|
|
|
|
<div class="table-responsive">
|
|
|
|
|
<table class="table border-top-0 ">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th class=" border-top-0" scope="col">Invoice #</th>
|
|
|
|
|
<th class=" border-top-0">Price</th>
|
|
|
|
|
<th class=" border-top-0">Expiry</th>
|
|
|
|
|
<th class=" border-top-0">Status</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr v-if="!srvModel.invoices || srvModel.invoices.length == 0">
|
|
|
|
|
<td colspan="4" class="text-center">No payments made yet</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<template v-else v-for="invoice of srvModel.invoices" :key="invoice.id">
|
|
|
|
|
<tr class="bg-light">
|
|
|
|
|
<td scope="row">{{invoice.id}}</td>
|
2019-03-03 23:51:19 +01:00
|
|
|
<td>{{invoice.amountFormatted}}</td>
|
2019-01-14 22:43:29 +01:00
|
|
|
<td>{{moment(invoice.expiryDate).format('L HH:mm')}}</td>
|
|
|
|
|
<td>{{invoice.status}}</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr class="bg-light" v-if="invoice.payments && invoice.payments.length > 0">
|
|
|
|
|
<td colspan="4" class=" px-2 py-1 border-top-0">
|
|
|
|
|
|
|
|
|
|
<div class="table-responsive">
|
|
|
|
|
<table class="table table-bordered">
|
|
|
|
|
<tr>
|
2019-02-22 11:37:45 +01:00
|
|
|
<th class="p-1" style="max-width: 300px">Tx Id</th>
|
2019-01-14 22:43:29 +01:00
|
|
|
<th class="p-1">Payment Method</th>
|
|
|
|
|
<th class="p-1">Amount</th>
|
|
|
|
|
<th class="p-1">Link</th>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr v-for="payment of invoice.payments">
|
|
|
|
|
<td class="p-1 m-0 d-print-none d-block" style="max-width: 300px">
|
|
|
|
|
<div style="width: 100%; overflow-x: auto; overflow-wrap: initial;">{{payment.id}}</div>
|
|
|
|
|
</td>
|
|
|
|
|
<td class="p-1 m-0 d-none d-print-table-cell" style="max-width: 150px;">
|
|
|
|
|
{{payment.id}}
|
|
|
|
|
</td>
|
|
|
|
|
<td class="p-1">{{formatPaymentMethod(payment.paymentMethod)}}</td>
|
|
|
|
|
<td class="p-1">{{payment.amount.noExponents()}}</td>
|
|
|
|
|
<td class="p-1 d-print-none">
|
|
|
|
|
<a v-if="payment.link" :href="payment.link" target="_blank">Link</a>
|
|
|
|
|
</td>
|
|
|
|
|
<td class="p-1 d-none d-print-table-cell" style="max-width: 150px;">
|
|
|
|
|
{{payment.link}}
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</template>
|
|
|
|
|
<tr v-if="!ended && (srvModel.amountDue) > 0" class="d-print-none">
|
|
|
|
|
<td colspan="4" class="text-center">
|
|
|
|
|
|
|
|
|
|
<template v-if="srvModel.allowCustomPaymentAmounts && !srvModel.anyPendingInvoice">
|
|
|
|
|
<form v-on:submit="submitCustomAmountForm">
|
|
|
|
|
|
2019-02-22 11:37:45 +01:00
|
|
|
<div class="input-group m-auto" style="max-width: 250px">
|
2019-01-14 22:43:29 +01:00
|
|
|
<input
|
|
|
|
|
:readonly="!srvModel.allowCustomPaymentAmounts"
|
|
|
|
|
class="form-control"
|
|
|
|
|
type="number"
|
|
|
|
|
v-model="customAmount"
|
|
|
|
|
:max="srvModel.amountDue"
|
|
|
|
|
step="any"
|
|
|
|
|
placeholder="Amount"
|
|
|
|
|
required>
|
|
|
|
|
<div class="input-group-append">
|
|
|
|
|
<span class='input-group-text'>{{currency}}</span>
|
|
|
|
|
<button
|
|
|
|
|
class="btn btn-primary"
|
|
|
|
|
v-bind:class="{ 'btn-disabled': loading}"
|
|
|
|
|
:disabled="loading"
|
|
|
|
|
type="submit">
|
|
|
|
|
<div v-if="loading" class="spinner-grow spinner-grow-sm" role="status">
|
|
|
|
|
<span class="sr-only">Loading...</span>
|
|
|
|
|
</div>
|
|
|
|
|
Pay now
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<button v-else class="btn btn-primary btn-lg " v-on:click="pay(null)"
|
|
|
|
|
:disabled="loading">
|
|
|
|
|
<div v-if="loading" class="spinner-grow spinner-grow-sm" role="status">
|
|
|
|
|
<span class="sr-only">Loading...</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
Pay now
|
|
|
|
|
</button>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-footer text-muted d-flex justify-content-between">
|
|
|
|
|
|
|
|
|
|
<div >
|
|
|
|
|
<span v-on:click="print" class="btn-link d-print-none" style="cursor: pointer"> <span class="fa fa-print"></span> Print</span>
|
|
|
|
|
<span>Updated {{lastUpdated}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div >
|
|
|
|
|
<span class="text-muted">Powered by </span><a href="https://btcpayserver.org" target="_blank">BTCPay Server</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
