417 lines
14 KiB
TypeScript
417 lines
14 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState } from 'react'
|
|
import type { FDContactFormBlock as FDContactFormBlockProps } from '@/payload-types'
|
|
import type { Media } from '@/payload-types'
|
|
import { FDImage } from '@/components/FDImage'
|
|
import { FDButton } from '@/components/FDButton'
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Theme maps */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
const sectionBgMap: Record<string, string> = {
|
|
white: 'bg-white dark:bg-fd-navy',
|
|
gray: 'bg-fd-gray-light dark:bg-fd-navy',
|
|
navy: 'bg-fd-navy',
|
|
navyGradient: 'bg-gradient-to-br from-fd-navy via-[#153350] to-fd-navy',
|
|
}
|
|
|
|
const isExplicitDark = (bg: string) => bg === 'navy' || bg === 'navyGradient'
|
|
|
|
const cardRadius = 'rounded-[32px] md:rounded-[50px] lg:rounded-[70px]'
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Component */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
export const FDContactFormBlockComponent: React.FC<FDContactFormBlockProps> = ({
|
|
heading,
|
|
description,
|
|
form: formRelation,
|
|
submitText = 'Skicka förfrågan',
|
|
privacyText,
|
|
privacyLinkText,
|
|
privacyLinkUrl,
|
|
sideImage,
|
|
sectionBackground = 'white',
|
|
layout = 'standard',
|
|
externalApi,
|
|
anchorId,
|
|
}) => {
|
|
const [formData, setFormData] = useState<Record<string, string>>({})
|
|
const [status, setStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle')
|
|
|
|
const media = sideImage as Media | undefined
|
|
const hasSideImage = layout === 'withImage' && Boolean(media?.url)
|
|
const dark = isExplicitDark(sectionBackground || 'white')
|
|
const sectionBg = sectionBgMap[sectionBackground || 'white']
|
|
const isCard = layout === 'card'
|
|
|
|
const form = formRelation && typeof formRelation === 'object' ? formRelation : null
|
|
const formId = form ? form.id : (formRelation ?? null)
|
|
|
|
/* ---- Handlers ---- */
|
|
|
|
const handleChange = (name: string, value: string) => {
|
|
setFormData((prev) => ({ ...prev, [name]: value }))
|
|
}
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
if (!formId) return
|
|
|
|
setStatus('sending')
|
|
try {
|
|
const res = await fetch('/api/form-submissions', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
form: formId,
|
|
submissionData: Object.entries(formData).map(([field, value]) => ({ field, value })),
|
|
}),
|
|
})
|
|
|
|
if (externalApi?.enabled && externalApi?.endpoint) {
|
|
const headers: Record<string, string> = { 'Content-Type': 'application/json' }
|
|
if (externalApi.authToken) headers['Authorization'] = `Bearer ${externalApi.authToken}`
|
|
fetch(externalApi.endpoint, {
|
|
method: 'POST',
|
|
headers,
|
|
body: JSON.stringify({
|
|
formId,
|
|
formName: form?.title || '',
|
|
data: formData,
|
|
submittedAt: new Date().toISOString(),
|
|
}),
|
|
}).catch(() => {})
|
|
}
|
|
|
|
setStatus(res.ok ? 'sent' : 'error')
|
|
} catch {
|
|
setStatus('error')
|
|
}
|
|
}
|
|
|
|
/* ---- Input styles ---- */
|
|
|
|
const inputBase = 'w-full rounded-xl px-4 py-3 font-joey text-base outline-none transition-all'
|
|
|
|
const inputClass = dark
|
|
? `${inputBase} bg-white/10 text-white placeholder:text-white/40 border border-white/20 focus:ring-2 focus:ring-fd-yellow/30 focus:bg-white/15 focus:border-fd-yellow/50`
|
|
: `${inputBase} bg-gray-100 text-fd-navy placeholder:text-fd-navy/40 focus:ring-2 focus:ring-fd-navy/20 focus:bg-white dark:bg-white/10 dark:text-white dark:placeholder:text-white/40 dark:border dark:border-white/20 dark:focus:ring-fd-yellow/30 dark:focus:bg-white/15`
|
|
|
|
const checkboxClass = dark
|
|
? 'w-5 h-5 rounded border-white/30 text-fd-yellow focus:ring-fd-yellow/30'
|
|
: 'w-5 h-5 rounded border-gray-300 text-fd-navy focus:ring-fd-navy/20 dark:border-white/30 dark:text-fd-yellow dark:focus:ring-fd-yellow/30'
|
|
|
|
/* ---- Text color helpers ---- */
|
|
|
|
const headingColor = dark ? 'text-fd-yellow' : 'text-fd-navy dark:text-fd-yellow'
|
|
const bodyColor = dark ? 'text-white/80' : 'text-fd-navy/80 dark:text-white/80'
|
|
const labelColor = dark ? 'text-white' : 'text-fd-navy dark:text-white'
|
|
const mutedColor = dark ? 'text-white/50' : 'text-fd-navy/60 dark:text-white/50'
|
|
const errorColor = dark ? 'text-red-300' : 'text-red-600 dark:text-red-300'
|
|
const requiredColor = dark ? 'text-fd-yellow' : 'text-fd-navy dark:text-fd-yellow'
|
|
const linkColor = dark
|
|
? 'underline underline-offset-2 hover:text-fd-yellow transition-colors'
|
|
: 'underline underline-offset-2 hover:text-fd-navy dark:hover:text-fd-yellow transition-colors'
|
|
|
|
/* ---- Field renderer ---- */
|
|
|
|
const renderFormField = (field: any) => {
|
|
const blockType = field.blockType
|
|
const name = field.name || field.label?.toLowerCase().replace(/\s+/g, '-') || ''
|
|
const label = field.label || ''
|
|
const required = field.required || false
|
|
const width = field.width ? Number(field.width) : 100
|
|
|
|
const input = (() => {
|
|
switch (blockType) {
|
|
case 'textarea':
|
|
return (
|
|
<textarea
|
|
name={name}
|
|
required={required}
|
|
rows={4}
|
|
className={`${inputClass} resize-y`}
|
|
value={formData[name] || ''}
|
|
onChange={(e) => handleChange(name, e.target.value)}
|
|
/>
|
|
)
|
|
case 'select':
|
|
return (
|
|
<select
|
|
name={name}
|
|
required={required}
|
|
className={inputClass}
|
|
value={formData[name] || ''}
|
|
onChange={(e) => handleChange(name, e.target.value)}
|
|
>
|
|
<option value="">Välj...</option>
|
|
{field.options?.map((opt: any) => (
|
|
<option key={opt.value} value={opt.value}>{opt.label}</option>
|
|
))}
|
|
</select>
|
|
)
|
|
case 'email':
|
|
return (
|
|
<input
|
|
type="email"
|
|
name={name}
|
|
required={required}
|
|
className={inputClass}
|
|
placeholder={field.placeholder || ''}
|
|
value={formData[name] || ''}
|
|
onChange={(e) => handleChange(name, e.target.value)}
|
|
/>
|
|
)
|
|
case 'number':
|
|
return (
|
|
<input
|
|
type="number"
|
|
name={name}
|
|
required={required}
|
|
className={inputClass}
|
|
value={formData[name] || ''}
|
|
onChange={(e) => handleChange(name, e.target.value)}
|
|
/>
|
|
)
|
|
case 'checkbox':
|
|
return (
|
|
<label className="flex items-center gap-3 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
name={name}
|
|
required={required}
|
|
className={checkboxClass}
|
|
checked={formData[name] === 'true'}
|
|
onChange={(e) => handleChange(name, e.target.checked ? 'true' : 'false')}
|
|
/>
|
|
<span className={`font-joey text-sm ${labelColor}`}>{label}</span>
|
|
</label>
|
|
)
|
|
case 'country':
|
|
case 'state':
|
|
case 'text':
|
|
default:
|
|
return (
|
|
<input
|
|
type="text"
|
|
name={name}
|
|
required={required}
|
|
className={inputClass}
|
|
placeholder={field.placeholder || ''}
|
|
value={formData[name] || ''}
|
|
onChange={(e) => handleChange(name, e.target.value)}
|
|
/>
|
|
)
|
|
}
|
|
})()
|
|
|
|
if (blockType === 'checkbox') return { element: input, width }
|
|
|
|
return {
|
|
element: (
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className={`font-joey text-sm md:text-base ${labelColor}`}>
|
|
{label}
|
|
{required && <span className={requiredColor}> *</span>}
|
|
</label>
|
|
{input}
|
|
</div>
|
|
),
|
|
width,
|
|
}
|
|
}
|
|
|
|
/* ---- Fields layout ---- */
|
|
|
|
const renderFields = () => {
|
|
if (!form?.fields) return null
|
|
|
|
const elements: React.ReactNode[] = []
|
|
let i = 0
|
|
const fields = form.fields
|
|
|
|
while (i < fields.length) {
|
|
const field = fields[i]
|
|
|
|
if (field.blockType === 'message') {
|
|
elements.push(<div key={i} className={`font-joey text-sm ${mutedColor}`} />)
|
|
i++
|
|
continue
|
|
}
|
|
|
|
const { element, width } = renderFormField(field)
|
|
const isHalf = width <= 50
|
|
|
|
if (isHalf) {
|
|
const nextField = i + 1 < fields.length ? fields[i + 1] : null
|
|
const nextResult =
|
|
nextField && nextField.blockType !== 'message' ? renderFormField(nextField) : null
|
|
const nextIsHalf = nextResult && nextResult.width <= 50
|
|
|
|
if (nextIsHalf && nextResult) {
|
|
elements.push(
|
|
<div key={i} className="grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-6">
|
|
{element}
|
|
{nextResult.element}
|
|
</div>,
|
|
)
|
|
i += 2
|
|
continue
|
|
}
|
|
}
|
|
|
|
elements.push(
|
|
<div key={i} className={isHalf ? 'w-full sm:w-1/2' : 'w-full'}>
|
|
{element}
|
|
</div>,
|
|
)
|
|
i++
|
|
}
|
|
|
|
return elements
|
|
}
|
|
|
|
/* ---- Success state ---- */
|
|
|
|
if (status === 'sent') {
|
|
return (
|
|
<section id={anchorId || undefined} className={`w-full py-16 md:py-20 lg:py-[99px] ${sectionBg}`}>
|
|
<div className="max-w-[1200px] mx-auto px-6 md:px-8 text-center">
|
|
<div className={`inline-flex items-center justify-center w-16 h-16 rounded-full mb-6 ${dark ? 'bg-fd-yellow/20' : 'bg-fd-mint/20 dark:bg-fd-yellow/20'}`}>
|
|
<svg className={`w-8 h-8 ${dark ? 'text-fd-yellow' : 'text-fd-mint dark:text-fd-yellow'}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
{/* Priority #6: Use fluid token instead of hardcoded sizes */}
|
|
<h2 className={`font-joey-heavy text-fd-h1 mb-4 ${headingColor}`}>Tack!</h2>
|
|
<p className={`font-joey text-lg ${bodyColor}`}>
|
|
Vi har tagit emot din förfrågan och återkommer så snart vi kan.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
/* ---- Empty state ---- */
|
|
|
|
if (!form) {
|
|
return (
|
|
<section className={`w-full py-16 md:py-20 lg:py-[99px] ${sectionBg}`}>
|
|
<div className="max-w-[1200px] mx-auto px-6 md:px-8 text-center">
|
|
<p className={`font-joey ${mutedColor}`}>Inget formulär valt.</p>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
/* ---- Form content ---- */
|
|
|
|
const formContent = (
|
|
<>
|
|
{heading && (
|
|
/* Priority #6: Use fluid token text-fd-h1 instead of hardcoded text-3xl/4xl/5xl */
|
|
<h2 className={`font-joey-heavy text-fd-h1 leading-tight mb-3 ${headingColor}`}>
|
|
{heading}
|
|
</h2>
|
|
)}
|
|
{description && (
|
|
<p className={`font-joey text-base md:text-lg mb-8 ${bodyColor}`}>{description}</p>
|
|
)}
|
|
|
|
<form onSubmit={handleSubmit} className="flex flex-col gap-5">
|
|
{renderFields()}
|
|
|
|
<div className="mt-2">
|
|
<FDButton
|
|
as="button"
|
|
type="submit"
|
|
variant="primary"
|
|
onDark={dark}
|
|
disabled={status === 'sending'}
|
|
>
|
|
{status === 'sending' ? 'Skickar...' : submitText}
|
|
</FDButton>
|
|
</div>
|
|
|
|
{status === 'error' && (
|
|
<p className={`font-joey text-sm ${errorColor}`}>
|
|
Något gick fel. Försök igen eller kontakta oss direkt.
|
|
</p>
|
|
)}
|
|
|
|
{privacyText && (
|
|
<p className={`font-joey text-xs md:text-sm leading-relaxed mt-2 ${mutedColor}`}>
|
|
{privacyText}{' '}
|
|
{privacyLinkText && privacyLinkUrl && (
|
|
<>
|
|
Läs mer i vår{' '}
|
|
<a href={privacyLinkUrl} className={linkColor}>
|
|
{privacyLinkText}
|
|
</a>
|
|
.
|
|
</>
|
|
)}
|
|
</p>
|
|
)}
|
|
</form>
|
|
</>
|
|
)
|
|
|
|
/* ---- Layout: Card ---- */
|
|
|
|
if (isCard) {
|
|
return (
|
|
<section className={`w-full py-16 md:py-20 lg:py-[99px] ${sectionBg}`}>
|
|
<div className="max-w-[1200px] mx-auto px-6 md:px-8">
|
|
<div
|
|
className={`max-w-[720px] mx-auto p-8 md:p-12 ${cardRadius} ${
|
|
dark
|
|
? 'bg-white/5 border border-white/10 backdrop-blur-sm'
|
|
: 'bg-white shadow-lg border border-gray-100 dark:bg-white/5 dark:border-white/10 dark:backdrop-blur-sm'
|
|
}`}
|
|
>
|
|
{formContent}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
/* ---- Layout: With image ---- */
|
|
|
|
if (hasSideImage) {
|
|
return (
|
|
<section className={`w-full py-16 md:py-20 lg:py-[99px] ${sectionBg}`}>
|
|
<div className="max-w-[1200px] mx-auto px-6 md:px-8">
|
|
<div className="flex flex-col lg:flex-row gap-10 lg:gap-16 items-start">
|
|
<div className="flex-1">{formContent}</div>
|
|
<div className="hidden lg:block flex-shrink-0">
|
|
<FDImage
|
|
media={media!}
|
|
size="medium"
|
|
className="w-[380px] h-auto max-h-[560px] object-cover rounded-[32px] md:rounded-[50px] lg:rounded-[70px]"
|
|
sizes="380px"
|
|
fallbackAlt={heading || ''}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
/* ---- Layout: Standard ---- */
|
|
|
|
return (
|
|
<section className={`w-full py-16 md:py-20 lg:py-[99px] ${sectionBg}`}>
|
|
<div className="max-w-[1200px] mx-auto px-6 md:px-8">
|
|
<div className="max-w-[800px]">{formContent}</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|