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

Add presets in the checkout appearance (#4756)

Browse source
This commit is contained in:
Nicolas Dorier 2023-04-04 10:45:40 +09:00 • committed by GitHub
parent eece001376
commit 60cfea9f94
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 123 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
BTCPayServer.Tests/Checkoutv2Tests.cs
View file

@ -51,7 +51,14 @@ namespace BTCPayServer.Tests
s.Driver.SetCheckbox(By.Id("LNURLStandardInvoiceEnabled"), true);
s.Driver.FindElement(By.Id("save")).Click();
Assert.Contains("BTC Lightning settings successfully updated", s.FindAlertMessage().Text);
s.GoToStore(StoreNavPages.CheckoutAppearance);
s.Driver.WaitForAndClick(By.Id("Presets"));
s.Driver.WaitForAndClick(By.Id("Presets_InStore"));
Assert.True(s.Driver.SetCheckbox(By.Id("ShowPayInWalletButton"), true));
s.Driver.FindElement(By.Id("Save")).SendKeys(Keys.Enter);
Assert.Contains("Store successfully updated", s.FindAlertMessage().Text);
// Top up/zero amount invoices
var invoiceId = s.CreateInvoice(amount: null);
s.GoToInvoiceCheckout(invoiceId);

6
BTCPayServer.Tests/Extensions.cs
View file

@ -199,11 +199,15 @@ retry:
return true;
}
public static void SetCheckbox(this IWebDriver driver, By selector, bool value)
public static bool SetCheckbox(this IWebDriver driver, By selector, bool value)
{
var element = driver.FindElement(selector);
if (value != element.Selected)
{
driver.WaitForAndClick(selector);
return true;
}
return false;
}
}
}

2
BTCPayServer/Components/Icon/IconViewModel.cs
View file

@ -1,3 +1,5 @@
using System.Collections.Generic;
namespace BTCPayServer.Components.Icon
{
public class IconViewModel

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

@ -793,6 +793,8 @@ namespace BTCPayServer.Controllers
OrderId = invoice.Metadata.OrderId,
InvoiceId = invoice.Id,
DefaultLang = lang ?? invoice.DefaultLanguage ?? storeBlob.DefaultLang ?? "en",
ShowPayInWalletButton = storeBlob.ShowPayInWalletButton,
ShowStoreHeader = storeBlob.ShowStoreHeader,
CustomCSSLink = storeBlob.CustomCSS,
CustomLogoLink = storeBlob.CustomLogo,
LogoFileId = storeBlob.LogoFileId,

4
BTCPayServer/Controllers/UIStoresController.cs
View file

@ -388,6 +388,8 @@ namespace BTCPayServer.Controllers
vm.UseNewCheckout = storeBlob.CheckoutType == Client.Models.CheckoutType.V2;
vm.CelebratePayment = storeBlob.CelebratePayment;
vm.OnChainWithLnInvoiceFallback = storeBlob.OnChainWithLnInvoiceFallback;
vm.ShowPayInWalletButton = storeBlob.ShowPayInWalletButton;
vm.ShowStoreHeader = storeBlob.ShowStoreHeader;
vm.LightningAmountInSatoshi = storeBlob.LightningAmountInSatoshi;
vm.RequiresRefundEmail = storeBlob.RequiresRefundEmail;
vm.LazyPaymentMethods = storeBlob.LazyPaymentMethods;
@ -505,6 +507,8 @@ namespace BTCPayServer.Controllers
});
}
blob.ShowPayInWalletButton = model.ShowPayInWalletButton;
blob.ShowStoreHeader = model.ShowStoreHeader;
blob.CheckoutType = model.UseNewCheckout ? Client.Models.CheckoutType.V2 : Client.Models.CheckoutType.V1;
blob.CelebratePayment = model.CelebratePayment;
blob.OnChainWithLnInvoiceFallback = model.OnChainWithLnInvoiceFallback;

8
BTCPayServer/Controllers/UIUserStoresController.cs
View file

@ -60,9 +60,13 @@ namespace BTCPayServer.Controllers
return View(vm);
}
var store = await _repo.CreateStore(GetUserId(), vm.Name, vm.DefaultCurrency, vm.PreferredExchange);
var store = new StoreData { StoreName = vm.Name };
var blob = store.GetStoreBlob();
blob.DefaultCurrency = vm.DefaultCurrency;
blob.PreferredExchange = vm.PreferredExchange;
store.SetStoreBlob(blob);
await _repo.CreateStore(GetUserId(), store);
CreatedStoreId = store.Id;
TempData[WellKnownTempData.SuccessMessage] = "Store successfully created";
return RedirectToAction(nameof(UIStoresController.Dashboard), "UIStores", new
{

8
BTCPayServer/Data/StoreBlob.cs
View file

@ -218,6 +218,14 @@ namespace BTCPayServer.Data
public string BrandColor { get; set; }
public string LogoFileId { get; set; }
public string CssFileId { get; set; }
[DefaultValue(true)]
[JsonProperty(DefaultValueHandling = DefaultValueHandling.Populate)]
public bool ShowPayInWalletButton { get; set; } = true;
[DefaultValue(true)]
[JsonProperty(DefaultValueHandling = DefaultValueHandling.Populate)]
public bool ShowStoreHeader { get; set; } = true;
[DefaultValue(true)]
[JsonProperty(DefaultValueHandling = DefaultValueHandling.Populate)]

2
BTCPayServer/Models/InvoicingModels/PaymentModel.cs
View file

@ -29,6 +29,8 @@ namespace BTCPayServer.Models.InvoicingModels
public string BrandColor { get; set; }
public string HtmlTitle { get; set; }
public string DefaultLang { get; set; }
public bool ShowPayInWalletButton { get; set; }
public bool ShowStoreHeader { get; set; }
public List<AvailableCrypto> AvailableCryptos { get; set; } = new();
public bool IsModal { get; set; }
public bool IsUnsetTopUp { get; set; }

6
BTCPayServer/Models/StoreViewModels/CheckoutAppearanceViewModel.cs
View file

@ -26,6 +26,12 @@ namespace BTCPayServer.Models.StoreViewModels
[Display(Name = "Unify on-chain and lightning payment URL/QR code")]
public bool OnChainWithLnInvoiceFallback { get; set; }
[Display(Name = "Show \"Pay in wallet\" button")]
public bool ShowPayInWalletButton { get; set; }
[Display(Name = "Show the store header")]
public bool ShowStoreHeader { get; set; }
[Display(Name = "Display Lightning payment amounts in Satoshis")]
public bool LightningAmountInSatoshi { get; set; }

12
BTCPayServer/Services/Stores/StoreRepository.cs
View file

@ -189,18 +189,6 @@ namespace BTCPayServer.Services.Stores
await ctx.SaveChangesAsync();
}
public async Task<StoreData> CreateStore(string ownerId, string name, string defaultCurrency, string preferredExchange)
{
var store = new StoreData { StoreName = name };
var blob = store.GetStoreBlob();
blob.DefaultCurrency = defaultCurrency;
blob.PreferredExchange = preferredExchange;
store.SetStoreBlob(blob);
await CreateStore(ownerId, store);
return store;
}
public async Task<WebhookData[]> GetWebhooks(string storeId)
{
using var ctx = _ContextFactory.CreateContext();

2
BTCPayServer/Views/Shared/Bitcoin/BitcoinLikeMethodCheckout-v2.cshtml
View file

@ -28,7 +28,7 @@
<vc:icon symbol="copy" />
</button>
</div>
<a v-if="model.invoiceBitcoinUrl" class="btn btn-primary rounded-pill w-100 mt-4" target="_top" id="PayInWallet"
<a v-if="model.invoiceBitcoinUrl && model.showPayInWalletButton" class="btn btn-primary rounded-pill w-100 mt-4" target="_top" id="PayInWallet"
:href="model.invoiceBitcoinUrl" :title="$t(hasPayjoin ? 'BIP21 payment link with PayJoin support' : 'BIP21 payment link')" v-t="'pay_in_wallet'"></a>
@await Component.InvokeAsync("UiExtensionPoint", new {location = "checkout-v2-bitcoin-post-content", model = Model})
</div>

2
BTCPayServer/Views/Shared/Bitcoin/BitcoinLikeMethodCheckout.cshtml
View file

@ -14,7 +14,7 @@
@await Html.PartialAsync("~/Views/UIInvoice/Checkout-Spinner.cshtml")
</div>
</div>
<div class="payment__details__instruction__open-wallet" v-if="srvModel.invoiceBitcoinUrl">
<div class="payment__details__instruction__open-wallet" v-if="srvModel.invoiceBitcoinUrl && srvModel.showPayInWalletButton">
<a class="payment__details__instruction__open-wallet__btn action-button" target="_top" v-bind:href="srvModel.invoiceBitcoinUrl">
<span>{{$t("Open in wallet")}}</span>
</a>

2
BTCPayServer/Views/Shared/Lightning/LightningLikeMethodCheckout-v2.cshtml
View file

@ -18,7 +18,7 @@
<vc:icon symbol="copy" />
</button>
</div>
<a v-if="model.invoiceBitcoinUrl" class="btn btn-primary rounded-pill w-100 mt-4" target="_top" id="PayInWallet"
<a v-if="model.invoiceBitcoinUrl && model.showPayInWalletButton" class="btn btn-primary rounded-pill w-100 mt-4" target="_top" id="PayInWallet"
:href="model.invoiceBitcoinUrl" v-t="'pay_in_wallet'"></a>
@await Component.InvokeAsync("UiExtensionPoint", new {location = "checkout-v2-lightning-post-content", model = Model})
</div>

2
BTCPayServer/Views/Shared/Lightning/LightningLikeMethodCheckout.cshtml
View file

@ -26,7 +26,7 @@
@await Html.PartialAsync("~/Views/UIInvoice/Checkout-Spinner.cshtml")
</div>
</div>
<div class="payment__details__instruction__open-wallet" v-if="srvModel.invoiceBitcoinUrl">
<div class="payment__details__instruction__open-wallet" v-if="srvModel.invoiceBitcoinUrl && srvModel.showPayInWalletButton">
<a class="payment__details__instruction__open-wallet__btn action-button" target="_top" v-bind:href="srvModel.invoiceBitcoinUrl">
<span>{{$t("Open in wallet")}}</span>
</a>

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

@ -40,8 +40,11 @@
</head>
<body class="min-vh-100">
<div id="Checkout-v2" class="public-page-wrap" v-cloak>
<partial name="_StoreHeader" model="(Model.StoreName, Model.LogoFileId)" />
<main class="shadow-lg">
@if (Model.ShowStoreHeader)
{
<partial name="_StoreHeader" model="(Model.StoreName, Model.LogoFileId)" />
}
<main class="shadow-lg">
<nav v-if="isModal">
<button type="button" v-if="isModal" id="close" v-on:click="close">
<vc:icon symbol="close"/>

43
BTCPayServer/Views/UIStores/CheckoutAppearance.cshtml
View file

@ -8,7 +8,6 @@
var store = ViewContext.HttpContext.GetStoreData();
}
@section PageFootContent {
<partial name="_ValidationScriptsPartial" />
<script>
@ -19,6 +18,18 @@
? `/checkout/css/themes/${theme}.css`
: ''
});
delegate('click', '#Presets_InStore', e => {
$("#UseNewCheckout").prop('checked', true);
$("#NewCheckoutSettings").addClass('show');
$("#ShowPayInWalletButton").prop('checked', false);
$("#ShowStoreHeader").prop('checked', false);
});
delegate('click', '#Presets_Online', e => {
$("#UseNewCheckout").prop('checked', false);
$("#NewCheckoutSettings").removeClass('show');
$("#ShowPayInWalletButton").prop('checked', true);
$("#ShowStoreHeader").prop('checked', true);
});
</script>
}
@ -61,7 +72,27 @@
</div>
}
<h3 class="mt-5 mb-3">Checkout</h3>
<h3 class="mt-5 mb-3 d-flex gap-3 align-items-center">
<span>Checkout</span>
<div id="Presets" name="Presets" class="dropdown">
<button class="btn btn-secondary dropdown-toggle btn-sm px-3" type="button" id="ActionsDropdownToggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select a preset
</button>
<div class="dropdown-menu" aria-labelledby="ActionsDropdownToggle">
<div id="Presets_Online" class="btcpay-list-select-item dropdown-item">
<vc:icon symbol="pos-cart" />
<span>Online</span>
<span class="note">Enhance the checkout process for online purchases.<br />This assume the payment page will be displayed on the customer's device.</span>
</div>
<div id="Presets_InStore" class="btcpay-list-select-item dropdown-item">
<vc:icon symbol="store" />
<span>In-store</span>
<span class="note">Enhance the checkout process for in-store purchases.<br />This assume the payment page will be displayed on the merchant's device.</span>
</div>
</div>
</div>
</h3>
<div class="d-flex align-items-center mb-3">
<input asp-for="UseNewCheckout" type="checkbox" class="btcpay-toggle me-3" data-bs-toggle="collapse" data-bs-target=".checkout-settings" aria-expanded="@(Model.UseNewCheckout)" aria-controls="NewCheckoutSettings" />
<div>
@ -90,7 +121,15 @@
<input asp-for="CelebratePayment" type="checkbox" class="form-check-input" />
<label asp-for="CelebratePayment" class="form-check-label"></label>
</div>
<div class="form-check">
<input asp-for="ShowStoreHeader" type="checkbox" class="form-check-input" />
<label asp-for="ShowStoreHeader" class="form-check-label"></label>
</div>
</div>
<div class="form-check">
<input asp-for="ShowPayInWalletButton" type="checkbox" class="form-check-input" />
<label asp-for="ShowPayInWalletButton" class="form-check-label"></label>
</div>
<div class="form-check">
<input asp-for="OnChainWithLnInvoiceFallback" type="checkbox" class="form-check-input" />
<label asp-for="OnChainWithLnInvoiceFallback" class="form-check-label"></label>

23
BTCPayServer/Views/UIUserStores/CreateStore.cshtml
View file

@ -4,18 +4,18 @@
}
@section PageFootContent {
<partial name="_ValidationScriptsPartial"/>
<partial name="_ValidationScriptsPartial" />
<script>
const exchanges = @Safe.Json(StoreBlob.RecommendedExchanges);
const recommended = document.querySelector("#PreferredExchange option[value='']")
const updateRecommended = currency => {
const source = exchanges[currency] || 'coingecko'
const name = source.charAt(0).toUpperCase() + source.slice(1)
recommended.innerText = `${name} (Recommended)`
}
updateRecommended(@Safe.Json(Model.DefaultCurrency))
delegate('change', '#DefaultCurrency', e => updateRecommended(e.target.value))
</script>
const exchanges = @Safe.Json(StoreBlob.RecommendedExchanges);
const recommended = document.querySelector("#PreferredExchange option[value='']")
const updateRecommended = currency => {
const source = exchanges[currency] || 'coingecko'
const name = source.charAt(0).toUpperCase() + source.slice(1)
recommended.innerText = `${name} (Recommended)`
}
updateRecommended(@Safe.Json(Model.DefaultCurrency))
delegate('change', '#DefaultCurrency', e => updateRecommended(e.target.value))
</script>
}
<partial name="_StatusMessage" />
@ -41,6 +41,7 @@
<div class="form-text mt-2 only-for-js">The recommended price source gets chosen based on the default currency.</div>
<span asp-validation-for="PreferredExchange" class="text-danger"></span>
</div>
<div class="form-group mt-4">
<input type="submit" value="Create" class="btn btn-primary" id="Create" />
</div>

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

@ -590,14 +590,21 @@ svg.icon-note {
}
.btcpay-list-select-item {
display: flex;
flex-wrap: wrap;
flex: 1 1 45%;
align-items: center;
border: 1px solid var(--btcpay-form-border);
padding: .75rem var(--btcpay-space-s);
cursor: pointer;
}
label.btcpay-list-select-item {
border: 1px solid var(--btcpay-form-border);
background-color: var(--btcpay-form-bg);
border-radius: var(--btcpay-border-radius);
transition: border-color 0.15s ease-in-out;
cursor: pointer;
}
label.btcpay-list-select-item:hover {
border-color: var(--btcpay-form-border-hover);
background-color: var(--btcpay-form-bg-hover);
}
@media (max-width: 575px) {
.btcpay-list-select-item {
@ -609,13 +616,17 @@ svg.icon-note {
height: 1.5rem;
margin: 0 var(--btcpay-space-s);
}
.btcpay-list-select-item:hover {
border-color: var(--btcpay-form-border-hover);
background-color: var(--btcpay-form-bg-hover);
}
input:checked + .btcpay-list-select-item {
input:checked + label.btcpay-list-select-item {
border-color: var(--btcpay-form-border-focus);
}
.btcpay-list-select-item .note {
color: var(--btcpay-body-text-muted);
flex-basis: 100%;
margin-left: 2.5rem;
}
.btcpay-list-select-item:active {
background-color: var(--btcpay-form-bg-hover);
}
/* Public pages */
.public-page-wrap {