@fluid-app/portal-sdk 0.1.248 → 0.1.249

package/dist/{fluid-pay-api-adapter-D63KLi5c.cjs → AddressAutocompleteInput-CbpNjpwB.cjs}

@@ -1,4 +1,5 @@
 require("./chunk-9hOWP6kD.cjs");
+const require_api_context = require("./api-context-BkBvyFVK.cjs");
 const require_parse_api_errors = require("./parse-api-errors-C6noqBqf.cjs");
 const require_src = require("./src-uhf6Szlw.cjs");
 let react = require("react");
@@ -2895,6 +2896,161 @@ function createFluidPayApiAdapter(payApi) {
 	};
 }
 //#endregion
+//#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 = require_api_context.useAddressAutocompleteApi();
+	const { field } = (0, react_hook_form.useController)({
+		name: addressLineField,
+		control
+	});
+	const [suggestions, setSuggestions] = (0, react.useState)([]);
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	const [needsCountry, setNeedsCountry] = (0, react.useState)(false);
+	const containerRef = (0, react.useRef)(null);
+	const requestIdRef = (0, react.useRef)(0);
+	const debounceTimerRef = (0, react.useRef)(null);
+	const isCountrySelected = (0, react.useMemo)(() => Boolean(countryIso && countryIso.trim() !== ""), [countryIso]);
+	(0, react.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);
+	}, []);
+	(0, react.useEffect)(() => () => {
+		if (debounceTimerRef.current !== null) clearTimeout(debounceTimerRef.current);
+	}, []);
+	const populate = (0, react.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 = (0, react.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 = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: containerRef,
+		className: "relative",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Input, {
+				type: "text",
+				ref: field.ref,
+				value: field.value ?? "",
+				onChange: handleChange,
+				onBlur: field.onBlur,
+				placeholder,
+				disabled
+			}),
+			isOpen && needsCountry && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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
+Object.defineProperty(exports, "AddressAutocompleteInput", {
+	enumerable: true,
+	get: function() {
+		return AddressAutocompleteInput;
+	}
+});
 Object.defineProperty(exports, "AddressFormDialog", {
 	enumerable: true,
 	get: function() {
@@ -2986,4 +3142,4 @@ Object.defineProperty(exports, "socialFields", {
 	}
 });
 
-//# sourceMappingURL=fluid-pay-api-adapter-D63KLi5c.cjs.map
+//# sourceMappingURL=AddressAutocompleteInput-CbpNjpwB.cjs.map