From 05ca584016cfc327073dea835059f989b1c0c39d Mon Sep 17 00:00:00 2001
From: isaacclad <sense.corporate@gmail.com>
Date: Sun, 7 Jun 2026 20:02:42 +0000
Subject: [PATCH] Move payment QR download and share actions back to the page
 header.

Remove the till/counter helper copy and drop duplicate download buttons from the preview card.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../partials/header-actions.blade.php         | 37 ++++++++++++++++++
 .../views/mini/payment-qrs/show.blade.php     | 39 +++++++++++--------
 2 files changed, 59 insertions(+), 17 deletions(-)
 create mode 100644 resources/views/mini/payment-qrs/partials/header-actions.blade.php

diff --git a/resources/views/mini/payment-qrs/partials/header-actions.blade.php b/resources/views/mini/payment-qrs/partials/header-actions.blade.php
new file mode 100644
index 0000000..d03c0a8
--- /dev/null
+++ b/resources/views/mini/payment-qrs/partials/header-actions.blade.php
@@ -0,0 +1,37 @@
+@php
+    $shareUrl  = $qrCode->publicUrl();
+    $shareEnc  = urlencode($shareUrl);
+    $shareText = urlencode($qrCode->label . ' — pay with QR');
+@endphp
+<div class="flex flex-wrap items-center gap-2">
+    <a href="{{ route('mini.payment-qrs.download', [$qrCode, 'png']) }}"
+       class="rounded-lg border border-slate-200 px-3 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-50">PNG</a>
+    <a href="{{ route('mini.payment-qrs.download', [$qrCode, 'svg']) }}"
+       class="rounded-lg border border-slate-200 px-3 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-50">SVG</a>
+    <a href="{{ route('mini.payment-qrs.download', [$qrCode, 'pdf']) }}"
+       class="rounded-lg border border-slate-200 px-3 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-50">PDF</a>
+    <div class="relative" x-data="{ open: false, copied: false }" @click.outside="open = false">
+        <button type="button"
+                @click="if(navigator.share){navigator.share({title:@js($qrCode->label),url:@js($shareUrl)}).catch(()=>{open=!open})}else{open=!open}"
+                class="rounded-lg border border-slate-200 px-3 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-50">
+            Share
+        </button>
+        <div x-show="open" x-cloak
+             x-transition:enter="transition ease-out duration-100"
+             x-transition:enter-start="opacity-0 scale-95"
+             x-transition:enter-end="opacity-100 scale-100"
+             class="absolute right-0 z-50 mt-2 w-52 origin-top-right rounded-xl border border-slate-200 bg-white p-1.5 shadow-xl">
+            <a href="https://wa.me/?text={{ $shareText }}%20{{ $shareEnc }}" target="_blank" rel="noopener"
+               @click="open = false"
+               class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-slate-700 transition hover:bg-slate-50">
+                WhatsApp
+            </a>
+            <button type="button"
+                    @click="navigator.clipboard.writeText(@js($shareUrl)).then(() => { copied = true; setTimeout(() => { copied = false; open = false }, 1500) })"
+                    class="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition hover:bg-slate-50"
+                    :class="copied ? 'text-emerald-600' : 'text-slate-700'">
+                <span x-text="copied ? 'Copied!' : 'Copy link'">Copy link</span>
+            </button>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/mini/payment-qrs/show.blade.php b/resources/views/mini/payment-qrs/show.blade.php
index 5eb5d5a..b7447fd 100644
--- a/resources/views/mini/payment-qrs/show.blade.php
+++ b/resources/views/mini/payment-qrs/show.blade.php
@@ -2,22 +2,28 @@
     <x-slot name="title">{{ $qrCode->label }}</x-slot>
     @php $c = $qrCode->content(); @endphp
     <div class="mx-auto max-w-6xl space-y-6">
-        <div class="flex items-center gap-3 py-1 lg:hidden">
-            <a href="{{ route('mini.payment-qrs.index') }}"
-               class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-500 shadow-sm transition hover:text-slate-900">
-                <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
-                </svg>
-            </a>
-            <img src="{{ asset('images/logo/ladillmini-logo.svg') }}?v={{ @filemtime(public_path('images/logo/ladillmini-logo.svg')) ?: '1' }}"
-                 alt="Ladill Mini" class="h-5 w-auto shrink-0">
-            <span class="min-w-0 flex-1 truncate text-sm font-semibold text-slate-900">{{ $qrCode->label }}</span>
-        </div>
+        <div class="flex flex-wrap items-start justify-between gap-4">
+            <div class="min-w-0 flex-1">
+                <div class="flex items-center gap-3 py-1 lg:hidden">
+                    <a href="{{ route('mini.payment-qrs.index') }}"
+                       class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-500 shadow-sm transition hover:text-slate-900">
+                        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
+                        </svg>
+                    </a>
+                    <img src="{{ asset('images/logo/ladillmini-logo.svg') }}?v={{ @filemtime(public_path('images/logo/ladillmini-logo.svg')) ?: '1' }}"
+                         alt="Ladill Mini" class="h-5 w-auto shrink-0">
+                    <span class="min-w-0 flex-1 truncate text-sm font-semibold text-slate-900">{{ $qrCode->label }}</span>
+                </div>
 
-        <div class="hidden lg:block">
-            <a href="{{ route('mini.payment-qrs.index') }}" class="text-sm text-slate-500 hover:text-slate-700">← All payment QRs</a>
-            <h1 class="mt-2 text-xl font-semibold text-slate-900">{{ $qrCode->label }}</h1>
-            <p class="mt-1 text-sm text-slate-500">{{ $c['business_name'] ?? '' }}@if(!empty($c['branch_label'])) · {{ $c['branch_label'] }}@endif</p>
+                <div class="hidden lg:block">
+                    <a href="{{ route('mini.payment-qrs.index') }}" class="text-sm text-slate-500 hover:text-slate-700">← All payment QRs</a>
+                    <h1 class="mt-2 text-xl font-semibold text-slate-900">{{ $qrCode->label }}</h1>
+                    <p class="mt-1 text-sm text-slate-500">{{ $c['business_name'] ?? '' }}@if(!empty($c['branch_label'])) · {{ $c['branch_label'] }}@endif</p>
+                </div>
+            </div>
+
+            @include('mini.payment-qrs.partials.header-actions', ['qrCode' => $qrCode])
         </div>
 
         @if(session('success'))
@@ -29,10 +35,9 @@
                 @include('mini.payment-qrs.partials.preview-card', [
                     'qrCode' => $qrCode,
                     'previewDataUri' => $previewDataUri,
-                    'showDownloads' => true,
+                    'showDownloads' => false,
                 ])
                 <p class="mt-4 break-all text-center text-sm text-indigo-600">{{ $qrCode->publicUrl() }}</p>
-                <p class="mt-2 text-center text-xs text-slate-500">Standard black-and-white QR — ready to print at your till or counter.</p>
             </div>
 
             <form method="post" action="{{ route('mini.payment-qrs.update', $qrCode) }}" enctype="multipart/form-data" class="space-y-4 rounded-2xl border border-slate-200 bg-white p-6">