diff --git a/src/app/intro/intro-client.tsx b/src/app/intro/intro-client.tsx index bcf6d05..2344081 100644 --- a/src/app/intro/intro-client.tsx +++ b/src/app/intro/intro-client.tsx @@ -2,15 +2,18 @@ import Image from "next/image"; import { useRouter } from "next/navigation"; -import { useState } from "react"; +import { useCallback, useEffect, useState } from "react"; import Button from "@/components/Componentes/button"; import NetworkImage from "@/components/Componentes/network-image"; import PageHeader from "@/components/Componentes/page-header"; import ReportActionsSheet from "@/components/Componentes/report-actions-sheet"; +import SectionOverlayHost from "@/components/Componentes/section-overlay-host"; +import SliderPage from "@/components/Componentes/slider-page"; import VideoPlayer from "@/components/Componentes/video-player"; import { useMarriageConfigQuery } from "@/hooks/marriage/use-marriage-config"; import { useMarriageProfileQuery } from "@/hooks/marriage/use-profile-main"; import { useHabibWebReady } from "@/hooks/use-habib-web-ready"; +import { useHardwareBackHandler } from "@/hooks/use-hardware-back-handler"; import { authBridge } from "@/lib/auth-bridge"; import { getSubmitPath } from "@/lib/get-submit-path"; import { localizePath } from "@/translations/config"; @@ -26,6 +29,7 @@ export default function IntroClient() { const [isReportSheetOpen, setIsReportSheetOpen] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false); const [isPlayerOpen, setIsPlayerOpen] = useState(false); + const [isStepsOpen, setIsStepsOpen] = useState(false); const { data: config } = useMarriageConfigQuery(); @@ -33,6 +37,47 @@ export default function IntroClient() { // image so we don't need to wait for it — announce immediately on mount. useHabibWebReady(true); + useEffect(() => { + const readStepsFromUrl = () => { + if (typeof window === "undefined") return; + const params = new URLSearchParams(window.location.search); + setIsStepsOpen(params.get("steps") === "open"); + }; + + readStepsFromUrl(); + window.addEventListener("popstate", readStepsFromUrl); + return () => window.removeEventListener("popstate", readStepsFromUrl); + }, []); + + const handleOpenSteps = useCallback(() => { + setIsStepsOpen(true); + if (typeof window !== "undefined") { + const url = new URL(window.location.href); + url.searchParams.set("steps", "open"); + window.history.pushState({ steps: "open" }, "", url.toString()); + } + }, []); + + const handleCloseSteps = useCallback(() => { + if (typeof window !== "undefined") { + const params = new URLSearchParams(window.location.search); + if (params.get("steps") === "open") { + setIsStepsOpen(false); + window.history.back(); + return; + } + } + setIsStepsOpen(false); + }, []); + + useHardwareBackHandler(() => { + if (isStepsOpen) { + handleCloseSteps(); + return true; // handled: keep WebView open, just close the overlay + } + return false; // Root: tell Flutter to close WebView screen + }, isStepsOpen); + const handleSubmit = async () => { if (isSubmitting) { return; @@ -61,137 +106,148 @@ export default function IntroClient() { } const submitPath = getSubmitPath(profileResponse); - const nextPath = localizePath( - submitPath === "/intro" ? "/terms" : submitPath, - locale, - ); - router.push(nextPath); + if (submitPath === "/intro" || submitPath === "/terms") { + handleOpenSteps(); + } else { + router.push(localizePath(submitPath, locale)); + } } catch (error) { console.error("Submission/redirect failed", error); - router.push(localizePath("/terms", locale)); + handleOpenSteps(); } finally { setIsSubmitting(false); } }; return ( -
- {isReportSheetOpen && ( - setIsReportSheetOpen(false)} /> - )} - setIsReportSheetOpen(true), - }} - /> -
-
- {t["heavenly -

- {t["A Path to Heavenly Marriage"]} -

-

- { - t[ - 'We have come together with the goal of creating a secure and confidential path for "permanent marriage" among Muslims' - ] - } -

-
-
-
+ <> +
+ {isReportSheetOpen && ( + setIsReportSheetOpen(false)} /> + )} + setIsReportSheetOpen(true), + }} + /> +
+
{t["user -
-

120

-

- {t["user profiles"]} -

+

+ {t["A Path to Heavenly Marriage"]} +

+

+ { + t[ + 'We have come together with the goal of creating a secure and confidential path for "permanent marriage" among Muslims' + ] + } +

+
+
+
+ {t["user +
+

120

+

+ {t["user profiles"]} +

+
+
+
+ {t["matches"]} +
+

14

+

+ {t["matches"]} +

+
+
+
+ {t["marriages"]} +
+

14

+

+ {t["marriages"]} +

+
-
- {t["matches"]} setIsPlayerOpen(true)} + > + -
-

14

-

- {t["matches"]} -

-
-
-
+
{t["marriages"]} -
-

14

-

- {t["marriages"]} -

-
-
-
setIsPlayerOpen(true)} - > - -
- {t["play"]} -
- setIsPlayerOpen(false)} - videoUrl={config?.intro_video_url} - /> -
-
- + +
-
-
-
+
+
+ + + {isStepsOpen && ( + + )} + + ); } diff --git a/src/components/Componentes/slider-page.tsx b/src/components/Componentes/slider-page.tsx index 0a46f21..ec2b09e 100644 --- a/src/components/Componentes/slider-page.tsx +++ b/src/components/Componentes/slider-page.tsx @@ -24,7 +24,11 @@ const FINAL_SLIDE_COUNT = 5; const SWIPE_THRESHOLD = 40; const SLIDER_ANSWERS_STORAGE_KEY = "marriage-slider-answers"; -export default function SliderPage() { +export type SliderPageProps = { + onClose?: () => void; +}; + +export default function SliderPage({ onClose }: SliderPageProps = {}) { const router = useRouter(); const { locale } = useI18n(); const [activeSlide, setActiveSlide] = useState(0); @@ -169,7 +173,11 @@ export default function SliderPage() { console.warn("sessionStorage is not accessible:", e); } } - router.back(); + if (onClose) { + onClose(); + } else { + router.back(); + } }} />