btcpayserver/BTCPayServer/Views/Shared/PointOfSale/Public/Cart.cshtml

@using BTCPayServer.Plugins.PointOfSale.Models
@using BTCPayServer.Services
@using Newtonsoft.Json.Linq;
@model BTCPayServer.Plugins.PointOfSale.Models.ViewPointOfSaleViewModel

@inject DisplayFormatter DisplayFormatter
@{
    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;
        }
        .card:not(.d-none:only-of-type) {
            max-width: 320px;
            margin: auto !important;
        }
    </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" id="CartCustomAmount">
                    <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" id="CartCustomAmount">
                        <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 %" id="CartDiscount">
                        <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" id="CartTotal">{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 class="text-end 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 class="text-end border-0 pb-y h6">
                                    <span class="js-cart-summary-discount text-nowrap" id="CartSummaryDiscount"></span>
                                </td>
                            </tr>
                        }
                        @if (Model.EnableTips)
                        {
                            <tr>
                                <td class="border-top-0 pt-0 h6">Tip</td>
                                <td class="text-end border-top-0 pt-0 h6">
                                    <span class="js-cart-summary-tip text-nowrap" id="CartSummaryTip"></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" id="CartSummaryTotal"></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" type="hidden" name="amount">
                    <input id="js-cart-custom-amount" type="hidden" name="customAmount">
                    <input id="js-cart-tip" type="hidden" name="tip">
                    <input id="js-cart-discount" type="hidden" name="discount">
                    <input id="js-cart-posdata" 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>&nbsp;
                    <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>
            }
			@if (Model.AllCategories != null)
			{
				<div class="btcpay-pills d-flex flex-wrap align-items-center justify-content-center gap-3 mt-3" data-toggle="buttons" v-pre>
				    @foreach (var g in Model.AllCategories)
				    {
				        <input id="Category-@g.Value" type="radio" name="category" class="js-categories" value="@g.Value" @(g.Selected ? "checked" : "") autocomplete="off">
					    <label class="btcpay-pill" for="Category-@g.Value">@g.Text</label>
				    }
				</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];
                    if (item.PriceType == ViewPointOfSaleViewModel.ItemPriceType.Topup)
                    {
                        continue;
                    }
                    var image = item.Image;
                    var description = item.Description;

                    <div class="js-add-cart card px-0 card-wrapper" data-index="@index" data-categories="@(new JArray(item.Categories).ToString())">
                        @if (!string.IsNullOrWhiteSpace(image))
                        {
                            <img class="card-img-top" src="@image" alt="@Safe.Raw(item.Title)" asp-append-version="true">
                        }
                        <div class="card-body p-3">
                            <h6 class="card-title mb-0">@Safe.Raw(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.PriceType == ViewPointOfSaleViewModel.ItemPriceType.Topup ? Model.CustomButtonText : Model.ButtonText : item.BuyButtonText;
                                    if (item.PriceType != ViewPointOfSaleViewModel.ItemPriceType.Topup)
                                    {
                                        var formatted = DisplayFormatter.Currency(item.Price ?? 0, Model.CurrencyCode, DisplayFormatter.CurrencyFormat.Symbol);
                                        buttonText = buttonText.Replace("{0}",formatted)
                                            ?.Replace("{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">&nbsp;</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;" id="CartClear">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 class="store-powered-by" href="https://btcpayserver.org" target="_blank" rel="noreferrer noopener">
                Powered by <partial name="_StoreFooterLogo" />
            </a>
        </footer>
    </nav>
</div>