form
This commit is contained in:
@@ -5,7 +5,8 @@ import { FormState } from '../types';
|
||||
import { PRICING } from '../constants';
|
||||
import { AnimatedNumber } from './AnimatedNumber';
|
||||
import { ConceptPrice, ConceptAutomation } from '../../Landing/ConceptIllustrations';
|
||||
import { Info, Download, Share2 } from 'lucide-react';
|
||||
import { Info, Download, Share2, RefreshCw } from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { EstimationPDF } from '../../EstimationPDF';
|
||||
|
||||
@@ -42,6 +43,43 @@ export function PriceCalculation({
|
||||
const [pdfLoading, setPdfLoading] = React.useState(false);
|
||||
const languagesCount = state.languagesList.length || 1;
|
||||
|
||||
const handleDownload = async () => {
|
||||
if (pdfLoading) return;
|
||||
|
||||
setPdfLoading(true);
|
||||
|
||||
try {
|
||||
const { pdf } = await import('@react-pdf/renderer');
|
||||
const doc = <EstimationPDF
|
||||
state={state}
|
||||
totalPrice={totalPrice}
|
||||
monthlyPrice={monthlyPrice}
|
||||
totalPagesCount={totalPagesCount}
|
||||
pricing={PRICING}
|
||||
qrCodeData={qrCodeData}
|
||||
/>;
|
||||
|
||||
// Minimum loading time of 2 seconds for better UX
|
||||
const [blob] = await Promise.all([
|
||||
pdf(doc).toBlob(),
|
||||
new Promise(resolve => setTimeout(resolve, 2000))
|
||||
]);
|
||||
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = `kalkulation-${state.name.toLowerCase().replace(/\s+/g, '-') || 'projekt'}.pdf`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
} catch (error) {
|
||||
console.error('PDF generation failed:', error);
|
||||
} finally {
|
||||
setPdfLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="lg:col-span-4 lg:sticky lg:top-32 self-start z-30">
|
||||
<div className="bg-slate-50 border border-slate-100 rounded-[3rem] p-6 space-y-6">
|
||||
@@ -76,26 +114,46 @@ export function PriceCalculation({
|
||||
|
||||
<div className="pt-4 space-y-4">
|
||||
{isClient && (
|
||||
<PDFDownloadLink
|
||||
document={<EstimationPDF state={state} totalPrice={totalPrice} monthlyPrice={monthlyPrice} totalPagesCount={totalPagesCount} pricing={PRICING} qrCodeData={qrCodeData} />}
|
||||
fileName={`kalkulation-${state.name.toLowerCase().replace(/\s+/g, '-') || 'projekt'}.pdf`}
|
||||
className="w-full flex items-center justify-center gap-3 px-8 py-4 rounded-full border border-slate-200 text-slate-900 font-bold text-sm uppercase tracking-widest hover:bg-white hover:border-slate-900 transition-all focus:outline-none overflow-hidden relative"
|
||||
onClick={(e) => {
|
||||
if (pdfLoading) {
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
setPdfLoading(true);
|
||||
setTimeout(() => setPdfLoading(false), 2000);
|
||||
}}
|
||||
<button
|
||||
type="button"
|
||||
disabled={pdfLoading}
|
||||
onClick={handleDownload}
|
||||
className="w-full h-14 rounded-full border border-slate-200 text-slate-900 font-bold text-sm uppercase tracking-widest hover:bg-white hover:border-slate-900 transition-all focus:outline-none overflow-hidden relative"
|
||||
>
|
||||
{({ loading }) => (
|
||||
<div className="flex items-center gap-3">
|
||||
<Download size={18} />
|
||||
<span>{loading || pdfLoading ? 'PDF wird erstellt...' : 'Als PDF speichern'}</span>
|
||||
</div>
|
||||
)}
|
||||
</PDFDownloadLink>
|
||||
<AnimatePresence mode="wait">
|
||||
{pdfLoading ? (
|
||||
<motion.div
|
||||
key="loading"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="absolute inset-0 flex items-center justify-center bg-white"
|
||||
>
|
||||
<motion.div
|
||||
className="absolute bottom-0 left-0 h-1 bg-slate-900"
|
||||
initial={{ width: "0%" }}
|
||||
animate={{ width: "100%" }}
|
||||
transition={{ duration: 2, ease: "easeInOut" }}
|
||||
/>
|
||||
<span className="flex items-center gap-2">
|
||||
<RefreshCw className="animate-spin" size={16} />
|
||||
PDF wird erstellt...
|
||||
</span>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="idle"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="flex items-center justify-center gap-3"
|
||||
>
|
||||
<Download size={18} />
|
||||
<span>Als PDF speichern</span>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{onShare && (
|
||||
|
||||
@@ -186,3 +186,65 @@ export const SOCIAL_MEDIA_OPTIONS = [
|
||||
{ id: 'tiktok', label: 'TikTok' },
|
||||
{ id: 'youtube', label: 'YouTube' },
|
||||
];
|
||||
|
||||
export const VIBE_LABELS: Record<string, string> = {
|
||||
minimal: 'Minimalistisch',
|
||||
bold: 'Mutig & Laut',
|
||||
nature: 'Natürlich',
|
||||
tech: 'Technisch'
|
||||
};
|
||||
|
||||
export const DEADLINE_LABELS: Record<string, string> = {
|
||||
asap: 'So schnell wie möglich',
|
||||
'2-3-months': 'In 2-3 Monaten',
|
||||
'3-6-months': 'In 3-6 Monaten',
|
||||
flexible: 'Flexibel'
|
||||
};
|
||||
|
||||
export const ASSET_LABELS: Record<string, string> = {
|
||||
logo: 'Logo',
|
||||
styleguide: 'Styleguide',
|
||||
content_concept: 'Inhalts-Konzept',
|
||||
media: 'Bild/Video-Material',
|
||||
icons: 'Icons',
|
||||
illustrations: 'Illustrationen',
|
||||
fonts: 'Fonts'
|
||||
};
|
||||
|
||||
export const FEATURE_LABELS: Record<string, string> = {
|
||||
blog_news: 'Blog / News',
|
||||
products: 'Produktbereich',
|
||||
jobs: 'Karriere / Jobs',
|
||||
refs: 'Referenzen / Cases',
|
||||
events: 'Events / Termine'
|
||||
};
|
||||
|
||||
export const FUNCTION_LABELS: Record<string, string> = {
|
||||
search: 'Suche',
|
||||
filter: 'Filter-Systeme',
|
||||
pdf: 'PDF-Export',
|
||||
forms: 'Erweiterte Formulare',
|
||||
members: 'Mitgliederbereich',
|
||||
calendar: 'Event-Kalender',
|
||||
multilang: 'Mehrsprachigkeit',
|
||||
chat: 'Echtzeit-Chat'
|
||||
};
|
||||
|
||||
export const API_LABELS: Record<string, string> = {
|
||||
crm_erp: 'CRM / ERP',
|
||||
payment: 'Payment',
|
||||
marketing: 'Marketing',
|
||||
ecommerce: 'E-Commerce',
|
||||
maps: 'Google Maps / Places',
|
||||
social: 'Social Media Sync',
|
||||
analytics: 'Custom Analytics'
|
||||
};
|
||||
|
||||
export const SOCIAL_LABELS: Record<string, string> = {
|
||||
instagram: 'Instagram',
|
||||
linkedin: 'LinkedIn',
|
||||
facebook: 'Facebook',
|
||||
twitter: 'Twitter / X',
|
||||
tiktok: 'TikTok',
|
||||
youtube: 'YouTube'
|
||||
};
|
||||
|
||||
139
src/components/ContactForm/utils.ts
Normal file
139
src/components/ContactForm/utils.ts
Normal file
@@ -0,0 +1,139 @@
|
||||
import { FormState } from './types';
|
||||
import { FEATURE_LABELS, FUNCTION_LABELS, API_LABELS } from './constants';
|
||||
|
||||
export interface Position {
|
||||
pos: number;
|
||||
title: string;
|
||||
desc: string;
|
||||
qty: number;
|
||||
price: number;
|
||||
}
|
||||
|
||||
export function calculatePositions(state: FormState, pricing: any): Position[] {
|
||||
const positions: Position[] = [];
|
||||
let pos = 1;
|
||||
|
||||
if (state.projectType === 'website') {
|
||||
positions.push({
|
||||
pos: pos++,
|
||||
title: 'Basis Website Setup',
|
||||
desc: 'Projekt-Setup, Infrastruktur, Hosting-Bereitstellung, Grundstruktur & Design-Vorlage, technisches SEO-Basics, Analytics.',
|
||||
qty: 1,
|
||||
price: pricing.BASE_WEBSITE
|
||||
});
|
||||
|
||||
const totalPagesCount = state.selectedPages.length + state.otherPages.length + (state.otherPagesCount || 0);
|
||||
const allPages = [...state.selectedPages.map((p: string) => p === 'Home' ? 'Startseite' : p), ...state.otherPages];
|
||||
|
||||
positions.push({
|
||||
pos: pos++,
|
||||
title: 'Individuelle Seiten',
|
||||
desc: `Gestaltung und Umsetzung von ${totalPagesCount} individuellen Seiten-Layouts (${allPages.join(', ')}).`,
|
||||
qty: totalPagesCount,
|
||||
price: totalPagesCount * pricing.PAGE
|
||||
});
|
||||
|
||||
if (state.features.length > 0 || state.otherFeatures.length > 0) {
|
||||
const allFeatures = [...state.features.map((f: string) => FEATURE_LABELS[f] || f), ...state.otherFeatures];
|
||||
positions.push({
|
||||
pos: pos++,
|
||||
title: 'System-Module',
|
||||
desc: `Implementierung funktionaler Bereiche: ${allFeatures.join(', ')}. Inklusive Datenstruktur und Darstellung.`,
|
||||
qty: allFeatures.length,
|
||||
price: allFeatures.length * pricing.FEATURE
|
||||
});
|
||||
}
|
||||
|
||||
if (state.functions.length > 0 || state.otherFunctions.length > 0) {
|
||||
const allFunctions = [...state.functions.map((f: string) => FUNCTION_LABELS[f] || f), ...state.otherFunctions];
|
||||
positions.push({
|
||||
pos: pos++,
|
||||
title: 'Logik-Funktionen',
|
||||
desc: `Erweiterte Funktionen: ${allFunctions.join(', ')}.`,
|
||||
qty: allFunctions.length,
|
||||
price: allFunctions.length * pricing.FUNCTION
|
||||
});
|
||||
}
|
||||
|
||||
if (state.apiSystems.length > 0 || state.otherTech.length > 0) {
|
||||
const allApis = [...state.apiSystems.map((a: string) => API_LABELS[a] || a), ...state.otherTech];
|
||||
positions.push({
|
||||
pos: pos++,
|
||||
title: 'Schnittstellen (API)',
|
||||
desc: `Anbindung externer Systeme zur Datensynchronisation: ${allApis.join(', ')}.`,
|
||||
qty: allApis.length,
|
||||
price: allApis.length * pricing.API_INTEGRATION
|
||||
});
|
||||
}
|
||||
|
||||
if (state.cmsSetup) {
|
||||
const totalFeatures = state.features.length + state.otherFeatures.length + (state.otherFeaturesCount || 0);
|
||||
positions.push({
|
||||
pos: pos++,
|
||||
title: 'Inhaltsverwaltung (CMS)',
|
||||
desc: 'Einrichtung eines Systems zur eigenständigen Pflege von Inhalten und Datensätzen.',
|
||||
qty: 1,
|
||||
price: pricing.CMS_SETUP + totalFeatures * pricing.CMS_CONNECTION_PER_FEATURE
|
||||
});
|
||||
}
|
||||
|
||||
if (state.newDatasets > 0) {
|
||||
positions.push({
|
||||
pos: pos++,
|
||||
title: 'Inhaltspflege (Initial)',
|
||||
desc: `Manuelle Einpflege von ${state.newDatasets} Datensätzen (z.B. Produkte, Blogartikel).`,
|
||||
qty: state.newDatasets,
|
||||
price: state.newDatasets * pricing.NEW_DATASET
|
||||
});
|
||||
}
|
||||
|
||||
if (state.visualStaging && Number(state.visualStaging) > 0) {
|
||||
const count = Number(state.visualStaging);
|
||||
positions.push({
|
||||
pos: pos++,
|
||||
title: 'Visuelle Inszenierung',
|
||||
desc: `Umsetzung von ${count} Hero-Stories, Scroll-Effekten oder speziell inszenierten Sektionen.`,
|
||||
qty: count,
|
||||
price: count * (pricing.VISUAL_STAGING || 1500)
|
||||
});
|
||||
}
|
||||
|
||||
if (state.complexInteractions && Number(state.complexInteractions) > 0) {
|
||||
const count = Number(state.complexInteractions);
|
||||
positions.push({
|
||||
pos: pos++,
|
||||
title: 'Komplexe Interaktion',
|
||||
desc: `Umsetzung von ${count} Konfiguratoren, Live-Previews oder mehrstufigen Auswahlprozessen.`,
|
||||
qty: count,
|
||||
price: count * (pricing.COMPLEX_INTERACTION || 2500)
|
||||
});
|
||||
}
|
||||
|
||||
const languagesCount = state.languagesList.length || 1;
|
||||
if (languagesCount > 1) {
|
||||
// This is a bit tricky because the factor applies to the total.
|
||||
// For the PDF we show it as a separate position.
|
||||
// We calculate the subtotal first.
|
||||
const subtotal = positions.reduce((sum, p) => sum + p.price, 0);
|
||||
const factorPrice = subtotal * ((languagesCount - 1) * 0.2);
|
||||
|
||||
positions.push({
|
||||
pos: pos++,
|
||||
title: 'Mehrsprachigkeit',
|
||||
desc: `Erweiterung des Systems auf ${languagesCount} Sprachen (Struktur & Logik).`,
|
||||
qty: languagesCount,
|
||||
price: Math.round(factorPrice)
|
||||
});
|
||||
}
|
||||
} else {
|
||||
positions.push({
|
||||
pos: pos++,
|
||||
title: 'Web App / Software Entwicklung',
|
||||
desc: 'Individuelle Software-Entwicklung nach Aufwand. Abrechnung erfolgt auf Stundenbasis.',
|
||||
qty: 1,
|
||||
price: 0
|
||||
});
|
||||
}
|
||||
|
||||
return positions;
|
||||
}
|
||||
@@ -1,178 +1,280 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { Document, Page, Text, View, StyleSheet, Image } from '@react-pdf/renderer';
|
||||
import {
|
||||
Document as PDFDocument,
|
||||
Page as PDFPage,
|
||||
Text as PDFText,
|
||||
View as PDFView,
|
||||
StyleSheet as PDFStyleSheet,
|
||||
Image as PDFImage
|
||||
} from '@react-pdf/renderer';
|
||||
import {
|
||||
VIBE_LABELS,
|
||||
DEADLINE_LABELS,
|
||||
ASSET_LABELS,
|
||||
SOCIAL_LABELS
|
||||
} from './ContactForm/constants';
|
||||
import { calculatePositions } from './ContactForm/utils';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
const styles = PDFStyleSheet.create({
|
||||
page: {
|
||||
padding: 40,
|
||||
padding: 48,
|
||||
backgroundColor: '#ffffff',
|
||||
fontFamily: 'Helvetica',
|
||||
fontSize: 10,
|
||||
color: '#1a1a1a',
|
||||
color: '#000000',
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: 40,
|
||||
borderBottom: 2,
|
||||
alignItems: 'flex-start',
|
||||
marginBottom: 64,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#000000',
|
||||
paddingBottom: 20,
|
||||
paddingBottom: 24,
|
||||
},
|
||||
brand: {
|
||||
fontSize: 18,
|
||||
brandIconContainer: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
backgroundColor: '#000000',
|
||||
borderRadius: 8,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
brandIconText: {
|
||||
color: '#ffffff',
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: -0.5,
|
||||
},
|
||||
quoteInfo: {
|
||||
textAlign: 'right',
|
||||
},
|
||||
quoteTitle: {
|
||||
fontSize: 14,
|
||||
fontSize: 10,
|
||||
fontWeight: 'bold',
|
||||
marginBottom: 4,
|
||||
color: '#000000',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 1,
|
||||
},
|
||||
quoteDate: {
|
||||
fontSize: 9,
|
||||
color: '#666666',
|
||||
},
|
||||
recipientSection: {
|
||||
marginBottom: 30,
|
||||
|
||||
section: {
|
||||
marginBottom: 32,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 8,
|
||||
fontWeight: 'bold',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 1,
|
||||
color: '#999999',
|
||||
marginBottom: 12,
|
||||
},
|
||||
|
||||
card: {
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: 12,
|
||||
padding: 24,
|
||||
marginBottom: 24,
|
||||
borderWidth: 1,
|
||||
borderColor: '#eeeeee',
|
||||
},
|
||||
cardTitle: {
|
||||
fontSize: 10,
|
||||
fontWeight: 'bold',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 1,
|
||||
color: '#64748b',
|
||||
marginBottom: 16,
|
||||
},
|
||||
|
||||
recipientGrid: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
gap: 32,
|
||||
},
|
||||
recipientItem: {
|
||||
flexDirection: 'column',
|
||||
},
|
||||
recipientLabel: {
|
||||
fontSize: 8,
|
||||
fontSize: 7,
|
||||
color: '#999999',
|
||||
textTransform: 'uppercase',
|
||||
marginBottom: 4,
|
||||
},
|
||||
recipientName: {
|
||||
fontSize: 12,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
recipientRole: {
|
||||
recipientValue: {
|
||||
fontSize: 10,
|
||||
color: '#666666',
|
||||
fontWeight: 'bold',
|
||||
color: '#000000',
|
||||
},
|
||||
|
||||
table: {
|
||||
display: 'flex',
|
||||
width: 'auto',
|
||||
marginBottom: 30,
|
||||
marginTop: 16,
|
||||
},
|
||||
tableHeader: {
|
||||
flexDirection: 'row',
|
||||
backgroundColor: '#f8fafc',
|
||||
borderBottom: 1,
|
||||
borderBottomColor: '#e2e8f0',
|
||||
paddingVertical: 8,
|
||||
paddingHorizontal: 12,
|
||||
paddingBottom: 8,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#000000',
|
||||
marginBottom: 12,
|
||||
},
|
||||
tableRow: {
|
||||
flexDirection: 'row',
|
||||
borderBottom: 1,
|
||||
borderBottomColor: '#f1f5f9',
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 12,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#eeeeee',
|
||||
alignItems: 'flex-start',
|
||||
},
|
||||
colPos: { width: '8%' },
|
||||
colDesc: { width: '62%' },
|
||||
colPos: { width: '6%' },
|
||||
colDesc: { width: '64%' },
|
||||
colQty: { width: '10%', textAlign: 'center' },
|
||||
colPrice: { width: '20%', textAlign: 'right' },
|
||||
|
||||
headerText: {
|
||||
fontSize: 8,
|
||||
fontSize: 7,
|
||||
fontWeight: 'bold',
|
||||
color: '#64748b',
|
||||
color: '#000000',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 1,
|
||||
},
|
||||
posText: { fontSize: 9, color: '#94a3b8' },
|
||||
itemTitle: { fontSize: 10, fontWeight: 'bold', marginBottom: 2 },
|
||||
itemDesc: { fontSize: 8, color: '#64748b', lineHeight: 1.4 },
|
||||
priceText: { fontSize: 10, fontWeight: 'bold' },
|
||||
posText: { fontSize: 8, color: '#999999' },
|
||||
itemTitle: { fontSize: 10, fontWeight: 'bold', marginBottom: 4, color: '#000000' },
|
||||
itemDesc: { fontSize: 8, color: '#666666', lineHeight: 1.4 },
|
||||
priceText: { fontSize: 10, fontWeight: 'bold', color: '#000000' },
|
||||
|
||||
summarySection: {
|
||||
summaryContainer: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-end',
|
||||
marginTop: 10,
|
||||
marginTop: 32,
|
||||
},
|
||||
summaryTable: {
|
||||
summaryCard: {
|
||||
width: '40%',
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: 12,
|
||||
padding: 20,
|
||||
borderWidth: 1,
|
||||
borderColor: '#000000',
|
||||
},
|
||||
summaryRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
paddingVertical: 4,
|
||||
},
|
||||
summaryLabel: { fontSize: 8, color: '#666666' },
|
||||
summaryValue: { fontSize: 9, fontWeight: 'bold', color: '#000000' },
|
||||
|
||||
totalRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
paddingVertical: 12,
|
||||
borderTop: 1,
|
||||
borderTopColor: '#000000',
|
||||
paddingTop: 12,
|
||||
marginTop: 8,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#eeeeee',
|
||||
},
|
||||
totalLabel: { fontSize: 10, fontWeight: 'bold', color: '#000000' },
|
||||
totalValue: { fontSize: 14, fontWeight: 'bold', color: '#000000' },
|
||||
|
||||
hostingBox: {
|
||||
marginTop: 24,
|
||||
padding: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: '#eeeeee',
|
||||
borderRadius: 12,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
totalLabel: { fontSize: 12, fontWeight: 'bold' },
|
||||
totalValue: { fontSize: 16, fontWeight: 'bold' },
|
||||
|
||||
configSection: {
|
||||
marginTop: 20,
|
||||
padding: 20,
|
||||
backgroundColor: '#f8fafc',
|
||||
borderRadius: 8,
|
||||
},
|
||||
configTitle: {
|
||||
fontSize: 10,
|
||||
fontWeight: 'bold',
|
||||
marginBottom: 10,
|
||||
textTransform: 'uppercase',
|
||||
color: '#475569',
|
||||
},
|
||||
configGrid: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
gap: 20,
|
||||
gap: 24,
|
||||
},
|
||||
configItem: {
|
||||
width: '45%',
|
||||
marginBottom: 10,
|
||||
width: '30%',
|
||||
marginBottom: 16,
|
||||
},
|
||||
configLabel: { fontSize: 8, color: '#94a3b8', marginBottom: 2 },
|
||||
configValue: { fontSize: 9, color: '#1e293b' },
|
||||
configLabel: { fontSize: 7, color: '#999999', marginBottom: 4, textTransform: 'uppercase', fontWeight: 'bold' },
|
||||
configValue: { fontSize: 8, color: '#000000', fontWeight: 'bold' },
|
||||
|
||||
qrSection: {
|
||||
marginTop: 30,
|
||||
colorGrid: {
|
||||
flexDirection: 'row',
|
||||
gap: 12,
|
||||
marginTop: 8,
|
||||
},
|
||||
colorSwatch: {
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderRadius: 4,
|
||||
borderWidth: 1,
|
||||
borderColor: '#eeeeee',
|
||||
},
|
||||
colorHex: {
|
||||
fontSize: 6,
|
||||
color: '#999999',
|
||||
marginTop: 4,
|
||||
textAlign: 'center',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
|
||||
qrContainer: {
|
||||
position: 'absolute',
|
||||
bottom: 120,
|
||||
right: 48,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
qrImage: {
|
||||
width: 80,
|
||||
height: 80,
|
||||
width: 60,
|
||||
height: 60,
|
||||
},
|
||||
qrText: {
|
||||
fontSize: 7,
|
||||
color: '#94a3b8',
|
||||
marginTop: 5,
|
||||
fontSize: 6,
|
||||
color: '#999999',
|
||||
marginTop: 8,
|
||||
fontWeight: 'bold',
|
||||
textTransform: 'uppercase',
|
||||
textAlign: 'center',
|
||||
},
|
||||
|
||||
footer: {
|
||||
position: 'absolute',
|
||||
bottom: 30,
|
||||
left: 40,
|
||||
right: 40,
|
||||
borderTop: 1,
|
||||
bottom: 48,
|
||||
left: 48,
|
||||
right: 48,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#f1f5f9',
|
||||
paddingTop: 20,
|
||||
paddingTop: 24,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-end',
|
||||
},
|
||||
footerBrand: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: -1,
|
||||
color: '#000000',
|
||||
textTransform: 'lowercase',
|
||||
},
|
||||
footerRight: {
|
||||
alignItems: 'flex-end',
|
||||
},
|
||||
footerContact: {
|
||||
fontSize: 8,
|
||||
color: '#94a3b8',
|
||||
fontWeight: 'bold',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 1,
|
||||
marginBottom: 4,
|
||||
},
|
||||
pageNumber: {
|
||||
position: 'absolute',
|
||||
bottom: 30,
|
||||
right: 40,
|
||||
fontSize: 8,
|
||||
color: '#94a3b8',
|
||||
fontSize: 7,
|
||||
color: '#cbd5e1',
|
||||
fontWeight: 'bold',
|
||||
}
|
||||
});
|
||||
|
||||
@@ -192,408 +294,252 @@ export const EstimationPDF = ({ state, totalPrice, monthlyPrice, totalPagesCount
|
||||
day: 'numeric',
|
||||
});
|
||||
|
||||
const vibeLabels: Record<string, string> = {
|
||||
minimal: 'Minimalistisch',
|
||||
bold: 'Mutig & Laut',
|
||||
nature: 'Natürlich',
|
||||
tech: 'Technisch'
|
||||
};
|
||||
|
||||
const deadlineLabels: Record<string, string> = {
|
||||
asap: 'So schnell wie möglich',
|
||||
'2-3-months': 'In 2-3 Monaten',
|
||||
'3-6-months': 'In 3-6 Monaten',
|
||||
flexible: 'Flexibel'
|
||||
};
|
||||
|
||||
const assetLabels: Record<string, string> = {
|
||||
logo: 'Logo',
|
||||
styleguide: 'Styleguide',
|
||||
content_concept: 'Inhalts-Konzept',
|
||||
media: 'Bild/Video-Material',
|
||||
icons: 'Icons',
|
||||
illustrations: 'Illustrationen',
|
||||
fonts: 'Fonts'
|
||||
};
|
||||
|
||||
const featureLabels: Record<string, string> = {
|
||||
blog_news: 'Blog / News',
|
||||
products: 'Produktbereich',
|
||||
jobs: 'Karriere / Jobs',
|
||||
refs: 'Referenzen / Cases',
|
||||
events: 'Events / Termine'
|
||||
};
|
||||
|
||||
const functionLabels: Record<string, string> = {
|
||||
search: 'Suche',
|
||||
filter: 'Filter-Systeme',
|
||||
pdf: 'PDF-Export',
|
||||
forms: 'Erweiterte Formulare'
|
||||
};
|
||||
|
||||
const apiLabels: Record<string, string> = {
|
||||
crm: 'CRM System',
|
||||
erp: 'ERP / Warenwirtschaft',
|
||||
stripe: 'Stripe / Payment',
|
||||
newsletter: 'Newsletter / Marketing',
|
||||
ecommerce: 'E-Commerce / Shop',
|
||||
hr: 'HR / Recruiting',
|
||||
realestate: 'Immobilien',
|
||||
calendar: 'Termine / Booking',
|
||||
social: 'Social Media Sync',
|
||||
maps: 'Google Maps / Places',
|
||||
auth: 'Auth-Provider'
|
||||
};
|
||||
|
||||
const socialLabels: Record<string, string> = {
|
||||
instagram: 'Instagram',
|
||||
linkedin: 'LinkedIn',
|
||||
facebook: 'Facebook',
|
||||
twitter: 'Twitter / X',
|
||||
tiktok: 'TikTok',
|
||||
youtube: 'YouTube'
|
||||
};
|
||||
|
||||
const positions = [];
|
||||
let pos = 1;
|
||||
|
||||
if (state.projectType === 'website') {
|
||||
positions.push({
|
||||
pos: pos++,
|
||||
title: 'Basis Website Setup',
|
||||
desc: 'Projekt-Setup, Infrastruktur, Hosting-Bereitstellung, Grundstruktur & Design-Vorlage, technisches SEO-Basics, Analytics.',
|
||||
qty: 1,
|
||||
price: pricing.BASE_WEBSITE
|
||||
});
|
||||
|
||||
const allPages = [...state.selectedPages.map((p: string) => p === 'Home' ? 'Startseite' : p), ...state.otherPages];
|
||||
positions.push({
|
||||
pos: pos++,
|
||||
title: 'Individuelle Seiten',
|
||||
desc: `Gestaltung und Umsetzung von ${totalPagesCount} individuellen Seiten-Layouts (${allPages.join(', ')}).`,
|
||||
qty: totalPagesCount,
|
||||
price: totalPagesCount * pricing.PAGE
|
||||
});
|
||||
|
||||
if (state.features.length > 0 || state.otherFeatures.length > 0) {
|
||||
const allFeatures = [...state.features.map((f: string) => featureLabels[f] || f), ...state.otherFeatures];
|
||||
positions.push({
|
||||
pos: pos++,
|
||||
title: 'System-Module',
|
||||
desc: `Implementierung funktionaler Bereiche: ${allFeatures.join(', ')}. Inklusive Datenstruktur und Darstellung.`,
|
||||
qty: allFeatures.length,
|
||||
price: allFeatures.length * pricing.FEATURE
|
||||
});
|
||||
}
|
||||
|
||||
if (state.functions.length > 0 || state.otherFunctions.length > 0) {
|
||||
const allFunctions = [...state.functions.map((f: string) => functionLabels[f] || f), ...state.otherFunctions];
|
||||
positions.push({
|
||||
pos: pos++,
|
||||
title: 'Logik-Funktionen',
|
||||
desc: `Erweiterte Funktionen: ${allFunctions.join(', ')}.`,
|
||||
qty: allFunctions.length,
|
||||
price: allFunctions.length * pricing.FUNCTION
|
||||
});
|
||||
}
|
||||
|
||||
if (state.apiSystems.length > 0 || state.otherTech.length > 0) {
|
||||
const allApis = [...state.apiSystems.map((a: string) => apiLabels[a] || a), ...state.otherTech];
|
||||
positions.push({
|
||||
pos: pos++,
|
||||
title: 'Schnittstellen (API)',
|
||||
desc: `Anbindung externer Systeme zur Datensynchronisation: ${allApis.join(', ')}.`,
|
||||
qty: allApis.length,
|
||||
price: allApis.length * pricing.API_INTEGRATION
|
||||
});
|
||||
}
|
||||
|
||||
if (state.cmsSetup) {
|
||||
positions.push({
|
||||
pos: pos++,
|
||||
title: 'Inhaltsverwaltung (CMS)',
|
||||
desc: 'Einrichtung eines Systems zur eigenständigen Pflege von Inhalten und Datensätzen.',
|
||||
qty: 1,
|
||||
price: pricing.CMS_SETUP + (state.features.length + state.otherFeatures.length) * pricing.CMS_CONNECTION_PER_FEATURE
|
||||
});
|
||||
}
|
||||
|
||||
if (state.newDatasets > 0) {
|
||||
positions.push({
|
||||
pos: pos++,
|
||||
title: 'Inhaltspflege (Initial)',
|
||||
desc: `Manuelle Einpflege von ${state.newDatasets} Datensätzen (z.B. Produkte, Blogartikel).`,
|
||||
qty: state.newDatasets,
|
||||
price: state.newDatasets * pricing.NEW_DATASET
|
||||
});
|
||||
}
|
||||
|
||||
if (state.visualStaging > 0) {
|
||||
positions.push({
|
||||
pos: pos++,
|
||||
title: 'Visuelle Inszenierung',
|
||||
desc: `Umsetzung von ${state.visualStaging} Hero-Stories, Scroll-Effekten oder speziell inszenierten Sektionen.`,
|
||||
qty: state.visualStaging,
|
||||
price: state.visualStaging * pricing.VISUAL_STAGING
|
||||
});
|
||||
}
|
||||
|
||||
if (state.complexInteractions > 0) {
|
||||
positions.push({
|
||||
pos: pos++,
|
||||
title: 'Komplexe Interaktion',
|
||||
desc: `Umsetzung von ${state.complexInteractions} Konfiguratoren, Live-Previews oder mehrstufigen Auswahlprozessen.`,
|
||||
qty: state.complexInteractions,
|
||||
price: state.complexInteractions * pricing.COMPLEX_INTERACTION
|
||||
});
|
||||
}
|
||||
|
||||
if (state.languagesCount > 1) {
|
||||
const factorPrice = totalPrice - (totalPrice / (1 + (state.languagesCount - 1) * 0.2));
|
||||
positions.push({
|
||||
pos: pos++,
|
||||
title: 'Mehrsprachigkeit',
|
||||
desc: `Erweiterung des Systems auf ${state.languagesCount} Sprachen (Struktur & Logik).`,
|
||||
qty: state.languagesCount,
|
||||
price: Math.round(factorPrice)
|
||||
});
|
||||
}
|
||||
} else {
|
||||
positions.push({
|
||||
pos: pos++,
|
||||
title: 'Web App / Software Entwicklung',
|
||||
desc: 'Individuelle Software-Entwicklung nach Aufwand. Abrechnung erfolgt auf Stundenbasis.',
|
||||
qty: 1,
|
||||
price: 0
|
||||
});
|
||||
}
|
||||
const positions = calculatePositions(state, pricing);
|
||||
|
||||
return (
|
||||
<Document>
|
||||
<Page size="A4" style={styles.page}>
|
||||
<View style={styles.header}>
|
||||
<View>
|
||||
<Text style={styles.brand}>marc mintel</Text>
|
||||
<Text style={{ fontSize: 8, color: '#64748b', marginTop: 4 }}>Digital Systems & Design</Text>
|
||||
</View>
|
||||
<View style={styles.quoteInfo}>
|
||||
<Text style={styles.quoteTitle}>Kostenschätzung</Text>
|
||||
<Text style={styles.quoteDate}>{date}</Text>
|
||||
<Text style={[styles.quoteDate, { marginTop: 2 }]}>Projekt: {state.projectType === 'website' ? 'Website' : 'Web App'}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<PDFDocument>
|
||||
<PDFPage size="A4" style={styles.page}>
|
||||
<PDFView style={styles.header}>
|
||||
<PDFView style={styles.brandIconContainer}>
|
||||
<PDFText style={styles.brandIconText}>M</PDFText>
|
||||
</PDFView>
|
||||
<PDFView style={styles.quoteInfo}>
|
||||
<PDFText style={styles.quoteTitle}>Kostenschätzung</PDFText>
|
||||
<PDFText style={styles.quoteDate}>{date}</PDFText>
|
||||
<PDFText style={[styles.quoteDate, { marginTop: 4, fontWeight: 'bold', color: '#000000' }]}>
|
||||
Projekt: {state.projectType === 'website' ? 'Website' : 'Web App'}
|
||||
</PDFText>
|
||||
</PDFView>
|
||||
</PDFView>
|
||||
|
||||
<View style={styles.recipientSection}>
|
||||
<Text style={styles.recipientLabel}>Ansprechpartner</Text>
|
||||
<Text style={styles.recipientName}>{state.name || 'Interessent'}</Text>
|
||||
{state.companyName && <Text style={styles.recipientRole}>{state.companyName}</Text>}
|
||||
{state.role && <Text style={styles.recipientRole}>{state.role}</Text>}
|
||||
<Text style={styles.recipientRole}>{state.email}</Text>
|
||||
</View>
|
||||
<PDFView style={styles.section}>
|
||||
<PDFText style={styles.sectionTitle}>Ansprechpartner</PDFText>
|
||||
<PDFView style={styles.recipientGrid}>
|
||||
<PDFView style={styles.recipientItem}>
|
||||
<PDFText style={styles.recipientLabel}>Name</PDFText>
|
||||
<PDFText style={styles.recipientValue}>{state.name || 'Interessent'}</PDFText>
|
||||
</PDFView>
|
||||
{state.companyName && (
|
||||
<PDFView style={styles.recipientItem}>
|
||||
<PDFText style={styles.recipientLabel}>Unternehmen</PDFText>
|
||||
<PDFText style={styles.recipientValue}>{state.companyName}</PDFText>
|
||||
</PDFView>
|
||||
)}
|
||||
{state.email && (
|
||||
<PDFView style={styles.recipientItem}>
|
||||
<PDFText style={styles.recipientLabel}>E-Mail</PDFText>
|
||||
<PDFText style={styles.recipientValue}>{state.email}</PDFText>
|
||||
</PDFView>
|
||||
)}
|
||||
</PDFView>
|
||||
</PDFView>
|
||||
|
||||
<View style={styles.table}>
|
||||
<View style={styles.tableHeader}>
|
||||
<Text style={[styles.headerText, styles.colPos]}>Pos</Text>
|
||||
<Text style={[styles.headerText, styles.colDesc]}>Beschreibung</Text>
|
||||
<Text style={[styles.headerText, styles.colQty]}>Menge</Text>
|
||||
<Text style={[styles.headerText, styles.colPrice]}>Betrag</Text>
|
||||
</View>
|
||||
<PDFView style={styles.table}>
|
||||
<PDFView style={styles.tableHeader}>
|
||||
<PDFText style={[styles.headerText, styles.colPos]}>Pos</PDFText>
|
||||
<PDFText style={[styles.headerText, styles.colDesc]}>Beschreibung</PDFText>
|
||||
<PDFText style={[styles.headerText, styles.colQty]}>Menge</PDFText>
|
||||
<PDFText style={[styles.headerText, styles.colPrice]}>Betrag</PDFText>
|
||||
</PDFView>
|
||||
|
||||
{positions.map((item, i) => (
|
||||
<View key={i} style={styles.tableRow}>
|
||||
<Text style={[styles.posText, styles.colPos]}>{item.pos}</Text>
|
||||
<View style={styles.colDesc}>
|
||||
<Text style={styles.itemTitle}>{item.title}</Text>
|
||||
<Text style={styles.itemDesc}>{item.desc}</Text>
|
||||
</View>
|
||||
<Text style={[styles.posText, styles.colQty]}>{item.qty}</Text>
|
||||
<Text style={[styles.priceText, styles.colPrice]}>
|
||||
<PDFView key={i} style={styles.tableRow}>
|
||||
<PDFText style={[styles.posText, styles.colPos]}>{item.pos.toString().padStart(2, '0')}</PDFText>
|
||||
<PDFView style={styles.colDesc}>
|
||||
<PDFText style={styles.itemTitle}>{item.title}</PDFText>
|
||||
<PDFText style={styles.itemDesc}>{item.desc}</PDFText>
|
||||
</PDFView>
|
||||
<PDFText style={[styles.posText, styles.colQty]}>{item.qty}</PDFText>
|
||||
<PDFText style={[styles.priceText, styles.colPrice]}>
|
||||
{item.price > 0 ? `${item.price.toLocaleString()} €` : 'n. A.'}
|
||||
</Text>
|
||||
</View>
|
||||
</PDFText>
|
||||
</PDFView>
|
||||
))}
|
||||
</View>
|
||||
</PDFView>
|
||||
|
||||
<View style={styles.summarySection}>
|
||||
<View style={styles.summaryTable}>
|
||||
<View style={styles.summaryRow}>
|
||||
<Text style={{ color: '#64748b' }}>Zwischensumme (Netto)</Text>
|
||||
<Text>{totalPrice.toLocaleString()} €</Text>
|
||||
</View>
|
||||
<View style={styles.summaryRow}>
|
||||
<Text style={{ color: '#64748b' }}>Umsatzsteuer (0%)*</Text>
|
||||
<Text>0,00 €</Text>
|
||||
</View>
|
||||
<View style={styles.totalRow}>
|
||||
<Text style={styles.totalLabel}>Gesamtsumme</Text>
|
||||
<Text style={styles.totalValue}>{totalPrice.toLocaleString()} €</Text>
|
||||
</View>
|
||||
<Text style={{ fontSize: 7, color: '#94a3b8', textAlign: 'right', marginTop: -4 }}>
|
||||
*Gemäß § 19 UStG wird keine Umsatzsteuer berechnet.
|
||||
</Text>
|
||||
{state.projectType === 'website' && (
|
||||
<View style={[styles.summaryRow, { marginTop: 15, borderTop: 1, borderTopColor: '#f1f5f9', paddingTop: 10 }]}>
|
||||
<Text style={{ color: '#64748b', fontSize: 9 }}>Betrieb & Hosting</Text>
|
||||
<Text style={{ fontSize: 9, fontWeight: 'bold' }}>{monthlyPrice.toLocaleString()} € / Monat</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
<PDFView style={styles.summaryContainer}>
|
||||
<PDFView style={styles.summaryCard}>
|
||||
<PDFView style={styles.summaryRow}>
|
||||
<PDFText style={styles.summaryLabel}>Zwischensumme (Netto)</PDFText>
|
||||
<PDFText style={styles.summaryValue}>{totalPrice.toLocaleString()} €</PDFText>
|
||||
</PDFView>
|
||||
<PDFView style={styles.totalRow}>
|
||||
<PDFText style={styles.totalLabel}>Gesamtsumme</PDFText>
|
||||
<PDFText style={styles.totalValue}>{totalPrice.toLocaleString()} €</PDFText>
|
||||
</PDFView>
|
||||
</PDFView>
|
||||
</PDFView>
|
||||
|
||||
<View style={styles.footer}>
|
||||
<Text>marc@mintel.me</Text>
|
||||
<Text>mintel.me</Text>
|
||||
<Text>Digital Systems & Design</Text>
|
||||
</View>
|
||||
<Text style={styles.pageNumber} render={({ pageNumber, totalPages }) => `Seite ${pageNumber} von ${totalPages}`} fixed />
|
||||
</Page>
|
||||
{state.projectType === 'website' && (
|
||||
<PDFView style={styles.hostingBox}>
|
||||
<PDFText style={{ color: '#666666', fontSize: 8, fontWeight: 'bold', textTransform: 'uppercase' }}>Betrieb & Hosting</PDFText>
|
||||
<PDFText style={{ fontSize: 10, fontWeight: 'bold', color: '#000000' }}>{monthlyPrice.toLocaleString()} € / Monat</PDFText>
|
||||
</PDFView>
|
||||
)}
|
||||
|
||||
<Page size="A4" style={styles.page}>
|
||||
<View style={styles.header}>
|
||||
<View>
|
||||
<Text style={styles.brand}>marc mintel</Text>
|
||||
</View>
|
||||
<View style={styles.quoteInfo}>
|
||||
<Text style={styles.quoteTitle}>Projektdetails</Text>
|
||||
</View>
|
||||
</View>
|
||||
<PDFView style={styles.footer}>
|
||||
<PDFText style={styles.footerBrand}>marc mintel</PDFText>
|
||||
<PDFView style={styles.footerRight}>
|
||||
<PDFText style={styles.footerContact}>marc@mintel.me</PDFText>
|
||||
<PDFText style={styles.pageNumber} render={({ pageNumber, totalPages }) => `${pageNumber} / ${totalPages}`} fixed />
|
||||
</PDFView>
|
||||
</PDFView>
|
||||
</PDFPage>
|
||||
|
||||
<View style={styles.configSection}>
|
||||
<Text style={styles.configTitle}>Konfiguration & Wünsche</Text>
|
||||
<View style={styles.configGrid}>
|
||||
<PDFPage size="A4" style={styles.page}>
|
||||
<PDFView style={styles.header}>
|
||||
<PDFView style={styles.brandIconContainer}>
|
||||
<PDFText style={styles.brandIconText}>M</PDFText>
|
||||
</PDFView>
|
||||
<PDFView style={styles.quoteInfo}>
|
||||
<PDFText style={styles.quoteTitle}>Projektdetails</PDFText>
|
||||
</PDFView>
|
||||
</PDFView>
|
||||
|
||||
<PDFView style={styles.section}>
|
||||
<PDFText style={styles.sectionTitle}>Konfiguration & Wünsche</PDFText>
|
||||
<PDFView style={styles.configGrid}>
|
||||
{state.projectType === 'website' ? (
|
||||
<>
|
||||
<View style={styles.configItem}>
|
||||
<Text style={styles.configLabel}>Thema</Text>
|
||||
<Text style={styles.configValue}>{state.websiteTopic || 'Nicht angegeben'}</Text>
|
||||
</View>
|
||||
<View style={styles.configItem}>
|
||||
<Text style={styles.configLabel}>Design-Vibe</Text>
|
||||
<Text style={styles.configValue}>{vibeLabels[state.designVibe] || state.designVibe}</Text>
|
||||
</View>
|
||||
<View style={styles.configItem}>
|
||||
<Text style={styles.configLabel}>Farbschema</Text>
|
||||
<Text style={styles.configValue}>{state.colorScheme.join(', ')}</Text>
|
||||
</View>
|
||||
<PDFView style={styles.configItem}>
|
||||
<PDFText style={styles.configLabel}>Thema</PDFText>
|
||||
<PDFText style={styles.configValue}>{state.websiteTopic || 'Nicht angegeben'}</PDFText>
|
||||
</PDFView>
|
||||
<PDFView style={styles.configItem}>
|
||||
<PDFText style={styles.configLabel}>Design-Vibe</PDFText>
|
||||
<PDFText style={styles.configValue}>{VIBE_LABELS[state.designVibe] || state.designVibe}</PDFText>
|
||||
</PDFView>
|
||||
<PDFView style={[styles.configItem, { width: '100%' }]}>
|
||||
<PDFText style={styles.configLabel}>Farbschema</PDFText>
|
||||
<PDFView style={styles.colorGrid}>
|
||||
{state.colorScheme.map((color: string, i: number) => (
|
||||
<PDFView key={i} style={{ alignItems: 'center' }}>
|
||||
<PDFView style={[styles.colorSwatch, { backgroundColor: color }]} />
|
||||
<PDFText style={styles.colorHex}>{color.toUpperCase()}</PDFText>
|
||||
</PDFView>
|
||||
))}
|
||||
</PDFView>
|
||||
</PDFView>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<View style={styles.configItem}>
|
||||
<Text style={styles.configLabel}>Zielgruppe</Text>
|
||||
<Text style={styles.configValue}>{state.targetAudience === 'internal' ? 'Internes Tool' : 'Kunden-Portal'}</Text>
|
||||
</View>
|
||||
<View style={styles.configItem}>
|
||||
<Text style={styles.configLabel}>Plattform</Text>
|
||||
<Text style={styles.configValue}>{state.platformType.toUpperCase()}</Text>
|
||||
</View>
|
||||
<View style={styles.configItem}>
|
||||
<Text style={styles.configLabel}>Sicherheit</Text>
|
||||
<Text style={styles.configValue}>{state.dataSensitivity === 'high' ? 'Sensibel' : 'Standard'}</Text>
|
||||
</View>
|
||||
<View style={styles.configItem}>
|
||||
<Text style={styles.configLabel}>Rollen</Text>
|
||||
<Text style={styles.configValue}>{state.userRoles.join(', ') || 'Keine'}</Text>
|
||||
</View>
|
||||
<PDFView style={styles.configItem}>
|
||||
<PDFText style={styles.configLabel}>Zielgruppe</PDFText>
|
||||
<PDFText style={styles.configValue}>{state.targetAudience === 'internal' ? 'Internes Tool' : 'Kunden-Portal'}</PDFText>
|
||||
</PDFView>
|
||||
<PDFView style={styles.configItem}>
|
||||
<PDFText style={styles.configLabel}>Plattform</PDFText>
|
||||
<PDFText style={styles.configValue}>{state.platformType.toUpperCase()}</PDFText>
|
||||
</PDFView>
|
||||
<PDFView style={styles.configItem}>
|
||||
<PDFText style={styles.configLabel}>Sicherheit</PDFText>
|
||||
<PDFText style={styles.configValue}>{state.dataSensitivity === 'high' ? 'Sensibel' : 'Standard'}</PDFText>
|
||||
</PDFView>
|
||||
<PDFView style={styles.configItem}>
|
||||
<PDFText style={styles.configLabel}>Rollen</PDFText>
|
||||
<PDFText style={styles.configValue}>{state.userRoles.join(', ') || 'Keine'}</PDFText>
|
||||
</PDFView>
|
||||
</>
|
||||
)}
|
||||
<View style={styles.configItem}>
|
||||
<Text style={styles.configLabel}>Mitarbeiter</Text>
|
||||
<Text style={styles.configValue}>{state.employeeCount || 'Nicht angegeben'}</Text>
|
||||
</View>
|
||||
<View style={styles.configItem}>
|
||||
<Text style={styles.configLabel}>Bestehende Website</Text>
|
||||
<Text style={styles.configValue}>{state.existingWebsite || 'Keine'}</Text>
|
||||
</View>
|
||||
<View style={styles.configItem}>
|
||||
<Text style={styles.configLabel}>Bestehende Domain</Text>
|
||||
<Text style={styles.configValue}>{state.existingDomain || 'Keine'}</Text>
|
||||
</View>
|
||||
<View style={styles.configItem}>
|
||||
<Text style={styles.configLabel}>Wunsch-Domain</Text>
|
||||
<Text style={styles.configValue}>{state.wishedDomain || 'Keine'}</Text>
|
||||
</View>
|
||||
<View style={styles.configItem}>
|
||||
<Text style={styles.configLabel}>Zeitplan</Text>
|
||||
<Text style={styles.configValue}>{deadlineLabels[state.deadline] || state.deadline}</Text>
|
||||
</View>
|
||||
<View style={styles.configItem}>
|
||||
<Text style={styles.configLabel}>Assets vorhanden</Text>
|
||||
<Text style={styles.configValue}>{state.assets.map((a: string) => assetLabels[a] || a).join(', ') || 'Keine angegeben'}</Text>
|
||||
</View>
|
||||
<PDFView style={styles.configItem}>
|
||||
<PDFText style={styles.configLabel}>Mitarbeiter</PDFText>
|
||||
<PDFText style={styles.configValue}>{state.employeeCount || 'Nicht angegeben'}</PDFText>
|
||||
</PDFView>
|
||||
<PDFView style={styles.configItem}>
|
||||
<PDFText style={styles.configLabel}>Bestehende Website</PDFText>
|
||||
<PDFText style={styles.configValue}>{state.existingWebsite || 'Keine'}</PDFText>
|
||||
</PDFView>
|
||||
<PDFView style={styles.configItem}>
|
||||
<PDFText style={styles.configLabel}>Bestehende Domain</PDFText>
|
||||
<PDFText style={styles.configValue}>{state.existingDomain || 'Keine'}</PDFText>
|
||||
</PDFView>
|
||||
<PDFView style={styles.configItem}>
|
||||
<PDFText style={styles.configLabel}>Wunsch-Domain</PDFText>
|
||||
<PDFText style={styles.configValue}>{state.wishedDomain || 'Keine'}</PDFText>
|
||||
</PDFView>
|
||||
<PDFView style={styles.configItem}>
|
||||
<PDFText style={styles.configLabel}>Zeitplan</PDFText>
|
||||
<PDFText style={styles.configValue}>{DEADLINE_LABELS[state.deadline] || state.deadline}</PDFText>
|
||||
</PDFView>
|
||||
<PDFView style={styles.configItem}>
|
||||
<PDFText style={styles.configLabel}>Assets vorhanden</PDFText>
|
||||
<PDFText style={styles.configValue}>{state.assets.map((a: string) => ASSET_LABELS[a] || a).join(', ') || 'Keine angegeben'}</PDFText>
|
||||
</PDFView>
|
||||
{state.otherAssets.length > 0 && (
|
||||
<View style={styles.configItem}>
|
||||
<Text style={styles.configLabel}>Weitere Assets</Text>
|
||||
<Text style={styles.configValue}>{state.otherAssets.join(', ')}</Text>
|
||||
</View>
|
||||
<PDFView style={styles.configItem}>
|
||||
<PDFText style={styles.configLabel}>Weitere Assets</PDFText>
|
||||
<PDFText style={styles.configValue}>{state.otherAssets.join(', ')}</PDFText>
|
||||
</PDFView>
|
||||
)}
|
||||
<View style={styles.configItem}>
|
||||
<Text style={styles.configLabel}>Sprachen</Text>
|
||||
<Text style={styles.configValue}>{state.languagesCount} ({state.languagesList.join(', ')})</Text>
|
||||
</View>
|
||||
<PDFView style={styles.configItem}>
|
||||
<PDFText style={styles.configLabel}>Sprachen</PDFText>
|
||||
<PDFText style={styles.configValue}>{state.languagesList.length} ({state.languagesList.join(', ')})</PDFText>
|
||||
</PDFView>
|
||||
{state.projectType === 'website' && (
|
||||
<>
|
||||
<View style={styles.configItem}>
|
||||
<Text style={styles.configLabel}>CMS (Inhaltsverwaltung)</Text>
|
||||
<Text style={styles.configValue}>{state.cmsSetup ? 'Ja' : 'Nein'}</Text>
|
||||
</View>
|
||||
<View style={styles.configItem}>
|
||||
<Text style={styles.configLabel}>Änderungsfrequenz</Text>
|
||||
<Text style={styles.configValue}>
|
||||
<PDFView style={styles.configItem}>
|
||||
<PDFText style={styles.configLabel}>CMS (Inhaltsverwaltung)</PDFText>
|
||||
<PDFText style={styles.configValue}>{state.cmsSetup ? 'Ja' : 'Nein'}</PDFText>
|
||||
</PDFView>
|
||||
<PDFView style={styles.configItem}>
|
||||
<PDFText style={styles.configLabel}>Änderungsfrequenz</PDFText>
|
||||
<PDFText style={styles.configValue}>
|
||||
{state.expectedAdjustments === 'low' ? 'Selten' :
|
||||
state.expectedAdjustments === 'medium' ? 'Regelmäßig' : 'Häufig'}
|
||||
</Text>
|
||||
</View>
|
||||
</PDFText>
|
||||
</PDFView>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
</PDFView>
|
||||
|
||||
{state.socialMedia.length > 0 && (
|
||||
<View style={{ marginTop: 15 }}>
|
||||
<Text style={styles.configLabel}>Social Media Accounts</Text>
|
||||
<PDFView style={{ marginTop: 24, paddingTop: 16, borderTopWidth: 1, borderTopColor: '#eeeeee' }}>
|
||||
<PDFText style={styles.configLabel}>Social Media Accounts</PDFText>
|
||||
{state.socialMedia.map((id: string) => (
|
||||
<Text key={id} style={[styles.configValue, { lineHeight: 1.4 }]}>
|
||||
{socialLabels[id] || id}: {state.socialMediaUrls[id] || 'Keine URL angegeben'}
|
||||
</Text>
|
||||
<PDFText key={id} style={[styles.configValue, { lineHeight: 1.6, color: '#666666', fontWeight: 'normal' }]}>
|
||||
<PDFText style={{ color: '#000000', fontWeight: 'bold' }}>{SOCIAL_LABELS[id] || id}:</PDFText> {state.socialMediaUrls[id] || 'Keine URL angegeben'}
|
||||
</PDFText>
|
||||
))}
|
||||
</View>
|
||||
</PDFView>
|
||||
)}
|
||||
|
||||
{state.designWishes && (
|
||||
<View style={{ marginTop: 15 }}>
|
||||
<Text style={styles.configLabel}>Design-Vorstellungen</Text>
|
||||
<Text style={[styles.configValue, { lineHeight: 1.4 }]}>{state.designWishes}</Text>
|
||||
</View>
|
||||
<PDFView style={{ marginTop: 24, paddingTop: 16, borderTopWidth: 1, borderTopColor: '#eeeeee' }}>
|
||||
<PDFText style={styles.configLabel}>Design-Vorstellungen</PDFText>
|
||||
<PDFText style={[styles.configValue, { lineHeight: 1.6, fontWeight: 'normal', color: '#666666' }]}>{state.designWishes}</PDFText>
|
||||
</PDFView>
|
||||
)}
|
||||
|
||||
{state.references.length > 0 && (
|
||||
<View style={{ marginTop: 15 }}>
|
||||
<Text style={styles.configLabel}>Referenzen</Text>
|
||||
<Text style={[styles.configValue, { lineHeight: 1.4 }]}>{state.references.join('\n')}</Text>
|
||||
</View>
|
||||
<PDFView style={{ marginTop: 24, paddingTop: 16, borderTopWidth: 1, borderTopColor: '#eeeeee' }}>
|
||||
<PDFText style={styles.configLabel}>Referenzen</PDFText>
|
||||
<PDFText style={[styles.configValue, { lineHeight: 1.6, fontWeight: 'normal', color: '#666666' }]}>{state.references.join('\n')}</PDFText>
|
||||
</PDFView>
|
||||
)}
|
||||
|
||||
{state.message && (
|
||||
<View style={{ marginTop: 15 }}>
|
||||
<Text style={styles.configLabel}>Nachricht / Anmerkungen</Text>
|
||||
<Text style={[styles.configValue, { lineHeight: 1.4 }]}>{state.message}</Text>
|
||||
</View>
|
||||
<PDFView style={{ marginTop: 24, paddingTop: 16, borderTopWidth: 1, borderTopColor: '#eeeeee' }}>
|
||||
<PDFText style={styles.configLabel}>Nachricht / Anmerkungen</PDFText>
|
||||
<PDFText style={[styles.configValue, { lineHeight: 1.6, fontWeight: 'normal', color: '#666666' }]}>{state.message}</PDFText>
|
||||
</PDFView>
|
||||
)}
|
||||
</View>
|
||||
</PDFView>
|
||||
|
||||
{qrCodeData && (
|
||||
<View style={styles.qrSection}>
|
||||
<Image src={qrCodeData} style={styles.qrImage} />
|
||||
<Text style={styles.qrText}>QR-Code scannen, um Konfiguration online zu öffnen</Text>
|
||||
</View>
|
||||
<PDFView style={styles.qrContainer}>
|
||||
<PDFImage src={qrCodeData} style={styles.qrImage} />
|
||||
<PDFText style={styles.qrText}>Online öffnen</PDFText>
|
||||
</PDFView>
|
||||
)}
|
||||
|
||||
<View style={styles.footer}>
|
||||
<Text>marc@mintel.me</Text>
|
||||
<Text>mintel.me</Text>
|
||||
<Text>Digital Systems & Design</Text>
|
||||
</View>
|
||||
<Text style={styles.pageNumber} render={({ pageNumber, totalPages }) => `Seite ${pageNumber} von ${totalPages}`} fixed />
|
||||
</Page>
|
||||
</Document>
|
||||
<PDFView style={styles.footer}>
|
||||
<PDFText style={styles.footerBrand}>marc mintel</PDFText>
|
||||
<PDFView style={styles.footerRight}>
|
||||
<PDFText style={styles.footerContact}>marc@mintel.me</PDFText>
|
||||
<PDFText style={styles.pageNumber} render={({ pageNumber, totalPages }) => `${pageNumber} / ${totalPages}`} fixed />
|
||||
</PDFView>
|
||||
</PDFView>
|
||||
</PDFPage>
|
||||
</PDFDocument>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user