mirror of
https://github.com/Since-3/Kuma.git
synced 2026-10-12 19:51:17 +00:00
bug fixes
This commit is contained in:
parent
dad50d1c97
commit
40003e63d2
13 changed files with 464 additions and 397 deletions
|
|
@ -2,6 +2,7 @@ import { NextRequest, NextResponse } from "next/server";
|
|||
import { prisma } from "@/src/lib/prisma";
|
||||
import { stripe, calculatePlatformFeeCents, eurosToCents } from "@/src/lib/stripe";
|
||||
import { getUserData, isUser } from "@/src/lib/auth/getUser";
|
||||
import { isManagerOrEmployeeEmail } from "@/src/lib/auth/account-role-by-email";
|
||||
|
||||
// Simple in-memory rate limiter: max 10 checkout attempts per IP per minute.
|
||||
// Best-effort only — in multi-instance/serverless deployments each instance has
|
||||
|
|
@ -92,6 +93,20 @@ export async function POST(request: NextRequest) {
|
|||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
// Manager/Mitarbeiter dürfen nicht als Gast mit ihrer geschäftlichen
|
||||
// E-Mail buchen: sie haben keinen User-Eintrag, die Buchung liefe als
|
||||
// GuestLead durch und würde den Account-Kontext umgehen. Vor der
|
||||
// Stripe-Session abfangen, damit kein Geld fließt.
|
||||
if (await isManagerOrEmployeeEmail(guestEmail.trim().toLowerCase())) {
|
||||
return NextResponse.json(
|
||||
{
|
||||
error:
|
||||
"Diese E-Mail-Adresse gehört zu einem Team-Account und kann nicht für eine Gast-Buchung verwendet werden. Bitte mit einem Kunden-Konto anmelden oder eine andere E-Mail-Adresse verwenden.",
|
||||
},
|
||||
{ status: 403 }
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const course = await prisma.course.findUnique({
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import {
|
|||
} from "@/src/lib/mail/templates/booking-refund";
|
||||
import { toEmailBranding } from "@/src/modules/settings/lib/to-email-branding";
|
||||
import { notifyBusinessManager } from "@/src/modules/notifications/lib/create-notification";
|
||||
import { isManagerOrEmployeeEmail } from "@/src/lib/auth/account-role-by-email";
|
||||
|
||||
/**
|
||||
* Sucht einen registrierten User anhand der E-Mail, case-insensitive.
|
||||
|
|
@ -126,6 +127,29 @@ async function handleCheckoutCompleted(session: Stripe.Checkout.Session) {
|
|||
return;
|
||||
}
|
||||
|
||||
// Sicherheitsnetz: Manager/Mitarbeiter dürfen nicht als Gast mit ihrer
|
||||
// geschäftlichen E-Mail buchen. Die Checkout-Route fängt das bereits vor
|
||||
// der Stripe-Session ab; falls eine Session diesen Pfad dennoch erreicht
|
||||
// (direkter API-Aufruf, Race-Condition), wird hier keine Buchung
|
||||
// angelegt und die Zahlung sofort erstattet.
|
||||
if (await isManagerOrEmployeeEmail(guestEmail)) {
|
||||
console.warn(
|
||||
`checkout.session.completed: Gast-E-Mail ${guestEmail} gehört zu einem Team-Account. ` +
|
||||
`Buchung wird abgelehnt, Zahlung wird erstattet (Session ${session.id}).`
|
||||
);
|
||||
if (paymentIntentId) {
|
||||
const refundResult = await refundStripePayment(paymentIntentId);
|
||||
if (!refundResult.success) {
|
||||
console.error(
|
||||
`Refund fehlgeschlagen für abgelehnte Team-Account-Gastbuchung ` +
|
||||
`(PaymentIntent ${paymentIntentId}): ${refundResult.error}. ` +
|
||||
`Manuelle Erstattung im Stripe Dashboard nötig.`
|
||||
);
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Zwischen Checkout-Start (als Gast) und Webhook-Zustellung kann sich der
|
||||
// Gast bereits mit derselben E-Mail registriert haben. In dem Fall die
|
||||
// Buchung direkt dem neuen Account zuordnen statt einen verwaisten
|
||||
|
|
@ -161,6 +185,26 @@ async function handleCheckoutCompleted(session: Stripe.Checkout.Session) {
|
|||
session.customer_details?.email ||
|
||||
session.customer_email;
|
||||
if (fallbackEmail) {
|
||||
// Wie im Guest-Zweig: Team-Account-E-Mails abfangen und erstatten,
|
||||
// statt eine GuestLead-Buchung anzulegen.
|
||||
if (await isManagerOrEmployeeEmail(fallbackEmail)) {
|
||||
console.warn(
|
||||
`checkout.session.completed: Fallback-E-Mail ${fallbackEmail} gehört zu einem ` +
|
||||
`Team-Account. Buchung wird abgelehnt, Zahlung wird erstattet (Session ${session.id}).`
|
||||
);
|
||||
if (paymentIntentId) {
|
||||
const refundResult = await refundStripePayment(paymentIntentId);
|
||||
if (!refundResult.success) {
|
||||
console.error(
|
||||
`Refund fehlgeschlagen für abgelehnte Team-Account-Gastbuchung ` +
|
||||
`(PaymentIntent ${paymentIntentId}): ${refundResult.error}. ` +
|
||||
`Manuelle Erstattung im Stripe Dashboard nötig.`
|
||||
);
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const registeredUser = await findUserByEmailInsensitive(fallbackEmail);
|
||||
outcome = registeredUser
|
||||
? await runCapacityTransactionUser({
|
||||
|
|
|
|||
28
src/lib/auth/account-role-by-email.ts
Normal file
28
src/lib/auth/account-role-by-email.ts
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import { prisma } from "@/src/lib/prisma";
|
||||
|
||||
/**
|
||||
* Prüft, ob eine E-Mail bereits zu einem Manager- oder Employee-Account gehört.
|
||||
*
|
||||
* Wird im Gast-Buchungsflow gebraucht: Manager/Mitarbeiter haben keinen Eintrag
|
||||
* in der User-Tabelle und dürfen Kurse nicht als Gast mit ihrer geschäftlichen
|
||||
* E-Mail buchen (siehe Checkout-Route und Stripe-Webhook). Der Vergleich ist
|
||||
* case-insensitive, da Gast-E-Mails immer lowercase normalisiert werden, ältere
|
||||
* Manager/Employee-Datensätze aber abweichende Schreibweisen haben können.
|
||||
*/
|
||||
export async function isManagerOrEmployeeEmail(email: string): Promise<boolean> {
|
||||
const normalized = email.trim();
|
||||
if (!normalized) return false;
|
||||
|
||||
const [manager, employee] = await Promise.all([
|
||||
prisma.manager.findFirst({
|
||||
where: { email: { equals: normalized, mode: "insensitive" } },
|
||||
select: { id: true },
|
||||
}),
|
||||
prisma.employee.findFirst({
|
||||
where: { email: { equals: normalized, mode: "insensitive" } },
|
||||
select: { id: true },
|
||||
}),
|
||||
]);
|
||||
|
||||
return !!manager || !!employee;
|
||||
}
|
||||
48
src/lib/image/square-logo.ts
Normal file
48
src/lib/image/square-logo.ts
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
"use client";
|
||||
|
||||
const OUTPUT_SIZE = 512;
|
||||
|
||||
/**
|
||||
* Passt ein Logo automatisch in ein quadratisches, transparentes PNG ein
|
||||
* ("contain"): das Seitenverhältnis bleibt erhalten, nichts wird abgeschnitten,
|
||||
* der Rand bleibt transparent. Ersetzt das manuelle Zoom/Pan-Zuschneiden – da
|
||||
* Logos überall via `object-contain` in einem Quadrat dargestellt werden
|
||||
* (Header, Rechnung, öffentliche Seite), reicht ein zentriertes Einpassen.
|
||||
*
|
||||
* SVGs werden unverändert zurückgegeben (Vektor bleibt scharf, das Rastern
|
||||
* würde nur Qualität kosten). Nicht-Bild-Dateien ebenso.
|
||||
*/
|
||||
export async function squareLogo(file: File, size: number = OUTPUT_SIZE): Promise<File> {
|
||||
if (!file.type.startsWith("image/") || file.type === "image/svg+xml") {
|
||||
return file;
|
||||
}
|
||||
|
||||
const bitmap = await createImageBitmap(file).catch(() => null);
|
||||
if (!bitmap) return file;
|
||||
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = size;
|
||||
canvas.height = size;
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) {
|
||||
bitmap.close();
|
||||
return file;
|
||||
}
|
||||
|
||||
// Contain-Scale: längere Kante füllt das Quadrat, die kürzere wird zentriert.
|
||||
const scale = Math.min(size / bitmap.width, size / bitmap.height);
|
||||
const drawWidth = bitmap.width * scale;
|
||||
const drawHeight = bitmap.height * scale;
|
||||
const x = (size - drawWidth) / 2;
|
||||
const y = (size - drawHeight) / 2;
|
||||
|
||||
ctx.clearRect(0, 0, size, size);
|
||||
ctx.drawImage(bitmap, x, y, drawWidth, drawHeight);
|
||||
bitmap.close();
|
||||
|
||||
const blob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, "image/png"));
|
||||
if (!blob) return file;
|
||||
|
||||
const name = file.name.replace(/\.[^.]+$/, "") + ".png";
|
||||
return new File([blob], name, { type: "image/png", lastModified: Date.now() });
|
||||
}
|
||||
|
|
@ -40,6 +40,9 @@ export type UserBooking = {
|
|||
paymentStatus: string;
|
||||
isPast: boolean;
|
||||
businessName: string;
|
||||
/** Kontaktdaten des Standorts für den Detail-Dialog (Ticket: Email + Ort anzeigen). */
|
||||
businessAddress: string | null;
|
||||
businessEmail: string | null;
|
||||
businessBranding: { logoUrl: string | null; accentColor: string; accentTextColor: string };
|
||||
};
|
||||
|
||||
|
|
@ -75,7 +78,9 @@ export async function getUserBookings(): Promise<
|
|||
coverImage: true,
|
||||
description: true,
|
||||
_count: { select: { bookings: { where: { paymentStatus: "paid" } } } },
|
||||
business: { select: { name: true, branding: true } },
|
||||
business: {
|
||||
select: { name: true, address: true, email: true, branding: true },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -150,6 +155,8 @@ export async function getUserBookings(): Promise<
|
|||
paymentStatus: b.paymentStatus,
|
||||
isPast: courseStart < now,
|
||||
businessName: b.course.business?.name ?? branding.companyName,
|
||||
businessAddress: b.course.business?.address ?? null,
|
||||
businessEmail: b.course.business?.email ?? null,
|
||||
businessBranding: {
|
||||
logoUrl: branding.logoUrl,
|
||||
accentColor: branding.accentColor,
|
||||
|
|
|
|||
|
|
@ -31,94 +31,60 @@ export const normalizeWeekdayTimings = (raw: RawWeekdayTimings): WeekdayTimings
|
|||
return result;
|
||||
};
|
||||
|
||||
/** Ermittelt ein Standard-Zeitfenster, falls alle Tage genau ein identisches haben. */
|
||||
const deriveDefaultSlot = (timings: WeekdayTimings): WeekdaySlot => {
|
||||
const daySlots = Object.values(timings);
|
||||
if (daySlots.length === 0) return emptySlot();
|
||||
const first = daySlots[0][0];
|
||||
if (!first) return emptySlot();
|
||||
const allSame = daySlots.every(
|
||||
(slots) =>
|
||||
slots.length === 1 && slots[0].timeFrom === first.timeFrom && slots[0].timeTo === first.timeTo
|
||||
);
|
||||
return allSame ? { ...first } : emptySlot();
|
||||
};
|
||||
|
||||
interface UseWeekdayTimingsOptions {
|
||||
/** Vorbelegung (Edit-Modus) — beliebiges gespeichertes Format. */
|
||||
initialWeekdays?: string[];
|
||||
initialTimings?: RawWeekdayTimings;
|
||||
/**
|
||||
* Uhrzeit, mit der neu ausgewählte Tage vorbefüllt werden — hier die
|
||||
* allgemeinen Kurs-Zeitfelder ("Uhrzeit von/bis" oben im Formular). Wird bei
|
||||
* jedem Render aktuell übergeben; leere Werte belegen einen leeren Slot.
|
||||
*/
|
||||
defaultSlot?: WeekdaySlot;
|
||||
}
|
||||
|
||||
/**
|
||||
* Kapselt die Wochentag-Auswahl und deren Zeitfenster für die "custom"-Häufigkeit
|
||||
* eines Dauerauftrags. Jeder Tag kann mehrere Zeitfenster haben; ein
|
||||
* Standard-Zeitfenster kann auf alle Tage übertragen werden.
|
||||
* eines Dauerauftrags. Jeder Tag kann mehrere Zeitfenster haben. Neu ausgewählte
|
||||
* Tage (und neue Zeitfenster) werden mit der allgemeinen Kurs-Uhrzeit
|
||||
* vorbelegt, falls diese gesetzt ist.
|
||||
*/
|
||||
export function useWeekdayTimings({
|
||||
initialWeekdays = [],
|
||||
initialTimings,
|
||||
defaultSlot,
|
||||
}: UseWeekdayTimingsOptions = {}) {
|
||||
const [selectedWeekdays, setSelectedWeekdays] = useState<string[]>(initialWeekdays);
|
||||
const [weekdayTimings, setWeekdayTimings] = useState<WeekdayTimings>(() =>
|
||||
normalizeWeekdayTimings(initialTimings)
|
||||
);
|
||||
const [defaultSlot, setDefaultSlot] = useState<WeekdaySlot>(() =>
|
||||
deriveDefaultSlot(normalizeWeekdayTimings(initialTimings))
|
||||
);
|
||||
|
||||
const isDefaultSlotFilled = !!defaultSlot.timeFrom && !!defaultSlot.timeTo;
|
||||
// Vorbelegung neuer Slots mit der aktuellen Kurs-Uhrzeit aus den oberen
|
||||
// Zeitfeldern. Die Callbacks unten sind nicht memoisiert, lesen also bei
|
||||
// jedem Render den aktuellen Wert.
|
||||
const newSlot = (): WeekdaySlot => ({
|
||||
timeFrom: defaultSlot?.timeFrom ?? "",
|
||||
timeTo: defaultSlot?.timeTo ?? "",
|
||||
});
|
||||
|
||||
const reset = () => {
|
||||
setSelectedWeekdays([]);
|
||||
setWeekdayTimings({});
|
||||
setDefaultSlot(emptySlot());
|
||||
};
|
||||
|
||||
// Hält weekdayTimings mit der Tagesauswahl synchron: jeder ausgewählte Tag
|
||||
// bekommt mindestens einen (ggf. leeren) Slot, abgewählte Tage fallen raus.
|
||||
// Hält weekdayTimings mit der Tagesauswahl synchron: jeder neu ausgewählte Tag
|
||||
// bekommt einen mit der Kurs-Uhrzeit vorbefüllten Slot, abgewählte Tage fallen raus.
|
||||
const syncWeekdays = (days: string[]) => {
|
||||
setSelectedWeekdays(days);
|
||||
setWeekdayTimings((prev) => {
|
||||
const next: WeekdayTimings = {};
|
||||
days.forEach((d) => {
|
||||
next[d] = prev[d]?.length ? prev[d] : [{ ...defaultSlot }];
|
||||
next[d] = prev[d]?.length ? prev[d] : [newSlot()];
|
||||
});
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
// Standard-Zeitfenster auf alle ausgewählten Tage übertragen (ersetzt deren Slots).
|
||||
const applyDefaultToAll = () => {
|
||||
if (!isDefaultSlotFilled || selectedWeekdays.length === 0) return;
|
||||
setWeekdayTimings(() => {
|
||||
const next: WeekdayTimings = {};
|
||||
selectedWeekdays.forEach((d) => {
|
||||
next[d] = [{ ...defaultSlot }];
|
||||
});
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const updateDefaultSlot = (patch: Partial<WeekdaySlot>) => {
|
||||
const updated = { ...defaultSlot, ...patch };
|
||||
setDefaultSlot(updated);
|
||||
// Solange noch kein Tag eine eigene Uhrzeit gesetzt hat, die Änderung direkt
|
||||
// auf alle ausgewählten Tage spiegeln (initiale Bequemlichkeit).
|
||||
const noDayCustomized = selectedWeekdays.every((d) =>
|
||||
(weekdayTimings[d] ?? []).every((s) => !s.timeFrom && !s.timeTo)
|
||||
);
|
||||
if (noDayCustomized && selectedWeekdays.length > 0) {
|
||||
setWeekdayTimings(() => {
|
||||
const next: WeekdayTimings = {};
|
||||
selectedWeekdays.forEach((d) => {
|
||||
next[d] = [{ ...updated }];
|
||||
});
|
||||
return next;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const updateSlot = (day: string, index: number, patch: Partial<WeekdaySlot>) => {
|
||||
setWeekdayTimings((prev) => {
|
||||
const slots = (prev[day] ?? [emptySlot()]).map((s, i) =>
|
||||
|
|
@ -131,14 +97,14 @@ export function useWeekdayTimings({
|
|||
const addSlot = (day: string) => {
|
||||
setWeekdayTimings((prev) => ({
|
||||
...prev,
|
||||
[day]: [...(prev[day] ?? []), emptySlot()],
|
||||
[day]: [...(prev[day] ?? []), newSlot()],
|
||||
}));
|
||||
};
|
||||
|
||||
const removeSlot = (day: string, index: number) => {
|
||||
setWeekdayTimings((prev) => {
|
||||
const slots = (prev[day] ?? []).filter((_, i) => i !== index);
|
||||
return { ...prev, [day]: slots.length ? slots : [emptySlot()] };
|
||||
return { ...prev, [day]: slots.length ? slots : [newSlot()] };
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -166,14 +132,10 @@ export function useWeekdayTimings({
|
|||
return {
|
||||
selectedWeekdays,
|
||||
weekdayTimings,
|
||||
defaultSlot,
|
||||
isDefaultSlotFilled,
|
||||
cleanedTimings,
|
||||
hasInvalidTiming,
|
||||
reset,
|
||||
syncWeekdays,
|
||||
applyDefaultToAll,
|
||||
updateDefaultSlot,
|
||||
updateSlot,
|
||||
addSlot,
|
||||
removeSlot,
|
||||
|
|
|
|||
|
|
@ -141,6 +141,11 @@ export const BookingDialog = ({
|
|||
// Wenn gesetzt → Admin-Ansicht: kein Buchen-Button, nur Status-Badge
|
||||
paymentStatus,
|
||||
accentColor,
|
||||
// Wenn gesetzt → im Footer erscheint ein "Stornieren"-Button (z.B. "Meine
|
||||
// Kurse": bezahlte, kommende Buchung). Das Öffnen des Bestätigungsdialogs
|
||||
// liegt beim Aufrufer.
|
||||
canCancel = false,
|
||||
onRequestCancel,
|
||||
}: {
|
||||
course: PublicCourse;
|
||||
business?: BusinessInfo;
|
||||
|
|
@ -148,6 +153,8 @@ export const BookingDialog = ({
|
|||
onOpenChange: (v: boolean) => void;
|
||||
paymentStatus?: string;
|
||||
accentColor?: string;
|
||||
canCancel?: boolean;
|
||||
onRequestCancel?: () => void;
|
||||
}) => {
|
||||
const accentButtonStyle = accentColor
|
||||
? { backgroundColor: accentColor, color: getContrastTextColor(accentColor) }
|
||||
|
|
@ -434,6 +441,16 @@ export const BookingDialog = ({
|
|||
>
|
||||
{adminStatus!.label}
|
||||
</span>
|
||||
{canCancel && onRequestCancel && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={onRequestCancel}
|
||||
className="flex-1 sm:flex-initial text-red-600 border-red-200 hover:bg-red-50 hover:text-red-700 hover:border-red-300"
|
||||
>
|
||||
<X size={14} className="mr-1.5 shrink-0" />
|
||||
Stornieren
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => onOpenChange(false)}
|
||||
|
|
|
|||
|
|
@ -3,16 +3,25 @@
|
|||
import { useState, useTransition } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Image from "next/image";
|
||||
import { MapPin, Clock, X } from "lucide-react";
|
||||
import { MapPin, Clock, Users } from "lucide-react";
|
||||
import type { UserBooking } from "../../actions/booking-actions";
|
||||
import { cancelUserBooking } from "../../actions/booking-actions";
|
||||
import CancelBookingConfirmDialog from "./CancelBookingConfirmDialog";
|
||||
import AbstractTooltip from "@/src/components/layout/AbstractTooltip";
|
||||
import { BookingDialog } from "@/src/modules/courses/ui/components/PublicCourseCard";
|
||||
import type { PublicCourse } from "@/src/modules/courses/ui/components/PublicCourseCard";
|
||||
import { Button } from "@/src/components/ui/button";
|
||||
import type {
|
||||
PublicCourse,
|
||||
BusinessInfo,
|
||||
} from "@/src/modules/courses/ui/components/PublicCourseCard";
|
||||
import { toast } from "sonner";
|
||||
|
||||
const LEVEL_LABELS: Record<string, { label: string; bg: string; text: string }> = {
|
||||
any: { label: "Jedes Niveau", bg: "bg-gray-100", text: "text-gray-600" },
|
||||
beginner: { label: "Anfänger", bg: "bg-blue-100", text: "text-blue-700" },
|
||||
advanced: { label: "Fortgeschrittene", bg: "bg-orange-100", text: "text-orange-700" },
|
||||
pro: { label: "Profi", bg: "bg-red-100", text: "text-red-700" },
|
||||
};
|
||||
|
||||
const getDiceBearUrl = (seed: string) =>
|
||||
`https://api.dicebear.com/9.x/thumbs/svg?seed=${encodeURIComponent(`t-${seed.slice(0, 6)}`)}`;
|
||||
|
||||
|
|
@ -49,6 +58,15 @@ function toPublicCourse(b: UserBooking): PublicCourse {
|
|||
};
|
||||
}
|
||||
|
||||
/** Standort-Kontaktdaten für den Detail-Dialog (Email + Ort). */
|
||||
function toBusinessInfo(b: UserBooking): BusinessInfo | undefined {
|
||||
if (!b.businessAddress && !b.businessEmail) return undefined;
|
||||
return {
|
||||
address: b.businessAddress ?? "",
|
||||
email: b.businessEmail ?? "",
|
||||
};
|
||||
}
|
||||
|
||||
interface UserBookingCardProps {
|
||||
booking: UserBooking;
|
||||
}
|
||||
|
|
@ -71,6 +89,9 @@ const UserBookingCard = ({ booking }: UserBookingCardProps) => {
|
|||
});
|
||||
|
||||
const canCancel = !booking.isPast && !cancelled && booking.paymentStatus === "paid";
|
||||
const level = LEVEL_LABELS[booking.level] ?? LEVEL_LABELS.any;
|
||||
const safeCurrent = Math.max(0, booking.currentParticipants);
|
||||
const safeMax = Math.max(0, booking.maxParticipants);
|
||||
|
||||
const handleConfirmCancel = () =>
|
||||
new Promise<{ success: true } | { success: false; error: string }>((resolve) => {
|
||||
|
|
@ -83,6 +104,27 @@ const UserBookingCard = ({ booking }: UserBookingCardProps) => {
|
|||
return (
|
||||
<>
|
||||
<div className="bg-white/70 backdrop-blur-sm border border-white/50 rounded-xl shadow-sm hover:shadow-md hover:bg-white/85 transition-all flex flex-col gap-0 overflow-hidden">
|
||||
{/* Kursbild */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setDialogOpen(true)}
|
||||
className="relative w-full h-32 shrink-0 bg-gray-100 cursor-pointer select-none"
|
||||
aria-label={`Kurs ${booking.courseName} öffnen`}
|
||||
>
|
||||
{booking.coverImage ? (
|
||||
<Image
|
||||
src={booking.coverImage}
|
||||
alt={booking.courseName}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full bg-linear-to-br from-gray-200 to-gray-300 flex items-center justify-center">
|
||||
<span className="text-xs text-gray-400">Kein Bild</span>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Clickable card area */}
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -149,6 +191,19 @@ const UserBookingCard = ({ booking }: UserBookingCardProps) => {
|
|||
</span>
|
||||
</div>
|
||||
|
||||
{/* Schwierigkeitsgrad + Teilnehmerzahl */}
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span
|
||||
className={`inline-block text-xs font-semibold px-2 py-0.5 rounded-full ${level.bg} ${level.text}`}
|
||||
>
|
||||
{level.label}
|
||||
</span>
|
||||
<span className="flex items-center gap-1 text-xs text-gray-500 shrink-0">
|
||||
<Users size={13} className="shrink-0" />
|
||||
{safeCurrent}/{safeMax}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Status Badge */}
|
||||
<div>
|
||||
<span
|
||||
|
|
@ -158,32 +213,20 @@ const UserBookingCard = ({ booking }: UserBookingCardProps) => {
|
|||
</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* Stornierung Button – nur für zukünftige, nicht stornierte Buchungen */}
|
||||
{canCancel && (
|
||||
<div className="px-4 pb-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full text-red-600 border-red-200 hover:bg-red-50 hover:text-red-700 hover:border-red-300"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setConfirmOpen(true);
|
||||
}}
|
||||
>
|
||||
<X size={14} className="mr-1.5 shrink-0" />
|
||||
Stornieren
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<BookingDialog
|
||||
course={toPublicCourse(booking)}
|
||||
business={toBusinessInfo(booking)}
|
||||
open={dialogOpen}
|
||||
onOpenChange={setDialogOpen}
|
||||
paymentStatus={effectiveStatus}
|
||||
accentColor={booking.businessBranding.accentColor}
|
||||
canCancel={canCancel}
|
||||
onRequestCancel={() => {
|
||||
setDialogOpen(false);
|
||||
setConfirmOpen(true);
|
||||
}}
|
||||
/>
|
||||
|
||||
<CancelBookingConfirmDialog
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import { getMyRooms } from "@/src/modules/rooms/actions/room-actions";
|
|||
import { getMyTrainers } from "@/src/modules/employee/actions/employee-actions";
|
||||
import { toast } from "sonner";
|
||||
import { Course } from "../../types/course.types";
|
||||
import { Trash2, ImagePlus, X, Loader2, AlertTriangle, Plus, CopyCheck } from "lucide-react";
|
||||
import { Trash2, ImagePlus, X, Loader2, AlertTriangle, Plus } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import DeleteDialog from "@/src/components/layout/DeleteDialog";
|
||||
import {
|
||||
|
|
@ -129,8 +129,10 @@ const CourseCreateView = ({
|
|||
isEdit && initialData!.weekdayTimings
|
||||
? (initialData!.weekdayTimings as Record<string, WeekdaySlot | WeekdaySlot[]>)
|
||||
: undefined,
|
||||
// Neu ausgewählte Tage mit der allgemeinen Kurs-Uhrzeit oben vorbefüllen.
|
||||
defaultSlot: { timeFrom, timeTo },
|
||||
});
|
||||
const { selectedWeekdays, weekdayTimings, defaultSlot, isDefaultSlotFilled } = weekdays;
|
||||
const { selectedWeekdays, weekdayTimings } = weekdays;
|
||||
const [endDate, setEndDate] = useState(() => {
|
||||
if (isEdit && initialData!.endDate) {
|
||||
const d = new Date(initialData!.endDate);
|
||||
|
|
@ -745,102 +747,67 @@ const CourseCreateView = ({
|
|||
/>
|
||||
|
||||
{selectedWeekdays.length > 0 && (
|
||||
<div className="space-y-4">
|
||||
{/* Standard-Zeitfenster mit "für alle übernehmen" */}
|
||||
<div className="rounded-lg border border-gray-200 bg-gray-50 p-3">
|
||||
<p className="text-sm font-medium mb-2">Standard-Zeitfenster</p>
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<InputComponent
|
||||
type="time"
|
||||
id="weekday-default-time-from"
|
||||
value={defaultSlot.timeFrom}
|
||||
onChange={(e) => weekdays.updateDefaultSlot({ timeFrom: e.target.value })}
|
||||
/>
|
||||
<span className="text-sm">–</span>
|
||||
<InputComponent
|
||||
type="time"
|
||||
id="weekday-default-time-to"
|
||||
value={defaultSlot.timeTo}
|
||||
onChange={(e) => weekdays.updateDefaultSlot({ timeTo: e.target.value })}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={weekdays.applyDefaultToAll}
|
||||
disabled={!isDefaultSlotFilled}
|
||||
className="inline-flex items-center gap-1.5 rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-sm text-gray-700 hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
>
|
||||
<CopyCheck size={14} />
|
||||
Für alle Tage übernehmen
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-2">
|
||||
Wird automatisch für alle Tage gesetzt, solange du keine Uhrzeit einzeln
|
||||
anpasst.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm font-medium">Uhrzeiten pro Tag</p>
|
||||
{selectedWeekdays.map((day) => {
|
||||
const dayLabel = WEEKDAYS.find((w) => w.value === day)?.label ?? day;
|
||||
const slots: WeekdaySlot[] = weekdayTimings[day]?.length
|
||||
? weekdayTimings[day]
|
||||
: [{ timeFrom: "", timeTo: "" }];
|
||||
return (
|
||||
<div key={day} className="flex gap-3">
|
||||
<span className="w-24 text-sm shrink-0 pt-2.5">{dayLabel}</span>
|
||||
<div className="flex flex-col gap-2">
|
||||
{slots.map((slot, index) => (
|
||||
<div key={index} className="flex items-center gap-3">
|
||||
<InputComponent
|
||||
type="time"
|
||||
id={`weekday-time-from-${day}-${index}`}
|
||||
value={slot.timeFrom}
|
||||
onChange={(e) =>
|
||||
weekdays.updateSlot(day, index, {
|
||||
timeFrom: e.target.value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<span className="text-sm">–</span>
|
||||
<InputComponent
|
||||
type="time"
|
||||
id={`weekday-time-to-${day}-${index}`}
|
||||
value={slot.timeTo}
|
||||
onChange={(e) =>
|
||||
weekdays.updateSlot(day, index, {
|
||||
timeTo: e.target.value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
{slots.length > 1 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => weekdays.removeSlot(day, index)}
|
||||
aria-label="Zeitfenster entfernen"
|
||||
className="text-gray-400 hover:text-red-500"
|
||||
>
|
||||
<X size={16} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => weekdays.addSlot(day)}
|
||||
className="inline-flex w-fit items-center gap-1 text-sm text-blue hover:underline"
|
||||
>
|
||||
<Plus size={14} />
|
||||
Weiteres Zeitfenster
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm font-medium">Uhrzeiten pro Tag</p>
|
||||
{selectedWeekdays.map((day) => {
|
||||
const dayLabel = WEEKDAYS.find((w) => w.value === day)?.label ?? day;
|
||||
const slots: WeekdaySlot[] = weekdayTimings[day]?.length
|
||||
? weekdayTimings[day]
|
||||
: [{ timeFrom: "", timeTo: "" }];
|
||||
return (
|
||||
<div key={day} className="flex gap-3">
|
||||
<span className="w-24 text-sm shrink-0 pt-2.5">{dayLabel}</span>
|
||||
<div className="flex flex-col gap-2">
|
||||
{slots.map((slot, index) => (
|
||||
<div key={index} className="flex items-center gap-3">
|
||||
<InputComponent
|
||||
type="time"
|
||||
id={`weekday-time-from-${day}-${index}`}
|
||||
value={slot.timeFrom}
|
||||
onChange={(e) =>
|
||||
weekdays.updateSlot(day, index, {
|
||||
timeFrom: e.target.value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<span className="text-sm">–</span>
|
||||
<InputComponent
|
||||
type="time"
|
||||
id={`weekday-time-to-${day}-${index}`}
|
||||
value={slot.timeTo}
|
||||
onChange={(e) =>
|
||||
weekdays.updateSlot(day, index, {
|
||||
timeTo: e.target.value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
{slots.length > 1 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => weekdays.removeSlot(day, index)}
|
||||
aria-label="Zeitfenster entfernen"
|
||||
className="text-gray-400 hover:text-red-500"
|
||||
>
|
||||
<X size={16} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => weekdays.addSlot(day)}
|
||||
className="inline-flex w-fit items-center gap-1 text-sm text-blue hover:underline"
|
||||
>
|
||||
<Plus size={14} />
|
||||
Weiteres Zeitfenster
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{errors.weekdayTimings && (
|
||||
<p className="text-red-500 text-sm">{errors.weekdayTimings}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{errors.weekdayTimings && (
|
||||
<p className="text-red-500 text-sm">{errors.weekdayTimings}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@ import { Input } from "@/src/components/ui/input";
|
|||
import { Progress } from "@/src/components/ui/progress";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/src/components/ui/tabs";
|
||||
import { downsizeImage } from "@/src/lib/image/downsize";
|
||||
import { squareLogo } from "@/src/lib/image/square-logo";
|
||||
import { getContrastTextColor } from "../../lib/contrast";
|
||||
import type { BusinessBranding } from "../../schemas/business-branding-schema";
|
||||
import ColorPickerField from "./ColorPickerField";
|
||||
import LogoCropDialog from "./LogoCropDialog";
|
||||
import EmailBrandingPreview from "./branding-previews/EmailBrandingPreview";
|
||||
import PublicPageBrandingPreview from "./branding-previews/PublicPageBrandingPreview";
|
||||
import InvoiceBrandingPreview from "./branding-previews/InvoiceBrandingPreview";
|
||||
|
|
@ -37,7 +37,6 @@ const BusinessBrandingEditor = ({
|
|||
const [accentColor, setAccentColor] = useState(initialBranding.accentColor);
|
||||
const [isUploadingLogo, setIsUploadingLogo] = useState(false);
|
||||
const [uploadPhase, setUploadPhase] = useState<"optimizing" | "uploading" | null>(null);
|
||||
const [pendingCropFile, setPendingCropFile] = useState<File | null>(null);
|
||||
|
||||
const accentTextColor = getContrastTextColor(accentColor);
|
||||
|
||||
|
|
@ -45,7 +44,10 @@ const BusinessBrandingEditor = ({
|
|||
setIsUploadingLogo(true);
|
||||
setUploadPhase("optimizing");
|
||||
try {
|
||||
const resizedFile = await downsizeImage(file);
|
||||
// Automatisch quadratisch einpassen (contain), dann komprimieren –
|
||||
// kein manuelles Zoom/Pan mehr.
|
||||
const squared = await squareLogo(file);
|
||||
const resizedFile = await downsizeImage(squared);
|
||||
setUploadPhase("uploading");
|
||||
const formData = new FormData();
|
||||
formData.append("file", resizedFile);
|
||||
|
|
@ -68,12 +70,7 @@ const BusinessBrandingEditor = ({
|
|||
// gewählt werden kann (sonst feuert onChange beim zweiten Mal nicht).
|
||||
e.target.value = "";
|
||||
if (!file) return;
|
||||
setPendingCropFile(file);
|
||||
};
|
||||
|
||||
const handleCropConfirm = (croppedFile: File) => {
|
||||
setPendingCropFile(null);
|
||||
uploadLogo(croppedFile);
|
||||
void uploadLogo(file);
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
|
|
@ -160,7 +157,9 @@ const BusinessBrandingEditor = ({
|
|||
</label>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">Max. 5 MB, danach zuschneidbar.</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Max. 5 MB. Wird automatisch quadratisch eingepasst.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Farben */}
|
||||
|
|
@ -230,12 +229,6 @@ const BusinessBrandingEditor = ({
|
|||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
<LogoCropDialog
|
||||
file={pendingCropFile}
|
||||
onCancel={() => setPendingCropFile(null)}
|
||||
onConfirm={handleCropConfirm}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,201 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/src/components/ui/dialog";
|
||||
import { Button } from "@/src/components/ui/button";
|
||||
import { Slider } from "@/src/components/ui/slider";
|
||||
|
||||
const CANVAS_SIZE = 320;
|
||||
const OUTPUT_SIZE = 512;
|
||||
|
||||
interface LogoCropDialogProps {
|
||||
file: File | null;
|
||||
onCancel: () => void;
|
||||
onConfirm: (croppedFile: File) => void;
|
||||
}
|
||||
|
||||
/** Größe, in der das Bild bei gegebenem Zoom gezeichnet wird (füllt CANVAS_SIZE mindestens aus). */
|
||||
function getScaledSize(image: HTMLImageElement, zoom: number): { width: number; height: number } {
|
||||
const baseScale = Math.max(CANVAS_SIZE / image.width, CANVAS_SIZE / image.height);
|
||||
const scale = baseScale * zoom;
|
||||
return { width: image.width * scale, height: image.height * scale };
|
||||
}
|
||||
|
||||
/**
|
||||
* Begrenzt den Offset auf den Bereich, in dem das skalierte Bild den
|
||||
* quadratischen Canvas noch vollständig ausfüllt - ohne diese Klemmung könnte
|
||||
* ein Drag oder ein Zoom-Wechsel das Bild aus dem sichtbaren Bereich schieben
|
||||
* (grauer Freiraum in der Vorschau, transparente Fläche statt Logo im Export).
|
||||
*/
|
||||
function clampOffset(
|
||||
offset: { x: number; y: number },
|
||||
drawWidth: number,
|
||||
drawHeight: number
|
||||
): { x: number; y: number } {
|
||||
const maxOffsetX = Math.max(0, (drawWidth - CANVAS_SIZE) / 2);
|
||||
const maxOffsetY = Math.max(0, (drawHeight - CANVAS_SIZE) / 2);
|
||||
return {
|
||||
x: Math.min(maxOffsetX, Math.max(-maxOffsetX, offset.x)),
|
||||
y: Math.min(maxOffsetY, Math.max(-maxOffsetY, offset.y)),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Einfacher Zoom/Pan-Crop direkt per Canvas, ohne zusätzliche Dependency -
|
||||
* analog zum bestehenden Canvas-Ansatz in downsizeImage. Schneidet immer
|
||||
* quadratisch zu (Logos werden überall als Quadrat/Kreis dargestellt: Header,
|
||||
* Rechnung, öffentliche Seite), damit kein gestrecktes oder schief
|
||||
* zugeschnittenes Logo entstehen kann.
|
||||
*/
|
||||
const LogoCropDialog = ({ file, onCancel, onConfirm }: LogoCropDialogProps) => {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const imageRef = useRef<HTMLImageElement | null>(null);
|
||||
const [zoom, setZoom] = useState(1);
|
||||
const [offset, setOffset] = useState({ x: 0, y: 0 });
|
||||
const dragState = useRef<{
|
||||
startX: number;
|
||||
startY: number;
|
||||
origin: { x: number; y: number };
|
||||
} | null>(null);
|
||||
|
||||
const draw = useCallback(
|
||||
(currentZoom: number, currentOffset: { x: number; y: number }, img?: HTMLImageElement) => {
|
||||
const canvas = canvasRef.current;
|
||||
const image = img ?? imageRef.current;
|
||||
if (!canvas || !image) return;
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
|
||||
canvas.width = CANVAS_SIZE;
|
||||
canvas.height = CANVAS_SIZE;
|
||||
ctx.clearRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
|
||||
ctx.fillStyle = "#f5f5f5";
|
||||
ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
|
||||
|
||||
const { width: drawWidth, height: drawHeight } = getScaledSize(image, currentZoom);
|
||||
const clampedOffset = clampOffset(currentOffset, drawWidth, drawHeight);
|
||||
const x = (CANVAS_SIZE - drawWidth) / 2 + clampedOffset.x;
|
||||
const y = (CANVAS_SIZE - drawHeight) / 2 + clampedOffset.y;
|
||||
|
||||
ctx.drawImage(image, x, y, drawWidth, drawHeight);
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!file) return;
|
||||
const url = URL.createObjectURL(file);
|
||||
const img = new window.Image();
|
||||
img.onload = () => {
|
||||
imageRef.current = img;
|
||||
setZoom(1);
|
||||
setOffset({ x: 0, y: 0 });
|
||||
draw(1, { x: 0, y: 0 }, img);
|
||||
};
|
||||
img.src = url;
|
||||
return () => URL.revokeObjectURL(url);
|
||||
}, [file, draw]);
|
||||
|
||||
const handleZoomChange = ([value]: number[]) => {
|
||||
const image = imageRef.current;
|
||||
if (!image) return;
|
||||
const { width, height } = getScaledSize(image, value);
|
||||
const clamped = clampOffset(offset, width, height);
|
||||
setZoom(value);
|
||||
setOffset(clamped);
|
||||
draw(value, clamped);
|
||||
};
|
||||
|
||||
const handlePointerDown = (e: React.PointerEvent<HTMLCanvasElement>) => {
|
||||
dragState.current = { startX: e.clientX, startY: e.clientY, origin: offset };
|
||||
e.currentTarget.setPointerCapture(e.pointerId);
|
||||
};
|
||||
|
||||
const handlePointerMove = (e: React.PointerEvent<HTMLCanvasElement>) => {
|
||||
if (!dragState.current) return;
|
||||
const image = imageRef.current;
|
||||
if (!image) return;
|
||||
const dx = e.clientX - dragState.current.startX;
|
||||
const dy = e.clientY - dragState.current.startY;
|
||||
const raw = { x: dragState.current.origin.x + dx, y: dragState.current.origin.y + dy };
|
||||
const { width, height } = getScaledSize(image, zoom);
|
||||
const next = clampOffset(raw, width, height);
|
||||
setOffset(next);
|
||||
draw(zoom, next);
|
||||
};
|
||||
|
||||
const handlePointerUp = () => {
|
||||
dragState.current = null;
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
const image = imageRef.current;
|
||||
if (!image) return;
|
||||
|
||||
const outputCanvas = document.createElement("canvas");
|
||||
outputCanvas.width = OUTPUT_SIZE;
|
||||
outputCanvas.height = OUTPUT_SIZE;
|
||||
const ctx = outputCanvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
|
||||
const outputScale = OUTPUT_SIZE / CANVAS_SIZE;
|
||||
const { width: drawWidth, height: drawHeight } = getScaledSize(image, zoom);
|
||||
const clampedOffset = clampOffset(offset, drawWidth, drawHeight);
|
||||
const x = (OUTPUT_SIZE - drawWidth * outputScale) / 2 + clampedOffset.x * outputScale;
|
||||
const y = (OUTPUT_SIZE - drawHeight * outputScale) / 2 + clampedOffset.y * outputScale;
|
||||
|
||||
ctx.drawImage(image, x, y, drawWidth * outputScale, drawHeight * outputScale);
|
||||
|
||||
outputCanvas.toBlob((blob) => {
|
||||
if (!blob) return;
|
||||
onConfirm(new File([blob], "logo.png", { type: "image/png" }));
|
||||
}, "image/png");
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={!!file} onOpenChange={(open) => !open && onCancel()}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Logo zuschneiden</DialogTitle>
|
||||
<DialogDescription>
|
||||
Ziehe das Bild, um den Ausschnitt zu verschieben, und nutze den Regler zum Zoomen.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
width={CANVAS_SIZE}
|
||||
height={CANVAS_SIZE}
|
||||
className="rounded-lg border border-input touch-none cursor-grab active:cursor-grabbing"
|
||||
onPointerDown={handlePointerDown}
|
||||
onPointerMove={handlePointerMove}
|
||||
onPointerUp={handlePointerUp}
|
||||
onPointerLeave={handlePointerUp}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 px-1">
|
||||
<span className="text-xs text-muted-foreground shrink-0">Zoom</span>
|
||||
<Slider min={1} max={3} step={0.05} value={[zoom]} onValueChange={handleZoomChange} />
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="ghost" onClick={onCancel}>
|
||||
Abbrechen
|
||||
</Button>
|
||||
<Button onClick={handleConfirm}>Übernehmen</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default LogoCropDialog;
|
||||
|
|
@ -31,6 +31,12 @@ export type ZahlungRow = {
|
|||
courseName: string;
|
||||
businessId: string;
|
||||
businessName: string;
|
||||
/**
|
||||
* Betrag, den das Business tatsächlich behält, in Cents. Bei
|
||||
* `partially_refunded` ist das der Nettobetrag (gezahlt − erstattet),
|
||||
* sonst der voll gezahlte Betrag. Die Rechnung selbst bleibt davon
|
||||
* unberührt (siehe invoice-actions.ts).
|
||||
*/
|
||||
amountPaid: number | null;
|
||||
paymentStatus: string;
|
||||
invoiceNumber: string | null;
|
||||
|
|
@ -68,6 +74,7 @@ export async function getZahlungen(
|
|||
createdAt: true,
|
||||
paymentStatus: true,
|
||||
amountPaid: true,
|
||||
refundedAmount: true,
|
||||
invoiceNumber: true,
|
||||
course: {
|
||||
select: {
|
||||
|
|
@ -89,6 +96,14 @@ export async function getZahlungen(
|
|||
b.user?.name ?? b.user?.email ?? b.guestLead?.name ?? b.guestLead?.email ?? "–";
|
||||
const customerEmail = b.user?.email ?? b.guestLead?.email ?? "–";
|
||||
|
||||
// Bei Teilerstattung zeigt die Übersicht den Betrag, den das Business
|
||||
// behält (netto). Voll erstattete / stornierte Zeilen behalten ihren
|
||||
// Rohbetrag – dort trägt das Status-Badge die Bedeutung.
|
||||
const netAmount =
|
||||
b.paymentStatus === "partially_refunded" && b.amountPaid !== null
|
||||
? b.amountPaid - (b.refundedAmount ?? 0)
|
||||
: b.amountPaid;
|
||||
|
||||
return {
|
||||
id: b.id,
|
||||
createdAt: b.createdAt.toISOString(),
|
||||
|
|
@ -98,7 +113,7 @@ export async function getZahlungen(
|
|||
courseName: b.course.name,
|
||||
businessId: b.course.business?.id ?? "",
|
||||
businessName: b.course.business?.name ?? "–",
|
||||
amountPaid: b.amountPaid,
|
||||
amountPaid: netAmount,
|
||||
paymentStatus: b.paymentStatus,
|
||||
invoiceNumber: b.invoiceNumber,
|
||||
};
|
||||
|
|
|
|||
129
tests/api/stripe/checkout-course.test.ts
Normal file
129
tests/api/stripe/checkout-course.test.ts
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||
import { POST } from "@/src/app/api/stripe/checkout/course/route";
|
||||
|
||||
vi.mock("@/src/lib/auth/getUser", () => ({
|
||||
getUserData: vi.fn(),
|
||||
isUser: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock("@/src/lib/auth/account-role-by-email", () => ({
|
||||
isManagerOrEmployeeEmail: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock("@/src/lib/prisma", () => ({
|
||||
prisma: {
|
||||
course: { findUnique: vi.fn() },
|
||||
courseBooking: { findUnique: vi.fn() },
|
||||
},
|
||||
}));
|
||||
|
||||
vi.mock("@/src/lib/stripe", () => ({
|
||||
stripe: { checkout: { sessions: { create: vi.fn() } } },
|
||||
calculatePlatformFeeCents: vi.fn().mockReturnValue(100),
|
||||
eurosToCents: vi.fn().mockReturnValue(2900),
|
||||
}));
|
||||
|
||||
import { getUserData, isUser } from "@/src/lib/auth/getUser";
|
||||
import { isManagerOrEmployeeEmail } from "@/src/lib/auth/account-role-by-email";
|
||||
import { prisma } from "@/src/lib/prisma";
|
||||
import { stripe } from "@/src/lib/stripe";
|
||||
|
||||
let ipCounter = 0;
|
||||
|
||||
function makeRequest(body: Record<string, unknown>) {
|
||||
// Jede Anfrage aus einer eigenen IP, damit der In-Memory-Rate-Limiter
|
||||
// (10/Minute/IP) die Tests nicht gegenseitig beeinflusst.
|
||||
ipCounter += 1;
|
||||
return new Request("http://localhost/api/stripe/checkout/course", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"x-forwarded-for": `10.0.0.${ipCounter}`,
|
||||
},
|
||||
body: JSON.stringify(body),
|
||||
}) as never;
|
||||
}
|
||||
|
||||
const publishedCourse = {
|
||||
id: "course-1",
|
||||
name: "Yoga",
|
||||
status: "published",
|
||||
price: 29,
|
||||
date: new Date("2099-01-01"),
|
||||
timeFrom: "10:00",
|
||||
maxParticipants: 20,
|
||||
_count: { bookings: 0 },
|
||||
business: {
|
||||
id: "biz-1",
|
||||
name: "Studio",
|
||||
stripeAccountId: "acct_123",
|
||||
stripeAccountStatus: "active",
|
||||
},
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
vi.mocked(getUserData).mockReset();
|
||||
vi.mocked(isUser).mockReset();
|
||||
vi.mocked(isManagerOrEmployeeEmail).mockReset();
|
||||
vi.mocked(prisma.course.findUnique).mockReset();
|
||||
vi.mocked(prisma.courseBooking.findUnique).mockReset();
|
||||
vi.mocked(stripe.checkout.sessions.create).mockReset();
|
||||
|
||||
vi.mocked(stripe.checkout.sessions.create).mockResolvedValue({
|
||||
url: "https://checkout.stripe.com/session",
|
||||
} as never);
|
||||
vi.mocked(prisma.course.findUnique).mockResolvedValue(publishedCourse as never);
|
||||
});
|
||||
|
||||
describe("POST /api/stripe/checkout/course – Gast mit Team-Account-E-Mail (Ticket 6)", () => {
|
||||
it("lehnt eine Gast-Buchung mit Manager/Employee-E-Mail mit 403 ab, ohne Stripe-Session", async () => {
|
||||
vi.mocked(getUserData).mockResolvedValue(null as never);
|
||||
vi.mocked(isManagerOrEmployeeEmail).mockResolvedValue(true);
|
||||
|
||||
const res = await POST(makeRequest({ courseId: "course-1", guestEmail: "Manager@Studio.de" }));
|
||||
|
||||
expect(res.status).toBe(403);
|
||||
const data = await res.json();
|
||||
expect(data.error).toMatch(/Team-Account/i);
|
||||
expect(isManagerOrEmployeeEmail).toHaveBeenCalledWith("manager@studio.de");
|
||||
expect(stripe.checkout.sessions.create).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("lässt eine normale Gast-Buchung durch, wenn die E-Mail zu keinem Team-Account gehört", async () => {
|
||||
vi.mocked(getUserData).mockResolvedValue(null as never);
|
||||
vi.mocked(isManagerOrEmployeeEmail).mockResolvedValue(false);
|
||||
vi.mocked(prisma.courseBooking.findUnique).mockResolvedValue(null as never);
|
||||
|
||||
const res = await POST(makeRequest({ courseId: "course-1", guestEmail: "gast@example.com" }));
|
||||
|
||||
expect(res.status).toBe(200);
|
||||
const data = await res.json();
|
||||
expect(data.url).toBe("https://checkout.stripe.com/session");
|
||||
expect(stripe.checkout.sessions.create).toHaveBeenCalledOnce();
|
||||
});
|
||||
|
||||
it("prüft die Team-Account-E-Mail nicht für eingeloggte Kunden-Accounts", async () => {
|
||||
vi.mocked(getUserData).mockResolvedValue({
|
||||
id: "user-1",
|
||||
email: "kunde@example.com",
|
||||
} as never);
|
||||
vi.mocked(isUser).mockReturnValue(true);
|
||||
vi.mocked(prisma.courseBooking.findUnique).mockResolvedValue(null as never);
|
||||
|
||||
const res = await POST(makeRequest({ courseId: "course-1" }));
|
||||
|
||||
expect(res.status).toBe(200);
|
||||
expect(isManagerOrEmployeeEmail).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("weist eine ungültige Gast-E-Mail weiterhin vor der Team-Account-Prüfung mit 400 ab", async () => {
|
||||
vi.mocked(getUserData).mockResolvedValue(null as never);
|
||||
|
||||
const res = await POST(makeRequest({ courseId: "course-1", guestEmail: "keine-email" }));
|
||||
|
||||
expect(res.status).toBe(400);
|
||||
const data = await res.json();
|
||||
expect(data.isGuestRequired).toBe(true);
|
||||
expect(isManagerOrEmployeeEmail).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue