mirror of
https://github.com/btcpayserver/btcpayserver.git
synced 2025-02-23 22:46:49 +01:00
d14ce2a37f
* UI updates * Updates modes and calculation * Unify tip buttons * White caret * Add top margin to calculation * Add space between mode buttons and keypad * Discount updates
328 lines
15 KiB
Text
328 lines
15 KiB
Text
@using BTCPayServer.Plugins.PointOfSale.Models
|
|
@model BTCPayServer.Plugins.PointOfSale.Models.ViewPointOfSaleViewModel
|
|
@{
|
|
Layout = "PointOfSale/Public/_Layout";
|
|
var customTipPercentages = Model.CustomTipPercentages;
|
|
var anyInventoryItems = Model.Items.Any(item => item.Inventory.HasValue);
|
|
}
|
|
@section PageHeadContent {
|
|
<link rel="stylesheet" href="~/cart/css/style.css" asp-append-version="true">
|
|
<style>
|
|
.js-cart-item-minus .fa,
|
|
.js-cart-item-plus .fa {
|
|
background: #fff;
|
|
border-radius: 50%;
|
|
width: 17px;
|
|
height: 17px;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
</style>
|
|
}
|
|
@section PageFootContent {
|
|
<script>var srvModel = @Safe.Json(Model);</script>
|
|
<script src="~/cart/js/cart.js" asp-append-version="true"></script>
|
|
<script src="~/cart/js/cart.jquery.js" asp-append-version="true"></script>
|
|
<script id="template-cart-item" type="text/template">
|
|
<tr data-id="{id}">
|
|
<td class="align-middle pe-0" width="1%">{image}</td>
|
|
<td class="align-middle pe-0 ps-2"><b>{title}</b></td>
|
|
<td class="align-middle px-0">
|
|
<a class="js-cart-item-remove btn btn-link" href="#"><i class="fa fa-trash text-muted"></i></a>
|
|
</td>
|
|
<td class="align-middle px-0">
|
|
<div class="input-group align-items-center">
|
|
<a class="js-cart-item-minus btn btn-link px-2" href="#"><i class="fa fa-minus-circle fa-fw text-danger"></i></a>
|
|
<input class="js-cart-item-count form-control form-control-sm pull-left hide-number-spin text-end" type="number" step="1" name="count" placeholder="Qty" max="{inventory}" value="{count}" data-prev="{count}">
|
|
<a class="input-group-text js-cart-item-plus btn btn-link px-2" href="#">
|
|
<i class="fa fa-plus-circle fa-fw text-success"></i>
|
|
</a>
|
|
</div>
|
|
</td>
|
|
<td class="align-middle text-end">{price}</td>
|
|
</tr>
|
|
</script>
|
|
|
|
<script id="template-cart-item-image" type="text/template">
|
|
<img class="cart-item-image" src="{image}" alt="">
|
|
</script>
|
|
|
|
<script id="template-cart-custom-amount" type="text/template">
|
|
<tr>
|
|
<td colspan="5">
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fa fa-shopping-cart fa-fw"></i></span>
|
|
<input class="js-cart-custom-amount form-control" type="number" min="0" step="@Model.Step" name="amount" placeholder="Pay what you want">
|
|
<div class="input-group-text">
|
|
<a class="js-cart-custom-amount-remove btn btn-danger" href="#"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</script>
|
|
|
|
<script id="template-cart-extra" type="text/template">
|
|
@if (Model.ShowCustomAmount)
|
|
{
|
|
<tr>
|
|
<th colspan="5" class="border-0 pb-0">
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fa fa-shopping-cart fa-fw"></i></span>
|
|
<input class="js-cart-custom-amount form-control" type="number" min="0" step="@Model.Step" name="amount" value="{customAmount}" placeholder="Pay what you want">
|
|
<a class="js-cart-custom-amount-remove btn btn-danger" href="#"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
</th>
|
|
</tr>
|
|
}
|
|
@if (Model.ShowDiscount)
|
|
{
|
|
<tr>
|
|
<th colspan="5" class="border-top-0">
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fa fa-percent fa-fw"></i></span>
|
|
<input class="js-cart-discount form-control" type="number" min="0" step="@Model.Step" value="{discount}" name="discount" placeholder="Discount in %">
|
|
<a class="js-cart-discount-remove btn btn-danger" href="#"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
</th>
|
|
</tr>
|
|
}
|
|
</script>
|
|
|
|
<script id="template-cart-tip" type="text/template">
|
|
@if (Model.EnableTips)
|
|
{
|
|
<tr>
|
|
<th colspan="5" class="border-top-0 pt-4 h5">@Model.CustomTipText</th>
|
|
</tr>
|
|
<tr>
|
|
<th colspan="5" class="border-0">
|
|
<div class="input-group mb-2">
|
|
<span class="input-group-text"><i class="fa fa-money fa-fw"></i></span>
|
|
<input
|
|
class="js-cart-tip form-control form-control-lg"
|
|
type="number"
|
|
min="0"
|
|
step="@Model.Step"
|
|
value="{tip}"
|
|
name="tip"
|
|
placeholder="Tip in @(Model.CurrencyInfo.CurrencySymbol != null ? Model.CurrencyInfo.CurrencySymbol : Model.CurrencyCode)"
|
|
/>
|
|
<a class="js-cart-tip-remove btn btn-lg btn-danger" href="#"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
<div class="row mb-1">
|
|
@if (customTipPercentages != null && customTipPercentages.Length > 0)
|
|
{
|
|
@for (int i = 0; i < customTipPercentages.Length; i++)
|
|
{
|
|
var percentage = customTipPercentages[i];
|
|
<div class="col">
|
|
<a class="js-cart-tip-btn btn btn-lg btn-light w-100 border mb-2" href="#" data-tip="@percentage">@percentage%</a>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
</div>
|
|
</th>
|
|
</tr>
|
|
}
|
|
</script>
|
|
|
|
<script id="template-cart-total" type="text/template">
|
|
<tr>
|
|
<th colspan="1" class="pb-4 h4">Total</th>
|
|
<th colspan="4" class="pb-4 h4 text-end">
|
|
<span class="js-cart-total">{total}</span>
|
|
</th>
|
|
</tr>
|
|
</script>
|
|
}
|
|
<div id="cartModal" class="modal" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-primary text-white border-0">
|
|
<h5 class="modal-title">Confirmation</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" ref="close">
|
|
<vc:icon symbol="close" />
|
|
</button>
|
|
</div>
|
|
<div class="modal-body p-0">
|
|
<table id="js-cart-summary" class="table m-0">
|
|
<tbody class="my-3">
|
|
<tr>
|
|
<td colspan="2" class="border-top-0 h5">Summary</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="border-0 pb-0 h6">Total products</td>
|
|
<td align="right" class="border-0 pb-0 h6">
|
|
<span class="js-cart-summary-products text-nowrap"></span>
|
|
</td>
|
|
</tr>
|
|
@if (Model.ShowDiscount)
|
|
{
|
|
<tr>
|
|
<td class="border-0 pb-y h6">Discount</td>
|
|
<td align="right" class="border-0 pb-y h6">
|
|
<span class="js-cart-summary-discount text-nowrap"></span>
|
|
</td>
|
|
</tr>
|
|
}
|
|
@if (Model.EnableTips)
|
|
{
|
|
<tr>
|
|
<td class="border-top-0 pt-0 h6">Tip</td>
|
|
<td align="right" class="border-top-0 pt-0 h6">
|
|
<span class="js-cart-summary-tip text-nowrap"></span>
|
|
</td>
|
|
</tr>
|
|
}
|
|
<tr>
|
|
<td class="h3 table-light">Total</td>
|
|
<td class="h3 table-light text-end">
|
|
<span class="js-cart-summary-total text-nowrap"></span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="modal-footer bg-light">
|
|
<form
|
|
id="js-cart-pay-form"
|
|
method="post"
|
|
asp-action="ViewPointOfSale"
|
|
asp-route-appId="@Model.AppId"
|
|
asp-antiforgery="false"
|
|
data-buy
|
|
>
|
|
<input id="js-cart-amount" class="form-control" type="hidden" name="amount">
|
|
<input id="js-cart-posdata" class="form-control" type="hidden" name="posdata">
|
|
<button id="js-cart-pay" class="btn btn-primary btn-lg" type="submit">
|
|
<b>@Model.CustomButtonText</b>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<!-- Page Content -->
|
|
<div id="content">
|
|
<div class="p-2 p-sm-4">
|
|
<partial name="_StatusMessage" />
|
|
<div class="d-flex gap-3 mb-4">
|
|
<div class="flex-fill position-relative">
|
|
<input type="text" class="js-search form-control form-control-lg" placeholder="Find product">
|
|
<a class="js-search-reset btn btn-lg btn-link text-black" href="#">
|
|
<i class="fa fa-times-circle fa-lg"></i>
|
|
</a>
|
|
</div>
|
|
<a class="js-cart btn btn-lg btn-outline-primary text-nowrap" href="#">
|
|
<i class="fa fa-shopping-basket"></i>
|
|
<span class="badge bg-light rounded-pill">
|
|
<span id="js-cart-items">0</span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
@if (!string.IsNullOrEmpty(Model.Description))
|
|
{
|
|
<div class="lead text-center mt-3">@Safe.Raw(Model.Description)</div>
|
|
}
|
|
</div>
|
|
<div id="js-pos-list" class="text-center mx-auto px-2 px-sm-4 py-4 py-sm-2">
|
|
<div class="card-deck">
|
|
@for (var index = 0; index < Model.Items.Length; index++)
|
|
{
|
|
var item = Model.Items[index];
|
|
var image = item.Image;
|
|
var description = item.Description;
|
|
|
|
<div class="js-add-cart card px-0 card-wrapper" data-index="@index">
|
|
@if (!string.IsNullOrWhiteSpace(image))
|
|
{
|
|
<img class="card-img-top" src="@image" alt="@item.Title" asp-append-version="true">
|
|
}
|
|
<div class="card-body p-3">
|
|
<h6 class="card-title mb-0">@item.Title</h6>
|
|
@if (!String.IsNullOrWhiteSpace(description))
|
|
{
|
|
<p class="card-text">@Safe.Raw(description)</p>
|
|
}
|
|
</div>
|
|
<div class="card-footer bg-transparent border-0 pt-0 pb-3">
|
|
|
|
<span class="text-muted small">
|
|
@{
|
|
var buttonText = string.IsNullOrEmpty(item.BuyButtonText) ? item.Price.Type != ViewPointOfSaleViewModel.Item.ItemPrice.ItemPriceType.Fixed ? Model.CustomButtonText : Model.ButtonText : item.BuyButtonText;
|
|
if (item.Price.Type != ViewPointOfSaleViewModel.Item.ItemPrice.ItemPriceType.Topup)
|
|
{
|
|
buttonText = buttonText.Replace("{0}",item.Price.Formatted)
|
|
?.Replace("{Price}",item.Price.Formatted);
|
|
}
|
|
}
|
|
@Safe.Raw(buttonText)
|
|
</span>
|
|
@if (item.Inventory.HasValue)
|
|
{
|
|
|
|
<div class="w-100 pt-2 text-center text-muted">
|
|
@if (item.Inventory > 0)
|
|
{
|
|
<span>@item.Inventory left</span>
|
|
}
|
|
else
|
|
{
|
|
<span>Sold out</span>
|
|
}
|
|
</div>
|
|
} else if (anyInventoryItems)
|
|
{
|
|
<div class="w-100 pt-2"> </div>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<nav id="sidebar">
|
|
<div class="d-flex align-items-center pt-4 p-2">
|
|
<h3 class="text-white m-0 me-auto">Cart</h3>
|
|
<a class="js-cart btn btn-sm bg-white text-black pull-right ms-5" href="#">
|
|
<i class="fa fa-times fa-lg"></i>
|
|
</a>
|
|
<a class="js-cart-destroy btn btn-danger pull-right" href="#" style="display: none;">Empty cart <i class="fa fa-trash fa-fw fa-lg"></i></a>
|
|
</div>
|
|
|
|
<table id="js-cart-list" class="table table-responsive table-light mt-0 mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th colspan="3" width="55%">Product</th>
|
|
<th class="text-center" width="20%">
|
|
<div style="width: 84px">Quantity</div>
|
|
</th>
|
|
<th class="text-end" width="25%">
|
|
<div style="min-width: 50px">Price</div>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
|
|
<table id="js-cart-extra" class="table table-light mt-0 mb-0">
|
|
<thead></thead>
|
|
</table>
|
|
|
|
<button id="js-cart-confirm" data-bs-toggle="modal" data-bs-target="#cartModal" class="btn btn-primary btn-lg mx-2 mb-3 p-3" disabled="disabled" type="submit">
|
|
Confirm
|
|
</button>
|
|
|
|
<footer class="store-footer">
|
|
<a href="https://btcpayserver.org" target="_blank" rel="noreferrer noopener">
|
|
Powered by <partial name="_StoreFooterLogo" />
|
|
</a>
|
|
</footer>
|
|
</nav>
|
|
</div>
|