isaacclad
7c20cf705a
Deploy Ladill POS / deploy (push) Successful in 1m16s
Use operator-facing copy and merchant email so Card/MoMo checkout is for staff handing the screen to a customer, not self-serve buyers.
104 lines
5.1 KiB
PHP
104 lines
5.1 KiB
PHP
{{--
|
|
POS checkout shell for till operators: bottomsheet on mobile, modal on desktop.
|
|
Audience is staff at the register — not the end customer browsing alone.
|
|
Requires Alpine ancestor with: showSheet (bool), checkoutUrl (string).
|
|
--}}
|
|
@php
|
|
$sheetTitle = $sheetTitle ?? 'Customer payment';
|
|
$sheetSubtitle = $sheetSubtitle ?? 'Hand this screen to the customer for card or mobile money.';
|
|
$sheetAria = $sheetAria ?? $sheetTitle;
|
|
$iframeTitle = $iframeTitle ?? 'Customer card or mobile money checkout';
|
|
@endphp
|
|
<template x-teleport="body">
|
|
<div x-show="showSheet"
|
|
x-cloak
|
|
class="fixed inset-0 z-[9999] flex items-end justify-center md:items-center md:p-6"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label="{{ $sheetAria }}">
|
|
|
|
<div class="absolute inset-0 bg-black/60"
|
|
x-show="showSheet"
|
|
x-transition:enter="transition-opacity duration-300"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition-opacity duration-200"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
@click="showSheet = false">
|
|
</div>
|
|
|
|
{{-- Mobile bottomsheet --}}
|
|
<div class="relative flex w-full flex-col overflow-hidden rounded-t-2xl bg-white md:hidden"
|
|
style="height:90dvh"
|
|
x-show="showSheet"
|
|
x-transition:enter="transition-transform duration-300 ease-out"
|
|
x-transition:enter-start="translate-y-full"
|
|
x-transition:enter-end="translate-y-0"
|
|
x-transition:leave="transition-transform duration-200 ease-in"
|
|
x-transition:leave-start="translate-y-0"
|
|
x-transition:leave-end="translate-y-full"
|
|
@click.stop>
|
|
<div class="relative flex shrink-0 flex-col gap-0.5 border-b border-slate-100 px-4 pb-3 pt-5">
|
|
<div class="absolute left-1/2 top-2 h-1 w-10 -translate-x-1/2 rounded-full bg-slate-200"></div>
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold text-slate-800">{{ $sheetTitle }}</p>
|
|
@if ($sheetSubtitle)
|
|
<p class="mt-0.5 text-xs leading-snug text-slate-500">{{ $sheetSubtitle }}</p>
|
|
@endif
|
|
</div>
|
|
<button type="button" @click="showSheet = false"
|
|
class="shrink-0 rounded-full p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700"
|
|
aria-label="Close payment sheet">
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<iframe :src="showSheet ? checkoutUrl : ''"
|
|
class="h-full w-full flex-1 border-0"
|
|
allow="payment *"
|
|
title="{{ $iframeTitle }}"></iframe>
|
|
<p class="shrink-0 border-t border-slate-100 bg-slate-50 px-4 py-2 text-center text-[11px] text-slate-500">
|
|
Stay on this screen until the customer finishes. Closing only hides the sheet.
|
|
</p>
|
|
</div>
|
|
|
|
{{-- Desktop modal --}}
|
|
<div class="relative hidden w-full max-w-lg overflow-hidden rounded-2xl bg-white shadow-2xl md:flex md:h-[min(720px,85vh)] md:flex-col"
|
|
x-show="showSheet"
|
|
x-transition:enter="transition ease-out duration-200"
|
|
x-transition:enter-start="opacity-0 scale-95"
|
|
x-transition:enter-end="opacity-100 scale-100"
|
|
x-transition:leave="transition ease-in duration-150"
|
|
x-transition:leave-start="opacity-100 scale-100"
|
|
x-transition:leave-end="opacity-0 scale-95"
|
|
@click.stop>
|
|
<div class="flex shrink-0 items-start justify-between gap-3 border-b border-slate-100 px-5 py-3">
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold text-slate-800">{{ $sheetTitle }}</p>
|
|
@if ($sheetSubtitle)
|
|
<p class="mt-0.5 text-xs leading-snug text-slate-500">{{ $sheetSubtitle }}</p>
|
|
@endif
|
|
</div>
|
|
<button type="button" @click="showSheet = false"
|
|
class="shrink-0 rounded-full p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700"
|
|
aria-label="Close payment sheet">
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<iframe :src="showSheet ? checkoutUrl : ''"
|
|
class="min-h-0 w-full flex-1 border-0"
|
|
allow="payment *"
|
|
title="{{ $iframeTitle }}"></iframe>
|
|
<p class="shrink-0 border-t border-slate-100 bg-slate-50 px-5 py-2 text-center text-[11px] text-slate-500">
|
|
Stay on this screen until the customer finishes. Closing only hides the sheet.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|