fix(machine): hide cancel after bills inserted, kiosk-only UI cleanup
- Hide header cancel button after bills are in cash box - Add spinning hourglass to displayingQR waiting indicator - Hide keyboard-dependent UI in Electron kiosk mode: QR mode selector, manual payment options, copy buttons These remain available in browser (web-ui) mode. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
165ad59704
commit
642f0c5951
2 changed files with 32 additions and 9 deletions
|
|
@ -13,6 +13,19 @@ import QRCode from '@/components/QRCode.vue'
|
|||
|
||||
const router = useRouter()
|
||||
const atmStore = useAtmStore()
|
||||
const isElectron = typeof window !== 'undefined' && window.electronAPI !== undefined
|
||||
|
||||
// Whether the header cancel button should be visible
|
||||
// Hide after bills are inserted — state machine routes to confirmAbandon instead
|
||||
const showCancelButton = computed(() => {
|
||||
const state = atmStore.nestedState
|
||||
const hasBills = (atmStore.context?.billsInserted.length ?? 0) > 0
|
||||
// Always show in insertingBills (before bills) and error (without bills)
|
||||
if (state === 'insertingBills' || state === 'fetchingRate') return true
|
||||
if (state === 'error' && !hasBills) return true
|
||||
// Hide when bills are in the cash box
|
||||
return false
|
||||
})
|
||||
|
||||
// CLINK Debit: customer's npub/pubkey
|
||||
const pubkeyInput = ref('')
|
||||
|
|
@ -190,7 +203,10 @@ const isProcessing = computed(() => atmStore.isPayingInvoice || atmStore.isReque
|
|||
<div class="flex min-h-0 flex-1 flex-col">
|
||||
<!-- Header -->
|
||||
<header class="flex items-center bg-black/30 px-4 pb-3 pt-12 sm:px-8 sm:py-4">
|
||||
<Button variant="ghost" class="text-muted-foreground" @click="cancel">← Cancel</Button>
|
||||
<Button v-if="showCancelButton" variant="ghost" class="text-muted-foreground" @click="cancel">
|
||||
← Cancel
|
||||
</Button>
|
||||
<div v-else class="w-20"></div>
|
||||
<h2 class="flex-1 text-center text-lg font-semibold sm:text-xl">Buy Bitcoin</h2>
|
||||
<div class="w-20"></div>
|
||||
</header>
|
||||
|
|
@ -312,8 +328,8 @@ const isProcessing = computed(() => atmStore.isPayingInvoice || atmStore.isReque
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Scan with selector -->
|
||||
<div class="text-center">
|
||||
<!-- Scan with selector (web-ui only — kiosk users just scan) -->
|
||||
<div v-if="!isElectron" class="text-center">
|
||||
<p class="text-xs text-muted-foreground mb-2">Scan with</p>
|
||||
<div class="flex flex-wrap gap-2 justify-center">
|
||||
<Button
|
||||
|
|
@ -373,8 +389,14 @@ const isProcessing = computed(() => atmStore.isPayingInvoice || atmStore.isReque
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mode label + truncated URI -->
|
||||
<div class="text-center space-y-1">
|
||||
<!-- Waiting for payment indicator -->
|
||||
<div v-if="currentQrValue" class="flex items-center justify-center gap-2">
|
||||
<span class="animate-hourglass text-lg">⏳</span>
|
||||
<p class="text-sm text-muted-foreground">Waiting for payment...</p>
|
||||
</div>
|
||||
|
||||
<!-- Mode label + truncated URI (web-ui only) -->
|
||||
<div v-if="!isElectron" class="text-center space-y-1">
|
||||
<p class="text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
||||
{{
|
||||
qrMode === 'unified'
|
||||
|
|
@ -395,8 +417,8 @@ const isProcessing = computed(() => atmStore.isPayingInvoice || atmStore.isReque
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alternative: Manual Options (collapsed) -->
|
||||
<details class="rounded-lg bg-white/5 p-3">
|
||||
<!-- Alternative: Manual Options (web-ui only, no keyboard on kiosk) -->
|
||||
<details v-if="!isElectron" class="rounded-lg bg-white/5 p-3">
|
||||
<summary class="cursor-pointer text-sm text-muted-foreground">
|
||||
Alternative: Manual payment options
|
||||
</summary>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import QRCode from '@/components/QRCode.vue'
|
|||
|
||||
const router = useRouter()
|
||||
const atmStore = useAtmStore()
|
||||
const isElectron = typeof window !== 'undefined' && window.electronAPI !== undefined
|
||||
|
||||
// Copy invoice functionality
|
||||
const copyButtonText = ref('Copy Invoice')
|
||||
|
|
@ -254,8 +255,8 @@ function formatFiat(cents: number): string {
|
|||
<p class="text-center text-muted-foreground">Waiting for payment...</p>
|
||||
</div>
|
||||
|
||||
<!-- Invoice info with copy button -->
|
||||
<div v-if="context?.invoice" class="rounded-lg bg-white/5 p-3">
|
||||
<!-- Invoice info with copy button (web-ui only) -->
|
||||
<div v-if="context?.invoice && !isElectron" class="rounded-lg bg-white/5 p-3">
|
||||
<p class="mb-2 truncate text-center font-mono text-xs text-muted-foreground">
|
||||
{{ context.invoice.slice(0, 50) }}...
|
||||
</p>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue