Browse Source

refactor: standardize modal sheet dimensions and simplify SliderPage navigation logic

master
mortezaei 5 days ago
parent
commit
47f756aa23
  1. 15
      src/app/intro/intro-client.tsx
  2. 2
      src/components/Componentes/question-birthplace.tsx
  3. 2
      src/components/Componentes/question-phone.tsx
  4. 4
      src/components/Componentes/question-sheet.tsx
  5. 13
      src/components/Componentes/slider-page.tsx

15
src/app/intro/intro-client.tsx

@ -125,16 +125,6 @@ export default function IntroClient() {
} }
}; };
const handleSliderComplete = useCallback(
(targetPath: string) => {
const destination = localizePath(targetPath, locale);
router.prefetch?.(destination);
setIsStepsOpen(false);
router.replace(destination);
},
[locale, router],
);
return ( return (
<> <>
<div className="pt-[max(12px,calc(var(--safe-top)+4px))]"> <div className="pt-[max(12px,calc(var(--safe-top)+4px))]">
@ -240,10 +230,7 @@ export default function IntroClient() {
onClose={handleCloseSteps} onClose={handleCloseSteps}
> >
{isStepsOpen && ( {isStepsOpen && (
<SliderPage
onClose={handleCloseSteps}
onComplete={handleSliderComplete}
/>
<SliderPage onClose={handleCloseSteps} />
)} )}
</SectionOverlayHost> </SectionOverlayHost>
</> </>

2
src/components/Componentes/question-birthplace.tsx

@ -576,7 +576,7 @@ export function QuestionBirthplace({
> >
<section <section
className={[ className={[
"flex max-h-[85vh] w-full flex-col overflow-hidden rounded-t-[24px] bg-white shadow-[0_-12px_40px_rgba(0,0,0,0.15)] transition-transform duration-[220ms] ease-out will-change-transform sm:max-w-[440px] animate-in slide-in-from-bottom",
"flex h-[82svh] min-h-[82svh] max-h-[82svh] w-full flex-col overflow-hidden rounded-t-[22px] bg-white pb-[env(safe-area-inset-bottom)] shadow-[0_-10px_32px_rgba(0,0,0,0.12)] transition-transform duration-[220ms] ease-out will-change-transform sm:max-w-[375px] animate-in slide-in-from-bottom",
isClosing ? "translate-y-full" : "translate-y-0", isClosing ? "translate-y-full" : "translate-y-0",
].join(" ")} ].join(" ")}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}

2
src/components/Componentes/question-phone.tsx

@ -782,7 +782,7 @@ export function QuestionPhone({
> >
<section <section
className={[ className={[
"flex h-[82svh] w-full flex-col overflow-hidden rounded-t-[22px] bg-white pb-[env(safe-area-inset-bottom)] shadow-[0_-10px_32px_rgba(0,0,0,0.12)] transition-transform duration-[300ms] ease-out sm:max-w-[375px] animate-in slide-in-from-bottom",
"flex h-[82svh] min-h-[82svh] max-h-[82svh] w-full flex-col overflow-hidden rounded-t-[22px] bg-white pb-[env(safe-area-inset-bottom)] shadow-[0_-10px_32px_rgba(0,0,0,0.12)] transition-transform duration-[300ms] ease-out sm:max-w-[375px] animate-in slide-in-from-bottom",
isClosing ? "translate-y-full" : "translate-y-0", isClosing ? "translate-y-full" : "translate-y-0",
].join(" ")} ].join(" ")}
> >

4
src/components/Componentes/question-sheet.tsx

@ -287,7 +287,9 @@ export function QuestionSheet({ question, disabled }: QuestionSheetProps) {
ref={sheetRef} ref={sheetRef}
className={[ className={[
"flex w-full flex-col overflow-hidden rounded-t-[22px] bg-white pb-[env(safe-area-inset-bottom)] shadow-[0_-10px_32px_rgba(0,0,0,0.12)] transition-transform duration-[300ms] ease-out sm:max-w-[375px] animate-in slide-in-from-bottom", "flex w-full flex-col overflow-hidden rounded-t-[22px] bg-white pb-[env(safe-area-inset-bottom)] shadow-[0_-10px_32px_rgba(0,0,0,0.12)] transition-transform duration-[300ms] ease-out sm:max-w-[375px] animate-in slide-in-from-bottom",
isCompact ? "h-auto max-h-[82svh]" : "h-[82svh]",
isCompact && !showSearch
? "h-auto max-h-[82svh]"
: "h-[82svh] min-h-[82svh] max-h-[82svh]",
isClosing ? "translate-y-full" : "translate-y-0", isClosing ? "translate-y-full" : "translate-y-0",
].join(" ")} ].join(" ")}
> >

13
src/components/Componentes/slider-page.tsx

@ -26,13 +26,9 @@ const SLIDER_ANSWERS_STORAGE_KEY = "marriage-slider-answers";
export type SliderPageProps = { export type SliderPageProps = {
onClose?: () => void; onClose?: () => void;
onComplete?: (targetPath: string) => void;
}; };
export default function SliderPage({
onClose,
onComplete,
}: SliderPageProps = {}) {
export default function SliderPage({ onClose }: SliderPageProps = {}) {
const router = useRouter(); const router = useRouter();
const { locale } = useI18n(); const { locale } = useI18n();
const [activeSlide, setActiveSlide] = useState(0); const [activeSlide, setActiveSlide] = useState(0);
@ -121,12 +117,7 @@ export default function SliderPage({
const targetPath = getSubmitPath(freshProfile); const targetPath = getSubmitPath(freshProfile);
const localizedTarget = localizePath(targetPath, locale); const localizedTarget = localizePath(targetPath, locale);
router.prefetch?.(localizedTarget); router.prefetch?.(localizedTarget);
if (onComplete) {
onComplete(targetPath);
} else {
router.replace(localizedTarget);
}
router.replace(localizedTarget);
} catch (error) { } catch (error) {
console.error("Failed to complete onboarding:", error); console.error("Failed to complete onboarding:", error);
setSubmitError(t["Failed to update profile basic details. Please try again."] || "Failed to update profile basic details. Please try again."); setSubmitError(t["Failed to update profile basic details. Please try again."] || "Failed to update profile basic details. Please try again.");

Loading…
Cancel
Save