@fluid-app/portal-sdk 0.1.248 → 0.1.250

package/dist/{fluid-pay-api-adapter-CJ7-I8k-.mjs → AddressAutocompleteInput-Bdsv2iFU.mjs}

@@ -1,5 +1,6 @@
+import { n as useAddressAutocompleteApi } from "./api-context-3GmfqvIB.mjs";
 import { t as parseApiErrors } from "./parse-api-errors-CVZhXH-a.mjs";
-import { $ as DropdownMenuSeparator, A as Select, An as Accordion, At as CardTitle, C as Skeleton, Dn as Button, Et as CardContent, Fn as cn, J as DropdownMenuContent, K as Label, L as Input, M as SelectItem, Mn as AccordionItem, N as SelectTrigger, Nn as AccordionTrigger, P as SelectValue, Pn as useZodForm, Tt as CardAction, Y as DropdownMenuItem, _n as AvatarFallback, at as DialogClose, b as fluidToast, ct as DialogFooter, ft as DialogTitle, gn as Avatar, it as Dialog, j as SelectContent, jn as AccordionContent, kt as CardHeader, lt as DialogHeader, ot as DialogContent, q as DropdownMenu, rt as DropdownMenuTrigger, s as Textarea, wt as Card } from "./src-pgBBOcJa.mjs";
+import { $ as DropdownMenuSeparator, A as Select, At as CardTitle, C as Skeleton, Et as CardContent, Fn as AccordionTrigger, In as useZodForm, J as DropdownMenuContent, K as Label, L as Input, Ln as cn, M as SelectItem, Mn as Accordion, N as SelectTrigger, Nn as AccordionContent, P as SelectValue, Pn as AccordionItem, Tt as CardAction, Y as DropdownMenuItem, at as DialogClose, b as fluidToast, ct as DialogFooter, ft as DialogTitle, it as Dialog, j as SelectContent, kn as Button, kt as CardHeader, lt as DialogHeader, ot as DialogContent, q as DropdownMenu, rt as DropdownMenuTrigger, s as Textarea, vn as Avatar, wt as Card, yn as AvatarFallback } from "./src-jSFuc4IV.mjs";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import "@tanstack/react-query";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -2894,6 +2895,155 @@ function createFluidPayApiAdapter(payApi) {
 	};
 }
 //#endregion
-export { MySiteProfileSaveButton as a, mySiteProfileSchema as c, PaymentIcon as d, getCardDisplayName as f, ProfileUIProvider as h, AddressFormDialog as i, socialFields as l, FluidPayCoreProvider as m, mapToFluidPayPaymentMethod as n, MySiteProfileSection as o, getCardExpiry as p, CreditCardFormDialog as r, MySiteProfileSocialSection as s, createFluidPayApiAdapter as t, Profile as u };
+//#region ../../platform/address-autocomplete/src/components/AddressAutocompleteInput.tsx
+const SET_OPTS = {
+	shouldValidate: true,
+	shouldDirty: true,
+	shouldTouch: true
+};
+const DEBOUNCE_MS = 250;
+function AddressAutocompleteInput({ control, setValue, countryIso, addressLineField, cityField, stateField, postalCodeField, placeholder = "Start typing your address...", disabled }) {
+	const api = useAddressAutocompleteApi();
+	const { field } = useController({
+		name: addressLineField,
+		control
+	});
+	const [suggestions, setSuggestions] = useState([]);
+	const [isOpen, setIsOpen] = useState(false);
+	const [needsCountry, setNeedsCountry] = useState(false);
+	const containerRef = useRef(null);
+	const requestIdRef = useRef(0);
+	const debounceTimerRef = useRef(null);
+	const isCountrySelected = useMemo(() => Boolean(countryIso && countryIso.trim() !== ""), [countryIso]);
+	useEffect(() => {
+		function onClickOutside(e) {
+			if (containerRef.current && !containerRef.current.contains(e.target)) {
+				setIsOpen(false);
+				setNeedsCountry(false);
+			}
+		}
+		document.addEventListener("mousedown", onClickOutside);
+		return () => document.removeEventListener("mousedown", onClickOutside);
+	}, []);
+	useEffect(() => () => {
+		if (debounceTimerRef.current !== null) clearTimeout(debounceTimerRef.current);
+	}, []);
+	const populate = useCallback((s) => {
+		setValue(addressLineField, s.streetLine, SET_OPTS);
+		setValue(cityField, s.city, SET_OPTS);
+		setValue(stateField, s.state, SET_OPTS);
+		setValue(postalCodeField, s.postalCode, SET_OPTS);
+	}, [
+		addressLineField,
+		cityField,
+		postalCodeField,
+		setValue,
+		stateField
+	]);
+	const handleChange = useCallback((e) => {
+		const value = e.target.value;
+		field.onChange(value);
+		if (debounceTimerRef.current !== null) {
+			clearTimeout(debounceTimerRef.current);
+			debounceTimerRef.current = null;
+		}
+		if (value.length < 1) {
+			setIsOpen(false);
+			setNeedsCountry(false);
+			setSuggestions([]);
+			return;
+		}
+		if (!isCountrySelected) {
+			setNeedsCountry(true);
+			setIsOpen(true);
+			return;
+		}
+		setNeedsCountry(false);
+		const requestId = ++requestIdRef.current;
+		debounceTimerRef.current = setTimeout(() => {
+			debounceTimerRef.current = null;
+			api.fetchSuggestions({
+				query: value,
+				countryIso
+			}).then((next) => {
+				if (requestId !== requestIdRef.current) return;
+				setSuggestions(next);
+				setIsOpen(true);
+			});
+		}, DEBOUNCE_MS);
+	}, [
+		api,
+		countryIso,
+		field,
+		isCountrySelected
+	]);
+	const handleClick = useCallback(async (suggestion) => {
+		if (debounceTimerRef.current !== null) {
+			clearTimeout(debounceTimerRef.current);
+			debounceTimerRef.current = null;
+		}
+		const clickId = ++requestIdRef.current;
+		if (!suggestion.needsDetailLookup) {
+			populate({
+				streetLine: suggestion.streetLine ?? suggestion.text,
+				city: suggestion.city ?? "",
+				state: suggestion.state ?? "",
+				postalCode: suggestion.postalCode ?? ""
+			});
+			setIsOpen(false);
+			return;
+		}
+		const { details, drilldownSuggestions } = await api.fetchDetails({
+			suggestion,
+			countryIso
+		});
+		if (clickId !== requestIdRef.current) return;
+		if (details) {
+			populate(details);
+			setIsOpen(false);
+			return;
+		}
+		setSuggestions(drilldownSuggestions);
+		setIsOpen(true);
+	}, [
+		api,
+		countryIso,
+		populate
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: "relative",
+		children: [
+			/* @__PURE__ */ jsx(Input, {
+				type: "text",
+				ref: field.ref,
+				value: field.value ?? "",
+				onChange: handleChange,
+				onBlur: field.onBlur,
+				placeholder,
+				disabled
+			}),
+			isOpen && needsCountry && /* @__PURE__ */ jsx("div", {
+				className: "bg-muted text-foreground absolute z-50 mt-1 w-full rounded-md px-3 py-2 text-sm shadow-lg",
+				children: "Please select a country first to enable address suggestions"
+			}),
+			isOpen && !needsCountry && suggestions.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "bg-background text-foreground border-border absolute z-50 mt-1 max-h-60 w-full overflow-y-auto rounded-md border shadow-lg",
+				children: suggestions.map((s) => /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => {
+						handleClick(s).catch((err) => {
+							console.error("Address autocomplete click failed:", err);
+						});
+					},
+					className: "hover:bg-accent block w-full cursor-pointer px-3 py-2 text-left text-sm",
+					children: [s.text, s.needsDetailLookup ? " →" : ""]
+				}, s.id))
+			})
+		]
+	});
+}
+//#endregion
+export { AddressFormDialog as a, MySiteProfileSocialSection as c, Profile as d, PaymentIcon as f, ProfileUIProvider as g, FluidPayCoreProvider as h, CreditCardFormDialog as i, mySiteProfileSchema as l, getCardExpiry as m, createFluidPayApiAdapter as n, MySiteProfileSaveButton as o, getCardDisplayName as p, mapToFluidPayPaymentMethod as r, MySiteProfileSection as s, AddressAutocompleteInput as t, socialFields as u };
 
-//# sourceMappingURL=fluid-pay-api-adapter-CJ7-I8k-.mjs.map
+//# sourceMappingURL=AddressAutocompleteInput-Bdsv2iFU.mjs.map