btcpayserver/BTCPayServer/Views/PaymentRequest/ViewPaymentRequest.cshtml

235 lines
14 KiB
Text
Raw Normal View History

2019-01-14 22:43:29 +01:00
@model BTCPayServer.Models.PaymentRequestViewModels.ViewPaymentRequestViewModel
@addTagHelper *, BundlerMinifier.TagHelpers
2019-01-14 22:43:29 +01:00
@inject BTCPayServer.HostedServices.CssThemeManager themeManager
@{
ViewData["Title"] = Model.Title;
Layout = null;
}
<!DOCTYPE html>
<html class="h-100">
<head>
<title>@Model.Title</title>
<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">
<link href="@Context.Request.GetRelativePathOrAbsolute(themeManager.BootstrapUri)" rel="stylesheet" />
<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)
{
<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>
@Safe.Raw(Model.EmbeddedCSS)
<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>
<div class="col col-12 col-sm-7 col-lg-8 d-flex align-items-center">
<span class="text-muted">Last Updated</span>
&nbsp;
<span v-bind="lastUpdated">@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" 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" v-on:click="copyLink" v-cloak>
Copy Link
</button>
</div>
<div class="col col-12 col-sm-5 text-sm-right col-lg-4 mt-lg-n4 pt-lg-1">
<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>
<div class="col-12 pt-4 pb-2 col-md-4 py-md-0 col-lg-3 col-xl-2">
<template v-if="srvModel.archived">
<div class="h3">
<span class="badge badge-secondary">Archived</span>
</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">
<div class="input-group m-auto" style="max-width: 250px">
<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 btn-lg d-inline-block w-100"
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>
2019-01-14 22:43:29 +01:00
<template v-else>
2020-09-25 18:08:45 +02:00
<button class="btn btn-primary btn-lg w-100 d-flex align-items-center justify-content-center" 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 align-items-center justify-content-center" 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>
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">
<div class="row" style="margin-bottom:30px;">
<partial name="_StatusMessage"/>
<div class="col-sm-12 col-md-12 col-lg-6">
<div class="jumbotron h-100 p-sm-5">
<h2 class="h4 mb-3">Invoice Summary</h2>
<div v-html="srvModel.description">
@if (Model.Description != null && Model.Description != "" && Model.Description != "<br>")
{
@Safe.Raw(Model.Description)
}
2019-01-14 22:43:29 +01:00
</div>
2020-09-25 18:08:45 +02:00
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-6">
<div class="jumbotron h-100 p-sm-5">
<h2 class="h4 mb-3">Payment Details</h2>
<table class="table">
<tbody>
<tr>
<td class="px-3 h2 text-muted">Request amount:</td>
<td class="px-3 h2 text-nowrap text-right">{{srvModel.amountFormatted}}</td>
</tr>
<tr>
<td class="px-3 h2 text-muted">Paid so far:</td>
<td class="px-3 h2 text-nowrap text-right">{{srvModel.amountCollectedFormatted}}</td>
</tr>
<tr>
<td class="px-3 h2 text-muted">Amount due:</td>
<td class="px-3 h2 text-nowrap text-right">{{srvModel.amountDueFormatted}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="jumbotron h-100 p-sm-5">
<h2 class="h4 mb-3">Payment History</h2>
<div class="table-responsive">
<table class="table border-top-0">
<thead>
2019-01-14 22:43:29 +01:00
<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>
2019-01-14 22:43:29 +01:00
</tr>
2020-09-25 18:08:45 +02:00
</thead>
<tbody>
2019-01-14 22:43:29 +01:00
<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>
2019-01-14 22:43:29 +01:00
<td scope="row">{{invoice.id}}</td>
<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 v-if="invoice.payments && invoice.payments.length > 0">
2019-01-14 22:43:29 +01:00
<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>
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>