added watermark settings tab on the branding page and added more package details to the billing page, added a new guest notifications page
This commit is contained in:
@@ -5,9 +5,8 @@ namespace App\Filament\SuperAdmin\Pages;
|
|||||||
use App\Models\WatermarkSetting;
|
use App\Models\WatermarkSetting;
|
||||||
use Filament\Forms;
|
use Filament\Forms;
|
||||||
use Filament\Forms\Form;
|
use Filament\Forms\Form;
|
||||||
use Filament\Pages\Page;
|
|
||||||
use Filament\Notifications\Notification;
|
use Filament\Notifications\Notification;
|
||||||
use Illuminate\Support\Facades\Storage;
|
use Filament\Pages\Page;
|
||||||
|
|
||||||
class WatermarkSettingsPage extends Page
|
class WatermarkSettingsPage extends Page
|
||||||
{
|
{
|
||||||
@@ -20,11 +19,19 @@ class WatermarkSettingsPage extends Page
|
|||||||
protected static ?int $navigationSort = 20;
|
protected static ?int $navigationSort = 20;
|
||||||
|
|
||||||
public ?string $asset = null;
|
public ?string $asset = null;
|
||||||
|
|
||||||
public string $position = 'bottom-right';
|
public string $position = 'bottom-right';
|
||||||
|
|
||||||
public float $opacity = 0.25;
|
public float $opacity = 0.25;
|
||||||
|
|
||||||
public float $scale = 0.2;
|
public float $scale = 0.2;
|
||||||
|
|
||||||
public int $padding = 16;
|
public int $padding = 16;
|
||||||
|
|
||||||
|
public int $offset_x = 0;
|
||||||
|
|
||||||
|
public int $offset_y = 0;
|
||||||
|
|
||||||
public function mount(): void
|
public function mount(): void
|
||||||
{
|
{
|
||||||
$settings = WatermarkSetting::query()->first();
|
$settings = WatermarkSetting::query()->first();
|
||||||
@@ -35,6 +42,8 @@ class WatermarkSettingsPage extends Page
|
|||||||
$this->opacity = (float) $settings->opacity;
|
$this->opacity = (float) $settings->opacity;
|
||||||
$this->scale = (float) $settings->scale;
|
$this->scale = (float) $settings->scale;
|
||||||
$this->padding = (int) $settings->padding;
|
$this->padding = (int) $settings->padding;
|
||||||
|
$this->offset_x = (int) ($settings->offset_x ?? 0);
|
||||||
|
$this->offset_y = (int) ($settings->offset_y ?? 0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -80,6 +89,20 @@ class WatermarkSettingsPage extends Page
|
|||||||
->minValue(0)
|
->minValue(0)
|
||||||
->default(16)
|
->default(16)
|
||||||
->required(),
|
->required(),
|
||||||
|
Forms\Components\TextInput::make('offset_x')
|
||||||
|
->label('Offset X (px)')
|
||||||
|
->numeric()
|
||||||
|
->minValue(-500)
|
||||||
|
->maxValue(500)
|
||||||
|
->default(0)
|
||||||
|
->required(),
|
||||||
|
Forms\Components\TextInput::make('offset_y')
|
||||||
|
->label('Offset Y (px)')
|
||||||
|
->numeric()
|
||||||
|
->minValue(-500)
|
||||||
|
->maxValue(500)
|
||||||
|
->default(0)
|
||||||
|
->required(),
|
||||||
])->columns(2);
|
])->columns(2);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -93,6 +116,8 @@ class WatermarkSettingsPage extends Page
|
|||||||
$settings->opacity = $this->opacity;
|
$settings->opacity = $this->opacity;
|
||||||
$settings->scale = $this->scale;
|
$settings->scale = $this->scale;
|
||||||
$settings->padding = $this->padding;
|
$settings->padding = $this->padding;
|
||||||
|
$settings->offset_x = $this->offset_x;
|
||||||
|
$settings->offset_y = $this->offset_y;
|
||||||
$settings->save();
|
$settings->save();
|
||||||
|
|
||||||
Notification::make()
|
Notification::make()
|
||||||
|
|||||||
@@ -21,6 +21,7 @@ use Illuminate\Http\Request;
|
|||||||
use Illuminate\Http\Resources\Json\AnonymousResourceCollection;
|
use Illuminate\Http\Resources\Json\AnonymousResourceCollection;
|
||||||
use Illuminate\Support\Arr;
|
use Illuminate\Support\Arr;
|
||||||
use Illuminate\Support\Facades\DB;
|
use Illuminate\Support\Facades\DB;
|
||||||
|
use Illuminate\Support\Facades\Storage;
|
||||||
use Illuminate\Support\Str;
|
use Illuminate\Support\Str;
|
||||||
use Illuminate\Validation\ValidationException;
|
use Illuminate\Validation\ValidationException;
|
||||||
use Symfony\Component\HttpKernel\Exception\HttpException;
|
use Symfony\Component\HttpKernel\Exception\HttpException;
|
||||||
@@ -140,6 +141,7 @@ class EventController extends Controller
|
|||||||
}
|
}
|
||||||
|
|
||||||
$settings['branding_allowed'] = $package->branding_allowed !== false;
|
$settings['branding_allowed'] = $package->branding_allowed !== false;
|
||||||
|
$settings['watermark_allowed'] = $package->watermark_allowed !== false;
|
||||||
|
|
||||||
$eventData['settings'] = $settings;
|
$eventData['settings'] = $settings;
|
||||||
|
|
||||||
@@ -258,7 +260,9 @@ class EventController extends Controller
|
|||||||
unset($validated[$unused]);
|
unset($validated[$unused]);
|
||||||
}
|
}
|
||||||
|
|
||||||
$brandingAllowed = optional($event->eventPackage?->package)->branding_allowed !== false;
|
$package = $event->eventPackage?->package;
|
||||||
|
$brandingAllowed = optional($package)->branding_allowed !== false;
|
||||||
|
$watermarkAllowed = optional($package)->watermark_allowed !== false;
|
||||||
|
|
||||||
if (isset($validated['settings']) && is_array($validated['settings'])) {
|
if (isset($validated['settings']) && is_array($validated['settings'])) {
|
||||||
$validated['settings'] = array_merge($event->settings ?? [], $validated['settings']);
|
$validated['settings'] = array_merge($event->settings ?? [], $validated['settings']);
|
||||||
@@ -267,6 +271,92 @@ class EventController extends Controller
|
|||||||
}
|
}
|
||||||
|
|
||||||
$validated['settings']['branding_allowed'] = $brandingAllowed;
|
$validated['settings']['branding_allowed'] = $brandingAllowed;
|
||||||
|
$validated['settings']['watermark_allowed'] = $watermarkAllowed;
|
||||||
|
|
||||||
|
$settings = $validated['settings'];
|
||||||
|
$watermark = Arr::get($settings, 'watermark', []);
|
||||||
|
$existingWatermark = is_array($watermark) ? $watermark : [];
|
||||||
|
|
||||||
|
if (is_array($watermark)) {
|
||||||
|
$mode = $watermark['mode'] ?? 'base';
|
||||||
|
$policy = $watermarkAllowed ? 'basic' : 'none';
|
||||||
|
|
||||||
|
if (! $watermarkAllowed) {
|
||||||
|
$mode = 'off';
|
||||||
|
} elseif (! $brandingAllowed) {
|
||||||
|
$mode = 'base';
|
||||||
|
} elseif ($mode === 'off' && $policy === 'basic') {
|
||||||
|
$mode = 'base';
|
||||||
|
}
|
||||||
|
|
||||||
|
$assetPath = $watermark['asset'] ?? null;
|
||||||
|
$assetDataUrl = $watermark['asset_data_url'] ?? null;
|
||||||
|
|
||||||
|
if (! $watermarkAllowed) {
|
||||||
|
$assetPath = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($assetDataUrl && $mode === 'custom' && $brandingAllowed) {
|
||||||
|
if (! preg_match('/^data:image\\/(png|webp|jpe?g);base64,(.+)$/i', $assetDataUrl, $matches)) {
|
||||||
|
throw ValidationException::withMessages([
|
||||||
|
'settings.watermark.asset_data_url' => __('Ungültiges Wasserzeichen-Bild.'),
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
$decoded = base64_decode($matches[2], true);
|
||||||
|
|
||||||
|
if ($decoded === false) {
|
||||||
|
throw ValidationException::withMessages([
|
||||||
|
'settings.watermark.asset_data_url' => __('Wasserzeichen konnte nicht gelesen werden.'),
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (strlen($decoded) > 3 * 1024 * 1024) { // 3 MB
|
||||||
|
throw ValidationException::withMessages([
|
||||||
|
'settings.watermark.asset_data_url' => __('Wasserzeichen ist zu groß (max. 3 MB).'),
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
$extension = str_starts_with(strtolower($matches[1]), 'jp') ? 'jpg' : strtolower($matches[1]);
|
||||||
|
$path = sprintf('branding/watermarks/event-%s.%s', $event->id, $extension);
|
||||||
|
Storage::disk('public')->put($path, $decoded);
|
||||||
|
$assetPath = $path;
|
||||||
|
}
|
||||||
|
|
||||||
|
$position = $watermark['position'] ?? 'bottom-right';
|
||||||
|
$validPositions = [
|
||||||
|
'top-left',
|
||||||
|
'top-center',
|
||||||
|
'top-right',
|
||||||
|
'middle-left',
|
||||||
|
'center',
|
||||||
|
'middle-right',
|
||||||
|
'bottom-left',
|
||||||
|
'bottom-center',
|
||||||
|
'bottom-right',
|
||||||
|
];
|
||||||
|
|
||||||
|
if (! in_array($position, $validPositions, true)) {
|
||||||
|
$position = 'bottom-right';
|
||||||
|
}
|
||||||
|
|
||||||
|
$settings['watermark'] = [
|
||||||
|
'mode' => $mode,
|
||||||
|
'asset' => $assetPath,
|
||||||
|
'position' => $position,
|
||||||
|
'opacity' => isset($watermark['opacity']) ? (float) $watermark['opacity'] : ($existingWatermark['opacity'] ?? null),
|
||||||
|
'scale' => isset($watermark['scale']) ? (float) $watermark['scale'] : ($existingWatermark['scale'] ?? null),
|
||||||
|
'padding' => isset($watermark['padding']) ? (int) $watermark['padding'] : ($existingWatermark['padding'] ?? null),
|
||||||
|
'offset_x' => isset($watermark['offset_x']) ? (int) $watermark['offset_x'] : ($existingWatermark['offset_x'] ?? 0),
|
||||||
|
'offset_y' => isset($watermark['offset_y']) ? (int) $watermark['offset_y'] : ($existingWatermark['offset_y'] ?? 0),
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (array_key_exists('watermark_serve_originals', $settings)) {
|
||||||
|
$settings['watermark_serve_originals'] = (bool) $settings['watermark_serve_originals'];
|
||||||
|
}
|
||||||
|
|
||||||
|
$validated['settings'] = $settings;
|
||||||
|
|
||||||
$event->update($validated);
|
$event->update($validated);
|
||||||
$event->load(['eventType', 'tenant']);
|
$event->load(['eventType', 'tenant']);
|
||||||
|
|||||||
@@ -30,8 +30,16 @@ class TenantPackageController extends Controller
|
|||||||
->get();
|
->get();
|
||||||
|
|
||||||
$packages->each(function ($package) {
|
$packages->each(function ($package) {
|
||||||
$package->remaining_events = $package->package->max_events_per_year - $package->used_events;
|
$pkg = $package->package;
|
||||||
$package->package_limits = $package->package->getAttributes(); // Or custom accessor for limits
|
$package->remaining_events = $pkg->max_events_per_year - $package->used_events;
|
||||||
|
$package->package_limits = array_merge(
|
||||||
|
$pkg->limits,
|
||||||
|
[
|
||||||
|
'branding_allowed' => $pkg->branding_allowed,
|
||||||
|
'watermark_allowed' => $pkg->watermark_allowed,
|
||||||
|
'features' => $pkg->features,
|
||||||
|
]
|
||||||
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
return response()->json([
|
return response()->json([
|
||||||
|
|||||||
@@ -46,6 +46,27 @@ class EventStoreRequest extends FormRequest
|
|||||||
'settings.branding.*' => ['nullable'],
|
'settings.branding.*' => ['nullable'],
|
||||||
'settings.engagement_mode' => ['nullable', Rule::in(['tasks', 'photo_only'])],
|
'settings.engagement_mode' => ['nullable', Rule::in(['tasks', 'photo_only'])],
|
||||||
'settings.guest_upload_visibility' => ['nullable', Rule::in(['review', 'immediate'])],
|
'settings.guest_upload_visibility' => ['nullable', Rule::in(['review', 'immediate'])],
|
||||||
|
'settings.watermark' => ['nullable', 'array'],
|
||||||
|
'settings.watermark.mode' => ['nullable', Rule::in(['base', 'custom', 'off'])],
|
||||||
|
'settings.watermark.asset' => ['nullable', 'string', 'max:500'],
|
||||||
|
'settings.watermark.asset_data_url' => ['nullable', 'string'],
|
||||||
|
'settings.watermark.position' => ['nullable', Rule::in([
|
||||||
|
'top-left',
|
||||||
|
'top-center',
|
||||||
|
'top-right',
|
||||||
|
'middle-left',
|
||||||
|
'center',
|
||||||
|
'middle-right',
|
||||||
|
'bottom-left',
|
||||||
|
'bottom-center',
|
||||||
|
'bottom-right',
|
||||||
|
])],
|
||||||
|
'settings.watermark.opacity' => ['nullable', 'numeric', 'min:0', 'max:1'],
|
||||||
|
'settings.watermark.scale' => ['nullable', 'numeric', 'min:0.05', 'max:1'],
|
||||||
|
'settings.watermark.padding' => ['nullable', 'integer', 'min:0', 'max:500'],
|
||||||
|
'settings.watermark.offset_x' => ['nullable', 'integer', 'min:-500', 'max:500'],
|
||||||
|
'settings.watermark.offset_y' => ['nullable', 'integer', 'min:-500', 'max:500'],
|
||||||
|
'settings.watermark_serve_originals' => ['nullable', 'boolean'],
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -79,6 +79,8 @@ class EventResource extends JsonResource
|
|||||||
'price' => $eventPackage->purchased_price,
|
'price' => $eventPackage->purchased_price,
|
||||||
'purchased_at' => $eventPackage->purchased_at?->toIso8601String(),
|
'purchased_at' => $eventPackage->purchased_at?->toIso8601String(),
|
||||||
'expires_at' => $eventPackage->gallery_expires_at?->toIso8601String(),
|
'expires_at' => $eventPackage->gallery_expires_at?->toIso8601String(),
|
||||||
|
'branding_allowed' => (bool) optional($eventPackage->package)->branding_allowed,
|
||||||
|
'watermark_allowed' => (bool) optional($eventPackage->package)->watermark_allowed,
|
||||||
] : null,
|
] : null,
|
||||||
'limits' => $eventPackage && $limitEvaluator
|
'limits' => $eventPackage && $limitEvaluator
|
||||||
? $limitEvaluator->summarizeEventPackage($eventPackage)
|
? $limitEvaluator->summarizeEventPackage($eventPackage)
|
||||||
|
|||||||
@@ -15,5 +15,7 @@ class WatermarkSetting extends Model
|
|||||||
'opacity',
|
'opacity',
|
||||||
'scale',
|
'scale',
|
||||||
'padding',
|
'padding',
|
||||||
|
'offset_x',
|
||||||
|
'offset_y',
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -33,6 +33,7 @@ class ImageHelper
|
|||||||
$h = imagesy($src);
|
$h = imagesy($src);
|
||||||
if ($w === 0 || $h === 0) {
|
if ($w === 0 || $h === 0) {
|
||||||
imagedestroy($src);
|
imagedestroy($src);
|
||||||
|
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -138,18 +139,44 @@ class ImageHelper
|
|||||||
$x = $padding;
|
$x = $padding;
|
||||||
$y = $padding;
|
$y = $padding;
|
||||||
|
|
||||||
if ($position === 'top-right') {
|
switch ($position) {
|
||||||
|
case 'top-right':
|
||||||
$x = max(0, $srcW - $targetW - $padding);
|
$x = max(0, $srcW - $targetW - $padding);
|
||||||
} elseif ($position === 'bottom-left') {
|
break;
|
||||||
$y = max(0, $srcH - $targetH - $padding);
|
case 'top-center':
|
||||||
} elseif ($position === 'bottom-right') {
|
$x = (int) max(0, ($srcW - $targetW) / 2);
|
||||||
$x = max(0, $srcW - $targetW - $padding);
|
break;
|
||||||
$y = max(0, $srcH - $targetH - $padding);
|
case 'middle-left':
|
||||||
} elseif ($position === 'center') {
|
$y = (int) max(0, ($srcH - $targetH) / 2);
|
||||||
|
break;
|
||||||
|
case 'center':
|
||||||
$x = (int) max(0, ($srcW - $targetW) / 2);
|
$x = (int) max(0, ($srcW - $targetW) / 2);
|
||||||
$y = (int) max(0, ($srcH - $targetH) / 2);
|
$y = (int) max(0, ($srcH - $targetH) / 2);
|
||||||
|
break;
|
||||||
|
case 'middle-right':
|
||||||
|
$x = max(0, $srcW - $targetW - $padding);
|
||||||
|
$y = (int) max(0, ($srcH - $targetH) / 2);
|
||||||
|
break;
|
||||||
|
case 'bottom-left':
|
||||||
|
$y = max(0, $srcH - $targetH - $padding);
|
||||||
|
break;
|
||||||
|
case 'bottom-center':
|
||||||
|
$x = (int) max(0, ($srcW - $targetW) / 2);
|
||||||
|
$y = max(0, $srcH - $targetH - $padding);
|
||||||
|
break;
|
||||||
|
case 'bottom-right':
|
||||||
|
$x = max(0, $srcW - $targetW - $padding);
|
||||||
|
$y = max(0, $srcH - $targetH - $padding);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$offsetX = (int) ($config['offset_x'] ?? 0);
|
||||||
|
$offsetY = (int) ($config['offset_y'] ?? 0);
|
||||||
|
$x = max(0, min($srcW - $targetW, $x + $offsetX));
|
||||||
|
$y = max(0, min($srcH - $targetH, $y + $offsetY));
|
||||||
|
|
||||||
$opacity = max(0.0, min(1.0, (float) ($config['opacity'] ?? 0.25)));
|
$opacity = max(0.0, min(1.0, (float) ($config['opacity'] ?? 0.25)));
|
||||||
$mergeOpacity = (int) round($opacity * 100); // imagecopymerge uses 0-100
|
$mergeOpacity = (int) round($opacity * 100); // imagecopymerge uses 0-100
|
||||||
|
|
||||||
|
|||||||
@@ -33,7 +33,7 @@ class WatermarkConfigResolver
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @return array{type:string, policy:string, asset?:string, position?:string, opacity?:float, scale?:float, padding?:int}
|
* @return array{type:string, policy:string, asset?:string, position?:string, opacity?:float, scale?:float, padding?:int, offset_x?:int, offset_y?:int}
|
||||||
*/
|
*/
|
||||||
public static function resolve(Event $event): array
|
public static function resolve(Event $event): array
|
||||||
{
|
{
|
||||||
@@ -61,6 +61,8 @@ class WatermarkConfigResolver
|
|||||||
'opacity' => $baseSetting?->opacity ?? config('watermark.base.opacity', 0.25),
|
'opacity' => $baseSetting?->opacity ?? config('watermark.base.opacity', 0.25),
|
||||||
'scale' => $baseSetting?->scale ?? config('watermark.base.scale', 0.2),
|
'scale' => $baseSetting?->scale ?? config('watermark.base.scale', 0.2),
|
||||||
'padding' => $baseSetting?->padding ?? config('watermark.base.padding', 16),
|
'padding' => $baseSetting?->padding ?? config('watermark.base.padding', 16),
|
||||||
|
'offset_x' => $baseSetting?->offset_x ?? config('watermark.base.offset_x', 0),
|
||||||
|
'offset_y' => $baseSetting?->offset_y ?? config('watermark.base.offset_y', 0),
|
||||||
];
|
];
|
||||||
|
|
||||||
$event->loadMissing('eventPackage.package', 'tenant');
|
$event->loadMissing('eventPackage.package', 'tenant');
|
||||||
@@ -91,6 +93,8 @@ class WatermarkConfigResolver
|
|||||||
$opacity = (float) ($source['opacity'] ?? $base['opacity'] ?? 0.25);
|
$opacity = (float) ($source['opacity'] ?? $base['opacity'] ?? 0.25);
|
||||||
$scale = (float) ($source['scale'] ?? $base['scale'] ?? 0.2);
|
$scale = (float) ($source['scale'] ?? $base['scale'] ?? 0.2);
|
||||||
$padding = (int) ($source['padding'] ?? $base['padding'] ?? 16);
|
$padding = (int) ($source['padding'] ?? $base['padding'] ?? 16);
|
||||||
|
$offsetX = (int) ($source['offset_x'] ?? $base['offset_x'] ?? 0);
|
||||||
|
$offsetY = (int) ($source['offset_y'] ?? $base['offset_y'] ?? 0);
|
||||||
|
|
||||||
$clamp = static fn (float $value, float $min, float $max) => max($min, min($max, $value));
|
$clamp = static fn (float $value, float $min, float $max) => max($min, min($max, $value));
|
||||||
|
|
||||||
@@ -102,6 +106,8 @@ class WatermarkConfigResolver
|
|||||||
'opacity' => $clamp($opacity, 0.0, 1.0),
|
'opacity' => $clamp($opacity, 0.0, 1.0),
|
||||||
'scale' => $clamp($scale, 0.05, 1.0),
|
'scale' => $clamp($scale, 0.05, 1.0),
|
||||||
'padding' => max(0, $padding),
|
'padding' => max(0, $padding),
|
||||||
|
'offset_x' => max(-500, min(500, $offsetX)),
|
||||||
|
'offset_y' => max(-500, min(500, $offsetY)),
|
||||||
'serve_originals' => $serveOriginals,
|
'serve_originals' => $serveOriginals,
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -12,9 +12,11 @@ return [
|
|||||||
*/
|
*/
|
||||||
'base' => [
|
'base' => [
|
||||||
'asset' => 'branding/fotospiel-watermark.png',
|
'asset' => 'branding/fotospiel-watermark.png',
|
||||||
'position' => 'bottom-right', // top-left, top-right, bottom-left, bottom-right, center
|
'position' => 'bottom-right', // top-left, top-center, top-right, middle-left, center, middle-right, bottom-left, bottom-center, bottom-right
|
||||||
'opacity' => 0.25, // 0..1
|
'opacity' => 0.25, // 0..1
|
||||||
'scale' => 0.2, // relative zur Bildbreite/-höhe
|
'scale' => 0.2, // relative zur Bildbreite/-höhe
|
||||||
'padding' => 16, // px vom Rand
|
'padding' => 16, // px vom Rand
|
||||||
|
'offset_x' => 0, // px Feintuning auf der X-Achse
|
||||||
|
'offset_y' => 0, // px Feintuning auf der Y-Achse
|
||||||
],
|
],
|
||||||
];
|
];
|
||||||
|
|||||||
@@ -0,0 +1,38 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
use Illuminate\Database\Migrations\Migration;
|
||||||
|
use Illuminate\Database\Schema\Blueprint;
|
||||||
|
use Illuminate\Support\Facades\Schema;
|
||||||
|
|
||||||
|
return new class extends Migration
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* Run the migrations.
|
||||||
|
*/
|
||||||
|
public function up(): void
|
||||||
|
{
|
||||||
|
Schema::table('watermark_settings', function (Blueprint $table) {
|
||||||
|
if (! Schema::hasColumn('watermark_settings', 'offset_x')) {
|
||||||
|
$table->integer('offset_x')->default(0)->after('padding');
|
||||||
|
}
|
||||||
|
if (! Schema::hasColumn('watermark_settings', 'offset_y')) {
|
||||||
|
$table->integer('offset_y')->default(0)->after('offset_x');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reverse the migrations.
|
||||||
|
*/
|
||||||
|
public function down(): void
|
||||||
|
{
|
||||||
|
Schema::table('watermark_settings', function (Blueprint $table) {
|
||||||
|
if (Schema::hasColumn('watermark_settings', 'offset_y')) {
|
||||||
|
$table->dropColumn('offset_y');
|
||||||
|
}
|
||||||
|
if (Schema::hasColumn('watermark_settings', 'offset_x')) {
|
||||||
|
$table->dropColumn('offset_x');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -80,6 +80,9 @@ export type TenantEvent = {
|
|||||||
settings?: Record<string, unknown> & {
|
settings?: Record<string, unknown> & {
|
||||||
engagement_mode?: 'tasks' | 'photo_only';
|
engagement_mode?: 'tasks' | 'photo_only';
|
||||||
guest_upload_visibility?: 'review' | 'immediate';
|
guest_upload_visibility?: 'review' | 'immediate';
|
||||||
|
watermark?: WatermarkSettings;
|
||||||
|
watermark_allowed?: boolean | null;
|
||||||
|
watermark_serve_originals?: boolean | null;
|
||||||
};
|
};
|
||||||
package?: {
|
package?: {
|
||||||
id: number | string | null;
|
id: number | string | null;
|
||||||
@@ -87,6 +90,8 @@ export type TenantEvent = {
|
|||||||
price: number | null;
|
price: number | null;
|
||||||
purchased_at: string | null;
|
purchased_at: string | null;
|
||||||
expires_at: string | null;
|
expires_at: string | null;
|
||||||
|
branding_allowed?: boolean | null;
|
||||||
|
watermark_allowed?: boolean | null;
|
||||||
} | null;
|
} | null;
|
||||||
limits?: EventLimitSummary | null;
|
limits?: EventLimitSummary | null;
|
||||||
addons?: EventAddonSummary[];
|
addons?: EventAddonSummary[];
|
||||||
@@ -215,6 +220,27 @@ export type TenantFont = {
|
|||||||
variants: TenantFontVariant[];
|
variants: TenantFontVariant[];
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export type WatermarkSettings = {
|
||||||
|
mode?: 'base' | 'custom' | 'off';
|
||||||
|
asset?: string | null;
|
||||||
|
asset_data_url?: string | null;
|
||||||
|
position?:
|
||||||
|
| 'top-left'
|
||||||
|
| 'top-center'
|
||||||
|
| 'top-right'
|
||||||
|
| 'middle-left'
|
||||||
|
| 'center'
|
||||||
|
| 'middle-right'
|
||||||
|
| 'bottom-left'
|
||||||
|
| 'bottom-center'
|
||||||
|
| 'bottom-right';
|
||||||
|
opacity?: number;
|
||||||
|
scale?: number;
|
||||||
|
padding?: number;
|
||||||
|
offset_x?: number;
|
||||||
|
offset_y?: number;
|
||||||
|
};
|
||||||
|
|
||||||
export type EventAddonSummary = {
|
export type EventAddonSummary = {
|
||||||
id: number;
|
id: number;
|
||||||
key: string;
|
key: string;
|
||||||
@@ -380,6 +406,9 @@ export type TenantPackageSummary = {
|
|||||||
purchased_at: string | null;
|
purchased_at: string | null;
|
||||||
expires_at: string | null;
|
expires_at: string | null;
|
||||||
package_limits: Record<string, unknown> | null;
|
package_limits: Record<string, unknown> | null;
|
||||||
|
branding_allowed?: boolean | null;
|
||||||
|
watermark_allowed?: boolean | null;
|
||||||
|
features?: string[] | null;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type NotificationPreferences = Record<string, boolean>;
|
export type NotificationPreferences = Record<string, boolean>;
|
||||||
@@ -653,7 +682,10 @@ type EventSavePayload = {
|
|||||||
status?: 'draft' | 'published' | 'archived';
|
status?: 'draft' | 'published' | 'archived';
|
||||||
is_active?: boolean;
|
is_active?: boolean;
|
||||||
package_id?: number;
|
package_id?: number;
|
||||||
settings?: Record<string, unknown>;
|
settings?: Record<string, unknown> & {
|
||||||
|
watermark?: WatermarkSettings;
|
||||||
|
watermark_serve_originals?: boolean | null;
|
||||||
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
type JsonOrThrowOptions = {
|
type JsonOrThrowOptions = {
|
||||||
@@ -916,6 +948,9 @@ function normalizeTenantPackage(pkg: JsonValue): TenantPackageSummary {
|
|||||||
purchased_at: pkg.purchased_at ?? pkg.created_at ?? null,
|
purchased_at: pkg.purchased_at ?? pkg.created_at ?? null,
|
||||||
expires_at: pkg.expires_at ?? pkg.valid_until ?? null,
|
expires_at: pkg.expires_at ?? pkg.valid_until ?? null,
|
||||||
package_limits: pkg.package_limits ?? packageData.limits ?? null,
|
package_limits: pkg.package_limits ?? packageData.limits ?? null,
|
||||||
|
branding_allowed: pkg.branding_allowed ?? packageData.branding_allowed ?? null,
|
||||||
|
watermark_allowed: pkg.watermark_allowed ?? packageData.watermark_allowed ?? null,
|
||||||
|
features: pkg.features ?? packageData.features ?? null,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -28,5 +28,7 @@ export const ADMIN_EVENT_MEMBERS_PATH = (slug: string): string => adminPath(`/mo
|
|||||||
export const ADMIN_EVENT_TASKS_PATH = (slug: string): string => adminPath(`/mobile/events/${encodeURIComponent(slug)}/tasks`);
|
export const ADMIN_EVENT_TASKS_PATH = (slug: string): string => adminPath(`/mobile/events/${encodeURIComponent(slug)}/tasks`);
|
||||||
export const ADMIN_EVENT_INVITES_PATH = (slug: string): string => adminPath(`/mobile/events/${encodeURIComponent(slug)}/qr`);
|
export const ADMIN_EVENT_INVITES_PATH = (slug: string): string => adminPath(`/mobile/events/${encodeURIComponent(slug)}/qr`);
|
||||||
export const ADMIN_EVENT_PHOTOBOOTH_PATH = (slug: string): string => adminPath(`/mobile/events/${encodeURIComponent(slug)}/photobooth`);
|
export const ADMIN_EVENT_PHOTOBOOTH_PATH = (slug: string): string => adminPath(`/mobile/events/${encodeURIComponent(slug)}/photobooth`);
|
||||||
|
export const ADMIN_EVENT_GUEST_NOTIFICATIONS_PATH = (slug: string): string =>
|
||||||
|
adminPath(`/mobile/events/${encodeURIComponent(slug)}/guest-notifications`);
|
||||||
export const ADMIN_EVENT_RECAP_PATH = (slug: string): string => adminPath(`/mobile/events/${encodeURIComponent(slug)}`);
|
export const ADMIN_EVENT_RECAP_PATH = (slug: string): string => adminPath(`/mobile/events/${encodeURIComponent(slug)}`);
|
||||||
export const ADMIN_EVENT_BRANDING_PATH = (slug: string): string => adminPath(`/mobile/events/${encodeURIComponent(slug)}/branding`);
|
export const ADMIN_EVENT_BRANDING_PATH = (slug: string): string => adminPath(`/mobile/events/${encodeURIComponent(slug)}/branding`);
|
||||||
|
|||||||
@@ -41,6 +41,7 @@ const resources = {
|
|||||||
} as const;
|
} as const;
|
||||||
|
|
||||||
const FALLBACK_LOCALE = 'de';
|
const FALLBACK_LOCALE = 'de';
|
||||||
|
const NAMESPACES = ['common', 'dashboard', 'onboarding', 'management', 'settings', 'auth', 'mobile'] as const;
|
||||||
|
|
||||||
if (!i18n.isInitialized) {
|
if (!i18n.isInitialized) {
|
||||||
i18n
|
i18n
|
||||||
@@ -51,7 +52,9 @@ if (!i18n.isInitialized) {
|
|||||||
fallbackLng: FALLBACK_LOCALE,
|
fallbackLng: FALLBACK_LOCALE,
|
||||||
lng: document.documentElement.lang || undefined,
|
lng: document.documentElement.lang || undefined,
|
||||||
supportedLngs: ['de', 'en'],
|
supportedLngs: ['de', 'en'],
|
||||||
|
ns: NAMESPACES,
|
||||||
defaultNS: DEFAULT_NAMESPACE,
|
defaultNS: DEFAULT_NAMESPACE,
|
||||||
|
fallbackNS: DEFAULT_NAMESPACE,
|
||||||
interpolation: {
|
interpolation: {
|
||||||
escapeValue: false,
|
escapeValue: false,
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -30,6 +30,14 @@
|
|||||||
"more": "Weitere Einträge konnten nicht geladen werden."
|
"more": "Weitere Einträge konnten nicht geladen werden."
|
||||||
},
|
},
|
||||||
"sections": {
|
"sections": {
|
||||||
|
"invoices": {
|
||||||
|
"title": "Rechnungen & Zahlungen",
|
||||||
|
"empty": "Keine Zahlungen gefunden."
|
||||||
|
},
|
||||||
|
"addOns": {
|
||||||
|
"title": "Add-ons",
|
||||||
|
"empty": "Keine Add-ons gebucht."
|
||||||
|
},
|
||||||
"overview": {
|
"overview": {
|
||||||
"title": "Paketübersicht",
|
"title": "Paketübersicht",
|
||||||
"description": "Dein aktives Paket und die wichtigsten Kennzahlen.",
|
"description": "Dein aktives Paket und die wichtigsten Kennzahlen.",
|
||||||
@@ -132,6 +140,15 @@
|
|||||||
"loadMore": "Weitere Add-ons laden",
|
"loadMore": "Weitere Add-ons laden",
|
||||||
"loadingMore": "Add-ons werden geladen…"
|
"loadingMore": "Add-ons werden geladen…"
|
||||||
},
|
},
|
||||||
|
"features": {
|
||||||
|
"branding": "Branding",
|
||||||
|
"watermark": "Wasserzeichen",
|
||||||
|
"maxPhotos": "Max. Fotos",
|
||||||
|
"maxGuests": "Max. Gäste",
|
||||||
|
"galleryDays": "Galerietage",
|
||||||
|
"maxTasks": "Max. Aufgaben",
|
||||||
|
"featureList": "Enthaltene Features"
|
||||||
|
},
|
||||||
"packages": {
|
"packages": {
|
||||||
"title": "Paket-Historie",
|
"title": "Paket-Historie",
|
||||||
"description": "Übersicht über aktive und vergangene Pakete.",
|
"description": "Übersicht über aktive und vergangene Pakete.",
|
||||||
@@ -282,6 +299,7 @@
|
|||||||
"qr": "QR-Code-Layouts",
|
"qr": "QR-Code-Layouts",
|
||||||
"images": "Bildverwaltung",
|
"images": "Bildverwaltung",
|
||||||
"guests": "Gästeverwaltung",
|
"guests": "Gästeverwaltung",
|
||||||
|
"guestMessages": "Gästebenachrichtigungen",
|
||||||
"branding": "Branding & Design",
|
"branding": "Branding & Design",
|
||||||
"photobooth": "Photobooth",
|
"photobooth": "Photobooth",
|
||||||
"recap": "Recap & Archiv"
|
"recap": "Recap & Archiv"
|
||||||
@@ -1782,8 +1800,60 @@
|
|||||||
},
|
},
|
||||||
"errors": {
|
"errors": {
|
||||||
"missingSlug": "Kein Event-Slug angegeben.",
|
"missingSlug": "Kein Event-Slug angegeben.",
|
||||||
"loadFailed": "Tasks konnten nicht geladen werden.",
|
"missingType": "Event-Typ fehlt. Bitte speichere das Event erneut im Admin.",
|
||||||
"saveFailed": "Task konnte nicht gespeichert werden."
|
"loadFailed": "Event-Daten konnten nicht geladen werden.",
|
||||||
|
"saveFailed": "Event konnte nicht gespeichert werden."
|
||||||
|
},
|
||||||
|
"branding": {
|
||||||
|
"titleShort": "Branding",
|
||||||
|
"previewTitle": "Guest-App-Vorschau",
|
||||||
|
"previewSubtitle": "Aktuelle Farben & Schriften",
|
||||||
|
"primary": "Primärfarbe",
|
||||||
|
"accent": "Akzentfarbe",
|
||||||
|
"colors": "Farben",
|
||||||
|
"primaryColor": "Primärfarbe",
|
||||||
|
"accentColor": "Akzentfarbe",
|
||||||
|
"fonts": "Schriften",
|
||||||
|
"headingFont": "Überschrift-Schrift",
|
||||||
|
"bodyFont": "Fließtext-Schrift",
|
||||||
|
"logo": "Logo",
|
||||||
|
"replaceLogo": "Logo ersetzen",
|
||||||
|
"removeLogo": "Entfernen",
|
||||||
|
"logoHint": "Lade ein Logo hoch, um Einladungen und QR-Poster zu branden.",
|
||||||
|
"uploadLogo": "Logo hochladen (max. 1 MB)",
|
||||||
|
"logoTooLarge": "Logo muss unter 1 MB sein.",
|
||||||
|
"save": "Branding speichern",
|
||||||
|
"saving": "Speichere...",
|
||||||
|
"saveSuccess": "Branding gespeichert.",
|
||||||
|
"reset": "Zurücksetzen",
|
||||||
|
"fontPicker": "Schrift auswählen",
|
||||||
|
"noFonts": "Keine Schriftarten gefunden."
|
||||||
|
},
|
||||||
|
"watermark": {
|
||||||
|
"tab": "Wasserzeichen",
|
||||||
|
"title": "Wasserzeichen",
|
||||||
|
"previewTitle": "Wasserzeichen-Vorschau",
|
||||||
|
"mode": "Modus",
|
||||||
|
"modeBase": "Standard-Wasserzeichen",
|
||||||
|
"modeCustom": "Eigenes Wasserzeichen",
|
||||||
|
"modeOff": "Aus",
|
||||||
|
"upload": "Wasserzeichen hochladen",
|
||||||
|
"uploadCta": "PNG/SVG/JPG (max. 3 MB)",
|
||||||
|
"replace": "Wasserzeichen ersetzen",
|
||||||
|
"uploadHint": "PNG mit Transparenz empfohlen.",
|
||||||
|
"placement": "Position & Größe",
|
||||||
|
"size": "Größe",
|
||||||
|
"opacity": "Transparenz",
|
||||||
|
"padding": "Abstand",
|
||||||
|
"offset": "Feinjustierung X",
|
||||||
|
"offsetX": "X-Achse",
|
||||||
|
"offsetY": "Y-Achse",
|
||||||
|
"lockedBranding": "Eigenes Wasserzeichen ist in diesem Paket gesperrt. Standard wird genutzt.",
|
||||||
|
"lockedDisabled": "Wasserzeichen sind in diesem Paket deaktiviert.",
|
||||||
|
"errors": {
|
||||||
|
"noAsset": "Bitte zuerst ein Wasserzeichen hochladen.",
|
||||||
|
"fileTooLarge": "Wasserzeichen muss kleiner als 3 MB sein."
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"tasks": {
|
"tasks": {
|
||||||
"disabledTitle": "Task-Modus ist für dieses Event aus",
|
"disabledTitle": "Task-Modus ist für dieses Event aus",
|
||||||
@@ -1932,6 +2002,98 @@
|
|||||||
"pref": {}
|
"pref": {}
|
||||||
},
|
},
|
||||||
"events": {
|
"events": {
|
||||||
|
"detail": {
|
||||||
|
"kpi": {
|
||||||
|
"tasks": "Aktive Aufgaben",
|
||||||
|
"guests": "Registrierte Gäste",
|
||||||
|
"photos": "Hochgeladene Bilder"
|
||||||
|
},
|
||||||
|
"pickEvent": "Event auswählen",
|
||||||
|
"active": "Aktiv",
|
||||||
|
"managementTitle": "Event-Verwaltung",
|
||||||
|
"dateTbd": "Datum folgt",
|
||||||
|
"locationPlaceholder": "Ort"
|
||||||
|
},
|
||||||
|
"quick": {
|
||||||
|
"tasks": "Aufgaben & Checklisten",
|
||||||
|
"qr": "QR-Code-Layouts",
|
||||||
|
"images": "Bildverwaltung",
|
||||||
|
"guests": "Gästeverwaltung",
|
||||||
|
"guestMessages": "Gästebenachrichtigungen",
|
||||||
|
"branding": "Branding & Design",
|
||||||
|
"photobooth": "Photobooth",
|
||||||
|
"recap": "Recap & Archiv"
|
||||||
|
},
|
||||||
|
"status": {
|
||||||
|
"published": "Live",
|
||||||
|
"draft": "Entwurf",
|
||||||
|
"archived": "Archiviert"
|
||||||
|
},
|
||||||
|
"errors": {
|
||||||
|
"missingSlug": "Kein Event-Slug angegeben.",
|
||||||
|
"missingType": "Event-Typ fehlt. Bitte speichere das Event erneut im Admin.",
|
||||||
|
"loadFailed": "Event-Daten konnten nicht geladen werden.",
|
||||||
|
"saveFailed": "Event konnte nicht gespeichert werden.",
|
||||||
|
"notFoundTitle": "Event nicht gefunden",
|
||||||
|
"notFoundBody": "Ohne gültige Kennung können wir keine Daten laden. Kehre zur Eventliste zurück und wähle dort ein Event aus.",
|
||||||
|
"toggleFailed": "Status konnte nicht angepasst werden.",
|
||||||
|
"checkoutMissing": "Checkout konnte nicht gestartet werden.",
|
||||||
|
"checkoutFailed": "Add-on Checkout fehlgeschlagen."
|
||||||
|
},
|
||||||
|
"placeholders": {
|
||||||
|
"untitled": "Unbenanntes Event"
|
||||||
|
},
|
||||||
|
"branding": {
|
||||||
|
"titleShort": "Branding",
|
||||||
|
"previewTitle": "Guest-App-Vorschau",
|
||||||
|
"previewSubtitle": "Aktuelle Farben & Schriften",
|
||||||
|
"primary": "Primärfarbe",
|
||||||
|
"accent": "Akzentfarbe",
|
||||||
|
"colors": "Farben",
|
||||||
|
"primaryColor": "Primärfarbe",
|
||||||
|
"accentColor": "Akzentfarbe",
|
||||||
|
"fonts": "Schriften",
|
||||||
|
"headingFont": "Überschrift-Schrift",
|
||||||
|
"bodyFont": "Fließtext-Schrift",
|
||||||
|
"logo": "Logo",
|
||||||
|
"replaceLogo": "Logo ersetzen",
|
||||||
|
"removeLogo": "Entfernen",
|
||||||
|
"logoHint": "Lade ein Logo hoch, um Einladungen und QR-Poster zu branden.",
|
||||||
|
"uploadLogo": "Logo hochladen (max. 1 MB)",
|
||||||
|
"logoTooLarge": "Logo muss unter 1 MB sein.",
|
||||||
|
"save": "Branding speichern",
|
||||||
|
"saving": "Speichere...",
|
||||||
|
"saveSuccess": "Branding gespeichert.",
|
||||||
|
"reset": "Zurücksetzen",
|
||||||
|
"fontPicker": "Schrift auswählen",
|
||||||
|
"noFonts": "Keine Schriftarten gefunden."
|
||||||
|
},
|
||||||
|
"watermark": {
|
||||||
|
"tab": "Wasserzeichen",
|
||||||
|
"title": "Wasserzeichen",
|
||||||
|
"previewTitle": "Wasserzeichen-Vorschau",
|
||||||
|
"mode": "Modus",
|
||||||
|
"modeBase": "Standard-Wasserzeichen",
|
||||||
|
"modeCustom": "Eigenes Wasserzeichen",
|
||||||
|
"modeOff": "Aus",
|
||||||
|
"upload": "Wasserzeichen hochladen",
|
||||||
|
"uploadCta": "PNG/SVG/JPG (max. 3 MB)",
|
||||||
|
"replace": "Wasserzeichen ersetzen",
|
||||||
|
"uploadHint": "PNG mit Transparenz empfohlen.",
|
||||||
|
"placement": "Position & Größe",
|
||||||
|
"size": "Größe",
|
||||||
|
"opacity": "Transparenz",
|
||||||
|
"padding": "Abstand",
|
||||||
|
"offset": "Feinjustierung X",
|
||||||
|
"offsetX": "X-Achse",
|
||||||
|
"offsetY": "Y-Achse",
|
||||||
|
"lockedBranding": "Eigenes Wasserzeichen ist in diesem Paket gesperrt. Standard wird genutzt.",
|
||||||
|
"lockedDisabled": "Wasserzeichen sind in diesem Paket deaktiviert.",
|
||||||
|
"errors": {
|
||||||
|
"noAsset": "Bitte zuerst ein Wasserzeichen hochladen.",
|
||||||
|
"fileTooLarge": "Wasserzeichen muss kleiner als 3 MB sein."
|
||||||
|
}
|
||||||
|
},
|
||||||
"qr": {
|
"qr": {
|
||||||
"title": "QR-Code & Druck-Layouts",
|
"title": "QR-Code & Druck-Layouts",
|
||||||
"heroTitle": "Einlass-QR-Code",
|
"heroTitle": "Einlass-QR-Code",
|
||||||
@@ -2043,5 +2205,57 @@
|
|||||||
"empty": "Keine Benachrichtigungen vorhanden.",
|
"empty": "Keine Benachrichtigungen vorhanden.",
|
||||||
"filterByEvent": "Nach Event filtern",
|
"filterByEvent": "Nach Event filtern",
|
||||||
"unknownEvent": "Event"
|
"unknownEvent": "Event"
|
||||||
|
},
|
||||||
|
"guestMessages": {
|
||||||
|
"title": "Gästebenachrichtigungen",
|
||||||
|
"subtitle": "Schicke Push-Hinweise an Teilnehmende",
|
||||||
|
"composeTitle": "Nachricht senden",
|
||||||
|
"errorLoad": "Nachrichten konnten nicht geladen werden.",
|
||||||
|
"errorSend": "Nachricht konnte nicht gesendet werden.",
|
||||||
|
"sendSuccess": "Benachrichtigung an Gäste gesendet.",
|
||||||
|
"historyTitle": "Neueste Nachrichten",
|
||||||
|
"empty": "Noch keine Gästebenachrichtigungen.",
|
||||||
|
"status": {
|
||||||
|
"active": "Aktiv",
|
||||||
|
"draft": "Entwurf",
|
||||||
|
"archived": "Archiviert"
|
||||||
|
},
|
||||||
|
"audience": {
|
||||||
|
"all": "Alle Gäste",
|
||||||
|
"guest": "Einzelner Gast"
|
||||||
|
},
|
||||||
|
"type": {
|
||||||
|
"broadcast": "Broadcast",
|
||||||
|
"support_tip": "Support-Hinweis",
|
||||||
|
"upload_alert": "Upload-Status",
|
||||||
|
"achievement_major": "Achievement",
|
||||||
|
"photo_activity": "Foto-Aktivität",
|
||||||
|
"feedback_request": "Feedback-Anfrage"
|
||||||
|
},
|
||||||
|
"history": {
|
||||||
|
"untitled": "Ohne Titel",
|
||||||
|
"noBody": "Kein Nachrichtentext."
|
||||||
|
},
|
||||||
|
"form": {
|
||||||
|
"title": "Titel",
|
||||||
|
"titlePlaceholder": "Galerie-Erinnerung, Upload-Nudge ...",
|
||||||
|
"message": "Nachricht",
|
||||||
|
"messagePlaceholder": "Schreibe eine kurze Notiz an deine Gäste.",
|
||||||
|
"audience": "Zielgruppe",
|
||||||
|
"audienceAll": "Alle Gäste",
|
||||||
|
"audienceGuest": "Einzelner Gast (Name oder Gerät)",
|
||||||
|
"guestIdentifier": "Gastname oder Geräte-ID",
|
||||||
|
"guestPlaceholder": "z. B. Alex oder Gerätetoken",
|
||||||
|
"cta": "CTA (optional)",
|
||||||
|
"ctaLabel": "Button-Label",
|
||||||
|
"ctaUrl": "Button-Link",
|
||||||
|
"ctaHint": "Beide Felder werden benötigt, um einen Button zu senden.",
|
||||||
|
"ctaError": "CTA-Label und Link müssen zusammen ausgefüllt werden.",
|
||||||
|
"expiresIn": "Läuft ab in (Minuten)",
|
||||||
|
"priority": "Priorität",
|
||||||
|
"priorityValue": "Priorität {{value}}",
|
||||||
|
"send": "Benachrichtigung senden",
|
||||||
|
"validation": "Füge Titel, Nachricht und ggf. einen Ziel-Gast hinzu."
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -30,6 +30,14 @@
|
|||||||
"more": "Unable to load more entries."
|
"more": "Unable to load more entries."
|
||||||
},
|
},
|
||||||
"sections": {
|
"sections": {
|
||||||
|
"invoices": {
|
||||||
|
"title": "Invoices & payments",
|
||||||
|
"empty": "No payments found."
|
||||||
|
},
|
||||||
|
"addOns": {
|
||||||
|
"title": "Add-ons",
|
||||||
|
"empty": "No add-ons booked."
|
||||||
|
},
|
||||||
"overview": {
|
"overview": {
|
||||||
"title": "Package overview",
|
"title": "Package overview",
|
||||||
"description": "Your active package and the most important metrics.",
|
"description": "Your active package and the most important metrics.",
|
||||||
@@ -132,6 +140,15 @@
|
|||||||
"loadMore": "Load more add-ons",
|
"loadMore": "Load more add-ons",
|
||||||
"loadingMore": "Loading add-ons…"
|
"loadingMore": "Loading add-ons…"
|
||||||
},
|
},
|
||||||
|
"features": {
|
||||||
|
"branding": "Branding",
|
||||||
|
"watermark": "Watermark",
|
||||||
|
"maxPhotos": "Max photos",
|
||||||
|
"maxGuests": "Max guests",
|
||||||
|
"galleryDays": "Gallery days",
|
||||||
|
"maxTasks": "Max tasks",
|
||||||
|
"featureList": "Included features"
|
||||||
|
},
|
||||||
"packages": {
|
"packages": {
|
||||||
"title": "Package history",
|
"title": "Package history",
|
||||||
"description": "Overview of current and past packages.",
|
"description": "Overview of current and past packages.",
|
||||||
@@ -277,6 +294,7 @@
|
|||||||
"qr": "QR code layouts",
|
"qr": "QR code layouts",
|
||||||
"images": "Image management",
|
"images": "Image management",
|
||||||
"guests": "Guest management",
|
"guests": "Guest management",
|
||||||
|
"guestMessages": "Guest messages",
|
||||||
"branding": "Branding & theme",
|
"branding": "Branding & theme",
|
||||||
"photobooth": "Photobooth",
|
"photobooth": "Photobooth",
|
||||||
"recap": "Recap & archive"
|
"recap": "Recap & archive"
|
||||||
@@ -1802,8 +1820,60 @@
|
|||||||
},
|
},
|
||||||
"errors": {
|
"errors": {
|
||||||
"missingSlug": "No event slug provided.",
|
"missingSlug": "No event slug provided.",
|
||||||
"loadFailed": "Tasks could not be loaded.",
|
"missingType": "Event type is missing. Please save the event again in the admin.",
|
||||||
"saveFailed": "Task could not be saved."
|
"loadFailed": "Event data could not be loaded.",
|
||||||
|
"saveFailed": "Event could not be saved."
|
||||||
|
},
|
||||||
|
"branding": {
|
||||||
|
"titleShort": "Branding",
|
||||||
|
"previewTitle": "Guest app preview",
|
||||||
|
"previewSubtitle": "Current colors & fonts",
|
||||||
|
"primary": "Primary",
|
||||||
|
"accent": "Accent",
|
||||||
|
"colors": "Colors",
|
||||||
|
"primaryColor": "Primary color",
|
||||||
|
"accentColor": "Accent color",
|
||||||
|
"fonts": "Fonts",
|
||||||
|
"headingFont": "Headline font",
|
||||||
|
"bodyFont": "Body font",
|
||||||
|
"logo": "Logo",
|
||||||
|
"replaceLogo": "Replace logo",
|
||||||
|
"removeLogo": "Remove",
|
||||||
|
"logoHint": "Upload a logo to brand guest invites and QR posters.",
|
||||||
|
"uploadLogo": "Upload logo (max. 1 MB)",
|
||||||
|
"logoTooLarge": "Logo must be under 1 MB.",
|
||||||
|
"save": "Save branding",
|
||||||
|
"saving": "Saving...",
|
||||||
|
"saveSuccess": "Branding saved.",
|
||||||
|
"reset": "Reset to defaults",
|
||||||
|
"fontPicker": "Select font",
|
||||||
|
"noFonts": "No fonts found."
|
||||||
|
},
|
||||||
|
"watermark": {
|
||||||
|
"tab": "Watermark",
|
||||||
|
"title": "Watermark",
|
||||||
|
"previewTitle": "Watermark Preview",
|
||||||
|
"mode": "Mode",
|
||||||
|
"modeBase": "Base watermark",
|
||||||
|
"modeCustom": "Custom watermark",
|
||||||
|
"modeOff": "Off",
|
||||||
|
"upload": "Upload watermark",
|
||||||
|
"uploadCta": "PNG/SVG/JPG (max. 3 MB)",
|
||||||
|
"replace": "Replace watermark",
|
||||||
|
"uploadHint": "PNG with transparency recommended.",
|
||||||
|
"placement": "Placement & size",
|
||||||
|
"size": "Size",
|
||||||
|
"opacity": "Opacity",
|
||||||
|
"padding": "Padding",
|
||||||
|
"offset": "Offset X",
|
||||||
|
"offsetX": "X-axis",
|
||||||
|
"offsetY": "Y-axis",
|
||||||
|
"lockedBranding": "Custom watermark locked by this package. Using base watermark.",
|
||||||
|
"lockedDisabled": "Watermarks are disabled for this package.",
|
||||||
|
"errors": {
|
||||||
|
"noAsset": "Please upload a watermark image first.",
|
||||||
|
"fileTooLarge": "Watermark must be under 3 MB."
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"tasks": {
|
"tasks": {
|
||||||
"disabledTitle": "Task mode is off for this event",
|
"disabledTitle": "Task mode is off for this event",
|
||||||
@@ -1952,6 +2022,98 @@
|
|||||||
"pref": {}
|
"pref": {}
|
||||||
},
|
},
|
||||||
"events": {
|
"events": {
|
||||||
|
"detail": {
|
||||||
|
"kpi": {
|
||||||
|
"tasks": "Active tasks",
|
||||||
|
"guests": "Guests registered",
|
||||||
|
"photos": "Images uploaded"
|
||||||
|
},
|
||||||
|
"pickEvent": "Select event",
|
||||||
|
"active": "Active",
|
||||||
|
"managementTitle": "Event management",
|
||||||
|
"dateTbd": "Date tbd",
|
||||||
|
"locationPlaceholder": "Location"
|
||||||
|
},
|
||||||
|
"quick": {
|
||||||
|
"tasks": "Tasks & checklists",
|
||||||
|
"qr": "QR code layouts",
|
||||||
|
"images": "Image management",
|
||||||
|
"guests": "Guest management",
|
||||||
|
"guestMessages": "Guest messages",
|
||||||
|
"branding": "Branding & theme",
|
||||||
|
"photobooth": "Photobooth",
|
||||||
|
"recap": "Recap & archive"
|
||||||
|
},
|
||||||
|
"status": {
|
||||||
|
"published": "Live",
|
||||||
|
"draft": "Draft",
|
||||||
|
"archived": "Archived"
|
||||||
|
},
|
||||||
|
"errors": {
|
||||||
|
"missingSlug": "No event slug provided.",
|
||||||
|
"missingType": "Event type is missing. Please save the event again in the admin.",
|
||||||
|
"loadFailed": "Event data could not be loaded.",
|
||||||
|
"saveFailed": "Event could not be saved.",
|
||||||
|
"notFoundTitle": "Event not found",
|
||||||
|
"notFoundBody": "Without a valid identifier we cannot load data. Return to the event list and pick an event there.",
|
||||||
|
"toggleFailed": "Status could not be updated.",
|
||||||
|
"checkoutMissing": "Checkout could not be started.",
|
||||||
|
"checkoutFailed": "Add-on checkout failed."
|
||||||
|
},
|
||||||
|
"placeholders": {
|
||||||
|
"untitled": "Untitled event"
|
||||||
|
},
|
||||||
|
"branding": {
|
||||||
|
"titleShort": "Branding",
|
||||||
|
"previewTitle": "Guest app preview",
|
||||||
|
"previewSubtitle": "Current colors & fonts",
|
||||||
|
"primary": "Primary",
|
||||||
|
"accent": "Accent",
|
||||||
|
"colors": "Colors",
|
||||||
|
"primaryColor": "Primary color",
|
||||||
|
"accentColor": "Accent color",
|
||||||
|
"fonts": "Fonts",
|
||||||
|
"headingFont": "Headline font",
|
||||||
|
"bodyFont": "Body font",
|
||||||
|
"logo": "Logo",
|
||||||
|
"replaceLogo": "Replace logo",
|
||||||
|
"removeLogo": "Remove",
|
||||||
|
"logoHint": "Upload a logo to brand guest invites and QR posters.",
|
||||||
|
"uploadLogo": "Upload logo (max. 1 MB)",
|
||||||
|
"logoTooLarge": "Logo must be under 1 MB.",
|
||||||
|
"save": "Save branding",
|
||||||
|
"saving": "Saving...",
|
||||||
|
"saveSuccess": "Branding saved.",
|
||||||
|
"reset": "Reset to defaults",
|
||||||
|
"fontPicker": "Select font",
|
||||||
|
"noFonts": "No fonts found."
|
||||||
|
},
|
||||||
|
"watermark": {
|
||||||
|
"tab": "Watermark",
|
||||||
|
"title": "Watermark",
|
||||||
|
"previewTitle": "Watermark Preview",
|
||||||
|
"mode": "Mode",
|
||||||
|
"modeBase": "Base watermark",
|
||||||
|
"modeCustom": "Custom watermark",
|
||||||
|
"modeOff": "Off",
|
||||||
|
"upload": "Upload watermark",
|
||||||
|
"uploadCta": "PNG/SVG/JPG (max. 3 MB)",
|
||||||
|
"replace": "Replace watermark",
|
||||||
|
"uploadHint": "PNG with transparency recommended.",
|
||||||
|
"placement": "Placement & size",
|
||||||
|
"size": "Size",
|
||||||
|
"opacity": "Opacity",
|
||||||
|
"padding": "Padding",
|
||||||
|
"offset": "Offset X",
|
||||||
|
"offsetX": "X-axis",
|
||||||
|
"offsetY": "Y-axis",
|
||||||
|
"lockedBranding": "Custom watermark locked by this package. Using base watermark.",
|
||||||
|
"lockedDisabled": "Watermarks are disabled for this package.",
|
||||||
|
"errors": {
|
||||||
|
"noAsset": "Please upload a watermark image first.",
|
||||||
|
"fileTooLarge": "Watermark must be under 3 MB."
|
||||||
|
}
|
||||||
|
},
|
||||||
"qr": {
|
"qr": {
|
||||||
"title": "QR Code & Print Layouts",
|
"title": "QR Code & Print Layouts",
|
||||||
"heroTitle": "Entrance QR Code",
|
"heroTitle": "Entrance QR Code",
|
||||||
@@ -2063,5 +2225,57 @@
|
|||||||
"empty": "No notifications yet.",
|
"empty": "No notifications yet.",
|
||||||
"filterByEvent": "Filter by event",
|
"filterByEvent": "Filter by event",
|
||||||
"unknownEvent": "Event"
|
"unknownEvent": "Event"
|
||||||
|
},
|
||||||
|
"guestMessages": {
|
||||||
|
"title": "Guest messages",
|
||||||
|
"subtitle": "Send push updates to attendees",
|
||||||
|
"composeTitle": "Send a message",
|
||||||
|
"errorLoad": "Messages could not be loaded.",
|
||||||
|
"errorSend": "Message could not be sent.",
|
||||||
|
"sendSuccess": "Notification sent to guests.",
|
||||||
|
"historyTitle": "Recent messages",
|
||||||
|
"empty": "No guest messages yet.",
|
||||||
|
"status": {
|
||||||
|
"active": "Active",
|
||||||
|
"draft": "Draft",
|
||||||
|
"archived": "Archived"
|
||||||
|
},
|
||||||
|
"audience": {
|
||||||
|
"all": "All guests",
|
||||||
|
"guest": "Specific guest"
|
||||||
|
},
|
||||||
|
"type": {
|
||||||
|
"broadcast": "Broadcast",
|
||||||
|
"support_tip": "Support tip",
|
||||||
|
"upload_alert": "Upload alert",
|
||||||
|
"achievement_major": "Achievement",
|
||||||
|
"photo_activity": "Photo activity",
|
||||||
|
"feedback_request": "Feedback request"
|
||||||
|
},
|
||||||
|
"history": {
|
||||||
|
"untitled": "Untitled",
|
||||||
|
"noBody": "No body provided."
|
||||||
|
},
|
||||||
|
"form": {
|
||||||
|
"title": "Title",
|
||||||
|
"titlePlaceholder": "Gallery reminder, upload nudge, ...",
|
||||||
|
"message": "Message",
|
||||||
|
"messagePlaceholder": "Write a short note for your guests.",
|
||||||
|
"audience": "Audience",
|
||||||
|
"audienceAll": "All guests",
|
||||||
|
"audienceGuest": "Specific guest (name or device)",
|
||||||
|
"guestIdentifier": "Guest name or device ID",
|
||||||
|
"guestPlaceholder": "e.g., Alex or device token",
|
||||||
|
"cta": "CTA (optional)",
|
||||||
|
"ctaLabel": "Button label",
|
||||||
|
"ctaUrl": "Button link",
|
||||||
|
"ctaHint": "Both fields are required to add a button.",
|
||||||
|
"ctaError": "CTA label and link are required together.",
|
||||||
|
"expiresIn": "Expires in (minutes)",
|
||||||
|
"priority": "Priority",
|
||||||
|
"priorityValue": "Priority {{value}}",
|
||||||
|
"send": "Send notification",
|
||||||
|
"validation": "Add a title, message, and target guest when needed."
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -67,6 +67,11 @@ export function resolveEngagementMode(event?: TenantEvent | null): 'tasks' | 'ph
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function isBrandingAllowed(event?: TenantEvent | null): boolean {
|
||||||
|
if (!event) return true;
|
||||||
|
return Boolean((event.package as any)?.branding_allowed ?? true);
|
||||||
|
}
|
||||||
|
|
||||||
export function formatEventStatusLabel(
|
export function formatEventStatusLabel(
|
||||||
status: TenantEvent['status'] | null,
|
status: TenantEvent['status'] | null,
|
||||||
t: (key: string, options?: Record<string, unknown>) => string,
|
t: (key: string, options?: Record<string, unknown>) => string,
|
||||||
|
|||||||
@@ -44,7 +44,8 @@ export default function MobileBillingPage() {
|
|||||||
setAddons(addonHistory.data ?? []);
|
setAddons(addonHistory.data ?? []);
|
||||||
setError(null);
|
setError(null);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
setError(getApiErrorMessage(err, t('billing.errors.load', 'Konnte Abrechnung nicht laden.')));
|
const message = getApiErrorMessage(err, t('billing.errors.load', 'Konnte Abrechnung nicht laden.'));
|
||||||
|
setError(message);
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
@@ -206,18 +207,71 @@ function PackageCard({ pkg, label }: { pkg: TenantPackageSummary; label?: string
|
|||||||
{expires}
|
{expires}
|
||||||
</Text>
|
</Text>
|
||||||
) : null}
|
) : null}
|
||||||
<XStack space="$2" marginTop="$2">
|
<XStack space="$2" marginTop="$2" flexWrap="wrap">
|
||||||
<PillBadge tone="muted">
|
<PillBadge tone="muted">
|
||||||
{t('mobileBilling.remainingEvents', '{{count}} events', { count: remaining })}
|
{t('mobileBilling.remainingEvents', '{{count}} events', { count: remaining })}
|
||||||
</PillBadge>
|
</PillBadge>
|
||||||
{pkg.price !== null && pkg.price !== undefined ? (
|
{pkg.price !== null && pkg.price !== undefined ? (
|
||||||
<PillBadge tone="muted">{formatAmount(pkg.price, pkg.currency ?? 'EUR')}</PillBadge>
|
<PillBadge tone="muted">{formatAmount(pkg.price, pkg.currency ?? 'EUR')}</PillBadge>
|
||||||
) : null}
|
) : null}
|
||||||
|
{renderFeatureBadge(pkg, t, 'branding_allowed', t('billing.features.branding', 'Branding'))}
|
||||||
|
{renderFeatureBadge(pkg, t, 'watermark_allowed', t('billing.features.watermark', 'Watermark'))}
|
||||||
</XStack>
|
</XStack>
|
||||||
|
<YStack space="$1.5" marginTop="$2">
|
||||||
|
<FeatureList pkg={pkg} />
|
||||||
|
</YStack>
|
||||||
</MobileCard>
|
</MobileCard>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function renderFeatureBadge(pkg: TenantPackageSummary, t: any, key: string, label: string) {
|
||||||
|
const value = (pkg.package_limits as any)?.[key] ?? (pkg as any)[key];
|
||||||
|
if (value === undefined || value === null) return null;
|
||||||
|
const enabled = value !== false;
|
||||||
|
return <PillBadge tone={enabled ? 'success' : 'muted'}>{enabled ? label : `${label} off`}</PillBadge>;
|
||||||
|
}
|
||||||
|
|
||||||
|
function FeatureList({ pkg }: { pkg: TenantPackageSummary }) {
|
||||||
|
const { t } = useTranslation('management');
|
||||||
|
const limits = pkg.package_limits ?? {};
|
||||||
|
const features = (pkg as any).features as string[] | undefined;
|
||||||
|
|
||||||
|
const rows: Array<{ label: string; value: string }> = [];
|
||||||
|
|
||||||
|
if (limits.max_photos !== undefined && limits.max_photos !== null) {
|
||||||
|
rows.push({ label: t('billing.features.maxPhotos', 'Max photos'), value: String(limits.max_photos) });
|
||||||
|
}
|
||||||
|
if (limits.max_guests !== undefined && limits.max_guests !== null) {
|
||||||
|
rows.push({ label: t('billing.features.maxGuests', 'Max guests'), value: String(limits.max_guests) });
|
||||||
|
}
|
||||||
|
if (limits.gallery_days !== undefined && limits.gallery_days !== null) {
|
||||||
|
rows.push({ label: t('billing.features.galleryDays', 'Gallery days'), value: String(limits.gallery_days) });
|
||||||
|
}
|
||||||
|
if (limits.max_tasks !== undefined && limits.max_tasks !== null) {
|
||||||
|
rows.push({ label: t('billing.features.maxTasks', 'Max tasks'), value: String(limits.max_tasks) });
|
||||||
|
}
|
||||||
|
if (Array.isArray(features) && features.length) {
|
||||||
|
rows.push({ label: t('billing.features.featureList', 'Included features'), value: features.join(', ') });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!rows.length) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<YStack space="$1">
|
||||||
|
{rows.map((row) => (
|
||||||
|
<XStack key={row.label} alignItems="center" justifyContent="space-between">
|
||||||
|
<Text fontSize="$xs" color="#6b7280">
|
||||||
|
{row.label}
|
||||||
|
</Text>
|
||||||
|
<Text fontSize="$xs" color="#0f172a" fontWeight="700">
|
||||||
|
{row.value}
|
||||||
|
</Text>
|
||||||
|
</XStack>
|
||||||
|
))}
|
||||||
|
</YStack>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
function formatAmount(value: number | null | undefined, currency: string | null | undefined): string {
|
function formatAmount(value: number | null | undefined, currency: string | null | undefined): string {
|
||||||
if (value === null || value === undefined) {
|
if (value === null || value === undefined) {
|
||||||
return '—';
|
return '—';
|
||||||
|
|||||||
@@ -1,15 +1,16 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useNavigate, useParams } from 'react-router-dom';
|
import { useNavigate, useParams } from 'react-router-dom';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { Image as ImageIcon, RefreshCcw, UploadCloud, Trash2, ChevronDown, Save } from 'lucide-react';
|
import { Image as ImageIcon, RefreshCcw, UploadCloud, Trash2, ChevronDown, Save, Droplets, Lock } from 'lucide-react';
|
||||||
import { YStack, XStack } from '@tamagui/stacks';
|
import { YStack, XStack } from '@tamagui/stacks';
|
||||||
import { SizableText as Text } from '@tamagui/text';
|
import { SizableText as Text } from '@tamagui/text';
|
||||||
import { Pressable } from '@tamagui/react-native-web-lite';
|
import { Pressable } from '@tamagui/react-native-web-lite';
|
||||||
import { MobileShell } from './components/MobileShell';
|
import { MobileShell } from './components/MobileShell';
|
||||||
import { MobileCard, CTAButton } from './components/Primitives';
|
import { MobileCard, CTAButton } from './components/Primitives';
|
||||||
import { TenantEvent, getEvent, updateEvent, getTenantFonts, TenantFont } from '../api';
|
import { TenantEvent, getEvent, updateEvent, getTenantFonts, TenantFont, WatermarkSettings } from '../api';
|
||||||
import { isAuthError } from '../auth/tokens';
|
import { isAuthError } from '../auth/tokens';
|
||||||
import { ApiError, getApiErrorMessage } from '../lib/apiError';
|
import { ApiError, getApiErrorMessage } from '../lib/apiError';
|
||||||
|
import { isBrandingAllowed } from '../lib/events';
|
||||||
import { MobileSheet } from './components/Sheet';
|
import { MobileSheet } from './components/Sheet';
|
||||||
import toast from 'react-hot-toast';
|
import toast from 'react-hot-toast';
|
||||||
|
|
||||||
@@ -21,6 +22,31 @@ type BrandingForm = {
|
|||||||
logoDataUrl: string;
|
logoDataUrl: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
type WatermarkPosition =
|
||||||
|
| 'top-left'
|
||||||
|
| 'top-center'
|
||||||
|
| 'top-right'
|
||||||
|
| 'middle-left'
|
||||||
|
| 'center'
|
||||||
|
| 'middle-right'
|
||||||
|
| 'bottom-left'
|
||||||
|
| 'bottom-center'
|
||||||
|
| 'bottom-right';
|
||||||
|
|
||||||
|
type WatermarkForm = {
|
||||||
|
mode: 'base' | 'custom' | 'off';
|
||||||
|
assetPath: string;
|
||||||
|
assetDataUrl: string;
|
||||||
|
position: WatermarkPosition;
|
||||||
|
opacity: number;
|
||||||
|
scale: number;
|
||||||
|
padding: number;
|
||||||
|
offsetX: number;
|
||||||
|
offsetY: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
type TabKey = 'branding' | 'watermark';
|
||||||
|
|
||||||
export default function MobileBrandingPage() {
|
export default function MobileBrandingPage() {
|
||||||
const { slug: slugParam } = useParams<{ slug?: string }>();
|
const { slug: slugParam } = useParams<{ slug?: string }>();
|
||||||
const slug = slugParam ?? null;
|
const slug = slugParam ?? null;
|
||||||
@@ -35,6 +61,18 @@ export default function MobileBrandingPage() {
|
|||||||
bodyFont: '',
|
bodyFont: '',
|
||||||
logoDataUrl: '',
|
logoDataUrl: '',
|
||||||
});
|
});
|
||||||
|
const [watermarkForm, setWatermarkForm] = React.useState<WatermarkForm>({
|
||||||
|
mode: 'base',
|
||||||
|
assetPath: '',
|
||||||
|
assetDataUrl: '',
|
||||||
|
position: 'bottom-right',
|
||||||
|
opacity: 0.25,
|
||||||
|
scale: 0.2,
|
||||||
|
padding: 16,
|
||||||
|
offsetX: 0,
|
||||||
|
offsetY: 0,
|
||||||
|
});
|
||||||
|
const [activeTab, setActiveTab] = React.useState<TabKey>('branding');
|
||||||
const [loading, setLoading] = React.useState(true);
|
const [loading, setLoading] = React.useState(true);
|
||||||
const [saving, setSaving] = React.useState(false);
|
const [saving, setSaving] = React.useState(false);
|
||||||
const [error, setError] = React.useState<string | null>(null);
|
const [error, setError] = React.useState<string | null>(null);
|
||||||
@@ -52,6 +90,7 @@ export default function MobileBrandingPage() {
|
|||||||
const data = await getEvent(slug);
|
const data = await getEvent(slug);
|
||||||
setEvent(data);
|
setEvent(data);
|
||||||
setForm(extractBranding(data));
|
setForm(extractBranding(data));
|
||||||
|
setWatermarkForm(extractWatermark(data));
|
||||||
setError(null);
|
setError(null);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
if (!isAuthError(err)) {
|
if (!isAuthError(err)) {
|
||||||
@@ -78,6 +117,9 @@ export default function MobileBrandingPage() {
|
|||||||
const previewTitle = event ? renderName(event.name) : t('events.placeholders.untitled', 'Unbenanntes Event');
|
const previewTitle = event ? renderName(event.name) : t('events.placeholders.untitled', 'Unbenanntes Event');
|
||||||
const previewHeadingFont = form.headingFont || 'Montserrat';
|
const previewHeadingFont = form.headingFont || 'Montserrat';
|
||||||
const previewBodyFont = form.bodyFont || 'Montserrat';
|
const previewBodyFont = form.bodyFont || 'Montserrat';
|
||||||
|
const watermarkAllowed = event?.package?.watermark_allowed !== false;
|
||||||
|
const brandingAllowed = isBrandingAllowed(event ?? null);
|
||||||
|
const watermarkLocked = watermarkAllowed && !brandingAllowed;
|
||||||
|
|
||||||
async function handleSave() {
|
async function handleSave() {
|
||||||
if (!event?.slug) return;
|
if (!event?.slug) return;
|
||||||
@@ -91,6 +133,14 @@ export default function MobileBrandingPage() {
|
|||||||
setSaving(true);
|
setSaving(true);
|
||||||
setError(null);
|
setError(null);
|
||||||
try {
|
try {
|
||||||
|
if (watermarkAllowed && brandingAllowed && watermarkForm.mode === 'custom' && !watermarkForm.assetDataUrl && !watermarkForm.assetPath) {
|
||||||
|
const msg = t('events.watermark.errors.noAsset', 'Bitte lade zuerst ein Wasserzeichen hoch.');
|
||||||
|
setError(msg);
|
||||||
|
setActiveTab('watermark');
|
||||||
|
setSaving(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const payload = {
|
const payload = {
|
||||||
name: typeof event.name === 'string' ? event.name : renderName(event.name),
|
name: typeof event.name === 'string' ? event.name : renderName(event.name),
|
||||||
slug: event.slug,
|
slug: event.slug,
|
||||||
@@ -130,6 +180,10 @@ export default function MobileBrandingPage() {
|
|||||||
}
|
}
|
||||||
: null,
|
: null,
|
||||||
};
|
};
|
||||||
|
const watermarkPayload = buildWatermarkPayload(watermarkForm, watermarkAllowed, brandingAllowed);
|
||||||
|
if (watermarkPayload) {
|
||||||
|
settings.watermark = watermarkPayload;
|
||||||
|
}
|
||||||
const updated = await updateEvent(event.slug, {
|
const updated = await updateEvent(event.slug, {
|
||||||
...payload,
|
...payload,
|
||||||
settings,
|
settings,
|
||||||
@@ -158,9 +212,191 @@ export default function MobileBrandingPage() {
|
|||||||
function handleReset() {
|
function handleReset() {
|
||||||
if (event) {
|
if (event) {
|
||||||
setForm(extractBranding(event));
|
setForm(extractBranding(event));
|
||||||
|
setWatermarkForm(extractWatermark(event));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function renderWatermarkTab() {
|
||||||
|
const policyLabel = watermarkAllowed ? 'basic' : 'none';
|
||||||
|
const disabled = !watermarkAllowed;
|
||||||
|
const controlsLocked = watermarkLocked || disabled;
|
||||||
|
const mode = controlsLocked ? 'base' : watermarkForm.mode;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<MobileCard space="$3">
|
||||||
|
<Text fontSize="$sm" fontWeight="700" color="#111827">
|
||||||
|
{t('events.watermark.previewTitle', 'Watermark Preview')}
|
||||||
|
</Text>
|
||||||
|
<WatermarkPreview
|
||||||
|
position={watermarkForm.position}
|
||||||
|
scale={watermarkForm.scale}
|
||||||
|
opacity={watermarkForm.opacity}
|
||||||
|
padding={watermarkForm.padding}
|
||||||
|
offsetX={watermarkForm.offsetX}
|
||||||
|
offsetY={watermarkForm.offsetY}
|
||||||
|
/>
|
||||||
|
</MobileCard>
|
||||||
|
|
||||||
|
{disabled ? (
|
||||||
|
<InfoBadge
|
||||||
|
icon={<Lock size={16} color="#b91c1c" />}
|
||||||
|
text={t('events.watermark.lockedDisabled', 'Kein Wasserzeichen in diesem Paket.')}
|
||||||
|
tone="danger"
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{watermarkLocked ? (
|
||||||
|
<InfoBadge
|
||||||
|
icon={<Lock size={16} color="#111827" />}
|
||||||
|
text={t('events.watermark.lockedBranding', 'Custom-Wasserzeichen ist im aktuellen Paket gesperrt. Standard wird genutzt.')}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<MobileCard space="$3">
|
||||||
|
<Text fontSize="$md" fontWeight="800" color="#111827">
|
||||||
|
{t('events.watermark.title', 'Wasserzeichen')}
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<InputField
|
||||||
|
label={t('events.watermark.mode', 'Modus')}
|
||||||
|
value={mode}
|
||||||
|
onChange={(value) => {
|
||||||
|
if (controlsLocked) return;
|
||||||
|
if (value === 'custom' || value === 'base' || value === 'off') {
|
||||||
|
setWatermarkForm((prev) => ({ ...prev, mode: value as WatermarkForm['mode'] }));
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onPicker={() => undefined}
|
||||||
|
>
|
||||||
|
<select
|
||||||
|
value={mode}
|
||||||
|
disabled={controlsLocked}
|
||||||
|
onChange={(event) => setWatermarkForm((prev) => ({ ...prev, mode: event.target.value as WatermarkForm['mode'] }))}
|
||||||
|
style={{ width: '100%', height: 40, border: 'none', outline: 'none', background: 'transparent' }}
|
||||||
|
>
|
||||||
|
<option value="base">{t('events.watermark.modeBase', 'Basis')}</option>
|
||||||
|
<option value="custom" disabled={watermarkLocked}>
|
||||||
|
{t('events.watermark.modeCustom', 'Eigenes Wasserzeichen')}
|
||||||
|
</option>
|
||||||
|
<option value="off" disabled={policyLabel === 'basic'}>
|
||||||
|
{t('events.watermark.modeOff', 'Deaktiviert')}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</InputField>
|
||||||
|
|
||||||
|
{mode === 'custom' && !controlsLocked ? (
|
||||||
|
<YStack space="$2">
|
||||||
|
<Text fontSize="$sm" fontWeight="700" color="#111827">
|
||||||
|
{t('events.watermark.upload', 'Wasserzeichen hochladen')}
|
||||||
|
</Text>
|
||||||
|
<Pressable onPress={() => document.getElementById('watermark-upload-input')?.click()}>
|
||||||
|
<XStack
|
||||||
|
alignItems="center"
|
||||||
|
space="$2"
|
||||||
|
paddingHorizontal="$3.5"
|
||||||
|
paddingVertical="$2.5"
|
||||||
|
borderRadius={12}
|
||||||
|
borderWidth={1}
|
||||||
|
borderColor="#e5e7eb"
|
||||||
|
backgroundColor="white"
|
||||||
|
>
|
||||||
|
<UploadCloud size={18} color="#007AFF" />
|
||||||
|
<Text fontSize="$sm" color="#007AFF" fontWeight="700">
|
||||||
|
{watermarkForm.assetPath
|
||||||
|
? t('events.watermark.replace', 'Wasserzeichen ersetzen')
|
||||||
|
: t('events.watermark.uploadCta', 'PNG/SVG/JPG (max. 3 MB)')}
|
||||||
|
</Text>
|
||||||
|
</XStack>
|
||||||
|
</Pressable>
|
||||||
|
<input
|
||||||
|
id="watermark-upload-input"
|
||||||
|
type="file"
|
||||||
|
accept="image/png,image/jpeg,image/webp,image/svg+xml"
|
||||||
|
style={{ display: 'none' }}
|
||||||
|
onChange={(event) => {
|
||||||
|
const file = event.target.files?.[0];
|
||||||
|
if (!file) return;
|
||||||
|
if (file.size > 3 * 1024 * 1024) {
|
||||||
|
setError(t('events.watermark.errors.fileTooLarge', 'Wasserzeichen muss kleiner als 3 MB sein.'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = () => {
|
||||||
|
const result = typeof reader.result === 'string' ? reader.result : '';
|
||||||
|
setWatermarkForm((prev) => ({ ...prev, assetDataUrl: result, assetPath: '' }));
|
||||||
|
setError(null);
|
||||||
|
};
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Text fontSize="$xs" color="#6b7280">
|
||||||
|
{t('events.watermark.uploadHint', 'PNG mit transparenter Fläche empfohlen.')}
|
||||||
|
</Text>
|
||||||
|
</YStack>
|
||||||
|
) : null}
|
||||||
|
</MobileCard>
|
||||||
|
|
||||||
|
<MobileCard space="$3">
|
||||||
|
<Text fontSize="$md" fontWeight="800" color="#111827">
|
||||||
|
{t('events.watermark.placement', 'Position & Größe')}
|
||||||
|
</Text>
|
||||||
|
<PositionGrid
|
||||||
|
value={watermarkForm.position}
|
||||||
|
onChange={(next) => setWatermarkForm((prev) => ({ ...prev, position: next }))}
|
||||||
|
disabled={controlsLocked}
|
||||||
|
/>
|
||||||
|
<LabeledSlider
|
||||||
|
label={t('events.watermark.size', 'Größe')}
|
||||||
|
value={Math.round(watermarkForm.scale * 100)}
|
||||||
|
min={5}
|
||||||
|
max={60}
|
||||||
|
step={1}
|
||||||
|
onChange={(value) => setWatermarkForm((prev) => ({ ...prev, scale: value / 100 }))}
|
||||||
|
disabled={controlsLocked}
|
||||||
|
/>
|
||||||
|
<LabeledSlider
|
||||||
|
label={t('events.watermark.opacity', 'Transparenz')}
|
||||||
|
value={Math.round(watermarkForm.opacity * 100)}
|
||||||
|
min={10}
|
||||||
|
max={80}
|
||||||
|
step={5}
|
||||||
|
onChange={(value) => setWatermarkForm((prev) => ({ ...prev, opacity: value / 100 }))}
|
||||||
|
disabled={controlsLocked}
|
||||||
|
/>
|
||||||
|
<LabeledSlider
|
||||||
|
label={t('events.watermark.padding', 'Abstand zum Rand')}
|
||||||
|
value={watermarkForm.padding}
|
||||||
|
min={0}
|
||||||
|
max={80}
|
||||||
|
step={2}
|
||||||
|
onChange={(value) => setWatermarkForm((prev) => ({ ...prev, padding: value }))}
|
||||||
|
disabled={controlsLocked}
|
||||||
|
/>
|
||||||
|
<LabeledSlider
|
||||||
|
label={t('events.watermark.offset', 'Feinjustierung')}
|
||||||
|
value={watermarkForm.offsetX}
|
||||||
|
min={-30}
|
||||||
|
max={30}
|
||||||
|
step={1}
|
||||||
|
onChange={(value) => setWatermarkForm((prev) => ({ ...prev, offsetX: value }))}
|
||||||
|
disabled={controlsLocked}
|
||||||
|
suffix={t('events.watermark.offsetX', 'X-Achse')}
|
||||||
|
/>
|
||||||
|
<LabeledSlider
|
||||||
|
label={t('events.watermark.offsetY', 'Y-Achse')}
|
||||||
|
value={watermarkForm.offsetY}
|
||||||
|
min={-30}
|
||||||
|
max={30}
|
||||||
|
step={1}
|
||||||
|
onChange={(value) => setWatermarkForm((prev) => ({ ...prev, offsetY: value }))}
|
||||||
|
disabled={controlsLocked}
|
||||||
|
/>
|
||||||
|
</MobileCard>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<MobileShell
|
<MobileShell
|
||||||
activeTab="home"
|
activeTab="home"
|
||||||
@@ -180,6 +416,15 @@ export default function MobileBrandingPage() {
|
|||||||
</MobileCard>
|
</MobileCard>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
|
<MobileCard space="$2">
|
||||||
|
<XStack space="$2">
|
||||||
|
<TabButton label={t('events.branding.titleShort', 'Branding')} active={activeTab === 'branding'} onPress={() => setActiveTab('branding')} />
|
||||||
|
<TabButton label={t('events.watermark.tab', 'Wasserzeichen')} active={activeTab === 'watermark'} onPress={() => setActiveTab('watermark')} />
|
||||||
|
</XStack>
|
||||||
|
</MobileCard>
|
||||||
|
|
||||||
|
{activeTab === 'branding' ? (
|
||||||
|
<>
|
||||||
<MobileCard space="$3">
|
<MobileCard space="$3">
|
||||||
<Text fontSize="$sm" fontWeight="700" color="#111827">
|
<Text fontSize="$sm" fontWeight="700" color="#111827">
|
||||||
{t('events.branding.previewTitle', 'Guest App Preview')}
|
{t('events.branding.previewTitle', 'Guest App Preview')}
|
||||||
@@ -338,6 +583,10 @@ export default function MobileBrandingPage() {
|
|||||||
/>
|
/>
|
||||||
</YStack>
|
</YStack>
|
||||||
</MobileCard>
|
</MobileCard>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
renderWatermarkTab()
|
||||||
|
)}
|
||||||
|
|
||||||
<YStack space="$2">
|
<YStack space="$2">
|
||||||
<CTAButton label={saving ? t('events.branding.saving', 'Saving...') : t('events.branding.save', 'Save Branding')} onPress={() => handleSave()} />
|
<CTAButton label={saving ? t('events.branding.saving', 'Saving...') : t('events.branding.save', 'Save Branding')} onPress={() => handleSave()} />
|
||||||
@@ -432,6 +681,69 @@ function extractBranding(event: TenantEvent): BrandingForm {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function extractWatermark(event: TenantEvent): WatermarkForm {
|
||||||
|
const settings = (event.settings as Record<string, unknown>) ?? {};
|
||||||
|
const wm = (settings.watermark as Record<string, unknown>) ?? {};
|
||||||
|
const readNumber = (key: string, fallback: number) => {
|
||||||
|
const value = wm[key];
|
||||||
|
return typeof value === 'number' && !Number.isNaN(value) ? value : fallback;
|
||||||
|
};
|
||||||
|
const readString = (key: string, fallback: string) => {
|
||||||
|
const value = wm[key];
|
||||||
|
return typeof value === 'string' && value.trim() ? value : fallback;
|
||||||
|
};
|
||||||
|
|
||||||
|
const mode = (wm.mode === 'custom' || wm.mode === 'off') ? wm.mode : 'base';
|
||||||
|
const position = readString('position', 'bottom-right') as WatermarkPosition;
|
||||||
|
|
||||||
|
return {
|
||||||
|
mode,
|
||||||
|
assetPath: readString('asset', ''),
|
||||||
|
assetDataUrl: '',
|
||||||
|
position,
|
||||||
|
opacity: readNumber('opacity', 0.25),
|
||||||
|
scale: readNumber('scale', 0.2),
|
||||||
|
padding: readNumber('padding', 16),
|
||||||
|
offsetX: readNumber('offset_x', 0),
|
||||||
|
offsetY: readNumber('offset_y', 0),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildWatermarkPayload(
|
||||||
|
form: WatermarkForm,
|
||||||
|
watermarkAllowed: boolean,
|
||||||
|
brandingAllowed: boolean
|
||||||
|
): WatermarkSettings | null {
|
||||||
|
if (!watermarkAllowed) {
|
||||||
|
return { mode: 'off' };
|
||||||
|
}
|
||||||
|
|
||||||
|
const policy = watermarkAllowed ? 'basic' : 'none';
|
||||||
|
const desiredMode = brandingAllowed ? form.mode : 'base';
|
||||||
|
const mode = desiredMode === 'off' && policy === 'basic' ? 'base' : desiredMode;
|
||||||
|
|
||||||
|
const payload: WatermarkSettings = {
|
||||||
|
mode,
|
||||||
|
position: form.position,
|
||||||
|
opacity: Math.min(1, Math.max(0, form.opacity)),
|
||||||
|
scale: Math.min(1, Math.max(0.05, form.scale)),
|
||||||
|
padding: Math.max(0, Math.round(form.padding)),
|
||||||
|
offset_x: Math.max(-500, Math.min(500, Math.round(form.offsetX))),
|
||||||
|
offset_y: Math.max(-500, Math.min(500, Math.round(form.offsetY))),
|
||||||
|
};
|
||||||
|
|
||||||
|
if (mode === 'custom' && brandingAllowed) {
|
||||||
|
if (form.assetDataUrl) {
|
||||||
|
payload.asset_data_url = form.assetDataUrl;
|
||||||
|
}
|
||||||
|
if (form.assetPath) {
|
||||||
|
payload.asset = form.assetPath;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return payload;
|
||||||
|
}
|
||||||
|
|
||||||
function renderName(name: TenantEvent['name']): string {
|
function renderName(name: TenantEvent['name']): string {
|
||||||
if (typeof name === 'string') return name;
|
if (typeof name === 'string') return name;
|
||||||
if (name && typeof name === 'object') {
|
if (name && typeof name === 'object') {
|
||||||
@@ -478,12 +790,14 @@ function InputField({
|
|||||||
placeholder,
|
placeholder,
|
||||||
onChange,
|
onChange,
|
||||||
onPicker,
|
onPicker,
|
||||||
|
children,
|
||||||
}: {
|
}: {
|
||||||
label: string;
|
label: string;
|
||||||
value: string;
|
value: string;
|
||||||
placeholder?: string;
|
placeholder?: string;
|
||||||
onChange: (next: string) => void;
|
onChange: (next: string) => void;
|
||||||
onPicker?: () => void;
|
onPicker?: () => void;
|
||||||
|
children?: React.ReactNode;
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<YStack space="$2">
|
<YStack space="$2">
|
||||||
@@ -501,6 +815,7 @@ function InputField({
|
|||||||
backgroundColor="white"
|
backgroundColor="white"
|
||||||
space="$2"
|
space="$2"
|
||||||
>
|
>
|
||||||
|
{children ?? (
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={value}
|
value={value}
|
||||||
@@ -516,6 +831,7 @@ function InputField({
|
|||||||
}}
|
}}
|
||||||
onFocus={onPicker}
|
onFocus={onPicker}
|
||||||
/>
|
/>
|
||||||
|
)}
|
||||||
{onPicker ? (
|
{onPicker ? (
|
||||||
<Pressable onPress={onPicker}>
|
<Pressable onPress={onPicker}>
|
||||||
<ChevronDown size={16} color="#007AFF" />
|
<ChevronDown size={16} color="#007AFF" />
|
||||||
@@ -525,3 +841,222 @@ function InputField({
|
|||||||
</YStack>
|
</YStack>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function LabeledSlider({
|
||||||
|
label,
|
||||||
|
value,
|
||||||
|
min,
|
||||||
|
max,
|
||||||
|
step,
|
||||||
|
onChange,
|
||||||
|
disabled,
|
||||||
|
suffix,
|
||||||
|
}: {
|
||||||
|
label: string;
|
||||||
|
value: number;
|
||||||
|
min: number;
|
||||||
|
max: number;
|
||||||
|
step: number;
|
||||||
|
onChange: (value: number) => void;
|
||||||
|
disabled?: boolean;
|
||||||
|
suffix?: string;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<YStack space="$1.5">
|
||||||
|
<XStack alignItems="center" justifyContent="space-between">
|
||||||
|
<Text fontSize="$sm" fontWeight="700" color="#111827">
|
||||||
|
{label}
|
||||||
|
</Text>
|
||||||
|
<Text fontSize="$xs" color="#4b5563">
|
||||||
|
{value}
|
||||||
|
{suffix ? ` ${suffix}` : ''}
|
||||||
|
</Text>
|
||||||
|
</XStack>
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min={min}
|
||||||
|
max={max}
|
||||||
|
step={step}
|
||||||
|
value={value}
|
||||||
|
disabled={disabled}
|
||||||
|
onChange={(event) => onChange(Number(event.target.value))}
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
/>
|
||||||
|
</YStack>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function PositionGrid({
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
disabled,
|
||||||
|
}: {
|
||||||
|
value: WatermarkPosition;
|
||||||
|
onChange: (value: WatermarkPosition) => void;
|
||||||
|
disabled?: boolean;
|
||||||
|
}) {
|
||||||
|
const positions: WatermarkPosition[] = [
|
||||||
|
'top-left',
|
||||||
|
'top-center',
|
||||||
|
'top-right',
|
||||||
|
'middle-left',
|
||||||
|
'center',
|
||||||
|
'middle-right',
|
||||||
|
'bottom-left',
|
||||||
|
'bottom-center',
|
||||||
|
'bottom-right',
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<YStack space="$2">
|
||||||
|
<Text fontSize="$sm" fontWeight="700" color="#111827">
|
||||||
|
Position
|
||||||
|
</Text>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 8 }}>
|
||||||
|
{positions.map((pos) => (
|
||||||
|
<button
|
||||||
|
key={pos}
|
||||||
|
type="button"
|
||||||
|
disabled={disabled}
|
||||||
|
onClick={() => onChange(pos)}
|
||||||
|
style={{
|
||||||
|
height: 40,
|
||||||
|
borderRadius: 10,
|
||||||
|
border: value === pos ? '2px solid #007AFF' : '1px solid #e5e7eb',
|
||||||
|
background: value === pos ? '#eff6ff' : '#fff',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text fontSize="$xs" color="#0f172a" textAlign="center">
|
||||||
|
{pos.replace('-', ' ')}
|
||||||
|
</Text>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</YStack>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function WatermarkPreview({
|
||||||
|
position,
|
||||||
|
scale,
|
||||||
|
opacity,
|
||||||
|
padding,
|
||||||
|
offsetX,
|
||||||
|
offsetY,
|
||||||
|
}: {
|
||||||
|
position: WatermarkPosition;
|
||||||
|
scale: number;
|
||||||
|
opacity: number;
|
||||||
|
padding: number;
|
||||||
|
offsetX: number;
|
||||||
|
offsetY: number;
|
||||||
|
}) {
|
||||||
|
const width = 280;
|
||||||
|
const height = 180;
|
||||||
|
const wmWidth = Math.max(24, Math.round(width * Math.min(1, Math.max(0.05, scale))));
|
||||||
|
const wmHeight = Math.round(wmWidth * 0.4);
|
||||||
|
|
||||||
|
const baseX = (() => {
|
||||||
|
switch (position) {
|
||||||
|
case 'top-center':
|
||||||
|
case 'center':
|
||||||
|
case 'bottom-center':
|
||||||
|
return (width - wmWidth) / 2;
|
||||||
|
case 'top-right':
|
||||||
|
case 'middle-right':
|
||||||
|
case 'bottom-right':
|
||||||
|
return width - wmWidth - padding;
|
||||||
|
default:
|
||||||
|
return padding;
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
|
const baseY = (() => {
|
||||||
|
switch (position) {
|
||||||
|
case 'middle-left':
|
||||||
|
case 'center':
|
||||||
|
case 'middle-right':
|
||||||
|
return (height - wmHeight) / 2;
|
||||||
|
case 'bottom-left':
|
||||||
|
case 'bottom-center':
|
||||||
|
case 'bottom-right':
|
||||||
|
return height - wmHeight - padding;
|
||||||
|
default:
|
||||||
|
return padding;
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
|
const x = Math.max(0, Math.min(width - wmWidth, baseX + offsetX));
|
||||||
|
const y = Math.max(0, Math.min(height - wmHeight, baseY + offsetY));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ position: 'relative', width: '100%', maxWidth: 320 }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
borderRadius: 16,
|
||||||
|
overflow: 'hidden',
|
||||||
|
border: '1px solid #e5e7eb',
|
||||||
|
background: 'linear-gradient(135deg, #e0f2fe, #c7d2fe)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, #0f172a66, transparent)' }} />
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
left: x,
|
||||||
|
top: y,
|
||||||
|
width: wmWidth,
|
||||||
|
height: wmHeight,
|
||||||
|
background: 'rgba(255,255,255,0.8)',
|
||||||
|
borderRadius: 10,
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
opacity: Math.min(1, Math.max(0, opacity)),
|
||||||
|
border: '1px dashed #64748b',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Droplets size={18} color="#0f172a" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function InfoBadge({ icon, text, tone = 'info' }: { icon?: React.ReactNode; text: string; tone?: 'info' | 'danger' }) {
|
||||||
|
const background = tone === 'danger' ? '#fef2f2' : '#f1f5f9';
|
||||||
|
const color = tone === 'danger' ? '#991b1b' : '#0f172a';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<MobileCard space="$2" backgroundColor={background} borderColor="#e2e8f0">
|
||||||
|
<XStack space="$2" alignItems="center">
|
||||||
|
{icon}
|
||||||
|
<Text fontSize="$sm" color={color}>
|
||||||
|
{text}
|
||||||
|
</Text>
|
||||||
|
</XStack>
|
||||||
|
</MobileCard>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TabButton({ label, active, onPress }: { label: string; active: boolean; onPress: () => void }) {
|
||||||
|
return (
|
||||||
|
<Pressable onPress={onPress} style={{ flex: 1 }}>
|
||||||
|
<XStack
|
||||||
|
alignItems="center"
|
||||||
|
justifyContent="center"
|
||||||
|
paddingVertical="$2.5"
|
||||||
|
borderRadius={12}
|
||||||
|
backgroundColor={active ? '#0f172a' : '#f1f5f9'}
|
||||||
|
borderWidth={1}
|
||||||
|
borderColor={active ? '#0f172a' : '#e5e7eb'}
|
||||||
|
>
|
||||||
|
<Text fontSize="$sm" color={active ? '#fff' : '#0f172a'} fontWeight="700">
|
||||||
|
{label}
|
||||||
|
</Text>
|
||||||
|
</XStack>
|
||||||
|
</Pressable>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ import { MobileCard, CTAButton, KpiTile, ActionTile, PillBadge } from './compone
|
|||||||
import { adminPath } from '../constants';
|
import { adminPath } from '../constants';
|
||||||
import { useEventContext } from '../context/EventContext';
|
import { useEventContext } from '../context/EventContext';
|
||||||
import { getEventStats, EventStats, TenantEvent, getEvents } from '../api';
|
import { getEventStats, EventStats, TenantEvent, getEvents } from '../api';
|
||||||
import { formatEventDate, resolveEngagementMode, resolveEventDisplayName } from '../lib/events';
|
import { formatEventDate, isBrandingAllowed, resolveEngagementMode, resolveEventDisplayName } from '../lib/events';
|
||||||
import { useTheme } from '@tamagui/core';
|
import { useTheme } from '@tamagui/core';
|
||||||
|
|
||||||
export default function MobileDashboardPage() {
|
export default function MobileDashboardPage() {
|
||||||
@@ -469,7 +469,7 @@ function SecondaryGrid({
|
|||||||
const muted = String(theme.gray11?.val ?? theme.gray?.val ?? '#cbd5e1');
|
const muted = String(theme.gray11?.val ?? theme.gray?.val ?? '#cbd5e1');
|
||||||
const border = String(theme.borderColor?.val ?? '#334155');
|
const border = String(theme.borderColor?.val ?? '#334155');
|
||||||
const surface = String(theme.surface?.val ?? '#0b1220');
|
const surface = String(theme.surface?.val ?? '#0b1220');
|
||||||
const brandingAllowed = Boolean((event?.package as any)?.branding_allowed ?? true);
|
const brandingAllowed = isBrandingAllowed(event ?? null);
|
||||||
const tiles = [
|
const tiles = [
|
||||||
{
|
{
|
||||||
icon: Users,
|
icon: Users,
|
||||||
|
|||||||
@@ -1,19 +1,19 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useNavigate, useParams } from 'react-router-dom';
|
import { useNavigate, useParams } from 'react-router-dom';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { CalendarDays, MapPin, Settings, Users, Camera, Sparkles, QrCode, Image, Shield, Layout, RefreshCcw, Pencil } from 'lucide-react';
|
import { CalendarDays, MapPin, Settings, Users, Camera, Sparkles, QrCode, Image, Shield, Layout, RefreshCcw, Pencil, Megaphone } from 'lucide-react';
|
||||||
import { YStack, XStack } from '@tamagui/stacks';
|
import { YStack, XStack } from '@tamagui/stacks';
|
||||||
import { SizableText as Text } from '@tamagui/text';
|
import { SizableText as Text } from '@tamagui/text';
|
||||||
import { Pressable } from '@tamagui/react-native-web-lite';
|
import { Pressable } from '@tamagui/react-native-web-lite';
|
||||||
import { MobileShell } from './components/MobileShell';
|
import { MobileShell } from './components/MobileShell';
|
||||||
import { MobileCard, PillBadge, KpiTile, ActionTile } from './components/Primitives';
|
import { MobileCard, PillBadge, KpiTile, ActionTile } from './components/Primitives';
|
||||||
import { TenantEvent, EventStats, EventToolkit, getEvent, getEventStats, getEventToolkit, getEvents } from '../api';
|
import { TenantEvent, EventStats, EventToolkit, getEvent, getEventStats, getEventToolkit, getEvents } from '../api';
|
||||||
import { adminPath, ADMIN_EVENT_BRANDING_PATH, ADMIN_EVENT_INVITES_PATH, ADMIN_EVENT_MEMBERS_PATH, ADMIN_EVENT_PHOTOS_PATH, ADMIN_EVENT_TASKS_PATH } from '../constants';
|
import { adminPath, ADMIN_EVENT_BRANDING_PATH, ADMIN_EVENT_GUEST_NOTIFICATIONS_PATH, ADMIN_EVENT_INVITES_PATH, ADMIN_EVENT_MEMBERS_PATH, ADMIN_EVENT_PHOTOS_PATH, ADMIN_EVENT_TASKS_PATH } from '../constants';
|
||||||
import { isAuthError } from '../auth/tokens';
|
import { isAuthError } from '../auth/tokens';
|
||||||
import { getApiErrorMessage } from '../lib/apiError';
|
import { getApiErrorMessage } from '../lib/apiError';
|
||||||
import { MobileSheet } from './components/Sheet';
|
import { MobileSheet } from './components/Sheet';
|
||||||
import { useEventContext } from '../context/EventContext';
|
import { useEventContext } from '../context/EventContext';
|
||||||
import { formatEventDate, resolveEngagementMode, resolveEventDisplayName } from '../lib/events';
|
import { formatEventDate, isBrandingAllowed, resolveEngagementMode, resolveEventDisplayName } from '../lib/events';
|
||||||
import { isPastEvent } from './eventDate';
|
import { isPastEvent } from './eventDate';
|
||||||
|
|
||||||
export default function MobileEventDetailPage() {
|
export default function MobileEventDetailPage() {
|
||||||
@@ -67,6 +67,7 @@ export default function MobileEventDetailPage() {
|
|||||||
}, [slug, t]);
|
}, [slug, t]);
|
||||||
|
|
||||||
const tasksEnabled = resolveEngagementMode(event ?? activeEvent ?? null) !== 'photo_only';
|
const tasksEnabled = resolveEngagementMode(event ?? activeEvent ?? null) !== 'photo_only';
|
||||||
|
const brandingAllowed = isBrandingAllowed(event ?? activeEvent ?? null);
|
||||||
|
|
||||||
const kpis = [
|
const kpis = [
|
||||||
{
|
{
|
||||||
@@ -248,11 +249,21 @@ export default function MobileEventDetailPage() {
|
|||||||
color="#4ade80"
|
color="#4ade80"
|
||||||
onPress={() => navigate(adminPath(`/mobile/events/${slug ?? ''}/members`))}
|
onPress={() => navigate(adminPath(`/mobile/events/${slug ?? ''}/members`))}
|
||||||
/>
|
/>
|
||||||
|
<ActionTile
|
||||||
|
icon={Megaphone}
|
||||||
|
label={t('events.quick.guestMessages', 'Guest messages')}
|
||||||
|
color="#fb923c"
|
||||||
|
onPress={() => slug && navigate(ADMIN_EVENT_GUEST_NOTIFICATIONS_PATH(slug))}
|
||||||
|
disabled={!slug}
|
||||||
|
/>
|
||||||
<ActionTile
|
<ActionTile
|
||||||
icon={Layout}
|
icon={Layout}
|
||||||
label={t('events.quick.branding', 'Branding & Theme')}
|
label={t('events.quick.branding', 'Branding & Theme')}
|
||||||
color="#fb7185"
|
color="#fb7185"
|
||||||
onPress={() => navigate(adminPath(`/mobile/events/${slug ?? ''}/branding`))}
|
onPress={
|
||||||
|
brandingAllowed ? () => navigate(adminPath(`/mobile/events/${slug ?? ''}/branding`)) : undefined
|
||||||
|
}
|
||||||
|
disabled={!brandingAllowed}
|
||||||
/>
|
/>
|
||||||
<ActionTile
|
<ActionTile
|
||||||
icon={Camera}
|
icon={Camera}
|
||||||
|
|||||||
410
resources/js/admin/mobile/EventGuestNotificationsPage.tsx
Normal file
410
resources/js/admin/mobile/EventGuestNotificationsPage.tsx
Normal file
@@ -0,0 +1,410 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { useNavigate, useParams } from 'react-router-dom';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { YStack, XStack } from '@tamagui/stacks';
|
||||||
|
import { SizableText as Text } from '@tamagui/text';
|
||||||
|
import { Pressable } from '@tamagui/react-native-web-lite';
|
||||||
|
import { useTheme } from '@tamagui/core';
|
||||||
|
import { RefreshCcw, Users, User } from 'lucide-react';
|
||||||
|
import toast from 'react-hot-toast';
|
||||||
|
import { MobileShell } from './components/MobileShell';
|
||||||
|
import { MobileCard, CTAButton, PillBadge } from './components/Primitives';
|
||||||
|
import { useEventContext } from '../context/EventContext';
|
||||||
|
import {
|
||||||
|
GuestNotificationSummary,
|
||||||
|
SendGuestNotificationPayload,
|
||||||
|
getEvents,
|
||||||
|
listGuestNotifications,
|
||||||
|
sendGuestNotification,
|
||||||
|
TenantEvent,
|
||||||
|
} from '../api';
|
||||||
|
import { isAuthError } from '../auth/tokens';
|
||||||
|
import { getApiErrorMessage } from '../lib/apiError';
|
||||||
|
import { adminPath } from '../constants';
|
||||||
|
import { formatGuestMessageDate } from './guestMessages';
|
||||||
|
|
||||||
|
type FormState = {
|
||||||
|
title: string;
|
||||||
|
message: string;
|
||||||
|
audience: 'all' | 'guest';
|
||||||
|
guest_identifier: string;
|
||||||
|
cta_label: string;
|
||||||
|
cta_url: string;
|
||||||
|
expires_in_minutes: string;
|
||||||
|
priority: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function MobileEventGuestNotificationsPage() {
|
||||||
|
const { slug: slugParam } = useParams<{ slug?: string }>();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { t, i18n } = useTranslation('management');
|
||||||
|
const theme = useTheme();
|
||||||
|
const { activeEvent, selectEvent } = useEventContext();
|
||||||
|
const slug = slugParam ?? activeEvent?.slug ?? null;
|
||||||
|
const [history, setHistory] = React.useState<GuestNotificationSummary[]>([]);
|
||||||
|
const [loading, setLoading] = React.useState(true);
|
||||||
|
const [sending, setSending] = React.useState(false);
|
||||||
|
const [error, setError] = React.useState<string | null>(null);
|
||||||
|
const [fallbackAttempted, setFallbackAttempted] = React.useState(false);
|
||||||
|
|
||||||
|
const [form, setForm] = React.useState<FormState>({
|
||||||
|
title: '',
|
||||||
|
message: '',
|
||||||
|
audience: 'all',
|
||||||
|
guest_identifier: '',
|
||||||
|
cta_label: '',
|
||||||
|
cta_url: '',
|
||||||
|
expires_in_minutes: '',
|
||||||
|
priority: '1',
|
||||||
|
});
|
||||||
|
|
||||||
|
const inputStyle = React.useMemo<React.CSSProperties>(() => {
|
||||||
|
const border = String(theme.borderColor?.val ?? '#e5e7eb');
|
||||||
|
const surface = String(theme.surface?.val ?? 'white');
|
||||||
|
const text = String(theme.color?.val ?? '#111827');
|
||||||
|
return {
|
||||||
|
width: '100%',
|
||||||
|
borderRadius: 10,
|
||||||
|
border: `1px solid ${border}`,
|
||||||
|
padding: '10px 12px',
|
||||||
|
fontSize: 13,
|
||||||
|
background: surface,
|
||||||
|
color: text,
|
||||||
|
};
|
||||||
|
}, [theme]);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (slugParam && activeEvent?.slug !== slugParam) {
|
||||||
|
selectEvent(slugParam);
|
||||||
|
}
|
||||||
|
}, [slugParam, activeEvent?.slug, selectEvent]);
|
||||||
|
|
||||||
|
const loadHistory = React.useCallback(async () => {
|
||||||
|
if (!slug) {
|
||||||
|
if (!fallbackAttempted) {
|
||||||
|
setFallbackAttempted(true);
|
||||||
|
try {
|
||||||
|
const events = await getEvents({ force: true });
|
||||||
|
const first = events[0] as TenantEvent | undefined;
|
||||||
|
if (first?.slug) {
|
||||||
|
selectEvent(first.slug);
|
||||||
|
navigate(adminPath(`/mobile/events/${first.slug}/guest-notifications`), { replace: true });
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// ignore
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setLoading(false);
|
||||||
|
setError(t('events.errors.missingSlug', 'No event selected.'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
try {
|
||||||
|
const notifications = await listGuestNotifications(slug);
|
||||||
|
setHistory(notifications);
|
||||||
|
} catch (err) {
|
||||||
|
if (!isAuthError(err)) {
|
||||||
|
const message = getApiErrorMessage(err, t('guestMessages.errorLoad', 'Messages could not be loaded.'));
|
||||||
|
setError(message);
|
||||||
|
toast.error(message);
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, [slug, t, fallbackAttempted, selectEvent, navigate]);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
void loadHistory();
|
||||||
|
}, [loadHistory]);
|
||||||
|
|
||||||
|
const canSend =
|
||||||
|
form.title.trim().length > 0 &&
|
||||||
|
form.message.trim().length > 0 &&
|
||||||
|
(form.audience === 'all' || form.guest_identifier.trim().length > 0);
|
||||||
|
|
||||||
|
async function handleSend() {
|
||||||
|
if (!slug || sending) return;
|
||||||
|
|
||||||
|
if (!canSend) {
|
||||||
|
const message = t('guestMessages.form.validation', 'Add a title, message, and target guest when needed.');
|
||||||
|
setError(message);
|
||||||
|
toast.error(message);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ctaLabel = form.cta_label.trim();
|
||||||
|
const ctaUrl = form.cta_url.trim();
|
||||||
|
if ((ctaLabel && !ctaUrl) || (!ctaLabel && ctaUrl)) {
|
||||||
|
const message = t('guestMessages.form.ctaError', 'CTA label and link are required together.');
|
||||||
|
setError(message);
|
||||||
|
toast.error(message);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const payload: SendGuestNotificationPayload = {
|
||||||
|
title: form.title.trim(),
|
||||||
|
message: form.message.trim(),
|
||||||
|
audience: form.audience,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (form.audience === 'guest' && form.guest_identifier.trim()) {
|
||||||
|
payload.guest_identifier = form.guest_identifier.trim();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (ctaLabel && ctaUrl) {
|
||||||
|
payload.cta = { label: ctaLabel, url: ctaUrl };
|
||||||
|
}
|
||||||
|
|
||||||
|
if (form.expires_in_minutes.trim()) {
|
||||||
|
payload.expires_in_minutes = Number(form.expires_in_minutes);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (form.priority.trim()) {
|
||||||
|
payload.priority = Number(form.priority);
|
||||||
|
}
|
||||||
|
|
||||||
|
setSending(true);
|
||||||
|
setError(null);
|
||||||
|
try {
|
||||||
|
const created = await sendGuestNotification(slug, payload);
|
||||||
|
setHistory((prev) => [created, ...prev]);
|
||||||
|
setForm((prev) => ({
|
||||||
|
...prev,
|
||||||
|
title: '',
|
||||||
|
message: '',
|
||||||
|
guest_identifier: '',
|
||||||
|
cta_label: '',
|
||||||
|
cta_url: '',
|
||||||
|
expires_in_minutes: '',
|
||||||
|
}));
|
||||||
|
toast.success(t('guestMessages.sendSuccess', 'Notification sent to guests.'));
|
||||||
|
} catch (err) {
|
||||||
|
if (!isAuthError(err)) {
|
||||||
|
const message = getApiErrorMessage(err, t('guestMessages.errorSend', 'Message could not be sent.'));
|
||||||
|
setError(message);
|
||||||
|
toast.error(message);
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
setSending(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const locale = i18n.language?.startsWith('en') ? 'en-GB' : 'de-DE';
|
||||||
|
const mutedText = String(theme.gray?.val ?? '#6b7280');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<MobileShell
|
||||||
|
activeTab="home"
|
||||||
|
title={t('guestMessages.title', 'Guest messages')}
|
||||||
|
subtitle={t('guestMessages.subtitle', 'Send push messages to guests')}
|
||||||
|
onBack={() => navigate(-1)}
|
||||||
|
headerActions={
|
||||||
|
<Pressable onPress={() => loadHistory()}>
|
||||||
|
<RefreshCcw size={18} color={String(theme.color?.val ?? '#111827')} />
|
||||||
|
</Pressable>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{error ? (
|
||||||
|
<MobileCard>
|
||||||
|
<Text fontWeight="700" color={String(theme.red10?.val ?? '#b91c1c')}>
|
||||||
|
{error}
|
||||||
|
</Text>
|
||||||
|
</MobileCard>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<MobileCard space="$3">
|
||||||
|
<Text fontSize="$md" fontWeight="800" color={String(theme.color?.val ?? '#111827')}>
|
||||||
|
{t('guestMessages.composeTitle', 'Send a message')}
|
||||||
|
</Text>
|
||||||
|
<YStack space="$2">
|
||||||
|
<Field label={t('guestMessages.form.title', 'Title')}>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={form.title}
|
||||||
|
onChange={(e) => setForm((prev) => ({ ...prev, title: e.target.value }))}
|
||||||
|
placeholder={t('guestMessages.form.titlePlaceholder', 'Gallery reminder, upload nudge, ...')}
|
||||||
|
style={{ ...inputStyle, height: 40 }}
|
||||||
|
/>
|
||||||
|
</Field>
|
||||||
|
<Field label={t('guestMessages.form.message', 'Message')}>
|
||||||
|
<textarea
|
||||||
|
value={form.message}
|
||||||
|
onChange={(e) => setForm((prev) => ({ ...prev, message: e.target.value }))}
|
||||||
|
placeholder={t('guestMessages.form.messagePlaceholder', 'Write a short note for your guests.')}
|
||||||
|
style={{ ...inputStyle, minHeight: 96, resize: 'vertical' }}
|
||||||
|
/>
|
||||||
|
</Field>
|
||||||
|
<Field label={t('guestMessages.form.audience', 'Audience')}>
|
||||||
|
<select
|
||||||
|
value={form.audience}
|
||||||
|
onChange={(e) => setForm((prev) => ({ ...prev, audience: e.target.value as FormState['audience'] }))}
|
||||||
|
style={{ ...inputStyle, height: 42 }}
|
||||||
|
>
|
||||||
|
<option value="all">{t('guestMessages.form.audienceAll', 'All guests')}</option>
|
||||||
|
<option value="guest">{t('guestMessages.form.audienceGuest', 'Specific guest (name or device)')}</option>
|
||||||
|
</select>
|
||||||
|
</Field>
|
||||||
|
{form.audience === 'guest' ? (
|
||||||
|
<Field label={t('guestMessages.form.guestIdentifier', 'Guest name or device ID')}>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={form.guest_identifier}
|
||||||
|
onChange={(e) => setForm((prev) => ({ ...prev, guest_identifier: e.target.value }))}
|
||||||
|
placeholder={t('guestMessages.form.guestPlaceholder', 'e.g., Alex or device token')}
|
||||||
|
style={{ ...inputStyle, height: 40 }}
|
||||||
|
/>
|
||||||
|
</Field>
|
||||||
|
) : null}
|
||||||
|
<Field label={t('guestMessages.form.cta', 'CTA (optional)')}>
|
||||||
|
<YStack space="$1.5">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={form.cta_label}
|
||||||
|
onChange={(e) => setForm((prev) => ({ ...prev, cta_label: e.target.value }))}
|
||||||
|
placeholder={t('guestMessages.form.ctaLabel', 'Button label')}
|
||||||
|
style={{ ...inputStyle, height: 40 }}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="url"
|
||||||
|
value={form.cta_url}
|
||||||
|
onChange={(e) => setForm((prev) => ({ ...prev, cta_url: e.target.value }))}
|
||||||
|
placeholder={t('guestMessages.form.ctaUrl', 'https://your-link.com')}
|
||||||
|
style={{ ...inputStyle, height: 40 }}
|
||||||
|
/>
|
||||||
|
<Text fontSize="$xs" color={mutedText}>
|
||||||
|
{t('guestMessages.form.ctaHint', 'Both fields are required to add a button.')}
|
||||||
|
</Text>
|
||||||
|
</YStack>
|
||||||
|
</Field>
|
||||||
|
<XStack space="$2">
|
||||||
|
<Field label={t('guestMessages.form.expiresIn', 'Expires in (minutes)')}>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
min={5}
|
||||||
|
max={2880}
|
||||||
|
value={form.expires_in_minutes}
|
||||||
|
onChange={(e) => setForm((prev) => ({ ...prev, expires_in_minutes: e.target.value }))}
|
||||||
|
placeholder="60"
|
||||||
|
style={{ ...inputStyle, height: 40 }}
|
||||||
|
/>
|
||||||
|
</Field>
|
||||||
|
<Field label={t('guestMessages.form.priority', 'Priority')}>
|
||||||
|
<select
|
||||||
|
value={form.priority}
|
||||||
|
onChange={(e) => setForm((prev) => ({ ...prev, priority: e.target.value }))}
|
||||||
|
style={{ ...inputStyle, height: 40 }}
|
||||||
|
>
|
||||||
|
{[0, 1, 2, 3, 4, 5].map((value) => (
|
||||||
|
<option key={value} value={value}>
|
||||||
|
{t('guestMessages.form.priorityValue', 'Priority {{value}}', { value })}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</Field>
|
||||||
|
</XStack>
|
||||||
|
<CTAButton
|
||||||
|
label={sending ? t('common.processing', 'Processing…') : t('guestMessages.form.send', 'Send notification')}
|
||||||
|
onPress={() => handleSend()}
|
||||||
|
tone="primary"
|
||||||
|
fullWidth
|
||||||
|
/>
|
||||||
|
{!canSend ? (
|
||||||
|
<Text fontSize="$xs" color={mutedText}>
|
||||||
|
{t('guestMessages.form.validation', 'Add a title and message. Target guests need an identifier.')}
|
||||||
|
</Text>
|
||||||
|
) : null}
|
||||||
|
</YStack>
|
||||||
|
</MobileCard>
|
||||||
|
|
||||||
|
<MobileCard space="$2">
|
||||||
|
<XStack alignItems="center" justifyContent="space-between">
|
||||||
|
<Text fontSize="$md" fontWeight="800" color={String(theme.color?.val ?? '#111827')}>
|
||||||
|
{t('guestMessages.historyTitle', 'Recent messages')}
|
||||||
|
</Text>
|
||||||
|
<Pressable onPress={() => loadHistory()}>
|
||||||
|
<RefreshCcw size={18} color={String(theme.color?.val ?? '#111827')} />
|
||||||
|
</Pressable>
|
||||||
|
</XStack>
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<YStack space="$2">
|
||||||
|
{Array.from({ length: 3 }).map((_, idx) => (
|
||||||
|
<MobileCard key={`s-${idx}`} height={72} opacity={0.6} />
|
||||||
|
))}
|
||||||
|
</YStack>
|
||||||
|
) : history.length === 0 ? (
|
||||||
|
<YStack space="$1.5">
|
||||||
|
<Text fontSize="$sm" color={mutedText}>
|
||||||
|
{t('guestMessages.empty', 'No guest messages yet.')}
|
||||||
|
</Text>
|
||||||
|
</YStack>
|
||||||
|
) : (
|
||||||
|
<YStack space="$2">
|
||||||
|
{history.map((item) => (
|
||||||
|
<MobileCard key={item.id} space="$2" borderColor={String(theme.borderColor?.val ?? '#e5e7eb')}>
|
||||||
|
<XStack alignItems="center" justifyContent="space-between">
|
||||||
|
<Text fontSize="$sm" fontWeight="800" color={String(theme.color?.val ?? '#111827')}>
|
||||||
|
{item.title || t('guestMessages.history.untitled', 'Untitled')}
|
||||||
|
</Text>
|
||||||
|
<XStack space="$1.5" alignItems="center">
|
||||||
|
<PillBadge tone={item.status === 'active' ? 'success' : 'muted'}>
|
||||||
|
{t(`guestMessages.status.${item.status}`, item.status)}
|
||||||
|
</PillBadge>
|
||||||
|
<PillBadge tone={item.audience_scope === 'guest' ? 'warning' : 'muted'}>
|
||||||
|
{item.audience_scope === 'guest'
|
||||||
|
? t('guestMessages.audience.guest', 'Specific guest')
|
||||||
|
: t('guestMessages.audience.all', 'All guests')}
|
||||||
|
</PillBadge>
|
||||||
|
</XStack>
|
||||||
|
</XStack>
|
||||||
|
<Text fontSize="$sm" color={String(theme.color?.val ?? '#111827')}>
|
||||||
|
{item.body ?? t('guestMessages.history.noBody', 'No body provided.')}
|
||||||
|
</Text>
|
||||||
|
<XStack alignItems="center" justifyContent="space-between">
|
||||||
|
<XStack space="$1.5" alignItems="center">
|
||||||
|
<PillBadge tone="muted">{t(`guestMessages.type.${item.type}`, item.type)}</PillBadge>
|
||||||
|
{item.target_identifier ? (
|
||||||
|
<PillBadge tone="muted">
|
||||||
|
<XStack alignItems="center" space="$1.5">
|
||||||
|
<User size={12} color={String(theme.gray10?.val ?? '#6b7280')} />
|
||||||
|
<Text fontSize="$xs" fontWeight="700" color={String(theme.gray10?.val ?? '#6b7280')}>
|
||||||
|
{item.target_identifier}
|
||||||
|
</Text>
|
||||||
|
</XStack>
|
||||||
|
</PillBadge>
|
||||||
|
) : (
|
||||||
|
<PillBadge tone="muted">
|
||||||
|
<XStack alignItems="center" space="$1.5">
|
||||||
|
<Users size={12} color={String(theme.gray10?.val ?? '#6b7280')} />
|
||||||
|
<Text fontSize="$xs" fontWeight="700" color={String(theme.gray10?.val ?? '#6b7280')}>
|
||||||
|
{t('guestMessages.audience.all', 'All guests')}
|
||||||
|
</Text>
|
||||||
|
</XStack>
|
||||||
|
</PillBadge>
|
||||||
|
)}
|
||||||
|
</XStack>
|
||||||
|
<Text fontSize="$xs" color={mutedText}>
|
||||||
|
{formatGuestMessageDate(item.created_at, locale)}
|
||||||
|
</Text>
|
||||||
|
</XStack>
|
||||||
|
</MobileCard>
|
||||||
|
))}
|
||||||
|
</YStack>
|
||||||
|
)}
|
||||||
|
</MobileCard>
|
||||||
|
</MobileShell>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function Field({ label, children }: { label: string; children: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<YStack space="$1.5">
|
||||||
|
<Text fontSize="$sm" fontWeight="800" color="#111827">
|
||||||
|
{label}
|
||||||
|
</Text>
|
||||||
|
{children}
|
||||||
|
</YStack>
|
||||||
|
);
|
||||||
|
}
|
||||||
20
resources/js/admin/mobile/__tests__/guestMessages.test.ts
Normal file
20
resources/js/admin/mobile/__tests__/guestMessages.test.ts
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
import { describe, expect, it } from 'vitest';
|
||||||
|
import { formatGuestMessageDate } from '../guestMessages';
|
||||||
|
|
||||||
|
describe('guest messages helpers', () => {
|
||||||
|
it('returns placeholder for empty value', () => {
|
||||||
|
expect(formatGuestMessageDate(null, 'en-GB')).toBe('—');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('passes through invalid dates', () => {
|
||||||
|
const value = 'not-a-date';
|
||||||
|
expect(formatGuestMessageDate(value, 'de-DE')).toBe(value);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('formats valid ISO timestamps', () => {
|
||||||
|
const formatted = formatGuestMessageDate('2024-01-02T12:00:00Z', 'en-GB');
|
||||||
|
expect(formatted).not.toBe('—');
|
||||||
|
expect(formatted).not.toBe('2024-01-02T12:00:00Z');
|
||||||
|
expect(formatted).toContain('2024');
|
||||||
|
});
|
||||||
|
});
|
||||||
8
resources/js/admin/mobile/guestMessages.ts
Normal file
8
resources/js/admin/mobile/guestMessages.ts
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
export function formatGuestMessageDate(value: string | null, locale: string): string {
|
||||||
|
if (!value) return '—';
|
||||||
|
const date = new Date(value);
|
||||||
|
if (Number.isNaN(date.getTime())) {
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
return date.toLocaleString(locale, { dateStyle: 'medium', timeStyle: 'short' });
|
||||||
|
}
|
||||||
@@ -20,6 +20,7 @@ const MobileBrandingPage = React.lazy(() => import('./mobile/BrandingPage'));
|
|||||||
const MobileEventFormPage = React.lazy(() => import('./mobile/EventFormPage'));
|
const MobileEventFormPage = React.lazy(() => import('./mobile/EventFormPage'));
|
||||||
const MobileQrPrintPage = React.lazy(() => import('./mobile/QrPrintPage'));
|
const MobileQrPrintPage = React.lazy(() => import('./mobile/QrPrintPage'));
|
||||||
const MobileQrLayoutCustomizePage = React.lazy(() => import('./mobile/QrLayoutCustomizePage'));
|
const MobileQrLayoutCustomizePage = React.lazy(() => import('./mobile/QrLayoutCustomizePage'));
|
||||||
|
const MobileEventGuestNotificationsPage = React.lazy(() => import('./mobile/EventGuestNotificationsPage'));
|
||||||
const MobileEventPhotosPage = React.lazy(() => import('./mobile/EventPhotosPage'));
|
const MobileEventPhotosPage = React.lazy(() => import('./mobile/EventPhotosPage'));
|
||||||
const MobileEventMembersPage = React.lazy(() => import('./mobile/EventMembersPage'));
|
const MobileEventMembersPage = React.lazy(() => import('./mobile/EventMembersPage'));
|
||||||
const MobileEventTasksPage = React.lazy(() => import('./mobile/EventTasksPage'));
|
const MobileEventTasksPage = React.lazy(() => import('./mobile/EventTasksPage'));
|
||||||
@@ -116,6 +117,7 @@ export const router = createBrowserRouter([
|
|||||||
{ path: 'events/:slug/invites', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}/qr`} /> },
|
{ path: 'events/:slug/invites', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}/qr`} /> },
|
||||||
{ path: 'events/:slug/branding', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}/branding`} /> },
|
{ path: 'events/:slug/branding', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}/branding`} /> },
|
||||||
{ path: 'events/:slug/photobooth', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}/photobooth`} /> },
|
{ path: 'events/:slug/photobooth', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}/photobooth`} /> },
|
||||||
|
{ path: 'events/:slug/guest-notifications', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}/guest-notifications`} /> },
|
||||||
{ path: 'events/:slug/toolkit', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}`} /> },
|
{ path: 'events/:slug/toolkit', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}`} /> },
|
||||||
{ path: 'mobile/events', element: <MobileEventsPage /> },
|
{ path: 'mobile/events', element: <MobileEventsPage /> },
|
||||||
{ path: 'mobile/events/:slug', element: <MobileEventDetailPage /> },
|
{ path: 'mobile/events/:slug', element: <MobileEventDetailPage /> },
|
||||||
@@ -129,6 +131,7 @@ export const router = createBrowserRouter([
|
|||||||
{ path: 'mobile/events/:slug/members', element: <RequireAdminAccess><MobileEventMembersPage /></RequireAdminAccess> },
|
{ path: 'mobile/events/:slug/members', element: <RequireAdminAccess><MobileEventMembersPage /></RequireAdminAccess> },
|
||||||
{ path: 'mobile/events/:slug/tasks', element: <MobileEventTasksPage /> },
|
{ path: 'mobile/events/:slug/tasks', element: <MobileEventTasksPage /> },
|
||||||
{ path: 'mobile/events/:slug/photobooth', element: <RequireAdminAccess><MobileEventPhotoboothPage /></RequireAdminAccess> },
|
{ path: 'mobile/events/:slug/photobooth', element: <RequireAdminAccess><MobileEventPhotoboothPage /></RequireAdminAccess> },
|
||||||
|
{ path: 'mobile/events/:slug/guest-notifications', element: <RequireAdminAccess><MobileEventGuestNotificationsPage /></RequireAdminAccess> },
|
||||||
{ path: 'mobile/notifications', element: <MobileNotificationsPage /> },
|
{ path: 'mobile/notifications', element: <MobileNotificationsPage /> },
|
||||||
{ path: 'mobile/profile', element: <RequireAdminAccess><MobileProfilePage /></RequireAdminAccess> },
|
{ path: 'mobile/profile', element: <RequireAdminAccess><MobileProfilePage /></RequireAdminAccess> },
|
||||||
{ path: 'mobile/billing', element: <RequireAdminAccess><MobileBillingPage /></RequireAdminAccess> },
|
{ path: 'mobile/billing', element: <RequireAdminAccess><MobileBillingPage /></RequireAdminAccess> },
|
||||||
|
|||||||
125
tests/Unit/Support/WatermarkConfigResolverTest.php
Normal file
125
tests/Unit/Support/WatermarkConfigResolverTest.php
Normal file
@@ -0,0 +1,125 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace Tests\Unit\Support;
|
||||||
|
|
||||||
|
use App\Models\Event;
|
||||||
|
use App\Models\EventPackage;
|
||||||
|
use App\Models\Package;
|
||||||
|
use App\Support\WatermarkConfigResolver;
|
||||||
|
use Illuminate\Foundation\Testing\RefreshDatabase;
|
||||||
|
use Tests\TestCase;
|
||||||
|
|
||||||
|
class WatermarkConfigResolverTest extends TestCase
|
||||||
|
{
|
||||||
|
use RefreshDatabase;
|
||||||
|
|
||||||
|
public function test_watermark_is_disabled_when_package_blocks_it(): void
|
||||||
|
{
|
||||||
|
$package = Package::factory()->create([
|
||||||
|
'watermark_allowed' => false,
|
||||||
|
'branding_allowed' => true,
|
||||||
|
]);
|
||||||
|
|
||||||
|
$event = Event::factory()->create([
|
||||||
|
'settings' => [
|
||||||
|
'watermark' => [
|
||||||
|
'mode' => 'custom',
|
||||||
|
'asset' => 'branding/custom.png',
|
||||||
|
],
|
||||||
|
],
|
||||||
|
]);
|
||||||
|
|
||||||
|
EventPackage::create([
|
||||||
|
'event_id' => $event->id,
|
||||||
|
'package_id' => $package->id,
|
||||||
|
'purchased_price' => $package->price,
|
||||||
|
'purchased_at' => now(),
|
||||||
|
]);
|
||||||
|
|
||||||
|
$event->load('eventPackages.package');
|
||||||
|
$event->setRelation('eventPackage', $event->eventPackages->first());
|
||||||
|
|
||||||
|
$config = WatermarkConfigResolver::resolve($event);
|
||||||
|
|
||||||
|
$this->assertSame('none', $config['type']);
|
||||||
|
$this->assertSame('none', $config['policy']);
|
||||||
|
}
|
||||||
|
|
||||||
|
public function test_branding_locked_forces_base_watermark(): void
|
||||||
|
{
|
||||||
|
$package = Package::factory()->create([
|
||||||
|
'watermark_allowed' => true,
|
||||||
|
'branding_allowed' => false,
|
||||||
|
]);
|
||||||
|
|
||||||
|
$event = Event::factory()->create([
|
||||||
|
'settings' => [
|
||||||
|
'watermark' => [
|
||||||
|
'mode' => 'custom',
|
||||||
|
'asset' => 'branding/custom.png',
|
||||||
|
'position' => 'top-left',
|
||||||
|
],
|
||||||
|
],
|
||||||
|
]);
|
||||||
|
|
||||||
|
EventPackage::create([
|
||||||
|
'event_id' => $event->id,
|
||||||
|
'package_id' => $package->id,
|
||||||
|
'purchased_price' => $package->price,
|
||||||
|
'purchased_at' => now(),
|
||||||
|
]);
|
||||||
|
|
||||||
|
$event->load('eventPackages.package');
|
||||||
|
$event->setRelation('eventPackage', $event->eventPackages->first());
|
||||||
|
|
||||||
|
$config = WatermarkConfigResolver::resolve($event);
|
||||||
|
|
||||||
|
$this->assertSame('base', $config['type']);
|
||||||
|
$this->assertSame(config('watermark.base.asset'), $config['asset']);
|
||||||
|
$this->assertSame(config('watermark.base.position'), $config['position']);
|
||||||
|
}
|
||||||
|
|
||||||
|
public function test_custom_watermark_is_returned_when_allowed(): void
|
||||||
|
{
|
||||||
|
$package = Package::factory()->create([
|
||||||
|
'watermark_allowed' => true,
|
||||||
|
'branding_allowed' => true,
|
||||||
|
]);
|
||||||
|
|
||||||
|
$event = Event::factory()->create([
|
||||||
|
'settings' => [
|
||||||
|
'watermark' => [
|
||||||
|
'mode' => 'custom',
|
||||||
|
'asset' => 'branding/custom.png',
|
||||||
|
'position' => 'top-center',
|
||||||
|
'opacity' => 0.8,
|
||||||
|
'scale' => 0.5,
|
||||||
|
'padding' => 24,
|
||||||
|
'offset_x' => 10,
|
||||||
|
'offset_y' => -5,
|
||||||
|
],
|
||||||
|
],
|
||||||
|
]);
|
||||||
|
|
||||||
|
EventPackage::create([
|
||||||
|
'event_id' => $event->id,
|
||||||
|
'package_id' => $package->id,
|
||||||
|
'purchased_price' => $package->price,
|
||||||
|
'purchased_at' => now(),
|
||||||
|
]);
|
||||||
|
|
||||||
|
$event->load('eventPackages.package');
|
||||||
|
$event->setRelation('eventPackage', $event->eventPackages->first());
|
||||||
|
|
||||||
|
$config = WatermarkConfigResolver::resolve($event);
|
||||||
|
|
||||||
|
$this->assertSame('custom', $config['type']);
|
||||||
|
$this->assertSame('top-center', $config['position']);
|
||||||
|
$this->assertSame('branding/custom.png', $config['asset']);
|
||||||
|
$this->assertEquals(0.8, $config['opacity']);
|
||||||
|
$this->assertEquals(0.5, $config['scale']);
|
||||||
|
$this->assertEquals(24, $config['padding']);
|
||||||
|
$this->assertEquals(10, $config['offset_x']);
|
||||||
|
$this->assertEquals(-5, $config['offset_y']);
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user