aljaz/btcpayserver
1
0
Fork 0
mirror of https://github.com/aljazceru/btcpayserver.git synced 2025-12-17 22:14:26 +01:00
Code Issues Packages Projects Releases 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
7 changed files with 47 additions and 28 deletions
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 return View(new InvoiceReceiptViewModel
{ {
StoreName = store.StoreName, StoreName = store.StoreName,
StoreLogoFileId = store.GetStoreBlob().LogoFileId,
Status = i.Status.ToModernStatus(), Status = i.Status.ToModernStatus(),
Amount = payments.Sum(p => p!.Paid), Amount = payments.Sum(p => p!.Paid),
Currency = i.Currency, 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 OrderId { get; set; }
public string Currency { get; set; } public string Currency { get; set; }
public string StoreName { get; set; } public string StoreName { get; set; }
public string StoreLogoFileId { get; set; }
public decimal Amount { get; set; } public decimal Amount { get; set; }
public DateTimeOffset Timestamp { get; set; } public DateTimeOffset Timestamp { get; set; }
public Dictionary<string, object> AdditionalData { get; set; } public Dictionary<string, object> AdditionalData { get; set; }

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

@@ -1,6 +1,6 @@
@model PaymentModel @model PaymentModel
<main id="checkout-cheating" class="shadow-lg mt-4" v-cloak> <main id="checkout-cheating" class="shadow-lg" v-cloak>
<section> <section>
<p id="CheatSuccessMessage" class="alert alert-success text-break" v-if="successMessage" v-text="successMessage"></p> <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> <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> </head>
<body class="min-vh-100"> <body class="min-vh-100">
<div id="Checkout-v2" class="wrap" v-cloak v-waitForT> <div id="Checkout-v2" class="wrap gap-4" v-cloak v-waitForT>
<header> <header class="store-header">
@if (!string.IsNullOrEmpty(logoUrl)) @if (!string.IsNullOrEmpty(logoUrl))
{ {
<img src="@logoUrl" alt="@Model.StoreName" class="logo @(!string.IsNullOrEmpty(Model.LogoFileId) ? "logo--square" : "")"/> <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> </header>
<main class="shadow-lg"> <main class="shadow-lg">
<nav v-if="isModal"> <nav v-if="isModal">

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

@@ -5,10 +5,12 @@
@inject BTCPayServer.Services.BTCPayServerEnvironment env @inject BTCPayServer.Services.BTCPayServerEnvironment env
@inject BTCPayServer.Services.ThemeSettings Theme @inject BTCPayServer.Services.ThemeSettings Theme
@inject CurrencyNameTable CurrencyNameTable @inject CurrencyNameTable CurrencyNameTable
@using BTCPayServer.Abstractions.Contracts
@inject IFileService FileService
@{ @{
Layout = null; Layout = null;
ViewData["Title"] = $"Receipt from {Model.StoreName}"; ViewData["Title"] = Model.StoreName;
var isProcessing = Model.Status == InvoiceStatus.Processing; var isProcessing = Model.Status == InvoiceStatus.Processing;
var isSettled = Model.Status == InvoiceStatus.Settled; var isSettled = Model.Status == InvoiceStatus.Settled;
} }
@@ -37,7 +39,13 @@
<partial name="_StatusMessage" model="@(new ViewDataDictionary(ViewData) { { "Margin", "mb-4" } })"/> <partial name="_StatusMessage" model="@(new ViewDataDictionary(ViewData) { { "Margin", "mb-4" } })"/>
<div class="d-flex flex-column justify-content-center gap-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"> <div id="InvoiceSummary" class="bg-tile p-3 p-sm-4 rounded d-flex flex-wrap align-items-center">
@if (isProcessing) @if (isProcessing)
{ {

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

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

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

@@ -205,6 +205,29 @@ h2 small .fa-question-circle-o {
margin-top: .5rem; 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 */ /* Print */
@media print { @media print {
.table td, .table td,