From cdd675d247491450ff525de65d0f119951d06b3a Mon Sep 17 00:00:00 2001
From: isaacclad <sense.corporate@gmail.com>
Date: Sun, 28 Jun 2026 21:36:14 +0000
Subject: [PATCH] Restore tap-to-begin kiosk welcome and add visitor/staff
 choice step.

After tapping begin, users pick Visitor or Staff icon cards before entering the respective check-in or sign-in flows.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 resources/js/kiosk-flow.js                    | 15 +++++-
 .../views/frontdesk/kiosk/index.blade.php     | 46 ++++++++++++++++---
 tests/Feature/FrontdeskPhase7Test.php         |  2 +-
 3 files changed, 54 insertions(+), 9 deletions(-)

diff --git a/resources/js/kiosk-flow.js b/resources/js/kiosk-flow.js
index 0733def..f3f0635 100644
--- a/resources/js/kiosk-flow.js
+++ b/resources/js/kiosk-flow.js
@@ -177,12 +177,14 @@ export function registerKioskFlow(Alpine) {
 
             goBack() {
                 if (this.step === 'type') {
-                    this.step = 'welcome';
+                    this.step = this.employeeKioskEnabled ? 'choose' : 'welcome';
                     this.typeIndex = 0;
                 } else if (this.step === 'details') {
                     this.prevFormStep();
-                } else if (this.step === 'staff_identify') {
+                } else if (this.step === 'choose') {
                     this.step = 'welcome';
+                } else if (this.step === 'staff_identify') {
+                    this.step = 'choose';
                 } else if (this.step === 'staff_actions') {
                     this.step = 'staff_identify';
                 } else if (this.step === 'staff_step_out') {
@@ -222,6 +224,15 @@ export function registerKioskFlow(Alpine) {
                 this.resetTimer();
             },
 
+            beginKiosk() {
+                if (this.employeeKioskEnabled) {
+                    this.step = 'choose';
+                } else {
+                    this.startVisitorFlow();
+                }
+                this.resetTimer();
+            },
+
             startVisitorFlow() {
                 this.step = 'type';
                 this.resetTimer();
diff --git a/resources/views/frontdesk/kiosk/index.blade.php b/resources/views/frontdesk/kiosk/index.blade.php
index fa53aaf..471b1e0 100644
--- a/resources/views/frontdesk/kiosk/index.blade.php
+++ b/resources/views/frontdesk/kiosk/index.blade.php
@@ -43,7 +43,7 @@
     @include('frontdesk.partials.kiosk-brand')
 
     <div class="relative mx-auto flex min-h-screen max-w-3xl flex-col pt-20">
-        {{-- Welcome --}}
+        {{-- Welcome: tap to begin --}}
         <template x-if="step === 'welcome'">
             <div class="flex min-h-[calc(100vh-5rem)] flex-col items-center justify-center px-6 py-12 text-center">
                 <div class="max-w-xl">
@@ -51,19 +51,53 @@
                     <h1 class="mt-3 text-4xl font-bold tracking-tight text-slate-900 sm:text-5xl">
                         Welcome to {{ $organization->name }}
                     </h1>
+                    <p class="mt-4 text-lg text-slate-500">Visitor check-in &amp; staff sign-in</p>
                 </div>
 
-                <div class="mt-16 grid w-full max-w-lg gap-4" :class="employeeKioskEnabled ? 'sm:grid-cols-2' : ''">
+                <button type="button"
+                        @click="beginKiosk()"
+                        class="kiosk-tap-btn btn-primary btn-primary-lg mt-16 w-full max-w-lg py-8 text-xl font-bold">
+                    Tap to begin
+                </button>
+            </div>
+        </template>
+
+        {{-- Choose: visitor or staff --}}
+        <template x-if="step === 'choose'">
+            <div class="relative flex min-h-[calc(100vh-5rem)] flex-col items-center justify-center px-6 py-12">
+                <div class="absolute left-6 top-8 z-10">
+                    @include('frontdesk.partials.kiosk-back')
+                </div>
+
+                <div class="max-w-xl text-center">
+                    <h2 class="text-2xl font-bold text-slate-900 sm:text-3xl">Who are you?</h2>
+                    <p class="mt-2 text-slate-500">Select an option to continue</p>
+                </div>
+
+                <div class="mt-12 grid w-full max-w-2xl gap-4 sm:grid-cols-2">
                     <button type="button"
                             @click="startVisitorFlow()"
-                            class="kiosk-tap-btn btn-primary btn-primary-lg w-full py-8 text-xl font-bold">
-                        I'm a visitor
+                            class="group flex flex-col items-center rounded-3xl border-2 border-slate-200 bg-white px-6 py-10 text-center shadow-sm transition hover:border-indigo-300 hover:shadow-md active:scale-[0.98]">
+                        <span class="flex h-16 w-16 items-center justify-center rounded-2xl bg-indigo-50 text-indigo-600 transition group-hover:bg-indigo-100">
+                            <svg class="h-9 w-9" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
+                            </svg>
+                        </span>
+                        <span class="mt-5 text-xl font-bold text-slate-900">Visitor</span>
+                        <span class="mt-1 text-sm text-slate-500">Check in as a guest</span>
                     </button>
+
                     <template x-if="employeeKioskEnabled">
                         <button type="button"
                                 @click="startStaffFlow()"
-                                class="w-full rounded-3xl border-2 border-slate-200 bg-white py-8 text-xl font-bold text-slate-900 shadow-sm transition hover:border-indigo-300 hover:shadow-md active:scale-[0.98]">
-                            I'm an employee
+                                class="group flex flex-col items-center rounded-3xl border-2 border-slate-200 bg-white px-6 py-10 text-center shadow-sm transition hover:border-indigo-300 hover:shadow-md active:scale-[0.98]">
+                            <span class="flex h-16 w-16 items-center justify-center rounded-2xl bg-violet-50 text-violet-600 transition group-hover:bg-violet-100">
+                                <svg class="h-9 w-9" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z" />
+                                </svg>
+                            </span>
+                            <span class="mt-5 text-xl font-bold text-slate-900">Staff</span>
+                            <span class="mt-1 text-sm text-slate-500">Sign in or step out</span>
                         </button>
                     </template>
                 </div>
diff --git a/tests/Feature/FrontdeskPhase7Test.php b/tests/Feature/FrontdeskPhase7Test.php
index 1e78ceb..fbdb1de 100644
--- a/tests/Feature/FrontdeskPhase7Test.php
+++ b/tests/Feature/FrontdeskPhase7Test.php
@@ -113,7 +113,7 @@ class FrontdeskPhase7Test extends TestCase
 
         $this->get(route('frontdesk.kiosk.device', $device->device_token))
             ->assertOk()
-            ->assertSee('Visitor Check-in')
+            ->assertSee('Visitor check-in')
             ->assertSee('Welcome to')
             ->assertSee('Tap to begin');