|
|
@ -2,7 +2,7 @@ |
|
|
|
|
|
|
|
|
import { useCallback, useEffect, useRef, useState } from "react"; |
|
|
import { useCallback, useEffect, useRef, useState } from "react"; |
|
|
import { createPortal } from "react-dom"; |
|
|
import { createPortal } from "react-dom"; |
|
|
import { getCountryList, COUNTRIES_EN, COUNTRIES_FA } from "@/data/countries"; |
|
|
|
|
|
|
|
|
import { getCountryList, resolveCountryName, COUNTRIES_EN, COUNTRIES_FA } from "@/data/countries"; |
|
|
import type { QuestionField } from "@/lib/schema-adapter"; |
|
|
import type { QuestionField } from "@/lib/schema-adapter"; |
|
|
import { useI18n } from "@/translations/provider"; |
|
|
import { useI18n } from "@/translations/provider"; |
|
|
import { useQuestionAnswers } from "./question-answer-storage"; |
|
|
import { useQuestionAnswers } from "./question-answer-storage"; |
|
|
@ -93,18 +93,21 @@ export function QuestionBirthplace({ |
|
|
const storedRegion = isResidence ? getStoredUserGeoRegion() : null; |
|
|
const storedRegion = isResidence ? getStoredUserGeoRegion() : null; |
|
|
|
|
|
|
|
|
const initial = parseValue(rawValue); |
|
|
const initial = parseValue(rawValue); |
|
|
|
|
|
const localizedInitialCountry = resolveCountryName( |
|
|
|
|
|
initial.country || storedRegion?.country, |
|
|
|
|
|
locale, |
|
|
|
|
|
); |
|
|
|
|
|
const initialCity = initial.city || storedRegion?.city || ""; |
|
|
const initialLoc = |
|
|
const initialLoc = |
|
|
initial.country || initial.city |
|
|
|
|
|
? [initial.city, initial.country].filter(Boolean).join(", ") |
|
|
|
|
|
: storedRegion?.city || storedRegion?.country |
|
|
|
|
|
? [storedRegion.city, storedRegion.country].filter(Boolean).join(", ") |
|
|
|
|
|
: ""; |
|
|
|
|
|
|
|
|
localizedInitialCountry || initialCity |
|
|
|
|
|
? [initialCity, localizedInitialCountry].filter(Boolean).join(", ") |
|
|
|
|
|
: ""; |
|
|
|
|
|
|
|
|
const [selectedCountry, setSelectedCountry] = useState( |
|
|
const [selectedCountry, setSelectedCountry] = useState( |
|
|
() => initial.country || storedRegion?.country || "", |
|
|
|
|
|
|
|
|
() => localizedInitialCountry || "", |
|
|
); |
|
|
); |
|
|
const [cityInput, setCityInput] = useState( |
|
|
const [cityInput, setCityInput] = useState( |
|
|
() => initial.city || storedRegion?.city || "", |
|
|
|
|
|
|
|
|
() => initialCity, |
|
|
); |
|
|
); |
|
|
|
|
|
|
|
|
const [isOpen, setIsOpen] = useState(false); |
|
|
const [isOpen, setIsOpen] = useState(false); |
|
|
@ -170,8 +173,11 @@ export function QuestionBirthplace({ |
|
|
// If there is already a saved answer and we are not forcing, display it
|
|
|
// If there is already a saved answer and we are not forcing, display it
|
|
|
if (rawValue && !force) { |
|
|
if (rawValue && !force) { |
|
|
const parsed = parseValue(rawValue); |
|
|
const parsed = parseValue(rawValue); |
|
|
if (parsed.country || parsed.city) { |
|
|
|
|
|
const loc = [parsed.city, parsed.country].filter(Boolean).join(", "); |
|
|
|
|
|
|
|
|
const cName = resolveCountryName(parsed.country, locale); |
|
|
|
|
|
if (cName || parsed.city) { |
|
|
|
|
|
const loc = [parsed.city, cName].filter(Boolean).join(", "); |
|
|
|
|
|
setSelectedCountry(cName); |
|
|
|
|
|
setCityInput(parsed.city); |
|
|
setDetectedLocation(loc); |
|
|
setDetectedLocation(loc); |
|
|
setMode("auto"); |
|
|
setMode("auto"); |
|
|
return; |
|
|
return; |
|
|
@ -185,7 +191,8 @@ export function QuestionBirthplace({ |
|
|
if (!isMountedRef.current) return; |
|
|
if (!isMountedRef.current) return; |
|
|
|
|
|
|
|
|
const city = region.city || ""; |
|
|
const city = region.city || ""; |
|
|
const country = region.country || ""; |
|
|
|
|
|
|
|
|
const rawCountry = region.country || region.countryCode || ""; |
|
|
|
|
|
const country = resolveCountryName(rawCountry, locale) || rawCountry; |
|
|
|
|
|
|
|
|
if (city || country) { |
|
|
if (city || country) { |
|
|
const loc = [city, country].filter(Boolean).join(", "); |
|
|
const loc = [city, country].filter(Boolean).join(", "); |
|
|
@ -206,7 +213,7 @@ export function QuestionBirthplace({ |
|
|
setIsDetecting(false); |
|
|
setIsDetecting(false); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}, [rawValue]); |
|
|
|
|
|
|
|
|
}, [rawValue, locale]); |
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
useEffect(() => { |
|
|
if (isLoading) return; |
|
|
if (isLoading) return; |
|
|
@ -226,7 +233,8 @@ export function QuestionBirthplace({ |
|
|
} |
|
|
} |
|
|
setMode("manual"); |
|
|
setMode("manual"); |
|
|
const parsed = parseValue(rawValue); |
|
|
const parsed = parseValue(rawValue); |
|
|
const country = selectedCountry || parsed.country; |
|
|
|
|
|
|
|
|
const resolvedC = resolveCountryName(selectedCountry || parsed.country, locale); |
|
|
|
|
|
const country = resolvedC || selectedCountry || parsed.country; |
|
|
const city = cityInput || parsed.city; |
|
|
const city = cityInput || parsed.city; |
|
|
setSelectedCountry(country); |
|
|
setSelectedCountry(country); |
|
|
setCityInput(city); |
|
|
setCityInput(city); |
|
|
@ -236,16 +244,17 @@ export function QuestionBirthplace({ |
|
|
// Synchronize state if rawValue changes externally
|
|
|
// Synchronize state if rawValue changes externally
|
|
|
useEffect(() => { |
|
|
useEffect(() => { |
|
|
const updated = parseValue(rawValue); |
|
|
const updated = parseValue(rawValue); |
|
|
if (updated.country !== selectedCountry) { |
|
|
|
|
|
setSelectedCountry(updated.country); |
|
|
|
|
|
|
|
|
const resolvedC = resolveCountryName(updated.country, locale); |
|
|
|
|
|
if (resolvedC && resolvedC !== selectedCountry) { |
|
|
|
|
|
setSelectedCountry(resolvedC); |
|
|
} |
|
|
} |
|
|
if (updated.city.trim() !== cityInput.trim()) { |
|
|
if (updated.city.trim() !== cityInput.trim()) { |
|
|
setCityInput(updated.city); |
|
|
setCityInput(updated.city); |
|
|
} |
|
|
} |
|
|
if (updated.country && updated.city) { |
|
|
|
|
|
setDetectedLocation(`${updated.city}, ${updated.country}`); |
|
|
|
|
|
|
|
|
if (resolvedC || updated.city) { |
|
|
|
|
|
setDetectedLocation([updated.city, resolvedC].filter(Boolean).join(", ")); |
|
|
} |
|
|
} |
|
|
}, [rawValue]); |
|
|
|
|
|
|
|
|
}, [rawValue, locale]); |
|
|
|
|
|
|
|
|
const options = getCountryList(locale); |
|
|
const options = getCountryList(locale); |
|
|
const filteredOptions = options.filter((option) => |
|
|
const filteredOptions = options.filter((option) => |
|
|
|