isaaccladandCursor
2991d71ea0
Deploy Ladill Merchant / deploy (push) Successful in 26s
Storefront QR cards, slug preview, payment callbacks, and document downloads now use LadillLink so displayed and encoded links match ladl.link. Co-authored-by: Cursor <cursoragent@cursor.com>
180 lines
13 KiB
PHP
180 lines
13 KiB
PHP
<x-user-layout>
|
|
<x-slot name="title">{{ $qrCode->label }}</x-slot>
|
|
@php
|
|
$content = $qrCode->content();
|
|
$publicUrl = \App\Support\LadillLink::url($qrCode->short_code);
|
|
$typeLabel = \App\Support\Qr\QrTypeCatalog::label($qrCode->type);
|
|
@endphp
|
|
|
|
<div class="mx-auto max-w-5xl space-y-6" x-data="{ type: @js($qrCode->type) }">
|
|
<div class="flex flex-wrap items-start justify-between gap-4">
|
|
<div>
|
|
<a href="{{ route('merchant.storefronts.index') }}" class="inline-flex items-center gap-1 text-sm text-slate-500 hover:text-slate-700">
|
|
<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="M15.75 19.5 8.25 12l7.5-7.5"/></svg>
|
|
All storefronts
|
|
</a>
|
|
<h1 class="mt-2 text-xl font-semibold text-slate-900">{{ $qrCode->label }}</h1>
|
|
<p class="mt-1 inline-flex items-center gap-2 text-sm text-slate-500">
|
|
<span class="rounded-full bg-indigo-50 px-2 py-0.5 text-xs font-semibold text-indigo-700">{{ $typeLabel }}</span>
|
|
@if($qrCode->is_active)
|
|
<span class="text-emerald-600">● Live</span>
|
|
@else
|
|
<span class="text-slate-400">● Inactive</span>
|
|
@endif
|
|
</p>
|
|
</div>
|
|
<a href="{{ $publicUrl }}" target="_blank" rel="noopener"
|
|
class="inline-flex items-center gap-1.5 rounded-xl border border-slate-200 bg-white px-3.5 py-2 text-sm font-semibold text-slate-700 shadow-sm hover:bg-slate-50">
|
|
View live
|
|
<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="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>
|
|
</a>
|
|
</div>
|
|
|
|
@if(session('success'))
|
|
<div class="rounded-xl border border-emerald-100 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">{{ session('success') }}</div>
|
|
@endif
|
|
@if(session('error'))
|
|
<div class="rounded-xl border border-red-100 bg-red-50 px-4 py-3 text-sm text-red-700">{{ session('error') }}</div>
|
|
@endif
|
|
@if($errors->any())
|
|
<div class="rounded-xl border border-red-100 bg-red-50 px-4 py-3 text-sm text-red-700">
|
|
<ul class="list-inside list-disc space-y-0.5">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="grid gap-6 lg:grid-cols-[320px_1fr]">
|
|
{{-- QR + sharing --}}
|
|
<div class="space-y-4 lg:sticky lg:top-6 lg:self-start">
|
|
<div class="rounded-2xl border border-slate-200 bg-white p-5 text-center">
|
|
@if($previewDataUri)
|
|
<img src="{{ $previewDataUri }}" alt="QR code" class="mx-auto h-44 w-44">
|
|
@endif
|
|
<p class="mt-3 break-all text-xs text-slate-400">{{ $publicUrl }}</p>
|
|
<div class="mt-4 flex flex-wrap justify-center gap-2">
|
|
@foreach(['png' => 'PNG', 'svg' => 'SVG', 'pdf' => 'PDF'] as $fmt => $flabel)
|
|
<a href="{{ route('merchant.storefronts.download', [$qrCode, $fmt]) }}"
|
|
class="rounded-lg border border-slate-200 px-3 py-1.5 text-xs font-semibold text-slate-600 hover:bg-slate-50">{{ $flabel }}</a>
|
|
@endforeach
|
|
<button type="button"
|
|
onclick="ladillShareQr(this)"
|
|
data-url="{{ $publicUrl }}"
|
|
data-title="{{ $qrCode->label }}"
|
|
data-png="{{ route('merchant.storefronts.download', [$qrCode, 'png']) }}"
|
|
class="inline-flex items-center gap-1.5 rounded-lg border border-slate-200 px-3 py-1.5 text-xs font-semibold text-slate-600 hover:bg-slate-50">
|
|
<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z"/></svg>
|
|
<span data-label>Share</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@once
|
|
<script>
|
|
window.ladillShareQr = window.ladillShareQr || async function (btn) {
|
|
const url = btn.dataset.url;
|
|
const title = btn.dataset.title || 'QR code';
|
|
const png = btn.dataset.png;
|
|
const label = btn.querySelector('[data-label]') || btn;
|
|
try {
|
|
if (png && navigator.canShare) {
|
|
try {
|
|
const blob = await (await fetch(png)).blob();
|
|
const file = new File([blob], 'qr-code.png', { type: blob.type || 'image/png' });
|
|
if (navigator.canShare({ files: [file] })) {
|
|
await navigator.share({ files: [file], title, text: url });
|
|
return;
|
|
}
|
|
} catch (e) { /* fall through */ }
|
|
}
|
|
if (navigator.share) { await navigator.share({ title, text: title, url }); return; }
|
|
await navigator.clipboard.writeText(url);
|
|
const original = label.textContent;
|
|
label.textContent = 'Link copied';
|
|
setTimeout(() => { label.textContent = original; }, 1500);
|
|
} catch (e) { /* user cancelled */ }
|
|
};
|
|
</script>
|
|
@endonce
|
|
|
|
@if(!empty($customDomainsEnabled))
|
|
<div class="rounded-2xl border border-slate-200 bg-white p-5">
|
|
<h3 class="text-sm font-semibold text-slate-900">Custom domain</h3>
|
|
<p class="mt-1 text-xs text-slate-500">Serve this storefront on your own domain with automatic SSL. Optional — your <span class="break-all">{{ $publicUrl }}</span> link always works.</p>
|
|
|
|
@forelse($customDomains as $cd)
|
|
<div class="mt-3 rounded-xl border border-slate-200 p-3">
|
|
<div class="flex items-center justify-between gap-2">
|
|
<span class="break-all text-sm font-medium text-slate-900">{{ $cd->host }}</span>
|
|
@php $live = $cd->status === 'active' && $cd->ssl_status === 'active'; @endphp
|
|
<span class="shrink-0 rounded-full px-2 py-0.5 text-[11px] font-medium {{ $live ? 'bg-emerald-50 text-emerald-700' : ($cd->status === 'failed' ? 'bg-red-50 text-red-700' : 'bg-amber-50 text-amber-700') }}">
|
|
{{ $live ? 'Live (SSL)' : ($cd->status === 'failed' ? 'Failed' : 'Pending') }}
|
|
</span>
|
|
</div>
|
|
@unless($live)
|
|
<p class="mt-2 text-xs text-slate-500">Point an <strong>A record</strong> for <strong>{{ $cd->host }}</strong>@if($cd->include_www) and <strong>www.{{ $cd->host }}</strong>@endif to <strong>{{ $customDomainServerIp }}</strong>, then verify.</p>
|
|
@if($cd->last_error)<p class="mt-1 text-xs text-red-600">{{ $cd->last_error }}</p>@endif
|
|
@endunless
|
|
<div class="mt-2 flex items-center gap-3">
|
|
@unless($live)
|
|
<form method="post" action="{{ route('merchant.custom-domain.verify', $cd) }}">
|
|
@csrf
|
|
<button class="text-xs font-semibold text-indigo-600 hover:text-indigo-500">Verify & enable SSL</button>
|
|
</form>
|
|
@endunless
|
|
<form method="post" action="{{ route('merchant.custom-domain.destroy', $cd) }}" onsubmit="return confirm('Remove this custom domain?');">
|
|
@csrf @method('DELETE')
|
|
<button class="text-xs font-medium text-slate-500 hover:text-red-600">Remove</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<form method="post" action="{{ route('merchant.custom-domain.store', $qrCode) }}" class="mt-3 flex items-end gap-2">
|
|
@csrf
|
|
<div class="flex-1">
|
|
<label class="block text-xs text-slate-500">Your domain</label>
|
|
<input type="text" name="host" placeholder="brand.com" required
|
|
class="mt-1 w-full rounded-xl border-slate-200 text-sm focus:border-indigo-500 focus:ring-indigo-500">
|
|
</div>
|
|
<button class="rounded-xl bg-slate-900 px-3.5 py-2 text-sm font-semibold text-white hover:bg-slate-800">Add</button>
|
|
</form>
|
|
@error('host')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
|
|
@endforelse
|
|
</div>
|
|
@endif
|
|
|
|
<form method="post" action="{{ route('merchant.storefronts.destroy', $qrCode) }}"
|
|
onsubmit="return confirm('Delete this storefront? This cannot be undone.');">
|
|
@csrf @method('DELETE')
|
|
<button type="submit" class="w-full rounded-xl border border-red-200 bg-white px-3.5 py-2 text-sm font-semibold text-red-600 hover:bg-red-50">Delete storefront</button>
|
|
</form>
|
|
</div>
|
|
|
|
{{-- Edit form --}}
|
|
<form method="post" action="{{ route('merchant.storefronts.update', $qrCode) }}" enctype="multipart/form-data" class="space-y-5 rounded-2xl border border-slate-200 bg-white p-6">
|
|
@csrf @method('PATCH')
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-slate-700">Dashboard label</label>
|
|
<input type="text" name="label" value="{{ old('label', $qrCode->label) }}" required maxlength="120"
|
|
class="mt-1 w-full rounded-xl border-slate-200 text-sm focus:border-indigo-500 focus:ring-indigo-500">
|
|
</div>
|
|
|
|
<label class="flex cursor-pointer items-center justify-between rounded-xl border border-slate-200 bg-white px-4 py-3 shadow-sm">
|
|
<div>
|
|
<p class="text-sm font-semibold text-slate-900">Storefront live</p>
|
|
<p class="mt-0.5 text-xs text-slate-500">Turn off to take the public page offline without deleting it.</p>
|
|
</div>
|
|
<div class="relative ml-4 shrink-0">
|
|
<input type="hidden" name="is_active" value="0">
|
|
<input type="checkbox" name="is_active" value="1" class="sr-only peer" @checked(old('is_active', $qrCode->is_active))>
|
|
<div class="h-6 w-11 rounded-full bg-slate-200 transition-colors duration-200 peer-checked:bg-indigo-600"></div>
|
|
<div class="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform duration-200 peer-checked:translate-x-5"></div>
|
|
</div>
|
|
</label>
|
|
|
|
@include('merchant.storefronts.partials.editor-fields', ['content' => $content, 'catalog' => $catalog ?? []])
|
|
|
|
<button type="submit" class="btn-primary w-full">Save changes</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</x-user-layout>
|