110 lines
4.0 KiB
TypeScript
110 lines
4.0 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 { serviceOptions } from '@/data/site';
|
|
|
|
/**
|
|
* 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 [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">
|
|
Jadwalkan Konsultasi IT
|
|
</span>
|
|
<span className="text-on-surface-variant text-xs">
|
|
Konfirmasi langsung oleh Lead Architect PAJ dalam 2 jam
|
|
kerja.
|
|
</span>
|
|
</div>
|
|
|
|
{submitted ? (
|
|
<FormSuccess
|
|
title="Permintaan Terkirim!"
|
|
message="Tim Lead Consultant PT Probindo Artika Jaya akan segera menghubungi kontak Anda untuk konfirmasi jadwal sesi konsultasi."
|
|
/>
|
|
) : (
|
|
<form className="flex flex-col gap-3" onSubmit={handleSubmit}>
|
|
<Field
|
|
id={`${idPrefix}-name`}
|
|
label="Nama Lengkap & Perusahaan"
|
|
required
|
|
>
|
|
<TextInput
|
|
id={`${idPrefix}-name`}
|
|
name="name"
|
|
placeholder="Nama Anda (PT ...)"
|
|
required
|
|
/>
|
|
</Field>
|
|
<Field
|
|
id={`${idPrefix}-email`}
|
|
label="Email Perusahaan / Kantor"
|
|
required
|
|
>
|
|
<TextInput
|
|
id={`${idPrefix}-email`}
|
|
name="email"
|
|
type="email"
|
|
placeholder="nama@perusahaan.co.id"
|
|
required
|
|
/>
|
|
</Field>
|
|
<Field
|
|
id={`${idPrefix}-phone`}
|
|
label="No. WhatsApp / Telepon"
|
|
required
|
|
>
|
|
<TextInput
|
|
id={`${idPrefix}-phone`}
|
|
name="phone"
|
|
type="tel"
|
|
placeholder="+62 811 xxxx xxxx"
|
|
required
|
|
/>
|
|
</Field>
|
|
<Field
|
|
id={`${idPrefix}-service`}
|
|
label="Layanan Yang Dibutuhkan"
|
|
>
|
|
<SelectInput
|
|
id={`${idPrefix}-service`}
|
|
name="service"
|
|
options={serviceOptions}
|
|
/>
|
|
</Field>
|
|
<Button
|
|
type="submit"
|
|
size="block"
|
|
icon="send"
|
|
className="mt-2"
|
|
>
|
|
Kirim Permintaan Konsultasi
|
|
</Button>
|
|
<p className="text-on-surface-variant text-center text-[11px]">
|
|
Non-Disclosure Agreement (NDA) dapat ditandatangani
|
|
sebelum audit teknis.
|
|
</p>
|
|
</form>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|