- {/* Country Selection Dropdown */}
+ {/* Country Selection Trigger */}
) : (
<>
- {/* 1. Country Selection Dropdown */}
+ {/* 1. Country Selection Trigger */}
setIsOpen(!isOpen)}
+ onClick={openSheet}
className={[
"flex h-[54px] w-full items-center justify-between rounded-[16px] border bg-white px-4.5 text-start transition-all cursor-pointer outline-none",
isOpen
@@ -611,100 +546,14 @@ export function QuestionBirthplace({
/>
-
- {isOpen && (
-
- {options.length > 3 || searchQuery ? (
-
-
-
-
setSearchQuery(e.target.value)}
- placeholder="Search..."
- className="flex-1 bg-transparent text-[14px] font-medium text-[#181818] outline-none placeholder:text-[#98A2B3]"
- />
- {searchQuery ? (
-
setSearchQuery("")}
- className="text-[#667085] hover:text-[#181818] text-xs font-semibold"
- >
- ✕
-
- ) : null}
-
- ) : null}
-
-
e.stopPropagation()}
- onTouchMove={(e) => e.stopPropagation()}
- onTouchEnd={(e) => e.stopPropagation()}
- className="flex max-h-[220px] flex-col gap-3.5 overflow-y-auto overscroll-contain pr-1"
- >
- {filteredOptions.length > 0 ? (
- filteredOptions.map((option) => {
- const isSelected = selectedCountry === option;
-
- return (
-
handleSelectCountry(option)}
- className="flex w-full items-center gap-3 text-start cursor-pointer group/opt py-0.5"
- >
-
-
- {option}
-
-
- );
- })
- ) : (
-
- No options found
-
- )}
-
-
- )}
{/* 2. City Text Input */}
)}
+
+ {/* Country Selection Bottom Sheet Modal */}
+ {isOpen &&
+ createPortal(
+
event.stopPropagation()}
+ onTouchStart={(event) => event.stopPropagation()}
+ onTouchMove={(event) => event.stopPropagation()}
+ onTouchEnd={(event) => event.stopPropagation()}
+ onClick={(e) => {
+ if (e.target === e.currentTarget) {
+ closeSheet();
+ }
+ }}
+ >
+
e.stopPropagation()}
+ >
+ {/* Drag Handle Notch */}
+
+
+ {/* Header with Title and Close Button */}
+
+
+ {selectCountryPlaceholder}
+
+
+
+
+
+
+
+ {/* Search Bar */}
+
+
+
+
+
setSearchQuery(e.target.value)}
+ placeholder={searchPlaceholder}
+ className="flex-1 bg-transparent text-[14px] font-medium text-[#181818] outline-none placeholder:text-[#98A2B3]"
+ />
+ {searchQuery ? (
+
setSearchQuery("")}
+ className="text-[#667085] hover:text-[#181818] text-xs font-semibold p-1 cursor-pointer"
+ >
+ ✕
+
+ ) : null}
+
+
+ {filteredOptions.length > 0 ? (
+ filteredOptions.map((option) => {
+ const isSelected = selectedCountry === option;
+
+ return (
+
handleSelectCountry(option)}
+ className={[
+ "flex w-full items-center gap-3.5 rounded-[16px] p-3.5 text-start transition-all cursor-pointer border",
+ isSelected
+ ? "bg-[#FFF4F5] border-[#F0445B]/30 text-[#181818] shadow-xs"
+ : "bg-[#FAFAFA] hover:bg-[#F2F4F7] border-transparent text-[#181818]",
+ ].join(" ")}
+ >
+
+
+ {option}
+
+
+ );
+ })
+ ) : (
+
+ {noResultsText}
+
+ )}
+
+
,
+ document.body,
+ )}
);
}
diff --git a/src/components/Componentes/question-date-sheet.tsx b/src/components/Componentes/question-date-sheet.tsx
new file mode 100644
index 0000000..6b9514e
--- /dev/null
+++ b/src/components/Componentes/question-date-sheet.tsx
@@ -0,0 +1,348 @@
+"use client";
+
+import {
+ type ReactNode,
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from "react";
+import { createPortal } from "react-dom";
+import type { QuestionField } from "@/lib/schema-adapter";
+import { useI18n } from "@/translations/provider";
+import { useSheetScrollLock } from "./use-sheet-scroll-lock";
+
+const EXIT_ANIMATION_MS = 300;
+const WHEEL_ITEM_HEIGHT = 48;
+const WHEEL_EDGE_PADDING = 108;
+const SCROLL_SETTLE_MS = 90;
+
+const MONTH_VALUES = [
+ "01",
+ "02",
+ "03",
+ "04",
+ "05",
+ "06",
+ "07",
+ "08",
+ "09",
+ "10",
+ "11",
+ "12",
+];
+
+const MIN_AGE = 18;
+const currentYear = new Date().getFullYear();
+const maxBirthYear = currentYear - MIN_AGE;
+const YEARS = Array.from({ length: 80 }, (_, i) =>
+ (maxBirthYear - i).toString(),
+);
+
+function daysInMonth(year: string, month: string): number {
+ const y = Number.parseInt(year, 10);
+ const m = Number.parseInt(month, 10);
+ if (!y || !m) return 31;
+ return new Date(y, m, 0).getDate();
+}
+
+type DatePart = "day" | "month" | "year";
+
+type QuestionDateSheetProps = {
+ question: QuestionField;
+ value: string;
+ onApply: (formattedDate: string) => void;
+ onClose: () => void;
+};
+
+function WheelColumn({
+ ariaLabel,
+ items,
+ selectedIndex,
+ onSelect,
+}: {
+ ariaLabel: string;
+ items: Array<{ value: string; label: ReactNode }>;
+ selectedIndex: number;
+ onSelect: (index: number) => void;
+}) {
+ const listRef = useRef
(null);
+ const settleTimeoutRef = useRef(null);
+ const initialScrollDoneRef = useRef(false);
+
+ useEffect(() => {
+ const frame = window.requestAnimationFrame(() => {
+ const list = listRef.current;
+ if (!list || initialScrollDoneRef.current) return;
+ initialScrollDoneRef.current = true;
+ list.scrollTop = selectedIndex * WHEEL_ITEM_HEIGHT;
+ });
+ return () => window.cancelAnimationFrame(frame);
+ }, []);
+
+ useEffect(() => {
+ return () => {
+ if (settleTimeoutRef.current !== null) {
+ window.clearTimeout(settleTimeoutRef.current);
+ }
+ };
+ }, []);
+
+ const handleScroll = useCallback(() => {
+ const list = listRef.current;
+ if (!list) return;
+ if (settleTimeoutRef.current !== null) {
+ window.clearTimeout(settleTimeoutRef.current);
+ }
+ settleTimeoutRef.current = window.setTimeout(() => {
+ settleTimeoutRef.current = null;
+ const index = Math.max(
+ 0,
+ Math.min(
+ items.length - 1,
+ Math.round(list.scrollTop / WHEEL_ITEM_HEIGHT),
+ ),
+ );
+ if (index !== selectedIndex) {
+ onSelect(index);
+ }
+ }, SCROLL_SETTLE_MS);
+ }, [items.length, onSelect, selectedIndex]);
+
+ return (
+ event.stopPropagation()}
+ onTouchMove={(event) => event.stopPropagation()}
+ onTouchEnd={(event) => event.stopPropagation()}
+ className="h-[264px] flex-1 snap-y snap-mandatory overflow-y-auto overscroll-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+ >
+
+ {items.map((item, index) => {
+ const isSelected = index === selectedIndex;
+ return (
+
+
+ {item.label}
+
+
+ );
+ })}
+
+
{
+ if (event.key === "Escape") closeSheet();
+ }}
+ onClick={(event) => {
+ if (event.target === event.currentTarget) closeSheet();
+ }}
+ >
+
+
+
+ {question.title}
+
+
+
+
+
+
+
+
+
+ {dayLabel}
+ {monthLabel}
+ {yearLabel}
+
+
+
+
+ handleSelect("day", index)}
+ />
+ handleSelect("month", index)}
+ />
+ handleSelect("year", index)}
+ />
+
+
+
+
- {/* 3 Select Dropdowns: Day, Month, Year */}
-
- {/* Day / روز */}
- handleDayChange(e.target.value)}
- disabled={disabled}
- aria-label="Day"
- className="h-[54px] w-full cursor-pointer rounded-[16px] border border-[#D0D5DD] bg-white px-3 text-[15px] font-medium text-[#181818] outline-none transition-all hover:border-[#98A2B3] focus:border-[#6F6F6F] focus:ring-1 focus:ring-[#6F6F6F]"
- >
- Day
- {DAYS.map((d) => (
-
- {d.label}
-
- ))}
-
-
- {/* Month */}
- handleMonthChange(e.target.value)}
- disabled={disabled}
- aria-label="Month"
- className="h-[54px] w-full cursor-pointer rounded-[16px] border border-[#D0D5DD] bg-white px-3 text-[15px] font-medium text-[#181818] outline-none transition-all hover:border-[#98A2B3] focus:border-[#6F6F6F] focus:ring-1 focus:ring-[#6F6F6F]"
- >
- Month
- {months.map((m) => (
-
- {m.label}
-
- ))}
-
-
- {/* Year */}
- handleYearChange(e.target.value)}
- disabled={disabled}
- aria-label="Year"
- className="h-[54px] w-full cursor-pointer rounded-[16px] border border-[#D0D5DD] bg-white px-3 text-[15px] font-medium text-[#181818] outline-none transition-all hover:border-[#98A2B3] focus:border-[#6F6F6F] focus:ring-1 focus:ring-[#6F6F6F]"
+ {/* Date Trigger Field (single input, like the Flutter app's DOB field) */}
+
+
- Year
- {YEARS.map((y) => (
-
- {y}
-
- ))}
-
-
-
- {/* Display Calculated Age */}
-
-
- Age
-
-
+
+
- {isUnder18 ? (
-
- {locale === "fa"
- ? "حداقل سن برای ثبتنام ۱۸ سال میباشد."
- : "Minimum age required for registration is 18 years."}
+ >
+ {displayDate || placeholder}
+
+
+
+
+
+ {calculatedAge !== null ? (
+
+
+ {t.Age || (locale === "fa" ? "سن" : "Age")}
- ) : null}
-
+
+ {isUnder18 ? (
+
+ {locale === "fa"
+ ? "حداقل سن برای ثبتنام ۱۸ سال میباشد."
+ : "Minimum age required for registration is 18 years."}
+
+ ) : null}
+
+ ) : null}
+
+ {isOpen && (
+
setIsOpen(false)}
+ />
+ )}
);
}
diff --git a/src/components/Componentes/question-phone.tsx b/src/components/Componentes/question-phone.tsx
index 9642162..72a0a4a 100644
--- a/src/components/Componentes/question-phone.tsx
+++ b/src/components/Componentes/question-phone.tsx
@@ -1,13 +1,16 @@
"use client";
import { PhoneNumberFormat, PhoneNumberUtil } from "google-libphonenumber";
-import { useEffect, useRef, useState, useMemo, useCallback } from "react";
-import type { QuestionField } from "@/lib/schema-adapter";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
import type { MarriagePhoneFieldValue } from "@/hooks/marriage/types";
+import type { QuestionField } from "@/lib/schema-adapter";
+import { useI18n } from "@/translations/provider";
import { useQuestionAnswers } from "./question-answer-storage";
import QuestionTitle from "./question-title";
-import { LoadingSkeleton } from "./loading-skeleton";
-import { useI18n } from "@/translations/provider";
+import { useSheetScrollLock } from "./use-sheet-scroll-lock";
+
+const EXIT_ANIMATION_MS = 300;
type QuestionPhoneProps = {
question: QuestionField;
@@ -226,7 +229,7 @@ export function QuestionPhone({
countryCode = "+44",
disabled,
}: QuestionPhoneProps) {
- const { locale } = useI18n();
+ const { dictionary: t, locale } = useI18n();
const { getAnswerValue, setAnswerValue, isLoading } = useQuestionAnswers();
const value = getAnswerValue(question);
const defaultCodeValue = countryCode.trim() || "+44";
@@ -263,29 +266,25 @@ export function QuestionPhone({
const hasFetchedIpRef = useRef(false);
const userInteractedRef = useRef(false);
- const needsIpFetch = useCallback(() => {
- if (typeof window === "undefined") return false;
- if (localStorage.getItem("geoIPPhoneCode")) return false;
- if (localStorage.getItem("hasCheckedGeoIPPhone")) return false;
- return true;
- }, []);
-
- const [isResolvingCode, setIsResolvingCode] = useState(() => {
- if (isLoading) return true;
- const hasSavedValue =
- value &&
- ((isMarriagePhoneFieldValue(value) &&
- (value.countryCode || value.phoneNumber)) ||
- (typeof value === "string" && value.trim().length > 0));
- if (hasSavedValue) return false;
- return needsIpFetch();
- });
-
const [isOpen, setIsOpen] = useState(false);
+ const [isClosing, setIsClosing] = useState(false);
const [searchQuery, setSearchQuery] = useState("");
- const containerRef = useRef(null);
const listRef = useRef(null);
const searchInputRef = useRef(null);
+ const closeSheet = useCallback(() => {
+ setIsClosing(true);
+ window.setTimeout(() => {
+ setIsOpen(false);
+ setIsClosing(false);
+ setSearchQuery("");
+ }, EXIT_ANIMATION_MS);
+ }, []);
+
+ const openSheet = useCallback(() => {
+ if (disabled) return;
+ setIsOpen(true);
+ setIsClosing(false);
+ }, [disabled]);
const normalizedPhoneState = getNormalizedPhoneValue(codeValue, phoneValue);
const showInvalidState =
@@ -333,7 +332,7 @@ export function QuestionPhone({
code: `+${callingCode}`,
flag,
});
- } catch (e) {}
+ } catch {}
}
return list.sort((a, b) => a.name.localeCompare(b.name));
@@ -348,6 +347,13 @@ export function QuestionPhone({
return match ? match.flag : "🏳️";
}, [codeValue, countryList]);
+ const selectedCountry = useMemo(() => {
+ const cleanActiveCode = codeValue.replace(/[^\d]/g, "");
+ return countryList.find(
+ (country) => country.code.replace(/[^\d]/g, "") === cleanActiveCode,
+ );
+ }, [codeValue, countryList]);
+
const filteredCountries = useMemo(() => {
const q = searchQuery.toLowerCase().trim();
if (!q) return countryList;
@@ -357,48 +363,17 @@ export function QuestionPhone({
);
}, [countryList, searchQuery]);
- // Lock page scroll when dropdown is open
- useEffect(() => {
- if (isOpen) {
- document.body.classList.add("dropdown-open");
- document.body.style.overflow = "hidden";
- document.documentElement.style.overflow = "hidden";
- } else {
- document.body.classList.remove("dropdown-open");
- document.body.style.overflow = "";
- document.documentElement.style.overflow = "";
- }
- return () => {
- document.body.classList.remove("dropdown-open");
- document.body.style.overflow = "";
- document.documentElement.style.overflow = "";
- };
- }, [isOpen]);
+ useSheetScrollLock(isOpen);
useEffect(() => {
- if (isOpen) {
- const timer = setTimeout(() => {
- searchInputRef.current?.focus();
- }, 50);
- return () => clearTimeout(timer);
- }
- }, [isOpen]);
+ if (!isOpen) return;
- // Close dropdown on click outside
- useEffect(() => {
- function handleClickOutside(event: MouseEvent) {
- if (
- containerRef.current &&
- !containerRef.current.contains(event.target as Node)
- ) {
- setIsOpen(false);
- }
- }
- document.addEventListener("mousedown", handleClickOutside);
- return () => {
- document.removeEventListener("mousedown", handleClickOutside);
+ const handleKeyDown = (event: KeyboardEvent) => {
+ if (event.key === "Escape") closeSheet();
};
- }, []);
+ window.addEventListener("keydown", handleKeyDown);
+ return () => window.removeEventListener("keydown", handleKeyDown);
+ }, [closeSheet, isOpen]);
// Sync state if external value changes (e.g. backend data loaded)
useEffect(() => {
@@ -497,7 +472,7 @@ export function QuestionPhone({
.then((res) => res.json())
.then((data) => {
clearTimeout(timeoutId);
- if (data && data.country_calling_code) {
+ if (data?.country_calling_code) {
applyCode(data.country_calling_code);
} else {
throw new Error("No calling code in response");
@@ -515,7 +490,7 @@ export function QuestionPhone({
.then((res) => res.json())
.then((data) => {
clearTimeout(secondaryTimeoutId);
- if (data && data.calling_code) {
+ if (data?.calling_code) {
applyCode(data.calling_code);
} else {
applyFallback();
@@ -561,13 +536,13 @@ export function QuestionPhone({
setCodeValue(selectedCode);
setPhoneValue(truncatedPhone);
updateStoredValue(selectedCode, truncatedPhone);
- setIsOpen(false);
- setSearchQuery("");
+ closeSheet();
};
+ const selectCountryTitle = t["Select country"] || question.title;
+
return (
setIsOpen(!isOpen)}
+ onClick={openSheet}
className="flex items-center gap-1.5 h-full px-2 rounded-lg hover:bg-gray-50 active:bg-gray-100 transition-colors cursor-pointer outline-none border-0 text-[15px] font-medium leading-none text-[#181818] tabular-nums"
>
{activeFlag}
{codeValue || defaultCodeValue}
-
+
) : null}
- {/* Dropdown Options Panel */}
- {isOpen && (
-
- {/* Search Input Bar */}
-
-
-
-
setSearchQuery(e.target.value)}
- placeholder={
- locale === "fa"
- ? "جستجوی کشور یا پیششماره..."
- : "Search country or dial code..."
- }
- className="flex-1 bg-transparent text-[14px] font-medium text-[#181818] outline-none placeholder:text-[#98A2B3]"
- />
- {searchQuery ? (
-
setSearchQuery("")}
- className="text-[#667085] hover:text-[#181818] text-xs font-semibold"
- >
- ✕
-
- ) : null}
-
-
- {/* Country List */}
+ {/* The phone field moves up while the country sheet enters from below. */}
+ {isOpen &&
+ createPortal(
{
+ if (event.key === "Escape") closeSheet();
+ }}
+ onClick={(event) => {
+ if (event.target === event.currentTarget) closeSheet();
+ }}
>
- {filteredCountries.length > 0 ? (
- filteredCountries.map((c) => {
- return (
-
handleSelectCountryCode(c.code)}
- className="flex w-full items-center justify-between text-start cursor-pointer group/opt py-0.5"
+
+
+
+ {selectCountryTitle}
+
+
+
+
+
+
-
- {c.flag}
-
- {c.name}
-
-
-
- {c.code}
-
-
- );
- })
- ) : (
-
- {locale === "fa" ? "موردی یافت نشد" : "No options found"}
-
- )}
-
-
setSearchQuery("")}
+ aria-label={selectCountryTitle}
+ className="flex size-7 items-center justify-center rounded-md text-[#667085] hover:bg-white hover:text-[#181818] text-xs font-semibold"
+ >
+ ✕
+
+ ) : null}
+
+