Files
fotospiel-app/resources/js/guest/services/photosApi.ts
Codex Agent a949c8d3af - Wired the checkout wizard for Google “comfort login”: added Socialite controller + dependency, new Google env
hooks in config/services.php/.env.example, and updated wizard steps/controllers to store session payloads,
attach packages, and surface localized success/error states.
- Retooled payment handling for both Stripe and PayPal, adding richer status management in CheckoutController/
PayPalController, fallback flows in the wizard’s PaymentStep.tsx, and fresh feature tests for intent
creation, webhooks, and the wizard CTA.
- Introduced a consent-aware Matomo analytics stack: new consent context, cookie-banner UI, useAnalytics/
useCtaExperiment hooks, and MatomoTracker component, then instrumented marketing pages (Home, Packages,
Checkout) with localized copy and experiment tracking.
- Polished package presentation across marketing UIs by centralizing formatting in PresentsPackages, surfacing
localized description tables/placeholders, tuning badges/layouts, and syncing guest/marketing translations.
- Expanded docs & reference material (docs/prp/*, TODOs, public gallery overview) and added a Playwright smoke
test for the hero CTA while reconciling outstanding checklist items.
2025-10-19 11:41:03 +02:00

102 lines
3.2 KiB
TypeScript

import { getDeviceId } from '../lib/device';
function getCsrfToken(): string | null {
// Method 1: Meta tag (preferred for SPA)
const metaToken = document.querySelector('meta[name="csrf-token"]');
if (metaToken) {
return (metaToken as HTMLMetaElement).getAttribute('content') || null;
}
// Method 2: XSRF-TOKEN cookie (Sanctum fallback)
const name = 'XSRF-TOKEN=';
const decodedCookie = decodeURIComponent(document.cookie);
const ca = decodedCookie.split(';');
for (let i = 0; i < ca.length; i++) {
const c = ca[i].trimStart();
if (c.startsWith(name)) {
const token = c.substring(name.length);
try {
// Decode base64 if needed
return decodeURIComponent(atob(token));
} catch {
return token;
}
}
}
console.warn('No CSRF token found - API requests may fail');
return null;
}
function getCsrfHeaders(): Record<string, string> {
const token = getCsrfToken();
const headers: Record<string, string> = {
'X-Device-Id': getDeviceId(),
'Accept': 'application/json',
};
if (token) {
headers['X-CSRF-TOKEN'] = token;
headers['X-XSRF-TOKEN'] = token;
}
return headers;
}
export async function likePhoto(id: number): Promise<number> {
const headers = getCsrfHeaders();
const res = await fetch(`/api/v1/photos/${id}/like`, {
method: 'POST',
credentials: 'include',
headers: {
...headers,
'Content-Type': 'application/json',
},
});
if (!res.ok) {
const errorText = await res.text();
if (res.status === 419) {
throw new Error('CSRF Token mismatch. This usually means:\n\n' +
'1. The page needs to be refreshed\n' +
'2. Check if <meta name="csrf-token"> is present in HTML source\n' +
'3. API routes might need CSRF exemption in VerifyCsrfToken middleware');
}
throw new Error(`Like failed: ${res.status} - ${errorText}`);
}
const json = await res.json();
return json.likes_count ?? json.data?.likes_count ?? 0;
}
export async function uploadPhoto(eventToken: string, file: File, taskId?: number, emotionSlug?: string): Promise<number> {
const formData = new FormData();
formData.append('photo', file, `photo-${Date.now()}.jpg`);
if (taskId) formData.append('task_id', taskId.toString());
if (emotionSlug) formData.append('emotion_slug', emotionSlug);
formData.append('device_id', getDeviceId());
const res = await fetch(`/api/v1/events/${encodeURIComponent(eventToken)}/upload`, {
method: 'POST',
credentials: 'include',
body: formData,
// Don't set Content-Type for FormData - let browser handle it with boundary
});
if (!res.ok) {
const errorText = await res.text();
if (res.status === 419) {
throw new Error('CSRF Token mismatch during upload.\n\n' +
'This usually means:\n' +
'1. API routes need CSRF exemption in VerifyCsrfToken middleware\n' +
'2. Check if <meta name="csrf-token"> is present in page source\n' +
'3. The page might need to be refreshed');
}
throw new Error(`Upload failed: ${res.status} - ${errorText}`);
}
const json = await res.json();
return json.photo_id ?? json.id ?? json.data?.id ?? 0;
}