mirrors/btcpayserver
1
0
Fork 0
mirror of https://github.com/btcpayserver/btcpayserver.git synced 2025-03-27 02:37:08 +01:00
Code Issues Projects Releases Packages Wiki Activity

Add store logo to invoice receipt page (#4435)

Browse source
This commit is contained in:
Umar Bolatov 2022-12-14 21:49:33 -08:00 • committed by GitHub
parent e5c7fc93e2
commit 072c81177f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 47 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
BTCPayServer/Controllers/UIInvoiceController.UI.cs
View file

@ -215,6 +215,7 @@ namespace BTCPayServer.Controllers
return View(new InvoiceReceiptViewModel
{
StoreName = store.StoreName,
StoreLogoFileId = store.GetStoreBlob().LogoFileId,
Status = i.Status.ToModernStatus(),
Amount = payments.Sum(p => p!.Paid),
Currency = i.Currency,

1
BTCPayServer/Models/InvoicingModels/InvoiceReceiptViewModel.cs
View file

@ -13,6 +13,7 @@ namespace BTCPayServer.Models.InvoicingModels
public string OrderId { get; set; }
public string Currency { get; set; }
public string StoreName { get; set; }
public string StoreLogoFileId { get; set; }
public decimal Amount { get; set; }
public DateTimeOffset Timestamp { get; set; }
public Dictionary<string, object> AdditionalData { get; set; }

2
BTCPayServer/Views/UIInvoice/Checkout-Cheating.cshtml
View file

@ -1,6 +1,6 @@
@model PaymentModel
<main id="checkout-cheating" class="shadow-lg mt-4" v-cloak>
<main id="checkout-cheating" class="shadow-lg" v-cloak>
<section>
<p id="CheatSuccessMessage" class="alert alert-success text-break" v-if="successMessage" v-text="successMessage"></p>
<p id="CheatErrorMessage" class="alert alert-danger text-break" v-if="errorMessage" v-text="errorMessage"></p>

6
BTCPayServer/Views/UIInvoice/CheckoutV2.cshtml
View file

@ -50,13 +50,13 @@
}
</head>
<body class="min-vh-100">
<div id="Checkout-v2" class="wrap" v-cloak v-waitForT>
<header>
<div id="Checkout-v2" class="wrap gap-4" v-cloak v-waitForT>
<header class="store-header">
@if (!string.IsNullOrEmpty(logoUrl))
{
<img src="@logoUrl" alt="@Model.StoreName" class="logo @(!string.IsNullOrEmpty(Model.LogoFileId) ? "logo--square" : "")"/>
}
<h1 class="h4 mb-0">@Model.StoreName</h1>
<h1>@Model.StoreName</h1>
</header>
<main class="shadow-lg">
<nav v-if="isModal">

12
BTCPayServer/Views/UIInvoice/InvoiceReceipt.cshtml
View file

@ -5,10 +5,12 @@
@inject BTCPayServer.Services.BTCPayServerEnvironment env
@inject BTCPayServer.Services.ThemeSettings Theme
@inject CurrencyNameTable CurrencyNameTable
@using BTCPayServer.Abstractions.Contracts
@inject IFileService FileService
@{
Layout = null;
ViewData["Title"] = $"Receipt from {Model.StoreName}";
ViewData["Title"] = Model.StoreName;
var isProcessing = Model.Status == InvoiceStatus.Processing;
var isSettled = Model.Status == InvoiceStatus.Settled;
}
@ -37,7 +39,13 @@
<partial name="_StatusMessage" model="@(new ViewDataDictionary(ViewData) { { "Margin", "mb-4" } })"/>
<div class="d-flex flex-column justify-content-center gap-4">
<h1 class="h3 text-center">@ViewData["Title"]</h1>
<header class="store-header">
@if (!string.IsNullOrEmpty(Model.StoreLogoFileId))
{
<img src="@(await FileService.GetFileUrl(Context.Request.GetAbsoluteRootUri(), Model.StoreLogoFileId))" alt="@Model.StoreName" class="logo @(!string.IsNullOrEmpty(Model.StoreLogoFileId) ? "logo--square" : "")" />
}
<h1>@ViewData["Title"]</h1>
</header>
<div id="InvoiceSummary" class="bg-tile p-3 p-sm-4 rounded d-flex flex-wrap align-items-center">
@if (isProcessing)
{

30
BTCPayServer/wwwroot/checkout-v2/checkout.css
View file

@ -1,5 +1,4 @@
:root {
--logo-size: 3rem;
--navbutton-size: .8rem;
--qr-size: 256px;
--section-padding: 1.5rem;
@ -11,19 +10,9 @@
flex-direction: column;
min-height: 100vh;
margin: 0 auto;
padding: var(--btcpay-space-m);
padding: var(--btcpay-space-l); var(--btcpay-space-m);
max-width: var(--wrap-max-width);
}
header,
footer {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--section-padding);
}
header {
gap: var(--btcpay-space-s);
}
main {
position: relative;
border-radius: var(--border-radius);
@ -95,13 +84,6 @@ section dl > div dd {
word-wrap: break-word;
word-break: break-word;
}
.logo {
height: var(--logo-size);
}
.logo--square {
width: var(--logo-size);
border-radius: 50%;
}
.info {
color: var(--btcpay-neutral-700);
background-color: var(--btcpay-body-bg);
@ -209,9 +191,12 @@ section dl > div dd {
color: var(--btcpay-body-text-muted);
}
footer {
margin-top: auto;
padding-top: 2.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--btcpay-space-m);
margin-top: auto;
padding: var(--section-padding) var(--section-padding) 0;
}
footer,
footer a,
@ -249,7 +234,8 @@ footer a:hover .logo-brand-dark {
@media (max-width: 400px) {
.wrap {
padding: 0;
padding-left: 0;
padding-right: 0;
}
main {
border-radius: 0;

23
BTCPayServer/wwwroot/main/site.css
View file

@ -205,6 +205,29 @@ h2 small .fa-question-circle-o {
margin-top: .5rem;
}
/* Store header */
.store-header {
--logo-size: 3rem;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--btcpay-space-s);
}
.store-header .logo {
height: var(--logo-size);
}
.store-header .logo--square {
width: var(--logo-size);
border-radius: 50%;
}
.store-header h1 {
font-size: 1.3rem;
}
/* Print */
@media print {
.table td,