121 lines
3.5 KiB
TypeScript
121 lines
3.5 KiB
TypeScript
import { useEffect, useMemo, useState } from "preact/hooks";
|
|
|
|
interface PropertyItem {
|
|
id: string;
|
|
title?: string | null;
|
|
address_1?: string | null;
|
|
city?: string | null;
|
|
state?: string | null;
|
|
}
|
|
|
|
interface GuestOnboardingDialogProps {
|
|
properties: PropertyItem[];
|
|
onClose?: () => void;
|
|
defaultRole?: "tenant" | "landlord";
|
|
}
|
|
|
|
export default function GuestOnboardingDialog(
|
|
{ properties, onClose, defaultRole }: GuestOnboardingDialogProps,
|
|
) {
|
|
const [role, setRole] = useState<"tenant" | "landlord" | "">(
|
|
defaultRole ?? "",
|
|
);
|
|
const [propertyId, setPropertyId] = useState<string>("");
|
|
|
|
const canSubmit = useMemo(() => {
|
|
if (role === "landlord") return true;
|
|
if (role === "tenant") return !!propertyId;
|
|
return false;
|
|
}, [role, propertyId]);
|
|
|
|
useEffect(() => {
|
|
if (role !== "tenant") setPropertyId("");
|
|
}, [role]);
|
|
|
|
return (
|
|
<div class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-30 z-50">
|
|
<form
|
|
method="POST"
|
|
class="bg-white p-6 rounded shadow-lg w-full max-w-md space-y-4"
|
|
>
|
|
<h3 class="text-xl font-bold">Welcome! Let's get you set up</h3>
|
|
<p class="text-sm text-gray-600">
|
|
Please select how you'll use the app.
|
|
</p>
|
|
|
|
<div class="space-y-2">
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input
|
|
type="radio"
|
|
name="role"
|
|
value="tenant"
|
|
checked={role === "tenant"}
|
|
onChange={() => setRole("tenant")}
|
|
/>
|
|
<span>I'm a Tenant</span>
|
|
</label>
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input
|
|
type="radio"
|
|
name="role"
|
|
value="landlord"
|
|
checked={role === "landlord"}
|
|
onChange={() => setRole("landlord")}
|
|
/>
|
|
<span>I'm a Landlord</span>
|
|
</label>
|
|
</div>
|
|
|
|
{role === "tenant" && (
|
|
<div class="space-y-1">
|
|
<label for="property_id" class="text-sm font-medium text-gray-700">
|
|
Select your property
|
|
</label>
|
|
<select
|
|
id="property_id"
|
|
name="property_id"
|
|
required
|
|
class="border p-2 rounded w-full"
|
|
value={propertyId}
|
|
onChange={(e) =>
|
|
setPropertyId((e.target as HTMLSelectElement).value)}
|
|
>
|
|
<option value="" disabled>Select a property…</option>
|
|
{properties?.map((p) => (
|
|
<option key={p.id} value={p.id}>
|
|
{p.title || p.address_1 || "Property"}
|
|
{p.city ? `, ${p.city}` : ""}
|
|
{p.state ? `, ${p.state}` : ""}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
)}
|
|
|
|
<div class="flex justify-end gap-2 pt-2">
|
|
<button
|
|
type="button"
|
|
class="px-4 py-2 rounded border"
|
|
onClick={onClose}
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
name="sender"
|
|
value="guest_onboarding"
|
|
class={`px-4 py-2 rounded text-white ${
|
|
canSubmit
|
|
? "bg-blue-600 hover:bg-blue-700"
|
|
: "bg-gray-400 cursor-not-allowed"
|
|
}`}
|
|
disabled={!canSubmit}
|
|
>
|
|
Continue
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|