btcpayserver/BTCPayServer/Views/UIInvoice/ListInvoices.cshtml

@using BTCPayServer.Client
@using BTCPayServer.Client.Models
@using BTCPayServer.Services
@inject DisplayFormatter DisplayFormatter
@inject PaymentMethodHandlerDictionary PaymentMethodHandlerDictionary
@model InvoicesModel
@{
    ViewData.SetActivePage(InvoiceNavPages.Index, "Invoices");
    var statusFilterCount = CountArrayFilter("status") + CountArrayFilter("exceptionstatus") + (HasBooleanFilter("includearchived") ? 1 : 0) + (HasBooleanFilter("unusual") ? 1 : 0);
    var hasDateFilter = HasArrayFilter("startdate") || HasArrayFilter("enddate");
    var appFilterCount = Model.Apps.Count(app => HasArrayFilter("appid", app.Id));
}

@functions
{
    private int CountArrayFilter(string type) =>
        Model.Search.ContainsFilter(type) ? Model.Search.GetFilterArray(type).Length : 0;
    
    private bool HasArrayFilter(string type, string key = null) =>
        Model.Search.ContainsFilter(type) && (key is null || Model.Search.GetFilterArray(type).Contains(key));

    private bool HasBooleanFilter(string key) =>
        Model.Search.ContainsFilter(key) && Model.Search.GetFilterBool(key) is true;
    
    private bool HasCustomDateFilter() =>
        Model.Search.ContainsFilter("startdate") && Model.Search.ContainsFilter("enddate");
}

@section PageHeadContent
{
    <style>
        .invoice-payments {
            padding-left: var(--btcpay-space-l);
        }
        .dropdown > .btn {
            min-width: 7rem;
            padding-left: 1rem;
            text-align: left;
        }
        @@media (max-width: 568px) {
            #SearchText {
                width: 100%;
            }
        }
    </style>
}

@section PageFootContent {
    @*Without async, somehow selenium do not manage to click on links in this page*@
    <script src="~/modal/btcpay.js" asp-append-version="true" async></script>

    @* Custom Range Modal *@
    <script>
        delegate('click', '#selectAllCheckbox', e => {
            document.querySelectorAll(".selector").forEach(checkbox => {
                checkbox.checked = e.target.checked;
            });
        });

        delegate('click', '.changeInvoiceState', e => {
            const { invoiceId, newState } = e.target.dataset;
            const pavpill = $("#pavpill_" + invoiceId);
            const originalHtml = pavpill.html();
            pavpill.html("<span class='fa fa-bitcoin fa-spin' style='margin-left:16px;'></span>");

            $.post("invoices/" + invoiceId + "/changestate/" + newState)
                .done(function (data) {
                    const statusHtml = "<span class='badge badge-" + newState + "'>" + data.statusString + " <span class='fa fa-check'></span></span>";
                    pavpill.replaceWith(statusHtml);
                })
                .fail(function (data) {
                    pavpill.html(originalHtml.replace("dropdown-menu show", "dropdown-menu"));
                    alert("Invoice state update failed");
                });
        })

        delegate('click', '.showInvoice', e => {
            e.preventDefault();
            const { invoiceId } = e.target.dataset;
            btcpay.appendInvoiceFrame(invoiceId);
        })

        $('#btnCustomRangeDate').on('click', function (sender) {
            var filterString = "";

            var dtpStartDate = $("#dtpStartDate").val();
            if (dtpStartDate !== null && dtpStartDate !== "") {
                filterString = "startdate%3A" + dtpStartDate;
            }

            var dtpEndDate = $("#dtpEndDate").val();
            if (dtpEndDate !== null && dtpEndDate !== "") {
                if (filterString !== "") {
                    filterString += ",";
                }
                filterString += "enddate%3A" + dtpEndDate;
            }

            if (filterString !== "") {
                var redirectUri = "/invoices?Count=" + $("#Count").val() +
                    "&timezoneoffset=" + $("#TimezoneOffset").val() +
                    "&SearchTerm=" + filterString;

                window.location.href = redirectUri;
            } else {
                $("#dtpStartDate").next().trigger("focus");
            }
        })

        function getDateStringWithOffset(hoursDiff) {
            var datenow = new Date();
            var newDate = new Date(datenow.getTime() - (hoursDiff * 60 * 60 * 1000));
            var str = newDate.toLocaleDateString() + " " + newDate.toLocaleTimeString();
            return str;
        }

        document.addEventListener("DOMContentLoaded", function () {
            var timezoneOffset = new Date().getTimezoneOffset();
            $(".export-link, a.dropdown-item").each(function () {
                this.href = this.href.replace("timezoneoffset=0", "timezoneoffset=" + timezoneOffset);
            });

            $("#invoices")
                .on("click", ".invoice-row .invoice-details-toggle", function (e) {
                    e.preventDefault();
                    e.stopPropagation(true);

                    const $btnToggle = $(e.currentTarget);
                    const $invoiceRow = $btnToggle.parents(".invoice-row");
                    const $detailsRow = $invoiceRow.next(".invoice-details-row");

                    $detailsRow.toggle(0, function () {
                        const $icon = $btnToggle.children().first();
                        if ($(this).is(':visible')) {
                            $icon.removeClass('fa-angle-double-down').addClass('fa-angle-double-up');
                        } else {
                            $icon.removeClass('fa-angle-double-up').addClass('fa-angle-double-down');
                        }
                    });
                })
                .on("click", ".invoice-row", function (e) {
                    const $invoiceRow = $(e.currentTarget);
                    if ($(e.target).is("td")) {
                        $invoiceRow.find(".selector").trigger("click");
                    }
                });
        });
    </script>
}

@Html.HiddenFor(a => a.Count)

<div class="sticky-header-setup"></div>
<div class="sticky-header d-sm-flex align-items-center justify-content-between">
    <h2 class="mb-0">
        @ViewData["Title"]
        <a href="#descriptor" data-bs-toggle="collapse">
            <vc:icon symbol="info" />
        </a>
    </h2>
    <a id="CreateNewInvoice" asp-action="CreateInvoice" asp-route-storeId="@Model.StoreId" asp-route-searchTerm="@Model.SearchTerm" class="btn btn-primary mt-3 mt-sm-0">
        <span class="fa fa-plus"></span>
        Create Invoice
    </a>
</div>

<div id="descriptor" class="collapse">
    <div class="d-flex px-4 py-4 mb-4 bg-tile rounded">
        <div class="flex-fill">
            <p class="mb-2">Invoices are documents issued by the seller to a buyer to collect payment.</p>
            <p class="mb-3">An invoice must be paid within a defined time interval at a fixed exchange rate to protect the issuer from price fluctuations.</p>
            <p class="mb-3">
                You can also apply filters to your search by searching for <code>filtername:value</code>.
                Be sure to split your search parameters with comma. Supported filters are:
            </p>
            <ul>
                <li><code>orderid:id</code> for filtering a specific order</li>
                <li><code>itemcode:code</code> for filtering a specific type of item purchased through the pos or crowdfund apps</li>
            </ul>
            <a href="https://docs.btcpayserver.org/Invoices/" target="_blank" rel="noreferrer noopener">Learn More</a>
        </div>
        <button type="button" class="btn-close ms-auto" data-bs-toggle="collapse" data-bs-target="#descriptor" aria-expanded="false" aria-label="Close">
            <vc:icon symbol="close" />
        </button>
    </div>
</div>

<partial name="_StatusMessage" />

<partial name="InvoiceStatusChangePartial" />

@* Custom Range Modal *@
<div class="modal fade" id="customRangeModal" tabindex="-1" role="dialog" aria-labelledby="customRangeModalTitle" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 550px;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="customRangeModalTitle">Filter invoices by Custom Range</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <vc:icon symbol="close" />
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group row">
                    <label for="dtpStartDate" class="col-sm-3 col-form-label">Start Date</label>
                    <div class="col-sm-9">
                        <div class="input-group">
                            <input id="dtpStartDate" class="form-control flatdtpicker" type="datetime-local"
                                   data-fdtp='{ "enableTime": true, "enableSeconds": true, "dateFormat": "Y-m-d H:i:S", "time_24hr": true, "defaultHour": 0 }'
                                   placeholder="Start Date" />
                            <button type="button" class="btn btn-primary input-group-clear" title="Clear">
                                <span class="fa fa-times"></span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-3 col-form-label">End Date</label>
                    <div class="col-sm-9">
                        <div class="input-group">
                            <input id="dtpEndDate" class="form-control flatdtpicker" type="datetime-local"
                                   data-fdtp='{ "enableTime": true, "enableSeconds": true, "dateFormat": "Y-m-d H:i:S", "time_24hr": true, "defaultHour": 0 }'
                                   placeholder="End Date" />
                            <button type="button" class="btn btn-primary input-group-clear" title="Clear">
                                <span class="fa fa-times"></span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="btnCustomRangeDate" type="button" class="btn btn-primary">Filter</button>
            </div>
        </div>
    </div>
</div>

<form class="d-flex flex-wrap flex-sm-nowrap align-items-center gap-3 mb-4 col-xxl-8" asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" method="get">
    <input asp-for="Count" type="hidden" />
    <input asp-for="TimezoneOffset" type="hidden" />
    <input asp-for="SearchTerm" type="hidden" value="@Model.Search.WithoutSearchText()"/>
    <input asp-for="SearchText" class="form-control" placeholder="Search…" />
    <div class="dropdown">
        <button id="StatusOptionsToggle" class="btn btn-secondary dropdown-toggle dropdown-toggle-custom-caret" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            @if (statusFilterCount > 0)
            {
                <span>@statusFilterCount Status</span>
            }
            else
            {
                <span>All Status</span>
            }
        </button>
        <div class="dropdown-menu" aria-labelledby="StatusOptionsToggle">
            <a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("status", "settled")" class="dropdown-item @(HasArrayFilter("status", "settled") ? "custom-active" : "")">Settled</a>
            <a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("status", "processing")" class="dropdown-item @(HasArrayFilter("status", "processing") ? "custom-active" : "")">Processing</a>
            <a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("status", "expired")" class="dropdown-item @(HasArrayFilter("status", "expired") ? "custom-active" : "")">Expired</a>
            <a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("status", "invalid")" class="dropdown-item @(HasArrayFilter("status", "invalid") ? "custom-active" : "")">Invalid</a>
            <hr class="dropdown-divider">
            <a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("exceptionstatus", "paidLate")" class="dropdown-item @(HasArrayFilter("exceptionstatus", "paidLate") ? "custom-active" : "")">Settled Late</a>
            <a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("exceptionstatus", "paidPartial")" class="dropdown-item @(HasArrayFilter("exceptionstatus", "paidPartial") ? "custom-active" : "")">Settled Partial</a>
            <a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("exceptionstatus", "paidOver")" class="dropdown-item @(HasArrayFilter("exceptionstatus", "paidOver") ? "custom-active" : "")">Settled Over</a>
            <a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("unusual", "true")" class="dropdown-item @(HasBooleanFilter("unusual") ? "custom-active" : "")">Unusual</a>
            <hr class="dropdown-divider">
            <a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("includearchived", "true")" class="dropdown-item @(HasBooleanFilter("includearchived") ? "custom-active" : "")" id="StatusOptionsIncludeArchived">Include archived</a>
        </div>
    </div>
    @if (Model.Apps.Any())
    {
        <div class="dropdown">
            <button id="AppOptionsToggle" class="btn btn-secondary dropdown-toggle dropdown-toggle-custom-caret" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                @if (appFilterCount > 0)
                {
                    <span>@appFilterCount Plugin@(appFilterCount > 1 ? "s" : "")</span>
                }
                else
                {
                    <span>All Plugins</span>
                }
            </button>
            <div class="dropdown-menu" aria-labelledby="AppOptionsToggle">
                @foreach (var app in Model.Apps)
                {
                    <a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("appid", app.Id)" class="dropdown-item @(HasArrayFilter("appid", app.Id) ? "custom-active" : "")">@app.AppName</a>
                }
            </div>
        </div> 
    }
    <div class="dropdown">
        <button id="DateOptionsToggle" class="btn btn-secondary dropdown-toggle dropdown-toggle-custom-caret" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            @if (hasDateFilter)
            {
                if (HasArrayFilter("startdate", "-1d"))
                {
                    <span>24 Hours</span>
                }
                else if (HasArrayFilter("startdate", "-3d"))
                {
                    <span>3 Days</span>
                }
                else if (HasArrayFilter("startdate", "-7d"))
                {
                    <span>7 Days</span>
                }
                else
                {
                    <span>Custom</span>
                }
            }
            else
            {
                <span>All Time</span>
            }
        </button>
        <div class="dropdown-menu" aria-labelledby="DateOptionsToggle">
            <a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("startdate", "-1d")" class="dropdown-item @(HasArrayFilter("startdate", "-1d") ? "custom-active" : "")">Last 24 hours</a>
            <a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("startdate", "-3d")" class="dropdown-item @(HasArrayFilter("startdate", "-3d") ? "custom-active" : "")">Last 3 days</a>
            <a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("startdate", "-7d")" class="dropdown-item @(HasArrayFilter("startdate", "-7d") ? "custom-active" : "")">Last 7 days</a>
            <button type="button" class="dropdown-item @(HasCustomDateFilter() ? "custom-active" : "")" data-bs-toggle="modal" data-bs-target="#customRangeModal">Custom Range</button>
        </div>
    </div>
</form>

@if (Model.Invoices.Any())
{
    <form method="post" id="MassAction" asp-action="MassAction" class="">
        <div class="d-inline-flex align-items-center pb-2 float-xxl-end mb-2 gap-3">
            <input type="hidden" name="storeId" value="@Model.StoreId" />
            <div class="dropdown order-xxl-1">
                <button class="btn btn-secondary dropdown-toggle dropdown-toggle-custom-caret" type="button" id="ActionsDropdownToggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Actions
                </button>
                <div class="dropdown-menu dropdown-menu-xxl-end" aria-labelledby="ActionsDropdownToggle">
                    <button type="submit" class="dropdown-item" name="command" value="archive" id="ActionsDropdownArchive">Archive</button>
                    @if (HasBooleanFilter("includearchived"))
                    {
                        <button type="submit" asp-action="MassAction" class="dropdown-item" name="command" value="unarchive" id="ActionsDropdownUnarchive">Unarchive</button>
                    }
				    <button id="BumpFee" type="submit" permission="@Policies.CanModifyStoreSettings" class="dropdown-item" name="command" value="cpfp">Bump fee</button>
                </div>
            </div>
            <div class="dropdown d-inline-flex align-items-center gap-3">
                <button class="btn btn-secondary dropdown-toggle dropdown-toggle-custom-caret order-xxl-1" type="button" id="ExportDropdownToggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Export
                </button>
                <div class="dropdown-menu" aria-labelledby="ExportDropdownToggle">
                    <a asp-action="Export" asp-route-timezoneoffset="0" asp-route-format="csv" asp-route-storeId="@Model.StoreId" asp-route-searchTerm="@Model.SearchTerm" class="dropdown-item export-link" target="_blank">CSV</a>
                    <a asp-action="Export" asp-route-timezoneoffset="0" asp-route-format="json" asp-route-storeId="@Model.StoreId" asp-route-searchTerm="@Model.SearchTerm" class="dropdown-item export-link" target="_blank">JSON</a>
                </div>
                <a href="https://docs.btcpayserver.org/Accounting/" target="_blank" rel="noreferrer noopener" title="More information...">
                    <vc:icon symbol="info" />
                </a>
            </div>
        </div>
        <div style="clear:both"></div>
        <div class="table-responsive">
            <table id="invoices" class="table table-hover">
                <thead>
                    <tr>
                        <th style="width:2rem;" class="only-for-js">
                            <input id="selectAllCheckbox" type="checkbox" class="form-check-input" />
                        <th class="w-150px">
                            <div class="d-flex align-items-center gap-1">
                                Date
                                <button type="button" class="btn btn-link p-0 fa fa-clock-o switch-time-format only-for-js" title="Switch date format"></button>
                            </div>
                        </th>
                        <th class="text-nowrap">Order Id</th>
                        <th class="text-nowrap">Invoice Id</th>
                        <th>Status</th>
                        <th class="text-end">Amount</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var invoice in Model.Invoices)
                    {
                        <tr id="invoice_@invoice.InvoiceId" class="invoice-row">
                            <td class="only-for-js">
                                <input name="selectedItems" type="checkbox" class="selector form-check-input" value="@invoice.InvoiceId" />
                            </td>
                            <td>@invoice.Date.ToBrowserDate()</td>
                            <td>
                                <vc:truncate-center text="@invoice.OrderId" link="@invoice.RedirectUrl" classes="truncate-center-id" />
                            </td>
                            <td class="text-break">@invoice.InvoiceId</td>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    @if (invoice.Details.Archived)
                                    {
                                        <span class="badge bg-warning">archived</span>
                                    }
                                    @if (invoice.CanMarkStatus)
                                    {
                                        <div id="pavpill_@invoice.InvoiceId" class="badge badge-@invoice.Status.Status.ToModernStatus().ToString().ToLower()">
                                            <span class="dropdown-toggle changeInvoiceStateToggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                @invoice.Status.ToString()
                                            </span>
                                            <div class="dropdown-menu">
                                                @if (invoice.CanMarkInvalid)
                                                {
                                                    <button type="button" class="dropdown-item lh-base changeInvoiceState" data-invoice-id="@invoice.InvoiceId" data-new-state="invalid">
                                                        Mark as invalid
                                                    </button>
                                                }
                                                @if (invoice.CanMarkSettled)
                                                {
                                                    <button type="button" class="dropdown-item lh-base changeInvoiceState" data-invoice-id="@invoice.InvoiceId" data-new-state="settled">
                                                        Mark as settled
                                                    </button>
                                                }
                                            </div>
                                        </div>
                                    }
                                    else
                                    {
                                        <span class="badge badge-@invoice.Status.Status.ToModernStatus().ToString().ToLower()">
                                            @invoice.Status.Status.ToModernStatus().ToString()
                                            @if (invoice.Status.ExceptionStatus != InvoiceExceptionStatus.None)
                                            {
                                                @($"({invoice.Status.ExceptionStatus.ToString()})")
                                            }
                                        </span>
                                    }
                                    @foreach (var paymentMethodId in invoice.Details.Payments.Select(payment => payment.GetPaymentMethodId()).Distinct())
                                    {
                                        var image = PaymentMethodHandlerDictionary[paymentMethodId]?.GetCryptoImage(paymentMethodId);
                                        var badge = paymentMethodId.PaymentType.GetBadge();
                                        if (!string.IsNullOrEmpty(image) || !string.IsNullOrEmpty(badge))
                                        {
                                            <span class="d-inline-flex align-items-center gap-1">
                                                @if (!string.IsNullOrEmpty(image))
                                                {
                                                    <img src="@Context.Request.GetRelativePathOrAbsolute(image)" alt="@paymentMethodId.PaymentType.ToString()" style="height:1.5em" />
                                                }
                                                @if (!string.IsNullOrEmpty(badge))
                                                {
                                                    @badge
                                                }
                                            </span>
                                        }
                                    }
                                    @if (invoice.HasRefund)
                                    {
                                        <span class="badge bg-warning">Refund</span>
                                    }
                                </div>
                            </td>
                            <td class="text-end text-nowrap">
                                <span data-sensitive>@DisplayFormatter.Currency(invoice.Amount, invoice.Currency)</span>
                            </td>
                            <td class="text-end text-nowrap">
                                @if (invoice.ShowCheckout)
                                {
                                    <span>
                                        <a asp-action="Checkout" asp-route-invoiceId="@invoice.InvoiceId" class="invoice-checkout-link" id="invoice-checkout-@invoice.InvoiceId">Checkout</a>
                                        <a asp-action="Checkout" asp-route-invoiceId="@invoice.InvoiceId" class="showInvoice only-for-js" data-invoice-id="@invoice.InvoiceId">[^]</a>
                                        @if (!invoice.CanMarkStatus)
                                        {
                                            <span>-</span>
                                        }
                                    </span>
                                }
                                &nbsp;
                                <a asp-action="Invoice" class="invoice-details-link" asp-route-invoiceId="@invoice.InvoiceId">Details</a>
                                <a class="only-for-js invoice-details-toggle" href="#">
                                    <span title="Invoice Details Toggle" class="fa fa-1x fa-angle-double-down"></span>
                                </a>
                            </td>
                        </tr>
                        <tr id="invoice_details_@invoice.InvoiceId" class="invoice-details-row" style="display:none;">
                            <td colspan="99" class="border-top-0">
                                @* Leaving this as partial because it abstracts complexity of Invoice Payments *@
                                <partial name="ListInvoicesPaymentsPartial" model="(invoice.Details, true)" />
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>

        <vc:pager view-model="Model" />
    
    </form>
}
else
{
    <p class="text-secondary mt-3">
        There are no invoices matching your criteria.
    </p>
}