dwindown/dewemoji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement catalog CRUD overhaul, snapshot fallback activation, and billing/UX hardening

Browse Source
This commit is contained in:
Dwindi Ramadhana
2026-02-17 00:03:35 +07:00
parent e6aef31dd1
commit 2726b6c312
37 changed files with 2936 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
app/resources/views/dashboard/admin/catalog-form.blade.php Normal file
View File

@@ -0,0 +1,129 @@
@extends('dashboard.app')
@php
$isEdit = ($mode ?? 'create') === 'edit';
$formAction = $isEdit
? route('dashboard.admin.catalog.update', data_get($selected, 'emoji_id'))
: route('dashboard.admin.catalog.store');
$textareas = [
'aliases' => data_get($selected, 'aliases', []),
'shortcodes' => data_get($selected, 'shortcodes', []),
'alt_shortcodes' => data_get($selected, 'alt_shortcodes', []),
'keywords_en' => data_get($selected, 'keywords_en', []),
'keywords_id' => data_get($selected, 'keywords_id', []),
];
@endphp
@section('page_title', $isEdit ? 'Edit Emoji' : 'Create Emoji')
@section('page_subtitle', 'Edit/add emoji data in database. Publish frozen JSON from Catalog page after batch updates.')
@section('dashboard_content')
@if (session('status'))
<div class="mb-6 rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700 dark:border-emerald-500/30 dark:bg-emerald-500/15 dark:text-emerald-200">
{{ session('status') }}
</div>
@endif
@if (session('error'))
<div class="mb-6 rounded-2xl border border-red-300/40 bg-red-500/10 px-4 py-3 text-sm text-red-700 dark:text-red-200">
{{ session('error') }}
</div>
@endif
@if ($errors->any())
<div class="mb-6 rounded-2xl border border-amber-300/40 bg-amber-400/10 px-4 py-3 text-sm text-amber-700 dark:text-amber-200">
{{ $errors->first() }}
</div>
@endif
<div class="rounded-2xl glass-card p-5">
<form method="POST" action="{{ $formAction }}" class="grid gap-4">
@csrf
@if ($isEdit)
@method('PUT')
@endif
<div class="grid gap-4 md:grid-cols-3">
<label class="text-sm text-slate-700 dark:text-gray-300">
Emoji
<input name="emoji" value="{{ old('emoji', data_get($selected, 'emoji', '')) }}" class="mt-2 w-full rounded-xl border border-slate-200 dark:border-slate-700 px-3 py-2 text-slate-900 dark:text-slate-100 theme-surface bg-white dark:bg-slate-900 placeholder:text-slate-400 dark:placeholder:text-slate-500">
</label>
<label class="text-sm text-slate-700 dark:text-gray-300 md:col-span-2">
Slug
<input name="slug" value="{{ old('slug', data_get($selected, 'slug', '')) }}" required class="mt-2 w-full rounded-xl border border-slate-200 dark:border-slate-700 px-3 py-2 text-slate-900 dark:text-slate-100 theme-surface bg-white dark:bg-slate-900 placeholder:text-slate-400 dark:placeholder:text-slate-500">
</label>
</div>
<div class="grid gap-4 md:grid-cols-2">
<label class="text-sm text-slate-700 dark:text-gray-300">
Name
<input name="name" value="{{ old('name', data_get($selected, 'name', '')) }}" required class="mt-2 w-full rounded-xl border border-slate-200 dark:border-slate-700 px-3 py-2 text-slate-900 dark:text-slate-100 theme-surface bg-white dark:bg-slate-900 placeholder:text-slate-400 dark:placeholder:text-slate-500">
</label>
<label class="text-sm text-slate-700 dark:text-gray-300">
Category
<input name="category" value="{{ old('category', data_get($selected, 'category', '')) }}" class="mt-2 w-full rounded-xl border border-slate-200 dark:border-slate-700 px-3 py-2 text-slate-900 dark:text-slate-100 theme-surface bg-white dark:bg-slate-900 placeholder:text-slate-400 dark:placeholder:text-slate-500">
</label>
<label class="text-sm text-slate-700 dark:text-gray-300">
Subcategory
<input name="subcategory" value="{{ old('subcategory', data_get($selected, 'subcategory', '')) }}" class="mt-2 w-full rounded-xl border border-slate-200 dark:border-slate-700 px-3 py-2 text-slate-900 dark:text-slate-100 theme-surface bg-white dark:bg-slate-900 placeholder:text-slate-400 dark:placeholder:text-slate-500">
</label>
<label class="text-sm text-slate-700 dark:text-gray-300">
Unified
<input name="unified" value="{{ old('unified', data_get($selected, 'unified', '')) }}" class="mt-2 w-full rounded-xl border border-slate-200 dark:border-slate-700 px-3 py-2 text-slate-900 dark:text-slate-100 theme-surface bg-white dark:bg-slate-900 placeholder:text-slate-400 dark:placeholder:text-slate-500">
</label>
<label class="text-sm text-slate-700 dark:text-gray-300">
Version
<input name="version" value="{{ old('version', data_get($selected, 'version', '')) }}" class="mt-2 w-full rounded-xl border border-slate-200 dark:border-slate-700 px-3 py-2 text-slate-900 dark:text-slate-100 theme-surface bg-white dark:bg-slate-900 placeholder:text-slate-400 dark:placeholder:text-slate-500">
</label>
</div>
<div class="grid gap-4 md:grid-cols-2">
@foreach ($textareas as $field => $values)
<label class="text-sm text-slate-700 dark:text-gray-300">
{{ strtoupper(str_replace('_', ' ', $field)) }} (comma or line-separated)
<textarea name="{{ $field }}" rows="3" class="mt-2 w-full rounded-xl border border-slate-200 dark:border-slate-700 px-3 py-2 text-slate-900 dark:text-slate-100 theme-surface bg-white dark:bg-slate-900 placeholder:text-slate-400 dark:placeholder:text-slate-500">{{ old($field, is_array($values) ? implode(PHP_EOL, $values) : '') }}</textarea>
</label>
@endforeach
</div>
<label class="text-sm text-slate-700 dark:text-gray-300">
Description
<textarea name="description" rows="3" class="mt-2 w-full rounded-xl border border-slate-200 dark:border-slate-700 px-3 py-2 text-slate-900 dark:text-slate-100 theme-surface bg-white dark:bg-slate-900 placeholder:text-slate-400 dark:placeholder:text-slate-500">{{ old('description', data_get($selected, 'description', '')) }}</textarea>
</label>
<div class="grid gap-4 md:grid-cols-2">
<label class="text-sm text-slate-700 dark:text-gray-300">
Permalink
<input name="permalink" value="{{ old('permalink', data_get($selected, 'permalink', '')) }}" class="mt-2 w-full rounded-xl border border-slate-200 dark:border-slate-700 px-3 py-2 text-slate-900 dark:text-slate-100 theme-surface bg-white dark:bg-slate-900 placeholder:text-slate-400 dark:placeholder:text-slate-500">
</label>
<label class="text-sm text-slate-700 dark:text-gray-300">
Title
<input name="title" value="{{ old('title', data_get($selected, 'title', '')) }}" class="mt-2 w-full rounded-xl border border-slate-200 dark:border-slate-700 px-3 py-2 text-slate-900 dark:text-slate-100 theme-surface bg-white dark:bg-slate-900 placeholder:text-slate-400 dark:placeholder:text-slate-500">
</label>
<label class="text-sm text-slate-700 dark:text-gray-300">
Meta title
<input name="meta_title" value="{{ old('meta_title', data_get($selected, 'meta_title', '')) }}" class="mt-2 w-full rounded-xl border border-slate-200 dark:border-slate-700 px-3 py-2 text-slate-900 dark:text-slate-100 theme-surface bg-white dark:bg-slate-900 placeholder:text-slate-400 dark:placeholder:text-slate-500">
</label>
<label class="text-sm text-slate-700 dark:text-gray-300">
Meta description
<input name="meta_description" value="{{ old('meta_description', data_get($selected, 'meta_description', '')) }}" class="mt-2 w-full rounded-xl border border-slate-200 dark:border-slate-700 px-3 py-2 text-slate-900 dark:text-slate-100 theme-surface bg-white dark:bg-slate-900 placeholder:text-slate-400 dark:placeholder:text-slate-500">
</label>
</div>
<div class="flex flex-wrap items-center justify-between gap-3">
<label class="inline-flex items-center gap-2 text-sm text-slate-700 dark:text-gray-300">
<input type="hidden" name="supports_skin_tone" value="0">
<input type="checkbox" name="supports_skin_tone" value="1" @checked(old('supports_skin_tone', data_get($selected, 'supports_skin_tone', false)))>
<span>Supports skin tone</span>
</label>
<div class="flex items-center gap-2">
<a href="{{ route('dashboard.admin.catalog') }}" class="rounded-xl border border-slate-200 dark:border-slate-700 px-4 py-2 text-sm text-slate-700 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-white/5">Back to catalog</a>
<button class="rounded-xl bg-slate-900 dark:bg-white/10 border border-slate-900 dark:border-slate-700 px-4 py-2 text-sm font-semibold text-white force-white hover:opacity-90">
{{ $isEdit ? 'Update emoji' : 'Create emoji' }}
</button>
</div>
</div>
</form>
</div>
@endsection

175
app/resources/views/dashboard/admin/catalog.blade.php Normal file
View File

@@ -0,0 +1,175 @@
@extends('dashboard.app')
@section('page_title', 'Emoji Catalog')
@section('page_subtitle', 'Manage emojis in database, then publish one frozen JSON snapshot when ready.')
@section('dashboard_content')
@if (session('status'))
<div class="mb-6 rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700 dark:border-emerald-500/30 dark:bg-emerald-500/15 dark:text-emerald-200">
{{ session('status') }}
</div>
@endif
@if (session('error'))
<div class="mb-6 rounded-2xl border border-red-300/40 bg-red-500/10 px-4 py-3 text-sm text-red-700 dark:text-red-200">
{{ session('error') }}
</div>
@endif
<div class="grid gap-6 lg:grid-cols-3">
<div class="rounded-2xl glass-card p-5">
<div class="text-xs uppercase tracking-[0.2em] text-slate-500 dark:text-gray-400">Catalog rows</div>
<div class="mt-3 text-3xl font-semibold text-slate-900 dark:text-white">{{ number_format($totalRows ?? $items->total()) }}</div>
<div class="mt-2 text-sm text-slate-600 dark:text-gray-400">Read from `emojis` table</div>
@if (($filters['q'] ?? '') !== '')
<div class="mt-1 text-xs text-slate-500 dark:text-gray-500">Filtered result: {{ number_format($items->total()) }}</div>
@endif
</div>
<div class="rounded-2xl glass-card p-5">
<div class="text-xs uppercase tracking-[0.2em] text-slate-500 dark:text-gray-400">Active snapshot</div>
<div class="mt-3 text-2xl font-semibold text-slate-900 dark:text-white">{{ $activeVersion ?: 'None' }}</div>
<div class="mt-2 text-sm text-slate-600 dark:text-gray-400">{{ $activeVersion ? 'Published' : 'Not published yet' }}</div>
</div>
<div class="rounded-2xl glass-card p-5">
<div class="text-xs uppercase tracking-[0.2em] text-slate-500 dark:text-gray-400">Active file path</div>
<div class="mt-3 text-sm font-mono text-slate-800 dark:text-gray-200 break-all">{{ $activePath ?: config('dewemoji.data_path') }}</div>
<div class="mt-2 text-xs text-slate-500 dark:text-gray-500">Public search/API uses this dataset.</div>
</div>
</div>
<div class="mt-8 rounded-2xl glass-card p-5">
<div class="flex flex-wrap items-center justify-between gap-3">
<form method="GET" action="{{ route('dashboard.admin.catalog') }}" class="flex flex-wrap items-center gap-2">
<input
type="text"
name="q"
value="{{ $filters['q'] ?? '' }}"
placeholder="Search slug, name, category, subcategory"
class="w-72 max-w-full rounded-xl border border-slate-200 dark:border-slate-700 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 placeholder:text-slate-400 dark:placeholder:text-slate-500 bg-white dark:bg-slate-900"
>
<button class="rounded-xl border border-slate-200 dark:border-white/10 px-3 py-2 text-xs text-slate-700 dark:text-gray-200 hover:bg-slate-50 dark:hover:bg-white/5">Search</button>
<a href="{{ route('dashboard.admin.catalog') }}" class="rounded-xl border border-slate-200 dark:border-white/10 px-3 py-2 text-xs text-slate-700 dark:text-gray-200 hover:bg-slate-50 dark:hover:bg-white/5">Reset</a>
</form>
<div class="flex flex-wrap items-center gap-2">
<a href="{{ route('dashboard.admin.catalog.create') }}" class="rounded-xl bg-slate-900 dark:bg-white/10 border border-slate-900 dark:border-white/10 px-4 py-2 text-sm font-semibold text-white force-white dark:text-white hover:opacity-90">
Add Emoji
</a>
<form method="POST" action="{{ route('dashboard.admin.catalog.publish') }}">
@csrf
<button class="rounded-xl bg-brand-ocean px-4 py-2 text-sm font-semibold text-white force-white hover:opacity-90">Publish Frozen JSON</button>
</form>
<form method="POST" action="{{ route('dashboard.admin.catalog.import_json') }}">
@csrf
<button class="rounded-xl border border-slate-200 dark:border-white/10 px-3 py-2 text-xs text-slate-700 dark:text-gray-200 hover:bg-slate-50 dark:hover:bg-white/5">Import Current JSON (new only)</button>
</form>
</div>
</div>
<div class="mt-4 overflow-x-auto rounded-xl border border-slate-200 dark:border-white/10">
<table class="min-w-full text-sm">
<thead class="bg-slate-50 dark:bg-slate-900/80">
<tr class="text-left text-xs uppercase tracking-[0.16em] text-slate-500 dark:text-gray-400">
<th class="px-3 py-3">ID</th>
<th class="px-3 py-3">Emoji</th>
<th class="px-3 py-3">Slug</th>
<th class="px-3 py-3">Name</th>
<th class="px-3 py-3">Category</th>
<th class="px-3 py-3">Updated</th>
<th class="px-3 py-3 text-right">Actions</th>
</tr>
</thead>
<tbody>
@forelse ($items as $item)
<tr class="border-t border-slate-200 dark:border-white/10 text-slate-800 dark:text-gray-200">
<td class="px-3 py-3">#{{ $item->emoji_id }}</td>
<td class="px-3 py-3">{{ $item->emoji ?: '⬚' }}</td>
<td class="px-3 py-3 font-mono text-xs">{{ $item->slug }}</td>
<td class="px-3 py-3">{{ $item->name }}</td>
<td class="px-3 py-3 text-slate-600 dark:text-gray-400">{{ $item->category }}</td>
<td class="px-3 py-3 text-xs text-slate-500 dark:text-gray-400">{{ $item->updated_at ? \Illuminate\Support\Carbon::parse($item->updated_at)->format('Y-m-d H:i') : '—' }}</td>
<td class="px-3 py-3">
<div class="flex items-center justify-end gap-2">
<a href="{{ route('dashboard.admin.catalog.edit', ['emojiId' => $item->emoji_id]) }}" class="rounded-lg border border-slate-300 dark:border-white/10 px-3 py-1.5 text-xs text-slate-700 dark:text-gray-100 hover:bg-slate-50 dark:hover:bg-white/10">Edit</a>
<form method="POST" action="{{ route('dashboard.admin.catalog.delete', $item->emoji_id) }}" onsubmit="return confirm('Delete this emoji and related public records?');">
@csrf
@method('DELETE')
<button class="rounded-lg border border-red-300/50 bg-red-50 dark:bg-red-500/10 px-3 py-1.5 text-xs text-red-700 dark:text-red-300 hover:bg-red-100 dark:hover:bg-red-500/20">Delete</button>
</form>
</div>
</td>
</tr>
@empty
<tr>
<td colspan="7" class="px-3 py-6 text-center text-slate-500 dark:text-gray-400">
@if (($filters['q'] ?? '') !== '')
No rows match "<span class="font-semibold text-slate-700 dark:text-gray-300">{{ $filters['q'] }}</span>".
@else
No catalog rows in database.
@endif
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
<div class="mt-4">
{{ $items->links('vendor.pagination.dashboard') }}
</div>
</div>
<div class="mt-8 rounded-2xl glass-card p-5">
<div class="flex items-center justify-between gap-3">
<div>
<div class="text-xs uppercase tracking-[0.2em] text-slate-600 dark:text-gray-400 font-semibold">Snapshot Versions</div>
<div class="mt-1 text-sm text-slate-700 dark:text-gray-300">Use this for quick rollback if latest publish is broken.</div>
</div>
</div>
<div class="mt-4 overflow-x-auto rounded-xl border border-slate-200 dark:border-white/10">
<table class="min-w-full text-sm">
<thead class="bg-slate-50 dark:bg-slate-900/80">
<tr class="text-left text-xs uppercase tracking-[0.16em] text-slate-600 dark:text-gray-400">
<th class="px-3 py-3">Version</th>
<th class="px-3 py-3">File</th>
<th class="px-3 py-3">Updated</th>
<th class="px-3 py-3">Status</th>
<th class="px-3 py-3 text-right">Action</th>
</tr>
</thead>
<tbody>
@forelse (($snapshots ?? []) as $snapshot)
<tr class="border-t border-slate-200 dark:border-white/10 text-slate-900 dark:text-gray-200">
<td class="px-3 py-3 font-mono text-xs text-slate-800 dark:text-gray-100">{{ $snapshot['version'] }}</td>
<td class="px-3 py-3 font-mono text-xs text-slate-700 dark:text-gray-300">{{ $snapshot['name'] }}</td>
<td class="px-3 py-3 text-xs text-slate-700 dark:text-gray-300">
{{ $snapshot['modified_at'] > 0 ? \Illuminate\Support\Carbon::createFromTimestamp($snapshot['modified_at'])->format('Y-m-d H:i') : '—' }}
</td>
<td class="px-3 py-3">
@if ($snapshot['is_active'])
<span class="rounded-full border border-emerald-400 bg-emerald-100 px-2 py-1 text-xs font-semibold text-emerald-800 dark:border-emerald-300/40 dark:bg-emerald-500/20 dark:text-emerald-200">Active</span>
@else
<span class="rounded-full border border-slate-300 dark:border-white/10 bg-slate-100 dark:bg-white/5 px-2 py-1 text-xs font-medium text-slate-700 dark:text-gray-300">Inactive</span>
@endif
</td>
<td class="px-3 py-3 text-right">
@if (!$snapshot['is_active'])
<form method="POST" action="{{ route('dashboard.admin.catalog.snapshot.activate') }}" class="inline">
@csrf
<input type="hidden" name="snapshot" value="{{ $snapshot['name'] }}">
<button class="rounded-lg border border-slate-300 dark:border-white/10 bg-white dark:bg-transparent px-3 py-1.5 text-xs font-medium text-slate-800 dark:text-gray-100 hover:bg-slate-50 dark:hover:bg-white/10">
Activate
</button>
</form>
@endif
</td>
</tr>
@empty
<tr><td colspan="5" class="px-3 py-6 text-center text-slate-600 dark:text-gray-400">No snapshot files found yet. Publish once to create versioned snapshots.</td></tr>
@endforelse
</tbody>
</table>
</div>
</div>
@endsection

4
app/resources/views/dashboard/admin/subscriptions.blade.php
View File

@@ -42,7 +42,7 @@
<option value="active" @selected(($filters['status'] ?? '') === 'active')>Active</option>
<option value="pending" @selected(($filters['status'] ?? '') === 'pending')>Pending</option>
<option value="revoked" @selected(($filters['status'] ?? '') === 'revoked')>Revoked</option>
<option value="cancelled" @selected(($filters['status'] ?? '') === 'cancelled')>Cancelled</option>
<option value="canceled" @selected(($filters['status'] ?? '') === 'canceled')>Canceled</option>
<option value="suspended" @selected(($filters['status'] ?? '') === 'suspended')>Suspended</option>
</select>
<button class="rounded-xl border border-white/10 px-4 py-2 text-sm font-semibold text-gray-200 hover:bg-white/5 transition-colors">Filter</button>
@@ -165,7 +165,7 @@
<td class="py-4 pr-4">{{ $row->plan }}</td>
<td class="py-4 pr-4">
@php
$inactive = in_array($row->status, ['revoked', 'cancelled', 'suspended'], true);
$inactive = in_array($row->status, ['revoked', 'canceled', 'cancelled', 'suspended'], true);
$pill = $inactive
? ['bg' => 'bg-rose-100 dark:bg-rose-500/20', 'text' => 'text-rose-800 dark:text-rose-200']
: ($row->status === 'pending'

2
app/resources/views/dashboard/admin/user-show.blade.php
View File

@@ -59,7 +59,7 @@
<td class="py-4 pr-4">{{ $row->plan }}</td>
<td class="py-4 pr-4">
@php
$inactive = in_array($row->status, ['revoked', 'cancelled', 'suspended'], true);
$inactive = in_array($row->status, ['revoked', 'canceled', 'cancelled', 'suspended'], true);
$pill = $inactive
? ['bg' => 'bg-rose-100 dark:bg-rose-500/20', 'text' => 'text-rose-800 dark:text-rose-200']
: ($row->status === 'pending'

4
app/resources/views/dashboard/app.blade.php
View File

@@ -18,6 +18,7 @@
['label' => 'Users', 'route' => 'dashboard.admin.users', 'icon' => 'users'],
['label' => 'Subscriptions', 'route' => 'dashboard.admin.subscriptions', 'icon' => 'credit-card'],
['label' => 'Pricing', 'route' => 'dashboard.admin.pricing', 'icon' => 'badge-dollar-sign'],
['label' => 'Catalog', 'route' => 'dashboard.admin.catalog', 'icon' => 'package-search'],
['label' => 'Webhooks', 'route' => 'dashboard.admin.webhooks', 'icon' => 'webhook'],
['label' => 'Audit Logs', 'route' => 'dashboard.admin.audit_logs', 'icon' => 'list-checks'],
['label' => 'Settings', 'route' => 'dashboard.admin.settings', 'icon' => 'settings'],
@@ -113,6 +114,9 @@
<a href="{{ route('dashboard.admin.subscriptions') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<i data-lucide="credit-card" class="w-4 h-4"></i><span>Grant subscription</span>
</a>
<a href="{{ route('dashboard.admin.catalog') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<i data-lucide="package-search" class="w-4 h-4"></i><span>Manage catalog</span>
</a>
<a href="{{ route('dashboard.admin.webhooks') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<i data-lucide="webhook" class="w-4 h-4"></i><span>Review webhooks</span>
</a>

310
app/resources/views/dashboard/user/billing.blade.php
View File

@@ -11,6 +11,15 @@
$hasSub = $subscription !== null;
$orders = $orders ?? collect();
$payments = $payments ?? collect();
$currentPlan = (string) ($subscription->plan ?? ($user?->tier === 'personal' ? 'personal_monthly' : 'free'));
$hasPendingPayment = $payments->contains(fn ($payment) => (string) ($payment->status ?? '') === 'pending');
$pendingCooldownWindow = (int) config('dewemoji.billing.pending_cooldown_seconds', 120);
$latestPendingPayment = $payments->first(fn ($payment) => (string) ($payment->status ?? '') === 'pending');
$pendingCooldownRemaining = 0;
if ($latestPendingPayment?->created_at && $pendingCooldownWindow > 0) {
$age = max(0, now()->getTimestamp() - $latestPendingPayment->created_at->getTimestamp());
$pendingCooldownRemaining = max(0, $pendingCooldownWindow - $age);
}
$formatPlan = function (?string $code): string {
$value = (string) ($code ?? '');
return match ($value) {
@@ -64,6 +73,14 @@
<div class="mt-3 text-xs text-gray-400">
Downgrading to Free revokes any active API keys immediately.
</div>
@if ($hasPendingPayment)
<div class="mt-3 rounded-xl border border-emerald-300/40 bg-emerald-50 px-3 py-2 text-xs text-emerald-800 dark:border-emerald-400/30 dark:bg-emerald-400/10 dark:text-emerald-200">
You have a pending checkout. Use Pay in the table below to continue the same payment.
@if ($pendingCooldownRemaining > 0)
New checkout unlocks in <span id="pending-cooldown-seconds" data-seconds="{{ $pendingCooldownRemaining }}" class="font-semibold">{{ $pendingCooldownRemaining }}</span>s.
@endif
</div>
@endif
<div class="mt-6 grid gap-4 md:grid-cols-2">
<div class="rounded-2xl bg-white/5 border border-white/10 p-4">
@@ -78,6 +95,43 @@
</div>
</div>
<div class="mt-6 rounded-2xl bg-white/5 border border-white/10 p-4">
<div class="text-sm font-semibold text-gray-200">Change plan</div>
<p class="mt-2 text-xs text-gray-400">
Plan change policy: when your new payment is confirmed, Dewemoji cancels the previous recurring plan automatically.
No prorated refund is applied.
</p>
<div class="mt-4 flex flex-wrap gap-2">
@if (in_array($currentPlan, ['personal_monthly', 'personal_annual'], true))
@if ($currentPlan === 'personal_monthly')
<a href="{{ route('pricing', ['period' => 'annual', 'currency' => 'USD']) }}"
class="rounded-full border border-white/10 px-4 py-2 text-xs font-semibold text-gray-200 hover:bg-white/10">
Switch to Annual
</a>
@endif
@if ($currentPlan === 'personal_annual')
<a href="{{ route('pricing', ['period' => 'monthly', 'currency' => 'USD']) }}"
class="rounded-full border border-white/10 px-4 py-2 text-xs font-semibold text-gray-200 hover:bg-white/10">
Switch to Monthly
</a>
@endif
<a href="{{ route('pricing', ['target' => 'lifetime', 'currency' => 'USD']) }}"
class="rounded-full bg-brand-sun text-black px-4 py-2 text-xs font-semibold hover:opacity-90">
Upgrade to Lifetime
</a>
@elseif ($currentPlan === 'personal_lifetime')
<span class="rounded-full border border-emerald-300/40 bg-emerald-50 px-4 py-2 text-xs font-semibold text-emerald-800 dark:border-emerald-400/30 dark:bg-emerald-400/10 dark:text-emerald-200">
Lifetime active
</span>
@else
<a href="{{ route('pricing') }}"
class="rounded-full bg-brand-sun text-black px-4 py-2 text-xs font-semibold hover:opacity-90">
Choose Personal Plan
</a>
@endif
</div>
</div>
@if ($payments->count() > 0)
<div class="mt-6">
<div class="text-xs uppercase tracking-[0.25em] text-gray-400">Recent payments</div>
@@ -90,6 +144,7 @@
<th class="px-4 py-3 text-left">Amount</th>
<th class="px-4 py-3 text-left">Status</th>
<th class="px-4 py-3 text-left">Created</th>
<th class="px-4 py-3 text-left">Action</th>
</tr>
</thead>
<tbody class="divide-y divide-white/10">
@@ -110,6 +165,20 @@
<span class="rounded-full {{ $pill['bg'] }} px-3 py-1 text-xs font-semibold {{ $pill['text'] }}">{{ $status }}</span>
</td>
<td class="px-4 py-3 text-xs text-gray-400">{{ $payment->created_at?->toDateString() ?? '—' }}</td>
<td class="px-4 py-3">
@if ($status === 'pending')
<button
type="button"
class="resume-payment-btn inline-flex items-center justify-center rounded-full border border-brand-ocean/40 px-3 py-1 text-xs font-semibold text-brand-ocean hover:bg-brand-ocean/10"
data-payment-id="{{ $payment->id }}"
data-provider="{{ strtolower((string) ($payment->provider ?? '')) }}"
>
Pay
</button>
@else
<span class="text-xs text-gray-500">—</span>
@endif
</td>
</tr>
@endforeach
</tbody>
@@ -117,7 +186,7 @@
</div>
@if ($payments->contains(fn ($payment) => in_array($payment->status, ['pending', 'failed'], true)))
<div class="mt-4 rounded-2xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800 dark:border-amber-400/30 dark:bg-amber-400/10 dark:text-amber-200">
Pending or failed payments need a new checkout. Start a fresh transaction from the pricing page.
Failed payments need a new checkout. Pending payments can be continued from the table using the Pay action.
</div>
<a href="{{ route('pricing') }}" class="mt-3 inline-flex items-center justify-center rounded-full border border-amber-300 px-4 py-2 text-xs font-semibold text-amber-800 hover:bg-amber-100 dark:border-amber-300/40 dark:text-amber-200 dark:hover:bg-amber-400/10">
Start new checkout
@@ -135,4 +204,243 @@
</a>
@endif
</div>
<div id="billing-qris-modal" class="hidden fixed inset-0 z-[70] items-center justify-center">
<div class="absolute inset-0 bg-black/70 backdrop-blur-sm"></div>
<div class="relative z-10 w-full max-w-lg rounded-3xl glass-card p-6 bg-white/95 text-slate-900 dark:bg-slate-950/90 dark:text-white">
<div class="text-xs uppercase tracking-[0.25em] text-gray-400">QRIS payment</div>
<h3 class="mt-1 text-3xl font-bold text-gray-900 dark:text-white">Scan to pay</h3>
<div class="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2">
<div class="rounded-2xl bg-white/10 border border-white/10 p-4 flex items-center justify-center">
<div id="billing-qris-code" class="rounded-xl bg-white p-3 shadow-lg"></div>
</div>
<div class="space-y-3 text-sm text-gray-300">
<div class="rounded-xl bg-white/5 border border-white/10 p-3">
<div class="text-xs uppercase tracking-[0.2em] text-gray-400">Amount</div>
<div id="billing-qris-amount" class="mt-1 text-lg font-semibold text-gray-900 dark:text-white">Rp 0</div>
</div>
<div class="rounded-xl bg-white/5 border border-white/10 p-3">
<div class="text-xs uppercase tracking-[0.2em] text-gray-400">Expires</div>
<div id="billing-qris-expiry" class="mt-1 text-sm text-gray-700 dark:text-gray-300">Complete within 30 minutes</div>
</div>
<div id="billing-qris-text" class="hidden"></div>
</div>
</div>
<div class="mt-6 flex items-center justify-end gap-2">
<button id="billing-qris-cancel" class="rounded-full bg-rose-500 text-white font-semibold px-4 py-2 text-sm hover:bg-rose-600">
Cancel payment
</button>
</div>
</div>
</div>
@endsection
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
<script>
(() => {
const cooldownEl = document.getElementById('pending-cooldown-seconds');
if (cooldownEl) {
let remaining = Math.max(0, Number(cooldownEl.dataset.seconds || 0));
const tick = () => {
cooldownEl.textContent = String(remaining);
if (remaining <= 0) return false;
remaining -= 1;
return true;
};
tick();
const timer = setInterval(() => {
if (!tick()) {
clearInterval(timer);
}
}, 1000);
}
const resumeButtons = document.querySelectorAll('.resume-payment-btn');
if (!resumeButtons.length) return;
const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
const resumeUrlTpl = @json(route('billing.payments.resume', ['payment' => '__PAYMENT_ID__']));
const pakasirStatusUrl = @json(route('billing.pakasir.status'));
const pakasirCancelUrl = @json(route('billing.pakasir.cancel'));
const billingSuccessUrl = @json(route('dashboard.billing', ['status' => 'success']));
const modal = document.getElementById('billing-qris-modal');
const qrTarget = document.getElementById('billing-qris-code');
const qrText = document.getElementById('billing-qris-text');
const qrAmount = document.getElementById('billing-qris-amount');
const qrExpiry = document.getElementById('billing-qris-expiry');
const cancelBtn = document.getElementById('billing-qris-cancel');
let modalOpen = false;
let pollTimer = null;
let currentOrderId = null;
const openModal = () => {
if (!modal) return;
modal.classList.remove('hidden');
modal.classList.add('flex');
modalOpen = true;
};
const closeModal = () => {
if (!modal) return;
modal.classList.add('hidden');
modal.classList.remove('flex');
modalOpen = false;
currentOrderId = null;
if (pollTimer) {
clearInterval(pollTimer);
pollTimer = null;
}
};
const formatExpiry = (value) => {
if (!value) return null;
const parsed = new Date(value);
if (Number.isNaN(parsed.getTime())) return null;
return new Intl.DateTimeFormat('id-ID', {
dateStyle: 'medium',
timeStyle: 'short',
}).format(parsed);
};
const resumeUrlFor = (paymentId) => resumeUrlTpl.replace('__PAYMENT_ID__', String(paymentId));
const startPolling = () => {
if (!currentOrderId) return;
if (pollTimer) {
clearInterval(pollTimer);
}
pollTimer = setInterval(async () => {
if (!modalOpen || !currentOrderId) return;
try {
const res = await fetch(pakasirStatusUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
...(csrf ? { 'X-CSRF-TOKEN': csrf } : {}),
},
body: JSON.stringify({ order_id: currentOrderId }),
});
const data = await res.json().catch(() => null);
if (res.ok && data?.paid) {
closeModal();
window.location.href = billingSuccessUrl;
}
} catch (e) {
// keep polling silently
}
}, 4000);
};
cancelBtn?.addEventListener('click', async () => {
if (!currentOrderId) {
closeModal();
return;
}
const ok = await window.dewemojiConfirm('Cancel this QRIS payment? You can start a new checkout from pricing.', {
title: 'Cancel payment',
okText: 'Cancel payment',
});
if (!ok) return;
try {
await fetch(pakasirCancelUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
...(csrf ? { 'X-CSRF-TOKEN': csrf } : {}),
},
body: JSON.stringify({ order_id: currentOrderId }),
});
} catch (e) {
// best-effort cancel
} finally {
closeModal();
window.location.reload();
}
});
document.addEventListener('keydown', (event) => {
if (!modalOpen) return;
if (event.key === 'Escape') {
event.preventDefault();
}
});
resumeButtons.forEach((btn) => {
btn.addEventListener('click', async () => {
const paymentId = btn.dataset.paymentId;
if (!paymentId) return;
const original = btn.textContent;
btn.disabled = true;
btn.textContent = 'Loading...';
try {
const res = await fetch(resumeUrlFor(paymentId), {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
...(csrf ? { 'X-CSRF-TOKEN': csrf } : {}),
},
body: JSON.stringify({}),
});
const data = await res.json().catch(() => null);
if (!res.ok || !data?.ok) {
const error = data?.error || 'resume_failed';
if (error === 'payment_expired') {
alert('This payment has expired. Start a new checkout from pricing.');
} else if (error === 'payment_not_pending') {
window.location.reload();
} else {
alert('Could not continue this payment. Start a new checkout from pricing.');
}
btn.disabled = false;
btn.textContent = original;
return;
}
if (data.mode === 'redirect' && data.approve_url) {
window.location.href = data.approve_url;
return;
}
if (data.mode === 'qris' && data.payment_number) {
currentOrderId = data.order_id || null;
if (qrTarget) qrTarget.innerHTML = '';
if (qrTarget && window.QRCode) {
new QRCode(qrTarget, {
text: data.payment_number,
width: 220,
height: 220,
colorDark: '#0b0b0f',
colorLight: '#ffffff',
});
}
if (qrText) qrText.textContent = data.payment_number;
if (qrAmount) qrAmount.textContent = `Rp ${Number(data.total_payment || data.amount || 0).toLocaleString('id-ID')}`;
if (qrExpiry) {
const formatted = formatExpiry(data.expired_at);
qrExpiry.textContent = formatted ? `Expires ${formatted}` : 'Complete within 30 minutes';
}
openModal();
startPolling();
btn.disabled = false;
btn.textContent = original;
return;
}
alert('Could not continue this payment. Start a new checkout from pricing.');
btn.disabled = false;
btn.textContent = original;
} catch (e) {
alert('Resume request failed. Please try again.');
btn.disabled = false;
btn.textContent = original;
}
});
});
})();
</script>
@endpush

38
app/resources/views/dashboard/user/keywords.blade.php
View File

@@ -9,7 +9,8 @@
$user = $user ?? auth()->user();
$isPersonal = $user && (string) $user->tier === 'personal';
$freeLimit = $freeLimit ?? null;
$limitReached = $freeLimit !== null && $items->count() >= $freeLimit;
$activeCount = (int) ($activeCount ?? $items->where('is_active', true)->count());
$limitReached = $freeLimit !== null && $activeCount >= $freeLimit;
$emojiLookup = $emojiLookup ?? [];
@endphp
@@ -31,7 +32,7 @@
<div class="mt-2 text-xl font-semibold text-white">{{ $isPersonal ? 'Ready to personalize' : 'Free plan keywords' }}</div>
<p class="mt-2 text-sm text-gray-400">Add keywords to emojis to improve your personal search results.</p>
@if (!$isPersonal && $freeLimit)
<p class="mt-1 text-xs text-gray-500">Free plan limit: {{ $items->count() }} / {{ $freeLimit }} keywords.</p>
<p class="mt-1 text-xs text-gray-500">Free active limit: {{ $activeCount }} / {{ $freeLimit }} keywords. Inactive keywords are stored but not used in search.</p>
@endif
</div>
<div class="flex flex-wrap items-center gap-2">
@@ -52,9 +53,12 @@
@if (!$isPersonal && $freeLimit)
<div class="mt-6 rounded-2xl border border-brand-sun/30 bg-brand-sun/10 p-4 text-sm text-brand-sun">
Free plan includes up to {{ $freeLimit }} keywords total. Upgrade for unlimited keywords.
Free plan allows up to {{ $freeLimit }} active keywords. You can keep extras as inactive and reactivate after upgrading.
</div>
@endif
<div class="mt-4 rounded-2xl border border-white/10 bg-white/5 p-4 text-xs text-gray-400">
Search behavior: only <strong class="text-gray-200">Active</strong> private keywords are used in emoji matching. Inactive keywords stay saved in your account but are ignored by search and API results.
</div>
<div id="import-panel" class="mt-6 hidden rounded-2xl border border-white/10 bg-white/5 p-5">
<form method="POST" action="{{ route('dashboard.keywords.import') }}" enctype="multipart/form-data" class="grid gap-3 md:grid-cols-2">
@@ -81,6 +85,7 @@
<th class="px-4 py-3 text-left">Emoji</th>
<th class="px-4 py-3 text-left">Keyword</th>
<th class="px-4 py-3 text-left">Language</th>
<th class="px-4 py-3 text-left">Status</th>
<th class="px-4 py-3 text-right">Actions</th>
</tr>
</thead>
@@ -101,6 +106,15 @@
</td>
<td class="px-4 py-3 font-semibold text-white">{{ $item->keyword }}</td>
<td class="px-4 py-3 text-xs uppercase tracking-[0.15em] text-gray-400">{{ $item->lang ?? 'und' }}</td>
<td class="px-4 py-3">
@php
$isActive = (bool) ($item->is_active ?? true);
$canActivate = $isActive || $isPersonal || !$limitReached;
@endphp
<span class="rounded-full px-3 py-1 text-xs font-semibold {{ $isActive ? 'bg-emerald-100 text-emerald-800 dark:bg-emerald-500/20 dark:text-emerald-200' : 'bg-slate-100 text-slate-700 dark:bg-slate-500/20 dark:text-slate-200' }}">
{{ $isActive ? 'Active' : 'Inactive' }}
</span>
</td>
<td class="px-4 py-3 text-right">
<button
type="button"
@@ -109,9 +123,21 @@
data-emoji="{{ $item->emoji_slug }}"
data-keyword="{{ $item->keyword }}"
data-lang="{{ $item->lang }}"
>
>
Edit
</button>
<form method="POST" action="{{ route('dashboard.keywords.toggle_active', $item->id) }}" class="inline">
@csrf
@method('PUT')
<input type="hidden" name="is_active" value="{{ $isActive ? '0' : '1' }}">
<button
type="submit"
class="rounded-full border border-white/10 px-3 py-1 text-xs text-gray-200 hover:bg-white/10 {{ (!$canActivate && !$isActive) ? 'opacity-50 cursor-not-allowed' : '' }}"
{{ (!$canActivate && !$isActive) ? 'disabled' : '' }}
>
{{ $isActive ? 'Deactivate' : 'Activate' }}
</button>
</form>
<form method="POST" action="{{ route('dashboard.keywords.delete', $item->id) }}" class="inline">
@csrf
@method('DELETE')
@@ -123,7 +149,7 @@
</tr>
@empty
<tr>
<td colspan="4" class="px-4 py-8 text-center text-sm text-gray-500">No keywords yet.</td>
<td colspan="5" class="px-4 py-8 text-center text-sm text-gray-500">No keywords yet.</td>
</tr>
@endforelse
</tbody>
@@ -317,7 +343,7 @@
}
emojiSearchAbort = new AbortController();
const base = isPersonal ? emojiSearchUrl : publicEmojiSearchUrl;
const base = emojiSearchUrl;
const url = `${base}?${new URLSearchParams({ q, limit: '30', page: '1' }).toString()}`;
try {

4
app/resources/views/site/api-docs.blade.php
View File

@@ -128,6 +128,7 @@
<section id="plans" class="glass-card rounded-2xl p-6 scroll-mt-28">
<h3 class="text-lg font-semibold">Plans &amp; limits</h3>
<p class="mt-2 text-sm text-gray-300">Private keyword matching uses only keywords with <code>is_active=true</code>. Inactive keywords remain stored but are excluded from search results until reactivated.</p>
<div class="overflow-x-auto mt-3">
<table class="min-w-full text-sm doc-table">
<thead>
@@ -145,7 +146,7 @@
<td class="py-2 pr-6 text-right">20</td>
<td class="py-2 pr-6">None</td>
<td class="py-2 pr-6">Server-level only</td>
<td class="py-2">Public dataset (EN + ID) only.</td>
<td class="py-2">Public dataset (EN + ID) plus up to 20 active private keywords for signed-in users.</td>
</tr>
<tr>
<td class="py-2 pr-6"><strong>Personal</strong></td>
@@ -236,6 +237,7 @@
<ul class="list-disc pl-5 text-sm text-gray-300 space-y-1">
<li><code>400</code> — invalid_request</li>
<li><code>401</code> — invalid_key</li>
<li><code>409</code> — pending_cooldown (billing checkout lock, wait <code>retry_after</code> seconds)</li>
<li><code>404</code> — not_found</li>
<li><code>429</code> — rate_limited</li>
</ul>

149
app/resources/views/site/emoji-detail.blade.php
View File

@@ -16,6 +16,7 @@
$userTier = $userTier ?? $user?->tier;
$isPersonal = $userTier === 'personal';
$userKeywords = $userKeywords ?? collect();
$activeKeywordCount = (int) ($activeKeywordCount ?? $userKeywords->where('is_active', true)->count());
$htmlHex = '';
$cssCode = '';
if (!empty($emoji['codepoints'][0])) {
@@ -214,17 +215,29 @@
@if ($canManageKeywords)
@if (!is_null($keywordLimit))
<div class="mt-3 text-xs text-gray-400">
Free plan limit: {{ $userKeywords->count() }} / {{ $keywordLimit }} keywords.
Free active limit: {{ $activeKeywordCount }} / {{ $keywordLimit }} keywords.
</div>
@endif
<div id="user-keyword-list" class="mt-4 flex flex-wrap gap-2">
@forelse ($userKeywords as $keyword)
<span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 text-sm text-gray-200">
@php($isKeywordActive = (bool) ($keyword->is_active ?? true))
<span
class="user-keyword-pill inline-flex items-center gap-2 px-3 py-1.5 rounded-lg border text-sm {{ $isKeywordActive ? 'bg-white/5 border-white/10 text-gray-200' : 'bg-slate-200/10 border-slate-200/20 text-gray-300' }}"
data-id="{{ $keyword->id }}"
data-keyword="{{ $keyword->keyword }}"
data-lang="{{ $keyword->lang ?? 'und' }}"
data-active="{{ $isKeywordActive ? '1' : '0' }}"
>
<span>{{ $keyword->keyword }}</span>
<span class="text-[10px] uppercase tracking-[0.2em] text-gray-500">{{ $keyword->lang ?? 'und' }}</span>
@unless($isKeywordActive)
<span class="text-[10px] uppercase tracking-[0.2em] text-amber-400">inactive</span>
@endunless
<button type="button" class="user-keyword-edit rounded-md border border-white/10 px-1.5 py-0.5 text-[10px] text-gray-300 hover:bg-white/10">Edit</button>
<button type="button" class="user-keyword-delete rounded-md border border-white/10 px-1.5 py-0.5 text-[10px] text-gray-300 hover:bg-red-500/20">Delete</button>
</span>
@empty
<span class="text-sm text-gray-400">No private keywords yet. Add one to personalize search.</span>
<span id="user-keyword-empty" class="text-sm text-gray-400">No private keywords yet. Add one to personalize search.</span>
@endforelse
</div>
@else
@@ -254,7 +267,7 @@
<div class="absolute inset-0 bg-black/70 backdrop-blur-sm"></div>
<div class="relative z-10 w-full max-w-lg rounded-3xl glass-card theme-surface p-6">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold text-slate-900 dark:text-white">Add keyword</h3>
<h3 id="user-keyword-title" class="text-lg font-semibold text-slate-900 dark:text-white">Add keyword</h3>
<button id="user-keyword-close" class="w-8 h-8 rounded-full bg-slate-100 hover:bg-slate-200 dark:bg-white/10 dark:hover:bg-white/20 flex items-center justify-center text-slate-600 dark:text-gray-200">
<i data-lucide="x" class="w-4 h-4"></i>
</button>
@@ -277,7 +290,7 @@
</div>
<div class="flex items-center justify-end gap-2">
<button type="button" id="user-keyword-cancel" class="rounded-full border border-slate-300 px-4 py-2 text-sm text-slate-700 hover:bg-slate-100 dark:border-white/10 dark:text-gray-200 dark:hover:bg-white/5">Cancel</button>
<button type="submit" class="rounded-full bg-brand-ocean text-white force-white font-semibold px-5 py-2 text-sm">Save keyword</button>
<button id="user-keyword-submit" type="submit" class="rounded-full bg-brand-ocean text-white force-white font-semibold px-5 py-2 text-sm">Save keyword</button>
</div>
</form>
</div>
@@ -337,6 +350,8 @@ addRecent(@json($symbol));
const closeBtn = document.getElementById('user-keyword-close');
const cancelBtn = document.getElementById('user-keyword-cancel');
const form = document.getElementById('user-keyword-form');
const modalTitle = document.getElementById('user-keyword-title');
const submitBtn = document.getElementById('user-keyword-submit');
const keywordInput = document.getElementById('user-keyword-input');
const langInput = document.getElementById('user-keyword-lang');
const langComboInput = document.getElementById('user-keyword-lang-combo');
@@ -344,6 +359,10 @@ addRecent(@json($symbol));
const langSourceEl = document.getElementById('user-keyword-lang-source');
const list = document.getElementById('user-keyword-list');
const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
const updateUrlTemplate = @json(route('dashboard.keywords.update', ['keyword' => '__ID__']));
const deleteUrlTemplate = @json(route('dashboard.keywords.delete', ['keyword' => '__ID__']));
let editingKeywordId = null;
const escHtml = (value) => String(value ?? '').replace(/[&<>"']/g, (ch) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[ch]));
window.dewemojiPopulateLanguageSelect?.(langSourceEl);
const canonicalizeLanguageCode = (raw) => window.dewemojiCanonicalLanguageCode?.(raw) || String(raw || '').trim().toLowerCase();
@@ -397,25 +416,60 @@ addRecent(@json($symbol));
return UNDETERMINED_LANGUAGE_CODE;
};
const openModal = () => {
if (limitReached) {
const setModalMode = (mode = 'add') => {
if (mode === 'edit') {
modalTitle.textContent = 'Edit keyword';
submitBtn.textContent = 'Save changes';
return;
}
modalTitle.textContent = 'Add keyword';
submitBtn.textContent = 'Save keyword';
};
const buildKeywordPill = (item) => {
const pill = document.createElement('span');
const isActive = Boolean(item?.is_active ?? true);
const lang = String(item?.lang || 'und');
pill.className = `user-keyword-pill inline-flex items-center gap-2 px-3 py-1.5 rounded-lg border text-sm ${isActive ? 'bg-white/5 border-white/10 text-gray-200' : 'bg-slate-200/10 border-slate-200/20 text-gray-300'}`;
pill.dataset.id = String(item?.id || '');
pill.dataset.keyword = String(item?.keyword || '');
pill.dataset.lang = lang;
pill.dataset.active = isActive ? '1' : '0';
pill.innerHTML = `
<span>${escHtml(String(item?.keyword || ''))}</span>
<span class="text-[10px] uppercase tracking-[0.2em] text-gray-500">${escHtml(lang)}</span>
${isActive ? '' : '<span class="text-[10px] uppercase tracking-[0.2em] text-amber-400">inactive</span>'}
<button type="button" class="user-keyword-edit rounded-md border border-white/10 px-1.5 py-0.5 text-[10px] text-gray-300 hover:bg-white/10">Edit</button>
<button type="button" class="user-keyword-delete rounded-md border border-white/10 px-1.5 py-0.5 text-[10px] text-gray-300 hover:bg-red-500/20">Delete</button>
`;
return pill;
};
const openModal = (mode = 'add', item = null) => {
if (mode === 'add' && limitReached) {
showToast('Free plan keyword limit reached');
return;
}
editingKeywordId = mode === 'edit' ? item?.id || null : null;
setModalMode(mode);
modal.classList.remove('hidden');
modal.classList.add('flex');
keywordInput.value = '';
setLanguageByCode(DEFAULT_LANGUAGE_CODE);
keywordInput.value = mode === 'edit' ? (item?.keyword || '') : '';
setLanguageByCode(mode === 'edit' ? (item?.lang || UNDETERMINED_LANGUAGE_CODE) : DEFAULT_LANGUAGE_CODE, {
silentInput: mode === 'edit' && String(item?.lang || '').toLowerCase() === UNDETERMINED_LANGUAGE_CODE,
});
closeLanguageMenu();
keywordInput.focus();
};
const closeModal = () => {
editingKeywordId = null;
setModalMode('add');
modal.classList.add('hidden');
modal.classList.remove('flex');
};
openBtn?.addEventListener('click', openModal);
openBtn?.addEventListener('click', () => openModal('add'));
closeBtn?.addEventListener('click', closeModal);
cancelBtn?.addEventListener('click', closeModal);
modal?.addEventListener('click', (e) => {
@@ -444,8 +498,12 @@ addRecent(@json($symbol));
lang: langInput.value || 'und',
};
if (!payload.keyword) return;
const res = await fetch('{{ route('dashboard.keywords.store') }}', {
method: 'POST',
const url = editingKeywordId
? updateUrlTemplate.replace('__ID__', String(editingKeywordId))
: '{{ route('dashboard.keywords.store') }}';
const method = editingKeywordId ? 'PUT' : 'POST';
const res = await fetch(url, {
method,
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
@@ -458,16 +516,71 @@ addRecent(@json($symbol));
showToast('Could not save keyword');
return;
}
const badge = document.createElement('span');
badge.className = 'inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 text-sm text-gray-200';
badge.innerHTML = `<span>${payload.keyword}</span><span class="text-[10px] uppercase tracking-[0.2em] text-gray-500">${payload.lang}</span>`;
const item = data?.item || payload;
const wasEditing = Boolean(editingKeywordId);
const badge = buildKeywordPill(item);
if (list) {
const empty = list.querySelector('span.text-sm');
const empty = list.querySelector('#user-keyword-empty');
if (empty) empty.remove();
list.prepend(badge);
if (wasEditing) {
const current = list.querySelector(`.user-keyword-pill[data-id="${editingKeywordId}"]`);
if (current) current.replaceWith(badge);
else list.prepend(badge);
} else {
list.prepend(badge);
}
}
closeModal();
showToast('Keyword added');
showToast(wasEditing ? 'Keyword updated' : 'Keyword added');
});
list?.addEventListener('click', async (event) => {
const editBtn = event.target.closest('.user-keyword-edit');
const deleteBtn = event.target.closest('.user-keyword-delete');
const pill = event.target.closest('.user-keyword-pill');
if (!pill) return;
const id = pill.dataset.id;
if (!id) return;
if (editBtn) {
openModal('edit', {
id,
keyword: pill.dataset.keyword || '',
lang: pill.dataset.lang || 'und',
});
return;
}
if (!deleteBtn) return;
const ok = window.dewemojiConfirm
? await window.dewemojiConfirm('Delete this keyword?', {
title: 'Delete keyword',
okText: 'Delete',
})
: true;
if (!ok) return;
const res = await fetch(deleteUrlTemplate.replace('__ID__', id), {
method: 'DELETE',
headers: {
'Accept': 'application/json',
...(csrf ? { 'X-CSRF-TOKEN': csrf } : {}),
},
});
const data = await res.json().catch(() => null);
if (!res.ok || !data?.ok) {
showToast('Could not delete keyword');
return;
}
pill.remove();
if (!list.querySelector('.user-keyword-pill')) {
const empty = document.createElement('span');
empty.id = 'user-keyword-empty';
empty.className = 'text-sm text-gray-400';
empty.textContent = 'No private keywords yet. Add one to personalize search.';
list.appendChild(empty);
}
showToast('Keyword deleted');
});
})();

38
app/resources/views/site/home.blade.php
View File

@@ -218,6 +218,7 @@
const state = { page: 1, limit: 32, total: 0, items: [], categories: {} };
const userTier = @json($userTier ?? null);
const isPersonal = userTier === 'personal';
const isSignedIn = @json(auth()->check());
const initialQuery = @json($initialQuery ?? '');
const initialCategory = @json($initialCategory ?? '');
const initialSubcategory = @json($initialSubcategory ?? '');
@@ -456,7 +457,7 @@
if (catEl.value) params.set('category', catEl.value);
if (subEl.value) params.set('subcategory', subEl.value);
const endpoint = isPersonal ? '/dashboard/keywords/search' : '/v1/emojis';
const endpoint = isSignedIn ? '/dashboard/keywords/search' : '/v1/emojis';
const res = await fetch(endpoint + '?' + params.toString());
const data = await res.json();
if (!res.ok) {
@@ -492,15 +493,10 @@
</a>
<div class="emoji-card-bar absolute bottom-0 left-0 right-0 border-t border-white/10 bg-black/20 px-2 py-1.5 flex items-start gap-1">
<span class="emoji-name-clamp text-[10px] text-gray-300 text-left flex-1">${esc(item.name)}</span>
${isPrivate ? `<span class="px-1.5 py-0.5 rounded bg-brand-ocean/20 text-[9px] text-brand-oceanSoft" title="${esc(item.matched_keyword || '')}">Your: ${esc(item.matched_keyword || '')}</span>` : ''}
${isPrivate ? `<button type="button" class="edit-btn shrink-0 rounded bg-white/10 px-1.5 text-[9px] text-gray-200 hover:bg-brand-ocean/30">Edit</button>` : ''}
${isPrivate ? `<button type="button" class="delete-btn shrink-0 rounded bg-white/10 px-1.5 text-[9px] text-gray-200 hover:bg-red-500/30">Del</button>` : ''}
<button type="button" class="copy-btn shrink-0 w-6 h-6 rounded bg-white/10 hover:bg-brand-ocean/30 text-[11px] text-gray-200 hover:text-white transition-colors" title="Copy emoji">⧉</button>
</div>
`;
const copyBtn = card.querySelector('.copy-btn');
const editBtn = card.querySelector('.edit-btn');
const deleteBtn = card.querySelector('.delete-btn');
if (copyBtn) {
copyBtn.addEventListener('click', (e) => {
e.preventDefault();
@@ -511,36 +507,6 @@
});
});
}
if (editBtn && isPrivate) {
editBtn.addEventListener('click', (e) => {
e.preventDefault();
openKeywordEdit(item);
});
}
if (deleteBtn && isPrivate) {
deleteBtn.addEventListener('click', async (e) => {
e.preventDefault();
if (!item.matched_keyword_id) return;
const ok = await window.dewemojiConfirm('Delete this keyword?', {
title: 'Delete keyword',
okText: 'Delete',
});
if (!ok) return;
const res = await fetch(`/dashboard/keywords/${item.matched_keyword_id}`, {
method: 'DELETE',
headers: {
'Accept': 'application/json',
...(csrf ? { 'X-CSRF-TOKEN': csrf } : {}),
},
});
const data = await res.json().catch(() => null);
if (!res.ok || !data?.ok) {
showToast('Could not delete keyword');
return;
}
fetchEmojis(true);
});
}
card.addEventListener('contextmenu', (e) => {
e.preventDefault();
navigator.clipboard.writeText(item.emoji).then(() => {

142
app/resources/views/site/pricing.blade.php
View File

@@ -135,6 +135,9 @@
$canQris = $pakasirEnabled ?? false;
$paypalEnabled = $paypalEnabled ?? false;
$paypalPlans = $paypalPlans ?? ['personal_monthly' => false, 'personal_annual' => false];
$hasActiveLifetime = (bool) ($hasActiveLifetime ?? false);
$hasPendingPayment = (bool) ($hasPendingPayment ?? false);
$pendingCooldownRemaining = max(0, (int) ($pendingCooldownRemaining ?? 0));
@endphp
<div class="mb-6 flex flex-wrap items-center justify-center gap-3 text-sm text-gray-400">
@@ -185,15 +188,18 @@
data-paypal-enabled="{{ $paypalEnabled && $paypalPlans['personal_monthly'] ? 'true' : 'false' }}"
data-paypal-annual-enabled="{{ $paypalEnabled && $paypalPlans['personal_annual'] ? 'true' : 'false' }}"
data-qris-enabled="{{ $canQris ? 'true' : 'false' }}"
data-has-lifetime="{{ $hasActiveLifetime ? 'true' : 'false' }}"
data-has-pending="{{ $hasPendingPayment ? 'true' : 'false' }}"
data-pending-cooldown="{{ $pendingCooldownRemaining }}"
class="!text-white w-full py-2.5 rounded-xl bg-brand-ocean hover:bg-brand-oceanSoft text-white font-semibold text-center block">
Pay now
</button>
</div>
<div class="hidden">
<button type="button" data-paypal-plan="personal_monthly" data-original="Start Personal"></button>
<button type="button" data-paypal-plan="personal_annual" data-original="Start Personal"></button>
<button type="button" data-qris-plan="personal_monthly" data-original="Start Personal"></button>
<button type="button" data-qris-plan="personal_annual" data-original="Start Personal"></button>
<button type="button" data-paypal-plan="personal_monthly" data-original="Start Personal" data-has-pending="{{ $hasPendingPayment ? 'true' : 'false' }}"></button>
<button type="button" data-paypal-plan="personal_annual" data-original="Start Personal" data-has-pending="{{ $hasPendingPayment ? 'true' : 'false' }}"></button>
<button type="button" data-qris-plan="personal_monthly" data-original="Start Personal" data-has-pending="{{ $hasPendingPayment ? 'true' : 'false' }}"></button>
<button type="button" data-qris-plan="personal_annual" data-original="Start Personal" data-has-pending="{{ $hasPendingPayment ? 'true' : 'false' }}"></button>
</div>
</section>
@@ -223,14 +229,17 @@
id="lifetime-pay-btn"
data-paypal-enabled="{{ $paypalEnabled ? 'true' : 'false' }}"
data-qris-enabled="{{ $canQris ? 'true' : 'false' }}"
data-has-lifetime="{{ $hasActiveLifetime ? 'true' : 'false' }}"
data-has-pending="{{ $hasPendingPayment ? 'true' : 'false' }}"
data-pending-cooldown="{{ $pendingCooldownRemaining }}"
class="force-white w-full py-2.5 rounded-xl border border-brand-ocean/60 text-brand-ocean font-semibold text-center block hover:bg-brand-ocean/10">
Pay now
</button>
</div>
<div class="hidden">
<button type="button" data-paypal-plan="personal_lifetime" data-original="Get Lifetime Access"></button>
<button type="button" data-paypal-plan="personal_lifetime" data-original="Get Lifetime Access" data-has-pending="{{ $hasPendingPayment ? 'true' : 'false' }}"></button>
<button type="button"
data-qris-plan="personal_lifetime" data-original="Get Lifetime Access">
data-qris-plan="personal_lifetime" data-original="Get Lifetime Access" data-has-pending="{{ $hasPendingPayment ? 'true' : 'false' }}">
QRIS Lifetime
</button>
</div>
@@ -341,6 +350,16 @@
if (!buttons.length) return;
const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
const isAuthed = @json(auth()->check());
const confirmReplacePending = async (btn) => {
if ((btn.dataset.hasPending || 'false') !== 'true') return true;
return window.dewemojiConfirm(
'You have a pending payment. Starting a new checkout will cancel the previous pending payment. Continue?',
{
title: 'Replace pending payment',
okText: 'Continue checkout',
}
);
};
buttons.forEach((btn) => {
btn.addEventListener('click', async () => {
@@ -350,6 +369,8 @@
window.location.href = "{{ route('login') }}";
return;
}
const proceed = await confirmReplacePending(btn);
if (!proceed) return;
const original = btn.dataset.original || btn.textContent;
btn.disabled = true;
btn.textContent = 'Redirecting...';
@@ -365,8 +386,17 @@
});
const data = await res.json().catch(() => null);
if (!res.ok || !data?.approve_url) {
const reason = data?.error ? ` (${data.error})` : '';
alert('Could not start PayPal checkout. Please try again.' + reason);
if (data?.error === 'lifetime_active') {
alert('Lifetime plan is already active. Monthly/annual checkout is disabled.');
} else if (data?.error === 'pending_cooldown') {
if (window.dewemojiStartCheckoutCooldown) {
window.dewemojiStartCheckoutCooldown(Number(data.retry_after || 120));
}
alert(`Payment confirmation is in progress. Please wait ${Number(data.retry_after || 120)}s or continue pending from Billing.`);
} else {
const reason = data?.error ? ` (${data.error})` : '';
alert('Could not start PayPal checkout. Please try again.' + reason);
}
btn.disabled = false;
btn.textContent = original;
return;
@@ -396,8 +426,17 @@
const lifetimeNote = document.getElementById('lifetime-pay-note');
if (!priceWrap || !secondary || !payBtn || !lifetimePrice || !lifetimeSecondary || !lifetimePay) return;
let period = 'monthly';
let currency = document.querySelector('[data-default-currency]')?.dataset.defaultCurrency || 'USD';
const params = new URLSearchParams(window.location.search);
const requestedPeriod = params.get('period');
const requestedCurrency = params.get('currency');
let period = requestedPeriod === 'annual' ? 'annual' : 'monthly';
let currency = requestedCurrency === 'IDR'
? 'IDR'
: (requestedCurrency === 'USD'
? 'USD'
: (document.querySelector('[data-default-currency]')?.dataset.defaultCurrency || 'USD'));
let checkoutCooldownRemaining = Math.max(0, Number(payBtn.dataset.pendingCooldown || 0));
let cooldownTimer = null;
const setActive = (nodes, value) => {
nodes.forEach((btn) => {
@@ -414,6 +453,23 @@
btn.classList.add('inline-flex', 'items-center', 'justify-center', 'gap-2');
btn.innerHTML = `${icon}<span>${label}</span>`;
};
const getCooldownRemaining = () => Math.max(0, Math.floor(checkoutCooldownRemaining));
const startCooldown = (seconds) => {
checkoutCooldownRemaining = Math.max(getCooldownRemaining(), Math.max(0, Math.floor(Number(seconds) || 0)));
if (getCooldownRemaining() <= 0) return;
if (!cooldownTimer) {
cooldownTimer = setInterval(() => {
checkoutCooldownRemaining = Math.max(0, getCooldownRemaining() - 1);
updatePrice();
if (getCooldownRemaining() <= 0 && cooldownTimer) {
clearInterval(cooldownTimer);
cooldownTimer = null;
}
}, 1000);
}
updatePrice();
};
window.dewemojiStartCheckoutCooldown = startCooldown;
const updatePrice = () => {
const amount = currency === 'USD'
@@ -431,12 +487,26 @@
const canPaypal = (period === 'monthly' ? payBtn.dataset.paypalEnabled === 'true' : payBtn.dataset.paypalAnnualEnabled === 'true');
const canQris = payBtn.dataset.qrisEnabled === 'true';
const hasLifetime = payBtn.dataset.hasLifetime === 'true';
const cooldownRemaining = getCooldownRemaining();
let disabled = false;
let label = 'Start Personal';
let note = '';
if (currency === 'USD') {
if (hasLifetime) {
disabled = true;
label = 'Lifetime active';
note = 'You already own Lifetime. Monthly/Annual checkout is disabled.';
payBtn.classList.remove('bg-brand-sun', 'hover:bg-brand-sunSoft', 'text-black');
payBtn.classList.add('bg-brand-ocean', 'hover:bg-brand-oceanSoft', 'text-white');
} else if (cooldownRemaining > 0) {
disabled = true;
label = 'Processing...';
note = `Payment confirmation in progress. Try again in ${cooldownRemaining}s or continue pending from Billing.`;
payBtn.classList.remove('bg-brand-sun', 'hover:bg-brand-sunSoft', 'text-black');
payBtn.classList.add('bg-brand-ocean', 'hover:bg-brand-oceanSoft', 'text-white');
} else if (currency === 'USD') {
disabled = !canPaypal;
label = 'Start Personal';
note = canPaypal ? '' : 'PayPal is not configured for this plan.';
@@ -473,10 +543,23 @@
const canLifetimePaypal = lifetimePay.dataset.paypalEnabled === 'true';
const canLifetimeQris = lifetimePay.dataset.qrisEnabled === 'true';
const hasLifetimeOnAccount = lifetimePay.dataset.hasLifetime === 'true';
let lifetimeDisabled = false;
let lifetimeLabel = 'Get Lifetime Access';
let lifetimeHint = '';
if (currency === 'USD') {
if (hasLifetimeOnAccount) {
lifetimeDisabled = true;
lifetimeLabel = 'Lifetime active';
lifetimeHint = 'Your lifetime plan is already active.';
lifetimePay.classList.remove('border-brand-sun/60', 'text-brand-sun', 'hover:bg-brand-sun/10');
lifetimePay.classList.add('border-brand-ocean/60', 'text-brand-ocean', 'hover:bg-brand-ocean/10');
} else if (cooldownRemaining > 0) {
lifetimeDisabled = true;
lifetimeLabel = 'Processing...';
lifetimeHint = `Payment confirmation in progress. Try again in ${cooldownRemaining}s or continue pending from Billing.`;
lifetimePay.classList.remove('border-brand-sun/60', 'text-brand-sun', 'hover:bg-brand-sun/10');
lifetimePay.classList.add('border-brand-ocean/60', 'text-brand-ocean', 'hover:bg-brand-ocean/10');
} else if (currency === 'USD') {
lifetimeDisabled = !canLifetimePaypal;
lifetimeLabel = 'Get Lifetime Access';
lifetimeHint = canLifetimePaypal ? '' : 'PayPal is not configured.';
@@ -540,6 +623,18 @@
setActive(periodButtons, period);
setActive(currencyButtons, currency);
updatePrice();
if (getCooldownRemaining() > 0) {
startCooldown(getCooldownRemaining());
}
if (params.get('target') === 'lifetime') {
const lifetimeCard = lifetimePay.closest('section');
if (lifetimeCard) {
lifetimeCard.classList.add('ring-2', 'ring-brand-sun/60');
lifetimeCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
setTimeout(() => lifetimeCard.classList.remove('ring-2', 'ring-brand-sun/60'), 2200);
}
}
})();
</script>
@@ -562,6 +657,16 @@
let currentOrderId = null;
let modalOpen = false;
let pollTimer = null;
const confirmReplacePending = async (btn) => {
if ((btn.dataset.hasPending || 'false') !== 'true') return true;
return window.dewemojiConfirm(
'You have a pending payment. Starting a new checkout will cancel the previous pending payment. Continue?',
{
title: 'Replace pending payment',
okText: 'Continue checkout',
}
);
};
const openModal = () => {
if (!modal) return;
@@ -657,6 +762,8 @@
window.location.href = "{{ route('login') }}";
return;
}
const proceed = await confirmReplacePending(btn);
if (!proceed) return;
const original = btn.dataset.original || btn.textContent;
btn.disabled = true;
btn.textContent = 'Generating QR...';
@@ -672,7 +779,16 @@
});
const data = await res.json().catch(() => null);
if (!res.ok || !data?.payment_number) {
alert('Could not generate QRIS. Please try again.');
if (data?.error === 'lifetime_active') {
alert('Lifetime plan is already active. Monthly/annual checkout is disabled.');
} else if (data?.error === 'pending_cooldown') {
if (window.dewemojiStartCheckoutCooldown) {
window.dewemojiStartCheckoutCooldown(Number(data.retry_after || 120));
}
alert(`Payment confirmation is in progress. Please wait ${Number(data.retry_after || 120)}s or continue pending from Billing.`);
} else {
alert('Could not generate QRIS. Please try again.');
}
btn.disabled = false;
btn.textContent = original;
return;