Compare commits
28 Commits
6502f0d416
...
v0.1.3
| Author | SHA1 | Date | |
|---|---|---|---|
| ca20516080 | |||
| f2963ca951 | |||
| 8aea5bb400 | |||
| 14d0c2f9c3 | |||
| eb9ddc535f | |||
| 8fa17f58c9 | |||
| 92ed7a2c93 | |||
| ce644c31e1 | |||
| 3b67c26216 | |||
| f2fed22ea1 | |||
| ab5e5e67a6 | |||
| 78a379546c | |||
| 953a970220 | |||
| c7d9fc689e | |||
| f4593cd706 | |||
| fbfdceeee6 | |||
| 244eeee142 | |||
| 9c2e47ef9a | |||
| 27a106de13 | |||
| 83a3a6a19f | |||
| 53aca01131 | |||
| 6d7e8eceba | |||
| 6cf657168b | |||
| a8cec16d7a | |||
| 97c1d3493f | |||
| 3a13c8dffb | |||
| 6f6b21e7c8 | |||
| d7b1ae3525 |
@@ -10,7 +10,9 @@ RESEND_API_KEY=your_resend_api_key_here
|
|||||||
EMAIL_FROM=noreply@yourdomain.com
|
EMAIL_FROM=noreply@yourdomain.com
|
||||||
ADMIN_EMAIL=admin@yourdomain.com
|
ADMIN_EMAIL=admin@yourdomain.com
|
||||||
|
|
||||||
# Frontend URL (for E-Mail Links)
|
# Social media profiles
|
||||||
|
TIKTOK_PROFILE=https://www.tiktok.com/@<dein Tiktok Profil>
|
||||||
|
INSTAGRAM_PROFILE=https://www.instagram.com/<dein Instragram Profil>
|
||||||
|
|
||||||
# Cancellation Policy (in hours)
|
# Cancellation Policy (in hours)
|
||||||
MIN_STORNO_TIMESPAN=24
|
MIN_STORNO_TIMESPAN=24
|
||||||
|
|||||||
12
Caddyfile
12
Caddyfile
@@ -8,6 +8,16 @@ stargirlnails.de {
|
|||||||
health_uri /health
|
health_uri /health
|
||||||
health_interval 30s
|
health_interval 30s
|
||||||
health_timeout 5s
|
health_timeout 5s
|
||||||
|
|
||||||
|
# Timeouts für lange laufende Verbindungen (Live-Queries)
|
||||||
|
transport http {
|
||||||
|
read_timeout 0
|
||||||
|
write_timeout 0
|
||||||
|
dial_timeout 30s
|
||||||
|
}
|
||||||
|
|
||||||
|
# Buffer-Flush für Server-Sent Events (SSE) aktivieren
|
||||||
|
flush_interval -1
|
||||||
}
|
}
|
||||||
|
|
||||||
# Sicherheits-Header
|
# Sicherheits-Header
|
||||||
@@ -17,7 +27,7 @@ stargirlnails.de {
|
|||||||
X-Content-Type-Options "nosniff"
|
X-Content-Type-Options "nosniff"
|
||||||
X-XSS-Protection "1; mode=block"
|
X-XSS-Protection "1; mode=block"
|
||||||
Referrer-Policy "strict-origin-when-cross-origin"
|
Referrer-Policy "strict-origin-when-cross-origin"
|
||||||
Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:; connect-src 'self';"
|
Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https: blob:; font-src 'self' data:; connect-src 'self' data: blob:; frame-src 'self' https://www.openstreetmap.org;"
|
||||||
|
|
||||||
# HSTS (wird automatisch von Caddy gesetzt)
|
# HSTS (wird automatisch von Caddy gesetzt)
|
||||||
Strict-Transport-Security "max-age=31536000; includeSubDomains"
|
Strict-Transport-Security "max-age=31536000; includeSubDomains"
|
||||||
|
|||||||
@@ -4,7 +4,9 @@
|
|||||||
- ~~ICS-Anhang/Link in E‑Mails (Kalendereintrag)~~
|
- ~~ICS-Anhang/Link in E‑Mails (Kalendereintrag)~~
|
||||||
- Erinnerungsmails (24h/3h vor Termin)
|
- Erinnerungsmails (24h/3h vor Termin)
|
||||||
- ~~Umbuchen/Stornieren per sicherem Kundenlink (Token)~~
|
- ~~Umbuchen/Stornieren per sicherem Kundenlink (Token)~~
|
||||||
- Pufferzeiten und Sperrtage/Feiertage konfigurierbar
|
- ~~Wiederkehrende Verfügbarkeitsregeln (z.B. "Montags 13-18 Uhr")~~
|
||||||
|
- ~~Urlaubszeiten/Blockierungen konfigurierbar~~
|
||||||
|
- Pufferzeiten zwischen Terminen konfigurierbar
|
||||||
- ~~Slots dynamisch an Behandlungsdauer anpassen; Überschneidungen verhindern~~
|
- ~~Slots dynamisch an Behandlungsdauer anpassen; Überschneidungen verhindern~~
|
||||||
|
|
||||||
### Sicherheit & Qualität
|
### Sicherheit & Qualität
|
||||||
|
|||||||
@@ -3,7 +3,13 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||||
|
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
|
||||||
|
<link rel="manifest" href="/manifest.json" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta name="theme-color" content="#ec4899" />
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
||||||
|
<meta name="apple-mobile-web-app-title" content="Stargirlnails" />
|
||||||
<title>Stargirlnails Kiel - Terminbuchung</title>
|
<title>Stargirlnails Kiel - Terminbuchung</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "quests-template-basic",
|
"name": "quests-template-basic",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.0.0",
|
"version": "0.1.3",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"check:types": "tsc --noEmit",
|
"check:types": "tsc --noEmit",
|
||||||
|
|||||||
45
public/icons/README.md
Normal file
45
public/icons/README.md
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
# PWA Icons Required
|
||||||
|
|
||||||
|
This directory must contain the following icon files for proper PWA installation on iOS and Android devices:
|
||||||
|
|
||||||
|
## Required Icon Files
|
||||||
|
|
||||||
|
### Android Icons
|
||||||
|
- **icon-192x192.png** (192×192 pixels)
|
||||||
|
- Used for Android home screen and app drawer
|
||||||
|
- Should have transparent background or match theme color
|
||||||
|
- Include safe zone padding for maskable icons (40px margin)
|
||||||
|
|
||||||
|
- **icon-512x512.png** (512×512 pixels)
|
||||||
|
- Used for Android splash screens and high-resolution displays
|
||||||
|
- Should have transparent background or match theme color
|
||||||
|
- Include safe zone padding for maskable icons (102px margin)
|
||||||
|
|
||||||
|
### iOS Icon
|
||||||
|
- **apple-touch-icon.png** (180×180 pixels)
|
||||||
|
- Used for iOS home screen
|
||||||
|
- Should NOT have transparent background (iOS adds its own rounded corners)
|
||||||
|
- Fill entire canvas with brand colors/logo
|
||||||
|
- iOS automatically applies rounded corners and shadow
|
||||||
|
|
||||||
|
## Design Guidelines
|
||||||
|
|
||||||
|
1. **Brand consistency**: Use Stargirlnails logo and brand colors
|
||||||
|
2. **Theme color**: Primary pink (#ec4899) matches manifest theme_color
|
||||||
|
3. **Contrast**: Ensure icon is visible on various backgrounds
|
||||||
|
4. **Simplicity**: Icons should be recognizable at small sizes
|
||||||
|
5. **No text**: Avoid small text that becomes unreadable when scaled
|
||||||
|
|
||||||
|
## Testing
|
||||||
|
|
||||||
|
After adding icons:
|
||||||
|
- Test on Android: Check home screen icon appearance
|
||||||
|
- Test on iOS Safari: Add to home screen and verify icon quality
|
||||||
|
- Validate with Lighthouse PWA audit
|
||||||
|
|
||||||
|
## Placeholder
|
||||||
|
|
||||||
|
Until actual icons are created, you can use a favicon.png (if available) or generate placeholder icons using tools like:
|
||||||
|
- https://realfavicongenerator.net/
|
||||||
|
- https://www.pwabuilder.com/imageGenerator
|
||||||
|
|
||||||
BIN
public/icons/apple-touch-icon.png
Normal file
BIN
public/icons/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
public/icons/icon-192x192.png
Normal file
BIN
public/icons/icon-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
public/icons/icon-512x512.png
Normal file
BIN
public/icons/icon-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
32
public/manifest.json
Normal file
32
public/manifest.json
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
{
|
||||||
|
"name": "Stargirlnails Kiel - Terminbuchung",
|
||||||
|
"short_name": "Stargirlnails",
|
||||||
|
"description": "Online Terminbuchung für Nagelstudio Stargirlnails in Kiel",
|
||||||
|
"start_url": "/",
|
||||||
|
"scope": "/",
|
||||||
|
"display": "standalone",
|
||||||
|
"background_color": "#ffffff",
|
||||||
|
"theme_color": "#ec4899",
|
||||||
|
"orientation": "portrait",
|
||||||
|
"lang": "de",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "/icons/icon-192x192.png",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png",
|
||||||
|
"purpose": "any maskable"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "/icons/icon-512x512.png",
|
||||||
|
"sizes": "512x512",
|
||||||
|
"type": "image/png",
|
||||||
|
"purpose": "any maskable"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "/icons/apple-touch-icon.png",
|
||||||
|
"sizes": "180x180",
|
||||||
|
"type": "image/png"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
9
scripts/rebuild-dev.sh
Normal file → Executable file
9
scripts/rebuild-dev.sh
Normal file → Executable file
@@ -1,6 +1,5 @@
|
|||||||
#! /bin/bash
|
#! /bin/bash
|
||||||
sudo docker compose -f docker-compose.yml down
|
docker compose -f docker-compose.yml down
|
||||||
git pull
|
docker compose -f docker-compose.yml build --no-cache
|
||||||
sudo docker compose -f docker-compose.yml build --no-cache
|
docker compose -f docker-compose.yml up -d
|
||||||
sudo docker compose -f docker-compose.yml up -d
|
# docker compose -f docker-compose.yml logs -f stargirlnails
|
||||||
sudo docker compose -f docker-compose.yml logs -f stargirlnails
|
|
||||||
|
|||||||
@@ -1,6 +1,49 @@
|
|||||||
#! /bin/bash
|
#! /bin/bash
|
||||||
sudo docker compose -f docker-compose-prod.yml down
|
set -euo pipefail
|
||||||
git pull
|
|
||||||
sudo docker compose -f docker-compose-prod.yml build --no-cache
|
# Usage: ./scripts/rebuild-prod.sh [branch]
|
||||||
sudo docker compose -f docker-compose-prod.yml up -d
|
# Default branch is current; pass a branch to checkout before pulling/building.
|
||||||
sudo docker compose -f docker-compose-prod.yml logs -f stargirlnails
|
|
||||||
|
COMPOSE_FILE=docker-compose-prod.yml
|
||||||
|
|
||||||
|
echo "[1/7] Git: Fetch & pull latest changes"
|
||||||
|
if [ "${1-}" != "" ]; then
|
||||||
|
git fetch origin "$1"
|
||||||
|
git checkout "$1"
|
||||||
|
fi
|
||||||
|
git pull --rebase
|
||||||
|
|
||||||
|
echo "[2/7] Stop and remove running services (including orphans)"
|
||||||
|
sudo docker compose -f "$COMPOSE_FILE" down --remove-orphans || true
|
||||||
|
|
||||||
|
echo "[3/7] Pull base images (e.g., caddy)"
|
||||||
|
sudo docker compose -f "$COMPOSE_FILE" pull || true
|
||||||
|
|
||||||
|
echo "[4/7] Build application image without cache"
|
||||||
|
sudo docker compose -f "$COMPOSE_FILE" build --no-cache
|
||||||
|
|
||||||
|
echo "[5/7] Start services in background"
|
||||||
|
sudo docker compose -f "$COMPOSE_FILE" up -d
|
||||||
|
|
||||||
|
echo "[6/7] Wait for app healthcheck to pass"
|
||||||
|
# Wait up to ~90s for healthy status using docker inspect (no jq dependency)
|
||||||
|
for i in {1..18}; do
|
||||||
|
# Check health status if available
|
||||||
|
HEALTH=$(sudo docker inspect -f '{{if .State.Health}}{{.State.Health.Status}}{{end}}' stargirlnails-app 2>/dev/null || true)
|
||||||
|
if [ "$HEALTH" = "healthy" ]; then
|
||||||
|
echo "Service is healthy."
|
||||||
|
break
|
||||||
|
fi
|
||||||
|
|
||||||
|
# Fallback: ensure container is running
|
||||||
|
STATE=$(sudo docker inspect -f '{{.State.Status}}' stargirlnails-app 2>/dev/null || true)
|
||||||
|
if [ "$STATE" = "running" ] && [ -z "$HEALTH" ]; then
|
||||||
|
echo "Service is running (no healthcheck reported)."
|
||||||
|
break
|
||||||
|
fi
|
||||||
|
|
||||||
|
sleep 5
|
||||||
|
done
|
||||||
|
|
||||||
|
echo "[7/7] Tail recent logs (press Ctrl+C to exit)"
|
||||||
|
sudo docker compose -f "$COMPOSE_FILE" logs --since=10m -f
|
||||||
|
|||||||
71
server-dist/index.js
Normal file
71
server-dist/index.js
Normal file
@@ -0,0 +1,71 @@
|
|||||||
|
import { Hono } from "hono";
|
||||||
|
import { serve } from '@hono/node-server';
|
||||||
|
import { serveStatic } from '@hono/node-server/serve-static';
|
||||||
|
import { rpcApp } from "./routes/rpc.js";
|
||||||
|
import { caldavApp } from "./routes/caldav.js";
|
||||||
|
import { clientEntry } from "./routes/client-entry.js";
|
||||||
|
const app = new Hono();
|
||||||
|
// Allow all hosts for Tailscale Funnel
|
||||||
|
app.use("*", async (c, next) => {
|
||||||
|
// Accept requests from any host
|
||||||
|
return next();
|
||||||
|
});
|
||||||
|
// Health check endpoint
|
||||||
|
app.get("/health", (c) => {
|
||||||
|
return c.json({ status: "ok", timestamp: new Date().toISOString() });
|
||||||
|
});
|
||||||
|
// Legal config endpoint (temporary fix for RPC issue)
|
||||||
|
app.get("/api/legal-config", async (c) => {
|
||||||
|
try {
|
||||||
|
const { getLegalConfig } = await import("./lib/legal-config.js");
|
||||||
|
const config = getLegalConfig();
|
||||||
|
return c.json(config);
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.error("Legal config error:", error);
|
||||||
|
return c.json({ error: "Failed to load legal config" }, 500);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// Security.txt endpoint (RFC 9116)
|
||||||
|
app.get("/.well-known/security.txt", (c) => {
|
||||||
|
const securityContact = process.env.SECURITY_CONTACT || "security@example.com";
|
||||||
|
const securityText = `Contact: ${securityContact}
|
||||||
|
Expires: 2025-12-31T23:59:59.000Z
|
||||||
|
Preferred-Languages: de, en
|
||||||
|
Canonical: https://${process.env.DOMAIN || 'localhost:5173'}/.well-known/security.txt
|
||||||
|
|
||||||
|
# Security Policy
|
||||||
|
# Please report security vulnerabilities responsibly by contacting us via email.
|
||||||
|
# We will respond to security reports within 48 hours.
|
||||||
|
#
|
||||||
|
# Scope: This security policy applies to the Stargirlnails booking system.
|
||||||
|
#
|
||||||
|
# Rewards: We appreciate security researchers who help us improve our security.
|
||||||
|
# While we don't have a formal bug bounty program, we may offer recognition
|
||||||
|
# for significant security improvements.
|
||||||
|
`;
|
||||||
|
return c.text(securityText, 200, {
|
||||||
|
"Content-Type": "text/plain; charset=utf-8",
|
||||||
|
"Cache-Control": "public, max-age=86400", // Cache for 24 hours
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// Serve static files (only in production)
|
||||||
|
if (process.env.NODE_ENV === 'production') {
|
||||||
|
app.use('/static/*', serveStatic({ root: './dist' }));
|
||||||
|
app.use('/assets/*', serveStatic({ root: './dist' }));
|
||||||
|
}
|
||||||
|
app.use('/favicon.png', serveStatic({ path: './public/favicon.png' }));
|
||||||
|
app.route("/rpc", rpcApp);
|
||||||
|
app.route("/caldav", caldavApp);
|
||||||
|
app.get("/*", clientEntry);
|
||||||
|
// Start server
|
||||||
|
const port = process.env.PORT ? parseInt(process.env.PORT) : 3000;
|
||||||
|
const host = process.env.HOST || "0.0.0.0";
|
||||||
|
console.log(`🚀 Server starting on ${host}:${port}`);
|
||||||
|
// Start the server
|
||||||
|
serve({
|
||||||
|
fetch: app.fetch,
|
||||||
|
port,
|
||||||
|
hostname: host,
|
||||||
|
});
|
||||||
|
export default app;
|
||||||
13
server-dist/lib/auth.js
Normal file
13
server-dist/lib/auth.js
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import { createKV } from "./create-kv.js";
|
||||||
|
export const sessionsKV = createKV("sessions");
|
||||||
|
export const usersKV = createKV("users");
|
||||||
|
export async function assertOwner(sessionId) {
|
||||||
|
const session = await sessionsKV.getItem(sessionId);
|
||||||
|
if (!session)
|
||||||
|
throw new Error("Invalid session");
|
||||||
|
if (new Date(session.expiresAt) < new Date())
|
||||||
|
throw new Error("Session expired");
|
||||||
|
const user = await usersKV.getItem(session.userId);
|
||||||
|
if (!user || user.role !== "owner")
|
||||||
|
throw new Error("Forbidden");
|
||||||
|
}
|
||||||
33
server-dist/lib/create-kv.js
Normal file
33
server-dist/lib/create-kv.js
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
import { createStorage } from "unstorage";
|
||||||
|
import fsDriver from "unstorage/drivers/fs";
|
||||||
|
const STORAGE_PATH = "./.storage"; // It is .gitignored
|
||||||
|
export function createKV(name) {
|
||||||
|
const storage = createStorage({
|
||||||
|
driver: fsDriver({ base: `${STORAGE_PATH}/${name}` }),
|
||||||
|
});
|
||||||
|
// Async generator to play work well with oRPC live queries
|
||||||
|
async function* subscribe() {
|
||||||
|
let resolve;
|
||||||
|
let promise = new Promise((r) => (resolve = r));
|
||||||
|
const unwatch = await storage.watch((event, key) => {
|
||||||
|
resolve({ event, key });
|
||||||
|
promise = new Promise((r) => (resolve = r));
|
||||||
|
});
|
||||||
|
try {
|
||||||
|
while (true)
|
||||||
|
yield await promise;
|
||||||
|
}
|
||||||
|
finally {
|
||||||
|
await unwatch();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
...storage,
|
||||||
|
getAllItems: async () => {
|
||||||
|
const keys = await storage.getKeys();
|
||||||
|
const values = await storage.getItems(keys);
|
||||||
|
return values.map(({ value }) => value);
|
||||||
|
},
|
||||||
|
subscribe,
|
||||||
|
};
|
||||||
|
}
|
||||||
258
server-dist/lib/email-templates.js
Normal file
258
server-dist/lib/email-templates.js
Normal file
@@ -0,0 +1,258 @@
|
|||||||
|
import { readFile } from "node:fs/promises";
|
||||||
|
import { fileURLToPath } from "node:url";
|
||||||
|
import { dirname, resolve } from "node:path";
|
||||||
|
// Helper function to convert date from yyyy-mm-dd to dd.mm.yyyy
|
||||||
|
function formatDateGerman(dateString) {
|
||||||
|
const [year, month, day] = dateString.split('-');
|
||||||
|
return `${day}.${month}.${year}`;
|
||||||
|
}
|
||||||
|
let cachedLogoDataUrl = null;
|
||||||
|
async function getLogoDataUrl() {
|
||||||
|
if (cachedLogoDataUrl)
|
||||||
|
return cachedLogoDataUrl;
|
||||||
|
try {
|
||||||
|
const __filename = fileURLToPath(import.meta.url);
|
||||||
|
const __dirname = dirname(__filename);
|
||||||
|
const logoPath = resolve(__dirname, "../../../assets/stargilnails_logo_transparent.png");
|
||||||
|
const buf = await readFile(logoPath);
|
||||||
|
const base64 = buf.toString("base64");
|
||||||
|
cachedLogoDataUrl = `data:image/png;base64,${base64}`;
|
||||||
|
return cachedLogoDataUrl;
|
||||||
|
}
|
||||||
|
catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
async function renderBrandedEmail(title, bodyHtml) {
|
||||||
|
const logo = await getLogoDataUrl();
|
||||||
|
const domain = process.env.DOMAIN || 'localhost:5173';
|
||||||
|
const protocol = domain.includes('localhost') ? 'http' : 'https';
|
||||||
|
const homepageUrl = `${protocol}://${domain}`;
|
||||||
|
return `
|
||||||
|
<div style="font-family: Arial, sans-serif; color: #0f172a; background:#fdf2f8; padding:24px;">
|
||||||
|
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="max-width:640px; margin:0 auto; background:#ffffff; border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.06)">
|
||||||
|
<tr>
|
||||||
|
<td style="padding:24px 24px 0 24px; text-align:center;">
|
||||||
|
${logo ? `<img src="${logo}" alt="Stargirlnails" style="width:120px; height:auto; display:inline-block;" />` : `<div style=\"font-size:24px\">💅</div>`}
|
||||||
|
<h1 style="margin:16px 0 0 0; font-size:22px; color:#db2777;">${title}</h1>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td style="padding:16px 24px 24px 24px;">
|
||||||
|
<div style="font-size:16px; line-height:1.6; color:#334155;">
|
||||||
|
${bodyHtml}
|
||||||
|
</div>
|
||||||
|
<hr style="border:none; border-top:1px solid #f1f5f9; margin:24px 0" />
|
||||||
|
<div style="text-align:center; margin-bottom:16px;">
|
||||||
|
<a href="${homepageUrl}" style="display: inline-block; background-color: #db2777; color: white; padding: 12px 24px; text-decoration: none; border-radius: 6px; font-weight: 600; font-size: 14px;">Zur Website</a>
|
||||||
|
</div>
|
||||||
|
<div style="font-size:12px; color:#64748b; text-align:center;">
|
||||||
|
© ${new Date().getFullYear()} Stargirlnails Kiel • Professional Nail Care
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>`;
|
||||||
|
}
|
||||||
|
export async function renderBookingPendingHTML(params) {
|
||||||
|
const { name, date, time, statusUrl } = params;
|
||||||
|
const formattedDate = formatDateGerman(date);
|
||||||
|
const domain = process.env.DOMAIN || 'localhost:5173';
|
||||||
|
const protocol = domain.includes('localhost') ? 'http' : 'https';
|
||||||
|
const legalUrl = `${protocol}://${domain}/legal`;
|
||||||
|
const inner = `
|
||||||
|
<p>Hallo ${name},</p>
|
||||||
|
<p>wir haben deine Anfrage für <strong>${formattedDate}</strong> um <strong>${time}</strong> erhalten.</p>
|
||||||
|
<p>Wir bestätigen deinen Termin in Kürze. Du erhältst eine weitere E-Mail, sobald der Termin bestätigt ist.</p>
|
||||||
|
${statusUrl ? `
|
||||||
|
<div style="background-color: #fef9f5; border-left: 4px solid #f59e0b; padding: 16px; margin: 20px 0; border-radius: 4px;">
|
||||||
|
<p style="margin: 0; font-weight: 600; color: #f59e0b;">⏳ Termin-Status ansehen:</p>
|
||||||
|
<p style="margin: 8px 0 12px 0; color: #475569;">Du kannst den aktuellen Status deiner Buchung jederzeit einsehen:</p>
|
||||||
|
<a href="${statusUrl}" style="display: inline-block; background-color: #f59e0b; color: white; padding: 12px 24px; text-decoration: none; border-radius: 6px; font-weight: 600;">Status ansehen</a>
|
||||||
|
</div>
|
||||||
|
` : ''}
|
||||||
|
<div style="background-color: #f8fafc; border-left: 4px solid #3b82f6; padding: 16px; margin: 20px 0; border-radius: 4px;">
|
||||||
|
<p style="margin: 0; font-weight: 600; color: #3b82f6;">📋 Rechtliche Informationen:</p>
|
||||||
|
<p style="margin: 8px 0 12px 0; color: #475569;">Weitere Informationen findest du in unserem <a href="${legalUrl}" style="color: #3b82f6; text-decoration: underline;">Impressum und Datenschutz</a>.</p>
|
||||||
|
</div>
|
||||||
|
<p>Liebe Grüße,<br/>Stargirlnails Kiel</p>
|
||||||
|
`;
|
||||||
|
return renderBrandedEmail("Deine Terminanfrage ist eingegangen", inner);
|
||||||
|
}
|
||||||
|
export async function renderBookingConfirmedHTML(params) {
|
||||||
|
const { name, date, time, cancellationUrl, reviewUrl } = params;
|
||||||
|
const formattedDate = formatDateGerman(date);
|
||||||
|
const domain = process.env.DOMAIN || 'localhost:5173';
|
||||||
|
const protocol = domain.includes('localhost') ? 'http' : 'https';
|
||||||
|
const legalUrl = `${protocol}://${domain}/legal`;
|
||||||
|
const inner = `
|
||||||
|
<p>Hallo ${name},</p>
|
||||||
|
<p>wir haben deinen Termin am <strong>${formattedDate}</strong> um <strong>${time}</strong> bestätigt.</p>
|
||||||
|
<p>Wir freuen uns auf dich!</p>
|
||||||
|
<div style="background-color: #f8fafc; border-left: 4px solid #db2777; padding: 16px; margin: 20px 0; border-radius: 4px;">
|
||||||
|
<p style="margin: 0; font-weight: 600; color: #db2777;">📋 Wichtiger Hinweis:</p>
|
||||||
|
<p style="margin: 8px 0 0 0; color: #475569;">Die Allgemeinen Geschäftsbedingungen (AGB) findest du im Anhang dieser E-Mail. Bitte lies sie vor deinem Termin durch.</p>
|
||||||
|
</div>
|
||||||
|
${cancellationUrl ? `
|
||||||
|
<div style="background-color: #fef9f5; border-left: 4px solid #db2777; padding: 16px; margin: 20px 0; border-radius: 4px;">
|
||||||
|
<p style="margin: 0; font-weight: 600; color: #db2777;">📅 Termin verwalten:</p>
|
||||||
|
<p style="margin: 8px 0 12px 0; color: #475569;">Du kannst deinen Termin-Status einsehen und bei Bedarf stornieren:</p>
|
||||||
|
<a href="${cancellationUrl}" style="display: inline-block; background-color: #db2777; color: white; padding: 12px 24px; text-decoration: none; border-radius: 6px; font-weight: 600;">Termin ansehen & verwalten</a>
|
||||||
|
</div>
|
||||||
|
` : ''}
|
||||||
|
${reviewUrl ? `
|
||||||
|
<div style="background-color: #eff6ff; border-left: 4px solid #3b82f6; padding: 16px; margin: 20px 0; border-radius: 4px;">
|
||||||
|
<p style="margin: 0; font-weight: 600; color: #3b82f6;">⭐ Bewertung abgeben:</p>
|
||||||
|
<p style="margin: 8px 0 12px 0; color: #475569;">Nach deinem Termin würden wir uns über deine Bewertung freuen!</p>
|
||||||
|
<a href="${reviewUrl}" style="display: inline-block; background-color: #3b82f6; color: white; padding: 12px 24px; text-decoration: none; border-radius: 6px; font-weight: 600;">Bewertung schreiben</a>
|
||||||
|
<p style="margin: 12px 0 0 0; color: #64748b; font-size: 13px;">Du kannst deine Bewertung nach dem Termin über diesen Link abgeben.</p>
|
||||||
|
</div>
|
||||||
|
` : ''}
|
||||||
|
<div style="background-color: #f8fafc; border-left: 4px solid #3b82f6; padding: 16px; margin: 20px 0; border-radius: 4px;">
|
||||||
|
<p style="margin: 0; font-weight: 600; color: #3b82f6;">📋 Rechtliche Informationen:</p>
|
||||||
|
<p style="margin: 8px 0 12px 0; color: #475569;">Weitere Informationen findest du in unserem <a href="${legalUrl}" style="color: #3b82f6; text-decoration: underline;">Impressum und Datenschutz</a>.</p>
|
||||||
|
</div>
|
||||||
|
<p>Liebe Grüße,<br/>Stargirlnails Kiel</p>
|
||||||
|
`;
|
||||||
|
return renderBrandedEmail("Termin bestätigt", inner);
|
||||||
|
}
|
||||||
|
export async function renderBookingCancelledHTML(params) {
|
||||||
|
const { name, date, time } = params;
|
||||||
|
const formattedDate = formatDateGerman(date);
|
||||||
|
const domain = process.env.DOMAIN || 'localhost:5173';
|
||||||
|
const protocol = domain.includes('localhost') ? 'http' : 'https';
|
||||||
|
const legalUrl = `${protocol}://${domain}/legal`;
|
||||||
|
const inner = `
|
||||||
|
<p>Hallo ${name},</p>
|
||||||
|
<p>dein Termin am <strong>${formattedDate}</strong> um <strong>${time}</strong> wurde abgesagt.</p>
|
||||||
|
<p>Bitte buche einen neuen Termin. Bei Fragen helfen wir dir gerne weiter.</p>
|
||||||
|
<div style="background-color: #f8fafc; border-left: 4px solid #3b82f6; padding: 16px; margin: 20px 0; border-radius: 4px;">
|
||||||
|
<p style="margin: 0; font-weight: 600; color: #3b82f6;">📋 Rechtliche Informationen:</p>
|
||||||
|
<p style="margin: 8px 0 12px 0; color: #475569;">Weitere Informationen findest du in unserem <a href="${legalUrl}" style="color: #3b82f6; text-decoration: underline;">Impressum und Datenschutz</a>.</p>
|
||||||
|
</div>
|
||||||
|
<p>Liebe Grüße,<br/>Stargirlnails Kiel</p>
|
||||||
|
`;
|
||||||
|
return renderBrandedEmail("Termin abgesagt", inner);
|
||||||
|
}
|
||||||
|
export async function renderAdminBookingNotificationHTML(params) {
|
||||||
|
const { name, date, time, treatment, phone, notes, hasInspirationPhoto } = params;
|
||||||
|
const formattedDate = formatDateGerman(date);
|
||||||
|
const inner = `
|
||||||
|
<p>Hallo Admin,</p>
|
||||||
|
<p>eine neue Buchungsanfrage ist eingegangen:</p>
|
||||||
|
<div style="background-color: #f8fafc; border-left: 4px solid #db2777; padding: 16px; margin: 20px 0; border-radius: 4px;">
|
||||||
|
<p style="margin: 0; font-weight: 600; color: #db2777;">📅 Buchungsdetails:</p>
|
||||||
|
<ul style="margin: 8px 0 0 0; color: #475569; list-style: none; padding: 0;">
|
||||||
|
<li><strong>Name:</strong> ${name}</li>
|
||||||
|
<li><strong>Telefon:</strong> ${phone}</li>
|
||||||
|
<li><strong>Behandlung:</strong> ${treatment}</li>
|
||||||
|
<li><strong>Datum:</strong> ${formattedDate}</li>
|
||||||
|
<li><strong>Uhrzeit:</strong> ${time}</li>
|
||||||
|
${notes ? `<li><strong>Notizen:</strong> ${notes}</li>` : ''}
|
||||||
|
<li><strong>Inspiration-Foto:</strong> ${hasInspirationPhoto ? '✅ Im Anhang verfügbar' : '❌ Kein Foto hochgeladen'}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<p>Bitte logge dich in das Admin-Panel ein, um die Buchung zu bestätigen oder abzulehnen.</p>
|
||||||
|
<p>Liebe Grüße,<br/>Stargirlnails System</p>
|
||||||
|
`;
|
||||||
|
return renderBrandedEmail("Neue Buchungsanfrage - Admin-Benachrichtigung", inner);
|
||||||
|
}
|
||||||
|
export async function renderBookingRescheduleProposalHTML(params) {
|
||||||
|
const formattedOriginalDate = formatDateGerman(params.originalDate);
|
||||||
|
const formattedProposedDate = formatDateGerman(params.proposedDate);
|
||||||
|
const expiryDate = new Date(params.expiresAt);
|
||||||
|
const formattedExpiry = `${expiryDate.toLocaleDateString('de-DE')} ${expiryDate.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}`;
|
||||||
|
const inner = `
|
||||||
|
<p>Hallo ${params.name},</p>
|
||||||
|
<p>wir müssen deinen Termin leider verschieben. Hier ist unser Vorschlag:</p>
|
||||||
|
<div style="background-color: #f8fafc; border-left: 4px solid #f59e0b; padding: 16px; margin: 20px 0; border-radius: 4px;">
|
||||||
|
<p style="margin: 0; font-weight: 600; color: #92400e;">📅 Übersicht</p>
|
||||||
|
<table role="presentation" cellspacing="0" cellpadding="0" style="width:100%; margin-top:8px; font-size:14px; color:#475569;">
|
||||||
|
<tr>
|
||||||
|
<td style="padding:6px 0; width:45%"><strong>Alter Termin</strong></td>
|
||||||
|
<td style="padding:6px 0;">${formattedOriginalDate} um ${params.originalTime} Uhr</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td style="padding:6px 0; width:45%"><strong>Neuer Vorschlag</strong></td>
|
||||||
|
<td style="padding:6px 0; color:#b45309;"><strong>${formattedProposedDate} um ${params.proposedTime} Uhr</strong></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td style="padding:6px 0; width:45%"><strong>Behandlung</strong></td>
|
||||||
|
<td style="padding:6px 0;">${params.treatmentName}</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div style="background-color: #fffbeb; border-left: 4px solid #f59e0b; padding: 12px; margin: 16px 0; border-radius: 4px; color:#92400e;">
|
||||||
|
⏰ Bitte antworte bis ${formattedExpiry}.
|
||||||
|
</div>
|
||||||
|
<div style="text-align:center; margin: 20px 0;">
|
||||||
|
<a href="${params.acceptUrl}" style="display:inline-block; background-color:#16a34a; color:#ffffff; padding:12px 18px; border-radius:8px; text-decoration:none; font-weight:700; margin-right:8px;">Neuen Termin akzeptieren</a>
|
||||||
|
<a href="${params.declineUrl}" style="display:inline-block; background-color:#dc2626; color:#ffffff; padding:12px 18px; border-radius:8px; text-decoration:none; font-weight:700;">Termin ablehnen</a>
|
||||||
|
</div>
|
||||||
|
<div style="background-color: #f8fafc; border-left: 4px solid #10b981; padding: 12px; margin: 16px 0; border-radius: 4px; color:#065f46;">
|
||||||
|
Wenn du den Vorschlag ablehnst, bleibt dein ursprünglicher Termin bestehen und wir kontaktieren dich für eine alternative Lösung.
|
||||||
|
</div>
|
||||||
|
<p>Falls du einen komplett neuen Termin buchen möchtest, kannst du deinen aktuellen Termin stornieren und einen neuen Termin auf unserer Website buchen.</p>
|
||||||
|
<p>Liebe Grüße,<br/>Stargirlnails Kiel</p>
|
||||||
|
`;
|
||||||
|
return renderBrandedEmail("Terminänderung vorgeschlagen", inner);
|
||||||
|
}
|
||||||
|
export async function renderAdminRescheduleDeclinedHTML(params) {
|
||||||
|
const inner = `
|
||||||
|
<p>Hallo Admin,</p>
|
||||||
|
<p>der Kunde <strong>${params.customerName}</strong> hat den Terminänderungsvorschlag abgelehnt.</p>
|
||||||
|
<div style="background-color:#f8fafc; border-left:4px solid #ef4444; padding:16px; margin:16px 0; border-radius:4px;">
|
||||||
|
<ul style="margin:0; padding:0; list-style:none; color:#475569; font-size:14px;">
|
||||||
|
<li><strong>Kunde:</strong> ${params.customerName}</li>
|
||||||
|
${params.customerEmail ? `<li><strong>E-Mail:</strong> ${params.customerEmail}</li>` : ''}
|
||||||
|
${params.customerPhone ? `<li><strong>Telefon:</strong> ${params.customerPhone}</li>` : ''}
|
||||||
|
<li><strong>Behandlung:</strong> ${params.treatmentName}</li>
|
||||||
|
<li><strong>Ursprünglicher Termin:</strong> ${formatDateGerman(params.originalDate)} um ${params.originalTime} Uhr (bleibt bestehen)</li>
|
||||||
|
<li><strong>Abgelehnter Vorschlag:</strong> ${formatDateGerman(params.proposedDate)} um ${params.proposedTime} Uhr</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<p>Bitte kontaktiere den Kunden, um eine alternative Lösung zu finden.</p>
|
||||||
|
`;
|
||||||
|
return renderBrandedEmail("Kunde hat Terminänderung abgelehnt", inner);
|
||||||
|
}
|
||||||
|
export async function renderAdminRescheduleAcceptedHTML(params) {
|
||||||
|
const inner = `
|
||||||
|
<p>Hallo Admin,</p>
|
||||||
|
<p>der Kunde <strong>${params.customerName}</strong> hat den Terminänderungsvorschlag akzeptiert.</p>
|
||||||
|
<div style="background-color:#ecfeff; border-left:4px solid #10b981; padding:16px; margin:16px 0; border-radius:4px;">
|
||||||
|
<ul style="margin:0; padding:0; list-style:none; color:#475569; font-size:14px;">
|
||||||
|
<li><strong>Kunde:</strong> ${params.customerName}</li>
|
||||||
|
<li><strong>Behandlung:</strong> ${params.treatmentName}</li>
|
||||||
|
<li><strong>Alter Termin:</strong> ${formatDateGerman(params.originalDate)} um ${params.originalTime} Uhr</li>
|
||||||
|
<li><strong>Neuer Termin:</strong> ${formatDateGerman(params.newDate)} um ${params.newTime} Uhr ✅</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<p>Der Termin wurde automatisch aktualisiert.</p>
|
||||||
|
`;
|
||||||
|
return renderBrandedEmail("Kunde hat Terminänderung akzeptiert", inner);
|
||||||
|
}
|
||||||
|
export async function renderAdminRescheduleExpiredHTML(params) {
|
||||||
|
const inner = `
|
||||||
|
<p>Hallo Admin,</p>
|
||||||
|
<p><strong>${params.expiredProposals.length} Terminänderungsvorschlag${params.expiredProposals.length > 1 ? 'e' : ''} ${params.expiredProposals.length > 1 ? 'sind' : 'ist'} abgelaufen</strong> und wurde${params.expiredProposals.length > 1 ? 'n' : ''} automatisch entfernt.</p>
|
||||||
|
<div style="background-color:#fef2f2; border-left:4px solid #ef4444; padding:16px; margin:16px 0; border-radius:4px;">
|
||||||
|
<p style="margin:0 0 12px 0; font-weight:600; color:#dc2626;">⚠️ Abgelaufene Vorschläge:</p>
|
||||||
|
${params.expiredProposals.map(proposal => `
|
||||||
|
<div style="background-color:#ffffff; border:1px solid #fecaca; border-radius:4px; padding:12px; margin:8px 0;">
|
||||||
|
<ul style="margin:0; padding:0; list-style:none; color:#475569; font-size:13px;">
|
||||||
|
<li><strong>Kunde:</strong> ${proposal.customerName}</li>
|
||||||
|
${proposal.customerEmail ? `<li><strong>E-Mail:</strong> ${proposal.customerEmail}</li>` : ''}
|
||||||
|
${proposal.customerPhone ? `<li><strong>Telefon:</strong> ${proposal.customerPhone}</li>` : ''}
|
||||||
|
<li><strong>Behandlung:</strong> ${proposal.treatmentName}</li>
|
||||||
|
<li><strong>Ursprünglicher Termin:</strong> ${formatDateGerman(proposal.originalDate)} um ${proposal.originalTime} Uhr</li>
|
||||||
|
<li><strong>Vorgeschlagener Termin:</strong> ${formatDateGerman(proposal.proposedDate)} um ${proposal.proposedTime} Uhr</li>
|
||||||
|
<li><strong>Abgelaufen am:</strong> ${new Date(proposal.expiredAt).toLocaleString('de-DE')}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
`).join('')}
|
||||||
|
</div>
|
||||||
|
<p style="color:#dc2626; font-weight:600;">Bitte kontaktiere die Kunden, um eine alternative Lösung zu finden.</p>
|
||||||
|
<p>Die ursprünglichen Termine bleiben bestehen.</p>
|
||||||
|
`;
|
||||||
|
return renderBrandedEmail("Abgelaufene Terminänderungsvorschläge", inner);
|
||||||
|
}
|
||||||
88
server-dist/lib/email-validator.js
Normal file
88
server-dist/lib/email-validator.js
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
// Email validation using Rapid Email Validator API
|
||||||
|
// API: https://rapid-email-verifier.fly.dev/
|
||||||
|
// Privacy-focused, no data storage, completely free
|
||||||
|
/**
|
||||||
|
* Validate email address using Rapid Email Validator API
|
||||||
|
* Returns true if email is valid, false otherwise
|
||||||
|
*/
|
||||||
|
export async function validateEmail(email) {
|
||||||
|
try {
|
||||||
|
// Call Rapid Email Validator API
|
||||||
|
const response = await fetch(`https://rapid-email-verifier.fly.dev/api/validate?email=${encodeURIComponent(email)}`, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
'Accept': 'application/json',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
if (!response.ok) {
|
||||||
|
console.error(`Email validation API error: ${response.status}`);
|
||||||
|
// If API is down, reject the email with error message
|
||||||
|
return {
|
||||||
|
valid: false,
|
||||||
|
reason: 'E-Mail-Validierung ist derzeit nicht verfügbar. Bitte überprüfe deine E-Mail-Adresse und versuche es erneut.'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
const data = await response.json();
|
||||||
|
// Check if email is disposable/temporary
|
||||||
|
if (data.validations.is_disposable) {
|
||||||
|
return {
|
||||||
|
valid: false,
|
||||||
|
reason: 'Temporäre oder Wegwerf-E-Mail-Adressen sind nicht erlaubt. Bitte verwende eine echte E-Mail-Adresse.',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
// Check if MX records exist (deliverable)
|
||||||
|
if (!data.validations.mx_records) {
|
||||||
|
return {
|
||||||
|
valid: false,
|
||||||
|
reason: 'Diese E-Mail-Adresse kann keine E-Mails empfangen. Bitte überprüfe deine E-Mail-Adresse.',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
// Check if domain exists
|
||||||
|
if (!data.validations.domain_exists) {
|
||||||
|
return {
|
||||||
|
valid: false,
|
||||||
|
reason: 'Die E-Mail-Domain existiert nicht. Bitte überprüfe deine E-Mail-Adresse.',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
// Check if email syntax is valid
|
||||||
|
if (!data.validations.syntax) {
|
||||||
|
return {
|
||||||
|
valid: false,
|
||||||
|
reason: 'Ungültige E-Mail-Adresse. Bitte überprüfe die Schreibweise.',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
// Email is valid
|
||||||
|
return { valid: true };
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.error('Email validation error:', error);
|
||||||
|
// If validation fails, reject the email with error message
|
||||||
|
return {
|
||||||
|
valid: false,
|
||||||
|
reason: 'E-Mail-Validierung ist derzeit nicht verfügbar. Bitte überprüfe deine E-Mail-Adresse und versuche es erneut.'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* Batch validate multiple emails
|
||||||
|
* @param emails Array of email addresses to validate
|
||||||
|
* @returns Array of validation results
|
||||||
|
*/
|
||||||
|
export async function validateEmailBatch(emails) {
|
||||||
|
const results = new Map();
|
||||||
|
// Validate up to 100 emails at once (API limit)
|
||||||
|
const batchSize = 100;
|
||||||
|
for (let i = 0; i < emails.length; i += batchSize) {
|
||||||
|
const batch = emails.slice(i, i + batchSize);
|
||||||
|
// Call each validation in parallel for better performance
|
||||||
|
const validations = await Promise.all(batch.map(async (email) => {
|
||||||
|
const result = await validateEmail(email);
|
||||||
|
return { email, result };
|
||||||
|
}));
|
||||||
|
// Store results
|
||||||
|
validations.forEach(({ email, result }) => {
|
||||||
|
results.set(email, result);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return results;
|
||||||
|
}
|
||||||
186
server-dist/lib/email.js
Normal file
186
server-dist/lib/email.js
Normal file
@@ -0,0 +1,186 @@
|
|||||||
|
import { readFile } from "node:fs/promises";
|
||||||
|
import { fileURLToPath } from "node:url";
|
||||||
|
import { dirname, resolve } from "node:path";
|
||||||
|
const RESEND_API_KEY = process.env.RESEND_API_KEY;
|
||||||
|
const DEFAULT_FROM = process.env.EMAIL_FROM || "Stargirlnails <no-reply@stargirlnails.de>";
|
||||||
|
// Helper function to format dates for ICS files (YYYYMMDDTHHMMSS)
|
||||||
|
function formatDateForICS(date, time) {
|
||||||
|
// date is in YYYY-MM-DD format, time is in HH:MM format
|
||||||
|
const [year, month, day] = date.split('-');
|
||||||
|
const [hours, minutes] = time.split(':');
|
||||||
|
return `${year}${month}${day}T${hours}${minutes}00`;
|
||||||
|
}
|
||||||
|
// Helper function to create ICS (iCalendar) file content
|
||||||
|
function createICSFile(params) {
|
||||||
|
const { date, time, durationMinutes, customerName, treatmentName } = params;
|
||||||
|
// Calculate start and end times in Europe/Berlin timezone
|
||||||
|
const dtStart = formatDateForICS(date, time);
|
||||||
|
// Calculate end time
|
||||||
|
const [hours, minutes] = time.split(':').map(Number);
|
||||||
|
const startDate = new Date(`${date}T${time}:00`);
|
||||||
|
const endDate = new Date(startDate.getTime() + durationMinutes * 60000);
|
||||||
|
const endHours = String(endDate.getHours()).padStart(2, '0');
|
||||||
|
const endMinutes = String(endDate.getMinutes()).padStart(2, '0');
|
||||||
|
const dtEnd = formatDateForICS(date, `${endHours}:${endMinutes}`);
|
||||||
|
// Create unique ID for this event
|
||||||
|
const uid = `booking-${Date.now()}-${Math.random().toString(36).substr(2, 9)}@stargirlnails.de`;
|
||||||
|
// Current timestamp for DTSTAMP
|
||||||
|
const now = new Date();
|
||||||
|
const dtstamp = now.toISOString().replace(/[-:]/g, '').split('.')[0] + 'Z';
|
||||||
|
// ICS content
|
||||||
|
const icsContent = [
|
||||||
|
'BEGIN:VCALENDAR',
|
||||||
|
'VERSION:2.0',
|
||||||
|
'PRODID:-//Stargirlnails Kiel//Booking System//DE',
|
||||||
|
'CALSCALE:GREGORIAN',
|
||||||
|
'METHOD:REQUEST',
|
||||||
|
'BEGIN:VEVENT',
|
||||||
|
`UID:${uid}`,
|
||||||
|
`DTSTAMP:${dtstamp}`,
|
||||||
|
`DTSTART;TZID=Europe/Berlin:${dtStart}`,
|
||||||
|
`DTEND;TZID=Europe/Berlin:${dtEnd}`,
|
||||||
|
`SUMMARY:${treatmentName} - Stargirlnails Kiel`,
|
||||||
|
`DESCRIPTION:Termin für ${treatmentName} bei Stargirlnails Kiel`,
|
||||||
|
'LOCATION:Stargirlnails Kiel',
|
||||||
|
`ORGANIZER;CN=Stargirlnails Kiel:mailto:${process.env.EMAIL_FROM?.match(/<(.+)>/)?.[1] || 'no-reply@stargirlnails.de'}`,
|
||||||
|
`ATTENDEE;CN=${customerName};RSVP=TRUE:mailto:${customerName}`,
|
||||||
|
'STATUS:CONFIRMED',
|
||||||
|
'SEQUENCE:0',
|
||||||
|
'BEGIN:VALARM',
|
||||||
|
'TRIGGER:-PT24H',
|
||||||
|
'ACTION:DISPLAY',
|
||||||
|
'DESCRIPTION:Erinnerung: Termin morgen bei Stargirlnails Kiel',
|
||||||
|
'END:VALARM',
|
||||||
|
'END:VEVENT',
|
||||||
|
'BEGIN:VTIMEZONE',
|
||||||
|
'TZID:Europe/Berlin',
|
||||||
|
'BEGIN:DAYLIGHT',
|
||||||
|
'TZOFFSETFROM:+0100',
|
||||||
|
'TZOFFSETTO:+0200',
|
||||||
|
'TZNAME:CEST',
|
||||||
|
'DTSTART:19700329T020000',
|
||||||
|
'RRULE:FREQ=YEARLY;BYMONTH=3;BYDAY=-1SU',
|
||||||
|
'END:DAYLIGHT',
|
||||||
|
'BEGIN:STANDARD',
|
||||||
|
'TZOFFSETFROM:+0200',
|
||||||
|
'TZOFFSETTO:+0100',
|
||||||
|
'TZNAME:CET',
|
||||||
|
'DTSTART:19701025T030000',
|
||||||
|
'RRULE:FREQ=YEARLY;BYMONTH=10;BYDAY=-1SU',
|
||||||
|
'END:STANDARD',
|
||||||
|
'END:VTIMEZONE',
|
||||||
|
'END:VCALENDAR'
|
||||||
|
].join('\r\n');
|
||||||
|
return icsContent;
|
||||||
|
}
|
||||||
|
// Cache for AGB PDF to avoid reading it multiple times
|
||||||
|
let cachedAGBPDF = null;
|
||||||
|
async function getAGBPDFBase64() {
|
||||||
|
if (cachedAGBPDF)
|
||||||
|
return cachedAGBPDF;
|
||||||
|
try {
|
||||||
|
const __filename = fileURLToPath(import.meta.url);
|
||||||
|
const __dirname = dirname(__filename);
|
||||||
|
const agbPath = resolve(__dirname, "../../../AGB.pdf");
|
||||||
|
const buf = await readFile(agbPath);
|
||||||
|
cachedAGBPDF = buf.toString('base64');
|
||||||
|
return cachedAGBPDF;
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.warn("Could not read AGB.pdf:", error);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export async function sendEmail(params) {
|
||||||
|
if (!RESEND_API_KEY) {
|
||||||
|
// In development or if not configured, skip sending but don't fail the flow
|
||||||
|
console.warn("Resend API key not configured. Skipping email send.");
|
||||||
|
return { success: false };
|
||||||
|
}
|
||||||
|
const response = await fetch("https://api.resend.com/emails", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Authorization": `Bearer ${RESEND_API_KEY}`,
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
from: params.from || DEFAULT_FROM,
|
||||||
|
to: Array.isArray(params.to) ? params.to : [params.to],
|
||||||
|
subject: params.subject,
|
||||||
|
text: params.text,
|
||||||
|
html: params.html,
|
||||||
|
cc: params.cc ? (Array.isArray(params.cc) ? params.cc : [params.cc]) : undefined,
|
||||||
|
bcc: params.bcc ? (Array.isArray(params.bcc) ? params.bcc : [params.bcc]) : undefined,
|
||||||
|
attachments: params.attachments,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
if (!response.ok) {
|
||||||
|
const body = await response.text().catch(() => "");
|
||||||
|
console.error("Resend send error:", response.status, body);
|
||||||
|
return { success: false };
|
||||||
|
}
|
||||||
|
return { success: true };
|
||||||
|
}
|
||||||
|
export async function sendEmailWithAGB(params) {
|
||||||
|
const agbBase64 = await getAGBPDFBase64();
|
||||||
|
if (agbBase64) {
|
||||||
|
params.attachments = [
|
||||||
|
...(params.attachments || []),
|
||||||
|
{
|
||||||
|
filename: "AGB_Stargirlnails_Kiel.pdf",
|
||||||
|
content: agbBase64,
|
||||||
|
type: "application/pdf"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
}
|
||||||
|
return sendEmail(params);
|
||||||
|
}
|
||||||
|
export async function sendEmailWithAGBAndCalendar(params, calendarParams) {
|
||||||
|
const agbBase64 = await getAGBPDFBase64();
|
||||||
|
// Create ICS file content
|
||||||
|
const icsContent = createICSFile(calendarParams);
|
||||||
|
const icsBase64 = Buffer.from(icsContent, 'utf-8').toString('base64');
|
||||||
|
// Attach both AGB and ICS file
|
||||||
|
params.attachments = [...(params.attachments || [])];
|
||||||
|
if (agbBase64) {
|
||||||
|
params.attachments.push({
|
||||||
|
filename: "AGB_Stargirlnails_Kiel.pdf",
|
||||||
|
content: agbBase64,
|
||||||
|
type: "application/pdf"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
params.attachments.push({
|
||||||
|
filename: "Termin_Stargirlnails.ics",
|
||||||
|
content: icsBase64,
|
||||||
|
type: "text/calendar"
|
||||||
|
});
|
||||||
|
return sendEmail(params);
|
||||||
|
}
|
||||||
|
export async function sendEmailWithInspirationPhoto(params, photoData, customerName) {
|
||||||
|
if (!photoData) {
|
||||||
|
return sendEmail(params);
|
||||||
|
}
|
||||||
|
// Extract file extension from base64 data URL
|
||||||
|
const match = photoData.match(/data:image\/([^;]+);base64,(.+)/);
|
||||||
|
if (!match) {
|
||||||
|
console.warn("Invalid photo data format");
|
||||||
|
return sendEmail(params);
|
||||||
|
}
|
||||||
|
const [, extension, base64Content] = match;
|
||||||
|
const filename = `inspiration_${customerName.replace(/[^a-zA-Z0-9]/g, '_')}_${Date.now()}.${extension}`;
|
||||||
|
// Check if attachment is too large (max 1MB base64 content)
|
||||||
|
if (base64Content.length > 1024 * 1024) {
|
||||||
|
console.warn(`Photo attachment too large: ${base64Content.length} chars, skipping attachment`);
|
||||||
|
return sendEmail(params);
|
||||||
|
}
|
||||||
|
// console.log(`Sending email with photo attachment: ${filename}, size: ${base64Content.length} chars`);
|
||||||
|
params.attachments = [
|
||||||
|
...(params.attachments || []),
|
||||||
|
{
|
||||||
|
filename,
|
||||||
|
content: base64Content,
|
||||||
|
type: `image/${extension}`
|
||||||
|
}
|
||||||
|
];
|
||||||
|
return sendEmail(params);
|
||||||
|
}
|
||||||
39
server-dist/lib/legal-config.js
Normal file
39
server-dist/lib/legal-config.js
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
// Default configuration - should be overridden by environment variables
|
||||||
|
export const defaultLegalConfig = {
|
||||||
|
companyName: process.env.COMPANY_NAME || "Stargirlnails Kiel",
|
||||||
|
ownerName: process.env.OWNER_NAME || "Inhaber Name",
|
||||||
|
address: {
|
||||||
|
street: process.env.ADDRESS_STREET || "Liebigstr. 15",
|
||||||
|
city: process.env.ADDRESS_CITY || "Kiel",
|
||||||
|
postalCode: process.env.ADDRESS_POSTAL_CODE || "24145",
|
||||||
|
country: process.env.ADDRESS_COUNTRY || "Deutschland",
|
||||||
|
latitude: process.env.ADDRESS_LATITUDE ? parseFloat(process.env.ADDRESS_LATITUDE) : 54.3233,
|
||||||
|
longitude: process.env.ADDRESS_LONGITUDE ? parseFloat(process.env.ADDRESS_LONGITUDE) : 10.1228,
|
||||||
|
},
|
||||||
|
contact: {
|
||||||
|
phone: process.env.CONTACT_PHONE || "+49 431 123456",
|
||||||
|
email: process.env.CONTACT_EMAIL || "info@stargirlnails.de",
|
||||||
|
website: process.env.DOMAIN || "stargirlnails.de",
|
||||||
|
},
|
||||||
|
businessDetails: {
|
||||||
|
taxId: process.env.TAX_ID || "",
|
||||||
|
vatId: process.env.VAT_ID || "",
|
||||||
|
commercialRegister: process.env.COMMERCIAL_REGISTER || "",
|
||||||
|
responsibleForContent: process.env.RESPONSIBLE_FOR_CONTENT || "Inhaber Name",
|
||||||
|
},
|
||||||
|
dataProtection: {
|
||||||
|
responsiblePerson: process.env.DATA_PROTECTION_RESPONSIBLE || "Inhaber Name",
|
||||||
|
email: process.env.DATA_PROTECTION_EMAIL || "datenschutz@stargirlnails.de",
|
||||||
|
purpose: process.env.DATA_PROTECTION_PURPOSE || "Terminbuchung und Kundenbetreuung",
|
||||||
|
legalBasis: process.env.DATA_PROTECTION_LEGAL_BASIS || "Art. 6 Abs. 1 lit. b DSGVO (Vertragserfüllung) und Art. 6 Abs. 1 lit. f DSGVO (berechtigtes Interesse)",
|
||||||
|
dataRetention: process.env.DATA_PROTECTION_RETENTION || "Buchungsdaten werden 3 Jahre nach Vertragsende gespeichert",
|
||||||
|
rights: process.env.DATA_PROTECTION_RIGHTS || "Auskunft, Berichtigung, Löschung, Einschränkung, Widerspruch, Beschwerde bei der Aufsichtsbehörde",
|
||||||
|
cookies: process.env.DATA_PROTECTION_COOKIES || "Wir verwenden technisch notwendige Cookies für die Funktionalität der Website",
|
||||||
|
thirdPartyServices: process.env.THIRD_PARTY_SERVICES ? process.env.THIRD_PARTY_SERVICES.split(',') : ["Resend (E-Mail-Versand)"],
|
||||||
|
dataSecurity: process.env.DATA_PROTECTION_SECURITY || "SSL-Verschlüsselung, sichere Server, regelmäßige Updates",
|
||||||
|
contactDataProtection: process.env.DATA_PROTECTION_CONTACT || "Bei Fragen zum Datenschutz wenden Sie sich an: datenschutz@stargirlnails.de",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
export function getLegalConfig() {
|
||||||
|
return defaultLegalConfig;
|
||||||
|
}
|
||||||
14
server-dist/lib/openai.js
Normal file
14
server-dist/lib/openai.js
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
import { jsonrepair } from "jsonrepair";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { makeParseableResponseFormat } from "openai/lib/parser";
|
||||||
|
export function zodResponseFormat(zodObject, name, props) {
|
||||||
|
return makeParseableResponseFormat({
|
||||||
|
type: "json_schema",
|
||||||
|
json_schema: {
|
||||||
|
...props,
|
||||||
|
name,
|
||||||
|
strict: true,
|
||||||
|
schema: z.toJSONSchema(zodObject, { target: "draft-7" }),
|
||||||
|
},
|
||||||
|
}, (content) => zodObject.parse(JSON.parse(jsonrepair(content))));
|
||||||
|
}
|
||||||
117
server-dist/lib/rate-limiter.js
Normal file
117
server-dist/lib/rate-limiter.js
Normal file
@@ -0,0 +1,117 @@
|
|||||||
|
// Simple in-memory rate limiter for IP and email-based requests
|
||||||
|
// For production with multiple instances, consider using Redis
|
||||||
|
const rateLimitStore = new Map();
|
||||||
|
// Cleanup old entries every 10 minutes to prevent memory leaks
|
||||||
|
setInterval(() => {
|
||||||
|
const now = Date.now();
|
||||||
|
for (const [key, entry] of rateLimitStore.entries()) {
|
||||||
|
if (entry.resetAt < now) {
|
||||||
|
rateLimitStore.delete(key);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 10 * 60 * 1000);
|
||||||
|
/**
|
||||||
|
* Check if a request is allowed based on rate limiting
|
||||||
|
* @param key - Unique identifier (IP, email, or combination)
|
||||||
|
* @param config - Rate limit configuration
|
||||||
|
* @returns RateLimitResult with allow status and metadata
|
||||||
|
*/
|
||||||
|
export function checkRateLimit(key, config) {
|
||||||
|
const now = Date.now();
|
||||||
|
const entry = rateLimitStore.get(key);
|
||||||
|
// No existing entry or window expired - allow and create new entry
|
||||||
|
if (!entry || entry.resetAt < now) {
|
||||||
|
rateLimitStore.set(key, {
|
||||||
|
count: 1,
|
||||||
|
resetAt: now + config.windowMs,
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
allowed: true,
|
||||||
|
remaining: config.maxRequests - 1,
|
||||||
|
resetAt: now + config.windowMs,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
// Existing entry within window
|
||||||
|
if (entry.count >= config.maxRequests) {
|
||||||
|
// Rate limit exceeded
|
||||||
|
const retryAfterSeconds = Math.ceil((entry.resetAt - now) / 1000);
|
||||||
|
return {
|
||||||
|
allowed: false,
|
||||||
|
remaining: 0,
|
||||||
|
resetAt: entry.resetAt,
|
||||||
|
retryAfterSeconds,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
// Increment count and allow
|
||||||
|
entry.count++;
|
||||||
|
rateLimitStore.set(key, entry);
|
||||||
|
return {
|
||||||
|
allowed: true,
|
||||||
|
remaining: config.maxRequests - entry.count,
|
||||||
|
resetAt: entry.resetAt,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* Check rate limit for booking creation
|
||||||
|
* Applies multiple checks: per IP and per email
|
||||||
|
*/
|
||||||
|
export function checkBookingRateLimit(params) {
|
||||||
|
const { ip, email } = params;
|
||||||
|
// Config: max 3 bookings per email per hour
|
||||||
|
const emailConfig = {
|
||||||
|
maxRequests: 3,
|
||||||
|
windowMs: 60 * 60 * 1000, // 1 hour
|
||||||
|
};
|
||||||
|
// Config: max 5 bookings per IP per 10 minutes
|
||||||
|
const ipConfig = {
|
||||||
|
maxRequests: 5,
|
||||||
|
windowMs: 10 * 60 * 1000, // 10 minutes
|
||||||
|
};
|
||||||
|
// Check email rate limit
|
||||||
|
const emailKey = `booking:email:${email.toLowerCase()}`;
|
||||||
|
const emailResult = checkRateLimit(emailKey, emailConfig);
|
||||||
|
if (!emailResult.allowed) {
|
||||||
|
return {
|
||||||
|
...emailResult,
|
||||||
|
allowed: false,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
// Check IP rate limit (if IP is available)
|
||||||
|
if (ip) {
|
||||||
|
const ipKey = `booking:ip:${ip}`;
|
||||||
|
const ipResult = checkRateLimit(ipKey, ipConfig);
|
||||||
|
if (!ipResult.allowed) {
|
||||||
|
return {
|
||||||
|
...ipResult,
|
||||||
|
allowed: false,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Both checks passed
|
||||||
|
return {
|
||||||
|
allowed: true,
|
||||||
|
remaining: Math.min(emailResult.remaining, ip ? Infinity : emailResult.remaining),
|
||||||
|
resetAt: emailResult.resetAt,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* Get client IP from various headers (for proxy/load balancer support)
|
||||||
|
*/
|
||||||
|
export function getClientIP(headers) {
|
||||||
|
// Check common proxy headers
|
||||||
|
const forwardedFor = headers['x-forwarded-for'];
|
||||||
|
if (forwardedFor) {
|
||||||
|
// x-forwarded-for can contain multiple IPs, take the first one
|
||||||
|
return forwardedFor.split(',')[0].trim();
|
||||||
|
}
|
||||||
|
const realIP = headers['x-real-ip'];
|
||||||
|
if (realIP) {
|
||||||
|
return realIP;
|
||||||
|
}
|
||||||
|
const cfConnectingIP = headers['cf-connecting-ip']; // Cloudflare
|
||||||
|
if (cfConnectingIP) {
|
||||||
|
return cfConnectingIP;
|
||||||
|
}
|
||||||
|
// No IP found
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
176
server-dist/routes/caldav.js
Normal file
176
server-dist/routes/caldav.js
Normal file
@@ -0,0 +1,176 @@
|
|||||||
|
import { Hono } from "hono";
|
||||||
|
import { createKV } from "../lib/create-kv.js";
|
||||||
|
// KV-Stores
|
||||||
|
const bookingsKV = createKV("bookings");
|
||||||
|
const treatmentsKV = createKV("treatments");
|
||||||
|
const sessionsKV = createKV("sessions");
|
||||||
|
export const caldavApp = new Hono();
|
||||||
|
// Helper-Funktionen für ICS-Format
|
||||||
|
function formatDateTime(dateStr, timeStr) {
|
||||||
|
// Konvertiere YYYY-MM-DD HH:MM zu UTC-Format für ICS
|
||||||
|
const [year, month, day] = dateStr.split('-').map(Number);
|
||||||
|
const [hours, minutes] = timeStr.split(':').map(Number);
|
||||||
|
const date = new Date(year, month - 1, day, hours, minutes);
|
||||||
|
return date.toISOString().replace(/[-:]/g, '').replace(/\.\d{3}/, '');
|
||||||
|
}
|
||||||
|
function generateICSContent(bookings, treatments) {
|
||||||
|
const now = new Date().toISOString().replace(/[-:]/g, '').replace(/\.\d{3}/, '');
|
||||||
|
let ics = `BEGIN:VCALENDAR
|
||||||
|
VERSION:2.0
|
||||||
|
PRODID:-//Stargirlnails//Booking Calendar//DE
|
||||||
|
CALSCALE:GREGORIAN
|
||||||
|
METHOD:PUBLISH
|
||||||
|
X-WR-CALNAME:Stargirlnails Termine
|
||||||
|
X-WR-CALDESC:Terminkalender für Stargirlnails
|
||||||
|
X-WR-TIMEZONE:Europe/Berlin
|
||||||
|
`;
|
||||||
|
// Nur bestätigte und ausstehende Termine in den Kalender aufnehmen
|
||||||
|
const activeBookings = bookings.filter(b => b.status === 'confirmed' || b.status === 'pending');
|
||||||
|
for (const booking of activeBookings) {
|
||||||
|
const treatment = treatments.find(t => t.id === booking.treatmentId);
|
||||||
|
const treatmentName = treatment?.name || 'Unbekannte Behandlung';
|
||||||
|
const duration = booking.bookedDurationMinutes || treatment?.duration || 60;
|
||||||
|
const startTime = formatDateTime(booking.appointmentDate, booking.appointmentTime);
|
||||||
|
const endTime = formatDateTime(booking.appointmentDate, `${String(Math.floor((parseInt(booking.appointmentTime.split(':')[0]) * 60 + parseInt(booking.appointmentTime.split(':')[1]) + duration) / 60)).padStart(2, '0')}:${String((parseInt(booking.appointmentTime.split(':')[0]) * 60 + parseInt(booking.appointmentTime.split(':')[1]) + duration) % 60).padStart(2, '0')}`);
|
||||||
|
// UID für jeden Termin (eindeutig)
|
||||||
|
const uid = `booking-${booking.id}@stargirlnails.de`;
|
||||||
|
// Status für ICS
|
||||||
|
const status = booking.status === 'confirmed' ? 'CONFIRMED' : 'TENTATIVE';
|
||||||
|
ics += `BEGIN:VEVENT
|
||||||
|
UID:${uid}
|
||||||
|
DTSTAMP:${now}
|
||||||
|
DTSTART:${startTime}
|
||||||
|
DTEND:${endTime}
|
||||||
|
SUMMARY:${treatmentName} - ${booking.customerName}
|
||||||
|
DESCRIPTION:Behandlung: ${treatmentName}\\nKunde: ${booking.customerName}${booking.customerPhone ? `\\nTelefon: ${booking.customerPhone}` : ''}${booking.notes ? `\\nNotizen: ${booking.notes}` : ''}
|
||||||
|
STATUS:${status}
|
||||||
|
TRANSP:OPAQUE
|
||||||
|
END:VEVENT
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
ics += `END:VCALENDAR`;
|
||||||
|
return ics;
|
||||||
|
}
|
||||||
|
// CalDAV Discovery (PROPFIND auf Root)
|
||||||
|
caldavApp.all("/", async (c) => {
|
||||||
|
if (c.req.method !== 'PROPFIND') {
|
||||||
|
return c.text('Method Not Allowed', 405);
|
||||||
|
}
|
||||||
|
const response = `<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<D:multistatus xmlns:D="DAV:" xmlns:C="urn:ietf:params:xml:ns:caldav">
|
||||||
|
<D:response>
|
||||||
|
<D:href>/caldav/</D:href>
|
||||||
|
<D:propstat>
|
||||||
|
<D:prop>
|
||||||
|
<D:displayname>Stargirlnails Terminkalender</D:displayname>
|
||||||
|
<C:calendar-description>Termine für Stargirlnails</C:calendar-description>
|
||||||
|
<C:supported-calendar-component-set>
|
||||||
|
<C:comp name="VEVENT"/>
|
||||||
|
</C:supported-calendar-component-set>
|
||||||
|
<C:calendar-timezone>Europe/Berlin</C:calendar-timezone>
|
||||||
|
</D:prop>
|
||||||
|
<D:status>HTTP/1.1 200 OK</D:status>
|
||||||
|
</D:propstat>
|
||||||
|
</D:response>
|
||||||
|
</D:multistatus>`;
|
||||||
|
return c.text(response, 207, {
|
||||||
|
"Content-Type": "application/xml; charset=utf-8",
|
||||||
|
"DAV": "1, 3, calendar-access, calendar-schedule",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// Calendar Collection PROPFIND
|
||||||
|
caldavApp.all("/calendar/", async (c) => {
|
||||||
|
if (c.req.method !== 'PROPFIND') {
|
||||||
|
return c.text('Method Not Allowed', 405);
|
||||||
|
}
|
||||||
|
const response = `<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<D:multistatus xmlns:D="DAV:" xmlns:C="urn:ietf:params:xml:ns:caldav" xmlns:CS="http://calendarserver.org/ns/">
|
||||||
|
<D:response>
|
||||||
|
<D:href>/caldav/calendar/</D:href>
|
||||||
|
<D:propstat>
|
||||||
|
<D:prop>
|
||||||
|
<D:displayname>Stargirlnails Termine</D:displayname>
|
||||||
|
<C:calendar-description>Alle Termine von Stargirlnails</C:calendar-description>
|
||||||
|
<C:supported-calendar-component-set>
|
||||||
|
<C:comp name="VEVENT"/>
|
||||||
|
</C:supported-calendar-component-set>
|
||||||
|
<C:calendar-timezone>Europe/Berlin</C:calendar-timezone>
|
||||||
|
<CS:getctag>${Date.now()}</CS:getctag>
|
||||||
|
<D:sync-token>${Date.now()}</D:sync-token>
|
||||||
|
</D:prop>
|
||||||
|
<D:status>HTTP/1.1 200 OK</D:status>
|
||||||
|
</D:propstat>
|
||||||
|
</D:response>
|
||||||
|
</D:multistatus>`;
|
||||||
|
return c.text(response, 207, {
|
||||||
|
"Content-Type": "application/xml; charset=utf-8",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// Calendar Events PROPFIND
|
||||||
|
caldavApp.all("/calendar/events.ics", async (c) => {
|
||||||
|
if (c.req.method !== 'PROPFIND') {
|
||||||
|
return c.text('Method Not Allowed', 405);
|
||||||
|
}
|
||||||
|
const response = `<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<D:multistatus xmlns:D="DAV:" xmlns:C="urn:ietf:params:xml:ns:caldav" xmlns:CS="http://calendarserver.org/ns/">
|
||||||
|
<D:response>
|
||||||
|
<D:href>/caldav/calendar/events.ics</D:href>
|
||||||
|
<D:propstat>
|
||||||
|
<D:prop>
|
||||||
|
<D:getcontenttype>text/calendar; charset=utf-8</D:getcontenttype>
|
||||||
|
<D:getetag>"${Date.now()}"</D:getetag>
|
||||||
|
<D:displayname>Stargirlnails Termine</D:displayname>
|
||||||
|
<C:calendar-data>BEGIN:VCALENDAR\\nVERSION:2.0\\nEND:VCALENDAR</C:calendar-data>
|
||||||
|
</D:prop>
|
||||||
|
<D:status>HTTP/1.1 200 OK</D:status>
|
||||||
|
</D:propstat>
|
||||||
|
</D:response>
|
||||||
|
</D:multistatus>`;
|
||||||
|
return c.text(response, 207, {
|
||||||
|
"Content-Type": "application/xml; charset=utf-8",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// GET Calendar Data (ICS-Datei)
|
||||||
|
caldavApp.get("/calendar/events.ics", async (c) => {
|
||||||
|
try {
|
||||||
|
// Authentifizierung über Token im Query-Parameter
|
||||||
|
const token = c.req.query('token');
|
||||||
|
if (!token) {
|
||||||
|
return c.text('Unauthorized - Token required', 401);
|
||||||
|
}
|
||||||
|
// Token validieren
|
||||||
|
const tokenData = await sessionsKV.getItem(token);
|
||||||
|
if (!tokenData) {
|
||||||
|
return c.text('Unauthorized - Invalid token', 401);
|
||||||
|
}
|
||||||
|
// Prüfe, ob es ein CalDAV-Token ist (durch Ablaufzeit und fehlende type-Eigenschaft erkennbar)
|
||||||
|
// CalDAV-Tokens haben eine kürzere Ablaufzeit (24h) als normale Sessions
|
||||||
|
const tokenAge = Date.now() - new Date(tokenData.createdAt).getTime();
|
||||||
|
if (tokenAge > 24 * 60 * 60 * 1000) { // 24 Stunden
|
||||||
|
return c.text('Unauthorized - Token expired', 401);
|
||||||
|
}
|
||||||
|
// Token-Ablaufzeit prüfen
|
||||||
|
if (new Date(tokenData.expiresAt) < new Date()) {
|
||||||
|
return c.text('Unauthorized - Token expired', 401);
|
||||||
|
}
|
||||||
|
const bookings = await bookingsKV.getAllItems();
|
||||||
|
const treatments = await treatmentsKV.getAllItems();
|
||||||
|
const icsContent = generateICSContent(bookings, treatments);
|
||||||
|
return c.text(icsContent, 200, {
|
||||||
|
"Content-Type": "text/calendar; charset=utf-8",
|
||||||
|
"Content-Disposition": "inline; filename=\"stargirlnails-termine.ics\"",
|
||||||
|
"Cache-Control": "no-cache, no-store, must-revalidate",
|
||||||
|
"Pragma": "no-cache",
|
||||||
|
"Expires": "0",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.error("CalDAV GET error:", error);
|
||||||
|
return c.text('Internal Server Error', 500);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// Fallback für andere CalDAV-Requests
|
||||||
|
caldavApp.all("*", async (c) => {
|
||||||
|
console.log(`CalDAV: Unhandled ${c.req.method} request to ${c.req.url}`);
|
||||||
|
return c.text('Not Found', 404);
|
||||||
|
});
|
||||||
28
server-dist/routes/client-entry.js
Normal file
28
server-dist/routes/client-entry.js
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
|
||||||
|
import { readFileSync } from "fs";
|
||||||
|
import { join } from "path";
|
||||||
|
export function clientEntry(c) {
|
||||||
|
let jsFile = "/src/client/main.tsx";
|
||||||
|
let cssFiles = null;
|
||||||
|
if (process.env.NODE_ENV === 'production') {
|
||||||
|
try {
|
||||||
|
// Read Vite manifest to get the correct file names
|
||||||
|
const manifestPath = join(process.cwd(), 'dist', '.vite', 'manifest.json');
|
||||||
|
const manifest = JSON.parse(readFileSync(manifestPath, 'utf-8'));
|
||||||
|
const entry = manifest['index.html'];
|
||||||
|
if (entry) {
|
||||||
|
jsFile = `/${entry.file}`;
|
||||||
|
if (entry.css) {
|
||||||
|
cssFiles = entry.css.map((css) => `/${css}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.warn('Could not read Vite manifest, using fallback:', error);
|
||||||
|
// Fallback to a generic path
|
||||||
|
jsFile = "/assets/index-Ccx6A0bN.js";
|
||||||
|
cssFiles = ["/assets/index-RdX4PbOO.css"];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return c.html(_jsxs("html", { lang: "en", children: [_jsxs("head", { children: [_jsx("meta", { charSet: "utf-8" }), _jsx("meta", { content: "width=device-width, initial-scale=1", name: "viewport" }), _jsx("title", { children: "Stargirlnails Kiel" }), _jsx("link", { rel: "icon", type: "image/png", href: "/favicon.png" }), cssFiles && cssFiles.map((css) => (_jsx("link", { rel: "stylesheet", href: css }, css))), process.env.NODE_ENV === 'production' ? (_jsx("script", { src: jsFile, type: "module" })) : (_jsxs(_Fragment, { children: [_jsx("script", { src: "/@vite/client", type: "module" }), _jsx("script", { src: jsFile, type: "module" })] }))] }), _jsx("body", { children: _jsx("div", { id: "root" }) })] }));
|
||||||
|
}
|
||||||
21
server-dist/routes/rpc.js
Normal file
21
server-dist/routes/rpc.js
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
import { RPCHandler } from "@orpc/server/fetch";
|
||||||
|
import { router } from "../rpc/index.js";
|
||||||
|
import { Hono } from "hono";
|
||||||
|
export const rpcApp = new Hono();
|
||||||
|
const handler = new RPCHandler(router);
|
||||||
|
rpcApp.all("/*", async (c) => {
|
||||||
|
try {
|
||||||
|
const { matched, response } = await handler.handle(c.req.raw, {
|
||||||
|
prefix: "/rpc",
|
||||||
|
});
|
||||||
|
if (matched) {
|
||||||
|
return c.newResponse(response.body, response);
|
||||||
|
}
|
||||||
|
return c.json({ error: "Not found" }, 404);
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.error("RPC Handler error:", error);
|
||||||
|
// Let oRPC handle errors properly
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
});
|
||||||
148
server-dist/rpc/auth.js
Normal file
148
server-dist/rpc/auth.js
Normal file
@@ -0,0 +1,148 @@
|
|||||||
|
import { os } from "@orpc/server";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { randomUUID } from "crypto";
|
||||||
|
import { createKV } from "../lib/create-kv.js";
|
||||||
|
import { config } from "dotenv";
|
||||||
|
// Load environment variables from .env file
|
||||||
|
config();
|
||||||
|
const UserSchema = z.object({
|
||||||
|
id: z.string(),
|
||||||
|
username: z.string().min(3, "Benutzername muss mindestens 3 Zeichen lang sein"),
|
||||||
|
email: z.string().email("Ungültige E-Mail-Adresse"),
|
||||||
|
passwordHash: z.string(),
|
||||||
|
role: z.enum(["customer", "owner"]),
|
||||||
|
createdAt: z.string(),
|
||||||
|
});
|
||||||
|
const SessionSchema = z.object({
|
||||||
|
id: z.string(),
|
||||||
|
userId: z.string(),
|
||||||
|
expiresAt: z.string(),
|
||||||
|
createdAt: z.string(),
|
||||||
|
});
|
||||||
|
const usersKV = createKV("users");
|
||||||
|
const sessionsKV = createKV("sessions");
|
||||||
|
// Simple password hashing (in production, use bcrypt or similar)
|
||||||
|
const hashPassword = (password) => {
|
||||||
|
return Buffer.from(password).toString('base64');
|
||||||
|
};
|
||||||
|
const verifyPassword = (password, hash) => {
|
||||||
|
return hashPassword(password) === hash;
|
||||||
|
};
|
||||||
|
// Export hashPassword for external use (e.g., generating hashes for .env)
|
||||||
|
export const generatePasswordHash = hashPassword;
|
||||||
|
// Initialize default owner account
|
||||||
|
const initializeOwner = async () => {
|
||||||
|
const existingUsers = await usersKV.getAllItems();
|
||||||
|
if (existingUsers.length === 0) {
|
||||||
|
const ownerId = randomUUID();
|
||||||
|
// Get admin credentials from environment variables
|
||||||
|
const adminUsername = process.env.ADMIN_USERNAME || "owner";
|
||||||
|
const adminPasswordHash = process.env.ADMIN_PASSWORD_HASH || hashPassword("admin123");
|
||||||
|
const adminEmail = process.env.ADMIN_EMAIL || "owner@stargirlnails.de";
|
||||||
|
const owner = {
|
||||||
|
id: ownerId,
|
||||||
|
username: adminUsername,
|
||||||
|
email: adminEmail,
|
||||||
|
passwordHash: adminPasswordHash,
|
||||||
|
role: "owner",
|
||||||
|
createdAt: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
await usersKV.setItem(ownerId, owner);
|
||||||
|
console.log(`✅ Admin account created: username="${adminUsername}", email="${adminEmail}"`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// Initialize on module load
|
||||||
|
initializeOwner();
|
||||||
|
const login = os
|
||||||
|
.input(z.object({
|
||||||
|
username: z.string(),
|
||||||
|
password: z.string(),
|
||||||
|
}))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
const users = await usersKV.getAllItems();
|
||||||
|
const user = users.find(u => u.username === input.username);
|
||||||
|
if (!user || !verifyPassword(input.password, user.passwordHash)) {
|
||||||
|
throw new Error("Invalid credentials");
|
||||||
|
}
|
||||||
|
// Create session
|
||||||
|
const sessionId = randomUUID();
|
||||||
|
const expiresAt = new Date();
|
||||||
|
expiresAt.setHours(expiresAt.getHours() + 24); // 24 hours
|
||||||
|
const session = {
|
||||||
|
id: sessionId,
|
||||||
|
userId: user.id,
|
||||||
|
expiresAt: expiresAt.toISOString(),
|
||||||
|
createdAt: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
await sessionsKV.setItem(sessionId, session);
|
||||||
|
return {
|
||||||
|
sessionId,
|
||||||
|
user: {
|
||||||
|
id: user.id,
|
||||||
|
username: user.username,
|
||||||
|
email: user.email,
|
||||||
|
role: user.role,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
});
|
||||||
|
const logout = os
|
||||||
|
.input(z.string()) // sessionId
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
await sessionsKV.removeItem(input);
|
||||||
|
return { success: true };
|
||||||
|
});
|
||||||
|
const verifySession = os
|
||||||
|
.input(z.string()) // sessionId
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
const session = await sessionsKV.getItem(input);
|
||||||
|
if (!session) {
|
||||||
|
throw new Error("Invalid session");
|
||||||
|
}
|
||||||
|
if (new Date(session.expiresAt) < new Date()) {
|
||||||
|
await sessionsKV.removeItem(input);
|
||||||
|
throw new Error("Session expired");
|
||||||
|
}
|
||||||
|
const user = await usersKV.getItem(session.userId);
|
||||||
|
if (!user) {
|
||||||
|
throw new Error("User not found");
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
user: {
|
||||||
|
id: user.id,
|
||||||
|
username: user.username,
|
||||||
|
email: user.email,
|
||||||
|
role: user.role,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
});
|
||||||
|
const changePassword = os
|
||||||
|
.input(z.object({
|
||||||
|
sessionId: z.string(),
|
||||||
|
currentPassword: z.string(),
|
||||||
|
newPassword: z.string(),
|
||||||
|
}))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
const session = await sessionsKV.getItem(input.sessionId);
|
||||||
|
if (!session) {
|
||||||
|
throw new Error("Invalid session");
|
||||||
|
}
|
||||||
|
const user = await usersKV.getItem(session.userId);
|
||||||
|
if (!user) {
|
||||||
|
throw new Error("User not found");
|
||||||
|
}
|
||||||
|
if (!verifyPassword(input.currentPassword, user.passwordHash)) {
|
||||||
|
throw new Error("Current password is incorrect");
|
||||||
|
}
|
||||||
|
const updatedUser = {
|
||||||
|
...user,
|
||||||
|
passwordHash: hashPassword(input.newPassword),
|
||||||
|
};
|
||||||
|
await usersKV.setItem(user.id, updatedUser);
|
||||||
|
return { success: true };
|
||||||
|
});
|
||||||
|
export const router = {
|
||||||
|
login,
|
||||||
|
logout,
|
||||||
|
verifySession,
|
||||||
|
changePassword,
|
||||||
|
};
|
||||||
748
server-dist/rpc/bookings.js
Normal file
748
server-dist/rpc/bookings.js
Normal file
@@ -0,0 +1,748 @@
|
|||||||
|
import { call, os } from "@orpc/server";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { randomUUID } from "crypto";
|
||||||
|
import { createKV } from "../lib/create-kv.js";
|
||||||
|
import { sendEmail, sendEmailWithAGBAndCalendar, sendEmailWithInspirationPhoto } from "../lib/email.js";
|
||||||
|
import { renderBookingPendingHTML, renderBookingConfirmedHTML, renderBookingCancelledHTML, renderAdminBookingNotificationHTML, renderBookingRescheduleProposalHTML, renderAdminRescheduleAcceptedHTML, renderAdminRescheduleDeclinedHTML } from "../lib/email-templates.js";
|
||||||
|
import { createORPCClient } from "@orpc/client";
|
||||||
|
import { RPCLink } from "@orpc/client/fetch";
|
||||||
|
import { checkBookingRateLimit } from "../lib/rate-limiter.js";
|
||||||
|
import { validateEmail } from "../lib/email-validator.js";
|
||||||
|
// Create a server-side client to call other RPC endpoints
|
||||||
|
const serverPort = process.env.PORT ? parseInt(process.env.PORT) : 3000;
|
||||||
|
const link = new RPCLink({ url: `http://localhost:${serverPort}/rpc` });
|
||||||
|
// Typisierung über any, um Build-Inkompatibilität mit NestedClient zu vermeiden (nur für interne Server-Calls)
|
||||||
|
const queryClient = createORPCClient(link);
|
||||||
|
// Helper function to convert date from yyyy-mm-dd to dd.mm.yyyy
|
||||||
|
function formatDateGerman(dateString) {
|
||||||
|
const [year, month, day] = dateString.split('-');
|
||||||
|
return `${day}.${month}.${year}`;
|
||||||
|
}
|
||||||
|
// Helper function to generate URLs from DOMAIN environment variable
|
||||||
|
function generateUrl(path = '') {
|
||||||
|
const domain = process.env.DOMAIN || 'localhost:5173';
|
||||||
|
const protocol = domain.includes('localhost') ? 'http' : 'https';
|
||||||
|
return `${protocol}://${domain}${path}`;
|
||||||
|
}
|
||||||
|
// Helper function to parse time string to minutes since midnight
|
||||||
|
function parseTime(timeStr) {
|
||||||
|
const [hours, minutes] = timeStr.split(':').map(Number);
|
||||||
|
return hours * 60 + minutes;
|
||||||
|
}
|
||||||
|
// Helper function to check if date is in time-off period
|
||||||
|
function isDateInTimeOffPeriod(date, periods) {
|
||||||
|
return periods.some(period => date >= period.startDate && date <= period.endDate);
|
||||||
|
}
|
||||||
|
// Helper function to validate booking time against recurring rules
|
||||||
|
async function validateBookingAgainstRules(date, time, treatmentDuration) {
|
||||||
|
// Parse date to get day of week
|
||||||
|
const [year, month, day] = date.split('-').map(Number);
|
||||||
|
const localDate = new Date(year, month - 1, day);
|
||||||
|
const dayOfWeek = localDate.getDay();
|
||||||
|
// Check time-off periods
|
||||||
|
const timeOffPeriods = await timeOffPeriodsKV.getAllItems();
|
||||||
|
if (isDateInTimeOffPeriod(date, timeOffPeriods)) {
|
||||||
|
throw new Error("Dieser Tag ist nicht verfügbar (Urlaubszeit).");
|
||||||
|
}
|
||||||
|
// Find matching recurring rules
|
||||||
|
const allRules = await recurringRulesKV.getAllItems();
|
||||||
|
const matchingRules = allRules.filter(rule => rule.isActive === true && rule.dayOfWeek === dayOfWeek);
|
||||||
|
if (matchingRules.length === 0) {
|
||||||
|
throw new Error("Für diesen Wochentag sind keine Termine verfügbar.");
|
||||||
|
}
|
||||||
|
// Check if booking time falls within any rule's time span
|
||||||
|
const bookingStartMinutes = parseTime(time);
|
||||||
|
const bookingEndMinutes = bookingStartMinutes + treatmentDuration;
|
||||||
|
const isWithinRules = matchingRules.some(rule => {
|
||||||
|
const ruleStartMinutes = parseTime(rule.startTime);
|
||||||
|
const ruleEndMinutes = parseTime(rule.endTime);
|
||||||
|
// Booking must start at or after rule start and end at or before rule end
|
||||||
|
return bookingStartMinutes >= ruleStartMinutes && bookingEndMinutes <= ruleEndMinutes;
|
||||||
|
});
|
||||||
|
if (!isWithinRules) {
|
||||||
|
throw new Error("Die gewählte Uhrzeit liegt außerhalb der verfügbaren Zeiten.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Helper function to check for booking conflicts
|
||||||
|
async function checkBookingConflicts(date, time, treatmentDuration, excludeBookingId) {
|
||||||
|
const allBookings = await kv.getAllItems();
|
||||||
|
const dateBookings = allBookings.filter(booking => booking.appointmentDate === date &&
|
||||||
|
['pending', 'confirmed', 'completed'].includes(booking.status) &&
|
||||||
|
booking.id !== excludeBookingId);
|
||||||
|
const bookingStartMinutes = parseTime(time);
|
||||||
|
const bookingEndMinutes = bookingStartMinutes + treatmentDuration;
|
||||||
|
// Cache treatment durations by ID to avoid N+1 lookups
|
||||||
|
const uniqueTreatmentIds = [...new Set(dateBookings.map(booking => booking.treatmentId))];
|
||||||
|
const treatmentDurationMap = new Map();
|
||||||
|
for (const treatmentId of uniqueTreatmentIds) {
|
||||||
|
const treatment = await treatmentsKV.getItem(treatmentId);
|
||||||
|
treatmentDurationMap.set(treatmentId, treatment?.duration || 60);
|
||||||
|
}
|
||||||
|
// Check for overlaps with existing bookings
|
||||||
|
for (const existingBooking of dateBookings) {
|
||||||
|
// Use cached duration or fallback to bookedDurationMinutes if available
|
||||||
|
let existingDuration = treatmentDurationMap.get(existingBooking.treatmentId) || 60;
|
||||||
|
if (existingBooking.bookedDurationMinutes) {
|
||||||
|
existingDuration = existingBooking.bookedDurationMinutes;
|
||||||
|
}
|
||||||
|
const existingStartMinutes = parseTime(existingBooking.appointmentTime);
|
||||||
|
const existingEndMinutes = existingStartMinutes + existingDuration;
|
||||||
|
// Check overlap: bookingStart < existingEnd && bookingEnd > existingStart
|
||||||
|
if (bookingStartMinutes < existingEndMinutes && bookingEndMinutes > existingStartMinutes) {
|
||||||
|
throw new Error("Dieser Zeitslot ist bereits gebucht. Bitte wähle eine andere Zeit.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const CreateBookingInputSchema = z.object({
|
||||||
|
treatmentId: z.string(),
|
||||||
|
customerName: z.string().min(2, "Name muss mindestens 2 Zeichen lang sein"),
|
||||||
|
customerEmail: z.string().email("Ungültige E-Mail-Adresse"),
|
||||||
|
customerPhone: z.string().min(5, "Telefonnummer muss mindestens 5 Zeichen lang sein").optional(),
|
||||||
|
appointmentDate: z.string(), // ISO date string
|
||||||
|
appointmentTime: z.string(), // HH:MM format
|
||||||
|
notes: z.string().optional(),
|
||||||
|
inspirationPhoto: z.string().optional(), // Base64 encoded image data
|
||||||
|
});
|
||||||
|
const BookingSchema = z.object({
|
||||||
|
id: z.string(),
|
||||||
|
treatmentId: z.string(),
|
||||||
|
customerName: z.string().min(2, "Name muss mindestens 2 Zeichen lang sein"),
|
||||||
|
customerEmail: z.string().email("Ungültige E-Mail-Adresse").optional(),
|
||||||
|
customerPhone: z.string().min(5, "Telefonnummer muss mindestens 5 Zeichen lang sein").optional(),
|
||||||
|
appointmentDate: z.string(), // ISO date string
|
||||||
|
appointmentTime: z.string(), // HH:MM format
|
||||||
|
status: z.enum(["pending", "confirmed", "cancelled", "completed"]),
|
||||||
|
notes: z.string().optional(),
|
||||||
|
inspirationPhoto: z.string().optional(), // Base64 encoded image data
|
||||||
|
bookedDurationMinutes: z.number().optional(), // Snapshot of treatment duration at booking time
|
||||||
|
createdAt: z.string(),
|
||||||
|
// DEPRECATED: slotId is no longer used for validation, kept for backward compatibility
|
||||||
|
slotId: z.string().optional(),
|
||||||
|
});
|
||||||
|
const kv = createKV("bookings");
|
||||||
|
const recurringRulesKV = createKV("recurringRules");
|
||||||
|
const timeOffPeriodsKV = createKV("timeOffPeriods");
|
||||||
|
const treatmentsKV = createKV("treatments");
|
||||||
|
const create = os
|
||||||
|
.input(CreateBookingInputSchema)
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
// console.log("Booking create called with input:", {
|
||||||
|
// ...input,
|
||||||
|
// inspirationPhoto: input.inspirationPhoto ? `[${input.inspirationPhoto.length} chars]` : null
|
||||||
|
// });
|
||||||
|
try {
|
||||||
|
// Rate limiting check (ohne IP, falls Context-Header im Build nicht verfügbar sind)
|
||||||
|
const rateLimitResult = checkBookingRateLimit({
|
||||||
|
ip: undefined,
|
||||||
|
email: input.customerEmail,
|
||||||
|
});
|
||||||
|
if (!rateLimitResult.allowed) {
|
||||||
|
const retryMinutes = rateLimitResult.retryAfterSeconds
|
||||||
|
? Math.ceil(rateLimitResult.retryAfterSeconds / 60)
|
||||||
|
: 10;
|
||||||
|
throw new Error(`Zu viele Buchungsanfragen. Bitte versuche es in ${retryMinutes} Minute${retryMinutes > 1 ? 'n' : ''} erneut.`);
|
||||||
|
}
|
||||||
|
// Email validation before slot reservation
|
||||||
|
console.log(`Validating email: ${input.customerEmail}`);
|
||||||
|
const emailValidation = await validateEmail(input.customerEmail);
|
||||||
|
console.log(`Email validation result:`, emailValidation);
|
||||||
|
if (!emailValidation.valid) {
|
||||||
|
console.log(`Email validation failed: ${emailValidation.reason}`);
|
||||||
|
throw new Error(emailValidation.reason || "Ungültige E-Mail-Adresse");
|
||||||
|
}
|
||||||
|
// Validate appointment time is on 15-minute grid
|
||||||
|
const appointmentMinutes = parseTime(input.appointmentTime);
|
||||||
|
if (appointmentMinutes % 15 !== 0) {
|
||||||
|
throw new Error("Termine müssen auf 15-Minuten-Raster ausgerichtet sein (z.B. 09:00, 09:15, 09:30, 09:45).");
|
||||||
|
}
|
||||||
|
// Validate that the booking is not in the past
|
||||||
|
const today = new Date().toISOString().split("T")[0]; // YYYY-MM-DD
|
||||||
|
if (input.appointmentDate < today) {
|
||||||
|
throw new Error("Buchungen für vergangene Termine sind nicht möglich.");
|
||||||
|
}
|
||||||
|
// For today's bookings, check if the time is not in the past
|
||||||
|
if (input.appointmentDate === today) {
|
||||||
|
const now = new Date();
|
||||||
|
const currentTime = `${String(now.getHours()).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}`;
|
||||||
|
if (input.appointmentTime <= currentTime) {
|
||||||
|
throw new Error("Buchungen für vergangene Uhrzeiten sind nicht möglich.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Prevent double booking: same customer email with pending/confirmed on same date
|
||||||
|
// Skip duplicate check when DISABLE_DUPLICATE_CHECK is set
|
||||||
|
if (!process.env.DISABLE_DUPLICATE_CHECK) {
|
||||||
|
const existing = await kv.getAllItems();
|
||||||
|
const hasConflict = existing.some(b => (b.customerEmail && b.customerEmail.toLowerCase() === input.customerEmail.toLowerCase()) &&
|
||||||
|
b.appointmentDate === input.appointmentDate &&
|
||||||
|
(b.status === "pending" || b.status === "confirmed"));
|
||||||
|
if (hasConflict) {
|
||||||
|
throw new Error("Du hast bereits eine Buchung für dieses Datum. Bitte wähle einen anderen Tag oder storniere zuerst.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Get treatment duration for validation
|
||||||
|
const treatment = await treatmentsKV.getItem(input.treatmentId);
|
||||||
|
if (!treatment) {
|
||||||
|
throw new Error("Behandlung nicht gefunden.");
|
||||||
|
}
|
||||||
|
// Validate booking time against recurring rules
|
||||||
|
await validateBookingAgainstRules(input.appointmentDate, input.appointmentTime, treatment.duration);
|
||||||
|
// Check for booking conflicts
|
||||||
|
await checkBookingConflicts(input.appointmentDate, input.appointmentTime, treatment.duration);
|
||||||
|
const id = randomUUID();
|
||||||
|
const booking = {
|
||||||
|
id,
|
||||||
|
...input,
|
||||||
|
bookedDurationMinutes: treatment.duration, // Snapshot treatment duration
|
||||||
|
status: "pending",
|
||||||
|
createdAt: new Date().toISOString()
|
||||||
|
};
|
||||||
|
// Save the booking
|
||||||
|
await kv.setItem(id, booking);
|
||||||
|
// Notify customer: request received (pending)
|
||||||
|
void (async () => {
|
||||||
|
// Create booking access token for status viewing
|
||||||
|
const bookingAccessToken = await queryClient.cancellation.createToken({ bookingId: id });
|
||||||
|
const bookingUrl = generateUrl(`/booking/${bookingAccessToken.token}`);
|
||||||
|
const formattedDate = formatDateGerman(input.appointmentDate);
|
||||||
|
const homepageUrl = generateUrl();
|
||||||
|
const html = await renderBookingPendingHTML({
|
||||||
|
name: input.customerName,
|
||||||
|
date: input.appointmentDate,
|
||||||
|
time: input.appointmentTime,
|
||||||
|
statusUrl: bookingUrl
|
||||||
|
});
|
||||||
|
await sendEmail({
|
||||||
|
to: input.customerEmail,
|
||||||
|
subject: "Deine Terminanfrage ist eingegangen",
|
||||||
|
text: `Hallo ${input.customerName},\n\nwir haben deine Anfrage für ${formattedDate} um ${input.appointmentTime} erhalten. Wir bestätigen deinen Termin in Kürze. Du erhältst eine weitere E-Mail, sobald der Termin bestätigt ist.\n\nTermin-Status ansehen: ${bookingUrl}\n\nRechtliche Informationen: ${generateUrl('/legal')}\nZur Website: ${homepageUrl}\n\nLiebe Grüße\nStargirlnails Kiel`,
|
||||||
|
html,
|
||||||
|
}).catch(() => { });
|
||||||
|
})();
|
||||||
|
// Notify admin: new booking request (with photo if available)
|
||||||
|
void (async () => {
|
||||||
|
if (!process.env.ADMIN_EMAIL)
|
||||||
|
return;
|
||||||
|
// Get treatment name from KV
|
||||||
|
const allTreatments = await treatmentsKV.getAllItems();
|
||||||
|
const treatment = allTreatments.find(t => t.id === input.treatmentId);
|
||||||
|
const treatmentName = treatment?.name || "Unbekannte Behandlung";
|
||||||
|
const adminHtml = await renderAdminBookingNotificationHTML({
|
||||||
|
name: input.customerName,
|
||||||
|
date: input.appointmentDate,
|
||||||
|
time: input.appointmentTime,
|
||||||
|
treatment: treatmentName,
|
||||||
|
phone: input.customerPhone || "Nicht angegeben",
|
||||||
|
notes: input.notes,
|
||||||
|
hasInspirationPhoto: !!input.inspirationPhoto
|
||||||
|
});
|
||||||
|
const homepageUrl = generateUrl();
|
||||||
|
const adminText = `Neue Buchungsanfrage eingegangen:\n\n` +
|
||||||
|
`Name: ${input.customerName}\n` +
|
||||||
|
`Telefon: ${input.customerPhone || "Nicht angegeben"}\n` +
|
||||||
|
`Behandlung: ${treatmentName}\n` +
|
||||||
|
`Datum: ${formatDateGerman(input.appointmentDate)}\n` +
|
||||||
|
`Uhrzeit: ${input.appointmentTime}\n` +
|
||||||
|
`${input.notes ? `Notizen: ${input.notes}\n` : ''}` +
|
||||||
|
`Inspiration-Foto: ${input.inspirationPhoto ? 'Im Anhang verfügbar' : 'Kein Foto hochgeladen'}\n\n` +
|
||||||
|
`Zur Website: ${homepageUrl}\n\n` +
|
||||||
|
`Bitte logge dich in das Admin-Panel ein, um die Buchung zu bearbeiten.`;
|
||||||
|
if (input.inspirationPhoto) {
|
||||||
|
await sendEmailWithInspirationPhoto({
|
||||||
|
to: process.env.ADMIN_EMAIL,
|
||||||
|
subject: `Neue Buchungsanfrage - ${input.customerName}`,
|
||||||
|
text: adminText,
|
||||||
|
html: adminHtml,
|
||||||
|
}, input.inspirationPhoto, input.customerName).catch(() => { });
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
await sendEmail({
|
||||||
|
to: process.env.ADMIN_EMAIL,
|
||||||
|
subject: `Neue Buchungsanfrage - ${input.customerName}`,
|
||||||
|
text: adminText,
|
||||||
|
html: adminHtml,
|
||||||
|
}).catch(() => { });
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
return booking;
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.error("Booking creation error:", error);
|
||||||
|
// Re-throw the error for oRPC to handle
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const sessionsKV = createKV("sessions");
|
||||||
|
const usersKV = createKV("users");
|
||||||
|
async function assertOwner(sessionId) {
|
||||||
|
const session = await sessionsKV.getItem(sessionId);
|
||||||
|
if (!session)
|
||||||
|
throw new Error("Invalid session");
|
||||||
|
if (new Date(session.expiresAt) < new Date())
|
||||||
|
throw new Error("Session expired");
|
||||||
|
const user = await usersKV.getItem(session.userId);
|
||||||
|
if (!user || user.role !== "owner")
|
||||||
|
throw new Error("Forbidden");
|
||||||
|
}
|
||||||
|
const updateStatus = os
|
||||||
|
.input(z.object({
|
||||||
|
sessionId: z.string(),
|
||||||
|
id: z.string(),
|
||||||
|
status: z.enum(["pending", "confirmed", "cancelled", "completed"])
|
||||||
|
}))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
const booking = await kv.getItem(input.id);
|
||||||
|
if (!booking)
|
||||||
|
throw new Error("Booking not found");
|
||||||
|
const previousStatus = booking.status;
|
||||||
|
const updatedBooking = { ...booking, status: input.status };
|
||||||
|
await kv.setItem(input.id, updatedBooking);
|
||||||
|
// Note: Slot state management removed - bookings now validated against recurring rules
|
||||||
|
// Email notifications on status changes
|
||||||
|
try {
|
||||||
|
if (input.status === "confirmed") {
|
||||||
|
// Create booking access token for this booking (status + cancellation)
|
||||||
|
const bookingAccessToken = await queryClient.cancellation.createToken({ bookingId: booking.id });
|
||||||
|
const formattedDate = formatDateGerman(booking.appointmentDate);
|
||||||
|
const bookingUrl = generateUrl(`/booking/${bookingAccessToken.token}`);
|
||||||
|
const homepageUrl = generateUrl();
|
||||||
|
const html = await renderBookingConfirmedHTML({
|
||||||
|
name: booking.customerName,
|
||||||
|
date: booking.appointmentDate,
|
||||||
|
time: booking.appointmentTime,
|
||||||
|
cancellationUrl: bookingUrl, // Now points to booking status page
|
||||||
|
reviewUrl: generateUrl(`/review/${bookingAccessToken.token}`)
|
||||||
|
});
|
||||||
|
// Get treatment information for ICS file
|
||||||
|
const allTreatments = await treatmentsKV.getAllItems();
|
||||||
|
const treatment = allTreatments.find(t => t.id === booking.treatmentId);
|
||||||
|
const treatmentName = treatment?.name || "Behandlung";
|
||||||
|
// Use bookedDurationMinutes if available, otherwise fallback to treatment duration
|
||||||
|
const treatmentDuration = booking.bookedDurationMinutes || treatment?.duration || 60;
|
||||||
|
if (booking.customerEmail) {
|
||||||
|
await sendEmailWithAGBAndCalendar({
|
||||||
|
to: booking.customerEmail,
|
||||||
|
subject: "Dein Termin wurde bestätigt - AGB im Anhang",
|
||||||
|
text: `Hallo ${booking.customerName},\n\nwir haben deinen Termin am ${formattedDate} um ${booking.appointmentTime} bestätigt.\n\nWichtiger Hinweis: Die Allgemeinen Geschäftsbedingungen (AGB) findest du im Anhang dieser E-Mail. Bitte lies sie vor deinem Termin durch.\n\nTermin-Status ansehen und verwalten: ${bookingUrl}\nFalls du den Termin stornieren möchtest, kannst du das über den obigen Link tun.\n\nRechtliche Informationen: ${generateUrl('/legal')}\nZur Website: ${homepageUrl}\n\nBis bald!\nStargirlnails Kiel`,
|
||||||
|
html,
|
||||||
|
bcc: process.env.ADMIN_EMAIL ? [process.env.ADMIN_EMAIL] : undefined,
|
||||||
|
}, {
|
||||||
|
date: booking.appointmentDate,
|
||||||
|
time: booking.appointmentTime,
|
||||||
|
durationMinutes: treatmentDuration,
|
||||||
|
customerName: booking.customerName,
|
||||||
|
treatmentName: treatmentName
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if (input.status === "cancelled") {
|
||||||
|
const formattedDate = formatDateGerman(booking.appointmentDate);
|
||||||
|
const homepageUrl = generateUrl();
|
||||||
|
const html = await renderBookingCancelledHTML({ name: booking.customerName, date: booking.appointmentDate, time: booking.appointmentTime });
|
||||||
|
if (booking.customerEmail) {
|
||||||
|
await sendEmail({
|
||||||
|
to: booking.customerEmail,
|
||||||
|
subject: "Dein Termin wurde abgesagt",
|
||||||
|
text: `Hallo ${booking.customerName},\n\nleider wurde dein Termin am ${formattedDate} um ${booking.appointmentTime} abgesagt. Bitte buche einen neuen Termin.\n\nRechtliche Informationen: ${generateUrl('/legal')}\nZur Website: ${homepageUrl}\n\nLiebe Grüße\nStargirlnails Kiel`,
|
||||||
|
html,
|
||||||
|
bcc: process.env.ADMIN_EMAIL ? [process.env.ADMIN_EMAIL] : undefined,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
catch (e) {
|
||||||
|
console.error("Email send failed:", e);
|
||||||
|
}
|
||||||
|
return updatedBooking;
|
||||||
|
});
|
||||||
|
const remove = os
|
||||||
|
.input(z.object({
|
||||||
|
sessionId: z.string(),
|
||||||
|
id: z.string(),
|
||||||
|
sendEmail: z.boolean().optional().default(false)
|
||||||
|
}))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
const booking = await kv.getItem(input.id);
|
||||||
|
if (!booking)
|
||||||
|
throw new Error("Booking not found");
|
||||||
|
// Guard against deletion of past bookings or completed bookings
|
||||||
|
const today = new Date().toISOString().split("T")[0];
|
||||||
|
const isPastDate = booking.appointmentDate < today;
|
||||||
|
const isCompleted = booking.status === 'completed';
|
||||||
|
if (isPastDate || isCompleted) {
|
||||||
|
// For past/completed bookings, disable email sending to avoid confusing customers
|
||||||
|
if (input.sendEmail) {
|
||||||
|
console.log(`Email sending disabled for past/completed booking ${input.id}`);
|
||||||
|
}
|
||||||
|
input.sendEmail = false;
|
||||||
|
}
|
||||||
|
const wasAlreadyCancelled = booking.status === 'cancelled';
|
||||||
|
const updatedBooking = { ...booking, status: "cancelled" };
|
||||||
|
await kv.setItem(input.id, updatedBooking);
|
||||||
|
if (input.sendEmail && !wasAlreadyCancelled && booking.customerEmail) {
|
||||||
|
try {
|
||||||
|
const formattedDate = formatDateGerman(booking.appointmentDate);
|
||||||
|
const homepageUrl = generateUrl();
|
||||||
|
const html = await renderBookingCancelledHTML({ name: booking.customerName, date: booking.appointmentDate, time: booking.appointmentTime });
|
||||||
|
await sendEmail({
|
||||||
|
to: booking.customerEmail,
|
||||||
|
subject: "Dein Termin wurde abgesagt",
|
||||||
|
text: `Hallo ${booking.customerName},\n\nleider wurde dein Termin am ${formattedDate} um ${booking.appointmentTime} abgesagt. Bitte buche einen neuen Termin.\n\nRechtliche Informationen: ${generateUrl('/legal')}\nZur Website: ${homepageUrl}\n\nLiebe Grüße\nStargirlnails Kiel`,
|
||||||
|
html,
|
||||||
|
bcc: process.env.ADMIN_EMAIL ? [process.env.ADMIN_EMAIL] : undefined,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
catch (e) {
|
||||||
|
console.error("Email send failed:", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return updatedBooking;
|
||||||
|
});
|
||||||
|
// Admin-only manual booking creation (immediately confirmed)
|
||||||
|
const createManual = os
|
||||||
|
.input(z.object({
|
||||||
|
sessionId: z.string(),
|
||||||
|
treatmentId: z.string(),
|
||||||
|
customerName: z.string().min(2, "Name muss mindestens 2 Zeichen lang sein"),
|
||||||
|
customerEmail: z.string().email("Ungültige E-Mail-Adresse").optional(),
|
||||||
|
customerPhone: z.string().min(5, "Telefonnummer muss mindestens 5 Zeichen lang sein").optional(),
|
||||||
|
appointmentDate: z.string(),
|
||||||
|
appointmentTime: z.string(),
|
||||||
|
notes: z.string().optional(),
|
||||||
|
}))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
// Admin authentication
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
// Validate appointment time is on 15-minute grid
|
||||||
|
const appointmentMinutes = parseTime(input.appointmentTime);
|
||||||
|
if (appointmentMinutes % 15 !== 0) {
|
||||||
|
throw new Error("Termine müssen auf 15-Minuten-Raster ausgerichtet sein (z.B. 09:00, 09:15, 09:30, 09:45).");
|
||||||
|
}
|
||||||
|
// Validate that the booking is not in the past
|
||||||
|
const today = new Date().toISOString().split("T")[0];
|
||||||
|
if (input.appointmentDate < today) {
|
||||||
|
throw new Error("Buchungen für vergangene Termine sind nicht möglich.");
|
||||||
|
}
|
||||||
|
// For today's bookings, check if the time is not in the past
|
||||||
|
if (input.appointmentDate === today) {
|
||||||
|
const now = new Date();
|
||||||
|
const currentTime = `${String(now.getHours()).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}`;
|
||||||
|
if (input.appointmentTime <= currentTime) {
|
||||||
|
throw new Error("Buchungen für vergangene Uhrzeiten sind nicht möglich.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Get treatment duration for validation
|
||||||
|
const treatment = await treatmentsKV.getItem(input.treatmentId);
|
||||||
|
if (!treatment) {
|
||||||
|
throw new Error("Behandlung nicht gefunden.");
|
||||||
|
}
|
||||||
|
// Validate booking time against recurring rules
|
||||||
|
await validateBookingAgainstRules(input.appointmentDate, input.appointmentTime, treatment.duration);
|
||||||
|
// Check for booking conflicts
|
||||||
|
await checkBookingConflicts(input.appointmentDate, input.appointmentTime, treatment.duration);
|
||||||
|
const id = randomUUID();
|
||||||
|
const booking = {
|
||||||
|
id,
|
||||||
|
treatmentId: input.treatmentId,
|
||||||
|
customerName: input.customerName,
|
||||||
|
customerEmail: input.customerEmail,
|
||||||
|
customerPhone: input.customerPhone,
|
||||||
|
appointmentDate: input.appointmentDate,
|
||||||
|
appointmentTime: input.appointmentTime,
|
||||||
|
notes: input.notes,
|
||||||
|
bookedDurationMinutes: treatment.duration,
|
||||||
|
status: "confirmed",
|
||||||
|
createdAt: new Date().toISOString()
|
||||||
|
};
|
||||||
|
// Save the booking
|
||||||
|
await kv.setItem(id, booking);
|
||||||
|
// Create booking access token for status viewing and cancellation (always create token)
|
||||||
|
const bookingAccessToken = await queryClient.cancellation.createToken({ bookingId: id });
|
||||||
|
// Send confirmation email if email is provided
|
||||||
|
if (input.customerEmail) {
|
||||||
|
void (async () => {
|
||||||
|
try {
|
||||||
|
const bookingUrl = generateUrl(`/booking/${bookingAccessToken.token}`);
|
||||||
|
const formattedDate = formatDateGerman(input.appointmentDate);
|
||||||
|
const homepageUrl = generateUrl();
|
||||||
|
const html = await renderBookingConfirmedHTML({
|
||||||
|
name: input.customerName,
|
||||||
|
date: input.appointmentDate,
|
||||||
|
time: input.appointmentTime,
|
||||||
|
cancellationUrl: bookingUrl,
|
||||||
|
reviewUrl: generateUrl(`/review/${bookingAccessToken.token}`)
|
||||||
|
});
|
||||||
|
await sendEmailWithAGBAndCalendar({
|
||||||
|
to: input.customerEmail,
|
||||||
|
subject: "Dein Termin wurde bestätigt - AGB im Anhang",
|
||||||
|
text: `Hallo ${input.customerName},\n\nwir haben deinen Termin am ${formattedDate} um ${input.appointmentTime} bestätigt.\n\nWichtiger Hinweis: Die Allgemeinen Geschäftsbedingungen (AGB) findest du im Anhang dieser E-Mail. Bitte lies sie vor deinem Termin durch.\n\nTermin-Status ansehen und verwalten: ${bookingUrl}\nFalls du den Termin stornieren möchtest, kannst du das über den obigen Link tun.\n\nRechtliche Informationen: ${generateUrl('/legal')}\nZur Website: ${homepageUrl}\n\nBis bald!\nStargirlnails Kiel`,
|
||||||
|
html,
|
||||||
|
}, {
|
||||||
|
date: input.appointmentDate,
|
||||||
|
time: input.appointmentTime,
|
||||||
|
durationMinutes: treatment.duration,
|
||||||
|
customerName: input.customerName,
|
||||||
|
treatmentName: treatment.name
|
||||||
|
});
|
||||||
|
}
|
||||||
|
catch (e) {
|
||||||
|
console.error("Email send failed for manual booking:", e);
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
}
|
||||||
|
// Optionally return the token in the RPC response for UI to copy/share (admin usage only)
|
||||||
|
return {
|
||||||
|
...booking,
|
||||||
|
bookingAccessToken: bookingAccessToken.token
|
||||||
|
};
|
||||||
|
});
|
||||||
|
const list = os.handler(async () => {
|
||||||
|
return kv.getAllItems();
|
||||||
|
});
|
||||||
|
const get = os.input(z.string()).handler(async ({ input }) => {
|
||||||
|
return kv.getItem(input);
|
||||||
|
});
|
||||||
|
const getByDate = os
|
||||||
|
.input(z.string()) // YYYY-MM-DD format
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
const allBookings = await kv.getAllItems();
|
||||||
|
return allBookings.filter(booking => booking.appointmentDate === input);
|
||||||
|
});
|
||||||
|
const live = {
|
||||||
|
list: os.handler(async function* ({ signal }) {
|
||||||
|
yield call(list, {}, { signal });
|
||||||
|
for await (const _ of kv.subscribe()) {
|
||||||
|
yield call(list, {}, { signal });
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
byDate: os
|
||||||
|
.input(z.string())
|
||||||
|
.handler(async function* ({ input, signal }) {
|
||||||
|
yield call(getByDate, input, { signal });
|
||||||
|
for await (const _ of kv.subscribe()) {
|
||||||
|
yield call(getByDate, input, { signal });
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
export const router = {
|
||||||
|
create,
|
||||||
|
createManual,
|
||||||
|
updateStatus,
|
||||||
|
remove,
|
||||||
|
list,
|
||||||
|
get,
|
||||||
|
getByDate,
|
||||||
|
live,
|
||||||
|
// Admin proposes a reschedule for a confirmed booking
|
||||||
|
proposeReschedule: os
|
||||||
|
.input(z.object({
|
||||||
|
sessionId: z.string(),
|
||||||
|
bookingId: z.string(),
|
||||||
|
proposedDate: z.string(),
|
||||||
|
proposedTime: z.string(),
|
||||||
|
}))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
const booking = await kv.getItem(input.bookingId);
|
||||||
|
if (!booking)
|
||||||
|
throw new Error("Booking not found");
|
||||||
|
if (booking.status !== "confirmed")
|
||||||
|
throw new Error("Nur bestätigte Termine können umgebucht werden.");
|
||||||
|
const treatment = await treatmentsKV.getItem(booking.treatmentId);
|
||||||
|
if (!treatment)
|
||||||
|
throw new Error("Behandlung nicht gefunden.");
|
||||||
|
// Validate grid and not in past
|
||||||
|
const appointmentMinutes = parseTime(input.proposedTime);
|
||||||
|
if (appointmentMinutes % 15 !== 0) {
|
||||||
|
throw new Error("Termine müssen auf 15-Minuten-Raster ausgerichtet sein (z.B. 09:00, 09:15, 09:30, 09:45).");
|
||||||
|
}
|
||||||
|
const today = new Date().toISOString().split("T")[0];
|
||||||
|
if (input.proposedDate < today) {
|
||||||
|
throw new Error("Buchungen für vergangene Termine sind nicht möglich.");
|
||||||
|
}
|
||||||
|
if (input.proposedDate === today) {
|
||||||
|
const now = new Date();
|
||||||
|
const currentTime = `${String(now.getHours()).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}`;
|
||||||
|
if (input.proposedTime <= currentTime) {
|
||||||
|
throw new Error("Buchungen für vergangene Uhrzeiten sind nicht möglich.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
await validateBookingAgainstRules(input.proposedDate, input.proposedTime, booking.bookedDurationMinutes || treatment.duration);
|
||||||
|
await checkBookingConflicts(input.proposedDate, input.proposedTime, booking.bookedDurationMinutes || treatment.duration, booking.id);
|
||||||
|
// Invalidate and create new reschedule token via cancellation router
|
||||||
|
const res = await queryClient.cancellation.createRescheduleToken({
|
||||||
|
bookingId: booking.id,
|
||||||
|
proposedDate: input.proposedDate,
|
||||||
|
proposedTime: input.proposedTime,
|
||||||
|
});
|
||||||
|
const acceptUrl = generateUrl(`/booking/${res.token}?action=accept`);
|
||||||
|
const declineUrl = generateUrl(`/booking/${res.token}?action=decline`);
|
||||||
|
// Send proposal email to customer
|
||||||
|
if (booking.customerEmail) {
|
||||||
|
const html = await renderBookingRescheduleProposalHTML({
|
||||||
|
name: booking.customerName,
|
||||||
|
originalDate: booking.appointmentDate,
|
||||||
|
originalTime: booking.appointmentTime,
|
||||||
|
proposedDate: input.proposedDate,
|
||||||
|
proposedTime: input.proposedTime,
|
||||||
|
treatmentName: (await treatmentsKV.getItem(booking.treatmentId))?.name || "Behandlung",
|
||||||
|
acceptUrl,
|
||||||
|
declineUrl,
|
||||||
|
expiresAt: res.expiresAt,
|
||||||
|
});
|
||||||
|
await sendEmail({
|
||||||
|
to: booking.customerEmail,
|
||||||
|
subject: "Vorschlag zur Terminänderung",
|
||||||
|
text: `Hallo ${booking.customerName}, wir schlagen vor, deinen Termin von ${formatDateGerman(booking.appointmentDate)} ${booking.appointmentTime} auf ${formatDateGerman(input.proposedDate)} ${input.proposedTime} zu verschieben. Akzeptieren: ${acceptUrl} | Ablehnen: ${declineUrl}`,
|
||||||
|
html,
|
||||||
|
bcc: process.env.ADMIN_EMAIL ? [process.env.ADMIN_EMAIL] : undefined,
|
||||||
|
}).catch(() => { });
|
||||||
|
}
|
||||||
|
return { success: true, token: res.token };
|
||||||
|
}),
|
||||||
|
// Customer accepts reschedule via token
|
||||||
|
acceptReschedule: os
|
||||||
|
.input(z.object({ token: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
const proposal = await queryClient.cancellation.getRescheduleProposal({ token: input.token });
|
||||||
|
const booking = await kv.getItem(proposal.booking.id);
|
||||||
|
if (!booking)
|
||||||
|
throw new Error("Booking not found");
|
||||||
|
if (booking.status !== "confirmed")
|
||||||
|
throw new Error("Buchung ist nicht mehr in bestätigtem Zustand.");
|
||||||
|
const treatment = await treatmentsKV.getItem(booking.treatmentId);
|
||||||
|
const duration = booking.bookedDurationMinutes || treatment?.duration || 60;
|
||||||
|
// Re-validate slot to ensure still available
|
||||||
|
await validateBookingAgainstRules(proposal.proposed.date, proposal.proposed.time, duration);
|
||||||
|
await checkBookingConflicts(proposal.proposed.date, proposal.proposed.time, duration, booking.id);
|
||||||
|
const updated = { ...booking, appointmentDate: proposal.proposed.date, appointmentTime: proposal.proposed.time };
|
||||||
|
await kv.setItem(updated.id, updated);
|
||||||
|
// Remove token
|
||||||
|
await queryClient.cancellation.removeRescheduleToken({ token: input.token });
|
||||||
|
// Send confirmation to customer (no BCC to avoid duplicate admin emails)
|
||||||
|
if (updated.customerEmail) {
|
||||||
|
const bookingAccessToken = await queryClient.cancellation.createToken({ bookingId: updated.id });
|
||||||
|
const html = await renderBookingConfirmedHTML({
|
||||||
|
name: updated.customerName,
|
||||||
|
date: updated.appointmentDate,
|
||||||
|
time: updated.appointmentTime,
|
||||||
|
cancellationUrl: generateUrl(`/booking/${bookingAccessToken.token}`),
|
||||||
|
reviewUrl: generateUrl(`/review/${bookingAccessToken.token}`),
|
||||||
|
});
|
||||||
|
await sendEmailWithAGBAndCalendar({
|
||||||
|
to: updated.customerEmail,
|
||||||
|
subject: "Terminänderung bestätigt",
|
||||||
|
text: `Hallo ${updated.customerName}, dein neuer Termin ist am ${formatDateGerman(updated.appointmentDate)} um ${updated.appointmentTime}.`,
|
||||||
|
html,
|
||||||
|
}, {
|
||||||
|
date: updated.appointmentDate,
|
||||||
|
time: updated.appointmentTime,
|
||||||
|
durationMinutes: duration,
|
||||||
|
customerName: updated.customerName,
|
||||||
|
treatmentName: (await treatmentsKV.getItem(updated.treatmentId))?.name || "Behandlung",
|
||||||
|
}).catch(() => { });
|
||||||
|
}
|
||||||
|
if (process.env.ADMIN_EMAIL) {
|
||||||
|
const adminHtml = await renderAdminRescheduleAcceptedHTML({
|
||||||
|
customerName: updated.customerName,
|
||||||
|
originalDate: proposal.original.date,
|
||||||
|
originalTime: proposal.original.time,
|
||||||
|
newDate: updated.appointmentDate,
|
||||||
|
newTime: updated.appointmentTime,
|
||||||
|
treatmentName: (await treatmentsKV.getItem(updated.treatmentId))?.name || "Behandlung",
|
||||||
|
});
|
||||||
|
await sendEmail({
|
||||||
|
to: process.env.ADMIN_EMAIL,
|
||||||
|
subject: `Reschedule akzeptiert - ${updated.customerName}`,
|
||||||
|
text: `Reschedule akzeptiert: ${updated.customerName} von ${formatDateGerman(proposal.original.date)} ${proposal.original.time} auf ${formatDateGerman(updated.appointmentDate)} ${updated.appointmentTime}.`,
|
||||||
|
html: adminHtml,
|
||||||
|
}).catch(() => { });
|
||||||
|
}
|
||||||
|
return { success: true, message: `Termin auf ${formatDateGerman(updated.appointmentDate)} um ${updated.appointmentTime} aktualisiert.` };
|
||||||
|
}),
|
||||||
|
// Customer declines reschedule via token
|
||||||
|
declineReschedule: os
|
||||||
|
.input(z.object({ token: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
const proposal = await queryClient.cancellation.getRescheduleProposal({ token: input.token });
|
||||||
|
const booking = await kv.getItem(proposal.booking.id);
|
||||||
|
if (!booking)
|
||||||
|
throw new Error("Booking not found");
|
||||||
|
// Remove token
|
||||||
|
await queryClient.cancellation.removeRescheduleToken({ token: input.token });
|
||||||
|
// Notify customer that original stays
|
||||||
|
if (booking.customerEmail) {
|
||||||
|
const bookingAccessToken = await queryClient.cancellation.createToken({ bookingId: booking.id });
|
||||||
|
await sendEmail({
|
||||||
|
to: booking.customerEmail,
|
||||||
|
subject: "Terminänderung abgelehnt",
|
||||||
|
text: `Du hast den Vorschlag zur Terminänderung abgelehnt. Dein ursprünglicher Termin am ${formatDateGerman(booking.appointmentDate)} um ${booking.appointmentTime} bleibt bestehen.`,
|
||||||
|
html: await renderBookingConfirmedHTML({ name: booking.customerName, date: booking.appointmentDate, time: booking.appointmentTime, cancellationUrl: generateUrl(`/booking/${bookingAccessToken.token}`), reviewUrl: generateUrl(`/review/${bookingAccessToken.token}`) }),
|
||||||
|
}).catch(() => { });
|
||||||
|
}
|
||||||
|
// Notify admin
|
||||||
|
if (process.env.ADMIN_EMAIL) {
|
||||||
|
const html = await renderAdminRescheduleDeclinedHTML({
|
||||||
|
customerName: booking.customerName,
|
||||||
|
originalDate: proposal.original.date,
|
||||||
|
originalTime: proposal.original.time,
|
||||||
|
proposedDate: proposal.proposed.date,
|
||||||
|
proposedTime: proposal.proposed.time,
|
||||||
|
treatmentName: (await treatmentsKV.getItem(booking.treatmentId))?.name || "Behandlung",
|
||||||
|
customerEmail: booking.customerEmail,
|
||||||
|
customerPhone: booking.customerPhone,
|
||||||
|
});
|
||||||
|
await sendEmail({
|
||||||
|
to: process.env.ADMIN_EMAIL,
|
||||||
|
subject: `Reschedule abgelehnt - ${booking.customerName}`,
|
||||||
|
text: `Abgelehnt: ${booking.customerName}. Ursprünglich: ${formatDateGerman(proposal.original.date)} ${proposal.original.time}. Vorschlag: ${formatDateGerman(proposal.proposed.date)} ${proposal.proposed.time}.`,
|
||||||
|
html,
|
||||||
|
}).catch(() => { });
|
||||||
|
}
|
||||||
|
return { success: true, message: "Du hast den Vorschlag abgelehnt. Dein ursprünglicher Termin bleibt bestehen." };
|
||||||
|
}),
|
||||||
|
// CalDAV Token für Admin generieren
|
||||||
|
generateCalDAVToken: os
|
||||||
|
.input(z.object({ sessionId: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
// Generiere einen sicheren Token für CalDAV-Zugriff
|
||||||
|
const token = randomUUID();
|
||||||
|
// Hole Session-Daten für Token-Erstellung
|
||||||
|
const session = await sessionsKV.getItem(input.sessionId);
|
||||||
|
if (!session)
|
||||||
|
throw new Error("Session nicht gefunden");
|
||||||
|
// Speichere Token mit Ablaufzeit (24 Stunden)
|
||||||
|
const tokenData = {
|
||||||
|
id: token,
|
||||||
|
sessionId: input.sessionId,
|
||||||
|
userId: session.userId, // Benötigt für Session-Typ
|
||||||
|
expiresAt: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(), // 24 Stunden
|
||||||
|
createdAt: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
// Verwende den sessionsKV Store für Token-Speicherung
|
||||||
|
await sessionsKV.setItem(token, tokenData);
|
||||||
|
const domain = process.env.DOMAIN || 'localhost:3000';
|
||||||
|
const protocol = domain.includes('localhost') ? 'http' : 'https';
|
||||||
|
const caldavUrl = `${protocol}://${domain}/caldav/calendar/events.ics?token=${token}`;
|
||||||
|
return {
|
||||||
|
token,
|
||||||
|
caldavUrl,
|
||||||
|
expiresAt: tokenData.expiresAt,
|
||||||
|
instructions: {
|
||||||
|
title: "CalDAV-Kalender abonnieren",
|
||||||
|
steps: [
|
||||||
|
"Kopiere die CalDAV-URL unten",
|
||||||
|
"Füge sie in deiner Kalender-App als Abonnement hinzu:",
|
||||||
|
"- Outlook: Datei → Konto hinzufügen → Internetkalender",
|
||||||
|
"- Google Calendar: Andere Kalender hinzufügen → Von URL",
|
||||||
|
"- Apple Calendar: Abonnement → Neue Abonnements",
|
||||||
|
"- Thunderbird: Kalender hinzufügen → Im Netzwerk",
|
||||||
|
"Der Kalender wird automatisch aktualisiert"
|
||||||
|
],
|
||||||
|
note: "Dieser Token ist 24 Stunden gültig. Bei Bedarf kannst du einen neuen Token generieren."
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
};
|
||||||
310
server-dist/rpc/cancellation.js
Normal file
310
server-dist/rpc/cancellation.js
Normal file
@@ -0,0 +1,310 @@
|
|||||||
|
import { os } from "@orpc/server";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { createKV } from "../lib/create-kv.js";
|
||||||
|
import { createKV as createAvailabilityKV } from "../lib/create-kv.js";
|
||||||
|
import { randomUUID } from "crypto";
|
||||||
|
// Schema for booking access token (used for both status viewing and cancellation)
|
||||||
|
const BookingAccessTokenSchema = z.object({
|
||||||
|
id: z.string(),
|
||||||
|
bookingId: z.string(),
|
||||||
|
token: z.string(),
|
||||||
|
expiresAt: z.string(),
|
||||||
|
createdAt: z.string(),
|
||||||
|
purpose: z.enum(["booking_access", "reschedule_proposal"]), // Extended for reschedule proposals
|
||||||
|
// Optional metadata for reschedule proposals
|
||||||
|
proposedDate: z.string().optional(),
|
||||||
|
proposedTime: z.string().optional(),
|
||||||
|
originalDate: z.string().optional(),
|
||||||
|
originalTime: z.string().optional(),
|
||||||
|
});
|
||||||
|
const cancellationKV = createKV("cancellation_tokens");
|
||||||
|
const bookingsKV = createKV("bookings");
|
||||||
|
const availabilityKV = createAvailabilityKV("availability");
|
||||||
|
// Helper function to convert date from yyyy-mm-dd to dd.mm.yyyy
|
||||||
|
function formatDateGerman(dateString) {
|
||||||
|
const [year, month, day] = dateString.split('-');
|
||||||
|
return `${day}.${month}.${year}`;
|
||||||
|
}
|
||||||
|
// Helper to invalidate all reschedule tokens for a specific booking
|
||||||
|
async function invalidateRescheduleTokensForBooking(bookingId) {
|
||||||
|
const tokens = await cancellationKV.getAllItems();
|
||||||
|
const related = tokens.filter(t => t.bookingId === bookingId && t.purpose === "reschedule_proposal");
|
||||||
|
for (const tok of related) {
|
||||||
|
await cancellationKV.removeItem(tok.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Create cancellation token for a booking
|
||||||
|
const createToken = os
|
||||||
|
.input(z.object({ bookingId: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
const booking = await bookingsKV.getItem(input.bookingId);
|
||||||
|
if (!booking) {
|
||||||
|
throw new Error("Booking not found");
|
||||||
|
}
|
||||||
|
if (booking.status === "cancelled") {
|
||||||
|
throw new Error("Booking is already cancelled");
|
||||||
|
}
|
||||||
|
// Create token that expires in 30 days
|
||||||
|
const expiresAt = new Date();
|
||||||
|
expiresAt.setDate(expiresAt.getDate() + 30);
|
||||||
|
const token = randomUUID();
|
||||||
|
const cancellationToken = {
|
||||||
|
id: randomUUID(),
|
||||||
|
bookingId: input.bookingId,
|
||||||
|
token,
|
||||||
|
expiresAt: expiresAt.toISOString(),
|
||||||
|
createdAt: new Date().toISOString(),
|
||||||
|
purpose: "booking_access",
|
||||||
|
};
|
||||||
|
await cancellationKV.setItem(cancellationToken.id, cancellationToken);
|
||||||
|
return { token, expiresAt: expiresAt.toISOString() };
|
||||||
|
});
|
||||||
|
// Get booking details by token
|
||||||
|
const getBookingByToken = os
|
||||||
|
.input(z.object({ token: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
const tokens = await cancellationKV.getAllItems();
|
||||||
|
const validToken = tokens.find(t => t.token === input.token &&
|
||||||
|
new Date(t.expiresAt) > new Date() &&
|
||||||
|
t.purpose === 'booking_access');
|
||||||
|
if (!validToken) {
|
||||||
|
throw new Error("Invalid or expired cancellation token");
|
||||||
|
}
|
||||||
|
const booking = await bookingsKV.getItem(validToken.bookingId);
|
||||||
|
if (!booking) {
|
||||||
|
throw new Error("Booking not found");
|
||||||
|
}
|
||||||
|
// Get treatment details
|
||||||
|
const treatmentsKV = createKV("treatments");
|
||||||
|
const treatment = await treatmentsKV.getItem(booking.treatmentId);
|
||||||
|
// Calculate if cancellation is still possible
|
||||||
|
const minStornoTimespan = parseInt(process.env.MIN_STORNO_TIMESPAN || "24");
|
||||||
|
const appointmentDateTime = new Date(`${booking.appointmentDate}T${booking.appointmentTime}:00`);
|
||||||
|
const now = new Date();
|
||||||
|
const timeDifferenceHours = (appointmentDateTime.getTime() - now.getTime()) / (1000 * 60 * 60);
|
||||||
|
const canCancel = timeDifferenceHours >= minStornoTimespan &&
|
||||||
|
booking.status !== "cancelled" &&
|
||||||
|
booking.status !== "completed";
|
||||||
|
return {
|
||||||
|
id: booking.id,
|
||||||
|
customerName: booking.customerName,
|
||||||
|
customerEmail: booking.customerEmail,
|
||||||
|
customerPhone: booking.customerPhone,
|
||||||
|
appointmentDate: booking.appointmentDate,
|
||||||
|
appointmentTime: booking.appointmentTime,
|
||||||
|
treatmentId: booking.treatmentId,
|
||||||
|
treatmentName: treatment?.name || "Unbekannte Behandlung",
|
||||||
|
treatmentDuration: treatment?.duration || 60,
|
||||||
|
treatmentPrice: treatment?.price || 0,
|
||||||
|
status: booking.status,
|
||||||
|
notes: booking.notes,
|
||||||
|
formattedDate: formatDateGerman(booking.appointmentDate),
|
||||||
|
createdAt: booking.createdAt,
|
||||||
|
canCancel,
|
||||||
|
hoursUntilAppointment: Math.max(0, Math.round(timeDifferenceHours)),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
// Cancel booking by token
|
||||||
|
const cancelByToken = os
|
||||||
|
.input(z.object({ token: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
const tokens = await cancellationKV.getAllItems();
|
||||||
|
const validToken = tokens.find(t => t.token === input.token &&
|
||||||
|
new Date(t.expiresAt) > new Date());
|
||||||
|
if (!validToken) {
|
||||||
|
throw new Error("Invalid or expired cancellation token");
|
||||||
|
}
|
||||||
|
const booking = await bookingsKV.getItem(validToken.bookingId);
|
||||||
|
if (!booking) {
|
||||||
|
throw new Error("Booking not found");
|
||||||
|
}
|
||||||
|
// Check if booking is already cancelled
|
||||||
|
if (booking.status === "cancelled") {
|
||||||
|
throw new Error("Booking is already cancelled");
|
||||||
|
}
|
||||||
|
// Check minimum cancellation timespan from environment variable
|
||||||
|
const minStornoTimespan = parseInt(process.env.MIN_STORNO_TIMESPAN || "24"); // Default: 24 hours
|
||||||
|
const appointmentDateTime = new Date(`${booking.appointmentDate}T${booking.appointmentTime}:00`);
|
||||||
|
const now = new Date();
|
||||||
|
const timeDifferenceHours = (appointmentDateTime.getTime() - now.getTime()) / (1000 * 60 * 60);
|
||||||
|
if (timeDifferenceHours < minStornoTimespan) {
|
||||||
|
throw new Error(`Stornierung ist nur bis ${minStornoTimespan} Stunden vor dem Termin möglich. Der Termin liegt nur noch ${Math.round(timeDifferenceHours)} Stunden in der Zukunft.`);
|
||||||
|
}
|
||||||
|
// Check if booking is in the past (additional safety check)
|
||||||
|
const today = new Date().toISOString().split("T")[0];
|
||||||
|
if (booking.appointmentDate < today) {
|
||||||
|
throw new Error("Cannot cancel past bookings");
|
||||||
|
}
|
||||||
|
// For today's bookings, check if the time is not in the past
|
||||||
|
if (booking.appointmentDate === today) {
|
||||||
|
const currentTime = `${String(now.getHours()).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}`;
|
||||||
|
if (booking.appointmentTime <= currentTime) {
|
||||||
|
throw new Error("Cannot cancel bookings that have already started");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Update booking status
|
||||||
|
const updatedBooking = { ...booking, status: "cancelled" };
|
||||||
|
await bookingsKV.setItem(booking.id, updatedBooking);
|
||||||
|
// Free the slot if it exists
|
||||||
|
if (booking.slotId) {
|
||||||
|
const slot = await availabilityKV.getItem(booking.slotId);
|
||||||
|
if (slot) {
|
||||||
|
const updatedSlot = {
|
||||||
|
...slot,
|
||||||
|
status: "free",
|
||||||
|
reservedByBookingId: undefined,
|
||||||
|
};
|
||||||
|
await availabilityKV.setItem(slot.id, updatedSlot);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Invalidate the token
|
||||||
|
await cancellationKV.removeItem(validToken.id);
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
message: "Booking cancelled successfully",
|
||||||
|
formattedDate: formatDateGerman(booking.appointmentDate),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
export const router = {
|
||||||
|
createToken,
|
||||||
|
getBookingByToken,
|
||||||
|
cancelByToken,
|
||||||
|
// Create a reschedule proposal token (48h expiry)
|
||||||
|
createRescheduleToken: os
|
||||||
|
.input(z.object({ bookingId: z.string(), proposedDate: z.string(), proposedTime: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
const booking = await bookingsKV.getItem(input.bookingId);
|
||||||
|
if (!booking) {
|
||||||
|
throw new Error("Booking not found");
|
||||||
|
}
|
||||||
|
if (booking.status === "cancelled" || booking.status === "completed") {
|
||||||
|
throw new Error("Reschedule not allowed for this booking");
|
||||||
|
}
|
||||||
|
// Invalidate existing reschedule proposals for this booking
|
||||||
|
await invalidateRescheduleTokensForBooking(input.bookingId);
|
||||||
|
// Create token that expires in 48 hours
|
||||||
|
const expiresAt = new Date();
|
||||||
|
expiresAt.setHours(expiresAt.getHours() + 48);
|
||||||
|
const token = randomUUID();
|
||||||
|
const rescheduleToken = {
|
||||||
|
id: randomUUID(),
|
||||||
|
bookingId: input.bookingId,
|
||||||
|
token,
|
||||||
|
expiresAt: expiresAt.toISOString(),
|
||||||
|
createdAt: new Date().toISOString(),
|
||||||
|
purpose: "reschedule_proposal",
|
||||||
|
proposedDate: input.proposedDate,
|
||||||
|
proposedTime: input.proposedTime,
|
||||||
|
originalDate: booking.appointmentDate,
|
||||||
|
originalTime: booking.appointmentTime,
|
||||||
|
};
|
||||||
|
await cancellationKV.setItem(rescheduleToken.id, rescheduleToken);
|
||||||
|
return { token, expiresAt: expiresAt.toISOString() };
|
||||||
|
}),
|
||||||
|
// Get reschedule proposal details by token
|
||||||
|
getRescheduleProposal: os
|
||||||
|
.input(z.object({ token: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
const tokens = await cancellationKV.getAllItems();
|
||||||
|
const proposal = tokens.find(t => t.token === input.token && t.purpose === "reschedule_proposal");
|
||||||
|
if (!proposal) {
|
||||||
|
throw new Error("Ungültiger Reschedule-Token");
|
||||||
|
}
|
||||||
|
const booking = await bookingsKV.getItem(proposal.bookingId);
|
||||||
|
if (!booking) {
|
||||||
|
throw new Error("Booking not found");
|
||||||
|
}
|
||||||
|
const treatmentsKV = createKV("treatments");
|
||||||
|
const treatment = await treatmentsKV.getItem(booking.treatmentId);
|
||||||
|
const now = new Date();
|
||||||
|
const isExpired = new Date(proposal.expiresAt) <= now;
|
||||||
|
const hoursUntilExpiry = isExpired ? 0 : Math.max(0, Math.round((new Date(proposal.expiresAt).getTime() - now.getTime()) / (1000 * 60 * 60)));
|
||||||
|
return {
|
||||||
|
booking: {
|
||||||
|
id: booking.id,
|
||||||
|
customerName: booking.customerName,
|
||||||
|
customerEmail: booking.customerEmail,
|
||||||
|
customerPhone: booking.customerPhone,
|
||||||
|
status: booking.status,
|
||||||
|
treatmentId: booking.treatmentId,
|
||||||
|
treatmentName: treatment?.name || "Unbekannte Behandlung",
|
||||||
|
},
|
||||||
|
original: {
|
||||||
|
date: proposal.originalDate || booking.appointmentDate,
|
||||||
|
time: proposal.originalTime || booking.appointmentTime,
|
||||||
|
},
|
||||||
|
proposed: {
|
||||||
|
date: proposal.proposedDate,
|
||||||
|
time: proposal.proposedTime,
|
||||||
|
},
|
||||||
|
expiresAt: proposal.expiresAt,
|
||||||
|
hoursUntilExpiry,
|
||||||
|
isExpired,
|
||||||
|
canRespond: booking.status === "confirmed" && !isExpired,
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
// Helper endpoint to remove a reschedule token by value (used after accept/decline)
|
||||||
|
removeRescheduleToken: os
|
||||||
|
.input(z.object({ token: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
const tokens = await cancellationKV.getAllItems();
|
||||||
|
const proposal = tokens.find(t => t.token === input.token && t.purpose === "reschedule_proposal");
|
||||||
|
if (proposal) {
|
||||||
|
await cancellationKV.removeItem(proposal.id);
|
||||||
|
}
|
||||||
|
return { success: true };
|
||||||
|
}),
|
||||||
|
// Clean up expired reschedule proposals and notify admin
|
||||||
|
sweepExpiredRescheduleProposals: os
|
||||||
|
.handler(async () => {
|
||||||
|
const tokens = await cancellationKV.getAllItems();
|
||||||
|
const now = new Date();
|
||||||
|
const expiredProposals = tokens.filter(t => t.purpose === "reschedule_proposal" &&
|
||||||
|
new Date(t.expiresAt) <= now);
|
||||||
|
if (expiredProposals.length === 0) {
|
||||||
|
return { success: true, expiredCount: 0 };
|
||||||
|
}
|
||||||
|
// Get booking details for each expired proposal
|
||||||
|
const expiredDetails = [];
|
||||||
|
for (const proposal of expiredProposals) {
|
||||||
|
const booking = await bookingsKV.getItem(proposal.bookingId);
|
||||||
|
if (booking) {
|
||||||
|
const treatmentsKV = createKV("treatments");
|
||||||
|
const treatment = await treatmentsKV.getItem(booking.treatmentId);
|
||||||
|
expiredDetails.push({
|
||||||
|
customerName: booking.customerName,
|
||||||
|
originalDate: proposal.originalDate || booking.appointmentDate,
|
||||||
|
originalTime: proposal.originalTime || booking.appointmentTime,
|
||||||
|
proposedDate: proposal.proposedDate,
|
||||||
|
proposedTime: proposal.proposedTime,
|
||||||
|
treatmentName: treatment?.name || "Unbekannte Behandlung",
|
||||||
|
customerEmail: booking.customerEmail,
|
||||||
|
customerPhone: booking.customerPhone,
|
||||||
|
expiredAt: proposal.expiresAt,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// Remove the expired token
|
||||||
|
await cancellationKV.removeItem(proposal.id);
|
||||||
|
}
|
||||||
|
// Notify admin if there are expired proposals
|
||||||
|
if (expiredDetails.length > 0 && process.env.ADMIN_EMAIL) {
|
||||||
|
try {
|
||||||
|
const { renderAdminRescheduleExpiredHTML } = await import("../lib/email-templates.js");
|
||||||
|
const { sendEmail } = await import("../lib/email.js");
|
||||||
|
const html = await renderAdminRescheduleExpiredHTML({
|
||||||
|
expiredProposals: expiredDetails,
|
||||||
|
});
|
||||||
|
await sendEmail({
|
||||||
|
to: process.env.ADMIN_EMAIL,
|
||||||
|
subject: `${expiredDetails.length} abgelaufene Terminänderungsvorschläge`,
|
||||||
|
text: `Es sind ${expiredDetails.length} Terminänderungsvorschläge abgelaufen. Details in der HTML-Version.`,
|
||||||
|
html,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.error("Failed to send admin notification for expired proposals:", error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return { success: true, expiredCount: expiredDetails.length };
|
||||||
|
}),
|
||||||
|
};
|
||||||
79
server-dist/rpc/demo/ai.js
Normal file
79
server-dist/rpc/demo/ai.js
Normal file
@@ -0,0 +1,79 @@
|
|||||||
|
import OpenAI from "openai";
|
||||||
|
import { os } from "@orpc/server";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { zodResponseFormat } from "../../lib/openai";
|
||||||
|
if (!process.env.OPENAI_BASE_URL) {
|
||||||
|
throw new Error("OPENAI_BASE_URL is not set");
|
||||||
|
}
|
||||||
|
if (!process.env.OPENAI_API_KEY) {
|
||||||
|
throw new Error("OPENAI_API_KEY is not set");
|
||||||
|
}
|
||||||
|
const openai = new OpenAI({
|
||||||
|
baseURL: process.env.OPENAI_BASE_URL,
|
||||||
|
apiKey: process.env.OPENAI_API_KEY,
|
||||||
|
});
|
||||||
|
if (!process.env.OPENAI_DEFAULT_MODEL) {
|
||||||
|
throw new Error("OPENAI_DEFAULT_MODEL is not set");
|
||||||
|
}
|
||||||
|
const DEFAULT_MODEL = process.env.OPENAI_DEFAULT_MODEL;
|
||||||
|
const ChatCompletionInputSchema = z.object({
|
||||||
|
message: z.string(),
|
||||||
|
systemPrompt: z.string().optional(),
|
||||||
|
});
|
||||||
|
const GeneratePersonInputSchema = z.object({
|
||||||
|
prompt: z.string(),
|
||||||
|
});
|
||||||
|
const complete = os
|
||||||
|
.input(ChatCompletionInputSchema)
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
const { message, systemPrompt } = input;
|
||||||
|
const completion = await openai.chat.completions.create({
|
||||||
|
model: DEFAULT_MODEL,
|
||||||
|
messages: [
|
||||||
|
...(systemPrompt
|
||||||
|
? [{ role: "system", content: systemPrompt }]
|
||||||
|
: []),
|
||||||
|
{ role: "user", content: message },
|
||||||
|
],
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
response: completion.choices[0]?.message?.content || "",
|
||||||
|
};
|
||||||
|
});
|
||||||
|
// Object generation schemas only support nullability, not optionality.
|
||||||
|
// Use .nullable() instead of .optional() for fields that may not have values.
|
||||||
|
const DemoSchema = z.object({
|
||||||
|
name: z.string().describe("The name of the person"),
|
||||||
|
age: z.number().describe("The age of the person"),
|
||||||
|
occupation: z.string().describe("The occupation of the person"),
|
||||||
|
bio: z.string().describe("The bio of the person"),
|
||||||
|
nickname: z
|
||||||
|
.string()
|
||||||
|
.nullable()
|
||||||
|
.describe("The person's nickname, if they have one"),
|
||||||
|
});
|
||||||
|
const generate = os
|
||||||
|
.input(GeneratePersonInputSchema)
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
const completion = await openai.chat.completions.parse({
|
||||||
|
model: DEFAULT_MODEL,
|
||||||
|
messages: [
|
||||||
|
{
|
||||||
|
role: "user",
|
||||||
|
content: `Generate a person based on this prompt: ${input.prompt}`,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
response_format: zodResponseFormat(DemoSchema, "person"),
|
||||||
|
});
|
||||||
|
const person = completion.choices[0]?.message?.parsed;
|
||||||
|
if (!person) {
|
||||||
|
throw new Error("No parsed data received from OpenAI");
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
person,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
export const router = {
|
||||||
|
complete,
|
||||||
|
generate,
|
||||||
|
};
|
||||||
4
server-dist/rpc/demo/index.js
Normal file
4
server-dist/rpc/demo/index.js
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
import { router as storageRouter } from "./storage.js";
|
||||||
|
export const demo = {
|
||||||
|
storage: storageRouter,
|
||||||
|
};
|
||||||
42
server-dist/rpc/demo/storage.js
Normal file
42
server-dist/rpc/demo/storage.js
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
import { call, os } from "@orpc/server";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { randomUUID } from "crypto";
|
||||||
|
import { createKV } from "../../lib/create-kv.js";
|
||||||
|
const DemoSchema = z.object({
|
||||||
|
id: z.string(),
|
||||||
|
value: z.string(),
|
||||||
|
});
|
||||||
|
// createKV provides simple key-value storage with publisher/subscriber support
|
||||||
|
// perfect for live queries and small amounts of data
|
||||||
|
const kv = createKV("demo");
|
||||||
|
// Handler with input validation using .input() and schema
|
||||||
|
const create = os
|
||||||
|
.input(DemoSchema.omit({ id: true }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
const id = randomUUID();
|
||||||
|
const item = { id, value: input.value };
|
||||||
|
await kv.setItem(id, item);
|
||||||
|
});
|
||||||
|
const remove = os.input(z.string()).handler(async ({ input }) => {
|
||||||
|
await kv.removeItem(input);
|
||||||
|
});
|
||||||
|
// Handler without input - returns all items
|
||||||
|
const list = os.handler(async () => {
|
||||||
|
return kv.getAllItems();
|
||||||
|
});
|
||||||
|
// Live data stream using generator function
|
||||||
|
// Yields initial data, then subscribes to changes for real-time updates
|
||||||
|
const live = {
|
||||||
|
list: os.handler(async function* ({ signal }) {
|
||||||
|
yield call(list, {}, { signal });
|
||||||
|
for await (const _ of kv.subscribe()) {
|
||||||
|
yield call(list, {}, { signal });
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
export const router = {
|
||||||
|
create,
|
||||||
|
remove,
|
||||||
|
list,
|
||||||
|
live,
|
||||||
|
};
|
||||||
131
server-dist/rpc/gallery.js
Normal file
131
server-dist/rpc/gallery.js
Normal file
@@ -0,0 +1,131 @@
|
|||||||
|
import { call, os } from "@orpc/server";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { randomUUID } from "crypto";
|
||||||
|
import { createKV } from "../lib/create-kv.js";
|
||||||
|
import { assertOwner } from "../lib/auth.js";
|
||||||
|
// Schema Definition
|
||||||
|
const GalleryPhotoSchema = z.object({
|
||||||
|
id: z.string(),
|
||||||
|
base64Data: z.string(),
|
||||||
|
title: z.string().optional().default(""),
|
||||||
|
order: z.number().int(),
|
||||||
|
createdAt: z.string(),
|
||||||
|
cover: z.boolean().optional().default(false),
|
||||||
|
});
|
||||||
|
// KV Storage
|
||||||
|
const galleryPhotosKV = createKV("galleryPhotos");
|
||||||
|
// Authentication centralized in ../lib/auth.ts
|
||||||
|
// CRUD Endpoints
|
||||||
|
const uploadPhoto = os
|
||||||
|
.input(z.object({
|
||||||
|
sessionId: z.string(),
|
||||||
|
base64Data: z
|
||||||
|
.string()
|
||||||
|
.regex(/^data:image\/(png|jpe?g|webp|gif);base64,/i, 'Unsupported image format'),
|
||||||
|
title: z.string().optional().default(""),
|
||||||
|
}))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
try {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
const id = randomUUID();
|
||||||
|
const existing = await galleryPhotosKV.getAllItems();
|
||||||
|
const maxOrder = existing.length > 0 ? Math.max(...existing.map((p) => p.order)) : -1;
|
||||||
|
const nextOrder = maxOrder + 1;
|
||||||
|
const photo = {
|
||||||
|
id,
|
||||||
|
base64Data: input.base64Data,
|
||||||
|
title: input.title ?? "",
|
||||||
|
order: nextOrder,
|
||||||
|
createdAt: new Date().toISOString(),
|
||||||
|
cover: false,
|
||||||
|
};
|
||||||
|
await galleryPhotosKV.setItem(id, photo);
|
||||||
|
return photo;
|
||||||
|
}
|
||||||
|
catch (err) {
|
||||||
|
console.error("gallery.uploadPhoto error", err);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const setCoverPhoto = os
|
||||||
|
.input(z.object({ sessionId: z.string(), id: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
const all = await galleryPhotosKV.getAllItems();
|
||||||
|
let updatedCover = null;
|
||||||
|
for (const p of all) {
|
||||||
|
const isCover = p.id === input.id;
|
||||||
|
const next = { ...p, cover: isCover };
|
||||||
|
await galleryPhotosKV.setItem(p.id, next);
|
||||||
|
if (isCover)
|
||||||
|
updatedCover = next;
|
||||||
|
}
|
||||||
|
return updatedCover;
|
||||||
|
});
|
||||||
|
const deletePhoto = os
|
||||||
|
.input(z.object({ sessionId: z.string(), id: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
await galleryPhotosKV.removeItem(input.id);
|
||||||
|
});
|
||||||
|
const updatePhotoOrder = os
|
||||||
|
.input(z.object({
|
||||||
|
sessionId: z.string(),
|
||||||
|
photoOrders: z.array(z.object({ id: z.string(), order: z.number().int() })),
|
||||||
|
}))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
const updated = [];
|
||||||
|
for (const { id, order } of input.photoOrders) {
|
||||||
|
const existing = await galleryPhotosKV.getItem(id);
|
||||||
|
if (!existing)
|
||||||
|
continue;
|
||||||
|
const updatedPhoto = { ...existing, order };
|
||||||
|
await galleryPhotosKV.setItem(id, updatedPhoto);
|
||||||
|
updated.push(updatedPhoto);
|
||||||
|
}
|
||||||
|
const all = await galleryPhotosKV.getAllItems();
|
||||||
|
return all.sort((a, b) => (a.order - b.order) || a.createdAt.localeCompare(b.createdAt) || a.id.localeCompare(b.id));
|
||||||
|
});
|
||||||
|
const listPhotos = os.handler(async () => {
|
||||||
|
const all = await galleryPhotosKV.getAllItems();
|
||||||
|
return all.sort((a, b) => (a.order - b.order) || a.createdAt.localeCompare(b.createdAt) || a.id.localeCompare(b.id));
|
||||||
|
});
|
||||||
|
const adminListPhotos = os
|
||||||
|
.input(z.object({ sessionId: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
const all = await galleryPhotosKV.getAllItems();
|
||||||
|
return all.sort((a, b) => (a.order - b.order) || a.createdAt.localeCompare(b.createdAt) || a.id.localeCompare(b.id));
|
||||||
|
});
|
||||||
|
// Live Queries
|
||||||
|
const live = {
|
||||||
|
listPhotos: os.handler(async function* ({ signal }) {
|
||||||
|
yield call(listPhotos, {}, { signal });
|
||||||
|
for await (const _ of galleryPhotosKV.subscribe()) {
|
||||||
|
yield call(listPhotos, {}, { signal });
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
adminListPhotos: os
|
||||||
|
.input(z.object({ sessionId: z.string() }))
|
||||||
|
.handler(async function* ({ input, signal }) {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
const all = await galleryPhotosKV.getAllItems();
|
||||||
|
const sorted = all.sort((a, b) => (a.order - b.order) || a.createdAt.localeCompare(b.createdAt) || a.id.localeCompare(b.id));
|
||||||
|
yield sorted;
|
||||||
|
for await (const _ of galleryPhotosKV.subscribe()) {
|
||||||
|
const updated = await galleryPhotosKV.getAllItems();
|
||||||
|
const sortedUpdated = updated.sort((a, b) => (a.order - b.order) || a.createdAt.localeCompare(b.createdAt) || a.id.localeCompare(b.id));
|
||||||
|
yield sortedUpdated;
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
export const router = {
|
||||||
|
uploadPhoto,
|
||||||
|
deletePhoto,
|
||||||
|
updatePhotoOrder,
|
||||||
|
listPhotos,
|
||||||
|
adminListPhotos,
|
||||||
|
setCoverPhoto,
|
||||||
|
live,
|
||||||
|
};
|
||||||
20
server-dist/rpc/index.js
Normal file
20
server-dist/rpc/index.js
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
import { demo } from "./demo/index.js";
|
||||||
|
import { router as treatments } from "./treatments.js";
|
||||||
|
import { router as bookings } from "./bookings.js";
|
||||||
|
import { router as auth } from "./auth.js";
|
||||||
|
import { router as recurringAvailability } from "./recurring-availability.js";
|
||||||
|
import { router as cancellation } from "./cancellation.js";
|
||||||
|
import { router as legal } from "./legal.js";
|
||||||
|
import { router as gallery } from "./gallery.js";
|
||||||
|
import { router as reviews } from "./reviews.js";
|
||||||
|
export const router = {
|
||||||
|
demo,
|
||||||
|
treatments,
|
||||||
|
bookings,
|
||||||
|
auth,
|
||||||
|
recurringAvailability,
|
||||||
|
cancellation,
|
||||||
|
legal,
|
||||||
|
gallery,
|
||||||
|
reviews,
|
||||||
|
};
|
||||||
16
server-dist/rpc/legal.js
Normal file
16
server-dist/rpc/legal.js
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import { os } from "@orpc/server";
|
||||||
|
import { getLegalConfig } from "../lib/legal-config.js";
|
||||||
|
export const router = {
|
||||||
|
getConfig: os.handler(async () => {
|
||||||
|
console.log("Legal getConfig called");
|
||||||
|
try {
|
||||||
|
const config = getLegalConfig();
|
||||||
|
console.log("Legal config:", config);
|
||||||
|
return config;
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.error("Legal config error:", error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
};
|
||||||
396
server-dist/rpc/recurring-availability.js
Normal file
396
server-dist/rpc/recurring-availability.js
Normal file
@@ -0,0 +1,396 @@
|
|||||||
|
import { call, os } from "@orpc/server";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { randomUUID } from "crypto";
|
||||||
|
import { createKV } from "../lib/create-kv.js";
|
||||||
|
import { assertOwner } from "../lib/auth.js";
|
||||||
|
// Datenmodelle
|
||||||
|
const RecurringRuleSchema = z.object({
|
||||||
|
id: z.string(),
|
||||||
|
dayOfWeek: z.number().int().min(0).max(6), // 0=Sonntag, 1=Montag, ..., 6=Samstag
|
||||||
|
startTime: z.string().regex(/^\d{2}:\d{2}$/), // HH:MM Format
|
||||||
|
endTime: z.string().regex(/^\d{2}:\d{2}$/), // HH:MM Format
|
||||||
|
isActive: z.boolean(),
|
||||||
|
createdAt: z.string(),
|
||||||
|
// LEGACY: slotDurationMinutes - deprecated field for generateSlots only, will be removed
|
||||||
|
slotDurationMinutes: z.number().int().min(1).optional(),
|
||||||
|
});
|
||||||
|
const TimeOffPeriodSchema = z.object({
|
||||||
|
id: z.string(),
|
||||||
|
startDate: z.string().regex(/^\d{4}-\d{2}-\d{2}$/), // YYYY-MM-DD
|
||||||
|
endDate: z.string().regex(/^\d{4}-\d{2}-\d{2}$/), // YYYY-MM-DD
|
||||||
|
reason: z.string(),
|
||||||
|
createdAt: z.string(),
|
||||||
|
});
|
||||||
|
// KV-Stores
|
||||||
|
const recurringRulesKV = createKV("recurringRules");
|
||||||
|
const timeOffPeriodsKV = createKV("timeOffPeriods");
|
||||||
|
// Import bookings and treatments KV stores for getAvailableTimes endpoint
|
||||||
|
const bookingsKV = createKV("bookings");
|
||||||
|
const treatmentsKV = createKV("treatments");
|
||||||
|
// Owner-Authentifizierung zentralisiert in ../lib/auth.ts
|
||||||
|
// Helper-Funktionen
|
||||||
|
function parseTime(timeStr) {
|
||||||
|
const [hours, minutes] = timeStr.split(':').map(Number);
|
||||||
|
return hours * 60 + minutes; // Minuten seit Mitternacht
|
||||||
|
}
|
||||||
|
function formatTime(minutes) {
|
||||||
|
const hours = Math.floor(minutes / 60);
|
||||||
|
const mins = minutes % 60;
|
||||||
|
return `${String(hours).padStart(2, '0')}:${String(mins).padStart(2, '0')}`;
|
||||||
|
}
|
||||||
|
function addDays(date, days) {
|
||||||
|
const result = new Date(date);
|
||||||
|
result.setDate(result.getDate() + days);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
function formatDate(date) {
|
||||||
|
return date.toISOString().split('T')[0];
|
||||||
|
}
|
||||||
|
function isDateInTimeOffPeriod(date, periods) {
|
||||||
|
return periods.some(period => date >= period.startDate && date <= period.endDate);
|
||||||
|
}
|
||||||
|
// Helper-Funktion zur Erkennung überlappender Regeln
|
||||||
|
function detectOverlappingRules(newRule, existingRules) {
|
||||||
|
const newStart = parseTime(newRule.startTime);
|
||||||
|
const newEnd = parseTime(newRule.endTime);
|
||||||
|
return existingRules.filter(rule => {
|
||||||
|
// Gleicher Wochentag und nicht dieselbe Regel (bei Updates)
|
||||||
|
if (rule.dayOfWeek !== newRule.dayOfWeek || rule.id === newRule.id) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const existingStart = parseTime(rule.startTime);
|
||||||
|
const existingEnd = parseTime(rule.endTime);
|
||||||
|
// Überlappung wenn: neue Startzeit < bestehende Endzeit UND neue Endzeit > bestehende Startzeit
|
||||||
|
return newStart < existingEnd && newEnd > existingStart;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// CRUD-Endpoints für Recurring Rules
|
||||||
|
const createRule = os
|
||||||
|
.input(z.object({
|
||||||
|
sessionId: z.string(),
|
||||||
|
dayOfWeek: z.number().int().min(0).max(6),
|
||||||
|
startTime: z.string().regex(/^\d{2}:\d{2}$/),
|
||||||
|
endTime: z.string().regex(/^\d{2}:\d{2}$/),
|
||||||
|
}).passthrough())
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
try {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
// Validierung: startTime < endTime
|
||||||
|
const startMinutes = parseTime(input.startTime);
|
||||||
|
const endMinutes = parseTime(input.endTime);
|
||||||
|
if (startMinutes >= endMinutes) {
|
||||||
|
throw new Error("Startzeit muss vor der Endzeit liegen.");
|
||||||
|
}
|
||||||
|
// Überlappungsprüfung
|
||||||
|
const allRules = await recurringRulesKV.getAllItems();
|
||||||
|
const overlappingRules = detectOverlappingRules(input, allRules);
|
||||||
|
if (overlappingRules.length > 0) {
|
||||||
|
const overlappingTimes = overlappingRules.map(rule => `${rule.startTime}-${rule.endTime}`).join(", ");
|
||||||
|
throw new Error(`Überlappung mit bestehenden Regeln erkannt: ${overlappingTimes}. Bitte Zeitfenster anpassen.`);
|
||||||
|
}
|
||||||
|
const id = randomUUID();
|
||||||
|
const rule = {
|
||||||
|
id,
|
||||||
|
dayOfWeek: input.dayOfWeek,
|
||||||
|
startTime: input.startTime,
|
||||||
|
endTime: input.endTime,
|
||||||
|
isActive: true,
|
||||||
|
createdAt: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
await recurringRulesKV.setItem(id, rule);
|
||||||
|
return rule;
|
||||||
|
}
|
||||||
|
catch (err) {
|
||||||
|
console.error("recurring-availability.createRule error", err);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const updateRule = os
|
||||||
|
.input(RecurringRuleSchema.extend({ sessionId: z.string() }).passthrough())
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
// Validierung: startTime < endTime
|
||||||
|
const startMinutes = parseTime(input.startTime);
|
||||||
|
const endMinutes = parseTime(input.endTime);
|
||||||
|
if (startMinutes >= endMinutes) {
|
||||||
|
throw new Error("Startzeit muss vor der Endzeit liegen.");
|
||||||
|
}
|
||||||
|
// Überlappungsprüfung
|
||||||
|
const allRules = await recurringRulesKV.getAllItems();
|
||||||
|
const overlappingRules = detectOverlappingRules(input, allRules);
|
||||||
|
if (overlappingRules.length > 0) {
|
||||||
|
const overlappingTimes = overlappingRules.map(rule => `${rule.startTime}-${rule.endTime}`).join(", ");
|
||||||
|
throw new Error(`Überlappung mit bestehenden Regeln erkannt: ${overlappingTimes}. Bitte Zeitfenster anpassen.`);
|
||||||
|
}
|
||||||
|
const { sessionId, ...rule } = input;
|
||||||
|
await recurringRulesKV.setItem(rule.id, rule);
|
||||||
|
return rule;
|
||||||
|
});
|
||||||
|
const deleteRule = os
|
||||||
|
.input(z.object({ sessionId: z.string(), id: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
await recurringRulesKV.removeItem(input.id);
|
||||||
|
});
|
||||||
|
const toggleRuleActive = os
|
||||||
|
.input(z.object({ sessionId: z.string(), id: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
const rule = await recurringRulesKV.getItem(input.id);
|
||||||
|
if (!rule)
|
||||||
|
throw new Error("Regel nicht gefunden.");
|
||||||
|
rule.isActive = !rule.isActive;
|
||||||
|
await recurringRulesKV.setItem(input.id, rule);
|
||||||
|
return rule;
|
||||||
|
});
|
||||||
|
const listRules = os.handler(async () => {
|
||||||
|
const allRules = await recurringRulesKV.getAllItems();
|
||||||
|
return allRules.sort((a, b) => {
|
||||||
|
if (a.dayOfWeek !== b.dayOfWeek)
|
||||||
|
return a.dayOfWeek - b.dayOfWeek;
|
||||||
|
return a.startTime.localeCompare(b.startTime);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
const adminListRules = os
|
||||||
|
.input(z.object({ sessionId: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
const allRules = await recurringRulesKV.getAllItems();
|
||||||
|
return allRules.sort((a, b) => {
|
||||||
|
if (a.dayOfWeek !== b.dayOfWeek)
|
||||||
|
return a.dayOfWeek - b.dayOfWeek;
|
||||||
|
return a.startTime.localeCompare(b.startTime);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// CRUD-Endpoints für Time-Off Periods
|
||||||
|
const createTimeOff = os
|
||||||
|
.input(z.object({
|
||||||
|
sessionId: z.string(),
|
||||||
|
startDate: z.string().regex(/^\d{4}-\d{2}-\d{2}$/),
|
||||||
|
endDate: z.string().regex(/^\d{4}-\d{2}-\d{2}$/),
|
||||||
|
reason: z.string(),
|
||||||
|
}))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
try {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
// Validierung: startDate <= endDate
|
||||||
|
if (input.startDate > input.endDate) {
|
||||||
|
throw new Error("Startdatum muss vor oder am Enddatum liegen.");
|
||||||
|
}
|
||||||
|
const id = randomUUID();
|
||||||
|
const timeOff = {
|
||||||
|
id,
|
||||||
|
startDate: input.startDate,
|
||||||
|
endDate: input.endDate,
|
||||||
|
reason: input.reason,
|
||||||
|
createdAt: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
await timeOffPeriodsKV.setItem(id, timeOff);
|
||||||
|
return timeOff;
|
||||||
|
}
|
||||||
|
catch (err) {
|
||||||
|
console.error("recurring-availability.createTimeOff error", err);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const updateTimeOff = os
|
||||||
|
.input(TimeOffPeriodSchema.extend({ sessionId: z.string() }).passthrough())
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
// Validierung: startDate <= endDate
|
||||||
|
if (input.startDate > input.endDate) {
|
||||||
|
throw new Error("Startdatum muss vor oder am Enddatum liegen.");
|
||||||
|
}
|
||||||
|
const { sessionId, ...timeOff } = input;
|
||||||
|
await timeOffPeriodsKV.setItem(timeOff.id, timeOff);
|
||||||
|
return timeOff;
|
||||||
|
});
|
||||||
|
const deleteTimeOff = os
|
||||||
|
.input(z.object({ sessionId: z.string(), id: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
await timeOffPeriodsKV.removeItem(input.id);
|
||||||
|
});
|
||||||
|
const listTimeOff = os.handler(async () => {
|
||||||
|
const allTimeOff = await timeOffPeriodsKV.getAllItems();
|
||||||
|
return allTimeOff.sort((a, b) => a.startDate.localeCompare(b.startDate));
|
||||||
|
});
|
||||||
|
const adminListTimeOff = os
|
||||||
|
.input(z.object({ sessionId: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
const allTimeOff = await timeOffPeriodsKV.getAllItems();
|
||||||
|
return allTimeOff.sort((a, b) => a.startDate.localeCompare(b.startDate));
|
||||||
|
});
|
||||||
|
// Get Available Times Endpoint
|
||||||
|
const getAvailableTimes = os
|
||||||
|
.input(z.object({
|
||||||
|
date: z.string().regex(/^\d{4}-\d{2}-\d{2}$/),
|
||||||
|
treatmentId: z.string(),
|
||||||
|
}))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
try {
|
||||||
|
// Validate that the date is not in the past
|
||||||
|
const today = new Date();
|
||||||
|
const inputDate = new Date(input.date);
|
||||||
|
today.setHours(0, 0, 0, 0);
|
||||||
|
inputDate.setHours(0, 0, 0, 0);
|
||||||
|
if (inputDate < today) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
// Get treatment duration
|
||||||
|
const treatment = await treatmentsKV.getItem(input.treatmentId);
|
||||||
|
if (!treatment) {
|
||||||
|
throw new Error("Behandlung nicht gefunden.");
|
||||||
|
}
|
||||||
|
const treatmentDuration = treatment.duration;
|
||||||
|
// Parse the date to get day of week
|
||||||
|
const [year, month, day] = input.date.split('-').map(Number);
|
||||||
|
const localDate = new Date(year, month - 1, day);
|
||||||
|
const dayOfWeek = localDate.getDay(); // 0=Sonntag, 1=Montag, ...
|
||||||
|
// Find matching recurring rules
|
||||||
|
const allRules = await recurringRulesKV.getAllItems();
|
||||||
|
const matchingRules = allRules.filter(rule => rule.isActive === true && rule.dayOfWeek === dayOfWeek);
|
||||||
|
if (matchingRules.length === 0) {
|
||||||
|
return []; // No rules for this day of week
|
||||||
|
}
|
||||||
|
// Check time-off periods
|
||||||
|
const timeOffPeriods = await timeOffPeriodsKV.getAllItems();
|
||||||
|
if (isDateInTimeOffPeriod(input.date, timeOffPeriods)) {
|
||||||
|
return []; // Date is blocked by time-off period
|
||||||
|
}
|
||||||
|
// Generate 15-minute intervals with boundary alignment
|
||||||
|
const availableTimes = [];
|
||||||
|
// Helper functions for 15-minute boundary alignment
|
||||||
|
const ceilTo15 = (m) => m % 15 === 0 ? m : m + (15 - (m % 15));
|
||||||
|
const floorTo15 = (m) => m - (m % 15);
|
||||||
|
for (const rule of matchingRules) {
|
||||||
|
const startMinutes = parseTime(rule.startTime);
|
||||||
|
const endMinutes = parseTime(rule.endTime);
|
||||||
|
let currentMinutes = ceilTo15(startMinutes);
|
||||||
|
const endBound = floorTo15(endMinutes);
|
||||||
|
while (currentMinutes + treatmentDuration <= endBound) {
|
||||||
|
const timeStr = formatTime(currentMinutes);
|
||||||
|
availableTimes.push(timeStr);
|
||||||
|
currentMinutes += 15; // 15-minute intervals
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Get all bookings for this date and their treatments
|
||||||
|
const allBookings = await bookingsKV.getAllItems();
|
||||||
|
const dateBookings = allBookings.filter(booking => booking.appointmentDate === input.date &&
|
||||||
|
['pending', 'confirmed', 'completed'].includes(booking.status));
|
||||||
|
// Optimize treatment duration lookup with Map caching
|
||||||
|
const uniqueTreatmentIds = [...new Set(dateBookings.map(booking => booking.treatmentId))];
|
||||||
|
const treatmentDurationMap = new Map();
|
||||||
|
for (const treatmentId of uniqueTreatmentIds) {
|
||||||
|
const treatment = await treatmentsKV.getItem(treatmentId);
|
||||||
|
treatmentDurationMap.set(treatmentId, treatment?.duration || 60);
|
||||||
|
}
|
||||||
|
// Get treatment durations for all bookings using the cached map
|
||||||
|
const bookingTreatments = new Map();
|
||||||
|
for (const booking of dateBookings) {
|
||||||
|
// Use bookedDurationMinutes if available, otherwise fallback to treatment duration
|
||||||
|
const duration = booking.bookedDurationMinutes || treatmentDurationMap.get(booking.treatmentId) || 60;
|
||||||
|
bookingTreatments.set(booking.id, duration);
|
||||||
|
}
|
||||||
|
// Filter out booking conflicts
|
||||||
|
const availableTimesFiltered = availableTimes.filter(slotTime => {
|
||||||
|
const slotStartMinutes = parseTime(slotTime);
|
||||||
|
const slotEndMinutes = slotStartMinutes + treatmentDuration;
|
||||||
|
// Check if this slot overlaps with any existing booking
|
||||||
|
const hasConflict = dateBookings.some(booking => {
|
||||||
|
const bookingStartMinutes = parseTime(booking.appointmentTime);
|
||||||
|
const bookingDuration = bookingTreatments.get(booking.id) || 60;
|
||||||
|
const bookingEndMinutes = bookingStartMinutes + bookingDuration;
|
||||||
|
// Check overlap: slotStart < bookingEnd && slotEnd > bookingStart
|
||||||
|
return slotStartMinutes < bookingEndMinutes && slotEndMinutes > bookingStartMinutes;
|
||||||
|
});
|
||||||
|
return !hasConflict;
|
||||||
|
});
|
||||||
|
// Filter out past times for today
|
||||||
|
const now = new Date();
|
||||||
|
const isToday = inputDate.getTime() === today.getTime();
|
||||||
|
const finalAvailableTimes = isToday
|
||||||
|
? availableTimesFiltered.filter(timeStr => {
|
||||||
|
const slotTime = parseTime(timeStr);
|
||||||
|
const currentTime = now.getHours() * 60 + now.getMinutes();
|
||||||
|
return slotTime > currentTime;
|
||||||
|
})
|
||||||
|
: availableTimesFiltered;
|
||||||
|
// Deduplicate and sort chronologically
|
||||||
|
const unique = Array.from(new Set(finalAvailableTimes));
|
||||||
|
return unique.sort((a, b) => a.localeCompare(b));
|
||||||
|
}
|
||||||
|
catch (err) {
|
||||||
|
console.error("recurring-availability.getAvailableTimes error", err);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// Live-Queries
|
||||||
|
const live = {
|
||||||
|
listRules: os.handler(async function* ({ signal }) {
|
||||||
|
yield call(listRules, {}, { signal });
|
||||||
|
for await (const _ of recurringRulesKV.subscribe()) {
|
||||||
|
yield call(listRules, {}, { signal });
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
listTimeOff: os.handler(async function* ({ signal }) {
|
||||||
|
yield call(listTimeOff, {}, { signal });
|
||||||
|
for await (const _ of timeOffPeriodsKV.subscribe()) {
|
||||||
|
yield call(listTimeOff, {}, { signal });
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
adminListRules: os
|
||||||
|
.input(z.object({ sessionId: z.string() }))
|
||||||
|
.handler(async function* ({ input, signal }) {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
const allRules = await recurringRulesKV.getAllItems();
|
||||||
|
const sortedRules = allRules.sort((a, b) => {
|
||||||
|
if (a.dayOfWeek !== b.dayOfWeek)
|
||||||
|
return a.dayOfWeek - b.dayOfWeek;
|
||||||
|
return a.startTime.localeCompare(b.startTime);
|
||||||
|
});
|
||||||
|
yield sortedRules;
|
||||||
|
for await (const _ of recurringRulesKV.subscribe()) {
|
||||||
|
const updatedRules = await recurringRulesKV.getAllItems();
|
||||||
|
const sortedUpdatedRules = updatedRules.sort((a, b) => {
|
||||||
|
if (a.dayOfWeek !== b.dayOfWeek)
|
||||||
|
return a.dayOfWeek - b.dayOfWeek;
|
||||||
|
return a.startTime.localeCompare(b.startTime);
|
||||||
|
});
|
||||||
|
yield sortedUpdatedRules;
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
adminListTimeOff: os
|
||||||
|
.input(z.object({ sessionId: z.string() }))
|
||||||
|
.handler(async function* ({ input, signal }) {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
const allTimeOff = await timeOffPeriodsKV.getAllItems();
|
||||||
|
const sortedTimeOff = allTimeOff.sort((a, b) => a.startDate.localeCompare(b.startDate));
|
||||||
|
yield sortedTimeOff;
|
||||||
|
for await (const _ of timeOffPeriodsKV.subscribe()) {
|
||||||
|
const updatedTimeOff = await timeOffPeriodsKV.getAllItems();
|
||||||
|
const sortedUpdatedTimeOff = updatedTimeOff.sort((a, b) => a.startDate.localeCompare(b.startDate));
|
||||||
|
yield sortedUpdatedTimeOff;
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
export const router = {
|
||||||
|
// Recurring Rules
|
||||||
|
createRule,
|
||||||
|
updateRule,
|
||||||
|
deleteRule,
|
||||||
|
toggleRuleActive,
|
||||||
|
listRules,
|
||||||
|
adminListRules,
|
||||||
|
// Time-Off Periods
|
||||||
|
createTimeOff,
|
||||||
|
updateTimeOff,
|
||||||
|
deleteTimeOff,
|
||||||
|
listTimeOff,
|
||||||
|
adminListTimeOff,
|
||||||
|
// Availability
|
||||||
|
getAvailableTimes,
|
||||||
|
// Live queries
|
||||||
|
live,
|
||||||
|
};
|
||||||
220
server-dist/rpc/reviews.js
Normal file
220
server-dist/rpc/reviews.js
Normal file
@@ -0,0 +1,220 @@
|
|||||||
|
import { call, os } from "@orpc/server";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { createKV } from "../lib/create-kv.js";
|
||||||
|
import { assertOwner, sessionsKV } from "../lib/auth.js";
|
||||||
|
// Schema Definition
|
||||||
|
const ReviewSchema = z.object({
|
||||||
|
id: z.string(),
|
||||||
|
bookingId: z.string(),
|
||||||
|
customerName: z.string().min(2, "Kundenname muss mindestens 2 Zeichen lang sein"),
|
||||||
|
customerEmail: z.string().email("Ungültige E-Mail-Adresse").optional(),
|
||||||
|
rating: z.number().int().min(1).max(5),
|
||||||
|
comment: z.string().min(10, "Kommentar muss mindestens 10 Zeichen lang sein"),
|
||||||
|
status: z.enum(["pending", "approved", "rejected"]),
|
||||||
|
createdAt: z.string(),
|
||||||
|
reviewedAt: z.string().optional(),
|
||||||
|
reviewedBy: z.string().optional(),
|
||||||
|
});
|
||||||
|
// KV Storage
|
||||||
|
const reviewsKV = createKV("reviews");
|
||||||
|
const cancellationKV = createKV("cancellation_tokens");
|
||||||
|
const bookingsKV = createKV("bookings");
|
||||||
|
// Helper Function: validateBookingToken
|
||||||
|
async function validateBookingToken(token) {
|
||||||
|
const tokens = await cancellationKV.getAllItems();
|
||||||
|
const validToken = tokens.find(t => t.token === token &&
|
||||||
|
new Date(t.expiresAt) > new Date() &&
|
||||||
|
t.purpose === 'booking_access');
|
||||||
|
if (!validToken) {
|
||||||
|
throw new Error("Ungültiger oder abgelaufener Buchungs-Token");
|
||||||
|
}
|
||||||
|
const booking = await bookingsKV.getItem(validToken.bookingId);
|
||||||
|
if (!booking) {
|
||||||
|
throw new Error("Buchung nicht gefunden");
|
||||||
|
}
|
||||||
|
// Only allow reviews for completed appointments
|
||||||
|
if (!(booking.status === "completed")) {
|
||||||
|
throw new Error("Bewertungen sind nur für abgeschlossene Termine möglich");
|
||||||
|
}
|
||||||
|
return booking;
|
||||||
|
}
|
||||||
|
// Public Endpoint: submitReview
|
||||||
|
const submitReview = os
|
||||||
|
.input(z.object({
|
||||||
|
bookingToken: z.string(),
|
||||||
|
rating: z.number().int().min(1).max(5),
|
||||||
|
comment: z.string().min(10, "Kommentar muss mindestens 10 Zeichen lang sein"),
|
||||||
|
}))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
try {
|
||||||
|
// Validate bookingToken
|
||||||
|
const booking = await validateBookingToken(input.bookingToken);
|
||||||
|
// Enforce uniqueness by using booking.id as the KV key
|
||||||
|
const existing = await reviewsKV.getItem(booking.id);
|
||||||
|
if (existing) {
|
||||||
|
throw new Error("Für diese Buchung wurde bereits eine Bewertung abgegeben");
|
||||||
|
}
|
||||||
|
// Create review object
|
||||||
|
const review = {
|
||||||
|
id: booking.id,
|
||||||
|
bookingId: booking.id,
|
||||||
|
customerName: booking.customerName,
|
||||||
|
customerEmail: booking.customerEmail,
|
||||||
|
rating: input.rating,
|
||||||
|
comment: input.comment,
|
||||||
|
status: "pending",
|
||||||
|
createdAt: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
await reviewsKV.setItem(booking.id, review);
|
||||||
|
return review;
|
||||||
|
}
|
||||||
|
catch (err) {
|
||||||
|
console.error("reviews.submitReview error", err);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// Admin Endpoint: approveReview
|
||||||
|
const approveReview = os
|
||||||
|
.input(z.object({ sessionId: z.string(), id: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
try {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
const review = await reviewsKV.getItem(input.id);
|
||||||
|
if (!review) {
|
||||||
|
throw new Error("Bewertung nicht gefunden");
|
||||||
|
}
|
||||||
|
const session = await sessionsKV.getItem(input.sessionId).catch(() => undefined);
|
||||||
|
const updatedReview = {
|
||||||
|
...review,
|
||||||
|
status: "approved",
|
||||||
|
reviewedAt: new Date().toISOString(),
|
||||||
|
reviewedBy: session?.userId || review.reviewedBy,
|
||||||
|
};
|
||||||
|
await reviewsKV.setItem(input.id, updatedReview);
|
||||||
|
return updatedReview;
|
||||||
|
}
|
||||||
|
catch (err) {
|
||||||
|
console.error("reviews.approveReview error", err);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// Admin Endpoint: rejectReview
|
||||||
|
const rejectReview = os
|
||||||
|
.input(z.object({ sessionId: z.string(), id: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
try {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
const review = await reviewsKV.getItem(input.id);
|
||||||
|
if (!review) {
|
||||||
|
throw new Error("Bewertung nicht gefunden");
|
||||||
|
}
|
||||||
|
const session = await sessionsKV.getItem(input.sessionId).catch(() => undefined);
|
||||||
|
const updatedReview = {
|
||||||
|
...review,
|
||||||
|
status: "rejected",
|
||||||
|
reviewedAt: new Date().toISOString(),
|
||||||
|
reviewedBy: session?.userId || review.reviewedBy,
|
||||||
|
};
|
||||||
|
await reviewsKV.setItem(input.id, updatedReview);
|
||||||
|
return updatedReview;
|
||||||
|
}
|
||||||
|
catch (err) {
|
||||||
|
console.error("reviews.rejectReview error", err);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// Admin Endpoint: deleteReview
|
||||||
|
const deleteReview = os
|
||||||
|
.input(z.object({ sessionId: z.string(), id: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
try {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
await reviewsKV.removeItem(input.id);
|
||||||
|
}
|
||||||
|
catch (err) {
|
||||||
|
console.error("reviews.deleteReview error", err);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// Public Endpoint: listPublishedReviews
|
||||||
|
const listPublishedReviews = os.handler(async () => {
|
||||||
|
try {
|
||||||
|
const allReviews = await reviewsKV.getAllItems();
|
||||||
|
const published = allReviews.filter(r => r.status === "approved");
|
||||||
|
const sorted = published.sort((a, b) => b.createdAt.localeCompare(a.createdAt));
|
||||||
|
const publicSafe = sorted.map(r => ({
|
||||||
|
customerName: r.customerName,
|
||||||
|
rating: r.rating,
|
||||||
|
comment: r.comment,
|
||||||
|
status: r.status,
|
||||||
|
bookingId: r.bookingId,
|
||||||
|
createdAt: r.createdAt,
|
||||||
|
}));
|
||||||
|
return publicSafe;
|
||||||
|
}
|
||||||
|
catch (err) {
|
||||||
|
console.error("reviews.listPublishedReviews error", err);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// Admin Endpoint: adminListReviews
|
||||||
|
const adminListReviews = os
|
||||||
|
.input(z.object({
|
||||||
|
sessionId: z.string(),
|
||||||
|
statusFilter: z.enum(["all", "pending", "approved", "rejected"]).optional().default("all"),
|
||||||
|
}))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
try {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
const allReviews = await reviewsKV.getAllItems();
|
||||||
|
const filtered = input.statusFilter === "all"
|
||||||
|
? allReviews
|
||||||
|
: allReviews.filter(r => r.status === input.statusFilter);
|
||||||
|
const sorted = filtered.sort((a, b) => b.createdAt.localeCompare(a.createdAt));
|
||||||
|
return sorted;
|
||||||
|
}
|
||||||
|
catch (err) {
|
||||||
|
console.error("reviews.adminListReviews error", err);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// Live Queries
|
||||||
|
const live = {
|
||||||
|
listPublishedReviews: os.handler(async function* ({ signal }) {
|
||||||
|
yield call(listPublishedReviews, {}, { signal });
|
||||||
|
for await (const _ of reviewsKV.subscribe()) {
|
||||||
|
yield call(listPublishedReviews, {}, { signal });
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
adminListReviews: os
|
||||||
|
.input(z.object({
|
||||||
|
sessionId: z.string(),
|
||||||
|
statusFilter: z.enum(["all", "pending", "approved", "rejected"]).optional().default("all"),
|
||||||
|
}))
|
||||||
|
.handler(async function* ({ input, signal }) {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
const allReviews = await reviewsKV.getAllItems();
|
||||||
|
const filtered = input.statusFilter === "all"
|
||||||
|
? allReviews
|
||||||
|
: allReviews.filter(r => r.status === input.statusFilter);
|
||||||
|
const sorted = filtered.sort((a, b) => b.createdAt.localeCompare(a.createdAt));
|
||||||
|
yield sorted;
|
||||||
|
for await (const _ of reviewsKV.subscribe()) {
|
||||||
|
const updated = await reviewsKV.getAllItems();
|
||||||
|
const filteredUpdated = input.statusFilter === "all"
|
||||||
|
? updated
|
||||||
|
: updated.filter(r => r.status === input.statusFilter);
|
||||||
|
const sortedUpdated = filteredUpdated.sort((a, b) => b.createdAt.localeCompare(a.createdAt));
|
||||||
|
yield sortedUpdated;
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
export const router = {
|
||||||
|
submitReview,
|
||||||
|
approveReview,
|
||||||
|
rejectReview,
|
||||||
|
deleteReview,
|
||||||
|
listPublishedReviews,
|
||||||
|
adminListReviews,
|
||||||
|
live,
|
||||||
|
};
|
||||||
52
server-dist/rpc/treatments.js
Normal file
52
server-dist/rpc/treatments.js
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
import { call, os } from "@orpc/server";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { randomUUID } from "crypto";
|
||||||
|
import { createKV } from "../lib/create-kv.js";
|
||||||
|
const TreatmentSchema = z.object({
|
||||||
|
id: z.string(),
|
||||||
|
name: z.string(),
|
||||||
|
description: z.string(),
|
||||||
|
duration: z.number(), // duration in minutes
|
||||||
|
price: z.number(), // price in cents
|
||||||
|
category: z.string(),
|
||||||
|
});
|
||||||
|
const kv = createKV("treatments");
|
||||||
|
const create = os
|
||||||
|
.input(TreatmentSchema.omit({ id: true }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
const id = randomUUID();
|
||||||
|
const treatment = { id, ...input };
|
||||||
|
await kv.setItem(id, treatment);
|
||||||
|
return treatment;
|
||||||
|
});
|
||||||
|
const update = os
|
||||||
|
.input(TreatmentSchema)
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
await kv.setItem(input.id, input);
|
||||||
|
return input;
|
||||||
|
});
|
||||||
|
const remove = os.input(z.string()).handler(async ({ input }) => {
|
||||||
|
await kv.removeItem(input);
|
||||||
|
});
|
||||||
|
const list = os.handler(async () => {
|
||||||
|
return kv.getAllItems();
|
||||||
|
});
|
||||||
|
const get = os.input(z.string()).handler(async ({ input }) => {
|
||||||
|
return kv.getItem(input);
|
||||||
|
});
|
||||||
|
const live = {
|
||||||
|
list: os.handler(async function* ({ signal }) {
|
||||||
|
yield call(list, {}, { signal });
|
||||||
|
for await (const _ of kv.subscribe()) {
|
||||||
|
yield call(list, {}, { signal });
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
export const router = {
|
||||||
|
create,
|
||||||
|
update,
|
||||||
|
remove,
|
||||||
|
list,
|
||||||
|
get,
|
||||||
|
live,
|
||||||
|
};
|
||||||
@@ -1,4 +1,6 @@
|
|||||||
import { useState } from "react";
|
import { useState, useEffect } from "react";
|
||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
import { queryClient } from "@/client/rpc-client";
|
||||||
import { useAuth } from "@/client/components/auth-provider";
|
import { useAuth } from "@/client/components/auth-provider";
|
||||||
import { LoginForm } from "@/client/components/login-form";
|
import { LoginForm } from "@/client/components/login-form";
|
||||||
import { UserProfile } from "@/client/components/user-profile";
|
import { UserProfile } from "@/client/components/user-profile";
|
||||||
@@ -8,19 +10,53 @@ import { AdminBookings } from "@/client/components/admin-bookings";
|
|||||||
import { AdminCalendar } from "@/client/components/admin-calendar";
|
import { AdminCalendar } from "@/client/components/admin-calendar";
|
||||||
import { InitialDataLoader } from "@/client/components/initial-data-loader";
|
import { InitialDataLoader } from "@/client/components/initial-data-loader";
|
||||||
import { AdminAvailability } from "@/client/components/admin-availability";
|
import { AdminAvailability } from "@/client/components/admin-availability";
|
||||||
|
import { AdminGallery } from "@/client/components/admin-gallery";
|
||||||
|
import { AdminReviews } from "@/client/components/admin-reviews";
|
||||||
import BookingStatusPage from "@/client/components/booking-status-page";
|
import BookingStatusPage from "@/client/components/booking-status-page";
|
||||||
|
import ReviewSubmissionPage from "@/client/components/review-submission-page";
|
||||||
import LegalPage from "@/client/components/legal-page";
|
import LegalPage from "@/client/components/legal-page";
|
||||||
|
import { ProfileLanding } from "@/client/components/profile-landing";
|
||||||
|
import { PWAInstallPrompt } from "@/client/components/pwa-install-prompt";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const { user, isLoading, isOwner } = useAuth();
|
const { user, isLoading, isOwner } = useAuth();
|
||||||
const [activeTab, setActiveTab] = useState<"booking" | "admin-treatments" | "admin-bookings" | "admin-calendar" | "admin-availability" | "profile" | "legal">("booking");
|
const [activeTab, setActiveTab] = useState<"profile-landing" | "booking" | "admin-treatments" | "admin-bookings" | "admin-calendar" | "admin-availability" | "admin-gallery" | "admin-reviews" | "profile" | "legal">("profile-landing");
|
||||||
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||||
|
|
||||||
|
const { data: socialMedia } = useQuery(
|
||||||
|
queryClient.social.getSocialMedia.queryOptions()
|
||||||
|
);
|
||||||
|
|
||||||
|
const hasSocialMedia = (socialMedia as any)?.tiktokProfile || (socialMedia as any)?.instagramProfile;
|
||||||
|
|
||||||
|
// Prevent background scroll when menu is open
|
||||||
|
useEffect(() => {
|
||||||
|
document.body.classList.toggle('overflow-hidden', isMobileMenuOpen);
|
||||||
|
return () => document.body.classList.remove('overflow-hidden');
|
||||||
|
}, [isMobileMenuOpen]);
|
||||||
|
|
||||||
// Handle booking status page
|
// Handle booking status page
|
||||||
const path = window.location.pathname;
|
const path = window.location.pathname;
|
||||||
|
const PwaPrompt = <PWAInstallPrompt />;
|
||||||
|
|
||||||
if (path.startsWith('/booking/')) {
|
if (path.startsWith('/booking/')) {
|
||||||
const token = path.split('/booking/')[1];
|
const token = path.split('/booking/')[1];
|
||||||
if (token) {
|
if (token) {
|
||||||
return <BookingStatusPage token={token} />;
|
return <>
|
||||||
|
{PwaPrompt}
|
||||||
|
<BookingStatusPage token={token} />
|
||||||
|
</>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle review submission page
|
||||||
|
if (path.startsWith('/review/')) {
|
||||||
|
const token = path.split('/review/')[1];
|
||||||
|
if (token) {
|
||||||
|
return <>
|
||||||
|
{PwaPrompt}
|
||||||
|
<ReviewSubmissionPage token={token} />
|
||||||
|
</>;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -41,7 +77,7 @@ function App() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Show login form if user is not authenticated and trying to access admin features
|
// Show login form if user is not authenticated and trying to access admin features
|
||||||
const needsAuth = !user && (activeTab === "admin-treatments" || activeTab === "admin-bookings" || activeTab === "admin-calendar" || activeTab === "admin-availability" || activeTab === "profile");
|
const needsAuth = !user && (activeTab === "admin-treatments" || activeTab === "admin-bookings" || activeTab === "admin-calendar" || activeTab === "admin-availability" || activeTab === "admin-gallery" || activeTab === "admin-reviews" || activeTab === "profile");
|
||||||
if (needsAuth) {
|
if (needsAuth) {
|
||||||
return <LoginForm />;
|
return <LoginForm />;
|
||||||
}
|
}
|
||||||
@@ -52,12 +88,15 @@ function App() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const tabs = [
|
const tabs = [
|
||||||
|
{ id: "profile-landing", label: "Startseite", icon: "🏠", requiresAuth: false },
|
||||||
{ id: "booking", label: "Termin buchen", icon: "📅", requiresAuth: false },
|
{ id: "booking", label: "Termin buchen", icon: "📅", requiresAuth: false },
|
||||||
{ id: "legal", label: "Impressum/Datenschutz", icon: "📋", requiresAuth: false },
|
{ id: "legal", label: "Impressum/Datenschutz", icon: "📋", requiresAuth: false },
|
||||||
{ id: "admin-treatments", label: "Behandlungen verwalten", icon: "💅", requiresAuth: true },
|
{ id: "admin-treatments", label: "Behandlungen verwalten", icon: "💅", requiresAuth: true },
|
||||||
{ id: "admin-bookings", label: "Buchungen verwalten", icon: "📋", requiresAuth: true },
|
{ id: "admin-bookings", label: "Buchungen verwalten", icon: "📋", requiresAuth: true },
|
||||||
{ id: "admin-calendar", label: "Kalender", icon: "📆", requiresAuth: true },
|
{ id: "admin-calendar", label: "Kalender", icon: "📆", requiresAuth: true },
|
||||||
{ id: "admin-availability", label: "Verfügbarkeiten", icon: "⏰", requiresAuth: true },
|
{ id: "admin-availability", label: "Verfügbarkeiten", icon: "⏰", requiresAuth: true },
|
||||||
|
{ id: "admin-gallery", label: "Photo-Wall", icon: "📸", requiresAuth: true },
|
||||||
|
{ id: "admin-reviews", label: "Bewertungen", icon: "⭐", requiresAuth: true },
|
||||||
...(user ? [{ id: "profile", label: "Profil", icon: "👤", requiresAuth: true }] : []),
|
...(user ? [{ id: "profile", label: "Profil", icon: "👤", requiresAuth: true }] : []),
|
||||||
] as const;
|
] as const;
|
||||||
|
|
||||||
@@ -71,7 +110,7 @@ function App() {
|
|||||||
<div className="flex justify-between items-center py-6">
|
<div className="flex justify-between items-center py-6">
|
||||||
<div
|
<div
|
||||||
className="flex items-center space-x-3 cursor-pointer hover:opacity-80 transition-opacity"
|
className="flex items-center space-x-3 cursor-pointer hover:opacity-80 transition-opacity"
|
||||||
onClick={() => setActiveTab("booking")}
|
onClick={() => setActiveTab("profile-landing")}
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src="/assets/stargilnails_logo_transparent_112.png"
|
src="/assets/stargilnails_logo_transparent_112.png"
|
||||||
@@ -84,11 +123,26 @@ function App() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Hamburger Button für Mobile */}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
aria-label="Menü öffnen"
|
||||||
|
aria-controls="mobile-menu"
|
||||||
|
aria-expanded={isMobileMenuOpen}
|
||||||
|
className="md:hidden p-2 -ml-2 text-3xl text-gray-700 hover:text-pink-600 transition-colors"
|
||||||
|
onClick={() => setIsMobileMenuOpen(true)}
|
||||||
|
>
|
||||||
|
☰
|
||||||
|
</button>
|
||||||
|
|
||||||
{user && (
|
{user && (
|
||||||
<div className="flex items-center space-x-4">
|
<div className="flex items-center space-x-4">
|
||||||
<span className="text-sm text-gray-600">
|
<span className="text-sm text-gray-600 hidden sm:inline">
|
||||||
Willkommen, {user.username}
|
Willkommen, {user.username}
|
||||||
</span>
|
</span>
|
||||||
|
<span className="text-sm text-gray-600 sm:hidden">
|
||||||
|
{user.username}
|
||||||
|
</span>
|
||||||
{isOwner && (
|
{isOwner && (
|
||||||
<span className="bg-pink-100 text-pink-800 px-2 py-1 rounded-full text-xs font-medium">
|
<span className="bg-pink-100 text-pink-800 px-2 py-1 rounded-full text-xs font-medium">
|
||||||
Inhaber
|
Inhaber
|
||||||
@@ -100,8 +154,8 @@ function App() {
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
{/* Navigation */}
|
{/* Desktop Navigation */}
|
||||||
<nav className="bg-white shadow-sm">
|
<nav className="bg-white shadow-sm hidden md:block">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div className="flex space-x-8">
|
<div className="flex space-x-8">
|
||||||
{tabs.map((tab) => {
|
{tabs.map((tab) => {
|
||||||
@@ -146,8 +200,82 @@ function App() {
|
|||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
{/* Mobile Backdrop */}
|
||||||
|
{isMobileMenuOpen && (
|
||||||
|
<div
|
||||||
|
className="fixed inset-0 bg-black/50 z-40 md:hidden"
|
||||||
|
onClick={() => setIsMobileMenuOpen(false)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Mobile Slide-in Panel */}
|
||||||
|
<div
|
||||||
|
id="mobile-menu"
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
aria-label="Navigation"
|
||||||
|
className={`fixed inset-y-0 left-0 w-64 bg-white shadow-xl z-50 md:hidden transform transition-transform duration-300 ease-in-out ${isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full'}`}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
aria-label="Menü schließen"
|
||||||
|
className="absolute top-4 right-4 text-2xl text-gray-600 hover:text-pink-600"
|
||||||
|
onClick={() => setIsMobileMenuOpen(false)}
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div className="p-6">
|
||||||
|
<img
|
||||||
|
src="/assets/stargilnails_logo_transparent_112.png"
|
||||||
|
alt="Stargil Nails Logo"
|
||||||
|
className="w-10 h-10 mb-6 object-contain"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<nav className="mt-2 flex flex-col space-y-2">
|
||||||
|
{tabs.map((tab) => {
|
||||||
|
// Hide admin tabs for non-owners
|
||||||
|
if (tab.requiresAuth && !isOwner && tab.id !== 'profile') return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={tab.id}
|
||||||
|
onClick={() => {
|
||||||
|
setActiveTab(tab.id as any);
|
||||||
|
setIsMobileMenuOpen(false);
|
||||||
|
}}
|
||||||
|
className={`flex items-center space-x-3 px-4 py-3 rounded-lg transition-colors ${
|
||||||
|
activeTab === tab.id ? 'bg-pink-100 text-pink-600' : 'text-gray-700 hover:bg-gray-100'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<span>{tab.icon}</span>
|
||||||
|
<span>{tab.label}</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
{!user && (
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setActiveTab('profile');
|
||||||
|
setIsMobileMenuOpen(false);
|
||||||
|
}}
|
||||||
|
className="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-700 hover:bg-gray-100 transition-colors"
|
||||||
|
>
|
||||||
|
<span>🔑</span>
|
||||||
|
<span>Inhaber Login</span>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Main Content */}
|
{/* Main Content */}
|
||||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||||
|
{activeTab === "profile-landing" && (
|
||||||
|
<ProfileLanding onNavigateToBooking={() => setActiveTab("booking")} />
|
||||||
|
)}
|
||||||
|
|
||||||
{activeTab === "booking" && (
|
{activeTab === "booking" && (
|
||||||
<div>
|
<div>
|
||||||
<div className="text-center mb-8">
|
<div className="text-center mb-8">
|
||||||
@@ -212,13 +340,41 @@ function App() {
|
|||||||
Verfügbarkeiten verwalten
|
Verfügbarkeiten verwalten
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-lg text-gray-600">
|
<p className="text-lg text-gray-600">
|
||||||
Lege freie Slots an und entferne sie bei Bedarf.
|
Verwalte wiederkehrende Zeiten und Urlaubszeiten.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<AdminAvailability />
|
<AdminAvailability />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{activeTab === "admin-gallery" && isOwner && (
|
||||||
|
<div>
|
||||||
|
<div className="text-center mb-8">
|
||||||
|
<h2 className="text-3xl font-bold text-gray-900 mb-4">
|
||||||
|
Photo-Wall verwalten
|
||||||
|
</h2>
|
||||||
|
<p className="text-lg text-gray-600">
|
||||||
|
Lade Fotos hoch und verwalte deine Galerie.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<AdminGallery />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{activeTab === "admin-reviews" && isOwner && (
|
||||||
|
<div>
|
||||||
|
<div className="text-center mb-8">
|
||||||
|
<h2 className="text-3xl font-bold text-gray-900 mb-4">
|
||||||
|
Bewertungen verwalten
|
||||||
|
</h2>
|
||||||
|
<p className="text-lg text-gray-600">
|
||||||
|
Prüfe und verwalte Kundenbewertungen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<AdminReviews />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{activeTab === "profile" && user && (
|
{activeTab === "profile" && user && (
|
||||||
<div>
|
<div>
|
||||||
<div className="text-center mb-8">
|
<div className="text-center mb-8">
|
||||||
@@ -234,11 +390,44 @@ function App() {
|
|||||||
)}
|
)}
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
{/* PWA Installation Prompt for iOS */}
|
||||||
|
<PWAInstallPrompt hidden={isMobileMenuOpen} />
|
||||||
|
|
||||||
{/* Footer */}
|
{/* Footer */}
|
||||||
<footer className="bg-white border-t border-pink-100 mt-16">
|
<footer className="bg-white border-t border-pink-100 mt-16">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||||
<div className="text-center text-gray-600">
|
<div className="text-center text-gray-600">
|
||||||
<p>© 2025 Stargirlnails Kiel. Professional nail design & care with 🩷 and passion in Kiel 🌇.</p>
|
<p className="mb-4">© 2025 Stargirlnails Kiel. Professional nail design & care with 🩷 and passion in Kiel 🌇.</p>
|
||||||
|
{hasSocialMedia && (
|
||||||
|
<div className="flex justify-center items-center gap-3 mt-4">
|
||||||
|
{(socialMedia as any)?.instagramProfile && (
|
||||||
|
<a
|
||||||
|
href={(socialMedia as any).instagramProfile}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-pink-600 hover:text-pink-700 transition-colors"
|
||||||
|
aria-label="Instagram"
|
||||||
|
>
|
||||||
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
{(socialMedia as any)?.tiktokProfile && (
|
||||||
|
<a
|
||||||
|
href={(socialMedia as any).tiktokProfile}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-gray-800 hover:text-gray-900 transition-colors"
|
||||||
|
aria-label="TikTok"
|
||||||
|
>
|
||||||
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|||||||
@@ -4,18 +4,33 @@ import { queryClient } from "@/client/rpc-client";
|
|||||||
|
|
||||||
export function AdminAvailability() {
|
export function AdminAvailability() {
|
||||||
const today = new Date().toISOString().split("T")[0];
|
const today = new Date().toISOString().split("T")[0];
|
||||||
const [selectedDate, setSelectedDate] = useState<string>(today);
|
|
||||||
const [time, setTime] = useState<string>("09:00");
|
// Tab-Navigation (Slots entfernt)
|
||||||
const [duration, setDuration] = useState<number>(30);
|
const [activeSubTab, setActiveSubTab] = useState<"recurring" | "timeoff">("recurring");
|
||||||
const [selectedTreatmentId, setSelectedTreatmentId] = useState<string>("");
|
|
||||||
const [slotType, setSlotType] = useState<"treatment" | "manual">("treatment");
|
// States für Recurring Rules
|
||||||
|
const [selectedDayOfWeek, setSelectedDayOfWeek] = useState<number>(1); // 1=Montag
|
||||||
const { data: allSlots, refetch: refetchSlots } = useQuery(
|
const [ruleStartTime, setRuleStartTime] = useState<string>("13:00");
|
||||||
queryClient.availability.live.list.experimental_liveOptions()
|
const [ruleEndTime, setRuleEndTime] = useState<string>("18:00");
|
||||||
|
const [editingRuleId, setEditingRuleId] = useState<string>("");
|
||||||
|
|
||||||
|
// States für Time-Off
|
||||||
|
const [timeOffStartDate, setTimeOffStartDate] = useState<string>("");
|
||||||
|
const [timeOffEndDate, setTimeOffEndDate] = useState<string>("");
|
||||||
|
const [timeOffReason, setTimeOffReason] = useState<string>("");
|
||||||
|
const [editingTimeOffId, setEditingTimeOffId] = useState<string>("");
|
||||||
|
|
||||||
|
|
||||||
|
// Neue Queries für wiederkehrende Verfügbarkeiten (mit Authentifizierung)
|
||||||
|
const { data: recurringRules, refetch: refetchRecurringRules } = useQuery(
|
||||||
|
queryClient.recurringAvailability.live.adminListRules.experimental_liveOptions({
|
||||||
|
input: { sessionId: localStorage.getItem("sessionId") || "" }
|
||||||
|
})
|
||||||
);
|
);
|
||||||
|
const { data: timeOffPeriods } = useQuery(
|
||||||
const { data: treatments } = useQuery(
|
queryClient.recurringAvailability.live.adminListTimeOff.experimental_liveOptions({
|
||||||
queryClient.treatments.live.list.experimental_liveOptions()
|
input: { sessionId: localStorage.getItem("sessionId") || "" }
|
||||||
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
const [errorMsg, setErrorMsg] = useState<string>("");
|
const [errorMsg, setErrorMsg] = useState<string>("");
|
||||||
@@ -36,333 +51,183 @@ export function AdminAvailability() {
|
|||||||
}
|
}
|
||||||
}, [successMsg]);
|
}, [successMsg]);
|
||||||
|
|
||||||
const { mutate: createSlot, isPending: isCreating } = useMutation(
|
// Neue Mutations für wiederkehrende Verfügbarkeiten
|
||||||
queryClient.availability.create.mutationOptions()
|
const { mutate: createRule } = useMutation(
|
||||||
|
queryClient.recurringAvailability.createRule.mutationOptions()
|
||||||
);
|
);
|
||||||
const { mutate: removeSlot } = useMutation(
|
const { mutate: updateRule } = useMutation(
|
||||||
queryClient.availability.remove.mutationOptions()
|
queryClient.recurringAvailability.updateRule.mutationOptions()
|
||||||
);
|
);
|
||||||
const { mutate: cleanupPastSlots } = useMutation(
|
const { mutate: deleteRule } = useMutation(
|
||||||
queryClient.availability.cleanupPastSlots.mutationOptions()
|
queryClient.recurringAvailability.deleteRule.mutationOptions()
|
||||||
|
);
|
||||||
|
const { mutate: toggleRuleActive } = useMutation(
|
||||||
|
queryClient.recurringAvailability.toggleRuleActive.mutationOptions()
|
||||||
|
);
|
||||||
|
const { mutate: createTimeOff } = useMutation(
|
||||||
|
queryClient.recurringAvailability.createTimeOff.mutationOptions()
|
||||||
|
);
|
||||||
|
const { mutate: updateTimeOff } = useMutation(
|
||||||
|
queryClient.recurringAvailability.updateTimeOff.mutationOptions()
|
||||||
|
);
|
||||||
|
const { mutate: deleteTimeOff } = useMutation(
|
||||||
|
queryClient.recurringAvailability.deleteTimeOff.mutationOptions()
|
||||||
);
|
);
|
||||||
|
|
||||||
// Auto-update duration when treatment is selected
|
|
||||||
useEffect(() => {
|
// Helper-Funktion für Wochentag-Namen
|
||||||
if (selectedTreatmentId && treatments) {
|
const getDayName = (dayOfWeek: number): string => {
|
||||||
const treatment = treatments.find(t => t.id === selectedTreatmentId);
|
const days = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];
|
||||||
if (treatment) {
|
return days[dayOfWeek];
|
||||||
setDuration(treatment.duration);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [selectedTreatmentId, treatments]);
|
|
||||||
|
|
||||||
// Get selected treatment details
|
|
||||||
const selectedTreatment = treatments?.find(t => t.id === selectedTreatmentId);
|
|
||||||
|
|
||||||
// Get treatment name for display
|
|
||||||
const getTreatmentName = (treatmentId: string) => {
|
|
||||||
return treatments?.find(t => t.id === treatmentId)?.name || "Unbekannte Behandlung";
|
|
||||||
};
|
|
||||||
|
|
||||||
const addSlot = () => {
|
|
||||||
setErrorMsg("");
|
|
||||||
setSuccessMsg("");
|
|
||||||
|
|
||||||
// Validation based on slot type
|
|
||||||
if (slotType === "treatment" && !selectedTreatmentId) {
|
|
||||||
setErrorMsg("Bitte eine Behandlung auswählen.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (!selectedDate || !time || !duration) {
|
|
||||||
setErrorMsg("Bitte Datum, Uhrzeit und Dauer angeben.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const sessionId = localStorage.getItem("sessionId") || "";
|
|
||||||
if (!sessionId) {
|
|
||||||
setErrorMsg("Nicht eingeloggt. Bitte als Inhaber anmelden.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
createSlot(
|
|
||||||
{ sessionId, date: selectedDate, time, durationMinutes: duration },
|
|
||||||
{
|
|
||||||
onSuccess: () => {
|
|
||||||
const slotDescription = slotType === "treatment"
|
|
||||||
? `${getTreatmentName(selectedTreatmentId)} (${duration} Min)`
|
|
||||||
: `Manueller Slot (${duration} Min)`;
|
|
||||||
setSuccessMsg(`${slotDescription} angelegt.`);
|
|
||||||
|
|
||||||
// Manually refetch slots to ensure live updates
|
|
||||||
refetchSlots();
|
|
||||||
|
|
||||||
// advance time by the duration of the slot
|
|
||||||
const [hStr, mStr] = time.split(":");
|
|
||||||
let h = parseInt(hStr, 10);
|
|
||||||
let m = parseInt(mStr, 10);
|
|
||||||
m += duration;
|
|
||||||
if (m >= 60) { h += Math.floor(m / 60); m = m % 60; }
|
|
||||||
if (h >= 24) { h = h % 24; }
|
|
||||||
const next = `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
|
|
||||||
setTime(next);
|
|
||||||
},
|
|
||||||
onError: (err: any) => {
|
|
||||||
const msg = (err && (err.message || (err as any).toString())) || "Fehler beim Anlegen.";
|
|
||||||
setErrorMsg(msg);
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="max-w-4xl mx-auto space-y-6">
|
<div className="max-w-4xl mx-auto space-y-6">
|
||||||
{/* Slot Type Selection */}
|
{/* Tab-Navigation (Slots entfernt) */}
|
||||||
<div className="bg-white rounded-lg shadow p-4">
|
|
||||||
<h3 className="text-lg font-semibold mb-4">Neuen Slot anlegen</h3>
|
|
||||||
|
|
||||||
<div className="flex flex-wrap gap-2 mb-4">
|
|
||||||
<button
|
|
||||||
onClick={() => setSlotType("treatment")}
|
|
||||||
className={`px-4 py-2 rounded-md font-medium transition-colors ${
|
|
||||||
slotType === "treatment"
|
|
||||||
? "bg-pink-600 text-white"
|
|
||||||
: "bg-gray-100 text-gray-700 hover:bg-gray-200"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
💅 Behandlungs-Slot
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setSlotType("manual")}
|
|
||||||
className={`px-4 py-2 rounded-md font-medium transition-colors ${
|
|
||||||
slotType === "manual"
|
|
||||||
? "bg-pink-600 text-white"
|
|
||||||
: "bg-gray-100 text-gray-700 hover:bg-gray-200"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
⚙️ Manueller Slot
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Datum
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="date"
|
|
||||||
value={selectedDate}
|
|
||||||
onChange={(e) => setSelectedDate(e.target.value)}
|
|
||||||
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-pink-500"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Startzeit
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="time"
|
|
||||||
value={time}
|
|
||||||
onChange={(e) => setTime(e.target.value)}
|
|
||||||
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-pink-500"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{slotType === "treatment" ? (
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Behandlung
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
value={selectedTreatmentId}
|
|
||||||
onChange={(e) => setSelectedTreatmentId(e.target.value)}
|
|
||||||
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-pink-500"
|
|
||||||
>
|
|
||||||
<option value="">Behandlung wählen...</option>
|
|
||||||
{treatments?.map((treatment) => (
|
|
||||||
<option key={treatment.id} value={treatment.id}>
|
|
||||||
{treatment.name} ({treatment.duration} Min)
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Dauer (Minuten)
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
min={5}
|
|
||||||
step={5}
|
|
||||||
value={duration}
|
|
||||||
onChange={(e) => setDuration(Number(e.target.value))}
|
|
||||||
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-pink-500"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex items-end">
|
|
||||||
<button
|
|
||||||
onClick={addSlot}
|
|
||||||
disabled={isCreating || (slotType === "treatment" && !selectedTreatmentId)}
|
|
||||||
className="w-full bg-pink-600 text-white px-4 py-2 rounded-md hover:bg-pink-700 disabled:bg-gray-400 disabled:cursor-not-allowed font-medium transition-colors"
|
|
||||||
>
|
|
||||||
{isCreating ? "Anlegen..." : "Slot hinzufügen"}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Treatment Info Display */}
|
|
||||||
{slotType === "treatment" && selectedTreatment && (
|
|
||||||
<div className="mt-4 p-3 bg-pink-50 rounded-md border border-pink-200">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<h4 className="font-medium text-pink-900">{selectedTreatment.name}</h4>
|
|
||||||
<p className="text-sm text-pink-700">{selectedTreatment.description}</p>
|
|
||||||
</div>
|
|
||||||
<div className="text-right">
|
|
||||||
<div className="text-lg font-semibold text-pink-900">
|
|
||||||
{(selectedTreatment.price / 100).toFixed(2)} €
|
|
||||||
</div>
|
|
||||||
<div className="text-sm text-pink-700">
|
|
||||||
{selectedTreatment.duration} Minuten
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{(errorMsg || successMsg) && (
|
|
||||||
<div className="fixed top-4 right-4 z-50 max-w-md">
|
|
||||||
{errorMsg && (
|
|
||||||
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg shadow-lg mb-2">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
|
||||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
|
|
||||||
</svg>
|
|
||||||
<span className="font-medium">Fehler:</span>
|
|
||||||
<span className="ml-1">{errorMsg}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{successMsg && (
|
|
||||||
<div className="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg shadow-lg">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
|
||||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
|
||||||
</svg>
|
|
||||||
<span className="font-medium">Erfolg:</span>
|
|
||||||
<span className="ml-1">{successMsg}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Quick Stats */}
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
||||||
<div className="bg-white rounded-lg shadow p-4">
|
|
||||||
<div className="text-2xl font-bold text-green-600">
|
|
||||||
{allSlots?.filter(s => s.status === "free").length || 0}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm text-gray-600">Freie Slots</div>
|
|
||||||
</div>
|
|
||||||
<div className="bg-white rounded-lg shadow p-4">
|
|
||||||
<div className="text-2xl font-bold text-yellow-600">
|
|
||||||
{allSlots?.filter(s => s.status === "reserved").length || 0}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm text-gray-600">Reservierte Slots</div>
|
|
||||||
</div>
|
|
||||||
<div className="bg-white rounded-lg shadow p-4">
|
|
||||||
<div className="text-2xl font-bold text-blue-600">
|
|
||||||
{allSlots?.length || 0}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm text-gray-600">Slots gesamt</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Cleanup Button */}
|
|
||||||
<div className="bg-white rounded-lg shadow p-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<h3 className="text-lg font-medium text-gray-900">Bereinigung</h3>
|
|
||||||
<p className="text-sm text-gray-600">Vergangene Slots automatisch löschen</p>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
const sessionId = localStorage.getItem("sessionId") || "";
|
|
||||||
if (!sessionId) {
|
|
||||||
setErrorMsg("Nicht eingeloggt. Bitte als Inhaber anmelden.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
cleanupPastSlots(
|
|
||||||
{ sessionId },
|
|
||||||
{
|
|
||||||
onSuccess: (result: any) => {
|
|
||||||
setSuccessMsg(result.message || "Bereinigung abgeschlossen.");
|
|
||||||
refetchSlots();
|
|
||||||
},
|
|
||||||
onError: (err: any) => {
|
|
||||||
setErrorMsg(err?.message || "Fehler bei der Bereinigung.");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
className="px-4 py-2 bg-orange-600 text-white rounded-md hover:bg-orange-700 transition-colors"
|
|
||||||
>
|
|
||||||
Vergangene Slots löschen
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* All Slots List */}
|
|
||||||
<div className="bg-white rounded-lg shadow">
|
<div className="bg-white rounded-lg shadow">
|
||||||
<div className="p-4 border-b">
|
<div className="border-b border-gray-200">
|
||||||
<h3 className="text-lg font-semibold">Alle Slots</h3>
|
<nav className="-mb-px flex space-x-8 px-6">
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveSubTab("recurring")}
|
||||||
|
className={`py-4 px-1 border-b-2 font-medium text-sm ${
|
||||||
|
activeSubTab === "recurring"
|
||||||
|
? "border-pink-500 text-pink-600"
|
||||||
|
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
🔄 Wiederkehrende Zeiten
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveSubTab("timeoff")}
|
||||||
|
className={`py-4 px-1 border-b-2 font-medium text-sm ${
|
||||||
|
activeSubTab === "timeoff"
|
||||||
|
? "border-pink-500 text-pink-600"
|
||||||
|
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
🏖️ Urlaubszeiten
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
<div className="divide-y">
|
</div>
|
||||||
{allSlots
|
|
||||||
?.sort((a, b) => (a.date === b.date ? a.time.localeCompare(b.time) : a.date.localeCompare(b.date)))
|
{/* Slot-Tab und Slot-UI entfernt */}
|
||||||
.map((slot) => {
|
|
||||||
// Try to find matching treatment based on duration
|
{/* Tab "Wiederkehrende Zeiten" */}
|
||||||
const matchingTreatments = treatments?.filter(t => t.duration === slot.durationMinutes) || [];
|
{activeSubTab === "recurring" && (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Neue Regel erstellen */}
|
||||||
|
<div className="bg-white rounded-lg shadow p-4">
|
||||||
|
<h3 className="text-lg font-semibold mb-4">Neue wiederkehrende Regel erstellen</h3>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Wochentag
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={selectedDayOfWeek}
|
||||||
|
onChange={(e) => setSelectedDayOfWeek(Number(e.target.value))}
|
||||||
|
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-pink-500"
|
||||||
|
>
|
||||||
|
<option value={1}>Montag</option>
|
||||||
|
<option value={2}>Dienstag</option>
|
||||||
|
<option value={3}>Mittwoch</option>
|
||||||
|
<option value={4}>Donnerstag</option>
|
||||||
|
<option value={5}>Freitag</option>
|
||||||
|
<option value={6}>Samstag</option>
|
||||||
|
<option value={0}>Sonntag</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
return (
|
<div>
|
||||||
<div key={slot.id} className="p-4 hover:bg-gray-50 transition-colors">
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Startzeit
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="time"
|
||||||
|
value={ruleStartTime}
|
||||||
|
onChange={(e) => setRuleStartTime(e.target.value)}
|
||||||
|
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-pink-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Endzeit
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="time"
|
||||||
|
value={ruleEndTime}
|
||||||
|
onChange={(e) => setRuleEndTime(e.target.value)}
|
||||||
|
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-pink-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4">
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setErrorMsg("");
|
||||||
|
setSuccessMsg("");
|
||||||
|
|
||||||
|
if (ruleStartTime >= ruleEndTime) {
|
||||||
|
setErrorMsg("Startzeit muss vor der Endzeit liegen.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const sessionId = localStorage.getItem("sessionId") || "";
|
||||||
|
if (!sessionId) {
|
||||||
|
setErrorMsg("Nicht eingeloggt. Bitte als Inhaber anmelden.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
createRule(
|
||||||
|
{ sessionId, dayOfWeek: selectedDayOfWeek, startTime: ruleStartTime, endTime: ruleEndTime },
|
||||||
|
{
|
||||||
|
onSuccess: () => {
|
||||||
|
setSuccessMsg(`Regel für ${getDayName(selectedDayOfWeek)} erstellt.`);
|
||||||
|
// Sofort aktualisieren (zusätzlich zur Live-Subscription), damit Nutzer den Eintrag direkt sieht
|
||||||
|
refetchRecurringRules();
|
||||||
|
},
|
||||||
|
onError: (err: any) => {
|
||||||
|
setErrorMsg(err?.message || "Fehler beim Erstellen der Regel.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
className="bg-pink-600 text-white px-4 py-2 rounded-md hover:bg-pink-700 font-medium transition-colors"
|
||||||
|
>
|
||||||
|
Regel hinzufügen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bestehende Regeln */}
|
||||||
|
<div className="bg-white rounded-lg shadow">
|
||||||
|
<div className="p-4 border-b">
|
||||||
|
<h3 className="text-lg font-semibold">Bestehende Regeln</h3>
|
||||||
|
</div>
|
||||||
|
<div className="divide-y">
|
||||||
|
{recurringRules?.length === 0 && (
|
||||||
|
<div className="p-8 text-center text-gray-500">
|
||||||
|
<div className="text-lg font-medium mb-2">Noch keine wiederkehrenden Regeln definiert</div>
|
||||||
|
<div className="text-sm">Erstellen Sie Ihre erste Regel, um automatisch Slots zu generieren.</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{recurringRules?.map((rule) => (
|
||||||
|
<div key={rule.id} className="p-4 hover:bg-gray-50 transition-colors">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<div className="flex items-center gap-4">
|
<div className="flex items-center gap-4">
|
||||||
<div className="text-center">
|
<div className="font-medium">{getDayName(rule.dayOfWeek)}</div>
|
||||||
<div className="text-sm text-gray-500">Datum</div>
|
<div className="text-gray-600">{rule.startTime} - {rule.endTime} Uhr</div>
|
||||||
<div className="font-medium">{new Date(slot.date).toLocaleDateString('de-DE')}</div>
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${
|
||||||
</div>
|
rule.isActive
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-sm text-gray-500">Zeit</div>
|
|
||||||
<div className="font-mono text-lg">{slot.time}</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-sm text-gray-500">Dauer</div>
|
|
||||||
<div className="font-medium">{slot.durationMinutes} Min</div>
|
|
||||||
</div>
|
|
||||||
{matchingTreatments.length > 0 && (
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-sm text-gray-500">Passende Behandlungen</div>
|
|
||||||
<div className="text-sm">
|
|
||||||
{matchingTreatments.length === 1
|
|
||||||
? matchingTreatments[0].name
|
|
||||||
: `${matchingTreatments.length} Behandlungen`
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<span className={`px-3 py-1 rounded-full text-sm font-medium ${
|
|
||||||
slot.status === "free"
|
|
||||||
? "bg-green-100 text-green-800"
|
? "bg-green-100 text-green-800"
|
||||||
: "bg-yellow-100 text-yellow-800"
|
: "bg-gray-100 text-gray-800"
|
||||||
}`}>
|
}`}>
|
||||||
{slot.status === "free" ? "Frei" : "Reserviert"}
|
{rule.isActive ? "Aktiv" : "Inaktiv"}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
@@ -373,54 +238,213 @@ export function AdminAvailability() {
|
|||||||
setErrorMsg("Nicht eingeloggt. Bitte als Inhaber anmelden.");
|
setErrorMsg("Nicht eingeloggt. Bitte als Inhaber anmelden.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
removeSlot(
|
toggleRuleActive(
|
||||||
{ sessionId, id: slot.id },
|
{ sessionId, id: rule.id },
|
||||||
{
|
{
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
setSuccessMsg("Slot erfolgreich gelöscht.");
|
setSuccessMsg(`Regel ${rule.isActive ? "deaktiviert" : "aktiviert"}.`);
|
||||||
// Manually refetch slots to ensure live updates
|
|
||||||
refetchSlots();
|
|
||||||
},
|
},
|
||||||
onError: (err: any) => {
|
onError: (err: any) => {
|
||||||
const msg = (err && (err.message || (err as any).toString())) || "Fehler beim Löschen des Slots.";
|
setErrorMsg(err?.message || "Fehler beim Umschalten der Regel.");
|
||||||
setErrorMsg(msg);
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
className="px-3 py-1 text-blue-600 hover:bg-blue-50 rounded-md transition-colors text-sm"
|
||||||
|
>
|
||||||
|
{rule.isActive ? "Deaktivieren" : "Aktivieren"}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
const sessionId = localStorage.getItem("sessionId");
|
||||||
|
if (!sessionId) {
|
||||||
|
setErrorMsg("Nicht eingeloggt. Bitte als Inhaber anmelden.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
deleteRule(
|
||||||
|
{ sessionId, id: rule.id },
|
||||||
|
{
|
||||||
|
onSuccess: () => {
|
||||||
|
setSuccessMsg("Regel gelöscht.");
|
||||||
|
},
|
||||||
|
onError: (err: any) => {
|
||||||
|
setErrorMsg(err?.message || "Fehler beim Löschen der Regel.");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
className="px-3 py-1 text-red-600 hover:bg-red-50 rounded-md transition-colors text-sm"
|
className="px-3 py-1 text-red-600 hover:bg-red-50 rounded-md transition-colors text-sm"
|
||||||
disabled={slot.status === "reserved"}
|
|
||||||
title={slot.status === "reserved" ? "Slot ist reserviert" : "Slot löschen"}
|
|
||||||
>
|
>
|
||||||
Löschen
|
Löschen
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Tab "Urlaubszeiten" */}
|
||||||
|
{activeSubTab === "timeoff" && (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Neue Urlaubszeit erstellen */}
|
||||||
|
<div className="bg-white rounded-lg shadow p-4">
|
||||||
|
<h3 className="text-lg font-semibold mb-4">Neue Urlaubszeit erstellen</h3>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Von Datum
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
value={timeOffStartDate}
|
||||||
|
onChange={(e) => setTimeOffStartDate(e.target.value)}
|
||||||
|
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-pink-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Bis Datum
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
value={timeOffEndDate}
|
||||||
|
onChange={(e) => setTimeOffEndDate(e.target.value)}
|
||||||
|
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-pink-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="md:col-span-2">
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Grund/Notiz
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="z.B. Sommerurlaub, Feiertag"
|
||||||
|
value={timeOffReason}
|
||||||
|
onChange={(e) => setTimeOffReason(e.target.value)}
|
||||||
|
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-pink-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4">
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setErrorMsg("");
|
||||||
|
setSuccessMsg("");
|
||||||
|
|
||||||
{/* Show matching treatments if multiple */}
|
if (!timeOffStartDate || !timeOffEndDate || !timeOffReason) {
|
||||||
{matchingTreatments.length > 1 && (
|
setErrorMsg("Bitte alle Felder ausfüllen.");
|
||||||
<div className="mt-2 ml-20">
|
return;
|
||||||
<div className="text-xs text-gray-500 mb-1">Passende Behandlungen:</div>
|
}
|
||||||
<div className="flex flex-wrap gap-1">
|
|
||||||
{matchingTreatments.map(treatment => (
|
if (timeOffStartDate > timeOffEndDate) {
|
||||||
<span key={treatment.id} className="px-2 py-1 bg-pink-100 text-pink-700 rounded text-xs">
|
setErrorMsg("Startdatum muss vor dem Enddatum liegen.");
|
||||||
{treatment.name}
|
return;
|
||||||
</span>
|
}
|
||||||
))}
|
|
||||||
|
const sessionId = localStorage.getItem("sessionId") || "";
|
||||||
|
if (!sessionId) {
|
||||||
|
setErrorMsg("Nicht eingeloggt. Bitte als Inhaber anmelden.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
createTimeOff(
|
||||||
|
{ sessionId, startDate: timeOffStartDate, endDate: timeOffEndDate, reason: timeOffReason },
|
||||||
|
{
|
||||||
|
onSuccess: () => {
|
||||||
|
setSuccessMsg("Urlaubszeit hinzugefügt.");
|
||||||
|
setTimeOffStartDate("");
|
||||||
|
setTimeOffEndDate("");
|
||||||
|
setTimeOffReason("");
|
||||||
|
},
|
||||||
|
onError: (err: any) => {
|
||||||
|
setErrorMsg(err?.message || "Fehler beim Hinzufügen der Urlaubszeit.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
className="bg-pink-600 text-white px-4 py-2 rounded-md hover:bg-pink-700 font-medium transition-colors"
|
||||||
|
>
|
||||||
|
Urlaubszeit hinzufügen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bestehende Urlaubszeiten */}
|
||||||
|
<div className="bg-white rounded-lg shadow">
|
||||||
|
<div className="p-4 border-b">
|
||||||
|
<h3 className="text-lg font-semibold">Bestehende Urlaubszeiten</h3>
|
||||||
|
</div>
|
||||||
|
<div className="divide-y">
|
||||||
|
{timeOffPeriods?.length === 0 && (
|
||||||
|
<div className="p-8 text-center text-gray-500">
|
||||||
|
<div className="text-lg font-medium mb-2">Keine Urlaubszeiten eingetragen</div>
|
||||||
|
<div className="text-sm">Fügen Sie Urlaubszeiten hinzu, um automatisch Slots zu blockieren.</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{timeOffPeriods?.map((period) => {
|
||||||
|
const today = new Date().toISOString().split("T")[0];
|
||||||
|
const isPast = period.endDate < today;
|
||||||
|
const isCurrent = period.startDate <= today && period.endDate >= today;
|
||||||
|
const isFuture = period.startDate > today;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={period.id} className="p-4 hover:bg-gray-50 transition-colors">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="font-medium">
|
||||||
|
{new Date(period.startDate).toLocaleDateString('de-DE')} - {new Date(period.endDate).toLocaleDateString('de-DE')}
|
||||||
|
</div>
|
||||||
|
<div className="text-gray-600">{period.reason}</div>
|
||||||
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${
|
||||||
|
isPast
|
||||||
|
? "bg-gray-100 text-gray-800"
|
||||||
|
: isCurrent
|
||||||
|
? "bg-red-100 text-red-800"
|
||||||
|
: "bg-blue-100 text-blue-800"
|
||||||
|
}`}>
|
||||||
|
{isPast ? "Vergangen" : isCurrent ? "Aktuell" : "Geplant"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
const sessionId = localStorage.getItem("sessionId");
|
||||||
|
if (!sessionId) {
|
||||||
|
setErrorMsg("Nicht eingeloggt. Bitte als Inhaber anmelden.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
deleteTimeOff(
|
||||||
|
{ sessionId, id: period.id },
|
||||||
|
{
|
||||||
|
onSuccess: () => {
|
||||||
|
setSuccessMsg("Urlaubszeit gelöscht.");
|
||||||
|
},
|
||||||
|
onError: (err: any) => {
|
||||||
|
setErrorMsg(err?.message || "Fehler beim Löschen der Urlaubszeit.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
className="px-3 py-1 text-red-600 hover:bg-red-50 rounded-md transition-colors text-sm"
|
||||||
|
>
|
||||||
|
Löschen
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
</div>
|
);
|
||||||
);
|
})}
|
||||||
})}
|
|
||||||
{allSlots?.length === 0 && (
|
|
||||||
<div className="p-8 text-center text-gray-500">
|
|
||||||
<div className="text-lg font-medium mb-2">Keine Slots vorhanden</div>
|
|
||||||
<div className="text-sm">Legen Sie den ersten Slot an, um zu beginnen.</div>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -212,8 +212,8 @@ export function AdminBookings() {
|
|||||||
<td className="px-6 py-4 whitespace-nowrap">
|
<td className="px-6 py-4 whitespace-nowrap">
|
||||||
<div>
|
<div>
|
||||||
<div className="text-sm font-medium text-gray-900">{booking.customerName}</div>
|
<div className="text-sm font-medium text-gray-900">{booking.customerName}</div>
|
||||||
<div className="text-sm text-gray-500">{booking.customerEmail}</div>
|
<div className="text-sm text-gray-500">{booking.customerEmail || '—'}</div>
|
||||||
<div className="text-sm text-gray-500">{booking.customerPhone}</div>
|
<div className="text-sm text-gray-500">{booking.customerPhone || '—'}</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td className="px-6 py-4 whitespace-nowrap">
|
<td className="px-6 py-4 whitespace-nowrap">
|
||||||
|
|||||||
@@ -5,6 +5,34 @@ import { queryClient } from "@/client/rpc-client";
|
|||||||
export function AdminCalendar() {
|
export function AdminCalendar() {
|
||||||
const [currentMonth, setCurrentMonth] = useState(new Date());
|
const [currentMonth, setCurrentMonth] = useState(new Date());
|
||||||
const [selectedDate, setSelectedDate] = useState<string | null>(null);
|
const [selectedDate, setSelectedDate] = useState<string | null>(null);
|
||||||
|
const [showDeleteConfirm, setShowDeleteConfirm] = useState<string | null>(null);
|
||||||
|
const [sendDeleteEmail, setSendDeleteEmail] = useState(false);
|
||||||
|
const [deleteActionType, setDeleteActionType] = useState<'delete' | 'cancel'>('delete');
|
||||||
|
|
||||||
|
// CalDAV state
|
||||||
|
const [caldavData, setCaldavData] = useState<any>(null);
|
||||||
|
const [showCaldavInstructions, setShowCaldavInstructions] = useState(false);
|
||||||
|
|
||||||
|
// Manual booking modal state
|
||||||
|
const [showCreateModal, setShowCreateModal] = useState(false);
|
||||||
|
const [createFormData, setCreateFormData] = useState({
|
||||||
|
customerName: '',
|
||||||
|
treatmentId: '',
|
||||||
|
appointmentDate: '',
|
||||||
|
appointmentTime: '',
|
||||||
|
customerEmail: '',
|
||||||
|
customerPhone: '',
|
||||||
|
notes: ''
|
||||||
|
});
|
||||||
|
const [createError, setCreateError] = useState<string>('');
|
||||||
|
|
||||||
|
// Reschedule modal state
|
||||||
|
const [showRescheduleModal, setShowRescheduleModal] = useState<string | null>(null);
|
||||||
|
const [rescheduleFormData, setRescheduleFormData] = useState({
|
||||||
|
appointmentDate: '',
|
||||||
|
appointmentTime: ''
|
||||||
|
});
|
||||||
|
const [rescheduleError, setRescheduleError] = useState<string>('');
|
||||||
|
|
||||||
const { data: bookings } = useQuery(
|
const { data: bookings } = useQuery(
|
||||||
queryClient.bookings.live.list.experimental_liveOptions()
|
queryClient.bookings.live.list.experimental_liveOptions()
|
||||||
@@ -14,10 +42,50 @@ export function AdminCalendar() {
|
|||||||
queryClient.treatments.live.list.experimental_liveOptions()
|
queryClient.treatments.live.list.experimental_liveOptions()
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Optional query for available times when treatment and date are selected
|
||||||
|
const { data: availableTimes } = useQuery({
|
||||||
|
...queryClient.recurringAvailability.getAvailableTimes.queryOptions({
|
||||||
|
input: {
|
||||||
|
date: createFormData.appointmentDate,
|
||||||
|
treatmentId: createFormData.treatmentId
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
enabled: !!createFormData.appointmentDate && !!createFormData.treatmentId
|
||||||
|
});
|
||||||
|
|
||||||
|
// Available times for reschedule modal
|
||||||
|
const { data: rescheduleAvailableTimes } = useQuery({
|
||||||
|
...queryClient.recurringAvailability.getAvailableTimes.queryOptions({
|
||||||
|
input: {
|
||||||
|
date: rescheduleFormData.appointmentDate,
|
||||||
|
treatmentId: (showRescheduleModal ? bookings?.find(b => b.id === showRescheduleModal)?.treatmentId : '') || ''
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
enabled: !!showRescheduleModal && !!rescheduleFormData.appointmentDate
|
||||||
|
});
|
||||||
|
|
||||||
const { mutate: updateBookingStatus } = useMutation(
|
const { mutate: updateBookingStatus } = useMutation(
|
||||||
queryClient.bookings.updateStatus.mutationOptions()
|
queryClient.bookings.updateStatus.mutationOptions()
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const { mutate: removeBooking } = useMutation(
|
||||||
|
queryClient.bookings.remove.mutationOptions()
|
||||||
|
);
|
||||||
|
|
||||||
|
const { mutate: createManualBooking } = useMutation(
|
||||||
|
queryClient.bookings.createManual.mutationOptions()
|
||||||
|
);
|
||||||
|
|
||||||
|
// Propose reschedule mutation
|
||||||
|
const { mutate: proposeReschedule, isPending: isProposingReschedule } = useMutation(
|
||||||
|
queryClient.bookings.proposeReschedule.mutationOptions()
|
||||||
|
);
|
||||||
|
|
||||||
|
// CalDAV token generation mutation
|
||||||
|
const { mutate: generateCalDAVToken, isPending: isGeneratingToken } = useMutation(
|
||||||
|
queryClient.bookings.generateCalDAVToken.mutationOptions()
|
||||||
|
);
|
||||||
|
|
||||||
const getTreatmentName = (treatmentId: string) => {
|
const getTreatmentName = (treatmentId: string) => {
|
||||||
return treatments?.find(t => t.id === treatmentId)?.name || "Unbekannte Behandlung";
|
return treatments?.find(t => t.id === treatmentId)?.name || "Unbekannte Behandlung";
|
||||||
};
|
};
|
||||||
@@ -106,8 +174,141 @@ export function AdminCalendar() {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleDeleteBooking = () => {
|
||||||
|
const sessionId = localStorage.getItem('sessionId');
|
||||||
|
if (!sessionId || !showDeleteConfirm) return;
|
||||||
|
|
||||||
|
if (deleteActionType === 'cancel') {
|
||||||
|
// For cancel action, use updateStatus instead of remove
|
||||||
|
updateBookingStatus({
|
||||||
|
sessionId,
|
||||||
|
id: showDeleteConfirm,
|
||||||
|
status: "cancelled"
|
||||||
|
}, {
|
||||||
|
onSuccess: () => {
|
||||||
|
setShowDeleteConfirm(null);
|
||||||
|
setSendDeleteEmail(false);
|
||||||
|
setDeleteActionType('delete');
|
||||||
|
},
|
||||||
|
onError: () => {
|
||||||
|
// no-op; errors can be surfaced via existing patterns/toasts later
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// For delete action, use remove with email option
|
||||||
|
removeBooking({
|
||||||
|
sessionId,
|
||||||
|
id: showDeleteConfirm,
|
||||||
|
sendEmail: sendDeleteEmail,
|
||||||
|
}, {
|
||||||
|
onSuccess: () => {
|
||||||
|
setShowDeleteConfirm(null);
|
||||||
|
setSendDeleteEmail(false);
|
||||||
|
setDeleteActionType('delete');
|
||||||
|
},
|
||||||
|
onError: () => {
|
||||||
|
// no-op; errors can be surfaced via existing patterns/toasts later
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const today = new Date().toISOString().split('T')[0];
|
const today = new Date().toISOString().split('T')[0];
|
||||||
|
|
||||||
|
const handleCreateBooking = () => {
|
||||||
|
const sessionId = localStorage.getItem('sessionId');
|
||||||
|
if (!sessionId) return;
|
||||||
|
|
||||||
|
createManualBooking({
|
||||||
|
sessionId,
|
||||||
|
...createFormData
|
||||||
|
}, {
|
||||||
|
onSuccess: () => {
|
||||||
|
setShowCreateModal(false);
|
||||||
|
setCreateFormData({
|
||||||
|
customerName: '',
|
||||||
|
treatmentId: '',
|
||||||
|
appointmentDate: '',
|
||||||
|
appointmentTime: '',
|
||||||
|
customerEmail: '',
|
||||||
|
customerPhone: '',
|
||||||
|
notes: ''
|
||||||
|
});
|
||||||
|
setCreateError('');
|
||||||
|
},
|
||||||
|
onError: (error: any) => {
|
||||||
|
setCreateError(error?.message || 'Fehler beim Erstellen der Buchung');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleFormChange = (field: string, value: string) => {
|
||||||
|
setCreateFormData(prev => ({
|
||||||
|
...prev,
|
||||||
|
[field]: value,
|
||||||
|
// Reset time when treatment or date changes
|
||||||
|
...(field === 'treatmentId' || field === 'appointmentDate' ? { appointmentTime: '' } : {})
|
||||||
|
}));
|
||||||
|
setCreateError('');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRescheduleFormChange = (field: string, value: string) => {
|
||||||
|
setRescheduleFormData(prev => ({
|
||||||
|
...prev,
|
||||||
|
[field]: value,
|
||||||
|
...(field === 'appointmentDate' ? { appointmentTime: '' } : {})
|
||||||
|
}));
|
||||||
|
setRescheduleError('');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRescheduleBooking = () => {
|
||||||
|
const sessionId = localStorage.getItem('sessionId');
|
||||||
|
if (!sessionId || !showRescheduleModal) return;
|
||||||
|
const booking = bookings?.find(b => b.id === showRescheduleModal);
|
||||||
|
if (!booking) return;
|
||||||
|
|
||||||
|
proposeReschedule({
|
||||||
|
sessionId,
|
||||||
|
bookingId: booking.id,
|
||||||
|
proposedDate: rescheduleFormData.appointmentDate,
|
||||||
|
proposedTime: rescheduleFormData.appointmentTime,
|
||||||
|
}, {
|
||||||
|
onSuccess: () => {
|
||||||
|
setShowRescheduleModal(null);
|
||||||
|
setRescheduleFormData({ appointmentDate: '', appointmentTime: '' });
|
||||||
|
setRescheduleError('');
|
||||||
|
},
|
||||||
|
onError: (error: any) => {
|
||||||
|
setRescheduleError(error?.message || 'Fehler beim Senden des Vorschlags');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleGenerateCalDAVToken = () => {
|
||||||
|
const sessionId = localStorage.getItem('sessionId');
|
||||||
|
if (!sessionId) return;
|
||||||
|
|
||||||
|
generateCalDAVToken({
|
||||||
|
sessionId
|
||||||
|
}, {
|
||||||
|
onSuccess: (data) => {
|
||||||
|
setCaldavData(data);
|
||||||
|
setShowCaldavInstructions(true);
|
||||||
|
},
|
||||||
|
onError: (error: any) => {
|
||||||
|
console.error('CalDAV Token Generation Error:', error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const copyToClipboard = (text: string) => {
|
||||||
|
navigator.clipboard.writeText(text).then(() => {
|
||||||
|
// Optional: Show success message
|
||||||
|
}).catch(err => {
|
||||||
|
console.error('Failed to copy text: ', err);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="max-w-7xl mx-auto">
|
<div className="max-w-7xl mx-auto">
|
||||||
<h2 className="text-2xl font-bold text-gray-900 mb-6">Kalender - Bevorstehende Buchungen</h2>
|
<h2 className="text-2xl font-bold text-gray-900 mb-6">Kalender - Bevorstehende Buchungen</h2>
|
||||||
@@ -140,6 +341,62 @@ export function AdminCalendar() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* CalDAV Integration */}
|
||||||
|
<div className="bg-white rounded-lg shadow p-6 mb-6">
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900">Kalender-Abonnement</h3>
|
||||||
|
<p className="text-sm text-gray-600">Abonniere deinen Terminkalender in deiner Kalender-App</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={handleGenerateCalDAVToken}
|
||||||
|
disabled={isGeneratingToken}
|
||||||
|
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors text-sm font-medium"
|
||||||
|
>
|
||||||
|
{isGeneratingToken ? 'Generiere...' : 'CalDAV-Link erstellen'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{caldavData && (
|
||||||
|
<div className="border-t pt-4">
|
||||||
|
<div className="bg-gray-50 rounded-lg p-4 mb-4">
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<label className="text-sm font-medium text-gray-700">CalDAV-URL:</label>
|
||||||
|
<button
|
||||||
|
onClick={() => copyToClipboard(caldavData.caldavUrl)}
|
||||||
|
className="text-blue-600 hover:text-blue-800 text-sm"
|
||||||
|
>
|
||||||
|
Kopieren
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={caldavData.caldavUrl}
|
||||||
|
readOnly
|
||||||
|
className="w-full p-2 bg-white border border-gray-300 rounded text-sm font-mono"
|
||||||
|
/>
|
||||||
|
<div className="text-xs text-gray-500 mt-2">
|
||||||
|
Gültig bis: {new Date(caldavData.expiresAt).toLocaleString('de-DE')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-sm text-gray-600">
|
||||||
|
<p className="mb-2">
|
||||||
|
<strong>So abonnierst du den Kalender:</strong>
|
||||||
|
</p>
|
||||||
|
<ul className="list-disc list-inside space-y-1 text-sm">
|
||||||
|
{caldavData.instructions.steps.map((step: string, index: number) => (
|
||||||
|
<li key={index}>{step}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<p className="mt-3 text-amber-700 bg-amber-50 p-2 rounded">
|
||||||
|
<strong>Hinweis:</strong> {caldavData.instructions.note}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Calendar */}
|
{/* Calendar */}
|
||||||
<div className="bg-white rounded-lg shadow-lg overflow-hidden">
|
<div className="bg-white rounded-lg shadow-lg overflow-hidden">
|
||||||
{/* Calendar Header */}
|
{/* Calendar Header */}
|
||||||
@@ -153,9 +410,17 @@ export function AdminCalendar() {
|
|||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<h3 className="text-xl font-semibold text-gray-900">
|
<div className="flex items-center space-x-4">
|
||||||
{monthNames[month]} {year}
|
<h3 className="text-xl font-semibold text-gray-900">
|
||||||
</h3>
|
{monthNames[month]} {year}
|
||||||
|
</h3>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowCreateModal(true)}
|
||||||
|
className="px-4 py-2 bg-pink-600 text-white rounded-lg hover:bg-pink-700 transition-colors text-sm font-medium"
|
||||||
|
>
|
||||||
|
Termin erstellen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
onClick={() => navigateMonth('next')}
|
onClick={() => navigateMonth('next')}
|
||||||
@@ -267,10 +532,10 @@ export function AdminCalendar() {
|
|||||||
<strong>Uhrzeit:</strong> {booking.appointmentTime}
|
<strong>Uhrzeit:</strong> {booking.appointmentTime}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<strong>E-Mail:</strong> {booking.customerEmail}
|
<strong>E-Mail:</strong> {booking.customerEmail || '—'}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<strong>Telefon:</strong> {booking.customerPhone}
|
<strong>Telefon:</strong> {booking.customerPhone || '—'}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -293,7 +558,11 @@ export function AdminCalendar() {
|
|||||||
Bestätigen
|
Bestätigen
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => handleStatusUpdate(booking.id, "cancelled")}
|
onClick={() => {
|
||||||
|
setDeleteActionType('cancel');
|
||||||
|
setShowDeleteConfirm(booking.id);
|
||||||
|
setSendDeleteEmail(true); // Default to sending email for cancel
|
||||||
|
}}
|
||||||
className="px-3 py-1 bg-red-600 text-white text-sm rounded hover:bg-red-700 transition-colors"
|
className="px-3 py-1 bg-red-600 text-white text-sm rounded hover:bg-red-700 transition-colors"
|
||||||
>
|
>
|
||||||
Stornieren
|
Stornieren
|
||||||
@@ -302,13 +571,51 @@ export function AdminCalendar() {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{booking.status === "confirmed" && (
|
{booking.status === "confirmed" && (
|
||||||
<button
|
<>
|
||||||
onClick={() => handleStatusUpdate(booking.id, "completed")}
|
<button
|
||||||
className="px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 transition-colors"
|
onClick={() => handleStatusUpdate(booking.id, "completed")}
|
||||||
>
|
className="px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 transition-colors"
|
||||||
Als erledigt markieren
|
>
|
||||||
</button>
|
Als erledigt markieren
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setShowRescheduleModal(booking.id);
|
||||||
|
setRescheduleFormData({ appointmentDate: '', appointmentTime: '' });
|
||||||
|
setRescheduleError('');
|
||||||
|
}}
|
||||||
|
className="px-3 py-1 bg-orange-600 text-white text-sm rounded hover:bg-orange-700 transition-colors"
|
||||||
|
>
|
||||||
|
Umbuchen
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
|
{(() => {
|
||||||
|
const isPastDate = booking.appointmentDate < today;
|
||||||
|
const isCompleted = booking.status === 'completed';
|
||||||
|
const shouldDisableDelete = isPastDate || isCompleted;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
if (!shouldDisableDelete) {
|
||||||
|
setDeleteActionType('delete');
|
||||||
|
setShowDeleteConfirm(booking.id);
|
||||||
|
setSendDeleteEmail(isPastDate || isCompleted ? false : false); // Disable email for past/completed
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
disabled={shouldDisableDelete}
|
||||||
|
className={`px-3 py-1 text-sm rounded transition-colors ${
|
||||||
|
shouldDisableDelete
|
||||||
|
? 'bg-gray-400 text-gray-200 cursor-not-allowed'
|
||||||
|
: 'bg-red-600 text-white hover:bg-red-700'
|
||||||
|
}`}
|
||||||
|
title={shouldDisableDelete ? 'Löschen für vergangene/abgeschlossene Termine nicht verfügbar' : ''}
|
||||||
|
>
|
||||||
|
Löschen
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -317,6 +624,289 @@ export function AdminCalendar() {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
{showDeleteConfirm !== null && (
|
||||||
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||||
|
<div className="bg-white rounded-lg shadow-xl p-6 w-full max-w-md">
|
||||||
|
<h4 className="text-lg font-semibold text-gray-900 mb-2">
|
||||||
|
{deleteActionType === 'cancel' ? 'Termin stornieren?' : 'Termin löschen?'}
|
||||||
|
</h4>
|
||||||
|
<p className="text-sm text-gray-600 mb-4">
|
||||||
|
{deleteActionType === 'cancel'
|
||||||
|
? 'Dieser Termin wird als storniert markiert. Der Zeitslot wird wieder freigegeben.'
|
||||||
|
: 'Dieser Termin wird als storniert markiert. Der Zeitslot wird wieder freigegeben.'
|
||||||
|
}
|
||||||
|
</p>
|
||||||
|
{deleteActionType === 'delete' && (
|
||||||
|
<label className="flex items-center space-x-2 mb-4">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={sendDeleteEmail}
|
||||||
|
onChange={(e) => setSendDeleteEmail(e.target.checked)}
|
||||||
|
className="h-4 w-4 text-pink-600 border-gray-300 rounded"
|
||||||
|
/>
|
||||||
|
<span className="text-sm text-gray-700">Stornierungsmail an Kunde senden</span>
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
<div className="flex flex-col sm:flex-row sm:space-x-3 space-y-2 sm:space-y-0">
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setShowDeleteConfirm(null);
|
||||||
|
setSendDeleteEmail(false);
|
||||||
|
setDeleteActionType('delete');
|
||||||
|
}}
|
||||||
|
className="px-4 py-2 rounded bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors w-full"
|
||||||
|
>
|
||||||
|
Abbrechen
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleDeleteBooking}
|
||||||
|
className="px-4 py-2 rounded bg-red-600 text-white hover:bg-red-700 transition-colors w-full"
|
||||||
|
>
|
||||||
|
{deleteActionType === 'cancel' ? 'Stornieren' : 'Löschen'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Create Manual Booking Modal */}
|
||||||
|
{showCreateModal && (
|
||||||
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||||
|
<div className="bg-white rounded-lg shadow-xl p-6 w-full max-w-md max-h-[90vh] overflow-y-auto">
|
||||||
|
<h4 className="text-lg font-semibold text-gray-900 mb-4">Termin erstellen</h4>
|
||||||
|
|
||||||
|
{createError && (
|
||||||
|
<div className="mb-4 bg-red-50 border border-red-200 text-red-700 px-3 py-2 rounded-md text-sm">
|
||||||
|
{createError}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Customer Name */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Kundenname *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={createFormData.customerName}
|
||||||
|
onChange={(e) => handleFormChange('customerName', e.target.value)}
|
||||||
|
className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-pink-500 focus:border-pink-500"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Treatment */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Behandlung *
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={createFormData.treatmentId}
|
||||||
|
onChange={(e) => handleFormChange('treatmentId', e.target.value)}
|
||||||
|
className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-pink-500 focus:border-pink-500"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<option value="">Behandlung wählen</option>
|
||||||
|
{treatments?.map(treatment => (
|
||||||
|
<option key={treatment.id} value={treatment.id}>
|
||||||
|
{treatment.name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Date */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Datum *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
value={createFormData.appointmentDate}
|
||||||
|
onChange={(e) => handleFormChange('appointmentDate', e.target.value)}
|
||||||
|
min={today}
|
||||||
|
className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-pink-500 focus:border-pink-500"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Time */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Uhrzeit *
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={createFormData.appointmentTime}
|
||||||
|
onChange={(e) => handleFormChange('appointmentTime', e.target.value)}
|
||||||
|
disabled={!createFormData.treatmentId || !createFormData.appointmentDate}
|
||||||
|
className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-pink-500 focus:border-pink-500 disabled:bg-gray-100"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<option value="">Zeit wählen</option>
|
||||||
|
{availableTimes?.map(time => (
|
||||||
|
<option key={time} value={time}>
|
||||||
|
{time}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
{(!createFormData.treatmentId || !createFormData.appointmentDate) && (
|
||||||
|
<p className="text-xs text-gray-500 mt-1">
|
||||||
|
Wähle zuerst Behandlung und Datum
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Email */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
E-Mail (optional)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
value={createFormData.customerEmail}
|
||||||
|
onChange={(e) => handleFormChange('customerEmail', e.target.value)}
|
||||||
|
className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-pink-500 focus:border-pink-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Phone */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Telefon (optional)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
value={createFormData.customerPhone}
|
||||||
|
onChange={(e) => handleFormChange('customerPhone', e.target.value)}
|
||||||
|
className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-pink-500 focus:border-pink-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Notes */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Notizen (optional)
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
value={createFormData.notes}
|
||||||
|
onChange={(e) => handleFormChange('notes', e.target.value)}
|
||||||
|
rows={3}
|
||||||
|
className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-pink-500 focus:border-pink-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex space-x-3 mt-6">
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setShowCreateModal(false);
|
||||||
|
setCreateFormData({
|
||||||
|
customerName: '',
|
||||||
|
treatmentId: '',
|
||||||
|
appointmentDate: '',
|
||||||
|
appointmentTime: '',
|
||||||
|
customerEmail: '',
|
||||||
|
customerPhone: '',
|
||||||
|
notes: ''
|
||||||
|
});
|
||||||
|
setCreateError('');
|
||||||
|
}}
|
||||||
|
className="flex-1 px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors"
|
||||||
|
>
|
||||||
|
Abbrechen
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleCreateBooking}
|
||||||
|
disabled={!createFormData.customerName || !createFormData.treatmentId || !createFormData.appointmentDate || !createFormData.appointmentTime}
|
||||||
|
className="flex-1 px-4 py-2 bg-pink-600 text-white rounded-md hover:bg-pink-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||||
|
>
|
||||||
|
Termin erstellen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Reschedule Modal */}
|
||||||
|
{showRescheduleModal && (
|
||||||
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||||
|
<div className="bg-white rounded-lg shadow-xl p-6 w-full max-w-md max-h-[90vh] overflow-y-auto">
|
||||||
|
<h4 className="text-lg font-semibold text-gray-900 mb-4">Termin umbuchen</h4>
|
||||||
|
|
||||||
|
{rescheduleError && (
|
||||||
|
<div className="mb-4 bg-red-50 border border-red-200 text-red-700 px-3 py-2 rounded-md text-sm">
|
||||||
|
{rescheduleError}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{(() => {
|
||||||
|
const booking = bookings?.find(b => b.id === showRescheduleModal);
|
||||||
|
const treatmentName = booking ? getTreatmentName(booking.treatmentId) : '';
|
||||||
|
return booking ? (
|
||||||
|
<div className="mb-4 text-sm text-gray-700">
|
||||||
|
<div className="mb-2"><strong>Kunde:</strong> {booking.customerName}</div>
|
||||||
|
<div className="mb-2"><strong>Aktueller Termin:</strong> {booking.appointmentDate} um {booking.appointmentTime} Uhr</div>
|
||||||
|
<div className="mb-2"><strong>Behandlung:</strong> {treatmentName}</div>
|
||||||
|
</div>
|
||||||
|
) : null;
|
||||||
|
})()}
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Neues Datum</label>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
value={rescheduleFormData.appointmentDate}
|
||||||
|
onChange={(e) => handleRescheduleFormChange('appointmentDate', e.target.value)}
|
||||||
|
min={today}
|
||||||
|
className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Neue Uhrzeit</label>
|
||||||
|
<select
|
||||||
|
value={rescheduleFormData.appointmentTime}
|
||||||
|
onChange={(e) => handleRescheduleFormChange('appointmentTime', e.target.value)}
|
||||||
|
disabled={!rescheduleFormData.appointmentDate}
|
||||||
|
className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-orange-500 focus:border-orange-500 disabled:bg-gray-100"
|
||||||
|
>
|
||||||
|
<option value="">Zeit wählen</option>
|
||||||
|
{rescheduleAvailableTimes?.map(time => (
|
||||||
|
<option key={time} value={time}>{time}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
{!rescheduleFormData.appointmentDate && (
|
||||||
|
<p className="text-xs text-gray-500 mt-1">Wähle zuerst ein Datum</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="bg-amber-50 border border-amber-200 text-amber-800 px-3 py-2 rounded-md text-sm">
|
||||||
|
Der Kunde erhält eine E-Mail mit dem Vorschlag. Er hat 48 Stunden Zeit zu antworten.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex space-x-3 mt-6">
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setShowRescheduleModal(null);
|
||||||
|
setRescheduleFormData({ appointmentDate: '', appointmentTime: '' });
|
||||||
|
setRescheduleError('');
|
||||||
|
}}
|
||||||
|
className="flex-1 px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors"
|
||||||
|
>
|
||||||
|
Abbrechen
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleRescheduleBooking}
|
||||||
|
disabled={!rescheduleFormData.appointmentDate || !rescheduleFormData.appointmentTime || isProposingReschedule}
|
||||||
|
className="flex-1 px-4 py-2 bg-orange-600 text-white rounded-md hover:bg-orange-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||||
|
>
|
||||||
|
{isProposingReschedule ? 'Senden...' : 'Vorschlag senden'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
464
src/client/components/admin-gallery.tsx
Normal file
464
src/client/components/admin-gallery.tsx
Normal file
@@ -0,0 +1,464 @@
|
|||||||
|
import { useState, useEffect, useMemo } from "react";
|
||||||
|
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||||
|
import { queryClient } from "@/client/rpc-client";
|
||||||
|
|
||||||
|
export function AdminGallery() {
|
||||||
|
// Component state
|
||||||
|
const [photoTitle, setPhotoTitle] = useState<string>("");
|
||||||
|
const [photoPreview, setPhotoPreview] = useState<string>("");
|
||||||
|
const [photoBase64, setPhotoBase64] = useState<string>("");
|
||||||
|
const [errorMsg, setErrorMsg] = useState<string>("");
|
||||||
|
const [successMsg, setSuccessMsg] = useState<string>("");
|
||||||
|
const [draggedPhotoId, setDraggedPhotoId] = useState<string | null>(null);
|
||||||
|
|
||||||
|
// Data fetching with live query
|
||||||
|
const { data: photos, refetch: refetchPhotos } = useQuery(
|
||||||
|
queryClient.gallery.live.adminListPhotos.experimental_liveOptions({
|
||||||
|
input: { sessionId: localStorage.getItem("sessionId") || "" }
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
// Memoized sorted photos to avoid re-sorting on every render and prevent cache mutation
|
||||||
|
const sortedPhotos = useMemo(() => [...(photos || [])].sort((a, b) => a.order - b.order), [photos]);
|
||||||
|
|
||||||
|
// Mutations
|
||||||
|
const { mutate: uploadPhoto, isPending: isUploading } = useMutation(
|
||||||
|
queryClient.gallery.uploadPhoto.mutationOptions()
|
||||||
|
);
|
||||||
|
const { mutate: deletePhoto } = useMutation(
|
||||||
|
queryClient.gallery.deletePhoto.mutationOptions()
|
||||||
|
);
|
||||||
|
const { mutate: updatePhotoOrder } = useMutation(
|
||||||
|
queryClient.gallery.updatePhotoOrder.mutationOptions()
|
||||||
|
);
|
||||||
|
const { mutate: setCoverPhoto } = useMutation(
|
||||||
|
queryClient.gallery.setCoverPhoto.mutationOptions()
|
||||||
|
);
|
||||||
|
|
||||||
|
// Auto-clear messages after 5 seconds
|
||||||
|
useEffect(() => {
|
||||||
|
if (errorMsg) {
|
||||||
|
const timer = setTimeout(() => setErrorMsg(""), 5000);
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}
|
||||||
|
}, [errorMsg]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (successMsg) {
|
||||||
|
const timer = setTimeout(() => setSuccessMsg(""), 5000);
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}
|
||||||
|
}, [successMsg]);
|
||||||
|
|
||||||
|
// Image compression function (adapted from booking-form.tsx)
|
||||||
|
const compressImage = (file: File, maxWidth: number = 800, quality: number = 0.8): Promise<string> => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const canvas = document.createElement('canvas');
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
const img = new Image();
|
||||||
|
|
||||||
|
img.onload = () => {
|
||||||
|
// Calculate new dimensions
|
||||||
|
let { width, height } = img;
|
||||||
|
if (width > maxWidth) {
|
||||||
|
height = (height * maxWidth) / width;
|
||||||
|
width = maxWidth;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas.width = width;
|
||||||
|
canvas.height = height;
|
||||||
|
|
||||||
|
// Draw and compress
|
||||||
|
ctx?.drawImage(img, 0, 0, width, height);
|
||||||
|
const compressedDataUrl = canvas.toDataURL('image/jpeg', quality);
|
||||||
|
resolve(compressedDataUrl);
|
||||||
|
};
|
||||||
|
|
||||||
|
img.onerror = reject;
|
||||||
|
img.src = URL.createObjectURL(file);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// File upload handler
|
||||||
|
const handlePhotoUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const file = e.target.files?.[0];
|
||||||
|
if (!file) return;
|
||||||
|
|
||||||
|
// Validate file type
|
||||||
|
if (!file.type.startsWith('image/')) {
|
||||||
|
setErrorMsg("Bitte wähle nur Bilddateien aus.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check file size (max 1MB)
|
||||||
|
if (file.size > 1 * 1024 * 1024) {
|
||||||
|
setErrorMsg("Das Foto ist zu groß. Bitte wähle ein Bild unter 1MB.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Helper: measure DataURL size via Blob
|
||||||
|
const getDataUrlSizeBytes = async (dataUrl: string): Promise<number> => {
|
||||||
|
const res = await fetch(dataUrl);
|
||||||
|
const blob = await res.blob();
|
||||||
|
return blob.size;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Try compressing with decreasing quality until <= 1MB or give up
|
||||||
|
const qualitySteps = [0.8, 0.6, 0.4];
|
||||||
|
let finalDataUrl = "";
|
||||||
|
for (const q of qualitySteps) {
|
||||||
|
const candidate = await compressImage(file, 800, q);
|
||||||
|
const sizeBytes = await getDataUrlSizeBytes(candidate);
|
||||||
|
if (sizeBytes <= 1 * 1024 * 1024) {
|
||||||
|
finalDataUrl = candidate;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!finalDataUrl) {
|
||||||
|
setErrorMsg("Das komprimierte Bild ist weiterhin größer als 1MB. Bitte wähle ein kleineres Bild.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setPhotoBase64(finalDataUrl);
|
||||||
|
setPhotoPreview(finalDataUrl);
|
||||||
|
setErrorMsg("");
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Photo compression failed:', error);
|
||||||
|
setErrorMsg('Fehler beim Verarbeiten des Bildes. Bitte versuche es mit einem anderen Bild.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const removePhoto = () => {
|
||||||
|
setPhotoBase64("");
|
||||||
|
setPhotoPreview("");
|
||||||
|
// Reset file input
|
||||||
|
const fileInput = document.getElementById('gallery-photo-upload') as HTMLInputElement;
|
||||||
|
if (fileInput) fileInput.value = '';
|
||||||
|
};
|
||||||
|
|
||||||
|
// Drag and drop handlers
|
||||||
|
const handleDragStart = (e: React.DragEvent, photoId: string) => {
|
||||||
|
setDraggedPhotoId(photoId);
|
||||||
|
e.dataTransfer.effectAllowed = 'move';
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDragOver = (e: React.DragEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.dataTransfer.dropEffect = 'move';
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDrop = (e: React.DragEvent, targetPhotoId: string) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
if (!draggedPhotoId || draggedPhotoId === targetPhotoId) {
|
||||||
|
setDraggedPhotoId(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const draggedPhoto = photos?.find(p => p.id === draggedPhotoId);
|
||||||
|
const targetPhoto = photos?.find(p => p.id === targetPhotoId);
|
||||||
|
|
||||||
|
if (!draggedPhoto || !targetPhoto) {
|
||||||
|
setDraggedPhotoId(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const sessionId = localStorage.getItem("sessionId");
|
||||||
|
if (!sessionId) {
|
||||||
|
setErrorMsg("Nicht eingeloggt. Bitte als Inhaber anmelden.");
|
||||||
|
setDraggedPhotoId(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Build a fully reordered list based on the current sorted order
|
||||||
|
const sorted = [...(photos || [])].sort((a, b) => a.order - b.order);
|
||||||
|
const fromIndex = sorted.findIndex(p => p.id === draggedPhotoId);
|
||||||
|
const toIndex = sorted.findIndex(p => p.id === targetPhotoId);
|
||||||
|
if (fromIndex === -1 || toIndex === -1) {
|
||||||
|
setDraggedPhotoId(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const reordered = [...sorted];
|
||||||
|
const [moved] = reordered.splice(fromIndex, 1);
|
||||||
|
reordered.splice(toIndex, 0, moved);
|
||||||
|
|
||||||
|
// Reindex orders 0..n-1
|
||||||
|
const photoOrders = reordered.map((p, idx) => ({ id: p.id, order: idx }));
|
||||||
|
|
||||||
|
updatePhotoOrder(
|
||||||
|
{
|
||||||
|
sessionId,
|
||||||
|
photoOrders
|
||||||
|
},
|
||||||
|
{
|
||||||
|
onSuccess: () => {
|
||||||
|
setSuccessMsg("Foto-Reihenfolge aktualisiert.");
|
||||||
|
// Sofortige Aktualisierung der Thumbnails in korrekter Reihenfolge
|
||||||
|
refetchPhotos();
|
||||||
|
},
|
||||||
|
onError: (err: any) => {
|
||||||
|
setErrorMsg(err?.message || "Fehler beim Aktualisieren der Reihenfolge.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
setDraggedPhotoId(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDragEnd = () => {
|
||||||
|
setDraggedPhotoId(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-6xl mx-auto space-y-6">
|
||||||
|
{/* Error and Success Messages */}
|
||||||
|
{errorMsg && (
|
||||||
|
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<svg className="w-5 h-5 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
<span className="font-medium">{errorMsg}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{successMsg && (
|
||||||
|
<div className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-md">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<svg className="w-5 h-5 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
<span className="font-medium">{successMsg}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Upload Form Section */}
|
||||||
|
<div className="bg-white rounded-lg shadow p-6">
|
||||||
|
<h3 className="text-lg font-semibold mb-4">Neues Foto hochladen</h3>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Foto auswählen *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="gallery-photo-upload"
|
||||||
|
type="file"
|
||||||
|
accept="image/*"
|
||||||
|
onChange={handlePhotoUpload}
|
||||||
|
className="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-pink-50 file:text-pink-700 hover:file:bg-pink-100"
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-gray-500 mt-1">
|
||||||
|
Max. 1MB, alle Bildformate erlaubt
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{photoPreview && (
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Vorschau
|
||||||
|
</label>
|
||||||
|
<div className="relative inline-block">
|
||||||
|
<img
|
||||||
|
src={photoPreview}
|
||||||
|
alt="Foto Vorschau"
|
||||||
|
className="w-32 h-32 object-cover rounded-lg border border-gray-200"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={removePhoto}
|
||||||
|
className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm hover:bg-red-600"
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Titel (optional)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={photoTitle}
|
||||||
|
onChange={(e) => setPhotoTitle(e.target.value)}
|
||||||
|
placeholder="z.B. French Manicure, Gel Nails..."
|
||||||
|
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-pink-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setErrorMsg("");
|
||||||
|
setSuccessMsg("");
|
||||||
|
|
||||||
|
if (!photoBase64) {
|
||||||
|
setErrorMsg("Bitte wähle zuerst ein Foto aus.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const sessionId = localStorage.getItem("sessionId") || "";
|
||||||
|
if (!sessionId) {
|
||||||
|
setErrorMsg("Nicht eingeloggt. Bitte als Inhaber anmelden.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
uploadPhoto(
|
||||||
|
{
|
||||||
|
sessionId,
|
||||||
|
base64Data: photoBase64,
|
||||||
|
title: photoTitle || undefined
|
||||||
|
},
|
||||||
|
{
|
||||||
|
onSuccess: () => {
|
||||||
|
setSuccessMsg("Foto erfolgreich hochgeladen.");
|
||||||
|
setPhotoTitle("");
|
||||||
|
setPhotoPreview("");
|
||||||
|
setPhotoBase64("");
|
||||||
|
// Reset file input
|
||||||
|
const fileInput = document.getElementById('gallery-photo-upload') as HTMLInputElement;
|
||||||
|
if (fileInput) fileInput.value = '';
|
||||||
|
// Sofortige Aktualisierung der Liste
|
||||||
|
refetchPhotos();
|
||||||
|
},
|
||||||
|
onError: (err: any) => {
|
||||||
|
setErrorMsg(err?.message || "Fehler beim Hochladen des Fotos.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
disabled={isUploading}
|
||||||
|
className={`bg-pink-600 text-white px-4 py-2 rounded-md font-medium transition-colors ${isUploading ? 'opacity-60 cursor-not-allowed' : 'hover:bg-pink-700'}`}
|
||||||
|
>
|
||||||
|
{isUploading ? 'Lädt hoch…' : 'Foto hochladen'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Photo Grid Section */}
|
||||||
|
<div className="bg-white rounded-lg shadow">
|
||||||
|
<div className="p-4 border-b">
|
||||||
|
<h3 className="text-lg font-semibold">Foto-Galerie verwalten</h3>
|
||||||
|
<p className="text-sm text-gray-600 mt-1">
|
||||||
|
Ziehe Fotos per Drag & Drop, um die Reihenfolge zu ändern. Klicke auf das X, um ein Foto zu löschen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-6">
|
||||||
|
{photos?.length === 0 && (
|
||||||
|
<div className="text-center text-gray-500 py-8">
|
||||||
|
<div className="text-lg font-medium mb-2">Noch keine Fotos hochgeladen</div>
|
||||||
|
<div className="text-sm">Lade dein erstes Foto hoch, um deine Galerie zu starten.</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{sortedPhotos && sortedPhotos.length > 0 && (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{sortedPhotos.map((photo) => (
|
||||||
|
<div
|
||||||
|
key={photo.id}
|
||||||
|
draggable={true}
|
||||||
|
onDragStart={(e) => handleDragStart(e, photo.id)}
|
||||||
|
onDragOver={handleDragOver}
|
||||||
|
onDrop={(e) => handleDrop(e, photo.id)}
|
||||||
|
onDragEnd={handleDragEnd}
|
||||||
|
className={`relative bg-gray-50 rounded-lg overflow-hidden border-2 transition-all duration-200 hover:shadow-md cursor-move ${
|
||||||
|
draggedPhotoId === photo.id ? 'opacity-50 border-pink-300' : 'border-transparent'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={photo.base64Data}
|
||||||
|
alt={photo.title || "Galerie Foto"}
|
||||||
|
className="w-full h-48 object-cover"
|
||||||
|
/>
|
||||||
|
<div className="p-3">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex-1">
|
||||||
|
{photo.title && (
|
||||||
|
<div className="font-medium text-gray-900 text-sm mb-1">
|
||||||
|
{photo.title}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="text-xs text-gray-500">
|
||||||
|
Reihenfolge: {photo.order}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-gray-400">
|
||||||
|
{new Date(photo.createdAt).toLocaleDateString('de-DE')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
if (confirm("Möchtest du dieses Foto wirklich löschen?")) {
|
||||||
|
const sessionId = localStorage.getItem("sessionId");
|
||||||
|
if (!sessionId) {
|
||||||
|
setErrorMsg("Nicht eingeloggt. Bitte als Inhaber anmelden.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
deletePhoto(
|
||||||
|
{ sessionId, id: photo.id },
|
||||||
|
{
|
||||||
|
onSuccess: () => {
|
||||||
|
setSuccessMsg("Foto gelöscht.");
|
||||||
|
// Sofortige Aktualisierung der Liste
|
||||||
|
refetchPhotos();
|
||||||
|
},
|
||||||
|
onError: (err: any) => {
|
||||||
|
setErrorMsg(err?.message || "Fehler beim Löschen des Fotos.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className="ml-2 text-red-600 hover:text-red-800 hover:bg-red-50 rounded-full p-1 transition-colors"
|
||||||
|
title="Foto löschen"
|
||||||
|
>
|
||||||
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
const sessionId = localStorage.getItem("sessionId");
|
||||||
|
if (!sessionId) {
|
||||||
|
setErrorMsg("Nicht eingeloggt. Bitte als Inhaber anmelden.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setCoverPhoto(
|
||||||
|
{ sessionId, id: photo.id },
|
||||||
|
{
|
||||||
|
onSuccess: () => setSuccessMsg("Als Cover-Bild gesetzt."),
|
||||||
|
onError: (err: any) => setErrorMsg(err?.message || "Fehler beim Setzen des Cover-Bildes."),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
className={`ml-2 ${photo.cover ? 'text-green-700 hover:text-green-800 hover:bg-green-50' : 'text-gray-600 hover:text-gray-800 hover:bg-gray-50'} rounded-full p-1 transition-colors`}
|
||||||
|
title={photo.cover ? "Cover-Bild (aktiv)" : "Als Cover-Bild setzen"}
|
||||||
|
>
|
||||||
|
{photo.cover ? (
|
||||||
|
<svg className="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
|
||||||
|
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-7.25 7.25a1 1 0 01-1.414 0l-3-3a1 1 0 111.414-1.414L8.5 11.086l6.543-6.543a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
) : (
|
||||||
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l6-6 4 4 6-6" />
|
||||||
|
</svg>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
356
src/client/components/admin-reviews.tsx
Normal file
356
src/client/components/admin-reviews.tsx
Normal file
@@ -0,0 +1,356 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||||
|
import { queryClient } from "@/client/rpc-client";
|
||||||
|
|
||||||
|
type ReviewStatus = "pending" | "approved" | "rejected";
|
||||||
|
|
||||||
|
type Review = {
|
||||||
|
id: string;
|
||||||
|
bookingId: string;
|
||||||
|
customerName: string;
|
||||||
|
customerEmail?: string;
|
||||||
|
rating: number;
|
||||||
|
comment: string;
|
||||||
|
status: "pending" | "approved" | "rejected";
|
||||||
|
createdAt: string;
|
||||||
|
reviewedAt?: string;
|
||||||
|
reviewedBy?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
function getStatusText(status: string) {
|
||||||
|
switch (status) {
|
||||||
|
case "pending":
|
||||||
|
return "Ausstehend";
|
||||||
|
case "approved":
|
||||||
|
return "Genehmigt";
|
||||||
|
case "rejected":
|
||||||
|
return "Abgelehnt";
|
||||||
|
default:
|
||||||
|
return status;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getStatusColor(status: string) {
|
||||||
|
switch (status) {
|
||||||
|
case "pending":
|
||||||
|
return "bg-yellow-100 text-yellow-800";
|
||||||
|
case "approved":
|
||||||
|
return "bg-green-100 text-green-800";
|
||||||
|
case "rejected":
|
||||||
|
return "bg-red-100 text-red-800";
|
||||||
|
default:
|
||||||
|
return "bg-gray-100 text-gray-800";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderStars(rating: number) {
|
||||||
|
const stars = [] as React.ReactElement[];
|
||||||
|
for (let i = 1; i <= 5; i++) {
|
||||||
|
const filled = i <= rating;
|
||||||
|
stars.push(
|
||||||
|
<span key={i} className={filled ? "text-yellow-500" : "text-gray-300"}>
|
||||||
|
{filled ? "★" : "☆"}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return <div className="text-lg">{stars}</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDate(isoString?: string) {
|
||||||
|
if (!isoString) return "";
|
||||||
|
try {
|
||||||
|
return new Date(isoString).toLocaleDateString("de-DE", {
|
||||||
|
year: "numeric",
|
||||||
|
month: "2-digit",
|
||||||
|
day: "2-digit",
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
});
|
||||||
|
} catch {
|
||||||
|
return isoString || "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AdminReviews() {
|
||||||
|
const [activeStatusTab, setActiveStatusTab] = useState<ReviewStatus>("pending");
|
||||||
|
const [successMsg, setSuccessMsg] = useState<string>("");
|
||||||
|
const [errorMsg, setErrorMsg] = useState<string>("");
|
||||||
|
const [showDeleteConfirm, setShowDeleteConfirm] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (errorMsg) {
|
||||||
|
const t = setTimeout(() => setErrorMsg(""), 5000);
|
||||||
|
return () => clearTimeout(t);
|
||||||
|
}
|
||||||
|
}, [errorMsg]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (successMsg) {
|
||||||
|
const t = setTimeout(() => setSuccessMsg(""), 5000);
|
||||||
|
return () => clearTimeout(t);
|
||||||
|
}
|
||||||
|
}, [successMsg]);
|
||||||
|
|
||||||
|
const sessionId = typeof window !== "undefined" ? localStorage.getItem("sessionId") || "" : "";
|
||||||
|
|
||||||
|
const { data: reviews } = useQuery(
|
||||||
|
queryClient.reviews.live.adminListReviews.experimental_liveOptions({
|
||||||
|
input: { sessionId, statusFilter: activeStatusTab },
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
// Separate queries for quick stats calculation
|
||||||
|
const { data: allReviews } = useQuery(
|
||||||
|
queryClient.reviews.live.adminListReviews.experimental_liveOptions({
|
||||||
|
input: { sessionId },
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
const { mutate: approveReview } = useMutation(
|
||||||
|
queryClient.reviews.approveReview.mutationOptions({
|
||||||
|
onSuccess: () => {
|
||||||
|
setSuccessMsg("Bewertung wurde genehmigt.");
|
||||||
|
},
|
||||||
|
onError: (err: any) => {
|
||||||
|
setErrorMsg(err?.message || "Fehler beim Genehmigen der Bewertung.");
|
||||||
|
},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
const { mutate: rejectReview } = useMutation(
|
||||||
|
queryClient.reviews.rejectReview.mutationOptions({
|
||||||
|
onSuccess: () => {
|
||||||
|
setSuccessMsg("Bewertung wurde abgelehnt.");
|
||||||
|
},
|
||||||
|
onError: (err: any) => {
|
||||||
|
setErrorMsg(err?.message || "Fehler beim Ablehnen der Bewertung.");
|
||||||
|
},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
const { mutate: deleteReview } = useMutation(
|
||||||
|
queryClient.reviews.deleteReview.mutationOptions({
|
||||||
|
onSuccess: () => {
|
||||||
|
setSuccessMsg("Bewertung wurde gelöscht.");
|
||||||
|
setShowDeleteConfirm(null);
|
||||||
|
},
|
||||||
|
onError: (err: any) => {
|
||||||
|
setErrorMsg(err?.message || "Fehler beim Löschen der Bewertung.");
|
||||||
|
setShowDeleteConfirm(null);
|
||||||
|
},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
// Calculate quick stats from full dataset
|
||||||
|
const pendingCount = allReviews?.filter((r: Review) => r.status === "pending").length || 0;
|
||||||
|
const approvedCount = allReviews?.filter((r: Review) => r.status === "approved").length || 0;
|
||||||
|
const rejectedCount = allReviews?.filter((r: Review) => r.status === "rejected").length || 0;
|
||||||
|
const totalCount = allReviews?.length || 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-6xl mx-auto space-y-6">
|
||||||
|
{(successMsg || errorMsg) && (
|
||||||
|
<div className="mb-4">
|
||||||
|
{errorMsg && (
|
||||||
|
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
<span className="font-medium">Fehler:</span>
|
||||||
|
<span className="ml-1">{errorMsg}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{successMsg && (
|
||||||
|
<div className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-md">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
<span className="font-medium">Erfolg:</span>
|
||||||
|
<span className="ml-1">{successMsg}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||||
|
<div className="bg-white rounded-lg shadow p-4">
|
||||||
|
<div className="text-2xl font-bold text-yellow-600">{pendingCount}</div>
|
||||||
|
<div className="text-sm text-gray-600">Ausstehend</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-lg shadow p-4">
|
||||||
|
<div className="text-2xl font-bold text-green-600">{approvedCount}</div>
|
||||||
|
<div className="text-sm text-gray-600">Genehmigt</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-lg shadow p-4">
|
||||||
|
<div className="text-2xl font-bold text-red-600">{rejectedCount}</div>
|
||||||
|
<div className="text-sm text-gray-600">Abgelehnt</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-lg shadow p-4">
|
||||||
|
<div className="text-2xl font-bold text-gray-600">{totalCount}</div>
|
||||||
|
<div className="text-sm text-gray-600">Summe</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-lg shadow">
|
||||||
|
<div className="border-b border-gray-200">
|
||||||
|
<nav className="-mb-px flex space-x-8 px-6">
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveStatusTab("pending")}
|
||||||
|
className={`py-4 px-1 border-b-2 font-medium text-sm ${
|
||||||
|
activeStatusTab === "pending"
|
||||||
|
? "border-pink-500 text-pink-600"
|
||||||
|
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
⏳ Ausstehend
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveStatusTab("approved")}
|
||||||
|
className={`py-4 px-1 border-b-2 font-medium text-sm ${
|
||||||
|
activeStatusTab === "approved"
|
||||||
|
? "border-pink-500 text-pink-600"
|
||||||
|
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
✅ Genehmigt
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveStatusTab("rejected")}
|
||||||
|
className={`py-4 px-1 border-b-2 font-medium text-sm ${
|
||||||
|
activeStatusTab === "rejected"
|
||||||
|
? "border-pink-500 text-pink-600"
|
||||||
|
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
❌ Abgelehnt
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-lg shadow">
|
||||||
|
{(!reviews || reviews.length === 0) && (
|
||||||
|
<div className="p-8 text-center text-gray-500">
|
||||||
|
<div className="text-lg font-medium mb-2">Keine Bewertungen gefunden</div>
|
||||||
|
<div className="text-sm">Es liegen aktuell keine Bewertungen in dieser Ansicht vor.</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="divide-y">
|
||||||
|
{reviews?.map((review: Review) => (
|
||||||
|
<div key={review.id} className="p-6 hover:bg-gray-50 transition-colors">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div>
|
||||||
|
<div className="text-lg font-semibold text-gray-900">{review.customerName}</div>
|
||||||
|
<div className="text-sm text-gray-500">{review.customerEmail || "—"}</div>
|
||||||
|
</div>
|
||||||
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(review.status)}`}>
|
||||||
|
{getStatusText(review.status)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-2">{renderStars(review.rating)}</div>
|
||||||
|
<div className="mt-2 text-gray-700 whitespace-pre-wrap break-words">{review.comment}</div>
|
||||||
|
|
||||||
|
<div className="mt-2 text-sm text-gray-500 space-x-4">
|
||||||
|
<span>Buchung: {review.bookingId}</span>
|
||||||
|
<span>Eingereicht am: {formatDate(review.createdAt)}</span>
|
||||||
|
{review.reviewedAt && <span>Geprüft am: {formatDate(review.reviewedAt)}</span>}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4 flex items-center gap-2">
|
||||||
|
{review.status === "pending" && (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
onClick={() => approveReview({ sessionId, id: review.id })}
|
||||||
|
className="bg-green-600 hover:bg-green-700 text-white px-3 py-1.5 rounded-md text-sm"
|
||||||
|
>
|
||||||
|
Genehmigen
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => rejectReview({ sessionId, id: review.id })}
|
||||||
|
className="bg-red-600 hover:bg-red-700 text-white px-3 py-1.5 rounded-md text-sm"
|
||||||
|
>
|
||||||
|
Ablehnen
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowDeleteConfirm(review.id)}
|
||||||
|
className="bg-gray-600 hover:bg-gray-700 text-white px-3 py-1.5 rounded-md text-sm"
|
||||||
|
>
|
||||||
|
Löschen
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{review.status === "approved" && (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
onClick={() => rejectReview({ sessionId, id: review.id })}
|
||||||
|
className="bg-red-600 hover:bg-red-700 text-white px-3 py-1.5 rounded-md text-sm"
|
||||||
|
>
|
||||||
|
Ablehnen
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowDeleteConfirm(review.id)}
|
||||||
|
className="bg-gray-600 hover:bg-gray-700 text-white px-3 py-1.5 rounded-md text-sm"
|
||||||
|
>
|
||||||
|
Löschen
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{review.status === "rejected" && (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
onClick={() => approveReview({ sessionId, id: review.id })}
|
||||||
|
className="bg-green-600 hover:bg-green-700 text-white px-3 py-1.5 rounded-md text-sm"
|
||||||
|
>
|
||||||
|
Genehmigen
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowDeleteConfirm(review.id)}
|
||||||
|
className="bg-gray-600 hover:bg-gray-700 text-white px-3 py-1.5 rounded-md text-sm"
|
||||||
|
>
|
||||||
|
Löschen
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{showDeleteConfirm && (
|
||||||
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||||
|
<div className="bg-white rounded-lg p-6 max-w-md w-full mx-4">
|
||||||
|
<h3 className="text-lg font-medium text-gray-900 mb-4">Bewertung löschen</h3>
|
||||||
|
<p className="text-gray-600 mb-6">
|
||||||
|
Bist du sicher, dass du diese Bewertung löschen möchtest? Diese Aktion kann nicht rückgängig gemacht werden.
|
||||||
|
</p>
|
||||||
|
<div className="flex space-x-3">
|
||||||
|
<button
|
||||||
|
onClick={() => deleteReview({ sessionId, id: showDeleteConfirm })}
|
||||||
|
className="flex-1 bg-red-600 text-white py-2 px-4 rounded-md hover:bg-red-700 transition-colors"
|
||||||
|
>
|
||||||
|
Ja, löschen
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowDeleteConfirm(null)}
|
||||||
|
className="flex-1 bg-gray-200 text-gray-800 py-2 px-4 rounded-md hover:bg-gray-300 transition-colors"
|
||||||
|
>
|
||||||
|
Abbrechen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
import { useState } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||||
import { queryClient } from "@/client/rpc-client";
|
import { queryClient } from "@/client/rpc-client";
|
||||||
|
|
||||||
@@ -8,69 +8,98 @@ export function BookingForm() {
|
|||||||
const [customerEmail, setCustomerEmail] = useState("");
|
const [customerEmail, setCustomerEmail] = useState("");
|
||||||
const [customerPhone, setCustomerPhone] = useState("");
|
const [customerPhone, setCustomerPhone] = useState("");
|
||||||
const [appointmentDate, setAppointmentDate] = useState("");
|
const [appointmentDate, setAppointmentDate] = useState("");
|
||||||
const [selectedSlotId, setSelectedSlotId] = useState<string>("");
|
const [selectedTime, setSelectedTime] = useState("");
|
||||||
const [notes, setNotes] = useState("");
|
const [notes, setNotes] = useState("");
|
||||||
const [agbAccepted, setAgbAccepted] = useState(false);
|
const [agbAccepted, setAgbAccepted] = useState(false);
|
||||||
|
const [ageConfirmed, setAgeConfirmed] = useState(false);
|
||||||
const [inspirationPhoto, setInspirationPhoto] = useState<string>("");
|
const [inspirationPhoto, setInspirationPhoto] = useState<string>("");
|
||||||
const [photoPreview, setPhotoPreview] = useState<string>("");
|
const [photoPreview, setPhotoPreview] = useState<string>("");
|
||||||
const [errorMessage, setErrorMessage] = useState<string>("");
|
const [errorMessage, setErrorMessage] = useState<string>("");
|
||||||
|
const [isInitialized, setIsInitialized] = useState(false);
|
||||||
|
|
||||||
|
// Load saved customer data from localStorage on mount
|
||||||
|
useEffect(() => {
|
||||||
|
const savedName = localStorage.getItem("bookingForm_customerName");
|
||||||
|
const savedEmail = localStorage.getItem("bookingForm_customerEmail");
|
||||||
|
const savedPhone = localStorage.getItem("bookingForm_customerPhone");
|
||||||
|
|
||||||
|
if (savedName) setCustomerName(savedName);
|
||||||
|
if (savedEmail) setCustomerEmail(savedEmail);
|
||||||
|
if (savedPhone) setCustomerPhone(savedPhone);
|
||||||
|
|
||||||
|
setIsInitialized(true);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Save customer data to localStorage when it changes (after initial load)
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isInitialized) return;
|
||||||
|
if (customerName) {
|
||||||
|
localStorage.setItem("bookingForm_customerName", customerName);
|
||||||
|
} else {
|
||||||
|
localStorage.removeItem("bookingForm_customerName");
|
||||||
|
}
|
||||||
|
}, [customerName, isInitialized]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isInitialized) return;
|
||||||
|
if (customerEmail) {
|
||||||
|
localStorage.setItem("bookingForm_customerEmail", customerEmail);
|
||||||
|
} else {
|
||||||
|
localStorage.removeItem("bookingForm_customerEmail");
|
||||||
|
}
|
||||||
|
}, [customerEmail, isInitialized]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isInitialized) return;
|
||||||
|
if (customerPhone) {
|
||||||
|
localStorage.setItem("bookingForm_customerPhone", customerPhone);
|
||||||
|
} else {
|
||||||
|
localStorage.removeItem("bookingForm_customerPhone");
|
||||||
|
}
|
||||||
|
}, [customerPhone, isInitialized]);
|
||||||
|
|
||||||
const { data: treatments } = useQuery(
|
const { data: treatments } = useQuery(
|
||||||
queryClient.treatments.live.list.experimental_liveOptions()
|
queryClient.treatments.live.list.experimental_liveOptions()
|
||||||
);
|
);
|
||||||
|
|
||||||
// Lade alle Slots live und filtere freie Slots
|
// Dynamische Verfügbarkeitsabfrage für das gewählte Datum und die Behandlung
|
||||||
const { data: allSlots } = useQuery(
|
const { data: availableTimes, isLoading, isFetching, error } = useQuery({
|
||||||
queryClient.availability.live.list.experimental_liveOptions()
|
...queryClient.recurringAvailability.getAvailableTimes.queryOptions({
|
||||||
);
|
input: {
|
||||||
|
date: appointmentDate,
|
||||||
// Filtere freie Slots und entferne vergangene Termine
|
treatmentId: selectedTreatment
|
||||||
const today = new Date().toISOString().split("T")[0]; // YYYY-MM-DD
|
}
|
||||||
const freeSlots = (allSlots || []).filter((s) => {
|
}),
|
||||||
// Nur freie Slots
|
enabled: !!appointmentDate && !!selectedTreatment
|
||||||
if (s.status !== "free") return false;
|
|
||||||
|
|
||||||
// Nur zukünftige oder heutige Termine
|
|
||||||
if (s.date < today) return false;
|
|
||||||
|
|
||||||
// Für heute: nur zukünftige Uhrzeiten
|
|
||||||
if (s.date === today) {
|
|
||||||
const now = new Date();
|
|
||||||
const currentTime = `${String(now.getHours()).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}`;
|
|
||||||
if (s.time <= currentTime) return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const availableDates = Array.from(new Set(freeSlots.map((s) => s.date))).sort();
|
|
||||||
const slotsByDate = appointmentDate
|
|
||||||
? freeSlots.filter((s) => s.date === appointmentDate)
|
|
||||||
: [];
|
|
||||||
|
|
||||||
const { mutate: createBooking, isPending } = useMutation(
|
const { mutate: createBooking, isPending } = useMutation(
|
||||||
queryClient.bookings.create.mutationOptions()
|
queryClient.bookings.create.mutationOptions()
|
||||||
);
|
);
|
||||||
|
|
||||||
const selectedTreatmentData = treatments?.find((t) => t.id === selectedTreatment);
|
const selectedTreatmentData = treatments?.find((t) => t.id === selectedTreatment);
|
||||||
const availableSlots = slotsByDate || []; // Slots sind bereits gefiltert
|
|
||||||
|
// Clear selectedTime when treatment changes
|
||||||
// Debug logging (commented out - uncomment if needed)
|
const handleTreatmentChange = (treatmentId: string) => {
|
||||||
// console.log("Debug - All slots:", allSlots);
|
setSelectedTreatment(treatmentId);
|
||||||
// console.log("Debug - Free slots:", freeSlots);
|
setSelectedTime("");
|
||||||
// console.log("Debug - Available dates:", availableDates);
|
};
|
||||||
// console.log("Debug - Selected date:", appointmentDate);
|
|
||||||
// console.log("Debug - Slots by date:", slotsByDate);
|
// Clear selectedTime when it becomes invalid
|
||||||
// console.log("Debug - Available slots:", availableSlots);
|
useEffect(() => {
|
||||||
|
if (selectedTime && availableTimes && !availableTimes.includes(selectedTime)) {
|
||||||
// Additional debugging for slot status
|
setSelectedTime("");
|
||||||
// if (allSlots && allSlots.length > 0) {
|
}
|
||||||
// const statusCounts = allSlots.reduce((acc, slot) => {
|
}, [availableTimes, selectedTime]);
|
||||||
// acc[slot.status] = (acc[slot.status] || 0) + 1;
|
|
||||||
// return acc;
|
// Helper function for local date in YYYY-MM-DD format
|
||||||
// }, {} as Record<string, number>);
|
const getLocalYmd = () => {
|
||||||
// console.log("Debug - Slot status counts:", statusCounts);
|
const now = new Date();
|
||||||
// }
|
const year = now.getFullYear();
|
||||||
|
const month = String(now.getMonth() + 1).padStart(2, '0');
|
||||||
|
const day = String(now.getDate()).padStart(2, '0');
|
||||||
|
return `${year}-${month}-${day}`;
|
||||||
|
};
|
||||||
|
|
||||||
const handlePhotoUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
const handlePhotoUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
const file = e.target.files?.[0];
|
const file = e.target.files?.[0];
|
||||||
@@ -153,7 +182,7 @@ export function BookingForm() {
|
|||||||
// agbAccepted
|
// agbAccepted
|
||||||
// });
|
// });
|
||||||
|
|
||||||
if (!selectedTreatment || !customerName || !customerEmail || !customerPhone || !appointmentDate || !selectedSlotId) {
|
if (!selectedTreatment || !customerName || !customerEmail || !customerPhone || !appointmentDate || !selectedTime) {
|
||||||
setErrorMessage("Bitte fülle alle erforderlichen Felder aus.");
|
setErrorMessage("Bitte fülle alle erforderlichen Felder aus.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -161,10 +190,13 @@ export function BookingForm() {
|
|||||||
setErrorMessage("Bitte bestätige die Kenntnisnahme der Allgemeinen Geschäftsbedingungen.");
|
setErrorMessage("Bitte bestätige die Kenntnisnahme der Allgemeinen Geschäftsbedingungen.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if (!ageConfirmed) {
|
||||||
|
setErrorMessage("Bitte bestätige, dass du mindestens 16 Jahre alt bist.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// Email validation now handled in backend before slot reservation
|
// Email validation now handled in backend before booking creation
|
||||||
const slot = availableSlots.find((s) => s.id === selectedSlotId);
|
const appointmentTime = selectedTime;
|
||||||
const appointmentTime = slot?.time || "";
|
|
||||||
// console.log("Creating booking with data:", {
|
// console.log("Creating booking with data:", {
|
||||||
// treatmentId: selectedTreatment,
|
// treatmentId: selectedTreatment,
|
||||||
// customerName,
|
// customerName,
|
||||||
@@ -173,8 +205,7 @@ export function BookingForm() {
|
|||||||
// appointmentDate,
|
// appointmentDate,
|
||||||
// appointmentTime,
|
// appointmentTime,
|
||||||
// notes,
|
// notes,
|
||||||
// inspirationPhoto,
|
// inspirationPhoto
|
||||||
// slotId: selectedSlotId,
|
|
||||||
// });
|
// });
|
||||||
createBooking(
|
createBooking(
|
||||||
{
|
{
|
||||||
@@ -186,7 +217,6 @@ export function BookingForm() {
|
|||||||
appointmentTime,
|
appointmentTime,
|
||||||
notes,
|
notes,
|
||||||
inspirationPhoto,
|
inspirationPhoto,
|
||||||
slotId: selectedSlotId,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
@@ -195,9 +225,10 @@ export function BookingForm() {
|
|||||||
setCustomerEmail("");
|
setCustomerEmail("");
|
||||||
setCustomerPhone("");
|
setCustomerPhone("");
|
||||||
setAppointmentDate("");
|
setAppointmentDate("");
|
||||||
setSelectedSlotId("");
|
setSelectedTime("");
|
||||||
setNotes("");
|
setNotes("");
|
||||||
setAgbAccepted(false);
|
setAgbAccepted(false);
|
||||||
|
setAgeConfirmed(false);
|
||||||
setInspirationPhoto("");
|
setInspirationPhoto("");
|
||||||
setPhotoPreview("");
|
setPhotoPreview("");
|
||||||
setErrorMessage("");
|
setErrorMessage("");
|
||||||
@@ -224,7 +255,8 @@ export function BookingForm() {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Get minimum date (today) – nicht mehr genutzt, Datumsauswahl erfolgt aus freien Slots
|
// Dynamische Zeitauswahl: Kunde wählt beliebiges zukünftiges Datum,
|
||||||
|
// System berechnet verfügbare Zeiten in 15-Minuten-Intervallen basierend auf wiederkehrenden Regeln
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="max-w-2xl mx-auto bg-white rounded-lg shadow-lg p-6">
|
<div className="max-w-2xl mx-auto bg-white rounded-lg shadow-lg p-6">
|
||||||
@@ -238,7 +270,7 @@ export function BookingForm() {
|
|||||||
</label>
|
</label>
|
||||||
<select
|
<select
|
||||||
value={selectedTreatment}
|
value={selectedTreatment}
|
||||||
onChange={(e) => setSelectedTreatment(e.target.value)}
|
onChange={(e) => handleTreatmentChange(e.target.value)}
|
||||||
className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-pink-500 focus:border-pink-500"
|
className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-pink-500 focus:border-pink-500"
|
||||||
required
|
required
|
||||||
>
|
>
|
||||||
@@ -299,48 +331,53 @@ export function BookingForm() {
|
|||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
Datum (nur freie Termine) *
|
Wunschdatum *
|
||||||
</label>
|
</label>
|
||||||
<select
|
<input
|
||||||
|
type="date"
|
||||||
value={appointmentDate}
|
value={appointmentDate}
|
||||||
onChange={(e) => { setAppointmentDate(e.target.value); setSelectedSlotId(""); }}
|
onChange={(e) => { setAppointmentDate(e.target.value); setSelectedTime(""); }}
|
||||||
|
min={getLocalYmd()}
|
||||||
className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-pink-500 focus:border-pink-500"
|
className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-pink-500 focus:border-pink-500"
|
||||||
required
|
required
|
||||||
>
|
/>
|
||||||
<option value="">Datum auswählen</option>
|
|
||||||
{availableDates.map((d) => (
|
|
||||||
<option key={d} value={d}>{d}</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
{availableDates.length === 0 && (
|
|
||||||
<p className="mt-2 text-sm text-gray-500">Aktuell keine freien Termine verfügbar.</p>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
Verfügbare Uhrzeit *
|
Verfügbare Uhrzeit (15-Min-Raster) *
|
||||||
</label>
|
</label>
|
||||||
<select
|
<select
|
||||||
value={selectedSlotId}
|
value={selectedTime}
|
||||||
onChange={(e) => setSelectedSlotId(e.target.value)}
|
onChange={(e) => setSelectedTime(e.target.value)}
|
||||||
className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-pink-500 focus:border-pink-500"
|
className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-pink-500 focus:border-pink-500"
|
||||||
disabled={!appointmentDate || !selectedTreatment}
|
disabled={!appointmentDate || !selectedTreatment || isLoading || isFetching}
|
||||||
required
|
required
|
||||||
>
|
>
|
||||||
<option value="">Zeit auswählen</option>
|
<option value="">Zeit auswählen</option>
|
||||||
{availableSlots
|
{availableTimes?.map((time) => (
|
||||||
.sort((a, b) => a.time.localeCompare(b.time))
|
<option key={time} value={time}>
|
||||||
.map((slot) => (
|
{time}
|
||||||
<option key={slot.id} value={slot.id}>
|
</option>
|
||||||
{slot.time} ({slot.durationMinutes} min)
|
))}
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
</select>
|
||||||
{appointmentDate && availableSlots.length === 0 && (
|
{appointmentDate && selectedTreatment && isLoading && (
|
||||||
<p className="mt-2 text-sm text-gray-500">
|
<p className="mt-2 text-sm text-gray-500">
|
||||||
Keine freien Zeitslots für {appointmentDate} verfügbar.
|
Lade verfügbare Zeiten...
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
|
{appointmentDate && selectedTreatment && error && (
|
||||||
|
<p className="mt-2 text-sm text-red-500">
|
||||||
|
Fehler beim Laden der verfügbaren Zeiten. Bitte versuche es erneut.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{appointmentDate && selectedTreatment && !isLoading && !isFetching && !error && (!availableTimes || availableTimes.length === 0) && (
|
||||||
|
<p className="mt-2 text-sm text-gray-500">
|
||||||
|
Keine verfügbaren Zeiten für dieses Datum. Bitte wähle ein anderes Datum.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{selectedTreatmentData && (
|
||||||
|
<p className="mt-1 text-xs text-gray-500">Dauer: {selectedTreatmentData.duration} Minuten</p>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -394,7 +431,7 @@ export function BookingForm() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* AGB Acceptance */}
|
{/* AGB Acceptance */}
|
||||||
<div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
|
<div className="bg-gray-50 border border-gray-200 rounded-lg p-4 space-y-4">
|
||||||
<div className="flex items-start space-x-3">
|
<div className="flex items-start space-x-3">
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
@@ -420,6 +457,22 @@ export function BookingForm() {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-start space-x-3">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
id="age-confirmation"
|
||||||
|
checked={ageConfirmed}
|
||||||
|
onChange={(e) => setAgeConfirmed(e.target.checked)}
|
||||||
|
className="mt-1 h-4 w-4 text-pink-600 focus:ring-pink-500 border-gray-300 rounded"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<div className="flex-1">
|
||||||
|
<label htmlFor="age-confirmation" className="text-sm font-medium text-gray-700 cursor-pointer">
|
||||||
|
Ich bestätige, dass ich mindestens 16 Jahre alt bin *
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Error Message */}
|
{/* Error Message */}
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import { useQuery, useMutation } from "@tanstack/react-query";
|
import { useQuery, useMutation } from "@tanstack/react-query";
|
||||||
import { queryClient } from "@/client/rpc-client";
|
import { queryClient } from "@/client/rpc-client";
|
||||||
|
|
||||||
@@ -57,12 +57,34 @@ export default function BookingStatusPage({ token }: BookingStatusPageProps) {
|
|||||||
const [showCancelConfirm, setShowCancelConfirm] = useState(false);
|
const [showCancelConfirm, setShowCancelConfirm] = useState(false);
|
||||||
const [isCancelling, setIsCancelling] = useState(false);
|
const [isCancelling, setIsCancelling] = useState(false);
|
||||||
const [cancellationResult, setCancellationResult] = useState<{ success: boolean; message: string; formattedDate?: string } | null>(null);
|
const [cancellationResult, setCancellationResult] = useState<{ success: boolean; message: string; formattedDate?: string } | null>(null);
|
||||||
|
const [rescheduleProposal, setRescheduleProposal] = useState<any | null>(null);
|
||||||
|
const [rescheduleResult, setRescheduleResult] = useState<{ success: boolean; message: string } | null>(null);
|
||||||
|
const [isAccepting, setIsAccepting] = useState(false);
|
||||||
|
const [isDeclining, setIsDeclining] = useState(false);
|
||||||
|
const [showDeclineConfirm, setShowDeclineConfirm] = useState(false);
|
||||||
|
const [oneClickAction, setOneClickAction] = useState<string | null>(null);
|
||||||
|
const [oneClickLoading, setOneClickLoading] = useState(false);
|
||||||
|
|
||||||
// Fetch booking details
|
// Fetch booking details
|
||||||
const { data: booking, isLoading, error, refetch } = useQuery(
|
const { data: booking, isLoading, error, refetch, error: bookingError } = useQuery(
|
||||||
queryClient.cancellation.getBookingByToken.queryOptions({ input: { token } })
|
queryClient.cancellation.getBookingByToken.queryOptions({ input: { token } })
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Try fetching reschedule proposal if booking not found or error
|
||||||
|
const rescheduleQuery = useQuery({
|
||||||
|
...queryClient.cancellation.getRescheduleProposal.queryOptions({ input: { token } }),
|
||||||
|
enabled: !!token && (!!bookingError || !booking),
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle reschedule proposal data
|
||||||
|
useEffect(() => {
|
||||||
|
if (rescheduleQuery.data) {
|
||||||
|
setRescheduleProposal(rescheduleQuery.data);
|
||||||
|
} else if (rescheduleQuery.error) {
|
||||||
|
setRescheduleProposal(null);
|
||||||
|
}
|
||||||
|
}, [rescheduleQuery.data, rescheduleQuery.error]);
|
||||||
|
|
||||||
// Cancellation mutation
|
// Cancellation mutation
|
||||||
const cancelMutation = useMutation({
|
const cancelMutation = useMutation({
|
||||||
...queryClient.cancellation.cancelByToken.mutationOptions(),
|
...queryClient.cancellation.cancelByToken.mutationOptions(),
|
||||||
@@ -85,12 +107,88 @@ export default function BookingStatusPage({ token }: BookingStatusPageProps) {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const acceptMutation = useMutation({
|
||||||
|
...queryClient.bookings.acceptReschedule.mutationOptions(),
|
||||||
|
onSuccess: (result: any) => {
|
||||||
|
setRescheduleResult({ success: true, message: result.message });
|
||||||
|
setIsAccepting(false);
|
||||||
|
setShowDeclineConfirm(false);
|
||||||
|
refetch();
|
||||||
|
},
|
||||||
|
onError: (error: any) => {
|
||||||
|
setRescheduleResult({ success: false, message: error?.message || 'Ein Fehler ist aufgetreten.' });
|
||||||
|
setIsAccepting(false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const declineMutation = useMutation({
|
||||||
|
...queryClient.bookings.declineReschedule.mutationOptions(),
|
||||||
|
onSuccess: (result: any) => {
|
||||||
|
setRescheduleResult({ success: true, message: result.message });
|
||||||
|
setIsDeclining(false);
|
||||||
|
setShowDeclineConfirm(false);
|
||||||
|
},
|
||||||
|
onError: (error: any) => {
|
||||||
|
setRescheduleResult({ success: false, message: error?.message || 'Ein Fehler ist aufgetreten.' });
|
||||||
|
setIsDeclining(false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
const handleCancel = () => {
|
const handleCancel = () => {
|
||||||
setIsCancelling(true);
|
setIsCancelling(true);
|
||||||
setCancellationResult(null);
|
setCancellationResult(null);
|
||||||
cancelMutation.mutate({ token });
|
cancelMutation.mutate({ token });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Handle one-click actions from URL parameters
|
||||||
|
useEffect(() => {
|
||||||
|
if (rescheduleProposal && !oneClickAction) {
|
||||||
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
|
const action = urlParams.get('action');
|
||||||
|
|
||||||
|
if (action === 'accept' || action === 'decline') {
|
||||||
|
setOneClickAction(action);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [rescheduleProposal, oneClickAction]);
|
||||||
|
|
||||||
|
// Auto-execute one-click action
|
||||||
|
useEffect(() => {
|
||||||
|
if (oneClickAction && rescheduleProposal && !oneClickLoading && !rescheduleResult) {
|
||||||
|
setOneClickLoading(true);
|
||||||
|
|
||||||
|
if (oneClickAction === 'accept') {
|
||||||
|
const confirmAccept = window.confirm(
|
||||||
|
`Möchtest du den neuen Termin am ${rescheduleProposal.proposed.date} um ${rescheduleProposal.proposed.time} Uhr akzeptieren?`
|
||||||
|
);
|
||||||
|
if (confirmAccept) {
|
||||||
|
acceptMutation.mutate({ token });
|
||||||
|
} else {
|
||||||
|
setOneClickLoading(false);
|
||||||
|
setOneClickAction(null);
|
||||||
|
}
|
||||||
|
} else if (oneClickAction === 'decline') {
|
||||||
|
const confirmDecline = window.confirm(
|
||||||
|
`Möchtest du den Vorschlag ablehnen? Dein ursprünglicher Termin am ${rescheduleProposal.original.date} um ${rescheduleProposal.original.time} Uhr bleibt dann bestehen.`
|
||||||
|
);
|
||||||
|
if (confirmDecline) {
|
||||||
|
declineMutation.mutate({ token });
|
||||||
|
} else {
|
||||||
|
setOneClickLoading(false);
|
||||||
|
setOneClickAction(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [oneClickAction, rescheduleProposal, oneClickLoading, rescheduleResult, acceptMutation, declineMutation, token]);
|
||||||
|
|
||||||
|
// Reset one-click loading when mutations complete
|
||||||
|
useEffect(() => {
|
||||||
|
if (rescheduleResult) {
|
||||||
|
setOneClickLoading(false);
|
||||||
|
setOneClickAction(null);
|
||||||
|
}
|
||||||
|
}, [rescheduleResult]);
|
||||||
|
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gradient-to-br from-pink-50 to-purple-50 flex items-center justify-center p-4">
|
<div className="min-h-screen bg-gradient-to-br from-pink-50 to-purple-50 flex items-center justify-center p-4">
|
||||||
@@ -104,7 +202,7 @@ export default function BookingStatusPage({ token }: BookingStatusPageProps) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (error) {
|
if (error && !rescheduleProposal) {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gradient-to-br from-pink-50 to-purple-50 flex items-center justify-center p-4">
|
<div className="min-h-screen bg-gradient-to-br from-pink-50 to-purple-50 flex items-center justify-center p-4">
|
||||||
<div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full">
|
<div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full">
|
||||||
@@ -114,23 +212,33 @@ export default function BookingStatusPage({ token }: BookingStatusPageProps) {
|
|||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<h2 className="text-xl font-bold text-gray-900 mb-2">Fehler</h2>
|
<h2 className="text-xl font-bold text-gray-900 mb-2">Link nicht verfügbar</h2>
|
||||||
<p className="text-gray-600 mb-4">
|
<p className="text-gray-600 mb-4">
|
||||||
{error?.message || "Der Link ist ungültig oder abgelaufen."}
|
Dieser Buchungslink ist nicht mehr verfügbar. Mögliche Gründe:
|
||||||
</p>
|
</p>
|
||||||
<a
|
<ul className="text-sm text-gray-600 text-left mb-6 space-y-2">
|
||||||
href="/"
|
<li>• Der Link ist abgelaufen</li>
|
||||||
className="inline-flex items-center px-4 py-2 bg-pink-600 text-white rounded-lg hover:bg-pink-700 transition-colors"
|
<li>• Die Buchung wurde bereits storniert</li>
|
||||||
>
|
<li>• Der Link wurde bereits verwendet</li>
|
||||||
Zur Startseite
|
</ul>
|
||||||
</a>
|
<div className="space-y-3">
|
||||||
|
<a
|
||||||
|
href="/"
|
||||||
|
className="inline-flex items-center px-4 py-2 bg-pink-600 text-white rounded-lg hover:bg-pink-700 transition-colors"
|
||||||
|
>
|
||||||
|
Neue Buchung erstellen
|
||||||
|
</a>
|
||||||
|
<p className="text-sm text-gray-500">
|
||||||
|
Bei Fragen wende dich direkt an uns.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!booking) {
|
if (!booking && !rescheduleProposal) {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gradient-to-br from-pink-50 to-purple-50 flex items-center justify-center p-4">
|
<div className="min-h-screen bg-gradient-to-br from-pink-50 to-purple-50 flex items-center justify-center p-4">
|
||||||
<div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full">
|
<div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full">
|
||||||
@@ -151,7 +259,142 @@ export default function BookingStatusPage({ token }: BookingStatusPageProps) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const statusInfo = getStatusInfo(booking.status);
|
if (rescheduleProposal) {
|
||||||
|
const isExpired = rescheduleProposal.isExpired;
|
||||||
|
const handleAccept = () => {
|
||||||
|
setIsAccepting(true);
|
||||||
|
setRescheduleResult(null);
|
||||||
|
acceptMutation.mutate({ token });
|
||||||
|
};
|
||||||
|
const handleDecline = () => {
|
||||||
|
setIsDeclining(true);
|
||||||
|
setRescheduleResult(null);
|
||||||
|
declineMutation.mutate({ token });
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gradient-to-br from-pink-50 to-purple-50 py-8 px-4">
|
||||||
|
<div className="max-w-2xl mx-auto">
|
||||||
|
<div className="bg-white rounded-lg shadow-lg p-6 mb-6">
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<img src="/assets/stargilnails_logo_transparent_112.png" alt="Stargil Nails Logo" className="w-16 h-16 object-contain" />
|
||||||
|
<span className={`px-4 py-2 rounded-full text-sm font-semibold bg-orange-100 text-orange-800`}>
|
||||||
|
⚠️ Terminänderung vorgeschlagen
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900">Vorschlag zur Terminänderung</h1>
|
||||||
|
<p className="text-gray-600 mt-1">Bitte bestätige, ob der neue Termin für dich passt.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{oneClickLoading && (
|
||||||
|
<div className="mb-6 p-4 rounded-lg bg-blue-50 border border-blue-200">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-500 mr-3"></div>
|
||||||
|
<p className="text-blue-800">
|
||||||
|
{oneClickAction === 'accept' ? 'Akzeptiere Termin...' : 'Lehne Termin ab...'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{rescheduleResult && (
|
||||||
|
<div className={`mb-6 p-4 rounded-lg ${rescheduleResult.success ? 'bg-green-50 border border-green-200' : 'bg-red-50 border border-red-200'}`}>
|
||||||
|
<p className={rescheduleResult.success ? 'text-green-800' : 'text-red-800'}>
|
||||||
|
{rescheduleResult.message}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="bg-white rounded-lg shadow-lg p-6 mb-6">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">Vergleich</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div className="border rounded-lg p-4 bg-gray-50">
|
||||||
|
<div className="text-sm text-gray-500 font-semibold mb-1">Aktueller Termin</div>
|
||||||
|
<div className="text-gray-900 font-medium">{rescheduleProposal.original.date} um {rescheduleProposal.original.time} Uhr</div>
|
||||||
|
<div className="text-gray-700 text-sm">{rescheduleProposal.booking.treatmentName}</div>
|
||||||
|
</div>
|
||||||
|
<div className="border rounded-lg p-4 bg-orange-50">
|
||||||
|
<div className="text-sm text-orange-700 font-semibold mb-1">Neuer Vorschlag</div>
|
||||||
|
<div className="text-gray-900 font-medium">{rescheduleProposal.proposed.date} um {rescheduleProposal.proposed.time} Uhr</div>
|
||||||
|
<div className="text-gray-700 text-sm">{rescheduleProposal.booking.treatmentName}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4 bg-yellow-50 border border-yellow-200 rounded-lg p-3 text-sm text-yellow-800">
|
||||||
|
Bitte antworte bis {new Date(rescheduleProposal.expiresAt).toLocaleDateString('de-DE')} {new Date(rescheduleProposal.expiresAt).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })} ({rescheduleProposal.hoursUntilExpiry} Stunden).
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{!isExpired && !rescheduleResult && !oneClickLoading && (
|
||||||
|
<div className="bg-white rounded-lg shadow-lg p-6 mb-6">
|
||||||
|
<div className="flex flex-col sm:flex-row gap-3">
|
||||||
|
<button
|
||||||
|
onClick={handleAccept}
|
||||||
|
disabled={isAccepting}
|
||||||
|
className="flex-1 bg-green-600 text-white py-3 px-4 rounded-lg font-medium hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||||
|
>
|
||||||
|
{isAccepting ? 'Akzeptiere...' : 'Neuen Termin akzeptieren'}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowDeclineConfirm(true)}
|
||||||
|
disabled={isDeclining}
|
||||||
|
className="flex-1 bg-red-600 text-white py-3 px-4 rounded-lg font-medium hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||||
|
>
|
||||||
|
Vorschlag ablehnen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="mt-3 text-sm text-gray-600">Wenn du ablehnst, bleibt dein ursprünglicher Termin bestehen.</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{isExpired && (
|
||||||
|
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
|
||||||
|
<p className="text-yellow-800 text-sm">
|
||||||
|
Diese Terminänderung ist abgelaufen. Dein ursprünglicher Termin bleibt bestehen. Bei Fragen kontaktiere uns bitte.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{showDeclineConfirm && (
|
||||||
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||||
|
<div className="bg-white rounded-lg shadow-xl p-6 w-full max-w-md">
|
||||||
|
<h4 className="text-lg font-semibold text-gray-900 mb-2">Vorschlag ablehnen?</h4>
|
||||||
|
<p className="text-sm text-gray-700 mb-4">
|
||||||
|
Bist du sicher, dass du den neuen Terminvorschlag ablehnen möchtest?<br />
|
||||||
|
Dein ursprünglicher Termin am {rescheduleProposal.original.date} um {rescheduleProposal.original.time} bleibt dann bestehen.
|
||||||
|
</p>
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<button
|
||||||
|
onClick={() => setShowDeclineConfirm(false)}
|
||||||
|
className="flex-1 bg-gray-100 text-gray-700 py-2 rounded-lg hover:bg-gray-200"
|
||||||
|
>
|
||||||
|
Abbrechen
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleDecline}
|
||||||
|
disabled={isDeclining}
|
||||||
|
className="flex-1 bg-red-600 text-white py-2 rounded-lg hover:bg-red-700 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{isDeclining ? 'Lehne ab...' : 'Ja, ablehnen'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="text-center">
|
||||||
|
<a href="/" className="inline-flex items-center text-pink-600 hover:text-pink-700 font-medium">
|
||||||
|
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||||
|
</svg>
|
||||||
|
Zurück zur Startseite
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const statusInfo = getStatusInfo(booking?.status || "pending");
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gradient-to-br from-pink-50 to-purple-50 py-8 px-4">
|
<div className="min-h-screen bg-gradient-to-br from-pink-50 to-purple-50 py-8 px-4">
|
||||||
@@ -194,22 +437,22 @@ export default function BookingStatusPage({ token }: BookingStatusPageProps) {
|
|||||||
<h2 className={`text-xl font-bold ${statusInfo.textColor} mb-2`}>
|
<h2 className={`text-xl font-bold ${statusInfo.textColor} mb-2`}>
|
||||||
Status: {statusInfo.label}
|
Status: {statusInfo.label}
|
||||||
</h2>
|
</h2>
|
||||||
{booking.status === "pending" && (
|
{booking?.status === "pending" && (
|
||||||
<p className={statusInfo.textColor}>
|
<p className={statusInfo.textColor}>
|
||||||
Wir haben deine Terminanfrage erhalten und werden sie in Kürze prüfen. Du erhältst eine E-Mail, sobald dein Termin bestätigt wurde.
|
Wir haben deine Terminanfrage erhalten und werden sie in Kürze prüfen. Du erhältst eine E-Mail, sobald dein Termin bestätigt wurde.
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
{booking.status === "confirmed" && (
|
{booking?.status === "confirmed" && (
|
||||||
<p className={statusInfo.textColor}>
|
<p className={statusInfo.textColor}>
|
||||||
Dein Termin wurde bestätigt! Wir freuen uns auf dich. Du hast eine Bestätigungs-E-Mail mit Kalendereintrag erhalten.
|
Dein Termin wurde bestätigt! Wir freuen uns auf dich. Du hast eine Bestätigungs-E-Mail mit Kalendereintrag erhalten.
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
{booking.status === "cancelled" && (
|
{booking?.status === "cancelled" && (
|
||||||
<p className={statusInfo.textColor}>
|
<p className={statusInfo.textColor}>
|
||||||
Dieser Termin wurde storniert. Du kannst jederzeit einen neuen Termin buchen.
|
Dieser Termin wurde storniert. Du kannst jederzeit einen neuen Termin buchen.
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
{booking.status === "completed" && (
|
{booking?.status === "completed" && (
|
||||||
<p className={statusInfo.textColor}>
|
<p className={statusInfo.textColor}>
|
||||||
Dieser Termin wurde erfolgreich abgeschlossen. Vielen Dank für deinen Besuch!
|
Dieser Termin wurde erfolgreich abgeschlossen. Vielen Dank für deinen Besuch!
|
||||||
</p>
|
</p>
|
||||||
@@ -229,27 +472,27 @@ export default function BookingStatusPage({ token }: BookingStatusPageProps) {
|
|||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<div className="flex justify-between py-2 border-b border-gray-100">
|
<div className="flex justify-between py-2 border-b border-gray-100">
|
||||||
<span className="text-gray-600">Datum:</span>
|
<span className="text-gray-600">Datum:</span>
|
||||||
<span className="font-medium text-gray-900">{booking.formattedDate}</span>
|
<span className="font-medium text-gray-900">{booking?.formattedDate}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between py-2 border-b border-gray-100">
|
<div className="flex justify-between py-2 border-b border-gray-100">
|
||||||
<span className="text-gray-600">Uhrzeit:</span>
|
<span className="text-gray-600">Uhrzeit:</span>
|
||||||
<span className="font-medium text-gray-900">{booking.appointmentTime} Uhr</span>
|
<span className="font-medium text-gray-900">{booking?.appointmentTime} Uhr</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between py-2 border-b border-gray-100">
|
<div className="flex justify-between py-2 border-b border-gray-100">
|
||||||
<span className="text-gray-600">Behandlung:</span>
|
<span className="text-gray-600">Behandlung:</span>
|
||||||
<span className="font-medium text-gray-900">{booking.treatmentName}</span>
|
<span className="font-medium text-gray-900">{booking?.treatmentName}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between py-2 border-b border-gray-100">
|
<div className="flex justify-between py-2 border-b border-gray-100">
|
||||||
<span className="text-gray-600">Dauer:</span>
|
<span className="text-gray-600">Dauer:</span>
|
||||||
<span className="font-medium text-gray-900">{booking.treatmentDuration} Minuten</span>
|
<span className="font-medium text-gray-900">{booking?.treatmentDuration} Minuten</span>
|
||||||
</div>
|
</div>
|
||||||
{booking.treatmentPrice > 0 && (
|
{booking?.treatmentPrice && booking.treatmentPrice > 0 && (
|
||||||
<div className="flex justify-between py-2 border-b border-gray-100">
|
<div className="flex justify-between py-2 border-b border-gray-100">
|
||||||
<span className="text-gray-600">Preis:</span>
|
<span className="text-gray-600">Preis:</span>
|
||||||
<span className="font-medium text-gray-900">{booking.treatmentPrice.toFixed(2)} €</span>
|
<span className="font-medium text-gray-900">{booking.treatmentPrice.toFixed(2)} €</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{booking.hoursUntilAppointment > 0 && booking.status !== "cancelled" && booking.status !== "completed" && (
|
{booking?.hoursUntilAppointment && booking.hoursUntilAppointment > 0 && booking.status !== "cancelled" && booking.status !== "completed" && (
|
||||||
<div className="flex justify-between py-2">
|
<div className="flex justify-between py-2">
|
||||||
<span className="text-gray-600">Verbleibende Zeit:</span>
|
<span className="text-gray-600">Verbleibende Zeit:</span>
|
||||||
<span className="font-medium text-pink-600">
|
<span className="font-medium text-pink-600">
|
||||||
@@ -271,18 +514,18 @@ export default function BookingStatusPage({ token }: BookingStatusPageProps) {
|
|||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<div className="flex justify-between py-2 border-b border-gray-100">
|
<div className="flex justify-between py-2 border-b border-gray-100">
|
||||||
<span className="text-gray-600">Name:</span>
|
<span className="text-gray-600">Name:</span>
|
||||||
<span className="font-medium text-gray-900">{booking.customerName}</span>
|
<span className="font-medium text-gray-900">{booking?.customerName}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between py-2 border-b border-gray-100">
|
<div className="flex justify-between py-2 border-b border-gray-100">
|
||||||
<span className="text-gray-600">E-Mail:</span>
|
<span className="text-gray-600">E-Mail:</span>
|
||||||
<span className="font-medium text-gray-900">{booking.customerEmail}</span>
|
<span className="font-medium text-gray-900">{booking?.customerEmail || '—'}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between py-2">
|
<div className="flex justify-between py-2">
|
||||||
<span className="text-gray-600">Telefon:</span>
|
<span className="text-gray-600">Telefon:</span>
|
||||||
<span className="font-medium text-gray-900">{booking.customerPhone}</span>
|
<span className="font-medium text-gray-900">{booking?.customerPhone || '—'}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{booking.notes && (
|
{booking?.notes && (
|
||||||
<div className="mt-4 pt-4 border-t border-gray-200">
|
<div className="mt-4 pt-4 border-t border-gray-200">
|
||||||
<h3 className="text-sm font-semibold text-gray-700 mb-2">Notizen:</h3>
|
<h3 className="text-sm font-semibold text-gray-700 mb-2">Notizen:</h3>
|
||||||
<p className="text-gray-600 text-sm">{booking.notes}</p>
|
<p className="text-gray-600 text-sm">{booking.notes}</p>
|
||||||
@@ -291,7 +534,7 @@ export default function BookingStatusPage({ token }: BookingStatusPageProps) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Cancellation Section */}
|
{/* Cancellation Section */}
|
||||||
{booking.canCancel && !cancellationResult?.success && (
|
{booking?.canCancel && !cancellationResult?.success && (
|
||||||
<div className="bg-white rounded-lg shadow-lg p-6 mb-6">
|
<div className="bg-white rounded-lg shadow-lg p-6 mb-6">
|
||||||
<h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
|
<h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
|
||||||
<svg className="w-5 h-5 mr-2 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="w-5 h-5 mr-2 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
@@ -351,7 +594,7 @@ export default function BookingStatusPage({ token }: BookingStatusPageProps) {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{!booking.canCancel && booking.status !== "cancelled" && booking.status !== "completed" && (
|
{!booking?.canCancel && booking?.status !== "cancelled" && booking?.status !== "completed" && (
|
||||||
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
|
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
|
||||||
<p className="text-yellow-800 text-sm">
|
<p className="text-yellow-800 text-sm">
|
||||||
<strong>ℹ️ Stornierungsfrist abgelaufen:</strong> Dieser Termin liegt weniger als {parseInt(process.env.MIN_STORNO_TIMESPAN || "24")} Stunden in der Zukunft und kann nicht mehr online storniert werden. Bitte kontaktiere uns direkt.
|
<strong>ℹ️ Stornierungsfrist abgelaufen:</strong> Dieser Termin liegt weniger als {parseInt(process.env.MIN_STORNO_TIMESPAN || "24")} Stunden in der Zukunft und kann nicht mehr online storniert werden. Bitte kontaktiere uns direkt.
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { useState } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import { useAuth } from "@/client/components/auth-provider";
|
import { useAuth } from "@/client/components/auth-provider";
|
||||||
|
|
||||||
export function LoginForm() {
|
export function LoginForm() {
|
||||||
@@ -6,9 +6,27 @@ export function LoginForm() {
|
|||||||
const [password, setPassword] = useState("");
|
const [password, setPassword] = useState("");
|
||||||
const [error, setError] = useState("");
|
const [error, setError] = useState("");
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [isInitialized, setIsInitialized] = useState(false);
|
||||||
|
|
||||||
const { login } = useAuth();
|
const { login } = useAuth();
|
||||||
|
|
||||||
|
// Load saved username from localStorage on mount
|
||||||
|
useEffect(() => {
|
||||||
|
const savedUsername = localStorage.getItem("loginForm_username");
|
||||||
|
if (savedUsername) setUsername(savedUsername);
|
||||||
|
setIsInitialized(true);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Save username to localStorage when it changes (after initial load)
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isInitialized) return;
|
||||||
|
if (username) {
|
||||||
|
localStorage.setItem("loginForm_username", username);
|
||||||
|
} else {
|
||||||
|
localStorage.removeItem("loginForm_username");
|
||||||
|
}
|
||||||
|
}, [username, isInitialized]);
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
setError("");
|
setError("");
|
||||||
|
|||||||
262
src/client/components/profile-landing.tsx
Normal file
262
src/client/components/profile-landing.tsx
Normal file
@@ -0,0 +1,262 @@
|
|||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
import { queryClient } from "@/client/rpc-client";
|
||||||
|
|
||||||
|
interface ProfileLandingProps {
|
||||||
|
onNavigateToBooking: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function StarRating({ rating }: { rating: number }) {
|
||||||
|
return (
|
||||||
|
<div className="flex space-x-1">
|
||||||
|
{[1, 2, 3, 4, 5].map((star) => (
|
||||||
|
<span
|
||||||
|
key={star}
|
||||||
|
className={star <= rating ? "text-yellow-400" : "text-gray-300"}
|
||||||
|
>
|
||||||
|
★
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getDayName(dayOfWeek: number): string {
|
||||||
|
const days = [
|
||||||
|
"Sonntag",
|
||||||
|
"Montag",
|
||||||
|
"Dienstag",
|
||||||
|
"Mittwoch",
|
||||||
|
"Donnerstag",
|
||||||
|
"Freitag",
|
||||||
|
"Samstag",
|
||||||
|
];
|
||||||
|
return days[dayOfWeek];
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDate(date: Date): string {
|
||||||
|
return date.toLocaleDateString("de-DE", {
|
||||||
|
day: "2-digit",
|
||||||
|
month: "2-digit",
|
||||||
|
year: "numeric",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ProfileLanding({ onNavigateToBooking }: ProfileLandingProps) {
|
||||||
|
// Data fetching with live queries
|
||||||
|
const { data: galleryPhotos = [] } = useQuery(
|
||||||
|
queryClient.gallery.live.listPhotos.experimental_liveOptions()
|
||||||
|
);
|
||||||
|
const sortedPhotos = ([...galleryPhotos] as any[]).sort((a, b) => (a.order || 0) - (b.order || 0));
|
||||||
|
const featuredPhoto = sortedPhotos[0];
|
||||||
|
|
||||||
|
const { data: reviews = [] } = useQuery(
|
||||||
|
queryClient.reviews.live.listPublishedReviews.experimental_liveOptions()
|
||||||
|
);
|
||||||
|
|
||||||
|
const { data: recurringRules = [] } = useQuery(
|
||||||
|
queryClient.recurringAvailability.live.listRules.experimental_liveOptions()
|
||||||
|
);
|
||||||
|
|
||||||
|
const { data: socialMedia } = useQuery(
|
||||||
|
queryClient.social.getSocialMedia.queryOptions()
|
||||||
|
);
|
||||||
|
|
||||||
|
// Calculate next 7 days for opening hours
|
||||||
|
const getNext7Days = () => {
|
||||||
|
const days: Date[] = [];
|
||||||
|
const today = new Date();
|
||||||
|
for (let i = 0; i < 7; i++) {
|
||||||
|
const date = new Date(today);
|
||||||
|
date.setDate(today.getDate() + i);
|
||||||
|
days.push(date);
|
||||||
|
}
|
||||||
|
return days;
|
||||||
|
};
|
||||||
|
|
||||||
|
const next7Days = getNext7Days();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-6xl mx-auto space-y-12 py-8">
|
||||||
|
{/* Hero Section */}
|
||||||
|
<div className="bg-gradient-to-r from-pink-500 to-purple-600 rounded-lg shadow-lg p-8 text-white">
|
||||||
|
<h1 className="text-4xl md:text-5xl font-bold mb-4">
|
||||||
|
Stargirlnails Kiel
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl mb-2">Professionelles Nageldesign und -Pflege in Kiel</p>
|
||||||
|
<p className="text-lg mb-8 opacity-90">
|
||||||
|
Lass dich von mir verwöhnen und genieße hochwertige Nail Art und Pflegebehandlungen.
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
onClick={onNavigateToBooking}
|
||||||
|
className="bg-[#790dc6] text-white py-4 px-8 rounded-lg hover:bg-[#6609ad] text-lg font-semibold shadow-lg transition-colors w-full md:w-auto"
|
||||||
|
>
|
||||||
|
Termin buchen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Social Media Badges */}
|
||||||
|
{((socialMedia as any)?.tiktokProfile || (socialMedia as any)?.instagramProfile) && (
|
||||||
|
<div className="flex justify-center items-center gap-4">
|
||||||
|
{(socialMedia as any)?.instagramProfile && (
|
||||||
|
<a
|
||||||
|
href={(socialMedia as any).instagramProfile}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="flex items-center gap-2 bg-gradient-to-r from-purple-500 via-pink-500 to-orange-500 text-white px-6 py-3 rounded-full hover:shadow-lg transition-all hover:scale-105 font-semibold"
|
||||||
|
>
|
||||||
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
|
||||||
|
</svg>
|
||||||
|
Instagram
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
{(socialMedia as any)?.tiktokProfile && (
|
||||||
|
<a
|
||||||
|
href={(socialMedia as any).tiktokProfile}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="flex items-center gap-2 bg-black text-white px-6 py-3 rounded-full hover:shadow-lg transition-all hover:scale-105 font-semibold"
|
||||||
|
>
|
||||||
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/>
|
||||||
|
</svg>
|
||||||
|
TikTok
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Featured Section: Erstes Foto (Reihenfolge 0) */}
|
||||||
|
{featuredPhoto && (
|
||||||
|
<div className="bg-white rounded-lg shadow-lg p-0 overflow-hidden">
|
||||||
|
<img
|
||||||
|
src={(featuredPhoto as any).base64Data}
|
||||||
|
alt={(featuredPhoto as any).title || "Featured"}
|
||||||
|
className="w-full h-auto object-contain"
|
||||||
|
loading="eager"
|
||||||
|
decoding="async"
|
||||||
|
/>
|
||||||
|
{(featuredPhoto as any).title && (
|
||||||
|
<div className="p-4 border-t">
|
||||||
|
<h2 className="text-xl font-semibold text-gray-900">{(featuredPhoto as any).title}</h2>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Photo Gallery Section */}
|
||||||
|
<div className="bg-white rounded-lg shadow-lg p-6">
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-6">Unsere Arbeiten</h2>
|
||||||
|
{galleryPhotos.length > 0 ? (
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||||
|
{(sortedPhotos as typeof galleryPhotos)
|
||||||
|
.filter((p) => (featuredPhoto ? (p as any).id !== (featuredPhoto as any).id : true))
|
||||||
|
.slice(0, 9)
|
||||||
|
.map((photo, index) => (
|
||||||
|
<img
|
||||||
|
key={photo.id || index}
|
||||||
|
src={photo.base64Data}
|
||||||
|
alt={photo.title || "Gallery"}
|
||||||
|
loading="lazy"
|
||||||
|
decoding="async"
|
||||||
|
className="w-full h-48 object-cover rounded-lg shadow-md"
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-gray-600 text-center py-8">
|
||||||
|
Galerie wird bald aktualisiert
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Opening Hours Section */}
|
||||||
|
<div className="bg-white rounded-lg shadow-lg p-6">
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-6">
|
||||||
|
Öffnungszeiten (Nächste 7 Tage)
|
||||||
|
</h2>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{next7Days.map((date, index) => {
|
||||||
|
const dayOfWeek = date.getDay();
|
||||||
|
const dayRules = recurringRules.filter(
|
||||||
|
(rule) => rule.isActive && rule.dayOfWeek === dayOfWeek
|
||||||
|
);
|
||||||
|
const sorted = [...dayRules].sort((a, b) =>
|
||||||
|
a.startTime.localeCompare(b.startTime)
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className={`p-4 rounded-lg ${
|
||||||
|
index % 2 === 0 ? "bg-gray-50" : "bg-white"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="font-semibold text-gray-900">
|
||||||
|
{getDayName(dayOfWeek)}, {formatDate(date)}
|
||||||
|
</span>
|
||||||
|
<div className="text-gray-700">
|
||||||
|
{dayRules.length > 0 ? (
|
||||||
|
<div className="space-y-1">
|
||||||
|
{sorted.map((rule) => (
|
||||||
|
<div
|
||||||
|
key={`${rule.dayOfWeek}-${rule.startTime}-${rule.endTime}`}
|
||||||
|
>
|
||||||
|
{rule.startTime} - {rule.endTime} Uhr
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<span className="text-gray-500">Geschlossen</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Customer Reviews Section */}
|
||||||
|
<div className="bg-white rounded-lg shadow-lg p-6">
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-6">
|
||||||
|
Kundenbewertungen
|
||||||
|
</h2>
|
||||||
|
{reviews.length > 0 ? (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{reviews.slice(0, 10).map((review) => (
|
||||||
|
<div
|
||||||
|
key={
|
||||||
|
(review as any).id ||
|
||||||
|
(review as any).bookingId ||
|
||||||
|
`${(review as any).createdAt}-${(review as any).customerName}`
|
||||||
|
}
|
||||||
|
className="bg-gray-50 p-4 rounded-lg shadow-md"
|
||||||
|
>
|
||||||
|
<div className="flex justify-between items-start mb-2">
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-gray-900">
|
||||||
|
{review.customerName}
|
||||||
|
</h3>
|
||||||
|
<StarRating rating={review.rating} />
|
||||||
|
</div>
|
||||||
|
<span className="text-sm text-gray-500">
|
||||||
|
{new Date(review.createdAt).toLocaleDateString("de-DE")}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{review.comment && (
|
||||||
|
<p className="text-gray-700 mt-2">{review.comment}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-gray-600 text-center py-8">
|
||||||
|
Noch keine Bewertungen vorhanden
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
187
src/client/components/pwa-install-prompt.tsx
Normal file
187
src/client/components/pwa-install-prompt.tsx
Normal file
@@ -0,0 +1,187 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
interface BeforeInstallPromptEvent extends Event {
|
||||||
|
prompt: () => Promise<void>;
|
||||||
|
userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface Navigator { standalone?: boolean }
|
||||||
|
interface WindowEventMap {
|
||||||
|
beforeinstallprompt: BeforeInstallPromptEvent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const LAST_SHOWN_KEY = 'pwaInstallPrompt_lastShown';
|
||||||
|
const ANDROID_DISMISSED_KEY = 'pwaInstallPrompt_androidDismissed';
|
||||||
|
|
||||||
|
function isIOS(): boolean {
|
||||||
|
if (typeof navigator === 'undefined') return false;
|
||||||
|
const ua = navigator.userAgent || '';
|
||||||
|
const iOS = /iPhone|iPad|iPod/i.test(ua);
|
||||||
|
const iPadOS13Plus = /Macintosh/.test(ua) && 'ontouchend' in document;
|
||||||
|
return iOS || iPadOS13Plus;
|
||||||
|
}
|
||||||
|
|
||||||
|
function isSafari(): boolean {
|
||||||
|
const ua = navigator.userAgent || '';
|
||||||
|
const isSafari = /Safari/i.test(ua) && !/CriOS|FxiOS|EdgiOS/i.test(ua);
|
||||||
|
return isSafari;
|
||||||
|
}
|
||||||
|
|
||||||
|
function isStandalone(): boolean {
|
||||||
|
const navStandalone = (navigator as any)?.standalone === true;
|
||||||
|
const mm = typeof window !== 'undefined' && window.matchMedia
|
||||||
|
? window.matchMedia('(display-mode: standalone)').matches
|
||||||
|
: false;
|
||||||
|
return Boolean(navStandalone || mm);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function PWAInstallPrompt({ hidden = false }: { hidden?: boolean }) {
|
||||||
|
if (hidden) return null;
|
||||||
|
const [show, setShow] = useState(false);
|
||||||
|
const [promptType, setPromptType] = useState<'ios' | 'android' | null>(null);
|
||||||
|
const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null);
|
||||||
|
const [initialized, setInitialized] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Only run on client
|
||||||
|
if (typeof window === 'undefined') return;
|
||||||
|
|
||||||
|
// Check if already in standalone mode
|
||||||
|
if (isStandalone()) {
|
||||||
|
setInitialized(true);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle iOS
|
||||||
|
const isIOSDevice = isIOS() && isSafari();
|
||||||
|
if (isIOSDevice) {
|
||||||
|
let lastShown = 0;
|
||||||
|
try {
|
||||||
|
lastShown = Number(localStorage.getItem(LAST_SHOWN_KEY) || 0);
|
||||||
|
} catch {}
|
||||||
|
const oneWeek = 7 * 24 * 60 * 60 * 1000;
|
||||||
|
const shouldShow = !lastShown || Date.now() - lastShown > oneWeek;
|
||||||
|
|
||||||
|
if (shouldShow) {
|
||||||
|
setPromptType('ios');
|
||||||
|
setShow(true);
|
||||||
|
}
|
||||||
|
setInitialized(true);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle Android (beforeinstallprompt)
|
||||||
|
const handleBeforeInstall = (e: BeforeInstallPromptEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Check if user has dismissed Android prompt before
|
||||||
|
let dismissed = false;
|
||||||
|
try {
|
||||||
|
dismissed = localStorage.getItem(ANDROID_DISMISSED_KEY) === 'true';
|
||||||
|
} catch {}
|
||||||
|
|
||||||
|
if (!dismissed) {
|
||||||
|
setDeferredPrompt(e);
|
||||||
|
setPromptType('android');
|
||||||
|
setShow(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('beforeinstallprompt', handleBeforeInstall);
|
||||||
|
setInitialized(true);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('beforeinstallprompt', handleBeforeInstall);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const dismiss = () => {
|
||||||
|
if (promptType === 'ios') {
|
||||||
|
try { localStorage.setItem(LAST_SHOWN_KEY, String(Date.now())); } catch {}
|
||||||
|
} else if (promptType === 'android') {
|
||||||
|
try { localStorage.setItem(ANDROID_DISMISSED_KEY, 'true'); } catch {}
|
||||||
|
}
|
||||||
|
setShow(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAndroidInstall = async () => {
|
||||||
|
if (!deferredPrompt) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await deferredPrompt.prompt();
|
||||||
|
const choiceResult = await deferredPrompt.userChoice;
|
||||||
|
|
||||||
|
if (choiceResult.outcome === 'accepted') {
|
||||||
|
console.log('PWA installation accepted');
|
||||||
|
}
|
||||||
|
|
||||||
|
setDeferredPrompt(null);
|
||||||
|
setShow(false);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error during PWA installation:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!initialized || !show || !promptType) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
role="dialog"
|
||||||
|
aria-label={promptType === 'android' ? 'PWA Installation' : 'PWA Installation Anleitung'}
|
||||||
|
className="fixed bottom-0 left-0 right-0 z-50 px-4 pb-4"
|
||||||
|
style={{ paddingBottom: `max(env(safe-area-inset-bottom), 1rem)` }}
|
||||||
|
>
|
||||||
|
<div className="relative max-w-3xl mx-auto rounded-xl shadow-lg bg-gradient-to-r from-pink-500 to-purple-600 text-white p-4 sm:p-6">
|
||||||
|
<button aria-label="Hinweis schließen" onClick={dismiss} className="absolute top-2 right-2 text-white/90 hover:text-white text-2xl leading-none">×</button>
|
||||||
|
|
||||||
|
{promptType === 'android' ? (
|
||||||
|
// Android: Direct install button
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="text-3xl">📱</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className="text-lg sm:text-xl font-bold mb-2">App installieren</h3>
|
||||||
|
<p className="text-white/90 mb-3">
|
||||||
|
Installiere Stargirlnails als App für schnellen Zugriff direkt vom Startbildschirm!
|
||||||
|
</p>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button
|
||||||
|
onClick={handleAndroidInstall}
|
||||||
|
className="bg-white text-pink-600 px-4 py-2 rounded-lg font-semibold hover:bg-pink-50 transition-colors"
|
||||||
|
>
|
||||||
|
Jetzt installieren
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={dismiss}
|
||||||
|
className="bg-white/20 text-white px-4 py-2 rounded-lg font-semibold hover:bg-white/30 transition-colors"
|
||||||
|
>
|
||||||
|
Später
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
// iOS: Manual instructions
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<div className="text-2xl">📱</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className="text-lg sm:text-xl font-bold mb-2">App installieren</h3>
|
||||||
|
<p className="text-white/90 mb-2">So installierst du Stargirlnails als App auf deinem iPhone/iPad:</p>
|
||||||
|
<ol className="list-decimal pl-5 space-y-1 text-white/95">
|
||||||
|
<li>Öffne diese Seite in Safari (nicht Chrome oder andere Browser).</li>
|
||||||
|
<li>Tippe auf das Teilen-Symbol (□↑) unten in der Mitte.</li>
|
||||||
|
<li>Scrolle nach unten und wähle „Zum Home-Bildschirm".</li>
|
||||||
|
<li>Tippe auf „Hinzufügen".</li>
|
||||||
|
</ol>
|
||||||
|
<p className="mt-3 text-sm text-white/90">✨ Schneller Zugriff, keine App-Store-Installation nötig, automatische Updates.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PWAInstallPrompt;
|
||||||
|
|
||||||
222
src/client/components/review-submission-page.tsx
Normal file
222
src/client/components/review-submission-page.tsx
Normal file
@@ -0,0 +1,222 @@
|
|||||||
|
import React, { useMemo, useState } from "react";
|
||||||
|
import { useQuery, useMutation } from "@tanstack/react-query";
|
||||||
|
import { queryClient } from "@/client/rpc-client";
|
||||||
|
|
||||||
|
interface ReviewSubmissionPageProps {
|
||||||
|
token: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ReviewSubmissionPage({ token }: ReviewSubmissionPageProps) {
|
||||||
|
const [rating, setRating] = useState<number | null>(null);
|
||||||
|
const [hoverRating, setHoverRating] = useState<number | null>(null);
|
||||||
|
const [comment, setComment] = useState("");
|
||||||
|
const [submitResult, setSubmitResult] = useState<{ success: boolean; message: string } | null>(null);
|
||||||
|
|
||||||
|
// Fetch booking info by token
|
||||||
|
const bookingQuery = useQuery({
|
||||||
|
...queryClient.cancellation.getBookingByToken.queryOptions({ input: { token } }),
|
||||||
|
staleTime: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
const isCompleted = bookingQuery.data?.status === "completed";
|
||||||
|
|
||||||
|
const submitMutation = useMutation({
|
||||||
|
...queryClient.reviews.submitReview.mutationOptions(),
|
||||||
|
onSuccess: () => {
|
||||||
|
setSubmitResult({ success: true, message: "Danke für deine Bewertung! Sie wird nach Prüfung veröffentlicht." });
|
||||||
|
},
|
||||||
|
onError: (error: any) => {
|
||||||
|
setSubmitResult({ success: false, message: error?.message || "Ein Fehler ist aufgetreten." });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const canSubmit = useMemo(() => {
|
||||||
|
return !!rating && comment.trim().length >= 10 && isCompleted && !submitMutation.isPending;
|
||||||
|
}, [rating, comment, isCompleted, submitMutation.isPending]);
|
||||||
|
|
||||||
|
const handleSubmit = () => {
|
||||||
|
setSubmitResult(null);
|
||||||
|
const trimmedComment = comment.trim();
|
||||||
|
if (rating == null || rating < 1 || rating > 5) {
|
||||||
|
setSubmitResult({ success: false, message: "Bitte wähle eine Bewertung von 1 bis 5 Sternen." });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (trimmedComment.length < 10) {
|
||||||
|
setSubmitResult({ success: false, message: "Der Kommentar muss mindestens 10 Zeichen enthalten." });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!isCompleted) {
|
||||||
|
setSubmitResult({ success: false, message: "Bewertungen sind nur für abgeschlossene Termine möglich." });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
submitMutation.mutate({ bookingToken: token, rating, comment: trimmedComment });
|
||||||
|
};
|
||||||
|
|
||||||
|
if (bookingQuery.isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gradient-to-br from-pink-50 to-purple-50 flex items-center justify-center p-4">
|
||||||
|
<div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full">
|
||||||
|
<div className="flex items-center justify-center">
|
||||||
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-pink-500"></div>
|
||||||
|
<span className="ml-3 text-gray-600">Lade Buchung...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (bookingQuery.error || !bookingQuery.data) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gradient-to-br from-pink-50 to-purple-50 flex items-center justify-center p-4">
|
||||||
|
<div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full text-center">
|
||||||
|
<div className="w-16 h-16 mx-auto mb-4 bg-red-100 rounded-full flex items-center justify-center">
|
||||||
|
<svg className="w-8 h-8 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h2 className="text-xl font-bold text-gray-900 mb-2">Link nicht verfügbar</h2>
|
||||||
|
<p className="text-gray-600 mb-4">Dieser Link ist ungültig oder abgelaufen.</p>
|
||||||
|
<a href="/" className="inline-flex items-center px-4 py-2 bg-pink-600 text-white rounded-lg hover:bg-pink-700 transition-colors">Zur Startseite</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Guard: Only allow reviews for completed bookings
|
||||||
|
if (!isCompleted) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gradient-to-br from-pink-50 to-purple-50 flex items-center justify-center p-4">
|
||||||
|
<div className="bg-white p-8 rounded-lg shadow-lg max-w-lg w-full">
|
||||||
|
<div className="text-center">
|
||||||
|
<img src="/assets/stargilnails_logo_transparent_112.png" alt="Stargil Nails Logo" className="w-16 h-16 mx-auto mb-4 object-contain" />
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900">Bewertung abgeben</h1>
|
||||||
|
<p className="text-gray-600 mt-2">Bewertungen sind nur für abgeschlossene Termine möglich.</p>
|
||||||
|
<div className="mt-6">
|
||||||
|
<a href="/" className="inline-flex items-center text-pink-600 hover:text-pink-700 font-medium">
|
||||||
|
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||||
|
</svg>
|
||||||
|
Zurück zur Startseite
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const booking = bookingQuery.data;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gradient-to-br from-pink-50 to-purple-50 py-8 px-4">
|
||||||
|
<div className="max-w-2xl mx-auto">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="bg-white rounded-lg shadow-lg p-6 mb-6">
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<img src="/assets/stargilnails_logo_transparent_112.png" alt="Stargil Nails Logo" className="w-16 h-16 object-contain" />
|
||||||
|
<span className="px-4 py-2 rounded-full text-sm font-semibold bg-pink-100 text-pink-800">⭐ Bewertung</span>
|
||||||
|
</div>
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900">Bewertung abgeben</h1>
|
||||||
|
<p className="text-gray-600 mt-1">Teile deine Erfahrung mit uns – das hilft anderen Kundinnen!</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Booking Details */}
|
||||||
|
<div className="bg-white rounded-lg shadow-lg p-6 mb-6">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
|
||||||
|
<svg className="w-5 h-5 mr-2 text-pink-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||||
|
</svg>
|
||||||
|
Termin-Details
|
||||||
|
</h2>
|
||||||
|
<div className="space-y-3 text-sm">
|
||||||
|
<div className="flex justify-between py-2 border-b border-gray-100">
|
||||||
|
<span className="text-gray-600">Datum:</span>
|
||||||
|
<span className="font-medium text-gray-900">{booking.formattedDate}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between py-2 border-b border-gray-100">
|
||||||
|
<span className="text-gray-600">Uhrzeit:</span>
|
||||||
|
<span className="font-medium text-gray-900">{booking.appointmentTime} Uhr</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between py-2 border-b border-gray-100">
|
||||||
|
<span className="text-gray-600">Behandlung:</span>
|
||||||
|
<span className="font-medium text-gray-900">{booking.treatmentName}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between py-2">
|
||||||
|
<span className="text-gray-600">Name:</span>
|
||||||
|
<span className="font-medium text-gray-900">{booking.customerName}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Result Banner */}
|
||||||
|
{submitResult && (
|
||||||
|
<div className={`mb-6 p-4 rounded-lg ${submitResult.success ? 'bg-green-50 border border-green-200' : 'bg-red-50 border border-red-200'}`}>
|
||||||
|
<p className={submitResult.success ? 'text-green-800' : 'text-red-800'}>{submitResult.message}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Review Form */}
|
||||||
|
<div className="bg-white rounded-lg shadow-lg p-6 mb-6">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">Deine Bewertung</h2>
|
||||||
|
|
||||||
|
{/* Stars */}
|
||||||
|
<div className="flex items-center mb-4">
|
||||||
|
{[1,2,3,4,5].map((star) => {
|
||||||
|
const isActive = (hoverRating ?? rating ?? 0) >= star;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={star}
|
||||||
|
type="button"
|
||||||
|
className={`text-3xl mr-2 transition-colors ${isActive ? 'text-yellow-400' : 'text-gray-300'} ${submitMutation.isPending ? 'cursor-not-allowed' : 'cursor-pointer'}`}
|
||||||
|
onMouseEnter={() => !submitMutation.isPending && setHoverRating(star)}
|
||||||
|
onMouseLeave={() => !submitMutation.isPending && setHoverRating(null)}
|
||||||
|
onClick={() => !submitMutation.isPending && setRating(star)}
|
||||||
|
aria-label={`${star} Sterne`}
|
||||||
|
>
|
||||||
|
★
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
{!rating && <p className="text-sm text-red-600 mb-2">Bitte wähle eine Bewertung von 1 bis 5 Sternen.</p>}
|
||||||
|
|
||||||
|
{/* Comment */}
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Kommentar</label>
|
||||||
|
<textarea
|
||||||
|
value={comment}
|
||||||
|
onChange={(e) => setComment(e.target.value)}
|
||||||
|
placeholder="Teile deine Erfahrung mit uns..."
|
||||||
|
rows={5}
|
||||||
|
className="w-full p-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500"
|
||||||
|
disabled={submitMutation.isPending || !!submitResult?.success}
|
||||||
|
/>
|
||||||
|
{comment.trim().length > 0 && comment.trim().length < 10 && (
|
||||||
|
<p className="text-sm text-red-600 mt-1">Der Kommentar muss mindestens 10 Zeichen enthalten.</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Submit */}
|
||||||
|
<button
|
||||||
|
onClick={handleSubmit}
|
||||||
|
disabled={!canSubmit || !!submitResult?.success}
|
||||||
|
className="mt-4 w-full bg-pink-600 text-white py-3 px-4 rounded-lg font-medium hover:bg-pink-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||||
|
>
|
||||||
|
{submitMutation.isPending ? 'Sende Bewertung...' : 'Bewertung absenden'}
|
||||||
|
</button>
|
||||||
|
<p className="text-xs text-gray-500 mt-3">Mit dem Absenden stimmst du der Veröffentlichung deiner Bewertung nach Prüfung zu.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<div className="text-center">
|
||||||
|
<a href="/" className="inline-flex items-center text-pink-600 hover:text-pink-700 font-medium">
|
||||||
|
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||||
|
</svg>
|
||||||
|
Zurück zur Startseite
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -3,6 +3,7 @@ import { serve } from '@hono/node-server';
|
|||||||
import { serveStatic } from '@hono/node-server/serve-static';
|
import { serveStatic } from '@hono/node-server/serve-static';
|
||||||
|
|
||||||
import { rpcApp } from "./routes/rpc.js";
|
import { rpcApp } from "./routes/rpc.js";
|
||||||
|
import { caldavApp } from "./routes/caldav.js";
|
||||||
import { clientEntry } from "./routes/client-entry.js";
|
import { clientEntry } from "./routes/client-entry.js";
|
||||||
|
|
||||||
const app = new Hono();
|
const app = new Hono();
|
||||||
@@ -61,8 +62,12 @@ if (process.env.NODE_ENV === 'production') {
|
|||||||
app.use('/assets/*', serveStatic({ root: './dist' }));
|
app.use('/assets/*', serveStatic({ root: './dist' }));
|
||||||
}
|
}
|
||||||
app.use('/favicon.png', serveStatic({ path: './public/favicon.png' }));
|
app.use('/favicon.png', serveStatic({ path: './public/favicon.png' }));
|
||||||
|
app.use('/AGB.pdf', serveStatic({ path: './public/AGB.pdf' }));
|
||||||
|
app.use('/icons/*', serveStatic({ root: './public' }));
|
||||||
|
app.use('/manifest.json', serveStatic({ path: './public/manifest.json' }));
|
||||||
|
|
||||||
app.route("/rpc", rpcApp);
|
app.route("/rpc", rpcApp);
|
||||||
|
app.route("/caldav", caldavApp);
|
||||||
app.get("/*", clientEntry);
|
app.get("/*", clientEntry);
|
||||||
|
|
||||||
// Start server
|
// Start server
|
||||||
|
|||||||
17
src/server/lib/auth.ts
Normal file
17
src/server/lib/auth.ts
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
import { createKV } from "./create-kv.js";
|
||||||
|
|
||||||
|
type Session = { id: string; userId: string; expiresAt: string; createdAt: string };
|
||||||
|
type User = { id: string; username: string; email: string; passwordHash: string; role: "customer" | "owner"; createdAt: string };
|
||||||
|
|
||||||
|
export const sessionsKV = createKV<Session>("sessions");
|
||||||
|
export const usersKV = createKV<User>("users");
|
||||||
|
|
||||||
|
export async function assertOwner(sessionId: string): Promise<void> {
|
||||||
|
const session = await sessionsKV.getItem(sessionId);
|
||||||
|
if (!session) throw new Error("Invalid session");
|
||||||
|
if (new Date(session.expiresAt) < new Date()) throw new Error("Session expired");
|
||||||
|
const user = await usersKV.getItem(session.userId);
|
||||||
|
if (!user || user.role !== "owner") throw new Error("Forbidden");
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -31,13 +31,18 @@ async function renderBrandedEmail(title: string, bodyHtml: string): Promise<stri
|
|||||||
const protocol = domain.includes('localhost') ? 'http' : 'https';
|
const protocol = domain.includes('localhost') ? 'http' : 'https';
|
||||||
const homepageUrl = `${protocol}://${domain}`;
|
const homepageUrl = `${protocol}://${domain}`;
|
||||||
|
|
||||||
|
const instagramProfile = process.env.INSTAGRAM_PROFILE;
|
||||||
|
const tiktokProfile = process.env.TIKTOK_PROFILE;
|
||||||
|
const companyName = process.env.COMPANY_NAME || 'Stargirlnails Kiel';
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<div style="font-family: Arial, sans-serif; color: #0f172a; background:#fdf2f8; padding:24px;">
|
<div style="font-family: Arial, sans-serif; color: #0f172a; background:#fdf2f8; padding:24px;">
|
||||||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="max-width:640px; margin:0 auto; background:#ffffff; border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.06)">
|
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="max-width:640px; margin:0 auto; background:#ffffff; border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.06)">
|
||||||
<tr>
|
<tr>
|
||||||
<td style="padding:24px 24px 0 24px; text-align:center;">
|
<td style="padding:24px 24px 0 24px; text-align:center;">
|
||||||
${logo ? `<img src="${logo}" alt="Stargirlnails" style="width:120px; height:auto; display:inline-block;" />` : `<div style=\"font-size:24px\">💅</div>`}
|
${logo ? `<img src="${logo}" alt="${companyName}" style="width:120px; height:auto; display:inline-block;" />` : `<div style=\"font-size:24px\">💅</div>`}
|
||||||
<h1 style="margin:16px 0 0 0; font-size:22px; color:#db2777;">${title}</h1>
|
<div style="margin:16px 0 4px 0; font-size:16px; font-weight:600; color:#64748b;">${companyName}</div>
|
||||||
|
<h1 style="margin:0; font-size:22px; color:#db2777;">${title}</h1>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -49,6 +54,29 @@ async function renderBrandedEmail(title: string, bodyHtml: string): Promise<stri
|
|||||||
<div style="text-align:center; margin-bottom:16px;">
|
<div style="text-align:center; margin-bottom:16px;">
|
||||||
<a href="${homepageUrl}" style="display: inline-block; background-color: #db2777; color: white; padding: 12px 24px; text-decoration: none; border-radius: 6px; font-weight: 600; font-size: 14px;">Zur Website</a>
|
<a href="${homepageUrl}" style="display: inline-block; background-color: #db2777; color: white; padding: 12px 24px; text-decoration: none; border-radius: 6px; font-weight: 600; font-size: 14px;">Zur Website</a>
|
||||||
</div>
|
</div>
|
||||||
|
${(instagramProfile || tiktokProfile) ? `
|
||||||
|
<div style="text-align:center; margin-bottom:16px;">
|
||||||
|
<p style="font-size:14px; color:#64748b; margin:0 0 8px 0;">Folge uns auf Social Media:</p>
|
||||||
|
<div style="display:inline-block;">
|
||||||
|
${instagramProfile ? `
|
||||||
|
<a href="${instagramProfile}" target="_blank" rel="noopener noreferrer" style="display:inline-block; margin:0 6px; background:linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); color:white; padding:10px 20px; text-decoration:none; border-radius:20px; font-size:14px; font-weight:600;">
|
||||||
|
<svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24" style="vertical-align:middle; margin-right:6px;">
|
||||||
|
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
|
||||||
|
</svg>
|
||||||
|
Instagram
|
||||||
|
</a>
|
||||||
|
` : ''}
|
||||||
|
${tiktokProfile ? `
|
||||||
|
<a href="${tiktokProfile}" target="_blank" rel="noopener noreferrer" style="display:inline-block; margin:0 6px; background:#000000; color:white; padding:10px 20px; text-decoration:none; border-radius:20px; font-size:14px; font-weight:600;">
|
||||||
|
<svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24" style="vertical-align:middle; margin-right:6px;">
|
||||||
|
<path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/>
|
||||||
|
</svg>
|
||||||
|
TikTok
|
||||||
|
</a>
|
||||||
|
` : ''}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
` : ''}
|
||||||
<div style="font-size:12px; color:#64748b; text-align:center;">
|
<div style="font-size:12px; color:#64748b; text-align:center;">
|
||||||
© ${new Date().getFullYear()} Stargirlnails Kiel • Professional Nail Care
|
© ${new Date().getFullYear()} Stargirlnails Kiel • Professional Nail Care
|
||||||
</div>
|
</div>
|
||||||
@@ -85,8 +113,8 @@ export async function renderBookingPendingHTML(params: { name: string; date: str
|
|||||||
return renderBrandedEmail("Deine Terminanfrage ist eingegangen", inner);
|
return renderBrandedEmail("Deine Terminanfrage ist eingegangen", inner);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function renderBookingConfirmedHTML(params: { name: string; date: string; time: string; cancellationUrl?: string }) {
|
export async function renderBookingConfirmedHTML(params: { name: string; date: string; time: string; cancellationUrl?: string; reviewUrl?: string }) {
|
||||||
const { name, date, time, cancellationUrl } = params;
|
const { name, date, time, cancellationUrl, reviewUrl } = params;
|
||||||
const formattedDate = formatDateGerman(date);
|
const formattedDate = formatDateGerman(date);
|
||||||
const domain = process.env.DOMAIN || 'localhost:5173';
|
const domain = process.env.DOMAIN || 'localhost:5173';
|
||||||
const protocol = domain.includes('localhost') ? 'http' : 'https';
|
const protocol = domain.includes('localhost') ? 'http' : 'https';
|
||||||
@@ -107,6 +135,14 @@ export async function renderBookingConfirmedHTML(params: { name: string; date: s
|
|||||||
<a href="${cancellationUrl}" style="display: inline-block; background-color: #db2777; color: white; padding: 12px 24px; text-decoration: none; border-radius: 6px; font-weight: 600;">Termin ansehen & verwalten</a>
|
<a href="${cancellationUrl}" style="display: inline-block; background-color: #db2777; color: white; padding: 12px 24px; text-decoration: none; border-radius: 6px; font-weight: 600;">Termin ansehen & verwalten</a>
|
||||||
</div>
|
</div>
|
||||||
` : ''}
|
` : ''}
|
||||||
|
${reviewUrl ? `
|
||||||
|
<div style="background-color: #eff6ff; border-left: 4px solid #3b82f6; padding: 16px; margin: 20px 0; border-radius: 4px;">
|
||||||
|
<p style="margin: 0; font-weight: 600; color: #3b82f6;">⭐ Bewertung abgeben:</p>
|
||||||
|
<p style="margin: 8px 0 12px 0; color: #475569;">Nach deinem Termin würden wir uns über deine Bewertung freuen!</p>
|
||||||
|
<a href="${reviewUrl}" style="display: inline-block; background-color: #3b82f6; color: white; padding: 12px 24px; text-decoration: none; border-radius: 6px; font-weight: 600;">Bewertung schreiben</a>
|
||||||
|
<p style="margin: 12px 0 0 0; color: #64748b; font-size: 13px;">Du kannst deine Bewertung nach dem Termin über diesen Link abgeben.</p>
|
||||||
|
</div>
|
||||||
|
` : ''}
|
||||||
<div style="background-color: #f8fafc; border-left: 4px solid #3b82f6; padding: 16px; margin: 20px 0; border-radius: 4px;">
|
<div style="background-color: #f8fafc; border-left: 4px solid #3b82f6; padding: 16px; margin: 20px 0; border-radius: 4px;">
|
||||||
<p style="margin: 0; font-weight: 600; color: #3b82f6;">📋 Rechtliche Informationen:</p>
|
<p style="margin: 0; font-weight: 600; color: #3b82f6;">📋 Rechtliche Informationen:</p>
|
||||||
<p style="margin: 8px 0 12px 0; color: #475569;">Weitere Informationen findest du in unserem <a href="${legalUrl}" style="color: #3b82f6; text-decoration: underline;">Impressum und Datenschutz</a>.</p>
|
<p style="margin: 8px 0 12px 0; color: #475569;">Weitere Informationen findest du in unserem <a href="${legalUrl}" style="color: #3b82f6; text-decoration: underline;">Impressum und Datenschutz</a>.</p>
|
||||||
@@ -169,3 +205,145 @@ export async function renderAdminBookingNotificationHTML(params: {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export async function renderBookingRescheduleProposalHTML(params: {
|
||||||
|
name: string;
|
||||||
|
originalDate: string;
|
||||||
|
originalTime: string;
|
||||||
|
proposedDate: string;
|
||||||
|
proposedTime: string;
|
||||||
|
treatmentName: string;
|
||||||
|
acceptUrl: string;
|
||||||
|
declineUrl: string;
|
||||||
|
expiresAt: string;
|
||||||
|
}) {
|
||||||
|
const formattedOriginalDate = formatDateGerman(params.originalDate);
|
||||||
|
const formattedProposedDate = formatDateGerman(params.proposedDate);
|
||||||
|
const expiryDate = new Date(params.expiresAt);
|
||||||
|
const formattedExpiry = `${expiryDate.toLocaleDateString('de-DE')} ${expiryDate.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}`;
|
||||||
|
|
||||||
|
const inner = `
|
||||||
|
<p>Hallo ${params.name},</p>
|
||||||
|
<p>wir müssen deinen Termin leider verschieben. Hier ist unser Vorschlag:</p>
|
||||||
|
<div style="background-color: #f8fafc; border-left: 4px solid #f59e0b; padding: 16px; margin: 20px 0; border-radius: 4px;">
|
||||||
|
<p style="margin: 0; font-weight: 600; color: #92400e;">📅 Übersicht</p>
|
||||||
|
<table role="presentation" cellspacing="0" cellpadding="0" style="width:100%; margin-top:8px; font-size:14px; color:#475569;">
|
||||||
|
<tr>
|
||||||
|
<td style="padding:6px 0; width:45%"><strong>Alter Termin</strong></td>
|
||||||
|
<td style="padding:6px 0;">${formattedOriginalDate} um ${params.originalTime} Uhr</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td style="padding:6px 0; width:45%"><strong>Neuer Vorschlag</strong></td>
|
||||||
|
<td style="padding:6px 0; color:#b45309;"><strong>${formattedProposedDate} um ${params.proposedTime} Uhr</strong></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td style="padding:6px 0; width:45%"><strong>Behandlung</strong></td>
|
||||||
|
<td style="padding:6px 0;">${params.treatmentName}</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div style="background-color: #fffbeb; border-left: 4px solid #f59e0b; padding: 12px; margin: 16px 0; border-radius: 4px; color:#92400e;">
|
||||||
|
⏰ Bitte antworte bis ${formattedExpiry}.
|
||||||
|
</div>
|
||||||
|
<div style="text-align:center; margin: 20px 0;">
|
||||||
|
<a href="${params.acceptUrl}" style="display:inline-block; background-color:#16a34a; color:#ffffff; padding:12px 18px; border-radius:8px; text-decoration:none; font-weight:700; margin-right:8px;">Neuen Termin akzeptieren</a>
|
||||||
|
<a href="${params.declineUrl}" style="display:inline-block; background-color:#dc2626; color:#ffffff; padding:12px 18px; border-radius:8px; text-decoration:none; font-weight:700;">Termin ablehnen</a>
|
||||||
|
</div>
|
||||||
|
<div style="background-color: #f8fafc; border-left: 4px solid #10b981; padding: 12px; margin: 16px 0; border-radius: 4px; color:#065f46;">
|
||||||
|
Wenn du den Vorschlag ablehnst, bleibt dein ursprünglicher Termin bestehen und wir kontaktieren dich für eine alternative Lösung.
|
||||||
|
</div>
|
||||||
|
<p>Falls du einen komplett neuen Termin buchen möchtest, kannst du deinen aktuellen Termin stornieren und einen neuen Termin auf unserer Website buchen.</p>
|
||||||
|
<p>Liebe Grüße,<br/>Stargirlnails Kiel</p>
|
||||||
|
`;
|
||||||
|
return renderBrandedEmail("Terminänderung vorgeschlagen", inner);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function renderAdminRescheduleDeclinedHTML(params: {
|
||||||
|
customerName: string;
|
||||||
|
originalDate: string;
|
||||||
|
originalTime: string;
|
||||||
|
proposedDate: string;
|
||||||
|
proposedTime: string;
|
||||||
|
treatmentName: string;
|
||||||
|
customerEmail?: string;
|
||||||
|
customerPhone?: string;
|
||||||
|
}) {
|
||||||
|
const inner = `
|
||||||
|
<p>Hallo Admin,</p>
|
||||||
|
<p>der Kunde <strong>${params.customerName}</strong> hat den Terminänderungsvorschlag abgelehnt.</p>
|
||||||
|
<div style="background-color:#f8fafc; border-left:4px solid #ef4444; padding:16px; margin:16px 0; border-radius:4px;">
|
||||||
|
<ul style="margin:0; padding:0; list-style:none; color:#475569; font-size:14px;">
|
||||||
|
<li><strong>Kunde:</strong> ${params.customerName}</li>
|
||||||
|
${params.customerEmail ? `<li><strong>E-Mail:</strong> ${params.customerEmail}</li>` : ''}
|
||||||
|
${params.customerPhone ? `<li><strong>Telefon:</strong> ${params.customerPhone}</li>` : ''}
|
||||||
|
<li><strong>Behandlung:</strong> ${params.treatmentName}</li>
|
||||||
|
<li><strong>Ursprünglicher Termin:</strong> ${formatDateGerman(params.originalDate)} um ${params.originalTime} Uhr (bleibt bestehen)</li>
|
||||||
|
<li><strong>Abgelehnter Vorschlag:</strong> ${formatDateGerman(params.proposedDate)} um ${params.proposedTime} Uhr</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<p>Bitte kontaktiere den Kunden, um eine alternative Lösung zu finden.</p>
|
||||||
|
`;
|
||||||
|
return renderBrandedEmail("Kunde hat Terminänderung abgelehnt", inner);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function renderAdminRescheduleAcceptedHTML(params: {
|
||||||
|
customerName: string;
|
||||||
|
originalDate: string;
|
||||||
|
originalTime: string;
|
||||||
|
newDate: string;
|
||||||
|
newTime: string;
|
||||||
|
treatmentName: string;
|
||||||
|
}) {
|
||||||
|
const inner = `
|
||||||
|
<p>Hallo Admin,</p>
|
||||||
|
<p>der Kunde <strong>${params.customerName}</strong> hat den Terminänderungsvorschlag akzeptiert.</p>
|
||||||
|
<div style="background-color:#ecfeff; border-left:4px solid #10b981; padding:16px; margin:16px 0; border-radius:4px;">
|
||||||
|
<ul style="margin:0; padding:0; list-style:none; color:#475569; font-size:14px;">
|
||||||
|
<li><strong>Kunde:</strong> ${params.customerName}</li>
|
||||||
|
<li><strong>Behandlung:</strong> ${params.treatmentName}</li>
|
||||||
|
<li><strong>Alter Termin:</strong> ${formatDateGerman(params.originalDate)} um ${params.originalTime} Uhr</li>
|
||||||
|
<li><strong>Neuer Termin:</strong> ${formatDateGerman(params.newDate)} um ${params.newTime} Uhr ✅</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<p>Der Termin wurde automatisch aktualisiert.</p>
|
||||||
|
`;
|
||||||
|
return renderBrandedEmail("Kunde hat Terminänderung akzeptiert", inner);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function renderAdminRescheduleExpiredHTML(params: {
|
||||||
|
expiredProposals: Array<{
|
||||||
|
customerName: string;
|
||||||
|
originalDate: string;
|
||||||
|
originalTime: string;
|
||||||
|
proposedDate: string;
|
||||||
|
proposedTime: string;
|
||||||
|
treatmentName: string;
|
||||||
|
customerEmail?: string;
|
||||||
|
customerPhone?: string;
|
||||||
|
expiredAt: string;
|
||||||
|
}>;
|
||||||
|
}) {
|
||||||
|
const inner = `
|
||||||
|
<p>Hallo Admin,</p>
|
||||||
|
<p><strong>${params.expiredProposals.length} Terminänderungsvorschlag${params.expiredProposals.length > 1 ? 'e' : ''} ${params.expiredProposals.length > 1 ? 'sind' : 'ist'} abgelaufen</strong> und wurde${params.expiredProposals.length > 1 ? 'n' : ''} automatisch entfernt.</p>
|
||||||
|
<div style="background-color:#fef2f2; border-left:4px solid #ef4444; padding:16px; margin:16px 0; border-radius:4px;">
|
||||||
|
<p style="margin:0 0 12px 0; font-weight:600; color:#dc2626;">⚠️ Abgelaufene Vorschläge:</p>
|
||||||
|
${params.expiredProposals.map(proposal => `
|
||||||
|
<div style="background-color:#ffffff; border:1px solid #fecaca; border-radius:4px; padding:12px; margin:8px 0;">
|
||||||
|
<ul style="margin:0; padding:0; list-style:none; color:#475569; font-size:13px;">
|
||||||
|
<li><strong>Kunde:</strong> ${proposal.customerName}</li>
|
||||||
|
${proposal.customerEmail ? `<li><strong>E-Mail:</strong> ${proposal.customerEmail}</li>` : ''}
|
||||||
|
${proposal.customerPhone ? `<li><strong>Telefon:</strong> ${proposal.customerPhone}</li>` : ''}
|
||||||
|
<li><strong>Behandlung:</strong> ${proposal.treatmentName}</li>
|
||||||
|
<li><strong>Ursprünglicher Termin:</strong> ${formatDateGerman(proposal.originalDate)} um ${proposal.originalTime} Uhr</li>
|
||||||
|
<li><strong>Vorgeschlagener Termin:</strong> ${formatDateGerman(proposal.proposedDate)} um ${proposal.proposedTime} Uhr</li>
|
||||||
|
<li><strong>Abgelaufen am:</strong> ${new Date(proposal.expiredAt).toLocaleString('de-DE')}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
`).join('')}
|
||||||
|
</div>
|
||||||
|
<p style="color:#dc2626; font-weight:600;">Bitte kontaktiere die Kunden, um eine alternative Lösung zu finden.</p>
|
||||||
|
<p>Die ursprünglichen Termine bleiben bestehen.</p>
|
||||||
|
`;
|
||||||
|
return renderBrandedEmail("Abgelaufene Terminänderungsvorschläge", inner);
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
233
src/server/routes/caldav.ts
Normal file
233
src/server/routes/caldav.ts
Normal file
@@ -0,0 +1,233 @@
|
|||||||
|
import { Hono } from "hono";
|
||||||
|
import { createKV } from "../lib/create-kv.js";
|
||||||
|
import { assertOwner } from "../lib/auth.js";
|
||||||
|
|
||||||
|
// Types für Buchungen (vereinfacht für CalDAV)
|
||||||
|
type Booking = {
|
||||||
|
id: string;
|
||||||
|
treatmentId: string;
|
||||||
|
customerName: string;
|
||||||
|
customerEmail?: string;
|
||||||
|
customerPhone?: string;
|
||||||
|
appointmentDate: string; // YYYY-MM-DD
|
||||||
|
appointmentTime: string; // HH:MM
|
||||||
|
status: "pending" | "confirmed" | "cancelled" | "completed";
|
||||||
|
notes?: string;
|
||||||
|
bookedDurationMinutes?: number;
|
||||||
|
createdAt: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type Treatment = {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
price: number;
|
||||||
|
duration: number;
|
||||||
|
category: string;
|
||||||
|
createdAt: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
// KV-Stores
|
||||||
|
const bookingsKV = createKV<Booking>("bookings");
|
||||||
|
const treatmentsKV = createKV<Treatment>("treatments");
|
||||||
|
const sessionsKV = createKV<any>("sessions");
|
||||||
|
|
||||||
|
export const caldavApp = new Hono();
|
||||||
|
|
||||||
|
// Helper-Funktionen für ICS-Format
|
||||||
|
function formatDateTime(dateStr: string, timeStr: string): string {
|
||||||
|
// Konvertiere YYYY-MM-DD HH:MM zu UTC-Format für ICS
|
||||||
|
const [year, month, day] = dateStr.split('-').map(Number);
|
||||||
|
const [hours, minutes] = timeStr.split(':').map(Number);
|
||||||
|
|
||||||
|
const date = new Date(year, month - 1, day, hours, minutes);
|
||||||
|
return date.toISOString().replace(/[-:]/g, '').replace(/\.\d{3}/, '');
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateICSContent(bookings: Booking[], treatments: Treatment[]): string {
|
||||||
|
const now = new Date().toISOString().replace(/[-:]/g, '').replace(/\.\d{3}/, '');
|
||||||
|
|
||||||
|
let ics = `BEGIN:VCALENDAR
|
||||||
|
VERSION:2.0
|
||||||
|
PRODID:-//Stargirlnails//Booking Calendar//DE
|
||||||
|
CALSCALE:GREGORIAN
|
||||||
|
METHOD:PUBLISH
|
||||||
|
X-WR-CALNAME:Stargirlnails Termine
|
||||||
|
X-WR-CALDESC:Terminkalender für Stargirlnails
|
||||||
|
X-WR-TIMEZONE:Europe/Berlin
|
||||||
|
`;
|
||||||
|
|
||||||
|
// Nur bestätigte und ausstehende Termine in den Kalender aufnehmen
|
||||||
|
const activeBookings = bookings.filter(b =>
|
||||||
|
b.status === 'confirmed' || b.status === 'pending'
|
||||||
|
);
|
||||||
|
|
||||||
|
for (const booking of activeBookings) {
|
||||||
|
const treatment = treatments.find(t => t.id === booking.treatmentId);
|
||||||
|
const treatmentName = treatment?.name || 'Unbekannte Behandlung';
|
||||||
|
const duration = booking.bookedDurationMinutes || treatment?.duration || 60;
|
||||||
|
|
||||||
|
const startTime = formatDateTime(booking.appointmentDate, booking.appointmentTime);
|
||||||
|
const endTime = formatDateTime(booking.appointmentDate,
|
||||||
|
`${String(Math.floor((parseInt(booking.appointmentTime.split(':')[0]) * 60 + parseInt(booking.appointmentTime.split(':')[1]) + duration) / 60)).padStart(2, '0')}:${String((parseInt(booking.appointmentTime.split(':')[0]) * 60 + parseInt(booking.appointmentTime.split(':')[1]) + duration) % 60).padStart(2, '0')}`
|
||||||
|
);
|
||||||
|
|
||||||
|
// UID für jeden Termin (eindeutig)
|
||||||
|
const uid = `booking-${booking.id}@stargirlnails.de`;
|
||||||
|
|
||||||
|
// Status für ICS
|
||||||
|
const status = booking.status === 'confirmed' ? 'CONFIRMED' : 'TENTATIVE';
|
||||||
|
|
||||||
|
ics += `BEGIN:VEVENT
|
||||||
|
UID:${uid}
|
||||||
|
DTSTAMP:${now}
|
||||||
|
DTSTART:${startTime}
|
||||||
|
DTEND:${endTime}
|
||||||
|
SUMMARY:${treatmentName} - ${booking.customerName}
|
||||||
|
DESCRIPTION:Behandlung: ${treatmentName}\\nKunde: ${booking.customerName}${booking.customerPhone ? `\\nTelefon: ${booking.customerPhone}` : ''}${booking.notes ? `\\nNotizen: ${booking.notes}` : ''}
|
||||||
|
STATUS:${status}
|
||||||
|
TRANSP:OPAQUE
|
||||||
|
END:VEVENT
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
ics += `END:VCALENDAR`;
|
||||||
|
|
||||||
|
return ics;
|
||||||
|
}
|
||||||
|
|
||||||
|
// CalDAV Discovery (PROPFIND auf Root)
|
||||||
|
caldavApp.all("/", async (c) => {
|
||||||
|
if (c.req.method !== 'PROPFIND') {
|
||||||
|
return c.text('Method Not Allowed', 405);
|
||||||
|
}
|
||||||
|
const response = `<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<D:multistatus xmlns:D="DAV:" xmlns:C="urn:ietf:params:xml:ns:caldav">
|
||||||
|
<D:response>
|
||||||
|
<D:href>/caldav/</D:href>
|
||||||
|
<D:propstat>
|
||||||
|
<D:prop>
|
||||||
|
<D:displayname>Stargirlnails Terminkalender</D:displayname>
|
||||||
|
<C:calendar-description>Termine für Stargirlnails</C:calendar-description>
|
||||||
|
<C:supported-calendar-component-set>
|
||||||
|
<C:comp name="VEVENT"/>
|
||||||
|
</C:supported-calendar-component-set>
|
||||||
|
<C:calendar-timezone>Europe/Berlin</C:calendar-timezone>
|
||||||
|
</D:prop>
|
||||||
|
<D:status>HTTP/1.1 200 OK</D:status>
|
||||||
|
</D:propstat>
|
||||||
|
</D:response>
|
||||||
|
</D:multistatus>`;
|
||||||
|
|
||||||
|
return c.text(response, 207, {
|
||||||
|
"Content-Type": "application/xml; charset=utf-8",
|
||||||
|
"DAV": "1, 3, calendar-access, calendar-schedule",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Calendar Collection PROPFIND
|
||||||
|
caldavApp.all("/calendar/", async (c) => {
|
||||||
|
if (c.req.method !== 'PROPFIND') {
|
||||||
|
return c.text('Method Not Allowed', 405);
|
||||||
|
}
|
||||||
|
const response = `<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<D:multistatus xmlns:D="DAV:" xmlns:C="urn:ietf:params:xml:ns:caldav" xmlns:CS="http://calendarserver.org/ns/">
|
||||||
|
<D:response>
|
||||||
|
<D:href>/caldav/calendar/</D:href>
|
||||||
|
<D:propstat>
|
||||||
|
<D:prop>
|
||||||
|
<D:displayname>Stargirlnails Termine</D:displayname>
|
||||||
|
<C:calendar-description>Alle Termine von Stargirlnails</C:calendar-description>
|
||||||
|
<C:supported-calendar-component-set>
|
||||||
|
<C:comp name="VEVENT"/>
|
||||||
|
</C:supported-calendar-component-set>
|
||||||
|
<C:calendar-timezone>Europe/Berlin</C:calendar-timezone>
|
||||||
|
<CS:getctag>${Date.now()}</CS:getctag>
|
||||||
|
<D:sync-token>${Date.now()}</D:sync-token>
|
||||||
|
</D:prop>
|
||||||
|
<D:status>HTTP/1.1 200 OK</D:status>
|
||||||
|
</D:propstat>
|
||||||
|
</D:response>
|
||||||
|
</D:multistatus>`;
|
||||||
|
|
||||||
|
return c.text(response, 207, {
|
||||||
|
"Content-Type": "application/xml; charset=utf-8",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Calendar Events PROPFIND
|
||||||
|
caldavApp.all("/calendar/events.ics", async (c) => {
|
||||||
|
if (c.req.method !== 'PROPFIND') {
|
||||||
|
return c.text('Method Not Allowed', 405);
|
||||||
|
}
|
||||||
|
const response = `<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<D:multistatus xmlns:D="DAV:" xmlns:C="urn:ietf:params:xml:ns:caldav" xmlns:CS="http://calendarserver.org/ns/">
|
||||||
|
<D:response>
|
||||||
|
<D:href>/caldav/calendar/events.ics</D:href>
|
||||||
|
<D:propstat>
|
||||||
|
<D:prop>
|
||||||
|
<D:getcontenttype>text/calendar; charset=utf-8</D:getcontenttype>
|
||||||
|
<D:getetag>"${Date.now()}"</D:getetag>
|
||||||
|
<D:displayname>Stargirlnails Termine</D:displayname>
|
||||||
|
<C:calendar-data>BEGIN:VCALENDAR\\nVERSION:2.0\\nEND:VCALENDAR</C:calendar-data>
|
||||||
|
</D:prop>
|
||||||
|
<D:status>HTTP/1.1 200 OK</D:status>
|
||||||
|
</D:propstat>
|
||||||
|
</D:response>
|
||||||
|
</D:multistatus>`;
|
||||||
|
|
||||||
|
return c.text(response, 207, {
|
||||||
|
"Content-Type": "application/xml; charset=utf-8",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// GET Calendar Data (ICS-Datei)
|
||||||
|
caldavApp.get("/calendar/events.ics", async (c) => {
|
||||||
|
try {
|
||||||
|
// Authentifizierung über Token im Query-Parameter
|
||||||
|
const token = c.req.query('token');
|
||||||
|
if (!token) {
|
||||||
|
return c.text('Unauthorized - Token required', 401);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Token validieren
|
||||||
|
const tokenData = await sessionsKV.getItem(token);
|
||||||
|
if (!tokenData) {
|
||||||
|
return c.text('Unauthorized - Invalid token', 401);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Prüfe, ob es ein CalDAV-Token ist (durch Ablaufzeit und fehlende type-Eigenschaft erkennbar)
|
||||||
|
// CalDAV-Tokens haben eine kürzere Ablaufzeit (24h) als normale Sessions
|
||||||
|
const tokenAge = Date.now() - new Date(tokenData.createdAt).getTime();
|
||||||
|
if (tokenAge > 24 * 60 * 60 * 1000) { // 24 Stunden
|
||||||
|
return c.text('Unauthorized - Token expired', 401);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Token-Ablaufzeit prüfen
|
||||||
|
if (new Date(tokenData.expiresAt) < new Date()) {
|
||||||
|
return c.text('Unauthorized - Token expired', 401);
|
||||||
|
}
|
||||||
|
|
||||||
|
const bookings = await bookingsKV.getAllItems();
|
||||||
|
const treatments = await treatmentsKV.getAllItems();
|
||||||
|
|
||||||
|
const icsContent = generateICSContent(bookings, treatments);
|
||||||
|
|
||||||
|
return c.text(icsContent, 200, {
|
||||||
|
"Content-Type": "text/calendar; charset=utf-8",
|
||||||
|
"Content-Disposition": "inline; filename=\"stargirlnails-termine.ics\"",
|
||||||
|
"Cache-Control": "no-cache, no-store, must-revalidate",
|
||||||
|
"Pragma": "no-cache",
|
||||||
|
"Expires": "0",
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error("CalDAV GET error:", error);
|
||||||
|
return c.text('Internal Server Error', 500);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Fallback für andere CalDAV-Requests
|
||||||
|
caldavApp.all("*", async (c) => {
|
||||||
|
console.log(`CalDAV: Unhandled ${c.req.method} request to ${c.req.url}`);
|
||||||
|
return c.text('Not Found', 404);
|
||||||
|
});
|
||||||
@@ -30,12 +30,18 @@ export function clientEntry(c: Context<BlankEnv>) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return c.html(
|
return c.html(
|
||||||
<html lang="en">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charSet="utf-8" />
|
<meta charSet="utf-8" />
|
||||||
<meta content="width=device-width, initial-scale=1" name="viewport" />
|
<meta content="width=device-width, initial-scale=1" name="viewport" />
|
||||||
|
<meta name="theme-color" content="#ec4899" />
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
||||||
|
<meta name="apple-mobile-web-app-title" content="Stargirlnails" />
|
||||||
<title>Stargirlnails Kiel</title>
|
<title>Stargirlnails Kiel</title>
|
||||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||||
|
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
|
||||||
|
<link rel="manifest" href="/manifest.json" />
|
||||||
{cssFiles && cssFiles.map((css: string) => (
|
{cssFiles && cssFiles.map((css: string) => (
|
||||||
<link key={css} rel="stylesheet" href={css} />
|
<link key={css} rel="stylesheet" href={css} />
|
||||||
))}
|
))}
|
||||||
|
|||||||
@@ -1,193 +0,0 @@
|
|||||||
import { call, os } from "@orpc/server";
|
|
||||||
import { z } from "zod";
|
|
||||||
import { randomUUID } from "crypto";
|
|
||||||
import { createKV } from "../lib/create-kv.js";
|
|
||||||
|
|
||||||
const AvailabilitySchema = z.object({
|
|
||||||
id: z.string(),
|
|
||||||
date: z.string(), // YYYY-MM-DD
|
|
||||||
time: z.string(), // HH:MM
|
|
||||||
durationMinutes: z.number().int().positive(),
|
|
||||||
status: z.enum(["free", "reserved"]),
|
|
||||||
reservedByBookingId: z.string().optional(),
|
|
||||||
createdAt: z.string(),
|
|
||||||
});
|
|
||||||
|
|
||||||
export type Availability = z.output<typeof AvailabilitySchema>;
|
|
||||||
|
|
||||||
const kv = createKV<Availability>("availability");
|
|
||||||
|
|
||||||
// Minimal Owner-Prüfung über Sessions/Users KV
|
|
||||||
type Session = { id: string; userId: string; expiresAt: string; createdAt: string };
|
|
||||||
type User = { id: string; username: string; email: string; passwordHash: string; role: "customer" | "owner"; createdAt: string };
|
|
||||||
const sessionsKV = createKV<Session>("sessions");
|
|
||||||
const usersKV = createKV<User>("users");
|
|
||||||
|
|
||||||
async function assertOwner(sessionId: string): Promise<void> {
|
|
||||||
const session = await sessionsKV.getItem(sessionId);
|
|
||||||
if (!session) throw new Error("Invalid session");
|
|
||||||
if (new Date(session.expiresAt) < new Date()) throw new Error("Session expired");
|
|
||||||
const user = await usersKV.getItem(session.userId);
|
|
||||||
if (!user || user.role !== "owner") throw new Error("Forbidden");
|
|
||||||
}
|
|
||||||
|
|
||||||
const create = os
|
|
||||||
.input(
|
|
||||||
z.object({
|
|
||||||
sessionId: z.string(),
|
|
||||||
date: z.string().regex(/^\d{4}-\d{2}-\d{2}$/),
|
|
||||||
time: z.string().regex(/^\d{2}:\d{2}$/),
|
|
||||||
durationMinutes: z.number().int().positive(),
|
|
||||||
})
|
|
||||||
)
|
|
||||||
.handler(async ({ input }) => {
|
|
||||||
try {
|
|
||||||
await assertOwner(input.sessionId);
|
|
||||||
// Prevent duplicate slot on same date+time
|
|
||||||
const existing = await kv.getAllItems();
|
|
||||||
const conflict = existing.some((s) => s.date === input.date && s.time === input.time);
|
|
||||||
if (conflict) {
|
|
||||||
throw new Error("Es existiert bereits ein Slot zu diesem Datum und dieser Uhrzeit.");
|
|
||||||
}
|
|
||||||
const id = randomUUID();
|
|
||||||
const slot: Availability = {
|
|
||||||
id,
|
|
||||||
date: input.date,
|
|
||||||
time: input.time,
|
|
||||||
durationMinutes: input.durationMinutes,
|
|
||||||
status: "free",
|
|
||||||
createdAt: new Date().toISOString(),
|
|
||||||
};
|
|
||||||
await kv.setItem(id, slot);
|
|
||||||
return slot;
|
|
||||||
} catch (err) {
|
|
||||||
console.error("availability.create error", err);
|
|
||||||
throw err;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const update = os
|
|
||||||
.input(AvailabilitySchema.extend({ sessionId: z.string() }))
|
|
||||||
.handler(async ({ input }) => {
|
|
||||||
await assertOwner(input.sessionId);
|
|
||||||
const { sessionId, ...rest } = input as any;
|
|
||||||
await kv.setItem(rest.id, rest as Availability);
|
|
||||||
return rest as Availability;
|
|
||||||
});
|
|
||||||
|
|
||||||
const remove = os
|
|
||||||
.input(z.object({ sessionId: z.string(), id: z.string() }))
|
|
||||||
.handler(async ({ input }) => {
|
|
||||||
await assertOwner(input.sessionId);
|
|
||||||
const slot = await kv.getItem(input.id);
|
|
||||||
if (slot && slot.status === "reserved") throw new Error("Cannot delete reserved slot");
|
|
||||||
await kv.removeItem(input.id);
|
|
||||||
});
|
|
||||||
|
|
||||||
const list = os.handler(async () => {
|
|
||||||
const allSlots = await kv.getAllItems();
|
|
||||||
|
|
||||||
// Auto-delete past slots
|
|
||||||
const today = new Date().toISOString().split("T")[0]; // YYYY-MM-DD
|
|
||||||
const now = new Date();
|
|
||||||
const currentTime = `${String(now.getHours()).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}`;
|
|
||||||
|
|
||||||
let deletedCount = 0;
|
|
||||||
const slotsToDelete: string[] = [];
|
|
||||||
|
|
||||||
// Identify past slots for deletion
|
|
||||||
allSlots.forEach(slot => {
|
|
||||||
const isPastDate = slot.date < today;
|
|
||||||
const isPastTime = slot.date === today && slot.time <= currentTime;
|
|
||||||
|
|
||||||
if (isPastDate || isPastTime) {
|
|
||||||
slotsToDelete.push(slot.id);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Delete past slots (only if not reserved)
|
|
||||||
for (const slotId of slotsToDelete) {
|
|
||||||
const slot = await kv.getItem(slotId);
|
|
||||||
if (slot && slot.status !== "reserved") {
|
|
||||||
await kv.removeItem(slotId);
|
|
||||||
deletedCount++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (deletedCount > 0) {
|
|
||||||
console.log(`Auto-deleted ${deletedCount} past availability slots`);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Return remaining slots (all are now current/future)
|
|
||||||
const remainingSlots = allSlots.filter(slot => !slotsToDelete.includes(slot.id));
|
|
||||||
|
|
||||||
return remainingSlots;
|
|
||||||
});
|
|
||||||
|
|
||||||
const get = os.input(z.string()).handler(async ({ input }) => {
|
|
||||||
return kv.getItem(input);
|
|
||||||
});
|
|
||||||
|
|
||||||
const getByDate = os
|
|
||||||
.input(z.string()) // YYYY-MM-DD
|
|
||||||
.handler(async ({ input }) => {
|
|
||||||
const all = await kv.getAllItems();
|
|
||||||
return all.filter((s) => s.date === input);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Cleanup function to manually delete past slots
|
|
||||||
const cleanupPastSlots = os
|
|
||||||
.input(z.object({ sessionId: z.string() }))
|
|
||||||
.handler(async ({ input }) => {
|
|
||||||
await assertOwner(input.sessionId);
|
|
||||||
|
|
||||||
const allSlots = await kv.getAllItems();
|
|
||||||
const today = new Date().toISOString().split("T")[0];
|
|
||||||
const now = new Date();
|
|
||||||
const currentTime = `${String(now.getHours()).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}`;
|
|
||||||
|
|
||||||
let deletedCount = 0;
|
|
||||||
|
|
||||||
for (const slot of allSlots) {
|
|
||||||
const isPastDate = slot.date < today;
|
|
||||||
const isPastTime = slot.date === today && slot.time <= currentTime;
|
|
||||||
|
|
||||||
if ((isPastDate || isPastTime) && slot.status !== "reserved") {
|
|
||||||
await kv.removeItem(slot.id);
|
|
||||||
deletedCount++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(`Manual cleanup: deleted ${deletedCount} past availability slots`);
|
|
||||||
return { deletedCount, message: `${deletedCount} vergangene Slots wurden gelöscht.` };
|
|
||||||
});
|
|
||||||
|
|
||||||
const live = {
|
|
||||||
list: os.handler(async function* ({ signal }) {
|
|
||||||
yield call(list, {}, { signal });
|
|
||||||
for await (const _ of kv.subscribe()) {
|
|
||||||
yield call(list, {}, { signal });
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
byDate: os
|
|
||||||
.input(z.string())
|
|
||||||
.handler(async function* ({ input, signal }) {
|
|
||||||
yield call(getByDate, input, { signal });
|
|
||||||
for await (const _ of kv.subscribe()) {
|
|
||||||
yield call(getByDate, input, { signal });
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
};
|
|
||||||
|
|
||||||
export const router = {
|
|
||||||
create,
|
|
||||||
update,
|
|
||||||
remove,
|
|
||||||
list,
|
|
||||||
get,
|
|
||||||
getByDate,
|
|
||||||
cleanupPastSlots,
|
|
||||||
live,
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
@@ -2,9 +2,8 @@ import { call, os } from "@orpc/server";
|
|||||||
import { z } from "zod";
|
import { z } from "zod";
|
||||||
import { randomUUID } from "crypto";
|
import { randomUUID } from "crypto";
|
||||||
import { createKV } from "../lib/create-kv.js";
|
import { createKV } from "../lib/create-kv.js";
|
||||||
import { createKV as createAvailabilityKV } from "../lib/create-kv.js";
|
|
||||||
import { sendEmail, sendEmailWithAGB, sendEmailWithAGBAndCalendar, sendEmailWithInspirationPhoto } from "../lib/email.js";
|
import { sendEmail, sendEmailWithAGB, sendEmailWithAGBAndCalendar, sendEmailWithInspirationPhoto } from "../lib/email.js";
|
||||||
import { renderBookingPendingHTML, renderBookingConfirmedHTML, renderBookingCancelledHTML, renderAdminBookingNotificationHTML } from "../lib/email-templates.js";
|
import { renderBookingPendingHTML, renderBookingConfirmedHTML, renderBookingCancelledHTML, renderAdminBookingNotificationHTML, renderBookingRescheduleProposalHTML, renderAdminRescheduleAcceptedHTML, renderAdminRescheduleDeclinedHTML } from "../lib/email-templates.js";
|
||||||
import { router as rootRouter } from "./index.js";
|
import { router as rootRouter } from "./index.js";
|
||||||
import { createORPCClient } from "@orpc/client";
|
import { createORPCClient } from "@orpc/client";
|
||||||
import { RPCLink } from "@orpc/client/fetch";
|
import { RPCLink } from "@orpc/client/fetch";
|
||||||
@@ -30,37 +29,171 @@ function generateUrl(path: string = ''): string {
|
|||||||
return `${protocol}://${domain}${path}`;
|
return `${protocol}://${domain}${path}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Helper function to parse time string to minutes since midnight
|
||||||
|
function parseTime(timeStr: string): number {
|
||||||
|
const [hours, minutes] = timeStr.split(':').map(Number);
|
||||||
|
return hours * 60 + minutes;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper function to check if date is in time-off period
|
||||||
|
function isDateInTimeOffPeriod(date: string, periods: TimeOffPeriod[]): boolean {
|
||||||
|
return periods.some(period => date >= period.startDate && date <= period.endDate);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper function to validate booking time against recurring rules
|
||||||
|
async function validateBookingAgainstRules(
|
||||||
|
date: string,
|
||||||
|
time: string,
|
||||||
|
treatmentDuration: number
|
||||||
|
): Promise<void> {
|
||||||
|
// Parse date to get day of week
|
||||||
|
const [year, month, day] = date.split('-').map(Number);
|
||||||
|
const localDate = new Date(year, month - 1, day);
|
||||||
|
const dayOfWeek = localDate.getDay();
|
||||||
|
|
||||||
|
// Check time-off periods
|
||||||
|
const timeOffPeriods = await timeOffPeriodsKV.getAllItems();
|
||||||
|
if (isDateInTimeOffPeriod(date, timeOffPeriods)) {
|
||||||
|
throw new Error("Dieser Tag ist nicht verfügbar (Urlaubszeit).");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Find matching recurring rules
|
||||||
|
const allRules = await recurringRulesKV.getAllItems();
|
||||||
|
const matchingRules = allRules.filter(rule =>
|
||||||
|
rule.isActive === true && rule.dayOfWeek === dayOfWeek
|
||||||
|
);
|
||||||
|
|
||||||
|
if (matchingRules.length === 0) {
|
||||||
|
throw new Error("Für diesen Wochentag sind keine Termine verfügbar.");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if booking time falls within any rule's time span
|
||||||
|
const bookingStartMinutes = parseTime(time);
|
||||||
|
const bookingEndMinutes = bookingStartMinutes + treatmentDuration;
|
||||||
|
|
||||||
|
const isWithinRules = matchingRules.some(rule => {
|
||||||
|
const ruleStartMinutes = parseTime(rule.startTime);
|
||||||
|
const ruleEndMinutes = parseTime(rule.endTime);
|
||||||
|
|
||||||
|
// Booking must start at or after rule start and end at or before rule end
|
||||||
|
return bookingStartMinutes >= ruleStartMinutes && bookingEndMinutes <= ruleEndMinutes;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!isWithinRules) {
|
||||||
|
throw new Error("Die gewählte Uhrzeit liegt außerhalb der verfügbaren Zeiten.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper function to check for booking conflicts
|
||||||
|
async function checkBookingConflicts(
|
||||||
|
date: string,
|
||||||
|
time: string,
|
||||||
|
treatmentDuration: number,
|
||||||
|
excludeBookingId?: string
|
||||||
|
): Promise<void> {
|
||||||
|
const allBookings = await kv.getAllItems();
|
||||||
|
const dateBookings = allBookings.filter(booking =>
|
||||||
|
booking.appointmentDate === date &&
|
||||||
|
['pending', 'confirmed', 'completed'].includes(booking.status) &&
|
||||||
|
booking.id !== excludeBookingId
|
||||||
|
);
|
||||||
|
|
||||||
|
const bookingStartMinutes = parseTime(time);
|
||||||
|
const bookingEndMinutes = bookingStartMinutes + treatmentDuration;
|
||||||
|
|
||||||
|
// Cache treatment durations by ID to avoid N+1 lookups
|
||||||
|
const uniqueTreatmentIds = [...new Set(dateBookings.map(booking => booking.treatmentId))];
|
||||||
|
const treatmentDurationMap = new Map<string, number>();
|
||||||
|
|
||||||
|
for (const treatmentId of uniqueTreatmentIds) {
|
||||||
|
const treatment = await treatmentsKV.getItem(treatmentId);
|
||||||
|
treatmentDurationMap.set(treatmentId, treatment?.duration || 60);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check for overlaps with existing bookings
|
||||||
|
for (const existingBooking of dateBookings) {
|
||||||
|
// Use cached duration or fallback to bookedDurationMinutes if available
|
||||||
|
let existingDuration = treatmentDurationMap.get(existingBooking.treatmentId) || 60;
|
||||||
|
if (existingBooking.bookedDurationMinutes) {
|
||||||
|
existingDuration = existingBooking.bookedDurationMinutes;
|
||||||
|
}
|
||||||
|
|
||||||
|
const existingStartMinutes = parseTime(existingBooking.appointmentTime);
|
||||||
|
const existingEndMinutes = existingStartMinutes + existingDuration;
|
||||||
|
|
||||||
|
// Check overlap: bookingStart < existingEnd && bookingEnd > existingStart
|
||||||
|
if (bookingStartMinutes < existingEndMinutes && bookingEndMinutes > existingStartMinutes) {
|
||||||
|
throw new Error("Dieser Zeitslot ist bereits gebucht. Bitte wähle eine andere Zeit.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const CreateBookingInputSchema = z.object({
|
||||||
|
treatmentId: z.string(),
|
||||||
|
customerName: z.string().min(2, "Name muss mindestens 2 Zeichen lang sein"),
|
||||||
|
customerEmail: z.string().email("Ungültige E-Mail-Adresse"),
|
||||||
|
customerPhone: z.string().min(5, "Telefonnummer muss mindestens 5 Zeichen lang sein").optional(),
|
||||||
|
appointmentDate: z.string(), // ISO date string
|
||||||
|
appointmentTime: z.string(), // HH:MM format
|
||||||
|
notes: z.string().optional(),
|
||||||
|
inspirationPhoto: z.string().optional(), // Base64 encoded image data
|
||||||
|
});
|
||||||
|
|
||||||
const BookingSchema = z.object({
|
const BookingSchema = z.object({
|
||||||
id: z.string(),
|
id: z.string(),
|
||||||
treatmentId: z.string(),
|
treatmentId: z.string(),
|
||||||
customerName: z.string().min(2, "Name muss mindestens 2 Zeichen lang sein"),
|
customerName: z.string().min(2, "Name muss mindestens 2 Zeichen lang sein"),
|
||||||
customerEmail: z.string().email("Ungültige E-Mail-Adresse"),
|
customerEmail: z.string().email("Ungültige E-Mail-Adresse").optional(),
|
||||||
customerPhone: z.string().min(5, "Telefonnummer muss mindestens 5 Zeichen lang sein"),
|
customerPhone: z.string().min(5, "Telefonnummer muss mindestens 5 Zeichen lang sein").optional(),
|
||||||
appointmentDate: z.string(), // ISO date string
|
appointmentDate: z.string(), // ISO date string
|
||||||
appointmentTime: z.string(), // HH:MM format
|
appointmentTime: z.string(), // HH:MM format
|
||||||
status: z.enum(["pending", "confirmed", "cancelled", "completed"]),
|
status: z.enum(["pending", "confirmed", "cancelled", "completed"]),
|
||||||
notes: z.string().optional(),
|
notes: z.string().optional(),
|
||||||
inspirationPhoto: z.string().optional(), // Base64 encoded image data
|
inspirationPhoto: z.string().optional(), // Base64 encoded image data
|
||||||
|
bookedDurationMinutes: z.number().optional(), // Snapshot of treatment duration at booking time
|
||||||
createdAt: z.string(),
|
createdAt: z.string(),
|
||||||
|
// DEPRECATED: slotId is no longer used for validation, kept for backward compatibility
|
||||||
slotId: z.string().optional(),
|
slotId: z.string().optional(),
|
||||||
});
|
});
|
||||||
|
|
||||||
type Booking = z.output<typeof BookingSchema>;
|
type Booking = z.output<typeof BookingSchema>;
|
||||||
|
|
||||||
const kv = createKV<Booking>("bookings");
|
const kv = createKV<Booking>("bookings");
|
||||||
type Availability = {
|
|
||||||
|
// DEPRECATED: Availability slots are no longer used for booking validation
|
||||||
|
// type Availability = {
|
||||||
|
// id: string;
|
||||||
|
// date: string;
|
||||||
|
// time: string;
|
||||||
|
// durationMinutes: number;
|
||||||
|
// status: "free" | "reserved";
|
||||||
|
// reservedByBookingId?: string;
|
||||||
|
// createdAt: string;
|
||||||
|
// };
|
||||||
|
// const availabilityKV = createAvailabilityKV<Availability>("availability");
|
||||||
|
|
||||||
|
type RecurringRule = {
|
||||||
id: string;
|
id: string;
|
||||||
date: string;
|
dayOfWeek: number;
|
||||||
time: string;
|
startTime: string;
|
||||||
durationMinutes: number;
|
endTime: string;
|
||||||
status: "free" | "reserved";
|
isActive: boolean;
|
||||||
reservedByBookingId?: string;
|
createdAt: string;
|
||||||
|
slotDurationMinutes?: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
type TimeOffPeriod = {
|
||||||
|
id: string;
|
||||||
|
startDate: string;
|
||||||
|
endDate: string;
|
||||||
|
reason: string;
|
||||||
createdAt: string;
|
createdAt: string;
|
||||||
};
|
};
|
||||||
const availabilityKV = createAvailabilityKV<Availability>("availability");
|
|
||||||
|
const recurringRulesKV = createKV<RecurringRule>("recurringRules");
|
||||||
|
const timeOffPeriodsKV = createKV<TimeOffPeriod>("timeOffPeriods");
|
||||||
|
|
||||||
// Import treatments KV for admin notifications
|
// Import treatments KV for admin notifications
|
||||||
import { createKV as createTreatmentsKV } from "../lib/create-kv.js";
|
|
||||||
type Treatment = {
|
type Treatment = {
|
||||||
id: string;
|
id: string;
|
||||||
name: string;
|
name: string;
|
||||||
@@ -70,10 +203,10 @@ type Treatment = {
|
|||||||
category: string;
|
category: string;
|
||||||
createdAt: string;
|
createdAt: string;
|
||||||
};
|
};
|
||||||
const treatmentsKV = createTreatmentsKV<Treatment>("treatments");
|
const treatmentsKV = createKV<Treatment>("treatments");
|
||||||
|
|
||||||
const create = os
|
const create = os
|
||||||
.input(BookingSchema.omit({ id: true, createdAt: true, status: true }))
|
.input(CreateBookingInputSchema)
|
||||||
.handler(async ({ input }) => {
|
.handler(async ({ input }) => {
|
||||||
// console.log("Booking create called with input:", {
|
// console.log("Booking create called with input:", {
|
||||||
// ...input,
|
// ...input,
|
||||||
@@ -105,6 +238,12 @@ const create = os
|
|||||||
throw new Error(emailValidation.reason || "Ungültige E-Mail-Adresse");
|
throw new Error(emailValidation.reason || "Ungültige E-Mail-Adresse");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Validate appointment time is on 15-minute grid
|
||||||
|
const appointmentMinutes = parseTime(input.appointmentTime);
|
||||||
|
if (appointmentMinutes % 15 !== 0) {
|
||||||
|
throw new Error("Termine müssen auf 15-Minuten-Raster ausgerichtet sein (z.B. 09:00, 09:15, 09:30, 09:45).");
|
||||||
|
}
|
||||||
|
|
||||||
// Validate that the booking is not in the past
|
// Validate that the booking is not in the past
|
||||||
const today = new Date().toISOString().split("T")[0]; // YYYY-MM-DD
|
const today = new Date().toISOString().split("T")[0]; // YYYY-MM-DD
|
||||||
if (input.appointmentDate < today) {
|
if (input.appointmentDate < today) {
|
||||||
@@ -125,7 +264,7 @@ const create = os
|
|||||||
if (!process.env.DISABLE_DUPLICATE_CHECK) {
|
if (!process.env.DISABLE_DUPLICATE_CHECK) {
|
||||||
const existing = await kv.getAllItems();
|
const existing = await kv.getAllItems();
|
||||||
const hasConflict = existing.some(b =>
|
const hasConflict = existing.some(b =>
|
||||||
b.customerEmail.toLowerCase() === input.customerEmail.toLowerCase() &&
|
(b.customerEmail && b.customerEmail.toLowerCase() === input.customerEmail.toLowerCase()) &&
|
||||||
b.appointmentDate === input.appointmentDate &&
|
b.appointmentDate === input.appointmentDate &&
|
||||||
(b.status === "pending" || b.status === "confirmed")
|
(b.status === "pending" || b.status === "confirmed")
|
||||||
);
|
);
|
||||||
@@ -133,30 +272,38 @@ const create = os
|
|||||||
throw new Error("Du hast bereits eine Buchung für dieses Datum. Bitte wähle einen anderen Tag oder storniere zuerst.");
|
throw new Error("Du hast bereits eine Buchung für dieses Datum. Bitte wähle einen anderen Tag oder storniere zuerst.");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// Get treatment duration for validation
|
||||||
|
const treatment = await treatmentsKV.getItem(input.treatmentId);
|
||||||
|
if (!treatment) {
|
||||||
|
throw new Error("Behandlung nicht gefunden.");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validate booking time against recurring rules
|
||||||
|
await validateBookingAgainstRules(
|
||||||
|
input.appointmentDate,
|
||||||
|
input.appointmentTime,
|
||||||
|
treatment.duration
|
||||||
|
);
|
||||||
|
|
||||||
|
// Check for booking conflicts
|
||||||
|
await checkBookingConflicts(
|
||||||
|
input.appointmentDate,
|
||||||
|
input.appointmentTime,
|
||||||
|
treatment.duration
|
||||||
|
);
|
||||||
|
|
||||||
const id = randomUUID();
|
const id = randomUUID();
|
||||||
const booking = {
|
const booking = {
|
||||||
id,
|
id,
|
||||||
...input,
|
...input,
|
||||||
|
bookedDurationMinutes: treatment.duration, // Snapshot treatment duration
|
||||||
status: "pending" as const,
|
status: "pending" as const,
|
||||||
createdAt: new Date().toISOString()
|
createdAt: new Date().toISOString()
|
||||||
};
|
};
|
||||||
|
|
||||||
// First save the booking
|
// Save the booking
|
||||||
await kv.setItem(id, booking);
|
await kv.setItem(id, booking);
|
||||||
|
|
||||||
// Then reserve the slot only after successful booking creation
|
|
||||||
if (booking.slotId) {
|
|
||||||
const slot = await availabilityKV.getItem(booking.slotId);
|
|
||||||
if (!slot) throw new Error("Availability slot not found");
|
|
||||||
if (slot.status !== "free") throw new Error("Slot not available");
|
|
||||||
const updatedSlot: Availability = {
|
|
||||||
...slot,
|
|
||||||
status: "reserved",
|
|
||||||
reservedByBookingId: id,
|
|
||||||
};
|
|
||||||
await availabilityKV.setItem(slot.id, updatedSlot);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Notify customer: request received (pending)
|
// Notify customer: request received (pending)
|
||||||
void (async () => {
|
void (async () => {
|
||||||
// Create booking access token for status viewing
|
// Create booking access token for status viewing
|
||||||
@@ -193,7 +340,7 @@ const create = os
|
|||||||
date: input.appointmentDate,
|
date: input.appointmentDate,
|
||||||
time: input.appointmentTime,
|
time: input.appointmentTime,
|
||||||
treatment: treatmentName,
|
treatment: treatmentName,
|
||||||
phone: input.customerPhone,
|
phone: input.customerPhone || "Nicht angegeben",
|
||||||
notes: input.notes,
|
notes: input.notes,
|
||||||
hasInspirationPhoto: !!input.inspirationPhoto
|
hasInspirationPhoto: !!input.inspirationPhoto
|
||||||
});
|
});
|
||||||
@@ -202,7 +349,7 @@ const create = os
|
|||||||
|
|
||||||
const adminText = `Neue Buchungsanfrage eingegangen:\n\n` +
|
const adminText = `Neue Buchungsanfrage eingegangen:\n\n` +
|
||||||
`Name: ${input.customerName}\n` +
|
`Name: ${input.customerName}\n` +
|
||||||
`Telefon: ${input.customerPhone}\n` +
|
`Telefon: ${input.customerPhone || "Nicht angegeben"}\n` +
|
||||||
`Behandlung: ${treatmentName}\n` +
|
`Behandlung: ${treatmentName}\n` +
|
||||||
`Datum: ${formatDateGerman(input.appointmentDate)}\n` +
|
`Datum: ${formatDateGerman(input.appointmentDate)}\n` +
|
||||||
`Uhrzeit: ${input.appointmentTime}\n` +
|
`Uhrzeit: ${input.appointmentTime}\n` +
|
||||||
@@ -264,43 +411,7 @@ const updateStatus = os
|
|||||||
const updatedBooking = { ...booking, status: input.status };
|
const updatedBooking = { ...booking, status: input.status };
|
||||||
await kv.setItem(input.id, updatedBooking);
|
await kv.setItem(input.id, updatedBooking);
|
||||||
|
|
||||||
// Manage availability slot state transitions
|
// Note: Slot state management removed - bookings now validated against recurring rules
|
||||||
if (booking.slotId) {
|
|
||||||
const slot = await availabilityKV.getItem(booking.slotId);
|
|
||||||
if (slot) {
|
|
||||||
// console.log(`Updating slot ${slot.id} (${slot.date} ${slot.time}) from ${slot.status} to ${input.status}`);
|
|
||||||
|
|
||||||
if (input.status === "cancelled") {
|
|
||||||
// Free the slot again
|
|
||||||
await availabilityKV.setItem(slot.id, {
|
|
||||||
...slot,
|
|
||||||
status: "free",
|
|
||||||
reservedByBookingId: undefined,
|
|
||||||
});
|
|
||||||
// console.log(`Slot ${slot.id} freed due to cancellation`);
|
|
||||||
} else if (input.status === "pending") {
|
|
||||||
// keep reserved as pending
|
|
||||||
if (slot.status !== "reserved") {
|
|
||||||
await availabilityKV.setItem(slot.id, {
|
|
||||||
...slot,
|
|
||||||
status: "reserved",
|
|
||||||
reservedByBookingId: booking.id,
|
|
||||||
});
|
|
||||||
// console.log(`Slot ${slot.id} reserved for pending booking`);
|
|
||||||
}
|
|
||||||
} else if (input.status === "confirmed" || input.status === "completed") {
|
|
||||||
// keep reserved; optionally noop
|
|
||||||
if (slot.status !== "reserved" || slot.reservedByBookingId !== booking.id) {
|
|
||||||
await availabilityKV.setItem(slot.id, {
|
|
||||||
...slot,
|
|
||||||
status: "reserved",
|
|
||||||
reservedByBookingId: booking.id,
|
|
||||||
});
|
|
||||||
// console.log(`Slot ${slot.id} confirmed as reserved`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Email notifications on status changes
|
// Email notifications on status changes
|
||||||
try {
|
try {
|
||||||
if (input.status === "confirmed") {
|
if (input.status === "confirmed") {
|
||||||
@@ -315,21 +426,24 @@ const updateStatus = os
|
|||||||
name: booking.customerName,
|
name: booking.customerName,
|
||||||
date: booking.appointmentDate,
|
date: booking.appointmentDate,
|
||||||
time: booking.appointmentTime,
|
time: booking.appointmentTime,
|
||||||
cancellationUrl: bookingUrl // Now points to booking status page
|
cancellationUrl: bookingUrl, // Now points to booking status page
|
||||||
|
reviewUrl: generateUrl(`/review/${bookingAccessToken.token}`)
|
||||||
});
|
});
|
||||||
|
|
||||||
// Get treatment information for ICS file
|
// Get treatment information for ICS file
|
||||||
const allTreatments = await treatmentsKV.getAllItems();
|
const allTreatments = await treatmentsKV.getAllItems();
|
||||||
const treatment = allTreatments.find(t => t.id === booking.treatmentId);
|
const treatment = allTreatments.find(t => t.id === booking.treatmentId);
|
||||||
const treatmentName = treatment?.name || "Behandlung";
|
const treatmentName = treatment?.name || "Behandlung";
|
||||||
const treatmentDuration = treatment?.duration || 60; // Default 60 minutes if not found
|
// Use bookedDurationMinutes if available, otherwise fallback to treatment duration
|
||||||
|
const treatmentDuration = booking.bookedDurationMinutes || treatment?.duration || 60;
|
||||||
|
|
||||||
|
if (booking.customerEmail) {
|
||||||
await sendEmailWithAGBAndCalendar({
|
await sendEmailWithAGBAndCalendar({
|
||||||
to: booking.customerEmail,
|
to: booking.customerEmail,
|
||||||
subject: "Dein Termin wurde bestätigt - AGB im Anhang",
|
subject: "Dein Termin wurde bestätigt - AGB im Anhang",
|
||||||
text: `Hallo ${booking.customerName},\n\nwir haben deinen Termin am ${formattedDate} um ${booking.appointmentTime} bestätigt.\n\nWichtiger Hinweis: Die Allgemeinen Geschäftsbedingungen (AGB) findest du im Anhang dieser E-Mail. Bitte lies sie vor deinem Termin durch.\n\nTermin-Status ansehen und verwalten: ${bookingUrl}\nFalls du den Termin stornieren möchtest, kannst du das über den obigen Link tun.\n\nRechtliche Informationen: ${generateUrl('/legal')}\nZur Website: ${homepageUrl}\n\nBis bald!\nStargirlnails Kiel`,
|
text: `Hallo ${booking.customerName},\n\nwir haben deinen Termin am ${formattedDate} um ${booking.appointmentTime} bestätigt.\n\nWichtiger Hinweis: Die Allgemeinen Geschäftsbedingungen (AGB) findest du im Anhang dieser E-Mail. Bitte lies sie vor deinem Termin durch.\n\nTermin-Status ansehen und verwalten: ${bookingUrl}\nFalls du den Termin stornieren möchtest, kannst du das über den obigen Link tun.\n\nRechtliche Informationen: ${generateUrl('/legal')}\nZur Website: ${homepageUrl}\n\nBis bald!\nStargirlnails Kiel`,
|
||||||
html,
|
html,
|
||||||
cc: process.env.ADMIN_EMAIL ? [process.env.ADMIN_EMAIL] : undefined,
|
bcc: process.env.ADMIN_EMAIL ? [process.env.ADMIN_EMAIL] : undefined,
|
||||||
}, {
|
}, {
|
||||||
date: booking.appointmentDate,
|
date: booking.appointmentDate,
|
||||||
time: booking.appointmentTime,
|
time: booking.appointmentTime,
|
||||||
@@ -337,7 +451,57 @@ const updateStatus = os
|
|||||||
customerName: booking.customerName,
|
customerName: booking.customerName,
|
||||||
treatmentName: treatmentName
|
treatmentName: treatmentName
|
||||||
});
|
});
|
||||||
|
}
|
||||||
} else if (input.status === "cancelled") {
|
} else if (input.status === "cancelled") {
|
||||||
|
const formattedDate = formatDateGerman(booking.appointmentDate);
|
||||||
|
const homepageUrl = generateUrl();
|
||||||
|
const html = await renderBookingCancelledHTML({ name: booking.customerName, date: booking.appointmentDate, time: booking.appointmentTime });
|
||||||
|
if (booking.customerEmail) {
|
||||||
|
await sendEmail({
|
||||||
|
to: booking.customerEmail,
|
||||||
|
subject: "Dein Termin wurde abgesagt",
|
||||||
|
text: `Hallo ${booking.customerName},\n\nleider wurde dein Termin am ${formattedDate} um ${booking.appointmentTime} abgesagt. Bitte buche einen neuen Termin.\n\nRechtliche Informationen: ${generateUrl('/legal')}\nZur Website: ${homepageUrl}\n\nLiebe Grüße\nStargirlnails Kiel`,
|
||||||
|
html,
|
||||||
|
bcc: process.env.ADMIN_EMAIL ? [process.env.ADMIN_EMAIL] : undefined,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Email send failed:", e);
|
||||||
|
}
|
||||||
|
return updatedBooking;
|
||||||
|
});
|
||||||
|
|
||||||
|
const remove = os
|
||||||
|
.input(z.object({
|
||||||
|
sessionId: z.string(),
|
||||||
|
id: z.string(),
|
||||||
|
sendEmail: z.boolean().optional().default(false)
|
||||||
|
}))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
const booking = await kv.getItem(input.id);
|
||||||
|
if (!booking) throw new Error("Booking not found");
|
||||||
|
|
||||||
|
// Guard against deletion of past bookings or completed bookings
|
||||||
|
const today = new Date().toISOString().split("T")[0];
|
||||||
|
const isPastDate = booking.appointmentDate < today;
|
||||||
|
const isCompleted = booking.status === 'completed';
|
||||||
|
|
||||||
|
if (isPastDate || isCompleted) {
|
||||||
|
// For past/completed bookings, disable email sending to avoid confusing customers
|
||||||
|
if (input.sendEmail) {
|
||||||
|
console.log(`Email sending disabled for past/completed booking ${input.id}`);
|
||||||
|
}
|
||||||
|
input.sendEmail = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const wasAlreadyCancelled = booking.status === 'cancelled';
|
||||||
|
const updatedBooking = { ...booking, status: "cancelled" as const };
|
||||||
|
await kv.setItem(input.id, updatedBooking);
|
||||||
|
|
||||||
|
if (input.sendEmail && !wasAlreadyCancelled && booking.customerEmail) {
|
||||||
|
try {
|
||||||
const formattedDate = formatDateGerman(booking.appointmentDate);
|
const formattedDate = formatDateGerman(booking.appointmentDate);
|
||||||
const homepageUrl = generateUrl();
|
const homepageUrl = generateUrl();
|
||||||
const html = await renderBookingCancelledHTML({ name: booking.customerName, date: booking.appointmentDate, time: booking.appointmentTime });
|
const html = await renderBookingCancelledHTML({ name: booking.customerName, date: booking.appointmentDate, time: booking.appointmentTime });
|
||||||
@@ -346,18 +510,134 @@ const updateStatus = os
|
|||||||
subject: "Dein Termin wurde abgesagt",
|
subject: "Dein Termin wurde abgesagt",
|
||||||
text: `Hallo ${booking.customerName},\n\nleider wurde dein Termin am ${formattedDate} um ${booking.appointmentTime} abgesagt. Bitte buche einen neuen Termin.\n\nRechtliche Informationen: ${generateUrl('/legal')}\nZur Website: ${homepageUrl}\n\nLiebe Grüße\nStargirlnails Kiel`,
|
text: `Hallo ${booking.customerName},\n\nleider wurde dein Termin am ${formattedDate} um ${booking.appointmentTime} abgesagt. Bitte buche einen neuen Termin.\n\nRechtliche Informationen: ${generateUrl('/legal')}\nZur Website: ${homepageUrl}\n\nLiebe Grüße\nStargirlnails Kiel`,
|
||||||
html,
|
html,
|
||||||
cc: process.env.ADMIN_EMAIL ? [process.env.ADMIN_EMAIL] : undefined,
|
bcc: process.env.ADMIN_EMAIL ? [process.env.ADMIN_EMAIL] : undefined,
|
||||||
});
|
});
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Email send failed:", e);
|
||||||
}
|
}
|
||||||
} catch (e) {
|
|
||||||
console.error("Email send failed:", e);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return updatedBooking;
|
return updatedBooking;
|
||||||
});
|
});
|
||||||
|
|
||||||
const remove = os.input(z.string()).handler(async ({ input }) => {
|
// Admin-only manual booking creation (immediately confirmed)
|
||||||
await kv.removeItem(input);
|
const createManual = os
|
||||||
});
|
.input(z.object({
|
||||||
|
sessionId: z.string(),
|
||||||
|
treatmentId: z.string(),
|
||||||
|
customerName: z.string().min(2, "Name muss mindestens 2 Zeichen lang sein"),
|
||||||
|
customerEmail: z.string().email("Ungültige E-Mail-Adresse").optional(),
|
||||||
|
customerPhone: z.string().min(5, "Telefonnummer muss mindestens 5 Zeichen lang sein").optional(),
|
||||||
|
appointmentDate: z.string(),
|
||||||
|
appointmentTime: z.string(),
|
||||||
|
notes: z.string().optional(),
|
||||||
|
}))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
// Admin authentication
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
|
||||||
|
// Validate appointment time is on 15-minute grid
|
||||||
|
const appointmentMinutes = parseTime(input.appointmentTime);
|
||||||
|
if (appointmentMinutes % 15 !== 0) {
|
||||||
|
throw new Error("Termine müssen auf 15-Minuten-Raster ausgerichtet sein (z.B. 09:00, 09:15, 09:30, 09:45).");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validate that the booking is not in the past
|
||||||
|
const today = new Date().toISOString().split("T")[0];
|
||||||
|
if (input.appointmentDate < today) {
|
||||||
|
throw new Error("Buchungen für vergangene Termine sind nicht möglich.");
|
||||||
|
}
|
||||||
|
|
||||||
|
// For today's bookings, check if the time is not in the past
|
||||||
|
if (input.appointmentDate === today) {
|
||||||
|
const now = new Date();
|
||||||
|
const currentTime = `${String(now.getHours()).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}`;
|
||||||
|
if (input.appointmentTime <= currentTime) {
|
||||||
|
throw new Error("Buchungen für vergangene Uhrzeiten sind nicht möglich.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get treatment duration for validation
|
||||||
|
const treatment = await treatmentsKV.getItem(input.treatmentId);
|
||||||
|
if (!treatment) {
|
||||||
|
throw new Error("Behandlung nicht gefunden.");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validate booking time against recurring rules
|
||||||
|
await validateBookingAgainstRules(
|
||||||
|
input.appointmentDate,
|
||||||
|
input.appointmentTime,
|
||||||
|
treatment.duration
|
||||||
|
);
|
||||||
|
|
||||||
|
// Check for booking conflicts
|
||||||
|
await checkBookingConflicts(
|
||||||
|
input.appointmentDate,
|
||||||
|
input.appointmentTime,
|
||||||
|
treatment.duration
|
||||||
|
);
|
||||||
|
|
||||||
|
const id = randomUUID();
|
||||||
|
const booking = {
|
||||||
|
id,
|
||||||
|
treatmentId: input.treatmentId,
|
||||||
|
customerName: input.customerName,
|
||||||
|
customerEmail: input.customerEmail,
|
||||||
|
customerPhone: input.customerPhone,
|
||||||
|
appointmentDate: input.appointmentDate,
|
||||||
|
appointmentTime: input.appointmentTime,
|
||||||
|
notes: input.notes,
|
||||||
|
bookedDurationMinutes: treatment.duration,
|
||||||
|
status: "confirmed" as const,
|
||||||
|
createdAt: new Date().toISOString()
|
||||||
|
} as Booking;
|
||||||
|
|
||||||
|
// Save the booking
|
||||||
|
await kv.setItem(id, booking);
|
||||||
|
|
||||||
|
// Create booking access token for status viewing and cancellation (always create token)
|
||||||
|
const bookingAccessToken = await queryClient.cancellation.createToken({ bookingId: id });
|
||||||
|
|
||||||
|
// Send confirmation email if email is provided
|
||||||
|
if (input.customerEmail) {
|
||||||
|
void (async () => {
|
||||||
|
try {
|
||||||
|
const bookingUrl = generateUrl(`/booking/${bookingAccessToken.token}`);
|
||||||
|
const formattedDate = formatDateGerman(input.appointmentDate);
|
||||||
|
const homepageUrl = generateUrl();
|
||||||
|
|
||||||
|
const html = await renderBookingConfirmedHTML({
|
||||||
|
name: input.customerName,
|
||||||
|
date: input.appointmentDate,
|
||||||
|
time: input.appointmentTime,
|
||||||
|
cancellationUrl: bookingUrl,
|
||||||
|
reviewUrl: generateUrl(`/review/${bookingAccessToken.token}`)
|
||||||
|
});
|
||||||
|
|
||||||
|
await sendEmailWithAGBAndCalendar({
|
||||||
|
to: input.customerEmail!,
|
||||||
|
subject: "Dein Termin wurde bestätigt - AGB im Anhang",
|
||||||
|
text: `Hallo ${input.customerName},\n\nwir haben deinen Termin am ${formattedDate} um ${input.appointmentTime} bestätigt.\n\nWichtiger Hinweis: Die Allgemeinen Geschäftsbedingungen (AGB) findest du im Anhang dieser E-Mail. Bitte lies sie vor deinem Termin durch.\n\nTermin-Status ansehen und verwalten: ${bookingUrl}\nFalls du den Termin stornieren möchtest, kannst du das über den obigen Link tun.\n\nRechtliche Informationen: ${generateUrl('/legal')}\nZur Website: ${homepageUrl}\n\nBis bald!\nStargirlnails Kiel`,
|
||||||
|
html,
|
||||||
|
}, {
|
||||||
|
date: input.appointmentDate,
|
||||||
|
time: input.appointmentTime,
|
||||||
|
durationMinutes: treatment.duration,
|
||||||
|
customerName: input.customerName,
|
||||||
|
treatmentName: treatment.name
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Email send failed for manual booking:", e);
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Optionally return the token in the RPC response for UI to copy/share (admin usage only)
|
||||||
|
return {
|
||||||
|
...booking,
|
||||||
|
bookingAccessToken: bookingAccessToken.token
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
const list = os.handler(async () => {
|
const list = os.handler(async () => {
|
||||||
return kv.getAllItems();
|
return kv.getAllItems();
|
||||||
@@ -394,10 +674,241 @@ const live = {
|
|||||||
|
|
||||||
export const router = {
|
export const router = {
|
||||||
create,
|
create,
|
||||||
|
createManual,
|
||||||
updateStatus,
|
updateStatus,
|
||||||
remove,
|
remove,
|
||||||
list,
|
list,
|
||||||
get,
|
get,
|
||||||
getByDate,
|
getByDate,
|
||||||
live,
|
live,
|
||||||
|
// Admin proposes a reschedule for a confirmed booking
|
||||||
|
proposeReschedule: os
|
||||||
|
.input(z.object({
|
||||||
|
sessionId: z.string(),
|
||||||
|
bookingId: z.string(),
|
||||||
|
proposedDate: z.string(),
|
||||||
|
proposedTime: z.string(),
|
||||||
|
}))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
const booking = await kv.getItem(input.bookingId);
|
||||||
|
if (!booking) throw new Error("Booking not found");
|
||||||
|
if (booking.status !== "confirmed") throw new Error("Nur bestätigte Termine können umgebucht werden.");
|
||||||
|
|
||||||
|
const treatment = await treatmentsKV.getItem(booking.treatmentId);
|
||||||
|
if (!treatment) throw new Error("Behandlung nicht gefunden.");
|
||||||
|
|
||||||
|
// Validate grid and not in past
|
||||||
|
const appointmentMinutes = parseTime(input.proposedTime);
|
||||||
|
if (appointmentMinutes % 15 !== 0) {
|
||||||
|
throw new Error("Termine müssen auf 15-Minuten-Raster ausgerichtet sein (z.B. 09:00, 09:15, 09:30, 09:45).");
|
||||||
|
}
|
||||||
|
const today = new Date().toISOString().split("T")[0];
|
||||||
|
if (input.proposedDate < today) {
|
||||||
|
throw new Error("Buchungen für vergangene Termine sind nicht möglich.");
|
||||||
|
}
|
||||||
|
if (input.proposedDate === today) {
|
||||||
|
const now = new Date();
|
||||||
|
const currentTime = `${String(now.getHours()).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}`;
|
||||||
|
if (input.proposedTime <= currentTime) {
|
||||||
|
throw new Error("Buchungen für vergangene Uhrzeiten sind nicht möglich.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
await validateBookingAgainstRules(input.proposedDate, input.proposedTime, booking.bookedDurationMinutes || treatment.duration);
|
||||||
|
await checkBookingConflicts(input.proposedDate, input.proposedTime, booking.bookedDurationMinutes || treatment.duration, booking.id);
|
||||||
|
|
||||||
|
// Invalidate and create new reschedule token via cancellation router
|
||||||
|
const res = await queryClient.cancellation.createRescheduleToken({
|
||||||
|
bookingId: booking.id,
|
||||||
|
proposedDate: input.proposedDate,
|
||||||
|
proposedTime: input.proposedTime,
|
||||||
|
});
|
||||||
|
const acceptUrl = generateUrl(`/booking/${res.token}?action=accept`);
|
||||||
|
const declineUrl = generateUrl(`/booking/${res.token}?action=decline`);
|
||||||
|
|
||||||
|
// Send proposal email to customer
|
||||||
|
if (booking.customerEmail) {
|
||||||
|
const html = await renderBookingRescheduleProposalHTML({
|
||||||
|
name: booking.customerName,
|
||||||
|
originalDate: booking.appointmentDate,
|
||||||
|
originalTime: booking.appointmentTime,
|
||||||
|
proposedDate: input.proposedDate,
|
||||||
|
proposedTime: input.proposedTime,
|
||||||
|
treatmentName: (await treatmentsKV.getItem(booking.treatmentId))?.name || "Behandlung",
|
||||||
|
acceptUrl,
|
||||||
|
declineUrl,
|
||||||
|
expiresAt: res.expiresAt,
|
||||||
|
});
|
||||||
|
await sendEmail({
|
||||||
|
to: booking.customerEmail,
|
||||||
|
subject: "Vorschlag zur Terminänderung",
|
||||||
|
text: `Hallo ${booking.customerName}, wir schlagen vor, deinen Termin von ${formatDateGerman(booking.appointmentDate)} ${booking.appointmentTime} auf ${formatDateGerman(input.proposedDate)} ${input.proposedTime} zu verschieben. Akzeptieren: ${acceptUrl} | Ablehnen: ${declineUrl}`,
|
||||||
|
html,
|
||||||
|
bcc: process.env.ADMIN_EMAIL ? [process.env.ADMIN_EMAIL] : undefined,
|
||||||
|
}).catch(() => {});
|
||||||
|
}
|
||||||
|
|
||||||
|
return { success: true, token: res.token };
|
||||||
|
}),
|
||||||
|
|
||||||
|
// Customer accepts reschedule via token
|
||||||
|
acceptReschedule: os
|
||||||
|
.input(z.object({ token: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
const proposal = await queryClient.cancellation.getRescheduleProposal({ token: input.token });
|
||||||
|
const booking = await kv.getItem(proposal.booking.id);
|
||||||
|
if (!booking) throw new Error("Booking not found");
|
||||||
|
if (booking.status !== "confirmed") throw new Error("Buchung ist nicht mehr in bestätigtem Zustand.");
|
||||||
|
|
||||||
|
const treatment = await treatmentsKV.getItem(booking.treatmentId);
|
||||||
|
const duration = booking.bookedDurationMinutes || treatment?.duration || 60;
|
||||||
|
|
||||||
|
// Re-validate slot to ensure still available
|
||||||
|
await validateBookingAgainstRules(proposal.proposed.date, proposal.proposed.time, duration);
|
||||||
|
await checkBookingConflicts(proposal.proposed.date, proposal.proposed.time, duration, booking.id);
|
||||||
|
|
||||||
|
const updated = { ...booking, appointmentDate: proposal.proposed.date, appointmentTime: proposal.proposed.time } as typeof booking;
|
||||||
|
await kv.setItem(updated.id, updated);
|
||||||
|
|
||||||
|
// Remove token
|
||||||
|
await queryClient.cancellation.removeRescheduleToken({ token: input.token });
|
||||||
|
|
||||||
|
// Send confirmation to customer (no BCC to avoid duplicate admin emails)
|
||||||
|
if (updated.customerEmail) {
|
||||||
|
const bookingAccessToken = await queryClient.cancellation.createToken({ bookingId: updated.id });
|
||||||
|
const html = await renderBookingConfirmedHTML({
|
||||||
|
name: updated.customerName,
|
||||||
|
date: updated.appointmentDate,
|
||||||
|
time: updated.appointmentTime,
|
||||||
|
cancellationUrl: generateUrl(`/booking/${bookingAccessToken.token}`),
|
||||||
|
reviewUrl: generateUrl(`/review/${bookingAccessToken.token}`),
|
||||||
|
});
|
||||||
|
await sendEmailWithAGBAndCalendar({
|
||||||
|
to: updated.customerEmail,
|
||||||
|
subject: "Terminänderung bestätigt",
|
||||||
|
text: `Hallo ${updated.customerName}, dein neuer Termin ist am ${formatDateGerman(updated.appointmentDate)} um ${updated.appointmentTime}.`,
|
||||||
|
html,
|
||||||
|
}, {
|
||||||
|
date: updated.appointmentDate,
|
||||||
|
time: updated.appointmentTime,
|
||||||
|
durationMinutes: duration,
|
||||||
|
customerName: updated.customerName,
|
||||||
|
treatmentName: (await treatmentsKV.getItem(updated.treatmentId))?.name || "Behandlung",
|
||||||
|
}).catch(() => {});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (process.env.ADMIN_EMAIL) {
|
||||||
|
const adminHtml = await renderAdminRescheduleAcceptedHTML({
|
||||||
|
customerName: updated.customerName,
|
||||||
|
originalDate: proposal.original.date,
|
||||||
|
originalTime: proposal.original.time,
|
||||||
|
newDate: updated.appointmentDate,
|
||||||
|
newTime: updated.appointmentTime,
|
||||||
|
treatmentName: (await treatmentsKV.getItem(updated.treatmentId))?.name || "Behandlung",
|
||||||
|
});
|
||||||
|
await sendEmail({
|
||||||
|
to: process.env.ADMIN_EMAIL,
|
||||||
|
subject: `Reschedule akzeptiert - ${updated.customerName}`,
|
||||||
|
text: `Reschedule akzeptiert: ${updated.customerName} von ${formatDateGerman(proposal.original.date)} ${proposal.original.time} auf ${formatDateGerman(updated.appointmentDate)} ${updated.appointmentTime}.`,
|
||||||
|
html: adminHtml,
|
||||||
|
}).catch(() => {});
|
||||||
|
}
|
||||||
|
|
||||||
|
return { success: true, message: `Termin auf ${formatDateGerman(updated.appointmentDate)} um ${updated.appointmentTime} aktualisiert.` };
|
||||||
|
}),
|
||||||
|
|
||||||
|
// Customer declines reschedule via token
|
||||||
|
declineReschedule: os
|
||||||
|
.input(z.object({ token: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
const proposal = await queryClient.cancellation.getRescheduleProposal({ token: input.token });
|
||||||
|
const booking = await kv.getItem(proposal.booking.id);
|
||||||
|
if (!booking) throw new Error("Booking not found");
|
||||||
|
|
||||||
|
// Remove token
|
||||||
|
await queryClient.cancellation.removeRescheduleToken({ token: input.token });
|
||||||
|
|
||||||
|
// Notify customer that original stays
|
||||||
|
if (booking.customerEmail) {
|
||||||
|
const bookingAccessToken = await queryClient.cancellation.createToken({ bookingId: booking.id });
|
||||||
|
await sendEmail({
|
||||||
|
to: booking.customerEmail,
|
||||||
|
subject: "Terminänderung abgelehnt",
|
||||||
|
text: `Du hast den Vorschlag zur Terminänderung abgelehnt. Dein ursprünglicher Termin am ${formatDateGerman(booking.appointmentDate)} um ${booking.appointmentTime} bleibt bestehen.`,
|
||||||
|
html: await renderBookingConfirmedHTML({ name: booking.customerName, date: booking.appointmentDate, time: booking.appointmentTime, cancellationUrl: generateUrl(`/booking/${bookingAccessToken.token}`), reviewUrl: generateUrl(`/review/${bookingAccessToken.token}`) }),
|
||||||
|
}).catch(() => {});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Notify admin
|
||||||
|
if (process.env.ADMIN_EMAIL) {
|
||||||
|
const html = await renderAdminRescheduleDeclinedHTML({
|
||||||
|
customerName: booking.customerName,
|
||||||
|
originalDate: proposal.original.date,
|
||||||
|
originalTime: proposal.original.time,
|
||||||
|
proposedDate: proposal.proposed.date!,
|
||||||
|
proposedTime: proposal.proposed.time!,
|
||||||
|
treatmentName: (await treatmentsKV.getItem(booking.treatmentId))?.name || "Behandlung",
|
||||||
|
customerEmail: booking.customerEmail,
|
||||||
|
customerPhone: booking.customerPhone,
|
||||||
|
});
|
||||||
|
await sendEmail({
|
||||||
|
to: process.env.ADMIN_EMAIL,
|
||||||
|
subject: `Reschedule abgelehnt - ${booking.customerName}`,
|
||||||
|
text: `Abgelehnt: ${booking.customerName}. Ursprünglich: ${formatDateGerman(proposal.original.date)} ${proposal.original.time}. Vorschlag: ${formatDateGerman(proposal.proposed.date!)} ${proposal.proposed.time!}.`,
|
||||||
|
html,
|
||||||
|
}).catch(() => {});
|
||||||
|
}
|
||||||
|
|
||||||
|
return { success: true, message: "Du hast den Vorschlag abgelehnt. Dein ursprünglicher Termin bleibt bestehen." };
|
||||||
|
}),
|
||||||
|
|
||||||
|
// CalDAV Token für Admin generieren
|
||||||
|
generateCalDAVToken: os
|
||||||
|
.input(z.object({ sessionId: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
|
||||||
|
// Generiere einen sicheren Token für CalDAV-Zugriff
|
||||||
|
const token = randomUUID();
|
||||||
|
|
||||||
|
// Hole Session-Daten für Token-Erstellung
|
||||||
|
const session = await sessionsKV.getItem(input.sessionId);
|
||||||
|
if (!session) throw new Error("Session nicht gefunden");
|
||||||
|
|
||||||
|
// Speichere Token mit Ablaufzeit (24 Stunden)
|
||||||
|
const tokenData = {
|
||||||
|
id: token,
|
||||||
|
sessionId: input.sessionId,
|
||||||
|
userId: session.userId, // Benötigt für Session-Typ
|
||||||
|
expiresAt: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(), // 24 Stunden
|
||||||
|
createdAt: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
|
||||||
|
// Verwende den sessionsKV Store für Token-Speicherung
|
||||||
|
await sessionsKV.setItem(token, tokenData);
|
||||||
|
|
||||||
|
const domain = process.env.DOMAIN || 'localhost:3000';
|
||||||
|
const protocol = domain.includes('localhost') ? 'http' : 'https';
|
||||||
|
const caldavUrl = `${protocol}://${domain}/caldav/calendar/events.ics?token=${token}`;
|
||||||
|
|
||||||
|
return {
|
||||||
|
token,
|
||||||
|
caldavUrl,
|
||||||
|
expiresAt: tokenData.expiresAt,
|
||||||
|
instructions: {
|
||||||
|
title: "CalDAV-Kalender abonnieren",
|
||||||
|
steps: [
|
||||||
|
"Kopiere die CalDAV-URL unten",
|
||||||
|
"Füge sie in deiner Kalender-App als Abonnement hinzu:",
|
||||||
|
"- Outlook: Datei → Konto hinzufügen → Internetkalender",
|
||||||
|
"- Google Calendar: Andere Kalender hinzufügen → Von URL",
|
||||||
|
"- Apple Calendar: Abonnement → Neue Abonnements",
|
||||||
|
"- Thunderbird: Kalender hinzufügen → Im Netzwerk",
|
||||||
|
"Der Kalender wird automatisch aktualisiert"
|
||||||
|
],
|
||||||
|
note: "Dieser Token ist 24 Stunden gültig. Bei Bedarf kannst du einen neuen Token generieren."
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}),
|
||||||
};
|
};
|
||||||
@@ -11,7 +11,12 @@ const BookingAccessTokenSchema = z.object({
|
|||||||
token: z.string(),
|
token: z.string(),
|
||||||
expiresAt: z.string(),
|
expiresAt: z.string(),
|
||||||
createdAt: z.string(),
|
createdAt: z.string(),
|
||||||
purpose: z.enum(["booking_access"]), // For future extensibility
|
purpose: z.enum(["booking_access", "reschedule_proposal"]), // Extended for reschedule proposals
|
||||||
|
// Optional metadata for reschedule proposals
|
||||||
|
proposedDate: z.string().optional(),
|
||||||
|
proposedTime: z.string().optional(),
|
||||||
|
originalDate: z.string().optional(),
|
||||||
|
originalTime: z.string().optional(),
|
||||||
});
|
});
|
||||||
|
|
||||||
type BookingAccessToken = z.output<typeof BookingAccessTokenSchema>;
|
type BookingAccessToken = z.output<typeof BookingAccessTokenSchema>;
|
||||||
@@ -25,8 +30,8 @@ type Booking = {
|
|||||||
id: string;
|
id: string;
|
||||||
treatmentId: string;
|
treatmentId: string;
|
||||||
customerName: string;
|
customerName: string;
|
||||||
customerEmail: string;
|
customerEmail?: string;
|
||||||
customerPhone: string;
|
customerPhone?: string;
|
||||||
appointmentDate: string;
|
appointmentDate: string;
|
||||||
appointmentTime: string;
|
appointmentTime: string;
|
||||||
notes?: string;
|
notes?: string;
|
||||||
@@ -55,6 +60,15 @@ function formatDateGerman(dateString: string): string {
|
|||||||
return `${day}.${month}.${year}`;
|
return `${day}.${month}.${year}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Helper to invalidate all reschedule tokens for a specific booking
|
||||||
|
async function invalidateRescheduleTokensForBooking(bookingId: string): Promise<void> {
|
||||||
|
const tokens = await cancellationKV.getAllItems();
|
||||||
|
const related = tokens.filter(t => t.bookingId === bookingId && t.purpose === "reschedule_proposal");
|
||||||
|
for (const tok of related) {
|
||||||
|
await cancellationKV.removeItem(tok.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Create cancellation token for a booking
|
// Create cancellation token for a booking
|
||||||
const createToken = os
|
const createToken = os
|
||||||
.input(z.object({ bookingId: z.string() }))
|
.input(z.object({ bookingId: z.string() }))
|
||||||
@@ -93,7 +107,8 @@ const getBookingByToken = os
|
|||||||
const tokens = await cancellationKV.getAllItems();
|
const tokens = await cancellationKV.getAllItems();
|
||||||
const validToken = tokens.find(t =>
|
const validToken = tokens.find(t =>
|
||||||
t.token === input.token &&
|
t.token === input.token &&
|
||||||
new Date(t.expiresAt) > new Date()
|
new Date(t.expiresAt) > new Date() &&
|
||||||
|
t.purpose === 'booking_access'
|
||||||
);
|
);
|
||||||
|
|
||||||
if (!validToken) {
|
if (!validToken) {
|
||||||
@@ -217,4 +232,171 @@ export const router = {
|
|||||||
createToken,
|
createToken,
|
||||||
getBookingByToken,
|
getBookingByToken,
|
||||||
cancelByToken,
|
cancelByToken,
|
||||||
|
// Create a reschedule proposal token (48h expiry)
|
||||||
|
createRescheduleToken: os
|
||||||
|
.input(z.object({ bookingId: z.string(), proposedDate: z.string(), proposedTime: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
const booking = await bookingsKV.getItem(input.bookingId);
|
||||||
|
if (!booking) {
|
||||||
|
throw new Error("Booking not found");
|
||||||
|
}
|
||||||
|
if (booking.status === "cancelled" || booking.status === "completed") {
|
||||||
|
throw new Error("Reschedule not allowed for this booking");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Invalidate existing reschedule proposals for this booking
|
||||||
|
await invalidateRescheduleTokensForBooking(input.bookingId);
|
||||||
|
|
||||||
|
// Create token that expires in 48 hours
|
||||||
|
const expiresAt = new Date();
|
||||||
|
expiresAt.setHours(expiresAt.getHours() + 48);
|
||||||
|
|
||||||
|
const token = randomUUID();
|
||||||
|
const rescheduleToken: BookingAccessToken = {
|
||||||
|
id: randomUUID(),
|
||||||
|
bookingId: input.bookingId,
|
||||||
|
token,
|
||||||
|
expiresAt: expiresAt.toISOString(),
|
||||||
|
createdAt: new Date().toISOString(),
|
||||||
|
purpose: "reschedule_proposal",
|
||||||
|
proposedDate: input.proposedDate,
|
||||||
|
proposedTime: input.proposedTime,
|
||||||
|
originalDate: booking.appointmentDate,
|
||||||
|
originalTime: booking.appointmentTime,
|
||||||
|
};
|
||||||
|
|
||||||
|
await cancellationKV.setItem(rescheduleToken.id, rescheduleToken);
|
||||||
|
return { token, expiresAt: expiresAt.toISOString() };
|
||||||
|
}),
|
||||||
|
|
||||||
|
// Get reschedule proposal details by token
|
||||||
|
getRescheduleProposal: os
|
||||||
|
.input(z.object({ token: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
const tokens = await cancellationKV.getAllItems();
|
||||||
|
const proposal = tokens.find(t => t.token === input.token && t.purpose === "reschedule_proposal");
|
||||||
|
if (!proposal) {
|
||||||
|
throw new Error("Ungültiger Reschedule-Token");
|
||||||
|
}
|
||||||
|
|
||||||
|
const booking = await bookingsKV.getItem(proposal.bookingId);
|
||||||
|
if (!booking) {
|
||||||
|
throw new Error("Booking not found");
|
||||||
|
}
|
||||||
|
|
||||||
|
const treatmentsKV = createKV<any>("treatments");
|
||||||
|
const treatment = await treatmentsKV.getItem(booking.treatmentId);
|
||||||
|
|
||||||
|
const now = new Date();
|
||||||
|
const isExpired = new Date(proposal.expiresAt) <= now;
|
||||||
|
const hoursUntilExpiry = isExpired ? 0 : Math.max(0, Math.round((new Date(proposal.expiresAt).getTime() - now.getTime()) / (1000 * 60 * 60)));
|
||||||
|
|
||||||
|
return {
|
||||||
|
booking: {
|
||||||
|
id: booking.id,
|
||||||
|
customerName: booking.customerName,
|
||||||
|
customerEmail: booking.customerEmail,
|
||||||
|
customerPhone: booking.customerPhone,
|
||||||
|
status: booking.status,
|
||||||
|
treatmentId: booking.treatmentId,
|
||||||
|
treatmentName: treatment?.name || "Unbekannte Behandlung",
|
||||||
|
},
|
||||||
|
original: {
|
||||||
|
date: proposal.originalDate || booking.appointmentDate,
|
||||||
|
time: proposal.originalTime || booking.appointmentTime,
|
||||||
|
},
|
||||||
|
proposed: {
|
||||||
|
date: proposal.proposedDate,
|
||||||
|
time: proposal.proposedTime,
|
||||||
|
},
|
||||||
|
expiresAt: proposal.expiresAt,
|
||||||
|
hoursUntilExpiry,
|
||||||
|
isExpired,
|
||||||
|
canRespond: booking.status === "confirmed" && !isExpired,
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
|
||||||
|
// Helper endpoint to remove a reschedule token by value (used after accept/decline)
|
||||||
|
removeRescheduleToken: os
|
||||||
|
.input(z.object({ token: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
const tokens = await cancellationKV.getAllItems();
|
||||||
|
const proposal = tokens.find(t => t.token === input.token && t.purpose === "reschedule_proposal");
|
||||||
|
if (proposal) {
|
||||||
|
await cancellationKV.removeItem(proposal.id);
|
||||||
|
}
|
||||||
|
return { success: true };
|
||||||
|
}),
|
||||||
|
|
||||||
|
// Clean up expired reschedule proposals and notify admin
|
||||||
|
sweepExpiredRescheduleProposals: os
|
||||||
|
.handler(async () => {
|
||||||
|
const tokens = await cancellationKV.getAllItems();
|
||||||
|
const now = new Date();
|
||||||
|
const expiredProposals = tokens.filter(t =>
|
||||||
|
t.purpose === "reschedule_proposal" &&
|
||||||
|
new Date(t.expiresAt) <= now
|
||||||
|
);
|
||||||
|
|
||||||
|
if (expiredProposals.length === 0) {
|
||||||
|
return { success: true, expiredCount: 0 };
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get booking details for each expired proposal
|
||||||
|
const expiredDetails: Array<{
|
||||||
|
customerName: string;
|
||||||
|
originalDate: string;
|
||||||
|
originalTime: string;
|
||||||
|
proposedDate: string;
|
||||||
|
proposedTime: string;
|
||||||
|
treatmentName: string;
|
||||||
|
customerEmail?: string;
|
||||||
|
customerPhone?: string;
|
||||||
|
expiredAt: string;
|
||||||
|
}> = [];
|
||||||
|
for (const proposal of expiredProposals) {
|
||||||
|
const booking = await bookingsKV.getItem(proposal.bookingId);
|
||||||
|
if (booking) {
|
||||||
|
const treatmentsKV = createKV<any>("treatments");
|
||||||
|
const treatment = await treatmentsKV.getItem(booking.treatmentId);
|
||||||
|
expiredDetails.push({
|
||||||
|
customerName: booking.customerName,
|
||||||
|
originalDate: proposal.originalDate || booking.appointmentDate,
|
||||||
|
originalTime: proposal.originalTime || booking.appointmentTime,
|
||||||
|
proposedDate: proposal.proposedDate!,
|
||||||
|
proposedTime: proposal.proposedTime!,
|
||||||
|
treatmentName: treatment?.name || "Unbekannte Behandlung",
|
||||||
|
customerEmail: booking.customerEmail,
|
||||||
|
customerPhone: booking.customerPhone,
|
||||||
|
expiredAt: proposal.expiresAt,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove the expired token
|
||||||
|
await cancellationKV.removeItem(proposal.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Notify admin if there are expired proposals
|
||||||
|
if (expiredDetails.length > 0 && process.env.ADMIN_EMAIL) {
|
||||||
|
try {
|
||||||
|
const { renderAdminRescheduleExpiredHTML } = await import("../lib/email-templates.js");
|
||||||
|
const { sendEmail } = await import("../lib/email.js");
|
||||||
|
|
||||||
|
const html = await renderAdminRescheduleExpiredHTML({
|
||||||
|
expiredProposals: expiredDetails,
|
||||||
|
});
|
||||||
|
|
||||||
|
await sendEmail({
|
||||||
|
to: process.env.ADMIN_EMAIL,
|
||||||
|
subject: `${expiredDetails.length} abgelaufene Terminänderungsvorschläge`,
|
||||||
|
text: `Es sind ${expiredDetails.length} Terminänderungsvorschläge abgelaufen. Details in der HTML-Version.`,
|
||||||
|
html,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Failed to send admin notification for expired proposals:", error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return { success: true, expiredCount: expiredDetails.length };
|
||||||
|
}),
|
||||||
};
|
};
|
||||||
|
|||||||
150
src/server/rpc/gallery.ts
Normal file
150
src/server/rpc/gallery.ts
Normal file
@@ -0,0 +1,150 @@
|
|||||||
|
import { call, os } from "@orpc/server";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { randomUUID } from "crypto";
|
||||||
|
import { createKV } from "../lib/create-kv.js";
|
||||||
|
import { assertOwner } from "../lib/auth.js";
|
||||||
|
|
||||||
|
// Schema Definition
|
||||||
|
const GalleryPhotoSchema = z.object({
|
||||||
|
id: z.string(),
|
||||||
|
base64Data: z.string(),
|
||||||
|
title: z.string().optional().default(""),
|
||||||
|
order: z.number().int(),
|
||||||
|
createdAt: z.string(),
|
||||||
|
cover: z.boolean().optional().default(false),
|
||||||
|
});
|
||||||
|
|
||||||
|
export type GalleryPhoto = z.output<typeof GalleryPhotoSchema>;
|
||||||
|
|
||||||
|
// KV Storage
|
||||||
|
const galleryPhotosKV = createKV<GalleryPhoto>("galleryPhotos");
|
||||||
|
|
||||||
|
// Authentication centralized in ../lib/auth.ts
|
||||||
|
|
||||||
|
// CRUD Endpoints
|
||||||
|
const uploadPhoto = os
|
||||||
|
.input(
|
||||||
|
z.object({
|
||||||
|
sessionId: z.string(),
|
||||||
|
base64Data: z
|
||||||
|
.string()
|
||||||
|
.regex(/^data:image\/(png|jpe?g|webp|gif);base64,/i, 'Unsupported image format'),
|
||||||
|
title: z.string().optional().default(""),
|
||||||
|
})
|
||||||
|
)
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
try {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
const id = randomUUID();
|
||||||
|
const existing = await galleryPhotosKV.getAllItems();
|
||||||
|
const maxOrder = existing.length > 0 ? Math.max(...existing.map((p) => p.order)) : -1;
|
||||||
|
const nextOrder = maxOrder + 1;
|
||||||
|
|
||||||
|
const photo: GalleryPhoto = {
|
||||||
|
id,
|
||||||
|
base64Data: input.base64Data,
|
||||||
|
title: input.title ?? "",
|
||||||
|
order: nextOrder,
|
||||||
|
createdAt: new Date().toISOString(),
|
||||||
|
cover: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
await galleryPhotosKV.setItem(id, photo);
|
||||||
|
return photo;
|
||||||
|
} catch (err) {
|
||||||
|
console.error("gallery.uploadPhoto error", err);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const setCoverPhoto = os
|
||||||
|
.input(z.object({ sessionId: z.string(), id: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
const all = await galleryPhotosKV.getAllItems();
|
||||||
|
let updatedCover: GalleryPhoto | null = null;
|
||||||
|
for (const p of all) {
|
||||||
|
const isCover = p.id === input.id;
|
||||||
|
const next: GalleryPhoto = { ...p, cover: isCover };
|
||||||
|
await galleryPhotosKV.setItem(p.id, next);
|
||||||
|
if (isCover) updatedCover = next;
|
||||||
|
}
|
||||||
|
return updatedCover;
|
||||||
|
});
|
||||||
|
|
||||||
|
const deletePhoto = os
|
||||||
|
.input(z.object({ sessionId: z.string(), id: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
await galleryPhotosKV.removeItem(input.id);
|
||||||
|
});
|
||||||
|
|
||||||
|
const updatePhotoOrder = os
|
||||||
|
.input(
|
||||||
|
z.object({
|
||||||
|
sessionId: z.string(),
|
||||||
|
photoOrders: z.array(z.object({ id: z.string(), order: z.number().int() })),
|
||||||
|
})
|
||||||
|
)
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
const updated: GalleryPhoto[] = [];
|
||||||
|
for (const { id, order } of input.photoOrders) {
|
||||||
|
const existing = await galleryPhotosKV.getItem(id);
|
||||||
|
if (!existing) continue;
|
||||||
|
const updatedPhoto: GalleryPhoto = { ...existing, order };
|
||||||
|
await galleryPhotosKV.setItem(id, updatedPhoto);
|
||||||
|
updated.push(updatedPhoto);
|
||||||
|
}
|
||||||
|
const all = await galleryPhotosKV.getAllItems();
|
||||||
|
return all.sort((a, b) => (a.order - b.order) || a.createdAt.localeCompare(b.createdAt) || a.id.localeCompare(b.id));
|
||||||
|
});
|
||||||
|
|
||||||
|
const listPhotos = os.handler(async () => {
|
||||||
|
const all = await galleryPhotosKV.getAllItems();
|
||||||
|
return all.sort((a, b) => (a.order - b.order) || a.createdAt.localeCompare(b.createdAt) || a.id.localeCompare(b.id));
|
||||||
|
});
|
||||||
|
|
||||||
|
const adminListPhotos = os
|
||||||
|
.input(z.object({ sessionId: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
const all = await galleryPhotosKV.getAllItems();
|
||||||
|
return all.sort((a, b) => (a.order - b.order) || a.createdAt.localeCompare(b.createdAt) || a.id.localeCompare(b.id));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Live Queries
|
||||||
|
const live = {
|
||||||
|
listPhotos: os.handler(async function* ({ signal }) {
|
||||||
|
yield call(listPhotos, {}, { signal });
|
||||||
|
for await (const _ of galleryPhotosKV.subscribe()) {
|
||||||
|
yield call(listPhotos, {}, { signal });
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
|
adminListPhotos: os
|
||||||
|
.input(z.object({ sessionId: z.string() }))
|
||||||
|
.handler(async function* ({ input, signal }) {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
const all = await galleryPhotosKV.getAllItems();
|
||||||
|
const sorted = all.sort((a, b) => (a.order - b.order) || a.createdAt.localeCompare(b.createdAt) || a.id.localeCompare(b.id));
|
||||||
|
yield sorted;
|
||||||
|
for await (const _ of galleryPhotosKV.subscribe()) {
|
||||||
|
const updated = await galleryPhotosKV.getAllItems();
|
||||||
|
const sortedUpdated = updated.sort((a, b) => (a.order - b.order) || a.createdAt.localeCompare(b.createdAt) || a.id.localeCompare(b.id));
|
||||||
|
yield sortedUpdated;
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
|
||||||
|
export const router = {
|
||||||
|
uploadPhoto,
|
||||||
|
deletePhoto,
|
||||||
|
updatePhotoOrder,
|
||||||
|
listPhotos,
|
||||||
|
adminListPhotos,
|
||||||
|
setCoverPhoto,
|
||||||
|
live,
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
@@ -2,16 +2,22 @@ import { demo } from "./demo/index.js";
|
|||||||
import { router as treatments } from "./treatments.js";
|
import { router as treatments } from "./treatments.js";
|
||||||
import { router as bookings } from "./bookings.js";
|
import { router as bookings } from "./bookings.js";
|
||||||
import { router as auth } from "./auth.js";
|
import { router as auth } from "./auth.js";
|
||||||
import { router as availability } from "./availability.js";
|
import { router as recurringAvailability } from "./recurring-availability.js";
|
||||||
import { router as cancellation } from "./cancellation.js";
|
import { router as cancellation } from "./cancellation.js";
|
||||||
import { router as legal } from "./legal.js";
|
import { router as legal } from "./legal.js";
|
||||||
|
import { router as gallery } from "./gallery.js";
|
||||||
|
import { router as reviews } from "./reviews.js";
|
||||||
|
import { router as social } from "./social.js";
|
||||||
|
|
||||||
export const router = {
|
export const router = {
|
||||||
demo,
|
demo,
|
||||||
treatments,
|
treatments,
|
||||||
bookings,
|
bookings,
|
||||||
auth,
|
auth,
|
||||||
availability,
|
recurringAvailability,
|
||||||
cancellation,
|
cancellation,
|
||||||
legal,
|
legal,
|
||||||
|
gallery,
|
||||||
|
reviews,
|
||||||
|
social,
|
||||||
};
|
};
|
||||||
|
|||||||
476
src/server/rpc/recurring-availability.ts
Normal file
476
src/server/rpc/recurring-availability.ts
Normal file
@@ -0,0 +1,476 @@
|
|||||||
|
import { call, os } from "@orpc/server";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { randomUUID } from "crypto";
|
||||||
|
import { createKV } from "../lib/create-kv.js";
|
||||||
|
import { assertOwner } from "../lib/auth.js";
|
||||||
|
|
||||||
|
// Datenmodelle
|
||||||
|
const RecurringRuleSchema = z.object({
|
||||||
|
id: z.string(),
|
||||||
|
dayOfWeek: z.number().int().min(0).max(6), // 0=Sonntag, 1=Montag, ..., 6=Samstag
|
||||||
|
startTime: z.string().regex(/^\d{2}:\d{2}$/), // HH:MM Format
|
||||||
|
endTime: z.string().regex(/^\d{2}:\d{2}$/), // HH:MM Format
|
||||||
|
isActive: z.boolean(),
|
||||||
|
createdAt: z.string(),
|
||||||
|
// LEGACY: slotDurationMinutes - deprecated field for generateSlots only, will be removed
|
||||||
|
slotDurationMinutes: z.number().int().min(1).optional(),
|
||||||
|
});
|
||||||
|
|
||||||
|
const TimeOffPeriodSchema = z.object({
|
||||||
|
id: z.string(),
|
||||||
|
startDate: z.string().regex(/^\d{4}-\d{2}-\d{2}$/), // YYYY-MM-DD
|
||||||
|
endDate: z.string().regex(/^\d{4}-\d{2}-\d{2}$/), // YYYY-MM-DD
|
||||||
|
reason: z.string(),
|
||||||
|
createdAt: z.string(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export type RecurringRule = z.output<typeof RecurringRuleSchema>;
|
||||||
|
export type TimeOffPeriod = z.output<typeof TimeOffPeriodSchema>;
|
||||||
|
|
||||||
|
// KV-Stores
|
||||||
|
const recurringRulesKV = createKV<RecurringRule>("recurringRules");
|
||||||
|
const timeOffPeriodsKV = createKV<TimeOffPeriod>("timeOffPeriods");
|
||||||
|
|
||||||
|
|
||||||
|
// Import bookings and treatments KV stores for getAvailableTimes endpoint
|
||||||
|
const bookingsKV = createKV<any>("bookings");
|
||||||
|
const treatmentsKV = createKV<any>("treatments");
|
||||||
|
|
||||||
|
// Owner-Authentifizierung zentralisiert in ../lib/auth.ts
|
||||||
|
|
||||||
|
// Helper-Funktionen
|
||||||
|
function parseTime(timeStr: string): number {
|
||||||
|
const [hours, minutes] = timeStr.split(':').map(Number);
|
||||||
|
return hours * 60 + minutes; // Minuten seit Mitternacht
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatTime(minutes: number): string {
|
||||||
|
const hours = Math.floor(minutes / 60);
|
||||||
|
const mins = minutes % 60;
|
||||||
|
return `${String(hours).padStart(2, '0')}:${String(mins).padStart(2, '0')}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function addDays(date: Date, days: number): Date {
|
||||||
|
const result = new Date(date);
|
||||||
|
result.setDate(result.getDate() + days);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDate(date: Date): string {
|
||||||
|
return date.toISOString().split('T')[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
function isDateInTimeOffPeriod(date: string, periods: TimeOffPeriod[]): boolean {
|
||||||
|
return periods.some(period => date >= period.startDate && date <= period.endDate);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper-Funktion zur Erkennung überlappender Regeln
|
||||||
|
function detectOverlappingRules(newRule: { dayOfWeek: number; startTime: string; endTime: string; id?: string }, existingRules: RecurringRule[]): RecurringRule[] {
|
||||||
|
const newStart = parseTime(newRule.startTime);
|
||||||
|
const newEnd = parseTime(newRule.endTime);
|
||||||
|
|
||||||
|
return existingRules.filter(rule => {
|
||||||
|
// Gleicher Wochentag und nicht dieselbe Regel (bei Updates)
|
||||||
|
if (rule.dayOfWeek !== newRule.dayOfWeek || rule.id === newRule.id) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const existingStart = parseTime(rule.startTime);
|
||||||
|
const existingEnd = parseTime(rule.endTime);
|
||||||
|
|
||||||
|
// Überlappung wenn: neue Startzeit < bestehende Endzeit UND neue Endzeit > bestehende Startzeit
|
||||||
|
return newStart < existingEnd && newEnd > existingStart;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// CRUD-Endpoints für Recurring Rules
|
||||||
|
const createRule = os
|
||||||
|
.input(
|
||||||
|
z.object({
|
||||||
|
sessionId: z.string(),
|
||||||
|
dayOfWeek: z.number().int().min(0).max(6),
|
||||||
|
startTime: z.string().regex(/^\d{2}:\d{2}$/),
|
||||||
|
endTime: z.string().regex(/^\d{2}:\d{2}$/),
|
||||||
|
}).passthrough()
|
||||||
|
)
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
try {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
|
||||||
|
// Validierung: startTime < endTime
|
||||||
|
const startMinutes = parseTime(input.startTime);
|
||||||
|
const endMinutes = parseTime(input.endTime);
|
||||||
|
if (startMinutes >= endMinutes) {
|
||||||
|
throw new Error("Startzeit muss vor der Endzeit liegen.");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Überlappungsprüfung
|
||||||
|
const allRules = await recurringRulesKV.getAllItems();
|
||||||
|
const overlappingRules = detectOverlappingRules(input, allRules);
|
||||||
|
|
||||||
|
if (overlappingRules.length > 0) {
|
||||||
|
const overlappingTimes = overlappingRules.map(rule => `${rule.startTime}-${rule.endTime}`).join(", ");
|
||||||
|
throw new Error(`Überlappung mit bestehenden Regeln erkannt: ${overlappingTimes}. Bitte Zeitfenster anpassen.`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const id = randomUUID();
|
||||||
|
const rule: RecurringRule = {
|
||||||
|
id,
|
||||||
|
dayOfWeek: input.dayOfWeek,
|
||||||
|
startTime: input.startTime,
|
||||||
|
endTime: input.endTime,
|
||||||
|
isActive: true,
|
||||||
|
createdAt: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
|
||||||
|
await recurringRulesKV.setItem(id, rule);
|
||||||
|
return rule;
|
||||||
|
} catch (err) {
|
||||||
|
console.error("recurring-availability.createRule error", err);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const updateRule = os
|
||||||
|
.input(RecurringRuleSchema.extend({ sessionId: z.string() }).passthrough())
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
|
||||||
|
// Validierung: startTime < endTime
|
||||||
|
const startMinutes = parseTime(input.startTime);
|
||||||
|
const endMinutes = parseTime(input.endTime);
|
||||||
|
if (startMinutes >= endMinutes) {
|
||||||
|
throw new Error("Startzeit muss vor der Endzeit liegen.");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Überlappungsprüfung
|
||||||
|
const allRules = await recurringRulesKV.getAllItems();
|
||||||
|
const overlappingRules = detectOverlappingRules(input, allRules);
|
||||||
|
|
||||||
|
if (overlappingRules.length > 0) {
|
||||||
|
const overlappingTimes = overlappingRules.map(rule => `${rule.startTime}-${rule.endTime}`).join(", ");
|
||||||
|
throw new Error(`Überlappung mit bestehenden Regeln erkannt: ${overlappingTimes}. Bitte Zeitfenster anpassen.`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const { sessionId, ...rule } = input as any;
|
||||||
|
await recurringRulesKV.setItem(rule.id, rule as RecurringRule);
|
||||||
|
return rule as RecurringRule;
|
||||||
|
});
|
||||||
|
|
||||||
|
const deleteRule = os
|
||||||
|
.input(z.object({ sessionId: z.string(), id: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
await recurringRulesKV.removeItem(input.id);
|
||||||
|
});
|
||||||
|
|
||||||
|
const toggleRuleActive = os
|
||||||
|
.input(z.object({ sessionId: z.string(), id: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
const rule = await recurringRulesKV.getItem(input.id);
|
||||||
|
if (!rule) throw new Error("Regel nicht gefunden.");
|
||||||
|
|
||||||
|
rule.isActive = !rule.isActive;
|
||||||
|
await recurringRulesKV.setItem(input.id, rule);
|
||||||
|
return rule;
|
||||||
|
});
|
||||||
|
|
||||||
|
const listRules = os.handler(async () => {
|
||||||
|
const allRules = await recurringRulesKV.getAllItems();
|
||||||
|
return allRules.sort((a, b) => {
|
||||||
|
if (a.dayOfWeek !== b.dayOfWeek) return a.dayOfWeek - b.dayOfWeek;
|
||||||
|
return a.startTime.localeCompare(b.startTime);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const adminListRules = os
|
||||||
|
.input(z.object({ sessionId: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
const allRules = await recurringRulesKV.getAllItems();
|
||||||
|
return allRules.sort((a, b) => {
|
||||||
|
if (a.dayOfWeek !== b.dayOfWeek) return a.dayOfWeek - b.dayOfWeek;
|
||||||
|
return a.startTime.localeCompare(b.startTime);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// CRUD-Endpoints für Time-Off Periods
|
||||||
|
const createTimeOff = os
|
||||||
|
.input(
|
||||||
|
z.object({
|
||||||
|
sessionId: z.string(),
|
||||||
|
startDate: z.string().regex(/^\d{4}-\d{2}-\d{2}$/),
|
||||||
|
endDate: z.string().regex(/^\d{4}-\d{2}-\d{2}$/),
|
||||||
|
reason: z.string(),
|
||||||
|
})
|
||||||
|
)
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
try {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
|
||||||
|
// Validierung: startDate <= endDate
|
||||||
|
if (input.startDate > input.endDate) {
|
||||||
|
throw new Error("Startdatum muss vor oder am Enddatum liegen.");
|
||||||
|
}
|
||||||
|
|
||||||
|
const id = randomUUID();
|
||||||
|
const timeOff: TimeOffPeriod = {
|
||||||
|
id,
|
||||||
|
startDate: input.startDate,
|
||||||
|
endDate: input.endDate,
|
||||||
|
reason: input.reason,
|
||||||
|
createdAt: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
|
||||||
|
await timeOffPeriodsKV.setItem(id, timeOff);
|
||||||
|
return timeOff;
|
||||||
|
} catch (err) {
|
||||||
|
console.error("recurring-availability.createTimeOff error", err);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const updateTimeOff = os
|
||||||
|
.input(TimeOffPeriodSchema.extend({ sessionId: z.string() }).passthrough())
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
|
||||||
|
// Validierung: startDate <= endDate
|
||||||
|
if (input.startDate > input.endDate) {
|
||||||
|
throw new Error("Startdatum muss vor oder am Enddatum liegen.");
|
||||||
|
}
|
||||||
|
|
||||||
|
const { sessionId, ...timeOff } = input as any;
|
||||||
|
await timeOffPeriodsKV.setItem(timeOff.id, timeOff as TimeOffPeriod);
|
||||||
|
return timeOff as TimeOffPeriod;
|
||||||
|
});
|
||||||
|
|
||||||
|
const deleteTimeOff = os
|
||||||
|
.input(z.object({ sessionId: z.string(), id: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
await timeOffPeriodsKV.removeItem(input.id);
|
||||||
|
});
|
||||||
|
|
||||||
|
const listTimeOff = os.handler(async () => {
|
||||||
|
const allTimeOff = await timeOffPeriodsKV.getAllItems();
|
||||||
|
return allTimeOff.sort((a, b) => a.startDate.localeCompare(b.startDate));
|
||||||
|
});
|
||||||
|
|
||||||
|
const adminListTimeOff = os
|
||||||
|
.input(z.object({ sessionId: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
const allTimeOff = await timeOffPeriodsKV.getAllItems();
|
||||||
|
return allTimeOff.sort((a, b) => a.startDate.localeCompare(b.startDate));
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// Get Available Times Endpoint
|
||||||
|
const getAvailableTimes = os
|
||||||
|
.input(
|
||||||
|
z.object({
|
||||||
|
date: z.string().regex(/^\d{4}-\d{2}-\d{2}$/),
|
||||||
|
treatmentId: z.string(),
|
||||||
|
})
|
||||||
|
)
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
try {
|
||||||
|
// Validate that the date is not in the past
|
||||||
|
const today = new Date();
|
||||||
|
const inputDate = new Date(input.date);
|
||||||
|
today.setHours(0, 0, 0, 0);
|
||||||
|
inputDate.setHours(0, 0, 0, 0);
|
||||||
|
|
||||||
|
if (inputDate < today) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get treatment duration
|
||||||
|
const treatment = await treatmentsKV.getItem(input.treatmentId);
|
||||||
|
if (!treatment) {
|
||||||
|
throw new Error("Behandlung nicht gefunden.");
|
||||||
|
}
|
||||||
|
|
||||||
|
const treatmentDuration = treatment.duration;
|
||||||
|
|
||||||
|
// Parse the date to get day of week
|
||||||
|
const [year, month, day] = input.date.split('-').map(Number);
|
||||||
|
const localDate = new Date(year, month - 1, day);
|
||||||
|
const dayOfWeek = localDate.getDay(); // 0=Sonntag, 1=Montag, ...
|
||||||
|
|
||||||
|
// Find matching recurring rules
|
||||||
|
const allRules = await recurringRulesKV.getAllItems();
|
||||||
|
const matchingRules = allRules.filter(rule =>
|
||||||
|
rule.isActive === true && rule.dayOfWeek === dayOfWeek
|
||||||
|
);
|
||||||
|
|
||||||
|
if (matchingRules.length === 0) {
|
||||||
|
return []; // No rules for this day of week
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check time-off periods
|
||||||
|
const timeOffPeriods = await timeOffPeriodsKV.getAllItems();
|
||||||
|
if (isDateInTimeOffPeriod(input.date, timeOffPeriods)) {
|
||||||
|
return []; // Date is blocked by time-off period
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generate 15-minute intervals with boundary alignment
|
||||||
|
const availableTimes: string[] = [];
|
||||||
|
|
||||||
|
// Helper functions for 15-minute boundary alignment
|
||||||
|
const ceilTo15 = (m: number) => m % 15 === 0 ? m : m + (15 - (m % 15));
|
||||||
|
const floorTo15 = (m: number) => m - (m % 15);
|
||||||
|
|
||||||
|
for (const rule of matchingRules) {
|
||||||
|
const startMinutes = parseTime(rule.startTime);
|
||||||
|
const endMinutes = parseTime(rule.endTime);
|
||||||
|
|
||||||
|
let currentMinutes = ceilTo15(startMinutes);
|
||||||
|
const endBound = floorTo15(endMinutes);
|
||||||
|
|
||||||
|
while (currentMinutes + treatmentDuration <= endBound) {
|
||||||
|
const timeStr = formatTime(currentMinutes);
|
||||||
|
availableTimes.push(timeStr);
|
||||||
|
currentMinutes += 15; // 15-minute intervals
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get all bookings for this date and their treatments
|
||||||
|
const allBookings = await bookingsKV.getAllItems();
|
||||||
|
const dateBookings = allBookings.filter(booking =>
|
||||||
|
booking.appointmentDate === input.date &&
|
||||||
|
['pending', 'confirmed', 'completed'].includes(booking.status)
|
||||||
|
);
|
||||||
|
|
||||||
|
// Optimize treatment duration lookup with Map caching
|
||||||
|
const uniqueTreatmentIds = [...new Set(dateBookings.map(booking => booking.treatmentId))];
|
||||||
|
const treatmentDurationMap = new Map<string, number>();
|
||||||
|
|
||||||
|
for (const treatmentId of uniqueTreatmentIds) {
|
||||||
|
const treatment = await treatmentsKV.getItem(treatmentId);
|
||||||
|
treatmentDurationMap.set(treatmentId, treatment?.duration || 60);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get treatment durations for all bookings using the cached map
|
||||||
|
const bookingTreatments = new Map();
|
||||||
|
for (const booking of dateBookings) {
|
||||||
|
// Use bookedDurationMinutes if available, otherwise fallback to treatment duration
|
||||||
|
const duration = booking.bookedDurationMinutes || treatmentDurationMap.get(booking.treatmentId) || 60;
|
||||||
|
bookingTreatments.set(booking.id, duration);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Filter out booking conflicts
|
||||||
|
const availableTimesFiltered = availableTimes.filter(slotTime => {
|
||||||
|
const slotStartMinutes = parseTime(slotTime);
|
||||||
|
const slotEndMinutes = slotStartMinutes + treatmentDuration;
|
||||||
|
|
||||||
|
// Check if this slot overlaps with any existing booking
|
||||||
|
const hasConflict = dateBookings.some(booking => {
|
||||||
|
const bookingStartMinutes = parseTime(booking.appointmentTime);
|
||||||
|
const bookingDuration = bookingTreatments.get(booking.id) || 60;
|
||||||
|
const bookingEndMinutes = bookingStartMinutes + bookingDuration;
|
||||||
|
|
||||||
|
// Check overlap: slotStart < bookingEnd && slotEnd > bookingStart
|
||||||
|
return slotStartMinutes < bookingEndMinutes && slotEndMinutes > bookingStartMinutes;
|
||||||
|
});
|
||||||
|
|
||||||
|
return !hasConflict;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Filter out past times for today
|
||||||
|
const now = new Date();
|
||||||
|
const isToday = inputDate.getTime() === today.getTime();
|
||||||
|
|
||||||
|
const finalAvailableTimes = isToday
|
||||||
|
? availableTimesFiltered.filter(timeStr => {
|
||||||
|
const slotTime = parseTime(timeStr);
|
||||||
|
const currentTime = now.getHours() * 60 + now.getMinutes();
|
||||||
|
return slotTime > currentTime;
|
||||||
|
})
|
||||||
|
: availableTimesFiltered;
|
||||||
|
|
||||||
|
// Deduplicate and sort chronologically
|
||||||
|
const unique = Array.from(new Set(finalAvailableTimes));
|
||||||
|
return unique.sort((a, b) => a.localeCompare(b));
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
console.error("recurring-availability.getAvailableTimes error", err);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Live-Queries
|
||||||
|
const live = {
|
||||||
|
listRules: os.handler(async function* ({ signal }) {
|
||||||
|
yield call(listRules, {}, { signal });
|
||||||
|
for await (const _ of recurringRulesKV.subscribe()) {
|
||||||
|
yield call(listRules, {}, { signal });
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
|
listTimeOff: os.handler(async function* ({ signal }) {
|
||||||
|
yield call(listTimeOff, {}, { signal });
|
||||||
|
for await (const _ of timeOffPeriodsKV.subscribe()) {
|
||||||
|
yield call(listTimeOff, {}, { signal });
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
|
adminListRules: os
|
||||||
|
.input(z.object({ sessionId: z.string() }))
|
||||||
|
.handler(async function* ({ input, signal }) {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
const allRules = await recurringRulesKV.getAllItems();
|
||||||
|
const sortedRules = allRules.sort((a, b) => {
|
||||||
|
if (a.dayOfWeek !== b.dayOfWeek) return a.dayOfWeek - b.dayOfWeek;
|
||||||
|
return a.startTime.localeCompare(b.startTime);
|
||||||
|
});
|
||||||
|
yield sortedRules;
|
||||||
|
for await (const _ of recurringRulesKV.subscribe()) {
|
||||||
|
const updatedRules = await recurringRulesKV.getAllItems();
|
||||||
|
const sortedUpdatedRules = updatedRules.sort((a, b) => {
|
||||||
|
if (a.dayOfWeek !== b.dayOfWeek) return a.dayOfWeek - b.dayOfWeek;
|
||||||
|
return a.startTime.localeCompare(b.startTime);
|
||||||
|
});
|
||||||
|
yield sortedUpdatedRules;
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
|
adminListTimeOff: os
|
||||||
|
.input(z.object({ sessionId: z.string() }))
|
||||||
|
.handler(async function* ({ input, signal }) {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
const allTimeOff = await timeOffPeriodsKV.getAllItems();
|
||||||
|
const sortedTimeOff = allTimeOff.sort((a, b) => a.startDate.localeCompare(b.startDate));
|
||||||
|
yield sortedTimeOff;
|
||||||
|
for await (const _ of timeOffPeriodsKV.subscribe()) {
|
||||||
|
const updatedTimeOff = await timeOffPeriodsKV.getAllItems();
|
||||||
|
const sortedUpdatedTimeOff = updatedTimeOff.sort((a, b) => a.startDate.localeCompare(b.startDate));
|
||||||
|
yield sortedUpdatedTimeOff;
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
|
||||||
|
export const router = {
|
||||||
|
// Recurring Rules
|
||||||
|
createRule,
|
||||||
|
updateRule,
|
||||||
|
deleteRule,
|
||||||
|
toggleRuleActive,
|
||||||
|
listRules,
|
||||||
|
adminListRules,
|
||||||
|
|
||||||
|
// Time-Off Periods
|
||||||
|
createTimeOff,
|
||||||
|
updateTimeOff,
|
||||||
|
deleteTimeOff,
|
||||||
|
listTimeOff,
|
||||||
|
adminListTimeOff,
|
||||||
|
|
||||||
|
// Availability
|
||||||
|
getAvailableTimes,
|
||||||
|
|
||||||
|
// Live queries
|
||||||
|
live,
|
||||||
|
};
|
||||||
294
src/server/rpc/reviews.ts
Normal file
294
src/server/rpc/reviews.ts
Normal file
@@ -0,0 +1,294 @@
|
|||||||
|
import { call, os } from "@orpc/server";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { randomUUID } from "crypto";
|
||||||
|
import { createKV } from "../lib/create-kv.js";
|
||||||
|
import { assertOwner, sessionsKV } from "../lib/auth.js";
|
||||||
|
|
||||||
|
// Schema Definition
|
||||||
|
const ReviewSchema = z.object({
|
||||||
|
id: z.string(),
|
||||||
|
bookingId: z.string(),
|
||||||
|
customerName: z.string().min(2, "Kundenname muss mindestens 2 Zeichen lang sein"),
|
||||||
|
customerEmail: z.string().email("Ungültige E-Mail-Adresse").optional(),
|
||||||
|
rating: z.number().int().min(1).max(5),
|
||||||
|
comment: z.string().min(10, "Kommentar muss mindestens 10 Zeichen lang sein"),
|
||||||
|
status: z.enum(["pending", "approved", "rejected"]),
|
||||||
|
createdAt: z.string(),
|
||||||
|
reviewedAt: z.string().optional(),
|
||||||
|
reviewedBy: z.string().optional(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export type Review = z.output<typeof ReviewSchema>;
|
||||||
|
|
||||||
|
// Public-safe review type for listings on the website
|
||||||
|
export type PublicReview = {
|
||||||
|
customerName: string;
|
||||||
|
rating: number;
|
||||||
|
comment: string;
|
||||||
|
status: "pending" | "approved" | "rejected";
|
||||||
|
bookingId: string;
|
||||||
|
createdAt: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
// KV Storage
|
||||||
|
const reviewsKV = createKV<Review>("reviews");
|
||||||
|
|
||||||
|
// References to other KV stores needed for validation with strong typing
|
||||||
|
type BookingAccessToken = {
|
||||||
|
id: string;
|
||||||
|
bookingId: string;
|
||||||
|
token: string;
|
||||||
|
expiresAt: string;
|
||||||
|
createdAt: string;
|
||||||
|
purpose: "booking_access" | "reschedule_proposal";
|
||||||
|
proposedDate?: string;
|
||||||
|
proposedTime?: string;
|
||||||
|
originalDate?: string;
|
||||||
|
originalTime?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type Booking = {
|
||||||
|
id: string;
|
||||||
|
treatmentId: string;
|
||||||
|
customerName: string;
|
||||||
|
customerEmail?: string;
|
||||||
|
customerPhone?: string;
|
||||||
|
appointmentDate: string;
|
||||||
|
appointmentTime: string;
|
||||||
|
notes?: string;
|
||||||
|
inspirationPhoto?: string;
|
||||||
|
slotId?: string;
|
||||||
|
status: "pending" | "confirmed" | "cancelled" | "completed";
|
||||||
|
createdAt: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const cancellationKV = createKV<BookingAccessToken>("cancellation_tokens");
|
||||||
|
const bookingsKV = createKV<Booking>("bookings");
|
||||||
|
|
||||||
|
// Helper Function: validateBookingToken
|
||||||
|
async function validateBookingToken(token: string) {
|
||||||
|
const tokens = await cancellationKV.getAllItems();
|
||||||
|
const validToken = tokens.find(t =>
|
||||||
|
t.token === token &&
|
||||||
|
new Date(t.expiresAt) > new Date() &&
|
||||||
|
t.purpose === 'booking_access'
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!validToken) {
|
||||||
|
throw new Error("Ungültiger oder abgelaufener Buchungs-Token");
|
||||||
|
}
|
||||||
|
|
||||||
|
const booking = await bookingsKV.getItem(validToken.bookingId);
|
||||||
|
if (!booking) {
|
||||||
|
throw new Error("Buchung nicht gefunden");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Only allow reviews for completed appointments
|
||||||
|
if (!(booking.status === "completed")) {
|
||||||
|
throw new Error("Bewertungen sind nur für abgeschlossene Termine möglich");
|
||||||
|
}
|
||||||
|
|
||||||
|
return booking;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public Endpoint: submitReview
|
||||||
|
const submitReview = os
|
||||||
|
.input(
|
||||||
|
z.object({
|
||||||
|
bookingToken: z.string(),
|
||||||
|
rating: z.number().int().min(1).max(5),
|
||||||
|
comment: z.string().min(10, "Kommentar muss mindestens 10 Zeichen lang sein"),
|
||||||
|
})
|
||||||
|
)
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
try {
|
||||||
|
// Validate bookingToken
|
||||||
|
const booking = await validateBookingToken(input.bookingToken);
|
||||||
|
|
||||||
|
// Enforce uniqueness by using booking.id as the KV key
|
||||||
|
const existing = await reviewsKV.getItem(booking.id);
|
||||||
|
if (existing) {
|
||||||
|
throw new Error("Für diese Buchung wurde bereits eine Bewertung abgegeben");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create review object
|
||||||
|
const review: Review = {
|
||||||
|
id: booking.id,
|
||||||
|
bookingId: booking.id,
|
||||||
|
customerName: booking.customerName,
|
||||||
|
customerEmail: booking.customerEmail,
|
||||||
|
rating: input.rating,
|
||||||
|
comment: input.comment,
|
||||||
|
status: "pending",
|
||||||
|
createdAt: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
|
||||||
|
await reviewsKV.setItem(booking.id, review);
|
||||||
|
return review;
|
||||||
|
} catch (err) {
|
||||||
|
console.error("reviews.submitReview error", err);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Admin Endpoint: approveReview
|
||||||
|
const approveReview = os
|
||||||
|
.input(z.object({ sessionId: z.string(), id: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
try {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
|
||||||
|
const review = await reviewsKV.getItem(input.id);
|
||||||
|
if (!review) {
|
||||||
|
throw new Error("Bewertung nicht gefunden");
|
||||||
|
}
|
||||||
|
|
||||||
|
const session = await sessionsKV.getItem(input.sessionId).catch(() => undefined);
|
||||||
|
const updatedReview = {
|
||||||
|
...review,
|
||||||
|
status: "approved" as const,
|
||||||
|
reviewedAt: new Date().toISOString(),
|
||||||
|
reviewedBy: session?.userId || review.reviewedBy,
|
||||||
|
};
|
||||||
|
|
||||||
|
await reviewsKV.setItem(input.id, updatedReview);
|
||||||
|
return updatedReview;
|
||||||
|
} catch (err) {
|
||||||
|
console.error("reviews.approveReview error", err);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Admin Endpoint: rejectReview
|
||||||
|
const rejectReview = os
|
||||||
|
.input(z.object({ sessionId: z.string(), id: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
try {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
|
||||||
|
const review = await reviewsKV.getItem(input.id);
|
||||||
|
if (!review) {
|
||||||
|
throw new Error("Bewertung nicht gefunden");
|
||||||
|
}
|
||||||
|
|
||||||
|
const session = await sessionsKV.getItem(input.sessionId).catch(() => undefined);
|
||||||
|
const updatedReview = {
|
||||||
|
...review,
|
||||||
|
status: "rejected" as const,
|
||||||
|
reviewedAt: new Date().toISOString(),
|
||||||
|
reviewedBy: session?.userId || review.reviewedBy,
|
||||||
|
};
|
||||||
|
|
||||||
|
await reviewsKV.setItem(input.id, updatedReview);
|
||||||
|
return updatedReview;
|
||||||
|
} catch (err) {
|
||||||
|
console.error("reviews.rejectReview error", err);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Admin Endpoint: deleteReview
|
||||||
|
const deleteReview = os
|
||||||
|
.input(z.object({ sessionId: z.string(), id: z.string() }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
try {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
await reviewsKV.removeItem(input.id);
|
||||||
|
} catch (err) {
|
||||||
|
console.error("reviews.deleteReview error", err);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Public Endpoint: listPublishedReviews
|
||||||
|
const listPublishedReviews = os.handler(async (): Promise<PublicReview[]> => {
|
||||||
|
try {
|
||||||
|
const allReviews = await reviewsKV.getAllItems();
|
||||||
|
const published = allReviews.filter(r => r.status === "approved");
|
||||||
|
const sorted = published.sort((a, b) => b.createdAt.localeCompare(a.createdAt));
|
||||||
|
const publicSafe: PublicReview[] = sorted.map(r => ({
|
||||||
|
customerName: r.customerName,
|
||||||
|
rating: r.rating,
|
||||||
|
comment: r.comment,
|
||||||
|
status: r.status,
|
||||||
|
bookingId: r.bookingId,
|
||||||
|
createdAt: r.createdAt,
|
||||||
|
}));
|
||||||
|
return publicSafe;
|
||||||
|
} catch (err) {
|
||||||
|
console.error("reviews.listPublishedReviews error", err);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Admin Endpoint: adminListReviews
|
||||||
|
const adminListReviews = os
|
||||||
|
.input(
|
||||||
|
z.object({
|
||||||
|
sessionId: z.string(),
|
||||||
|
statusFilter: z.enum(["all", "pending", "approved", "rejected"]).optional().default("all"),
|
||||||
|
})
|
||||||
|
)
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
try {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
|
||||||
|
const allReviews = await reviewsKV.getAllItems();
|
||||||
|
const filtered = input.statusFilter === "all"
|
||||||
|
? allReviews
|
||||||
|
: allReviews.filter(r => r.status === input.statusFilter);
|
||||||
|
|
||||||
|
const sorted = filtered.sort((a, b) => b.createdAt.localeCompare(a.createdAt));
|
||||||
|
return sorted;
|
||||||
|
} catch (err) {
|
||||||
|
console.error("reviews.adminListReviews error", err);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Live Queries
|
||||||
|
const live = {
|
||||||
|
listPublishedReviews: os.handler(async function* ({ signal }) {
|
||||||
|
yield call(listPublishedReviews, {}, { signal });
|
||||||
|
for await (const _ of reviewsKV.subscribe()) {
|
||||||
|
yield call(listPublishedReviews, {}, { signal });
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
|
adminListReviews: os
|
||||||
|
.input(
|
||||||
|
z.object({
|
||||||
|
sessionId: z.string(),
|
||||||
|
statusFilter: z.enum(["all", "pending", "approved", "rejected"]).optional().default("all"),
|
||||||
|
})
|
||||||
|
)
|
||||||
|
.handler(async function* ({ input, signal }) {
|
||||||
|
await assertOwner(input.sessionId);
|
||||||
|
|
||||||
|
const allReviews = await reviewsKV.getAllItems();
|
||||||
|
const filtered = input.statusFilter === "all"
|
||||||
|
? allReviews
|
||||||
|
: allReviews.filter(r => r.status === input.statusFilter);
|
||||||
|
const sorted = filtered.sort((a, b) => b.createdAt.localeCompare(a.createdAt));
|
||||||
|
yield sorted;
|
||||||
|
|
||||||
|
for await (const _ of reviewsKV.subscribe()) {
|
||||||
|
const updated = await reviewsKV.getAllItems();
|
||||||
|
const filteredUpdated = input.statusFilter === "all"
|
||||||
|
? updated
|
||||||
|
: updated.filter(r => r.status === input.statusFilter);
|
||||||
|
const sortedUpdated = filteredUpdated.sort((a, b) => b.createdAt.localeCompare(a.createdAt));
|
||||||
|
yield sortedUpdated;
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
|
||||||
|
export const router = {
|
||||||
|
submitReview,
|
||||||
|
approveReview,
|
||||||
|
rejectReview,
|
||||||
|
deleteReview,
|
||||||
|
listPublishedReviews,
|
||||||
|
adminListReviews,
|
||||||
|
live,
|
||||||
|
};
|
||||||
13
src/server/rpc/social.ts
Normal file
13
src/server/rpc/social.ts
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import { os } from "@orpc/server";
|
||||||
|
|
||||||
|
const getSocialMedia = os.handler(async () => {
|
||||||
|
return {
|
||||||
|
tiktokProfile: process.env.TIKTOK_PROFILE,
|
||||||
|
instagramProfile: process.env.INSTAGRAM_PROFILE,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
export const router = os.router({
|
||||||
|
getSocialMedia,
|
||||||
|
});
|
||||||
|
|
||||||
Reference in New Issue
Block a user