Probindo/web-probindo
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Admin Panel
tests / ci (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
afriadirahman
2026-09-29 14:57:37 +07:00
parent 04fbddba13
commit 8c6dad2a31
94 changed files with 4864 additions and 1151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/site/consultation-form.tsx
+91 -67
View File
@@ -1,30 +1,32 @@
import { Form } from '@inertiajs/react';
import { useState } from 'react';
import type { FormEvent } 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';
/**
* 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 }) {
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);
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">
@@ -42,60 +44,82 @@ export default function ConsultationForm({ idPrefix }: { idPrefix: string }) {
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>
<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>
);