Add wallet balance widget to the profile menu (after Billing)

Wallet balance peek rendered as a menu row directly under Billing, backed by a /wallet/balance endpoint (BillingClient) and guarded by Route::has. Also opens Afia via a direct window event for reliability. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-23 12:26:10 +00:00
parent ec48ab6b33
commit d6b4a9c853
13 changed files with 200 additions and 7 deletions
@@ -10,7 +10,7 @@
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
    @vite(['resources/css/app.css', 'resources/js/app.js'])
 </head>
-<body class="h-full font-sans antialiased bg-slate-100" x-data="{ sidebarOpen: false }">
+<body class="h-full font-sans antialiased bg-slate-100" x-data="{ sidebarOpen: false }" data-ladill-search-url="{{ route('give.search') }}">
    <div class="min-h-screen max-lg:min-h-dvh">
        <div x-show="sidebarOpen" x-cloak class="fixed inset-0 z-30 bg-black/50 lg:hidden" @click="sidebarOpen = false"></div>
        <aside x-cloak class="fixed inset-y-0 left-0 z-40 w-64 transform transition-transform lg:translate-x-0"
@@ -8,7 +8,7 @@
            @if ($handler === 'openAfia')
                @click="openAfia()"
            @else
-                @click="$dispatch('afia-open')"
+                @click="window.dispatchEvent(new CustomEvent('afia-open'))"
            @endif
            @class([
                'inline-flex shrink-0 items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-indigo-700 via-blue-600 to-emerald-400 text-sm font-semibold text-white shadow-sm transition hover:opacity-95',
@@ -14,7 +14,7 @@
        <div class="px-4 pb-3">
            <div class="relative">
                <svg class="pointer-events-none absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg>
-                <input x-ref="input"
+                <input data-ladill-search-input  x-ref="input"
                       type="text"
                       x-model="query"
                       @focus="onFocus()"
@@ -34,7 +34,7 @@
            <h1 class="text-2xl font-semibold text-slate-900">{{ $heading }}</h1>
            <div class="relative mt-3">
                <svg class="pointer-events-none absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg>
-                <input x-ref="input"
+                <input data-ladill-search-input  x-ref="input"
                       type="text"
                       x-model="query"
                       @focus="onFocus()"
@@ -123,7 +123,7 @@
            </button>

                        <div x-show="profileOpen" x-cloak x-transition
-                 class="absolute right-0 z-50 mt-2 w-56 rounded-xl border border-slate-200 bg-white shadow-lg">
+                 class="absolute right-0 z-50 mt-2 w-64 rounded-xl border border-slate-200 bg-white shadow-lg">
                @include('partials.user-profile-menu', [
                    'items' => \App\Support\UserProfileMenu::items($user),
                ])
@@ -51,7 +51,7 @@
        <div class="relative hidden w-full max-w-md lg:block" x-data="topbarSearch()" @click.outside="open = false" @keydown.escape.window="open = false">
            <div class="relative">
                <svg class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg>
-                <input type="text"
+                <input data-ladill-search-input  type="text"
                       x-model="query"
                       @focus="onFocus()"
                       @input.debounce.200ms="search()"
@@ -255,7 +255,7 @@
            </button>

                            <div x-show="profileOpen" x-cloak x-transition @click.outside="profileOpen = false"
-                     class="absolute right-0 z-50 mt-2 w-56 rounded-xl border border-slate-200 bg-white shadow-lg">
+                     class="absolute right-0 z-50 mt-2 w-64 rounded-xl border border-slate-200 bg-white shadow-lg">
                    @include('partials.user-profile-menu', [
                        'items' => \App\Support\UserProfileMenu::items($user),
                    ])
@@ -53,6 +53,8 @@
               @if ($onNavigate) @click="{{ $onNavigate }}" @endif>
                {{ $item['label'] }}
            </a>
+        @elseif (($item['type'] ?? '') === 'wallet')
+            @includeIf('partials.wallet-widget')
        @elseif (($item['type'] ?? '') === 'logout')
            @if ($variant !== 'sheet')
                <div class="{{ $dividerClass }}"></div>
@@ -0,0 +1,23 @@
+{{-- Wallet balance peek (links to the account wallet on account.ladill.com). --}}
+@php
+    $balanceRoute = (string) config('billing.wallet_balance_route', 'wallet.balance');
+    $balanceUrl = \Illuminate\Support\Facades\Route::has($balanceRoute) ? route($balanceRoute) : null;
+@endphp
+@if ($balanceUrl)
+<a href="{{ ladill_account_url('/wallet') }}"
+   x-data="walletWidget({ url: {{ \Illuminate\Support\Js::from($balanceUrl) }} })" x-init="load()"
+   class="mx-1 flex items-center justify-between gap-3 rounded-xl border border-slate-100 bg-gradient-to-r from-indigo-50 to-slate-50 px-3 py-2.5 transition hover:border-indigo-200 hover:from-indigo-100/70">
+    <span class="flex items-center gap-2.5 min-w-0">
+        <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-indigo-100 text-indigo-600">
+            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.6" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 1 3 7.5m18 4.5v3.75A2.25 2.25 0 0 1 18.75 18H5.25A2.25 2.25 0 0 1 3 15.75V7.5m18 4.5h-3.75a1.5 1.5 0 0 0 0 3H21M3 7.5A2.25 2.25 0 0 1 5.25 5.25h11.25A2.25 2.25 0 0 1 18.75 7.5"/>
+            </svg>
+        </span>
+        <span class="min-w-0">
+            <span class="block text-[11px] font-medium text-slate-500">Wallet balance</span>
+            <span class="block truncate text-sm font-semibold text-slate-900" x-text="display"></span>
+        </span>
+    </span>
+    <svg class="h-4 w-4 shrink-0 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m9 5 7 7-7 7"/></svg>
+</a>
+@endif