rhf-address-field

1'use client';
2 
3import type { Lens } from '@hookform/lenses';
4import { Loader2, MapPin } from 'lucide-react';
5import * as React from 'react';
6import { useController } from 'react-hook-form';
7import { z } from 'zod';
8import { getPlaceDetails, getPlacesAutocomplete } from '@/actions/shuip/places';
9import { Command, CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/components/ui/command';
10import { Field, FieldError, FieldLabel } from '@/components/ui/field';
11import { Input } from '@/components/ui/input';
12import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
13import { cn } from '@/lib/utils';
14 
15const DEFAULT_COUNTRY = 'US';
16const LANGUAGE_RESULT = 'en';
17const DEBOUNCE_TIME = 300;
18 
19export const addressSchema = z.object({
20  street: z.string().min(1, 'Street is required'),
21  city: z.string().min(1, 'City is required'),
22  postalCode: z.string().min(1, 'Postal code is required'),
23  country: z.string().min(1, 'Country is required'),
24  fullAddress: z.string().min(1, 'Address is required'),
25  placeId: z.string().optional(),
26});
27 
28export type AddressData = z.infer<typeof addressSchema>;
29 
30interface AddressSuggestion {
31  placeId: string;
32  description: string;
33  mainText: string;
34  secondaryText: string;
35  types: string[];
36}
37 
38export interface AddressFieldProps extends Omit<React.ComponentProps<typeof Input>, 'value' | 'onChange'> {
39  lens: Lens<AddressData>;
40  label?: string;
41  placeholder?: string;
42  description?: string;
43  country?: string;
44}
45 
46export function AddressField({
47  lens,
48  label = 'Address',
49  placeholder = 'Enter your address',
50  description,
51  country = DEFAULT_COUNTRY,
52  ...props
53}: AddressFieldProps) {
54  const fullAddress = useController(lens.focus('fullAddress').interop());
55  const street = useController(lens.focus('street').interop());
56  const city = useController(lens.focus('city').interop());
57  const postalCode = useController(lens.focus('postalCode').interop());
58  const countryField = useController(lens.focus('country').interop());
59  const placeId = useController(lens.focus('placeId').interop());
60 
61  const [searchQuery, setSearchQuery] = React.useState('');
62  const [suggestions, setSuggestions] = React.useState<AddressSuggestion[]>([]);
63  const [showSuggestions, setShowSuggestions] = React.useState(false);
64  const [selectedIndex, setSelectedIndex] = React.useState(-1);
65  const [isPending, startTransition] = React.useTransition();
66  const debounceTimerRef = React.useRef<NodeJS.Timeout | null>(null);
67// … truncated