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

@model BTCPayServer.Plugins.PointOfSale.Models.ViewPointOfSaleViewModel

<form id="app" method="post" asp-action="ViewPointOfSale" asp-route-appId="@Model.AppId" asp-antiforgery="false" v-on:submit="handleFormSubmit" class="d-flex flex-column gap-4 my-auto" v-cloak>
    <input type="hidden" name="posdata" v-model="posdata" id="posdata">
    <input type="hidden" name="amount" v-model="totalNumeric">
    <div ref="display" class="d-flex flex-column align-items-center px-4 mb-auto">
        <div class="fw-semibold text-muted" id="Currency">{{currencyCode}}</div>
        <div class="fw-bold lh-sm" ref="amount" v-bind:style="{ fontSize: `${fontSize}px` }" id="Amount">{{ formatCurrency(total, false) }}</div>
        <div class="text-muted text-center mt-2" id="Calculation">{{ calculation }}</div>
    </div>
    <div id="ModeTabs" class="tab-content mb-n2" v-if="showDiscount || enableTips">
        <div id="Mode-Discount" class="tab-pane fade px-2" :class="{ show: mode === 'discount', active: mode === 'discount' }" role="tabpanel" aria-labelledby="ModeTablist-Discount" v-if="showDiscount">
            <div class="h4 fw-semibold text-muted text-center" id="Discount">
                <span class="h3 text-body me-1">{{discountPercent || 0}}%</span> discount
            </div>
        </div>
        <div id="Mode-Tip" class="tab-pane fade px-2" :class="{ show: mode === 'tip', active: mode === 'tip' }" role="tabpanel" aria-labelledby="ModeTablist-Tip" v-if="enableTips">
            <div class="btcpay-pills d-flex flex-wrap align-items-center justify-content-center gap-2">
                <template v-if="customTipPercentages">
                    <button
                        id="Tip-Custom"
                        type="button"
                        class="btcpay-pill"
                        :class="{ active: !tipPercent }"
                        v-on:click.prevent="tipPercent = null">
                        <template v-if="tip && tip > 0">{{formatCurrency(tip, true)}}</template>
                        <template v-else>Custom</template>
                    </button>
                    <button
                        v-for="percentage in customTipPercentages"
                        type="button"
                        class="btcpay-pill"
                        :class="{ active: tipPercent == percentage }"
                        :id="`Tip-${percentage}`"
                        v-on:click.prevent="tipPercentage(percentage)">
                        {{ percentage }}%
                    </button>
                </template>
                <div v-else class="h5 fw-semibold text-muted text-center">
                    Amount<template v-if="tip">: {{formatCurrency(tip, true)}}</template>
                </div>
            </div>
        </div>
    </div>
    <div id="ModeTablist" class="nav btcpay-pills align-items-center justify-content-center mb-n2 pb-1" role="tablist" v-if="modes.length > 1">
        <template v-for="m in modes" :key="m.value">
            <input :id="`ModeTablist-${m.type}`" name="mode" :value="m.type" type="radio" role="tab" data-bs-toggle="pill" :data-bs-target="`#Mode-${m.type}`" :disabled="m.type != 'amounts' && amountNumeric == 0" :aria-controls="`Mode-${m.type}`" :aria-selected="mode === m.type" :checked="mode === m.type" v-on:click="mode = m.type">
            <label :for="`ModeTablist-${m.type}`">{{ m.title }}</label>
        </template>
    </div>
    <div class="keypad">
        <button v-for="k in keys" :key="k" :disabled="k === '+' && mode !== 'amounts'" v-on:click.prevent="keyPressed(k)" v-on:dblclick.prevent="doubleClick(k)" type="button" class="btn btn-secondary btn-lg" :data-key="k">{{ k }}</button>
    </div>
    <button class="btn btn-lg btn-primary mx-3" type="submit" :disabled="payButtonLoading || totalNumeric <= 0" id="pay-button">
        <div v-if="payButtonLoading" class="spinner-border spinner-border-sm" id="pay-button-spinner" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <template v-else>Charge</template>
    </button>
    <div class="modal" tabindex="-1" id="RecentTransactions" ref="RecentTransactions" data-bs-backdrop="static" data-url="@Url.Action("RecentTransactions", "UIPointOfSale", new { appId = Model.AppId })">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Recent Transactions</h5>
                    <button type="button" class="btn btn-link px-3 py-0" aria-label="Refresh" v-on:click="loadRecentTransactions" :disabled="recentTransactionsLoading" id="RecentTransactionsRefresh">
                        <vc:icon symbol="refresh"/>
                        <span v-if="recentTransactionsLoading" class="visually-hidden">Loading...</span>
                    </button>
                    <button type="button" class="btn-close py-3" aria-label="Close" v-on:click="closeModal">
                        <vc:icon symbol="close"/>
                    </button>
                </div>
                <div class="modal-body">
                    <div v-if="recentTransactions.length" class="list-group list-group-flush">
                        <a v-for="t in recentTransactions" :key="t.id" :href="t.url" class="list-group-item list-group-item-action d-flex align-items-center gap-3 pe-1 py-3">
                            <div class="d-flex align-items-baseline justify-content-between flex-wrap flex-grow-1 gap-2">
                                <span class="flex-grow-1">{{displayDate(t.date)}}</span>
                                <span class="flex-grow-1 text-end">{{t.price}}</span>
                                <div class="badge-container">
                                    <span class="badge" :class="`badge-${t.status.toLowerCase()}`">{{t.status}}</span>
                                </div>
                            </div>
                            <vc:icon symbol="caret-right" />
                        </a>
                    </div>
                    <p v-else-if="recentTransactionsLoading" class="text-muted my-0">Loading...</p>
                    <p v-else class="text-muted my-0">No transactions, yet.</p>
                </div>
            </div>
        </div>
    </div>
    <button type="button" class="btn btn-link p-1" data-bs-toggle="modal" data-bs-target="#RecentTransactions" id="RecentTransactionsToggle">
        <vc:icon symbol="manage-plugins"/>
    </button>
</form>