mirrors/btcpayserver
1
0
Fork 0
mirror of https://github.com/btcpayserver/btcpayserver.git synced 2024-11-20 10:40:29 +01:00
Code Issues Packages Projects Releases Wiki Activity
42de0803c9
btcpayserver/BTCPayServer/Views/PaymentRequest/ViewPaymentRequest.cshtml
Dennis Reimann 3e800e7e53
Update classic theme for payment requests (#2096) 
Fixes #2084.
2020-12-02 15:21:03 +01:00

363 lines
25 KiB
Plaintext
Raw Blame History

@using BTCPayServer.Services.Invoices
@using BTCPayServer.Client.Models
@model BTCPayServer.Models.PaymentRequestViewModels.ViewPaymentRequestViewModel
@addTagHelper *, BundlerMinifier.TagHelpers
@inject BTCPayServer.Services.BTCPayServerEnvironment env
@inject BTCPayServer.HostedServices.CssThemeManager themeManager
@{
ViewData["Title"] = Model.Title;
Layout = null;
string StatusTextClass(InvoiceState state)
{
switch (state.Status.ToModernStatus())
{
case InvoiceStatus.Settled:
case InvoiceStatus.Processing:
return "text-success";
case InvoiceStatus.Expired:
switch (state.ExceptionStatus)
{
case InvoiceExceptionStatus.PaidLate:
case InvoiceExceptionStatus.PaidPartial:
case InvoiceExceptionStatus.PaidOver:
return "text-warning";
default:
return "text-danger";
}
case InvoiceStatus.Invalid:
return "text-danger";
default:
return "text-warning";
}
}
}
<!DOCTYPE html>
<html lang="en" @(env.IsDeveloping ? " data-devenv" : "")>
<head>
<title>@Model.Title</title>
<meta charset="utf-8" />
<meta name="robots" content="noindex,nofollow">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<link href="@Context.Request.GetRelativePathOrAbsolute(themeManager.BootstrapUri)" rel="stylesheet" />
<link href="@Context.Request.GetRelativePathOrAbsolute(themeManager.ThemeUri)" rel="stylesheet" />
<bundle name="wwwroot/bundles/payment-request-bundle.min.css" asp-append-version="true"></bundle>
@if (Model.CustomCSSLink != null)
{
<link href="@Model.CustomCSSLink" rel="stylesheet" />
}
<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>
@Safe.Raw(Model.EmbeddedCSS)
<noscript>
<style>
.hide-when-js, [v-cloak] { display: block !important; }
.only-for-js { display: none !important; }
</style>
</noscript>
</head>
<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 d-print-block">
<div class="container">
<div class="row align-items-center" style="width:calc(100% + 30px)">
<div class="col-12 col-md-8 col-lg-9">
<div class="row">
<div class="col col-12 col-lg-8">
<h1 class="h3" v-text="srvModel.title">@Model.Title</h1>
</div>
<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>
&nbsp;
<span class="text-nowrap d-print-none" v-text="lastUpdated" v-cloak>@Model.LastUpdated.ToString("g")</span>
<span class="text-nowrap d-none d-print-block" v-text="lastUpdatedDate">@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>
Print
</button>
<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.copyUrlToClipboard" v-cloak>
Copy Link
</button>
</div>
<div class="col col-12 col-sm-6 text-sm-right col-lg-4 mt-lg-n4 pt-lg-1 d-print-none">
@if (Model.IsPending && !Model.Archived && Model.ExpiryDate.HasValue)
{
<noscript>@Model.Status</noscript>
}
<template v-if="srvModel.isPending && !srvModel.archived && endDiff">
<span class="text-muted">Expires in</span> {{endDiff}}
</template>
</div>
</div>
</div>
<div class="col-12 pt-3 pb-2 col-md-4 py-md-0 col-lg-3">
<noscript>
@if (Model.IsPending && !Model.Archived)
{
@if (Model.AllowCustomPaymentAmounts && !Model.AnyPendingInvoice)
{
<form method="get" asp-action="PayPaymentRequest" asp-route-id="@Model.Id" class="d-print-none">
<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" step="any" 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 d-print-none 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 d-print-none">
<button class="btn btn-outline-secondary w-100 text-nowrap" type="submit">Cancel Invoice</button>
</form>
}
}
}
else
{
<div class="h2 text-md-right">
<span class="badge @if (Model.Status == "Settled") { @("badge-primary") } else if (Model.Status == "Expired") { @("badge-danger") } else { @("badge-info") }">
@Model.Status
@if (Model.Archived)
{
<span>(archived)</span>
}
</span>
</div>
}
</noscript>
<template v-if="srvModel.isPending && !srvModel.archived" class="d-print-none">
<template v-if="srvModel.allowCustomPaymentAmounts && !srvModel.anyPendingInvoice">
<form v-on:submit="submitCustomAmountForm" class="d-print-none">
<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" step="any" 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">
<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>
<template v-else>
<button class="btn btn-primary w-100 d-flex d-print-none align-items-center justify-content-center text-nowrap" :class="{ 'btn-lg': !(srvModel.anyPendingInvoice && !srvModel.pendingInvoiceHasPayments)}" v-on:click="pay(null)" :disabled="loading">
<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>
<button class="btn btn-outline-secondary mt-2 w-100 d-flex d-print-none align-items-center justify-content-center text-nowrap" v-if="srvModel.anyPendingInvoice && !srvModel.pendingInvoiceHasPayments" v-on:click="cancelPayment()" :disabled="loading">
<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>
</template>
</template>
<template v-else>
<div class="h2 text-md-right">
<span class="badge" :class="{ 'badge-primary': srvModel.status === 'Settled', 'badge-danger': srvModel.status === 'Expired', 'badge-info': (srvModel.status !== 'Settled' && srvModel.status !== 'Expired') }">
{{srvModel.status}}
<span v-if="srvModel.archived">(archived)</span>
</span>
</div>
</template>
</div>
</div>
</div>
</nav>
<main class="flex-grow-1 py-4">
<div class="container">
@await Html.PartialAsync("_StatusMessage", new ViewDataDictionary(ViewData){ { "Margin", "mb-4" } })
<div class="row">
<div class="col col-12 col-lg-6 mb-4">
<div class="jumbotron h-100 m-0 p-sm-5">
<h2 class="h4 mb-3">Invoice Summary</h2>
<div v-html="srvModel.description">
@if (!string.IsNullOrEmpty(Model.Description) && Model.Description != "<br>")
{
@Safe.Raw(Model.Description)
}
</div>
</div>
</div>
<div class="col col-12 col-lg-6 mb-4">
<div class="jumbotron h-100 m-0 p-sm-5">
<h2 class="h4 mb-3">Payment Details</h2>
<dl class="mb-0 mt-md-4">
<div class="d-flex d-print-inline-block flex-column mb-4 mr-5">
<dt class="h4 font-weight-normal text-nowrap text-primary text-print-default order-2 order-sm-1 mb-0" v-text="srvModel.amountDueFormatted">@Model.AmountDueFormatted</dt>
<dd class="text-muted order-1 order-sm-2 mb-1">Amount due</dd>
</div>
<div class="progress bg-light d-none d-sm-flex mb-sm-4 d-print-none" style="height:5px">
<div class="progress-bar bg-primary" role="progressbar" style="width:@((Model.AmountCollected/Model.Amount)*100)%" v-bind:style="{ width: (srvModel.amountCollected/srvModel.amount*100) + '%' }"></div>
</div>
<div class="d-flex d-print-inline-block flex-column mb-4 mr-5 d-sm-inline-flex mb-sm-0">
<dt class="h4 font-weight-normal text-nowrap order-2 order-sm-1 mb-0" v-text="srvModel.amountCollectedFormatted">@Model.AmountCollectedFormatted</dt>
<dd class="text-muted order-1 order-sm-2 mb-1">Amount paid</dd>
</div>
<div class="d-flex d-print-inline-block flex-column mb-0 d-sm-inline-flex float-sm-right">
<dt class="h4 text-sm-right font-weight-normal text-nowrap order-2 order-sm-1 mb-0" v-text="srvModel.amountFormatted">@Model.AmountFormatted</dt>
<dd class="text-muted text-sm-right order-1 order-sm-2 mb-1">Total requested</dd>
</div>
</dl>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="jumbotron h-100 m-0 p-sm-5">
<h2 class="h4 mb-3">Payment History</h2>
<div class="table-responsive">
<noscript>
@if (Model.Invoices == null || !Model.Invoices.Any())
{
<p class="text-muted">No payments made yet.</p>
}
else
{
<table class="table my-0">
<thead>
<tr class="table-borderless">
<th class="font-weight-normal text-secondary" scope="col">Invoice Id</th>
<th class="font-weight-normal text-secondary w-175px">Expiry</th>
<th class="font-weight-normal text-secondary text-right w-125px">Amount</th>
<th class="font-weight-normal text-secondary text-right w-125px"></th>
<th class="font-weight-normal text-secondary text-right">Status</th>
</tr>
</thead>
<tbody>
@foreach (var invoice in Model.Invoices)
{
<tr>
<td>@invoice.Id</td>
<td>@invoice.ExpiryDate.ToString("g")</td>
<td class="text-right">@invoice.AmountFormatted</td>
<td class="text-right"></td>
<td class="text-right text-print-default @StatusTextClass(invoice.State)">@invoice.StateFormatted</td>
</tr>
if (invoice.Payments != null && invoice.Payments.Any())
{
<tr class="table-borderless table-light">
<th class="pl-3 font-weight-normal text-secondary">Transaction Id</th>
<th class="font-weight-normal text-secondary">Received</th>
<th class="font-weight-normal text-secondary text-right">Paid</th>
<th class="font-weight-normal text-secondary text-right">Rate</th>
<th class="font-weight-normal text-secondary text-right">Payment</th>
</tr>
@foreach (var payment in invoice.Payments)
{
<tr class="table-borderless table-light">
<td class="pl-3 text-break">
@if (!string.IsNullOrEmpty(payment.Link))
{
<a href="@payment.Link" class="text-print-default" target="_blank">@payment.Id</a>
}
else
{
<span>@payment.Id</span>
}
</td>
<td>@payment.ReceivedDate.ToString("g")</td>
<td class="text-right">@payment.PaidFormatted</td>
<td class="text-right">@payment.RateFormatted</td>
<td class="text-right text-nowrap">@payment.Amount @payment.PaymentMethod</td>
</tr>
}
}
}
</tbody>
</table>
}
</noscript>
<template v-if="!srvModel.invoices || srvModel.invoices.length == 0">
<p class="text-muted">No payments made yet.</p>
</template>
<template v-else>
<table class="table my-0">
<thead>
<tr class="table-borderless">
<th class="font-weight-normal text-secondary" scope="col">Invoice Id</th>
<th class="font-weight-normal text-secondary w-175px">Expiry</th>
<th class="font-weight-normal text-secondary text-right w-125px">Amount</th>
<th class="font-weight-normal text-secondary text-right w-125px"></th>
<th class="font-weight-normal text-secondary text-right">Status</th>
</tr>
</thead>
<tbody>
<template v-for="invoice of srvModel.invoices" :key="invoice.id">
<tr>
<td>{{invoice.id}}</td>
<td v-text="formatDate(invoice.expiryDate)"></td>
<td class="text-right">{{invoice.amountFormatted}}</td>
<td class="text-right"></td>
<td class="text-right text-print-default" :class="statusTextClass(invoice.stateFormatted)">{{invoice.stateFormatted}}</td>
</tr>
<template v-if="invoice.payments && invoice.payments.length > 0">
<tr class="table-borderless table-light">
<th class="pl-3 font-weight-normal text-secondary">Transaction Id</th>
<th class="font-weight-normal text-secondary">Received</th>
<th class="font-weight-normal text-secondary text-right">Paid</th>
<th class="font-weight-normal text-secondary text-right">Rate</th>
<th class="font-weight-normal text-secondary text-right">Payment</th>
</tr>
<tr v-for="payment of invoice.payments" class="table-borderless table-light">
<td class="pl-3 text-break">
<a v-if="payment.link" :href="payment.link" class="text-print-default" target="_blank">{{payment.id}}</a>
<span v-else>{{payment.id}}</span>
</td>
<td v-text="formatDate(payment.receivedDate)"></td>
<td class="text-right">{{payment.paidFormatted}}</td>
<td class="text-right">{{payment.rateFormatted}}</td>
<td class="text-right text-nowrap">{{payment.amount.noExponents()}} {{payment.paymentMethod}}</td>
</tr>
</template>
</template>
</tbody>
</table>
</template>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="pt-2 pb-4 d-print-none">
<div class="container text-center">
Powered by <a href="https://btcpayserver.org" target="_blank">BTCPay Server</a>
</div>
</footer>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink