2019-01-14 22:43:29 +01:00
|
|
|
@model BTCPayServer.Models.PaymentRequestViewModels.ViewPaymentRequestViewModel
|
|
|
|
|
|
2019-03-23 19:10:16 -05:00
|
|
|
@addTagHelper *, BundlerMinifier.TagHelpers
|
2020-09-28 12:10:40 +02:00
|
|
|
@inject BTCPayServer.Services.BTCPayServerEnvironment env
|
2019-01-14 22:43:29 +01:00
|
|
|
@inject BTCPayServer.HostedServices.CssThemeManager themeManager
|
|
|
|
|
@{
|
|
|
|
|
ViewData["Title"] = Model.Title;
|
|
|
|
|
Layout = null;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
<!DOCTYPE html>
|
2020-09-28 12:10:40 +02:00
|
|
|
<html lang="en" @(env.IsDeveloping ? " data-devenv" : "")>
|
2019-01-14 22:43:29 +01:00
|
|
|
<head>
|
|
|
|
|
<title>@Model.Title</title>
|
2019-03-12 15:48:24 +09:00
|
|
|
<meta charset="utf-8" />
|
2020-09-25 18:08:45 +02:00
|
|
|
<meta name="robots" content="noindex,nofollow">
|
|
|
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
2019-01-14 22:43:29 +01:00
|
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
2019-03-12 15:48:24 +09:00
|
|
|
<link href="@Context.Request.GetRelativePathOrAbsolute(themeManager.BootstrapUri)" rel="stylesheet" />
|
2019-10-26 21:20:39 +02:00
|
|
|
<link href="@Context.Request.GetRelativePathOrAbsolute(themeManager.ThemeUri)" rel="stylesheet" />
|
2020-09-25 18:08:45 +02:00
|
|
|
<bundle name="wwwroot/bundles/payment-request-bundle.min.css" asp-append-version="true"></bundle>
|
2019-01-14 22:43:29 +01:00
|
|
|
@if (Model.CustomCSSLink != null)
|
|
|
|
|
{
|
2019-03-12 15:48:24 +09:00
|
|
|
<link href="@Model.CustomCSSLink" rel="stylesheet" />
|
2019-01-14 22:43:29 +01:00
|
|
|
}
|
2020-09-25 18:08:45 +02:00
|
|
|
<script type="text/javascript">
|
|
|
|
|
var srvModel = @Safe.Json(Model);
|
|
|
|
|
</script>
|
|
|
|
|
<bundle name="wwwroot/bundles/payment-request-bundle.min.js" asp-append-version="true"></bundle>
|
|
|
|
|
@*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" asp-append-version="true"></script>
|
2019-08-21 17:04:25 +03:00
|
|
|
@Safe.Raw(Model.EmbeddedCSS)
|
2020-09-28 15:13:55 +02:00
|
|
|
<noscript>
|
|
|
|
|
<style>
|
|
|
|
|
.hide-when-js { display: block !important; }
|
|
|
|
|
.only-for-js { display: none !important; }
|
|
|
|
|
</style>
|
|
|
|
|
</noscript>
|
2019-01-14 22:43:29 +01:00
|
|
|
</head>
|
2020-09-25 18:08:45 +02:00
|
|
|
<body class="h-100">
|
|
|
|
|
<div id="app" class="h-100 d-flex flex-column">
|
|
|
|
|
<nav id="mainNav" class="navbar sticky-top py-3 py-lg-4">
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="row align-items-center" style="width:calc(100% + 30px)">
|
|
|
|
|
<div class="col-12 col-md-8 col-lg-9 col-xl-10">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col col-12 col-lg-8">
|
|
|
|
|
<h1 class="h3" v-bind="srvModel.title">@Model.Title</h1>
|
|
|
|
|
</div>
|
2020-09-28 15:14:28 +02:00
|
|
|
<div class="col col-12 col-sm-6 col-lg-8 d-flex align-items-center">
|
|
|
|
|
<span class="text-muted text-nowrap">Last Updated</span>
|
2020-09-25 18:08:45 +02:00
|
|
|
|
2020-09-28 15:14:28 +02:00
|
|
|
<span v-bind="lastUpdated" class="text-nowrap">@Model.LastUpdated.ToString("g")</span>
|
|
|
|
|
<button type="button" class="btn btn-link d-none d-lg-inline-block d-print-none border-0 p-0 ml-4 only-for-js" v-on:click="window.print" v-cloak>
|
2020-09-25 18:08:45 +02:00
|
|
|
Print
|
|
|
|
|
</button>
|
2020-09-28 15:14:28 +02:00
|
|
|
<button type="button" class="btn btn-link d-none d-lg-inline-block d-print-none border-0 p-0 ml-4 only-for-js" v-on:click="copyLink" v-cloak>
|
2020-09-25 18:08:45 +02:00
|
|
|
Copy Link
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
2020-09-28 15:14:28 +02:00
|
|
|
<div class="col col-12 col-sm-6 text-sm-right col-lg-4 mt-lg-n4 pt-lg-1">
|
2020-09-25 18:08:45 +02:00
|
|
|
<noscript>@Model.Status</noscript>
|
|
|
|
|
<template v-if="settled">Settled</template>
|
|
|
|
|
<template v-else-if="ended">Request Expired</template>
|
|
|
|
|
<template v-else-if="endDiff"><span class="text-muted">Expires in</span> {{endDiff}}</template>
|
|
|
|
|
<template v-else>{{srvModel.status}}</template>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2020-09-28 15:14:28 +02:00
|
|
|
<div class="col-12 pt-3 pb-2 col-md-4 py-md-0 col-lg-3 col-xl-2 d-print-none">
|
|
|
|
|
<noscript>
|
|
|
|
|
@if (Model.Archived)
|
|
|
|
|
{
|
|
|
|
|
<div class="h2">
|
|
|
|
|
<span class="badge badge-info">Archived</span>
|
|
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|
else if (Model.IsPending && !Model.Archived)
|
|
|
|
|
{
|
|
|
|
|
@if (Model.AllowCustomPaymentAmounts && !Model.AnyPendingInvoice)
|
|
|
|
|
{
|
|
|
|
|
<form method="get" asp-action="PayPaymentRequest" asp-route-id="@Model.Id">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col col-12 col-sm-6 col-md-12">
|
|
|
|
|
<div class="input-group">
|
|
|
|
|
<input type="number" class="form-control text-right hide-number-spin" name="amount" value="@Model.AmountDue" @if (!Model.AllowCustomPaymentAmounts) { @("readonly") } max="@Model.AmountDue" placeholder="Amount" required>
|
|
|
|
|
<div class="input-group-append">
|
|
|
|
|
<span class="input-group-text">@Model.Currency.ToUpper()</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col mt-2 col-12 col-sm-6 mt-sm-0 col-md-12 mt-md-2">
|
|
|
|
|
<button class="btn btn-primary w-100 text-nowrap" type="submit">Pay Invoice</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
<a class="btn btn-primary d-inline-block w-100 text-nowrap @if (!(Model.AnyPendingInvoice && !Model.PendingInvoiceHasPayments)) { @("btn-lg") }" asp-action="PayPaymentRequest" asp-route-id="@Model.Id">
|
|
|
|
|
Pay Invoice
|
|
|
|
|
</a>
|
|
|
|
|
if (Model.AnyPendingInvoice && !Model.PendingInvoiceHasPayments)
|
|
|
|
|
{
|
|
|
|
|
<form method="get" asp-action="CancelUnpaidPendingInvoice" asp-route-id="@Model.Id" class="mt-2">
|
|
|
|
|
<button class="btn btn-outline-secondary w-100 text-nowrap" type="submit">Cancel Invoice</button>
|
|
|
|
|
</form>
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</noscript>
|
2020-09-25 18:08:45 +02:00
|
|
|
<template v-if="srvModel.archived">
|
2020-09-28 15:14:28 +02:00
|
|
|
<div class="h2">
|
|
|
|
|
<span class="badge badge-info">Archived</span>
|
2020-09-25 18:08:45 +02:00
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-else-if="!ended && (srvModel.amountDue) > 0" class="d-print-none">
|
|
|
|
|
<template v-if="srvModel.allowCustomPaymentAmounts && !srvModel.anyPendingInvoice">
|
|
|
|
|
<form v-on:submit="submitCustomAmountForm">
|
2020-09-28 15:14:28 +02:00
|
|
|
<div class="row">
|
|
|
|
|
<div class="col col-12 col-sm-6 col-md-12">
|
|
|
|
|
<div class="input-group">
|
|
|
|
|
<input type="number" class="form-control text-right hide-number-spin" v-model="customAmount" :readonly="!srvModel.allowCustomPaymentAmounts" :max="srvModel.amountDue" placeholder="Amount" required>
|
|
|
|
|
<div class="input-group-append">
|
|
|
|
|
<span class="input-group-text">{{currency}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col mt-2 col-12 col-sm-6 mt-sm-0 col-md-12 mt-md-2">
|
|
|
|
|
<button class="btn btn-primary w-100 text-nowrap" v-bind:class="{ 'btn-disabled': loading}" :disabled="loading" type="submit">
|
2020-09-25 18:08:45 +02:00
|
|
|
<div v-if="loading" class="spinner-grow spinner-grow-sm" role="status">
|
|
|
|
|
<span class="sr-only">Loading...</span>
|
|
|
|
|
</div>
|
|
|
|
|
Pay Invoice
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
</template>
|
2019-01-14 22:43:29 +01:00
|
|
|
|
|
|
|
|
<template v-else>
|
2020-09-28 15:14:28 +02:00
|
|
|
<button class="btn btn-primary w-100 d-flex align-items-center justify-content-center text-nowrap" :class="{ 'btn-lg': !(srvModel.anyPendingInvoice && !srvModel.pendingInvoiceHasPayments)}" v-on:click="pay(null)" :disabled="loading">
|
2020-09-25 18:08:45 +02:00
|
|
|
<div v-if="loading" class="spinner-grow spinner-grow-sm mr-2" role="status">
|
|
|
|
|
<span class="sr-only">Loading...</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span>Pay Invoice</span>
|
|
|
|
|
</button>
|
2020-09-28 15:14:28 +02:00
|
|
|
<button class="btn btn-outline-secondary mt-2 w-100 d-flex align-items-center justify-content-center text-nowrap" v-if="srvModel.anyPendingInvoice && !srvModel.pendingInvoiceHasPayments" v-on:click="cancelPayment()" :disabled="loading">
|
2020-09-25 18:08:45 +02:00
|
|
|
<span v-if="loading" class="spinner-grow spinner-grow-sm mr-2" role="status">
|
|
|
|
|
<span class="sr-only">Loading...</span>
|
|
|
|
|
</span>
|
|
|
|
|
<span>Cancel Invoice</span>
|
|
|
|
|
</button>
|
2019-01-14 22:43:29 +01:00
|
|
|
</template>
|
2020-09-25 18:08:45 +02:00
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
<main class="flex-grow-1 py-4">
|
|
|
|
|
<div class="container">
|
2020-09-28 15:14:28 +02:00
|
|
|
<partial name="_StatusMessage"/>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col col-12 col-lg-6 mb-4">
|
|
|
|
|
<div class="jumbotron h-100 m-0 p-sm-5">
|
2020-09-25 18:08:45 +02:00
|
|
|
<h2 class="h4 mb-3">Invoice Summary</h2>
|
|
|
|
|
<div v-html="srvModel.description">
|
2020-09-28 15:14:28 +02:00
|
|
|
@if (!string.IsNullOrEmpty(Model.Description) && Model.Description != "<br>")
|
2020-09-25 18:08:45 +02:00
|
|
|
{
|
|
|
|
|
@Safe.Raw(Model.Description)
|
|
|
|
|
}
|
2019-01-14 22:43:29 +01:00
|
|
|
</div>
|
2020-09-25 18:08:45 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2020-09-28 15:14:28 +02:00
|
|
|
<div class="col col-12 col-lg-6 mb-4">
|
|
|
|
|
<div class="jumbotron h-100 m-0 p-sm-5">
|
2020-09-25 18:08:45 +02:00
|
|
|
<h2 class="h4 mb-3">Payment Details</h2>
|
2020-09-28 15:14:28 +02:00
|
|
|
<table class="table table-sm">
|
2020-09-25 18:08:45 +02:00
|
|
|
<tbody>
|
|
|
|
|
<tr>
|
2020-09-28 15:14:28 +02:00
|
|
|
<td class="text-muted">Request amount:</td>
|
|
|
|
|
<td class="text-nowrap text-right" v-bind="srvModel.amountFormatted">@Model.AmountFormatted</td>
|
2020-09-25 18:08:45 +02:00
|
|
|
</tr>
|
|
|
|
|
<tr>
|
2020-09-28 15:14:28 +02:00
|
|
|
<td class="text-muted">Paid so far:</td>
|
|
|
|
|
<td class="text-nowrap text-right" v-bind="srvModel.amountCollectedFormatted">@Model.AmountCollectedFormatted</td>
|
2020-09-25 18:08:45 +02:00
|
|
|
</tr>
|
|
|
|
|
<tr>
|
2020-09-28 15:14:28 +02:00
|
|
|
<td class="text-muted">Amount due:</td>
|
|
|
|
|
<td class="text-nowrap text-right" v-bind="srvModel.amountDueFormatted">@Model.AmountDueFormatted</td>
|
2020-09-25 18:08:45 +02:00
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col">
|
2020-09-28 15:14:28 +02:00
|
|
|
<div class="jumbotron h-100 m-0 p-sm-5">
|
2020-09-25 18:08:45 +02:00
|
|
|
<h2 class="h4 mb-3">Payment History</h2>
|
|
|
|
|
<div class="table-responsive">
|
2020-09-28 15:14:28 +02:00
|
|
|
<table class="table my-0">
|
2020-09-25 18:08:45 +02:00
|
|
|
<thead>
|
2020-09-28 15:14:28 +02:00
|
|
|
<tr class="table-borderless">
|
|
|
|
|
<th class="font-weight-normal text-secondary" scope="col">Invoice Id</th>
|
|
|
|
|
<th class="font-weight-normal text-secondary">Price</th>
|
|
|
|
|
<th class="font-weight-normal text-secondary">Expiry</th>
|
|
|
|
|
<th class="font-weight-normal text-secondary text-right">Status</th>
|
2019-01-14 22:43:29 +01:00
|
|
|
</tr>
|
2020-09-25 18:08:45 +02:00
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
2020-09-28 15:14:28 +02:00
|
|
|
<noscript>
|
|
|
|
|
@if (Model.Invoices == null || !Model.Invoices.Any())
|
|
|
|
|
{
|
|
|
|
|
<tr>
|
|
|
|
|
<td colspan="4" class="text-center">No payments made yet</td>
|
|
|
|
|
</tr>
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
foreach (var invoice in Model.Invoices)
|
|
|
|
|
{
|
|
|
|
|
<tr>
|
|
|
|
|
<td>@invoice.Id</td>
|
|
|
|
|
<td>@invoice.Amount @invoice.Currency</td>
|
|
|
|
|
<td>@invoice.ExpiryDate.ToString("g")</td>
|
|
|
|
|
<td class="text-right">@invoice.Status</td>
|
|
|
|
|
</tr>
|
|
|
|
|
if (invoice.Payments != null && invoice.Payments.Any())
|
|
|
|
|
{
|
|
|
|
|
<tr class="table-sm table-borderless table-light">
|
|
|
|
|
<th colspan="2" class="pl-3 font-weight-normal text-secondary">TX Id</th>
|
|
|
|
|
<th class="font-weight-normal text-secondary">Payment Method</th>
|
|
|
|
|
<th class="font-weight-normal text-secondary text-right">Amount</th>
|
|
|
|
|
</tr>
|
|
|
|
|
@foreach (var payment in invoice.Payments)
|
|
|
|
|
{
|
|
|
|
|
<tr class="table-sm table-borderless table-light">
|
|
|
|
|
<td colspan="2" class="pl-3 text-break">
|
|
|
|
|
@if (!string.IsNullOrEmpty(payment.Link))
|
|
|
|
|
{
|
|
|
|
|
<a href="@payment.Link" target="_blank">@payment.Id</a>
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
<span>@payment.Id</span>
|
|
|
|
|
}
|
|
|
|
|
</td>
|
|
|
|
|
<td>@payment.PaymentMethod</td>
|
|
|
|
|
<td class="text-right">@payment.Amount</td>
|
|
|
|
|
</tr>
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</noscript>
|
|
|
|
|
|
|
|
|
|
<template v-if="!srvModel.invoices || srvModel.invoices.length == 0">
|
|
|
|
|
<tr>
|
|
|
|
|
<td colspan="4" class="text-center">No payments made yet</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</template>
|
2019-01-14 22:43:29 +01:00
|
|
|
<template v-else v-for="invoice of srvModel.invoices" :key="invoice.id">
|
2020-04-20 20:45:59 -07:00
|
|
|
<tr>
|
2020-09-28 15:14:28 +02:00
|
|
|
<td>{{invoice.id}}</td>
|
2019-03-03 16:51:19 -06:00
|
|
|
<td>{{invoice.amountFormatted}}</td>
|
2019-01-14 22:43:29 +01:00
|
|
|
<td>{{moment(invoice.expiryDate).format('L HH:mm')}}</td>
|
2020-09-28 15:14:28 +02:00
|
|
|
<td class="text-right">{{invoice.status}}</td>
|
2019-01-14 22:43:29 +01:00
|
|
|
</tr>
|
2020-09-28 15:14:28 +02:00
|
|
|
<template v-if="invoice.payments && invoice.payments.length > 0">
|
|
|
|
|
<tr class="table-sm table-borderless table-light">
|
|
|
|
|
<th colspan="2" class="pl-3 font-weight-normal text-secondary">TX Id</th>
|
|
|
|
|
<th class="font-weight-normal text-secondary">Payment Method</th>
|
|
|
|
|
<th class="font-weight-normal text-secondary text-right">Amount</th>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr v-for="payment of invoice.payments" class="table-sm table-borderless table-light">
|
|
|
|
|
<td colspan="2" class="pl-3 text-break">
|
|
|
|
|
<a v-if="payment.link" :href="payment.link" target="_blank">{{payment.id}}</a>
|
|
|
|
|
<span v-else>{{payment.id}}</span>
|
|
|
|
|
</td>
|
|
|
|
|
<td>{{formatPaymentMethod(payment.paymentMethod)}}</td>
|
|
|
|
|
<td class="text-right">{{payment.amount.noExponents()}}</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</template>
|
2019-01-14 22:43:29 +01:00
|
|
|
</template>
|
2020-09-25 18:08:45 +02:00
|
|
|
</tbody>
|
|
|
|
|
</table>
|
2019-01-14 22:43:29 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2020-09-25 18:08:45 +02:00
|
|
|
</main>
|
|
|
|
|
<footer class="pt-2 pb-4">
|
|
|
|
|
<div class="container text-center">
|
|
|
|
|
Powered by <a href="https://btcpayserver.org" target="_blank">BTCPay Server</a>
|
|
|
|
|
</div>
|
|
|
|
|
</footer>
|
2019-01-14 22:43:29 +01:00
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
