103 lines
3.6 KiB
TypeScript
103 lines
3.6 KiB
TypeScript
import { useState } from 'react';
|
|
import type { FormEvent } from 'react';
|
|
import { Button } from '@/components/site/button';
|
|
import {
|
|
Field,
|
|
FormSuccess,
|
|
SelectInput,
|
|
TextInput,
|
|
} from '@/components/site/form-field';
|
|
import { common, serviceOptions } from '@/content/common';
|
|
import { useContent } from '@/hooks/use-locale';
|
|
|
|
/**
|
|
* Compact consultation request form.
|
|
*
|
|
* TODO: submissions are not sent anywhere yet; wire this to a Laravel
|
|
* endpoint before going live.
|
|
*/
|
|
export default function ConsultationForm({ idPrefix }: { idPrefix: string }) {
|
|
const t = useContent(common);
|
|
const [submitted, setSubmitted] = useState(false);
|
|
|
|
const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
setSubmitted(true);
|
|
};
|
|
|
|
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 className="flex flex-col gap-3" onSubmit={handleSubmit}>
|
|
<Field id={`${idPrefix}-name`} label={t.form.name} required>
|
|
<TextInput
|
|
id={`${idPrefix}-name`}
|
|
name="name"
|
|
placeholder={t.form.namePlaceholder}
|
|
required
|
|
/>
|
|
</Field>
|
|
<Field
|
|
id={`${idPrefix}-email`}
|
|
label={t.form.email}
|
|
required
|
|
>
|
|
<TextInput
|
|
id={`${idPrefix}-email`}
|
|
name="email"
|
|
type="email"
|
|
placeholder={t.form.emailPlaceholder}
|
|
required
|
|
/>
|
|
</Field>
|
|
<Field
|
|
id={`${idPrefix}-phone`}
|
|
label={t.form.phone}
|
|
required
|
|
>
|
|
<TextInput
|
|
id={`${idPrefix}-phone`}
|
|
name="phone"
|
|
type="tel"
|
|
placeholder="+62 811 xxxx xxxx"
|
|
required
|
|
/>
|
|
</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="send"
|
|
className="mt-2"
|
|
>
|
|
{t.form.submit}
|
|
</Button>
|
|
<p className="text-on-surface-variant text-center text-[11px]">
|
|
{t.form.nda}
|
|
</p>
|
|
</form>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|