127 lines
5.0 KiB
TypeScript
127 lines
5.0 KiB
TypeScript
import { Form } from '@inertiajs/react';
|
|
import { useState } from 'react';
|
|
import { Button } from '@/components/site/button';
|
|
import {
|
|
Field,
|
|
FieldError,
|
|
FormSuccess,
|
|
Honeypot,
|
|
SelectInput,
|
|
TextInput,
|
|
} from '@/components/site/form-field';
|
|
import { common, serviceOptions } from '@/content/common';
|
|
import { useContent } from '@/hooks/use-locale';
|
|
import { store } from '@/routes/consultations';
|
|
|
|
type ConsultationFormProps = {
|
|
idPrefix: string;
|
|
/** Which page the request came from, shown in the admin inbox. */
|
|
source: 'home' | 'services';
|
|
};
|
|
|
|
/** Compact consultation request form, saved to the admin inbox. */
|
|
export default function ConsultationForm({
|
|
idPrefix,
|
|
source,
|
|
}: ConsultationFormProps) {
|
|
const t = useContent(common);
|
|
const [submitted, setSubmitted] = useState(false);
|
|
|
|
return (
|
|
<div className="border-outline-variant/60 bg-surface-container-high flex flex-col gap-4 rounded-2xl border p-6 shadow-xl lg:p-7">
|
|
<div className="flex flex-col">
|
|
<span className="font-display text-on-surface text-base font-bold">
|
|
{t.form.title}
|
|
</span>
|
|
<span className="text-on-surface-variant text-xs">
|
|
{t.form.subtitle}
|
|
</span>
|
|
</div>
|
|
|
|
{submitted ? (
|
|
<FormSuccess
|
|
title={t.form.successTitle}
|
|
message={t.form.successMessage}
|
|
/>
|
|
) : (
|
|
<Form
|
|
{...store.form()}
|
|
options={{ preserveScroll: true }}
|
|
onSuccess={() => setSubmitted(true)}
|
|
className="relative flex flex-col gap-3"
|
|
>
|
|
{({ processing, errors }) => (
|
|
<>
|
|
<input type="hidden" name="source" value={source} />
|
|
<Honeypot />
|
|
<Field
|
|
id={`${idPrefix}-name`}
|
|
label={t.form.name}
|
|
required
|
|
>
|
|
<TextInput
|
|
id={`${idPrefix}-name`}
|
|
name="name"
|
|
placeholder={t.form.namePlaceholder}
|
|
required
|
|
/>
|
|
<FieldError message={errors.name} />
|
|
</Field>
|
|
<Field
|
|
id={`${idPrefix}-email`}
|
|
label={t.form.email}
|
|
required
|
|
>
|
|
<TextInput
|
|
id={`${idPrefix}-email`}
|
|
name="email"
|
|
type="email"
|
|
placeholder={t.form.emailPlaceholder}
|
|
required
|
|
/>
|
|
<FieldError message={errors.email} />
|
|
</Field>
|
|
<Field
|
|
id={`${idPrefix}-phone`}
|
|
label={t.form.phone}
|
|
required
|
|
>
|
|
<TextInput
|
|
id={`${idPrefix}-phone`}
|
|
name="phone"
|
|
type="tel"
|
|
placeholder="+62 811 xxxx xxxx"
|
|
required
|
|
/>
|
|
<FieldError message={errors.phone} />
|
|
</Field>
|
|
<Field
|
|
id={`${idPrefix}-service`}
|
|
label={t.form.service}
|
|
>
|
|
<SelectInput
|
|
id={`${idPrefix}-service`}
|
|
name="service"
|
|
options={serviceOptions(t)}
|
|
/>
|
|
</Field>
|
|
<Button
|
|
type="submit"
|
|
size="block"
|
|
icon={processing ? 'progress_activity' : 'send'}
|
|
disabled={processing}
|
|
className="mt-2"
|
|
>
|
|
{t.form.submit}
|
|
</Button>
|
|
<p className="text-on-surface-variant text-center text-[11px]">
|
|
{t.form.nda}
|
|
</p>
|
|
</>
|
|
)}
|
|
</Form>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|