btcpayserver/BTCPayServer/Views/UIStores/CheckoutAppearance.cshtml

@using BTCPayServer.Payments
@using Microsoft.AspNetCore.Mvc.TagHelpers
@using BTCPayServer.Abstractions.TagHelpers
@using BTCPayServer.Abstractions.Contracts
@inject IFileService FileService
@model CheckoutAppearanceViewModel
@{
    Layout = "../Shared/_NavLayout.cshtml";
    ViewData.SetActivePage(StoreNavPages.CheckoutAppearance, "Checkout experience", Context.GetStoreData().Id);

    var canUpload = await FileService.IsAvailable();
}
@section PageFootContent {
    <partial name="_ValidationScriptsPartial" />
    <script>
        delegate('click', '.setTheme', e => {
            e.preventDefault();
            const { theme } = e.target.dataset;
            document.getElementById('CustomCSS').value = ['dark', 'legacy'].includes(theme)
                ? `/checkout/css/themes/${theme}.css`
                : ''
        });
		delegate('click', '#Presets_InStore', e => {
			$("#UseClassicCheckout").prop('checked', false);
			$("#CheckoutV2Settings").addClass('show');
			$("#ClassicCheckoutSettings").removeClass('show');
			$("#CheckNFC").removeClass('d-none');
			$("#PlaySoundOnPayment").prop('checked', true);
			$("#ShowPayInWalletButton").prop('checked', false);
			$("#ShowStoreHeader").prop('checked', false);
		});
		delegate('click', '#Presets_Online', e => {
			$("#UseClassicCheckout").prop('checked', false);
			$("#CheckoutV2Settings").addClass('show');
			$("#ClassicCheckoutSettings").removeClass('show');
			$("#CheckNFC").addClass('d-none');
			$("#PlaySoundOnPayment").prop('checked', false);
			$("#ShowPayInWalletButton").prop('checked', true);
			$("#ShowStoreHeader").prop('checked', true);
		});
        
		delegate('click', '#CheckNFC button', async e => {
			if ('NDEFReader' in window) {
                const ndef = new NDEFReader();
                try {
                    await ndef.scan();
                    e.target.classList = 'btn btn-outline-success';
                    e.target.innerText = 'NFC access granted';
                } catch (error) {
                    e.target.classList = 'btn btn-outline-warning';
                    e.target.innerText = 'Please allow NFC access in your browser settings';
                }
            } else {
                e.target.classList = 'btn btn-outline-danger';
                e.target.innerText = 'NFC is not supported by this browser';
            }
        });
    </script>
}

<div class="row">
    <div class="col-xxl-constrain col-xl-8">
        <form method="post" enctype="multipart/form-data">
            @if (!ViewContext.ModelState.IsValid)
            {
                <div asp-validation-summary="All" class="text-danger"></div>
            }
            <h3 class="mb-3">Invoice Settings</h3>
            @if (Model.PaymentMethods.Any())
            {
                <div class="form-group mb-4">
                    <label asp-for="DefaultPaymentMethod" class="form-label"></label>
                    <select asp-for="DefaultPaymentMethod" asp-items="Model.PaymentMethods" class="form-select w-auto"></select>
                </div>
                <div class="form-group mb-4">
                    <div class="form-label mb-1">Enable payment methods only when amount is …</div>
                    <table class="table table-sm mt-0 mx-0">
                        @for (var index = 0; index < Model.PaymentMethodCriteria.Count; index++)
                        {
                            var criteria = Model.PaymentMethodCriteria[index];
                            <tr>
                                <td class="border-0 ps-0 align-middle">
                                    <input type="hidden" asp-for="PaymentMethodCriteria[index].PaymentMethod" />
                                    @PaymentMethodId.Parse(criteria.PaymentMethod).ToPrettyString()
                                </td>
                                <td class="border-0">
                                    <select asp-for="PaymentMethodCriteria[index].Type" class="form-select"
                                            asp-items="@((PaymentMethodCriteriaViewModel.CriteriaType[]) Enum.GetValues(typeof(PaymentMethodCriteriaViewModel.CriteriaType))).Select(s => new SelectListItem(PaymentMethodCriteriaViewModel.ToString(s), s.ToString()))">
                                    </select>
                                </td>
                                <td class="border-0">
                                    <input placeholder="6.15 USD" asp-for="PaymentMethodCriteria[index].Value" class="form-control my-0" style="max-width: 20ch;" />
                                </td>
                            </tr>
                        }
                    </table>
                </div>
            }

			<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-4">
				<input asp-for="UseClassicCheckout" type="checkbox" class="btcpay-toggle me-3" data-bs-toggle="collapse" data-bs-target=".checkout-settings" aria-expanded="@(Model.UseClassicCheckout)" aria-controls="CheckoutV2Settings" />
				<label asp-for="UseClassicCheckout" class="form-label mb-0"></label>
                <span asp-validation-for="UseClassicCheckout" class="text-danger"></span>
            </div>
            <div id="CheckNFC" class="form-group d-none">
                <button type="button" class="btn btn-outline-secondary">Check if NFC is supported and enabled on this device</button>
            </div>
			<div class="checkout-settings collapse @(Model.UseClassicCheckout ? "" : "show")" id="CheckoutV2Settings">
                <div class="form-group">
                    <label asp-for="DisplayExpirationTimer" class="form-label"></label>
                    <div class="input-group">
                        <input inputmode="numeric" asp-for="DisplayExpirationTimer" class="form-control" style="max-width:12ch;" />
                        <span class="input-group-text">minutes</span>
                    </div>
                    <span asp-validation-for="DisplayExpirationTimer" class="text-danger"></span>
                </div>
                <div class="form-check">
                    <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="PlaySoundOnPayment" type="checkbox" class="form-check-input" data-bs-toggle="collapse" data-bs-target="#PlaySoundOnPaymentOptions" aria-expanded="@Model.PlaySoundOnPayment" aria-controls="PlaySoundOnPaymentOptions" />
                    <label asp-for="PlaySoundOnPayment" class="form-check-label"></label>
                    <div class="collapse @(Model.PlaySoundOnPayment ? "show" : "")" id="PlaySoundOnPaymentOptions">
                        <div class="form-group mb-0 py-3">
                            <div class="d-flex align-items-center justify-content-between gap-2">
                                <label asp-for="SoundFile" class="form-label"></label>
                                @if (!string.IsNullOrEmpty(Model.SoundFileId))
                                {
                                    <button type="submit" class="btn btn-link p-0 text-danger" name="RemoveSoundFile" value="true">
                                        <span class="fa fa-times"></span> Remove
                                    </button>
                                }
                            </div>
                            @if (canUpload)
                            {
                                <div class="d-flex align-items-center gap-3">
                                    <input asp-for="SoundFile" type="file" class="form-control flex-grow">
                                    @{
                                        var soundUrl = string.IsNullOrEmpty(Model.SoundFileId)
                                            ? string.Concat(Context.Request.GetAbsoluteRootUri().ToString(), "checkout-v2/payment.mp3")
                                            : await FileService.GetFileUrl(Context.Request.GetAbsoluteRootUri(), Model.SoundFileId);
                                    }
                                    <audio controls src="@soundUrl" style="height:2.1rem;max-width:10.5rem;"></audio>
                                </div>
                                <span asp-validation-for="SoundFile" class="text-danger"></span>
                            }
                            else
                            {
                                <input asp-for="SoundFile" type="file" class="form-control" disabled>
                                <div class="form-text">In order to upload a custom sound, a <a asp-controller="UIServer" asp-action="Files">file storage</a> must be configured.</div>
                            }
                        </div>
                    </div>
                </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>
                <a href="https://bitcoinqr.dev/" target="_blank" rel="noreferrer noopener">
                    <vc:icon symbol="info" />
                </a>
            </div>
            <div class="form-check">
                <input asp-for="LightningAmountInSatoshi" type="checkbox" class="form-check-input" />
                <label asp-for="LightningAmountInSatoshi" class="form-check-label"></label>
            </div>
            <div class="checkout-settings collapse @(Model.UseClassicCheckout ? "show" : "")" id="ClassicCheckoutSettings">
                <div class="form-check">
                    <input asp-for="RequiresRefundEmail" type="checkbox" class="form-check-input" />
                    <label asp-for="RequiresRefundEmail" class="form-check-label"></label>
                </div>
                <div class="form-group">
                    <label asp-for="CustomLogo" class="form-label"></label>
                    <a href="https://docs.btcpayserver.org/Development/Theme/#checkout-page-themes" target="_blank" rel="noreferrer noopener">
                        <vc:icon symbol="info" />
                    </a>
                    <input asp-for="CustomLogo" class="form-control" />
                    <span asp-validation-for="CustomLogo" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="CustomCSS" class="form-label"></label>
                    <a href="https://docs.btcpayserver.org/Development/Theme/#checkout-page-themes" target="_blank" rel="noreferrer noopener">
                        <vc:icon symbol="info" />
                    </a>
                    <input asp-for="CustomCSS" class="form-control" />
                    <span asp-validation-for="CustomCSS" class="text-danger"></span>
                    <div class="form-text">
                        Bundled Themes:
                        <a href="#" class="setTheme" data-theme="default">Default</a> |
                        <a href="#" class="setTheme" data-theme="dark">Dark</a> |
                        <a href="#" class="setTheme" data-theme="legacy">Legacy</a>
                    </div>
                    @await Component.InvokeAsync("UiExtensionPoint", new {location = "invoice-checkout-theme-options", model = Model})
                </div>
            </div>
            <div class="form-group">
                <div class="form-check">
                    <input asp-for="AutoDetectLanguage" type="checkbox" class="form-check-input" />
                    <label asp-for="AutoDetectLanguage" class="form-check-label"></label>
                    <div class="form-text">Detects the language of the customer's browser.</div>
                </div>
            </div>
            <div class="form-group">
                <label asp-for="DefaultLang" class="form-label"></label>
                <select asp-for="DefaultLang" asp-items="Model.Languages" class="form-select w-auto"></select>
            </div>
            <div class="form-group">
                <label asp-for="HtmlTitle" class="form-label"></label>
                <input asp-for="HtmlTitle" class="form-control" />
                <span asp-validation-for="HtmlTitle" class="text-danger"></span>
            </div>
            <div class="form-check my-3">
                <input asp-for="LazyPaymentMethods" type="checkbox" class="form-check-input" />
                <label asp-for="LazyPaymentMethods" class="form-check-label"></label>
            </div>
            <div class="form-check my-3">
                <input asp-for="RedirectAutomatically" type="checkbox" class="form-check-input" />
                <label asp-for="RedirectAutomatically" class="form-check-label"></label>
            </div>
            <h3 class="mt-5 mb-3">Public receipt</h3>
            <div class="form-check my-3">
                <input asp-for="ReceiptOptions.Enabled" type="checkbox" class="form-check-input" />
                <label asp-for="ReceiptOptions.Enabled" class="form-check-label"></label>
            </div>
            <div class="form-check my-3">
                <input asp-for="ReceiptOptions.ShowPayments" type="checkbox" class="form-check-input" />
                <label asp-for="ReceiptOptions.ShowPayments" class="form-check-label"></label>
            </div>
            <div class="form-check my-3">
                <input asp-for="ReceiptOptions.ShowQR" type="checkbox" class="form-check-input" />
                <label asp-for="ReceiptOptions.ShowQR" class="form-check-label"></label>
            </div>
            <button type="submit" class="btn btn-primary mt-4" id="Save">Save</button>
        </form>
    </div>
</div>