mporwoll/frontend.porwoll.de
1
0
Fork 0
mirror of https://github.com/complexcaresolutions/frontend.porwoll.de.git synced 2026-03-17 15:13:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: rewrite ContactFormBlock to use CMS form-builder

Browse source 
- Use submitContactForm() from api.ts instead of raw fetch to /api/contact
- Extract formId from block.form relationship (CMS-configurable)
- Use configurable successMessage from block data
- Add pnpm-workspace.yaml for onlyBuiltDependencies

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
CCS Admin 2026-02-17 16:16:23 +00:00
parent 9ae965452e
commit 582dbfbd12
3 changed files with 24 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
pnpm-lock.yaml
View file

@ -10,7 +10,7 @@ importers:
dependencies:
'@c2s/payload-contracts':
specifier: github:complexcaresolutions/payload-contracts
version: git+https://git@github.com:complexcaresolutions/payload-contracts.git#64847594b2150bfdce09a7bd7f54ad2f52d6f2b7(react@19.2.1)
version: git+https://git@github.com:complexcaresolutions/payload-contracts.git#c168832a128a38ae2c4f87057bc28b1b56b60236(react@19.2.1)
clsx:
specifier: ^2.1.1
version: 2.1.1
@ -134,8 +134,8 @@ packages:
resolution: {integrity: sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==}
engines: {node: '>=6.9.0'}
'@c2s/payload-contracts@git+https://git@github.com:complexcaresolutions/payload-contracts.git#64847594b2150bfdce09a7bd7f54ad2f52d6f2b7':
resolution: {commit: 64847594b2150bfdce09a7bd7f54ad2f52d6f2b7, repo: git@github.com:complexcaresolutions/payload-contracts.git, type: git}
'@c2s/payload-contracts@git+https://git@github.com:complexcaresolutions/payload-contracts.git#c168832a128a38ae2c4f87057bc28b1b56b60236':
resolution: {commit: c168832a128a38ae2c4f87057bc28b1b56b60236, repo: git@github.com:complexcaresolutions/payload-contracts.git, type: git}
version: 1.0.0
peerDependencies:
react: ^19.0.0
@ -2080,7 +2080,7 @@ snapshots:
'@babel/helper-string-parser': 7.27.1
'@babel/helper-validator-identifier': 7.28.5
'@c2s/payload-contracts@git+https://git@github.com:complexcaresolutions/payload-contracts.git#64847594b2150bfdce09a7bd7f54ad2f52d6f2b7(react@19.2.1)':
'@c2s/payload-contracts@git+https://git@github.com:complexcaresolutions/payload-contracts.git#c168832a128a38ae2c4f87057bc28b1b56b60236(react@19.2.1)':
optionalDependencies:
react: 19.2.1

2
pnpm-workspace.yaml Normal file
View file

@ -0,0 +1,2 @@
onlyBuiltDependencies:
- "@c2s/payload-contracts"

35
src/components/blocks/ContactFormBlock.tsx
View file

@ -5,14 +5,21 @@ import { motion } from 'framer-motion'
import { Container } from '../ui/Container'
import { Button } from '../ui/Button'
import { cn } from '@/lib/utils'
import { submitContactForm } from '@/lib/api'
interface ContactFormBlockProps {
block: Record<string, unknown>
}
export function ContactFormBlock({ block }: ContactFormBlockProps) {
const title = (block.title as string) || (block.headline as string) || 'Kontakt'
const subtitle = (block.subtitle as string) || 'Haben Sie Fragen? Schreiben Sie mir.'
const title = (block.headline as string) || 'Kontakt'
const description = (block.description as string) || 'Haben Sie Fragen? Schreiben Sie mir.'
const successText = (block.successMessage as string) || 'Vielen Dank! Ich werde mich schnellstmöglich bei Ihnen melden.'
// Extract formId from the form relationship (can be number or { id: number })
const formRef = block.form as number | { id: number } | undefined
const formId = typeof formRef === 'object' ? formRef?.id : formRef
const [status, setStatus] = useState<'idle' | 'sending' | 'success' | 'error'>('idle')
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
@ -21,22 +28,14 @@ export function ContactFormBlock({ block }: ContactFormBlockProps) {
try {
const formData = new FormData(e.currentTarget)
const response = await fetch('/api/contact', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
name: formData.get('name'),
email: formData.get('email'),
subject: formData.get('subject'),
message: formData.get('message'),
}),
await submitContactForm({
name: formData.get('name') as string,
email: formData.get('email') as string,
subject: formData.get('subject') as string,
message: formData.get('message') as string,
formId: formId || undefined,
})
if (response.ok) {
setStatus('success')
} else {
setStatus('error')
}
} catch {
setStatus('error')
}
@ -73,13 +72,13 @@ export function ContactFormBlock({ block }: ContactFormBlockProps) {
<h2 className="font-heading font-bold text-[1.5em] tracking-[4px] uppercase text-dark mt-0 mb-[30px]">
{title}
</h2>
<p className="text-gray-light">{subtitle}</p>
<p className="text-gray-light">{description}</p>
</header>
{/* Success Message */}
{status === 'success' && (
<div className="bg-success/10 border border-success text-success p-4 mb-8 text-center">
Vielen Dank! Ich werde mich schnellstmöglich bei Ihnen melden.
{successText}
</div>
)}