"use client"; import * as React from "react"; import type { Map as MapboxMap } from "mapbox-gl"; import { TextBox } from "@/registry/berlin/circle-ui/form"; export type SupportedLocale = "en" | "de"; export interface Address { address?: string; address2?: string; city?: string; postal_code?: string; country?: string; country_code?: string; province?: string; } type AddressAutofillResult = { features?: Array<{ properties?: { address_line1?: string; postcode?: string; place?: string; country?: string; }; }>; }; type AddressAutofillInputProps = { label: string; name: string; onChange?: React.ChangeEventHandler; onBlur: React.FocusEventHandler; value?: string; className?: string; required?: boolean; placeholder?: string; accessToken?: string; onAddressSelect?: (address: AddressAutofillResult) => void; }; const labels = { en: { address: "Address", enterManually: "Enter manually", form: { address: "Address", address2: "Address 2", postalCode: "Postal Code", city: "City", country: "Country" } }, de: { address: "Adresse", enterManually: "Manuell eingeben", form: { address: "Adresse", address2: "Adresse 2", postalCode: "Postleitzahl", city: "Stadt", country: "Land" } } } satisfies Record< SupportedLocale, { address: string; enterManually: string; form: { address: string; address2: string; postalCode: string; city: string; country: string; }; } >; const styles = { formWrapper: { display: "flex", flexDirection: "column", gap: "1rem", } satisfies React.CSSProperties, formRow: { display: "flex", flexDirection: "row", gap: "1rem", width: "100%", } satisfies React.CSSProperties, manualAddressButton: { color: "var(--Black, #000)", fontFamily: "\"Be Vietnam Pro\"", cursor: "pointer", textDecoration: "underline", textAlign: "left", fontSize: "14px", marginTop: "8px", background: "transparent", border: "0", padding: "0", } satisfies React.CSSProperties, autofillInput: { padding: "12px", borderRadius: "8px", border: "1px solid rgba(0, 0, 0, 0.10)", background: "var(--White, #FFF)", fontSize: "16px", lineHeight: "24px", width: "100%", } satisfies React.CSSProperties, autofillWrapper: { display: "flex", flexDirection: "column", gap: "1rem", width: "100%", } satisfies React.CSSProperties, }; function extractAddressFromMapboxFeatureCollection( featureCollection: AddressAutofillResult, ) { const features = featureCollection.features; if (!features || features.length === 0) { return null; } const feature = features[0]; if (!feature?.properties) { return null; } const address = feature.properties.address_line1; const postalCode = feature.properties.postcode; const city = feature.properties.place; const country = feature.properties.country; return { address, postal_code: postalCode, city, country } satisfies Address; } function getMapboxToken(accessToken?: string) { const runtime = globalThis as typeof globalThis & { process?: { env?: { NEXT_PUBLIC_MAPBOX_TOKEN?: string; }; }; }; return accessToken || runtime.process?.env?.NEXT_PUBLIC_MAPBOX_TOKEN || ""; } function AddressAutofillInput({ name, onChange, onBlur, value, className = "", required = false, placeholder = "", accessToken, onAddressSelect, }: AddressAutofillInputProps) { const mapboxToken = getMapboxToken(accessToken); const [MapboxAddressAutofill, setMapboxAddressAutofill] = React.useState | null>(null); React.useEffect(() => { let isMounted = true; void import("@mapbox/search-js-react") .then((module) => { if (isMounted) { setMapboxAddressAutofill( () => module.AddressAutofill as React.ComponentType, ); } }) .catch(() => { if (isMounted) { setMapboxAddressAutofill(null); } }); return () => { isMounted = false; }; }, []); const handleRetrieve = (result: AddressAutofillResult) => { onAddressSelect?.(result); }; const input = ( ); if (!MapboxAddressAutofill || !mapboxToken) { return

{input}

; } return (

{input}

); } export interface AutoAddressInputsProps { locale?: SupportedLocale; accessToken?: string; onSelectAddress?: (address: Address) => void; } export function AutoAddressInputs({ locale = "en", accessToken, onSelectAddress }: AutoAddressInputsProps) { const handleSelection = (value: AddressAutofillResult) => { const address = extractAddressFromMapboxFeatureCollection(value); if (address) { onSelectAddress?.(address); } }; return ( {}} onAddressSelect={handleSelection} required /> ); } export interface ManualAddressInputsProps { value?: Address; locale?: SupportedLocale; onChange?: (address: Address) => void; } export function ManualAddressInputs({ value, locale = "en", onChange }: ManualAddressInputsProps) { const handleChange = (event: React.ChangeEvent) => { const { name } = event.target; onChange?.({ ...(value ?? {}), [name]: event.target.value }); }; return ( <>

); } export interface AddressInputProps extends ManualAddressInputsProps { accessToken?: string; } export function AddressInput({ value, onChange, locale = "de", accessToken }: AddressInputProps) { const [showManualFields, setShowManualFields] = React.useState(false); React.useEffect(() => { if (value?.postal_code) { setShowManualFields(true); } }, [value]); return (

{showManualFields ? ( ) : (

)}

); }

Installation

About

Usage

Dependencies

Source